/* ===========================================================================
   brain.css—the pieces this write-up adds to the shared shell. The first
   block is the generic figure kit from the murder mystery write-up.
   =========================================================================== */

:root {
  /* Highlight + link colours, validated with the dataviz palette validator
     against both surfaces. Dark: blue #3f97d6, red #d9645a, purple #9b7be0,
     green #3aa37d. Light: #1f78c1, #c4473d, #7d55c7, #1f8a63. Work ties are
     a dashed neutral, so they never rely on colour alone. */
  --hl: #5a91ea;
  --hl-soft: oklch(0.66 0.146 259.792 / 0.16);
  --lk-clue: #5a91ea;
  /* The portfolio's .btn--blue treatment */
  --btn-blue: oklch(0.718 0.146 259.792 / 0.12);
  --btn-blue-text: oklch(0.8 0.161 259.792);
  --btn-blue-border: oklch(1 0 0 / 0.10);
  --btn-sheen: inset 0 1px 0 oklch(1 0 0 / 0.06);
  --lk-grudge: #d9645a;
  --lk-secret: #9b7be0;
  --lk-close: #3aa37d;
  --lk-work: #8a8a8a;
  --open-track: oklch(1 0 0 / 0.07);
  --warn: var(--grade-assumed-text);
  --warn-bg: var(--grade-assumed-bg);
  --ok: var(--grade-measured-text);
  --ok-bg: var(--grade-measured-bg);
  --add: var(--grade-measured-text);
  --del: var(--grade-assumed-text);
  --redact-bg: oklch(0.08 0 0);
  --redact-fg: oklch(0.62 0 0);
  --wide-out: 9rem;
  --tg-on: oklch(0.52 0 0);
  --tg-victim: oklch(0.88 0 0);
  --tg-warn: oklch(0.63 0.2 27);
}
:root[data-theme="light"] {
  --hl: #336ecd;
  --hl-soft: oklch(0.55 0.16 259.792 / 0.12);
  --lk-clue: #336ecd;
  --btn-blue: oklch(0.55 0.16 259.792 / 0.10);
  --btn-blue-text: oklch(0.5 0.18 259.792);
  --btn-blue-border: oklch(0 0 0 / 0.07);
  --lk-grudge: #c4473d;
  --lk-secret: #7d55c7;
  --lk-close: #1f8a63;
  --lk-work: #8a8a8a;
  --open-track: oklch(0 0 0 / 0.06);
  --redact-bg: oklch(0.2 0 0);
  --redact-fg: oklch(0.78 0 0);
  --tg-on: oklch(0.62 0 0);
  --tg-victim: oklch(0.3 0 0);
  --tg-warn: oklch(0.55 0.21 27);
}

.section > ul.rulelist { margin-bottom: var(--s4); }
.section > ul.rulelist li { font-size: 15px; }
.section--flush { padding-top: 0; }
.section > h3:first-child { margin-top: var(--s2); }

.table-scroll { overflow-x: auto; margin: var(--s5) 0; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin: 0; }
.rules-table td.num, .rules-table th.num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.targets-table td:first-child, .profiles-table td:last-child { white-space: normal; }
.targets-table td:last-child { white-space: nowrap; }
.profiles-table td:nth-child(2) { color: var(--text-secondary); font-weight: 400; }

.pf { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); margin-right: 6px; border: 1px solid var(--grade-border); }
.pf--pass { background: var(--ok-bg); color: var(--ok); }
.pf--fail { background: var(--warn-bg); color: var(--warn); }

/* ── Wide figures ──────────────────────────────────────────── */
.module.wide { margin: var(--s5) 0 var(--s6); }
/* Figures sit in the text column, aligned with the prose. */
.fig-cap { font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); margin-top: var(--s4); }
.fig-cap strong { color: var(--text); }
.fig-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.fig-top .module-head { margin-bottom: 0; }

