:root {
  --bg:#EBEEF2; --surface:#FBFCFD; --surface-2:#F1F4F7; --ink:#131A23;
  --ink-2:#4A5661; --ink-3:#7C8893; --line:#DCE2E8;
  --accent:#B26B1E; --kalshi:#0C7C7C; --poly:#5A57D1; --up:#1E8E5A; --down:#C4453F;
  --ref:#1C6DB4;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 8px 24px rgba(20,30,45,.05);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#0D1218; --surface:#151C24; --surface-2:#1B2530; --ink:#E7ECF1;
    --ink-2:#9BA8B4; --ink-3:#66727D; --line:#26313B;
    --accent:#D8973A; --kalshi:#2CA9A0; --poly:#8A88E6; --up:#3FB57E; --down:#E0655C;
    --ref:#6FB3E8;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="light"] {
  --bg:#EBEEF2; --surface:#FBFCFD; --surface-2:#F1F4F7; --ink:#131A23;
  --ink-2:#4A5661; --ink-3:#7C8893; --line:#DCE2E8;
  --accent:#B26B1E; --kalshi:#0C7C7C; --poly:#5A57D1; --up:#1E8E5A; --down:#C4453F;
  --ref:#1C6DB4;
  --shadow:0 1px 2px rgba(20,30,45,.06),0 8px 24px rgba(20,30,45,.05);
}
:root[data-theme="dark"] {
  --bg:#0D1218; --surface:#151C24; --surface-2:#1B2530; --ink:#E7ECF1;
  --ink-2:#9BA8B4; --ink-3:#66727D; --line:#26313B;
  --accent:#D8973A; --kalshi:#2CA9A0; --poly:#8A88E6; --up:#3FB57E; --down:#E0655C;
  --ref:#6FB3E8;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); }
.wrap {
  max-width:1080px; margin:0 auto; padding:40px 24px 64px;
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* masthead */
.mast { border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:8px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:600; }
.mast h1 { font-size:clamp(30px,5vw,46px); line-height:1.02; letter-spacing:-.02em; margin:8px 0 0;
  font-weight:800; text-wrap:balance; }
.mast .stamp { font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right;
  letter-spacing:.02em; }
.mast .stamp b { color:var(--ink-2); font-weight:600; }
.mast-prev { display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.04em; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.mast-prev:hover { border-bottom-color:var(--accent); }
.lede { color:var(--ink-2); font-size:14.5px; max-width:64ch; margin:14px 0 30px; line-height:1.5; }

/* KPI ribbon */
.ribbon { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:38px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px 16px 15px;
  box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink-3); }
.kpi-up::before { background:var(--up); } .kpi-down::before { background:var(--down); }
.kpi-warn::before { background:var(--accent); } .kpi-neutral::before { background:var(--poly); }
.kpi-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); }
.kpi-value { font-size:30px; font-weight:600; letter-spacing:-.01em; margin:7px 0 5px; line-height:1; }
.kpi-up .kpi-value { color:var(--up); } .kpi-down .kpi-value { color:var(--down); }
.kpi-warn .kpi-value { color:var(--accent); }
.kpi-sub { font-size:12px; color:var(--ink-2); line-height:1.35; }

