/* ============================================================
   WQC Trainer — Atlas. Full application stylesheet.
   Recreated from the design handoff prototype (app.css + the home
   slice of surfaces.css + pagination.css), on the J! Trainer stack
   (one hand-written CSS file, theme tokens, no framework).
   Identity: gold accent (dark) / ink-blue accent (light), meridian
   field, Rosette of Pliska, tricolour wordmark rule.
   ============================================================ */

:root {
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 7px; --radius-md: 11px; --radius-lg: 14px; --radius-xl: 20px;
  --header-h: 64px;

  /* tricolour (slightly muted) */
  --bg-white: #e3e7ec; --bg-green: #1c8a64; --bg-red: #c93f34;
}

/* ---------- DARK (default) ---------- */
.theme-dark {
  --bg: #161616; --bg-elev: #1f1f1f; --bg-elev-2: #262626; --bg-input: #1a1a1a;
  --border: #2e2e2e; --border-strong: #3a3a3a;
  --text: #e8e8e8; --text-dim: #a0a0a0; --text-faint: #6d6d6d;
  /* gold accent — the interactive layer */
  --accent: #e2a63c; --accent-2: #c9982f;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 34%, var(--border));
  --accent-text: #271d06;
  /* ink-blue reference layer (map, provenance, data bars, coordinates) */
  --ink: #7b93e0;
  --good: #5ad18a; --bad: #f0786f; --warn: #e6b450;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.42);
  --shadow-pop: 0 14px 40px rgba(0,0,0,.55);
  --grat: rgba(123,147,224,.09);
}
/* ---------- LIGHT ---------- */
.theme-light {
  --bg: #f3f4f8; --bg-elev: #ffffff; --bg-elev-2: #fafbfd; --bg-input: #ffffff;
  --border: #e0e3ec; --border-strong: #c7ccda;
  --text: #141a2e; --text-dim: #54607d; --text-faint: #8a93ab;
  --accent: #324db0; --accent-2: #2d7d8a;
  --accent-soft: color-mix(in oklab, var(--accent) 11%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 26%, var(--border));
  --accent-text: #ffffff;
  /* light: reference layer is the same ink as the accent */
  --ink: var(--accent);
  --good: #1d8a52; --bad: #c23b30; --warn: #b0791f;
  --shadow-card: 0 1px 2px rgba(20,26,46,.04), 0 10px 26px rgba(20,26,46,.07);
  --shadow-pop: 0 14px 40px rgba(20,26,46,.18);
  --grat: rgba(50,77,176,.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh;
}
::selection { background: var(--accent-soft); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }

/* meridian + rosette field behind everything */
.app-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, var(--grat) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--grat) 47px 48px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 42%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0 42%, transparent 88%);
}
.app-bg::after {
  content: ""; position: absolute; width: 520px; height: 520px;
  top: -150px; right: -120px; opacity: .055;
  background: center / contain no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%237b93e0'><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(51.43 16 16)'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(102.86 16 16)'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(154.29 16 16)'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(205.71 16 16)'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(257.14 16 16)'/><path d='M13.9 12.4 L12.1 3.6 L19.9 3.6 L18.1 12.4 Z' transform='rotate(308.57 16 16)'/><circle cx='16' cy='16' r='4.4'/></svg>");
}

.app-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: var(--space-7) var(--space-5); }
.page.narrow { max-width: 720px; }
.page.wide { max-width: 1160px; }