/* Segmented control, from the CAC site */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
.seg-btn { position: relative; border: none; background: none; cursor: pointer; font: 500 12.5px var(--font); color: var(--text-tertiary); padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap; line-height: 1.4; transition: color var(--transition), background var(--transition); }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { color: var(--text); background: var(--pill-active-bg); }
.seg-btn:focus-visible { outline: 1.5px solid var(--text-tertiary); outline-offset: 2px; }

/* Redaction: a black bar, sometimes with a placeholder label */
.redact {
  background: var(--redact-bg); color: var(--redact-fg);
  padding: 0 5px; border-radius: 2px; font-style: normal;
  font-size: 0.86em; letter-spacing: 0.01em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.redact--bar { display: inline-block; height: 14px; padding: 0; vertical-align: middle; }

.mini-diff {
  font: 12.5px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: var(--s3); margin-top: var(--s2); color: var(--text-secondary);
}
.mini-diff .add { color: var(--add); }
.mini-diff .del { color: var(--del); }


/* ── This page's figures ───────────────────────────────────────
   Structure for every figure: a title at h2 size, then (optionally) a line
   of description, then the visual in its own bounding box (.fig-box: an
   inset panel with a ring shadow), then any controls. One accent, blue.
   Mono annotations use Geist Mono. */
:root {
  --fig-bg: oklch(0.135 0 0);
  --fig-ring: oklch(1 0 0 / 0.08);
  --fig-line: oklch(1 0 0 / 0.16);
  --fig-empty: oklch(1 0 0 / 0.05);
  --accent: oklch(0.72 0.14 259.8);
  --c-craft: oklch(0.74 0.12 255);
  --c-work: oklch(0.76 0.12 165);
  --c-life: oklch(0.74 0.12 50);
  --c-self: oklch(0.74 0.12 315);
  --c-other: oklch(0.6 0 0);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="light"] {
  --fig-bg: oklch(0.975 0 0);
  --fig-ring: oklch(0 0 0 / 0.08);
  --fig-line: oklch(0 0 0 / 0.18);
  --fig-empty: oklch(0 0 0 / 0.05);
  --accent: oklch(0.55 0.16 259.8);
  --c-craft: oklch(0.56 0.13 255);
  --c-work: oklch(0.56 0.12 165);
  --c-life: oklch(0.58 0.13 50);
  --c-self: oklch(0.56 0.13 315);
}

.module { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.module-head { margin-bottom: var(--s3); }
.module-title { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--text); text-wrap: balance; }
.fig-top { align-items: baseline; margin-bottom: var(--s3); }
.fig-desc { margin: 0 0 var(--s4); font-size: 15px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; min-height: 3.1em; }
.fig-desc strong { color: var(--text); font-weight: 600; }
.fig-box { position: relative; background: var(--fig-bg); box-shadow: 0 0 0 1px var(--fig-ring); border-radius: 8px; padding: var(--s5); }
.fig-box + .fig-box { margin-top: var(--s3); }
.fig-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); min-height: 24px; font-size: 12px; color: var(--text-tertiary); }
.mono { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }

.draft-note {
  margin: var(--s4) 0; padding: var(--s3) var(--s4);
  border: 1px dashed var(--border); border-radius: 6px;
  font-size: 13px; line-height: 1.5; color: var(--text-tertiary);
}
.draft-note strong { color: var(--text-secondary); }

/* Chips: choices and keys. Sans, quiet, a ring when active. */
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip, .pick {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
  box-shadow: 0 0 0 1px var(--fig-ring); cursor: pointer;
  font: 400 12px var(--font); color: var(--text-secondary); white-space: nowrap;
  transition-property: color, box-shadow, scale; transition-duration: 160ms;
}
.chip::after, .pick::after { content: ""; position: absolute; inset: -7px -2px; }
.pick:hover { color: var(--text); }
.pick.is-active { color: var(--text); box-shadow: 0 0 0 1px var(--text-tertiary); }
.pick:focus-visible { outline: 1px solid var(--text-tertiary); outline-offset: 2px; }
.pick:active { scale: 0.96; }
.pick:disabled { opacity: 0.35; cursor: default; }
.chip { cursor: default; color: var(--text-tertiary); }
.chip::after { content: none; }
.chip i { width: 7px; height: 7px; border-radius: 50%; }
.icon-btn { width: 28px; height: 28px; justify-content: center; padding: 0; }
.icon-btn svg { display: block; }

