/* Read page (index.html): the talk companion on the navy ground. Tokens come from site/site.css. */

.page-index main > section[data-surface="ink"] { width: min(100% - 2 * var(--pad), var(--plate-max)); max-width: none; margin-inline: auto; padding-inline: 0; }
.page-index h2 { max-width: 22ch; margin: 0 0 var(--s-4); font: var(--t-h2); letter-spacing: -.03em; }
.page-index h3 { margin: var(--s-5) 0 var(--s-2); font: var(--t-h3); letter-spacing: -.01em; }
.page-index .section-intro > p:last-child, .finding-copy > p { max-width: 60ch; font: var(--t-body); }
.page-index .section-intro { margin-bottom: var(--s-6); }
.finding-caveat { max-width: 68ch; margin-top: var(--s-4); color: var(--n300); font: var(--t-small); }

/* Hero */
#overview.reader-hero {
  position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 88px); row-gap: var(--s-4); align-items: start;
  min-height: calc(100svh - 57px); padding-block: var(--s-8) var(--s-9); border: 0; background: transparent;
}
#overview.reader-hero::after, #overview.reader-hero::before { display: none; }
#overview .intro-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; z-index: 2; max-width: 760px; }
#overview h1 { max-width: 17ch; margin: 0 0 var(--s-5); color: var(--paper); font: var(--t-h1); letter-spacing: -.035em; }
#overview h1 em { color: var(--blue-200); font-style: normal; }
#overview h1 .word { display: inline-block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .05em; vertical-align: top; }
#overview h1 .word > span { display: inline-block; }
#overview .lede { max-width: 56ch; color: var(--n200); font: var(--t-lede); }
#overview .hero-thesis { max-width: 52ch; margin-top: var(--s-4); padding-left: var(--s-4); border-left: 3px solid var(--blue); color: var(--paper); font: 600 18px/1.5 var(--f-sans); }
#overview .intro-actions { gap: 14px 26px; margin-top: var(--s-6); }
#overview .quiet-link { color: var(--paper); font: 600 15px/1.4 var(--f-sans); }
#overview .hero-boundary { max-width: 60ch; margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--n700); color: var(--n300); font: var(--t-small); }
#overview .hero-boundary strong { color: var(--paper); }
.hero-stage { grid-column: 2; grid-row: 1; position: relative; z-index: 1; aspect-ratio: 5 / 3; width: 100%; pointer-events: none; }
.hero-stage-frame { position: absolute; inset: 0; }
.hero-stage-frame > img, .hero-stage-frame > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-fallback { object-fit: contain; transition: opacity .35s var(--ease); }
.hero-stage canvas { opacity: 0; transition: opacity .6s var(--ease); }
.hero-stage.is-live canvas { opacity: 1; }
.hero-stage.is-live .hero-fallback { opacity: 0; }
.hero-key { grid-column: 2; grid-row: 2; align-self: start; display: grid; gap: var(--s-2); padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--n700); border-radius: 0; background: none; color: var(--n200); font: var(--t-small); }
.hero-key p { margin: 0; }
.key-dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: -1px; }
.key-diff { background: var(--diff); }
.key-ring { background: var(--blue-200); box-shadow: 0 0 0 2px var(--n900), 0 0 0 4px var(--blue-300); }
.ninecell-key { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--n700); }
.ninecell-mini { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; }
.ninecell-mini i { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in oklab, var(--blue) var(--m, 50%), var(--n700)); }
.ninecell-mini i:nth-child(1) { --m: 95%; } .ninecell-mini i:nth-child(2) { --m: 80%; } .ninecell-mini i:nth-child(3) { --m: 65%; }
.ninecell-mini i:nth-child(4) { --m: 90%; } .ninecell-mini i:nth-child(5) { --m: 70%; } .ninecell-mini i:nth-child(6) { --m: 85%; }
.ninecell-mini i:nth-child(7) { --m: 55%; } .ninecell-mini i:nth-child(8) { --m: 100%; } .ninecell-mini i:nth-child(9) { --m: 75%; }