/* ============== HEADER ============== */
.hd {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--space-5);
}
.hd-mark { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; justify-self: start; }
.hd-center { justify-self: center; font-weight: 500; color: var(--text-dim); font-size: 13.5px; letter-spacing: .02em; white-space: nowrap; }
.hd-home { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 13.5px; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.hd-home:hover { color: var(--text); background: var(--bg-elev); }
.hd-glyph { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
.hd-wordwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.hd-word { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; color: var(--text); white-space: nowrap; line-height: 1; }
.hd-word .lt { color: var(--accent); font-style: italic; font-weight: 700; }
.hd-word .tr { color: var(--text-dim); font-weight: 500; margin-left: 2px; }
.tricolour { display: flex; flex-direction: column; overflow: hidden; border-radius: 2px; }
.tricolour i { display: block; flex: 1; }
.tc-word { width: 62px; height: 5px; }

.hd-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.anki-glyph { width: 20px; height: 20px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; flex: 0 0 20px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-weight: 700; font-size: 12px; letter-spacing: .02em; cursor: pointer; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .15s ease;
}
.avatar:hover { box-shadow: 0 0 0 4px var(--accent-soft); }

.pmenu-wrap { position: relative; }
.pmenu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 250px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); padding: 8px; z-index: 100;
  animation: pop-in .14s ease-out;
}
.pmenu[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98);} to { opacity: 1; transform: none;} }
.pmenu-id { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pmenu-name { font-weight: 600; font-size: 14px; }
.pmenu-email { color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.pmenu-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 12px; background: none; border: 0; color: var(--text); font: inherit;
  text-align: left; border-radius: 8px; cursor: pointer; gap: 12px; text-decoration: none;
}
.pmenu-item:hover { background: var(--bg-elev-2); text-decoration: none; }
.pmenu-il { display: inline-flex; align-items: center; gap: 10px; }
.pmenu-sec { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 4px; }
.pmenu-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.pmenu-item.danger { color: var(--bad); }
.seg { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.seg button.on { background: var(--accent); color: var(--accent-text); }

/* toggle switch (header Anki suggestions) */
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 42px; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle.on i { transform: translateX(18px); }
.toggle-sm { width: 34px; height: 20px; flex: 0 0 34px; }
.toggle-sm i { width: 14px; height: 14px; }
.toggle-sm.on i { transform: translateX(14px); }

/* ============== TYPE / SHARED ============== */
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow .rose { width: 13px; height: 13px; color: var(--accent); flex: 0 0 13px; }
.page-h1 { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1.06; letter-spacing: -.022em; margin: 14px 0 0; text-wrap: balance; }
.page-h1 em { font-style: italic; font-weight: 600; color: var(--accent); }
.page-sub { color: var(--text-dim); font-size: 15.5px; margin: 12px 0 0; max-width: 560px; text-wrap: pretty; }
.prov { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); letter-spacing: .01em; }
.prov b { color: var(--ink); font-weight: 600; }
.coord { font-family: var(--font-mono); color: var(--ink); opacity: .8; letter-spacing: .08em; }

/* buttons */
.btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; padding: 11px 20px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .06s, box-shadow .15s; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, white); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* inputs */
.input, .select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 15px; padding: 11px 14px; border-radius: var(--radius-md); outline: none; transition: border-color .12s, box-shadow .12s; }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-faint); }

.check { display: inline-flex; align-items: center; gap: 9px; color: var(--text-dim); cursor: pointer; font-size: 14px; user-select: none; }
.check input { display: none; }
.check .box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--bg-input); display: inline-flex; align-items: center; justify-content: center; transition: all .12s; flex: 0 0 18px; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box::after { content: ""; width: 5px; height: 9px; border: solid var(--accent-text); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }

/* chips */
.chip { font-size: 12.5px; font-weight: 500; color: var(--text-dim); padding: 6px 12px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); cursor: pointer; user-select: none; transition: all .12s; text-decoration: none; }
.chip:hover { border-color: var(--border-strong); text-decoration: none; color: var(--text); }
.chip.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip.end-session { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, var(--border)); padding: 9px 20px; font-size: 13px; font-weight: 600; }
.chip.end-session:hover { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 12%, transparent); }