/* ── 1. The diary calendar ─────────────────────────────────── */
.cal { display: block; width: 100%; height: auto; overflow: visible; }
.cal-cell { fill: var(--fig-empty); }
.cal-cell.l1 { fill: var(--accent); fill-opacity: 0.25; }
.cal-cell.l2 { fill: var(--accent); fill-opacity: 0.45; }
.cal-cell.l3 { fill: var(--accent); fill-opacity: 0.7; }
.cal-cell.l4 { fill: var(--accent); fill-opacity: 1; }
.cal-cell.is-on { stroke: var(--text); stroke-width: 1.2; }
.cal-row { opacity: 0; transition: opacity 500ms cubic-bezier(0.2, 0, 0, 1); }
.cal.is-in .cal-row { opacity: 1; }
.cal-month { font: 400 9px var(--mono); fill: var(--text-tertiary); opacity: 0.6; }
.cal-month--year { font-size: 10.5px; font-weight: 500; fill: var(--text-secondary); opacity: 1; }
.cal-lead { stroke: var(--fig-line); stroke-width: 1; fill: none; }
.cal-note { font: 400 10.5px var(--mono); fill: var(--text-secondary); }
.cal-legend { display: inline-flex; align-items: center; gap: 3px; }
.cal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--fig-empty); }
.cal-legend i.l1 { background: color-mix(in oklch, var(--accent) 25%, transparent); }
.cal-legend i.l2 { background: color-mix(in oklch, var(--accent) 45%, transparent); }
.cal-legend i.l3 { background: color-mix(in oklch, var(--accent) 70%, transparent); }
.cal-legend i.l4 { background: var(--accent); }

/* ── 2. Levels of detail ───────────────────────────────────── */
.lvl { display: grid; gap: 2px; }
.lvl-row {
  display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: var(--s4);
  padding: 8px 10px; margin: 0 -10px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--text-secondary); transition-property: background, color; transition-duration: 160ms;
}
.lvl-row:hover { background: var(--fig-empty); }
.lvl-row.is-active { color: var(--text); background: var(--fig-empty); }
.lvl-row:focus-visible { outline: 1px solid var(--text-tertiary); outline-offset: 1px; }
.lvl-name { font-size: 13px; }
.lvl-track { height: 6px; border-radius: 3px; background: var(--fig-empty); overflow: hidden; }
.lvl-bar { height: 100%; border-radius: 3px; background: var(--text-tertiary); width: 0; transition: width 700ms cubic-bezier(0.2, 0, 0, 1), background 160ms; }
.lvl-row.is-active .lvl-bar { background: var(--accent); }
.lvl-size { min-width: 9.5rem; text-align: right; color: var(--text-tertiary); }
.lvl-preview { min-height: 12rem; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.lvl-preview > * { animation: lvl-in 320ms cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes lvl-in { from { opacity: 0; translate: 0 4px; } }
.lvl-k { display: block; margin-bottom: var(--s2); color: var(--text-tertiary); }
.lvl-text { margin: 0; text-wrap: pretty; }
.lvl-text--line { font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: balance; }
.lvl-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s5); }
.lvl-list li { break-inside: avoid; display: flex; gap: var(--s3); align-items: baseline; padding: 4px 0; font-size: 13px; }
.lvl-date { flex: none; width: 7.2em; white-space: nowrap; color: var(--text-tertiary); }
.lvl-quote { margin: 0; color: var(--text); }