/* Four decisions: numbered in plain text, separated by hairlines, no colour tabs. */
.decisions { padding-block: var(--s-9); }
.decision-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: var(--s-6); }
.decision-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); margin: 0; padding: 0; list-style: none; counter-reset: decision; }
.decision-strip li { position: relative; display: grid; gap: var(--s-2); align-content: start; min-height: 0; padding: var(--s-5) 0; border: 0; border-top: 1px solid var(--n700); border-radius: 0; background: none; counter-increment: decision; }
.decision-strip li::before { content: counter(decision); color: var(--n300); font: 500 13px/1 var(--f-mono); }
.decision-strip li::after { display: none; }
.decision-strip b { color: var(--paper); font: 700 20px/1.25 var(--f-display); }
.decision-strip span { color: var(--n200); font: var(--t-small); }
.decisions .hero-example { margin: 0; padding: var(--s-6); border: 0; border-radius: var(--r-3); background: var(--surface); box-shadow: var(--e-paper); transform: none; }
.decisions .hero-example blockquote { margin: 0 0 var(--s-4); color: var(--ink); font: 500 20px/1.45 var(--f-sans); }
.decisions .example-decisions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); margin-top: var(--s-3); border: 0; }
.decisions .example-decisions > div { position: relative; display: grid; gap: 4px; padding: var(--s-3) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--muted); font: var(--t-label); }
.decisions .example-decisions > div::before { display: none; }
.decisions .example-decisions strong { color: var(--ink); font: 700 17px/1.25 var(--f-display); white-space: normal; }
.decisions .example-note { margin-top: var(--s-3); color: var(--muted); font: var(--t-label); }

/* Findings */
.finding { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: var(--s-9); border-bottom: 1px solid var(--n700); }
.finding > * { min-width: 0; }
.finding-copy .chapter-implication { margin: var(--s-5) 0 0; }
.finding-copy .chapter-implication p { margin: 0; }
.review-quote { margin: var(--s-3) 0 var(--s-2); padding: 0; color: var(--paper); font: 500 20px/1.45 var(--f-sans); }
.review-id { margin: 0; color: var(--n300); font: 400 13px/1.5 var(--f-mono); }
.review-id a { color: var(--blue-200); }
.finding-figure { position: sticky; top: calc(var(--reader-header-height, 57px) + 24px); margin: 0; padding: var(--s-6); border: 0; border-radius: var(--r-3); background: var(--n800); box-shadow: none; }
.finding-figure figcaption { margin-top: var(--s-4); color: var(--n300); font: var(--t-small); }
.finding-figure figcaption a { color: var(--blue-200); }
.soup { margin: var(--s-5) 0; padding: 2px 0 2px var(--s-4); border: 0; border-left: 3px solid var(--diff); border-radius: 0; background: none; }
.soup .review-quote { margin-top: 0; }
.soup figcaption { color: var(--n300); font: var(--t-small); }

