/* ============================================================================
   Lattice — design system
   ----------------------------------------------------------------------------
   One palette, two themes, one spacing scale. Every colour below is a semantic
   token: components never name a hue, so the dark theme is a token swap rather
   than a second stylesheet.

   The scheme is cool and structural on purpose — this is a partial order over
   mathematics, not a notebook. Indigo carries structure and action, teal carries
   evidence and progress (it is the mastery colour throughout), amber carries
   attention. Warm hues are reserved for things that are actually urgent.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ground */
  --bg:            #f5f7fb;
  --bg-2:          #eceffa;
  --surface:       #ffffff;
  --surface-2:     #f3f5fb;
  --surface-3:     #e8ecf6;
  --surface-glass: rgba(255, 255, 255, 0.78);

  /* line */
  --border:        #e0e5f0;
  --border-strong: #c9d1e2;

  /* ink */
  --text:          #141824;
  --text-2:        #4d566b;
  --text-3:        #7d8798;

  /* intent */
  --primary:       #4f46e5;
  --primary-hover: #4338ca;
  --primary-ink:   #ffffff;
  --primary-soft:  rgba(79, 70, 229, 0.10);
  --primary-line:  rgba(79, 70, 229, 0.32);

  --accent:        #0d9488;   /* mastery, evidence, "you did this" */
  --accent-soft:   rgba(13, 148, 136, 0.12);
  --accent-line:   rgba(13, 148, 136, 0.35);

  --amber:         #b45309;
  --amber-soft:    rgba(180, 83, 9, 0.12);
  --danger:        #be123c;
  --danger-soft:   rgba(190, 18, 60, 0.10);
  --ok:            #15803d;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(20, 24, 36, 0.05), 0 1px 3px rgba(20, 24, 36, 0.04);
  --shadow-2: 0 2px 4px rgba(20, 24, 36, 0.05), 0 8px 20px -6px rgba(20, 24, 36, 0.10);
  --shadow-3: 0 12px 40px -8px rgba(20, 24, 36, 0.22);

  /* shape */
  --r-xs: 6px;  --r-sm: 9px;  --r: 12px;  --r-lg: 16px;  --r-xl: 22px;

  /* type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* rhythm */
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px;
  --gap-5: 24px; --gap-6: 32px; --gap-7: 48px;

  --topbar-h: 60px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0c0f16;
  --bg-2:          #111624;
  --surface:       #141924;
  --surface-2:     #1a202d;
  --surface-3:     #222a3a;
  --surface-glass: rgba(20, 25, 36, 0.78);

  --border:        #242c3b;
  --border-strong: #37415a;

  --text:          #e8ecf5;
  --text-2:        #a4afc5;
  --text-3:        #707d96;

  --primary:       #818cf8;
  --primary-hover: #a5b0ff;
  --primary-ink:   #0c0f16;
  --primary-soft:  rgba(129, 140, 248, 0.14);
  --primary-line:  rgba(129, 140, 248, 0.38);

  --accent:        #2dd4bf;
  --accent-soft:   rgba(45, 212, 191, 0.13);
  --accent-line:   rgba(45, 212, 191, 0.38);

  --amber:         #fbbf24;
  --amber-soft:    rgba(251, 191, 36, 0.13);
  --danger:        #fb7185;
  --danger-soft:   rgba(251, 113, 133, 0.13);
  --ok:            #4ade80;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 16px 48px -10px rgba(0, 0, 0, 0.7);
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -12%, var(--bg-2) 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 0%, var(--primary-soft) 0%, transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.012em; margin: 0; }
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Several components set `display`, which beats the UA's [hidden] rule. */
[hidden] { display: none !important; }

::selection { background: var(--primary-soft); }

/* A scrollbar that does not shout. Scrolling regions are common here — the
   sidebar, the inspector, the study card — and the default bars break the
   surfaces they sit in. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- shared type helpers ------------------------------------------------- */

.eyebrow {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow a { color: var(--text-3); }
.eyebrow a:hover { color: var(--primary); }

.dim { color: var(--text-2); }
.panel .dim, .inspector .dim, .subject-head .dim { font-size: 0.84rem; color: var(--text-3); }
.warn { color: var(--danger); }

.sub {
  margin: var(--gap-5) 0 var(--gap-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sub:first-child { margin-top: 0; }

.data-count {
  font-size: 0.74rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

code, .mono { font-family: var(--mono); font-size: 0.88em; }
code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

kbd {
  font: inherit;
  font-size: 0.68rem;
  font-family: var(--mono);
  padding: 2px 5px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface-2);
  color: var(--text-2);
}

/* ---- top bar ------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  height: var(--topbar-h);
  padding: 0 var(--gap-5);
  background: var(--surface-glass);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}
.topbar .brand strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.topbar .brand small {
  display: block;
  font-size: 0.66rem;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
.topbar nav {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.nav-button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.nav-button:hover { color: var(--text); background: var(--surface-3); }
.nav-button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.topbar .theme-toggle {
  margin-left: auto;
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.topbar .theme-toggle:hover {
  color: var(--primary);
  border-color: var(--primary-line);
  transform: rotate(-18deg);
}

/* ---- page frame ---------------------------------------------------------- */

main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--gap-6) var(--gap-5) var(--gap-7);
}
body[data-view="explore"] main { max-width: none; padding: var(--gap-4) var(--gap-4) var(--gap-4); }

.view { display: none; }
.view.active { display: block; animation: view-in 0.22s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- panels -------------------------------------------------------------- */

.panel {
  padding: var(--gap-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.panel > h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--gap-3);
}
.panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-bottom: var(--gap-4);
}
.panel-heading h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.panel-note {
  margin: -4px 0 var(--gap-4);
  max-width: 68ch;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-2);
}
.panel > h2 + .panel-note { margin-top: -2px; }

.progress-content { display: grid; gap: var(--gap-4); }

/* ---- stat tiles ---------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: var(--gap-3);
}
.stat-tile {
  display: grid;
  gap: 2px;
  padding: var(--gap-4) var(--gap-4) 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.stat-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary);
  opacity: 0.7;
}
.stat-tile b {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-tile span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.stat-tile.accent::before { background: var(--accent); }
.stat-tile.amber::before { background: var(--amber); }
.stat-tile .stat-foot { font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--text-3); }

/* ---- buttons ------------------------------------------------------------- */

