/* css/modules/brief.css: the Gold Brief pages. Macrostructure: the parchment document (one bright .paper surface on the
 * dark desk). Tokens only. Motion here is CSS-side only for the one page-load moment (rule draws, prose appears in one
 * step) and the 150ms archive crossfade; js/modules/brief.js drives counters and the route draw via js/core/motion.js. */

.brief { padding: var(--space-6) 0 var(--space-16); }
.brief-paper { max-width: 72ch; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-6); overflow-wrap: anywhere; min-width: 0; }
.brief-paper h1 { font-size: var(--text-display-s); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "wght" var(--display-wght), "wdth" var(--display-wdth); margin: var(--space-2) 0 var(--space-3); }
.brief-paper h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-2); line-height: 1.2; }
.brief-paper h3 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); color: var(--ink-soft); }
.brief-paper p { max-width: var(--measure); }
.brief-paper .lede { font-size: var(--text-lg); line-height: 1.5; margin: var(--space-5) 0; }
.brief-paper .prose { margin: var(--space-2) 0 var(--space-4); }
.brief-paper .stamp { color: var(--ink-soft); }
.brief-paper .stamp .chip { vertical-align: baseline; }
/* Version chips on parchment: the app-background chip tokens are ghosts on cream, so ink-dark variants, >= 4.5:1 against --paper-ledger */
.brief-paper .chip-forever, .paper .chip-forever { color: oklch(0.40 0.09 80); background: oklch(0.40 0.09 80 / 0.12); }
.brief-paper .chip-retail, .paper .chip-retail { color: oklch(0.40 0.16 300); background: oklch(0.40 0.16 300 / 0.12); }
.brief-paper .chip-est, .paper .chip-est { color: var(--ink-soft); }
.brief-head .provenance { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); line-height: 1.7; }
.brief-head .disclosure { margin-top: var(--space-3); font-size: var(--text-sm); }

/* The ledger rule under the headline: visible by default (JS off), redrawn by the one page-load moment when JS is live */
.brief .rule-draw { height: 2px; transform: scaleX(1); transition: none; }
.brief.is-live .rule-draw { transform: scaleX(0); transition: transform 500ms var(--ease-out); }
.brief.is-live.is-shown .rule-draw { transform: scaleX(1); }
.brief.is-live .brief-body, .brief.is-live .brief-foot { opacity: 0; transition: opacity var(--dur-base) var(--ease-out) 420ms; }
.brief.is-live.is-shown .brief-body, .brief.is-live.is-shown .brief-foot { opacity: 1; }

/* Coins on parchment: ink for gold and silver segments, copper stays copper */
.brief-paper .gold .coin-g { color: var(--ink); }
.brief-paper .gold .coin-s { color: var(--ink-soft); }
.brief-paper .gold .coin-c { color: var(--coin-copper); }
.brief-paper .gold.neg, .brief-paper .gold.neg > span { color: var(--color-ruby); }
.brief-paper .q1 { color: var(--ink); }
.brief-paper .q0 { color: var(--ink-soft); }
.brief-paper .tier-silver { color: var(--ink-soft); }
.brief-paper .tier-gold { color: var(--color-gold-dim); }
.brief-paper .delta-up { color: var(--color-emerald); }
.brief-paper .delta-down { color: var(--color-ruby); }
.brief-paper .icon { width: 24px; height: 24px; border-radius: var(--radius-control); vertical-align: middle; box-shadow: 0 0 0 1px var(--color-gold-dim); background: var(--ink); }