/* ── 3. The knowledge graph, step by step ──────────────────── */
.kg-stage { position: relative; max-height: 440px; margin: var(--s3) auto var(--s2); }
.kg-small, .kg-full { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 500ms cubic-bezier(0.2, 0, 0, 1); }
.kg-small { overflow: visible; }
.kg-full { opacity: 0; pointer-events: none; }
.kg-stage.is-full .kg-small { opacity: 0; }
.kg-stage.is-full .kg-full { opacity: 1; }
.kg-small .kg-e, .kg-small .kg-n, .kg-small .kg-tag { opacity: 0; transition: opacity 450ms cubic-bezier(0.2, 0, 0, 1); }
.kg-small .is-shown { opacity: 1 !important; }
.kg-e { stroke: var(--fig-line); stroke-width: 0.006; fill: none; }
.kg-e--filed-under { stroke-dasharray: 0.014 0.014; }
.kg-e--builds-on, .kg-e--led-to { stroke: var(--text-tertiary); }
.kg-e.is-path { stroke: var(--accent); stroke-width: 0.012; stroke-dasharray: none; }
.kg-n circle { fill: var(--fig-bg); stroke: var(--text-tertiary); stroke-width: 0.006; }
.kg-n--topic circle { fill: var(--text-tertiary); stroke: none; }
.kg-n.is-focus circle, .kg-n.is-path circle { fill: var(--accent); stroke: none; }
.kg-label { font: 500 0.062px var(--font); fill: var(--text-secondary); }
.kg-label--focus { font-weight: 400; font-size: 0.056px; fill: var(--text); }
.kg-tag text { font: 400 0.044px var(--mono); fill: var(--text-tertiary); }
.kg-tag line { stroke: var(--fig-line); stroke-width: 0.004; }
.kg-controls { display: flex; align-items: center; gap: 6px; margin-top: var(--s3); }
.kg-count { margin-left: var(--s2); color: var(--text-tertiary); }
.kg-dots { display: flex; gap: 6px; margin-left: auto; }
.kg-dot { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--fig-line); cursor: pointer; transition-property: background, scale; transition-duration: 200ms; }
.kg-dot::after { content: ""; position: absolute; inset: -9px -4px; }
.kg-dot.is-active { background: var(--text-secondary); }

/* Key under the graph */
.kg-key-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s3); font-size: 12px; color: var(--text-tertiary); }
.kg-key-row span { display: inline-flex; align-items: center; gap: 6px; }
.kg-k { width: 8px; height: 8px; border-radius: 50%; }
.kg-k--topic { background: var(--text-tertiary); }
.kg-k--note { box-shadow: inset 0 0 0 1px var(--text-tertiary); }
.kg-kl { width: 18px; height: 0; border-top: 1px solid var(--text-tertiary); }
.kg-kl--dash { border-top-style: dashed; border-top-color: var(--fig-line); }
.kg-kl--path { border-top: 2px solid var(--accent); }
.kg-controls .kg-dots { margin-left: auto; }

/* ── 2b. Levels drawn to scale ─────────────────────────────── */
.fig-sep { height: 0; margin: var(--s4) calc(-1 * var(--s5)); box-shadow: 0 1px 0 var(--fig-ring); }
.nest { display: block; width: 100%; height: auto; overflow: visible; }
.nest-lvl { cursor: pointer; outline: none; }
.nest-box { fill: var(--fig-empty); stroke: var(--fig-line); stroke-width: 1; transition-property: fill, stroke; transition-duration: 200ms; }
.nest-lvl--0 .nest-box { fill: color-mix(in oklch, var(--accent) 6%, transparent); }
.nest-lvl--1 .nest-box { fill: color-mix(in oklch, var(--accent) 18%, transparent); }
.nest-lvl--2 .nest-box, .nest-lvl--3 .nest-box { fill: var(--accent); stroke: none; }
.nest-lvl.is-active .nest-box { stroke: var(--text); }
.nest-lvl--2.is-active .nest-box, .nest-lvl--3.is-active .nest-box { stroke: var(--text); stroke-width: 1; }
.nest-label { font: 400 11px var(--mono); fill: var(--text-tertiary); transition: fill 200ms; }
.nest-lvl.is-active .nest-label { fill: var(--text); }
.nest-lead { fill: none; stroke: var(--fig-line); stroke-width: 1; }
.nest-lvl.is-active .nest-lead { stroke: var(--text-tertiary); }
.lvl-preview .lvl-k { margin-bottom: var(--s3); }

