/* ============================================================================
   Band9 Studio — design system.
   Two pages: the writing sheet (index.html) and the report (report.html).
   Every value below is a token. No component invents its own.
   No color-mix(), no :has(), no nesting, no container queries — the target is
   a mid-range Android WebView.
   ========================================================================== */

:root{
  color-scheme:light;

  /* paper & ink */
  --paper:#faf8f4; --paper-2:#f4f1ea; --sheet:#ffffff;
  --ink:#141f2b; --ink-2:#3d4c5c; --ink-3:#5c6b78; --ink-4:#8a97a2;
  --rule:rgba(20,31,43,.14); --rule-soft:rgba(20,31,43,.07);

  /* one accent, used sparingly */
  --accent:#4338ca; --accent-ink:#312a9e; --accent-soft:#eeecfb; --accent-line:#d9d5f4;

  /* muted, print-like pigments — never neon */
  --red:#a83a3a;   --red-soft:#f8ecea;
  --amber:#96661a; --amber-soft:#f8f0e2;
  --green:#1f6f4a; --green-soft:#e8f2ec;

  /* band mapping. overall is a half-band float; criterion bands are whole 1-9 */
  --band-low:#a83a3a; --band-mid:#96661a; --band-good:#4338ca; --band-high:#1f6f4a;

  /* type */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-band:clamp(64px,12vw,92px);
  --t-h1:28px; --t-h2:21px; --t-h3:17px;
  --t-body:16px;            /* never smaller on an input — iOS zooms below 16 */
  --t-sm:14px; --t-xs:13px; --t-micro:11px;
  --lh-tight:1.12; --lh-head:1.25; --lh-body:1.62;
  --lh-write:28px;          /* the ruled sheet: matches the ruling step exactly */
  --measure:66ch;

  /* spacing: 4px base, use the steps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* paper stacked on paper, never glow */
  --sh-1:0 1px 1px rgba(20,31,43,.04), 0 2px 6px rgba(20,31,43,.05);
  --sh-2:0 1px 2px rgba(20,31,43,.05), 0 6px 18px rgba(20,31,43,.06);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-settle:cubic-bezier(.34,1.28,.64,1);   /* the band reveal ONLY */
  --d1:120ms; --d2:200ms; --d3:320ms; --d4:640ms; --d-reveal:1100ms;

  --topbar-h:56px; --actionbar-h:64px;
  --gutter:clamp(16px,4vw,48px);
  --col:1180px;
}

/* Android auto-dark must not invert this palette into mud. */
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:light;
    --paper:#faf8f4; --paper-2:#f4f1ea; --sheet:#ffffff;
    --ink:#141f2b; --ink-2:#3d4c5c; --ink-3:#5c6b78; --ink-4:#8a97a2;
    --rule:rgba(20,31,43,.14); --rule-soft:rgba(20,31,43,.07);
    --accent:#4338ca; --accent-ink:#312a9e; --accent-soft:#eeecfb; --accent-line:#d9d5f4;
    --red:#a83a3a; --red-soft:#f8ecea; --amber:#96661a; --amber-soft:#f8f0e2;
    --green:#1f6f4a; --green-soft:#e8f2ec;
    --band-low:#a83a3a; --band-mid:#96661a; --band-good:#4338ca; --band-high:#1f6f4a;
  }
}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:var(--accent-ink)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================ LAYOUT */
.wrap{max-width:var(--col);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.row{display:flex;align-items:center;gap:var(--s3)}
.spacer{flex:1 1 auto}
.stack{display:flex;flex-direction:column}

.eyebrow{
  display:block;font-size:var(--t-micro);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
}
.meta{font-size:var(--t-xs);color:var(--ink-3)}
.num{font-family:var(--font-display);font-weight:600;font-variation-settings:"opsz" 40;line-height:1}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s4);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;white-space:nowrap;
  transition:background-color var(--d1) var(--ease),border-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.btn:disabled{cursor:not-allowed;color:var(--ink-4)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:disabled{background:var(--paper-2);border-color:var(--rule)}
.btn-quiet{background:var(--sheet);border-color:var(--rule);color:var(--ink)}
.btn-quiet:hover:not(:disabled){border-color:var(--accent-line)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){color:var(--ink)}
.btn-sm{min-height:34px;padding:0 var(--s3);font-size:var(--t-xs)}
.btn:active:not(:disabled){transform:translateY(1px)}

.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:34px;padding:0 var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--sheet);font-size:var(--t-xs);color:var(--ink-2);
}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