.btn-primary {
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.14s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.ghost-btn {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.ghost-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
}
.ghost-btn.is-ok { color: var(--accent); border-color: var(--accent-line); }

.link-btn {
  font: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

/* ---- form controls ------------------------------------------------------- */

input, select, textarea, button { font-family: inherit; }

input[type="text"], input[type="search"], select, textarea {
  font: inherit;
  font-size: 0.86rem;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--primary); margin: 0; }

/* segmented control */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.seg button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.seg button:hover { color: var(--text); }
.seg button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.seg-sm button { font-size: 0.74rem; padding: 4px 6px; }

/* toggle chips */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-toggle {
  font: inherit;
  font-size: 0.73rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.chip-toggle:hover { color: var(--text-2); border-color: var(--border-strong); }
.chip-toggle.on {
  color: var(--primary);
  border-color: var(--primary-line);
  background: var(--primary-soft);
}

/* static chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.71rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.chip-link { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }
.chip-link:hover { text-decoration: none; filter: brightness(1.05); }
.chip-drill, .chip-W1 { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.chip-W2 { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); }
.chip-core { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.chip-due { color: var(--primary-ink); background: var(--accent); border-color: var(--accent); }
.chip-fit { margin-left: auto; font-variant-numeric: tabular-nums; }

.tag {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
}

/* ---- progress bars ------------------------------------------------------- */

.cov-track, .subject-bar, .test-track, .mastery-track, .level-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.cov-fill, .subject-fill, .mastery-fill, .level-fill, .test-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cov-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(80px, 1fr) 3.2rem;
  align-items: center;
  gap: var(--gap-3);
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}
.cov-row:first-of-type { border-top: 0; }
.cov-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-label a { color: var(--text); font-weight: 500; }
.cov-label a:hover { color: var(--primary); }
.cov-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cov-sub {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-size: 0.73rem;
  color: var(--text-3);
}

/* ---- lists --------------------------------------------------------------- */

.ranked {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}
.ranked li {
  counter-increment: rank;
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 0.87rem;
}
.ranked li:first-child { border-top: 0; }
.ranked li::before {
  content: counter(rank);
  flex: none;
  width: 1.35rem;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.ranked li a { color: var(--text); flex: 1; min-width: 0; }
.ranked li a:hover { color: var(--primary); }
.ranked li .dim { flex: none; font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.gaps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gap-2); }
.gaps li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.83rem;
  color: var(--text-2);
}
.gaps li a { color: var(--text); font-weight: 500; }

.weak-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.weak-tag.confirmed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }

/* ---- tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--gap-5)); padding: 0 var(--gap-5); }
.book-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.book-table th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 var(--gap-3) var(--gap-2) 0;
  white-space: nowrap;
}
.book-table td {
  padding: 10px var(--gap-3) 10px 0;
  border-top: 1px solid var(--border);
  vertical-align: baseline;
}
.book-table tbody tr:hover td { background: var(--surface-2); }
.book-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.book-table .total td { font-weight: 600; border-top: 2px solid var(--border-strong); }
.book-title { font-weight: 500; color: var(--text); }
.book-title:hover { color: var(--primary); }

/* ---- activity heatmap ---------------------------------------------------- */

.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.heatmap {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  gap: 3px;
  width: max-content;
}
.heatmap .cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--surface-3);
  border: 1px solid transparent;
}
.heatmap .cell.l1 { background: color-mix(in srgb, var(--accent) 28%, var(--surface-3)); }
.heatmap .cell.l2 { background: color-mix(in srgb, var(--accent) 52%, var(--surface-3)); }
.heatmap .cell.l3 { background: color-mix(in srgb, var(--accent) 76%, var(--surface-3)); }
.heatmap .cell.l4 { background: var(--accent); }
.heatmap-key {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--gap-3);
  font-size: 0.7rem;
  color: var(--text-3);
}
.heatmap-key .cell { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ============================================================================
   Home
   ========================================================================== */

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-4); }
@media (min-width: 1080px) { .home-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.home-main, .home-side { display: grid; gap: var(--gap-4); align-content: start; }
#v-home > .stat-row { margin-bottom: var(--gap-4); }

.plan-actions { display: flex; gap: var(--gap-2); align-items: center; }
.plan { margin: 0; padding: 0; list-style: none; display: grid; }
.plan li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--gap-4);
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.plan li:first-child { border-top: 0; padding-top: 0; }
.plan-dur {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary);
  text-align: right;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-dur small {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.plan-body { display: grid; gap: 2px; min-width: 0; font-size: 0.9rem; }
.plan-body b { font-weight: 600; }
.plan-body .dim { font-size: 0.79rem; color: var(--text-3); line-height: 1.45; }
#cadenceNote { margin-top: var(--gap-3); font-size: 0.8rem; }

/* Home's inspector on the graph shape: the subject map */
.subject-map {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}
.subject-card {
  display: grid;
  gap: 8px;
  padding: var(--gap-4);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.subject-card:hover {
  border-color: var(--primary-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.subject-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.subject-count { font-size: 0.74rem; color: var(--text-3); line-height: 1.45; }
.subject-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-2);
  font-size: 0.72rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Study
   ========================================================================== */

.study-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-4); min-width: 0; overflow-x: clip; }
@media (min-width: 1000px) {
  .study-grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "content sidebar"; }
  .study-grid > .sidebar { grid-area: sidebar; }
  .study-grid > #studyRoot { grid-area: content; }
}
#studyRoot { min-width: 0; max-width: 100%; overflow-x: clip; }

/* ---- the sidebar --------------------------------------------------------- */

.study-grid .sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--gap-4));
  align-self: start;
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
@media (max-width: 999px) {
  .study-grid .sidebar { position: static; max-height: none; }
}
.side-section { display: flex; flex-direction: column; }

/* Every sidebar block is a padded row separated by a hairline: the old version
   floated controls in one undifferentiated stack, and nothing grouped. */
.side-block {
  padding: var(--gap-4);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--gap-3);
}
.side-section.set-active .set-filter,
.side-section.set-active .set-global { display: none; }
.side-section.set-active .set-session-block { background: var(--surface-2); }
.side-block:first-child { border-top: 0; }
.side-block.tight { gap: var(--gap-2); }
.side-block .seg { min-width: 0; }
.side-block .seg > button { min-width: 0; white-space: normal; }
.set-only { display: none; }
.free-only { display: grid; }
.side-section.set-active .set-explore,
.side-section.set-active .set-filter,
.side-section.set-active .set-global { display: none; }
.side-section.set-active .set-only { display: grid; }
.side-section.set-active .free-only { display: none; }
.side-section.set-active .set-session-block { background: var(--surface-2); }
.side-coach {
  margin: 0;
  color: var(--text-2);
  font-size: .78rem;
  line-height: 1.5;
}
#diffSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.context-title { margin: 0; color: var(--text); font-size: .86rem; font-weight: 600; }
.context-note { margin: 4px 0 0; color: var(--text-3); font-size: .72rem; line-height: 1.4; }
.context-link { display: inline-block; margin-top: 8px; font-size: .74rem; color: var(--primary); }

