/* ============================================================
   practice-engine.css — the shared surface language for Patina's
   PRACTICE ENGINES, on both the citizenship site and the volunteer portal.

   WHY THIS FILE EXISTS, AND WHY IT IS SEPARATE FROM style.css
   ------------------------------------------------------------
   Brian, 2026-09-09, walking the reading engine: the screens read like an
   early-2000s web form and every word that was not a heading was hard to
   read. Three causes, none of them the typeface:

     1. NESTED OUTLINED BOXES. .screen-card is a bordered box holding
        bordered rows holding text — a border AND a shadow AND a tint at
        every level of nesting. That is the <fieldset> look. Modern
        interfaces pick ONE separation method per level.
     2. TWO TYPE SYSTEMS ON ONE SITE. The engines were Lora + Source Sans 3;
        everything else is DM Sans. The engines read as an older product
        bolted onto a newer site, because that is literally what they looked
        like.
     3. A TAN READING INK. --ink-soft #6b6358 is hue 35. It was the colour of
        every lede, option description, section label and privacy note, all
        of it 5.2-5.9 contrast: passes AA, reads washed on a tinted ground.
        That is why nothing ever caught it.

   Also: one full-width row was used for EVERY choice, so a binary choice and
   a ternary choice looked identical and every engine's entry screen was the
   same five stacked rectangles. Reading and Civics were the same screen.

   THE RULE THIS FILE FOLLOWS
   ------------------------------------------------------------
   Not one hex. Every colour is --prog-* (this surface's program), --ok-*
   (correct), --bad-* (try again) or --ink-read* (neutral reading ink), all
   generated from brand/colors.json by scripts/gen-colors.js.

   That is what lets ONE file serve both sites: load it on a citizenship
   exercise and it is green, load it on the volunteer guided session and it
   is terracotta, with no edit. Colour means program; layout is universal.

   OPT-IN, NEVER OPT-OUT
   ------------------------------------------------------------
   A page gets this language by linking this file AFTER css/style.css.
   The three flashcard decks deliberately do NOT link it — Brian keeps their
   varied dark palettes ("I love that they're so different"), and they are
   already exempt in the registry. Exclusion by construction beats a guard:
   they share .screen-card and .lead with the engines, so a blanket change to
   style.css would have leaked into them.
   ============================================================ */

/* ── Surface: one separation method per level ─────────────── */
.screen-card {
  border: none;
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 1px 2px rgba(28,58,44,.05), 0 6px 24px -8px rgba(28,58,44,.13);
}

/* ── One type system, matching the other 79 pages ─────────── */
body,
.lead,
.btn,
.assessment-card-title,
.assessment-card-desc,
.profile-picker button,
.profile-picker button .name,
.profile-picker button .summary,
.sensitive-note,
.sensitive-note .label,
h1, h2, h3 {
  font-family: 'DM Sans', 'Noto Sans Myanmar', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Scale. Sizes go UP: the readers are adult learners, many reading a
   second language on a phone. The section headings go DOWN and become
   labels, which widens the gap between levels without the page getting
   louder — they were never headings, they are labels on a control. ── */
h1 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
}
.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-read);
}
.screen-card h2 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--ink-read-soft);
  margin: 0 0 12px;
}
#difficulty-block h2 { margin-top: 28px; }

/* ── The right component per choice. A binary choice is two things side by
   side; a ternary choice is three. #mode-picker is exactly 2 options and
   #difficulty-picker exactly 3 on every engine that has them (reading,
   writing, civics, civics-100, vocabulary), so these land correctly
   everywhere without per-page work. Pickers with other option counts
   (#section-picker, #persona-picker, #fc-picker) keep the stacked list,
   which is right for them. ── */
#mode-picker       { display: grid; grid-template-columns: 1fr 1fr;      gap: 10px; margin: 0; }
#difficulty-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0; }

.profile-picker button {
  border: none;
  background: #F0F1F1;            /* neutral, not the old hue-48 tan fill */
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  position: relative;
}
.profile-picker button .name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.profile-picker button .summary {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-read);
}

