/* The instrument's visual system. One idea carries the page: a report you can
   audit reads like an authenticated document — serif prose wearing its
   certificate, mono "plates" for provenance and readings, everything else
   quiet paper. Colors are the validated dataviz chrome (light and dark are
   both selected steps, never an automatic flip); the chart roles survive any
   future restyle. Fonts are self-hosted subsets (see fonts/LICENSE.md). */

/* --- faces ---------------------------------------------------------------- */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/literata-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/literata-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/literata-400i-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/literata-400i-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/literata-600-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/literata-600-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ----------------------------------------------------------------
   Chrome and series values are the validated dataviz palette, both modes
   selected steps. The certification tints are sequential-blue steps (minted
   facts) and the neutral gray (verbatim quotes). */

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --ring: rgba(11, 11, 11, 0.1);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --neutral-span: #f0efec;
  --sent-negative: #e34948; /* the diverging pair's red pole */
  --mint-tint: #cde2fb; /* sequential blue 100 — selection wash */
  --accent: #2a78d6;
  --accent-strong: #256abf; /* sequential blue 500 — hover/active */
  /* Button colors get their own tokens: --accent at 4.42:1 fails WCAG AA
     for white text (the Lighthouse contrast finding), and the fix must not
     ride the shared accent token — links, focus rings, and borders use it
     at other contrast relationships. Steps stay in the validated palette. */
  --btn-bg: #256abf; /* sequential blue 500 — 5.4:1 with white text */
  --btn-bg-hover: #104281; /* sequential blue 650 */
  --btn-text: #ffffff;
  /* Aspect-family hues for the library's tags — the ontology's seven
     categories on the validated categorical slots (slot 8, red, stays
     unused: red already means "negative" on the report bars). Light
     column of the palette; validated as a set against this surface. */
  --cat-play: #2a78d6;
  --cat-technical: #eb6834;
  --cat-live-meta: #1baf7a;
  --cat-content-value: #eda100;
  --cat-presentation-world: #e87ba4;
  --cat-player-experience: #008300;
  --cat-narrative: #4a3aa7;
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --ring: rgba(255, 255, 255, 0.1);
    --series-1: #3987e5;
    --series-2: #d95926;
    --neutral-span: #383835;
    --sent-negative: #e66767; /* the diverging pair's red pole, dark step */
    --mint-tint: #104281; /* sequential blue 650 — selection wash */
    --accent: #3987e5;
    --accent-strong: #6da7ec; /* sequential blue 300 — lighter on dark */
    /* Dark mode inverts the button: white text on any passing blue would
       need a step too dark for this theme, so the button goes light with
       dark ink — blue 300 under the page ink reads 7.4:1. */
    --btn-bg: #6da7ec; /* sequential blue 300 */
    --btn-bg-hover: #cde2fb; /* sequential blue 100 */
    --btn-text: #0d0d0d;
    /* The same seven family hues stepped for the dark surface — a selected
       set, never an automatic flip. */
    --cat-play: #3987e5;
    --cat-technical: #d95926;
    --cat-live-meta: #199e70;
    --cat-content-value: #c98500;
    --cat-presentation-world: #d55181;
    --cat-player-experience: #008300;
    --cat-narrative: #9085e9;
  }
}

/* --- document -------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

main {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4.5rem;
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.15rem);
  margin: 0 0 0.35rem;
}

h2 {
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-strong);
}

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

/* Present to assistive technology, absent from the layout — the standard
   clip recipe (display:none would hide it from screen readers too). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background: var(--mint-tint);
}

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

/* --- site chrome ----------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--gridline);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
}

.wordmark:hover {
  color: inherit;
}

.wordmark svg {
  display: block;
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  /* Transparent placeholder so the active underline adds no height shift. */
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.site-nav a:hover {
  color: var(--text-primary);
}

.site-nav a.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.site-footer {
  border-top: 1px solid var(--gridline);
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* 12px at the root size — the phone-legibility floor */
  line-height: 1.7;
  color: var(--text-muted);
  text-align: center;
}

.site-footer p {
  margin: 0.15rem 0;
}

/* --- shared text roles ----------------------------------------------------- */

