/* ============================================================================
   Totetape — design-tokens.css
   Public surface visual system, v1.0 · 2026-08-10
   Single source of truth. Imported by _layout.php AND pitch/index.php.
   Zero JS. Zero external requests. Self-hosted variable font only.

   PORT NOTE (slt-horses, DH #618): the handoff shipped font URLs as
   `/assets/brand/fonts/...` — host-absolute. That resolves on totetape.com
   (document root = /var/www/html/ponies) but 404s on murphyryan.com/ponies/.
   CSS cannot call ponyBase(), so the URLs below are RELATIVE TO THIS FILE,
   which resolves correctly on both hosts with no PHP involvement.
   Same rule as DESIGN.md §6 "root-relative paths only", solved for a static asset.
   ============================================================================ */

@font-face {
  font-family: "Totetape Text";           /* IBM Plex Sans variable, wght 100-700 */
  src: url("brand/fonts/ibm-plex-sans-latin.woff") format("woff-variations");
  font-weight: 100 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2032-2044, U+2212;
}
@font-face {
  font-family: "Totetape Display";        /* Newsreader variable, opsz 6-72 + wght */
  src: url("brand/fonts/newsreader-latin.woff") format("woff-variations");
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2032-2044, U+2212;
}

:root {
  /* --- Colour: exactly three system colours -----------------------------
     Paper ground, near-black ink, ONE chroma. The chroma is reserved for the
     confidence interval range bar and does no other job anywhere on the site.
     Not links. Not borders. Not the eyebrow. Not the equity line.
     Values copied from BRAND.md v1.0 — do not adjust to taste. */
  --paper:      #F2EBDD;
  --paper-2:    #E9E0CE;
  --ink:        #171713;
  --ink-2:      #665F54;   /* demoted text. 6.4:1 on paper */
  --rule:       #D2C8B4;
  --rule-2:     #A79C88;
  --chroma:     #185FC3;   /* THE confidence interval. 9.4:1 on paper */

  /* Semantic. Text weight only — never a fill, a border, or a badge chip. */
  --flag:       #9A2A17;

  --face-text:    "Totetape Text", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --face-display: "Totetape Display", Newsreader, Georgia, "Times New Roman", serif;

  /* Fluid steps resolve against the page container, not the viewport. */
  --t-figure-xl:  clamp(66px, 14cqw, 178px);
  --t-figure-lg:  clamp(52px, 10cqw, 124px);
  --t-display-lg: clamp(38px, 7.2cqw, 90px);
  --t-display-md: clamp(32px, 4.6cqw, 60px);
  --t-display-sm: clamp(24px, 3.9cqw, 48px);
  --t-lede:       clamp(15px, 1.6cqw, 18px);
  --t-body:         15px;
  --t-table:        14px;
  --t-table-2:      13px;
  --t-label:        11px;
  --t-head:         10px;
  --t-foot:       11.5px;

  --lh-tight: 0.82;  --lh-head: 1.02;  --lh-body: 1.6;  --lh-table: 1.3;
  --track-label: .10em;
  --track-head:  .09em;
  --track-figure: -0.04em;

  --rule-section: 1.5px;
  --rule-head:      1px;
  --rule-row:       1px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:34px; --s-7:44px; --s-8:56px; --s-9:80px;

  --shell: min(1240px, 100% - 40px);
  --measure: 64ch;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Re-derived, not inverted. 8.6:1 on the dark ground. */
    --paper:   #121210;
    --paper-2: #1A1916;
    --ink:     #EDE5D5;
    --ink-2:   #97907F;
    --rule:    #302C26;
    --rule-2:  #4A443B;
    --chroma:  #5B93EA;
    --flag:    #DE8873;
  }
}

/* --- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page { container-type: inline-size; }
.shell { width: var(--shell); margin-inline: auto; }

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Type roles --------------------------------------------------------- */
.display  { font-family: var(--face-display); font-variation-settings: "opsz" 60; }
.figure-xl{ font-family: var(--face-display); font-variation-settings: "opsz" 72;
            font-size: var(--t-figure-xl); font-weight: 500;
            line-height: var(--lh-tight); letter-spacing: var(--track-figure); }