/* ── 4a. Embedding, very simply ────────────────────────────── */
.vec { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.vec-left { display: grid; gap: var(--s3); }
.vec-item { display: grid; gap: 2px; }
.vec-item + .vec-item { padding-top: var(--s3); box-shadow: 0 -1px 0 var(--fig-ring); }
.vec-k { color: var(--text-tertiary); }
.vec-t { font-size: 14px; color: var(--text); text-wrap: pretty; }
.vec-item.is-query .vec-t { color: var(--accent); }
.vec-nums { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vec-radar { display: block; width: 100%; max-width: 280px; margin: 0 auto; overflow: visible; }
.vec-ring { fill: none; stroke: var(--fig-line); stroke-dasharray: 2 3; }
.vec-ring-l { font: 400 9px var(--mono); fill: var(--text-tertiary); }
.vec-spoke { stroke: var(--fig-line); stroke-width: 1; }
.vec-spoke.is-near { stroke: var(--accent); stroke-opacity: 0.6; }
.vec-note { fill: var(--fig-bg); stroke: var(--text-tertiary); stroke-width: 1.5; }
.vec-note.is-near { fill: var(--accent); stroke: none; }
.vec-note-l { font: 400 10.5px var(--mono); fill: var(--text-secondary); }
.vec-q { fill: var(--accent); stroke: var(--fig-bg); stroke-width: 3; }
.vec-cap { margin: var(--s2) 0 0; text-align: center; color: var(--text-tertiary); }
@media (max-width: 640px) { .vec { grid-template-columns: 1fr; } }

/* ── 4. Search by meaning ──────────────────────────────────── */
.vec-row { display: grid; grid-template-columns: 1.3rem minmax(0, 15rem) 1fr; align-items: center; gap: var(--s3); padding: 6px 0; }
.vec-n { color: var(--text-tertiary); }
.vec-title { font-size: 13px; color: var(--text); text-wrap: pretty; }
.vec-strip { display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px; height: 18px; }
.vec-strip i { border-radius: 1px; }
.vec-more { grid-column: 3; margin-top: -2px; text-align: right; color: var(--text-tertiary); }
.vec-sims { display: grid; gap: 8px; margin-top: var(--s4); padding-top: var(--s4); box-shadow: 0 -1px 0 var(--fig-ring); }
.vec-sim { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 2.6rem; align-items: center; gap: var(--s3); font-size: 13px; color: var(--text-secondary); }
.vec-sim-track { height: 4px; border-radius: 2px; background: var(--fig-empty); overflow: hidden; }
.vec-sim-bar { height: 100%; background: var(--accent); border-radius: 2px; }
.vec-sim-v { text-align: right; color: var(--text); }
.mm-stage { position: relative; }
.mm { display: block; width: 100%; height: auto; max-height: 520px; margin: 0 auto; overflow: visible; }
.mm-dot { fill-opacity: 0.85; transition-property: fill-opacity, r; transition-duration: 300ms; }
.mm-g--craft { fill: var(--c-craft); background: var(--c-craft); }
.mm-g--work { fill: var(--c-work); background: var(--c-work); }
.mm-g--life { fill: var(--c-life); background: var(--c-life); }
.mm-g--self { fill: var(--c-self); background: var(--c-self); }
.mm-g--other { fill: var(--c-other); background: var(--c-other); }
.mm.is-searching .mm-dot { fill-opacity: 0.12; }
.mm.is-searching .mm-dot.is-hit { fill-opacity: 1; r: 0.016; }
.mm-ray { stroke: var(--text-tertiary); stroke-width: 0.0025; }
.mm-q { fill: var(--fig-bg); stroke: var(--text); stroke-width: 0.005; }
.mm-qlabel { font: 400 0.04px var(--font); fill: var(--text); }
.mm-tip { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 auto; width: fit-content; max-width: 92%; font-size: 13px; color: var(--text); text-align: center; opacity: 0; transition-property: opacity; transition-duration: 150ms; pointer-events: none; }
.mm-tip.is-on { opacity: 1; }

/* ── 5. With and without ───────────────────────────────────── */
.adv-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.adv-card { padding: var(--s4) var(--s5); border-radius: 8px; box-shadow: 0 0 0 1px var(--fig-ring); background: var(--fig-bg); }
.adv-who { margin: 0 0 var(--s3); font-size: 12px; color: var(--text-tertiary); }
.adv-answer { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.adv-calls { margin-top: var(--s3); font-size: 12px; color: var(--text-tertiary); }
.adv-calls summary { cursor: pointer; }
.adv-calls ul { margin: var(--s2) 0 0; padding-left: 1em; font: 11px/1.6 var(--mono); word-break: break-word; }
.adv-signoff { margin: var(--s3) 0 0; font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.reveal > * { opacity: 0; translate: 0 6px; transition-property: opacity, translate; transition-duration: 500ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.reveal.is-in > * { opacity: 1; translate: 0 0; }

@media (max-width: 640px) {
  .adv-row { grid-template-columns: 1fr; }
  .fig-box { padding: var(--s4); }
  .kg-stage { aspect-ratio: 1 / 1; }
  .lvl-row { grid-template-columns: 6rem 1fr; }
  .lvl-size { grid-column: 1 / -1; text-align: left; min-width: 0; }
  .lvl-list { columns: 1; }
  .vec-row { grid-template-columns: 1.3rem 1fr; }
  .vec-strip, .vec-more { grid-column: 2; }
  .vec-sim { grid-template-columns: 1fr 2.6rem; }
  .vec-sim-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal > *, .cal-row, .kg-small *, .kg-small, .kg-full, .mm-dot, .lvl-bar { transition: none !important; }
  .reveal > * { opacity: 1; translate: none; }
  .cal-row { opacity: 1; }
  .lvl-preview > * { animation: none; }
}

/* Graph: the step caption sits in its own box at the top of the figure.
   Outer radius 10 = inner radius 4 + 6 padding, so the corners nest. */
.kg-box { border-radius: 10px; padding: 6px; }
.kg-cap { min-height: 3.4em; padding: 14px 18px; border-radius: 4px; background: var(--fig-empty); font-size: 13px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.kg-cap strong { color: var(--text); font-weight: 600; }
.kg-box .kg-stage { margin-left: var(--s4); margin-right: var(--s4); }
@media (max-width: 640px) { .kg-box .kg-stage { margin-left: var(--s2); margin-right: var(--s2); } }

/* Embedding: two notes as colour strips, above the numbers */
.vec-strips { display: grid; gap: var(--s2); }
.vec-srow { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; align-items: center; gap: var(--s4); }
.vec-stitle { font-size: 13px; color: var(--text-secondary); }
.vec-strip { display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px; height: 16px; }
.vec-strip i { border-radius: 1px; background: var(--accent); }
.vec-note-text { margin: var(--s2) 0 0; font-size: 13px; line-height: 1.55; color: var(--text-tertiary); }
@media (max-width: 640px) { .vec-srow { grid-template-columns: 1fr; gap: 4px; } }

/* Levels: tabs above, one box below */
.lvl-box { padding-bottom: calc(var(--s5) + 4px); }
.lvl-box .lvl-k { display: block; margin-bottom: var(--s3); }
.lvl-box .lvl-preview { min-height: 8rem; }
.kg-fl { transition: opacity 300ms; }
.kg-fl.is-hidden { opacity: 0; }

/* Levels: the notes as their own cards, the chats as a transcript */
.lvl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lvl-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 6px; background: color-mix(in oklch, var(--text) 3%, transparent); box-shadow: 0 0 0 1px var(--fig-line); font-size: 13.5px; line-height: 1.45; }
.lvl-card .lvl-date { width: auto; font-size: 11px; }
.lvl-title { color: var(--text); text-wrap: pretty; }
.lvl-transcript { border-radius: 6px; box-shadow: 0 0 0 1px var(--fig-line); background: color-mix(in oklch, var(--text) 3%, transparent); }
.lvl-tr-head, .lvl-tr-more { margin: 0; padding: 10px 14px; color: var(--text-tertiary); }
.lvl-tr-head { box-shadow: 0 1px 0 var(--fig-ring); }
.lvl-tr-more { box-shadow: 0 -1px 0 var(--fig-ring); }
.lvl-turn { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s3); padding: 14px; }
.lvl-who { padding-top: 3px; color: var(--accent); }
.lvl-transcript .lvl-quote { color: var(--text); text-wrap: pretty; }
@media (max-width: 640px) { .lvl-cards { grid-template-columns: 1fr; } .lvl-turn { grid-template-columns: 1fr; gap: 4px; } }

.rulelist li strong { color: var(--text); font-weight: 600; }

/* The desk photo */
.photo { margin: var(--s5) 0 var(--s5); }
.photo img { display: block; width: 100%; height: auto; border-radius: 8px; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
:root[data-theme="light"] .photo img { outline-color: rgba(0, 0, 0, 0.1); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .photo img { outline-color: rgba(0, 0, 0, 0.1); } }
.photo figcaption { margin-top: var(--s2); font: 400 11px/1.5 var(--mono); color: var(--text-tertiary); }

/* Mid-page call to action: a quiet grey box */
.cta-box { margin: var(--s6, 40px) 0 0; padding: var(--s5); border-radius: 10px; background: var(--fig-empty); }
.cta-box .cta-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.cta-box .cta-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.cta-box .thought-signup { margin-top: var(--s4); margin-bottom: 0; }

/* Hero: the brain in Obsidian's graph view */
.hero-img { margin: var(--s8, 48px) 0 0; }
.hero-img img { display: block; width: 100%; height: auto; border-radius: 10px; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
.hero-img figcaption { margin-top: var(--s2); font: 400 11px/1.5 var(--mono); color: var(--text-tertiary); }
/* The hero breaks out of the text column, as wide as the murder mystery's */
@media (min-width: 1240px) {
  .hero-img { margin-left: calc(-1 * var(--wide-out)); margin-right: calc(-1 * var(--wide-out)); }
}

/* Top-of-page pointer to the guide: one quiet line in the grey box */
.cta-strip { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s4); margin: 0 0 var(--s6, 40px); padding: 14px var(--s5); border-radius: 10px; background: var(--fig-empty); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-decoration: none; transition-property: background; transition-duration: 160ms; }
.cta-strip strong { color: var(--text); font-weight: 600; }
.cta-strip:hover { background: color-mix(in oklch, var(--fig-empty), var(--text) 4%); }
.cta-strip-go { color: var(--text); white-space: nowrap; }

/* The full version at the bottom, in the same grey box */
.cta-box--full { margin-top: 0; }
.cta-box--full h2 { margin-top: 0; }
.cta-box--full p { margin: 0 0 var(--s3); font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.cta-box--full .rulelist { margin: 0 0 var(--s3); }
.cta-box--full .rulelist li { font-size: 14px; line-height: 1.5; }