/* Nine-cell glyph: three prompt versions down, three fresh passes across, shaded 40 or fewer to 60 of 60. */
.ninecell-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.ninecell-set > figcaption { grid-column: 1 / -1; margin-top: 4px; }
.ninecell-title { margin: 0 0 var(--s-2); color: var(--n300); font: var(--t-label); }
.ninecell-title b { display: block; color: var(--paper); font: 700 17px/1.25 var(--f-display); }
.ninecell table { width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0 -4px; table-layout: fixed; }
.ninecell th { padding: 0 0 2px; border: 0; color: var(--n300); font: var(--t-tick); letter-spacing: 0; text-align: center; white-space: nowrap; }
.ninecell thead td { background: none; height: auto; }
.nowrap { white-space: nowrap; }
.ninecell th[scope="row"] { width: 2.6em; text-align: left; }
.ninecell td { height: 48px; border: 0; border-radius: var(--r-2); text-align: center; color: #fff; font: 600 15px/1 var(--f-mono); font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--blue) calc(clamp(0, (var(--score, 40) - 40) * 5, 100) * 1%), var(--n700)); }
.ninecell td.is-stopped { background: repeating-linear-gradient(135deg, var(--n700) 0 6px, var(--n800) 6px 12px); color: var(--n200); font: var(--t-tick); }

/* The hard reviews: id, quote, a seven-segment track, the count. Tags are muted text; "Jev missed" is an orange dot. */
.hard-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--n700); }
.hard-item { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 4.4em 13.5em; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--n700); border-radius: 0; background: none; }
.hard-tags { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.hard-id { color: var(--paper); font: 500 13px/1 var(--f-mono); }
.hard-track { height: 8px; border-radius: 4px; background: var(--n700); overflow: hidden; }
.hard-track i { display: block; width: calc(var(--n) / 7 * 100%); height: 100%; border-radius: inherit; background: var(--diff); }
.hard-item b { color: var(--paper); font: 800 22px/1 var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.hard-item b small { color: var(--n300); font: 500 13px/1 var(--f-sans); }
.hard-tag { padding: 0; border: 0; border-radius: 0; color: var(--n300); font: var(--t-label); white-space: nowrap; }
.hard-tag.is-jev { color: var(--paper); }
.hard-tag.is-jev::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--diff); vertical-align: 1px; }

/* Controls figure */
.gauge-label { margin: 0 0 var(--s-3); color: var(--n300); font: var(--t-label); letter-spacing: 0; text-transform: none; }
.gauge-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4em; gap: var(--s-3); align-items: center; margin: 10px 0; color: var(--n200); font: var(--t-small); }
.gauge-track { height: 12px; border-radius: 6px; background: var(--n600); box-shadow: inset 0 0 0 1px var(--n500, #5b6782); overflow: hidden; }
.gauge-track i { display: block; width: calc(var(--v) / .4 * 100%); min-width: 8px; height: 100%; border-radius: inherit; background: var(--blue-300); }
.gauge-row b { color: var(--paper); font: 600 15px/1 var(--f-mono); text-align: right; }
.split { margin-top: var(--s-6); }
.split-bar { display: flex; gap: 3px; height: 16px; }
.split-bar i { flex: var(--n) 1 0; border-radius: 4px; }
.split-bar .up, .split-legend .up { background: var(--blue-300); }
.split-bar .same, .split-legend .same { background: var(--n300); }
.split-bar .down, .split-legend .down { background: var(--n200); }
.split-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--s-3); color: var(--n200); font: var(--t-label); }
.split-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; }