.field { display: grid; gap: var(--gap-2); }
.field-label {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-2);
}
.field-label > span { display: inline-flex; align-items: baseline; gap: 6px; }
.pick-count {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* A source group with nothing selected supplies no problems — make that visible
   rather than leaving the reader to wonder why the queue is short. */
.pick-count.empty { color: var(--amber); }

.test-settings {
  display: grid;
  gap: var(--gap-2);
  padding: var(--gap-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.btn-block { width: 100%; padding: 10px 14px; font-size: 0.86rem; }

.session-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}
.session-mini span {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.session-mini b {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ability-box { display: grid; gap: 5px; }
.ability-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-2);
  font-size: 0.79rem;
  color: var(--text-2);
}
.ability-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
.ability-row b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.ability-row b.unsure { color: var(--text-3); font-weight: 500; }

.shortcut-note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ---- session bar --------------------------------------------------------- */

.session-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-4);
  align-items: center;
  margin-bottom: var(--gap-4);
  padding: 0 2px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.session-bar b {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.session-bar .dim { font-size: 0.78rem; color: var(--text-3); margin-left: auto; }
.session-bar .test-track { flex: 1 1 160px; max-width: 320px; }

/* ---- the question card --------------------------------------------------- */

.card {
  padding: var(--gap-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
@media (max-width: 640px) { .card { padding: var(--gap-4); border-radius: var(--r-lg); } }

.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--gap-4);
}

/* The citation breadcrumb: field → book → chapter → section → exercise. It is
   the single most useful thing on the card for anyone who owns the book, so it
   sits above the statement rather than buried in a chip. */
.source-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--gap-2);
  margin-bottom: var(--gap-4);
  padding: 10px var(--gap-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--text-2);
}
.source-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 260px;
}
.source-crumbs .crumb { color: var(--text-2); }
.source-crumbs .crumb-book { font-weight: 600; color: var(--text); }
.source-crumbs .crumb-last { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.source-crumbs .sep { color: var(--text-3); opacity: 0.7; }
.source-tools { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.source-tools .ghost-btn { font-size: 0.73rem; padding: 4px 9px; background: var(--surface); }
.book-out { display: inline-flex; align-items: center; gap: 4px; }
/* The copy on this machine gets the accent: it opens instantly, at the right
   page, and is what you actually read from. The web link is the fallback. */
.ghost-btn.btn-local {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.ghost-btn.btn-local:hover { background: var(--accent-soft); border-color: var(--accent); }
.tag-local {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
}
.tag-local:hover { text-decoration: none; border-color: var(--accent); }

.book-out::after { content: "↗"; font-size: 0.85em; opacity: 0.7; }

/* The statement itself is the one place we set serif type at reading size —
   maths set in a UI sans is hard to read, and MathJax pairs with a serif. */
/* Statements are reflowed into paragraphs by study.js, so no pre-wrap here —
   the newlines in the source are the extractor's column width, not the author's
   sentences. */
.statement {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--text);
  overflow-wrap: break-word;
  max-width: 72ch;
}
.statement > p + p, .statement > * + * { margin-top: 0.9em; }
.statement-list {
  margin: 0;
  padding-left: 1.6em;
  display: grid;
  gap: 0.7em;
}
.statement-list li::marker { color: var(--text-3); font-family: var(--sans); font-size: 0.85em; }
.statement-drill {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: pre-wrap;
  margin: 4px 0 var(--gap-5);
}
.statement.missing { color: var(--text-3); font-style: italic; }

.answer-label {
  display: block;
  margin: var(--gap-5) 0 var(--gap-2);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.free-answer {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--r);
  resize: vertical;
  min-height: 96px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.free-answer::placeholder { color: var(--text-3); }

/* A preview of what the answer box is holding, once it contains maths. Not an
   editor — MathJax is already loaded for the statements, and pointing it at the
   answer costs nothing. Hidden until there is TeX worth rendering. */
.answer-preview {
  margin-top: var(--gap-2);
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-2);
  overflow-x: auto;
}
.answer-preview:empty { display: none; }

.answer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  align-items: center;
  margin-top: var(--gap-3);
}
.hint-note { font-size: 0.75rem; color: var(--text-3); max-width: 46ch; line-height: 1.45; }

.answer-row { display: flex; gap: var(--gap-2); flex-wrap: wrap; align-items: center; }
.answer-row input {
  flex: 1 1 200px;
  font-size: 1rem;
  padding: 10px 13px;
  border-radius: var(--r);
  background: var(--surface-2);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: center;
  margin-top: var(--gap-5);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--border);
}
.self-label {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-right: var(--gap-2);
}
.card-actions [data-act="skip"] { margin-left: auto; }

.extras:not(:empty) { margin-top: var(--gap-4); }
.hint-list {
  margin: 0;
  padding: 0 0 0 var(--gap-5);
  display: grid;
  gap: var(--gap-2);
  font-size: 0.92rem;
  color: var(--text-2);
}
.hint-list li { padding-left: 4px; }
.solution {
  padding: var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.solution summary {
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--gap-3);
}
.solution .statement { font-size: 1rem; }