.provenance {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

.note,
.placeholder,
.axis-note,
.legend-line {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.legend-line {
  color: var(--text-muted);
}

.narrative-notice {
  color: var(--text-secondary);
  font-style: italic;
}

/* --- search page ----------------------------------------------------------- */

.search {
  max-width: 34rem;
  margin: 0 auto;
  padding-top: clamp(2rem, 14vh, 7.5rem);
  text-align: center;
}

.search h1 {
  font-size: clamp(2rem, 6vw, 2.6rem);
  margin-bottom: 0.4rem;
}

.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0 0 1.75rem;
}

.search-form {
  display: flex;
  gap: 0.5rem;
}

.search-form input {
  flex: 1;
  font: inherit;
  font-size: 1.02rem;
  padding: 0.6rem 0.9rem;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--baseline);
  border-radius: 6px;
}

.search-form input:focus-visible {
  outline-offset: 0;
  border-color: var(--accent);
}

.search-form button {
  font: inherit;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.search-form button:hover {
  background: var(--btn-bg-hover);
}

.search-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

/* The recent strip: the newest reports as a teaser row pinned to the bottom
   of the front door, just above the footer — the library's card plate at
   teaser scale, picture and name only; the header row hugs its own divider
   (title left, the way into the full library right), the cards hang below. */
main:has(> .search) {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* the floor between search results and the strip when full */
  padding-bottom: 2.5rem;
}

.recent {
  margin-top: auto; /* the pin: soak the free height above, sit at the bottom */
  padding-top: 0.8rem;
  border-top: 1px solid var(--gridline);
}

.recent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.recent-head h2 {
  font-size: 1.15rem;
  margin: 0;
}

.recent-head a {
  font-size: 0.85rem;
}

.cards.mini {
  padding-top: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.mini .card-body {
  padding: 0.45rem 0.6rem 0.55rem;
}

.mini .card-name {
  font-size: 0.82rem;
}

.status {
  color: var(--text-secondary);
  margin-top: 1.25rem;
}

.results {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  text-align: left;
}

.result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.result:hover {
  border-color: var(--accent);
}

.result img {
  height: 2rem;
  border-radius: 3px;
}

/* The click's outcome, named on the row: "open report" for an analyzed
   game, "analyze" for one whose click starts a run. */
.result-verb {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.result:hover .result-verb {
  color: var(--accent);
}

/* --- report header --------------------------------------------------------- */

.back-link {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.back-link a {
  color: var(--text-muted);
  text-decoration: none;
}

.back-link a:hover {
  color: var(--text-primary);
}

.report-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gridline);
}

.capsule {
  width: 231px;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--ring);
}

.report section {
  margin-top: 2.5rem;
}

/* --- narrative: the certificate made visible ------------------------------- */

.prose {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

/* The certificate stays visible but quiet: no chips — a dotted accent
   underline marks a minted number, serif italic marks a verbatim quote,
   plain upright text is model voice. */
.prose mark,
.legend-line mark {
  color: inherit;
  background: transparent;
}

.span-numeral {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.span-quote {
  font-style: italic;
  text-decoration: underline dotted var(--text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.certificate-legend {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* --- aspect share bars ----------------------------------------------------- */

.aspect-rows {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.aspect-row summary {
  display: grid;
  grid-template-columns: 10rem 1fr max-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  cursor: pointer;
}

.aspect-row summary:hover {
  background: var(--surface-1);
}

.aspect-row summary::-webkit-details-marker {
  display: none;
}

.aspect-name {
  font-weight: 500;
}

.bar-track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 14px;
  padding: 2px;
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 4px;
}

.seg {
  display: block;
  flex: 0 1 auto;
  border-radius: 1.5px;
}

.seg:first-child {
  border-radius: 3px 1.5px 1.5px 3px;
}
.seg:last-child {
  border-radius: 1.5px 3px 3px 1.5px;
}
.seg:only-child {
  border-radius: 3px;
}

.seg-positive {
  background: var(--series-1);
}
.seg-split {
  background: var(--baseline);
}
.seg-negative {
  background: var(--sent-negative);
}

.share-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.aspect-detail {
  margin: 0.5rem 0 1rem 10.75rem;
}

.sentiment-line {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.5rem;
}

.quotes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  padding: 0.4rem 0.85rem;
  border-left: 3px solid var(--baseline);
}

.quote-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.85rem;
}

.aspect-tail {
  margin-top: 0.6rem;
}

.aspect-tail > summary {
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

.aspect-tail[open] > summary {
  margin-bottom: 0.4rem;
}

/* --- candidate stratum ----------------------------------------------------- */

.candidates {
  margin-top: 1.75rem;
}

.uncalibrated-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border: 1px solid var(--baseline);
  border-radius: 3px;
  padding: 1px 6px;
  vertical-align: middle;
}

.candidate-rows {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.candidate-rows li {
  font-size: 0.85rem;
  padding: 0.15rem 0.65rem;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 999px;
}

.candidate-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- timeline -------------------------------------------------------------- */

.timeline-chart {
  width: 100%;
  height: auto;
  margin-top: 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 4px;
}

.volume-bar {
  fill: var(--series-1);
}

.plot-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.share-line {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.share-dot {
  fill: var(--series-1);
}

.share-dot.low-sample {
  opacity: 0.35;
}

.midline {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 5 3;
}

.year-grid,
.scale-rule {
  stroke: var(--gridline);
  stroke-width: 1;
}

.scale-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: end;
  dominant-baseline: middle;
}

.hover-strip {
  fill: transparent;
}

.hover-strip:hover {
  fill: var(--baseline);
  fill-opacity: 0.18;
}

.valve-span {
  fill: var(--neutral-span);
}

.baseline {
  stroke: var(--baseline);
  stroke-width: 1;
}

.tick {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: middle;
}

.timeline-data {
  margin-top: 0.75rem;
}

.timeline-data > summary {
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}

.timeline-data[open] > summary {
  margin-bottom: 0.4rem;
}

.timeline-table tbody th {
  /* row headers name a period in body text, not column-header capitals */
  font-family: inherit;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}

.timeline-table caption {
  caption-side: top;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0 0.6rem 0.4rem;
}

.chart-legend {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 4px;
}

.key-valve {
  background: var(--neutral-span);
  border: 1px solid var(--gridline);
}
.key-positive {
  background: var(--series-1);
}
.key-split {
  background: var(--baseline);
}
.key-negative {
  background: var(--sent-negative);
}

/* --- trust panel: the readings plate --------------------------------------- */

.trust-panel {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
}

.trust-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.trust-panel summary::-webkit-details-marker {
  display: none;
}

.trust-panel h2 {
  font-size: 1.15rem;
  margin: 0;
}

.toggle-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  border: 1px solid var(--baseline);
  border-radius: 50%;
}

.trust-panel summary:hover .toggle-badge {
  color: var(--accent);
  border-color: var(--accent);
}

.trust-panel[open] summary {
  margin-bottom: 0.9rem;
}

.trust-panel dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.5rem;
  margin: 0;
}

.trust-panel dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-top: 0.15rem;
}

.trust-panel dd {
  margin: 0;
  font-size: 0.9rem;
}

.trust-panel .axis-note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
}

/* --- live narration page --------------------------------------------------- */

.stages {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.45rem;
}

.stage-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.stage-row::before {
  content: '';
}

.stage-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.stage-name::before {
  display: inline-block;
  width: 1.2rem;
  color: var(--text-muted);
}

.stage-pending .stage-name {
  color: var(--text-muted);
}
.stage-pending .stage-name::before {
  content: '○';
}

.stage-active .stage-name {
  font-weight: 500;
}
.stage-active .stage-name::before {
  content: '●';
  color: var(--series-1);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.stage-done .stage-name::before {
  content: '✓';
  color: var(--text-secondary);
}

.stage-warn .stage-name::before {
  content: '!';
  font-weight: 700;
}

.stage-message {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.live-log {
  margin-top: 1.75rem;
}

.live-log summary {
  color: var(--text-secondary);
  font-size: 0.88rem;
  cursor: pointer;
}

.live-log ul {
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 6px;
}

/* --- narrow screens -------------------------------------------------------- */

@media (max-width: 40rem) {
  .report-header {
    grid-template-columns: 1fr;
  }

  .capsule {
    order: -1;
  }

  .aspect-row summary {
    grid-template-columns: 1fr max-content;
  }

  .aspect-row .aspect-name {
    grid-row: 1;
    grid-column: 1;
  }

  .aspect-row .share-label {
    grid-row: 1;
    grid-column: 2;
  }

  .aspect-row .bar-track {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .aspect-detail {
    margin-left: 0;
  }

  .stage-row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .stage-message {
    padding-left: 1.2rem;
  }

  .trust-panel dl {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .trust-panel dt {
    margin-top: 0.6rem;
  }
}

/* --- reports index: the library of published analyses -----------------------
   Cards borrow the search result's grammar (surface plate, gridline border,
   accent border on hover) at gallery scale: Steam's 460×215 header art on
   top, the serif name, the mono provenance line, and the report's own
   leading aspects as quiet tags. */

.library .tagline {
  font-style: normal;
  font-size: 0.95rem;
}

.cards {
  list-style: none;
  padding: 1.5rem 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 120ms ease;
}

.card:hover {
  color: inherit;
  border-color: var(--accent);
}

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 460 / 215; /* a missing capsule keeps the slot, not the layout */
  object-fit: cover;
  background: var(--neutral-span);
  border-bottom: 1px solid var(--gridline);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem 0.85rem;
}

.card-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
}

.card:hover .card-name {
  color: var(--accent-strong);
}

.card .provenance {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.card-tags span {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.05rem 0.55rem;
  background: var(--page);
  border: 1px solid var(--gridline);
  border-radius: 999px;
}

/* Family color as a muted wash — tinted ground and border, ink stays ink
   (text never wears a series color). Color narrows, the tag's text decides;
   an unmapped family keeps the neutral pill above. */
.card-tags span[data-cat] {
  background: color-mix(
    in oklab,
    var(--tag-hue, var(--gridline)) 11%,
    var(--surface-1)
  );
  border-color: color-mix(
    in oklab,
    var(--tag-hue, var(--gridline)) 42%,
    var(--surface-1)
  );
}

[data-cat='play'] {
  --tag-hue: var(--cat-play);
}
[data-cat='narrative'] {
  --tag-hue: var(--cat-narrative);
}
[data-cat='presentation_world'] {
  --tag-hue: var(--cat-presentation-world);
}
[data-cat='technical'] {
  --tag-hue: var(--cat-technical);
}
[data-cat='content_value'] {
  --tag-hue: var(--cat-content-value);
}
[data-cat='live_meta'] {
  --tag-hue: var(--cat-live-meta);
}
[data-cat='player_experience'] {
  --tag-hue: var(--cat-player-experience);
}

/* --- ops page: the observability surface ----------------------------------- */

.ops h1 {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

.ops .tagline {
  max-width: 46rem;
}

.ops-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.4rem 0 0.8rem;
}

.ops-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  padding: 0.9rem 1rem;
}

.ops-stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.ops-stat-value {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.ops-stat-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* The one always-visible policy line — the caps a visitor is subject to;
   everything else methodological lives behind the about disclosure. */
.ops-limits {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.ops section {
  margin: 2rem 0;
}

.ops h2 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

/* The data-table grid, shared by the ops tables and the report timeline's
   table alternative (the same numbers-in-columns look, one home). */
.ops-table-wrap,
.timeline-table-wrap {
  overflow-x: auto;
}

.ops-table,
.timeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.ops-table th,
.timeline-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: right;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--baseline);
  white-space: nowrap;
}

.ops-table td,
.timeline-table td {
  text-align: right;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}

.ops-table th.text,
.ops-table td.text,
.timeline-table th.text,
.timeline-table td.text {
  text-align: left;
}

.ops-table tbody tr:hover td,
.timeline-table tbody tr:hover td {
  background: var(--surface-1);
}

/* The methodology fine print, collapsed by default — the page leads with
   numbers; the accounting semantics stay one click away, never deleted. */
.ops-about {
  margin: 2.5rem 0 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ops-about summary {
  cursor: pointer;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.ops-about summary:hover {
  color: var(--text-primary);
}

.ops-about ul {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  max-width: 46rem;
}