/* difficulty badges — vocabulary locked to easy|medium|hard */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); border: 1px solid var(--border); }
.badge.diff-easy { color: var(--good); border-color: color-mix(in oklab, var(--good) 30%, var(--border)); }
.badge.diff-medium { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 30%, var(--border)); }
.badge.diff-hard { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, var(--border)); }
.pct-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pct-badge b { color: var(--text); font-weight: 700; }
.pct-badge .mini { width: 36px; height: 5px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.pct-badge .mini i { display: block; height: 100%; background: var(--ink); }

/* topic label */
.topic-tag { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 14px; color: var(--accent); }
.topic-tag .sub { font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-left: 7px; }

.q-md b { font-weight: 700; }
.q-md i { font-style: italic; }

/* ============== FOOTER ============== */
.ftr { margin-top: auto; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 92%, var(--bg-elev)); padding: var(--space-5); }
.ftr-inner { max-width: 940px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ftr-credits { color: var(--text-faint); font-size: 11.5px; line-height: 1.6; max-width: 620px; text-wrap: pretty; }
.ftr-credits b { color: var(--text-dim); font-weight: 600; }
.ftr-credits a { color: var(--text-dim); font-weight: 600; border-bottom: 1px dotted color-mix(in oklab, var(--text-dim) 45%, transparent); transition: color .12s, border-color .12s; }
.ftr-credits a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.ftr-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.ftr-copy { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.ftr-coord { font-family: var(--font-mono); font-size: 11px; color: var(--ink); opacity: .75; letter-spacing: .08em; white-space: nowrap; }

/* ============== HOME ============== */
.hero { text-align: left; margin: 8px 0 26px; }
.tiles { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.tile { background: var(--bg-elev); border: 1px solid var(--border); border-left: 2px solid var(--accent-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: border-color .15s; }
.tile.open { border-color: var(--accent-line); border-left-color: var(--accent); }
.tile-head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 17px 19px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tile-head:hover { background: var(--bg-elev-2); }
.tile-ic { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.tile-tx { flex: 1; min-width: 0; }
.tile-tt { font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 9px; }
.tile-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.tile-sb { color: var(--text-dim); font-size: 13px; margin-top: 3px; display: block; }
.tile-chev { color: var(--text-faint); transition: transform .2s; display: inline-flex; }
.tile.open .tile-chev { transform: rotate(180deg); color: var(--text-dim); }
.tile-body { border-top: 1px solid var(--border); padding: 17px 19px 19px; display: flex; flex-direction: column; gap: 13px; animation: pop-in .18s ease-out; }
.tile:not(.open) .tile-body { display: none; }

.search-row { display: flex; gap: 10px; }
.search-row .input { flex: 1; }
.filter-grp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.home-quickscope { display: flex; gap: 10px; flex-wrap: wrap; }
.home-quickscope .select { flex: 1; min-width: 180px; }
.help-line { font-size: 12.5px; color: var(--text-dim); }
.link-inline { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.link-inline:hover { text-decoration: underline; }

.paper-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 2px solid var(--accent-line); border-radius: var(--radius-md); transition: border-color .12s; }
.paper-row:hover { border-color: var(--accent-line); border-left-color: var(--accent); }
.paper-main { flex: 1; min-width: 0; }
.paper-tt { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.paper-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.state-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.state-tag.untaken { color: var(--accent); background: var(--accent-soft); }
.state-tag.taken { color: var(--good); background: color-mix(in oklab, var(--good) 13%, transparent); }

.corpus { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elev); }
.corpus .cs { padding: 16px 18px; border-right: 1px solid var(--border); }
.corpus .cs:last-child { border-right: 0; }
.cs-v { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-v .u { color: var(--accent); font-style: italic; }
.cs-l { font-size: 11px; color: var(--text-faint); margin-top: 6px; letter-spacing: .05em; text-transform: uppercase; }

/* in-shell "coming soon" stub */
.stub-card { margin-top: 26px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-elev); padding: 22px 24px; }
.stub-note { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.stub-note b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   SEARCH & BROWSE (Phase 3.2) — ported from the design surfaces.css
   search slice. Difficulty class is `medium` (vocabulary locked), NOT
   the prototype's `med`.
   ============================================================ */
.search-tabs { display: flex; gap: 4px; margin: 18px 0; border-bottom: 1px solid var(--border); }
.search-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-weight: 500; font-size: 14.5px; color: var(--text-dim); padding: 11px 14px; cursor: pointer; }
.search-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

.filters { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); }
.filter-lbl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); flex: 0 0 92px; }
.two-tier { display: flex; gap: 8px; flex-wrap: wrap; }
.two-tier .select { width: auto; min-width: 150px; padding: 8px 12px; font-size: 13.5px; }
.year-range { display: flex; align-items: center; gap: 8px; }
.year-range .select { width: auto; min-width: 120px; padding: 8px 12px; font-size: 13.5px; }
.year-range .year-dash { opacity: .55; }
.filters-hint { font-size: 12.5px; color: var(--text-faint); margin: 14px 0 0; }
/* Session review — each card tagged with how it was self-marked */
.review-item { margin-bottom: 14px; }
.review-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.review-tag.good { color: var(--good); }
.review-tag.bad { color: var(--bad); }
.review-item.is-bad .rcard { border-left: 3px solid var(--bad); }
.review-item.is-good .rcard { border-left: 3px solid var(--good); }
/* Study guide */
.study-miss { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.study-missed-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--bad); margin-bottom: 6px; }
.study-expand { margin-top: 10px; }
.study-expand.on { color: var(--accent); border-color: var(--accent-line); }
.study-material { margin-top: 12px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); }
.study-tier-h { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
.study-tier-h span { color: var(--text-faint); }
.study-tier-sub { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 10px; }
.study-tier { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.study-recovered { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.study-recovered > div[hidden] { display: none; }

.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 8px 0 4px; flex-wrap: wrap; }
.results-meta { color: var(--text-dim); font-size: 13px; margin-top: 8px; text-wrap: pretty; }
.results-meta b { color: var(--text); font-weight: 600; }
.results-bar { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.results-bar .count { color: var(--text-dim); font-size: 13px; }
.results-bar .count b { color: var(--text); font-weight: 600; }
.empty { text-align: center; padding: 48px 0; color: var(--text-faint); }
.empty svg { opacity: .5; margin-bottom: 8px; }
.section-h { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0 0 4px; color: var(--text); }
.picker-head { display: flex; align-items: center; gap: 14px; margin: 20px 0 18px; flex-wrap: wrap; }

/* difficulty sections (Easier / Medium / Harder) */
.diff-section { margin-top: 26px; }
.diff-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.diff-bar { width: 4px; height: 34px; border-radius: 999px; flex: 0 0 4px; }
.diff-bar.easy { background: var(--good); }
.diff-bar.medium { background: var(--ink); }
.diff-bar.hard { background: var(--warn); }
.diff-tt { flex: 1; min-width: 0; }
.diff-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--text); }
.diff-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.diff-count { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* same-answer deck (chevron pager) */
.ansdeck { border: 1px solid var(--accent-line); border-radius: var(--radius-md); background: var(--bg-elev); margin-bottom: 10px; overflow: hidden; }
.ansdeck-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line); }
.ansdeck-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ansdeck-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.ansdeck-ans { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 18px; color: var(--accent); line-height: 1.1; }
.ansdeck-pager { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.deck-arrow { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.deck-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); }
.deck-arrow:disabled { opacity: .35; cursor: not-allowed; }
.deck-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
.ansdeck .rcard.in-deck { border: 0; border-radius: 0; margin: 0; background: transparent; box-shadow: none; }
.deck-dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 13px; }
.deck-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; background: var(--border-strong); cursor: pointer; padding: 0; }
.deck-dot.on { background: var(--accent); }