.pill{
  display:inline-flex;align-items:center;padding:2px var(--s2);
  border-radius:var(--r-pill);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.pill-ok{background:var(--green-soft);color:var(--green)}
.pill-warn{background:var(--amber-soft);color:var(--amber)}
.pill-off{background:var(--paper-2);color:var(--ink-3)}

.seg{display:inline-flex;padding:3px;background:var(--paper-2);border-radius:var(--r-sm);gap:2px}
.seg button{
  min-height:32px;padding:0 var(--s3);border-radius:6px;
  font-size:var(--t-xs);color:var(--ink-3);
  transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}

/* ============================================================ FIELDS */
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field-label{font-size:var(--t-sm);font-weight:500}
.field input,.field textarea{
  width:100%;padding:var(--s3);
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-sm);
  font-size:var(--t-body);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-hint{font-size:var(--t-xs);color:var(--ink-3)}
.field-error{font-size:var(--t-xs);color:var(--red)}

/* ============================================================ NOTICE */
.notice{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4);border-left:3px solid var(--rule);
  background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-sm);color:var(--ink-2);
}
.notice-title{font-family:var(--font-display);font-size:var(--t-h3);font-variation-settings:"opsz" 14;color:var(--ink)}
.notice-info{border-left-color:var(--accent);background:var(--accent-soft)}
.notice-warn{border-left-color:var(--amber);background:var(--amber-soft)}
.notice-error{border-left-color:var(--red);background:var(--red-soft)}
.notice-ok{border-left-color:var(--green);background:var(--green-soft)}
.notice-actions{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s1)}

/* ============================================================ TOPBAR */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--topbar-h);padding:0 var(--gutter);
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.wordmark{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);
  font-variation-settings:"opsz" 14;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.timer{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);font-variation-settings:"opsz" 14;font-variant-numeric:tabular-nums}
.timer.is-warn{color:var(--amber)}
.timer.is-late{color:var(--red)}

/* ============================================================ SHEET (dialog) */
.backdrop{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(20,31,43,.32);
  opacity:0;transition:opacity var(--d2) var(--ease);
}
.backdrop.is-open{opacity:1}
.sheet{
  width:100%;max-width:620px;max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--sheet);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--sh-2);
  transform:translateY(12px);transition:transform var(--d2) var(--ease);
}
.backdrop.is-open .sheet{transform:none}
.sheet-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s5) var(--s5) var(--s3)}
.sheet-head h2{font-family:var(--font-display);font-size:var(--t-h2);font-variation-settings:"opsz" 40}
.sheet-body{padding:0 var(--s5) var(--s5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3)}
.sheet-foot{display:flex;gap:var(--s2);padding:var(--s3) var(--s5) var(--s5);border-top:1px solid var(--rule-soft)}
@media (min-width:700px){
  .backdrop{align-items:center}
  .sheet{border-radius:var(--r-lg);max-height:82vh}
}

/* ============================================================================
   PAGE 1 — THE QUIET SHEET
   Minimal means: paper, the question, the words you have written, and one
   button. Everything else is one tap away and nothing else is on screen.
   ========================================================================== */
.write{display:flex;flex-direction:column;min-height:100dvh}
.write main{flex:1 1 auto;padding-bottom:var(--s7)}