.figure-lg{ font-family: var(--face-display); font-variation-settings: "opsz" 72;
            font-size: var(--t-figure-lg); font-weight: 500;
            line-height: var(--lh-tight); letter-spacing: var(--track-figure); }
.label    { font-size: var(--t-label); letter-spacing: var(--track-label);
            text-transform: uppercase; line-height: 1.4; }
.demoted  { color: var(--ink-2); }

.num      { letter-spacing: 0; }
.num-tight{ font-size: 11.5px; letter-spacing: .035em; }
.k        { font-weight: 600; }
.interval-range { fill: var(--chroma); }

/* --- Rules, not boxes ---------------------------------------------------
   There is no .panel, no .card, no .cohort box in this system. */
.section-rule { border-top: var(--rule-section) solid var(--ink); padding-top: 7px; }
.row          { border-bottom: var(--rule-row) solid var(--rule); }
.col-head     { border-bottom: var(--rule-head) solid var(--ink);
                font-size: var(--t-head); font-weight: 600;
                letter-spacing: var(--track-head); text-transform: uppercase;
                color: var(--ink-2); }

/* --- Masthead ----------------------------------------------------------- */
.masthead      { padding: 26px 0 0; }
.masthead-top  { display: flex; flex-wrap: wrap; align-items: flex-end;
                 justify-content: space-between; gap: 12px 24px; }
.masthead-top nav { display: flex; gap: 18px; font-size: 12px; letter-spacing: .05em;
                 color: var(--rule-2); padding-bottom: 5px; }
.masthead-top nav a { color: var(--rule-2); }
.masthead-top nav a:hover, .masthead-top nav a[aria-current] { color: var(--ink); }
.lockup        { display: block; height: clamp(30px, 4.1cqw, 44px); width: auto; }
.lockup-dark   { display: none; }
.edition       { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
                 border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
                 margin-top: 10px; padding: 6px 0;
                 font-size: 10.5px; line-height: 1.4; letter-spacing: .11em;
                 text-transform: uppercase; color: var(--ink-2); }
.edition .vol  { color: var(--ink); }
.edition .tail { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .lockup-paper { display: none; }
  .lockup-dark  { display: block; }
}

/* --- The tape band (DEVICE 1) -------------------------------------------
   The only element permitted to violate the shell. Exactly once per page. */
.tape { overflow: hidden; width: 100%;
        border-bottom: var(--rule-head) solid var(--ink); padding: 9px 0;
        margin-bottom: 6px; }
.tape > * { white-space: nowrap; margin-left: -46px;
            font-size: 12px; font-weight: 500;
            letter-spacing: .035em; color: var(--ink); }
.tape span { padding-right: 26px; }

/* --- Occlusion (DEVICE 3) -----------------------------------------------
   Used exactly once, on the House Portfolio. The equity curve is painted
   behind the figures and is NOT knocked out by them. Do not add a halo,
   a background, or a stroke to the numerals to "fix" the crossing. */
.occlude       { position: relative; padding: 26px 0 10px; min-height: 190px; }
.occlude svg   { position: absolute; inset: 14px 0 auto 0; width: 100%;
                 height: clamp(92px, 17cqw, 210px); overflow: visible; }
.occlude .fig  { position: relative; }

/* --- Rows: wrapping flex lines, never <table> cells ----------------------
   A narrow viewport produces a continuation line (past-performance
   convention) rather than a horizontal scrollbar. overflow-x is never
   used to solve a layout problem on this site. */
.rec-row { display: flex; flex-wrap: wrap; align-items: baseline;
           gap: 0 14px; padding: 10px 0; }