/* result card */
.rcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px 17px; margin-bottom: 10px; transition: border-color .12s; }
.rcard:hover { border-color: var(--border-strong); }
.rcard-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.rcard-top .right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.rcard-q { font-size: 15px; line-height: 1.55; color: var(--text); }
.rcard-media { margin: 0 0 10px; }
.rcard-media img, .rcard-media video { max-width: 100%; max-height: 340px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.rcard-media.is-audio audio { width: 100%; max-width: 440px; display: block; }
/* live-played audio: no file to serve, keep the old small placeholder marker */
.rcard-media-badge { width: 56px; height: 42px; flex: 0 0 56px; border-radius: 7px; border: 1px solid var(--border); background: repeating-linear-gradient(135deg, var(--bg-elev) 0 7px, var(--bg-elev-2) 7px 14px); display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); float: right; margin: 0 0 6px 12px; }
.rcard-foot { display: flex; align-items: center; gap: 12px; margin-top: 11px; flex-wrap: wrap; }
.rcard-foot .ans { color: var(--text-dim); font-size: 13.5px; }
.rcard-foot .ans b { color: var(--accent); font-weight: 600; }
.pct-badge.empty { color: var(--text-faint); }
.pct-badge.empty .mini i { width: 0; }

/* accept / prompt / DNA chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.achip { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 11px; border-radius: 9px; font-size: 12.5px; color: var(--text); border: 1px solid var(--border); background: var(--bg-input); }
.achip .k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.achip.accept { border-color: color-mix(in oklab, var(--good) 38%, var(--border)); background: color-mix(in oklab, var(--good) 11%, transparent); }
.achip.accept .k { color: var(--good); }
.achip.prompt { border-color: color-mix(in oklab, var(--warn) 38%, var(--border)); background: color-mix(in oklab, var(--warn) 11%, transparent); }
.achip.prompt .k { color: var(--warn); }
.achip.dna { border-color: color-mix(in oklab, var(--bad) 38%, var(--border)); background: color-mix(in oklab, var(--bad) 11%, transparent); }
.achip.dna .k { color: var(--bad); }
.achip.dna .v { color: var(--text-dim); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--bad) 60%, transparent); }

/* Anki inline affordance */
.rcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.anki-aff { width: 100%; }
.anki-toggle { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.anki-toggle:hover { border-color: var(--accent-line); color: var(--text); }
.anki-toggle.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.anki-toggle svg { transition: transform .18s; }
.anki-aff.open .anki-toggle svg { transform: rotate(180deg); }
.anki-inline { margin-top: 10px; }
.anki-inline-row { display: flex; align-items: stretch; gap: 8px; }
.anki-text { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; white-space: pre-wrap; word-break: break-word; user-select: all; cursor: text; }
.anki-copy { flex: 0 0 auto; align-self: stretch; background: var(--accent); color: var(--accent-text); border: 0; border-radius: 7px; font: inherit; font-weight: 600; font-size: 12.5px; padding: 0 16px; cursor: pointer; }
.anki-copy:hover { filter: brightness(1.06); }
.anki-copy.fail { background: var(--warn); }

/* browse */
.browse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.btile { text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: all .12s; }
.btile:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.btile-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.btile-count { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.btile-bar { height: 4px; border-radius: 999px; background: var(--bg-elev-2); margin-top: 12px; overflow: hidden; }
.btile-bar i { display: block; height: 100%; background: var(--ink); opacity: .6; }
.sublist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 16px; }
.subrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; border-left: 0; font: inherit; color: var(--text); }
.subrow:last-child { border-bottom: 0; }
.subrow:hover { background: var(--bg-elev-2); padding-left: 20px; }
.subrow .nm { font-weight: 600; font-size: 14.5px; }
.subrow .ct { margin-left: auto; color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.subrow-all { width: 100%; border: 1px solid var(--accent-line); border-left: 2px solid var(--accent); border-radius: var(--radius-md); margin-top: 16px; background: var(--accent-soft); }
.subrow-all:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); padding-left: 16px; }
.subrow-all .nm { color: var(--accent); }
.subrow-all .ct { color: var(--text-dim); }
.subrow-all .hgo { color: var(--accent); margin-left: 4px; display: inline-flex; }
.subrow-all + .sublist { margin-top: 10px; }