/* the question — quiet, collapsible, never competing with the sheet */
.qcard{
  margin:var(--s5) auto 0;max-width:var(--col);
  padding:0 var(--gutter);
}
.qcard summary{
  display:flex;align-items:center;gap:var(--s2);
  list-style:none;cursor:pointer;color:var(--ink-3);font-size:var(--t-xs);
}
.qcard summary::-webkit-details-marker{display:none}
.qcard summary .caret{transition:transform var(--d1) var(--ease)}
.qcard[open] summary .caret{transform:rotate(90deg)}
.qtext{
  font-family:var(--font-display);font-size:var(--t-h3);
  font-variation-settings:"opsz" 14;line-height:var(--lh-head);
  color:var(--ink);max-width:var(--measure);margin-top:var(--s3);
}
.qempty{color:var(--ink-3);font-family:var(--font-body);font-size:var(--t-sm)}

/* the writing surface */
.paper{
  max-width:var(--col);margin:var(--s4) auto 0;
  padding:0 var(--gutter);
}
.paper-inner{
  position:relative;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s5);box-shadow:var(--sh-1);
}
.paper-inner:focus-within{border-color:var(--accent-line)}
#essay{
  display:block;width:100%;min-height:52vh;resize:vertical;
  border:0;outline:none;background:transparent;padding:0;
  font-size:var(--t-body);line-height:var(--lh-write);
  color:var(--ink);
}
/* the ruling is drawn only once the metrics are settled, or it misaligns */
.fonts-ready .paper-inner{
  background-image:repeating-linear-gradient(
    to bottom,transparent 0,transparent calc(var(--lh-write) - 1px),
    var(--rule-soft) calc(var(--lh-write) - 1px),var(--rule-soft) var(--lh-write));
  background-position:0 var(--s5);
  background-clip:content-box;
}
#essay::placeholder{color:var(--ink-4)}

.sheet-foot-meta{
  display:flex;gap:var(--s4);max-width:var(--col);
  margin:var(--s2) auto 0;padding:0 var(--gutter);
  font-size:var(--t-xs);color:var(--ink-3);
}
.saved{color:var(--green)}

/* the only persistent control */
.actionbar{
  position:sticky;bottom:0;z-index:30;
  background:var(--paper);border-top:1px solid var(--rule);
}
.actionbar-inner{
  display:flex;align-items:center;gap:var(--s3);
  max-width:var(--col);margin:0 auto;
  min-height:var(--actionbar-h);padding:var(--s2) var(--gutter);
}
.wc{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap}
.wc-num{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);font-variation-settings:"opsz" 40;font-variant-numeric:tabular-nums;line-height:1}
.wc-num.is-met{color:var(--band-high)}

/* task 1 figures */
.figure{margin:var(--s4) 0 0;display:flex;flex-direction:column;gap:var(--s2)}
.figure figcaption{font-size:var(--t-xs);font-weight:600;color:var(--ink-2)}
.chart svg{width:100%;height:auto}
.ch-grid{stroke:var(--rule-soft);stroke-width:1}
.ch-axis{stroke:var(--rule);stroke-width:1}
.ch-tick{font-family:var(--font-body);font-size:11px;fill:var(--ink-3);text-anchor:middle}
.ch-tick-y{text-anchor:end}
.ch-bar,.ch-slice,.ch-dot{fill:var(--ch-c)}
.ch-line{fill:none;stroke:var(--ch-c);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ch-slice{stroke:var(--sheet);stroke-width:2}
.ch-s1{--ch-c:var(--accent)} .ch-s2{--ch-c:var(--green)}
.ch-s3{--ch-c:var(--amber)} .ch-s4{--ch-c:var(--ink-3)}
.ch-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--t-xs);color:var(--ink-2)}
.ch-legend li{display:flex;align-items:center;gap:var(--s2)}
.ch-key{width:10px;height:10px;border-radius:var(--r-xs);background:var(--ch-c)}
.ch-scroll{overflow-x:auto}

