/* =====================================================================
   Homeschool — the whole theme.
   =====================================================================

   Every color and radius a page uses is a token here. A template never
   carries a hex literal or a pixel radius, in a <style> block or a style=
   attribute: if the value you want is not a token, add a token.

   TWO FAMILIES OF COLOR THAT NEVER MIX
   --brand carries identity and may one day be chosen per family.
   --risk / --warn / --ok carry INFORMATION and are never customizable:
   a missed day must never be restylable into a met one.

   BOOTSTRAP is configured rather than fought: its own custom properties
   are assigned from these tokens below, so cards, buttons, tables and
   form controls follow the theme without being overridden one by one.
   ===================================================================== */

:root {
    /* --- paper and ink ------------------------------------------------- */
    --paper:      #f7f6f2;
    --surface:    #ffffff;
    --surface-2:  #efede7;
    --ink:        #1b1d24;
    --ink-soft:   #555a66;
    --ink-faint:  #8a8f99;
    --rule:       #e2dfd7;

    /* --- identity (the only family a household may ever change) ------ */
    /* Deep indigo: reads as "serious tool", not "kids' app" — they are 14 and 15. */
    --brand:      #3b3a8c;
    --brand-ink:  #ffffff;
    --brand-wash: #ebeaf7;
    --brand-edge: #c9c7ea;

    /* --- meaning (never customizable) --------------------------------- */
    --risk:       #a3302a;   /* missed, late, wrong */
    --risk-wash:  #f9eceb;
    --warn:       #8a5a12;   /* waiting on somebody, due soon */
    --warn-wash:  #f8f1e2;
    --ok:         #2f6b4f;   /* met, approved, mastered */
    --ok-wash:    #e8f0ea;

    /* --- terrain (scenery: neither identity nor information) ---------- */
    --terrain-water:    #7fa7c4;
    --terrain-sand:     #e3d3a4;
    --terrain-grass:    #9dbb7c;
    --terrain-forest:   #5f8a5a;
    --terrain-hills:    #a89f7c;
    --terrain-mountain: #8a8580;
    --terrain-fog:      #2b2d3a;

    /* --- type ---------------------------------------------------------- */
    /* Atkinson Hyperlegible: drawn for telling similar glyphs apart, which
       matters on a screen full of numbers someone is being timed on. */
    --font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* --- shape --------------------------------------------------------- */
    --radius:     12px;
    --radius-sm:  6px;
    --shadow-1:   0 1px 2px rgba(20, 20, 40, .06), 0 2px 8px rgba(20, 20, 40, .04);

    /* --- Bootstrap, reading from the above ----------------------------- */
    --bs-body-bg:             var(--paper);
    --bs-body-color:          var(--ink);
    --bs-body-font-family:    var(--font);
    --bs-secondary-color:     var(--ink-soft);
    --bs-border-color:        var(--rule);
    --bs-border-radius:       var(--radius-sm);
    --bs-border-radius-lg:    var(--radius);
    --bs-link-color:          var(--brand);
    --bs-link-color-rgb:      59, 58, 140;
    --bs-link-hover-color:    var(--ink);
    --bs-card-bg:             var(--surface);
    --bs-font-monospace:      var(--mono);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
}

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-color: var(--brand-ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-bg: var(--ink);
}

.alert-danger  { --bs-alert-bg: var(--risk-wash); --bs-alert-color: var(--risk); --bs-alert-border-color: var(--risk-wash); }
.alert-warning { --bs-alert-bg: var(--warn-wash); --bs-alert-color: var(--warn); --bs-alert-border-color: var(--warn-wash); }
.alert-success { --bs-alert-bg: var(--ok-wash);   --bs-alert-color: var(--ok);   --bs-alert-border-color: var(--ok-wash); }

/* ---------------------------------------------------------------------
   Shared pieces. A class says what the thing IS, never what screen it
   is on — a one-word class that is unambiguous in one file is a
   land-grab on all of them, and it will collide with Bootstrap.
   --------------------------------------------------------------------- */