@media (max-width: 900px) {
  .browse-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-lbl { flex-basis: 100%; }
}

/* ============================================================
   TEST SESSION (Phase 3.3) — ported from the design surfaces.css
   test slice + papers-profile.css tstats. The question card itself is
   the shared QCard (cards.js); these are the setup + reveal/mark chrome.
   ============================================================ */
.setup-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.setup-row { display: flex; flex-direction: column; gap: 9px; }
.setup-row > .filter-lbl { flex: none; }

.test-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 13px; color: var(--text-dim); }
.test-progress .scores { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.test-progress .scores b { color: var(--text); }
.test-progress .g b { color: var(--good); }
.test-progress .b b { color: var(--bad); }

.reveal-btn { width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px; border-radius: 13px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .14s, border-color .14s; }
.reveal-btn:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); border-color: var(--accent); }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-dim); }

/* the signature reveal */
.reveal { margin-top: 16px; border: 1px solid var(--accent-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--bg-elev); padding: 18px 20px 20px; position: relative; animation: reveal-in .3s cubic-bezier(.22,.9,.3,1); }
.reveal::before, .reveal::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--accent); opacity: .55; }
.reveal::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.reveal::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal.marked-good { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 22%, transparent); }
.reveal.marked-bad { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad) 22%, transparent); }
.reveal-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.reveal-lbl::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.answer { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.12; color: var(--text-dim); letter-spacing: -.01em; }
.answer .req { font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .01em; }
/* our corpus stores answers verbatim (no [[ ]] markers → all .lc) — show them
   in full text colour so the reveal reads prominently, not dimmed. */
.answer .lc { color: var(--text); }
.pct { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--text-dim); }
.pct-bar { flex: 0 0 84px; height: 6px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.pct-bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.pct b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pct.nodata { color: var(--text-faint); font-style: italic; }
.miss-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--bad); background: color-mix(in oklab, var(--bad) 12%, transparent); border: 1px solid color-mix(in oklab, var(--bad) 32%, var(--border)); padding: 3px 9px; border-radius: 999px; }
.mark-row { display: flex; gap: 10px; margin-top: 18px; }
.mark-row .mk { flex: 1; border: 0; border-radius: 11px; padding: 13px; font: inherit; font-weight: 700; font-size: 14.5px; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: filter .14s, opacity .14s; }
.mk.right { background: var(--good); }
.mk.wrong { background: var(--bad); }
.mk:hover { filter: brightness(1.06); }
.reveal.marked-good .mk.wrong, .reveal.marked-bad .mk.right { opacity: .4; }