/* PICKED is the action colour, 2px, on white — so it reads by VALUE and
   SHAPE, not by tint alone. It is deliberately NOT green: green inside this
   card is reserved for "correct". That matters twice over: it keeps "the option I
   chose" distinct from "the answer I got right" (which is a light --ok-tint
   FILL), and it satisfies not-by-colour-alone for low-vision readers. */
.profile-picker button.selected {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px var(--action);
}
.profile-picker button.selected .name { color: var(--action); }

/* ── Level indicator: which one is harder, legible before you read a word.
   Drawn in CSS, so no icon file and no decorative emoji. ── */
#difficulty-picker button::before {
  content: "";
  display: block;
  width: 34px;
  height: 5px;
  border-radius: 3px;
  margin-bottom: 7px;
  background: linear-gradient(to right,
    var(--action) 0 8px, transparent 8px 12px,
    #CFD2D1 12px 20px, transparent 20px 24px,
    #CFD2D1 24px 32px);
}
#difficulty-picker button[data-difficulty="medium"]::before {
  background: linear-gradient(to right,
    var(--action) 0 8px, transparent 8px 12px,
    var(--action) 12px 20px, transparent 20px 24px,
    #CFD2D1 24px 32px);
}
#difficulty-picker button[data-difficulty="hard"]::before {
  background: linear-gradient(to right,
    var(--action) 0 8px, transparent 8px 12px,
    var(--action) 12px 20px, transparent 20px 24px,
    var(--action) 24px 32px);
}

/* ── The privacy line is a note, not a third slab inside the second one ── */
.sensitive-note {
  background: transparent;
  border: none;
  border-top: 1px solid #E4E6E5;
  border-radius: 0;
  padding: 16px 0 0;
  margin-top: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-read);
}
.sensitive-note .label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-read-soft);
  margin-bottom: 4px;
}

/* ── Actions ──────────────────────────────────────────────────
   GREEN IS NOT "GO" ANY MORE. Brian, 2026-09-09: "green means correct, green
   also means go, and green also means patina — there's just so much green that
   everything feels correct, which is awfully incorrect." Measured on the
   reading engine, saturated green (chroma >= 0.10) covered 6.85% of the working
   card. After this file it is 0.00%: the only saturated green a student sees
   inside the card is the one that means they were right.

   --action is program-NEUTRAL on purpose, so this stays one file for both
   sites. Green keeps the header, the footer and the page wash, all of which
   sit outside the card and so do not compete with the signal inside it. ── */
.btn { border-radius: 12px; }
.btn-primary {
  background: var(--action);
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(74,55,40,.26);
}
.btn-primary:active { background: var(--action); box-shadow: none; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--action-hover); box-shadow: 0 4px 12px rgba(74,55,40,.30); }
}
.btn-secondary { color: var(--action); border-color: #CFD2D1; }

/* ── A 3-up must not become three slivers on a phone ──────── */
@media (max-width: 640px) {
  #mode-picker, #difficulty-picker { grid-template-columns: 1fr; }
}

/* ── Category labels stop borrowing the colour of "correct" ──────────────
   The level chip (READING — BEGINNER) and the tinted instruction panels were
   green. Neither is a success signal; both were spending the one colour that
   should mean a student got something right. ── */
.section-label {
  background: #EFEFED;
  color: var(--ink-read);
  border-color: #DFDFDC;
}
.task-header, .audio-hint {
  background: #F3F3F1;
  border-left-color: #C9CBC9;
  color: var(--ink-read);
}

/* ── A focused field is an INTERACTION, not a success ──────────────────
   .answer-input:focus and .user-input:focus were --accent green, so the
   moment a student started typing the box turned the colour of "correct"
   before anything had been checked. ── */
.answer-input:focus,
.user-input:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(74,55,40,.16);
}

