/* Onsite — design system.
 *
 * Implements the Claude Design canvas "Onsite interview training engine"
 * (Onsite.dc.html). The canvas mock carries inline styles; this file is the
 * same system expressed as classes, because the app is server-rendered Jinja
 * with HTMX partial swaps and has exactly one stylesheet.
 *
 * The scale is sequential (violet → blue → teal → green → chartreuse) rather
 * than red→green: it survives protan/deutan vision and greyscale printing, and
 * every mastery value is printed as a number next to its colour.
 */

:root {
  --bg: #0b0d10;
  --panel: #13161b;
  --panel-2: #181c22;
  --raise: #1e232b;
  --line: #252a32;
  --line-2: #333b46;
  --ink: #e6eaf0;
  --ink-2: #9aa4b2;
  --ink-3: #6b7481;
  --accent: #5b9dd9;
  --on-accent: #08111a;

  /* mastery bands 1..5, each with its own foreground */
  --m1: #46296b; --m1i: #dccef3;
  --m2: #2b5d8c; --m2i: #dcebf8;
  --m3: #187d76; --m3i: #e1f5f2;
  --m4: #4f9c3f; --m4i: #0c1a08;
  --m5: #c8c231; --m5i: #16190a;
  /* outside the scale: absence of evidence, not a low score */
  --stale: #242931;
  --unknown: #171b21;

  --base: #26485c;  --base-i: #cbe2f2;
  --tempo: #2a7080; --tempo-i: #d3eef3;
  --peak: #a5601f;  --peak-i: #f6dcc0;
  --taper: #5b3f8a; --taper-i: #dbcdf5;

  --pass: #3d8a5c;
  --fail: #b0453f;
  --warn: #a37a1e;
  --unchecked: #343b45;

  /* generated / pending approval */
  --gen: #c9942f;
  --gen-bg: #1c1810;

  --discovery: #6d5aa8; --discovery-i: #b6a6e0;
  --deficit-i: #e79d98;
  --weakness-i: #dcb85f;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, sans-serif;
  --nav-w: 214px;
}

[data-theme="light"] {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --raise: #edeff3;
  --line: #dcdfe5;
  --line-2: #c3c8d0;
  --ink: #11141a;
  --ink-2: #4b535e;
  --ink-3: #767e8a;
  --accent: #1f5f9e;
  --on-accent: #ffffff;
  --stale: #e5e8ec;
  --unknown: #eef0f3;
  --gen-bg: #fdf6e6;
  --unchecked: #d9dde3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }

h1 { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }
h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
h3 { margin: 0 0 0.25rem; font-size: 12.5px; font-weight: 620; }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--ink-2); font-size: 11.5px; }
.dim { color: var(--ink-3); }
.empty { color: var(--ink-3); font-size: 11.5px; margin: 0.25rem 0 0; }
.empty a { font-size: inherit; }
code, .code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── Shell ────────────────────────────────────────────────── */