/* sections */
section { margin-bottom:40px; }
.sec-head { display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
.sec-head .n { font-family:var(--mono); font-size:12px; color:var(--accent); font-weight:600; }
.sec-head h2 { font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0; }
.sec-note { color:var(--ink-3); font-size:12.5px; margin:0 0 18px; max-width:70ch; line-height:1.45; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:6px 20px; }

/* movers ledger */
.mv-row { display:grid; grid-template-columns:minmax(0,1fr) 118px 150px 74px; align-items:center;
  gap:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.mv-row:last-child { border-bottom:none; }
.mv-label { display:flex; align-items:center; gap:9px; min-width:0; }
.mv-title { font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-plat { font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 5px; border-radius:4px;
  letter-spacing:.03em; flex-shrink:0; color:#fff; }
.mv-plat.kalshi { background:var(--kalshi); } .mv-plat.polymarket { background:var(--poly); }
.mv-move { font-size:13px; color:var(--ink-2); text-align:right; white-space:nowrap; }
.mv-move .mv-from { color:var(--ink-3); } .mv-move .mv-to { color:var(--ink); font-weight:600; }
.mv-arw { color:var(--ink-3); margin:0 3px; }
.mv-track { position:relative; height:16px; }
.mv-axis { position:absolute; left:50%; top:-1px; bottom:-1px; width:1px; background:var(--line); }
.mv-bar { position:absolute; top:3px; height:10px; width:50%; display:flex; }
.mv-left { right:50%; justify-content:flex-end; } .mv-right { left:50%; }
.mv-fill { height:100%; border-radius:3px; }
.mv-fill.up { background:var(--up); } .mv-fill.down { background:var(--down); }
.mv-delta { text-align:right; font-size:13px; font-weight:600; }
.mv-delta.up { color:var(--up); } .mv-delta.down { color:var(--down); }

.empty { color:var(--ink-3); font-size:13px; padding:16px 0; }
.status { font-family:var(--mono); font-size:13px; color:var(--ink-3); padding:60px 24px; text-align:center; }

/* markets to watch (card grid) */
.watch .wl-star { color:var(--accent); }
.wl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.wl-card { display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:16px 18px; transition:transform .12s ease, border-color .12s ease; }
.wl-card:hover { transform:translateY(-2px); border-color:var(--ink-3); }
.wl-top { display:flex; align-items:center; gap:9px; min-width:0; }
.wl-plat { font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 5px; border-radius:4px;
  letter-spacing:.03em; flex-shrink:0; color:#fff; }
.wl-plat.kalshi { background:var(--kalshi); } .wl-plat.polymarket { background:var(--poly); }
.wl-title { font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.wl-body { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wl-price { font-size:34px; font-weight:600; letter-spacing:-.01em; line-height:1; color:var(--ink); }
.wl-move { font-size:14px; font-weight:600; }
.wl-move.up { color:var(--up); } .wl-move.down { color:var(--down); }
.wl-foot { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); padding-top:10px; }
.wl-window { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); }
.wl-asof { font-size:11px; color:var(--ink-3); }
.wl-asof.stale { color:var(--down); }

/* attention index (entity leaderboards, per platform side-by-side) */
.attn-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:12px 0 14px; }
.attn-tabs { display:flex; flex-wrap:wrap; gap:6px; }
/* Window picker sits opposite the type tabs, and drops to its own line when the
   tabs wrap. Styled as a sibling of .attn-tab so the row reads as one control. */
.attn-win { display:flex; align-items:center; gap:8px; margin-left:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); }
.attn-win-select { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 10px; cursor:pointer;
  transition:color .12s ease, border-color .12s ease; }
.attn-win-select:hover { color:var(--ink); border-color:var(--ink-3); }
.attn-win-select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* Only the selected window's words of the section blurb are shown. */
.attn-when { display:none; }
.attn-when.on { display:inline; }
.attn-tab { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:5px 12px; cursor:pointer; transition:color .12s ease, border-color .12s ease; }
.attn-tab:hover { color:var(--ink-2); border-color:var(--ink-3); }
.attn-tab.on { color:var(--accent); border-color:var(--accent); font-weight:600; }
.attn-card { padding:0; }
.attn-panel { display:none; }
.attn-panel.on { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.attn-col { padding:16px 18px; min-width:0; }
/* Columns stack on narrow viewports (auto-fit above), so the divider between
   them has to move from the side to the top. */
.attn-col + .attn-col { border-top:1px solid var(--line); }
@media (min-width:760px) {
  .attn-col + .attn-col { border-top:0; border-left:1px solid var(--line); }
}
.attn-col-head { display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px solid var(--line); }
.attn-plat-name { font-size:13px; font-weight:700; color:var(--ink); }
.attn-unit { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-left:auto; }
.attn-list { list-style:none; margin:0; padding:0; }
.attn-row { display:grid; grid-template-columns:18px minmax(0,1fr) 68px; grid-template-rows:auto auto auto;
  align-items:center; gap:3px 8px; padding:7px 0; border-bottom:1px solid var(--line); }
.attn-row:last-child { border-bottom:0; }
.attn-rank { grid-area:1/1/4/2; font-size:11px; color:var(--ink-3); }
.attn-name { grid-area:1/2/2/3; font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attn-bar { grid-area:2/2/3/3; height:3px; border-radius:2px; background:var(--surface-2); overflow:hidden; }
.attn-bar i { display:block; height:100%; background:var(--accent); opacity:.55; }
.attn-sub { grid-area:3/2/4/3; font-size:10.5px; color:var(--ink-3); }
.attn-vol { grid-area:1/3/4/4; font-size:12.5px; font-weight:600; color:var(--ink); text-align:right; }
.attn-empty { color:var(--ink-3); font-size:13px; padding:14px 0; margin:0; }

/* macro dashboard — key economic indicators */
.macro { margin-bottom:38px; }
.mac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px; }
.mac-tile { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:15px 17px 13px;
  transition:transform .12s ease, border-color .12s ease; }
.mac-tile:hover { transform:translateY(-2px); border-color:var(--ink-3); }
.mac-head { display:flex; align-items:flex-start; gap:8px; }
.mac-label { font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.01em;
  line-height:1.3; }
.mac-caveat { flex-shrink:0; margin-left:auto; width:15px; height:15px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-3);
  font-family:var(--mono); font-size:10px; font-weight:700; line-height:13px; text-align:center;
  cursor:help; }
/* Proportional figures, not tabular: at display size tabular-nums gives every
   digit a zero's width and a value like "3.36%" reads loose. */
.mac-value { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.05;
  color:var(--ink); margin-top:2px; }
.mac-wait { font-size:13px; font-weight:500; color:var(--ink-3); line-height:1.35;
  margin-top:6px; min-height:33px; display:flex; align-items:center; }
/* On a probability tile this carries the market's own number ("71% implied")
   while the big line carries the named outcome. It has to hold its own against
   the tinted comparator below, which states the SAME quantity — so it matches
   that figure's weight and stays in plain ink: the market's number, not the
   outside one. */
.mac-sub { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-2); }
/* Neutral by design — see app.js: "up" has no universal valence for a macro
   forecast, so direction is carried by the arrow, not by colour. */
.mac-delta { font-family:var(--mono); font-size:11px; color:var(--ink-3); min-height:14px; }
/* External comparator. Its own register beneath the market's number: the tile's
   big figure is the prediction market, this block is the outside world's view of
   the same quantity. The comparator is tinted --ref (blue) so the eye reads it as
   a different KIND of number rather than a competing headline — it stays half the
   market figure's size and keeps its own "vs <source>" line, so the hierarchy
   says which is which. The gap gets a chip: raised enough to find at a glance,
   but neutral ink, never up/down — a market above or below a forecast is not good
   or bad news (same reasoning as .mac-delta). */
.mac-ref { margin-top:2px; padding-top:8px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:3px; }
.mac-ref-src { font-size:10.5px; color:var(--ink-3); line-height:1.3; }
.mac-ref-src b { font-weight:600; color:var(--ref); }
.mac-ref-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-family:var(--mono); }
.mac-ref-val { font-size:15px; font-weight:700; color:var(--ref); letter-spacing:-.01em; }
.mac-ref-gap { font-size:10.5px; font-weight:600; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:2px 7px;
  white-space:nowrap; }
/* A basis label ("2026 Q3 avg") is not a gap — the producer withholds the gap
   there on purpose — so it stays quiet text and out of the chip, which would
   dress a description up as a measured difference. */
.mac-ref-basis { font-size:10.5px; color:var(--ink-3); }
/* margin-top:auto pins the footer to the card floor. Grid rows stretch every
   tile to the tallest in the row, and only some tiles carry a .mac-ref — so
   without this the period/resolves line floats mid-card on the ones that
   don't, and the row stops reading as a row. */
.mac-foot { display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  margin-top:auto; padding-top:9px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.mac-period { font-weight:700; color:var(--ink-2); letter-spacing:.02em; }
.mac-resolves { text-align:right; }