/* ── Measure and content-first scale ───────────────────────────────────
   Brian, 2026-09-09, walking the preview at 100%: "I needed to immediately
   increase to 130% to actually be legible." Two causes, and the type was only
   half of it.

   1. THE MEASURE. .container in css/style.css is max-width 640px — a
      mobile-first number that was never widened for a desktop. On a 1905px
      display that is 34% of the width, so two thirds of the screen is empty
      margin and everything reads small regardless of point size. Widened here
      rather than in style.css because this file is opt-in: the three exempt
      flashcard decks and everything on patina-brand.css keep their own widths.
      Running text is capped separately, because a 56ch measure is right for a
      paragraph even when the card around it is wider.

   2. THE HIERARCHY WAS INVERTED. The page title was 38px and the sentence a
      student actually reads was 26px — the label you read once outranked the
      content you read every question, and the earlier h1 bump in this file made
      that gap worse. The engine already knew better: in teaching mode
      .pf-card .reading-sentence is clamp(34px, min(8vw,9vh), 72px). It simply
      never did it on the student's own screen.

   Brian's call: "legibility is more important than modernity." ── */
.container { max-width: 860px; }
.lead { max-width: 56ch; }

h1 { font-size: 30px; }

/* The thing the student is actually working on, in every engine that has one. */
.reading-sentence { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.4; }
.question-text    { font-size: clamp(28px, 3.0vw, 36px); line-height: 1.32; }
.mc-option        { font-size: 19px; }
.answer-input, .user-input, .writing-input { font-size: 24px; }

/* ============================================================
   THE 2026-09-28 DESIGN PASS: the Civics Test Words look, on the engines.
   Brian, on pages/civics-words: "the best looking combination of all of the
   colors and layout design of any page on the website... I want this to be
   the standard by which all of the other exercises work." Start with the
   oldest engines (civics, reading, writing, N-400).

   OPT-IN BY CLASS: a page gets this pass with <body class="pe-v2">, so it can
   be rolled out one engine at a time and nothing changes on a page that has
   not been looked at. Everything above this block still applies underneath.

   What it adds, all from pages/civics-words.html:
     - a cool near-white page instead of the green-to-cream wash (no tan field,
       Brian 2026-08-12)
     - a PHOTO HERO: the engine's vetted public-domain photo under a deep-green
       gradient, white title, stat chips. It collapses to a slim band once the
       questions start (js/practice-hero.js sets body.pe-running), because the
       question is the content then, not the title.
     - the setup card LIFTED over the hero's foot
     - the progress bar as a DARK STRIP above the question card, like the game
       card's header
     - answer choices as bold white tiles that lift on hover
   Green inside the working card still means correct and nothing else; the
   action colour stays brown. ============================================================ */
body.pe-v2 {
  background: #F4F7F6;
  background-image: none;
  overflow-x: clip;
}
.pe-v2 .container { padding-top: 0; }