.upload{
  display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4);
  padding:var(--s4);border:1px dashed var(--rule);border-radius:var(--r-sm);
  background:var(--paper-2);
}
.upload.is-over{border-color:var(--accent);background:var(--accent-soft)}
.upload img{border:1px solid var(--rule);border-radius:var(--r-xs);background:var(--sheet)}

/* question picker rows */
.qrow{
  display:flex;flex-direction:column;gap:var(--s1);width:100%;text-align:left;
  padding:var(--s3);background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  transition:border-color var(--d1) var(--ease),background-color var(--d1) var(--ease);
}
.qrow:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.qrow .meta{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em}
.qrow span:last-child{font-family:var(--font-display);font-size:var(--t-sm);font-variation-settings:"opsz" 14;color:var(--ink)}

/* waiting */
.wait{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);min-height:70dvh;text-align:center;padding:var(--s5);
}
.wait h2{font-family:var(--font-display);font-size:var(--t-h2);font-variation-settings:"opsz" 40}
.wait-bar{width:min(320px,80vw);height:3px;background:var(--rule-soft);border-radius:var(--r-pill);overflow:hidden}
.wait-bar i{display:block;height:100%;width:35%;background:var(--accent);border-radius:var(--r-pill);animation:slide 1600ms var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ============================================================================
   PAGE 2 — THE REPORT
   Dense is allowed here; unscannable is not. Every section is a <section> with
   an eyebrow, and every number on this page was computed in code.
   ========================================================================== */
.report{padding-bottom:var(--s9)}
.sec{padding:var(--s6) 0;border-top:1px solid var(--rule-soft)}
.sec:first-of-type{border-top:0}
.sec > .eyebrow{margin-bottom:var(--s3)}
.sec h2{
  font-family:var(--font-display);font-size:var(--t-h2);
  font-variation-settings:"opsz" 40;line-height:var(--lh-head);margin-bottom:var(--s3);
}
.sec-note{font-size:var(--t-sm);color:var(--ink-2);max-width:var(--measure)}
.empty{font-size:var(--t-sm);color:var(--ink-3)}

/* ---- 1 · the band ---- */
.band-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s7);align-items:start;padding-top:var(--s4)}
.band-side{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.ring{position:relative;width:184px;height:184px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--rule-soft);stroke-width:9}
.ring-arc{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset var(--d-reveal) var(--ease)}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring-num{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-band);
  font-variation-settings:"opsz" 100;letter-spacing:-.03em;line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums;
}
.ring-word{font-size:var(--t-sm);color:var(--ink-3)}
.ring-note{font-size:var(--t-xs);color:var(--ink-3);max-width:30ch}
.facts{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s2)}

.crit{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--rule-soft)}
.crit:first-child{border-top:0}
.crit-head{display:flex;align-items:baseline;gap:var(--s3);cursor:pointer}
.crit-name{font-size:var(--t-sm);font-weight:600}
.crit-gloss{font-size:var(--t-xs);color:var(--ink-3)}
.crit-band{margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);font-variation-settings:"opsz" 40;line-height:1}
.crit-track{height:3px;background:var(--rule-soft);border-radius:var(--r-pill);overflow:hidden}
.crit-fill{display:block;height:100%;border-radius:var(--r-pill);transform:scaleX(0);transform-origin:left;transition:transform var(--d4) var(--ease)}
.crit-fill.is-in{transform:scaleX(var(--fill,0))}
.crit-body{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s2)}
.crit-uz{font-size:var(--t-sm);color:var(--ink-2);max-width:var(--measure)}
.crit-en{font-size:var(--t-xs);color:var(--ink-3);max-width:var(--measure)}
.crit-quotes{display:flex;flex-direction:column;gap:var(--s2);padding-left:var(--s4);border-left:1px solid var(--rule)}
.crit-quotes li{font-family:var(--font-display);font-size:var(--t-sm);font-variation-settings:"opsz" 14;color:var(--ink-2)}
.crit-weak .crit-name{color:var(--amber)}
.crit-cap{font-size:var(--t-xs);color:var(--amber)}

