:root {
/* theme-lock 2026-08-30 (operator: peach renders lightness-INVERTED in
Firefox - measured: every var is our own palette with L flipped and hue
kept, which no engine does and no extension-free browser produces).
The peach block already declared its scheme; the DARK theme declared
nothing, so the page never advertised that it HAS a dark mode. That
declaration is the standards-based signal a dark-mode extension - and the
browser's own auto-dark - reads before forcing one on. The vendor
in the page shells is the belt to this
one's braces. It also closes the real side effect of the omission: native
scrollbars, form controls and spinners were painted LIGHT on the dark
theme, because the UA had nothing telling it otherwise. */
color-scheme: dark;
/* hm-ring-contrast 2026-09-05 (moved here by ROOT .924): the two inks a
marked heatmap tile picks between for its ring, chosen per tile against
the venue colour underneath. Tokens, so the card carries no literal. */
--hm-ring-light: #ffffff;
--hm-ring-dark: #0b1220;
--bg: #0b1020;
--panel: #141b33;
--panel-2: #1c2547;
--text: #e6ebff;
/* peach-news-ink .849: one step STRONGER than --text, for text that must
read as the primary ink of a dense list. Defined in every theme per the
graphical tenet (a value that lives in only one theme block is invisible
to the others). On dark, stronger = brighter. */
--text-strong: #f4f7ff;
--muted: #8a96c4;
/* text-soft 2026-07-10 (operator): a higher-contrast "muted" for secondary
card text (mkt-card label/note/ctx) that washed out against --panel — sits
between --muted and --text so the hierarchy vs the big value figures holds.
Every theme MUST redefine it (graphical tenet). */
--text-soft: #b6c0e8;
--accent: #2dd4bf;
/* LMTLS 2026-06-10: Limitless brand lime, sampled from static/market-logos/limitless.png */
--limitless-yellow: #C3FF00;
--limitless-black: #0a0a0a;
--kalshi: #60a5fa;
--sxbet: #ec4899;
--limitless: #f97316;
--whale: #f472b6;
--mint: #6ee7b7; /* Build .282: mint green for the "...to KNOW" tagline clause */
/* cal-green 2026-08-22 (operator: "turn the FLIGHT CALENDAR dots to green
hues instead of yellow"). ALIASED to --mint rather than given its own hex:
--mint is already redefined in the peach block (#059669, legible on cream),
so the theme twin comes free and can never drift out of sync. Named
separately so the calendar can diverge from the tagline later without
touching either. Verified in a browser that a var()-valued custom property
DOES resolve through getComputedStyle - the calendar reads this from JS,
and an unresolved "var(--mint)" would reach the SVG fill as a garbage
string and paint nothing. */
--mt-cal-coin: var(--mint);
--jackpot: #fbbf24;
--danger: #ef4444;
--success: #4ade80;
/* parlay-ink 2026-09-07 (operator: "in parlays and combos name the data for
IMPLIED and MULTIPLYER bolder and paint IMPLIED deep blue and MULTIPLYER
deep green"). TOKENS, not two literals in the templates: both parlay
surfaces render on BOTH themes, and "deep" inverts between them — a deep
navy/forest that reads on peach cream is invisible on the dark card, so
the dark theme takes the deepest tone that still passes AA there.
MEASURED IN CHROMIUM (getComputedStyle, on the assembled real cascade),
against the background each surface ACTUALLY paints — which is not the
same one twice: the dashboard's parlay TABLE paints var(--panel) itself,
while the standalone board's rows sit on the bare .etand-card.
surface / theme bg implied multiplier
dash dark (table) #141b33 #60a5fa 6.69 #22c55e 7.47
dash peach (table) #FFE3D6 #1e40af 7.15 #166534 5.84
board dark (card) #1e293b #60a5fa 5.75 #22c55e 6.42
board peach (card) #fffaf2 #1e40af 8.39 #166534 6.86
Worst case 5.75:1 — every cell clears AA for normal text. The browser
re-measures all eight, per theme, in
tests/sanity/test_parlay_implied_mult_ink.py, so a later background
change cannot quietly drop one below the line. */
--parlay-implied-ink: #60a5fa;
--parlay-mult-ink: #22c55e;
--border: #2a3566;
--chip-ink: #0b1020; /* P3 2026-06-12: dark ink for text on BRIGHT brand-color chips (teal/pink/amber). Theme-agnostic — chip backgrounds are bright in BOTH dark + peach, so peach inherits this (no override needed), same precedent as --source-tint. */
/* Phase C: board palette — et-gold is new; others alias existing vars */
--et-gold: #D4AF37;
/* hm-podium .934 (operator: three square gold / silver / bronze buttons beside
the minimised heatmap for the 24h money podium). Dark values here; peach
rebinds all three, because the light metallics measure 1.26:1 on the peach
panel. Within each theme the three are >= 45 apart in RGB so the ranks never
read as one hue, and each is >= 4.5:1 on its own panel (measured in the
patch that added them; re-measured by test_hm_podium.py). */
--medal-1: #facc15;
--medal-2: #cbd5e1;
--medal-3: #e2954f;
/* P4 2026-06-14: venue brand sub-system — colors that recur 10+ times in the file,
elevated to vars so theme toggles + future re-skinning are single-edit. */
--platform-manifold-brand: #a78bfa;
--platform-polyus-brand: #38bdf8;
/* P4 2026-06-14: long-tail tokens — promoted from 3-7x-repeated bespoke hex. */
--white: #ffffff; /* pure white for high-contrast text on dark/brand chips */
--bg-deeper: #0c1a3a; /* deeper navy used in radial gradients + overlays */
--accent-deep: #0d9488; /* teal-600, darker accent for dense ink contexts */
--source-tint: rgba(0,0,0,0.22); /* Build .284: subtle dark backing behind Marketplace Activity source cells; theme-agnostic black-alpha (reads on dark + peach). Build .286: deepened 0.10 -> 0.22 for stronger venue-name contrast. */
--live-bg: rgba(239, 68, 68, 0.18); /* Build .287: theme-agnostic red-alpha backing for the 🔴 LIVE in-play badge (sx.bet); composites over dark + peach. */
--chip-halo: rgba(0,0,0,0.9);
--mbn-bg: rgba(13,19,40,0.96); /* mtabs 2026-07-04: mobile bottom-nav backdrop (navy-alpha; peach rebinds to cream-alpha) */ /* Build .288: dark text-halo so colorful Marketplace venue names pop against their same-hue colorful chip background. Theme-agnostic (a dark outline reads on dark + peach). */
/* ── P4 2026-06-14: design tokens (the polish layer's foundation) ──────── */
/* TYPE — 6-step tabular-grid scale (aligned to a 6px rhythm) */
--t-micro: 11px;
--t-body: 13px;
--t-meta: 16px;
--t-h: 20px;
--t-section: 28px;
--t-hero: 44px;
/* RADIUS — canonical 3-step scale (collapses 20 ad-hoc values to 3) */
--r-chip: 3px;
--r-card: 8px;
--r-pill: 999px;
/* ELEVATION — three tiers, theme-var driven */
--e-1: 0 1px 0 var(--border);
--e-2: 0 1px 0 var(--border), 0 0 0 1px var(--border) inset;
--e-3: 0 0 18px color-mix(in srgb, var(--jackpot) 28%, transparent);
/* MOTION — semantic durations (not decorative timings) */
--m-tick: 1s linear;
--m-flash: 600ms ease-out;
--m-flip: 260ms ease-in-out;
--m-tab: 120ms ease;
/* TYPE FACES — self-hosted (Task 2 adds the @font-face declarations) */
--f-led: "DSEG7 Classic", ui-monospace, Menlo, monospace;
--f-num: "IBM Plex Mono Condensed", ui-monospace, monospace;
--f-text: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
/* SEMANTIC PALETTE — meaning, not color (decoupled from brand vars) */
--c-money: var(--jackpot); /* AMBER — $ amounts, arb edge, payouts, liquidity */
--c-time: var(--accent); /* TEAL — countdowns, live status, going-live */
--c-wallet: var(--whale); /* PINK — whales, smart money, hall-of-fame */
/* sizing 2026-08-10 — Risk Console band colors */
--sizing-under: var(--accent);
--sizing-near: var(--jackpot);
--sizing-over: var(--danger);
}
/* P4 2026-06-14: self-hosted webfonts (the --f-* tokens point here) */
@font-face {
font-family: "Inter Tight";
src: url("/static/fonts/InterTight-Variable.woff2") format("woff2-variations");
font-weight: 400 800;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "IBM Plex Mono Condensed";
src: url("/static/fonts/IBMPlexMonoCondensed-Regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
font-style: normal;
font-stretch: condensed;
}
/* P4 2026-06-14: type utility classes — apply at element level via templates.
tabular-nums everywhere so numeric content doesn't jitter on update. */
.is-text {
font-family: var(--f-text);
font-feature-settings: "tnum";
}
.is-num {
font-family: var(--f-num);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.is-led {
font-family: var(--f-led);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
}
/* P4 2026-06-14: semantic palette utility classes (decoupled from brand vars).
Use these on chips/numbers when you want the SIGNAL color, not the brand color. */
.c-money { color: var(--c-money); }
.c-time { color: var(--c-time); }
.c-wallet { color: var(--c-wallet); }
.bg-money { background-color: color-mix(in srgb, var(--c-money) 14%, transparent); }
.bg-time { background-color: color-mix(in srgb, var(--c-time) 14%, transparent); }
.bg-wallet { background-color: color-mix(in srgb, var(--c-wallet) 14%, transparent); }
/* P4 2026-06-14: utility-class attachments for selectors with many render sites */
.arb-cd-timer,
.rs-ttr {
font-family: var(--f-led);
font-feature-settings: "tnum";
letter-spacing: 0.03em;
}
.sig-amt,
.sig-score,
.cv-spread,
.se-edge,
.mkt-oi-val,
.mkt-vol-sub,
.jp-amount,
.tk-amount,
.evt-jp-date,
.ut-type-chip {
font-family: var(--f-num);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.plat-name,
.plat-sub,
.smh-h,
.ct-live-title,
.smh-tab,
.ct-tab,
.lq-tab {
font-family: var(--f-text);
}
* { box-sizing: border-box; }
/* ────────────────────────────────────────────────────────────────────
Build v.03 .31 build 159 (2026-05-23): GLOBAL HARD RULE — NO
HORIZONTAL SCROLL BAR EVER, on any viewport, any page, any layout.
This is non-negotiable. When ANY content tries to exceed the
viewport width, it must wrap, shrink, or be clipped — never push
the body wider than 100vw.
Belt + suspenders:
- overflow-x: clip on AND (clip is stricter than
hidden — it disables scrolling entirely, no programmatic
scrollLeft either)
- max-width: 100vw to prevent any child's intrinsic size from
widening the body
- Fallback to overflow-x: hidden on older browsers that don't
support `clip` (still ~99%+ now, but defensive)
If you're adding a new component and a horizontal scrollbar
appears, the BUG is in the component, not in this rule. Common
culprits:
with long lines,
with non-wrappable cells,
inline-block rows that can't shrink, fixed-width grids. Apply
`min-width: 0` to flex/grid children and `overflow-wrap: anywhere`
to text containers as needed.
──────────────────────────────────────────────────────────────── */
html, body {
overflow-x: clip;
max-width: 100vw;
}
@supports not (overflow-x: clip) {
html, body { overflow-x: hidden; }
}
body {
margin: 0;
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { margin: 0; font-size: 20px; letter-spacing: 0.02em; }
.brand-accent { color: var(--accent); font-weight: 700; }
.brand {
/* brand-tagline .508: column — the row wrapper alone sets the width (the
.507 flex-wrap version leaked one phantom 14px column-gap into the
intrinsic width: 358 vs the row's 344, measured live). */
display: flex; flex-direction: column; row-gap: 1px;
flex-shrink: 0; text-decoration: none; color: inherit;
}
/* brand-nudge 2026-07-19 (operator): the EventTracker block sits a little
closer to the PodComet logo (gap 14 → 6px) so the wordmark stops clashing
with the search bar to its right. */
/* hdr-brand-tagline 2026-07-20 (operator: "EventTracker logo + text is STILL
obscured by the search box and slogan box — move it a bit further left,
closer to the PodComet logo + text"). brand-nudge took the gap 14->6px; this
closes it to 2px and pulls the block a further 8px, so the wordmark's right
edge clears the centre zone by ~12px more than before. */
.brand-row { display: flex; align-items: center; gap: 2px; }
/* hdr-align .588 (operator, repeated: "EventTracker logo and text STILL haven't
moved left"). MEASURED not guessed: the PodComet logo has a 380-wide
viewBox but its ink ("Comet" + the AI·FEDERATED DATA sub-line) ends at
viewBox x=271 (getBBox in-browser) = 133px into its 186px box → ~53px of
built-in trailing whitespace. So the ET block sat ~47px from the visible
wordmark even with the boxes overlapping; -8px read as nothing. -45px puts
the stripes ~10px past "Comet"'s last letter. Overlapping the img box is
safe (transparent padding); at the 62px-logo breakpoint the whitespace
scales UP (~75px) so the gap only widens — never collides. Tagline start is
handled separately (.585: it lives in .meta, left edge = Peachy chip). */
.brand-etblock { margin-left: -45px; }
/* brand-tagline-span 2026-07-11: the bars+wordmark sub-column — the tagline
stretches to THIS block, i.e. exactly the stripes→wordmark span. */
.brand-etblock { display: flex; flex-direction: column; row-gap: 1px; min-width: 0; }
.brand-etrow { display: flex; align-items: center; gap: 14px; }
/* brand-tagline 2026-07-11 (operator, rev 2 — brand-tagline-span): strapline
spans the 3-BARS → the wordmark's final "r" (comet logo excluded); it
stretches to .brand-etblock, whose width is the stripes+wordmark row.
text-align-last justifies the words across that span (left-align fallback). */
.brand-tagline {
align-self: stretch;
/* brand-tagline-fit .510: width:0 excludes the tagline from .brand-etblock's
intrinsic width (safe here — column container, no wrapped-row gap quirk),
so the bars+wordmark row ALONE sizes the block; min-width:100% stretches
the tagline back to that span. Font calibrated to fill it: the string
measures 1877px per 100px of font → 7.5px ≈ 141px of the 145px span,
text-align-last closes the remainder. 10.5px overshot the wordmark by
59px (measured live on .509). */
width: 0; min-width: 100%;
font-size: 7.5px; font-weight: 600; letter-spacing: 0.02em;
text-transform: uppercase; white-space: nowrap;
color: var(--muted);
text-align-last: justify;
}
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 44px; width: auto; }
/* Build .69 (item #1): 0.8×0.8cm decorative box mirroring the three
primary ticker labels. Uses the exact same backgrounds as
.tl-events / .tl-whales / .tl-jackpot, so the visual identity
stays in sync if those CSS vars ever change. Sits on its own
--bg parent so the alpha-blend renders the same dark-teal /
pink / dark-brown the user sees on the ticker row.
Stripe widths: 87% / 100% / 74% — middle is 15% wider than top,
bottom is 15% narrower than top, per the spec. */
.brand-decoration {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 0.8cm;
height: 0.8cm;
padding: 1px 0;
background: var(--bg);
border-radius: var(--r-chip);
gap: 1px;
flex-shrink: 0;
}
.brand-stripe {
display: block;
height: calc(33.33% - 1px);
border-radius: var(--r-chip);
}
.brand-stripe-events {
width: 87%;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--kalshi) 45%, transparent));
}
.brand-stripe-whales {
width: 100%;
background: var(--whale);
}
.brand-stripe-jackpot {
width: 74%;
background: linear-gradient(180deg, color-mix(in srgb, var(--jackpot) 55%, transparent), color-mix(in srgb, var(--jackpot) 30%, transparent));
}
.brand-product { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand-product-name {
font-size: 16px; font-weight: 700; color: var(--text);
letter-spacing: 0.01em;
}
.brand-et-name { color: var(--whale); }
.beta-tag {
display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent);
background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 1px 6px; border-radius: var(--r-chip);
letter-spacing: 0.08em; vertical-align: middle; margin-left: 4px;
}
.tagline { font-size: 11px; color: var(--whale); font-style: italic; letter-spacing: 0.02em; }
h2 { font-size: 16px; color: var(--muted); margin: 24px 20px 12px; text-transform: uppercase; letter-spacing: 0.1em; }
h3 { font-size: 18px; color: var(--white); margin: 0 0 12px; font-weight: 800; letter-spacing: 0.02em; }
h3 .plat-name { font-size: 18px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
h3 .plat-sub { font-size: 14px; color: var(--white); font-weight: 700; }
/* h3 platform tinting */
.dv-chart h3 .plat-name { color: var(--accent); }
.visitor-card h3 .plat-name { color: var(--jackpot); }
h4.section-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 8px; }
.evt-chart-wrap { position: relative; height: 180px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 8px; }
.evt-chart-empty { font-size: 11px; color: var(--muted); padding: 8px 0; font-style: italic; }
/* Legacy top-strip styles kept only because some older selectors may still
reference them; the actual element no longer renders post-Phase-1 reorder. */
.top-strip { display: none; }
.ticker-strip { display: none; }
.ticker-row { display: none; }
/* Jackpot top-10 card sitting in the right half of the top strip */
.jackpot-top10-card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
padding: 10px 14px; max-height: none; overflow-y: visible;
border-top: 3px solid var(--jackpot);
}
.jackpot-top10-card .platform { margin-bottom: 8px; padding-bottom: 6px; }
.jackpot-list { list-style: none; margin: 0; padding: 0; counter-reset: jp; }
.jackpot-list .jp-row { counter-increment: jp; border-bottom: 1px solid var(--border); }
.jackpot-list .jp-row:last-child { border-bottom: none; }
.jackpot-list .jp-row-link {
display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 8px; align-items: baseline;
padding: 5px 4px; color: var(--text); font-size: 12px;
}
.jackpot-list .jp-row-link::before {
content: counter(jp);
font-family: monospace; font-size: 10px; color: var(--muted); text-align: right;
}
.jackpot-list .jp-row-link .sig-plat { font-size: 9px; padding: 2px 4px; align-self: center; }
.jackpot-list .jp-row-link:hover { background: var(--panel-2); text-decoration: none; }
.jackpot-list .jp-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jackpot-list .jp-row-amount { font-family: monospace; font-size: 11px; color: var(--jackpot); font-weight: 700; }
.plat-name.jackpot-name { color: var(--jackpot); }
.ticker-label {
font-size: 10px; letter-spacing: 0.12em; font-weight: 700; flex-shrink: 0;
padding: 2px 6px; border-radius: var(--r-chip);
}
.ticker-poly .ticker-label { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ticker-kalshi .ticker-label { background: color-mix(in srgb, var(--kalshi) 15%, transparent); color: var(--kalshi); }
.ticker-manifold .ticker-label { background: color-mix(in srgb, var(--platform-manifold-brand) 15%, transparent); color: var(--platform-manifold-brand); }
.ticker-sxbet .ticker-label { background: rgba(236,72,153,0.15); color: var(--sxbet); }
.ticker-limitless .ticker-label { background: rgba(249,115,22,0.15); color: var(--limitless); }
/* Legacy .ticker-item rule removed (was: flex:1; min-width:0; overflow:hidden).
That style was for the original per-platform top-strip ticker rows where
each row had a single .ticker-item child meant to fill remaining space.
Phase 1's reorder removed top-strip, but this rule was still inherited
by the marquee .ticker-item items inside .ticker-track. Combined with
flex layout on .ticker-track, it forced every marquee item to shrink to
1/N of the track width and clipped longer fields like titles. */
.ticker-link {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
color: var(--text); text-decoration: none; min-width: 0;
}
.ticker-link:hover .ticker-title { color: var(--accent); }
.ticker-title {
font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.ticker-vol { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ticker-placeholder { font-size: 11px; color: var(--muted); font-style: italic; }
@media (max-width: 800px) {
.ticker-strip { grid-template-columns: 1fr; }
}
/* Viewer pill — sticks to the bottom-right corner of the WEB PAGE (not the
viewport). Body is the offset parent, so absolute positioning anchors it
to the page bottom-right and it scrolls away with the page. */
body { position: relative; }
.viewer-pill {
position: absolute; right: 16px; bottom: 16px; z-index: 5;
background: rgba(13,19,40,0.92);
border: 1px solid var(--border); border-radius: var(--r-pill);
padding: 6px 12px; font-size: 11px; color: var(--text);
display: flex; align-items: center; gap: 6px;
box-shadow: 0 6px 24px rgba(0,0,0,0.35); cursor: pointer;
}
.viewer-pill:hover { border-color: var(--accent); }
.vw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); animation: vwPulse 1.8s infinite; }
@keyframes vwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.vw-total { font-weight: 700; font-size: 13px; color: var(--accent); }
.vw-all-unique { font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.vw-sep { color: var(--muted); opacity: 0.5; }
.vw-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.vw-flag { font-size: 11px; } /* .313: reduced for compact widget */
.vw-cc { color: var(--muted); width: 20px; font-variant-numeric: tabular-nums; font-size: 10px; }
.vw-n { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 10px; }
.vw-list { list-style: none; margin: 0; padding: 0; }
.vw-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-top: 1px solid rgba(255,255,255,0.04); font-size: 12px; }
/* Visitor globe card (bottom of page — replaces jackpot) */
.visitor-card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
padding: 14px 16px;
}
/* ─── Visitor card (bottom of page) ───
Layout: globe on left, stats panel on right.
Stats panel = 3-stat row (online / all-time unique / all-time visits)
on top, country list spanning full width on row 2. */
.visitor-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 18px; align-items: stretch;
}
.vw-globe-bottom {
width: 200px; height: 200px; margin: 0 auto;
border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 50% 50%, var(--bg-deeper) 0%, var(--bg) 100%);
display: flex; align-items: center; justify-content: center;
}
.vw-globe-bottom canvas { display: block; margin: auto; }
.vw-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 12px;
min-width: 0; /* let the country list shrink instead of overflowing right */
}
.vw-stat {
background: var(--panel-2); border-radius: var(--r-card); padding: 12px 10px;
text-align: center; min-width: 0;
}
.vw-stat-num {
font-family: monospace; font-size: 22px; font-weight: 800;
color: var(--accent); line-height: 1.1;
}
.vw-stat-lbl {
font-size: 10px; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.08em; margin-top: 4px;
}
/* admin-users-list 2026-08-20: the Registered-users stat is a link now -
keep the tile look, add only the affordance (vars only). */
.vw-stat-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.vw-stat-link:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
/* Build .300: sub-line under a stat label (e.g. "Since June 2026" under
returning visitors) — smaller + dimmer + sentence-case so it reads as a
footnote, not a second label. */
.vw-stat-sub {
font-size: 8px; color: var(--muted); opacity: 0.8;
letter-spacing: 0.03em; margin-top: 2px;
}
.vw-list.vw-list-bottom {
grid-column: 1 / -1; /* span all 3 stat columns on row 2 */
list-style: none; margin: 0; padding: 8px 0 0;
border-top: 1px solid var(--border);
max-height: 140px; overflow-y: auto;
font-size: 11px;
/* Reset older standalone styling that used to draw a left border */
border-left: none; padding-left: 0;
}
.vw-list.vw-list-bottom li {
display: flex; justify-content: space-between; align-items: center;
padding: 3px 4px;
}
@media (max-width: 800px) {
.visitor-body { grid-template-columns: 1fr; }
.vw-stats { grid-template-columns: repeat(3, 1fr); }
}
.vw-modal { max-width: 720px; width: 90vw; }
.vw-globe-big { width: 100%; height: 400px; border-radius: var(--r-card); overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--bg-deeper) 0%, var(--bg) 100%); margin: 12px 0; }
.vw-list-big { max-height: 180px; }
/* ─── Header ─── */
header {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
padding: 14px 20px; border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #101735, var(--bg));
}
.meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.alive-toggle {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-card);
cursor: pointer; font-size: 11px; color: var(--text); user-select: none;
}
.alive-toggle:hover { border-color: var(--accent); }
/* .403 (f): signed-in user indicator in the header (online dot + name → portfolio,
gear → account). Only rendered for authenticated users. */
.hdr-user {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 9px; background: var(--panel-2);
border: 1px solid var(--border); border-radius: var(--r-card);
font-size: 11px; max-width: 180px;
}
.hdr-user-dot {
width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: var(--success);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent);
animation: hdrUserPulse 2.4s ease-out infinite;
}
@keyframes hdrUserPulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}
.hdr-user-name {
color: var(--text); font-weight: 700; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.hdr-user-name:hover { color: var(--accent); }
.hdr-user-gear { color: var(--muted); text-decoration: none; flex: 0 0 auto; }
.hdr-user-gear:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hdr-user-dot { animation: none; } }
/* ── Right-side header cluster + Trackster mascot ───────────────────────────
.header-right groups the Telegram CTA + the three controls so they sit close
together (no space-between gap), and lets the mascot anchor the far corner. */
.header-right {
display: flex; align-items: center; justify-content: flex-end;
gap: 14px; flex-wrap: wrap; margin-left: auto;
}
/* hdr-brand-tagline 2026-07-20, re-homed .585: the tagline is now the last
child of .meta and wraps onto its own full-width row WITHIN .meta, so its
left edge is .meta's content-left = the Peachy chip's left edge (operator:
"begin on the left where the Peachy icon starts"). Plain left-align — no
more edge-to-edge justify, which belonged to the full-header-right span.
Theme-var colour; no literals. */
.hdr-tagline { flex: 1 0 100%; width: 100%; margin-top: 0; text-align: left;
color: var(--muted); font-size: 10.5px; letter-spacing: .01em; white-space: normal; }
@media (max-width: 900px) { .hdr-tagline { display: none; } }
/* Trackster waves in the top-right corner, above the right end of the tickers.
The arm-wave is a Lottie animation (damped-sine swing about the shoulder),
rendered by lottie-web into each .header-mascot container. */
.header-mascot {
flex: 0 0 auto; width: 112px; height: auto; align-self: flex-end;
aspect-ratio: 640 / 916; /* divs have no intrinsic size — size like the old */
margin: -4px -2px -16px 4px; /* lift a touch + let the feet sit on the ticker */
position: relative; z-index: 6; pointer-events: none; user-select: none;
}
.header-mascot svg { display: block; width: 100%; height: 100%; }
/* Trackster wears shades on DARK (default) and goes bare-faced on peachy/day. */
.header-mascot--day { display: none; }
:root[data-theme="peach"] .header-mascot--dark { display: none; }
:root[data-theme="peach"] .header-mascot--day { display: block; }
.alive-toggle input { accent-color: var(--accent); }
.alive-toggle:has(input:checked) { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent); }
/* Build v0.35 20260523.173 (2026-05-23): donation widget — replaces
the "Last updated:" timestamp in the top-right meta strip. The
button uses a warm gold-pink gradient so it pops against the cool
header background without screaming for attention. */
.donate-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-card);
font-size: 12px; font-weight: 700; color: var(--bg);
background: linear-gradient(135deg, var(--jackpot) 0%, var(--whale) 100%);
border: 1px solid color-mix(in srgb, var(--jackpot) 50%, transparent);
cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform 120ms ease, box-shadow 120ms ease;
text-decoration: none;
}
.donate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px color-mix(in srgb, var(--jackpot) 35%, transparent);
}
.donate-btn .donate-icon {
width: 16px; height: 16px; display: block; border-radius: var(--r-chip);
}
.donate-btn-disabled {
background: var(--panel-2);
color: var(--muted);
border-color: var(--border);
cursor: not-allowed; opacity: 0.55;
}
.donate-btn-disabled:hover { transform: none; box-shadow: none; }
/* Donation modal */
.donate-modal {
max-width: 540px;
}
.donate-title-icon {
width: 22px; height: 22px; vertical-align: -4px;
margin-right: 6px; border-radius: var(--r-chip);
}
.donate-intro {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 4px 0 16px 0;
}
.donate-wallet-block {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 12px 14px;
margin-bottom: 16px;
}
.donate-wallet-lbl {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.donate-wallet-row {
display: flex; align-items: center; gap: 8px;
}
.donate-wallet-addr {
flex: 1;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
color: var(--text);
padding: 6px 8px;
border-radius: var(--r-chip);
word-break: break-all;
user-select: all;
}
.donate-copy-btn {
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: var(--r-chip);
cursor: pointer;
white-space: nowrap;
}
.donate-copy-btn:hover {
background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.donate-wallet-hint {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
font-style: italic;
}
.donate-form {
display: flex; flex-direction: column; gap: 12px;
}
.donate-row {
display: flex; flex-direction: column; gap: 4px;
}
.donate-row-2col {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 12px;
}
.donate-col {
display: flex; flex-direction: column; gap: 4px;
}
.donate-label {
font-size: 12px;
color: var(--muted);
font-weight: 600;
}
.donate-opt {
font-weight: 400; opacity: 0.7;
}
.donate-input {
font-size: 13px;
padding: 7px 10px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-chip);
color: var(--text);
font-family: inherit;
}
.donate-input:focus {
outline: none;
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.donate-input-mono {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
}
.donate-textarea {
resize: vertical;
min-height: 60px;
font-family: inherit;
}
.donate-actions {
display: flex; align-items: center; gap: 12px;
margin-top: 4px;
}
.donate-submit {
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
color: var(--bg);
background: linear-gradient(135deg, var(--jackpot) 0%, var(--whale) 100%);
border: 1px solid color-mix(in srgb, var(--jackpot) 50%, transparent);
border-radius: var(--r-card);
cursor: pointer;
}
.donate-submit:hover { filter: brightness(1.08); }
.donate-status {
font-size: 12px;
color: var(--muted);
}
.donate-status-pending { color: var(--muted); }
.donate-status-ok { color: var(--success); }
.donate-status-err { color: var(--danger); }
/* Build v0.4 (operator 2026-06-07): Contact-us modal. Inherits most styling
from .donate-form / .donate-modal / .donate-input; only the contact-
specific extras live here. Theme vars only → auto-themes for peach. */
.contact-modal { max-width: 480px; }
.contact-intro { font-size: 13px; color: var(--muted); margin: 4px 0 12px; line-height: 1.5; }
.contact-to-row { gap: 6px; }
.contact-to-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: var(--r-card);
font-family: monospace; font-size: 13px;
color: var(--text);
width: fit-content;
}
.contact-to-icon { color: var(--accent); font-size: 14px; line-height: 1; }
.contact-to-addr { font-weight: 600; }
.contact-textarea {
resize: vertical; min-height: 100px;
font-family: inherit; line-height: 1.5;
}
/* Honeypot — visually hidden but still focusable to screen readers; bots
parsing the DOM see a normal input and fill it. We DO NOT use
display:none (some bots skip those); off-screen + tabindex=-1 is the
classic pattern. */
.contact-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px; height: 1px;
overflow: hidden;
}
/* "Cancel" button styled lighter than the primary "Send" CTA */
.donate-submit-cancel {
background: transparent !important;
color: var(--muted) !important;
border: 1px solid var(--border) !important;
}
.donate-submit-cancel:hover {
color: var(--text) !important;
border-color: var(--text) !important;
}
/* Footer "Contact us →" button: looks like a link, behaves like a button. */
.footer-contact-btn {
background: transparent; border: none; padding: 0;
color: var(--accent); cursor: pointer;
font: inherit; text-decoration: underline;
text-underline-offset: 2px;
}
.footer-contact-btn:hover { color: var(--text); }
.donate-fineprint {
font-size: 11px;
color: var(--muted);
font-style: italic;
line-height: 1.5;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
@media (max-width: 540px) {
.donate-row-2col { grid-template-columns: 1fr; }
}
/* Build .94: Telegram subscribe CTA in the header. Vibrant Telegram-
blue → emerald-green gradient (cheerful palette, distinct from the
site's teal/blue accent so it visibly stands out). Paper-plane
icon with a subtle "fly" animation on hover. Sits between the
search box and the meta block. */
/* P0 2026-06-08: admin-gated ET& Subscribe CTA. Amber (--jackpot) = premium/"yours".
All theme vars -> auto-themes for peach. Hidden for non-admins via .admin-only. */
.subscribe-now-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: var(--r-card);
font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
color: var(--bg, var(--bg));
background: var(--jackpot);
border: 1px solid var(--jackpot);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--jackpot) 40%, transparent);
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.subscribe-now-btn:hover { filter: brightness(1.08); }
.subscribe-now-btn:active { filter: brightness(0.94); }
/* .449: the .tg-subscribe-btn element was REMOVED from the free header
(Telegram alerting became ET&-only). The rules below are inert and kept
only to avoid churn; safe to delete in a cleanup pass. */
.tg-subscribe-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #229ED9 0%, #34D399 100%);
color: var(--white);
text-decoration: none;
border-radius: var(--r-card);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow:
0 2px 12px rgba(34, 158, 217, 0.40),
0 0 0 0 rgba(52, 211, 153, 0);
transition: transform 0.18s ease, box-shadow 0.25s ease;
border: none;
cursor: pointer;
white-space: nowrap;
/* Subtle idle pulse so the button has life even without hover. */
animation: tg-btn-pulse 3.2s ease-in-out infinite;
}
.tg-subscribe-btn:hover {
transform: translateY(-1px) scale(1.04);
box-shadow:
0 4px 20px rgba(34, 158, 217, 0.60),
0 0 0 4px rgba(52, 211, 153, 0.22);
animation: none; /* Halt the pulse so hover takes over cleanly. */
}
.tg-subscribe-btn:active {
transform: translateY(0) scale(0.98);
}
.tg-subscribe-btn .tg-icon {
font-size: 15px;
display: inline-block;
transform: rotate(-20deg);
transition: transform 0.3s ease;
}
.tg-subscribe-btn:hover .tg-icon {
animation: tg-fly 0.55s ease-in-out;
}
@keyframes tg-fly {
0% { transform: rotate(-20deg) translate(0, 0); }
40% { transform: rotate(-35deg) translate(3px, -3px); }
100% { transform: rotate(-20deg) translate(0, 0); }
}
@keyframes tg-btn-pulse {
0%, 100% {
box-shadow:
0 2px 12px rgba(34, 158, 217, 0.40),
0 0 0 0 rgba(52, 211, 153, 0);
}
50% {
box-shadow:
0 3px 16px rgba(34, 158, 217, 0.55),
0 0 0 6px rgba(52, 211, 153, 0.12);
}
}
/* Mobile: shrink padding + text size so it still fits in the header
when stacked. On narrowest breakpoint it sits inline with the
search box (flex-wraps). */
@media (max-width: 900px) {
.tg-subscribe-btn {
padding: 7px 12px;
font-size: 11px;
}
.tg-subscribe-btn .tg-icon { font-size: 13px; }
}
@media (max-width: 700px) {
.tg-subscribe-btn {
order: 13; /* sit at the very end after search + meta on mobile */
margin-left: auto;
}
}
.hidden-note { color: var(--muted); font-size: 10px; font-weight: normal; text-transform: none; letter-spacing: 0; }
.ts { color: var(--text); font-family: monospace; }
.collect-btn {
background: var(--accent); color: var(--bg); border: none; padding: 6px 14px;
border-radius: var(--r-chip); font-weight: 600; font-size: 12px; cursor: pointer;
letter-spacing: 0.05em; text-transform: uppercase;
}
.collect-btn:hover:not(:disabled) { background: #5eead4; }
.collect-btn:disabled { opacity: 0.6; cursor: wait; }
.collect-status { font-family: monospace; font-size: 11px; }
.collect-status.ok { color: var(--accent); }
.collect-status.err { color: var(--danger); }
/* Build .54: hero subtitle now lives INSIDE the header flex row,
spanning the middle column between the brand block (left) and the
search/meta block (right). Gradient text fill preserved. The old
.hero-subtitle / .hero-subtitle-text full-width band classes are
gone — replaced by a single .hero-subtitle-inline. */
.hero-subtitle-inline {
margin: 0;
max-width: 100%;
text-align: center;
/* Build .281: ONE line — scales down on narrow viewports so it never
wraps (until the <=600px rule lets it wrap to avoid clipping). */
font-size: clamp(11px, 1.1vw, 14px);
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.25;
/* Build .228: solid var(--whale) pink to match the EventTracker brand name. */
color: var(--whale);
/* Build .246: thin gold outline to frame the tagline */
border: 1px solid color-mix(in srgb, var(--jackpot) 45%, transparent);
border-radius: var(--r-card);
padding: 4px 12px;
white-space: nowrap; /* Build .281: single line */
word-break: keep-all;
}
/* Build .282: second tagline clause ("come to EventTracker to KNOW") in mint green. */
.hero-know { color: var(--mint); }
/* Build .256: legal disclaimer — small all-caps line inside the gold border */
.hero-disclaimer {
display: block;
width: 100%;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
line-height: 1.3;
text-align: center;
opacity: 0.75;
}
@media (max-width: 900px) {
.hero-subtitle-inline { font-size: 16px; }
}
@media (max-width: 600px) {
/* On small phones let the one-line tagline wrap rather than clip, and
give the stack full width so the search box isn't cramped. */
.hero-subtitle-inline { font-size: 14px; margin: 0; white-space: normal; }
.hero-inner { width: 100%; }
}
/* Build .281: hero tagline + search + disclaimer stacked as their own
centered, full-width row in the (wrapping) header. .hero-stack claims a
100%-basis row below the brand/controls row (order:5); .hero-inner is
sized to the one-line tagline (width:fit-content) so the search box
stretches to exactly the tagline's width, with the disclaimer beneath. */
.hero-stack {
/* Build .282: inline in the header row -- sits between the brand
(...BETA) and the Telegram CTA. Drops to its own full-width row at
<=1000px (media rule below) where there isn't room inline. */
display: flex;
flex: 0 1 auto;
justify-content: center;
min-width: 0;
}
.hero-inner {
display: flex;
flex-direction: column;
align-items: stretch;
width: fit-content; /* = the one-line tagline's width */
max-width: 100%;
gap: 6px;
margin: 0;
}
.hero-inner .hero-subtitle-inline { align-self: center; }
.hero-inner .search-box {
position: relative;
flex: 0 0 auto; /* auto height in the column (override 0 1 260px) */
order: 0; /* override the <=1000/<=768 search-box reorders */
width: 100%; /* stretch to the inner width = tagline width */
max-width: 100%;
margin: 0; /* override margin-left:auto */
}
/* Build .282: at <=1000px the hero drops to its own full-width row below
the brand/controls row -- there, push the Telegram CTA + meta right
(brand stays left). On desktop the hero is inline, so space-between
distributes brand | hero | CTA | meta with the hero between them. */
@media (max-width: 1000px) {
.hero-stack { flex-basis: 100%; order: 5; }
/* .header-right already has margin-left:auto (base) — keeps the CTA cluster
+ mascot pinned right when the hero drops to its own full-width row. */
}
/* mob-hdr 2026-07-06 (operator): compress the mobile pre-ticker header "by A
LOT" — it stacked brand → mascot → controls → hero to ~400px (~half the
initial viewport). Now a 2-col grid: brand row on top, hero + controls in
the LEFT column, Trackster owning the RIGHT column — everything above the
tickers ends no lower than Trackster's shadow (his feet keep their -16px
overlap onto the ticker). ~400px → ~215px. Desktop (>768px) untouched. */
@media (max-width: 768px) {
header {
display: grid;
grid-template-columns: minmax(0, 1fr) 112px; /* left column | mascot */
gap: 4px 10px;
align-items: start;
padding: 8px 12px 0; /* no bottom pad — the mascot's feet sit on the ticker */
}
.brand { grid-column: 1 / -1; grid-row: 1; }
/* Break the CTA cluster apart so its children place individually. */
.header-right { display: contents; }
.header-mascot {
grid-column: 2; grid-row: 2 / span 3; /* .457: +1 left row for the login pill; Trackster's shadow stays lowest */
align-self: end; justify-self: end;
}
.hero-stack {
grid-column: 1; grid-row: 2;
order: 0; flex-basis: auto; /* undo the ≤1000px full-row drop */
justify-content: stretch; min-width: 0;
}
.hero-inner { width: 100%; gap: 4px; }
.hero-subtitle-inline { font-size: 11px; padding: 3px 8px; white-space: normal; }
.hero-inner .search-box input { font-size: 12px; padding: 5px 9px; }
/* .449: the Telegram CTA left the free header (ET&-only feature now) —
one whole row gone; meta rises to row 3 and the mascot spans 2 rows.
Pre-ticker header shrinks again (~235px → ~200px). */
header .meta { grid-column: 1; grid-row: 3; }
/* admin-only CTA (display:none for the public) — admins get a 4th left row */
/* .457: admin .etand-header-btn retired; the PUBLIC login pill takes the
bottom-left row (no room right of the mascot at phone width). */
.etand-login-btn { grid-column: 1; grid-row: 4; justify-self: start; font-size: 10px; }
}
/* etand-login 2026-07-06 (.457): the public ET& login pill (+~150px) tips the
desktop flex header into a 2nd row in a mid-width band (~1100-1279px, where
the header is otherwise one row). Pin the hero-stack flex-basis small + let
the tagline wrap, so the flex line-break reserves room for the pill on one
row. Live-measured: 1200px 276->169 with this. Above ~1500px + below ~1024px
the header already fits/wraps at baseline, so the band is scoped. */
@media (min-width: 1001px) and (max-width: 1499px) {
.hero-stack { flex: 1 1 200px; min-width: 0; }
.hero-subtitle-inline { white-space: normal; }
}
/* Build .309: wide-desktop banner — three zones with EQUAL side blocks.
LEFT (.brand) and RIGHT (.header-right: Telegram + Peachy + Donate +
Trackster) are forced to the SAME column width (--hdr-side) via grid, so
"their total width equals" by construction. The brand's logo + EventTracker
text are enlarged to fill the left column; the CENTER (.hero-stack: slogan +
search + disclaimer) takes the whole middle and its contents scale up to fit.
Only applies where there's room (>=1500px); below that the base flexbox header
+ the <=1000px stack handle the responsive fallback unchanged. */
@media (min-width: 1500px) {
header {
--hdr-side: 540px; /* == the right cluster's natural width */
display: grid;
grid-template-columns: var(--hdr-side) minmax(0, 1fr) var(--hdr-side);
align-items: center;
gap: 24px;
}
/* LEFT — enlarge the PodComet logo + EventTracker text (~1.35x) to fill it */
.brand-row, .brand-etrow { gap: 16px; } /* brand-tagline .508/.rev2: both rows share the gap */
.brand-tagline { font-size: 10px; } /* brand-tagline-fit .510: the 22px wordmark row spans ~194px */
.brand-logo { height: 62px; }
.brand-decoration { width: 1.0cm; height: 1.0cm; }
.brand-product-name { font-size: 22px; }
/* RIGHT — pin the cluster to the right edge of its equal column */
.header-right { justify-content: flex-end; margin-left: 0; }
/* CENTER — slogan + search + disclaimer, as large as fits the middle zone */
.hero-stack { justify-content: center; }
.hero-inner { width: 100%; max-width: 100%; gap: 8px; }
.hero-inner .hero-subtitle-inline {
font-size: clamp(15px, 1.25vw, 21px);
white-space: normal; /* wrap rather than clip if the zone narrows */
padding: 6px 16px;
width: 100%;
}
.hero-inner .search-box input { font-size: 14px; padding: 8px 12px; }
.hero-disclaimer { font-size: 11px; }
}
/* ─── Search ─── */
.search-box { position: relative; flex: 0 1 260px; margin-left: auto; }
.search-box input {
width: 100%; padding: 5px 10px; background: var(--panel-2); border: 1px solid var(--border);
border-radius: var(--r-card); color: var(--text); font-size: 12px; outline: none;
text-align: center; /* Build .282: center-align the placeholder + typed query */
}
.search-box input:focus { border-color: var(--accent); }
.search-results {
position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
display: none; max-height: 60vh; overflow-y: auto; z-index: 50; /* Build .288: taller (was 320px) now the 5-item cap is lifted; stays scrollable + viewport-bounded */
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.search-results.open { display: block; }
.sr-item {
display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: var(--panel-2); text-decoration: none; }
/* search-keys 2026-08-30: the KEYBOARD-highlighted row. Same background as
:hover so the two states never disagree about what "current" looks like,
plus an accent rail because a keyboard user gets no pointer to confirm
where they are. Vars only - it themes with peach for free. */
.sr-item.is-kb { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }
.sr-plat {
font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-chip);
letter-spacing: 0.1em; font-family: monospace;
}
/* search-disambiguation 2026-07-11 (operator): cross-venue disambiguation card
in the search dropdown — accent-tinted so it reads as "same event, N venues". */
.sr-xv { border-left: 3px solid var(--accent); }
.sr-xv-tag { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.sr-xv-venues { font-size: 10px; color: var(--muted); font-weight: 400; }
.sr-poly { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.sr-kalshi { background: color-mix(in srgb, var(--kalshi) 20%, transparent); color: var(--kalshi); }
.sr-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-vol { font-family: monospace; font-size: 11px; color: var(--muted); }
.sr-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
/* Build (2026-06-05): wallet results (hash / username / AKA) + group headers in
the search dropdown. Wallet rows reuse .sr-item; these add the group label,
the 👤 tag, and the AKA text. All theme vars. */
.sr-group-label {
padding: 5px 12px 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--muted); background: var(--panel-2);
}
.sr-wallet-tag { background: transparent; padding: 0; font-size: 14px; }
.sr-aka { color: var(--muted); font-weight: 400; font-size: 11px; }
/* ─── Signals row: Anomaly + Top Wallets + Smart-Money (under top strip) ─── */
.signals-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
padding: 8px 20px;
}
@media (max-width: 1200px) {
.signals-row { grid-template-columns: 1fr 1fr; }
.wallets-card,
.marketplace-card { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.signals-row { grid-template-columns: 1fr; }
.wallets-card,
.marketplace-card { grid-column: auto; }
}
/* Build .66: 3×2 grid layout for the signals row.
Layout map (desktop):
┌──────────────┬─────────────────┬──────────────┐
│ Anomaly │ Marketplace │ Top-10 │
│ Watch │ Activity │ Movers │
│ (.row 1) │ (.row 1 + 2) │ (.row 1) │
├──────────────┤ ├──────────────┤
│ Smart-Money │ │ Reserved │
│ Feed │ │ │
│ (.row 2) │ │ (.row 2) │
└──────────────┴─────────────────┴──────────────┘ */
.signals-row-3x2 {
/* P1a 2026-06-08: board + marketplace lifted to the departures-band; the 4
survivors (smartmoney, latest-analysis, movers, liq) auto-tile into a 2×2
(no explicit grid-column/grid-row → no holes). */
/* P3 2026-06-12: modular auto-flow — cards tile/reflow with no holes; a card
hidden by NO-EMPTY-BOXES simply drops out. */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-auto-rows: auto;
align-items: stretch;
}
/* Make sure the inner placeholder body grows to fill the card so the
"Wiring up in .67" / "Reserved" text sits centered vertically. */
.signals-row-3x2 .signals-card { display: flex; flex-direction: column; }
.signals-row-3x2 .placeholder-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
/* P3 2026-06-12: secondary-grid card chips (resolving / cross-venue / sharp-edge / model-edge) */
.rs-ttr { font-variant-numeric: tabular-nums; font-weight: 700; }
.rs-ttr-red { color: var(--danger); } .rs-ttr-amber { color: var(--jackpot); }
.rs-ttr-green { color: var(--success); } .rs-ttr-gray { color: var(--muted); }
.rs-leader { color: var(--muted); }
.cv-venues { color: var(--muted); font-variant-numeric: tabular-nums; }
/* fairprice-cv 2026-07-12 (operator design B): Fair Price chip on the
Cross-Venue card. Static (free) by default; .cv-fair-live is the ET&
client-side upgrade (live value + pulse). Colors via vars only. */
.cv-fair {
font-family: monospace; font-size: 10px; font-weight: 700;
color: var(--accent); border: 1px solid var(--accent);
border-radius: var(--r-chip); padding: 0 4px;
white-space: nowrap; flex-shrink: 0;
}
.cv-fair-live { animation: cv-fair-pulse 2.4s ease-in-out infinite; }
@keyframes cv-fair-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.cv-spread { font-variant-numeric: tabular-nums; font-weight: 700; }
.cv-spread-green { color: var(--success); } .cv-spread-amber { color: var(--jackpot); } .cv-spread-muted { color: var(--muted); }
.se-edge { font-weight: 700; font-variant-numeric: tabular-nums; }
.se-buy { color: var(--success); } .se-fade { color: var(--danger); }
.se-prices { color: var(--muted); font-variant-numeric: tabular-nums; }
.me-dir.me-underpriced { color: var(--success); } .me-dir.me-overpriced { color: var(--danger); }
.me-band { font-weight: 700; }
.me-score { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 2026-06-13: raw 0-100 ETScore chip, colour by .me-band-*. 2026-06-14: nowrap so "ET 34.2" never breaks. */
.me-band-strong { color: var(--success); } .me-band-moderate { color: var(--jackpot); } .me-band-weak { color: var(--muted); }
.me-ettau { color: var(--accent); font-variant-numeric: tabular-nums; }
.resolving-card { border-top: 3px solid var(--whale); }
.crossvenue-card { border-top: 3px solid var(--jackpot); }
.sharpedge-card { border-top: 3px solid var(--accent); }
.modeledge-card { border-top: 3px solid var(--accent); }
/* P1a 2026-06-08: board-card + marketplace-card lifted to the departures-band.
The 4 survivors (smartmoney, latest-analysis, movers, liq) AUTO-PLACE into the
2-col grid above — no explicit grid-column/grid-row, so hiding/removing a card
never leaves a hole (honors NO EMPTY BOXES). Dissolves further in P2/P3. */
/* Two-column fallback (build .82: Movers + Topics now side-by-side on the
bottom row, mirroring Anomaly + Smart-Money above).
Build v0.35 20260523.190: Smart-Money ↔ Anomaly swap also applies
here — Smart-Money on left (col 1), Anomaly on right (col 2). */
@media (max-width: 1200px) {
.signals-row-3x2 {
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
}
/* P1a 2026-06-08: survivors auto-place (board + marketplace now in the band). */
}
/* Mobile single-column: everything stacks.
Build v0.35 20260523.190: explicit `order` on the swapped cards so
the mobile stack also shows Smart-Money above Anomaly (without
touching the HTML source order). */
@media (max-width: 900px) {
.signals-row-3x2 { grid-template-columns: 1fr; grid-template-rows: none; }
/* Build v0.35 20260525.222: board-card in place of anomaly-card */
.signals-row-3x2 .board-card,
.signals-row-3x2 .smartmoney-card,
.signals-row-3x2 .marketplace-card,
.signals-row-3x2 .latest-analysis-card,
.signals-row-3x2 .movers-card,
.signals-row-3x2 .liq-card { grid-column: auto; grid-row: auto; }
/* board-card first in source order so it appears at top of mobile stack */
.signals-row-3x2 .smartmoney-card { order: -1; }
}
/* Build v0.35 20260525.222: movers-card top/bottom split.
Top half = 🚀 Top-10 Movers. Bottom half = ⚠ Anomalies. */
.movers-card { border-top: 3px solid var(--accent); display: flex; flex-direction: column; overflow: hidden; }
.movers-top-half {
flex: 1 1 50%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 6px;
min-height: 0;
}
.movers-bottom-half {
flex: 1 1 50%;
border-top: 2px solid var(--danger);
padding-top: 6px;
overflow-y: auto;
min-height: 0;
}
.movers-bottom-half h3 { margin: 0 0 4px; padding: 0 10px; font-size: 12px; }
/* Build v0.35 20260525.222: board-card — Federated Board in the
ex-anomaly slot (col 1, row 2 of the 3×2 signals grid). */
/* P1a 2026-06-08: Departures-Board center band, two tracks since markets-hub
(2026-08-20): column 1 = the cross-venue card, then the free Market Alerts;
column 2 = .hm-board-stack (heatmap, Hot-200, Advanced Event Info).
events-band-dead-placement-rules: the 2.2fr split used to be keyed on
:not(:has(.marketplace-card)), always true once that card left the band, so it
sits on this rule now and the three-track value it overrode is gone.
All theme vars → auto-peach. */
.departures-band {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: 12px; padding: 8px 20px; align-items: start;
}
/* P4 2026-06-14: signature decorative anchor — amber Solari frame.
The center band is the ONLY element on the page that gets this treatment. */
.departures-band {
position: relative;
border: 1px solid color-mix(in srgb, var(--c-money) 35%, transparent);
border-radius: var(--r-card);
box-shadow: var(--e-3);
}
.departures-band::before,
.departures-band::after,
.departures-band > .departures-band-corner-tr,
.departures-band > .departures-band-corner-bl {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--c-money);
pointer-events: none;
}
.departures-band::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.departures-band::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.departures-band > .departures-band-corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.departures-band > .departures-band-corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
/* board-fit 2026-09-04 (operator: "get rid of unused real estate at the bottom
of the HOT-200 box"). Was align-self:stretch, which sized this card to the
LEFT FLANK rather than to its own rows - see the board-card-list note below
for the two defects that produced. */
.departures-band .board-card { align-self: start; display: flex; flex-direction: column; }
.departures-band > .signals-card { min-width: 0; }
.departures-band .crossvenue-card { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; } /* 2026-06-15: Cross-Venue holds the left-flank top slot (was control-tower alerts, now the strip under the tickers) */
/* hm-stack 2026-09-05 (operator: "pull the hot 200 list box up until it is right
under the mini-heatmap box"). ⚠⚠ GRID ROWS ARE SHARED ACROSS COLUMNS, which
is where the gap came from: .919 placed the map at col2/row1 and the board at
col2/row2, so row 1 took the height of the TALLER cell in it - the cross-venue
card in column 1 - and the board began below that. Browser-measured at
1440x900 with a 560px cross-venue card against the 236px map: 324px of empty
column, 0px after. The two boxes now share ONE cell spanning both rows and
stack inside it, so the board sits exactly one row-gap under the map whatever
column 1 does. They remain SIBLINGS - the map is still its own box. */
.departures-band .hm-board-stack { grid-column: 2; grid-row: 1 / -1; display: flex;
flex-direction: column; gap: 12px; min-width: 0;
align-self: start; }
.departures-band .hm-mini { align-self: start; min-width: 0; margin-top: 0; } /* alerts-etand 2026-09-05: the map is its own top box; margin-top is the in-board spacing it no longer needs. No grid placement: it and Hot-200 are flex items inside the stack (events-band-dead-placement-rules) */
/* events-alerts-placement-2 (operator 2026-09-13): column 1 = the cross-venue card,
then the free Market Alerts DIRECTLY under it; the lq-box (ADVANCED EVENT INFO)
moved into column 2's stack under Hot-200, so it has no grid placement of its own.
The alerts block is a DIRECT band child with only its column pinned: auto-placement
puts it in row 2 under the card, or in row 1 when no card rendered.
⚠ Row 2 is 1fr ON PURPOSE. The column-2 stack spans both rows; with two auto rows
its height is shared out over both and column 1's second box lands far below the
first - measured at .942 1440x900: 530.8px between the cross-venue card and the
lq-box that sat there. An item crossing a flexible track is left out of auto-row
sizing, so row 1 is exactly the card's height. Keyed on BOTH boxes: an explicit
row 2 with nothing in it would still keep its 12px gutter (NO EMPTY BOXES). */
.departures-band > .sa-block { grid-column: 1; }
.departures-band:has(.crossvenue-card):has(> .sa-block:not([hidden])) { grid-template-rows: auto 1fr; }
/* Left flank empty (no cross-venue card, no visible alerts) -> the column-2 stack
takes the whole band, no hole. Was keyed on the lq-box, which left column 1
above; its board/marketplace reflow targeted a card that left the band at
markets-hub 2026-08-20. */
.departures-band:not(:has(.crossvenue-card)):not(:has(> .sa-block:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.departures-band:not(:has(.crossvenue-card)):not(:has(> .sa-block:not([hidden]))) .hm-board-stack { grid-column: 1; }
/* P1a 2026-06-08: in the band the board list sizes to its visible segment
(~20 rows) — the legacy `flex: 1 1 0` collapsed to ~0 here because the band
(align-items:start) gives no fixed cell height for the flex-basis to fill. */
/* board-fit 2026-09-04: was flex:1 1 0, which grew this list to whatever height
the card had been stretched to.
⚠ TWO defects, one rule. When this was written the card spanned BOTH grid
rows beside the left flank, so a flank TALLER than the rows need left dead
space under the last row (what the operator reported), and a flank SHORTER
made overflow:hidden CLIP the tail with no scroll path. Browser-measured at
1440x900 with 25 rows: 303px of empty box in the first case, 456px clipped
and only 9 of 25 rows painted in the second. Sizing to content closes both.
Since hm-stack (.919) and events-alerts-placement-2 (.944) the card is the
middle box of .hm-board-stack (heatmap, Hot-200, Advanced Event Info), the
one column-2 cell spanning both rows; content sizing still keeps it from
stretching to, or being clipped by, the other column's height.
The trade is deliberate: the board no longer matches the flank's height
exactly, so the two columns can end at different points - an honest edge
beats an empty box or a silently truncated list. */
.departures-band .board-card-list { flex: 0 0 auto; overflow: hidden; }
@media (max-width: 900px) {
/* .427: the :has() desktop rules above (0-2-0 / 0-3-0) OUT-RANK the plain
.departures-band selectors this block originally used — media queries add
no specificity — so the band silently STOPPED stacking the day the lq-box
rules landed (2026-06-14): board/marketplace kept grid-row:1/-1 inside a
1-column grid → the grid manufactured implicit side columns → the crushed
"sliver board" phone bug (operator 2026-07-01). Mirror every :has()
variant at equal specificity; this block is later in source, so it wins —
no !important needed. */
/* .941: the markets-hub 2-track rule (0-2-0) was never mirrored here, so a
band with no lq-box kept two tracks on a phone and the column-2 stack -
now also home to Market Alerts - rendered 84px wide (measured 375x900).
events-band-dead-placement-rules: that split now sits on the plain
.departures-band rule, which the first selector below mirrors. */
.departures-band,
.departures-band:has(.crossvenue-card):has(> .sa-block:not([hidden])),
.departures-band:not(:has(.crossvenue-card)):not(:has(> .sa-block:not([hidden]))) {
grid-template-columns: 1fr; grid-template-rows: none;
}
.departures-band .board-card,
.departures-band .crossvenue-card,
.departures-band > .sa-block,
/* hm-stack 2026-09-05: ⚠⚠ THE WRAPPER MUST RESET TOO. Browser-measured at
375x812 before adding it: the stack stayed pinned to grid-column 2 and
rendered 95px wide - the .427 'sliver board' bug exactly, which .919's
own entry names as the reason this list swaps dead selectors for live
ones. Its flex column is what actually stacks the two boxes on a phone. */
.departures-band .hm-board-stack,
.departures-band .hm-mini,
.departures-band:not(:has(.crossvenue-card)):not(:has(> .sa-block:not([hidden]))) .hm-board-stack {
grid-column: auto; grid-row: auto;
}
/* Stacked band cells are auto-height, so the board list's flex:1 1 0 basis
collapses to ~0 rows (the P1a trap again — see the note above). Fixed-size
it and give it its own scroll instead. */
.departures-band .board-card-list { flex: 0 0 auto; max-height: 62vh; overflow-y: auto; }
}
/* ── CTWR 2026-06-10: Control-Tower alert rail ───────────────────────────── */
.control-tower-card { display: flex; flex-direction: column; }
.ct-head { margin: 0; padding: 8px 10px 6px; font-size: 13px; font-weight: 700; }
/* 2026-06-13: alert box tabs (Live Alerts | Closing Soon) */
.ct-tabs { display: flex; gap: 6px; padding: 7px 8px 5px; flex-wrap: wrap; }
.ct-tab { font: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-card);
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.ct-tab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
.ct-panel { display: none; }
.ct-panel.is-active { display: block; }
.ct-ttr-red { color: var(--danger); } .ct-ttr-amber { color: var(--jackpot); }
.ct-ttr-green { color: var(--success); } .ct-ttr-gray { color: var(--muted); }
.ct-list { list-style: none; margin: 0; padding: 0 6px 6px; overflow: hidden; }
.ct-alert {
display: flex; align-items: center; gap: 6px;
padding: 4px 4px; font-size: 11px; cursor: pointer;
border-bottom: 1px solid var(--border);
}
.ct-alert:last-child { border-bottom: 0; }
.ct-alert:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ct-alert-arb { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ct-alert-underdog { background: color-mix(in srgb, var(--jackpot) 8%, transparent); }
.ct-alert-going_live { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ct-alert-resolving { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.ct-alert-surge { background: color-mix(in srgb, var(--success) 7%, transparent); }
.ct-alert-new_liquid { background: color-mix(in srgb, var(--whale) 6%, transparent); }
.ct-ico { flex-shrink: 0; font-size: 12px; }
.ct-plat-logos { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; } /* P3 2026-06-13: venue-logo cluster (1 for single-venue alerts, all venues for arb) */
.ct-plat-logo { flex-shrink: 0; width: 12px; height: 12px; border-radius: var(--r-chip); object-fit: contain; } /* P3 2026-06-13: platform logo beside the type icon */
.ct-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-metric { flex-shrink: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-alert .dep-status { flex-shrink: 0; }
/* 2026-06-15 (operator): LIVE ALERTS landscape boxes — the wrap-grid strip under
the tickers. Reuses .ct-alert + .ct-alert-{type} (shared tint + mascot hook),
but lays each alert out as a landscape card colored by TYPE (left stripe +
label color). Wraps to multiple rows; never a horizontal scrollbar. */
.ct-strip-section { margin: 10px 20px 6px; }
.ct-strip-head { margin-bottom: 6px; }
/* .417: 16 alert boxes in an 8-col × 2-row grid (was 12 flex-wrapped). Equal
columns + equal row heights; collapses to 4-col then 2-col so no h-scroll. */
.ct-boxes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
@media (max-width: 1200px) { .ct-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ct-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-box {
min-width: 0;
box-sizing: border-box;
display: flex; flex-direction: column; align-items: stretch; gap: 4px;
padding: 8px 10px;
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: var(--r-card);
cursor: pointer; overflow: hidden;
transition: border-color var(--m-tab), background-color var(--m-tab);
}
.ct-box:hover { border-color: var(--accent); }
.ct-box-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ct-box-type { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.ct-box-title {
font-size: 12px; line-height: 1.3; color: var(--text); white-space: normal;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ct-box-metric { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* .403 (g)+(h): compact detail lines on the LIVE ALERTS boxes — arb BUY/SELL
legs and the underdog signal breakdown. Small, wrap, theme-aware colors. */
.ct-box-legs, .ct-box-ud {
display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 1px;
font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ct-leg-buy { color: var(--success); }
.ct-leg-sell { color: var(--danger); }
.ct-ud-dog { color: var(--success); }
.ct-ud-lead { color: var(--muted); }
.ct-ud-mult { color: var(--jackpot); }
.ct-ud-new { color: var(--jackpot); font-weight: 800; }
.ct-ud-fresh { color: var(--success); }
/* Per-type left-stripe + label color (bg tint inherited from .ct-alert-{type}). */
.ct-box.ct-alert-arb { border-left-color: var(--accent); }
.ct-box.ct-alert-arb .ct-box-type { color: var(--accent); }
.ct-box.ct-alert-underdog { border-left-color: var(--jackpot); }
.ct-box.ct-alert-underdog .ct-box-type { color: var(--jackpot); }
.ct-box.ct-alert-going_live { border-left-color: var(--accent); }
.ct-box.ct-alert-going_live .ct-box-type { color: var(--accent); }
.ct-box.ct-alert-resolving { border-left-color: var(--danger); }
.ct-box.ct-alert-resolving .ct-box-type { color: var(--danger); }
.ct-box.ct-alert-surge { border-left-color: var(--success); }
.ct-box.ct-alert-surge .ct-box-type { color: var(--success); }
.ct-box.ct-alert-new_liquid { border-left-color: var(--whale); }
.ct-box.ct-alert-new_liquid .ct-box-type { color: var(--whale); }
/* CTWR 2026-06-11: "LIVE ALERTS" rail title — blinking red on Trackster's-paw
rhythm (the paw Lottie is 120 frames @ 60fps = exactly 2.0s/loop). */
.ct-live-title {
color: var(--danger); font-weight: 800; letter-spacing: 0.04em;
animation: ct-live-blink 2s ease-in-out infinite;
}
@keyframes ct-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { .ct-live-title { animation: none; } }
/* ── SMH 2026-06-11: Sharp Money Hub (tabbed) ────────────────────────────── */
.sharp-hub { margin: 10px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 8px 10px 10px; }
.smh-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
/* 2026-06-13 (#9): Liquidity / Model-Edge box — tabbed (Most Liquid | Top by ETScore).
2026-06-14: relocated INSIDE the departures-band as a 2nd row in the left flank;
the band's gap:12px owns spacing, so no margin here. */
.lq-tabs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.lq-tab { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-card);
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.lq-tab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
.lq-panel { display: none; }
.lq-panel.is-active { display: block; }
/* 2026-06-20 (operator): cross-venue card tabs — Matched / Disambiguation, 30 events total.
Mirrors .lq-tabs/.lq-tab/.lq-panel exactly so the visual treatment matches the lq-box below. */
.cv-tabs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.cv-tab { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-card);
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.cv-tab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
.cv-panel { display: none; }
.cv-panel.is-active { display: block; }
/* .410 (etscore-option-display): per-row sub-line naming the scored option +
price + $vol, stacked UNDER the title so row width is unchanged (the 2026-06-16
inline attempt crushed the title; this stacks). .411: 3 sub-tabs paginate
1-10 / 11-20 / 21-30 so all 30 ranked entries are reachable. All theme-vars. */
.lq-box .sig-title-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 1px; }
.lq-box .me-pick { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-box .me-pick-pct { margin-left: 5px; font-variant-numeric: tabular-nums; color: var(--text); }
.lq-box .me-pick-vol { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: 0.8; }
.lq-box .lq-subtabs { display: flex; gap: 5px; padding-top: 2px; margin-bottom: 5px; flex-wrap: wrap; }
.lq-box .lq-subtab { font: inherit; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-card);
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.lq-box .lq-subtab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
.ets-subpanel { display: none; }
.ets-subpanel.is-active { display: block; }
/* hot-movers-tab 2026-07-16: the movers 1h/24h sub-panels — same show/hide
contract as .ets-subpanel (the ETScore sub-tabs the movers pane now mirrors). */
.mv-subpanel { display: none; }
.mv-subpanel.is-active { display: block; }
.lq-list { list-style: none; margin: 0; padding: 0; }
/* 2026-06-14: force each lq-box row to a single line — ellipsis on the title, never
wrap the meta — so the box stays compact and predictable in height. Written for the
narrow left flank (~24% width) the box then lived in; since .944 it closes the
column-2 stack under Hot-200, and one line per row still keeps it compact. */
.lq-box .sig-row { padding: 4px 8px; font-size: 12px; }
.lq-box .sig-row .sig-link { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.lq-box .sig-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-box .sig-meta { flex: 0 0 auto; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.smh-tab { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-card);
background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.smh-tab.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: var(--accent); }
.smh-panel { display: none; }
.smh-panel.is-active { display: block; }
/* .414 (operator): Hot-Events lists STACK full-width (was a 2-up grid that
capped each title to ~half the hub width → ellipsis). Single column gives each
row the full hub width, so far more event-title text fits before truncating.
Trade-off: the tab is taller (the two lists stack instead of sitting side by
side) — accepted for the wider text. */
.smh-halves { display: grid; grid-template-columns: 1fr; gap: 14px; }
.smh-h { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.smh-h-sub { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: 0.75; font-size: 10px; } /* 2026-06-13 */
.smh-date { flex-shrink: 0; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; } /* 2026-06-13: HoF bet date */
.smh-list { list-style: none; margin: 0; padding: 0; }
/* .417: per-column header row (title + 1–10/11–20 subtabs) + paging. The
.smh-paged ol holds up to 20 rows; CSS shows only the active page's 10. */
.smh-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.smh-h-row .smh-h { margin: 0; }
.smh-subtabs { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.smh-subtab { font-size: 10px; font-weight: 700; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; line-height: 1.4; cursor: pointer; transition: border-color var(--m-tab), color var(--m-tab), background-color var(--m-tab); }
.smh-subtab:hover { color: var(--text); border-color: var(--accent); }
.smh-subtab.is-active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* hot-wallets-100 .471: generic 10-page pager (was a 2-page hide-pair).
Hide every row, show only the active page's ten. */
.smh-paged > .smh-row { display: none; }
.smh-paged[data-page="0"] > .smh-row[data-pg="0"] { display: flex; }
.smh-paged[data-page="1"] > .smh-row[data-pg="1"] { display: flex; }
.smh-paged[data-page="2"] > .smh-row[data-pg="2"] { display: flex; }
.smh-paged[data-page="3"] > .smh-row[data-pg="3"] { display: flex; }
.smh-paged[data-page="4"] > .smh-row[data-pg="4"] { display: flex; }
.smh-paged[data-page="5"] > .smh-row[data-pg="5"] { display: flex; }
.smh-paged[data-page="6"] > .smh-row[data-pg="6"] { display: flex; }
.smh-paged[data-page="7"] > .smh-row[data-pg="7"] { display: flex; }
.smh-paged[data-page="8"] > .smh-row[data-pg="8"] { display: flex; }
.smh-paged[data-page="9"] > .smh-row[data-pg="9"] { display: flex; }
.smh-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.smh-row:last-child { border-bottom: 0; }
.smh-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.smh-title, .smh-evt { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smh-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.smh-delta { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.smh-delta.up { color: var(--success); } .smh-delta.down { color: var(--danger); }
.smh-usd { flex-shrink: 0; color: var(--text-soft, var(--muted)); font-variant-numeric: tabular-nums; } /* nh-fix 2026-07-10: --muted taupe washed out on the peach panel (the "$63,258" column) */
/* .412 Top-Mover context (venue · option · liquidity · settlement) → .415
(operator): now INLINE on a SINGLE line with the title (was stacked below it),
so the content stretches across the now-full-width row and the table is more
compact (1 line per row, not 2). Title grows + ellipsizes; the context cluster
+ the delta sit at the right. Muted + tabular; never wraps or h-scrolls. */
.smh-mv-row { align-items: center; }
.smh-mv-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.smh-mv-main .smh-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smh-mv-ctx { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; font-size: 11px; color: var(--muted); white-space: nowrap; }
.smh-mv-logo { flex-shrink: 0; border-radius: 2px; }
.smh-mv-opt { overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.smh-mv-liq, .smh-mv-close { flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Hall of Fame — 2 columns, COLUMN-MAJOR (hof-cols 2026-07-20, operator:
"1/2/3 down the left, 4/5/6 down the right — not the 1,2/3,4 zigzag").
CSS multi-columns flow down-then-across natively (the wds-list precedent);
the grid version auto-placed row-major. Sorting still just reorders the DOM
rows — the columns re-flow in the new order. */
.smh-hof-grid { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.smh-hof-row { break-inside: avoid; }
/* hof-100 2026-07-27: the 1-50 / 51-100 range pager — only the active range's
rows render (the 2-col column-major flow re-flows per range). */
.smh-hof-grid > .smh-hof-row { display: none; }
.smh-hof-grid[data-hofpage="0"] > .smh-hof-row[data-hofpg="0"] { display: flex; }
.smh-hof-grid[data-hofpage="1"] > .smh-hof-row[data-hofpg="1"] { display: flex; }
.smh-hof-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.smh-hof-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.smh-rank { flex-shrink: 0; width: 22px; text-align: right; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
/* .413: Hall of Fame sort header — two clickable labels ($ amount / date) that
reuse .pc-sort-th (asc/desc arrows + active highlight come from that rule). */
.smh-hof-head { display: flex; gap: 14px; align-items: center; margin: 0 0 6px 4px; }
.smh-hof-sort { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) { .smh-halves { grid-template-columns: 1fr; } .smh-hof-grid { columns: 1; } }
/* ww-top-lists 2026-08-16 (operator): the two-box row at the top of the default
Hot Wallets view — whale alerts (left, built separately) + this box's two
lists (top trades 24h, top wallets this calendar month).
AUTO-FIT, NOT `1fr 1fr`. Only one box exists until the alerts box lands, and
a hard two-column rule would hold open an empty left cell — precisely the NO
EMPTY BOXES rule. auto-fit gives a full-width single box today and two
columns the instant a sibling appears, with no CSS change and no flag.
Colours are palette vars only (GRAPHICAL TENET). The two stacked lists take
the dominant vertical order — teal on top, amber below; `:first-child` rather
than a fixed class so the ordering still holds when the 24h list is empty on
a quiet day and the month list becomes the top one. */
.ww-top-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 14px; margin: 0 0 14px;
}
/* wallets-toprow 2026-08-20 (operator): the two top-10 lists sit SIDE BY
SIDE in one full-width box ABOVE the Hot-Wallets table (the .822/.826
sidebar layout is deleted above - the panel reverts to block flow and
.ww-top-row, the panel's FIRST child, renders on top). auto-fit keeps
NO-EMPTY-BOXES: one list alone takes the full width; the pending
whale-alerts box still lands as a SIBLING box in .ww-top-row's own
auto-fit row, unaffected. <=760px stacks via the existing media rule. */
.ww-top-box {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px 18px; min-width: 0;
background: var(--panel); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px;
}
.ww-top-sec { min-width: 0; }
/* NO VERTICAL SCROLLBAR INSIDE SIGNAL CARDS: ten rows are server-capped, so the
list is sized to fit and clips rather than scrolls. */
.ww-top-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.ww-top-item {
display: flex; align-items: center; gap: 8px; min-width: 0;
padding: 3px 4px; font-size: 12px; cursor: pointer;
border-bottom: 1px solid var(--border);
}
.ww-top-item:last-child { border-bottom: 0; }
.ww-top-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* NO HORIZONTAL SCROLLBAR: the two text cells are the only growable ones and
both carry min-width:0 + ellipsis, so a long event title or an un-shortened
wallet hash truncates instead of widening the row. */
.ww-top-name {
flex: 0 1 auto; max-width: 42%; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600; color: var(--text);
}
.ww-top-evt {
flex: 1 1 0; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--muted); font-size: 11px;
}
.ww-top-usd {
flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--accent);
}
.ww-top-sec:nth-child(2) .ww-top-usd { color: var(--jackpot); }
@media (max-width: 760px) { .ww-top-row, .ww-top-box { grid-template-columns: 1fr; } }
/* Split-flap board: shared 6-col grid for the header + rows. The compound
`.board-card-row.dep-row` (0-2-0) beats the legacy `.board-card-row` layout. */
.dep-head,
.board-card-row.dep-row {
display: grid;
/* dep-venue-logo 2026-07-20 (operator: "only show venue logo, not name, and
widen the space allocated to event title"): VENUE 84px -> 44px now that the
cell renders the 14px logo alone. The 40px is reclaimed by EVENT, which is
the minmax(0,1fr) column — it absorbs the slack automatically. */
/* board-bell-clip 2026-08-18: the EVENT track's min was 0, so on a NARROW
DESKTOP card (measured 0px at both 1280 and 1366) the column collapsed to
zero and .dep-cell's overflow:hidden CLIPPED the row's follow-event bell
out of existence - still in the DOM with a real getBoundingClientRect, but
unpainted and NOT hit-testable, so every click fell through to the row's
own openEventById. Measured on live .819 at 1366x768: 25 of 25 rendered
chips clipped (worst overflowed its cell by 67px), 0 clickable. This is
the SAME collapse the max-width:700px block already re-flows for phones
("titles were invisible") - the 701-1430px band was simply never covered.
The floor also restores the event TITLE, invisible in that band for the
same reason. No horizontal scrollbar at 1280/1366/1440/1920. */
/* hot200-slim 2026-09-04: the board gives up 10% of its width, and the
EVENT track is the 1fr — it would absorb the whole loss and show LESS
title, which the ask forbids. So width is handed back from the two
places that can spare it: the gap, and the one column already declared
squeezable (minmax(0,...)). The 86/44/62/58 tracks are NOT touched —
the comment above records a measured clipping bug (25 of 25 chips
clipped at 1366) that those floors exist to prevent.
⚠ This offsets roughly half the loss, not all of it. At 1440 the EVENT
track goes ~454px -> ~402px rather than ~362px. */
grid-template-columns: 86px minmax(96px,1fr) 44px 62px minmax(0,120px) 58px;
gap: 6px; align-items: center;
}
.dep-head { list-style:none; margin:0; padding:4px 10px 6px; font-size:9px; font-weight:700;
letter-spacing:.08em; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border); }
.board-card-row.dep-row { padding:5px 10px; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); }
.board-card-row.dep-row:hover { background: var(--panel-2); }
.dep-cell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:12px; }
.dep-event { font-weight:600; color:var(--text); display:flex; align-items:center; gap:4px; }
.dep-event-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.dep-ic { flex-shrink:0; font-size:11px; text-decoration:none; }
.dep-venue { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; }
.dep-venue-name { font-family:monospace; letter-spacing:.03em; }
/* dep-venue-logo 2026-07-20 (operator): board ROWS show the venue LOGO only.
Scoped to .board-card-row so the sortable column HEADER keeps its label —
it is the sort control, and a wordless header would be unusable. Venues
with no logo file fall back to the short name so the cell is never blank
(NO-EMPTY-BOX). */
.board-card-row .dep-venue-name { display: none; }
.board-card-row .dep-venue:not(:has(.dep-venue-logo)) .dep-venue-name { display: inline; }
.dep-venue-logo { flex-shrink: 0; }
.dep-closes { font-family:monospace; font-size:11px; color:var(--muted); text-align:right; }
.dep-leader-lbl { color:var(--text); } .dep-leader-pct { color:var(--accent); }
.dep-delta { text-align:right; font-family:monospace; font-size:11px; }
.dep-delta-up { color:var(--success,var(--success)); } .dep-delta-dn { color:var(--danger); }
.dep-na { color:var(--muted); }
/* STATUS split-flap chip — amber --jackpot board glow (the iconic flap). */
.dep-status {
font-family:monospace; font-weight:700; font-size:10px; letter-spacing:.03em;
padding:2px 5px; border-radius: var(--r-chip); text-align:center; white-space:nowrap;
background: color-mix(in srgb, var(--jackpot) 16%, transparent);
color: var(--jackpot); border:1px solid color-mix(in srgb, var(--jackpot) 32%, transparent);
}
/* CTWR 2026-06-10: sentence-case status relabel + Hot */
.dep-status-closing-soon { background:color-mix(in srgb,var(--danger) 18%,transparent); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 36%,transparent); }
.dep-status-going-live { background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 32%,transparent); }
.dep-status-closed { background:color-mix(in srgb,var(--muted) 14%,transparent); color:var(--muted); border-color:color-mix(in srgb,var(--muted) 28%,transparent); }
.dep-status-hot { background:color-mix(in srgb,var(--whale) 18%,transparent); color:var(--whale); border-color:color-mix(in srgb,var(--whale) 36%,transparent); }
/* Operator 2026-06-16: chip/label legibility. The status chips rendered as
same-hue text on a same-hue faint tint (Live=amber/amber, Going live=teal/teal,
Closing soon=red/red, Hot=…), washed out on the cream theme.
(a) Bold is theme-agnostic — option title was 400; bump the label set to 700. */
.dep-status-live,
.dep-status-going-live,
.dep-status-closing-soon,
.dep-status-closed,
.dep-status-hot,
.dep-leader-lbl,
.dep-leader-pct { font-weight: 700; }
/* (b) Re-ink to high-contrast text ONLY on the light/peach theme — the
wash-out is a bright-on-cream problem. Dark mode already pops (bright text on
dark), so leave it alone (operator 2026-06-16: "no need to make fonts darker
on dark mode"). var(--text) on peach = espresso #3b2f25 = the "black" wanted. */
:root[data-theme="peach"] .dep-status-live,
:root[data-theme="peach"] .dep-status-going-live,
:root[data-theme="peach"] .dep-status-closing-soon,
:root[data-theme="peach"] .dep-status-closed,
:root[data-theme="peach"] .dep-status-hot,
:root[data-theme="peach"] .me-score,
:root[data-theme="peach"] .me-band-strong,
:root[data-theme="peach"] .me-band-moderate,
:root[data-theme="peach"] .me-band-weak,
:root[data-theme="peach"] .dep-leader-pct { color: var(--text); }
.dep-flap-char { display:inline-block; min-width:.55ch; }
.dep-flip-anim { animation: dep-flip .26s ease-in-out; }
@keyframes dep-flip { 0%{transform:rotateX(0);} 49%{transform:rotateX(-90deg);opacity:.35;} 51%{transform:rotateX(90deg);} 100%{transform:rotateX(0);opacity:1;} }
@media (prefers-reduced-motion: reduce) { .dep-flip-anim { animation:none; } }
/* P4 2026-06-14: data-changed flash (pcFlashWatcher) */
.is-flashing-up,
.is-flashing-down,
.is-flashing-amber {
transition: background-color var(--m-flash);
}
.is-flashing-up { background-color: color-mix(in srgb, var(--success) 22%, transparent); }
.is-flashing-down { background-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.is-flashing-amber { background-color: color-mix(in srgb, var(--c-money) 22%, transparent); }
@media (prefers-reduced-motion: reduce) {
.is-flashing-up,
.is-flashing-down,
.is-flashing-amber { background-color: transparent; transition: none; }
}
.board-card { border-top: 3px solid var(--accent); display: flex; flex-direction: column; overflow: hidden; }
.board-card-name { color: var(--accent); }
/* Build .263: tighten h3 + sub on board card to claw back vertical
space for the 20 visible rows. */
.board-card h3 { margin: 0 0 2px; font-size: 12px; }
.board-card h3 .plat-sub { font-size: 10px; }
/* Build .263: tighten tabs / filter / rows so all 20 segment rows fit
inside the card with NO scrollbar. Total budget for the card is
roughly the same as .liq-card (~320-360px in the row-2 signals grid).
Header overhead: h3 ~20px + tabs ~22px + filter ~32-50px = ~75-92px.
Remaining ~228-285px for 20 rows → must keep rows ≤ 14px each. */
/* Segment tab bar (1–20 / 21–40 / 41–60) */
.board-tab-bar {
display: flex; gap: 3px; flex-shrink: 0;
padding: 1px 0 3px; /* was 2px 0 6px */
}
.btb-btn {
flex: 1; min-width: 0; padding: 2px 0; /* was 4px 0 · board-200 2026-07-28: min-width:0 lets 8 flex tabs shrink to fit, no h-scroll */
border: 1px solid var(--border);
border-radius: var(--r-chip); background: var(--panel); color: var(--muted);
font-size: 9px; /* was 11px→10px→9: 8 tabs incl 3-digit 101–125 labels (board-200) */
font-weight: 800; font-family: monospace; cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
line-height: 1.3;
white-space: nowrap; /* btb-oneline .655 (operator): a seg label NEVER wraps */
}
.btb-btn:hover { background: var(--panel-2); color: var(--text); }
.btb-btn.btb-active {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: var(--accent); color: var(--accent);
}
/* board-filter-seg 2026-07-05: seg tab whose 25-row window is empty under the
active platform filter — visibly inert (no blank page is reachable). */
.btb-btn.btb-off { opacity: 0.35; pointer-events: none; }
/* Platform filter bar */
.board-filter-bar {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
gap: 3px; /* was 4px */
padding: 2px 0 4px; /* was 4px 0 6px */
}
.bfb-btn {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px; /* was 2px 7px */
border-radius: var(--r-card);
border: 1px solid var(--border);
background: var(--panel);
color: var(--muted);
font-size: 9px; /* was 10px */
font-weight: 600;
cursor: pointer;
line-height: 1.3;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.bfb-btn:hover { background: var(--panel-2); color: var(--text); }
.bfb-btn.bfb-active {
background: color-mix(in srgb, var(--accent) 15%, transparent);
border-color: var(--accent);
color: var(--accent);
}
.bfb-btn img { width: 10px !important; height: 10px !important; }
/* Build .263: list now CLIPS — no scrollbar. Tightening below keeps
20 visible segment rows inside the available height. */
.board-card-list {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden; /* was overflow-y: auto */
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* Section dividers — JS hides these (display:none) so styling is moot,
but keep the rules minimal in case the JS is ever rolled back. */
.board-card-divider {
list-style: none;
padding: 2px 6px 1px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Compact event rows — target ~13-14px per row */
.board-card-row {
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px; /* was 3px 6px — saves 6px per row × 20 = 120px */
border-radius: var(--r-chip);
cursor: pointer;
min-width: 0;
line-height: 1.3;
}
.board-card-row:hover { background: var(--panel-2); }
.board-card-row-urgent { border-left: 2px solid var(--danger); padding-left: 4px; }
.bc-rank {
flex-shrink: 0;
width: 16px; /* was 18px */
text-align: right;
font-size: 9px; /* was 10px */
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.bc-logo {
flex-shrink: 0;
width: 14px; /* was 16px */
display: flex;
align-items: center;
justify-content: center;
}
.bc-logo img { width: 12px !important; height: 12px !important; }
.bc-icons {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 1px;
font-size: 10px; /* was 11px */
min-width: 12px; /* was 14px */
}
.bc-icon { line-height: 1; }
.bc-icon-news { text-decoration: none; }
.bc-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px; /* was 12px */
color: var(--text);
}
.bc-chips {
flex-shrink: 0;
display: flex;
gap: 2px;
align-items: center;
}
.bc-chip {
font-size: 9px; /* was 10px */
padding: 0 3px; /* was 1px 4px */
border-radius: var(--r-chip);
font-variant-numeric: tabular-nums;
white-space: nowrap;
line-height: 1.4;
}
.bc-chip-vol { color: var(--success); }
.bc-chip-ttr-red { color: var(--danger); font-weight: 700; }
.bc-chip-ttr-yellow { color: var(--jackpot); }
.bc-chip-ttr-gray { color: var(--muted); }
/* Recurring-market cadence chips (2026-06): fast -> slow color gradient. */
.bc-chip-recur { font-weight: 700; }
.bc-chip-recur-intraday { color: var(--sxbet); } /* pink - fastest */
.bc-chip-recur-hourly { color: var(--success); } /* green */
.bc-chip-recur-daily { color: #3b82f6; } /* blue */
.bc-chip-recur-weekly { color: #a855f7; } /* purple */
.bc-chip-recur-monthly { color: var(--jackpot); } /* amber */
.bc-chip-recur-quarterly { color: var(--accent); } /* teal */
.bc-chip-recur-annual { color: var(--muted); } /* gray - slowest */
.bc-chip-ai {
color: var(--accent);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 2px;
}
.bc-chip-ai-logo {
width: 10px;
height: 10px;
border-radius: 50%;
vertical-align: middle;
flex-shrink: 0;
}
/* board-panels-section: slim section below the signals-row (reclaim panels) */
.board-panels-section {
max-width: var(--content-max, 1600px);
margin: 0 auto;
padding: 0 16px 16px;
width: 100%;
box-sizing: border-box;
}
/* Coming-soon placeholder cards (Top-10 Movers / Reserved). */
.reserved-card { border-top: 3px solid var(--muted); opacity: 0.85; }
/* Build .74: PredictHQ feed in the bottom-right slot. Overrides the
muted .reserved-card look since this is real data now, not a "coming
soon" placeholder. Top border swapped to a globe-blue. */
.reserved-card.predicthq-card { opacity: 1; border-top: 3px solid var(--platform-polyus-brand); }
.predicthq-name { font-weight: 800; color: var(--platform-polyus-brand); }
.phq-list { list-style: none; padding: 0; margin: 0; }
.phq-row { padding: 6px 0; border-bottom: 1px solid var(--border); }
.phq-row:last-child { border-bottom: none; }
.phq-link {
display: flex;
flex-direction: column;
gap: 3px;
text-decoration: none;
}
.phq-title {
font-size: 12px;
line-height: 1.3;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.phq-cat {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 6px;
border-radius: var(--r-chip);
background: color-mix(in srgb, var(--platform-polyus-brand) 15%, transparent);
color: var(--platform-polyus-brand);
align-self: flex-start;
}
.phq-cat-concerts { background: color-mix(in srgb, var(--whale) 18%, transparent); color: var(--whale); }
.phq-cat-sports { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.phq-cat-conferences { background: color-mix(in srgb, var(--platform-manifold-brand) 18%, transparent); color: var(--platform-manifold-brand); }
.phq-cat-expos { background: color-mix(in srgb, var(--platform-manifold-brand) 18%, transparent); color: var(--platform-manifold-brand); }
.phq-cat-festivals { background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot); }
.phq-cat-performing_arts { background: color-mix(in srgb, var(--whale) 18%, transparent); color: var(--whale); }
.phq-cat-politics { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.phq-cat-community { background: color-mix(in srgb, var(--kalshi) 18%, transparent); color: var(--kalshi); }
.phq-cat-academic { background: color-mix(in srgb, var(--platform-manifold-brand) 18%, transparent); color: var(--platform-manifold-brand); }
/* Build v0.35 20260524.199: boost emoji nested INSIDE the .phq-cat chip.
Was previously a separate flex-item / grid cell which broke the
wide-grid 4-column layout (added a 5th cell with no rule). Now sits
as a tight prefix inside the green sports / red politics pill,
consuming zero extra horizontal cells. Emoji needs a slight
nudge — kept proportional to chip text (9-11px), vertically aligned,
tight right-margin separator. */
.phq-cat .phq-boost {
display: inline-block;
font-size: 11px; /* slightly larger than 9px chip text for emoji legibility */
line-height: 1;
vertical-align: -1px; /* nudge baseline down so emoji aligns with chip caps */
margin-right: 3px;
/* Don't inherit uppercase from .phq-cat — meaningless for emoji */
text-transform: none;
/* Don't inherit letter-spacing — emoji has its own metric */
letter-spacing: 0;
}
.phq-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 10px;
color: var(--muted);
}
.phq-when { font-family: monospace; }
.phq-country {
font-family: monospace;
background: rgba(138, 150, 196, 0.12);
padding: 0 4px;
border-radius: var(--r-chip);
display: inline-flex;
align-items: center;
gap: 3px;
}
/* Build .77.2: real flag images from flagcdn.com (Unicode regional
indicators rendered as plain ASCII on Windows, looking like a duplicate
country code). Base `.flag-img` is the small (16px wide) variant used in
meta lines, tooltips, and the viewer list. */
.flag-img {
width: 16px;
height: auto;
vertical-align: middle;
border-radius: var(--r-chip);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
display: inline-block;
}
.flag-na {
font-size: 12px;
line-height: 1;
}
/* Flag riding to the left of the PHQ event title — a touch bigger than the
inline-meta variant so it visually anchors the row. */
.phq-title-flag {
display: inline-block;
margin-right: 6px;
vertical-align: middle;
}
.phq-title-flag .flag-img {
width: 18px;
}
/* Larger flag used in the PHQ modal's Country row. */
.phq-flag-lg {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.phq-flag-lg .flag-img {
width: 22px;
}
/* Legacy class names kept for the visitor mini-list + globe tooltip — they
used to wrap a Unicode glyph; with .flag-img now an , this wrapper
just needs to align the image. */
.phq-flag,
.vw-flag {
display: inline-block;
vertical-align: middle;
}
.phq-rank {
font-family: monospace;
font-weight: 600;
padding: 0 5px;
border-radius: var(--r-chip);
}
.phq-rank-hi { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.phq-rank-mid { color: var(--text); background: color-mix(in srgb, var(--platform-manifold-brand) 10%, transparent); }
.phq-rank-lo { color: var(--muted); background: rgba(138, 150, 196, 0.10); }
/* Build .96.1: dual-rank display in the card row. Global chip sits
immediately before local; small gap; subtle border on global to
distinguish from local (which carries the primary signal). */
.phq-rank-global + .phq-rank-local { margin-left: 4px; }
.phq-rank-global {
border: 1px dashed rgba(148, 163, 184, 0.40);
opacity: 0.85;
}
.phq-rank-local {
border: 1px solid transparent;
font-weight: 700; /* primary signal — bolder than global */
}
.phq-attendance, .phq-spend {
font-family: monospace;
cursor: help;
}
.phq-footnote {
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--border);
font-size: 10px;
color: var(--muted);
text-align: center;
cursor: help;
}
/* Build .75: PHQ filter tabs + sort controls + clickable rows + modal. */
.phq-controls {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.phq-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.phq-tab {
font-family: inherit;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--r-chip);
border: 1px solid var(--border);
background: rgba(255,255,255,0.03);
color: var(--muted);
cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.phq-tab:hover {
color: var(--text);
background: rgba(255,255,255,0.06);
}
.phq-tab-active {
background: color-mix(in srgb, var(--platform-polyus-brand) 18%, transparent);
border-color: var(--platform-polyus-brand);
color: var(--platform-polyus-brand);
}
.phq-sort-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--muted);
}
.phq-sort-lbl { font-family: monospace; }
.phq-sort-select {
font-family: inherit;
font-size: 10px;
padding: 2px 6px;
background: rgba(255,255,255,0.03);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r-chip);
cursor: pointer;
}
.phq-sort-select:focus { outline: 1px solid var(--platform-polyus-brand); }
.phq-row-clickable { cursor: pointer; transition: background 0.12s; }
.phq-row-clickable:hover {
background: color-mix(in srgb, var(--platform-polyus-brand) 6%, transparent);
}
.phq-empty-row {
padding: 18px 6px;
text-align: center;
color: var(--muted);
font-style: italic;
}
/* ─── Build v0.35 20260525.208: Most Liquid USD Markets widget ─────────
Replaces the Trending Topics tile in the 3×2 signals row's col 3 /
row 2 slot. Topics promoted to a 4th top-of-page ticker in the same
build (see .tt-* styles further down).
Layout grammar is a strict extension of .signals-list / .sig-row, so
the only widget-specific styles are: card accent color, rank chip,
leader-price chip, and a wider title column to accommodate the rank
prefix without crowding the chips. */
.liq-card {
border-top: 3px solid var(--platform-polyus-brand); /* sky blue — "liquidity" accent */
/* Build .243: flex-column so the list scrolls inside the fixed card height */
display: flex; flex-direction: column; overflow: hidden;
padding-bottom: 0;
}
.liq-name { color: var(--platform-polyus-brand); font-weight: 800; }
.liq-sub { color: var(--muted); font-size: 10px; font-weight: 500; }
/* Build .252: no scrollbar (overflow hidden) + flex rows so logo + chip
+ title + chips all stay on one line. Item count capped at 15 on the
server side so nothing is silently clipped. */
.liq-list {
list-style: none; margin: 0; padding: 0;
overflow: hidden; /* no scrollbar — ever */
flex: 1 1 0; min-height: 0;
display: flex;
flex-direction: column;
gap: 1px; /* Build .259: match .la-news-list gap */
}
/* Build .259: structure + fonts mirror Latest News (.la-news-*).
ALL liq-* rules use 2-class specificity (.liq-list X) so the .sig-row
/ .sig-link rules defined ~770 lines later in this file can't win the
cascade tie. */
.liq-list .liq-row {
cursor: pointer;
border-bottom: none; /* defeat .sig-row { border-bottom: 1px } */
list-style: none;
margin: 0; padding: 0;
}
.liq-list .liq-link {
display: flex; /* defeat .sig-link { display: grid } */
flex-direction: row;
align-items: baseline; /* mirror .la-news-link */
gap: 6px; /* mirror .la-news-link */
grid-template-columns: none;
padding: 4px 8px; /* mirror .la-news-link */
text-decoration: none;
color: var(--text);
border-left: 2px solid transparent;
border-radius: var(--r-chip);
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
font-size: 12px;
min-height: 0;
}
.liq-list .liq-link:hover {
background: color-mix(in srgb, var(--platform-polyus-brand) 7%, transparent);
border-left-color: var(--platform-polyus-brand);
text-decoration: none;
}
/* Meta block on the LEFT — logo + plat chip + rank + amount + leader */
.liq-list .liq-meta {
flex-shrink: 0;
display: flex;
gap: 5px;
align-items: center;
font-size: 10.5px; /* mirror .la-news-meta */
color: var(--muted);
justify-self: auto; /* defeat .sig-meta { justify-self: end } */
flex-wrap: nowrap;
max-width: none;
}
.liq-list .liq-meta .plat-chip-logo {
width: 12px; height: 12px; flex-shrink: 0;
}
.liq-list .liq-meta .sig-plat {
padding: 1px 6px;
font-size: 10px; /* mirror .la-news-prov */
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
flex-shrink: 0;
}
.liq-list .liq-rank {
flex-shrink: 0;
color: var(--platform-polyus-brand);
font-family: monospace; font-weight: 700;
font-size: 10px;
min-width: 18px;
text-align: right;
}
.liq-list .liq-meta .sig-tag {
padding: 1px 5px;
font-size: 10px;
line-height: 1.4;
border-radius: var(--r-chip);
}
.liq-list .liq-meta .sig-tag.sig-amt {
background: color-mix(in srgb, var(--success) 14%, transparent);
color: var(--success);
font-weight: 700;
}
.liq-list .sig-tag.liq-leader {
background: color-mix(in srgb, var(--platform-polyus-brand) 14%, transparent);
color: var(--platform-polyus-brand);
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
/* Title flex-fills to the right — mirror .la-news-title */
.liq-list .liq-title {
flex: 1 1 0;
min-width: 0;
font-size: 12px;
line-height: 1.3;
font-weight: 500; /* mirror .la-news-title (was 600) */
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Topic modal — full-list view of every event under a topic */
.topic-modal {
max-width: 760px;
width: min(760px, 96vw);
}
.topic-modal-head {
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
padding-bottom: 10px;
}
.topic-modal-title {
font-size: 22px; font-weight: 800; color: var(--jackpot);
letter-spacing: 0.01em;
}
.topic-modal-sub {
font-size: 12px; color: var(--muted); margin-top: 3px;
font-family: monospace;
}
.topic-modal-body {
display: flex; flex-direction: column; gap: 14px;
max-height: calc(85vh - 100px);
overflow-y: auto;
padding-right: 4px;
}
.topic-plat-block {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 8px 10px;
}
.topic-plat-head {
display: flex; align-items: center; gap: 8px;
border-bottom: 1px dashed var(--border);
padding-bottom: 5px; margin-bottom: 5px;
}
.topic-plat-name {
font-weight: 700; font-size: 13px; color: var(--text);
}
.topic-plat-count {
font-family: monospace; font-size: 10px; color: var(--muted);
margin-left: auto;
}
.topic-evt-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
}
.topic-evt { border-bottom: 1px dashed rgba(255,255,255,0.04); }
.topic-evt:last-child { border-bottom: none; }
.topic-evt-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px; align-items: center;
padding: 5px 0;
color: var(--text); text-decoration: none;
font-size: 12px;
}
.topic-evt-link:hover { color: var(--jackpot); }
.topic-evt-title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topic-evt-vol {
font-family: monospace; font-weight: 600;
color: var(--muted); white-space: nowrap;
}
@media (max-width: 700px) {
.topic-modal { width: 96vw; }
.topic-modal-title { font-size: 18px; }
.topic-modal-body { max-height: calc(100vh - 140px); }
}
/* ─── Build .80: page-wide PHQ section ──────────────────────────────────
The "Top Real-World Events" card lives in its own row between the
platform Top-20 grid and the Visitors row. Wider canvas → two-column
row layout (title block | meta block) so the list reads more like a
compact table than a stacked column. */
.phq-section { padding: 0 20px 12px; }
.predicthq-card-wide {
border-top: 3px solid var(--platform-polyus-brand);
}
.predicthq-card-wide .phq-controls {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.predicthq-card-wide .phq-tabs { flex: 1 1 auto; }
.predicthq-card-wide .phq-sort-row { flex: 0 0 auto; }
/* Wide list — two-column grid on desktop, falls back to stacked on narrow
viewports. JS still emits the same DOM (li.phq-row > a.phq-link with
.phq-title + .phq-meta) so we just restyle here. */
.phq-list-wide {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 24px;
}
@media (max-width: 1100px) {
.phq-list-wide { grid-template-columns: 1fr; }
}
/* Build .82: row padding tightened 8px → 4px and title font 13 → 12 so
doubling the visible event count (10 → 20) keeps the total card height
close to the prior dimensions. Each row drops from ~34px → ~22px tall. */
.phq-list-wide > .phq-row {
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
/* Build .80.2: row grid is [flag] [cat] [title 1fr] [meta auto]. The
flag sits as the LEFTMOST cell so it lines up flush against each
column's left edge across both data columns. */
.phq-list-wide .phq-link {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 2px 8px;
}
.phq-list-wide .phq-row-flag { grid-column: 1; }
.phq-list-wide .phq-cat { grid-column: 2; }
.phq-list-wide .phq-title { grid-column: 3; }
.phq-list-wide .phq-meta { grid-column: 4; }
.phq-list-wide .phq-title {
font-size: 12px;
line-height: 1.25;
/* Single-line clipping — preserves the row-count vs height tradeoff:
long titles ellipsize instead of forcing the row to expand. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phq-list-wide .phq-cat {
font-size: 9px;
padding: 0 5px;
}
.phq-list-wide .phq-meta {
justify-content: flex-end;
font-size: 10px;
white-space: nowrap;
flex-wrap: nowrap;
gap: 4px;
}
.phq-list-wide .phq-meta .phq-rank {
font-size: 10px;
padding: 0 4px;
}
.phq-list-wide .phq-meta .phq-poly-btn {
font-size: 9px;
padding: 1px 5px;
}
.phq-list-wide .phq-row-flag {
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-width: 22px;
}
.phq-list-wide .phq-row-flag .flag-img {
width: 18px;
}
/* PredictHQ detail modal */
.phq-modal {
max-width: 720px;
width: min(720px, 96vw);
}
.phq-modal-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.phq-modal-cat {
font-size: 11px;
}
.phq-modal-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin: 0;
flex: 1 1 auto;
line-height: 1.25;
}
.phq-state-badge {
font-family: monospace;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
padding: 2px 6px;
border-radius: var(--r-chip);
background: rgba(255,255,255,0.06);
color: var(--muted);
letter-spacing: 0.05em;
}
.phq-state-active { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.phq-state-cancelled,
.phq-state-deleted { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.phq-state-rescheduled,
.phq-state-postponed { background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot); }
.phq-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.phq-modal-stat {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 10px 12px;
}
.phq-modal-stat-lbl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 600;
margin-bottom: 4px;
}
.phq-modal-stat-num {
font-family: monospace;
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.phq-modal-stat-of {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.phq-modal-stat-sub {
font-size: 10px;
color: var(--muted);
margin-top: 4px;
}
.phq-modal-details {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin-bottom: 12px;
}
.phq-modal-details th {
text-align: left;
vertical-align: top;
padding: 6px 12px 6px 0;
color: var(--muted);
font-weight: 600;
width: 130px;
white-space: nowrap;
}
.phq-modal-details td {
padding: 6px 0;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.phq-modal-details tr:last-child td { border-bottom: none; }
.phq-modal-details td a { color: var(--platform-polyus-brand); text-decoration: none; }
.phq-modal-details td a:hover { text-decoration: underline; }
.phq-tz {
font-family: monospace;
font-size: 10px;
color: var(--muted);
margin-left: 8px;
padding: 0 4px;
background: rgba(255,255,255,0.04);
border-radius: var(--r-chip);
}
.phq-modal-labels { line-height: 1.8; }
.phq-lbl {
display: inline-block;
font-family: monospace;
font-size: 10px;
padding: 2px 6px;
margin-right: 3px;
background: color-mix(in srgb, var(--platform-manifold-brand) 10%, transparent);
color: var(--platform-manifold-brand);
border-radius: var(--r-chip);
cursor: help;
}
.phq-modal-foot {
font-size: 10px;
color: var(--muted);
text-align: center;
padding-top: 8px;
border-top: 1px solid var(--border);
font-style: italic;
}
.phq-modal-srclbl { cursor: help; }
/* Build .78: prominent "Search on Polymarket" CTA in the PHQ modal.
Polymarket-branded gradient (their teal-green) so the off-platform
destination reads visually. Sits between the related-markets list
and the data-source footer. */
.phq-modal-cta {
margin: 14px 0 4px;
text-align: center;
}
.phq-modal-poly-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, var(--accent), #0ea5e9);
color: #061325;
font-weight: 700;
font-size: 13px;
text-decoration: none;
border-radius: var(--r-card);
box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.phq-modal-poly-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
}
.phq-modal-poly-icon { font-size: 14px; }
.phq-modal-poly-sub {
font-size: 10px;
font-weight: 500;
color: rgba(6, 19, 37, 0.65);
margin-left: 4px;
}
/* Compact row-level Polymarket button on the PHQ event list. */
.phq-poly-btn {
display: inline-flex;
align-items: center;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
color: var(--accent);
background: rgba(20, 184, 166, 0.08);
border: 1px solid rgba(20, 184, 166, 0.25);
border-radius: var(--r-chip);
text-decoration: none;
margin-left: auto;
}
.phq-poly-btn:hover {
background: rgba(20, 184, 166, 0.18);
color: var(--accent);
}
/* Build v.03 .31 build 161 (2026-05-23): Kalshi-themed sibling to
the Polymarket search button — same shape, blue/sapphire accent
that matches Kalshi's brand colour (was --kalshi: var(--kalshi)). */
.phq-poly-btn.phq-kalshi-btn {
color: var(--kalshi);
background: color-mix(in srgb, var(--kalshi) 8%, transparent);
border-color: color-mix(in srgb, var(--kalshi) 25%, transparent);
margin-left: 4px; /* override the auto margin from the first button */
}
.phq-poly-btn.phq-kalshi-btn:hover {
background: color-mix(in srgb, var(--kalshi) 18%, transparent);
color: var(--kalshi);
}
.phq-modal-poly-btn.phq-modal-kalshi-btn {
background: linear-gradient(135deg, #3b82f6, var(--kalshi));
box-shadow: 0 2px 8px color-mix(in srgb, var(--kalshi) 25%, transparent);
margin-left: 10px;
}
/* Build v0.35 20260524.200: Manifold deep-search button — third
venue after Polymarket + Kalshi. Manifold's brand color is amber
(var(--jackpot) ≈ their orange-yellow). Uses same chip pattern as
.phq-kalshi-btn for the row chip, same gradient pattern as
.phq-modal-kalshi-btn for the modal CTA. */
.phq-poly-btn.phq-manifold-btn {
color: var(--jackpot);
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.25);
margin-left: 4px;
}
.phq-poly-btn.phq-manifold-btn:hover {
background: rgba(245, 158, 11, 0.18);
color: var(--jackpot);
}
.phq-modal-poly-btn.phq-modal-manifold-btn {
background: linear-gradient(135deg, #d97706, var(--jackpot));
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
margin-left: 10px;
}
.phq-modal-poly-btn.phq-modal-kalshi-btn:hover {
box-shadow: 0 4px 12px color-mix(in srgb, var(--kalshi) 40%, transparent);
}
/* Build .78: MetaForecast probability-history sparkline. Uses the same
evt-chart-wrap base height; adds spacing above to separate from the
volume chart. */
.mf-hist-wrap {
margin-top: 8px;
}
.mf-hist-sub {
font-size: 11px;
font-weight: 400;
color: var(--muted);
margin-left: 6px;
}
@media (max-width: 600px) {
.phq-modal-title { font-size: 16px; }
.phq-modal-stat-num { font-size: 18px; }
.phq-modal-details th { width: 90px; font-size: 11px; }
}
/* Build .76: PHQ economic-impact banner (top of PHQ card) */
.phq-impact-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
padding: 8px 10px;
margin-bottom: 8px;
background: linear-gradient(135deg, color-mix(in srgb, var(--platform-polyus-brand) 6%, transparent), rgba(34, 211, 238, 0.04));
border: 1px solid color-mix(in srgb, var(--platform-polyus-brand) 18%, transparent);
border-radius: var(--r-card);
font-family: monospace;
}
.phq-impact-stat { display: flex; flex-direction: column; }
.phq-impact-num {
font-size: 16px;
font-weight: 700;
color: var(--platform-polyus-brand);
line-height: 1.1;
}
.phq-impact-major { color: var(--success); }
.phq-impact-of { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.phq-impact-lbl {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.phq-impact-top {
grid-column: 1 / -1;
padding-top: 6px;
border-top: 1px dashed color-mix(in srgb, var(--platform-polyus-brand) 18%, transparent);
font-family: inherit;
cursor: help;
}
.phq-impact-toplink {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text);
text-decoration: none;
margin: 2px 0;
}
.phq-impact-toplink:hover { color: var(--platform-polyus-brand); text-decoration: underline; }
.phq-impact-topspend {
font-family: monospace;
font-size: 10px;
color: var(--platform-polyus-brand);
}
/* Build .76: PHQ modal — related prediction markets section */
.phq-modal-matches {
margin: 8px 0 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: var(--r-card);
}
.phq-matches-loading {
font-size: 11px;
color: var(--muted);
font-style: italic;
text-align: center;
}
.phq-matches-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
padding-bottom: 4px;
}
.phq-matches-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.phq-matches-sub { font-size: 10px; color: var(--muted); font-family: monospace; }
.phq-matches-list { list-style: none; padding: 0; margin: 0; }
.phq-match-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.phq-match-row:last-child { border-bottom: none; }
.phq-match-plat {
font-family: monospace;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: var(--r-chip);
flex-shrink: 0;
}
.phq-match-title { flex: 1 1 auto; color: var(--text); }
.phq-match-title a { color: var(--text); text-decoration: none; }
.phq-match-title a:hover { color: var(--platform-polyus-brand); text-decoration: underline; }
.phq-match-conf {
font-family: monospace;
font-size: 10px;
color: var(--muted);
background: rgba(255,255,255,0.04);
padding: 1px 5px;
border-radius: var(--r-chip);
cursor: help;
flex-shrink: 0;
}
/* Build .76: globe legend overlay */
.vw-globe-wrap { position: relative; }
.vw-globe-legend {
position: absolute;
bottom: 6px;
left: 6px;
display: flex;
gap: 12px;
font-size: 9px;
color: var(--muted);
background: rgba(15, 23, 42, 0.6);
padding: 4px 8px;
border-radius: var(--r-chip);
pointer-events: none;
font-family: monospace;
}
.vw-leg-item { display: inline-flex; align-items: center; gap: 4px; }
.vw-leg-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.vw-leg-dot-visitor { background: var(--jackpot); }
.vw-leg-dot-phq { background: var(--accent); }
.vw-leg-hint { color: rgba(148, 163, 184, 0.7); font-style: italic; }
/* Build .76: in-event-modal "Real-world event" badge (PHQ cross-match) */
.modal-phq-match {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
background: rgba(34, 211, 238, 0.06);
border: 1px solid rgba(34, 211, 238, 0.2);
border-radius: var(--r-chip);
font-size: 11px;
}
.modal-phq-icon { font-size: 13px; line-height: 1; }
.modal-phq-lbl {
font-family: monospace;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: var(--accent);
letter-spacing: 0.05em;
}
.modal-phq-link {
color: var(--text);
text-decoration: none;
font-weight: 600;
}
.modal-phq-link:hover { color: var(--accent); text-decoration: underline; }
.modal-phq-meta {
font-family: monospace;
font-size: 10px;
color: var(--muted);
}
.modal-phq-more {
color: var(--accent);
font-weight: 600;
}
.movers-card .movers-name,
.reserved-card .reserved-name { font-weight: 800; }
.placeholder-body {
padding: 18px 6px 10px;
text-align: center;
color: var(--muted);
}
.placeholder-icon {
font-size: 28px;
margin-bottom: 8px;
opacity: 0.85;
}
.placeholder-title {
font-weight: 700;
color: var(--text);
font-size: 13px;
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.placeholder-sub {
font-size: 11px;
line-height: 1.5;
max-width: 340px;
margin: 0 auto;
color: var(--muted);
}
.placeholder-sub em { color: var(--text); font-style: italic; }
.movers-placeholder .placeholder-icon { color: var(--accent); }
/* Build .67: Top-10 Movers populated rows. Reuses the signals-list /
sig-row chrome from Smart-Money so platform pills + click-into-event
modal behavior is consistent across the four list cards. */
/* Build .251: switch movers rows from grid (3-col) to flex so the logo
added in build .230 doesn't overflow the grid and push the meta chips
to a second row. Logo → chip → title (flex:1) → meta (nowrap, right). */
.movers-list .mv-row .sig-link {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
}
.movers-list .mv-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
line-height: 1.35;
}
.movers-list .mv-bet-chip {
color: var(--muted);
font-weight: 500;
font-size: 11px;
}
.movers-list .mv-meta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
.movers-list .mv-pct-pair {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: monospace;
font-size: 11px;
color: var(--muted);
}
.movers-list .mv-pct-pair .mv-prior { opacity: 0.7; }
.movers-list .mv-pct-pair .mv-current { color: var(--text); font-weight: 600; }
.movers-list .mv-arrow { font-size: 10px; }
.movers-list .mv-delta {
font-family: monospace;
font-weight: 700;
font-size: 11px;
padding: 1px 4px;
border-radius: var(--r-chip);
white-space: nowrap;
}
.movers-list .mv-up { color: var(--success); }
.movers-list .mv-down { color: var(--danger); }
.movers-list .mv-delta.mv-up { background: color-mix(in srgb, var(--success) 10%, transparent); }
.movers-list .mv-delta.mv-down { background: rgba(248, 113, 113, 0.10); }
/* Build .77: 1h delta chip — smaller than the 24h chip so it reads as
"supplementary context" rather than competing with the headline number.
Inline label ("24h" / "1h") on each chip so the two are unambiguous. */
.movers-list .mv-delta-lbl {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
margin-right: 4px;
opacity: 0.85;
}
.movers-list .mv-delta-1h {
font-size: 10px;
padding: 1px 5px;
}
.movers-list .mv-delta.mv-flat {
color: var(--muted);
background: rgba(138, 150, 196, 0.08);
}
.mv-footnote {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 10px;
text-align: center;
cursor: help;
}
.signals-card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
padding: 10px 14px;
/* Natural height — show all rows without an internal scrollbar.
The page itself scrolls if the panel grows tall. */
}
/* .anomaly-card standalone removed in build .222 — content moved into
.movers-bottom-half; .anomaly-card-split/.anomaly-top-half classes also
removed from HTML; retaining .anomaly-bottom-half for sx.bet traders. */
.smartmoney-card { border-top: 3px solid var(--jackpot); }
.signals-card h3 { margin-bottom: 6px; }
.anomaly-bottom-half {
flex: 0 0 auto;
padding-top: 8px;
border-top: 1px dashed var(--border);
margin-top: 6px;
}
.anomaly-bottom-half .sxlb-heading {
margin: 0 0 6px 0;
font-size: 12px;
}
.anomaly-bottom-half .sxlb-heading .sxlb-name { color: var(--platform-manifold-brand); font-weight: 800; }
.anomaly-bottom-half .sxlb-heading .plat-sub { font-size: 10px; color: var(--muted); }
.sxlb-grid-compact {
display: flex;
flex-direction: column;
gap: 2px;
}
.sxlb-grid-compact .sxlb-row {
display: grid;
grid-template-columns: 28px 110px 1fr 1fr;
align-items: center;
gap: 8px;
padding: 3px 8px;
background: var(--panel-2);
border-radius: var(--r-chip);
text-decoration: none;
color: var(--text);
cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.sxlb-grid-compact .sxlb-row:hover { background: rgba(192,132,252,0.10); }
.sxlb-grid-compact .sxlb-rank { font-family: monospace; font-size: 11px; font-weight: 800; color: var(--platform-manifold-brand); text-align: center; }
.sxlb-grid-compact .sxlb-wallet { font-family: monospace; font-size: 11px; color: var(--text); }
.sxlb-grid-compact .sxlb-stat { display: flex; flex-direction: column; align-items: flex-end; font-family: monospace; font-size: 11px; font-weight: 700; }
.sxlb-grid-compact .sxlb-stat-lbl { font-size: 8px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0; }
.plat-name.anomaly-name { color: var(--danger); }
.plat-name.smartmoney-name { color: var(--jackpot); }
.signals-list { list-style: none; margin: 0; padding: 0; }
.sig-row { border-bottom: 1px solid var(--border); }
.sig-row:last-child { border-bottom: none; }
.sig-link {
display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center;
padding: 5px 4px; color: var(--text); font-size: 12px;
}
.sig-link:hover { background: var(--panel-2); text-decoration: none; }
.sig-plat {
font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: var(--r-chip);
letter-spacing: 0.08em; font-family: monospace; text-align: center;
}
.sig-poly .sig-plat { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.sig-kalshi .sig-plat { background: color-mix(in srgb, var(--kalshi) 18%, transparent); color: var(--kalshi); }
.sig-manifold .sig-plat { background: color-mix(in srgb, var(--platform-manifold-brand) 18%, transparent); color: var(--platform-manifold-brand); }
.sig-sxbet .sig-plat { background: rgba(236,72,153,0.18); color: var(--sxbet); }
.sig-limitless .sig-plat { background: rgba(249,115,22,0.18); color: var(--limitless); }
/* Build .32 / .34: Probable + Myriad — both PMXT-sourced, both deserve
their own platform color so cross-venue groups + tickers stay readable. */
.sig-probable .sig-plat,
.sig-plat.sig-probable { background: rgba(34,197,94,0.18); color: var(--success); } /* emerald */
.sig-myriad .sig-plat,
.sig-plat.sig-myriad { background: color-mix(in srgb, var(--whale) 18%, transparent); color: #f9a8d4; } /* rose */
.sig-title {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 600;
}
.sig-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-self: end; }
.sig-tag {
background: var(--panel-2); color: var(--muted);
padding: 1px 6px; border-radius: var(--r-chip); font-family: monospace; font-size: 10px;
font-weight: 600; white-space: nowrap;
}
.sig-tag.sig-amt { background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot); }
.sig-tag.sig-topbet { background: color-mix(in srgb, var(--whale) 15%, transparent); color: var(--whale); }
.sig-fresh { color: var(--success); font-weight: 800; }
.sig-score {
background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger);
padding: 1px 6px; border-radius: var(--r-chip); font-family: monospace; font-size: 10px; font-weight: 700;
}
/* Bettor stance chips (FOR / AGAINST) — clarifies what the whale is
actually wagering when the side+outcome combo (BUY YES vs SELL NO) is
ambiguous to non-trader readers. */
.whale-stance {
display: inline-block; margin-left: 6px;
font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
padding: 2px 7px; border-radius: var(--r-chip); text-transform: uppercase;
vertical-align: middle;
}
.whale-stance-for { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.whale-stance-against { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
/* ─── Cross-Platform Arbitrage panel (PolyRouter) ─── */
/* Build v0.31 build 101 (compaction): saves ~25-30px per arb-card by
tightening padding/gaps/fonts. Visual hierarchy preserved (big bps
number still dominates; secondary chips smaller). */
.arb-section {
padding: 4px 20px 8px;
}
.arb-heading {
margin: 0 0 5px;
font-size: 12px;
font-weight: 600;
}
.plat-name.arb-name {
color: var(--limitless);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
}
.arb-grid {
display: grid;
/* Build v.03 .31 build 160 (2026-05-23): re-styled to mirror the
Hot Underdog card visual identity (per user request "Arb boxes
should look like hot underdog boxes"). Same 260px minmax + 8px
gap as .hud-grid; identical layout grammar inside each card. */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 6px;
/* Build .249: stretch so all cards in a row grow to the tallest card's
height — prevents the "jagged bottom edge" when title lengths differ */
align-items: stretch;
}
.arb-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--limitless);
border-radius: var(--r-chip);
/* Build .239: redesigned layout — flex-column (title + body row).
Old grid (auto / 1fr) replaced by flex children with their own padding. */
padding: 0;
cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Full-width title header — always reserves exactly 2 lines of space
so every card has an identical-height title band regardless of whether
the title wraps. Build .249: min-height = 2 × line-height + padding. */
.arb-title {
padding: 5px 8px 4px;
font-size: 11px;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid rgba(249, 115, 22, 0.18);
background: rgba(249, 115, 22, 0.05);
line-height: 1.3;
/* Reserve 2 full lines: 2 × (11px × 1.3) + 5px top + 4px bottom ≈ 38px */
min-height: calc(2 * 1.3em + 9px);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-width: 0;
}
.arb-stale-inline { color: var(--danger); font-size: 10px; }
/* Two-column body — flex:1 fills whatever height remains after the
title band, so cards that are stretched by align-items:stretch fill
evenly rather than leaving a gap at the bottom. */
.arb-body {
/* Build .292: single-column stack (was a row split into a flexible left
column + a fixed 105px right column). In a 260px grid card the left
column was only ~150px, so .arb-plat-info (the platform name chip) got
squeezed to nothing by the price/stance/countdown — the platforms "didn't
present". Stacking gives every row the full card width, so platforms
show, and all fields read as ONE compact card. */
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
}
.arb-left {
flex: 1 1 auto;
min-width: 0;
overflow: visible; /* Build .292: full-width single column — no clipping */
padding: 5px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.arb-right {
/* Build .292: was a fixed 105px right column; now a full-width horizontal
meta strip BELOW the platforms (fees / net / vig / persists + liquidity),
wrapping as needed. */
flex: 0 0 auto;
min-width: 0;
overflow: visible;
border-left: none;
border-top: 1px solid rgba(249, 115, 22, 0.15);
padding: 4px 8px 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* Spread + net numbers block in left column */
.arb-spread-nums {
display: flex;
align-items: baseline;
gap: 5px;
flex-wrap: wrap;
}
/* Liquidity box in right column */
.arb-liq {
/* Build .292: inline in the bottom meta strip (was a centered box pinned to
the bottom of the old fixed right column via margin-top:auto). */
margin-top: 0;
padding: 2px 7px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
border-radius: var(--r-chip);
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
.arb-liq-icon { font-size: 12px; line-height: 1; }
.arb-liq-amt { font-family: monospace; font-size: 13px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.arb-liq-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.arb-card:hover {
border-color: var(--limitless);
}
/* Build v.03 .31 build 160: arb-spread is the LEFT BADGE — directly
mirrors .hud-mult. Display only the spread % (no bps, no label —
.hud-mult shows just "×3.5" + "vol multiplier"; we show "13%" +
"spread"). */
.arb-spread {
grid-row: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: rgba(249, 115, 22, 0.12);
border-radius: var(--r-chip);
padding: 3px 5px;
min-width: 56px;
}
.arb-spread-bps {
/* Hidden — replaced visually by .arb-spread-pct below. Keeping the
class in the template for any tooling that scrapes bps values. */
display: none;
}
.arb-spread-pct {
font-family: monospace;
font-size: 13px;
font-weight: 800;
color: var(--limitless);
line-height: 1;
}
.arb-spread-label {
font-size: 8px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1px;
text-align: center;
}
/* Build .232/.238: net spread % + countdown timers.
Timers moved to right column (grid-column:2) in build .238 so the
left badge stays compact — just the two big numbers + label. */
.arb-spread { min-width: 60px; }
.arb-spread-net {
font-family: monospace;
font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
color: var(--limitless);
margin-top: 0;
text-align: center; white-space: nowrap; line-height: 1;
}
.arb-spread-net-strong { color: var(--success); }
.arb-spread-net-zero { color: var(--danger); }
.arb-countdowns {
grid-column: 2;
display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
align-items: center; margin: 0;
}
/* Build .242: arb-plat-info wraps all left content so arb-cd-row
never gets squeezed off screen. arb-cd-plat removed (redundant). */
.arb-plat-info {
flex: 1 1 0; min-width: 0; overflow: hidden;
display: flex; align-items: center; gap: 4px;
}
.arb-cd-row {
display: flex; flex-direction: row; align-items: center; gap: 3px;
flex-shrink: 0; flex: 0 0 auto;
}
.arb-cd-timer {
font-family: 'Courier New', Courier, monospace;
font-size: 12px; font-weight: 700;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: var(--r-chip);
padding: 1px 4px;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* Build .250: flash red when ≤ 30 min remain on an arb. */
@keyframes arb-urgent-flash {
0%, 100% { color: var(--danger); background: color-mix(in srgb, var(--danger) 20%, transparent); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
50% { color: #ff8080; background: color-mix(in srgb, var(--danger) 4%, transparent); border-color: color-mix(in srgb, var(--danger) 18%, transparent); }
}
.arb-cd-timer-urgent {
animation: arb-urgent-flash 1s ease-in-out infinite;
}
/* Operator 2026-06-15: tiered "ending in" countdown emphasis. Toggled by
_tickCountdowns() on arb-card timers, departures-board close cells, and
center-band closing metrics alike.
< 7 days → bolder
< 24 hours → + distinguishable background
< 30 min → + blink (.arb-cd-timer-urgent, above) */
.arb-cd-timer-week {
font-weight: 800;
color: var(--text);
}
.arb-cd-timer-day {
font-weight: 800;
color: var(--text);
/* Operator 2026-06-16: 22% wash was too faint to read as "highlighted" on the
small right-aligned CLOSES cell — bumped to 40% + a 70% border so a <24h
clock clearly pops as a chip (verified on the live board). */
background: color-mix(in srgb, var(--accent) 40%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
border-radius: var(--r-chip, 4px);
padding: 0 5px;
}
/* Colorful buy/sell arrows on platform rows */
.arb-stance-buy { color: var(--success) !important; font-weight: 800; }
.arb-stance-sell { color: var(--danger) !important; font-weight: 800; }
.arb-event-title {
/* Build v.03 .31 build 160: mirror .hud-event-title exactly. */
grid-column: 2;
font-size: 11px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
margin: 1px 0;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Build v.03 .31 build 172: clickable event-title link inside arb-card.
Removed in build v0.35 20260523.173 — title is now plain text, the
whole card click opens the disambiguation modal instead. Style
kept for any stragglers but the template no longer emits it. */
.arb-event-title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* Build v0.35 20260523.173: arb-card platform CHIP link — explicit
external arrow + visual cue that this is the only thing in the row
that escapes the arb-card's outer disambiguation handler. */
.arb-plat-chip-link {
text-decoration: none;
cursor: pointer;
position: relative;
transition: filter 120ms ease;
}
.arb-plat-chip-link:hover {
filter: brightness(1.18);
text-decoration: none;
}
/* Disambiguation modal: platform name in the cross-platform table
is now a clickable per-venue event-card link. */
.arb-modal-plat-link {
text-decoration: none;
cursor: pointer;
transition: filter 120ms ease, box-shadow 120ms ease;
}
.arb-modal-plat-link:hover {
filter: brightness(1.20);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* VWAP "True Global Odds" chip on each arb-card. Sits in column 2 of
the arb-card grid (the arb-spread block in col 1 already spans every
row), between the event title and the per-platform price rows. */
.arb-vwap {
grid-column: 2;
display: flex; align-items: center; gap: 5px;
margin: 1px 0;
padding: 2px 6px;
background: color-mix(in srgb, var(--kalshi) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--kalshi) 20%, transparent);
border-radius: var(--r-chip);
font-size: 10px;
min-width: 0;
}
.arb-vwap-icon {
font-size: 11px; line-height: 1; flex: 0 0 auto;
width: 14px; text-align: center;
}
.arb-vwap-converged { color: var(--success); }
.arb-vwap-divergent { color: var(--jackpot); }
.arb-vwap-label {
text-transform: uppercase; letter-spacing: 0.05em;
font-size: 9px; color: var(--muted);
}
.arb-vwap-pct {
font-family: monospace; font-weight: 700;
color: var(--text); font-size: 11px;
}
.arb-vwap-meta {
font-size: 9px; color: var(--muted);
margin-left: auto;
font-family: monospace;
}
/* VWAP block in the cross-venue group modal */
.eg-vwap {
display: flex; align-items: flex-start; gap: 12px;
margin: 12px 0; padding: 12px 14px;
border-radius: var(--r-card);
background: color-mix(in srgb, var(--kalshi) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--kalshi) 30%, transparent);
}
.eg-vwap-converged { border-left: 4px solid var(--success); }
.eg-vwap-divergent { border-left: 4px solid var(--jackpot); }
.eg-vwap-icon {
font-size: 22px; line-height: 1; flex: 0 0 auto;
}
.eg-vwap-converged .eg-vwap-icon { color: var(--success); }
.eg-vwap-divergent .eg-vwap-icon { color: var(--jackpot); }
.eg-vwap-body { flex: 1; min-width: 0; }
.eg-vwap-headline {
font-size: 14px; color: var(--text);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.eg-vwap-headline strong { font-family: monospace; font-size: 18px; color: var(--kalshi); }
.eg-vwap-confidence {
font-size: 10px; padding: 1px 6px; border-radius: var(--r-chip);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.eg-vwap-conf-high { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--success); }
.eg-vwap-conf-medium { background: color-mix(in srgb, var(--kalshi) 15%, transparent); color: var(--kalshi); }
.eg-vwap-conf-low { background: rgba(148,163,184,0.15); color: var(--muted); }
.eg-vwap-sub {
font-size: 11px; color: var(--muted); margin-top: 4px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.eg-vwap-tag {
font-size: 10px; padding: 1px 6px; border-radius: var(--r-chip);
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.eg-vwap-tag-good { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--success); }
.eg-vwap-tag-warn { background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot); }
/* Build v.03 .31 build 160: arb-platforms now mirrors .hud-options —
a flex-column of single-line rows, one per venue. Cheapest YES
(BUY side) gets a green-tinted row; most expensive (SELL side)
gets a red tint; middle venues stay neutral. Same compact
flex-row pattern as .hud-option. */
.arb-platforms {
grid-column: unset;
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.arb-plat-row {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 4px;
border-radius: var(--r-chip);
font-size: 10px;
min-width: 0;
overflow: hidden;
text-decoration: none;
color: var(--text);
background: rgba(148, 163, 184, 0.05);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.arb-plat-row:hover {
text-decoration: none;
background: rgba(148, 163, 184, 0.10);
}
/* Cheapest YES → BUY side; tint green. */
.arb-plat-row.arb-buy-side {
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.30);
}
.arb-plat-row.arb-buy-side:hover {
background: rgba(34, 197, 94, 0.14);
}
/* Most-expensive YES → SELL side; tint red. */
.arb-plat-row.arb-sell-side {
background: color-mix(in srgb, var(--danger) 7%, transparent);
border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
.arb-plat-row.arb-sell-side:hover {
background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.arb-plat-row .sig-plat {
flex: 0 0 auto;
font-size: 9px;
}
.arb-plat-price {
flex: 0 0 auto; /* Build .265: never shrink — always visible */
font-family: monospace;
font-weight: 700;
font-size: 11px;
color: var(--text);
flex: 0 0 auto;
}
.arb-plat-vol {
flex: 1 1 0;
min-width: 0;
color: var(--muted);
font-family: monospace;
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.arb-plat-spread {
flex: 0 0 auto;
font-family: monospace;
color: var(--muted);
font-size: 9px;
}
.arb-plat-stance {
flex: 0 0 auto;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.arb-plat-row.arb-buy-side .arb-plat-stance { color: var(--success, var(--success)); }
.arb-plat-row.arb-sell-side .arb-plat-stance { color: var(--danger, var(--danger)); }
.arb-plat-row:hover {
text-decoration: none;
color: var(--limitless);
}
.arb-plat-price {
font-weight: 700;
color: var(--accent);
}
/* .arb-plat-vol moved to a single definition above (build 159) —
left-aligned now so volume reads next to price instead of being
shoved to the right edge. */
/* Modal additions for the arb side-by-side view */
.arb-table .arb-yes-price {
font-family: monospace;
font-size: 14px;
font-weight: 800;
color: var(--accent);
}
.arb-stance {
display: inline-block;
padding: 2px 8px;
border-radius: var(--r-chip);
font-family: monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
}
.arb-stance.arb-buy { background: rgba(34, 197, 94, 0.20); color: var(--success); }
.arb-stance.arb-sell { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.arb-table .arb-vol { font-family: monospace; color: var(--muted); }
.arb-table .arb-link a { color: var(--accent); text-decoration: none; }
.arb-disclaimer {
margin-top: 14px;
padding: 10px 14px;
background: color-mix(in srgb, var(--jackpot) 10%, transparent);
border-left: 3px solid var(--jackpot);
border-radius: var(--r-chip);
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
/* Tier 1 arb enrichments (build .45): arb-size chip, stale flags,
closed/paused platform chips, per-platform spread chip, modal
columns for depth / spread / delta_1h. */
.arb-size {
grid-column: unset;
display: flex;
align-items: baseline;
gap: 5px;
margin: 0;
min-width: 0;
flex-wrap: wrap;
/* Build .246: brighter band-tinted halo around the max-size row */
padding: 3px 6px;
border-radius: var(--r-chip);
background: color-mix(in srgb, var(--success) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.arb-size[data-band="green"] { background: color-mix(in srgb, var(--success) 15%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.arb-size[data-band="amber"] { background: color-mix(in srgb, var(--jackpot) 15%, transparent); border-color: color-mix(in srgb, var(--jackpot) 40%, transparent); }
.arb-size[data-band="red"] { background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.arb-size[data-band="unknown"] { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.22); }
.arb-size-icon {
font-family: monospace;
font-size: 11px;
font-weight: 800; /* Build .284: bolder tilde (was 400/normal — looked thin next to the 800-weight max-size amount) */
color: var(--muted);
}
.arb-size-amt {
font-family: monospace;
font-size: 18px;
font-weight: 800;
color: var(--success);
}
.arb-size-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 9px;
color: var(--muted);
}
.arb-size-val { font-weight: 700; }
/* Build v0.35 20260525.223: color-grade the arb-size chip based on the
`size_band` projection from self_arb_opportunities (green ≥ $1k,
amber $100-1k, red < $100, unknown when depth is 0/missing). Gives
the operator an at-a-glance "is this arb actually fillable?" answer
per BI research 2026-05-25. Color overrides the default green so
amber/red unambiguously signal "small" / "paper" arbs. */
.arb-size[data-band="green"] .arb-size-amt { color: var(--success); }
.arb-size[data-band="amber"] .arb-size-amt { color: var(--jackpot); }
.arb-size[data-band="red"] .arb-size-amt { color: var(--danger); }
.arb-size[data-band="unknown"] .arb-size-amt { color: var(--muted, var(--muted)); }
/* Per-side breakdown subtext: compact "Buy $4.5k · Sell $200" line
under the headline max-size chip. Color-cues mirror the existing
.arb-buy-side / .arb-sell-side scheme on platform rows so the user
reads them as the same buy/sell visual language. */
.arb-size-breakdown {
display: inline-flex;
align-items: baseline;
max-width: 100%; /* Build .256: never overflow arb-left column */
overflow: hidden;
text-overflow: ellipsis;
gap: 4px;
font-family: monospace;
font-size: 10px;
margin-left: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arb-size-leg-sep { color: var(--muted, var(--muted)); }
.arb-size-buy { color: var(--success, var(--success)); }
.arb-size-sell { color: var(--danger, var(--danger)); }
/* On amber / red headline, soften the per-side coloration so the
warning state dominates the visual hierarchy. */
.arb-size[data-band="red"] .arb-size-buy,
.arb-size[data-band="red"] .arb-size-sell,
.arb-size[data-band="amber"] .arb-size-buy,
.arb-size[data-band="amber"] .arb-size-sell { opacity: 0.75; }
.arb-card-stale {
background: rgba(148, 163, 184, 0.04);
border-left-color: var(--muted);
opacity: 0.82;
}
.arb-card-stale:hover { border-color: var(--muted); }
.arb-stale-flag {
grid-column: 2;
margin: 2px 0 0 0;
padding: 2px 8px;
background: color-mix(in srgb, var(--jackpot) 12%, transparent);
border-left: 2px solid var(--jackpot);
border-radius: var(--r-chip);
font-size: 10px;
color: var(--jackpot);
font-weight: 600;
width: fit-content;
letter-spacing: 0.03em;
}
/* ──────────────────────────────────────────────────────────────
Hot Underdogs section (build v.03 .99.4; recolored .99.13)
Mirrors the arb-card grid layout but in Kelly green (var(--success)) to
distinguish from the orange arb cards. Green signals "opportunity /
smart-money inflow" rather than the original crimson "alert/heat".
Same 60s refresh cadence; different signal class (per-platform
smart-money vs cross-platform arbs).
────────────────────────────────────────────────────────────── */
/* Build v0.31 build 101 (compaction): mirrors the arb-card compaction
pass — saves ~25-30px per hud-card. Same hierarchy preserved (large
green multiplier dominates; secondary chips smaller). */
.hud-section {
padding: 4px 20px 8px;
}
.hud-heading {
margin: 0 0 5px;
font-size: 12px;
font-weight: 600;
}
.plat-name.hud-name {
color: var(--success);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
}
.hud-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
}
.hud-card {
background: var(--panel);
border: 1px solid var(--border);
border-left: 3px solid var(--success);
border-radius: var(--r-chip);
padding: 0;
cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
/* Build .239: flex-column — header + body + options + meta + progress */
display: flex;
flex-direction: column;
overflow: hidden;
}
.hud-card:hover {
border-color: var(--success);
}
/* Header row: mult (left) + new money (right) */
.hud-header {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 5px 8px 4px;
border-bottom: 1px solid rgba(22, 163, 74, 0.15);
background: rgba(22, 163, 74, 0.05);
}
.hud-mult {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
background: none;
border-radius: 0;
padding: 0;
min-width: unset;
grid-row: unset;
}
.hud-mult-x {
font-family: monospace;
font-size: 18px;
font-weight: 800;
color: var(--success);
line-height: 1;
}
.hud-mult-label {
font-size: 8px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 1px;
text-align: left;
}
.hud-inc {
grid-column: unset;
flex: 1;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 4px;
margin: 0;
min-width: 0;
}
.hud-inc-amt {
font-family: monospace;
font-size: 13px;
font-weight: 800;
color: var(--success);
}
.hud-inc-label {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Build .239: body row = content (left) + liq box (right) */
.hud-body {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0;
padding: 5px 8px 4px;
min-width: 0;
}
.hud-content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hud-liq {
flex: 0 0 80px;
border-left: 1px solid rgba(22, 163, 74, 0.15);
margin-left: 8px;
padding: 4px 6px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
border-radius: var(--r-chip);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1px;
}
.hud-liq-icon { font-size: 12px; line-height: 1; }
.hud-liq-amt { font-family: monospace; font-size: 13px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.hud-liq-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hud-platform-chip {
grid-column: unset;
margin: 0;
min-width: 0;
overflow: hidden;
font-size: 10px;
}
.hud-event-title {
grid-column: unset;
font-size: 11px;
font-weight: 700;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
margin: 1px 0;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Build v.03 .31 build 172: clickable event-title link inside hud-card.
Symmetric with .arb-event-title-link — see comment there. */
.hud-event-title-link {
color: inherit;
text-decoration: none;
cursor: pointer;
position: relative;
border-bottom: 1px dotted color-mix(in srgb, var(--kalshi) 0%, transparent);
transition: border-bottom-color 120ms ease, color 120ms ease;
}
.hud-event-title-link:hover,
.hud-event-title-link:focus {
color: var(--kalshi);
border-bottom-color: color-mix(in srgb, var(--kalshi) 60%, transparent);
outline: none;
}
.hud-options {
grid-column: unset;
padding: 0 8px;
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 1px 0;
}
.hud-option {
display: flex;
align-items: center;
gap: 5px;
padding: 2px 6px;
border-radius: var(--r-chip);
font-size: 10px;
min-width: 0;
overflow: hidden;
}
.hud-underdog {
background: rgba(22, 163, 74, 0.08);
border: 1px solid rgba(22, 163, 74, 0.30);
}
.hud-leader {
background: rgba(148, 163, 184, 0.05);
border: 1px solid rgba(148, 163, 184, 0.15);
}
.hud-option-marker {
font-size: 11px;
line-height: 1;
flex: 0 0 auto;
width: 12px;
text-align: center;
}
.hud-underdog .hud-option-marker { color: var(--success); }
.hud-leader .hud-option-marker { color: var(--muted); }
.hud-option-label {
/* flex-basis 0 (not auto) + min-width 0 so this child can shrink below
its content width and the ellipsis clip kicks in. flex:1 1 auto was
the cause of the overflow — auto basis = "don't shrink below content". */
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
/* Build v0.35 20260523.193: bolder betting-option title per user
request — the underdog/leader candidate name is the focal point
of the Hot Underdog card, so weight it heavier than the meta
chips and price stamp. */
font-weight: 700;
}
.hud-option-pct {
font-family: monospace;
font-weight: 700;
font-size: 11px;
color: var(--text);
margin-left: auto;
}
.hud-meta {
grid-column: unset;
padding: 3px 8px 0;
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 2px;
min-width: 0;
}
.hud-meta-chip {
display: inline-flex;
align-items: center;
gap: 4px; /* Build .266: +1px to balance the larger text */
padding: 2px 6px; /* Build .266: was 1px 5px */
border-radius: var(--r-chip);
/* Build .267: brighter "Before" chip — opacity 0.06 → 0.18 (3×) on bg,
0.18 → 0.50 on border so the value reads as a proper highlighted chip
rather than a barely-tinted span. */
background: rgba(148, 163, 184, 0.18);
border: 1px solid rgba(148, 163, 184, 0.50);
font-size: 11px;
}
.hud-meta-chip.hud-meta-now {
/* Build .267: brighter "Now" chip — opacity 0.06 → 0.20 on bg, 0.20 →
0.55 on border. Stronger kelly-green so the "Now" value reads as
fresh/positive without needing the user to squint. */
background: rgba(22, 163, 74, 0.20);
border-color: rgba(22, 163, 74, 0.55);
}
/* Build .267: brighter inner text colors on both chips so the value
pops against the brighter background. */
.hud-meta-chip .hud-meta-label { color: var(--text); } /* slate-300, was --muted */
.hud-meta-chip .hud-meta-val { color: #f1f5f9; } /* slate-100, was --text */
.hud-meta-chip.hud-meta-now .hud-meta-label { color: #86efac; } /* green-300 */
.hud-meta-chip.hud-meta-now .hud-meta-val { color: #bbf7d0; } /* green-200 */
/* Build v.03 .99.6: flag emojis next to country ISO codes.
Slightly larger than the iso2 text and vertically nudged to align
with the all-caps letters. Used inside .country-chip and inside
.hud-meta-chip wherever a country is rendered. */
.flag-glyph {
font-size: 1.1em;
line-height: 1;
vertical-align: -0.05em;
/* Don't apply text-decoration / color filters from parent link. */
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
"Twemoji Mozilla", system-ui, sans-serif;
}
.hud-meta-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px; /* Build .266: was 8px (+25% to keep label/val ratio readable) */
color: var(--muted);
}
.hud-meta-val {
font-family: monospace;
font-weight: 700;
font-size: 11px; /* Build .266: was 9px (+22%) */
color: var(--text);
}
/* Build .239: progress bar — underdog% | bar | leader% */
.hud-progress {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 8px 6px;
}
.hud-prog-ud, .hud-prog-lead {
font-family: monospace;
font-size: 11px;
font-weight: 700;
flex: 0 0 auto;
}
.hud-prog-ud { color: var(--success); }
.hud-prog-lead { color: var(--muted); }
.hud-prog-bar {
flex: 1;
height: 4px;
background: rgba(148, 163, 184, 0.20);
border-radius: var(--r-chip);
overflow: hidden;
}
.hud-prog-fill {
height: 100%;
background: var(--success);
border-radius: var(--r-chip);
max-width: 100%;
}
.arb-plat-closed {
opacity: 0.55;
text-decoration: line-through;
}
.arb-plat-status {
display: inline-block;
padding: 0 5px;
font-size: 9px;
font-weight: 700;
border-radius: var(--r-chip);
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
margin-left: 4px;
}
.arb-plat-closed-chip {
background: color-mix(in srgb, var(--danger) 18%, transparent);
color: var(--danger);
}
.arb-plat-paused-chip {
background: color-mix(in srgb, var(--jackpot) 18%, transparent);
color: var(--jackpot);
}
.arb-plat-spread {
font-size: 9px;
color: var(--muted);
font-family: monospace;
margin-left: 4px;
}
/* Modal table extra columns */
.arb-depth, .arb-spread-cell, .arb-delta {
font-family: monospace;
font-size: 12px;
color: var(--text);
}
.arb-depth { text-align: right; }
.arb-depth-est {
color: var(--muted);
font-size: 10px;
margin-left: 2px;
font-weight: 400;
}
/* narrow-depth .636 (operator: shared with the free UI): the fillable-at-quote
secondary figure beside the wide depth. Muted + smaller; vars only. */
.arb-depth-narrow {
color: var(--muted);
font-size: 0.86em;
font-weight: 400;
white-space: nowrap;
}
.arb-spread-cell { text-align: right; color: var(--muted); }
.arb-delta { text-align: right; }
.arb-delta-up { color: var(--success); }
.arb-delta-down { color: var(--danger); }
.arb-delta-flat { color: var(--muted); }
.arb-row-stale {
opacity: 0.6;
text-decoration: line-through;
}
.arb-row-stale .arb-stance { opacity: 0.75; }
/* Tier 2 meta-strip (build .46): fees / net spread / implied vig /
persistence_hours. Lives at the bottom of the arb-card and at the
top of the arb modal (between the headline and the table). */
.arb-meta {
grid-column: unset;
display: flex;
flex-direction: row; /* Build .292: horizontal chip strip (was a vertical column) */
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 0;
min-width: 0;
}
/* In the right column, each chip is a row: label left, val right */
.arb-right .arb-meta-chip {
display: flex;
justify-content: space-between;
align-items: center;
}
.arb-meta-modal {
margin: 8px 0 4px;
}
.arb-meta-chip {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 1px 5px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--r-chip);
font-family: monospace;
font-size: 9px;
color: var(--text);
cursor: help;
}
.arb-meta-label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 8px;
color: var(--muted);
}
.arb-meta-val { font-weight: 700; }
.arb-meta-fee { border-color: rgba(148,163,184,0.30); }
.arb-meta-net { border-color: color-mix(in srgb, var(--kalshi) 30%, transparent); }
.arb-meta-net-zero {
opacity: 0.65;
background: rgba(148,163,184,0.10);
}
.arb-meta-net-zero .arb-meta-val { color: var(--muted); }
.arb-meta-net-strong {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.arb-meta-net-strong .arb-meta-val { color: var(--success); }
.arb-meta-vig { border-color: color-mix(in srgb, var(--jackpot) 30%, transparent); }
.arb-meta-vig .arb-meta-val { color: var(--jackpot); }
.arb-meta-vig-arb {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.arb-meta-vig-arb .arb-meta-val { color: var(--success); }
.arb-meta-persist { border-color: color-mix(in srgb, var(--kalshi) 30%, transparent); }
.arb-meta-persist .arb-meta-val { color: var(--kalshi); }
.arb-meta-size { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.arb-meta-size .arb-meta-val { color: var(--success); }
/* Modal table extra columns (build .46) */
.arb-fee-cell {
font-family: monospace;
font-size: 12px;
text-align: right;
color: var(--muted);
}
.arb-fee-cell .arb-fee-none { color: var(--success); font-weight: 700; }
@media (max-width: 600px) {
.arb-grid { grid-template-columns: 1fr; }
}
/* Public wallet page (/wallet/) — long-form leaderboard profile */
.wallet-page-main { padding: 16px 20px 80px; max-width: 1200px; margin: 0 auto; }
.wallet-not-found { text-align: center; padding: 60px 20px; color: var(--muted); }
.wallet-not-found h1 { color: var(--text); margin-bottom: 8px; }
/* 2026-07-02 (operator): de-Orca the wallet-hero top. The prior treatment
(soft rounded pills + rounded panel-2 stat boxes w/ teal mono numerals on
dark navy) read like OrcaLayer's wallet profile. Re-anchored in OUR locked
design language instead — the DEPARTURES BOARD (CLAUDE.md design tenet):
brand three-stripe band (title-gradient DNA), split-flap uppercase name,
ticket-stub badges, Solari flip-tiles w/ amber digits. CSS vars only. */
.wallet-hero {
background: var(--panel); border: 1px solid var(--border);
border-radius: 0 0 var(--r-card) var(--r-card); /* squared top — the stripe band butts the edge */
padding: 26px 24px 22px; margin-bottom: 20px;
position: relative; overflow: hidden;
}
.wallet-hero::before { /* EventTracker signature stripes: teal / pink / amber */
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
background: linear-gradient(180deg,
var(--accent) 0 33.4%, var(--whale) 33.4% 66.7%, var(--jackpot) 66.7% 100%);
}
.wallet-hero-name {
font-size: 26px; font-weight: 800; margin: 0 0 4px;
text-transform: uppercase; letter-spacing: 0.07em; /* departure boards are uppercase */
}
.wallet-hero-name .wallet-aka { text-transform: none; letter-spacing: 0.02em; } /* pseudonym pill stays literal */
.wallet-hero-addr { font-family: monospace; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.wallet-hero-addr code { font-size: 11px; word-break: break-all; }
.wallet-hero-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }
/* Build v0.4 (operator 2026-06-07): ET& wallet-follow ⭐ button + the
/me/follows management table. Theme vars only — auto-themes for peach.
Button lives inline in the wallet-hero-addr row; toggles between ☆/★. */
/* Build v0.4 Phase 1.5 (operator 2026-06-07): site-wide follow-nickname overlay.
When the authenticated client (window.applyFollowNicknames) finds a wallet-link
for a followed wallet, it adds class `wallet-link-followed` + injects a ★ chip
+ the user's PRIVATE nickname. CSS theme vars only — auto-themes for peach.
Privacy invariant: server never emits these classes; only the client overlays
them after auth. */
.wallet-link-followed { color: var(--accent); font-weight: 600; }
.wallet-link-followed:hover { color: var(--accent); text-decoration: underline; }
.wallet-link-star {
display: inline-block;
margin-right: 3px;
color: var(--jackpot, var(--accent));
font-size: 0.9em;
vertical-align: -1px;
}
.wallet-link-nick { font-style: italic; }
.wallet-follow-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
background: transparent; color: var(--muted);
border: 1px solid var(--border); border-radius: var(--r-chip);
font-size: 11px; font-family: inherit; cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.wallet-follow-btn:hover { color: var(--accent); border-color: var(--accent); }
.wallet-follow-btn.wallet-follow-on {
color: var(--accent); border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.wallet-follow-btn.wallet-follow-on:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.wallet-follow-icon { font-size: 14px; line-height: 1; }
/* /me/follows management table */
.follows-table { font-size: 13px; }
.follows-table thead tr { border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.follows-table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.follows-table tbody tr:last-child { border-bottom: none; }
.follow-target-link { color: var(--text); text-decoration: none; }
.follow-target-link:hover .follow-target-code,
.follow-target-link:hover .follow-target-aka { color: var(--accent); }
.follow-target-code { font-size: 12px; }
/* ww-aka 2026-07-08: resolved wallet name / AKA in the follows list (proportional,
not the mono hash). */
.follow-target-aka { font-size: 13px; font-weight: 600; }
.follow-type-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; border-radius: var(--r-chip); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 700; letter-spacing: 0.05em; }
.follow-edit-nick { margin-left: 6px; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.follow-edit-nick:hover { color: var(--accent); }
.follow-mode-sel { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-chip); padding: 2px 4px; font-size: 12px; font-family: inherit; }
.follow-unfollow { background: transparent; color: var(--danger, #f43f5e); border: 1px solid color-mix(in srgb, var(--danger, #f43f5e) 40%, transparent); border-radius: var(--r-chip); padding: 3px 9px; font-size: 11px; font-family: inherit; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.follow-unfollow:hover { background: color-mix(in srgb, var(--danger, #f43f5e) 14%, transparent); border-color: var(--danger, #f43f5e); }
.wallet-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* 2026-07-02 de-Orca: badges are TICKET STUBS (square corners, dashed edge,
solid semantic-colored left stub-bar) — not the soft rounded emoji pills
every trader-profile site ships. Variant rules recolor the stub bar. */
.wallet-badge {
display: inline-block; padding: 4px 10px; border-radius: 2px;
background: color-mix(in srgb, var(--panel-2) 82%, transparent); color: var(--text);
border: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
border-left: 3px solid var(--accent);
font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.wallet-badge-roi.roi-strong { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-left-color: var(--success); }
.wallet-badge-roi.roi-good { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border-left-color: var(--success); }
.wallet-badge-roi.roi-mid { color: var(--muted); border-left-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.wallet-badge-roi.roi-bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-left-color: var(--danger); }
.wallet-badge-elite {
background: color-mix(in srgb, var(--jackpot) 14%, transparent);
color: var(--jackpot); border-left: 3px solid var(--jackpot);
font-size: 12px; font-weight: 800;
}
.wallet-hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
/* 2026-07-02 de-Orca: stat boxes are SPLIT-FLAP TILES (Solari departures
board): near-square corners, two-tone flap halves w/ a seam at 50%, and
AMBER flip-digit numerals (--jackpot) — vs the rounded card + mint numeral
grammar OrcaLayer uses. The seam is a ::after so it never touches markup. */
.wh-stat {
background: linear-gradient(180deg,
color-mix(in srgb, var(--panel-2) 94%, white) 0 50%,
color-mix(in srgb, var(--panel-2) 90%, black) 50% 100%);
border: 1px solid var(--border); border-radius: 3px;
padding: 14px; text-align: center; position: relative; overflow: hidden;
}
.wh-stat::after { /* the flap seam */
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.wh-stat-num {
font-family: monospace; font-size: 22px; font-weight: 800;
color: var(--jackpot); /* Solari flip-digit amber */
text-shadow: 0 0 10px color-mix(in srgb, var(--jackpot) 30%, transparent);
}
/* Build v0.35 20260525.217 (item 1): green/red tint for the Net P&L
tile in the wallet hero — pulls the PnL sign into the big-bold box
so visitors don't need to read the small "+" sign to read the trend. */
.wh-stat-num.wh-stat-pos { color: var(--success); }
.wh-stat-num.wh-stat-neg { color: var(--danger); }
.wh-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
@media (max-width: 700px) { .wallet-hero-stats { grid-template-columns: repeat(2, 1fr); } }
/* Build v0.4 20260530.283: activity-first hero — 5 columns (was 4) for
Total bets / Total events / Avg per bet / Avg per event / sparkline.
The sparkline tile sets `color: var(--accent)` so the inline SVG's
stroke="currentColor" inherits the accent without a hardcoded hex. */
.wallet-hero-activity { grid-template-columns: repeat(5, 1fr); }
.wh-stat-spark { color: var(--accent); display: flex; flex-direction: column; justify-content: center; }
.wh-spark-wrap { width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; }
.wh-spark-svg { width: 100%; height: 100%; overflow: visible; }
.wh-spark-empty { font-family: monospace; font-size: 18px; font-weight: 800; color: var(--muted); }
@media (max-width: 700px) { .wallet-hero-activity { grid-template-columns: repeat(2, 1fr); } }
/* Build .283: prominent open-positions row under the hero boxes (full page) */
.wallet-openpos-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
background: var(--panel-2); border: 1px solid var(--border);
border-left: 3px solid var(--accent); border-radius: var(--r-card);
padding: 12px 14px; margin: 14px 0 0 0; font-size: 13px;
}
.wallet-platforms { margin-bottom: 18px; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 0 20px; }
.wp-card { background: var(--panel-2); border-radius: var(--r-card); padding: 12px; }
.wp-plat { display: inline-block; margin-bottom: 6px; }
.wp-trades { font-size: 12px; color: var(--muted); }
.wp-vol { font-family: monospace; font-size: 14px; color: var(--accent); margin-top: 2px; }
/* PMXT positions block on /wallet/ pages (added May 13). Live
open-position data fetched per wallet from pmxt.Polymarket().fetch_positions().*/
.wallet-pmxt { padding: 0 20px; margin-bottom: 24px; }
.wallet-pmxt .section-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.pmxt-summary {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin-bottom: 14px;
}
.pmxt-stat {
background: var(--panel-2); border-radius: var(--r-card); padding: 10px 14px;
border-top: 2px solid var(--platform-manifold-brand);
}
.pmxt-stat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); margin-bottom: 4px;
}
.pmxt-stat-val { font-family: monospace; font-size: 18px; font-weight: 600; }
.pmxt-pnl-pos { color: var(--success); }
.pmxt-pnl-neg { color: var(--danger); }
.pmxt-plat-header {
font-size: 13px; margin: 12px 0 6px 0;
display: flex; align-items: center; gap: 10px;
}
.pmxt-plat-count { color: var(--muted); font-size: 11px; font-weight: 400; }
.pmxt-pos-table {
width: 100%; border-collapse: collapse; font-size: 12px;
background: var(--panel-2); border-radius: var(--r-card); overflow: hidden;
}
.pmxt-pos-table th {
text-align: left; padding: 6px 10px; color: var(--muted);
font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
border-bottom: 1px solid var(--border);
}
.pmxt-pos-table td { padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--platform-manifold-brand) 8%, transparent); }
.pmxt-pos-table tr:last-child td { border-bottom: none; }
.pmxt-num { font-family: monospace; text-align: right; }
.pmxt-more { font-size: 11px; color: var(--muted); margin-top: 6px; padding-left: 10px; }
/* Build .68: Market + Bet columns added to the PMXT open-positions table. */
.pmxt-mkt {
font-size: 13px;
max-width: 360px;
cursor: help;
}
.pmxt-mkt a { color: var(--text); text-decoration: none; }
.pmxt-mkt a:hover { color: var(--accent); text-decoration: underline; }
.pmxt-bet {
font-size: 12px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
@media (max-width: 700px) {
.pmxt-summary { grid-template-columns: 1fr; }
.pmxt-mkt { max-width: 180px; font-size: 11px; }
}
/* Build v0.4 20260526.229: sx.bet L3 surfacing.
Two pieces:
1. The "↔ Also on sx.bet" cross-match chip in the wallet hero
badges row. Fires when this Polymarket EOA is also active
as an sx.bet maker (per the L3 archive's wallet_index).
Cyan-purple tint differentiates it from green ROI badges.
2. The "🎯 sx.bet Open Orders" panel just above the recent-trades
section. Reuses .pmxt-pos-table for layout consistency
with the PMXT open-positions block — purpose is similar
(forward-looking exposure), and one shared visual vocab
keeps the page legible. */
.wallet-badge-cross-match {
/* 2026-07-02 de-Orca: keep the ticket-stub grammar (dashed edge + solid
left stub-bar) — the cyan is the cross-venue semantic color. */
background: color-mix(in srgb, var(--platform-manifold-brand) 14%, transparent);
color: var(--text);
border: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
border-left: 3px solid var(--platform-manifold-brand);
}
.wallet-badge-bot {
/* sxbet-forensics v3: honest "automated market-maker" label — amber (the
dominant-palette caution hue) in the same ticket-stub grammar. */
background: color-mix(in srgb, var(--jackpot) 15%, transparent);
color: var(--text);
border: 1px dashed color-mix(in srgb, var(--muted) 40%, transparent);
border-left: 3px solid var(--jackpot);
text-transform: none; /* the reason string reads as prose, not a shout */
}
/* Build v0.4 20260526.230: per-source logo emblems sitting beside the
text platform-chips throughout tickers, cards, and event rows. The
existing .sig-plat coloured badge stays (color affordance + fallback
when a venue has no PNG yet) — the logo just makes the brand
immediately scannable. Sized to align with the smaller ticker
chips; on rows that use larger 14-16 px logos elsewhere (top-20
list, board panels) the existing .mkt-logo / .board-panel-logo
rules keep those bigger. */
.plat-chip-logo {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 4px;
border-radius: var(--r-chip);
flex-shrink: 0;
}
/* Build .252: Manifold logo is dark indigo — almost invisible on our dark
background. Boost brightness universally wherever it appears. */
img[src*="manifold"] { filter: brightness(3) saturate(0.9); }
/* Gemini Titan logo: black ring-mark cleaned to transparent (white tile +
clipped right-edge glyph removed). Invert so the black mark renders white
on the dark theme; the peach twin (below) restores it to dark on light. */
img[src*="gemini_titan"] { filter: invert(1); }
/* smarkets-logo (.410, 2026-06-20): the global `img[src*="smarkets"]` scale
override (.407 1.4× → .409 2.52×) was REMOVED. ROOT CAUSE it caused: an
attribute selector (specificity 0,1,1) outranks `.mkt-logo` (0,1,0, which
sets its own scale(1.2)) and `.dep-venue-logo`/`.plat-chip-logo` (14px), so
Smarkets rendered 2.52× in EVERY context — ~35px inline (too big) and ~40px
in the compact Marketplace row, overflowing the cell + clipping to an
unrecognizable slice ("disappeared" when data IS present). Fix = no override:
Smarkets follows the SAME per-context sizing as every other venue logo.
⛔ NEVER re-add a global smarkets scale — if the mark reads small, fix the
ASSET (de-pad the PNG), not a transform that fights the per-context rules. */
/* smarkets-circle 2026-06-21 (operator): the smarkets.png asset is a dark-circle
logo that reads ~50% smaller than peers in two specific surfaces. Bump it +50%
in ONLY those two contexts, Smarkets-scoped — NOT a global transform (that was
the .340-era footgun that clipped the compact rows). Specificity wins cleanly:
`.mkt-logo[src*=smarkets]` (0,2,0) > base `.mkt-logo` (0,1,0); the scoped
modal-header rule (0,3,0) > base `.plat-chip-logo` (0,1,0). Transform keeps the
layout box fixed (rows don't grow); only the visible dark circle enlarges. The
compact board/ticker `.plat-chip-logo` rows are deliberately UNTOUCHED. */
.mkt-logo[src*="smarkets"] { transform: scale(1.8); } /* marketplace icon: 1.2 base × 1.5 */
.modal-platform .plat-chip-logo[src*="smarkets"] { transform: scale(1.5); } /* event-modal icon: +50% */
.wallet-sxbet-orders { padding: 0 20px; margin-bottom: 24px; }
.wallet-sxbet-orders .section-sub {
font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px;
}
.sxbet-orders-wrap { overflow-x: auto; }
.sxbet-orders-table th:first-child,
.sxbet-orders-table td:first-child { padding-left: 12px; }
/* Subtle cyan top-stripe so the section reads as sx.bet at a glance,
echoing the cross-match chip palette. */
.sxbet-orders-table {
border-top: 2px solid rgba(34,211,238,0.45);
}
.sxbet-exp {
font-size: 11px; color: var(--muted);
white-space: nowrap;
}
.wallet-trades-wrap { padding: 0 20px; overflow-x: auto; }
.wallet-page .back-link {
font-size: 12px; color: var(--muted); text-decoration: none;
}
.wallet-page .back-link:hover { color: var(--accent); }
/* Elite-wallet styling on the leaderboard panel */
.sig-row-elite { background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent); }
.elite-star { margin-left: 4px; font-size: 12px; }
/* Admin link + footer Collect Now (Phase 4 + admin gating) */
.admin-link {
font-size: 11px; color: var(--muted); text-decoration: none;
margin-left: 8px; opacity: 0.5; cursor: pointer;
}
.admin-link:hover { opacity: 1; color: var(--accent); }
/* Visitor counter / globe / flags — ADMIN-ONLY (operator 2026-06-06).
Hidden for everyone by default; revealed only when admin mode is on
(body.admin-on, set from localStorage['podcomet-admin'] by _initAdmin /
promptAdmin in index.html). Visit TRACKING (/api/track) is untouched —
only the on-page display is gated, so the counts the admin sees stay
accurate. */
body:not(.admin-on) .admin-only { display: none !important; }
.collect-btn-footer {
font-size: 11px; padding: 3px 10px; margin-left: 4px;
vertical-align: middle;
}
/* Build .260: .rp-section-title + .rp-table cell rules removed —
Risers + Coldest now use the .movers-merged-card / .mvm-* namespace. */
/* Rank-change arrows on Top-20 rows. Sit at the row's far left; the
row's existing left padding/numbering stays in place. */
.t20-arrow {
display: inline-block; width: 14px; text-align: center;
margin-right: 4px; font-family: monospace;
font-size: 11px; line-height: 1;
vertical-align: middle;
}
.t20-arrow-up { color: var(--success); }
.t20-arrow-down { color: var(--danger); }
.t20-arrow-same { color: var(--jackpot); opacity: 0.8; }
.t20-arrow-new { color: var(--platform-manifold-brand); }
/* Section headings (subtle hr above each major below-the-fold section) */
.section-heading {
font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted);
margin: 18px 20px 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* Wallet track-record badges (in smart-money rows + top-wallets card) */
.track-badge {
font-family: monospace; font-size: 10px; font-weight: 700;
padding: 1px 5px; border-radius: var(--r-chip);
}
.track-badge.tr-good { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.track-badge.tr-bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.track-badge.tr-mid { background: var(--panel-2); color: var(--muted); }
/* Marketplace activity table (replaces Whale Leaderboard in signals row) */
.marketplace-card { border-top: 3px solid var(--kalshi); }
.plat-name.marketplace-name { color: var(--kalshi); }
/* Build v0.35 20260523.193 (2026-05-23): Latest Analysis card.
Purple top-stripe (var(--platform-manifold-brand)) distinguishes editorial/insight content
from the data-pull cards (Anomaly amber, Smart-Money pink,
Marketplace blue, Movers/Topics accent). Placeholder body is
centered with a muted icon + heading so the reserved slot reads
intentionally-empty rather than broken. */
.latest-analysis-card { border-top: 3px solid var(--platform-manifold-brand); }
.plat-name.latest-analysis-name { color: var(--platform-manifold-brand); }
.latest-analysis-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px 16px;
gap: 6px;
color: var(--muted);
min-height: 120px;
}
.la-placeholder-icon { font-size: 28px; line-height: 1; opacity: 0.7; }
.la-placeholder-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.la-placeholder-text {
font-size: 11px;
line-height: 1.45;
max-width: 36ch;
color: var(--muted);
}
/* Build v0.35 20260524 (2026-05-24): Latest News list inside the
.latest-analysis-card. Each item is a single link wrapping the
headline + provider badge + source + relative age. Provider
badge colors mirror the modal "Related news" badges so the visual
language stays consistent across page surfaces (Guardian blue,
NewsData amber, Currents emerald, HN orange, GDELT slate). */
/* Build v0.35 20260525.222: compact inline layout — provider badge + age
on the same line as the headline (was two-block column layout). */
.la-news-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px; /* was 4px */
}
/* latest-news 2026-07-28 (operator): the Latest News tabs (Headlines + Landscape)
are ONE WIDE COLUMN so full item titles fit before the single-line ellipsis
(.la-news-title clamps to one line — a wider row shows more characters). Still
overrides .la-news-list's flex; same 1-class specificity, declared later wins. */
.smh-news-list {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
align-content: start;
}
@media (max-width: 600px) {
.smh-news-list { grid-template-columns: 1fr; }
}
.la-news-item { margin: 0; padding: 0; }
.la-news-link {
display: flex;
flex-direction: row; /* was column */
align-items: baseline;
gap: 6px;
padding: 4px 8px; /* was 7px 8px */
border-radius: var(--r-chip);
text-decoration: none;
color: var(--text);
border-left: 2px solid transparent;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.la-news-link:hover {
background: color-mix(in srgb, var(--platform-manifold-brand) 6%, transparent);
border-left-color: var(--platform-manifold-brand);
}
.la-news-title {
flex: 1 1 0;
min-width: 0;
font-size: 12px;
line-height: 1.3;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* single-line clamp in row layout */
}
/* peach-news-ink .849 (operator: "make headline text shade for LATEST NEWS and
LANDSCAPE tabs darker for peach UI theme"). Both tabs render the SAME
`.la-news-title` (Elections uses `.elec-title`, so it is untouched), and the
title carries no colour of its own — it inherits `.la-news-link`'s
`var(--text)`, which on peach is the espresso #3b2f25 against a pale-salmon
panel. Scoped to the peach theme so dark/light are byte-identical. */
:root[data-theme="peach"] .la-news-title {
color: var(--text-strong);
}
:root[data-theme="peach"] .la-news-link:hover .la-news-title {
color: var(--text-strong); /* hover must not walk it back to --text */
}
.la-news-meta {
flex-shrink: 0;
display: flex;
gap: 4px;
align-items: center;
font-size: 10.5px;
color: var(--muted);
}
/* pm-landscape 2026-07-10: venue logo(s) inline before a 🌐 Landscape headline,
showing which marketplace(s) the story is about. */
.la-news-venue-logo {
width: 14px; height: 14px;
border-radius: 3px;
vertical-align: -2px;
margin-right: 3px;
}
.la-news-prov {
display: inline-block;
padding: 1px 6px;
border-radius: var(--r-chip);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
background: var(--panel-2);
color: var(--muted);
}
.la-news-prov-badge-guardian { background: rgba(93, 168, 255, 0.18); color: #5da8ff; }
.la-news-prov-badge-newsdata { background: rgba(245, 158, 11, 0.18); color: var(--jackpot); }
.la-news-prov-badge-currents { background: rgba(16, 185, 129, 0.18); color: var(--success); }
.la-news-prov-badge-hackernews { background: rgba(255, 102, 0, 0.20); color: #ff6600; }
.la-news-prov-badge-gdelt { background: rgba(148, 163, 184, 0.18); color: var(--muted); }
.la-news-source {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 18ch;
}
.la-news-age {
margin-left: 0; /* was auto (only needed in column layout) */
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
/* Build v.03 .31 build 169 (2026-05-23): explicit top-anchor for the
Marketplace Activity card. It spans 2 grid rows in the 3×2 signals
grid, so the card height is tall; without an explicit justify-content
the flex children (h3 + 7-day chart + table) could end up visually
floating relative to neighbouring cards. Force top alignment so the
list sits at the top of its box regardless of total card height. */
.signals-row-3x2 .marketplace-card {
justify-content: flex-start;
align-content: flex-start;
}
.marketplace-card .mkt-table {
/* Ensures any margin-collapse doesn't push the table downward.
Build v.03 .31 build 172: dropped `margin-bottom: auto` — the chart
now lives BELOW the table (build 169 layout had chart above, table
below). With table-first, the chart fills any remaining flex
space naturally and pushing the table to the top is unnecessary. */
margin-top: 4px;
margin-bottom: 8px;
}
/* Build v.03 .31 build 172: kill any leading whitespace above the h3.
`signals-card` already pads internally; we want the title flush. */
.marketplace-card > h3 {
margin-top: 0;
}
/* Build v.03 .31 build 171 (2026-05-23): platform-logo PNGs next to
venue names. Three sizes — 16px in the Marketplace Activity table,
20px in the top-10 hero tile headers, 14px in the top-20 tab nav.
Use vertical-align: middle so they line up with the text baseline
nicely. `object-fit: contain` defends against logos that aren't
perfectly square. */
/* mkt-status-light 2026-06-25: Marketplace Activity status dot — the .422
snap-presence health light upgraded in place to ledger-driven states.
green = online (data this cycle); red = offline (absent + seen before —
sticky until it returns); amber = relay (Fly-routed venue, London proxy
down); no dot = never-seen / PMXT-only. Colors alias --success/--danger/
--jackpot so they auto-theme (peach redefines all three). Offline/relay
rows dim their volume cell. */
.mkt-status {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: middle; flex: 0 0 auto;
}
.mkt-status-online { background: var(--success); box-shadow: 0 0 4px color-mix(in srgb, var(--success) 70%, transparent); }
.mkt-status-offline { background: var(--danger); opacity: 0.85; }
.mkt-status-relay { background: var(--jackpot); opacity: 0.85; }
.mkt-row-offline td.mkt-vol { opacity: 0.55; }
.mkt-logo {
display: inline-block;
vertical-align: -3px;
margin-right: 6px;
width: 16px; /* layout box stays 16×16 — row height unchanged */
height: 16px;
/* 2026-06-14: +20% visual size via transform (layout unchanged → rows DON'T grow). */
transform: scale(1.2);
transform-origin: center;
object-fit: contain;
border-radius: var(--r-chip);
/* Subtle ring so light logos don't disappear against the dark panel */
background: rgba(255,255,255,0.04);
}
.plat-logo {
display: inline-block;
vertical-align: -4px;
margin-right: 6px;
width: 20px;
height: 20px;
object-fit: contain;
border-radius: var(--r-chip);
background: rgba(255,255,255,0.04);
}
.t20-tab-logo {
display: inline-block;
vertical-align: -2px;
margin-right: 4px;
width: 14px;
height: 14px;
object-fit: contain;
border-radius: var(--r-chip);
background: rgba(255,255,255,0.04);
}
/* Slightly compact spacing on the top-20 tab buttons so the logo +
text don't visually overflow on narrow viewports. */
.top-events-tabs button { gap: 0; }
/* Build .57 — visible "as of HH:MM UTC" freshness chip in the card header. */
.mkt-asof {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
font-family: monospace;
font-size: 10px;
color: var(--muted);
background: var(--panel-2);
border-radius: var(--r-card);
cursor: help;
vertical-align: 1px;
letter-spacing: 0.02em;
}
.mkt-table {
width: 100%; border-collapse: collapse;
font-size: 12px; line-height: 1.4;
}
.mkt-table th {
text-align: left; padding: 6px 8px;
border-bottom: 1px solid var(--border);
color: var(--muted); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;
}
.mkt-table td {
padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--kalshi) 8%, transparent);
vertical-align: middle;
}
.mkt-table tr:last-child td { border-bottom: none; }
.mkt-table .mkt-rank { text-align: center; color: var(--muted); font-family: monospace; width: 28px; }
.mkt-table .mkt-vol { font-family: monospace; font-weight: 600; text-align: right; }
/* mkt-30d 2026-09-07 (operator: "you can narrow the distance between the first
two columns to achieve that"). The Marketplace↔24h-volume gutter was the
widest in the row — 8px of padding on each side of it — and this takes 12 of
those 16px back. It is half of what the 6th Δ column costs; the other half is
on .mkt-delta below.
⚠ MEASURED ON THE PRODUCTION ROW SET, not on a tidy fixture. The first pass
measured a harness whose Rothera/ProphetX/UDX/ForecastEx rows had no EOD chip,
which made the Marketplace column 166px instead of production's 240px and the
whole question 74px easier than it really is. Against the archived
2026-09-07 02:01 capture (29 rows, chips and all), in the 556px card a 1360px
viewport gives: .933 as shipped 523px, .933 + this column 574px (the column
costs 51), this trim alone 562 (still over), the Δ trim alone 554 (inside by
2px, which is luck not margin), both trims 542. */
.mkt-table .mkt-name { padding-right: 2px; }
.mkt-table .mkt-vol { padding-left: 2px; }
.mkt-table .mkt-vol-sub { color: var(--muted); font-weight: 400; font-size: 10px; display: block; }
/* 2026-06-14: delta cols auto-size to content (no min-width) — rank column was
removed to free space; cells now shrink to actual numeric width within the
323px right-flank card. Worst-case "+1,234.5%" measures ~70px @ 11px mono. */
/* mkt-30d 2026-09-07: 4px → 2px a side, the second half of what the new column
costs (numbers in the .mkt-name comment above). The first two columns could
not pay for it alone — the column is 51px wide and that gutter only had 12 to
give — so five right-aligned nowrap numeric columns give up 2px a side each.
That is 20px more, the table lands at 542 inside a 556px card, and the 1360
verdict matches .933 exactly; every wider viewport already fitted. */
.mkt-table .mkt-delta { font-family: monospace; text-align: right; font-size: 11px; white-space: nowrap; padding-left: 2px; padding-right: 2px; }
.mkt-table .mkt-events { font-family: monospace; text-align: right; color: var(--muted); width: 60px; }
.mkt-table .mkt-source { font-size: 10px; color: var(--muted); width: 90px; }
.mkt-table .mkt-source-pmxt { color: var(--platform-manifold-brand); } /* PMXT rows in purple */
.mkt-table .mkt-na { color: var(--muted); opacity: 0.5; }
.mkt-table .mkt-row-pmxt td.mkt-name .sig-plat { opacity: 0.85; }
/* .363 (2026-06-10): OI-based presentation (Opinion) — venue open interest
shown instead of wash-prone volume. Small "OI" chip distinguishes the
figure from the volume numbers in sibling rows. Colors via vars only
(graphical tenet). */
.mkt-table .mkt-oi-val { color: var(--text); }
.mkt-table .mkt-oi-chip {
display: inline-block;
margin-left: 5px;
padding: 0 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.6;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--r-chip);
vertical-align: 1px;
opacity: 0.9;
}
/* 2026-06-16: EOD-venue cadence chip (e.g. Rothera) — muted, informational.
CSS vars only (graphical tenet). */
.mkt-table .mkt-eod-chip {
display: inline-block;
margin-left: 5px;
padding: 0 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.6;
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--r-chip);
vertical-align: 1px;
white-space: nowrap;
cursor: help;
}
/* pariflow-mktrow 2026-07-09: relay/aggregator chip (Pariflow re-serves other
venues' markets). Same footprint as the EOD chip; teal accent border marks it
as a source-type tag rather than a status. All colors via CSS vars (tenet). */
.mkt-table .mkt-relay-chip {
display: inline-block;
margin-left: 5px;
padding: 0 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.6;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--r-chip);
vertical-align: 1px;
white-space: nowrap;
cursor: help;
opacity: 0.85;
}
/* oddsapi-activity 2026-06-25: EOD activity presentation (ProphetX/Novig via The Odds API) */
.mkt-eod-markets { font-variant-numeric: tabular-nums; }
.mkt-eod-moves { color: var(--muted); }
/* novig-parlay-flow rev 2: the venue-wide EOD parlay line is a SENTENCE, not a
stat chip. It must WRAP at every width — never clip, and never be clamped
with text-overflow:ellipsis, which is precisely how the 320px truncation
defect was re-introduced the second time. Left-aligned so the wrapped lines
read as prose inside an otherwise right-aligned numeric cell. */
.mkt-parlay-eod {
color: var(--muted);
white-space: normal;
overflow-wrap: anywhere;
text-overflow: clip;
overflow: visible;
text-align: left;
line-height: 1.35;
max-width: 100%;
}
/* .364 (2026-06-10): Marketplace sort toggle — Activity ↔ Open Interest.
Small segmented control above the table. All colors via vars per the
graphical tenet. Hidden entirely when no row has OI data (handled
server-side: {% if _any_oi %}). */
.mkt-sort-bar {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0 8px;
font-size: 11px;
color: var(--muted);
}
.mkt-sort-label {
font-size: 10.5px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.mkt-sort-btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
font-family: inherit;
font-size: 11px;
font-weight: 600;
padding: 2px 9px;
border-radius: var(--r-card);
cursor: pointer;
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
}
.mkt-sort-btn:hover { color: var(--text); border-color: var(--muted); }
.mkt-sort-btn-active,
.mkt-sort-btn-active:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--panel);
}
/* When sorting by OI, deemphasize rows without an OI source so the
meaningful subset reads first. Volume mode = no special treatment. */
.mkt-table[data-sort-mode="oi"] .mkt-row-no-oi {
opacity: 0.55;
}
.mkt-table[data-sort-mode="oi"] .mkt-row-no-oi:hover {
opacity: 0.85;
}
/* Operator 2026-06-16 (.402): bold follows the SELECTED metric. Operator
2026-06-17 (.403): go further — swap the full visual HIERARCHY so OI view is
the mirror of Activity view. Activity view already shows the volume headline
big + the OI sub-line small/muted; in OI view, shrink+mute the volume
headline and PROMOTE the OI figure to headline size/weight/color. The OI
figure is either the `.mkt-oi-sub` sub-line (most venues) or the
`.mkt-oi-val` headline (OI-native venues like Opinion). `.mkt-oi-sub`
(not generic `.mkt-vol-sub`) so the mana USD-equiv sub stays muted. */
.mkt-table[data-sort-mode="oi"] .mkt-vol { font-weight: 400; font-size: 10px; color: var(--muted); }
.mkt-table[data-sort-mode="oi"] .mkt-oi-sub { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.mkt-table[data-sort-mode="oi"] .mkt-oi-val { font-size: 13px; font-weight: 700; color: var(--text); }
/* .375 (2026-06-11): Generic header-driven list-sort affordance.
Applies to the Federated Board (.dep-head) and the Anomaly list
(.anom-head). All colors via vars per the graphical tenet. */
.pc-sort-th {
cursor: pointer;
user-select: none;
transition: color var(--m-tab);
position: relative;
}
.pc-sort-th:hover { color: var(--text); }
.pc-sort-th[data-sort-dir="asc"]::after { content: " ↑"; color: var(--accent); }
.pc-sort-th[data-sort-dir="desc"]::after { content: " ↓"; color: var(--accent); }
.pc-sort-th.pc-sort-active { color: var(--accent); font-weight: 700; }
/* Anomaly header strip — same column widths as the rendered rows so
labels visually align with the data underneath. The rows themselves
keep their existing free-form `.sig-meta` layout; only the header is
new. Grid uses minmax so the title column flexes. */
.anom-head {
display: grid;
grid-template-columns: 70px minmax(0, 1fr) 70px;
gap: 6px;
align-items: center;
padding: 4px 8px 6px;
margin: 4px 0 2px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.7px;
color: var(--muted);
border-bottom: 1px solid var(--border);
}
.anom-cell.anom-score { text-align: right; }
/* Build .272 (2026-05-29): venue name + logo in the Marketplace Activity
table link to the platform's homepage. Inherit color + drop the default
underline so the row renders identically to before; hover underlines the
name badge as a click affordance. display:inline keeps the existing logo
vertical-align + margin layout untouched. */
.mkt-name-link { color: inherit; text-decoration: none; cursor: pointer; }
/* mkt-widen .886 (operator, with screenshot): "I want all venue logos to
appear in line with the venue name and notes". At narrow column widths the
name cell WRAPPED - status dot on one line, logo+name beneath, EOD/relay
chips wherever they fell. One row = one line: the cell refuses to wrap and
the link lays out dot/logo/name as a single centered inline-flex line.
Phones are unaffected - their <=700px block scrolls the card sideways BY
DESIGN (.861), which is exactly what nowrap needs. */
.mkt-table td.mkt-name { white-space: nowrap; }
.mkt-table td.mkt-name .mkt-name-link { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
/* .886: the status dot is a SIBLING of the link; both must sit on the line's
middle or the dot rides ~5px low against the logo/name (measured). */
.mkt-table td.mkt-name .mkt-logo { flex: 0 0 auto; }
.mkt-eod-chip, .mkt-relay-chip { white-space: nowrap; }
.mkt-name-link:hover .sig-plat { text-decoration: underline; }
.mkt-name-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: var(--r-chip); }
/* arb-gate 2026-07-10 (operator): the LOCKED arb alert shell served to
non-subscribers on the cached homepage ("AVAILABLE FOR ET& SUBSCRIBERS"). */
.ct-alert.ct-arb-locked .ct-arb-locked-msg { font-weight: 700; letter-spacing: 0.04em; }
.ct-alert.ct-arb-locked { cursor: pointer; }
/* mkt-card 2026-07-09 (operator): the Marketplace Card modal — venue link +
7-day volume (total + daily sparkline) + OI, opened from a venue name in the
Marketplace Activity table. Rendered inside the generic #modal-body shell.
Colors via vars only; the sparkline bar color is set inline in JS from the
same per-venue hue the 7-day stacked chart already uses. */
/* Narrow the shared event-modal shell for the compact Marketplace Card (the
modifier class is added on open + removed in closeModal). Without it the
card floats in the ~820px event-modal box. High specificity so it wins over
the base .modal width. */
/* marketplace-weekly 2026-07-24: widened 460px -> 560px so the added weekly
running series (vol/OI bars + M/D labels since Jun 15) fits on one line; still
well under the ~820px event-modal box, and max-width:90vw keeps it responsive
(no horizontal scroll). */
#modal-overlay .modal.modal-mkt-card { width: 560px; max-width: 90vw; }
.mkt-card { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.mkt-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mkt-card-head img { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; }
.mkt-card-name { font-size: 18px; font-weight: 700; color: var(--text); }
/* card-brand-lockup 2026-08-04 (operator): EventTracker mini-logo + wordmark
in the top-left of every pop-up surface (event / wallet / disambiguation /
marketplace / full profile). font-size:1em -> matches the adjacent title;
glyph = the teal/pink/gold title-stripe brand identity, all via brand vars. */
.et-brand-lockup{ display:inline-flex; align-items:center; gap:.34em; font-size:1em; font-weight:600; line-height:1; color:var(--accent); white-space:nowrap; text-transform:none; letter-spacing:.01em; vertical-align:-0.06em; margin-right:.5em; padding-right:.5em; border-right:1px solid var(--border); }
.et-brand-glyph{ display:inline-block; flex:0 0 auto; width:.7em; height:.8em; border-radius:1px; background:linear-gradient(var(--accent) 0 26%, transparent 26% 37%, var(--whale) 37% 63%, transparent 63% 74%, var(--jackpot) 74% 100%); }
.mkt-card-head .et-brand-lockup{ font-size:18px; }
/* mkt-name-native 2026-07-16: the card name is a native-site link — wraps
logo+name; mirrors .mkt-card-head's flex/gap so geometry is unchanged. */
.mkt-card-name-a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.mkt-card-name-a:hover .mkt-card-name { color: var(--accent); text-decoration: underline; }
.mkt-card-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mkt-card-link:hover { text-decoration: underline; }
.mkt-card-block { display: flex; flex-direction: column; gap: 4px; }
.mkt-card-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); } /* text-soft 2026-07-10 */
.mkt-card-big { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mkt-card-note { font-size: 12px; color: var(--text-soft); } /* text-soft 2026-07-10 */
.mkt-card-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 2px; }
.mkt-card-bar { flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0; opacity: 0.85; }
.mkt-card-bar:hover { opacity: 1; }
/* mkt-chart-dates 2026-07-10 (operator): M/D date labels under the 7-day bars.
Mirrors .mkt-card-spark geometry (gap:3px, each child flex:1 1 0) so each label
sits exactly under its bar. text-soft for readability; nowrap+overflow-hidden+
min-width:0 honor the no-horizontal-scroll rule. */
.mkt-card-days { display: flex; gap: 3px; margin-top: 4px; }
.mkt-card-daylbl { flex: 1 1 0; min-width: 0; text-align: center; font-size: 9px; color: var(--text-soft, var(--muted)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.mkt-card-ctx { font-size: 11px; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 8px; } /* text-soft 2026-07-10 */
/* Build .284: subtle dark hue behind each Marketplace Activity source cell so the
per-platform colored name + logo read with more contrast (esp. on the peachy-cream
default). var(--source-tint) is a theme-agnostic black-alpha overlay. */
.mkt-table td.mkt-name { background: var(--source-tint); }
/* Build .286: stronger contrast for the Marketplace Activity venue-name chips
(operator request). A 1px outline in the chip's OWN colour (currentColor =
the per-venue brand var) turns each name into a crisp, defined pill, and a
small font bump aids legibility. currentColor keeps it tenet-compliant (no
hard-coded hue) and theme-adaptive; scoped to .mkt-table so the compact
ticker / arb-card / liquidity .sig-plat chips elsewhere are untouched. */
.mkt-table td.mkt-name .sig-plat {
font-size: 10px;
border: 1px solid currentColor;
/* Build .288: dark halo around the brand-coloured name so it contrasts hard
against its same-hue brand-tint background (operator request — the prior
border + tint weren't enough on their own). */
text-shadow: 0 1px 2px var(--chip-halo), 0 0 2px var(--chip-halo);
}
/* Build .285: click-to-sort column headers on generic .sortable tables. */
table.sortable th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th.th-sortable:hover { color: var(--accent); }
table.sortable th.sorted-asc::after { content: " \25B2"; font-size: 0.72em; color: var(--accent); }
table.sortable th.sorted-desc::after { content: " \25BC"; font-size: 0.72em; color: var(--accent); }
.mkt-table .delta-up { color: var(--success); }
.mkt-table .delta-down { color: var(--danger); }
.mkt-table .delta-flat { color: var(--muted); }
/* Build .274 (2026-05-29): forecaster venues (Foretold / FantasySCOTUS) have no
real trading volume, so their delta columns show consensus drift (mean absolute
move of the leading option's probability, in percentage points) instead of a
volume Δ%, and their volume cell shows a forecast-count confidence chip rather
than a misleading "$" figure. Consensus drift is always a non-negative
magnitude (signed moves cancel under averaging) so it gets the neutral accent
color, not the up/down green/red of volume momentum. */
.mkt-table .mkt-consensus { color: var(--accent); font-variant-numeric: tabular-nums; }
.mkt-table .mkt-consensus .mkt-pp { font-size: 0.82em; opacity: 0.7; margin-left: 1px; }
.mkt-table .mkt-conf-chip {
display: inline-flex; align-items: center; gap: 3px;
/* Build .284: was color:#cbd5e1 (hardcoded slate-300) — invisible on the
peachy-cream default. var(--text) makes it readable in both themes;
weight bumped 600->800 per "barely visible / bolder". */
font-size: 11px; font-weight: 800; color: var(--text); white-space: nowrap;
}
.mkt-table .mkt-conf-chip .mkt-conf-unit {
font-size: 9px; font-weight: 700; opacity: 0.85; text-transform: uppercase;
}
.mkt-footnote {
margin-top: 8px; padding: 6px 0 0 0;
font-size: 10px; color: var(--muted); line-height: 1.5;
border-top: 1px dashed var(--border);
}
/* 7-day stacked-bar chart at the top of the marketplace card */
.mkt-7d-wrap {
margin: 4px 0 10px 0;
padding: 6px 0 0 0;
border-bottom: 1px dashed var(--border);
padding-bottom: 10px;
}
.mkt-7d-title {
font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.mkt-7d-chart-box {
position: relative;
height: 180px; /* fixed so Chart.js can compute layout */
width: 100%;
}
/* marketplace-weekly 2026-07-24: running weekly chart (Volume/OI toggle) under the
7-day chart. Toggle mirrors .mkt-sort-bar. Kept compact (130px box) so the card
still fits its departures-band cell without an internal scrollbar. var() only. */
.mkt-weekly-wrap { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.mkt-weekly-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mkt-weekly-title { font-size: 11px; color: var(--muted); }
.mkt-weekly-toggle { display: inline-flex; gap: 2px; }
.mkt-wk-btn, .mkt-7d-btn { font-size: 10px; padding: 2px 7px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.mkt-wk-btn-active, .mkt-7d-btn-active { background: var(--accent); color: var(--panel); border-color: var(--accent); }
/* chart-legends 2026-07-26: the 7d chart's own toggle (.mkt-7d-btn — a
separate class so pcWeeklyMetric's .mkt-wk-btn sweep can't clobber its
active state); the title drops its bottom margin inside the flex head. */
.mkt-weekly-head .mkt-7d-title { margin-bottom: 0; }
.mkt-weekly-chart-box { position: relative; height: 130px; width: 100%; }
/* mkt-legend-html 2026-08-10 (operator: legends were truncated): the chart
legends now live OUTSIDE the fixed-height canvas boxes, so they wrap to as
many rows as the venue roster needs and can never be clipped. */
.mkt-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 2px;
align-items: center; }
.mkt-legend-item { display: inline-flex; align-items: center; gap: 5px;
background: none; border: none; padding: 1px 2px; cursor: pointer;
color: var(--muted); font-size: 11px; line-height: 1.4; }
.mkt-legend-item:hover, .mkt-legend-item:focus-visible { color: var(--text); }
.mkt-legend-item.is-off { opacity: 0.45; text-decoration: line-through; }
.mkt-legend-sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* board-stats 2026-07-26 (operator): the 7d + weekly charts live at the bottom
of the Federated Board card now — side-by-side when the center column is
wide (auto-fit), stacked below ~640px, with ~2x taller chart boxes than the
old marketplace strips (maintainAspectRatio:false → the canvases fill the
box). min-width:0 on the grid children per the no-scrollbar rule. */
.board-stats-band { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px;
/* mobile-pass .641: min(290px,100%) — the raw 290px floor overflowed the
band's ~255px slot at phone width (charts clipped ~35px, live-measured). */
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 4px 18px; }
.board-stats-band .mkt-7d-wrap, .board-stats-band .mkt-weekly-wrap { min-width: 0; }
.board-stats-band .mkt-7d-wrap { border-bottom: 0; padding-bottom: 0; margin: 0; }
.board-stats-band .mkt-weekly-wrap { border-top: 0; margin-top: 0; padding-top: 0; }
.board-stats-band .mkt-7d-chart-box, .board-stats-band .mkt-weekly-chart-box { height: 250px; }
.board-stats-band .mkt-7d-title, .board-stats-band .mkt-weekly-title { font-size: 12px; }
/* Top-wallets card (kept for legacy / future re-enable; not in homepage today) */
.wallets-card { border-top: 3px solid var(--success); }
.plat-name.wallets-name { color: var(--success); }
.wallets-list .wallet-link {
grid-template-columns: 24px 1fr auto;
}
.wallet-rank { font-family: monospace; font-size: 11px; color: var(--muted); text-align: right; }
.wallet-name { font-family: monospace; font-size: 11px; color: var(--text); font-weight: 700; }
/* ─── Hero: Globe + Top-10 trio in a 2x2 squareish grid ─── */
.chart-box {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px;
min-height: 280px; display: flex; flex-direction: column;
}
.chart-box canvas { flex: 1; min-height: 280px; max-height: 380px; }
.whale-chart-box { margin-top: 16px; min-height: 260px; }
.globe-box {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px;
display: flex; flex-direction: column; position: relative;
}
#globe { flex: 1; min-height: 0; background: radial-gradient(circle at 50% 50%, var(--bg-deeper) 0%, var(--bg) 100%); border-radius: var(--r-card); }
/* 2x2 grid: each cell roughly square. grid-auto-rows: 1fr keeps both rows equal,
and aspect-ratio on cells nudges them toward squareness while still scaling. */
.hero-2x2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(280px, 32vh));
gap: 12px; padding: 12px 20px;
}
.hero-2x2 > * { min-height: 0; min-width: 0; overflow: hidden; box-sizing: border-box; }
@media (max-width: 900px) {
.hero-2x2 { grid-template-columns: 1fr; grid-template-rows: auto; }
}
/* ─── 2x2 Top-10 corners + globe in the center ───
4 top-10 cards in a strict 2x2 grid; the globe is rendered as a
centered floating overlay, with explicit grid placement so Firefox
doesn't reserve a grid cell for it. */
.hero-2x2-center {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(300px, 36vh));
gap: 14px; padding: 14px 20px;
}
.hero-2x2-center > .t10-card {
min-height: 0; min-width: 0; overflow-y: auto; box-sizing: border-box;
}
/* Globe overlay: lay it across the entire 2x2 grid via grid-area then
center-self in both dimensions. This guarantees the globe's center
sits at the geometric center of the 4-cell grid regardless of section
padding, scrollbar widths, or asymmetric card content heights. */
.globe-hero-center {
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: center; /* vertical centering inside the 2x2 grid */
justify-self: center; /* horizontal centering — the cross-corner */
width: clamp(260px, 24vw, 340px); /* a bit larger so the disc clearly
spans across all 4 inner corners */
height: clamp(260px, 24vw, 340px);
z-index: 5;
pointer-events: auto;
/* Solid disc with a dark border ring so the overlap with each card's
inner corner is unmistakable. The radial-gradient still gives a soft
halo at the very edge for visual blending. */
background:
radial-gradient(circle at 50% 50%,
rgba(20,27,51,1.0) 0%,
rgba(20,27,51,1.0) 78%,
rgba(20,27,51,0.6) 92%,
rgba(11,16,32,0) 100%);
border: 2px solid color-mix(in srgb, var(--kalshi) 55%, transparent);
border-radius: 50%;
padding: 14px;
display: flex; flex-direction: column;
box-shadow: 0 0 60px color-mix(in srgb, var(--kalshi) 30%, transparent),
inset 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent);
position: relative; /* not absolute — we want flex-center positioning */
}
.globe-hero-center #globe {
flex: 1; min-height: 0; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, var(--bg-deeper) 0%, var(--bg) 100%);
}
.globe-hero-center .globe-pause-btn {
position: absolute; top: 8px; right: 50%; transform: translateX(50%);
background: rgba(13,19,40,0.9); border: 1px solid var(--border);
color: var(--muted); font-size: 11px; padding: 2px 6px; line-height: 14px;
border-radius: var(--r-chip); z-index: 6; cursor: pointer;
}
.globe-hero-center .globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Smooth, symmetric inner-corner reserve for all 4 cards so the floating
globe (anchored exactly at the 2x2 cross-corner intersection) doesn't
cover row content. Each card keeps its inner corner clear with a
diagonally-oriented padding pad and right-justifies text on right cards. */
@media (min-width: 901px) {
/* Reserve a quadrant-of-globe of empty space at each card's inner corner.
We use a single CSS custom property to keep all four sides synchronized. */
.hero-2x2-center { --globe-reserve: clamp(95px, 11vw, 140px); }
/* Top row cards: reserve space at the bottom-inside corner so the
floating globe doesn't cover row content. Left-cards (Polymarket TL,
Manifold BL) reserve space on the RIGHT; right-cards (Kalshi TR,
Limitless BR) reserve space on the LEFT but content stays
LEFT-ALIGNED — i.e. the rows now begin at the center of the right-
cards instead of being flush against the right edge.
This replaces an earlier attempt that right-justified the right-cards
and reversed the grid; the user found that hard to read. */
.hero-2x2-center > .t10-card:nth-child(1) { padding-right: var(--globe-reserve); padding-bottom: 18px; }
.hero-2x2-center > .t10-card:nth-child(2) { padding-left: var(--globe-reserve); padding-bottom: 18px; }
.hero-2x2-center > .t10-card:nth-child(3) { padding-right: var(--globe-reserve); padding-top: 18px; }
.hero-2x2-center > .t10-card:nth-child(4) { padding-left: var(--globe-reserve); padding-top: 18px; }
/* Anchor the globe EXACTLY at the cross-point of the 2x2 grid.
Math: cross-point in the grid = (50%, 50%) of the .hero-2x2-center
content box (taking the gap into account, since the grid uses gap not
padding). Globe diameter = 2 × var(--globe-reserve) so each cell's
reserved corner is exactly tangent to the globe. */
.globe-hero-center {
width: calc(var(--globe-reserve) * 2);
height: calc(var(--globe-reserve) * 2);
}
}
/* Medium viewports — slightly smaller globe + reserve. */
@media (max-width: 1200px) and (min-width: 901px) {
.hero-2x2-center { --globe-reserve: 88px; }
}
/* ─── Hero 4×3 (Option B, build .89.1) ─────────────────────────────────
Unified 12-cell grid with 9-11 platforms + 1-3 vacant slots. Order
left→right, top→bottom:
Row 1: poly · kalshi · manifold · limitless
Row 2: metaforecast · myriad · betfair · predictit
Row 3: opinion · sxbet (dev) · globe · (vacant)
Vacant slot doubles as the floating-globe pane so we don't lose
the world-map context. Tile content is identical to the old 3×2.
.hero-3x2 retained as an alias so older templates still render. */
.hero-3x2,
.hero-4x3 {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* Three rows now; min-height trimmed slightly (340→300px) to keep the
hero from dominating above-the-fold on a single-row aspect ratio. */
grid-template-rows: repeat(3, minmax(300px, 36vh));
gap: 14px;
/* Build v.03 .31 build 104: padding-bottom trimmed 14→2 so the
Featured Whale Bets section sits flush against the top-10 grid
(removes the dead vertical space the user flagged). */
padding: 14px 20px 2px;
}
.hero-3x2 > .t10-card,
.hero-4x3 > .t10-card,
.hero-3x2 > .hero-vacant-slot,
.hero-4x3 > .hero-vacant-slot {
/* Build .54: dropped `overflow-y: auto` from t10-card so movers
rows are visible at a glance — no internal scroll bars in the
top-10 boxes. Vacant-slot keeps overflow:auto for the globe. */
min-height: 0; min-width: 0; box-sizing: border-box;
}
.hero-3x2 > .hero-vacant-slot,
.hero-4x3 > .hero-vacant-slot {
overflow-y: auto;
}
.hero-vacant-slot {
display: flex; align-items: stretch; justify-content: center;
background: rgba(13,19,40,0.30);
border: 1px dashed color-mix(in srgb, var(--kalshi) 25%, transparent);
border-radius: var(--r-card);
padding: 10px;
}
.hero-vacant-slot .globe-hero-vacant {
flex: 1; min-width: 0;
background: radial-gradient(circle at 50% 50%, var(--bg-deeper) 0%, var(--bg) 100%);
border: 1px solid color-mix(in srgb, var(--kalshi) 40%, transparent);
border-radius: var(--r-card);
padding: 10px;
position: relative;
display: flex; flex-direction: column;
}
.hero-vacant-slot .globe-hero-vacant #globe {
flex: 1; min-height: 0; border-radius: var(--r-card);
}
.hero-vacant-slot .globe-pause-btn {
position: absolute; top: 6px; right: 6px;
background: rgba(13,19,40,0.9); border: 1px solid var(--border);
color: var(--muted); font-size: 11px; padding: 2px 6px; line-height: 14px;
border-radius: var(--r-chip); cursor: pointer;
}
.hero-vacant-slot .globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
.hero-vacant-placeholder {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: var(--muted); text-align: center; font-size: 13px;
}
.hero-vacant-placeholder .hv-icon {
font-size: 36px; opacity: 0.5; line-height: 1; margin-bottom: 8px;
}
.hero-vacant-placeholder .hv-text { max-width: 220px; line-height: 1.5; }
@media (max-width: 1400px) {
.hero-3x2,
.hero-4x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
.hero-3x2,
.hero-4x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.hero-3x2,
.hero-4x3 {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.hero-vacant-slot { min-height: 240px; }
}
/* ─── Build .85.1: independent Betfair box under the leftmost column ─────
3-column grid with the same column widths + horizontal padding as
.hero-3x2 above, but only the first cell holds a tile. Visually
anchors Betfair under the Polymarket / Limitless column of the hero
grid while keeping it as its own row (per user request: "independent
box", not a 7-tile grid expansion). */
.hero-betfair-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* Same row sizing rule as the hero-3x2 so the Betfair tile matches
the hero tile heights exactly when sitting directly below them. */
grid-template-rows: minmax(340px, 44vh);
gap: 14px;
padding: 0 20px 14px; /* no top-padding — sits flush under hero-3x2 */
}
.hero-betfair-row > .t10-card {
grid-column: 1;
grid-row: 1;
min-height: 0;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
@media (max-width: 1100px) {
.hero-betfair-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.hero-betfair-row {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0 12px 12px;
}
}
/* MetaForecast platform colour & badges */
.t10-metaforecast { border-top: 3px solid var(--platform-manifold-brand); }
.t20-metaforecast { border-top: 3px solid var(--platform-manifold-brand); }
.sig-metaforecast .sig-plat,
.sig-plat.sig-metaforecast { background: color-mix(in srgb, var(--platform-manifold-brand) 18%, transparent); color: var(--platform-manifold-brand); }
.plat-aggr-pill {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: 10px; font-weight: 600; color: var(--platform-manifold-brand);
background: color-mix(in srgb, var(--platform-manifold-brand) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--platform-manifold-brand) 30%, transparent); border-radius: var(--r-chip);
letter-spacing: 0.04em;
}
/* Top-20 row 3×2 (5 platforms + 1 vacant slot).
Specificity bump via .top-events.top-events-3x2 — otherwise the legacy
.top-events base rule below (defined LATER in this file with the same
single-class specificity) wins by source order and we render 4 columns
instead of 3 on wide screens. The doubled class is intentional. */
.top-events.top-events-3x2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.top-events.top-events-3x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.top-events.top-events-3x2 { grid-template-columns: 1fr; }
}
.t20-vacant {
border: 1px dashed color-mix(in srgb, var(--kalshi) 30%, transparent) !important;
background: rgba(13,19,40,0.20);
display: flex; flex-direction: column;
}
.t20-vacant-body {
padding: 24px 16px; text-align: center;
color: var(--muted); line-height: 1.6;
}
.t20-vacant-body .t20-vacant-sub { font-size: 12px; opacity: 0.7; }
/* When HIDE_UPPER_GLOBE=1: drop all the inner-corner padding so the
four top-10 cards use the full grid cells without any reserved space. */
.hero-no-globe > .t10-card:nth-child(n) {
padding-left: 12px !important;
padding-right: 12px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
@media (max-width: 900px) {
.hero-2x2-center { grid-template-columns: 1fr; grid-template-rows: auto; }
.globe-hero-center {
/* Mobile: globe drops out of overlay mode and becomes a normal
block in flow under the 4 stacked cards. */
grid-column: auto;
grid-row: auto;
align-self: stretch;
justify-self: stretch;
width: 100%; height: 280px; border-radius: var(--r-card);
margin: 0; padding: 12px;
}
.globe-hero-center .globe-pause-btn { position: absolute; top: 12px; right: 16px; transform: none; }
}
.globe-hero { padding: 12px; }
.globe-hero h3 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.globe-pause-btn {
background: transparent; color: var(--muted); border: 1px solid var(--border);
border-radius: var(--r-chip); padding: 0 6px; font-size: 11px; line-height: 18px; cursor: pointer;
}
.globe-pause-btn:hover { color: var(--accent); border-color: var(--accent); }
.fade-in { animation: fwFade 0.35s ease-in; }
@keyframes fwFade { from { opacity: 0.3; } to { opacity: 1; } }
/* Build .54: dropped max-height + overflow-y so the t10-card never
shows internal scroll bars — the parent hero-3x2 grid row gives it
enough headroom for 10 rows. */
.t10-card { padding: 10px 12px; }
.t10-card .platform { margin-bottom: 6px; padding-bottom: 4px; }
.t10-bet { color: var(--muted); font-weight: 500; font-size: 11px; }
.closed-x {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
background: var(--danger); color: #fff;
border-radius: var(--r-chip); font-weight: 800;
font-family: monospace; font-size: 11px; margin-right: 6px;
vertical-align: middle; line-height: 1;
}
/* Resolved/closed event rows get a STRONG tinted background + diagonal-stripe
pattern so they're obviously distinct from live events when "Open Events
Only" is OFF. Also reduce opacity slightly to push them visually back. */
.t10-row-closed,
.t20-row-closed {
background:
repeating-linear-gradient(135deg,
color-mix(in srgb, var(--danger) 18%, transparent) 0,
color-mix(in srgb, var(--danger) 18%, transparent) 4px,
color-mix(in srgb, var(--danger) 6%, transparent) 4px,
color-mix(in srgb, var(--danger) 6%, transparent) 10px);
border-left: 4px solid var(--danger);
position: relative;
}
.t10-row-closed::after,
.t20-row-closed::after {
content: 'CLOSED';
position: absolute; top: 4px; right: 8px;
font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent);
padding: 1px 5px; border-radius: var(--r-chip);
pointer-events: none;
}
.t10-row-closed a,
.t20-row-closed .t20-title { color: #fca5a5; }
.t10-row-closed:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }
.t20-bet-amt { color: var(--accent); font-weight: 600; font-size: 10px; margin-left: 3px; }
.t10-poly { border-top: 3px solid var(--accent); }
.t10-kalshi { border-top: 3px solid var(--kalshi); }
.t10-manifold { border-top: 3px solid var(--platform-manifold-brand); }
.t10-sxbet { border-top: 3px solid var(--sxbet); }
.t10-limitless { border-top: 3px solid var(--limitless); }
.top10-list { list-style: none; margin: 0; padding: 0; counter-reset: t10; }
.t10-row {
counter-increment: t10;
border-bottom: 1px solid var(--border);
}
.t10-row:last-child { border-bottom: none; }
.t10-row a {
display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; align-items: baseline;
padding: 3px 4px; color: var(--text); font-size: 12px; line-height: 1.25;
}
.t10-row a:hover { background: var(--panel-2); text-decoration: none; }
.t10-row a::before {
content: counter(t10);
font-family: monospace; font-size: 10px; color: var(--muted); text-align: right;
}
.t10-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t10-vol { font-family: monospace; font-size: 11px; color: var(--accent); font-weight: 600; }
.t10-manifold .t10-vol { color: #c4b5fd; }
.t10-kalshi .t10-vol { color: var(--kalshi); }
.globe-legend {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
font-size: 10px; color: var(--muted); justify-content: center;
}
.globe-legend .leg { display: flex; align-items: center; gap: 4px; }
.globe-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* ─── Ticker ─── */
.ticker-section {
display: flex; align-items: center; background: var(--panel); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); overflow: hidden;
}
.ticker-label {
background: var(--whale); color: var(--bg); font-weight: 800; padding: 10px 16px;
font-size: 13px; letter-spacing: 0.16em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center;
}
.ticker-wrap { flex: 1; overflow: hidden; position: relative; padding: 8px 0; }
.ticker-track {
display: flex; gap: 32px; white-space: nowrap;
animation: scroll-left 44s linear infinite; /* P3 2026-06-12: +17% faster (53->44s) */
padding-left: 20px;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item {
display: inline-flex; align-items: center; gap: 8px; color: var(--text);
font-size: 13px; padding: 4px 12px; border-left: 2px solid var(--whale);
flex-shrink: 0; /* don't let the flex parent (.ticker-track) shrink items */
min-width: 0; /* but DO allow truncation INSIDE via child overflow rules */
overflow: visible; /* the parent .ticker-wrap clips; items stay full-content-sized */
}
.ticker-item:hover { text-decoration: none; color: var(--whale); }
/* P3 2026-06-12: unified-ticker per-type chip */
.ut-type-chip {
flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
padding: 1px 5px; border-radius: var(--r-chip); color: var(--chip-ink); /* P3: dark ink legible on bright chips in BOTH themes (was var(--bg) — illegible on peach) */
}
.ut-chip-event { background: var(--accent); }
.ut-chip-whale { background: var(--whale); }
.ut-chip-jackpot { background: var(--jackpot); }
.ut-item { border-left-color: var(--border); } /* type chip carries the colour, not the border */
.tk-amount { font-weight: 700; color: var(--whale); font-family: monospace; }
.tk-side { padding: 2px 6px; border-radius: var(--r-chip); font-size: 10px; font-weight: 600; }
.tk-q { color: var(--muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.tk-evt { color: var(--text); font-style: italic; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.tk-odds { color: var(--jackpot); font-family: monospace; font-size: 11px; }
.tk-by { color: var(--muted); font-size: 11px; opacity: 0.85; white-space: nowrap; }
.tk-user { color: var(--text); font-family: monospace; font-size: 11px; max-width: 120px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Build .48: when tk-user is wrapped in an ,
make it visually obvious that the wallet name itself is clickable
(separate target from the parent event-link). */
a.tk-user.wallet-link {
color: var(--accent);
text-decoration: none;
cursor: pointer;
transition: color var(--m-tab);
}
a.tk-user.wallet-link:hover {
color: var(--success);
text-decoration: underline;
}
.ticker-empty { padding: 8px 20px; color: var(--muted); font-style: italic; }
/* ─── Top 20 Events ─── */
/* Build .87.4: second pass — push compression further. Per-row height
~30px → ~22px (font sizes shrunk another step, padding tightened,
margin-bottoms zeroed where safe, mini-bar slimmed to 3px). */
.top-events {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px 20px;
}
.top-events > .card { min-width: 0; }
@media (max-width: 1400px) { .top-events { grid-template-columns: repeat(2, 1fr); } }
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-chip); padding: 6px 8px;
/* Build .79: removed 900px cap — cards grow naturally with content.
No internal scrollbar; the page scrolls instead. */
max-height: none; overflow-y: visible;
}
.card.poly { border-top: 3px solid var(--accent); }
.card.kalshi { border-top: 3px solid var(--kalshi); }
.card.manifold { border-top: 3px solid var(--platform-manifold-brand); }
.card.sxbet { border-top: 3px solid var(--sxbet); }
.card.limitless { border-top: 3px solid var(--limitless); }
/* Build .85: Betfair brand color is yellow/black; we use Betfair yellow
(var(--jackpot) — pulled from their brand pages) for the accent. */
.t10-betfair, .card.betfair { border-top: 3px solid var(--jackpot); }
.t10-betfair .plat-name, .card.betfair .plat-name { color: var(--jackpot); }
.sig-betfair, .sig-plat.sig-betfair { background: rgba(255, 184, 12, 0.18); color: var(--jackpot); }
/* Build .89.1: PredictIt (red — patriotic palette, US political venue)
and Opinion (violet — distinct from Manifold's lighter violet) accents. */
.t10-predictit, .card.predictit { border-top: 3px solid #dc2626; }
.t10-predictit .plat-name, .card.predictit .plat-name { color: #dc2626; }
.sig-predictit, .sig-plat.sig-predictit { background: rgba(220, 38, 38, 0.18); color: var(--danger); }
.t10-opinion, .card.opinion { border-top: 3px solid #7c3aed; }
.t10-opinion .plat-name, .card.opinion .plat-name { color: #7c3aed; }
.sig-opinion, .sig-plat.sig-opinion { background: rgba(124, 58, 237, 0.18); color: var(--platform-manifold-brand); }
/* Build .89.2: ProphetX (cyan — distinct from Polymarket's teal) and
Novig (orange — distinct from Limitless's orange-red). Both surface
the PolyRouter origin via the .plat-ph-pill class. */
.t10-prophetx, .card.prophetx { border-top: 3px solid #06b6d4; }
.t10-prophetx .plat-name, .card.prophetx .plat-name { color: #06b6d4; }
.sig-prophetx, .sig-plat.sig-prophetx { background: rgba(6, 182, 212, 0.18); color: var(--accent); }
.t10-novig, .card.novig { border-top: 3px solid #ea580c; }
.t10-novig .plat-name, .card.novig .plat-name { color: #ea580c; }
.sig-novig, .sig-plat.sig-novig { background: rgba(234, 88, 12, 0.18); color: #fb923c; }
/* Build v.03 .31 build 163 (2026-05-23): predict.fun palette —
lime-green (var(--success)) matches their site's accent. BNB-chain
prediction market + Polymarket conditionId-paired arb opportunities. */
.t10-predict_fun, .card.predict_fun { border-top: 3px solid var(--success); }
.t10-predict_fun .plat-name, .card.predict_fun .plat-name { color: var(--success); }
.sig-predict_fun, .sig-plat.sig-predict_fun { background: rgba(132, 204, 22, 0.18); color: #a3e635; }
/* Build .91 (Option B): FantasySCOTUS (deep court-robe red — `#7c2d12`)
and Foretold (calm forecaster teal — `var(--accent-deep)`). Both partitioned
out of MetaForecast (was `var(--platform-manifold-brand)` violet), so we get two clearly
distinct tile identities replacing the misleading-aggregator one. */
.t10-fantasyscotus, .card.fantasyscotus { border-top: 3px solid #7c2d12; }
.t10-fantasyscotus .plat-name, .card.fantasyscotus .plat-name { color: #c2410c; }
.sig-fantasyscotus, .sig-plat.sig-fantasyscotus { background: rgba(124, 45, 18, 0.22); color: #fb923c; }
.t10-foretold, .card.foretold { border-top: 3px solid var(--accent-deep); }
.t10-foretold .plat-name, .card.foretold .plat-name { color: var(--accent); }
.sig-foretold, .sig-plat.sig-foretold { background: rgba(13, 148, 136, 0.18); color: var(--accent); }
/* "via Prediction Hunt" / "via PolyRouter" provenance pill — surfaces
on tiles whose data originates from a federated aggregator API. */
.plat-ph-pill {
display: inline-block; margin-left: 6px; padding: 1px 6px;
font-size: 10px; font-weight: 600; color: var(--muted);
background: rgba(148, 163, 184, 0.10);
border: 1px solid rgba(148, 163, 184, 0.30); border-radius: var(--r-chip);
letter-spacing: 0.04em;
}
.platform {
font-size: 12px; color: var(--white);
letter-spacing: 0.02em; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
font-weight: 800;
}
.plat-name {
font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em;
}
.plat-sub {
font-size: 10px; color: var(--white); text-transform: none; letter-spacing: 0; font-weight: 600;
}
/* Build .311 (operator 2026-06-01): strip descriptive subtitles from cards/boxes.
Keep ONLY attribution notes ("powered by …" / "via …"), which are tagged
.plat-credit. Hides the descriptive .plat-sub lines + the four board-panel
subs + the Smart-Wallets formula subheading. Visual-only — the markup is
retained so a subtitle can be restored by dropping the rule / adding .plat-credit. */
.plat-sub:not(.plat-credit),
.board-panel-sub,
.sw-subheading { display: none; }
/* Build (operator 2026-06-05): also hide the remaining attribution subtitle
(.plat-credit) when its box is EMPTY — a card with no content rows shouldn't
dangle a "powered by …" line. Keyed per box on its server-rendered content-
row class via :has(); a harmless no-op (subtitle just stays, as before) on a
browser without :has(). PHQ is JS-rendered + ~never empty → omitted to avoid
a load-time flicker. */
.arb-section:not(:has(.arb-card)) .plat-credit,
.latest-analysis-card:not(:has(.la-news-list)) .plat-credit { display: none; }
/* crossvenue-rename 2026-08-06 (operator): keep the Multi-Marketplace Events
card's tagline VISIBLE — a deliberate, card-scoped exception to the
title-only .plat-sub:not(.plat-credit) hide rule above. */
.crossvenue-card .plat-sub.cv-tagline { display: inline; color: var(--muted); }
/* Platform-tinted names */
.t10-poly .plat-name, .card.poly .plat-name { color: var(--accent); }
.t10-kalshi .plat-name, .card.kalshi .plat-name { color: var(--kalshi); }
.t10-manifold .plat-name, .card.manifold .plat-name { color: var(--platform-manifold-brand); }
.t10-sxbet .plat-name, .card.sxbet .plat-name { color: var(--sxbet); }
.t10-limitless .plat-name, .card.limitless .plat-name { color: var(--limitless); }
.top20-list { list-style: none; margin: 0; padding: 0; counter-reset: t20; }
/* Build .96.6: single-line Top-20 rows. Counter + arrows + icons +
title + meta + delta chips all on ONE textual row per event.
Title truncates with ellipsis when too long; meta stays right-
aligned and never shrinks. Mini-bar removed entirely (option
breakdown still available in the modal). Per-row height
~22px → ~15-16px = ~30% additional vertical compression on top
of the .87.4 reduction. */
.t20-row {
counter-increment: t20;
display: flex;
align-items: baseline;
gap: 4px;
padding: 2px 6px 2px 18px;
border-bottom: 1px solid var(--border);
position: relative;
min-width: 0;
overflow: hidden;
}
.t20-row:last-child { border-bottom: none; }
.t20-row::before {
content: counter(t20); position: absolute; left: 0; top: 2px;
font-family: monospace; color: var(--muted); font-size: 9px; width: 16px; text-align: right;
}
.t20-title {
/* Build .96.10: switched anchor from `inline-block` to `inline-flex`
so its children (news/flame/closed icons, title-text span, bet-amt,
chips) lay out as flex items. The title-text span is the ONLY
flexible child (`flex: 1 1 0`); icons + chips stay at content
width and never get clipped by the ellipsis. */
display: inline-flex;
align-items: baseline;
gap: 4px;
/* Build .96.7: font 11→13px (~2pt larger per user request) — title
is the primary content of each row, deserves a readable size. */
font-size: 13px; font-weight: 600; color: var(--text);
line-height: 1.4;
/* Build .96.9 → v.03: title floor raised 100px → 180px to claim the
real estate freed up by the retired mini-bar + the tightened meta
max-width (40% → 25%). Most card widths are 380-600px so 180px
guarantees a long substring of every title shows even on the
narrowest cards. */
flex: 1 1 180px;
min-width: 180px;
overflow: hidden;
white-space: nowrap;
}
/* Build .96.10: dedicated wrapper for the title TEXT — gets the
text-overflow ellipsis treatment so it shrinks gracefully while
the surrounding icons + chips stay at full size. */
.t20-title-text {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Bet-amt / new-badge / country-chip — fixed-size, never shrink.
On very tight rows the row's `overflow: hidden` clips them. */
.t20-bet-amt, .new-badge, .country-chip { flex-shrink: 0; }
.t20-title:hover { color: var(--accent); text-decoration: none; }
.t20-meta {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 11px; color: var(--muted); font-family: monospace;
line-height: 1.4;
/* Build v.03: meta capped at 25% of row width (was 40%) — title
reclaims that space. Mini-bar is also gone in this build. Meta
gets ellipsis so it stays graceful even when squeezed. */
flex-shrink: 1;
margin-left: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 25%;
}
/* Build .96.6: mini-bar removed for max compression. Per-option
breakdown still rendered in the event modal — Top-20 rows are now
pure list-of-titles with right-aligned volume metadata. */
.mini-bar { display: none; }
/* Group pill — let it shrink alongside the title when row is tight.
Build .96.7: capped at 35% of row width too so pill + meta together
can never eat more than ~80% of the row → title always has space.
Build .96.9: tightened 35% → 28% so title is guaranteed ≥32% on
non-Manifold rows where pill is present. */
.t20-group-pill {
flex-shrink: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; max-width: 28%;
}
.new-badge {
display: inline-block; font-size: 9px; font-weight: 800;
background: var(--success); color: var(--bg);
padding: 1px 5px; border-radius: var(--r-chip); margin: 0 6px 0 0;
letter-spacing: 0.12em; vertical-align: middle;
animation: newPulse 2.4s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
}
@keyframes newPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); }
50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.country-chip {
display: inline-block; font-size: 9px; font-weight: 700; background: var(--panel-2);
color: var(--muted); padding: 1px 5px; border-radius: var(--r-chip); margin-left: 4px;
font-family: monospace; vertical-align: middle;
}
/* Build v.03 (May 21): mini-bar permanently retired from Top-20 rows
per user request — title text takes that horizontal space instead.
Per-option breakdown still rendered in the event modal when the user
clicks a row. The earlier `display: none` rule at line ~2725 was
being overridden by this block; consolidating to a single hide
rule below removes that bug. */
.mini-bar, .mini-seg { display: none !important; }
/* ─── Whale + Jackpot ─── */
/* Build .87: dramatic compression of the Featured Whale Bets section.
Per-row height drops ~50% (font sizes -20-30%, padding -40-50%, label
strip slimmed, gap between cards tightened) so the 2×2 grid takes
roughly half the vertical real estate it used to. */
.whale-section { padding: 0 20px; }
.whale-cards { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-top: 4px; }
.whale-cards-2x2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px;
}
/* Build v.03 .31 build 104: tighten the "Featured Whale Bets" heading
so it sits closer to both the top-10 grid above and the 2x2 cards
below. Only overrides .section-heading WITHIN .whale-section — other
sections (Top 20 etc.) keep their default 18/8 margins. */
.whale-section .section-heading {
margin: 4px 20px 4px;
padding-bottom: 4px;
}
.whale-section .whale-cards-2x2 { margin-top: 2px; }
.wc-latest .fw-label { background: var(--accent); color: var(--bg); }
.manifold-whale.wc-biggest .fw-label { background: var(--platform-manifold-brand); color: var(--bg); }
.manifold-whale.wc-latest .fw-label { background: #c4b5fd; color: var(--bg); }
.manifold-whale .fw-amount { color: var(--platform-manifold-brand); }
.featured-whale {
background: linear-gradient(90deg, #1a0b2e 0%, var(--panel) 100%);
border: 1px solid var(--border); border-radius: var(--r-card);
display: flex; align-items: center; gap: 8px; padding: 0;
}
.fw-label {
background: var(--whale); color: var(--bg); font-weight: 700; padding: 6px 6px;
font-size: 9px; letter-spacing: 0.10em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center; border-radius: 6px 0 0 6px;
writing-mode: vertical-rl; transform: rotate(180deg); /* vertical label strip — saves horizontal width */
text-align: center;
}
.fw-body { flex: 1; padding: 4px 8px; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; align-items: center; }
.fw-amount { grid-row: span 4; font-family: monospace; font-size: 20px; font-weight: 700; color: var(--whale); line-height: 1.1; }
.fw-bet { font-size: 11px; line-height: 1.3; }
.fw-event { font-size: 10px; color: var(--muted); line-height: 1.2; }
.fw-event a { color: var(--text); }
.fw-meta { font-size: 9px; color: var(--muted); font-family: monospace; line-height: 1.2; }
.fw-empty { padding: 8px; color: var(--muted); font-style: italic; font-size: 11px; }
/* Multi-item LATEST whale card */
.fw-multi-card { align-items: stretch; }
.fw-multi-card .fw-label { border-radius: 6px 0 0 6px; }
.fw-multi-list {
flex: 1; list-style: none; margin: 0; padding: 3px 6px;
display: flex; flex-direction: column; gap: 1px;
max-height: none; overflow-y: visible;
}
.wc-biggest-list .fw-multi-list { max-height: none; }
.fw-multi-empty { color: var(--muted); font-style: italic; padding: 6px; font-size: 10px; }
.fw-mi { border-bottom: 1px dashed rgba(255,255,255,0.05); }
.fw-mi:last-child { border-bottom: none; }
.fw-mi-link {
display: grid; gap: 1px 6px; padding: 2px 3px;
grid-template-columns: auto auto 1fr auto;
grid-template-areas: "amt side q odds" "evt evt evt evt" "meta meta meta meta";
color: var(--text); font-size: 10px; line-height: 1.2;
}
.fw-mi-link:hover { background: var(--panel-2); text-decoration: none; }
.fw-mi-amt { grid-area: amt; font-family: monospace; font-weight: 700; color: var(--whale); white-space: nowrap; font-size: 11px; }
.manifold-whale .fw-mi-amt { color: var(--platform-manifold-brand); }
.fw-mi-side { grid-area: side; padding: 0 4px; border-radius: var(--r-chip); font-size: 8px; font-weight: 700; align-self: center; line-height: 1.4; }
.fw-mi-q { grid-area: q; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 10px; }
.fw-mi-evt { grid-area: evt; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-mi-meta { grid-area: meta; color: var(--muted); font-family: monospace; font-size: 8px; }
.fw-mi-link .odds-chip { grid-area: odds; align-self: center; margin-left: 0; font-size: 9px; padding: 0 4px; }
.whale-side { margin-right: 6px; padding: 2px 6px; border-radius: var(--r-chip); font-size: 11px; font-weight: 600; }
.side-buy { background: #064e3b; color: #6ee7b7; }
.side-sell { background: #7f1d1d; color: #fca5a5; }
.whale-user { color: var(--accent); }
/* Build .74.2: "AKA " — small subscript next to primary name.
Used when Polymarket trade payload has both `name` (user-chosen) and
`pseudonym` (auto-generated). Subtle so it doesn't compete with the
real handle but legible enough to convey identity ambiguity. */
.fw-aka {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
font-size: 9px;
font-weight: 500;
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-chip);
letter-spacing: 0.02em;
vertical-align: middle;
}
.wm-aka {
display: inline-block;
margin-left: 10px;
padding: 2px 7px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-chip);
letter-spacing: 0.02em;
vertical-align: middle;
text-transform: none;
}
.jackpot-card {
background: linear-gradient(90deg, #3a2a0a 0%, var(--panel) 100%);
border: 1px solid var(--border); border-radius: var(--r-card);
display: flex; align-items: center; gap: 12px; padding: 0;
}
.jp-label {
background: var(--jackpot); color: var(--bg); font-weight: 800; padding: 18px 12px;
font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; align-self: stretch;
display: flex; align-items: center; writing-mode: vertical-rl; text-orientation: mixed;
border-radius: 8px 0 0 8px;
}
.jp-body { flex: 1; padding: 12px 14px; }
.jp-amount { font-family: monospace; font-size: 24px; font-weight: 700; color: var(--jackpot); }
.jp-bet { font-size: 13px; margin-top: 4px; }
.jp-event { font-size: 12px; color: var(--muted); margin-top: 4px; }
.jp-event a { color: var(--text); }
.jp-meta { font-size: 10px; color: var(--muted); font-family: monospace; margin-top: 6px; line-height: 1.4; }
.jp-empty { padding: 14px; color: var(--muted); font-style: italic; font-size: 12px; }
.odds-chip {
display: inline-block; background: var(--panel-2); color: var(--jackpot);
padding: 1px 6px; border-radius: var(--r-chip); font-family: monospace; font-size: 11px;
font-weight: 600; margin-left: 4px;
}
/* Outcome chip — names the side that the displayed YES price refers to
in event-modal market rows. Shown only when the outcome name is
informative (e.g. 'TheMongolz', 'Max Verstappen'), hidden when it's
just 'Yes' to avoid redundancy with the column header. */
.outcome-chip {
display: inline-block;
background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
padding: 1px 6px; border-radius: var(--r-chip);
font-size: 11px; font-weight: 500;
margin-left: 4px; vertical-align: baseline;
}
/* Build v0.4 (operator 2026-06-07): per-option price-history sparkline inside
the event-modal option rows. Inline SVG; color teal/red by direction; all
theme vars (auto-themes for peach via existing --accent / --danger). */
.opt-spark {
display: inline-block; vertical-align: middle;
margin-left: 6px; opacity: 0.85;
}
.opt-spark-up { color: var(--accent); }
.opt-spark-dn { color: var(--danger); }
/* ─── Build .260: Risers + Coldest merged into ONE horizontal box ──────
Single card with 2-column inner grid (mirrors PHQ pattern).
Old .rp-* / .risers-plungers / .rp-grid / .rp-col / .rp-head / .rp-table
rules removed below — replaced by .movers-merged-* + .mvm-* namespace
to avoid the .sig-row / .sig-link specificity collisions we hit in
.258 with the liq-card. .pct-up / .pct-down semantic colors kept. */
.movers-merged-section { padding: 16px 20px 0; }
.movers-merged-card {
border-top: 3px solid var(--success); /* green = "movers" accent */
padding: 12px 16px 14px;
}
.movers-merged-card h3 { margin: 0 0 10px; }
.movers-merged-name { color: var(--success); font-weight: 800; }
.movers-merged-grid {
display: grid;
grid-template-columns: minmax(0, 1fr); /* P0 2026-06-08: risers-only after Coldest comment-out */
gap: 8px 28px;
}
.movers-col-head {
font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
margin: 0 0 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.movers-col-head-risers { color: var(--success); }
.movers-col-head-coldest { color: var(--kalshi); }
.movers-flat-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 1px;
}
.mvm-row {
cursor: pointer;
list-style: none;
}
.mvm-row:hover { background: color-mix(in srgb, var(--success) 5%, transparent); }
.mvm-link {
display: flex; flex-direction: row; align-items: baseline;
gap: 6px; padding: 4px 8px;
text-decoration: none; color: var(--text);
border-left: 2px solid transparent; border-radius: var(--r-chip);
transition: color var(--m-tab), background-color var(--m-tab), border-color var(--m-tab);
font-size: 12px;
}
.mvm-link:hover {
text-decoration: none;
border-left-color: var(--success);
background: color-mix(in srgb, var(--success) 6%, transparent);
}
.mvm-meta {
flex-shrink: 0; display: flex; align-items: center; gap: 4px;
font-size: 10px; color: var(--muted);
}
.mvm-meta .plat-chip-logo { width: 12px; height: 12px; flex-shrink: 0; }
.mvm-meta .sig-plat {
padding: 1px 5px; font-size: 9px; font-weight: 600;
letter-spacing: 0.04em; flex-shrink: 0;
}
.mvm-title {
flex: 1 1 0; min-width: 0;
font-size: 12px; line-height: 1.3; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvm-delta {
flex-shrink: 0;
font-family: monospace; font-weight: 700; font-size: 11px;
font-variant-numeric: tabular-nums;
}
.mvm-empty {
list-style: none; padding: 8px 6px;
color: var(--muted); font-size: 11px; font-style: italic;
}
/* ─── Jackpot + Daily Volume row ─── */
.jackpot-volume-row { padding: 16px 20px; }
.jv-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: stretch; }
.jp-card-block { min-height: 180px; }
.dv-chart { min-height: 180px; }
/* ─── Manifold Top 20 row tweaks ─── */
/* Build .96.6: override the prior grid layout — Manifold rows now use
the same single-line flex layout as every other Top-20 platform.
Profile image inline as a small (14px) flex child, counter
absolutely-positioned (same as default rows), title + meta inline. */
.t20-row-manifold {
display: flex;
align-items: baseline;
gap: 4px;
padding: 2px 6px 2px 18px;
position: relative;
grid-template-columns: none;
}
.t20-row-manifold::before {
position: absolute; left: 0; top: 2px;
display: inline;
grid-column: auto; grid-row: auto;
font-family: monospace; color: var(--muted); font-size: 9px;
width: 16px; text-align: right;
}
.t20-row-manifold .t20-icon {
grid-column: auto; grid-row: auto;
}
.t20-row-manifold .t20-title,
.t20-row-manifold .t20-meta {
grid-column: auto; grid-row: auto;
padding-left: 0;
}
.t20-icon {
/* Build .96.6: image shrunk 20→14 to match inline-flex baseline
height with the other icons. Was 20×20 spanning 2 grid rows. */
width: 14px; height: 14px; object-fit: cover; border-radius: var(--r-chip);
flex-shrink: 0;
grid-row: auto;
}
.t20-bet-inline { color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Build .260: .rp-col / .rp-head / .rp-table / .plungers-table rules
removed (replaced by .movers-merged-* + .mvm-* above). Semantic
delta-percent colors kept — referenced by .mvm-delta. */
.pct-up { color: var(--success); }
.pct-down { color: var(--danger); }
/* ─── Daily volume ─── */
.daily-volume { padding: 0 20px 20px; }
.daily-volume .chart-box { min-height: 280px; }
/* ─── Coldest events ─── */
.coldest-events { padding: 0 20px 20px; }
.coldest-events h2 { color: var(--danger); }
.coldest-events .rank { color: var(--muted); font-family: monospace; width: 24px; }
/* ─── Status badges / bet indicators ─── */
.status-badge {
display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-chip);
letter-spacing: 0.08em; margin-left: 6px; font-family: monospace;
}
.status-payable { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.status-eliminated { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
/* ─── CLOB-derived chips (live mid, spread, price delta) ─── */
.delta-chip {
display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-chip);
font-family: monospace; margin-left: 4px; vertical-align: middle;
}
.delta-up { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.delta-down { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
/* ─── Foretold aggregate + resolution chips (Build v.03 .31 build 103) ─── */
/* Forecaster venue has no $ volume; we display Foretold's
`previousAggregate` (community consensus) + `outcome` (resolution)
in the t20-meta slot instead. */
.ft-agg {
display: inline-block;
font-size: 10px; font-weight: 600; color: var(--text);
font-family: monospace; padding: 1px 5px; border-radius: var(--r-chip);
background: rgba(148,163,184,0.12);
}
.ft-out {
display: inline-block;
font-size: 10px; font-weight: 700;
font-family: monospace; padding: 1px 5px; border-radius: var(--r-chip);
color: var(--muted); background: rgba(148,163,184,0.14);
}
.ft-out.ft-out-yes {
color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent);
}
.ft-out.ft-out-no {
color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent);
}
/* ─── Wallet comprehensive stats panel (Build v.03 .31 build 126) ─── */
.wallet-stats-panel {
padding: 0 20px; margin: 18px 0 24px;
}
/* wallet-stats-tabs 2026-07-10: WHALE / ALL scope switcher. All colors via
CSS vars (graphical tenet). */
.wsp-tabs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 0 0 14px; padding-bottom: 8px;
border-bottom: 1px solid var(--border, #1f2530);
}
.wsp-tab {
appearance: none; cursor: pointer;
background: transparent; color: var(--muted, #8b95a6);
border: 1px solid var(--border, #1f2530); border-radius: var(--r-chip, 8px);
padding: 5px 13px; font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
transition: color .15s, border-color .15s, background .15s;
}
.wsp-tab:hover { color: var(--text, #e6eaf0); border-color: var(--accent, #2dd4bf); }
.wsp-tab.is-active {
color: var(--accent, #2dd4bf); border-color: var(--accent, #2dd4bf);
background: color-mix(in srgb, var(--accent, #2dd4bf) 12%, transparent);
}
.wsp-tab-sub { font-size: 11px; color: var(--muted, #8b95a6); margin-left: 4px; }
.wsp-pane { display: none; }
.wsp-pane.is-active { display: block; }
/* async ALL-pane loading state */
.wsp-loading { padding: 8px 0 4px; }
.wsp-shimmer {
height: 74px; margin-bottom: 12px; border-radius: 10px;
background: linear-gradient(90deg,
var(--card, #11151c) 25%,
color-mix(in srgb, var(--border, #1f2530) 60%, var(--card, #11151c)) 50%,
var(--card, #11151c) 75%);
background-size: 200% 100%;
animation: wsp-shimmer 1.3s ease-in-out infinite;
}
.wsp-shimmer-wide { height: 96px; }
@keyframes wsp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wsp-loading-txt, .wsp-empty {
font-size: 12px; color: var(--muted, #8b95a6); text-align: center; margin: 6px 0 0;
}
.wsp-empty { padding: 22px 12px; }
.ws-row { display: grid; gap: 12px; margin-bottom: 12px; }
.ws-row-2col { grid-template-columns: 1fr 1fr; }
.ws-row-3col { grid-template-columns: 1fr 1fr 1fr; }
.ws-row-1col { grid-template-columns: 1fr; }
.ws-block {
background: var(--card, #11151c);
border: 1px solid var(--border, #1f2530);
border-radius: var(--r-card);
padding: 12px 14px;
}
.ws-block.ws-settled { border-left: 3px solid var(--kalshi); }
.ws-block.ws-open { border-left: 3px solid var(--accent); }
.ws-block.ws-streaks { border-left: 3px solid var(--jackpot); }
.ws-block.ws-activity { border-left: 3px solid var(--platform-manifold-brand); }
.ws-block.ws-recent { border-left: 3px solid var(--whale); }
.ws-block.ws-sizing { border-left: 3px solid var(--muted); }
.ws-hdr {
font-size: 13px; font-weight: 700; color: #e6e8ee;
margin-bottom: 10px;
}
.ws-hdr-sub {
font-size: 11px; font-weight: 500;
color: var(--muted, var(--muted)); font-style: italic;
margin-left: 6px;
}
.ws-figures {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
.ws-fig { text-align: center; padding: 4px; }
.ws-fig-num {
font-size: 20px; font-weight: 800; font-family: monospace;
color: #e6e8ee; line-height: 1.2;
}
.ws-fig-num.ws-fig-date { font-size: 14px; }
.ws-fig-lbl {
font-size: 10px; color: var(--muted, var(--muted));
text-transform: uppercase; letter-spacing: 0.04em;
margin-top: 2px;
}
.ws-pos { color: var(--success, var(--success)); }
.ws-neg { color: var(--danger, var(--danger)); }
.ws-sub {
margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 6px;
}
.ws-chip {
display: inline-block; padding: 2px 8px;
background: rgba(148,163,184,0.10);
border-radius: var(--r-card); font-size: 11px;
color: var(--text); font-family: monospace;
}
.ws-chip.ws-chip-pos {
background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success, var(--success));
}
.ws-chip.ws-chip-neg {
background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger, var(--danger));
}
.ws-empty {
font-size: 12px; color: var(--muted, var(--muted));
font-style: italic; padding: 8px 0;
}
@media (max-width: 1000px) {
.ws-row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.ws-row-2col, .ws-row-3col { grid-template-columns: 1fr; }
}
.ws-row { display: grid; gap: 12px; margin-bottom: 12px; }
.ws-row-2col { grid-template-columns: 1fr 1fr; }
.ws-row-3col { grid-template-columns: 1fr 1fr 1fr; }
.ws-row-1col { grid-template-columns: 1fr; }
.ws-block {
background: var(--card, #11151c);
border: 1px solid var(--border, #1f2530);
border-radius: var(--r-card);
padding: 12px 14px;
}
.ws-block.ws-settled { border-left: 3px solid var(--kalshi); }
.ws-block.ws-open { border-left: 3px solid var(--accent); }
.ws-block.ws-streaks { border-left: 3px solid var(--jackpot); }
.ws-block.ws-activity { border-left: 3px solid var(--platform-manifold-brand); }
.ws-block.ws-recent { border-left: 3px solid var(--whale); }
.ws-block.ws-sizing { border-left: 3px solid var(--muted); }
.ws-hdr {
font-size: 13px; font-weight: 700; color: #e6e8ee;
margin-bottom: 10px;
}
.ws-hdr-sub {
font-size: 11px; font-weight: 500;
color: var(--muted, var(--muted)); font-style: italic;
margin-left: 6px;
}
.ws-figures {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
}
.ws-fig { text-align: center; padding: 4px; }
.ws-fig-num {
font-size: 20px; font-weight: 800; font-family: monospace;
color: #e6e8ee; line-height: 1.2;
}
.ws-fig-num.ws-fig-date { font-size: 14px; }
.ws-fig-lbl {
font-size: 10px; color: var(--muted, var(--muted));
text-transform: uppercase; letter-spacing: 0.04em;
margin-top: 2px;
}
.ws-pos { color: var(--success, var(--success)); }
.ws-neg { color: var(--danger, var(--danger)); }
.ws-sub {
margin-top: 8px;
display: flex; flex-wrap: wrap; gap: 6px;
}
.ws-chip {
display: inline-block; padding: 2px 8px;
background: rgba(148,163,184,0.10);
border-radius: var(--r-card); font-size: 11px;
color: var(--text); font-family: monospace;
}
.ws-chip.ws-chip-pos {
background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success, var(--success));
}
.ws-chip.ws-chip-neg {
background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger, var(--danger));
}
.ws-empty {
font-size: 12px; color: var(--muted, var(--muted));
font-style: italic; padding: 8px 0;
}
@media (max-width: 1000px) {
.ws-row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.ws-row-2col, .ws-row-3col { grid-template-columns: 1fr; }
}
/* ─── Wallet Smart Score (Build v.03 .31 build 108) ─── */
/* Composite 0-10 quality metric: ROI × win-rate × log(trades) × log(|PnL|)
× recency. Section + per-row card for the "Smartest Wallets" leaderboard,
plus inline chips for the Smart-Money Feed. */
.smartest-wallets-section { padding: 0 20px; margin-bottom: 18px; }
.smartest-wallets-section .section-heading {
margin: 4px 0 6px; padding-bottom: 4px;
}
.smartest-wallets-card {
background: var(--card, #11151c);
border: 1px solid var(--border, #1f2530);
border-radius: var(--r-card);
padding: 10px 14px;
}
.sw-subheading {
font-size: 11px; color: var(--muted, var(--muted));
margin-bottom: 6px; font-style: italic;
cursor: help;
}
.sw-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 2px;
}
.sw-row {
display: grid;
grid-template-columns: 28px 60px minmax(140px, 1fr) auto auto auto auto;
gap: 8px;
align-items: center;
padding: 4px 6px;
border-radius: var(--r-chip);
font-size: 12px;
font-family: monospace;
}
.sw-row:hover { background: color-mix(in srgb, var(--kalshi) 6%, transparent); }
.sw-row.sw-elite { border-left: 3px solid var(--jackpot); }
.sw-row.sw-strong { border-left: 3px solid var(--success); }
.sw-row.sw-mid { border-left: 3px solid var(--kalshi); }
.sw-row.sw-weak { border-left: 3px solid var(--muted); }
.sw-rank {
color: var(--muted, var(--muted)); font-weight: 700; text-align: right;
}
.sw-score-chip {
display: inline-block; font-weight: 800; padding: 2px 7px;
border-radius: var(--r-chip); font-family: monospace;
text-align: center;
}
.sw-score-chip.sw-score-sw-elite {
background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot);
box-shadow: 0 0 6px color-mix(in srgb, var(--jackpot) 25%, transparent);
}
.sw-score-chip.sw-score-sw-strong { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sw-score-chip.sw-score-sw-mid { background: color-mix(in srgb, var(--kalshi) 16%, transparent); color: var(--kalshi); }
.sw-score-chip.sw-score-sw-weak { background: rgba(100,116,139,0.18); color: var(--muted); }
.sw-wallet {
color: #e6e8ee; text-decoration: none; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-wallet:hover { color: var(--kalshi); text-decoration: underline; }
.sw-stat {
display: inline-flex; gap: 3px; align-items: baseline;
padding: 1px 6px; border-radius: var(--r-chip);
background: rgba(148,163,184,0.08);
white-space: nowrap;
}
.sw-stat-lbl { color: var(--muted, var(--muted)); font-size: 10px; font-weight: 500; }
.sw-pos { color: var(--success, var(--success)); }
.sw-neg { color: var(--danger, var(--danger)); }
/* Inline Smart-Score chip used in Smart-Money Feed rows */
.smart-score-chip {
display: inline-flex; align-items: center;
font-weight: 800; padding: 1px 6px; border-radius: var(--r-chip);
font-family: monospace; font-size: 10px;
margin-right: 3px;
}
.smart-score-chip.ss-elite {
background: color-mix(in srgb, var(--jackpot) 18%, transparent); color: var(--jackpot);
}
.smart-score-chip.ss-strong { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.smart-score-chip.ss-mid { background: color-mix(in srgb, var(--kalshi) 16%, transparent); color: var(--kalshi); }
.smart-score-chip.ss-weak { background: rgba(100,116,139,0.18); color: var(--muted); }
@media (max-width: 900px) {
.sw-row {
grid-template-columns: 24px 56px 1fr auto;
grid-template-rows: auto auto;
gap: 4px 6px;
}
.sw-row > .sw-roi { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.sw-row > .sw-win,
.sw-row > .sw-trades,
.sw-row > .sw-pnl { grid-row: 2; }
}
/* ─── Foretold rich data panel (Build v.03 .31 build 110) ─── */
/* Per-event modal rendering of Foretold's full "Aggregate and resolution"
view — markdown question description, channel + creator badges,
expected/actual resolution timestamps, CDF percentiles. */
.ft-rich-block {
margin: 12px 0 16px;
padding: 10px 14px;
background: color-mix(in srgb, var(--kalshi) 4%, transparent);
border-left: 3px solid var(--kalshi);
border-radius: var(--r-card);
}
.ft-rich-sub {
font-size: 11px; font-weight: 500; color: var(--muted, var(--muted));
margin-left: 8px; font-style: italic;
}
.ft-meta-strip {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 12px; font-size: 11px;
}
.ft-chip {
display: inline-block; padding: 2px 8px;
background: rgba(148,163,184,0.12); color: var(--text);
border-radius: var(--r-card); font-family: monospace;
white-space: nowrap;
}
.ft-state-badge {
display: inline-block; padding: 2px 8px;
font-weight: 700; border-radius: var(--r-card);
font-family: monospace; font-size: 11px;
}
.ft-state-badge.ft-state-judged {
background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success, var(--success));
}
.ft-state-badge.ft-state-open {
background: color-mix(in srgb, var(--kalshi) 18%, transparent); color: var(--kalshi);
}
.ft-state-badge.ft-state-closed {
background: color-mix(in srgb, var(--jackpot) 16%, transparent); color: var(--jackpot);
}
.ft-ar-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ft-ar-col {
padding: 10px 12px; border-radius: var(--r-chip);
background: rgba(11,16,32,0.6);
}
.ft-ar-col.ft-ar-empty { opacity: 0.6; }
.ft-ar-col.ft-ar-out-resolved {
background: color-mix(in srgb, var(--success) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--success) 18%, transparent);
}
.ft-ar-hdr {
font-size: 11px; font-weight: 700; color: var(--muted, var(--muted));
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.ft-ar-sub {
font-size: 10px; font-weight: 500; text-transform: none;
letter-spacing: 0; color: var(--muted, var(--muted));
font-style: italic;
}
.ft-ar-value {
font-size: 22px; font-weight: 800; font-family: monospace;
color: #e6e8ee; margin-bottom: 6px;
}
.ft-ar-col.ft-ar-out-resolved .ft-ar-value { color: var(--success, var(--success)); }
.ft-ar-meta {
font-size: 11px; color: var(--muted, var(--muted));
font-family: monospace; margin-top: 2px;
}
.ft-ar-meta .ft-k {
color: var(--muted); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 4px;
}
.ft-pctl {
font-size: 11px; color: var(--text); font-family: monospace;
margin-bottom: 4px;
}
.ft-ar-desc {
font-size: 11px; color: var(--text); line-height: 1.4;
margin-top: 8px; padding-top: 6px;
border-top: 1px solid rgba(148,163,184,0.15);
}
.ft-desc-details {
margin-top: 10px; padding: 8px 10px;
background: rgba(11,16,32,0.5);
border-radius: var(--r-chip);
}
.ft-desc-details summary {
cursor: pointer; font-size: 12px; font-weight: 600;
color: var(--muted, var(--muted));
}
.ft-desc-details[open] summary { margin-bottom: 8px; }
.ft-desc-sub { font-weight: 500; font-style: italic; }
.ft-desc-body {
font-size: 12px; color: var(--text);
white-space: pre-wrap; line-height: 1.5;
font-family: inherit;
}
@media (max-width: 700px) {
.ft-ar-grid { grid-template-columns: 1fr; }
}
/* ─── FantasySCOTUS Yes/No odds chips (Build v.03 .31 build 106) ─── */
/* SCOTUS-affirm questions are always binary; show both side odds since
leader-only hides how close the vote split is. */
.fs-yes {
display: inline-block;
font-size: 10px; font-weight: 700; color: var(--success);
font-family: monospace; padding: 1px 5px; border-radius: var(--r-chip);
background: color-mix(in srgb, var(--success) 16%, transparent);
}
.fs-no {
display: inline-block;
font-size: 10px; font-weight: 700; color: var(--danger);
font-family: monospace; padding: 1px 5px; border-radius: var(--r-chip);
background: color-mix(in srgb, var(--danger) 16%, transparent);
}
/* ─── Top-20 rank-change indicators (prominent, leftmost on each row) ─── */
.t20-row { position: relative; }
.t20-row::after {
content: ''; display: inline-block;
position: absolute; left: 4px; top: 11px;
width: 14px; height: 14px;
font-size: 14px; line-height: 1; font-weight: 800;
text-align: center;
}
.t20-row.t20-rc-up::after { content: '▲'; color: var(--success);
text-shadow: 0 0 4px color-mix(in srgb, var(--success) 60%, transparent); }
.t20-row.t20-rc-down::after { content: '▼'; color: var(--danger);
text-shadow: 0 0 4px color-mix(in srgb, var(--danger) 60%, transparent); }
.t20-row.t20-rc-same::after { content: '●'; color: var(--jackpot);
font-size: 10px; top: 14px; }
.t20-row.t20-rc-new::after { content: '★'; color: var(--success);
font-size: 13px; top: 12px;
text-shadow: 0 0 6px rgba(34,197,94,0.7); }
/* Slightly indent every t20-row to make space for the arrow icon */
.t20-row { padding-left: 24px; }
/* ─── 🔥 Flame badge (big bets / 2x volume movers) ─── */
.flame-badge {
display: inline-block;
font-size: 18px; line-height: 1; /* was 13px — bumped per UX request */
margin-right: 5px;
filter: drop-shadow(0 0 4px rgba(251,113,133,0.85));
animation: flameFlicker 1.6s ease-in-out infinite;
vertical-align: middle;
}
@keyframes flameFlicker {
0%, 100% { filter: drop-shadow(0 0 4px rgba(251,113,133,0.85)); }
50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--jackpot) 100%, transparent)); }
}
/* Row background brightening when an event has a 🔥 flame (big leader
bet or 24h-volume doubling). Applied via .t10-row-flame / .t20-row-flame
classes set server-side in the template — keeps lookups simple and
works in every browser (no :has() dependency). */
.t10-row.t10-row-flame,
.t20-row.t20-row-flame {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--jackpot) 13%, transparent) 0%,
rgba(251, 113, 133, 0.09) 50%,
color-mix(in srgb, var(--jackpot) 5%, transparent) 100%
);
border-left: 2px solid rgba(251, 113, 133, 0.55);
box-shadow: inset 0 0 18px rgba(251, 113, 133, 0.05);
}
.t10-row.t10-row-flame:hover,
.t20-row.t20-row-flame:hover {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--jackpot) 20%, transparent) 0%,
rgba(251, 113, 133, 0.14) 50%,
color-mix(in srgb, var(--jackpot) 9%, transparent) 100%
);
}
.delta-flat { background: var(--panel-2); color: var(--muted); }
.delta-na { color: var(--muted); font-family: monospace; font-size: 11px; }
.spread-chip {
display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: var(--r-chip);
font-family: monospace; margin-left: 4px; vertical-align: middle;
background: var(--panel-2); color: var(--muted);
}
.opt-spread, .opt-delta { font-family: monospace; font-size: 11px; white-space: nowrap; }
/* ─── Tables (legacy) ─── */
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--r-card); overflow: hidden; }
.empty { padding: 20px; color: var(--muted); font-style: italic; text-align: center; }
code { background: var(--panel-2); padding: 2px 6px; border-radius: var(--r-chip); font-family: monospace; }
/* ─── Footer ─── */
footer {
display: flex; justify-content: space-between; align-items: center;
color: var(--muted); font-size: 11px; padding: 14px 20px;
border-top: 1px solid var(--border);
}
.data-credit { color: var(--muted); letter-spacing: 0.03em; line-height: 1.55; text-align: left; }
.data-credit strong { color: var(--text); font-weight: 700; margin-right: 4px; }
.data-credit-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--border); }
.data-credit-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* .424: the public-footer Terms link was muted (`.data-credit-link` inherits
var(--muted) + a faint dotted border-color underline) → it read as prose, not a
link (operator-reported "not visible"). `.footer-terms-link` makes it unmistakable;
`.footer-legal-line` gives it its own row. Theme-safe — CSS vars only. */
.footer-legal-line { margin-top: 6px; }
.footer-terms-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-style: solid; text-decoration-color: var(--accent); }
.footer-terms-link:hover { color: var(--accent); text-decoration-thickness: 2px; }
.data-credit-sep { display: inline-block; margin: 0 8px; color: rgba(148, 163, 184, 0.45); }
/* Build .94.1: each footer credit category renders as its own
left-aligned block-level line (instead of the prior inline single-
paragraph with `·` separators). Four lines total:
1. Prediction markets: ...
2. News sources: ...
3. Aggregators & APIs: ...
4. ·
Small vertical gap between lines for breathing room. */
.data-credit-line {
display: block;
text-align: left;
margin-bottom: 4px;
}
.data-credit-line:last-child { margin-bottom: 0; }
/* .413 (operator): embolden the ownership line + a slightly brighter panel
background so it reads as the primary footer statement. Theme-vars only —
color-mix lifts the base panel a touch toward the text color (works on both
dark + peach). The inside stays full-strength via --text. */
.data-credit-ownership {
font-weight: 700;
background: color-mix(in srgb, var(--panel-2) 78%, var(--text) 8%);
padding: 7px 10px;
border-radius: 5px;
}
.data-credit-ownership strong { color: var(--text); }
/* Responsible-use / independence disclaimer (footer, signed off 2026-06-06).
Self-sufficient (own color + strong-color) so it works inside index.html's
.data-credit AND as a standalone child of wallet.html's