.c-rank  { flex: 0 0 30px; }
.c-name  { flex: 1 1 150px; min-width: 0; }
.c-ret   { flex: 0 0 96px;  text-align: right; }
.c-ci    { flex: 0 0 116px; text-align: right; }
.c-iv    { flex: 0 0 100px; }
.c-n     { flex: 0 0 52px;  text-align: right; }
.c-move  { flex: 0 0 34px;  text-align: right; }

.cont { flex: 1 1 100%; padding-left: 44px; font-size: var(--t-table-2);
        color: var(--ink-2); }

@media (max-width: 560px) { .col-head-wide { display: none; } }
@media (min-width: 561px) { .col-head-narrow { display: none; } }

/* --- Interior page hierarchy ------------------------------------------- */
.page-hero { padding: clamp(34px, 7cqw, 82px) 0 var(--s-8); }
.page-kicker { color: var(--ink-2); margin-bottom: var(--s-3); }
.page-title {
  max-width: 18ch; margin: 0;
  font-family: var(--face-display); font-variation-settings: "opsz" 60;
  font-size: var(--t-display-md); font-weight: 500;
  line-height: var(--lh-head); letter-spacing: -.035em;
}
.page-lede {
  max-width: var(--measure); margin: var(--s-4) 0 0;
  font-family: var(--face-display); font-variation-settings: "opsz" 34;
  font-size: var(--t-lede); line-height: 1.45;
}
.hero-rule {
  max-width: 25ch; margin: var(--s-4) 0 0;
  font-family: var(--face-display); font-variation-settings: "opsz" 48;
  font-size: var(--t-display-sm); line-height: 1.08; letter-spacing: -.025em;
}
.strategy-rule {
  max-width: 24ch; margin: 0 0 var(--s-6);
  font-family: var(--face-display); font-variation-settings: "opsz" 60;
  font-size: var(--t-display-lg); font-weight: 400; line-height: .98; letter-spacing: -.035em;
}
.strategy-name { max-width: 24ch; font-size: var(--t-display-sm); color: var(--ink-2); }
.section { padding: var(--s-7) 0; border-top: var(--rule-section) solid var(--ink); }
.section > h2 {
  margin: 0 0 var(--s-5); font-size: var(--t-label); line-height: 1.4;
  letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 500;
}
.section h3 { margin: 0 0 var(--s-3); font: 500 var(--t-display-sm)/1.08 var(--face-display); }
.section p { max-width: var(--measure); }
.section p:first-child { margin-top: 0; }
.section p:last-child { margin-bottom: 0; }
.reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--s-8); }
.reading-grid > * { border-top: 1px solid var(--rule); padding: var(--s-4) 0 var(--s-5); }
.control-record { padding-top: var(--s-4); }
.control-figure {
  font-family: var(--face-display); font-variation-settings: "opsz" 72;
  font-size: var(--t-figure-lg); font-weight: 500; line-height: var(--lh-tight);
  letter-spacing: var(--track-figure); margin: var(--s-3) 0;
}
.record-meta { color: var(--ink-2); font-size: var(--t-table-2); }
.procedure { counter-reset: proof-step; margin-top: var(--s-5); }
.proof-step { counter-increment: proof-step; display: grid; grid-template-columns: 34px 1fr;
              gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.proof-step::before { content: counter(proof-step); font-family: var(--face-display);
                      font-size: 22px; line-height: 1; }
code, .hash {
  font-family: var(--face-display); font-variation-settings: "opsz" 12;
  font-size: .96em; overflow-wrap: anywhere; color: var(--ink);
}

/* --- Strategy records -------------------------------------------------- */
.retired-line { color: var(--flag); border-top: 1px solid var(--ink);
                border-bottom: 1px solid var(--ink); padding: 9px 0; margin-bottom: var(--s-5); }
.evidence-row { display: flex; flex-wrap: wrap; align-items: baseline;
                gap: 6px 18px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.e-window { flex: 0 0 72px; }
.e-rank { flex: 0 0 74px; }
.e-return { flex: 0 0 94px; text-align: right; }
.e-ci { flex: 1 1 150px; text-align: right; color: var(--ink-2); }
.e-interval { flex: 0 0 100px; }
.e-n { flex: 0 0 54px; text-align: right; color: var(--ink-2); }
.equity-figure { height: clamp(100px, 17cqw, 190px); }
.equity-caption { margin-top: 7px; color: var(--ink-2); font-size: var(--t-foot); }
.kv-row { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr);
          gap: var(--s-5); padding: 9px 0; border-bottom: 1px solid var(--rule); }
.kv-key { color: var(--ink-2); font-size: var(--t-table-2); overflow-wrap: anywhere; }
.kv-value { font-family: var(--face-display); font-variation-settings: "opsz" 14; overflow-wrap: anywhere; }
.bet-row { display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: baseline;
           padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-table-2); }