/* summary */
.score-hero { text-align: center; margin: 18px 0 28px; }
.score-hero .big { font-family: var(--font-display); font-size: 84px; font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-hero .big .of { color: var(--text-faint); font-weight: 400; }
.score-hero .lbl { color: var(--text-dim); font-size: 13px; margin-top: 6px; letter-spacing: .06em; text-transform: uppercase; }
.section-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 18px; }
.study-section { margin-top: 32px; }
.tstats { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 30px; }
.tsrow { display: grid; grid-template-columns: 26px 1fr 200px 74px 48px; align-items: center; gap: 14px; padding: 13px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tsrow:last-child { border-bottom: 0; }
.tsrow .rank { font-family: var(--font-display); color: var(--text-faint); font-weight: 500; }
.tsrow .nm { font-weight: 600; font-size: 14.5px; }
.tsrow .track { height: 9px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.tsrow .track i { display: block; height: 100%; border-radius: 999px; }
.tsrow .fr { text-align: right; font-size: 13px; color: var(--text-dim); }
.tsrow .pc { text-align: right; font-weight: 600; font-size: 14px; }
.tsrow.weak .nm { color: var(--bad); }
@media (max-width: 640px) {
  .tsrow { grid-template-columns: 22px 1fr 60px 44px; }
  .tsrow .track { display: none; }
}

/* ============================================================
   PROFILE (Phase 3.5) — header, tabs, stat cards, history rows,
   subcategory tags, settings. Ported from the prototype's
   papers-profile.css (profile block); shared primitives (.toggle,
   .seg, .input, .empty, .tstats/.tsrow, .section-h/.section-sub)
   already live above.
   ============================================================ */
.profile-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.avatar-lg { width: 70px; height: 70px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 70px; }
.profile-head h1 { font-family: var(--font-display); font-weight: 500; font-size: 30px; margin: 0 0 4px; }
.profile-head .email { color: var(--text-dim); font-size: 13.5px; }
.name-edit-btn { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 8px; cursor: pointer; margin-left: 10px; display: inline-flex; align-items: center; gap: 5px; }
.name-edit-btn:hover { color: var(--accent); border-color: var(--accent-line); }
.name-display { display: flex; align-items: center; gap: 10px; }
.name-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.name-reset { margin-top: 8px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.name-reset:hover { text-decoration: underline; }
.section-subhead { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-dim); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; flex-wrap: wrap; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-weight: 500; font-size: 14px; color: var(--text-dim); padding: 11px 15px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.stat-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.sh-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; }
.sh-l { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.sh-v { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-v .of { color: var(--text-faint); font-weight: 400; font-size: 18px; }
@media (max-width: 640px) { .stat-head { grid-template-columns: 1fr; } }

.sub-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); font-size: 13px; }
.sub-tag .pc { font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-tag.good .pc { color: var(--good); }
.sub-tag.weak .pc { color: var(--bad); }
.sub-tag .nm { color: var(--text-dim); }

/* history rows (Tests / Sessions / Searches) */
.hist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.hrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--border); width: 100%; text-align: left; border-left: 0; font: inherit; color: var(--text); cursor: pointer; text-decoration: none; }
.hrow:last-child { border-bottom: 0; }
.hrow:hover { background: var(--bg-elev-2); }
.hrow .hic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.hrow .hm { flex: 1; min-width: 0; }
.hrow .ht { font-weight: 600; font-size: 14.5px; }
.hrow .hmeta { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.hrow .hsc { font-family: var(--font-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrow .hsc .of { color: var(--text-faint); font-weight: 400; }
.hrow .hgo { color: var(--text-faint); flex: 0 0 auto; transition: color .12s, transform .12s; }
.hrow:hover .hgo { color: var(--accent); transform: translateX(2px); }
.pb-star { color: var(--warn); }
.resume-row { cursor: default; }
.resume-remain { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* settings */
.set-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: 0; }
.set-l .t { font-weight: 600; font-size: 14.5px; }
.set-l .d { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; max-width: 460px; }
.danger-zone { margin-top: 24px; }
.danger-zone .btn { border: 1px solid color-mix(in oklab, var(--bad) 40%, var(--border)); background: transparent; color: var(--bad); }
.danger-zone .btn:hover { background: color-mix(in oklab, var(--bad) 10%, transparent); }

/* ============================================================
   PAGINATION (ported from J! Trainer; surfaces land in 3.2–3.5)
   ============================================================ */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.list-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.list-summary:focus { outline: none; }
.list-summary .count { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-summary .count b { color: var(--text); font-weight: 600; }
.list-summary .count .ls-range { color: var(--text); font-weight: 600; white-space: nowrap; }

.pager { margin-top: var(--space-5); display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.pager-list { display: flex; align-items: center; gap: 4px; }
.pager a, .pager span.pager-cell {
  --h: 38px; min-width: var(--h); height: var(--h); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text-dim); font: inherit; font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease; user-select: none;
}
.pager a:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-elev-2); }
.pager a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* specificity must beat ".pager span.pager-cell" (0,2,1) or the accent never shows */
.pager .pager-cell[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; cursor: default; }
.pager [aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pager-gap { color: var(--text-faint); padding: 0 2px; min-width: 22px; text-align: center; user-select: none; }
.pager-edge svg { width: 15px; height: 15px; }
.pager-compact { display: none; }
@media (max-width: 560px) {
  .pager-list { display: none; }
  .pager-compact { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
  .pager-edge .edge-txt { display: none; }
}

.load-more {
  appearance: none; width: 100%; margin-top: var(--space-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 18px; background: var(--bg-elev);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-dim); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.load-more:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.load-more .lm-count { color: var(--text-faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.load-more svg { width: 16px; height: 16px; }
.load-more-done { width: 100%; margin-top: var(--space-3); text-align: center; padding: 10px; color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; border-top: 1px dashed var(--border); }

/* ============================================================
   STANDALONE PAGES (login / access / error) — don't extend base
   ============================================================ */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { max-width: 440px; }
.hero-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 34px; }
.hero-eyebrow { color: var(--text-faint); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.hero-title { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.12; margin: 0 0 12px; letter-spacing: -.02em; }
.hero-title em { font-style: italic; font-weight: 600; color: var(--accent); }
.hero-sub { color: var(--text-dim); margin: 0; }
.lg-fine { color: var(--text-faint); font-size: 12.5px; margin-top: var(--space-4); }
.btn-google { width: 100%; padding: 12px 16px; margin-top: var(--space-5); background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); }
.btn-google:hover { background: var(--bg-elev-2); border-color: var(--accent-line); }
.pending-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); }
.pending-sub { margin-top: 8px; color: var(--text-dim); line-height: 1.6; }
.pending-sub b { color: var(--text); }

@media (max-width: 720px) {
  .page-h1 { font-size: 30px; }
}
@media (max-width: 900px) {
  .corpus { grid-template-columns: repeat(2, 1fr); }
  .corpus .cs:nth-child(2n) { border-right: 0; }
  .corpus .cs:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .paper-row { flex-wrap: wrap; }
  .paper-row .btn { flex: 1 1 100%; }
}

/* ============================================================
   GRADED PAPER SIMULATION (Phase 3.4) — ported from the Atlas
   prototype's papers-profile.css. Picker extras + sitting +
   marking + break + results. (picker-head/paper-row/state-tag/
   seg/toggle/section-h already live above.)
   ============================================================ */

/* picker extras */
.picker-year { width: auto; min-width: 130px; margin-left: auto; padding: 8px 12px; font-size: 13.5px; }
.branch-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.paper-list { display: flex; flex-direction: column; gap: 10px; }
.paper-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.paper-pager .pg-list { display: inline-flex; gap: 4px; }
.paper-pager .pg-num { min-width: 32px; height: 32px; padding: 0 6px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 13px; border-radius: 8px; cursor: pointer; }
.paper-pager .pg-num:hover { color: var(--accent); border-color: var(--accent-line); }
.paper-pager .pg-num.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.paper-pager .pchev { max-width: none; padding: 8px 11px; }
.paper-scores { text-align: right; font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.paper-scores .sc { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.paper-scores .sc .of { color: var(--text-faint); font-weight: 400; }

/* sitting — bar + clock */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent-line); }
.sit-bar { position: sticky; top: var(--header-h); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 18px; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-md); flex-wrap: wrap; }
.sit-info { min-width: 0; }
.sit-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.sit-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sit-timer { display: inline-flex; align-items: center; gap: 12px; }
.timer-val { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer-val.low { color: var(--bad); }
.timer-val.untimed { font-size: 15px; color: var(--text-faint); font-family: var(--font-ui); font-style: italic; }
.autosave { font-size: 11px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 5px; }
.autosave .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

/* sitting — paper-document layout */
.sit-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 24px; align-items: start; }
.sit-nav { position: sticky; top: calc(var(--header-h) + 74px); max-height: calc(100vh - var(--header-h) - 96px); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 5px; padding-right: 2px; }
.nav-prog { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; padding: 0 4px 8px; }
.nav-prog span { color: var(--text-faint); }
.nav-genre { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-left: 2px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.nav-genre:hover { border-color: var(--accent-line); border-left-color: var(--accent); }
.nav-genre.on { border-left-color: var(--accent); background: var(--accent-soft); }
.nav-genre .ng-n { font-weight: 600; }
.nav-genre .ng-c { font-variant-numeric: tabular-nums; color: var(--text-faint); font-size: 12px; }
.nav-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; padding: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* the class sets display:grid, which beats the [hidden] UA rule — restore it so the Hide/Show toggle works */
.nav-map[hidden] { display: none; }
.mcell { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--bg-input); color: var(--text-faint); font-size: 9.5px; font-variant-numeric: tabular-nums; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mcell.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.mcell:hover { border-color: var(--accent); }
.paper-doc { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 26px 30px 12px; }
.paper-rubric { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 22px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.paper-rubric b { color: var(--accent); font-weight: 700; }
.paper-genre { margin-bottom: 14px; }
.paper-genre-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0 12px; margin-bottom: 6px; border-bottom: 2px solid var(--accent-line); }
.pg-name { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: var(--accent); }
.pg-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: .04em; white-space: nowrap; }
.pq { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.pq:last-child { border-bottom: 0; }
.pq-n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-faint); flex: 0 0 24px; text-align: right; padding-top: 2px; }
.pq.done .pq-n { color: var(--accent); }
.pq-main { flex: 1; min-width: 0; }
.pq-text { font-size: 15px; line-height: 1.55; color: var(--text); }
.imgtag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 6px; margin-left: 8px; white-space: nowrap; }
.pq-line { width: 100%; margin-top: 9px; background: transparent; border: 0; border-bottom: 1.5px solid var(--border-strong); color: var(--text); font-family: var(--font-display); font-size: 16px; padding: 3px 2px; outline: none; transition: border-color .12s; }
.pq-line::placeholder { color: var(--text-faint); font-family: var(--font-ui); font-size: 13px; font-style: italic; }
.pq-line:focus { border-bottom-color: var(--accent); }
.pq.done .pq-line { color: var(--accent); }
.paper-pagenav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.paper-pagenav.bottom { margin: 20px 0 8px; }
.pchev { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 13px; padding: 8px 13px; border-radius: 9px; cursor: pointer; max-width: 44%; }
.pchev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchev:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); }
.pchev:disabled { opacity: .4; cursor: not-allowed; }
.ppage { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); letter-spacing: .05em; white-space: nowrap; }

