@import url('chrome.css');
@import url('furniture.css');   /* footer, sign-up, chat, geo gate: rollout phase 6, 26 Sep 2026 */
/* The header's held height on these pages, above 900px (see the end of chrome.css): its bar measures
   53.61 here against shared.css pages' 55.05, so the board pages hold 1.44px less. check-header-reserve. */
@media (min-width: 900px) { #chrome:empty { min-height: 134.89px; } }
/* THE BOARD'S OWN REGION HOLDS A SCREEN WHILE IT IS EMPTY (1 Oct 2026, the SEO audit's CLS). Before the
   markets arrive, #page (home) and #board (/compare/) are empty, so the press band and the footer
   placeholder sat in the first screen and were thrown out of it when the markets came: 0.45 to 0.64 of
   layout shift on a phone, measured. Their first filled state is already 8,131px (home) and 6,702px
   (/compare/), so holding one screen while :empty only stops that jump; it lets go the moment the page
   draws. A source that fails draws a short error here, and then the press band moves up once. */
#page:empty, #board:empty { min-height: 100vh; }
/* Shared board styling. Loaded by BOTH preview pages so the two cannot drift.
 * Palette, fonts and card anatomy from design-7-agreed.html.
 *
 * ── THREE CLASS NAMES ARE DELIBERATELY UNOBVIOUS ────────────────────────────────────────────
 *
 * `.phead`, `.livedot` and `.tintband` would all read better as `.vh`, `.dot` and `.band`. They
 * are not, because each of those three is ALREADY DEFINED elsewhere on this site, and this
 * stylesheet is going to be loaded beside those files during the design rollout.
 *
 * `.vh` is the one that mattered. In shared.css it is the VISUALLY-HIDDEN utility:
 * position:absolute, 1px by 1px, overflow hidden. Here it had been a table header row on the
 * hover panel. Load both sheets on one page and every screen-reader-only element on that page
 * paints into the layout: skip links, form hints, all of it. It could not show up on the
 * previews, which never load shared.css, and would have appeared on 256 insights pages and 59
 * learn pages at once, reading as a content bug rather than a CSS one.
 *
 * `.band` is the offer band component in offer-bands.css, styled in four places. `.dot` is a
 * near-identical circle there. Both renamed for the same reason.
 *
 * check-style-collisions.mjs enforces this. Do not reintroduce a short generic name here without
 * running it.
 *
 * ── THE NAVY IS #0d1b3e, AND THAT IS A DECISION ─────────────────────────────────────────────
 *
 * design-7-agreed.html specifies #0A1633; shared.css has shipped #0d1b3e. One brand colour with
 * two values is a duplicated constant, and left alone it would have been settled by whichever
 * sheet loaded last rather than by anyone.
 *
 * #0d1b3e wins on evidence rather than preference. It is the value the live site has shipped,
 * and decisively it exists as TEN HARDCODED LITERALS in shared.css and shared.js: chart
 * backgrounds, cursor strokes, the tooltip, the guide covers, an inline style in shared.js.
 * Changing the token would not have reached any of them, so a page would have ended up carrying
 * both navies at once, most visibly where they sit together (a chart background against its own
 * cursor stroke). #0A1633 appeared twice, both inside this file's own :root, fully tokenised.
 * The cheap edit is here, and the relationship the design depends on is preserved: --ink still
 * equals --navy, and --navy-2 is still the lighter of the two.
 */
:root{
    --navy:#0d1b3e; --navy-2:#0F1E42; --cobalt:#2F6BFF; --cobalt-2:#5B8CFF; --cobalt-soft:rgba(47,107,255,.14);
    --page:#F4F6FB; --card:#FFFFFF; --sunk:#EEF2F9; --line:#DDE3EE; --line-soft:#E9EDF4;
    --ink:#0d1b3e; --ink-2:#4B5878; --ink-3:#8590A8; --on-navy:#E6ECF8; --on-navy-2:rgba(226,233,247,.84);
    /* LOTTIE'S COLOURS, 24 Sep 2026, the last piece of the redesign. --navy is NOT changed: it is
       also --ink (body text), the ticker, the dark disagreement card, the trade section and the
       footer. Each change has its own token, so it moves one surface and nothing else.
         --bar    the header bar, Blue RYB.
         --bar-2  the nav strip beneath it, one step lighter (HSL lightness +6), so the top has
                  depth rather than reading as one slab. White on it is 5.17:1.
         --price  the price block on every market card, deep blue in place of #0d1b3e, which read
                  as near-black. Structure unchanged: same shape, weight, figure and chart.
         --accent the headline accent, on the phrase each page's h1 wraps in <i>: "Every market."
                  on home, "Two venues." on the board. Blue RYB, the SAME value as --bar, by
                  decision (26 Sep): two identical blues read as a system, two nearly-equal blues
                  read as a mistake. It was burnt orange #C2410C for two days, chosen to avoid three
                  blues on one screen; on the page it read as red and off brand. The hierarchy is
                  bar, accent, block (#0247FE, #0247FE, #14328F). 5.82:1 on the page background.
                  Keep it a var(--bar) reference, not a copy of the hex, so the two cannot drift.
       The CTA on the bar was --cobalt, which is 1.4:1 against Blue RYB and would vanish, so it
       inverts to white with Blue RYB text (6.3:1). That one is my call, not Lottie's: flagged. */
    --bar:var(--ch-bar); --bar-2:var(--ch-bar-2); --price:var(--ch-price); --accent:var(--bar);
    /* VENUE COLOURS RE-SEPARATED FOR THE NEW BAR AND BLOCK, 24 Sep 2026. A venue colour carries
       information, so it must not read as decoration of the header. Both are drawn as graphics,
       never as text (dots on white cards, the card's accent line, the chart line inside the price
       block), so the standard is WCAG 1.4.11, 3:1, against BOTH white and --price. No colour can
       beat about 3.34:1 on both at once, and darker blues match the bar's own lightness, so
       Kalshi moved LIGHTER and toward sky, not darker:
         kalshi  #2F6BFF -> #4994CA   white 3.30:1, price block 3.38:1, CIE76 dE 86 from the bar
                 (was 26), 61 from --cobalt (was 0: Kalshi WAS the brand cobalt).
         poly    #8B5CF6 -> #A46BFF   same purple (dE 7.8); white 3.43:1, price block 3.25:1 (the old
                 value fell to 2.63:1 on the lighter block). */
    --up:#1DB07C; --down:#14328F; --kalshi:var(--ch-kalshi); --poly:var(--ch-poly);
    /* Neutral venue colours, for venues we read but hold no brand colour for. Chosen to be
       distinguishable from each other and from the two brand colours above, and to carry no
       brand meaning of their own: a venue shown in someone else's colour is worse than one
       shown in a plain one. See venueMeta() in assets/js/board.js. */
    --ven-1:#0E7490; --ven-2:#475569; --ven-3:#4D7C0F; --ven-4:#0F766E;
    --ven-5:#4338CA; --ven-6:#1E3A8A; --ven-7:#166534; --ven-8:#7E22CE;
    /* CATEGORY colours from design-7's CAT map, renamed. The mockup calls them --polyus,
       --novig, --rh and --mb after venues, which is misleading here (they are categories, not
       venues) and --mb collided with Matchbook's brand red in offer-bands.css: one name, two
       meanings, which check-style-collisions refused. */
    /* NO WARM HUES (owner, 16 Oct 2026): --ven-2 amber, --ven-4 red-pink and --ven-8 brown became slate, deep
       teal and light slate; --cat-nfl amber became deep teal and --cat-culture hot pink became deep violet #4C1D95 and --ven-6 fuchsia became deep blue #1E3A8A, off the pink family. */
    /* TEXT-SAFE CATEGORIES (owner, 16 Oct 2026). A category colour is the label's TEXT (10.5px bold) and the card's
       3px rule, so each must clear 4.5:1 on the card. Politics and economy used the venue tokens --poly (3.29:1) and
       --kalshi (3.16:1), tech used --ink-3 (3.07:1), football #06B6D4 2.33:1 and crypto #10B981 2.43:1; each now has
       its own shade. Crypto is olive green, a different hue family from the NFL teal and Underdog teal. */
    /* ONE CATEGORY PALETTE (owner, 16 Oct 2026), the same eight colours as CAT_COLOURS in assets/js/ip-card.js, which
       draws every card; the daily email and the app use the same set. Football and the NFL share the sports teal. */
    --cat-politics:#0D1B3E; --cat-economy:#0247FE; --cat-sports:#0F766E; --cat-crypto:#4D7C0F;
    --cat-climate:#0369A1; --cat-tech:#312E81; --cat-culture:#6B21A8; --cat-geopolitics:#52525B;
    --cat-nfl:var(--cat-sports); --cat-football:var(--cat-sports);
    --maxw:1400px; --r:10px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--page);color:var(--ink);font:400 15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.num{font-family:'Inter Tight',Inter,sans-serif}
  a{color:var(--cobalt)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
  /* ── chrome: MOVED to assets/chrome.css, 26 Sep 2026 (rollout phase 1). One header for every
     page, drawn by templates.js chromeHtml and imported at the top of this file. The .livedot
     stays here because the pages' reading line uses it outside the header. */
  .livedot{width:7px;height:7px;border-radius:50%;background:var(--up)}
  /* strapline */
  .strap{padding:34px 0 8px}
  /* EDGE TO EDGE, as the trial mockup has it: the three phrases spread across the full content
     width with the space between them, rather than the headline sitting left with the rest of
     the line empty. space-between on a flex row does it without inventing a size, so the type
     scale is unchanged, and it falls back to normal flow on a narrow screen where spreading
     three phrases across 360px would read as three separate headings. */
  .strap h1{font-size:clamp(1.7rem,4.4vw,3.1rem);font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.08;
            display:flex;flex-wrap:wrap;gap:0 .35em;justify-content:space-between}
  @media(max-width:760px){ .strap h1{justify-content:flex-start} }
  .strap h1 i{font-style:normal;color:var(--accent)}
  .strap-intro{margin:12px 0 0;max-width:62ch;color:var(--ink-2);font-size:1rem;line-height:1.5}  /* served with the h1, 1 Oct 2026 */
  /* THE INTRODUCTION HOLDS ITS HEIGHT IN INTER (2 Oct 2026: hold, not preload). It paints in the
     fallback font and reflows when Inter arrives: on a phone at 390 the home's went four lines to five at
     about 4.9s and moved everything under it 24px, the last shift left on the home. These are its heights
     in Inter from a 1px sweep of ipredicta.co, 300 to 1600, and the fallback was never taller at any width,
     so the hold never has to shrink. The copy is static: a change to the sentence changes these numbers. */
  .intro-home{min-height:72px}
  @media(max-width:541px){ .intro-home{min-height:96px} }
  @media(max-width:406px){ .intro-home{min-height:120px} }
  @media(max-width:346px){ .intro-home{min-height:144px} }
  /* /compare/'s intro gained a link to /kalshi-vs-polymarket/ on 16 Oct 2026, so its heights were re-measured in
     Inter, 1px sweep 300 to 1600 of the built page: 96px to 366, 72px to 522, 48px above. */
  .intro-compare{min-height:48px}
  @media(max-width:522px){ .intro-compare{min-height:72px} }
  @media(max-width:366px){ .intro-compare{min-height:96px} }
  .reading{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--ink-2);font-size:.9rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .reading b{color:var(--ink);font-variant-numeric:tabular-nums}
  /* THE READING LINE HOLDS ITS FULL HEIGHT FROM THE FIRST PAINT (1 Oct 2026, the SEO audit's CLS). It is served
     as "Reading live prices" and rewritten once the prices arrive, into the counts and, on the home, the venue
     legend, which wrap to several lines on a phone: the home's grew 36.6px to 119.7px at 390 and moved
     everything under it 83px (0.047 to 0.065 of layout shift, the largest left on the page). These are the
     line's FINAL heights, measured on ipredicta.co by width (1 Oct, 7 venues, 8,577 prices, 2,430 markets),
     held as a permanent minimum rather than :empty, because the line is never empty. Content that ends
     shorter leaves the space held, so nothing moves; content that ends TALLER (an eighth venue in the legend,
     a count gaining a digit at the wrong width) moves the page again, by the difference only. */
  .reading-venues{min-height:37px}
  @media(max-width:1312px){ .reading-venues{min-height:65px} }
  /* Bands from a 1px sweep, 300 to 1600: 175 to 360px; 120 to 668 (667 and 668 end at 94.94, held at
     120); 65 to 1312; 37 above. A 5px sweep missed the 358, 359 and 668 edges. */
  @media(max-width:668px){ .reading-venues{min-height:120px} }
  @media(max-width:360px){ .reading-venues{min-height:175px} }
  @media(max-width:462px){ .reading-count{min-height:68px} }
  /* sections */
  .sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:30px 0 12px}
  h2{font-size:1.14rem;font-weight:600;margin:0}
  .sh .cnt{color:var(--ink-3);font-size:.82rem;font-weight:400}
  .sh a{font-size:.86rem;text-decoration:none;font-weight:500;white-space:nowrap}
  /* THE HOME'S MOVERS HEADING HOLDS ITS TWO LINES (2 Oct 2026). It gains its count ('5 of 12 compared across
     venues') when the compared movers arrive and wrapped to a second line at 390, moving the grid 27px. Every
     count the page can write (N of M compared across venues, M on one venue each, M up to 12) wraps to 54.69px
     at 452px and under and fits one line, 27.34px, above, so 55px is held there. The cards' own hold is in
     ip-card.css, the component's file (check-style-collisions: .ipc-spark is the component's name). */
  @media(max-width:452px){ [data-sec="movers"] .sh{min-height:55px} }
  /* highlights */
  /* AD SLOTS (.adh, .adv) REMOVED, rollout phase 5 (26 Sep 2026): the placeholders render nothing. */
  /* grid + rail */
  /* THE BOARD SITS BETWEEN TWO RAILS, and both are sticky. The single rail scrolled away after
     the first screen, which is the opposite of what the placement is for: a reader committing to
     the board is exactly the reader an offer should still be in front of. Narrower than the
     content column so the board stays the subject of the page. */
  .cols{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:1180px){.cols{grid-template-columns:200px minmax(0,1fr) 200px}}
  @media(min-width:1420px){.cols{grid-template-columns:240px minmax(0,1fr) 240px}}
  /* the board since phase 5: the left rail held only an ad placeholder, so one rail, on the right */
  @media(min-width:1180px){.cols.one-rail{grid-template-columns:minmax(0,1fr) 200px}}
  @media(min-width:1420px){.cols.one-rail{grid-template-columns:minmax(0,1fr) 240px}}
  .rail{display:none}
  @media(min-width:1180px){
    .rail{display:block;position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:hidden}
  }
  .rail .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:14px}
  /* EXPLORE iPREDICTA (16 Oct 2026, build-static-text.mjs): a visible section in the static part of the home,
     /compare/ and /markets/, the same in the HTML and on screen. Cards like the rail's box. */
  .guide{margin:34px 0}
  .guide-grid{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .guide-grid li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0}
  .guide-grid a{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
  .guide-grid a:hover,.guide-grid a:focus-visible,.guide-links a:hover,.guide-note a:hover{color:var(--cobalt);text-decoration:underline}
  .guide-grid p{margin:5px 0 0;color:var(--ink-2);font-size:.88rem;line-height:1.5}
  .guide-grid .gd{display:block;margin-top:4px;font-size:.78rem;color:var(--ink-3)}
  .guide-note{margin:0 0 10px;color:var(--ink-2);font-size:.9rem;line-height:1.55;max-width:72ch}
  .guide-note a,.guide-links a{color:var(--ink);font-weight:600}
  .guide-links{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem}
  @media(max-width:560px){.guide-grid.hubs{grid-template-columns:1fr 1fr;gap:10px}.guide-grid.hubs li{padding:12px}.guide-grid.hubs p{font-size:.84rem}}
  .rail h3{margin:0 0 6px;font-size:.96rem}
  .rail p{margin:0;color:var(--ink-2);font-size:.86rem}
  /* rows */
  .exp{padding:14px 12px 16px;background:var(--sunk);border-top:1px solid var(--line)}
  .nochart{background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:13px;color:var(--ink-2);font-size:.85rem;line-height:1.5}
  .tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:.88rem}
  .tbl th{text-align:right;color:var(--ink-3);font-weight:500;font-size:.78rem;padding:0 8px 6px}
  .tbl th:first-child{text-align:left}
  .tbl td{padding:9px 8px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
  .tbl td:first-child{text-align:left;font-weight:500}
  /* THE VENUE TABLE STACKS ON A PHONE (28 Sep 2026). Six columns were 437px wide inside a 358px card
     expansion at 390px, and the page scrolled sideways the moment a reader tapped a market. Each row
     becomes a small grid: venue and its button on the first line, the four figures under it, each
     with its own label (the header row is hidden visually, kept for screen readers). Fits, rather
     than scrolling inside the panel, which a reader would have to discover. */
  @media(max-width:560px){
    .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    .tbl, .tbl tbody{display:block}
    .tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line)}
    .tbl td{display:block;border-top:0;padding:0;text-align:left;min-width:0}
    .tbl td:first-child{grid-column:1;grid-row:1;align-self:center}
    .tbl td.act{grid-column:2;grid-row:1;justify-self:end}
    .tbl td[data-label]::before{content:attr(data-label);display:block;color:var(--ink-3);font-size:.72rem;font-weight:500}
  }
  .btn{display:inline-block;padding:6px 13px;border-radius:7px;font-size:.82rem;font-weight:600;text-decoration:none}
  .btn.trade{background:var(--cobalt);color:#fff} .btn.visit{background:var(--sunk);color:var(--ink-2);border:1px solid var(--line)}
  .fine{color:var(--ink-3);font-size:.78rem;margin-top:10px;line-height:1.5}
  .gate{color:var(--ink-2);font-size:.8rem;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
  /* analysis */
  .an{display:grid;gap:14px;grid-template-columns:1fr}
  @media(min-width:700px){.an{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.an{grid-template-columns:repeat(3,1fr)}}
  .ac{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;display:block}
  .ac:hover{border-color:var(--cobalt)}
  .ac img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sunk)}
  .ac .b{padding:12px 13px 14px}
  .ac .cat{display:block;font-size:.74rem;font-weight:600}
  .ac h3{margin:5px 0 6px;font-size:.98rem;font-weight:600;line-height:1.3}
  .ac p{margin:0;color:var(--ink-2);font-size:.86rem;line-height:1.45}
  .ac .d{color:var(--ink-3);font-size:.76rem;margin-top:8px}
  /* trade + featured */
  .trade{background:var(--navy);color:var(--on-navy);border-radius:var(--r);padding:26px 22px;margin:34px 0}
  .trade h2{color:#fff;margin-bottom:14px}
  .tg{display:grid;gap:18px;grid-template-columns:1fr}
  @media(min-width:800px){.tg{grid-template-columns:repeat(3,1fr)}}
  .tg h3{margin:0 0 5px;font-size:.98rem;color:#fff}
  .tg p{margin:0;color:var(--on-navy-2);font-size:.88rem;line-height:1.5}
  .fi{text-align:center;padding:30px 0 10px;border-top:1px solid var(--line);margin-top:34px}
  .fi .eyebrow{color:var(--ink-3);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
  .fi .outlets{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin-top:14px}
  .fi .outlets a{color:var(--ink-2);font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1.02rem;text-decoration:none}
  .fi .outlets a:hover{color:var(--cobalt)}
  .fi .note{color:var(--ink-3);font-size:.78rem;margin-top:12px}
  footer{background:var(--navy);color:var(--on-navy-2);margin-top:38px;padding:26px 0;font-size:.84rem}
  .banner{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cobalt);border-radius:var(--r);padding:10px 14px;font-size:.88rem;margin-bottom:6px}
  .banner.stale{border-left-color:var(--ink-3)} .banner.refused{border-left-color:var(--down)}

  .chartwrap{background:var(--sunk);border:1px solid var(--line-soft);border-radius:8px;padding:8px 9px 6px;margin-bottom:10px}
  .chartwrap .spark{display:block}
  .chartnote{font-size:10.5px;color:var(--ink-3);margin-top:5px;line-height:1.4}
  .chartnote i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:5px}
  .exp .chartwrap{padding:12px 14px 10px}
  .exp .chartnote{font-size:.78rem}

  /* ── HOVER PANEL. One component, both pages, so they cannot drift. ──────────
     Floating, follows the pointer, and pointer-events:none so it never steals a
     click from the row underneath: hover previews, click expands. */
  .pop{position:fixed;z-index:80;width:320px;background:var(--card);color:var(--ink);border:1px solid var(--line);
       border-radius:var(--r);box-shadow:0 22px 56px rgba(10,22,51,.22);padding:14px;display:none;pointer-events:none}
  .pop[data-open]{display:block}
  .pop h3{margin:0 0 2px;font-size:14px;font-weight:600;line-height:1.3;font-family:'Inter Tight',Inter,sans-serif}
  .pop .sub{font-size:11px;color:var(--ink-3);margin-bottom:9px}
  .pop .leg{display:flex;gap:10px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-2);margin-bottom:9px}
  .pop .leg i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:5px}
  .pop .nochart{font-size:11px;line-height:1.45;color:var(--ink-2);background:var(--sunk);
                border:1px dashed var(--line);border-radius:7px;padding:9px 10px;margin-bottom:10px}
  .pop .phead,.pop .vr{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center}
  .pop .phead{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding-bottom:5px}
  .pop .vr{padding:5px 0;border-top:1px solid var(--line-soft);font-size:12.5px}
  .pop .vr .d{width:8px;height:8px;border-radius:50%}
  .pop .vr .num{font-variant-numeric:tabular-nums;font-weight:600;min-width:46px;text-align:right}
  .pop .pw{margin:9px 0 0;font-size:11px;color:var(--ink-2);line-height:1.45}
  .pop .hint{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-soft);font-size:10.5px;color:var(--cobalt)}
  /* No hover panel on touch: there is no hover, and a panel that opens on tap eats the tap. */
  @media (hover:none){ .pop{display:none !important} }

  /* The highlight card and the dense row were removed on 20 Sep with their rules: the board is
     one grid of equal cards now, so `.hl`, `.hc`, `.blk`, `.grp`, `.row` and their children were
     dead. `.row .mv` went with them, which also cleared a collision with midterms-views.css that
     check-style-collisions found and my own audit had missed. */
  /* ── HOME PAGE SECTIONS ─────────────────────────────────────────────────────
     The home page was the board with furniture on top: after the highlights it ran the full
     grouped board, hundreds of rows, most of them contests with a 0pp gap between two identical
     prices. The board page exists for that. Here a section is six to twelve CARDS and then a
     link to the page that carries the rest. */
  .sec{margin:30px 0}
  .tintband{background:var(--sunk);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
        padding:2px 0 8px;margin:30px 0}
  .tintband .sec{margin:22px 0 18px}
  .why{margin:2px 0 14px;font-size:.84rem;line-height:1.5;color:var(--ink-2);max-width:74ch}
  .grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  @media(min-width:760px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  /* Rows of six, as design 7 has them (redesign v2, 29 Sep). */
  @media(min-width:1100px){ .grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
  /* INSIDE THE RAILS, FEWER COLUMNS. The mockup's grid spans the full content width, so its
     six cards are about 215px each. The board puts the same grid between two 240px rails, which
     halves that: at six columns the card was ~105px and the venue row clipped to "Kalshi 24.0".
     The card is the design's unit, so the column count gives way, not the card. */
  .cols .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media(min-width:900px){ .cols .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media(min-width:1380px){ .cols .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
  /* the venue row wraps rather than clipping, if a name is long */
  .m .vrow{flex-wrap:wrap;row-gap:2px}
  @media(min-width:1100px){ .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))} }
  /* The expansion spans the whole grid row rather than becoming another cell. */
  .grid .exp{grid-column:1/-1}
  /* PLACEHOLDERS, one per section, drawn before any data (23 Sep 2026). The page used to stay
     blank below the strapline until its slowest source answered; now each section shows its own
     shape at once and fills when its own data lands. Class `.skel`, never `.m`: a placeholder must
     not count as a card to anything that counts cards, the rendered-page check included. */
  .skel{border-radius:var(--r);background:var(--sunk);border:1px solid var(--line-soft);min-height:150px;
        animation:skelpulse 1.6s ease-in-out infinite}
  /* HEIGHTS ARE THE REAL CARDS', measured on the rendered preview 23 Sep at 390, 768 and 1512px,
     so a placeholder occupies what its card will. Change a card's height and these must follow, or
     the page will jump again: check-rendered-pages --measure prints the CLS that says so. */
  .skel.mover{min-height:228px}
  .skel.solo{min-height:201px}
  .skel.market{min-height:263px}
  .skel.fixture{min-height:284px}      /* 208 (two venues) to 359 (seven); the midpoint */
  .skel.article{min-height:400px}
  .skel.line{min-height:40px}
  @media (max-width:759px){ .skel.mover{min-height:244px} .skel.solo{min-height:217px} .skel.line{min-height:81px} }
  .stack .skel + .skel{margin-top:10px}
  @keyframes skelpulse{0%,100%{opacity:1}50%{opacity:.55}}
  @media (prefers-reduced-motion: reduce){ .skel{animation:none} }
  /* A SOURCE THAT FAILED says so in its own sections and only there. */
  .loadfail{grid-column:1/-1;margin:0;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r);
            color:var(--ink-2);font-size:.9rem}
  /* THE FIXTURE GRID SIZES ITSELF FROM THE CARD, NOT FROM THE BREAKPOINTS (23 Sep 2026). A fixture
     card is a table: a venue column, one column per outcome and a margin column. Measured at 390px
     the shared .grid.four gave it 173px and all seven venue rows ran past the card edge. A
     three-way table needs about 330px, so the grid places as many 330px cards as fit: one on a
     phone, four on a wide desktop, and never a card narrower than its table. */
  .grid.fxg{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}

  .m{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
     background:linear-gradient(180deg,#FFFFFF 0%,#F9FAFE 100%);
     border:1px solid rgba(10,22,51,.07);border-radius:12px;padding:11px 11px 10px;
     display:flex;flex-direction:column;gap:8px;min-height:196px;position:relative;overflow:hidden;
     box-shadow:0 1px 2px rgba(10,22,51,.04),0 8px 24px rgba(10,22,51,.05);
     transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .m::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc,var(--cobalt));opacity:.9}
  .m[data-pair]:hover{transform:translateY(-3px);border-color:rgba(47,107,255,.35);
     box-shadow:0 2px 4px rgba(10,22,51,.05),0 18px 40px rgba(10,22,51,.12)}
  .m .cat{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-2)}
  /* THE CATEGORY LABEL IS A FILLED PILL, white on the category's colour (owner, 16 Oct 2026): a navy or grey label in
     coloured text read as body text. White clears 4.5:1 on all eight category colours (4.99:1 or more). */
  .catp{display:inline-block;color:#fff;background:var(--acc,var(--cobalt));border-radius:999px;padding:2px 7px;line-height:1.3;margin-right:6px}
  .m .q{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}

  /* TWO SEGMENTS, ONE PER VENUE. A single fill was read as one venue, which is what it looked
     like. Each segment is that venue's buy price in its own colour. */
  /* Two thin tracks, stacked, each filled to that venue's buy price. Side by side they were two
     equal halves whatever the prices were, which said nothing; stacked, the difference between
     the two fills IS the disagreement and needs no number read. */
  .bars{display:flex;flex-direction:column;gap:3px}
  .bars i{display:block;height:4px;border-radius:3px;background:var(--sunk);overflow:hidden}
  .bars i b{display:block;height:100%;border-radius:3px}

  /* Both venues, named and priced, on the face of every card. */
  .m .vrow{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:var(--ink-2)}
  .m .vrow span{display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
  .m .vrow i{width:6px;height:6px;border-radius:50%;flex:none}
  .m .vrow b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

  /* THE DARK PRICE BLOCK, the thing the mockup's weight sits in.
     IT STACKS, ALWAYS. Side by side, the figure and the chart fought for a card that is about
     105px wide on a six-column grid: the chart overflowed the card and the venue names were
     clipped to "1.1c / .0c", which reads as a rendering fault rather than a narrow column. A
     media query did not fix it because the constraint is the CARD's width, not the viewport's.
     Stacking removes the competition instead of refereeing it. */
  .m .blk{background:var(--price);color:var(--on-navy);border-radius:8px;padding:9px 10px;
          display:flex;flex-direction:column;gap:7px;margin-top:auto;overflow:hidden}
  .m .fig{font-family:'Inter Tight',Inter,sans-serif;font-size:25px;font-weight:600;
          letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
  .m .fig small{font-family:Inter,sans-serif;font-size:10px;font-weight:500;color:var(--on-navy-2);
                letter-spacing:0;margin-left:5px}
  /* Design 7 puts the price and its line on one row, with the movement chip below. The figure
     keeps its intrinsic width and the line takes whatever is left, so a four-character price and
     a six-character one both leave a usable chart rather than the line collapsing on the longer. */
  .m .figrow{display:flex;align-items:center;gap:10px;min-width:0}
  .m .figrow .fig{flex:none}
  .m .figrow .line{flex:1 1 auto;min-width:0}
  .m .line{width:100%;opacity:.95;overflow:hidden}
  .m .line .spark{display:block;width:100%}
  /* No chart yet: both venues' prices side by side, so the block has substance rather than a
     flat line, and each name sits with its own colour. */
  .m .pair{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--on-navy-2)}
  .m .pair span{display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
  .m .pair i{width:5px;height:5px;border-radius:50%;flex:none}
  .m .pair b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

  .m .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
           font-size:10.5px;color:var(--ink-3)}
  .m .gp{font-weight:600;color:var(--cobalt);font-variant-numeric:tabular-nums}
  .m .gp.flat{font-weight:400;color:var(--ink-3)}
  /* The single-venue card is the same card with the two-venue parts absent, not a different
     one. It is an <a> rather than a <button> because there is no expansion to open: one venue,
     one price, and the link goes to that venue. */
  .m.solo{text-decoration:none}
  .m.solo .cat{text-transform:capitalize}
  .m.solo .vrow{justify-content:flex-start}
  .m.solo .foot .gp.flat{font-style:normal}

  /* fixture card: three outcome rows, no pair to expand */
  .m.fx{cursor:default;min-height:150px}
  /* A fixture is sport: its rule and label take the sports teal (16 Oct 2026; the rule was the Polymarket purple). */
  .m.fx::before{background:var(--acc,var(--cat-sports))}
  .m.fx .catp{background:var(--acc,var(--cat-sports))}
  .fr{display:flex;align-items:center;justify-content:space-between;gap:8px;
      border-top:1px solid var(--line-soft);padding-top:5px}
  .fn{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fp{display:flex;gap:4px;flex:none}
  /* venue rows, outcome columns, margin last; columns are set inline from the outcome count */
  .fxh,.fxr{display:grid;gap:6px;align-items:center;font-size:11.5px;font-variant-numeric:tabular-nums}
  .fxh{color:var(--ink-3);font-size:10.5px;padding-bottom:2px}
  .fxr{border-top:1px solid var(--line-soft);padding-top:4px}
  .fo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  .fv{display:flex;align-items:center;gap:5px;min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fv i{width:7px;height:7px;border-radius:50%;flex:none}
  .fvn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fxr b{text-align:right;font-weight:600}
  .fxr .flat{text-align:right}
  .fw{text-align:right;color:var(--ink-3);white-space:nowrap}
  .fxr.off .fv{color:var(--ink-3)}
  .fwhy{color:var(--ink-3);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}

  /* analysis beside where you can trade */
  .two{display:grid;gap:20px;grid-template-columns:1fr}
  @media(min-width:1000px){ .two{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)} }
  .ac .b{display:block;padding:12px 13px 14px}
  .ac .h3{display:block;margin:5px 0 6px;font-size:.98rem;font-weight:600;line-height:1.3;
          font-family:'Inter Tight',Inter,sans-serif}
  .ac .p{display:block;margin:0;color:var(--ink-2);font-size:.86rem;line-height:1.45}
  .an.stack{grid-template-columns:1fr}
  @media(min-width:640px){ .an.stack{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(min-width:1000px){ .an.stack{grid-template-columns:repeat(2,minmax(0,1fr))} }

  /* show more, for the small markets grid */
  .more{display:block;width:100%;margin:12px 0 0;padding:11px 14px;font:inherit;font-size:.9rem;
        font-weight:600;color:var(--cobalt);background:var(--card);border:1px solid var(--line);
        border-radius:var(--r);cursor:pointer}
  .more:hover{border-color:var(--cobalt);background:var(--cobalt-soft)}

  /* the venue name on a dense row, next to its dot */

  /* more-markets: grid beside a single rail, as design-7 has it. The home page no longer has
     rails either side of a board, because it no longer has a board. */
  .cols2{display:grid;gap:22px;grid-template-columns:1fr}
  @media(min-width:1180px){ .cols2{grid-template-columns:minmax(0,1fr) 240px} }
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
  .tabs button{appearance:none;font:inherit;font-size:.82rem;font-weight:500;color:var(--ink-2);
               background:var(--card);border:1px solid var(--line);border-radius:999px;
               padding:5px 12px;cursor:pointer;white-space:nowrap}
  .tabs button em{font-style:normal;color:var(--ink-3);font-size:.76rem;margin-left:3px}
  .tabs button:hover{border-color:var(--cobalt);color:var(--ink)}
  .tabs button[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
  .tabs button[aria-pressed="true"] em{color:rgba(255,255,255,.72)}
  /* the trade block sits in a column here, not across the page */
  .two .trade{margin:0}

  /* ── THE FILTER BAR ─────────────────────────────────────────────────────────
     Load-bearing rather than decoration: a grid of 777 equal cards cannot be used without it.
     Sticky, because the control you need is the one you scrolled away from. */
  .fb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 10px;
      position:sticky;top:0;z-index:20;background:var(--page);padding:10px 0;
      border-bottom:1px solid var(--line-soft)}
  .fq{flex:1 1 260px;min-width:0;font:inherit;font-size:.9rem;padding:9px 12px;
      border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit}
  .fq:focus{outline:2px solid var(--cobalt);outline-offset:-1px;border-color:var(--cobalt)}
  .fg{display:flex;gap:6px;flex-wrap:wrap}
  .fg button{appearance:none;font:inherit;font-size:.82rem;font-weight:500;color:var(--ink-2);
             background:var(--card);border:1px solid var(--line);border-radius:999px;
             padding:6px 12px;cursor:pointer;white-space:nowrap}
  .fg button em{font-style:normal;color:var(--ink-3);font-size:.76rem;margin-left:3px}
  .fg button:hover{border-color:var(--cobalt);color:var(--ink)}
  .fg button[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
  .fg button[aria-pressed="true"] em{color:rgba(255,255,255,.72)}
  .fs{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-2);white-space:nowrap}
  .fs select{font:inherit;font-size:.85rem;padding:7px 9px;border:1px solid var(--line);
             border-radius:8px;background:var(--card);color:inherit;cursor:pointer}
  .found{font-size:.8rem;color:var(--ink-3);margin:0 0 10px}

  /* header search: now the shared header's search (chrome.css), which searches markets in place. */

  /* ── THE DARK DISAGREEMENT CARD, the mockup's .g ─────────────────────────────
     Navy, the number large and on the right, venues as pills. It carries no chart because the
     mockup's does not: the strip states the claim and the card beneath it is the evidence. */
  .gaps{display:grid;gap:10px;grid-template-columns:1fr}
  @media(min-width:700px){ .gaps{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(min-width:1180px){ .gaps{grid-template-columns:repeat(4,minmax(0,1fr))} }
  .g{appearance:none;text-align:left;font:inherit;cursor:pointer;
     background:var(--navy);color:var(--on-navy);border:0;border-radius:var(--r);padding:12px 14px;
     display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
     transition:transform .18s ease,box-shadow .18s ease}
  .g:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,22,51,.22)}
  .g .q{font-family:'Inter Tight',Inter,sans-serif;font-size:13.5px;font-weight:600;color:#fff;
        line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .g .vs{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
  .g .vp{background:rgba(255,255,255,.12);color:#EEF3FC;font-size:10.5px}
  .g .vp b{color:#fff}
  .g .diff{text-align:right}
  .g .diff b{display:block;font-family:'Inter Tight',Inter,sans-serif;font-size:24px;font-weight:700;
             letter-spacing:-.04em;color:var(--cobalt-2);line-height:1}
  .g .diff span{font-size:10.5px;color:#C9D4EC;display:block}
  /* the expansion spans the strip when a dark card is opened */
  .gaps .exp{grid-column:1/-1}

  /* "only on iPredicta", the mockup's tag beside the strip heading */
  .tagc{display:inline-block;vertical-align:middle;margin-left:8px;font-size:10.5px;font-weight:600;
        letter-spacing:.02em;color:var(--cobalt);background:var(--cobalt-soft);
        border-radius:999px;padding:3px 9px}

  /* the move badge, shown only where the venue reported the figure */
  .mvbadge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
           font-variant-numeric:tabular-nums;white-space:nowrap}
  .mvbadge.up{background:var(--ch-mv-up-bg);color:var(--ch-mv-up)}      /* tokens: chrome.css */
  .mvbadge.down{background:var(--ch-mv-down-bg);color:var(--ch-mv-down)}
  .mvbadge::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:3px;vertical-align:-.13em;background:currentColor;-webkit-mask:var(--mvb-arrow) center/contain no-repeat;mask:var(--mvb-arrow) center/contain no-repeat}
  .mvbadge.up{--mvb-arrow:var(--ch-mv-arrow-up)}
  .mvbadge.down{--mvb-arrow:var(--ch-mv-arrow-down)}
  .m .blk .mvbadge{align-self:flex-start}
  /* the ticker's move badge sits on the navy tape */
  /* the venue legend on the reading line */
  .vleg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-left:14px;font-size:.78rem;color:var(--ink-3)}
  .vleg span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .vleg i{width:7px;height:7px;border-radius:50%;flex:none}

  /* each venue's own wording for its leg, where it differs from the question */
  .m .vrow .lw{font-style:normal;color:var(--ink-3);font-size:.68rem;font-weight:500;
               overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9em}
  .g .vp .lw{font-style:normal;color:#C9D4EC;font-size:.66rem;margin-left:3px}

  /* the tape needs air between the price, the move and the volume */

/* WHERE YOU CAN TRADE, by location (design 7's navy box). */
.tv{background:var(--navy);color:var(--on-navy);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.tv h3{margin:0;font-family:'Inter Tight',Inter,sans-serif;font-size:15.5px;font-weight:600;color:#fff}
.tv p{margin:0 0 4px;font-size:12.5px;color:var(--on-navy-2)}
.tv .tvr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.tv .tvr span{display:flex;flex-direction:column;gap:2px;min-width:0}
.tv .tvn{font-size:11px;color:var(--on-navy-2);font-weight:400}
.tv .tvcta{background:#fff;color:var(--bar);border-radius:6px;font-size:12px;font-weight:600;padding:7px 11px;text-decoration:none;min-height:32px}
.tv .tvf{font-size:11px;margin-top:4px}
.tv .tvg{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.tv .tvg a{color:#fff;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:6px 0}

/* THE APPROVED PRESS LOGO ROW (August band, signed off; restored 29 Sep). The rules are the
   previous home's .press-band-* rules, scoped to the redesign's band, values unchanged. */
.fi .press-band-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px;text-decoration:none;padding:2px 0}
.fi .press-band-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 34px}
.fi .press-band-logo-slot{display:flex;align-items:center;justify-content:center;height:22px}
.fi .press-band-logo{width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.45;transition:opacity .2s}
.fi .press-band-row:hover .press-band-logo{opacity:.72}
.fi .press-band-logo.is-light{filter:grayscale(1) brightness(0)}
.fi .press-band-logo-text{font-weight:600;font-size:.92rem;letter-spacing:.01em;color:var(--navy);opacity:.72}
@media(max-width:768px){.fi .press-band-row,.fi .press-band-logos{gap:12px 20px}.fi .press-band-logo{max-width:100px}}
@media(max-width:380px){.fi .press-band-row,.fi .press-band-logos{gap:12px 18px}.fi .press-band-logo{max-width:88px}}

/* THE KALSHI REFERRAL ROW (9 Oct 2026): one full-width cell under a Kalshi venue row. */
.tbl tr.ref td{border-top:0;padding:0 8px 8px;text-align:left;font-weight:400}
.tbl tr.ref .brd-ref{margin:0}   /* brd-ref, not kalshi-ref: that class belongs to ip-card.css */
@media (max-width:560px){ .tbl tr.ref{display:block;border-top:0;padding:0} .tbl tr.ref td{padding:0 0 8px} }