.bet-race, .bet-strategy { flex: 1 1 170px; }
.bet-kind { flex: 1 1 150px; }
.bet-decision { flex: 1 1 145px; color: var(--ink-2); }
.bet-odds { flex: 0 0 112px; text-align: right; }
.bet-result { flex: 0 0 74px; text-align: right; }
.bet-return { flex: 0 0 66px; text-align: right; }
.lineage-row { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 10px 0;
               border-bottom: 1px solid var(--rule); }
.status-text { color: var(--ink-2); font-size: var(--t-table-2); text-transform: lowercase; }
.status-text.retired, .dq { color: var(--flag); }

/* --- Race record ------------------------------------------------------- */
.finish-head, .finish-row { display: grid; grid-template-columns: 58px 58px minmax(130px,1fr) 90px;
                            gap: var(--s-3); align-items: baseline; }
.finish-head { padding: 8px 0; border-bottom: 1px solid var(--ink); color: var(--ink-2);
               font-size: var(--t-head); letter-spacing: var(--track-head); text-transform: uppercase; }
.finish-row { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.finish-pos { font-family: var(--face-display); font-size: 21px; }
.finish-odds { text-align: right; }

/* --- Weekly notes: an annotated race sheet ----------------------------- */
.weekly-module { margin-top: var(--s-8); padding-top: var(--s-3); border-top: var(--rule-section) solid var(--ink); }
.weekly-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
                  gap: var(--s-3) var(--s-6); }
.weekly-name { margin: 0 0 var(--s-2); font-weight: 600; }
.weekly-title { max-width: 21ch; margin: 0; font: 500 var(--t-display-md)/1.02 var(--face-display);
                font-variation-settings: "opsz" 60; letter-spacing: -.035em; }
.weekly-period { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-table-2); }
.weekly-dek { max-width: var(--measure); margin: var(--s-3) 0 var(--s-6);
              font-family: var(--face-display); font-size: var(--t-lede); line-height: 1.4; }
.weekly-sheet { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(250px,.8fr); }
.weekly-story { min-width: 0; }
.weekly-lead { padding-right: var(--s-7); }
.weekly-rail { border-left: 1px solid var(--ink); padding-left: var(--s-5); }
.weekly-secondary { padding: 0 0 var(--s-5); }
.weekly-secondary + .weekly-secondary { padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.weekly-slot { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--t-table-2); }
.weekly-story h3 { max-width: 25ch; margin: 0; font: 500 var(--t-display-sm)/1.08 var(--face-display);
                   font-variation-settings: "opsz" 48; }
.weekly-lead h3 { max-width: 19ch; font-size: var(--t-display-md); }
.weekly-body { max-width: 64ch; margin: var(--s-3) 0 var(--s-4); }
.weekly-evidence { padding: var(--s-3) 0 0; border-top: 1px solid var(--rule);
                   color: var(--ink-2); font-size: var(--t-foot); }
.weekly-evidence p { max-width: 72ch; margin: 0 0 var(--s-2); }
.weekly-evidence p:last-child { margin-bottom: 0; }
.weekly-evidence a { color: var(--ink); }
.weekly-caveat { margin: var(--s-5) 0 0; padding: var(--s-3) 0;
                 border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
                 max-width: 92ch; font-size: var(--t-table-2); }