/* ── Photo hero, full bleed from inside the container ── */
.pe-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(16,46,36,.97) 0%, rgba(16,46,36,.9) 42%, rgba(16,46,36,.4) 78%, rgba(16,46,36,.2) 100%),
    var(--pe-photo, none) right 40% / cover no-repeat,
    #163D30;
}
.pe-hero-in { max-width: 860px; margin: 0 auto; padding: 30px 18px 86px; }
.pe-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--prog-light); }
.pe-v2 .pe-hero h1 { font-size: 42px; line-height: 1.08; margin: 0 0 12px; color: #fff; }
.pe-v2 .pe-hero .lead { color: rgba(255,255,255,.9); margin: 0; max-width: 52ch; }
.pe-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pe-stats li { font-size: 14.5px; font-weight: 700; padding: 6px 13px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.pe-hero .sensitive-note { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); margin: 18px 0 0 !important; max-width: 60ch; }
.pe-hero .sensitive-note .label { color: var(--prog-light); }
.pe-hero .sensitive-note a { color: #fff; }

/* Once the questions start, the hero steps back to a slim title band. */
body.pe-running .pe-hero-in { padding: 14px 18px 16px; }
body.pe-running .pe-hero .pe-eyebrow,
body.pe-running .pe-hero .lead,
body.pe-running .pe-hero .pe-stats,
body.pe-running .pe-hero .sensitive-note { display: none; }
body.pe-running.pe-v2 .pe-hero h1 { font-size: 22px; margin: 0; }
body.pe-running .pe-hero { margin-bottom: 18px; }

/* ── The setup card lifts over the hero's foot ── */
.pe-v2 .pe-hero + .screen-card,
.pe-v2 .pe-hero ~ .screen-card:first-of-type {
  position: relative;
  margin-top: -56px;
}
.pe-v2 .screen-card {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(16,46,36,.13), 0 1px 3px rgba(16,46,36,.08);
}

/* ── Setup tiles: white cards with a hairline, lifting on hover ── */
.pe-v2 .profile-picker button {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #DCE3E0;
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
  .pe-v2 .profile-picker button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--action), 0 4px 12px rgba(16,46,36,.08); }
}
.pe-v2 .profile-picker button.selected {
  background: #FBF8F5;
  box-shadow: inset 0 0 0 2.5px var(--action), 0 4px 12px rgba(74,55,40,.10);
}

