:root{
    --ground:#EDEFEA; --surface:#FFFFFF; --surface-2:#F5F7F2;
    --ink:#1A1D22; --ink-2:#4B525A; --ink-3:#7C848D;
    --line:#D7DBD2; --line-strong:#B9BFB4;
    --accent:#1D6B62; --accent-ink:#FFFFFF; --accent-soft:#DCE9E5;
    --good:#1D6B62; --bad:#A93F5E;
    --neut:#7A6420;
    --cyan:#0E7C96;
    --mk0:#2F5FD0; --mk1:#8150C8; --mk2:#5B6B80; --mk3:#7C8CE8; --mk4:#8A8F98;
    --wash:18%;
    --chip-ink:#FFFFFF;
    --shadow:0 1px 2px rgba(26,29,34,.06), 0 12px 28px -12px rgba(26,29,34,.28);
    /* English text face — plain, high x-height, easy at small sizes */
    --eng:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --ts:1;                     /* text size multiplier — every size below scales from it */
    /* Greek display face — Gentium is the clearest for reading, Didot the most decorative */
    --grk:"Gentium Book Plus","Palatino Linotype",Palatino,Georgia,serif;
  }
  :root[data-ts="large"]{--ts:1.15}
  :root[data-ts="xl"]{--ts:1.3}
  :root[data-grk="cardo"]{--grk:"Cardo","Gentium Book Plus",Georgia,serif}
  :root[data-grk="didot"]{--grk:"GFS Didot","Gentium Book Plus",Georgia,serif}
  :root[data-grk="neohellenic"]{--grk:"GFS Neohellenic","Gentium Book Plus",Georgia,serif}
  :root[data-grk="noto"]{--grk:"Noto Sans","Gentium Book Plus",Georgia,serif}
  :root[data-grk="garamond"]{--grk:"EB Garamond","Gentium Book Plus",Georgia,serif}
  :root[data-grk="notoserif"]{--grk:"Noto Serif","Gentium Book Plus",Georgia,serif}
  :root[data-grk="oldstandard"]{--grk:"Old Standard TT","Gentium Book Plus",Georgia,serif}
  :root[data-grk="alegreya"]{--grk:"Alegreya Sans","Gentium Book Plus",Georgia,serif}
  :root[data-grk="arimo"]{--grk:"Arimo","Gentium Book Plus",Georgia,serif}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#14171A; --surface:#1C2024; --surface-2:#23282D;
      --ink:#E9EBE6; --ink-2:#AFB6BC; --ink-3:#7D868E;
      --line:#2F353B; --line-strong:#454D54;
      --accent:#63C6B6; --accent-ink:#10201E; --accent-soft:#1D3B37;
      --good:#63C6B6; --bad:#E890A6;
      --neut:#D6BA6D;
      --cyan:#5FCBEF;
      --mk0:#7FA3FF; --mk1:#B89AF5; --mk2:#9AA7B8; --mk3:#A8B4FF; --mk4:#8C8C8C;
      --chip-ink:#14171A;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 32px -16px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --ground:#14171A; --surface:#1C2024; --surface-2:#23282D;
    --ink:#E9EBE6; --ink-2:#AFB6BC; --ink-3:#7D868E;
    --line:#2F353B; --line-strong:#454D54;
    --accent:#63C6B6; --accent-ink:#10201E; --accent-soft:#1D3B37;
    --good:#63C6B6; --bad:#E890A6;
    --neut:#D6BA6D;
    --cyan:#5FCBEF;
    --mk0:#7FA3FF; --mk1:#B89AF5; --mk2:#9AA7B8; --mk3:#A8B4FF; --mk4:#8C8C8C;
    --chip-ink:#14171A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 32px -16px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  /* class-based display rules would otherwise beat the browser's own [hidden] rule */
  [hidden]{display:none!important}
  html{color-scheme:light dark}
  body{margin:0;background:var(--ground);color:var(--ink);
    font-family:var(--eng);
    font-size:calc(16.5px * var(--ts));line-height:1.55;-webkit-font-smoothing:antialiased}
  img{max-width:100%}
  .wrap{max-width:820px;margin:0 auto;padding:26px 20px 64px;display:flex;flex-direction:column;gap:16px}
  .label{font-family:var(--eng);text-transform:uppercase;
    letter-spacing:.07em;font-weight:600;font-size:calc(12.5px * var(--ts));color:var(--ink-3)}
  /* uppercasing Greek mangles its accents and breathings — never do it */
  .grk{text-transform:none!important}
  .label.grk{font-family:var(--grk);font-size:calc(16px * var(--ts));
    letter-spacing:.01em;color:var(--ink-2)}
  /* noun gender notifier (Form -> Parse), moved 2026-09-10 sixth pass from a
     centered line above the word to a small subordinate tag beside the deck
     name, so the deck name stays the more prominent label */
  .gender-tag{margin-left:8px;padding-left:8px;border-left:1px solid var(--line);
    font-size:calc(11px * var(--ts));color:var(--ink-3);font-weight:600}
  /* present-tense citation form beside the deck name on non-present verb
     decks (vfut/vaor1/vaor2/vimpf), so an irregular past stem (ἔλαβον) stays
     anchored to its lemma (λαμβάνω) -- 2026-09-16 */
  .verb-lemma-tag{margin-left:8px;padding-left:8px;border-left:1px solid var(--line);
    font-family:var(--grk);font-size:calc(13px * var(--ts));color:var(--ink-3);font-weight:400;
    text-transform:none}

  header{border-bottom:1px solid var(--line);padding-bottom:14px}
  h1{font-family:var(--grk);font-size:calc(clamp(26px,4.6vw,34px) * var(--ts));
    line-height:1.05;margin:0;font-weight:400;text-wrap:balance}
  .sub{margin:6px 0 0;color:var(--ink-2);font-size:calc(15px * var(--ts))}

  /* deck rail */
  .decks{display:flex;flex-direction:column;gap:12px}
  .deckgroup{display:flex;flex-direction:column;gap:5px}
  .deckrow{display:flex;flex-wrap:wrap;gap:7px}
  .deckbtn{display:flex;flex-direction:row;gap:7px;align-items:baseline;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
    border-radius:8px;padding:7px 12px;cursor:pointer;text-align:left}
  .deckbtn .dn{font-family:var(--eng);letter-spacing:.01em;
    font-size:calc(14.5px * var(--ts));font-weight:600;white-space:nowrap}
  .deckbtn .dg{display:none}
  .deckbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .deckbtn[aria-pressed="true"] .dg{color:var(--accent-ink);opacity:.85}
  .deckbtn .badge{font-family:var(--eng);font-size:calc(12px * var(--ts));color:var(--accent)}
  .deckbtn[aria-pressed="true"] .badge{color:var(--accent-ink)}

  .bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
  .group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
    border-radius:999px;padding:3px;gap:2px}
  .seg button{font-family:var(--eng);
    letter-spacing:.01em;font-size:calc(13.5px * var(--ts));font-weight:600;border:0;background:transparent;color:var(--ink-2);
    padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
  .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
  .seg button:hover:not([aria-pressed="true"]){color:var(--ink)}

  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{font-family:var(--eng);
    letter-spacing:.01em;font-size:calc(13.5px * var(--ts));font-weight:600;border:1px solid var(--line-strong);
    background:transparent;color:var(--ink-3);padding:5px 11px;border-radius:4px;cursor:pointer}
  .chip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  .filters{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;background:var(--surface-2);
    border:1px solid var(--line);border-radius:8px;padding:11px 13px}

  /* shown only while Test mode is on -- deliberately loud, so it stays
     obvious this session's answers are not being written to progress */
  .testbadge{text-align:center;font-family:var(--eng);font-weight:600;letter-spacing:.02em;
    font-size:calc(13px * var(--ts));color:var(--neut);border:1px dashed var(--neut);
    border-radius:8px;padding:8px 12px;margin:0}

  /* card */
  .stage{perspective:1600px}
  .card{position:relative;width:100%;min-height:calc(345px * var(--ts));transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .card.flipped{transform:rotateY(180deg)}
  .card.nofx{transition:none}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
    padding:20px 24px;display:flex;flex-direction:column;overflow:auto}
  .face.back{transform:rotateY(180deg)}
  /* Verdict wash. Teal and rose, not green and red: they separate on the
     blue-yellow axis and in lightness, so they stay distinct under red-green
     colour vision deficiency. Amber (--neut) joins them for a partial-credit
     result ("all required" mode, some but not all valid parses picked).
     --wash is the tint strength, 10%-46%, driven by the Shade depth slider
     (2026-09-11, twelfth pass) -- it used to be a flat 18%. */
  .face.ok{border-color:var(--good);background:color-mix(in srgb, var(--good) var(--wash), var(--surface))}
  .face.no{border-color:var(--bad);background:color-mix(in srgb, var(--bad) var(--wash), var(--surface))}
  .face.partial{border-color:var(--neut);background:color-mix(in srgb, var(--neut) var(--wash), var(--surface))}
  .face-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border-bottom:1px solid var(--line);padding-bottom:9px}
  .face-body{display:flex;flex-direction:column;justify-content:center;flex:1;gap:11px;padding:12px 0}
  .face-foot{margin-top:auto;padding-top:9px;border-top:1px dashed var(--line);color:var(--ink-3);font-size:calc(13.5px * var(--ts))}
  #syncStatus.sync-ok{color:var(--good)}
  #syncStatus.sync-bad{color:var(--bad)}
  .verdict{font-family:var(--eng);text-transform:uppercase;letter-spacing:.07em;
    font-size:calc(12.5px * var(--ts));font-weight:600}
  .verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)} .verdict.partial{color:var(--neut)}

  .slip{display:grid;grid-template-columns:auto 1fr;gap:5px 20px;align-items:baseline;max-width:340px;margin:0 auto}
  .slip dt{font-family:var(--eng);text-transform:uppercase;letter-spacing:.07em;
    font-size:calc(12.5px * var(--ts));font-weight:600;color:var(--ink-3);padding-top:5px}
  .slip dd{margin:0;font-size:calc(clamp(19px,3.6vw,25px) * var(--ts));line-height:1.2}

  .greek-big{font-family:var(--grk);font-size:calc(clamp(48px,12vw,84px) * var(--ts));
    line-height:1;text-align:center;letter-spacing:.01em;overflow-wrap:anywhere}
  .greek-big.len-m{font-size:calc(clamp(34px,8vw,60px) * var(--ts))}
  .greek-big.len-l{font-size:calc(clamp(22px,5.2vw,38px) * var(--ts))}
  .parseline{margin:0 0 3px;text-align:center;color:var(--ink);font-weight:600;
    font-size:calc(14.5px * var(--ts));border-top:1px solid var(--line);padding-top:8px}
  .parseline + .sem{border-top:0;padding-top:0}
  .sem{margin:0 0 8px;text-align:center;color:var(--ink-2);font-size:calc(14px * var(--ts));
    border-top:1px solid var(--line);padding-top:8px}
  .built{margin:0;text-align:center;font-family:var(--grk);font-size:calc(22px * var(--ts));
    color:var(--ink)}
  .built .slot{color:var(--ink-3);letter-spacing:.1em;margin-left:6px}
  .vocab-en{text-align:center;margin:0;font-size:calc(30px * var(--ts));line-height:1.25;
    font-weight:600;color:var(--ink)}
  .summary{background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:22px 24px;box-shadow:var(--shadow)}
  .summary h2{margin:0 0 6px;font-family:var(--grk);font-weight:400;
    font-size:calc(26px * var(--ts))}
  .sumline{margin:0 0 12px;color:var(--ink-2)}
  .summary .label{display:block;margin:14px 0 6px}
  .missed{margin:0;padding-left:20px;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
  .missed li{font-size:calc(15.5px * var(--ts))}
  /* archived side = that cell fades: Word cell for the Greek side, Meaning
     cell for the English side (2026-09-26 -- no text note) */
  td.arch-faded{opacity:.4}
  /* Archived words panel rows were a flex-wrapped <ul>/<li> list (removed
     2026-09-21) -- Word and Meaning sat side by side in one flex span, so
     Meaning's x-position trailed right behind whatever width THIS row's
     Greek word happened to render at, never lining up between rows the way
     the vocab-chart <table>s line theirs up. Now built as a real <table>
     (see tableOf()/entry() in renderArchived) that reuses the generic
     table/td rules above, so it gets the same auto-sized, per-group-aligned
     Word column the charts get, for free. */
  .lead{text-align:center;margin:0;color:var(--ink-3);font-size:calc(15px * var(--ts))}
  .lead .grk{font-size:calc(18px * var(--ts));color:var(--ink-2)}
  .lead-en{color:var(--ink-2)}
  .gloss{text-align:center;color:var(--ink-2);font-style:italic;
    font-family:"Gentium Book Plus",Georgia,serif;font-size:calc(17px * var(--ts))}
  .phrase{text-align:center;font-size:calc(21px * var(--ts));font-family:var(--grk)}
  .parse-list{display:flex;flex-direction:column;gap:7px;align-items:center}
  .asked{margin:0 0 2px;text-align:center;font-family:var(--grk);
    font-size:calc(30px * var(--ts));color:var(--ink)}
  .parse-ex{text-align:center;font-size:calc(14px * var(--ts));color:var(--ink-3);margin:-2px 0 4px}
  .parse-ex .grk{font-family:var(--grk);font-size:calc(17px * var(--ts));color:var(--ink-2)}
  /* a paradigm's Greek short form, wherever it appears in a dt/dd slip --
     front prompt or the Parse -> Form answer side's own paradigm row --
     renders in the Greek face, not the English one (2026-09-10) */
  .slip dd.grk{font-family:var(--grk)}
  /* compact badge chips -- one grouped pill per valid parse, doubling as the
     single-parse review switcher (2026-09-16). */
  .badges{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:2px 0}
  .pbadge{display:inline-block;font-family:var(--eng);font-weight:700;letter-spacing:.02em;
    font-size:calc(12.5px * var(--ts));color:var(--ink-2);background:var(--surface-2);
    border:1px solid var(--line-strong);border-radius:999px;padding:3px 10px}
  .pbadge.grk{font-family:var(--grk);font-size:calc(14px * var(--ts));font-weight:400}
  /* grouped-per-parse pills doubling as the single-parse-view switcher
     (2026-09-16) -- each pill is one whole valid parse ("1st Sg"), not one
     dimension value pooled across parses, and clicking one shows just that
     parse's detail below */
  #parseSwitch .pbadge{cursor:pointer}
  #parseSwitch .pbadge.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  /* one full parse-selector table per valid parse, "All required" mode on a
     genuinely ambiguous form (2026-09-16) -- replaces independently
     multi-selectable dimension rows, which let a student pick every value on
     each dimension without ever confirming which value pairs with which */
  .parse-block{border:1px solid var(--line);border-radius:8px;padding:8px 10px;
    display:flex;flex-direction:column;gap:6px}
  .parse-block-head{font-family:var(--eng);font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;font-size:calc(11px * var(--ts));color:var(--ink-3)}
  /* target-word highlight inside an example sentence -- three styles a
     reader can pick between in Settings (2026-09-11, twelfth pass) */
  .hl-word.hl-bold{font-weight:800}
  .hl-word.hl-amber{color:var(--neut);font-weight:700}
  .hl-word.hl-cyan{background:color-mix(in srgb, var(--cyan) 35%, transparent);
    border-radius:3px;padding:0 2px}
  /* 5-segment mini progress bar, replacing the "Box N of 5" text label
     (2026-09-11, twelfth pass) */
  .boxbar{display:inline-flex;gap:3px;vertical-align:middle}
  .boxseg{width:13px;height:6px;border-radius:3px;background:var(--line-strong)}
  .boxseg.filled{background:var(--accent)}
  .correction{text-align:center;color:var(--ink-2);font-size:calc(15.5px * var(--ts));max-width:48ch;margin:0 auto}
  .correction b{font-family:var(--grk);font-size:calc(20px * var(--ts));font-weight:400}
  .hint{color:var(--ink-3);font-size:calc(14px * var(--ts));text-align:center}

  /* answer pad */
  .pad{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px;
    display:flex;flex-direction:column;gap:10px}
  .padrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .opt{font-family:var(--eng);letter-spacing:.01em;
    font-size:calc(14px * var(--ts));font-weight:600;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink-2);padding:7px 13px;border-radius:6px;cursor:pointer}
  .opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
  /* columns and type size come from the longest form in THIS deck, so a deck's
     buttons always match each other and only the deck as a whole adapts */
  .formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:6px}
  .fbtn{font-family:var(--grk);font-size:calc(21px * var(--ts));line-height:1.15;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
    padding:9px 6px;border-radius:6px;cursor:pointer;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fbtn:hover{border-color:var(--accent)}
  .pad[data-locked="true"] .opt,.pad[data-locked="true"] .fbtn{opacity:.5;pointer-events:none}

  .btn{font-family:var(--eng);letter-spacing:.01em;
    font-weight:600;font-size:calc(13.5px * var(--ts));border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink);padding:9px 16px;border-radius:6px;cursor:pointer}
  .btn:hover{border-color:var(--ink-3)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .btn.again{color:var(--bad);border-color:var(--bad)}
  .btn.got{color:var(--good);border-color:var(--good)}
  .btn:disabled{opacity:.4;cursor:default}
  button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
  .meter{display:flex;flex-direction:column;gap:7px}
  .track{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
  .fill{height:100%;background:var(--accent);width:0;transition:width .3s ease}
  .counts{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;font-variant-numeric:tabular-nums}
  .counts b{font-family:var(--eng);font-size:calc(16px * var(--ts));font-weight:600;color:var(--ink)}

  .boxes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .box{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);
    border-radius:6px;padding:7px 12px;min-width:72px;background:var(--surface);
    font-variant-numeric:tabular-nums}
  .box .label{font-size:calc(11.5px * var(--ts));letter-spacing:.11em}
  .box b{font-family:var(--eng);font-size:calc(22px * var(--ts));font-weight:600;line-height:1}
  .box.due{border-color:var(--accent);background:var(--accent-soft)}

  details{border-top:1px solid var(--line);padding-top:13px}
  summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-family:var(--eng);color:var(--ink-3);font-size:calc(16px * var(--ts))}
  details[open] summary::after{content:"−"}
  .tables{display:flex;flex-direction:column;gap:20px;margin-top:14px}
  .tw{overflow-x:auto}
  table{border-collapse:collapse;width:100%;min-width:400px}
  /* the 3/4-column word tables (vocab charts + the Archived words panel)
     opt out of the grid tables' width:100%/min-width:400px -- those exist
     so a many-column paradigm grid (Case x Number, etc.) stays readable at
     full container width, but stretching a 3-column Archive/Word/Meaning
     row to the same width just pads empty space between short cells,
     forcing the eye to travel further from Word to Meaning than the text
     needs, and forcing a horizontal scroll on a phone even though the row
     itself would easily fit (John's request, 2026-09-21, fifth pass:
     "as close as tastefully possible... more friendly to phones"). width:auto
     lets the row shrink-wrap to its own content instead. */
  table.wordtable{width:auto;min-width:0}
  caption{text-align:left;font-family:var(--eng);
    letter-spacing:.06em;font-size:calc(14px * var(--ts));font-weight:600;color:var(--ink-3);padding-bottom:8px}
  th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line)}
  thead th,tbody th{font-family:var(--eng);
    letter-spacing:.01em;font-size:calc(13.5px * var(--ts));font-weight:600;color:var(--ink-3);white-space:nowrap}
  tbody th{color:var(--ink-2)}
  td{font-family:var(--grk);font-size:calc(22px * var(--ts))}
  .refnote{color:var(--ink-2);font-size:calc(14.5px * var(--ts));margin:0 0 4px}
  /* per-row archive/unarchive toggle, leftmost column of the vocab reference
     tables (Charts & Vocabulary) -- lets John retire or restore a word right
     from the chart, not only via "Archive word" mid-drill or the Archived
     words panel */
  .archtoggle{width:1%;white-space:nowrap;padding-right:4px}
  .archbtn{font-family:var(--eng);letter-spacing:.01em;font-weight:600;
    font-size:calc(12px * var(--ts));border:1px solid var(--line-strong);
    background:var(--surface);color:var(--ink-2);padding:4px 10px;
    border-radius:6px;cursor:pointer;white-space:nowrap}
  .archbtn:hover{border-color:var(--ink-3);color:var(--ink)}
  .archbtn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink-3);border-style:dashed}

  .terms{margin-top:12px;margin-left:9px;padding-left:15px;border-left:2px solid var(--line)}
  .terms dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:9px 20px;margin:0}
  .terms dt{font-weight:600;color:var(--ink)}
  .terms dd{margin:0;color:var(--ink-2)}
  .terms em{color:var(--ink);font-style:normal;font-weight:600}
  @media (max-width:560px){
    .terms dl{grid-template-columns:1fr;gap:2px}
    .terms dd{margin-bottom:9px}
  }
  /* deep enough to read across a whole chart at a glance; checked against the
     cell text for contrast in both the light and the dark palette */
  .heat-good{background:color-mix(in srgb, var(--good) 40%, transparent)}
  .heat-mid{background:color-mix(in srgb, var(--neut) 44%, transparent)}
  .heat-bad{background:color-mix(in srgb, var(--bad) 42%, transparent)}
  .key{display:inline-block;padding:1px 7px;border-radius:3px;color:var(--ink-2)}

  /* a chip or option whose label is Greek — the English face mangles breathings */
  .chip.grk,.opt.grk{font-family:var(--grk);font-size:calc(16px * var(--ts));letter-spacing:0}

  /* collapsible sections: deck groups, reference charts, archived word ranges */
  details.grp{border-top:0;padding-top:0}
  details.grp>summary{gap:9px}
  details.grp>summary .badge{font-family:var(--eng);font-weight:600;
    font-size:calc(12px * var(--ts));color:var(--accent)}
  /* nested sections are indented behind a left rule, so the hierarchy is
     visible at a glance when several of them are open at once */
  details.grp .deckrow{padding-top:6px;margin-left:9px;padding-left:13px;
    border-left:2px solid var(--line)}
  details.refblock,details.archgroup{border-top:1px dashed var(--line);
    padding-top:10px;margin-top:6px;
    margin-left:18px;padding-left:28px;border-left:2px solid var(--line)}
  /* the open body of a deck/word-range -- split tables (Singular/Plural,
     etc.), the reference note, the per-deck reset row, or an archived-
     word list -- reads as nested content one step deeper than its own
     summary line, not flush with it */
  details.refblock>*:not(summary),
  details.archgroup>*:not(summary){margin-left:9px;padding-left:13px}
  /* sits alone inside the already-boxed .filters slot, not stacked with
     siblings — skip the generic details top-border rather than double it */
  details.filtblock{border-top:0;padding-top:0}
  /* the font guide, toggled open directly under "What's the difference?"
     inside Settings rather than as its own separate top-level accordion --
     same "already boxed, skip the double border" treatment as .filtblock,
     plus width:100% so it breaks onto its own line below the Greek-type
     row instead of squeezing into the flex-wrap beside it (2026-09-20) */
  details.fontguide-inline{border-top:0;padding-top:0;width:100%}
  .filtbody{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:10px}
  /* body content of the top-level panels reads as belonging to the
     summary above it \u2014 same indent depth as the nested sections,
     no divider line since there's no sibling group to separate here */
  #settingsPanel>.bar,#statusPanel>.meter,#statusPanel>.boxes,
  #filters details.filtblock>.filtbody,#refHost,
  #archivedPanel>.hint,#archivedList,
  #tipsPanel>p{margin-left:9px;padding-left:13px}
  details.refblock>summary .label,details.archgroup>summary .label{color:var(--ink-2)}
  details.refblock .refnote{margin-top:10px}
  /* press-and-hold targets (Word / Meaning cells of the vocab charts and the
     Focus words list, 2026-09-26) -- suppress the phone's own long-press
     text-selection / callout menu so the hold reaches our handler */
  td.lp{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  td.lp.lp-hold{background:color-mix(in srgb, var(--accent) 22%, transparent)}
  /* vocab search boxes (2026-09-26): one per vocab section + one global */
  .vsearch{font-family:var(--eng);font-size:calc(14.5px * var(--ts));color:var(--ink);
    background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;
    padding:6px 10px;width:min(100%,300px);margin-bottom:8px;display:block}
  .vsearch:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
  .vsearch-wrap{margin:10px 0 4px 9px;padding-left:13px}
  .vsearch-wrap .hint{text-align:left;margin:-4px 0 0}
  .ordcell{white-space:nowrap;width:1%}
  .ordbtn{font-family:var(--eng);font-weight:700;font-size:calc(12px * var(--ts));
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
    padding:3px 8px;border-radius:6px;cursor:pointer;margin-right:4px;line-height:1.2}
  .ordbtn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
  .ordbtn:disabled{opacity:.3;cursor:default}
  .focustag{font-family:var(--eng);font-weight:700;font-size:calc(10.5px * var(--ts));
    letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
    border:1px solid var(--accent);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle}
  /* lesson cap (2026-09-28): a chart slot taught after the lesson John has
     completed through stays as a hatched, empty cell so the grid keeps its
     shape without showing the form */
  td.notyet{background:repeating-linear-gradient(135deg,transparent 0 6px,
    color-mix(in srgb,var(--line-strong) 45%,transparent) 6px 7px)}
  .capsel{font-family:var(--eng);padding:6px 10px;max-width:min(100%,360px)}

  /* gutter transport — anchored to the card, not to the viewport, so the pair
     tracks the card's position and height instead of sitting at the middle of
     the window. Still only rendered where the 820px column leaves gutter room. */
  .stagewrap{position:relative}
  .railbtn{display:none}
  @media (min-width:1060px){
    .railbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
      display:flex;align-items:center;justify-content:center;
      width:clamp(40px,4vw,56px);height:min(70%,220px);
      border:1px solid var(--line);border-radius:12px;background:transparent;
      color:var(--ink-3);font-family:var(--eng);font-size:calc(30px * var(--ts));
      line-height:1;cursor:pointer;
      transition:background .15s ease,color .15s ease,border-color .15s ease}
    .rail-prev{right:calc(100% + 14px)}
    .rail-next{left:calc(100% + 14px)}
    .railbtn:hover:not(:disabled){background:var(--surface);color:var(--ink);
      border-color:var(--line-strong)}
    .railbtn:disabled{opacity:.22;cursor:default}
  }
  /* ---- pattern sheets + tap-to-dissect (2026-09-29) ---- */
  .seg-aug{color:var(--bad)}
  .seg-stem{color:var(--ink-2)}
  .seg-sign{color:var(--neut);font-weight:700}
  .seg-end{color:var(--accent);font-weight:700}
  .seg-whole{color:inherit}
  .seg-arrow{color:var(--ink-3);font-family:var(--eng);font-size:.8em;margin:0 2px}
  /* sound-change corner notch (2026-09-30): a surface-coloured rim under an amber
     triangle keeps it visible on every heat tint and same-ending colour */
  td.chg{position:relative}
  td.chg::before,td.chg::after,.chgkey .notch::before,.chgkey .notch::after{content:"";position:absolute;top:0;left:0;
    width:0;height:0;border-style:solid;pointer-events:none}
  td.chg::before,.chgkey .notch::before{border-width:14px 14px 0 0;border-color:var(--surface) transparent transparent transparent}
  td.chg::after,.chgkey .notch::after{border-width:11px 11px 0 0;border-color:var(--neut) transparent transparent transparent}
  .chgkey{display:block;margin-top:3px;font-size:calc(12.5px * var(--ts));font-weight:400;color:var(--ink-2);
    text-transform:none;letter-spacing:0;font-family:var(--eng)}
  .chgkey .notch{position:relative;display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-1px;
    border:1px solid var(--line);border-radius:2px;background:var(--surface-2);box-sizing:border-box}
  .chgkey .notch::before,.chgkey .notch::after{top:-1px;left:-1px}
  .seg-zero{color:var(--ink-3);opacity:.6;font-weight:400}
  .dxpart.dx-res{border-style:dashed}
  .dissect .dxnote{color:var(--neut);font-weight:600}
  .vformsel{font-family:var(--eng);font-size:calc(12px * var(--ts));padding:2px 4px;margin-left:6px;
    border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink-2)}
  .sheet td{font-size:calc(19px * var(--ts));white-space:nowrap}
  .sheet td .st{color:var(--ink-3)}
  .sheet td .en{font-weight:700;color:var(--ink)}
  .sheet th{white-space:nowrap}
  .sheet th[scope="row"]{position:sticky;left:0;background:var(--ground);z-index:1}
  /* same-ending palette (2026-09-30): blues / violets / slate, kept clear of the
     heat map's teal / amber / rose so a shared ending never reads as a score */
  .mk0{background:color-mix(in srgb,var(--mk0) 24%,transparent)}
  .mk1{background:color-mix(in srgb,var(--mk1) 24%,transparent)}
  .mk2{background:color-mix(in srgb,var(--mk2) 26%,transparent)}
  .mk3{background:color-mix(in srgb,var(--mk3) 30%,transparent)}
  .mk4{background:color-mix(in srgb,var(--mk4) 26%,transparent)}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .mk0{background:color-mix(in srgb,var(--mk0) 34%,transparent)}
    :root:not([data-theme="light"]) .mk1{background:color-mix(in srgb,var(--mk1) 34%,transparent)}
    :root:not([data-theme="light"]) .mk2{background:color-mix(in srgb,var(--mk2) 36%,transparent)}
    :root:not([data-theme="light"]) .mk3{background:color-mix(in srgb,var(--mk3) 38%,transparent)}
    :root:not([data-theme="light"]) .mk4{background:color-mix(in srgb,var(--mk4) 34%,transparent)}
  }
  :root[data-theme="dark"] .mk0{background:color-mix(in srgb,var(--mk0) 34%,transparent)}
  :root[data-theme="dark"] .mk1{background:color-mix(in srgb,var(--mk1) 34%,transparent)}
  :root[data-theme="dark"] .mk2{background:color-mix(in srgb,var(--mk2) 36%,transparent)}
  :root[data-theme="dark"] .mk3{background:color-mix(in srgb,var(--mk3) 38%,transparent)}
  :root[data-theme="dark"] .mk4{background:color-mix(in srgb,var(--mk4) 34%,transparent)}
  .swatch{display:inline-block;padding:1px 8px;border-radius:4px;margin-right:6px;font-weight:700}
  td[data-dk]{cursor:pointer}
  td.dx-on{outline:2px solid var(--accent);outline-offset:-2px}
  .dissect{margin:8px 0 4px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--surface)}
  .dissect .dxform{font-family:var(--grk);font-size:calc(30px * var(--ts));line-height:1.2}
  .dissect .dxform{margin-bottom:8px}
  .dxparts{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:2px 0 10px}
  .dxpart{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:54px;
    padding:6px 12px 5px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--surface-2)}
  .dxpart.dx-aug{border-color:var(--bad)} .dxpart.dx-sign{border-color:var(--neut)} .dxpart.dx-end{border-color:var(--accent)}
  .dxp{font-family:var(--grk);font-size:calc(30px * var(--ts));line-height:1.15}
  .dxl{font-family:var(--eng);font-size:calc(12px * var(--ts));font-weight:700;letter-spacing:.03em}
  .dxplus{align-self:center;color:var(--ink-3);font-size:calc(20px * var(--ts));font-weight:600}
  .seg-cut{color:var(--ink-3);opacity:.55;font-weight:400;margin:0 3px;font-family:var(--eng)}
  .dissect p{margin:4px 0 0}
  .dissect:has(.dxparts){cursor:pointer}
  footer{color:var(--ink-3);font-size:calc(14px * var(--ts))}
  kbd{font-family:var(--eng);border:1px solid var(--line-strong);border-radius:3px;
    padding:1px 5px;font-size:calc(12.5px * var(--ts));color:var(--ink-2)}
  @media (prefers-reduced-motion: reduce){.card,.fill{transition:none}}
  @media (max-width:520px){.face{padding:17px 15px}.card{min-height:calc(330px * var(--ts))}}
  /* phones (2026-09-29): the nested chart indent and cell padding ate the
     room a two-column word chart needs, so long forms scrolled off */
  @media (max-width:520px){
    details.refblock,details.archgroup{margin-left:4px;padding-left:10px}
    details.refblock>*:not(summary),details.archgroup>*:not(summary){margin-left:2px;padding-left:6px}
    th,td{padding:7px 6px}
  }
  /* wide screens (2026-09-30): Charts & Vocabulary breaks out of the 820px
     column to the full window width (bleedRef sets #refHost's margin/width).
     Split tables (Singular | Plural, All forms tenses) sit side by side and
     wrap; grids size to their content instead of stretching; long vocab
     lists flow into as many columns as fit, one word per row. */
  body.refwide #refHost .tw{display:inline-block;vertical-align:top;max-width:100%;
    margin-right:28px;margin-bottom:14px}
  body.refwide #refHost table{width:auto}
  body.refwide #refHost p{max-width:90ch}
  body.refwide #refHost .tw.vtw{display:block;margin-right:0}
  body.refwide #refHost table.vocabtable{display:block;width:100%}
  body.refwide #refHost table.vocabtable caption{display:block}
  body.refwide #refHost table.vocabtable thead{display:none}
  body.refwide #refHost table.vocabtable tbody{display:block;column-width:540px;column-gap:40px}
  body.refwide #refHost table.vocabtable tr{display:grid;
    grid-template-columns:max-content minmax(0,1fr) minmax(0,1.2fr) 128px;
    break-inside:avoid;border-bottom:1px solid var(--line)}
  body.refwide #refHost table.vocabtable td{border-bottom:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}
  body.refwide #refHost table.vocabtable td.archtoggle{flex-wrap:nowrap}
  body.refwide #refHost table.vocabtable td select{max-width:100%}

  /* ---- noun overview sheets + vocab lists (Build 1, 2026-09-30) ---- */
  /* marks never use a background: cell backgrounds carry the heat map */
  td.dif{box-shadow:inset 0 -3px 0 var(--accent)}
  tr.samerow > td,tr.samerow > th{opacity:.35}
  .difmark{color:var(--accent);font-weight:700;margin-left:4px}
  .gdart{color:var(--ink-3);font-weight:400;font-size:.8em}
  .gdart.gdmis{color:var(--accent);font-weight:700}
  .gdh{font-family:var(--eng);font-size:calc(11.5px * var(--ts));font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0;white-space:normal}
  .sheet td.revp{font-family:var(--eng);font-size:calc(13.5px * var(--ts));white-space:normal;color:var(--ink-2);min-width:9em}
  .sheet td.revp.grk{font-family:var(--grk);font-size:calc(16px * var(--ts))}
  .sheet td.revp .grk{font-family:var(--grk);font-size:calc(16px * var(--ts));color:var(--ink)}
  tr.revsep > td,tr.revsep > th{border-top:2px solid var(--line-strong)}
  .sheet td.lookwhy{font-style:italic;min-width:6em}
  .sheet td.accex{white-space:normal;font-size:calc(17px * var(--ts))}
  .decltable td.en{font-weight:700}
  .declq .declans{font-family:var(--eng);font-size:calc(12px * var(--ts));color:var(--accent);font-weight:700;margin-left:6px}
  .vpp{display:block;flex-basis:100%;font-size:calc(14px * var(--ts));color:var(--ink-3);line-height:1.35}
  .vppl{font-family:var(--eng);font-size:calc(11.5px * var(--ts));letter-spacing:.02em}
  .vsorth{all:unset;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
  .vsorth:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Build 2 verb sheets (2026-09-30). No backgrounds: cell backgrounds carry the heat map. */
  .midtag{display:inline-block;font-family:var(--eng);font-size:calc(11px * var(--ts));font-weight:600;letter-spacing:.02em;
    text-transform:none;color:var(--accent);border:1px solid currentColor;border-radius:9px;padding:0 6px;line-height:1.5;vertical-align:1px}
  .pplsn{font-family:var(--eng);font-size:calc(11px * var(--ts));color:var(--ink-3);font-weight:400;white-space:nowrap}
  .ppgl{font-family:var(--eng);font-size:calc(12.5px * var(--ts));color:var(--ink-3);font-weight:400;text-transform:none;letter-spacing:0}
  td.lsnonly{font-style:italic;color:var(--ink-3)}
  .vfam{font-family:var(--eng);font-size:calc(10.5px * var(--ts));color:var(--ink-3);font-weight:400;letter-spacing:.03em}
  table.tensekey td,table.preptable td{font-family:var(--eng);font-size:calc(13.5px * var(--ts));text-align:left;vertical-align:top;min-width:9ch}
  table.tensekey td[data-dk],table.preptable th{font-family:var(--grk)}
  table.pptable th[scope="row"]{text-align:left;white-space:normal;max-width:30ch}
  td.nocase{color:var(--ink-3)}
  tr.infrow th,tr.infrow td{border-top:2px solid var(--line)}