.weekly-more { margin: var(--s-4) 0 0; font-weight: 600; }
.weekly-method { margin-top: var(--s-7); padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.weekly-method h2, .weekly-archive h2 { margin: 0 0 var(--s-4); font: 500 var(--t-display-sm)/1.08 var(--face-display); }
.weekly-method p { max-width: var(--measure); }
.weekly-full { margin-top: var(--s-8); }
.weekly-empty { min-height: 40vh; padding: var(--s-9) 0; display: flex; flex-direction: column; justify-content: center; }
.weekly-empty h1 { max-width: 15ch; margin: 0; font: 500 var(--t-display-md)/1.02 var(--face-display); }
.weekly-empty p:last-child { max-width: var(--measure); margin-top: var(--s-4); color: var(--ink-2); }
.weekly-archive { margin-top: var(--s-9); padding-top: var(--s-3); border-top: var(--rule-section) solid var(--ink); }
.weekly-archive-list { border-top: 1px solid var(--ink); }
.weekly-archive-row { display: flex; justify-content: space-between; gap: var(--s-4);
                      padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.weekly-archive-row span { color: var(--ink-2); font-size: var(--t-table-2); }

/* --- Pitch dossier ----------------------------------------------------- */
.pitch-hero .page-title { max-width: 17ch; font-size: var(--t-display-lg); }
.pitch-section { display: grid; grid-template-columns: 54px minmax(150px, 190px) minmax(0,1fr);
                 gap: var(--s-5); padding: var(--s-7) 0; border-top: 1px solid var(--ink); }
.pitch-no { font-family: var(--face-display); font-size: 19px; }
.pitch-section > h2 { margin: 0; font-size: var(--t-label); font-weight: 500;
                      letter-spacing: var(--track-label); text-transform: uppercase; }
.pitch-section h3 { margin: 0 0 var(--s-3); font: 500 22px/1.15 var(--face-display); }
.pitch-section p { max-width: 72ch; }
.pitch-list, .metric-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.pitch-item, .metric { padding: var(--s-4) var(--s-5) var(--s-5) 0;
                       border-top: 1px solid var(--rule); }
.pitch-item:nth-child(even), .metric:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid var(--rule); }
.metric strong { display:block; margin-top: 6px; font:500 29px/1 var(--face-display); }
.metric span, .metric em { display:block; color:var(--ink-2); font-size:var(--t-foot); font-style:normal; }
.aside-note { margin: var(--s-5) 0 0; padding: var(--s-4) 0;
              border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.record-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--t-table-2); }
