/* blog-craft — hand-rolled, no framework, no CDN.
   Visual direction (spec §1): near-monochrome dark (Linear/Sentry), one mono
   face for every corpus artifact, three semantic accents used ONLY on reveal,
   one verdict per screen, evidence inline beneath the claim. The interface is a
   worked example of the craft: indicate, don't narrate. */

:root {
  --bg: #0b0c0e;
  --surface: #131418;
  --surface-2: #191b20;
  --border: #25272d;
  --border-2: #31343c;
  --text: #eceef0;
  --muted: #9097a0;
  --faint: #6b7079;
  --mono-bg: #16171c;
  --match: #3fb37f;
  --miss: #e0a33e;
  --wrong: #e5484d;
  --match-soft: #142a20;
  --miss-soft: #2c2415;
  --wrong-soft: #2c1718;
  --radius: 7px;
  --app-header-height: 52px;
  --ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.55 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration: none; }
a:hover { color: #fff; }
h1 { font-size: 21px; font-weight: 640; letter-spacing: -0.01em; margin: 0 0 6px; }
h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }
h3 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
p { margin: 0 0 10px; }

/* ── Header / nav ─────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: var(--app-header-height);
  background: rgba(11,12,14,0.82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.app-logo { font-weight: 650; font-size: 14px; letter-spacing: -0.01em; }
.app-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.app-nav a { padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 12.5px; }
.app-nav a:hover { color: var(--text); background: var(--surface-2); }
.app-nav a.active { color: var(--text); background: var(--surface-2); }
.app-nav-reference { position: relative; }
.app-nav-reference summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 12.5px; }
.app-nav-reference summary::-webkit-details-marker { display: none; }
.app-nav-reference[open] summary { color: var(--text); }
.app-nav-reference-menu { position: absolute; right: 0; top: 110%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; display: flex; flex-direction: column; min-width: 130px; }
.app-palette-trigger { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.app-palette-trigger:hover { color: var(--text); }

.app-main { max-width: 760px; margin: 0 auto; padding: 34px 22px 120px; min-height: 60vh; }
.app-footer { max-width: 760px; margin: 0 auto; padding: 22px; color: var(--faint); font-size: 11.5px; border-top: 1px solid var(--border); }
.app-fatal, .app-page-notfound { padding: 40px 0; }
.app-page-notfound h2 { color: var(--text); text-transform: none; font-size: 17px; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary { display: inline-block; background: #f2f3f5; color: #0b0c0e; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 7px; border: 0; cursor: pointer; }
.btn-primary:hover { background: #fff; color: #0b0c0e; }
.btn-ghost { display: inline-block; color: var(--muted); border: 1px solid var(--border); padding: 8px 14px; border-radius: 7px; font-size: 12.5px; }
.btn-ghost:hover { color: var(--text); border-color: var(--border-2); }
button { font-family: var(--ui); }

/* ── Passages / artifacts (mono — read as evidence under inspection) ── */
.passage, pre.passage { font-family: var(--mono); font-size: 13px; line-height: 1.6; background: var(--mono-bg); border: 1px solid var(--border); border-left: 2px solid var(--border-2); border-radius: 6px; padding: 12px 14px; margin: 8px 0; white-space: pre-wrap; word-break: break-word; max-width: 72ch; }
.passage.slop { border-left-color: var(--miss); }
.passage.earned { border-left-color: var(--match); }
.passage.artifact { border-left-color: var(--faint); color: var(--muted); }
.mono { font-family: var(--mono); }
.note { color: var(--muted); font-size: 12.5px; margin: 8px 0; }
.prompt { color: var(--text); font-size: 13px; margin: 4px 0 10px; }
.lede { color: var(--muted); font-size: 14px; max-width: 60ch; }
.cite { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-top: 6px; }
.cite.inline { margin: 0 0 0 8px; }

/* ── Provenance glyphs ────────────────────────────────────────── */
.prov { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); }
.prov-verbatim { color: var(--match); border-color: var(--match-soft); }
.prov-near-verbatim { color: var(--miss); border-color: var(--miss-soft); }
.prov-unverified { color: var(--wrong); border-color: var(--wrong-soft); }