/* ---- 2 · the three-sentence verdict ---- */
.verdict{
  padding:var(--s5);background:var(--paper-2);
  border-left:3px solid var(--accent-line);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.verdict p{
  font-family:var(--font-display);font-size:var(--t-h3);
  font-variation-settings:"opsz" 24;line-height:var(--lh-head);
  max-width:var(--measure);
}

/* ---- 4 · the marked essay ---- */
.marked{
  font-size:var(--t-body);line-height:var(--lh-write);
  max-width:var(--measure);
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-md);
  padding:var(--s5);
}
.marked p + p{margin-top:var(--lh-write)}
.mark{
  background:linear-gradient(to top,var(--mark-c) 0,var(--mark-c) 2px,transparent 2px);
  cursor:pointer;padding-bottom:1px;
}
.mark-red{--mark-c:var(--red)}
.mark-amber{--mark-c:var(--amber)}
.mark-green{--mark-c:var(--green);cursor:default}
.mark.is-open{background-color:var(--amber-soft)}
.markcount{display:flex;gap:var(--s4);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--s3)}

/* ---- 5 · corrections ---- */
.fix{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s2) var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--rule);position:relative;
}
.fix-label{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.fix-was{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(168,58,58,.55)}
.fix-is{font-weight:500;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px}
.fix-why{font-size:var(--t-sm);color:var(--ink-2);max-width:var(--measure)}
.fix-en{font-size:var(--t-xs);color:var(--ink-3)}
.fix-tags{position:absolute;top:var(--s4);right:0;display:flex;gap:var(--s2)}
.fix-missing{font-size:var(--t-xs);color:var(--ink-3)}
.fix.is-flash{background:var(--amber-soft)}

/* ---- 6 · error patterns ---- */
.pat{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--rule-soft)}
.pat-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pat-name{font-weight:600;font-size:var(--t-sm)}
.pat-en{font-size:var(--t-xs);color:var(--ink-3)}
.pat-n{margin-left:auto;font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);font-variation-settings:"opsz" 14}
.pat-rule{font-size:var(--t-sm);color:var(--ink-2);max-width:var(--measure)}

/* ---- 7 · sentence strip ---- */
.strip{display:flex;gap:2px;align-items:flex-end;height:34px;margin:var(--s3) 0}
.strip i{
  display:block;height:100%;min-width:6px;border-radius:2px;
  background:var(--accent-line);
}
.strip i.bad{background:transparent;border:1.5px solid var(--red)}
.strip-legend{display:flex;gap:var(--s4);font-size:var(--t-xs);color:var(--ink-3)}

/* ---- 8-12 · lists ---- */
.kv{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vocab{padding:var(--s3) 0;border-top:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:var(--s1)}
.vocab-host{font-size:var(--t-sm);color:var(--ink-2)}
.vocab-host b{color:var(--ink);font-weight:600}
.vocab-swap{color:var(--green);font-weight:600}
.vocab-note{font-size:var(--t-xs);color:var(--ink-3)}
.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.bar2{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--rule-soft)}
.bar2 i{display:block;height:100%}
.bar2 .b1{background:var(--amber)} .bar2 .b2{background:var(--green)}
.pxray{padding:var(--s3) 0;border-top:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:var(--s2)}
.pxray-topic{padding-left:var(--s3);border-left:2px solid var(--rule);font-family:var(--font-display);font-size:var(--t-sm);font-variation-settings:"opsz" 14;color:var(--ink-2)}
.ticks{display:flex;gap:var(--s3);font-size:var(--t-xs)}
.tick-y{color:var(--green)} .tick-n{color:var(--ink-4)}
.check{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--rule-soft);font-size:var(--t-sm)}
.check-y{color:var(--green)} .check-n{color:var(--red)}