.shell { display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
  width: var(--nav-w);
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

.brand { padding: 0 14px; display: flex; flex-direction: column; gap: 3px; }
.brand-name {
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.nav-group { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.nav-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 6px 6px;
}
.nav-group + .nav-group .nav-label { padding-top: 8px; }
.nav-group a, .nav-group .soon {
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
  display: block;
}
.nav-group a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.nav-group a.on { background: var(--raise); color: var(--ink); }
.nav-group .soon { color: #474d5e; cursor: default; }

.sidebar-foot {
  margin-top: auto;
  padding: 12px 14px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-foot form { margin: 0; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 9px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.topbar .crumbs { display: flex; gap: 10px; align-items: center; }
.topbar .right { margin-left: auto; display: flex; gap: 16px; align-items: center; }

.page { padding: 22px 22px 48px; max-width: 1440px; display: flex; flex-direction: column; gap: 14px; }
.page.narrowed { max-width: 1180px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head .titles { display: flex; flex-direction: column; gap: 3px; }
.page-head .sub { font-size: 12px; color: var(--ink-2); }
.meta-row { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.meta-row strong { color: var(--ink); font-weight: 500; }
.crumb { margin: 0 0 2px; font-size: 11.5px; }

/* ── Panels ───────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  /* Screens the canvas didn't cover still hang content straight off .panel;
     they get padding here, and structured panels opt out below. */
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.panel:has(> .panel-head), .panel:has(> .rows), .panel:has(> .drill), .panel.flush {
  padding: 0;
  gap: 0;
  display: block;
}
.panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-head .right, .panel-head .spacer { margin-left: auto; }
.panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-foot {
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }

.metric { font-size: 23px; font-weight: 600; margin: 0; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.metric.big { font-size: 25px; }
.metric.small { font-size: 13px; font-weight: 500; }
.metric .of { color: var(--ink-3); font-weight: 400; }

.counter {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 4px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: inherit;
}
a.counter:hover { border-color: var(--line-2); text-decoration: none; }
.counter .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Rows (prescriptions, sessions, generic tables) ───────── */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.row:last-child { border-bottom: 0; }
.row .clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .kind { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.04em; }
.row .qty, .row .done { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row .done { text-align: right; }
.row .done.none { color: var(--ink-3); }
.row .date { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.row-presc { grid-template-columns: minmax(0, 1fr) 92px 96px 108px 64px; }
.row-session { grid-template-columns: 96px minmax(0, 1fr) 112px 74px 96px; }

.score-swatch { display: inline-flex; align-items: center; gap: 6px; }
.score-swatch i { width: 26px; height: 5px; border-radius: 1px; display: block; }
.score-swatch span { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Tags, chips, badges ──────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.4rem 0 0; align-items: center; }
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
a.tag:hover { border-color: var(--line-2); color: var(--ink); text-decoration: none; }
/* Chips are labels, never verdicts: outlined, never filled. */
.tag.discovery { border-color: var(--discovery); color: var(--discovery-i); }
.tag.deficit { border-color: var(--fail); color: var(--deficit-i); }
.tag.weakness { border-color: var(--warn); color: var(--weakness-i); }
.tag.maintenance { border-color: var(--line-2); color: var(--ink-2); }
.tag.core { border-color: var(--line); color: var(--ink-3); }
.tag.reason { border-color: var(--discovery); color: var(--discovery-i); }

.phase {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.phase.BASE { background: var(--base); color: var(--base-i); }
.phase.TEMPO { background: var(--tempo); color: var(--tempo-i); }
.phase.PEAK { background: var(--peak); color: var(--peak-i); }
/* The taper is locked, so it reads as an outline rather than a fill. */
.phase.TAPER { background: transparent; border-color: var(--taper); color: var(--taper-i); }
.past .phase { background: transparent; border-color: var(--line-2); color: var(--ink-3); }

/* Filled = computed verdict. Outlined = not yet run. */
.verdict {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 2px;
}
.verdict.pass { background: var(--pass); color: #06120b; }
.verdict.fail { background: var(--fail); color: #fff; }
.verdict.warn { background: var(--warn); color: #17130a; }
.verdict.unchecked { background: var(--unchecked); color: var(--ink-2); border: 1px solid var(--line-2); }

/* ── Banners ──────────────────────────────────────────────── */

.banner {
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  background: var(--panel);
  border-radius: 3px;
  padding: 9px 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink);
}
.banner .chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  flex: none;
  background: var(--line-2);
  color: var(--ink);
}
.banner.conflict { border-color: var(--fail); }
.banner.conflict .chip { background: var(--fail); color: #fff; }
.banner.capped, .banner.overflow, .warn { border-color: var(--warn); }
.banner.capped .chip, .banner.overflow .chip { background: var(--warn); color: #17130a; }
.banner.locked { border-color: var(--taper); }
.banner.locked .chip { background: var(--taper); color: var(--taper-i); }
.banner.emergency { border-color: var(--fail); }
.banner.emergency .chip { background: var(--fail); color: #fff; }

.warn, .notice, .problem {
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: 3px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: var(--panel);
}
.warn { border-color: var(--warn); }
.notice { border-color: var(--accent); }
.problem { border-color: var(--fail); color: var(--ink); }
.problem .field { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }

/* ── Progress ─────────────────────────────────────────────── */

.bar {
  height: 6px;
  border-radius: 2px;
  background: var(--raise);
  overflow: hidden;
  display: block;
}
.bar span { display: block; height: 100%; background: var(--accent); }
.bar.past span { background: var(--ink-3); }
.bar.future span { background: var(--line-2); }
.bar.full span { background: var(--pass); }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; }

/* ── Mastery tiles ────────────────────────────────────────── */

.matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px; }
.matrix-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cell {
  border-radius: 3px;
  padding: 9px 10px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  color: inherit;
  border: 1px solid transparent;
}
.cell:hover { text-decoration: none; outline: 1px solid var(--ink-2); }
.cell-name { font-size: 11.5px; line-height: 1.3; }
.cell-value { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cell-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cell-meta { font-family: var(--mono); font-size: 9.5px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.cell.parent { min-height: 74px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.cell.parent .cell-name { font-size: 12.5px; font-weight: 620; }

.m-1 { background: var(--m1); color: var(--m1i); }
.m-2 { background: var(--m2); color: var(--m2i); }
.m-3 { background: var(--m3); color: var(--m3i); }
.m-4 { background: var(--m4); color: var(--m4i); }
.m-5 { background: var(--m5); color: var(--m5i); }
/* Outside the scale — dashed, unfilled, and labelled in words. */
.m-stale { background: var(--stale); color: var(--ink-2); border: 1px dashed var(--line-2); }
.m-unknown {
  background: var(--unknown);
  color: var(--ink-3);
  border: 1px dashed var(--line-2);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.028) 0 5px, transparent 5px 10px);
}
.m-stale .cell-value, .m-unknown .cell-value { font-size: 11px; }

.swatch-unknown {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--unknown);
  border: 1px dashed var(--line-2);
  flex: none;
  display: inline-block;
}

.scale-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scale-legend .steps { display: flex; }
.scale-legend .steps span {
  width: 46px;
  padding: 5px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.scale-legend .outside span {
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  border: 1px dashed var(--line-2);
}
strong.inline, .inline-value { padding: 1px 6px; border-radius: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Plan ─────────────────────────────────────────────────── */

.ramp { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.ramp > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.ramp i { display: block; border-radius: 1px 1px 0 0; border-top: 2px solid rgba(255, 255, 255, 0.25); }
.ramp i.BASE { background: var(--base); }
.ramp i.TEMPO { background: var(--tempo); }
.ramp i.PEAK { background: var(--peak); }
.ramp i.TAPER { background: var(--taper); }
.ramp-labels { display: flex; gap: 3px; }
.ramp-labels div {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ramp-labels div.now { color: var(--accent); }
.ramp-key {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.ramp-key i { width: 9px; height: 9px; border-radius: 1px; display: inline-block; margin-right: 5px; }

.week {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
}
.week.BASE { border-left-color: var(--base); }
.week.TEMPO { border-left-color: var(--tempo); }
.week.PEAK { border-left-color: var(--peak); }
.week.TAPER { border-left-color: var(--taper); }
.week.current { border-color: var(--line-2); }
.week.current .week-head { background: var(--raise); }
.week.past { background: var(--panel-2); opacity: 0.58; border-left-color: var(--line-2); }
.week-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.week-n { font-family: var(--mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; width: 30px; color: var(--ink-2); }
.week.current .week-n { color: var(--ink); }
.week.past .week-n { color: var(--ink-3); }
.week-range { font-family: var(--mono); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); }
.week.current .week-tag { color: var(--accent); }
.week-progress { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.week-progress .bar { width: 140px; }
.week-progress .num { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); width: 118px; text-align: right; }
.week-note {
  padding: 7px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: var(--panel-2);
}
.week-note .chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 2px; flex: none; }
.week-note.capped { background: rgba(163, 122, 30, 0.1); }
.week-note.capped .chip { background: var(--warn); color: #17130a; }
.week-note.conflict { background: rgba(176, 69, 63, 0.12); }
.week-note.conflict .chip { background: var(--fail); color: #fff; }
.week-note.locked { background: rgba(91, 63, 138, 0.12); }
.week-note.locked .chip { background: var(--taper); color: var(--taper-i); }

.elapsed-fold { border: 1px solid var(--line); background: var(--panel-2); border-radius: 4px; }
.elapsed-fold summary {
  padding: 9px 13px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.elapsed-fold summary .mono { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.elapsed-fold .rows { border-top: 1px solid var(--line); }
.row-elapsed { grid-template-columns: 54px 82px 132px minmax(0, 1fr) 128px; opacity: 0.7; }

.onsite-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  font-size: 12.5px;
}

/* ── Topic drill-down ─────────────────────────────────────── */

.drill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.drill > div { padding: 13px 14px; display: flex; flex-direction: column; gap: 12px; }
.drill > div:first-child { border-right: 1px solid var(--line); }
.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pacing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pacing li {
  display: grid;
  grid-template-columns: 140px 62px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.pacing .name { color: var(--ink-2); }
.pacing .target { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pacing .delta { text-align: right; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pacing li.overrun .delta { color: var(--weakness-i); }
.pacing li.overrun .bar span { background: var(--warn); }
.pacing li.under .delta { color: var(--m4); }
.trend { font-size: 12.5px; color: var(--ink); }
.trend strong { font-weight: 600; }
.trend .figure { font-family: var(--mono); color: var(--weakness-i); font-variant-numeric: tabular-nums; }

.evidence { display: flex; flex-direction: column; gap: 6px; }
.evidence-row {
  display: grid;
  grid-template-columns: 88px 108px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-2);
  border-radius: 3px;
  background: var(--panel-2);
  font-size: 12px;
}
/* Real rounds weigh double in the mastery maths, so they read heavier. */
.evidence-row.real { border-left: 3px solid var(--accent); background: var(--panel); }
.evidence-row .score { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.evidence-row.real .score { font-weight: 600; }

/* ── Forms ────────────────────────────────────────────────── */

label { display: grid; gap: 4px; font-size: 11.5px; color: var(--ink-2); }
label > span.label-text { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink);
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
textarea { line-height: 1.5; }

button, .button {
  padding: 7px 13px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
button:hover { border-color: var(--ink-3); }
button[type="submit"], .button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
  font-weight: 600;
}
button.danger { background: var(--fail); color: #fff; border-color: transparent; }
button.ghost { background: transparent; }

.stack { display: grid; gap: 8px; }
.row-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.row-form label { min-width: 0; }
label.grow { flex: 1 1 22rem; }
fieldset { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
legend { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 0 4px; text-transform: uppercase; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check, label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
.criterion { display: grid; grid-template-columns: 15rem 1fr; gap: 10px; margin-bottom: 6px; }
.topic-score { grid-template-columns: 1fr 5rem; align-items: center; }
.topic-score em { color: var(--ink-3); font-style: normal; font-size: 10.5px; font-family: var(--mono); }
.form-panel { gap: 10px; }

/* ── Pipeline ─────────────────────────────────────────────── */

.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.column { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.column h2 { display: flex; gap: 6px; align-items: baseline; }
.column .count { color: var(--ink-3); font-family: var(--mono); }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 4px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card.tier-1 { border-left-color: var(--accent); }
.card.tier-2 { border-left-color: var(--m3); }
.card.tier-3 { border-left-color: var(--line-2); }
.card .role { font-size: 11.5px; color: var(--ink-2); margin: 0; }
.card .onsite { font-family: var(--mono); font-size: 10.5px; color: var(--peak-i); margin: 0; }
.card .status { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-3); margin: 0; }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.history li { color: var(--ink-2); }
.note { color: var(--ink-3); font-size: 11.5px; margin: 0.2rem 0 0; }

/* ── Sessions, mock, packs, resume ────────────────────────── */

.criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.criteria li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12.5px; }
.criteria .score { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.criteria .note { grid-column: 1 / -1; font-style: italic; color: var(--ink-2); }
.criteria .note code { font-style: normal; }

.chat { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.bubble { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.bubble.candidate { background: var(--raise); margin-left: 2.5rem; }
.bubble.interviewer { margin-right: 2.5rem; }
.bubble .who { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.bubble .text { white-space: pre-wrap; font-size: 12.5px; }

.findings { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.findings li { font-size: 12px; border-left: 3px solid var(--line-2); padding: 4px 0 4px 9px; }
.findings li.fail { border-left-color: var(--fail); }
.findings li.warn { border-left-color: var(--warn); }
.findings .code { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.facts li p { margin: 0.2rem 0 0; font-size: 12.5px; }
.facts code { color: var(--accent); }
/* Generated and not yet true: dashed, warm, italic. */
.pending {
  border: 1px dashed var(--gen);
  border-left: 3px solid var(--gen);
  background: var(--gen-bg);
  border-radius: 3px;
}
.pending .label { color: var(--gen); }
.tag.pending-tag { border-color: var(--gen); color: var(--gen); }

.timer-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.timer-total { font-family: var(--mono); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer-phase { color: var(--accent); font-weight: 600; font-size: 12.5px; }
.timer-phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.timer-phases li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--panel-2);
  font-size: 12px;
}
.timer-phases li.current { outline: 1px solid var(--accent); }
.timer-phases li.over .actual { color: var(--fail); }
.timer-phases .target { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.timer-phases .actual { font-family: var(--mono); font-variant-numeric: tabular-nums; }

table.coverage { border-collapse: collapse; width: 100%; font-size: 12px; }
table.coverage th, table.coverage td { border: 1px solid var(--line); padding: 4px 7px; text-align: center; }
table.coverage thead th { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
table.coverage tbody th { text-align: left; font-weight: 400; font-size: 11.5px; }
table.coverage td.targeted { background: var(--panel-2); }
table.coverage td.covered { background: var(--m3); color: var(--m3i); }
table.coverage tr.gap th { color: var(--weakness-i); }
.matrix-scroll { overflow-x: auto; }

.prose { font-size: 12.5px; }
.prose h1, .prose h2, .prose h3 { font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 12px 0 4px; font-weight: 620; }
.prose p, .prose li { font-size: 12.5px; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.1rem; }
.prose a { word-break: break-word; }
.notes { white-space: pre-wrap; font: inherit; margin: 0; color: var(--ink-2); }
/* Inference, not reporting. */
.speculation { border-color: var(--gen); background: var(--gen-bg); }
.speculation h2 { color: var(--gen); }
.dossier { max-width: 46em; }

.token-counter {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.token-counter strong { color: var(--ink-2); font-weight: 500; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

.login {
  max-width: 340px;
  margin: 14vh auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.login h1 { letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; }
.login .sub { color: var(--ink-3); margin: 4px 0 14px; font-family: var(--mono); font-size: 11px; }
.login form { display: grid; gap: 10px; }
.error { color: var(--deficit-i); font-size: 12px; margin: 0; }

/* ── 768px ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: auto;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .brand-sub, .sidebar-foot .hint { display: none; }
  .nav-group { flex-direction: row; padding: 0; gap: 2px; }
  .nav-label { display: none; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .page { padding: 14px 12px 32px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .drill { grid-template-columns: minmax(0, 1fr); }
  .drill > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .matrix-grid, .matrix-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-presc { grid-template-columns: minmax(0, 1fr) 88px; }
  .row-presc .kind, .row-presc .done { display: none; }
  .row-session { grid-template-columns: 84px minmax(0, 1fr) 74px; }
  .row-session .kind, .row-session .qty { display: none; }
  .week-progress { margin-left: 0; width: 100%; }
  .week-progress .bar { flex: 1; width: auto; }
  .criterion { grid-template-columns: minmax(0, 1fr); }
  .bubble.candidate { margin-left: 0.75rem; }
  .bubble.interviewer { margin-right: 0.75rem; }
}

/* ── Print ────────────────────────────────────────────────── */

@page { margin: 0.6in 0.65in; }

@media print {
  .sidebar, .topbar, .no-print, form, button, .htmx-indicator, details > summary { display: none !important; }
  body { background: #fff; color: #111; font-size: 9pt; line-height: 1.45; }
  .shell { display: block; }
  .page { padding: 0; max-width: none; gap: 8pt; }

  .panel, .week, .counter, .card, .banner, .speculation {
    background: #fff;
    border: 0.5pt solid #999;
    border-radius: 0;
    break-inside: avoid;
    page-break-inside: avoid;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  .panel-head, .panel-foot, .week-head, .week-note { background: #fff; border-color: #ddd; }
  h1, h2, h3, .metric, .ink, .prose h1, .prose h2, .prose h3, .speculation h2 { color: #111; }
  h2 { color: #555; }
  .muted, .empty, .dim, .note, .prose p, .prose li { color: #444; }
  a { color: #111; text-decoration: underline; }

  /* Phase survives as a rule weight, not a fill (see the print sheet in the
     canvas): BASE thin, TEMPO double, PEAK thick, TAPER dashed. */
  .week { border-left: 0; }
  .phase { background: #fff !important; color: #111 !important; border: 0; padding: 0; font-weight: 600; }
  .week.BASE .phase { border-bottom: 0.5pt solid #111; }
  .week.TEMPO .phase { border-bottom: 2.5pt double #111; }
  .week.PEAK .phase { border-bottom: 1.5pt solid #111; }
  .week.TAPER .phase { border-bottom: 1pt dashed #111; }

  /* Colour-coded surfaces have to keep working once the fills are gone. */
  .cell { border: 0.5pt solid #666 !important; color: #111 !important; background-image: none !important; }
  .m-1 { background: #efefef !important; }
  .m-2 { background: #e4e4e4 !important; }
  .m-3 { background: #d9d9d9 !important; }
  .m-4 { background: #cfcfcf !important; }
  .m-5 { background: #c4c4c4 !important; }
  .m-stale, .m-unknown { background: #fff !important; border-style: dashed !important; }
  table.coverage th, table.coverage td { background: #fff !important; color: #111; border-color: #666; }
  table.coverage td.covered::after { content: " ✓"; }
  .bar { border: 0.5pt solid #666; height: 5pt; }
  .bar span { background: #666 !important; }
  .tag, .verdict, .banner .chip, .week-note .chip { border: 0.5pt solid #666 !important; background: #fff !important; color: #111 !important; }
  .ramp, .token-counter, .onsite-marker { border-color: #999; }
  .ramp i { background: #999 !important; }
  .chat, .findings, .criteria { break-inside: avoid; }
}