/* PMPR web app — design 2a/2b/2g/2h/2i/2j.
 *
 * Runs entirely on tokens.css, so all four themes work on every screen and the
 * grade inks are the same three values the phone paints a verdict with. This
 * REPLACED a private token set (--bg/--panel/--accent) that shared nothing with
 * either the landing page or the app and had already drifted from both.
 *
 * CSP: `style-src 'self'` with no 'unsafe-inline'. No <style> blocks, no style=""
 * attributes in the HTML. ui.mjs sets a handful of CSSOM properties for values
 * that genuinely come from data (a bar's width); everything with a fixed set of
 * values is a class here.
 */

* { box-sizing: border-box; }
html, body { height: 100%; }

/* ⚠️ THIS RULE IS LOAD-BEARING. `hidden` works by setting `display: none` in the
 * UA stylesheet, which ANY author `display` declaration outranks — and both
 * top-level panes have one (`.gate { display: flex }`, `.frame { display: grid }`).
 * Without this, `el.hidden = true` does nothing: the gate stayed on screen at
 * full height after a successful sign-in with the app rendered BELOW the fold,
 * so signing in looked like a dead button. It cost most of an evening, and the
 * evidence was in a screenshot the whole time.
 *
 * Do not remove it, and do not "fix" a visibility bug by toggling a class
 * instead — the attribute is the right API and this makes it work. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-new); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grow { flex: 1; }
.pad { padding: 28px 32px; }
.dim { color: var(--dim); }
.small { font-size: 13px; }

/* ── Ink. Theme-INVARIANT: a grade is a fact about an answer, not a decoration,
 * so solid is the same green in Paper as in Carbon or the screens stop being
 * comparable. ───────────────────────────────────────────────────────────── */
.ink-solid { color: var(--solid); }
.ink-shaky { color: var(--shaky); }
.ink-miss { color: var(--miss); }
.ink-heat { color: var(--heat); }
.ink-new { color: var(--accent-new); }
.ink-learning { color: var(--learning); }
.ink-faint { color: var(--faint); }

.ink-solid-bg { background: var(--solid); }
.ink-shaky-bg { background: var(--shaky); }
.ink-miss-bg { background: var(--miss); }
.ink-heat-bg { background: var(--heat); }
.ink-new-bg { background: var(--accent-new); }
.ink-learning-bg { background: var(--learning); }
.ink-unseen-bg { background: var(--unseen); }
.seg-empty { background: var(--track); }

/* ── 2a. The gate ─────────────────────────────────────────────────────────── */

.gate {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 40px 24px; text-align: center;
}
.gate-mark { font-size: 26px; }
.gate-blurb { margin: 0; max-width: 42ch; color: var(--dim); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.gate-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.gate-err { margin: 0; min-height: 1.2em; color: var(--miss); font-size: 13px; }
.gate-fine { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }

.field {
  width: 100%;
  border: var(--hairline) solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-m);
  padding: 13px 14px;
  font: 400 14px/1.2 var(--sans);
}
.field::placeholder { color: var(--faint); }
.field-grow { flex: 1; min-width: 0; }
.field-auto { width: auto; padding-block: 11px; font-size: 13px; }

.btn-primary {
  background: var(--primary-bg); color: var(--primary-fg);
  border-radius: var(--radius-m);
  padding: 14px 24px;
  font-family: var(--display); font-weight: var(--w-heavy); font-size: 12.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary[disabled] { opacity: 0.45; cursor: default; }
.btn-block { width: 100%; display: block; text-align: center; }

.btn-ghost {
  border: var(--hairline) solid var(--line); border-radius: var(--radius-m);
  padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--dim);
}
.btn-ghost:hover { color: var(--text); border-color: var(--dim); }
.btn-ghost.is-danger { color: var(--miss); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ── The frame ────────────────────────────────────────────────────────────── */

.frame { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100%; }

.side {
  border-right: var(--hairline) solid var(--line);
  display: flex; flex-direction: column; padding: 20px 0;
  position: sticky; top: 0; height: 100vh; overflow: auto;
}
.side-mark { font-size: 18px; margin: 0 20px 24px; align-self: flex-start; }

.side-nav { display: flex; flex-direction: column; }
.side-link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 20px; border-left: 2px solid transparent;
  font-size: 13.5px; color: var(--dim);
}
.side-link:hover { color: var(--text); }
.side-link.is-active { background: var(--surface); border-left-color: var(--text); color: var(--text); font-weight: 600; }
.side-count { font: 500 11px/1 var(--mono); color: var(--faint); }