/* ---- 13 · the band-8 rewrite ---- */
.rewrite{display:grid;gap:var(--s4)}
.rewrite-col{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s4)}
.rewrite-col p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-2)}
.rewrite-col.is-new p{color:var(--ink)}
.ann{display:flex;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--rule-soft);font-size:var(--t-sm)}
.ann-n{font-family:var(--font-display);font-weight:600;color:var(--accent-ink);min-width:18px}
.ann u{text-decoration-color:var(--accent-line);text-decoration-thickness:2px;text-underline-offset:3px}
@media (min-width:1000px){.rewrite{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 14 · drills ---- */
.drill{padding:var(--s4) 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:var(--s2)}
.drill-head{display:flex;align-items:baseline;gap:var(--s3)}
.drill-head h3{font-family:var(--font-display);font-size:var(--t-h3);font-variation-settings:"opsz" 14}
.drill-time{margin-left:auto;font-size:var(--t-xs);color:var(--ink-3)}
.drill-items{display:flex;flex-direction:column;gap:var(--s2)}
.drill-items li{display:flex;gap:var(--s3);font-size:var(--t-sm);color:var(--ink-2)}
.one-task{
  margin-top:var(--s5);padding:var(--s5);background:var(--accent-soft);
  border-radius:var(--r-md);font-family:var(--font-display);
  font-size:var(--t-h3);font-variation-settings:"opsz" 24;line-height:var(--lh-head);
}

/* ---- 15 · history ---- */
.hist{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.hist th{text-align:left;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule)}
.hist td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.hist .b{font-family:var(--font-display);font-weight:600;font-size:var(--t-h3);font-variation-settings:"opsz" 14}
.trend-up{color:var(--green)} .trend-down{color:var(--red)} .trend-flat{color:var(--ink-3)}

/* ---- 16 · honesty ---- */
.honest{font-size:var(--t-xs);color:var(--ink-3);display:flex;flex-direction:column;gap:var(--s1);max-width:var(--measure)}

/* skeleton while DEPTH is still in flight */
.skel{background:var(--paper-2);border-radius:var(--r-xs);height:12px;animation:pulse 1500ms ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel-rows{display:flex;flex-direction:column;gap:var(--s2)}

/* ============================================================ MOBILE */
@media (max-width:860px){
  .band-row{grid-template-columns:minmax(0,1fr);gap:var(--s5);justify-items:center}
  .band-crits{width:100%}
  .twocol{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}
@media (max-width:560px){
  .ring{width:150px;height:150px}
  .fix{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .fix-tags{position:static;order:-1}
  .topbar{gap:var(--s2)}
  .marked{padding:var(--s4)}
}

/* ============================================================ PRINT */
@media print{
  .topbar,.actionbar,.backdrop,.no-print{display:none !important}
  body{background:#fff;font-size:11pt}
  .sec{break-inside:avoid;border-top:1px solid #ccc}
  .marked,.rewrite-col,.paper-inner{border:1px solid #ccc;box-shadow:none}
  a{text-decoration:none;color:#000}
}

/* ============================================================ MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .crit-fill{transform:scaleX(var(--fill,0))}
}
/* Self-hosted subsets from Google Fonts. The -ext files carry U+02BB/U+02BC,
   the Uzbek okina and tutuq belgisi — without them Uzbek text renders as boxes. */
@font-face{font-family:"Inter";src:url("/fonts/inter-400-ext.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";src:url("/fonts/inter-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Inter";src:url("/fonts/inter-500-ext.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";src:url("/fonts/inter-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Inter";src:url("/fonts/inter-600-ext.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";src:url("/fonts/inter-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-400-700-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-400-700-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* The one message a student must see before writing, not after submitting. */
/* .notice is a column; this one needs the retry button beside the reason. */
.offline-bar{flex-direction:row;align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.offline-bar .notice-title{flex:0 0 100%}
.offline-bar span:not(.notice-title){flex:1 1 12rem;min-width:0}
.offline-bar .btn{margin-left:auto;flex:0 0 auto}