.record-table th, .record-table td { padding: 9px 8px; border-bottom: 1px solid var(--rule);
                                     text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.record-table th { color: var(--ink-2); font-size: var(--t-head);
                   letter-spacing: var(--track-head); text-transform: uppercase; }
.pitch-section ul { margin: 0; padding-left: 20px; }
.pitch-section li { margin-bottom: 9px; }
.decision-row { padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.decision-q { font: 500 20px/1.2 var(--face-display); }
.decision-rec { color: var(--ink-2); font-size: var(--t-table-2); margin-top: 5px; }
.pitch-source { padding: var(--s-5) 0 0; color: var(--ink-2); font-size: var(--t-foot); }

/* --- Passphrase gate and error states --------------------------------- */
.gate-screen { min-height: 62vh; display: grid; align-items: center; padding: var(--s-8) 0; }
.gate-copy { max-width: 60ch; }
.gate-form { max-width: 620px; margin-top: var(--s-7); border-top: 1px solid var(--ink); padding-top: 9px; }
.gate-form label { display:block; color:var(--ink-2); font-size:var(--t-label);
                   letter-spacing:var(--track-label); text-transform:uppercase; }
.gate-form input[type=password] {
  display:block; width:100%; margin-top:var(--s-3); padding: 7px 0;
  border:0; border-bottom:2px solid var(--ink); border-radius:0;
  background:transparent; color:var(--ink);
  font:500 clamp(30px,6cqw,48px)/1.1 var(--face-display);
}
.gate-form input[type=password]:focus { outline:0; border-bottom-width:4px; }
.gate-form button {
  margin-top:var(--s-4); padding:8px 0; border:0; border-bottom:1px solid var(--ink);
  background:transparent; color:var(--ink); font:600 var(--t-table-2)/1 var(--face-text);
  letter-spacing:var(--track-label); text-transform:uppercase; cursor:pointer;
}
.gate-error { margin-top:var(--s-4); color:var(--flag); }
.not-found { min-height: 48vh; padding: var(--s-9) 0; display:flex; flex-direction:column; justify-content:center; }
.not-found .page-title { max-width: 13ch; }

/* --- Footer ------------------------------------------------------------- */
.site-foot { border-top: var(--rule-section) solid var(--ink);
             margin-top: var(--s-9); padding: 14px 0 44px;
             font-size: var(--t-foot); color: var(--ink); }

@media print {
  :root { --paper:#fff; --ink:#000; --ink-2:#444; --rule:#bbb; --chroma:#185FC3; }
  .tape { display: none; }
}

@media (max-width: 720px) {
  .reading-grid, .pitch-list, .metric-grid { grid-template-columns: 1fr; }
  .reading-grid > *, .pitch-item, .metric { padding-inline: 0; }
  .pitch-item:nth-child(even), .metric:nth-child(even) { border-left: 0; padding-left: 0; }
  .pitch-section { grid-template-columns: 34px minmax(0,1fr); gap: var(--s-3); }
  .pitch-section > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .weekly-sheet { grid-template-columns: 1fr; }
  .weekly-lead { padding-right: 0; padding-bottom: var(--s-6); }
  .weekly-rail { border-left: 0; border-top: 1px solid var(--ink); padding: var(--s-5) 0 0; }
  .weekly-title, .weekly-lead h3 { max-width: 22ch; }
}

@media (max-width: 560px) {
  :root { --shell:min(100% - 24px, 1240px); }
  .masthead { padding-top:16px; }
  .edition .tail { flex-basis:100%; margin-left:0; }
  .page-hero { padding-top:var(--s-7); }
  .evidence-row { gap:4px 12px; }
  .e-window { flex-basis:62px; } .e-rank { flex-basis:58px; }
  .e-return { flex-basis:80px; margin-left:auto; }
  .e-ci { flex:1 1 calc(100% - 122px); text-align:left; padding-left:74px; }
  .e-interval { margin-left:74px; } .e-n { margin-left:auto; }
  .bet-odds, .bet-result, .bet-return { text-align:left; flex:1 1 84px; }
  .finish-head, .finish-row { grid-template-columns:42px 42px minmax(100px,1fr) 62px; gap:8px; }
  .record-table table { font-size:11px; }
  .record-table th, .record-table td { padding:7px 4px; }
}

/* ─────────────────────────────────────────────────────────────
   BRAND KIT v1.0 CONTRACT — values above are copied from
   BRAND.md, not derived. Do not adjust them to taste.

   paper #F2EBDD · ink #171713 · muted ink #665F54 · CI #185FC3

   The CI signal colors the confidence-interval range bar and
   nothing else: not links, headings, borders, badges, the mark,
   or decoration. The dark counterpart re-derives inside the same
   hue family (#5B93EA) rather than inverting the page.

   WORDMARK / MARK / LOCKUP are supplied artwork. Never retype
   "Totetape" in the display face to fake the wordmark — reference
   assets/brand/totetape-lockup.svg (paper) or
   assets/brand/totetape-lockup-reverse.svg (dark ground only).
   Register mark alone: 16–48px, one ink, never enclosed.
   Clear space: at least the width of the mark's narrow stem.
   ───────────────────────────────────────────────────────────── */