/* =============================================================================
   AI TRADING COMPETITION — "Midnight Intelligence" design system (Phase 1, 2026-09-02)
   Shared by index.html and learn.html (spec: research/site-redesign-2026-09-02.md, RD1-RD8).
   Single-theme dark, painted explicitly (RD1). No purple gradients, no neon green, no rockets.
   Accent (--accent) is for actions and the live chart line only; --cyan is for eyebrows and
   secondary data lines; --up/--down are semantic and reserved for P&L only.
   ============================================================================= */
:root{
  --bg:#0a1020; --bg-2:#0e1730; --surface:#121c36; --surface-2:#172344; --line:#1f2b4d;
  --line-strong:rgba(233,238,251,.22); --dim:#5f6f92;
  --ink:#e9eefb; --muted:#9fb0d0; --accent:#4f8bff; --cyan:#22d3ee;
  --up:#34d399; --down:#f87171; --warn:#fbbf24;
  --on-accent:#061024;
  --radius:14px; --radius-lg:16px;
  --container:1120px; --gutter:28px; --gutter-mobile:22px;
  --shadow-float:0 24px 60px -24px rgba(3,8,24,.65);
  --font-display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.mi{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mi img,.mi canvas,.mi svg{max-width:100%}
.mi a{color:inherit}
.mi button,.mi input,.mi select,.mi textarea{font-family:inherit}
.mi h1,.mi h2,.mi h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  text-wrap:balance;margin:0}
/* Default section-heading sizes (visual pass, 2026-09-07): most h2/h3 on the site never carried an
   explicit font-size and fell back to the UA default (~1.5em/1.17em of the 16px body = 24px/19px) —
   part of why Howard read the whole page as "small". Any page/component that already sets its own
   size (board-head h2, chart-card-head h2, etc.) wins on specificity, so this only raises headings
   that were riding the browser default. */
.mi h2{font-size:28px}
.mi h3{font-size:20px}
.mi p{margin:0;text-wrap:pretty}
.mi :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mi .up{color:var(--up)}
.mi .down{color:var(--down)}
.mi .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .mi *,.mi *::before,.mi *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- type scale (RD2: 12/14/16/18/22/28/36/52-60) ---------- */
.mi .t-12{font-size:12px} .mi .t-14{font-size:14px} .mi .t-16{font-size:16px}
.mi .t-18{font-size:18px} .mi .t-22{font-size:22px} .mi .t-28{font-size:28px} .mi .t-36{font-size:36px}
.mi .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);font-weight:500}
.mi .prose{max-width:70ch}

/* ---------- layout shell ---------- */
.mi .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:640px){ .mi .wrap{padding:0 var(--gutter-mobile)} }
.mi section.mi-section{padding:64px 0}
@media (max-width:640px){ .mi section.mi-section{padding:44px 0} }

/* ---------- nav (sticky, blurred, RD3) ---------- */
.mi .mi-nav{position:sticky;top:0;z-index:50;background:rgba(10,16,32,.78);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mi .mi-nav-inner{max-width:var(--container);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.mi .mi-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.01em;flex:none;min-height:44px}
.mi .mi-brand-badge{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--cyan));color:var(--on-accent);font-weight:900;font-size:14px}
.mi .mi-brand .brand-short{display:none}
.mi .mi-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.mi .mi-links a{white-space:nowrap;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;
  border-radius:8px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:500}
.mi .mi-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
/* "More" group (2026-09-07 nav restructure, RD-nav-2): a native <details> dropdown holding
   Chess/Poker/Real money/Findings/Blog. summary gets the same link styling as a .mi-links a via the
   descendant selector above (it's not an <a>, so it also needs its own rule below); the marker
   triangle is replaced with a small CSS chevron that flips when open. Enter/Space toggling is
   native <details> behavior; site.js adds Escape-to-close and outside-click-to-close.
   .mi-more-mobile duplicates the same 5 links as plain <a> so the mobile menu (below) shows them
   flat, same as the primary trio, with no nested disclosure to open — same pattern as cta-full/
   cta-short just below. */
.mi .mi-more{position:relative}
.mi .mi-more>summary{white-space:nowrap;padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;
  gap:6px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;list-style:none}
.mi .mi-more>summary::-webkit-details-marker{display:none}
.mi .mi-more>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.mi .mi-more[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.mi .mi-more>summary:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.mi .mi-more-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:51;
  min-width:180px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:10px;
  background:rgba(10,16,32,.98);border:1px solid var(--line);box-shadow:var(--shadow-float)}
.mi .mi-more-mobile{display:none}
.mi .mi-nav-cta{flex:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;
  border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13.5px;text-decoration:none;
  transition:filter .12s ease;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.mi .mi-nav-cta:hover{filter:brightness(1.1)}
.mi .mi-nav-cta .cta-short{display:none}
.mi .mi-nav-toggle{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
@media (max-width:820px){
  .mi .mi-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(10,16,32,.98);border-bottom:1px solid var(--line);padding:6px 16px 12px;gap:2px}
  .mi .mi-links.open{display:flex}
  .mi .mi-nav-inner{position:relative}
  .mi .mi-nav-toggle{display:inline-flex}
  /* Inside the opened mobile menu the More group collapses to plain stacked links, not a second
     disclosure nested inside the first — display:contents removes the wrapper div so its <a>s
     become direct children of the already-vertical .mi-links column. */
  .mi .mi-more{display:none}
  .mi .mi-more-mobile{display:contents}
}
/* Brand wordmark: full name at wide widths, a short "AI Trading" once it no longer fits comfortably
   beside the nav — never the badge alone (2026-09-07: dropping to just the badge left the header
   with no name at all at the narrowest widths). */
@media (max-width:600px){
  .mi .mi-brand .brand-word{display:none}
  .mi .mi-brand .brand-short{display:inline}
}
/* Below ~480px "Get the daily scoreboard" no longer fits beside the toggle button without
   wrapping — a nowrap flex row with three non-shrinking items is exactly how this overflowed the
   viewport (found in mobile screenshot review, 2026-09-02). Swap to short CTA text; the brand
   wordmark has already shortened at 600px above. */
@media (max-width:480px){
  .mi .mi-nav-cta{max-width:none}
  .mi .mi-nav-cta .cta-full{display:none}
  .mi .mi-nav-cta .cta-short{display:inline}
}

/* ---------- hero: layered SVG chart, moved via rAF scroll (RD4) ---------- */
.mi .mi-hero{position:relative;overflow:hidden;padding:48px 0 40px;
  background:radial-gradient(120% 70% at 82% -10%,rgba(79,139,255,.16),transparent 60%),
    linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 62%)}