/* marking */
.mark-genre-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--accent); letter-spacing: -.01em; margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mark-score { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; color: var(--text-dim); }
.mark-score b { color: var(--good); font-weight: 700; }
.mark-score .mgh-sep { margin: 0 8px; opacity: .5; }
.mark-assist { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-md); margin-bottom: 18px; }
.mark-assist .t { font-size: 13.5px; color: var(--text); }
.mark-assist .t b { font-weight: 700; }
.mrow { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 10px; }
.mrow.suggested { border-color: var(--accent-line); }
.mrow-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mrow-no { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.mrow-q { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.mrow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.mcol { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.mcol .lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.mcol .yours { font-size: 16px; font-family: var(--font-display); }
.mcol.empty .yours { color: var(--text-faint); font-style: italic; }
.mcol .model { font-family: var(--font-display); font-size: 16px; }
.mcol .model .req { font-weight: 700; color: var(--accent); }
.mrow .chip-row { margin: 0 0 14px; }
.mark-btns { display: flex; gap: 10px; align-items: center; }
.mark-btns .mk { flex: 0 0 auto; padding: 9px 20px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); border-radius: 9px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.mark-btns .mk.right.on { background: var(--good); border-color: var(--good); color: #fff; }
.mark-btns .mk.wrong.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.suggest-pill { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 4px 10px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }

/* break */
.break-card { text-align: center; max-width: 460px; margin: 40px auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 32px; box-shadow: var(--shadow-card); }
.break-h { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 0 0 6px; }
.break-timer { font-family: var(--font-mono); font-size: 48px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; margin: 14px 0; }
.break-p { color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }

/* results */
.res-hero { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin: 18px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.res-total { font-family: var(--font-display); font-size: 76px; font-weight: 500; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.res-total .of { color: var(--text-faint); font-weight: 400; font-size: 46px; }
.res-side { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.res-pill { font-size: 12.5px; color: var(--text-dim); display: inline-flex; gap: 7px; align-items: center; }
.res-pill b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.res-pill.pb { color: var(--warn); }
.catbars { display: flex; flex-direction: column; gap: 11px; }
.catbar { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.catbar .nm { font-weight: 600; font-size: 14px; }
.catbar .track { height: 10px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.catbar .track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .5s; }
.catbar .fr { text-align: right; font-size: 13px; color: var(--text-dim); }
.catbar .fr b { color: var(--text); }

@media (max-width: 900px) {
  .sit-layout { grid-template-columns: 1fr; }
  .sit-nav { position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav-prog { padding: 0 8px 0 0; }
  .nav-genre { flex: 1 1 auto; }
  .nav-map { grid-template-columns: repeat(12, 1fr); width: 100%; }
  .sit-nav .btn, .sit-nav .chip { width: auto !important; }
  .paper-doc { padding: 20px 18px 12px; }
}
@media (max-width: 640px) { .mrow-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .picker-year { margin-left: 0; width: 100%; }
  .catbar { grid-template-columns: 110px 1fr 54px; }
}