/* The bar across the top of every signed-in page. */
.app-bar {
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.app-bar .app-name {
    color: var(--brand);
    font-weight: 700;
    letter-spacing: .01em;
}

/* A narrow centered column: sign-in, error pages. */
.narrow-column {
    max-width: 480px;
    width: 100%;
}

/* The small uppercase label over a value. */
.eyebrow {
    color: var(--ink-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A person, as a tile you can open. */
.person-tile {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    text-decoration: none;
}
.person-tile:hover {
    background: var(--brand-wash);
    color: var(--ink);
}

/* What someone is in the family. Identity, not information: brand colors. */
.role-chip {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--radius-sm);
    background: var(--brand-wash);
    color: var(--brand);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
}

/* One demo account on the sign-in page. A testing aid, sized like one. */
.demo-account {
    padding: .5rem .75rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}
.demo-account code {
    font-size: .8rem;
}

/* ---------------------------------------------------------------------
   Practice and content
   --------------------------------------------------------------------- */

/* The words of a question. Big: it is the one thing on the page. */
.question-prompt {
    font-size: 1.35rem;
    line-height: 1.5;
}

.answer-input {
    max-width: 14rem;
    font-family: var(--mono);
    font-size: 1.25rem;
}

/* The running clock. Monospace so the digits do not jiggle. */
.question-timer {
    font-family: var(--mono);
    color: var(--ink-soft);
}

/* Right and wrong are information: meaning colors, never the brand. */
.verdict {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
}
.verdict-right { background: var(--ok-wash);   color: var(--ok); }
.verdict-wrong { background: var(--risk-wash); color: var(--risk); }

/* A rating moving. Up is ok, down is risk, nothing is ink. */
.rating-change-up   { color: var(--ok);   font-weight: 700; }
.rating-change-down { color: var(--risk); font-weight: 700; }

/* A rating, as a figure. */
.rating-figure {
    font-family: var(--mono);
    font-weight: 600;
}

/* Where a kind of question stands with the parents. Information, so meaning colors. */
.status-chip {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--radius-sm);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.status-chip-in_review { background: var(--warn-wash); color: var(--warn); }
.status-chip-approved  { background: var(--ok-wash);   color: var(--ok); }
.status-chip-rejected  { background: var(--risk-wash); color: var(--risk); }

/* Formulas and parameter lists: code, so they read as code. */
.formula-text {
    font-family: var(--mono);
    font-size: .9rem;
}

/* One sample variant a parent judges. */
.sample-variant {
    padding: .75rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

/* A list of problems stopping approval. Information: risk. */
.problem-list {
    color: var(--risk);
}

/* ---------------------------------------------------------------------
   The daily rule
   --------------------------------------------------------------------- */

/* Where a school day stands. Information, so meaning colors: a missed
   day must never be restylable into a met one. */
.day-chip {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--radius-sm);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.day-chip-scheduled { background: var(--warn-wash); color: var(--warn); }
.day-chip-met       { background: var(--ok-wash);   color: var(--ok); }
.day-chip-exempt    { background: var(--surface-2); color: var(--ink-soft); }
.day-chip-missed    { background: var(--risk-wash); color: var(--risk); }

/* The combo, as a figure. Identity, not information: it is the game's
   number, so it wears the brand. */
.combo-figure {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--brand);
}

/* A bar filling toward today's minimum. */
.minimum-bar {
    height: .5rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.minimum-bar-fill {
    height: 100%;
    background: var(--ok);
}

/* A missed day, on the parent's home page. */
.missed-alert {
    padding: .5rem .75rem;
    background: var(--risk-wash);
    color: var(--risk);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   The world
   --------------------------------------------------------------------- */

/* Terrain is scenery: decoration, neither identity nor information. */
.tile-water    { fill: var(--terrain-water); }
.tile-sand     { fill: var(--terrain-sand); }
.tile-grass    { fill: var(--terrain-grass); }
.tile-forest   { fill: var(--terrain-forest); }
.tile-hills    { fill: var(--terrain-hills); }
.tile-mountain { fill: var(--terrain-mountain); }
.tile-fog      { fill: var(--terrain-fog); }

.world-map {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    background: var(--terrain-fog);
}

/* Where the learner started. The brand: it is them on the map. */
.world-spawn {
    fill: var(--brand);
    stroke: var(--surface);
    stroke-width: 2;
}

/* One line of the character sheet. */
.stat-line {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--rule);
}
.stat-value {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.4rem;
    min-width: 2.5rem;
    color: var(--brand);
}

/* ---------------------------------------------------------------------
   Grading
   --------------------------------------------------------------------- */

/* Sent, and waiting for a parent: not right, not wrong. */
.verdict-waiting { background: var(--warn-wash); color: var(--warn); }

/* What the learner wrote, kept as they wrote it. */
.response-text {
    white-space: pre-wrap;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

/* The grader's suggestion: shown beside the answer, never mistaken for the grade. */
.grader-suggestion {
    padding: .75rem 1rem;
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
}

/* What kind of work a line is. Identity, not information. */
.format-chip {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
}