/* Moves: a numbered ledger (true sequence: check them in order) */
.moves { list-style: none; counter-reset: move; padding: 0; margin: var(--space-3) 0 0; }
.moves .ledger-row { grid-template-columns: minmax(0, 1fr); counter-increment: move; padding-left: var(--space-8); border-color: var(--paper-ledger-line); }
.moves .ledger-row::after { content: counter(move); position: absolute; left: var(--space-3); top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.moves .ledger-row p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.moves .ledger-row:hover { transform: none; }

/* Facts tables */
table.facts { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-4); font-size: var(--text-sm); }
table.facts th, table.facts td { border-bottom: 1px solid var(--paper-ledger-line); padding: var(--space-2) var(--space-2); }
table.facts th { color: var(--ink-soft); font-weight: 600; }
table.facts td:first-child { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
table.facts td:first-child a { color: var(--ink); text-decoration-color: var(--color-gold-dim); }
table.facts .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  table.facts tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-color: var(--paper-ledger-line); }
  table.facts td:first-child { grid-column: 1 / -1; }
  table.facts td[data-label]::before { color: var(--ink-soft); display: block; }
  table.facts td.num { text-align: left; }
}
.brief-section .btn-quiet { color: var(--ink); border: 1px solid var(--paper-ledger-line); background: transparent; padding: 0 var(--space-4); }
.brief-section .btn-quiet:hover { background: var(--paper-ledger-line); color: var(--ink); }

/* Coach notes ledger */
.brief-notes .ledger-row { grid-template-columns: minmax(0, 1fr); border-color: var(--paper-ledger-line); line-height: 1.5; }
.brief-notes .ledger-row:hover { transform: none; }

/* Route of the day: the map breaks out of the paper gutters and is never cropped */
.route-figure { margin: var(--space-3) calc(-1 * var(--space-6)) 0; }
.route-stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-app); }
.route-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.route-stage .route-canvas-host { position: absolute; inset: 0; }
.route-stage .route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-path { fill: none; stroke: var(--color-gold); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; opacity: 0.95; }
.route-stop { fill: var(--paper-ledger); stroke: var(--color-gold); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.route-pen { fill: var(--color-gold); }
.brief.is-live .route-stop { transform: scale(0); transition: transform var(--dur-base) var(--ease-out); }
.brief.is-live .route-stop.is-hit { transform: scale(1); }
.route-figure figcaption { padding: var(--space-3) var(--space-6) 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: none; }
.route-figure figcaption strong { color: var(--ink); }
.route-figure figcaption a { color: var(--ink); }
.route-stops { margin: var(--space-2) var(--space-6) 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); columns: 2; column-gap: var(--space-6); }
.route-stops li { break-inside: avoid; padding: 2px 0; transition: color var(--dur-fast) var(--ease-out); }
.route-stops li.is-hit { color: var(--ink); font-weight: 600; }
@media (max-width: 639px) { .route-stops { columns: 1; } }

.changes { padding-left: var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); }
.brief-foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--paper-ledger-line); }
.brief-foot .disclosure { margin-top: var(--space-2); font-size: var(--text-sm); }

/* Archive: ledger rows on the dark desk under the paper */
.brief-archive { max-width: 72ch; margin: var(--space-12) auto 0; }
.brief-archive h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.archive-row { text-decoration: none; }
.archive-row[aria-current="page"] { background: var(--color-gold-bg); }
.archive-row time { color: var(--text-primary); }
.archive-row .muted { display: block; font-size: var(--text-sm); }

/* Archive inline load: 150ms crossfade (opacity only) */
.brief-paper.is-swapping { opacity: 0; transition: opacity var(--dur-fast) linear; }
.brief-paper { transition: opacity var(--dur-fast) linear; }

@media (prefers-reduced-motion: reduce) {
  .brief.is-live .rule-draw, .brief.is-live .brief-body, .brief.is-live .brief-foot { transform: none; opacity: 1; transition: none; }
  .brief.is-live .route-stop { transform: none; transition: none; }
  .route-pen { display: none; }
}

@media (max-width: 639px) {
  .brief { padding-top: var(--space-4); }
  .brief-paper { padding: var(--space-6) var(--space-4) var(--space-4); }
  .route-figure { margin-inline: calc(-1 * var(--space-4)); }
  .route-figure figcaption, .route-stops { padding-inline: var(--space-4); margin-inline: 0; }
  .route-stops { padding-left: var(--space-8); }
}