/* ── Home ─────────────────────────────────────────────────────── */
.home-hero h1 { font-size: 26px; }
.home-cta { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.missrate { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fam-cell { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fam-cell:hover { border-color: var(--border-2); }
.fam-name { font-size: 12.5px; color: var(--text); }
.fam-verdict { font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.fam-due { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.v-solid .fam-verdict, .v-solid .mt-verdict, .done-fam.v-solid { color: var(--match); }
.v-shaky .fam-verdict, .v-shaky .mt-verdict, .done-fam.v-shaky { color: var(--miss); }
.v-untouched .fam-verdict, .v-untouched .mt-verdict { color: var(--faint); }

.mod-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mod-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.mod-row:last-child { border-bottom: 0; }
.mod-row:hover { background: var(--surface); }
.mod-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.mod-title { font-size: 13px; color: var(--text); }
.mod-obj { display: none; }
.mod-min { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ── Session + drill shell ────────────────────────────────────── */
.session-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.session-exit { color: var(--faint); font-size: 12px; }
.session-scope { font-size: 12.5px; color: var(--muted); }
.session-meter { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.session-empty { padding: 30px 0; }

.drill-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.fam { font-size: 11px; padding: 2px 8px; border-radius: 5px; background: var(--surface-2); color: var(--muted); }
.kindtag { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.drill-head .prov { margin-left: auto; }
.practice { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

.zone-stimulus { margin-bottom: 14px; }
.zone-commit { margin-bottom: 14px; }
.zone-commit.locked { opacity: 0.7; pointer-events: none; }
.btn-reveal { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: 7px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-reveal:disabled { color: var(--faint); border-color: var(--border); cursor: not-allowed; }
.btn-reveal:not(:disabled):hover { background: #20232a; }

.zone-reveal { margin-top: 18px; }
.zone-reveal.shown { border-top: 1px solid var(--border); padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .zone-reveal.shown { animation: revfade 120ms ease-out; }
  @keyframes revfade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
}
.verdict-host { margin-bottom: 12px; }
.verdict { font-size: 24px; font-weight: 700; letter-spacing: 0.02em; }
.verdict.v-match { color: var(--match); }
.verdict.v-partial { color: var(--miss); }
.verdict.v-miss, .verdict.v-wrong { color: var(--wrong); }
.btn-next { margin-top: 16px; display: inline-block; background: #f2f3f5; color: #0b0c0e; font-weight: 600; padding: 8px 16px; border-radius: 7px; border: 0; cursor: pointer; }
.btn-next:hover { background: #fff; }
.key-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 12px 0 4px; }
.key-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.kr-label { color: var(--muted); min-width: 160px; }
.kr-value { font-family: var(--mono); color: var(--text); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.chip:hover { color: var(--text); }
.chip.on { background: #20232a; color: var(--text); border-color: var(--border-2); }
.move-chips, .move-chip { font-size: 11.5px; }
.move-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.move-chip { font-family: var(--mono); background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.apply { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* rank */
.rank-list, .rank-key { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rank-key { counter-reset: r; }
.rank-row, .rank-key li { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.rank-grip { font-family: var(--mono); font-size: 12px; color: var(--faint); min-width: 18px; }
.rank-key li::before { counter-increment: r; content: counter(r); font-family: var(--mono); font-size: 12px; color: var(--faint); min-width: 18px; }
.rank-text { flex: 1; font-size: 12.5px; }
.rank-ctl { display: flex; gap: 4px; }
.mini { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
.mini:hover { color: var(--text); }
.mini.sel.ok, .yn button.sel.ok { color: var(--match); border-color: var(--match-soft); }
.mini.sel.bad, .yn button.sel.bad { color: var(--wrong); border-color: var(--wrong-soft); }
.yn button.sel { background: #20232a; }
.hn { font-family: var(--mono); font-size: 11px; color: var(--miss); }
.rung { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* scaffold / draft */
.draft { width: 100%; background: var(--mono-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: var(--mono); font-size: 13px; line-height: 1.55; resize: vertical; }
.draft:focus { outline: none; border-color: var(--border-2); }
.scaffold-prompt { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 8px 0; white-space: pre-wrap; }
.components { display: flex; flex-direction: column; gap: 8px; }
.component { border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; }
.comp-label { font-size: 12.5px; }
.anti summary, details.anti summary { cursor: pointer; color: var(--faint); font-size: 11.5px; margin: 4px 0; }
.anti > div { font-family: var(--mono); font-size: 12px; color: var(--miss); padding: 6px 8px; background: var(--miss-soft); border-radius: 5px; }
.yn { display: flex; gap: 6px; margin-top: 6px; }
.self-verdict, .self-label { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* tripwire */
.tripwire { font-family: var(--mono); font-size: 11.5px; padding: 6px 9px; border-radius: 5px; margin: 6px 0; }
.tw-pass { color: var(--match); background: var(--match-soft); }
.tw-fail { color: var(--miss); background: var(--miss-soft); }

/* ledger */
.ledger { display: flex; flex-direction: column; gap: 6px; }
.ledger-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; flex-wrap: wrap; }
.ledger-row.row-ok { border-color: var(--match-soft); }
.ledger-row.row-bad { border-color: var(--wrong-soft); }
.ledger-chips { display: flex; gap: 3px; }
.lchip { width: 24px; height: 24px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.lchip:hover { color: var(--text); }
.lchip.on { background: #20232a; color: var(--text); border-color: var(--border-2); }
.ledger-text { flex: 1; font-family: var(--mono); font-size: 12.5px; min-width: 60%; }
.truth { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.drift { color: var(--miss); font-size: 12px; background: var(--miss-soft); padding: 8px 10px; border-radius: 5px; margin-top: 8px; }

/* pattern / opts */
.facts { padding-left: 18px; margin: 0 0 12px; }
.facts li { font-size: 12.5px; margin: 3px 0; color: var(--text); }
.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opt { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 8px 13px; font-size: 12.5px; cursor: pointer; }
.opt:hover { color: var(--text); }
.opt.on { background: #20232a; color: var(--text); border-color: var(--border-2); }
.verdict-table { display: flex; flex-direction: column; gap: 5px; }
.vrow { display: grid; grid-template-columns: 150px 90px 1fr; gap: 10px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.vrow.chosen { border-color: var(--border-2); background: var(--surface); }
.vrow .vp { font-weight: 600; }
.vrow .vv { font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.v-defensible .vv { color: var(--match); }
.v-not-strongest .vv { color: var(--miss); }
.v-wrong .vv { color: var(--wrong); }
.vr { color: var(--muted); }

/* cold reader / questions */
.questions { display: flex; flex-direction: column; gap: 10px; }
.q label { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.intended { padding-left: 18px; }
.intended li { font-size: 12.5px; margin: 4px 0; }
.prop { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 12.5px; margin-top: 8px; }
.prop-tag { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 8px; }
.second-beat { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.sb-prompt { font-size: 12.5px; color: var(--text); }
.sb-expected { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.second-beat summary { cursor: pointer; color: var(--faint); font-size: 12px; }

/* diff */
.diff { display: flex; flex-direction: column; gap: 8px; }
.diff-row { border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; }
.diff-move { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.diff-frag { font-family: var(--mono); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.frag-before { color: var(--miss); text-decoration: line-through; opacity: 0.8; }
.frag-arrow { color: var(--faint); }
.frag-after { color: var(--match); }

/* contrast */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contrast-card { text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 4px; cursor: pointer; }
.contrast-card:hover { border-color: var(--border-2); }
.contrast-card.on { border-color: #f2f3f5; }
.contrast-card.truth-earned { border-color: var(--match); }
.contrast-card.truth-slop { border-color: var(--wrong); }
.contrast-card .passage { margin: 0; border: 0; }

/* ── Module page ─────────────────────────────────────────────── */
.mod-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pathtag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); }
.pathtag.core { color: var(--match); border-color: var(--match-soft); }
.mod-id.big { font-size: 14px; font-family: var(--mono); color: var(--muted); }
.mod-est { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.objective { color: var(--muted); font-size: 14px; max-width: 60ch; margin-bottom: 16px; }
.module .btn-primary { margin-bottom: 8px; }
.core-moves { list-style: none; padding: 0; margin: 0; }
.core-moves li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.cm-text { color: var(--text); }
.mastery-check { display: flex; gap: 10px; margin: 16px 0; padding: 11px 13px; background: var(--surface); border-radius: 6px; font-size: 12.5px; }
.mc-label { color: var(--faint); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; min-width: 100px; }
.deps { font-size: 12px; color: var(--muted); margin: 10px 0; }
.deps a { font-family: var(--mono); color: var(--text); margin: 0 4px; }
.kind-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.kindcount { font-family: var(--mono); font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }
.mod-nav { display: flex; justify-content: space-between; margin-top: 26px; }

/* ── Reader ──────────────────────────────────────────────────── */
.reader-head h1 { text-transform: none; }
.reader-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ra-author { color: var(--muted); font-size: 12.5px; }
.spans { display: flex; flex-direction: column; gap: 4px; }
.span-row { border: 1px solid transparent; border-radius: 6px; }
.span-row.open { border-color: var(--border); background: var(--surface); }
.span-text { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); font-family: var(--mono); font-size: 13px; line-height: 1.6; padding: 8px 10px; cursor: pointer; }
.span-text:hover { background: var(--surface); border-radius: 6px; }
.span-ann { padding: 4px 12px 12px; }
.span-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.span-why { color: var(--muted); font-size: 12.5px; }
.reader-src { display: inline-block; margin-top: 18px; color: var(--faint); font-size: 12px; }
.capstone-beat { margin-top: 10px; }
.beat-meter { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.beat-q { font-size: 13.5px; margin: 6px 0 12px; }

/* ── Bench ───────────────────────────────────────────────────── */
.bench-draft { min-height: 180px; }
.bench-scan { margin: 8px 0 4px; }
.fp-list { display: flex; flex-direction: column; gap: 6px; }
.fp-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: baseline; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.fp-name { font-weight: 600; font-size: 12.5px; }
.fp-test { grid-column: 2; color: var(--muted); font-size: 12px; }
.rubric { display: flex; flex-direction: column; gap: 6px; }
.rubric-row { display: grid; grid-template-columns: 1fr 60px; gap: 8px 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 6px; }
.rr-cat { font-size: 12.5px; font-weight: 600; }
.rr-w { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 8px; }
.rr-five { grid-column: 1; color: var(--muted); font-size: 12px; }
.rr-sel { grid-row: 1 / span 2; grid-column: 2; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px; font: inherit; }
.bench-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.band-score { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.band-missing { flex-basis: 100%; color: var(--miss); font-size: 12px; }
.band-ok { flex-basis: 100%; color: var(--match); font-size: 12px; }

/* ── Mastery ─────────────────────────────────────────────────── */
.mastery-top { display: flex; gap: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.mastery-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mt-head, .mt-row { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr 0.6fr 0.6fr; gap: 10px; padding: 9px 13px; align-items: center; }
.mt-head { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.mt-row { border-bottom: 1px solid var(--border); font-size: 12.5px; }
.mt-row:last-child { border-bottom: 0; }
.mt-row:hover { background: var(--surface); }
.mt-row span:not(.mt-fam):not(.mt-verdict) { font-family: var(--mono); color: var(--muted); }
.mt-verdict { font-family: var(--mono); font-size: 11px; text-transform: uppercase; }

/* ── Reference ───────────────────────────────────────────────── */
.ref-acc { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.ref-acc summary { cursor: pointer; padding: 11px 14px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.ref-acc summary::-webkit-details-marker { display: none; }
.ref-acc[open] summary { border-bottom: 1px solid var(--border); }
.ref-count { font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 400; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ref-table th { text-align: left; color: var(--faint); font-weight: 500; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 10.5px; text-transform: uppercase; }
.ref-table td { padding: 7px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.ref-table td.mono { font-family: var(--mono); color: var(--miss); }
.ref-list { padding: 10px 30px; }
.ref-list li { margin: 6px 0; font-size: 12.5px; }
.small { font-size: 11.5px; color: var(--muted); }
.ref-checklist { padding: 6px 16px 14px; }
.ref-checklist ul { padding-left: 18px; }
.ref-checklist li { font-size: 12.5px; margin: 4px 0; }

/* ── About ───────────────────────────────────────────────────── */
.about-list { padding-left: 18px; }
.about-list li { margin: 8px 0; font-size: 13px; color: var(--muted); }
.about-counts { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* session done */
.session-done { padding: 20px 0; }
.done-fams { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.done-fam { font-size: 11.5px; font-family: var(--mono); padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px; }
.done-cta { display: flex; gap: 10px; margin-top: 18px; }

/* ── Cmd-K palette ───────────────────────────────────────────── */
.app-palette { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; }
.app-palette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.app-palette-panel { position: relative; margin-top: 12vh; width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.app-palette-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; font-size: 14px; padding: 14px 16px; }
.app-palette-input:focus { outline: none; }
.app-palette-results { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.app-palette-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.app-palette-item.selected { background: var(--surface-2); }
.app-palette-type { font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: uppercase; min-width: 64px; }
.app-palette-label { font-size: 13px; color: var(--text); }
.app-palette-detail { margin-left: auto; font-size: 11px; color: var(--faint); }
.app-palette-hint { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); }

@media (max-width: 560px) {
  .contrast { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: 1fr; gap: 3px; }
  .app-nav a, .app-nav-reference summary { padding: 5px 7px; }
  .learn-grid, .blog-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

/* ── Learn surface ───────────────────────────────────────────── */
.learn-hero h1 { font-size: 26px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 18px; }
.learn-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.learn-tile:hover { border-color: var(--border-2); }
.lt-head { display: flex; justify-content: space-between; align-items: baseline; }
.lt-title { font-size: 14px; font-weight: 620; color: var(--text); }
.lt-count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.lt-desc { font-size: 12.5px; color: var(--muted); }

.learn-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.learn-tab { padding: 6px 11px; border-radius: 6px; color: var(--muted); font-size: 12.5px; }
.learn-tab:hover { color: var(--text); background: var(--surface-2); }
.learn-tab.on { color: var(--text); background: var(--surface-2); }
.back { display: inline-block; color: var(--faint); font-size: 12px; margin-bottom: 12px; }

/* verbatim quote — the hero of the swipe file */
.verbatim { margin: 10px 0; padding: 12px 14px 12px 16px; background: var(--mono-bg); border: 1px solid var(--border); border-left: 2px solid var(--match); border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.vq-text { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: #f2f3f5; white-space: pre-wrap; max-width: 72ch; }
.verbatim .prov { align-self: flex-start; }

.tag-label { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-right: 8px; vertical-align: 1px; }
.tag-label.steal { color: var(--match); }
.tag-label.dont { color: var(--miss); }

/* swipe file */
.genre-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
.gf { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 14px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.gf:hover { color: var(--text); }
.gf.on { background: #20232a; color: var(--text); border-color: var(--border-2); }
.genre-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 28px 0 12px; }
.genre-h.small { border: 0; margin: 0 0 8px; }
.genre-n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.swipe-list { display: flex; flex-direction: column; }
.swipe-card { padding: 14px 0 18px; border-bottom: 1px solid var(--border); }
.swipe-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.swipe-post { font-size: 13.5px; font-weight: 600; color: var(--text); }
.swipe-post:hover { color: #fff; }
.swipe-by { font-size: 12px; color: var(--muted); }
.swipe-tech, .swipe-steal, .swipe-dont, .l-anti, .l-boundary, .bp-respect, .pat-when { font-size: 12.5px; margin: 7px 0; color: var(--text); }
.swipe-tech { color: var(--muted); }

/* blogs */
.blog-arch { margin-bottom: 8px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.blog-cell { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.blog-cell:hover { border-color: var(--border-2); }
.blog-cell.peer { border-left: 2px solid var(--match); }
.blog-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
.blog-voice { font-size: 12px; color: var(--muted); }
.peer-badge { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--match); border: 1px solid var(--match-soft); border-radius: 4px; padding: 1px 5px; }
.bp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-head h1 { margin: 0; text-transform: none; }
.arch-tag { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.bp-voice { font-size: 14px; color: var(--muted); max-width: 60ch; }
.bp-posts { display: flex; flex-direction: column; gap: 10px; }
.bp-post { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; }
.bp-title { font-weight: 600; font-size: 13px; margin-right: 8px; }
.bp-why { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.tc h3 { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; color: var(--faint); }
.tc.steal h3 { color: var(--match); }
.tc.dont h3 { color: var(--miss); }
.tc ul { padding-left: 18px; margin: 0; }
.tc li { font-size: 12.5px; margin: 6px 0; color: var(--text); }

/* lessons */
.lesson-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lesson-row { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: var(--surface); }
.lr-section { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.lr-title { font-size: 13px; font-weight: 600; color: var(--text); }
.lr-principle { grid-column: 2; font-size: 12px; color: var(--muted); }
.l-section { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.lesson h1 { text-transform: none; }
.l-principle { font-size: 15px; color: var(--text); max-width: 62ch; }
.l-points { padding-left: 18px; }
.l-points li { font-size: 13px; margin: 8px 0; }
.l-example { margin: 10px 0; }
.ex-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* patterns */
.pat-group { margin-bottom: 10px; }
.pat-list { display: flex; flex-direction: column; gap: 10px; }
.pat-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.pat-name { font-size: 13px; font-weight: 600; }
.pat-formula { font-family: var(--mono); font-size: 12.5px; color: var(--match); margin: 6px 0; }

/* canon */
.canon-group { margin-bottom: 12px; }
.canon-list { display: flex; flex-direction: column; }
.canon-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.canon-title { font-size: 13px; font-weight: 600; margin-right: 8px; }
.canon-blog { font-size: 12px; color: var(--muted); margin-right: 8px; }
.canon-why { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }

/* breakdowns */
.bd-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bd-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bd-row:last-child { border-bottom: 0; }
.bd-row:hover { background: var(--surface); }
.bd-post { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.bd-by { font-size: 12px; color: var(--muted); }
.bd-spans { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ── Dissections (depth) + cross-refs ────────────────────────── */
.diss-group { margin-bottom: 6px; }
.diss-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.diss-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.diss-row:last-child { border-bottom: 0; }
.diss-row:hover { background: var(--surface); }
.diss-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.diss-blog { font-size: 12px; color: var(--muted); }
.diss-n { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.dissection .diss-head h1 { text-transform: none; margin-bottom: 6px; }
.dissection .diss-head h1 a { color: var(--text); }
.dissection .diss-head h1 a:hover { color: #fff; }
.diss-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.diss-by { font-size: 12.5px; color: var(--muted); }
.diss-banner { background: var(--miss-soft); color: var(--miss); font-size: 12px; padding: 8px 11px; border-radius: 6px; margin-bottom: 12px; }
.diss-thesis { font-size: 14px; color: var(--text); margin: 10px 0; }
.diss-overview { font-size: 13.5px; color: var(--muted); max-width: 64ch; line-height: 1.6; }
.diss-spineline { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.sl { font-size: 12.5px; color: var(--text); }
.diss-skeleton { margin: 14px 0; }
.skeleton-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.tech-chip { font-family: var(--mono); font-size: 11px; background: var(--surface-2); color: var(--match); border: 1px solid var(--match-soft); border-radius: 5px; padding: 2px 7px; }
.skeleton-chips .arrow, .arrow { color: var(--faint); font-size: 11px; }
.diss-title-an { font-size: 12.5px; color: var(--muted); margin: 10px 0; }
.diss-sections { display: flex; flex-direction: column; gap: 18px; }
.diss-section { border-left: 2px solid var(--border); padding-left: 14px; }
.ds-role { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ds-n { font-family: var(--mono); font-size: 11px; color: var(--faint); width: 20px; }
.ds-techs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ds-analysis { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.diss-steal, .diss-gated { font-size: 13px; margin: 12px 0; }
.diss-xref { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 14px; }
.xref-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.xref-also { display: flex; flex-wrap: wrap; gap: 6px; }
.xref-link { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 7px; }
.xref-link:hover { color: var(--text); border-color: var(--border-2); }

.xref-index { display: flex; flex-direction: column; gap: 14px; }
.xref-block { border: 1px solid var(--border); border-radius: 6px; padding: 11px 13px; }
.xref-tech { font-family: var(--mono); font-size: 13px; color: var(--match); display: flex; justify-content: space-between; margin-bottom: 8px; }
.xref-count { color: var(--faint); }
.xref-posts { display: flex; flex-direction: column; gap: 3px; }
.xref-post { font-size: 12.5px; color: var(--muted); }
.xref-post:hover { color: var(--text); }