.mi .mi-hero-layer{position:absolute;left:0;right:0;bottom:0;pointer-events:none;will-change:transform}
/* align-items:start (2026-09-02 fixup — coordinator review): the right column (live scoreboard
   card + chart + email box, all stacked) is much taller than the left column's headline+form, so
   align-items:center was vertically centering the SHORTER left column against the TALLER right
   one — leaving a large empty band above the headline that did not line up with the card's own top
   edge. Both columns now start flush at the same top edge, matching the approved artboard. */
.mi .mi-hero-inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
@media (max-width:900px){
  /* minmax(0,1fr), not bare 1fr (2026-09-02 fixup — coordinator review): an `fr` track behaves like
     minmax(auto,1fr) by default, so a WIDER descendant anywhere in the stacked column (the chart
     card's fixed-width gutter, a nowrap tag) was inflating the whole column's automatic minimum —
     and both grid children share that one column at this breakpoint, so the SHORT headline block
     was stretched to the WIDE card's min-content width, well past the 375px viewport. Measured: the
     headline's own reveal div came out 339px wide against a 316px content box. minmax(0,1fr) caps
     the track's minimum at 0 so its children's own min-width:0/flex-shrink rules can actually apply. */
  .mi .mi-hero-inner{grid-template-columns:minmax(0,1fr)}
  .mi .mi-hero{padding:40px 0 28px}
}
.mi .mi-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;margin:14px 0 14px}
.mi .mi-hero .lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch}
.mi .mi-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.mi .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:11px;font-weight:700;font-size:15.5px;text-decoration:none;background:var(--accent);color:var(--on-accent);
  transition:transform .12s ease,filter .12s ease;border:0;cursor:pointer;font-family:var(--font-body)}
.mi .btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mi .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.mi .btn.ghost:hover{background:rgba(255,255,255,.05);filter:none;border-color:rgba(255,255,255,.4)}

/* ---------- floating card (RD3: one soft shadow reserved for floating cards) ---------- */
.mi .mi-card{background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:18px 18px 14px;box-shadow:var(--shadow-float)}
.mi .mi-card h3{font-size:15px;margin:0 0 3px}
.mi .mi-card .sub{font-size:12px;color:var(--muted);margin-bottom:10px}