.side-head {
  margin: 22px 0 8px; padding: 0 20px;
  font: var(--w-bold) 9px/1 var(--display); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.side-decks { display: flex; flex-direction: column; }
.side-deck { display: flex; justify-content: space-between; gap: 8px; padding: 7px 20px; font-size: 12.5px; color: var(--dim); }
.side-deck:hover { color: var(--text); }
.side-deck-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A deck switched off is still listed — it is still yours — but it is in no
   session, and the strike says so without needing a legend. */
.side-deck.is-off .side-deck-name { text-decoration: line-through; opacity: 0.55; }

.side-foot {
  margin-top: auto; padding: 16px 20px 0; border-top: var(--hairline) solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.level { display: flex; flex-direction: column; gap: 6px; }
.level-label { font: var(--w-bold) 9px/1 var(--display); letter-spacing: 0.16em; color: var(--dim); }
.xp-track { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.xp-fill { height: 100%; background: var(--grad-gold); }
.level-bar { font: 500 10px/1 var(--mono); color: var(--faint); }

.credits {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: var(--hairline) solid var(--line); background: var(--surface);
  border-radius: var(--radius-s); padding: 9px 11px;
}
.credits-left { font: 500 11px/1 var(--mono); color: var(--dim); }
.credits-cta { font-size: 11px; font-weight: 600; color: var(--accent-new); }

.whoami { display: flex; align-items: center; gap: 9px; padding-bottom: 4px; min-width: 0; }
.avatar {
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  background: var(--surface); border: var(--hairline) solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font: var(--w-bold) 10px/1 var(--display); color: var(--dim);
}
.whoami-name { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.view { min-width: 0; }
.screen { padding: 26px 32px 40px; }
.screen-wide { padding: 22px 26px 40px; }

/* ── Shared chrome ────────────────────────────────────────────────────────── */

.view-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: var(--hairline) solid var(--line);
  flex-wrap: wrap;
}
.h1 {
  margin: 0; font-family: var(--display); font-weight: var(--w-bold);
  font-size: 25px; line-height: 1.1; letter-spacing: -0.015em;
}
.eyebrow {
  margin: 0 0 5px; font: var(--w-bold) 9.5px/1 var(--display);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.fine { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--faint); text-wrap: pretty; }

.section-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.section-trail { margin-left: auto; font: var(--w-bold) 10.5px/1 var(--display); color: var(--dim); }

.block { display: flex; flex-direction: column; }
.block + .block { margin-top: var(--gap-section); }
.block-top { border-top: var(--hairline) solid var(--line); padding-top: 18px; }
.col { display: flex; flex-direction: column; min-width: 0; }
.col-narrow { min-width: 0; }

.pill { display: inline-block; border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; }
.pill-line { border: var(--hairline) solid currentColor; color: var(--dim); }
.pill-line.ink-miss { color: var(--miss); }
.pill-dim { color: var(--faint); border: var(--hairline) solid var(--line); }
.pill-link { font-size: 12.5px; font-weight: 600; color: var(--accent-new); }
.link-accent { font-size: 12px; font-weight: 600; color: var(--accent-new); align-self: flex-start; }
.link-dim { font-size: 12px; font-weight: 600; color: var(--dim); }
.rule-v { width: 1px; height: 16px; background: var(--line); }

.chip { border-radius: 999px; padding: 6px 11px; font-size: 11.5px; font-weight: 600; background: var(--primary-bg); color: var(--primary-fg); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font: 500 10.5px/1 var(--mono); color: var(--dim); border: var(--hairline) solid var(--line); border-radius: 7px; padding: 6px 9px; }
.mono-chip { font: 500 10.5px/1 var(--mono); color: var(--dim); border: var(--hairline) solid var(--line); border-radius: var(--radius-s); padding: 8px 11px; }

.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: var(--hairline) solid var(--line); }
.row:last-child { border-bottom: 0; }
.row:hover .row-name { color: var(--accent-new); }
.dot { width: 6px; height: 6px; border-radius: 999px; flex: none; }
.row-name { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-note { font-size: 10.5px; color: var(--faint); }
.row-val { font: var(--w-bold) 12.5px/1 var(--display); color: var(--dim); min-width: 34px; text-align: right; }

/* ── 2b. Today ────────────────────────────────────────────────────────────── */

.today-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: start; }

.count-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.count-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.count-num { font-family: var(--display); font-weight: var(--w-heavy); font-size: 46px; line-height: 1; }
.count-of { font-size: 14.5px; color: var(--dim); }
.count-pct { font: var(--w-bold) 11px/1 var(--display); letter-spacing: 0.12em; color: var(--dim); }

.split { height: 10px; border-radius: 999px; background: var(--track); display: flex; overflow: hidden; }
.split-lg { height: 12px; }
.split-seg { height: 100%; }
.seg-rev { background: var(--accent-rev); }
.seg-new { background: var(--accent-new); }

.legend { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.legend-row { display: flex; align-items: center; gap: 9px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend-label { flex: 1; font-size: 13px; color: var(--dim); min-width: 0; }
.legend-val { font: var(--w-bold) 12.5px/1 var(--display); }
.count-caption { margin: 12px 0 0; font-size: 11px; color: var(--faint); }

.primary-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--primary-bg); color: var(--primary-fg);
  border-radius: var(--radius-xl); padding: 17px 20px;
}
.primary-card.is-disabled { opacity: 0.45; }
.primary-title { margin: 0; font-family: var(--display); font-weight: var(--w-heavy); font-size: 17px; letter-spacing: 0.04em; }
.primary-sub { margin: 4px 0 0; font-size: 11.5px; opacity: 0.62; }
.primary-arrow { font-size: 18px; }

.warn-card { border: var(--hairline) solid var(--miss); border-radius: var(--radius-l); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.warn-title { margin: 0; font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--miss); }
.warn-body { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }

.bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; }
.bar-col { flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; height: 100%; }
.bar-track { width: 100%; flex: 1; background: var(--track); border-radius: 3px 3px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.bar-fill { background: var(--accent-rev); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-label { font: 500 9px/1 var(--mono); color: var(--faint); }
.bar-label.is-today { color: var(--text); }
.bars-foot { display: flex; justify-content: space-between; margin-top: 10px; font: 500 10px/1 var(--mono); color: var(--faint); }

.stat-line { display: flex; align-items: baseline; gap: 9px; }
.stat-num { font-family: var(--display); font-weight: var(--w-heavy); font-size: 30px; line-height: 1; }
.stat-note { font-size: 12.5px; line-height: 1.4; color: var(--dim); text-wrap: pretty; }

.miss-title { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.miss-reason { margin: 0 0 8px; font: italic 400 12px/1.5 var(--sans); color: var(--faint); text-wrap: pretty; }

/* ── 2g. Cards ────────────────────────────────────────────────────────────── */

.cards-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 26px; align-items: start; }
.facets { position: sticky; top: 22px; }
.facet-group { display: flex; flex-direction: column; margin-bottom: 18px; }
.facet {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-s); font-size: 12.5px; color: var(--dim);
  text-align: left; width: 100%;
}
.facet:hover { color: var(--text); }
.facet.is-active { background: var(--surface); color: var(--text); font-weight: 600; }
.facet.is-static { cursor: default; }
.facet-n { font: 500 11px/1 var(--mono); color: var(--faint); }

.cards-main { min-width: 0; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bulk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; min-height: 34px; }
.bulk-count { font-size: 11.5px; color: var(--dim); margin-right: auto; }
.bulk-bar .btn-ghost, .bulk-bar .field-auto { padding: 8px 12px; font-size: 11.5px; }

.table { border: var(--hairline) solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.trow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 104px 96px 58px 70px 68px 34px;
  align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: var(--hairline) solid var(--line);
}
.trow:last-child { border-bottom: 0; }
.thead { background: var(--surface); font: 500 9.5px/1 var(--mono); color: var(--faint); }
.trow.is-on { background: var(--surface); }
.tick { width: 16px; height: 16px; border-radius: 4px; border: var(--hairline) solid var(--line); background: var(--bg); }
.tick.is-on { background: var(--accent-new); border-color: var(--accent-new); }
.tcell-title { font-size: 13px; line-height: 1.4; min-width: 0; }
.tcell-title:hover { color: var(--accent-new); }
.tcell-dim { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcell-mono { font: 500 11px/1.3 var(--mono); color: var(--faint); }
.tstatus { font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.1em; }
.ta-r { text-align: right; }

/* ── 2h. Card detail ──────────────────────────────────────────────────────── */

.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 20px; border-bottom: var(--hairline) solid var(--line); }
.card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.body-text { margin: 0; font-size: 15px; line-height: 1.62; text-wrap: pretty; }
.quote-solid { margin: 0; border-left: 2px solid var(--solid); padding-left: 16px; font-size: 15px; line-height: 1.62; text-wrap: pretty; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-cell { border: var(--hairline) solid var(--line); background: var(--surface); border-radius: var(--radius-m); padding: 13px 14px; }
.pair-label { margin: 0 0 6px; font: var(--w-bold) 9px/1 var(--display); letter-spacing: 0.14em; }
.pair-text { margin: 0; font-size: 13px; line-height: 1.45; }

.attempts { display: flex; flex-direction: column; }
.attempt { display: grid; grid-template-columns: 78px 60px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: var(--hairline) solid var(--line); }
.attempt:last-child { border-bottom: 0; }
.attempt-date { font: 500 11px/1 var(--mono); color: var(--faint); }
.attempt-grade { font: var(--w-bold) 10px/1 var(--display); letter-spacing: 0.1em; }
.attempt-note { font: italic 400 12.5px/1.5 var(--sans); color: var(--dim); text-wrap: pretty; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.kv-line { padding: 10px 0; border-bottom: var(--hairline) solid var(--line); align-items: center; }
.kv-k { font-size: 12.5px; color: var(--dim); }
.kv-v { font-size: 12.5px; font-weight: 600; }
.actions { gap: 8px; }
.actions .btn-ghost { text-align: center; }

/* ── 2i. Progress ─────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.tile { border: var(--hairline) solid var(--line); border-radius: var(--radius-l); padding: 15px 16px; display: flex; flex-direction: column; gap: 7px; }
.tile-warn { border-color: var(--miss); }
.tile-label { font: var(--w-bold) 9px/1 var(--display); letter-spacing: 0.16em; color: var(--faint); }
.tile-value { font-family: var(--display); font-weight: var(--w-heavy); font-size: 30px; line-height: 1; }
.tile-note { font-size: 11.5px; line-height: 1.45; color: var(--dim); text-wrap: pretty; }

.progress-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: start; }

.chart { border: var(--hairline) solid var(--line); border-radius: var(--radius-l); padding: 18px 18px 14px; display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.chart-col { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: center; height: 100%; justify-content: flex-end; }
.chart-val { font: 500 10px/1 var(--mono); color: var(--dim); }
.chart-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-label { font: 500 9px/1 var(--mono); color: var(--faint); }
.chart-label.is-today, .chart-val.is-today { color: var(--text); }

.pace { margin-top: 26px; border: var(--hairline) solid var(--line); border-radius: var(--radius-xl); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: center; }
.pace-warn { border-color: var(--miss); }
.pace-label { margin: 0 0 10px; font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.16em; color: var(--dim); }
.pace-warn .pace-label { color: var(--miss); }
.pace-body { margin: 0; font-size: 14px; line-height: 1.62; text-wrap: pretty; }
.pace-chips { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.rail-wrap { display: flex; flex-direction: column; gap: 9px; }
.rail { position: relative; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.rail-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-rev); }
.rail-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.rail-foot { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); color: var(--faint); }
.rail-foot .is-today { color: var(--text); }

/* ── 2j. Account ──────────────────────────────────────────────────────────── */

.account-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: start; }

.credits-card { border: var(--hairline) solid var(--line); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.credits-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.credits-foot { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }

.ledger .lrow {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 78px 84px;
  gap: 10px; padding: 10px 15px; border-bottom: var(--hairline) solid var(--line);
  font-size: 12.5px; align-items: center;
}
.ledger .lrow:last-child { border-bottom: 0; }
.ledger .thead { background: var(--surface); font: 500 9.5px/1 var(--mono); color: var(--faint); }

.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme { border: var(--hairline) solid var(--line); border-radius: var(--radius-m); padding: 12px; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.theme.is-on { border-color: var(--text); }
.theme-name { font-size: 12px; color: var(--dim); }
.theme.is-on .theme-name { color: var(--text); font-weight: 600; }
.theme-swatch { height: 38px; border-radius: 7px; display: flex; align-items: flex-end; gap: 4px; padding: 6px; }
.theme-bar { flex: 1; border-radius: 2px; }
.b1 { height: 6px; } .b2 { height: 12px; } .b3 { height: 8px; }

/* The picker previews each theme in ITS OWN palette, so these swatches are the
   one place in this stylesheet that hard-codes hex — a preview of Paper drawn
   in Carbon's variables would be a preview of nothing. Literal copies of
   tokens.css; keep them in step. */
.swatch-graphite { background: #08090b; border: 1px solid #1e2126; }
.swatch-graphite .b1 { background: #00ccb3; } .swatch-graphite .b2 { background: #ff9933; } .swatch-graphite .b3 { background: #fac024; }
.swatch-deep-slate { background: #0b1016; border: 1px solid #1c2833; }
.swatch-deep-slate .b1 { background: #22c1a5; } .swatch-deep-slate .b2 { background: #e8a33d; } .swatch-deep-slate .b3 { background: #2e86c8; }
.swatch-paper { background: #fbfaf7; border: 1px solid #e2dfd6; }
.swatch-paper .b1 { background: #0e7c93; } .swatch-paper .b2 { background: #c1682a; } .swatch-paper .b3 { background: #b8892b; }
.swatch-carbon { background: #0a0a0b; border: 1px solid #232326; }
.swatch-carbon .b1 { background: #c8b58c; } .swatch-carbon .b2 { background: #b4553e; } .swatch-carbon .b3 { background: #a8916a; }

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-grid, .progress-grid, .account-grid, .card-layout, .pace { grid-template-columns: minmax(0, 1fr); }
  .card-layout .col-narrow { border-top: var(--hairline) solid var(--line); padding-top: 18px; }
}

@media (max-width: 900px) {
  .frame { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px; border-right: 0; border-bottom: var(--hairline) solid var(--line); padding: 14px 20px;
  }
  .side-mark { margin: 0; }
  .side-nav { flex-direction: row; }
  .side-link { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .side-link.is-active { background: none; border-bottom-color: var(--text); }
  .side-head, .side-decks { display: none; }
  .side-foot { margin: 0 0 0 auto; border-top: 0; padding: 0; flex-direction: row; align-items: center; }
  .side-foot .level { display: none; }
  .cards-layout { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; }
  .facet-group { flex-direction: row; flex-wrap: wrap; }
  .trow { grid-template-columns: 30px minmax(0, 1fr) 70px 66px; }
  .trow > :nth-child(5), .trow > :nth-child(6), .trow > :nth-child(7) { display: none; }
}

@media (max-width: 600px) {
  .screen, .screen-wide { padding: 18px 18px 32px; }
  .count-num { font-size: 38px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: 1fr; }
  .ledger .lrow { grid-template-columns: 70px minmax(0, 1fr) 60px; }
  .ledger .lrow > :nth-child(4) { display: none; }
}

/* ── 2d / 2e / 2f — the session ───────────────────────────────────────────
 * Two columns at >=1100px so the stem STAYS PUT while you read the grade
 * against it — the design's own argument for the layout, and the one thing
 * desktop width actually buys. Below that there is no room for both, so it
 * stacks into 2d.
 */

.session { display: flex; flex-direction: column; min-height: 100vh; }

.s-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 28px; border-bottom: var(--hairline) solid var(--line);
}
.s-mark { font-size: 14px; }
.s-block { font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.16em; color: var(--faint); }
.s-link { font-size: 12px; font-weight: 600; color: var(--dim); }
.s-link:hover { color: var(--text); }

.ticks { display: flex; gap: 3px; }
.tick-bar { width: 15px; height: 3px; border-radius: 2px; background: var(--track); }

.s-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.s-stem {
  border-right: var(--hairline) solid var(--line);
  padding: 30px 34px; display: flex; flex-direction: column; gap: 20px; overflow: auto;
}
.s-stem-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-label { font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.18em; color: var(--faint); }
.s-prompt { margin: 0; font-size: 17px; line-height: 1.62; text-wrap: pretty; }
.s-last {
  margin-top: auto; border-top: var(--hairline) solid var(--line); padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.s-last-note { margin: 0; font: italic 400 13px/1.55 var(--sans); color: var(--dim); text-wrap: pretty; }

.s-answer { padding: 30px 34px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.s-input {
  width: 100%; resize: vertical; min-height: 130px;
  border: var(--hairline) solid var(--accent-new); background: var(--surface); color: var(--text);
  border-radius: var(--radius-l); padding: 16px 18px;
  font: 400 15px/1.62 var(--sans);
}
.s-input::placeholder { color: var(--faint); }
.s-hint { margin: 0; font-size: 11.5px; color: var(--faint); }
.s-err { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--miss); }
.s-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.s-actions .btn-primary { margin-left: auto; }
.s-stream { margin: 0; font-size: 14px; line-height: 1.6; }

.s-typed {
  margin: 0; border: var(--hairline) solid var(--line); background: var(--surface);
  border-radius: var(--radius-l); padding: 15px 17px;
  font-size: 14.5px; line-height: 1.6; text-wrap: pretty;
}
.s-grade { display: flex; flex-direction: column; gap: 13px; }
.s-grade-head { display: flex; align-items: center; gap: 11px; }
.s-feedback { margin: 0; font-size: 15px; line-height: 1.62; text-wrap: pretty; }
.s-gap {
  border: var(--hairline) solid var(--line); background: var(--surface);
  border-radius: var(--radius-m); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.s-gap-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.s-meters { display: flex; gap: 10px; flex-wrap: wrap; }

/* The ask moment. Separated from the grade above it by a rule rather than a
   card, because it is a continuation of the same turn — a second box would
   read as a second thing to do, and the whole point is that it costs nothing
   to skip. */
.s-ask {
  border-top: var(--hairline) solid var(--line); padding-top: 15px;
  display: flex; flex-direction: column; gap: 11px;
}
.s-ask-hook { display: flex; flex-direction: column; gap: 6px; }
/* The card's own question carries the accent; a generic ask box does not. The
   colour is the difference between an invitation and a text field. */
.s-ask-q {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text);
  border-left: 2px solid var(--accent-new); padding-left: 12px; text-wrap: pretty;
}
.s-ask-row { display: flex; gap: 9px; align-items: center; }
.s-ask-input {
  flex: 1; min-width: 0;
  border: var(--hairline) solid var(--line); background: var(--surface); color: var(--text);
  border-radius: var(--radius-m); padding: 11px 14px;
  font: 400 14px/1.5 var(--sans);
}
.s-ask-input::placeholder { color: var(--faint); }
.s-followups { display: flex; flex-direction: column; gap: 13px; }
.s-followup { display: flex; flex-direction: column; gap: 5px; }
.s-followup-q {
  margin: 0; font: var(--w-bold) 13px/1.5 var(--sans); color: var(--dim);
}
.s-followup-a { margin: 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; }

/* The verdict pill, the app's own treatment: black weight on a tinted capsule.
   currentColor drives both the border and the text so one ink class does it. */
.verdict-pill {
  font: var(--w-heavy) 10px/1 var(--display); letter-spacing: 0.14em;
  border: var(--hairline) solid currentColor; border-radius: 999px; padding: 6px 12px;
}

.s-foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 28px; border-top: var(--hairline) solid var(--line);
  font: 500 10.5px/1 var(--mono); color: var(--faint);
}

/* 2f — the seal */
.seal {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; padding: 40px 60px; text-align: center;
}
.seal-ring {
  width: 96px; height: 96px; border-radius: 999px; border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%);
}
.seal-num { font-family: var(--display); font-weight: var(--w-heavy); font-size: 34px; color: var(--gold); }
.seal-label { margin: 0; font: var(--w-bold) 9.5px/1 var(--display); letter-spacing: 0.2em; color: var(--gold); }
.seal-title {
  margin: 0; font-family: var(--display); font-weight: var(--w-bold);
  font-size: 27px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance;
}
.seal-stats { display: flex; gap: 26px; }
.seal-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.seal-stat-v { font-family: var(--display); font-weight: var(--w-heavy); font-size: 22px; }
.seal-stat-l { font: 500 9.5px/1 var(--mono); color: var(--faint); }
.seal-actions { display: flex; gap: 10px; }
.ink-gold { color: var(--gold); }

/* The summary table */
.srow {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px 70px;
  gap: 12px; align-items: center; padding: 11px 16px;
  border-bottom: var(--hairline) solid var(--line);
}
.srow:last-child { border-bottom: 0; }
.srow.thead { background: var(--surface); font: 500 9.5px/1 var(--mono); color: var(--faint); }

@media (max-width: 1100px) {
  /* 2d: one column. The stem scrolls above the answer rather than beside it. */
  .s-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .s-stem { border-right: 0; border-bottom: var(--hairline) solid var(--line); }
  .s-last { margin-top: 18px; }
  .session { min-height: auto; }
}

@media (max-width: 600px) {
  .s-head, .s-foot { padding-inline: 18px; }
  .s-stem, .s-answer { padding: 20px 18px; }
  .s-prompt { font-size: 16px; }
  .seal { padding: 30px 22px; }
  .srow { grid-template-columns: 18px minmax(0, 1fr) 56px; }
  .srow > :nth-child(3) { display: none; }
}

/* The gate's secondary actions — switching to a password, resending a code.
   Text-weight on purpose: there is exactly one primary action on this screen. */
.gate-alt {
  font-size: 12.5px; font-weight: 600; color: var(--dim);
  padding: 6px 0; align-self: center;
}
.gate-alt:hover { color: var(--text); }
.gate-alt[disabled] { opacity: 0.45; cursor: default; }

/* ── Notes ────────────────────────────────────────────────────────────────
 * A note you can leave from anywhere, and a note on a card. The composer is a
 * sheet rather than a screen: filing a note should never cost you the place
 * you were standing when you noticed the thing.
 */
.note-btn {
  border: var(--hairline) solid var(--line); border-radius: var(--radius-s);
  padding: 8px 11px; font-size: 11.5px; font-weight: 600; color: var(--dim);
  width: 100%; text-align: center;
}
.note-btn:hover { color: var(--text); border-color: var(--dim); }

.note-body { resize: vertical; min-height: 84px; font: 400 14px/1.6 var(--sans); }
.note-status { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--faint); }

.sheet {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(0 0 0 / 0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sheet-card {
  width: 100%; max-width: 460px;
  background: var(--bg);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Flag / note marks in the Cards table. */
.trow-marks { display: flex; gap: 4px; justify-content: flex-end; }
.mark { font-size: 12px; line-height: 1; }

/* An attempt, opened up: the grade, the logged reason, and — behind a
   disclosure so the list stays scannable — the transcript and the feedback. */
.attempt-full {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 0; border-bottom: var(--hairline) solid var(--line);
}
.attempt-full:last-child { border-bottom: 0; }
.attempt-head { display: flex; align-items: baseline; gap: 10px; }
.attempt-mode { font: 500 10px/1 var(--mono); color: var(--faint); }
.attempt-more > summary {
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--dim);
  list-style: none; padding: 2px 0;
}
.attempt-more > summary::-webkit-details-marker { display: none; }
.attempt-more > summary::before { content: "▸ "; color: var(--faint); }
.attempt-more[open] > summary::before { content: "▾ "; }
.attempt-said {
  margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--line);
  font: italic 400 13px/1.6 var(--sans); color: var(--text); text-wrap: pretty;
}
.attempt-fed { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
.btn-ghost.is-on { color: var(--shaky); border-color: var(--shaky); }

/* The screen-only comparison table (lineage.comparison_table) — grade screen
   + card detail. Wide tables scroll inside the box, never the page. */
.ctable { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; }
.ctable-grid { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.45; }
.ctable-grid th, .ctable-grid td { padding: 7px 10px 7px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.ctable-grid thead th { border-top: 0; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.ctable-grid tbody th { font-weight: 500; color: var(--dim); }

/* Question figures (lineage.media, tier 2 media) — grade screen + card detail. */
.qfigures { display: flex; flex-direction: column; gap: 10px; }
.qfigure { max-width: 100%; max-height: 380px; object-fit: contain; align-self: flex-start;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }

/* Chain cards (2026-09-03): the stem stays pinned and every graded axis
   stacks under it in the stem column — the context never disappears
   mid-chain, which is the whole point of the format. The axis being asked
   sits at the top of the answer column with the card's accent, the same
   treatment as the ask hook: an invitation, not a text field. */
.s-thread {
  border-top: var(--hairline) solid var(--line); padding-top: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.s-exchange { display: flex; flex-direction: column; gap: 5px; }
.s-exchange-q { margin: 0; font: var(--w-bold) 13px/1.5 var(--sans); color: var(--dim); text-wrap: pretty; }
.s-exchange-q.dim { font-weight: 500; color: var(--faint); }
.s-exchange-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.s-exchange-typed { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.s-exchange-a { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--solid); text-wrap: pretty; }
.s-axis { display: flex; flex-direction: column; gap: 6px; }
.s-axis-q {
  margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text);
  border-left: 2px solid var(--accent-new); padding-left: 12px; text-wrap: pretty;
}
.s-settled {
  border-top: var(--hairline) solid var(--line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}

/* Cards ▸ "Study these" — the drill over the current filter. */
.study-these { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bulk-hint { font-size: 11.5px; color: var(--faint); }