.feedback { min-height: 1.5em; margin-top: var(--gap-3); font-size: 0.92rem; font-weight: 500; }
.feedback.ok { color: var(--ok); }
.feedback.no { color: var(--danger); }
.feedback.partial { color: var(--text-2); }
.feedback-head { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.feedback-summary { margin: 0 0 7px; color: var(--text); font-weight: 500; }
.feedback-line { margin: 4px 0; color: var(--text-2); font-weight: 400; }
.feedback-line b { color: var(--text); font-weight: 650; }
.feedback-gap { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-3); font-size: .82rem; font-weight: 400; }
.feedback-gap span { color: var(--text-2); font-weight: 650; }
.feedback-note { margin: 8px 0 0; color: var(--text-3); font-size: .8rem; font-weight: 400; }
.solution-empty { padding: var(--gap-4); border: 1px dashed var(--border); border-radius: var(--r); color: var(--text-2); }
.solution-empty b { color: var(--text); }
.solution-empty p { margin: 5px 0 0; font-size: .84rem; }
.work { margin-top: var(--gap-2); }
.work-steps {
  margin: 0;
  padding-left: var(--gap-5);
  font-size: 0.88rem;
  color: var(--text-2);
  display: grid;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.trick { margin-top: var(--gap-2); font-size: 0.8rem; color: var(--text-3); font-style: italic; }

/* ---- rating movement ------------------------------------------------------ */

.rating-move {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.78rem;
  text-transform: capitalize;
  animation: move-in 0.3s ease both;
}
.rating-move b { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; margin: 0; }
.rating-move i { font-style: normal; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.rating-move.up { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.rating-move.up b { color: var(--accent); }
.rating-move.down { color: var(--text-2); }
@keyframes move-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- where this sits in the graph ----------------------------------------- */

.where-slot:not(:empty) { margin-top: var(--gap-4); }
.whereami {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: var(--gap-3) var(--gap-4);
}
.whereami summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-2) var(--gap-3);
  list-style: none;
}
.whereami summary::-webkit-details-marker { display: none; }
.where-title {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.where-now { font-size: 0.85rem; color: var(--text-2); }
.where-now b { color: var(--accent); }
.where-now em { font-style: normal; color: var(--text-3); }
.where-pos {
  font-size: 0.72rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
}
.where-key em { font-style: italic; color: var(--text-3); margin-left: var(--gap-2); }
.where-body { margin-top: var(--gap-3); display: grid; gap: var(--gap-2); }
.where-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--gap-2);
  align-items: baseline;
}
.where-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.where-nodes { display: flex; flex-wrap: wrap; gap: 5px; }
.node-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.75rem;
  text-decoration: none;
}
.node-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}
.node-pill:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.node-pill.held { color: var(--accent); border-color: var(--accent-line); }
.node-pill.held::before { background: var(--accent); }
.node-pill.weak { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 36%, transparent); }
.node-pill.weak::before { background: var(--amber); }
.node-pill.unseen::before { background: transparent; border: 1px solid var(--text-3); }
.where-key {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--text-3);
}
.where-key .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  margin-left: var(--gap-2);
}
.where-key .dot:first-child { margin-left: 0; }
.where-key .dot.held { background: var(--accent); }
.where-key .dot.weak { background: var(--amber); }
.where-key .dot.unseen { border: 1px solid var(--text-3); }

/* ---- the frontier (Home) --------------------------------------------------- */

.frontier { margin: 0; padding: 0; list-style: none; display: grid; }
.frontier li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name state go" "meta state go";
  gap: 2px var(--gap-3);
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.frontier li:first-child { border-top: 0; padding-top: 0; }
.frontier-name {
  grid-area: name;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
}
.frontier-name:hover { color: var(--primary); }
.frontier-meta { grid-area: meta; font-size: 0.74rem; color: var(--text-3); }
.frontier-state { grid-area: state; }
.frontier li .ghost-btn { grid-area: go; font-size: 0.76rem; padding: 5px 11px; }
.tag-part { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ---- ladder -------------------------------------------------------------- */

.ladder-slot:not(:empty) { margin-top: var(--gap-5); }
.ladder {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: var(--gap-3) var(--gap-4);
}
.ladder summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 500;
}
.ladder summary em { color: var(--text); font-style: normal; font-weight: 600; }
.ladder-rungs { margin: var(--gap-3) 0 var(--gap-1); padding: 0; list-style: none; display: grid; }
.ladder-rungs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px var(--gap-3);
  padding: var(--gap-3) 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.ladder-rungs .rung-meta { font-size: 0.72rem; color: var(--text-3); align-self: center; }
.ladder-rungs .rung-text {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---- test results -------------------------------------------------------- */

.result-title { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 var(--gap-4); }
.test-review {
  margin: var(--gap-5) 0 var(--gap-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: 0.87rem;
}
.test-review li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.test-review .mark { display: inline-block; width: 1.1em; font-weight: 700; flex: none; }
.test-review .mark-solved .mark, .test-review li.mark-solved .mark { color: var(--ok); }
.test-review .mark-failed .mark { color: var(--danger); }
.test-review .dim { font-size: 0.78rem; color: var(--text-3); }

/* ============================================================================
   Subject page
   ========================================================================== */

.subject-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-5);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gap-5);
}
.subject-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 2px 0 6px;
  text-transform: capitalize;
}
.subject-actions { display: flex; gap: var(--gap-3); align-items: center; }
#subjectRoot { display: grid; gap: var(--gap-4); }

.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-3);
}

.topic-list { list-style: none; margin: 0; padding: 0; display: grid; }
.topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(110px, 170px) auto;
  gap: var(--gap-3);
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 0.87rem;
}
.topic-row:hover { background: var(--surface-2); }
.topic-name { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-name:hover { color: var(--primary); }
.topic-meta { font-size: 0.73rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.topic-bar { display: flex; align-items: center; gap: var(--gap-2); }
.topic-bar .cov-track { flex: 1; }
.topic-bar .cov-num { font-size: 0.75rem; width: 2.6rem; }
.topic-unseen { font-size: 0.72rem; color: var(--text-3); opacity: 0.7; margin-left: auto; }

/* ============================================================================
   The graph
   ========================================================================== */

.graph-stage {
  position: relative;
  height: calc(100vh - var(--topbar-h) - var(--gap-4));
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  background-image:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
  background-size: 26px 26px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.graph-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.graph-stage.has-inspector canvas { width: calc(100% - 398px); }
.graph-stage canvas:active { cursor: grabbing; }

.graph-overlay {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-glass);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: var(--shadow-2);
}
.graph-controls-overlay {
  top: var(--gap-3);
  left: var(--gap-3);
  right: var(--gap-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2);
}
.graph-controls-overlay #graphSearch { flex: 1 1 180px; min-width: 140px; max-width: 280px; }
.graph-controls-overlay .toggle { padding: 0 var(--gap-2); }
.graph-controls-overlay .ghost-btn { margin-left: auto; }
.graph-controls-overlay input, .graph-controls-overlay select { background: var(--surface); }

.graph-legend-overlay {
  left: var(--gap-3);
  bottom: var(--gap-3);
  max-width: min(420px, calc(100% - 2 * var(--gap-3)));
  padding: 9px var(--gap-3);
}
.graph-legend-overlay summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.graph-legend-overlay summary::-webkit-details-marker { display: none; }
.graph-legend-overlay summary::before {
  content: "▸";
  font-size: 0.65rem;
  color: var(--text-3);
  transition: transform 0.15s ease;
}
.graph-legend-overlay[open] summary::before { transform: rotate(90deg); }
.legend-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--gap-3);
  margin-top: var(--gap-3);
  padding-top: var(--gap-3);
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }
.legend-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend-note { flex-basis: 100%; color: var(--text-3); font-style: italic; text-transform: none; }