/* ---------- trust bar (RD7 — only true items) ---------- */
.mi .mi-trust{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;padding:16px var(--gutter);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.mi .mi-trust b{color:var(--ink);font-weight:600}

/* ---------- generic section header ---------- */
.mi .mi-section h2{font-size:clamp(24px,2.8vw,34px)}
.mi .mi-section .sub2{color:var(--muted);max-width:64ch;font-size:16px;line-height:1.6;margin-top:8px}

/* ---------- stat tiles + count-up ---------- */
.mi .mi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:24px}
.mi .mi-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.mi .mi-stat .k{font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.mi .mi-stat .v{font-family:var(--font-display);font-size:30px;font-weight:800;margin-top:6px;
  font-variant-numeric:tabular-nums}

/* ---------- steps ---------- */
.mi .mi-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:24px}
.mi .mi-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.mi .mi-step .num{font-family:var(--font-mono);color:var(--cyan);font-size:12px;letter-spacing:.1em}
.mi .mi-step h3{font-size:17px;margin:8px 0 5px}
.mi .mi-step p{color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---------- live feed ---------- */
.mi .mi-feed{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:20px}
.mi .mi-feed .row{display:grid;grid-template-columns:74px 1fr auto auto;gap:12px;padding:11px 16px;
  border-top:1px solid var(--line);font-size:13.5px;align-items:center}
.mi .mi-feed .row:first-child{border-top:none;background:rgba(79,139,255,.08);font-size:11.5px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
@media (max-width:560px){ .mi .mi-feed .row{grid-template-columns:1fr auto} .mi .mi-feed .row span:nth-child(1),
  .mi .mi-feed .row span:nth-child(3){display:none} }
.mi .mi-quote{border-left:3px solid var(--cyan);padding:9px 16px;color:var(--muted);font-style:italic;
  margin:18px 0 0;font-size:14.5px}

/* ---------- lab arm cards ---------- */
.mi .mi-lab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
.mi .mi-lab-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.mi .mi-lab-card:hover{border-color:var(--accent)}
.mi .mi-lab-card .name{font-family:var(--font-display);font-weight:800;font-size:16px}
.mi .mi-lab-card .how{color:var(--muted);font-size:13.5px;line-height:1.5}
.mi .mi-lab-card .num{font-family:var(--font-mono);font-size:22px;font-weight:700;margin-top:4px}
.mi .mi-lab-card .verdict{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- forms ---------- */
.mi .mi-form{display:flex;gap:8px;flex-wrap:wrap}
.mi .mi-form input[type=email]{flex:1 1 220px;min-width:0;max-width:100%;box-sizing:border-box;
  min-height:46px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:15px;
  font-family:var(--font-body)}
.mi .mi-form input[type=email]:focus-visible{border-color:var(--accent)}
.mi .mi-form input[type=email]::placeholder{color:#5f6f92}
.mi .mi-form button{min-height:46px;padding:0 20px;border:0;border-radius:10px;background:var(--accent);
  color:var(--on-accent);font-weight:700;font-size:14.5px;cursor:pointer;font-family:var(--font-body)}
.mi .mi-form button:hover{filter:brightness(1.08)}
.mi .mi-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- tables (tabular numerals everywhere digits align) ---------- */
.mi table.mi-table{width:100%;border-collapse:collapse;font-size:14px}
.mi table.mi-table td,.mi table.mi-table th{padding:9px 6px;border-top:1px solid var(--line);text-align:left}
.mi table.mi-table td.n,.mi table.mi-table th.n{text-align:right;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums}
.mi .mi-table-scroll{overflow-x:auto}

/* ---------- reveal-on-scroll (RD4, progressive enhancement) ---------- */
/* Gated on html.mi-js (a one-line inline head script sets it): with JS off, or before it runs, a
   .reveal element is simply visible — Phase 6 found the no-JS Home rendering a BLANK hero because
   the hidden state was unconditional (RD4: no page may depend on JS for content). */
html.mi-js .mi .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
html.mi-js .mi .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .mi .reveal{opacity:1;transform:none;transition:none} }

/* ---------- footer ---------- */
.mi .mi-foot{max-width:1080px;margin:34px auto 26px;padding:18px var(--gutter);border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:13px;line-height:1.55;color:var(--muted)}
.mi .mi-foot .fb{color:var(--ink);font-weight:800;display:block;margin-bottom:8px;font-family:var(--font-display)}
.mi .mi-foot .fl{display:flex;flex-wrap:wrap;gap:2px 16px;margin-bottom:9px}
.mi .mi-foot .fl a{color:var(--accent);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;
  min-height:24px;padding:4px 2px}
.mi .mi-foot .fl a:hover{text-decoration:underline}

/* ---------- Learn page: sticky in-page nav + sections ---------- */
.mi .mi-learn-shell{display:grid;grid-template-columns:220px 1fr;gap:36px;max-width:var(--container);
  margin:0 auto;padding:36px var(--gutter) 80px;align-items:start}
@media (max-width:900px){ .mi .mi-learn-shell{grid-template-columns:1fr} }
.mi .mi-learn-nav{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
@media (max-width:900px){ .mi .mi-learn-nav{position:static;flex-direction:row;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px;gap:4px 10px} }
.mi .mi-learn-nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:7px}
.mi .mi-learn-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.mi .mi-learn-main h2{font-size:24px;margin:0 0 4px;scroll-margin-top:78px}
.mi .mi-learn-main section{padding:26px 0;border-top:1px solid var(--line)}
.mi .mi-learn-main section:first-child{border-top:0;padding-top:0}
.mi .mi-learn-main p{color:var(--muted);line-height:1.65;font-size:15px;max-width:74ch;margin:10px 0}
.mi .mi-learn-main .lede{color:var(--ink);font-size:16.5px}
.mi .mi-learn-main strong{color:var(--ink)}
.mi .mi-learn-main a{color:var(--accent);font-weight:600;text-decoration:none}
.mi .mi-learn-main a:hover{text-decoration:underline}
.mi .mi-learn-main h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.mi .mi-learn-main .kicker{color:var(--muted);font-size:15px;margin-bottom:20px}

/* ---------- doc page (legal/about/contact — skin-only wrapper, Phase 2 2026-09-02) ---------- */
.mi .mi-doc{max-width:760px;margin:0 auto;padding:48px var(--gutter) 90px}
.mi .mi-doc h1{font-size:clamp(28px,4vw,38px);margin:0 0 8px}
.mi .mi-doc .eff{color:var(--muted);font-size:13.5px;margin:0 0 28px;line-height:1.6}
.mi .mi-doc h2{font-family:var(--font-display);font-weight:800;font-size:21px;margin:34px 0 10px;letter-spacing:-.01em}
.mi .mi-doc h2:first-of-type{margin-top:8px}
.mi .mi-doc h3{font-family:var(--font-display);font-weight:700;font-size:16.5px;margin:22px 0 7px}
.mi .mi-doc p,.mi .mi-doc li{line-height:1.7;color:var(--muted);font-size:15px}
.mi .mi-doc strong{color:var(--ink)}
.mi .mi-doc ul{margin:8px 0 8px 2px;padding-left:20px}
.mi .mi-doc li{margin:5px 0}
.mi .mi-doc a{color:var(--accent);font-weight:600;text-decoration:none}
.mi .mi-doc a:hover{text-decoration:underline}
.mi .mi-doc .callout{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:16px 18px;margin:20px 0}
.mi .mi-doc .callout strong{color:var(--ink)}
.mi .mi-doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.mi .mi-doc th,.mi .mi-doc td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.mi .mi-doc th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.mi .mi-doc td{color:var(--ink)}
.mi .mi-doc .mi-table-scroll{overflow-x:auto}

/* ---------- contact page ---------- */
.mi .mi-doc .big-btn{display:inline-flex;align-items:center;min-height:48px;background:var(--accent);
  color:var(--on-accent);border:0;border-radius:11px;padding:0 22px;font-weight:700;font-size:15.5px;cursor:pointer;
  margin:8px 0 22px;font-family:var(--font-body)}
.mi .mi-doc .big-btn:hover{filter:brightness(1.08)}
.mi .mi-doc .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin:18px 0}
.mi .mi-doc .card h2{font-size:16.5px;margin:0 0 8px}
.mi .mi-doc code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:5px;font-size:.9em;
  font-family:var(--font-mono)}

/* ---------- mobile-first rules (RD8: 375px collapse, tables scroll, cards single column) ---------- */
@media (max-width:640px){
  .mi .mi-hero-inner{gap:26px;padding:0 var(--gutter-mobile)}
  .mi .mi-btns .btn{width:100%}
  .mi .mi-lab-cards,.mi .mi-stats,.mi .mi-steps{grid-template-columns:1fr}
}

/* =============================================================================
   Phase 4 (2026-09-02): GENERATED PAGES — blog/, games/, chess/ hubs, record/.
   These are written by seo/generate.mjs, seo/records.mjs, and the agent-org SEO
   engines (aitrading-seo-cluster/chrome.mjs, reused by aitrading-seo-demand) —
   never hand-edit a generated file, edit its generator instead (RD14). Every
   generator wraps its content in <article class="mi-doc mi-article|mi-record">
   and reuses .mi-doc's h1/h2/h3/p/table/ul/li/a rules from Phase 2 above; the
   classes below are the extra ones each generator's own body content already
   emits (crumbs, cta, meta, faq, movelist, gap-hero, stat-grid, ...) — kept as
   the SAME class names the generators already write, scoped under .mi-article/
   .mi-record/.mi-game so a rename never had to touch generator body-content
   code, only these selectors' prefixes. Append-only: nothing above this block
   was edited to make Phase 4 land.
   ============================================================================= */
.mi .mi-article,.mi .mi-record{max-width:720px}
.mi .mi-article .crumbs,.mi .mi-record .crumbs{font-size:13px;margin-bottom:18px;color:var(--muted)}
.mi .mi-article .crumbs a,.mi .mi-record .crumbs a{color:var(--accent)}
.mi .mi-article .meta,.mi .mi-record .meta{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.mi .mi-article .cta,.mi .mi-record .cta{display:inline-block;margin:8px 12px 8px 0}
.mi .mi-article q,.mi .mi-record q{font-style:italic;color:var(--ink)}
.mi .mi-article .who{color:var(--muted);font-size:13px;font-weight:500}

/* pill/link buttons the generators emit inline (class="button" / "button primary") — same visual
   language as the site-wide .btn, scoped so it never collides with .btn's own rules elsewhere. */
.mi .mi-doc .button{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;
  font-weight:700;font-size:14.5px;text-decoration:none;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);font-family:var(--font-body)}
.mi .mi-doc .button.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.mi .mi-doc .button:hover{filter:brightness(1.08)}

/* FAQ dl blocks (weekly recaps, demand-engine posts) */
.mi .mi-article .faq dt{font-weight:700;margin-top:18px;color:var(--ink);font-family:var(--font-display)}
.mi .mi-article .faq dd{margin:6px 0 0;line-height:1.7;color:var(--muted)}

/* callout/aside note (cluster + demand engines' class="note") and wide-table scroll wrappers
   (class="tablewrap" / "tbl-wrap" — both names are in live use across the three generators) */
.mi .mi-article .note{border-left:3px solid var(--cyan);padding:2px 0 2px 14px;color:var(--muted);
  font-size:14px;margin:16px 0}
.mi .mi-article .tablewrap,.mi .mi-article .tbl-wrap,.mi .mi-record .tbl-wrap{overflow-x:auto;margin:18px 0}

/* blog index cards */
.mi .mi-post-card{border-bottom:1px solid var(--line);padding:16px 0}
.mi .mi-post-card h2{margin:0 0 6px;font-size:17px}
.mi .mi-post-card h2 a{text-decoration:none;color:var(--ink)}
.mi .mi-post-card h2 a:hover{color:var(--accent)}
.mi .mi-post-card p{color:var(--muted);font-size:14.5px;margin:0}

/* cluster-engine "more in this series" block */
.mi .mi-article .cluster-links{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.mi .mi-article .cluster-links h2{font-size:18px;margin:0 0 8px}
.mi .mi-article .cluster-links ul{margin:0 0 12px;padding-left:20px}

/* ---- game pages (chess/poker move lists) — rendered inside .mi-article, generate.mjs's own wrapper ---- */
.mi .movelist{line-height:1.85;padding-left:20px;list-style:decimal}
.mi .movelist li{margin:5px 0;color:var(--muted)}
.mi .movelist b{color:var(--ink)}

/* ---- record pages (seo/records.mjs) — the gap-hero stat strip, stat-grid, feed, hero-cta ---- */
.mi .mi-record .gap-hero{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-end;margin:6px 0 10px;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--surface),var(--surface-2))}
.mi .mi-record .gap-hero .big{font-family:var(--font-mono);font-size:2.3rem;font-weight:800;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.mi .mi-record .gap-hero .lbl{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px}
.mi .mi-record .pos{color:var(--up)}
.mi .mi-record .neg{color:var(--down)}
.mi .mi-record .gap-note{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.mi .mi-record .hero-cta{margin:10px 0 24px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.mi .mi-record .hero-cta a.btn{display:inline-flex;align-items:center;min-height:46px;background:var(--accent);
  color:var(--on-accent);font-weight:700;text-decoration:none;padding:0 20px;border-radius:10px;font-size:14.5px}
.mi .mi-record .hero-cta a.btn:hover{filter:brightness(1.08)}
.mi .mi-record .hero-cta a.quiet{color:var(--muted);text-decoration:none;font-size:13.5px}
.mi .mi-record .hero-cta a.quiet:hover{color:var(--ink)}
.mi .mi-record .feed{list-style:none;margin:0;padding:0}
.mi .mi-record .feed li{margin:0 0 10px;line-height:1.6;color:var(--muted);padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.mi .mi-record .feed li:last-child{border-bottom:0}
.mi table.stat-grid td:first-child{color:var(--muted)}
.mi table.stat-grid td:last-child{font-weight:700;color:var(--ink);font-family:var(--font-mono);
  font-variant-numeric:tabular-nums}
.mi .mi-record tr.bench{background:rgba(79,139,255,.06)}
.mi .mi-record tr.bench em{color:var(--muted);font-style:italic;font-weight:400}

@media (max-width:640px){
  .mi .mi-record .gap-hero{padding:16px 18px;gap:14px 24px}
  .mi .mi-record .gap-hero .big{font-size:1.9rem}
  /* Bare <table> in generator body content (the leaderboard table in weekly recaps, the chess/poker
     month tables in games/index.html) has no .tbl-wrap/.tablewrap around it — the old chrome guarded
     this with the same rule (generate.mjs's "generated-page guards" style block) and it was lost when
     that inline <style> block was replaced by this file. Found by the actual overflow check
     (document.documentElement.scrollWidth > clientWidth), not by eyeballing a screenshot: without
     this, weekly-recap-*.html and games/index.html scroll the WHOLE PAGE sideways at 375px. */
  .mi .mi-article table,.mi .mi-record table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* =============================================================================
   Phase 6 (2026-09-02): SCROLLCRAFT MOTION — the "unique techniques" Howard asked for:
   moving text (live trade ticker, kinetic leader line, scroll-linked headline words),
   stacking cards, scroll progress, staggered reveals. Every rule here is progressive
   enhancement (RD4): the static state must read perfectly with JS off, and
   prefers-reduced-motion:reduce turns every one of them into that static state.
   Transforms/opacity only — nothing here changes layout while it moves. Append-only.
   ============================================================================= */

/* ---- scroll progress bar (under the sticky nav). Deliberately NOT .mi-scoped: standings.html
   loads site.css for this one component without adopting the .mi body class. CSS scroll-timeline
   where supported; site.js drives the same transform where it is not (and under reduced motion,
   since position feedback is UI, not decoration — but never as an animation there). ---- */
.mi-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.mi-progress>i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent,#4f8bff),var(--cyan,#22d3ee))}
@keyframes mi-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()){
  .mi-progress>i{animation:mi-progress linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion:reduce){ .mi-progress>i{animation:none!important} }

/* ---- staggered reveals: site.js sets --stagger per element from its position among sibling
   .reveal elements (60ms steps, capped), so a card grid enters as a wave instead of one thud. ---- */
.mi .reveal{transition-delay:var(--stagger,0ms)}
@media (prefers-reduced-motion:reduce){ .mi .reveal{transition-delay:0ms} }

/* ---- 1a. live trade ticker (CSS marquee; height RESERVED so it can never shift layout) ----
   Markup: .mi-ticker > .mi-ticker-label + .mi-ticker-viewport > .mi-ticker-track > ul.mi-ticker-list x2
   (the second list is an aria-hidden duplicate site.js clones for the seamless loop). With JS off
   the first list's server-rendered items show as a static strip; with data they are replaced by
   real closed paper trades. .is-live = has data + motion allowed; .is-static = no motion. */
.mi .mi-ticker{height:44px;display:flex;align-items:stretch;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;position:relative;z-index:1}
.mi .mi-ticker-label{flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;
  font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
  border-right:1px solid var(--line);background:var(--bg-2);position:relative;z-index:2;white-space:nowrap}
.mi .mi-ticker-label .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up)}
.mi .mi-ticker:not(.is-live) .mi-ticker-label .live-dot{background:var(--dim)}
.mi .mi-ticker-viewport{flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.mi .mi-ticker-track{display:flex;height:100%;width:max-content;will-change:transform}
.mi .mi-ticker-list{display:flex;align-items:center;gap:0;margin:0;padding:0 8px;list-style:none;height:100%}
.mi .mi-ticker-list li{display:inline-flex;align-items:center;gap:8px;padding:0 18px;white-space:nowrap;
  font:500 13px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted);
  border-right:1px solid var(--line)}
.mi .mi-ticker-list li .sym{color:var(--ink);font-weight:700}
.mi .mi-ticker-list li .lane{color:var(--muted)}
.mi .mi-ticker-list li .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mi .mi-ticker-list li a{color:var(--accent);text-decoration:none;font-weight:700}
.mi .mi-ticker-list li a:hover{text-decoration:underline}
@keyframes mi-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mi .mi-ticker.is-live .mi-ticker-track{animation:mi-marquee var(--mi-ticker-dur,40s) linear infinite}
.mi .mi-ticker.is-live:hover .mi-ticker-track,.mi .mi-ticker.is-live:focus-within .mi-ticker-track{animation-play-state:paused}
.mi .mi-ticker.is-static .mi-ticker-track{animation:none;transform:none}
@media (prefers-reduced-motion:reduce){
  .mi .mi-ticker .mi-ticker-track{animation:none!important;transform:none!important;will-change:auto}
}
@media (max-width:640px){
  .mi .mi-ticker-label{padding:0 12px;font-size:10px}
  .mi .mi-ticker-label .lbl-long{display:none}
}

/* ---- 1c. kinetic leader line (one phrase swaps with a vertical slide). Static HTML = the
   first .mi-swap-item; site.js appends real ranked lines from the feed and rotates them. The
   host is inline-grid so all items share one cell and the line's height never changes. ---- */
.mi .mi-kinetic{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:14px;
  font-size:14.5px;color:var(--muted);min-height:1.6em}
.mi .mi-kinetic .mi-kinetic-label{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.mi .mi-swap{display:inline-grid;grid-template-areas:"s";overflow:hidden;vertical-align:bottom;
  line-height:1.5;height:1.5em;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:14px;
  padding-right:2px}
.mi .mi-swap-item{grid-area:s;white-space:nowrap;display:flex;align-items:center;gap:8px;
  transform:translateY(110%);opacity:0;color:var(--ink);font-weight:700}
.mi .mi-swap-item .pct{font-weight:700}
.mi .mi-swap-item .rk{font-weight:500;color:var(--muted);font-size:12px}
.mi .mi-swap-item .lead{font:800 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--on-accent);
  background:var(--cyan);padding:3px 6px;border-radius:999px}
.mi .mi-swap-item a{color:var(--accent);text-decoration:none}
.mi .mi-swap-item a:hover{text-decoration:underline}
.mi .mi-swap-item.is-on{transform:none;opacity:1}
.mi .mi-swap-item.is-out{transform:translateY(-110%);opacity:0}
.mi .mi-swap.animate .mi-swap-item{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
@media (prefers-reduced-motion:reduce){
  .mi .mi-swap .mi-swap-item{transition:none!important}
}

/* ---- 1b. scroll-linked headline words ([data-words] titles; site.js wraps each word in
   .w > span, never body text). Scroll-driven where animation-timeline:view() exists (class
   .mi-words.scroll), otherwise an IntersectionObserver adds .in and the words transition with
   a per-word delay. Without JS no class is added and the title is plain static text. ---- */
/* overflow:CLIP, not hidden — hidden makes the wrapper a scroll container, and a view() timeline then
   measures the word against its own wrapper (always fully "covered" ⇒ the animation sat at 100% and
   nothing ever moved; measured opacity 1 at every scroll position). The timeline is NAMED on the
   title so every word reads the same progress relative to the root scroller. */
.mi .mi-words .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.mi .mi-words .w>span{display:inline-block;opacity:0;transform:translateY(.7em);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--wi,0)*45ms)}
.mi .mi-words.in .w>span{opacity:1;transform:none}
@keyframes mi-word-in{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  .mi .mi-words.scroll{view-timeline:--mi-title block}
  .mi .mi-words.scroll .w>span{transition:none;opacity:1;transform:none;
    animation:mi-word-in linear both;animation-timeline:--mi-title;
    /* cover-based, not entry-based: a 40px title's "entry" range is only the 40px it takes to cross
       the bottom edge (measured: the words were already finished by the time the title was readable).
       cover 0%→~22% = the first fifth of the viewport the title travels after appearing. */
    animation-range:cover calc(var(--wi,0)*2.5%) cover calc(16% + var(--wi,0)*2.5%)}
}
@media (prefers-reduced-motion:reduce){
  .mi .mi-words .w>span{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* ---- 2. stacking cards ([data-mi-stack] / .mi-stack): position:sticky children stack under the
   nav with a stepped top; site.js only toggles .stuck (reached its sticky top) and .covered (the
   next card has arrived over it) — the scale/shadow/dim step is pure CSS. Below 720px it is a
   plain vertical list, and under reduced motion the cards never stick or scale. ---- */
.mi .mi-stack{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){
  .mi .mi-stack{--stack-top:88px;--stack-step:14px;gap:22px;padding-bottom:8px}
  .mi .mi-stack>*{position:sticky;top:calc(var(--stack-top) + var(--i,0)*var(--stack-step));
    /* an anchor jump (#lab-superbot) lands the card exactly where it will stick, not 80px above it */
    scroll-margin-top:calc(var(--stack-top) + var(--i,0)*var(--stack-step));
    transform-origin:50% 0;transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s ease,box-shadow .4s ease;
    background:var(--surface)}
  .mi .mi-stack>*:nth-child(1){--i:0} .mi .mi-stack>*:nth-child(2){--i:1} .mi .mi-stack>*:nth-child(3){--i:2}
  .mi .mi-stack>*:nth-child(4){--i:3} .mi .mi-stack>*:nth-child(5){--i:4} .mi .mi-stack>*:nth-child(6){--i:5}
  .mi .mi-stack>*:nth-child(7){--i:6} .mi .mi-stack>*:nth-child(8){--i:7} .mi .mi-stack>*:nth-child(n+9){--i:8}
  .mi .mi-stack>*.stuck{box-shadow:var(--shadow-float)}
  .mi .mi-stack>*.covered{transform:scale(.965);filter:brightness(.78)}
  /* the Home "how it works" trio grows into full-width stack cards on desktop */
  /* explicit areas: the number owns the left column for BOTH rows; title + copy stack on the right.
     (Found in the screenshot loop: with a bare 2-column grid the <p> wrapped into the 120px number
     column and rendered as a one-word-wide ribbon.) */
  .mi .mi-steps.mi-stack .mi-step{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto 1fr;
    grid-template-areas:"num title" "num copy";column-gap:24px;row-gap:8px;align-items:start;align-content:center;
    padding:32px 36px;min-height:clamp(150px,20vh,200px)}
  .mi .mi-steps.mi-stack .mi-step .num{grid-area:num;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1;
    color:var(--cyan);opacity:.9;padding-top:4px}
  .mi .mi-steps.mi-stack .mi-step h3{grid-area:title;font-size:24px;margin:0}
  .mi .mi-steps.mi-stack .mi-step p{grid-area:copy;font-size:16.5px;max-width:58ch;margin:0}
  /* the Learn lab-arm cards get room to stack */
  .mi .lab-card-grid.mi-stack .lab-card{padding:24px 28px;min-height:150px}
  .mi .lab-card-grid.mi-stack .lab-card h3{font-size:19px}
  .mi .lab-card-grid.mi-stack .lab-card p{font-size:14.5px;max-width:70ch}
}
@media (prefers-reduced-motion:reduce){
  .mi .mi-stack>*{position:static!important;transform:none!important;filter:none!important;transition:none!important}
}

/* =============================================================================
   SITE CHAT WIDGET (2026-09-03) — "Ask about the site" panel, opened from the existing green
   Contact bubble (community.js). Deliberately NOT scoped under .mi / the design-token vars above:
   community.js and chat.js are both self-contained and load on pages that don't carry site.css
   (e.g. landing-chess.html), so chat.js also self-injects this exact block at runtime as a
   fallback (see chat.js's `css` string). THIS is the documented canonical copy — if you change
   one, change both, or the two will silently drift on the one page that depends on the fallback.
   RETOKENED 2026-09-04 design review (finding 7): the panel used to hardcode community.js's old
   navy/green/gold cw-* look; it now reads the Midnight tokens (var(...,fallback) so it still
   renders correctly on pages that don't load site.css) — surface panel, accent Send/user-bubble
   with dark on-accent ink, line borders, muted secondary text. Since chat now replaces the green
   Contact bubble as the primary launcher, `body.sc-chat-active` (set by chat.js only once
   isVisible() is true) hides community.js's .cw-btn — gate on that class in any future edit here,
   never an unconditional rule, or Contact vanishes sitewide the day chat is ever turned back off.
   QUIETED 2026-09-07 (external review item #10): the launcher used to be a glowing accent/cyan
   gradient pill with a pulsing ring — it read as an ad, and it visually competed with the arena
   page's bot-detail drawer (BA98) sitting in the same bottom-right/right-edge territory. It is now
   a quiet bordered surface control, same family as every other secondary button on the site, with
   no pulse. `body.sc-drawer-open` (set by chat.js's generic MutationObserver watching for
   `.drawer.open` — no arena.html edit needed, and it degrades safely to "never hides" on any page
   with no drawer) hides both the fab and an open panel while a bot detail drawer is open, so the
   two floating panels never stack.
   ============================================================================= */
.sc-fab{position:fixed;right:18px;bottom:18px;z-index:2147483001;display:flex;align-items:center;gap:9px;min-height:46px;padding:12px 18px;border:1px solid var(--line,#1f2b4d);border-radius:999px;cursor:pointer;background:var(--surface,#121c36);color:var(--ink,#e9eefb);font:700 14px/1 -apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .15s ease,opacity .15s ease,border-color .15s ease}.sc-fab:hover,.sc-fab:focus-visible{transform:translateY(-2px);border-color:var(--line-strong,rgba(233,238,251,.22));outline:none}.sc-fab .sc-fab-ico{font-size:17px;line-height:1}body.sc-chat-open .sc-fab{opacity:0;pointer-events:none}body.sc-chat-active .cw-btn{display:none}body.sc-drawer-open .sc-fab,body.sc-drawer-open .sc-panel{display:none!important}@media (max-width:767px){.sc-fab{width:46px;height:46px;padding:0;justify-content:center}.sc-fab .sc-fab-label{display:none}}
.sc-panel{position:fixed;right:18px;bottom:74px;z-index:2147483000;width:340px;max-width:calc(100vw - 24px);height:480px;max-height:calc(100vh - 110px);background:var(--surface,#121c36);border:1px solid var(--line,#1f2b4d);border-radius:16px;box-shadow:0 14px 46px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden;font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink,#e9eefb)}
.sc-panel.sc-open{display:flex}
@media (max-width:767px){.sc-panel{bottom:78px}}
.sc-head{padding:13px 15px;background:var(--surface-2,#172344);border-bottom:1px solid var(--line,#1f2b4d);display:flex;justify-content:space-between;align-items:center;gap:8px}
.sc-head b{font-size:15px;display:block}.sc-head small{color:var(--muted,#9fb0d0);font-size:11px}
.sc-x{background:none;border:none;color:var(--muted,#9fb0d0);font-size:22px;cursor:pointer;line-height:1;min-width:44px;min-height:44px;margin:-11px -13px -11px 0}
.sc-starters{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line,#1f2b4d)}
.sc-chip{background:var(--surface-2,#172344);color:var(--ink,#e9eefb);border:1px solid var(--line,#1f2b4d);border-radius:999px;padding:6px 11px;font-size:12px;cursor:pointer;min-height:32px}
.sc-chip:hover{background:var(--line,#1f2b4d)}
.sc-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.sc-empty{color:var(--muted,#9fb0d0);font-size:13px;text-align:center;margin:auto;line-height:1.5}
.sc-m{max-width:85%;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap}
.sc-m.u{align-self:flex-end;background:var(--accent,#4f8bff);color:var(--on-accent,#061024);border-bottom-right-radius:3px}
.sc-m.a{align-self:flex-start;background:var(--surface-2,#172344);color:var(--ink,#e9eefb);border-bottom-left-radius:3px}
.sc-m.err{align-self:flex-start;background:rgba(248,113,113,.14);color:var(--down,#f87171);border-bottom-left-radius:3px}
.sc-typing{align-self:flex-start;color:var(--muted,#9fb0d0);font-size:12px;padding:2px 4px}
.sc-foot{padding:10px;border-top:1px solid var(--line,#1f2b4d);display:flex;flex-direction:column;gap:7px}
.sc-row{display:flex;gap:7px}
.sc-foot textarea{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line,#1f2b4d);border-radius:9px;color:var(--ink,#e9eefb);padding:10px 11px;font-size:16px;font-family:inherit;resize:none;min-height:44px;max-height:88px;box-sizing:border-box}
.sc-send{background:var(--accent,#4f8bff);color:var(--on-accent,#061024);border:none;border-radius:9px;padding:0 14px;min-height:44px;min-width:44px;font-weight:800;cursor:pointer}
.sc-send:disabled{opacity:.5;cursor:default}
.sc-disclaimer{color:var(--muted,#9fb0d0);font-size:10.5px;line-height:1.4;text-align:center}
.sc-handoff{background:none;border:1px solid var(--line,#1f2b4d);color:var(--muted,#9fb0d0);border-radius:8px;padding:5px 9px;font-size:11px;cursor:pointer;min-height:32px;white-space:nowrap}
.sc-handoff:hover{color:var(--ink,#e9eefb);border-color:var(--line-strong,rgba(233,238,251,.22))}

/* =============================================================================
   BOT ANALYSIS ARENA — chart / strip / sparkline / detail styles (2026-09-04,
   Phase 2 of research/bot-analysis-arena-design-2026-09-04.md, BA26-BA41 + BA97-99).
   Uses the Midnight tokens (:root, RD1) — no new palette. Scripts: arena-chart.js,
   arena-spark.js, arena-strip.js.
   ============================================================================= */

/* ---- market strip (BA35-BA41) ---- */
.market-strip{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:10px 14px;margin-bottom:14px}
.mkt-strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--font-mono);font-size:14px}
.mkt-row{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.mkt-index{color:var(--muted);font-size:13px}
.mkt-price{color:var(--ink)}
.mkt-pct{font-weight:700}
.mkt-row.is-up .mkt-pct{color:var(--up)}
.mkt-row.is-down .mkt-pct{color:var(--down)}
.mkt-row.is-unavailable .mkt-pct{color:var(--muted)}
.mkt-note{color:var(--muted);font-size:13px}
.mkt-state{color:var(--warn);font-size:13px;margin-left:auto}
.mkt-proxies{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-left:auto}
.mkt-fallback{color:var(--muted);font-size:13px;font-family:var(--font-mono)}
@media (max-width:640px){.mkt-strip-inner{gap:10px;font-size:13px}.mkt-proxies{display:none}}

/* ---- board / detail chart (BA26-BA34, BA98) ---- */
.arena-chart-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.arena-period-switch{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.arena-period-btn{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 11px;
  border-radius:7px;cursor:pointer;min-height:32px}
.arena-period-btn:hover{color:var(--ink)}
.arena-period-btn.is-active{background:var(--accent);color:var(--on-accent)}
.arena-spy-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer}
.arena-spy-toggle input{width:15px;height:15px;accent-color:var(--cyan)}
.arena-chart-svg-wrap{width:100%;overflow-x:auto}
.arena-chart-svg-wrap svg{width:100%;height:auto;min-width:320px;display:block}
.arena-chart-empty{color:var(--muted);font-size:12.5px;margin:8px 0 0}
.arena-chart-note{color:var(--muted);font-size:12.5px;margin:8px 0 0}
.arena-chart-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.arena-legend-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--muted);
  cursor:pointer;min-height:34px;transition:opacity .12s ease-out}
.arena-legend-chip:hover,.arena-legend-chip:focus-visible{border-color:var(--line-strong)}
.arena-legend-chip:focus-visible{outline:2px solid var(--action);outline-offset:1px}
.arena-legend-chip.is-dim{opacity:.4}
.arena-legend-swatch{width:10px;height:10px;border-radius:50%;flex:none}
.arena-legend-name{color:var(--ink)}
.arena-legend-pct{font-family:var(--font-mono);font-weight:700}
.arena-legend-chip.is-up .arena-legend-pct{color:var(--up)}
.arena-legend-chip.is-down .arena-legend-pct{color:var(--down)}
@media (max-width:640px){.arena-legend-name{max-width:26vw;overflow:hidden;text-overflow:ellipsis}}

/* ---- end-of-line labels + legend-driven highlight (BA97, 2026-09-05 colour/label pass) ----
   Lines and their end labels are wrapped in <g data-line-id="…"> (arena-chart.js); a legend chip's
   hover/focus toggles .is-dim on every non-matching line+label and .is-active on the matching one —
   pure class toggling on already-rendered nodes, so the highlight is instant with zero re-draw. */
.arena-line,.arena-endlabel{transition:opacity .12s ease-out}
.arena-line.is-dim,.arena-endlabel.is-dim{opacity:.18}
.arena-line.is-active path{stroke-width:3.4px}
.arena-endlabel text{font-weight:600;paint-order:stroke;stroke:var(--bg,#0a1020);stroke-width:3px;stroke-linejoin:round}
.arena-endlabel.is-active text{font-weight:800}
/* Mobile: end-of-line labels get crowded on a narrow, scrolled SVG — the legend below (already in
   rank order) is the label surface there, per the design note ("labels become legend order only"). */
@media (max-width:640px){.arena-endlabels{display:none}}
@media (prefers-reduced-motion:reduce){.arena-line,.arena-endlabel,.arena-legend-chip{transition:none}}

/* ---- per-row sparklines (BA97) ---- */
svg[data-spark]{width:80px;height:24px;display:block;overflow:visible}

/* ---- the 1,000-stock scan note (task 2, 2026-09-05) ----
   Shared here for index.html (arena.html carries its own copy in its page-local <style>, whose :root
   redeclares --dim/--line for that page's Midnight palette — see that file's header comment). "About
   1,000"/"40" are portfolio-engine.ts's config constants (Stage-1 universe + STAGE2_CANDIDATES); no
   public endpoint serves a live scan count today, so this never claims a number the scan didn't do. */
.scan-note{max-width:74ch;color:var(--muted);font-size:14px;line-height:1.6;margin:14px 0 0;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(79,139,255,.05)}

/* ---- compact WINNERS strip, index.html mini-board (2026-09-05) ----
   arena.html's full 4-card panel, condensed to one line above the mini-board: today's leader only,
   from the SAME public-arena payload (winners.day). Hidden until the fetch resolves — no baked guess. */
.mini-winner{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.mini-winner .mw-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mini-winner .mw-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.mini-winner .mw-name{color:var(--ink);font-weight:700}
.mini-winner .mw-ret{font-weight:800;font-variant-numeric:tabular-nums;margin-left:auto}
.mini-winner .mw-ret.up{color:var(--up)} .mini-winner .mw-ret.down{color:var(--down)}