/* The rule: stat tiles with no box, divided by hairlines. */
.rule { padding-block: var(--s-9); }
.rule .section-intro > p:last-child { color: var(--paper); font: 600 clamp(18px, 1.4vw, 21px)/1.5 var(--f-sans); }
.rule-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); margin-top: var(--s-6); }
.rule-pair { padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--n700); border-radius: 0; background: none; box-shadow: none; }
.rule-pair h3 { margin: var(--s-1) 0 var(--s-4); }
.rule-tag { margin: 0; color: var(--n300); font: var(--t-label); letter-spacing: 0; text-transform: none; }
.rule-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 var(--s-4); }
.rule-stats div { padding: 0 var(--s-4); border-left: 1px solid var(--n700); border-radius: 0; background: none; }
.rule-stats div:first-child { padding-left: 0; border-left: 0; }
.rule-stats dt { color: var(--n300); font: var(--t-label); }
.rule-stats dd { margin: 6px 0 0; color: var(--paper); font: var(--t-stat); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rule-bar { display: flex; gap: 3px; height: 12px; margin-bottom: var(--s-3); }
.rule-bar i { flex: var(--n) 1 0; border-radius: 4px; }
.rule-bar .accept { background: var(--blue-300); }
.rule-bar .defer { background: var(--n300); }
.rule-pair > p:last-child { margin: 0; color: var(--n200); font: var(--t-small); }
.rule-queue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin-top: var(--s-7); padding: var(--s-6) 0 0; border: 0; border-top: 1px solid var(--n700); border-radius: 0; background: none; }
.queue-figure { display: grid; gap: 6px; margin: 0; max-width: 16ch; }
.queue-figure b { color: var(--paper); font: var(--t-big); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.queue-figure > span { color: var(--n200); font: var(--t-small); }
.rule-queue > p:last-child { margin: 0; max-width: 60ch; }

/* Limits, doors */
.limits { padding-block: var(--s-9) var(--s-8); }
.limit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.limit-list li { padding: var(--s-4) 0; border: 0; border-top: 1px solid var(--n700); border-radius: 0; background: none; color: var(--n200); font: var(--t-small); }
.limit-list b { display: block; margin-bottom: 4px; color: var(--paper); font: 700 17px/1.3 var(--f-display); }
.next { padding-block: var(--s-8) 0; }
.door-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.door { position: relative; display: grid; gap: 10px; align-content: start; min-height: 180px; padding: var(--s-5); border: 1px solid var(--n700); border-radius: var(--r-3); background: none; color: var(--n200); font: var(--t-small); text-decoration: none; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.door:hover { border-color: var(--blue-300); background: var(--n800); }
.door:first-child { background: var(--blue); border-color: var(--blue); color: #e6efff; }
.door:first-child:hover { background: #0f4f99; }
.door strong { color: var(--paper); font: 800 clamp(22px, 2vw, 28px)/1.1 var(--f-display); letter-spacing: -.02em; }
.door-go { position: absolute; right: 22px; top: 20px; color: var(--paper); font-size: 20px; }
.harness-note { margin: var(--s-5) 0 0; color: var(--n300); font: var(--t-small); }

/* Hero entrance: pure CSS, nothing waits for a script, everything settles inside 1.2s. */
@media (prefers-reduced-motion: no-preference) {
  #overview h1 .word > span { animation: word-rise .9s var(--e-mask) backwards; animation-delay: calc(var(--i, 0) * 30ms + 40ms); }
  #overview .lede, #overview .hero-thesis { animation: fade-up .7s var(--ease) .12s backwards; }
  #overview .intro-actions, #overview .hero-boundary { animation: fade-up .7s var(--ease) .16s backwards; }
  .hero-key { animation: fade-up .7s var(--ease) .2s backwards; }
  .door:hover .door-go { transform: translateX(3px); transition: transform .3s var(--ease); }
}
@keyframes word-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  #overview.reader-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .ninecell-set { grid-template-columns: 1fr 1fr; }
  .door-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  #overview.reader-hero { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  #overview .intro-copy, .hero-stage, .hero-key { grid-column: 1; grid-row: auto; }
  .decision-layout, .finding, .rule-pairs, .limit-list { grid-template-columns: minmax(0, 1fr); }
  .finding-figure { position: static; }
}
@media (max-width: 760px) {
  .page-index main > section[data-surface="ink"] { padding-inline: 0; }
  #overview.reader-hero { padding-block: var(--s-7) var(--s-8); }
  #overview h1 { font-size: clamp(38px, 10.6vw, 56px); }
  .decisions, .rule, .finding { padding-block: var(--s-8); }
  .decision-strip { grid-template-columns: 1fr; }
  .decisions .hero-example { padding: 0; }
  .decisions .hero-example-details[open] > *:not(summary) { margin-inline: 18px; }
  .decisions .example-decisions { grid-template-columns: 1fr; }
  .finding-figure { padding: var(--s-4); }
  .ninecell-set { grid-template-columns: 1fr; }
  .ninecell td { height: 44px; }
  .hard-item { grid-template-columns: 5.2em minmax(0, 1fr) 3.8em; }
  .hard-tags { grid-column: 1 / -1; }
  .rule-stats div { padding: 0 var(--s-3); }
  .rule-queue { grid-template-columns: 1fr; }
  .door-grid { grid-template-columns: 1fr; }
  .door { min-height: 0; }
}