/* ── The progress bar becomes the question card's dark header strip ── */
.pe-v2 .progress-wrap {
  margin: 0 0 12px;
  padding: 14px 20px 13px;
  border-radius: 16px;
  background: linear-gradient(120deg, #163D30, #24664F);
  box-shadow: 0 6px 18px rgba(16,46,36,.16);
}
.pe-v2 .progress-bar { background: rgba(255,255,255,.18); height: 7px; }
.pe-v2 .progress-fill { background: linear-gradient(to right, #FAC775 0%, #9FE1CB 60%, #CFF3E6 100%); }
.pe-v2 .progress-text { color: rgba(255,255,255,.92); font-weight: 700; font-size: 15px; margin-top: 8px; }

/* ── The question card: white, no border, one soft shadow ── */
.pe-v2 .practice-card {
  border: 0;
  border-radius: 20px;
  margin-top: 0;
  padding: 28px 26px;
  box-shadow: 0 10px 30px rgba(16,46,36,.12), 0 1px 3px rgba(16,46,36,.08);
}

/* ── Answer choices: bold white tiles ── */
.pe-v2 .mc-option {
  border: 2px solid #DCE3E0;
  border-radius: 14px;
  font-weight: 600;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
@media (hover: hover) {
  .pe-v2 .mc-option:hover:not(:disabled) { border-color: var(--action); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,46,36,.08); }
}
.pe-v2 .mc-option.selected { border-color: var(--action); background: #FBF8F5; }
.pe-v2 .mc-option.correct { border-color: var(--ok); background: var(--ok-tint); }
.pe-v2 .mc-option.incorrect { border-color: var(--bad); background: var(--bad-tint); }

@media (max-width: 640px) {
  .pe-hero-in { padding: 22px 18px 76px; }
  .pe-hero { background:
      linear-gradient(180deg, rgba(16,46,36,.86), rgba(16,46,36,.96)),
      var(--pe-photo, none) center / cover no-repeat, #163D30; }
  .pe-v2 .pe-hero h1 { font-size: 32px; }
  .pe-v2 .practice-card { padding: 22px 18px; }
}
@media print {
  .pe-hero { background: none !important; color: var(--ink); width: auto; margin: 0; }
  .pe-v2 .pe-hero h1 { color: var(--ink); }
}

/* One type family on the pass, as on pages/civics-words: the question, the
   labels and the header title were still Lora and Source Sans through
   --font-display / --font-body. A pe-v2 page links DM Sans itself. */
body.pe-v2 {
  --font-display: 'DM Sans', 'Noto Sans Myanmar', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'DM Sans', 'Noto Sans Myanmar', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pe-v2 .question-text { font-weight: 700; letter-spacing: -0.015em; }

/* ── ONE ACCENT PER ENGINE (Brian, 2026-09-28) ─────────────────────────
   "One of the things that I loved about the original [Civics Test Words]
   design is that it brought in all the colors of patina in a really natural
   and beautiful way... when I click forward, it creates this double dark
   green banner." The words page keeps green in the hero and lets the working
   surface carry navy, copper and teal (its part colours). The engines now do
   the same: the hero stays green, and each engine has one accent for its
   progress strip, the top edge of the question card, the level chip and the
   setup labels. None of them is green, so green inside the card still means
   correct and nothing else, and the running state reads as green over accent
   instead of green over green.
     .pe-navy   Civics     .pe-teal   Reading     .pe-copper   Writing
   The same three hexes as the words page's parts, so the suite shares one
   palette. Navy is the default for a pe-v2 page that names none. */
body.pe-v2,
body.pe-v2.pe-navy   { --pe-acc:#2B4E7E; --pe-acc-dark:#1B3457; --pe-acc-tint:#E9EFF7; }
body.pe-v2.pe-teal   { --pe-acc:#1F6D78; --pe-acc-dark:#134A52; --pe-acc-tint:#E3F1F2; }
body.pe-v2.pe-copper { --pe-acc:#9A5626; --pe-acc-dark:#6B3A17; --pe-acc-tint:#F7EDE5; }

.pe-v2 .progress-wrap {
  background: linear-gradient(120deg, var(--pe-acc-dark), var(--pe-acc));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pe-acc) 30%, transparent);
}
.pe-v2 .practice-card { border-top: 5px solid var(--pe-acc); }
.pe-v2 .section-label {
  background: var(--pe-acc-tint);
  color: var(--pe-acc-dark);
  border-color: color-mix(in srgb, var(--pe-acc) 25%, #fff);
  font-weight: 800;
}
.pe-v2 .screen-card h2 { color: var(--pe-acc); }
/* The slim running band gets a hairline of the accent under it, so the green
   header and the accent strip read as two layers, not one thick band. */
body.pe-running .pe-hero { box-shadow: inset 0 -4px 0 var(--pe-acc); }

/* ── Say the title once (Brian, 2026-09-28: "some civics title redundancy
   here, and extant on all of these"). The bar read "Civics", the eyebrow
   "Civics practice" and the title "Civics: 2025 Test". The hero owns the
   title now, and keeps it in the slim band while questions run, so the bar's
   title steps out. visibility, not display, so the bar keeps its spacing. The
   eyebrow names the TEST instead ("U.S. citizenship test"), which is new
   information rather than the page name again. */
.pe-v2 .site-header .home-link { visibility: hidden; }

/* ── Each photo is placed by its own subject (Brian, 2026-09-28: "some of
   these pictures are cut off in weird places... some of this works, and some
   of these do not"). One anchor for every photo cannot work: the desktop hero
   is a wide, short band (3:1 to 5:1), so a photo is WIDTH-bound and only its
   vertical anchor matters; the phone hero is near-square, so it is HEIGHT-bound
   and only the horizontal anchor matters. A page sets both for its own photo:
       --pe-y   desktop vertical anchor   (where the faces are)
       --pe-mx  phone horizontal anchor   (where the subject is)
   and --pe-x when the subject must sit further right, clear of the text
   gradient. Values were read off each photo with a 10% grid, then checked
   rendered at desktop and phone width. */
.pe-hero {
  background:
    linear-gradient(90deg, rgba(16,46,36,.97) 0%, rgba(16,46,36,.9) 42%, rgba(16,46,36,.4) 78%, rgba(16,46,36,.2) 100%),
    var(--pe-photo, none) var(--pe-x, right) var(--pe-y, 40%) / cover no-repeat,
    #163D30;
}
@media (max-width: 640px) {
  .pe-hero { background:
      linear-gradient(180deg, rgba(16,46,36,.86), rgba(16,46,36,.96)),
      var(--pe-photo, none) var(--pe-mx, center) var(--pe-my, center) / cover no-repeat, #163D30; }
}