/* ---- inspector ----------------------------------------------------------- */

.inspector {
  position: absolute;
  top: 64px;
  right: var(--gap-3);
  z-index: 3;
  width: 370px;
  max-height: calc(100% - 64px - var(--gap-3) - var(--gap-3));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-4) var(--gap-4) var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: var(--shadow-3);
  animation: view-in 0.18s ease both;
}
.inspector-eyebrow { margin: 0 0 5px; font-size: 0.64rem; letter-spacing: .13em; color: var(--text-3); font-weight: 700; }
.inspector-status { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--gap-3); font-size: .78rem; color: var(--accent); text-transform: capitalize; }
.inspector-status .dim { margin-left: auto; color: var(--text-3); text-transform: none; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--text-3); display: inline-block; }
.status-dot.mastered { background: var(--accent); border-color: var(--accent); }
.status-dot.learning { background: var(--amber); border-color: var(--amber); }
.status-dot.ready { background: var(--primary); border-color: var(--primary); }
.inspector-blurb { color: var(--text-2); font-size: .84rem; line-height: 1.5; }
.inspector-primary { margin: var(--gap-3) 0; }
.inspector-primary .btn-primary { text-decoration: none; }
.inspector-tabs { display: flex; gap: 14px; margin: var(--gap-4) -16px 0; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.inspector-tabs a { padding: 9px 0; font-size: .74rem; white-space: nowrap; color: var(--text-2); }
.inspector-tabs button { padding: 9px 0; border: 0; background: transparent; font: inherit; font-size: .74rem; white-space: nowrap; color: var(--text-2); cursor: pointer; }
.inspector-tabs button:first-child { color: var(--text); border-bottom: 2px solid var(--primary); }
.inspector h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 22px 3px 0;
}
.inspector h4 {
  margin: var(--gap-4) 0 var(--gap-2);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.inspector-meta {
  font-size: 0.72rem;
  color: var(--text-3);
  margin: 0 0 var(--gap-3);
  text-transform: capitalize;
}
.inspector-mastery { font-size: 0.85rem; margin: 0; color: var(--text-2); }
.inspector-mastery b { color: var(--accent); font-size: 1rem; }
.inspector ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.inspector ul li, .inspector .plan li {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding: 5px 0;
  font-size: 0.83rem;
  border-top: 1px solid var(--border);
}
.inspector ul li:first-child, .inspector .plan li:first-child { border-top: 0; }
.inspector .plan {
  display: grid;
  grid-template-columns: none;
  counter-reset: step;
}
.inspector .plan li {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  gap: var(--gap-2);
  counter-increment: step;
  align-items: baseline;
  padding: 6px 0;
}
.inspector .plan li::before {
  content: counter(step);
  font-size: 0.66rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.inspector .plan li.done { opacity: 0.5; }
.inspector .plan li.done::before { content: "✓"; color: var(--accent); }
.inspector a { color: var(--text); }
.inspector a:hover { color: var(--primary); }
.inspector li .dim { flex: none; margin-left: auto; font-size: 0.72rem; color: var(--text-3); }
.inspector-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.inspector-close:hover { background: var(--surface-3); color: var(--text); }
.inspector-actions { margin-top: var(--gap-4); display: flex; gap: var(--gap-2); flex-wrap: wrap; }
.inspector-actions .ghost-btn { font-size: 0.76rem; padding: 5px 10px; }

/* ============================================================================
   MathJax
   ========================================================================== */

mjx-container { color: inherit; }
mjx-container[display="true"] {
  margin: 0.9em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
/* Inline maths in a pre-wrap statement must not stretch the line box. */
.statement mjx-container[display="false"] { white-space: normal; }
mjx-container:focus { outline: none; }

/* ============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .topbar { gap: var(--gap-3); padding: 0 var(--gap-3); }
  .topbar .brand small { display: none; }
  main { padding: var(--gap-4) var(--gap-3) var(--gap-6); }
  .panel { padding: var(--gap-4); }
  .nav-button { padding: 6px 10px; font-size: 0.78rem; }
  .cov-row { grid-template-columns: minmax(6rem, 1fr) minmax(60px, 1.2fr) 2.8rem; }
  .topic-row { grid-template-columns: minmax(0, 1fr) auto; }
  .topic-actions { grid-column: 1 / -1; }
  .topic-bar { grid-column: 1 / -1; }
  .plan li { grid-template-columns: 46px minmax(0, 1fr); }
  .plan li .ghost-btn { grid-column: 2; justify-self: start; }
  .inspector { width: auto; left: var(--gap-3); right: var(--gap-3); }
  .graph-stage.has-inspector canvas { width: 100%; }
  .graph-stage { height: calc(100vh - var(--topbar-h) - var(--gap-5)); }
}
@media (max-width: 620px) {
  .card { padding: var(--gap-4) var(--gap-3); }
  /* The breadcrumb is the widest thing on the card; let it take the full width
     and drop its tools onto their own line rather than forcing the page wide. */
  .source-crumbs { flex: 1 1 100%; }
  .source-tools { margin-left: 0; width: 100%; }
  .source-tools .ghost-btn { flex: 1; justify-content: center; }
  .session-mini { grid-template-columns: 1fr; }
  .card-actions [data-act="skip"] { margin-left: 0; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}
@media (max-width: 520px) {
  .topbar .brand span { display: none; }
}

/* Nothing may widen the page: every wide child scrolls inside its own box. */
body { overflow-x: hidden; }
.study-grid > *, .home-grid > *, .view { min-width: 0; }

/* ---- curated sets -------------------------------------------------------
   A plan block is an editable set, and a running set says so at the top of
   the study card. Both are new surfaces; both reuse the chip and track
   vocabulary the rest of the app already speaks. */
.set-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: var(--gap-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.82rem;
}
.set-bar .test-track { flex: 1 1 120px; min-width: 90px; }
.set-bar .ghost-btn { margin-left: auto; }
.chip-set { background: var(--primary); color: #fff; border-color: transparent; }

.block-edit {
  display: grid;
  gap: var(--gap-2);
  margin-top: var(--gap-2);
  padding: var(--gap-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.block-row { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.block-field { display: grid; gap: 4px; flex: 1 1 180px; min-width: 0; font-size: 0.76rem; }
.block-field > span:first-child {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.block-field.short { flex: 0 0 88px; }
.block-field input, .block-field select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.block-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.block-note { margin: 0; font-size: 0.78rem; }
.block-tools { display: flex; gap: var(--gap-2); justify-content: flex-end; }
.link-btn.danger { color: var(--danger, #b91c1c); }

.topic-actions { display: flex; gap: 6px; }
.topic-actions .ghost-btn { padding: 2px 8px; font-size: 0.72rem; }
.panel-heading .data-count .ghost-btn { margin-left: var(--gap-2); }

/* ---- Courses: a book as a tree ------------------------------------------- */
.course-shelf {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.course-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: var(--gap-4);
  text-decoration: none;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.course-card:hover {
  border-color: var(--primary-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.course-card h3 { font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; }
.course-card-meta { font-size: 0.74rem; color: var(--text-3); }

/* The four states, as one dot each. Colour alone never carries the meaning —
   every row also says the state in words. */
.state-dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--border);
  box-shadow: 0 0 0 2px var(--surface);
}
.is-learned .state-dot, .course-legend .is-learned .state-dot { background: var(--accent); }
.is-started .state-dot, .course-legend .is-started .state-dot { background: var(--primary); }
.is-ready   .state-dot, .course-legend .is-ready   .state-dot {
  background: var(--surface); border: 2px solid var(--primary);
}
.is-locked  .state-dot, .course-legend .is-locked  .state-dot { background: var(--border); }

.course-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  margin-bottom: var(--gap-3);
  font-size: 0.76rem;
  color: var(--text-3);
}
.course-legend span { display: inline-flex; align-items: center; gap: 6px; }
.course-legend i { display: inline-block; }

.course-tree { display: grid; gap: var(--gap-2); }
.course-chapter {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.course-chapter-head {
  display: grid;
  grid-template-columns: 14px 1fr 120px auto;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  padding: var(--gap-3) var(--gap-4);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.course-chapter-head:hover { background: var(--surface-2); }
.course-chapter-head .chev { transition: transform 0.15s ease; color: var(--text-3); }
.course-chapter.open .chev { transform: rotate(90deg); }
.course-chapter-title { font-family: var(--serif); font-size: 0.95rem; }
.course-chapter-meta { font-size: 0.73rem; color: var(--text-3); white-space: nowrap; }
.course-chapter .course-topics { display: none; }
.course-chapter.open .course-topics { display: block; }

.course-topics { list-style: none; margin: 0; padding: 0; }
.course-topic {
  display: grid;
  grid-template-columns: 10px 1fr 150px auto;
  align-items: center;
  gap: var(--gap-3);
  padding: 8px var(--gap-4);
  border-top: 1px solid var(--border);
}
.course-topic-main { display: grid; gap: 2px; min-width: 0; }
.course-topic.is-locked { opacity: 0.55; }
.topic-blocked { font-size: 0.71rem; color: var(--text-3); font-style: italic; }
@media (max-width: 720px) {
  .course-chapter-head, .course-topic { grid-template-columns: 12px 1fr; }
  .course-chapter-head .cov-track, .course-topic .topic-bar { display: none; }
}
.is-upcoming .state-dot, .course-legend .is-upcoming .state-dot {
  background: var(--surface-2); border: 1px dashed var(--border);
}
.course-topic.is-upcoming { opacity: 0.7; }

/* ---- The level ladder ---------------------------------------------------- */
/* Five rungs, and the dot is the same shape everywhere it appears: the legend,
   a topic row, an assessment result. Colour is never the only carrier - every
   dot sits beside its level in words. */
.level-pill {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: var(--surface-2);
}
.level-pill.lvl-familiar { color: var(--primary); border-color: var(--primary-line);
  background: var(--primary-soft, var(--surface-2)); }
.level-pill.lvl-proficient { color: var(--accent); border-color: var(--accent-line);
  background: var(--accent-soft); }
.level-pill.lvl-mastered { color: var(--primary-ink, #fff); background: var(--accent);
  border-color: var(--accent); }

.lvl-mastered .state-dot   { background: var(--accent); }
.lvl-proficient .state-dot { background: var(--accent); opacity: 0.55; }
.lvl-familiar .state-dot   { background: var(--primary); }
.lvl-attempted .state-dot  { background: var(--surface); border: 2px solid var(--primary); }
.lvl-none .state-dot       { background: var(--border); }

.course-rule { margin-bottom: var(--gap-3); }
.course-chapter-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding-right: var(--gap-4);
}
.course-chapter-row .course-chapter-head { flex: 1; min-width: 0; }
.ghost-btn.is-off { opacity: 0.45; cursor: not-allowed; }

.set-bar-test { border-color: var(--accent-line); background: var(--accent-soft); }
.chip-test { color: var(--accent); border-color: var(--accent-line); }

.level-moves { list-style: none; margin: var(--gap-2) 0 var(--gap-3); padding: 0; }
.level-moves li {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.level-moves .up .mark { color: var(--accent); }
.level-moves .down .mark { color: var(--danger, #b91c1c); }
.level-move-name { flex: 1; min-width: 0; }

/* The mastery challenge card. Shown locked as well as open: a card that only
   appears when it is available never teaches anyone the rule. */
/* The problem and its rail. The rail carries what the problem is about and how
   far through the set you are — facts that were previously either absent or
   buried in the session bar. It drops below the card on a narrow screen rather
   than squeezing the statement, because the statement is the content. */
.problem-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-4);
  align-items: start;
}
.problem-rail { display: flex; flex-direction: column; gap: var(--gap-3); }
.rail-card {
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.rail-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin: 0 0 4px;
  font-weight: 600;
}
.rail-note { font-size: 0.72rem; color: var(--text-3); margin: 4px 0 0; line-height: 1.45; }
.rail-nums { display: flex; gap: var(--gap-4); margin: var(--gap-2) 0 8px; }
.rail-nums span { display: flex; flex-direction: column; font-size: 0.66rem; color: var(--text-3); }
.rail-nums b { font-size: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.rail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--gap-2); }
.rail-tag {
  font-size: 0.72rem;
  padding: 3px 9px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.rail-tag:hover { filter: brightness(1.1); }
.rail-difficulty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: var(--gap-3); }
.rail-diff {
  padding: 8px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: .74rem; cursor: pointer;
}
.rail-diff:hover, .rail-diff.active { border-color: var(--primary); color: var(--text); background: var(--primary-soft); }
.rail-shortcuts { margin: 0; color: var(--text-3); font-size: .7rem; text-align: center; }
.rail-shortcuts kbd { font-family: var(--sans); padding: 2px 5px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-2); }
.rail-keys { list-style: none; margin: var(--gap-2) 0 0; padding: 0; }
.rail-keys li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.74rem;
  color: var(--text-3);
}
.rail-keys kbd {
  font-family: var(--sans);
  font-size: 0.66rem;
  min-width: 20px;
  text-align: center;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
}

.answer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-top: var(--gap-4);
}
.answer-hint { font-size: 0.74rem; color: var(--text-3); }
.key-note { margin-left: auto; font-size: 0.72rem; color: var(--text-3); }
.key-note kbd {
  font-family: var(--sans);
  font-size: 0.66rem;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
}

/* The statement is the content: give it room and a reading size. */
.problem-frame .statement {
  max-width: 82ch;
  font-size: 1.16rem;
  line-height: 1.78;
  padding: var(--gap-3) 0 var(--gap-5);
}
.problem-frame .free-answer { min-height: 150px; font-size: 1rem; line-height: 1.65; }
.problem-frame .free-answer.answer-compact { min-height: 74px; }
.problem-frame .free-answer:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.problem-frame .card-actions { margin-top: var(--gap-4); }
.problem-frame .card-actions .self-label { width: 100%; margin-bottom: -4px; }
.problem-frame .card-actions .btn-primary { min-width: 142px; }
.where-title { font-weight: 600; }
.drill-kicker { margin: var(--gap-5) 0 var(--gap-2); color: var(--text-3); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.problem-card .statement-drill { min-height: 110px; display: flex; align-items: center; font-size: 2rem; line-height: 1.35; }
.problem-card .drill-math {
  width: 100%;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.problem-card .drill-math mjx-container { margin: 0 !important; }
.problem-card .drill-prompt-copy {
  width: 100%;
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.5;
  text-align: center;
}
.drill-answer-head { margin-top: var(--gap-4); }
.drill-answer-row { margin-top: var(--gap-2); }
.drill-answer-row input { min-height: 58px; font-size: 1.25rem; }
.drill-answer-row .btn-primary { min-height: 58px; }
.drill-shortcuts { margin: var(--gap-3) 0 0; color: var(--text-3); font-size: .72rem; text-align: right; }

@media (max-width: 1080px) {
  .problem-frame { grid-template-columns: minmax(0, 1fr); }
  .problem-rail { flex-direction: row; flex-wrap: wrap; }
  .problem-rail .rail-card { flex: 1 1 220px; }
}

/* Header search, and the palette it opens. The button is a search *affordance*,
   not a field: the real input lives in the overlay, so the header keeps one
   tab stop and the palette can be opened from anywhere by keyboard. */
.topsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-width: 210px;
}
.topsearch:hover { border-color: var(--border-strong); color: var(--text-2); }
/* The theme toggle used to be the only thing pushed right. With the search in
   front of it, two `margin-left: auto` would split the free space and leave a
   gap between them, so the search takes the push and the toggle sits beside it. */
.topbar .topsearch + .theme-toggle { margin-left: 0; }
.topsearch-label { flex: 1; text-align: left; }
.topsearch-key,
.palette-foot kbd {
  font-family: var(--sans);
  font-size: 0.68rem;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-3);
}

.palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh var(--gap-4) var(--gap-4);
  background: rgba(10, 12, 20, 0.45);
  backdrop-filter: blur(2px);
}
.palette[hidden] { display: none; }
.palette-box {
  width: min(620px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
/* Same specificity problem as the ask box: the global input rule would draw a
   second border inside the panel. */
.palette input.palette-input,
.palette input.palette-input:focus {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.98rem;
  padding: var(--gap-3) var(--gap-4);
  color: var(--text);
  outline: none;
}
.palette-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 48vh;
  overflow-y: auto;
}
.palette-row {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  align-items: center;
  gap: var(--gap-3);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.palette-row.on { background: var(--primary-soft); }
.palette-kind {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 0;
  text-align: center;
}
.palette-kind.k-technique { color: var(--accent); border-color: var(--accent-line); }
.palette-kind.k-field { color: var(--primary); border-color: var(--primary-line); }
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }
.palette-empty { padding: var(--gap-4); color: var(--text-3); font-size: 0.82rem; }
.palette-foot {
  display: flex;
  gap: var(--gap-4);
  padding: 8px var(--gap-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.7rem;
  color: var(--text-3);
}

@media (max-width: 760px) {
  .topsearch { min-width: 0; }
  .topsearch-label, .topsearch-key { display: none; }
  .palette-row { grid-template-columns: 1fr; gap: 2px; }
  .palette-sub { white-space: normal; }
}

/* The ask box, and the five things most sessions actually are.
   Sized to be the first thing on the page: if the answer to "what now" is a
   sentence, this is where it goes, and if it is one of five buttons, those are
   directly underneath rather than a scroll away. */
.hero {
  text-align: center;
  padding: clamp(var(--gap-3), 1.8vw, 24px) 0 var(--gap-4);
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--gap-4);
}
.ask {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 6px 6px var(--gap-4);
  border: 1px solid var(--primary-line);
  border-radius: 999px;
  background: var(--surface-2);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ask:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
/* The pill draws the border; the input inside it must draw nothing. The global
   `input[type="text"]` rule outranks a bare class, so this has to match its
   specificity or the field renders as a rectangle inside an oval. */
.ask input.ask-input,
.ask input.ask-input:focus {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: 10px 0;
  outline: none;
}
.ask input.ask-input::placeholder { color: var(--text-3); }
.ask-go {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.ask-go:hover { filter: brightness(1.08); }

.ask-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}
.ask-eg {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  font: inherit;
  font-size: 0.76rem;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.ask-eg:hover { color: var(--text); border-color: var(--primary-line); }

/* The Session Builder is deliberately quieter than a loading animation: it
   shows the route Lattice actually selected, then gets out of the way. */
.ask-preview {
  max-width: 780px;
  margin: var(--gap-4) auto 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-2);
  animation: ask-preview-in .18s ease both;
}
.ask-route { display: flex; align-items: center; gap: 9px; }
.ask-route-node { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ask-route-node i { width: 8px; height: 8px; margin-bottom: 2px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); animation: ask-pulse 1.2s ease-in-out infinite; }
.ask-route-node b { color: var(--text); font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-route-node small { color: var(--text-3); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-route-line { flex: 1; min-width: 18px; height: 1px; background: linear-gradient(90deg, var(--primary-line), var(--border)); position: relative; overflow: hidden; }
.ask-route-line::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform: translateX(-100%); animation: ask-flow 1s ease-in-out infinite; }
.ask-route.is-ready .ask-route-node i { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: none; }
.ask-route.is-ready .ask-route-line::after { animation: none; transform: translateX(0); }
@keyframes ask-preview-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ask-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ask-flow { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ask-preview, .ask-route-node i, .ask-route-line::after { animation: none; }
}

.ask-status {
  margin: var(--gap-3) auto 0;
  max-width: 720px;
  font-size: 0.8rem;
  color: var(--text-3);
}
.ask-status.ok  { color: var(--accent); }
.ask-status.bad { color: var(--danger); }

/* Five cards, because five is how many kinds of session there are. Wraps to two
   rows on a narrow screen rather than scrolling sideways. */
.quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gap-3);
  margin-top: var(--gap-4);
  text-align: left;
}
.quick-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}
.quick-card:hover { border-color: var(--accent-line); background: var(--surface); }
.quick-card.primary { border-color: var(--primary-line); background: var(--primary-soft); }
.quick-card b { font-size: 0.92rem; }
.quick-card span { font-size: 0.74rem; color: var(--text-3); }

@media (max-width: 640px) {
  .hero { padding-top: var(--gap-4); }
  .ask { padding-left: var(--gap-3); }
}

/* The single recommended set. It sits above the curated plan because it is the
   answer to a different question: not "what did I schedule" but "what now". */
.nextset-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-bottom: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-soft);
}
.nextset-card.empty { border-color: var(--border); background: var(--surface-2); }
.nextset-body { min-width: 0; }
.nextset-card h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 4px; }
.nextset-card .dim { font-size: 0.82rem; line-height: 1.5; max-width: 64ch; }
.nextset-why {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: var(--gap-2) 0 0;
  padding: 0;
}
.nextset-why li {
  font-size: 0.71rem;
  color: var(--text-3);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.nextset-go {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.challenge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-bottom: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
}
.challenge-card.open { border-color: var(--accent-line); background: var(--accent-soft); }
.challenge-card h3 { font-family: var(--serif); font-size: 1rem; margin-bottom: 2px; }
.challenge-card .dim { font-size: 0.79rem; line-height: 1.45; }
.challenge-meta { margin-top: 4px; font-size: 0.72rem; color: var(--text-3); }
.challenge-card .btn-primary { flex: none; }

/* The test setup card, and the stats that close a test out. */
.test-setup .field { margin-top: var(--gap-3); }
.test-setup .seg { width: 100%; }
.test-domains { list-style: none; margin: var(--gap-2) 0 0; padding: 0; }
.test-domains li {
  display: grid;
  grid-template-columns: 1fr 140px 44px;
  align-items: center;
  gap: var(--gap-3);
  padding: 5px 0;
  font-size: 0.8rem;
}
.test-domain-name { text-transform: capitalize; }

/* ---------------------------------------------------------------------------
   Home: search, suggestions, recent
   ------------------------------------------------------------------------- */
.home-simple {
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: var(--gap-6, 48px);
}
.home-simple .hero { padding-top: clamp(24px, 6vh, 64px); }

.ask-wrap {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.ask-suggest {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 6px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  max-height: 360px;
  overflow-y: auto;
}
.ask-suggest[hidden] { display: none; }
.palette-kind.k-practice { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); }

.home-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-2);
  margin-top: var(--gap-4);
}
.home-chips .ask-eg { text-decoration: none; }

.home-block { margin-top: clamp(32px, 6vh, 56px); }
.home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-bottom: var(--gap-3);
}
.home-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
}

.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--gap-3);
}
.suggest-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.suggest-card:hover {
  text-decoration: none;
  border-color: var(--primary-line);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.suggest-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.suggest-fit { color: var(--accent); }
.suggest-title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.suggest-text,
.history-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2);
  font-family: var(--serif);
  line-height: 1.5;
}
.suggest-text { -webkit-line-clamp: 4; line-clamp: 4; font-size: 0.98rem; }
.suggest-cite { margin-top: auto; font-size: 0.72rem; color: var(--text-3); }

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.history-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: start;
  gap: var(--gap-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.history-outcome {
  justify-self: start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-3);
}
.history-outcome.o-ok { color: var(--ok); border-color: var(--accent-line); background: var(--accent-soft); }
.history-outcome.o-part { color: var(--amber); border-color: var(--amber-soft); background: var(--amber-soft); }
.history-outcome.o-bad { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.history-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history-body b { font-size: 0.92rem; font-weight: 600; }
.history-text { -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.92rem; }
.history-meta { font-size: 0.74rem; color: var(--text-3); }
.history-empty { padding: 18px 0; }

@media (max-width: 560px) {
  .history-row { grid-template-columns: 1fr auto; }
  .history-outcome { grid-column: 1 / -1; }
}

/* Home: greeting and guided path */
.home-greeting {
  margin: 0 0 var(--gap-2);
  color: var(--text-3);
  font-size: 0.9rem;
}
.path-card {
  max-width: 720px;
  margin: var(--gap-5) auto 0;
  text-align: left;
}
.path-go {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  padding: 14px 18px;
  border: 1px solid var(--primary-line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--primary-soft), transparent 70%), var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.path-go:hover { text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(-1px); }
.path-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
}
.path-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.path-icon circle { fill: currentColor; stroke: none; }
.path-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.path-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.path-text b { font-size: 1.02rem; font-weight: 600; }
.path-reason { font-size: 0.82rem; color: var(--text-2); }
.path-arrow { flex: none; font-size: 1.2rem; color: var(--primary); }

.path-all { margin-top: var(--gap-2); }
.path-all summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-3);
  padding: 4px 2px;
  list-style-position: inside;
}
.path-all summary:hover { color: var(--text); }
.path-list {
  list-style: none;
  margin: var(--gap-2) 0 0;
  padding: var(--gap-2) var(--gap-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  max-height: 360px;
  overflow-y: auto;
}
.path-stage {
  margin: var(--gap-3) 0 var(--gap-1);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.path-stage:first-child { margin-top: var(--gap-1); }
.path-step {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--gap-2);
  padding: 5px 0;
  font-size: 0.88rem;
}
.path-step a { color: var(--text-2); }
.path-step.is-current a { color: var(--primary); font-weight: 600; }
.path-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-3);
}
.path-step.s-passed .path-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.path-step.s-weak .path-dot { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.path-step.is-current .path-dot { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); }
.path-stat { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }