/* ===== Overton "internet-native" theme: black canvas, hairlines, mono meta, one accent ===== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&family=Orbitron:wght@800;900&display=swap');
:root{--acc:#97efca;--hair:rgba(255,255,255,.16);--hair2:rgba(255,255,255,.08);--mut:#838b88;--txt:#e9edf5;--red:#ff4d4d;--grn:#22c55e;--mono:'JetBrains Mono',monospace;--sans:'Space Grotesk',sans-serif}
body{background:#000;font-family:var(--mono);letter-spacing:.06em;color:var(--txt)}
body:not(.obs)::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
 background-image:linear-gradient(var(--hair2) 1px,transparent 1px),linear-gradient(90deg,var(--hair2) 1px,transparent 1px);background-size:48px 48px;opacity:.35;
 -webkit-mask:radial-gradient(ellipse at 50% 40%,transparent 35%,#000 100%);mask:radial-gradient(ellipse at 50% 40%,transparent 35%,#000 100%)}
body.obs{background:transparent}
body *{text-shadow:none}
/* status bar (MTS) */
body .topbar{top:22px;height:32px;font:500 13px var(--mono);letter-spacing:.16em;color:var(--mut);border-bottom:1px solid var(--hair);gap:32px}
body .topbar #st{color:var(--acc)}
body #ros{font:500 13px var(--mono);letter-spacing:.14em;color:var(--mut);gap:12px}body #ros b{font:700 15px var(--mono);color:var(--txt)}body #ros.over b{color:var(--red)}body #ros i{background:var(--red)}
body .topbar .r{gap:28px}
body #clock{font:700 15px var(--mono);color:var(--txt);letter-spacing:.12em}
body .dot{display:none}
body .topbar .r::after{content:'● LIVE';color:var(--red);font:700 13px var(--mono);letter-spacing:.2em;animation:lv 2s steps(1) infinite}
@keyframes lv{50%{opacity:.55}}
/* cams: plain hairline frames */
body .cams{top:66px}
body .cam{border:1px solid var(--hair);box-shadow:none}
.ph .cam{background:#16181d}.ph .cam::before{font:500 13px var(--mono);letter-spacing:.3em;color:#ffffff30}
body .cam .lt{background:linear-gradient(transparent,rgba(0,0,0,.75));padding:40px 20px 18px;align-items:flex-end}
body .cam .nm{font:700 30px var(--sans);letter-spacing:.01em;color:#fff;gap:12px;display:block}
body .cam .nm::before{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);vertical-align:middle;margin:-6px 12px 0 0}
body .cam .ti{font:500 13px var(--mono);letter-spacing:.14em;color:var(--mut);margin:8px 0 0 20px}body .cam .ti .h{color:var(--acc)}
body .cam .badge{border:1px solid var(--hair);background:#000;font:500 12px var(--mono);letter-spacing:.16em;padding:6px 10px;color:var(--txt)}
/* brand row */
body .mid{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:none}
body.obs .mid{background:#000}
body .logo h1{font:900 56px Orbitron;letter-spacing:.5em;color:var(--acc)}
body .logo p{font:500 11px var(--mono);letter-spacing:.24em;color:var(--mut)}
body .events{border:1px solid var(--hair);border-radius:0;font:500 13px var(--mono);letter-spacing:.08em;line-height:1.75;color:var(--txt)}
body .events h3{font:700 12px var(--mono);letter-spacing:.2em;color:var(--acc)}body .events .up h3{color:var(--mut)}
body .live .t{font:700 13px var(--mono);letter-spacing:.2em;color:var(--acc);line-height:1.8}body .live .t div:last-child{color:var(--mut);font-size:11px}
body .live .btn{background:none;border:1px solid var(--acc);color:var(--acc);font:700 13px var(--mono);letter-spacing:.2em;padding:12px 16px}
body .live .btn::before{background:var(--red)}
/* headline bar (Market Bubble / MTS scale) */
body .brk{border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#000;height:96px;top:780px}
body .brk .lb{background:none;color:var(--red);font:700 13px var(--mono);letter-spacing:.24em;width:180px;border-right:1px solid var(--hair);gap:10px;justify-content:flex-start;padding-left:22px}
body .brk .lb::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--red);animation:lv 1.4s steps(1) infinite;flex:none}
body .brk .tx{background:none;padding:0 28px}
body .brk .h{font:700 40px var(--sans);letter-spacing:-.005em;color:#fff;text-transform:uppercase}
body .brk .s{font:500 14px var(--mono);letter-spacing:.14em;color:var(--mut);margin-top:6px}
body .brk.wipe .h{animation:wp .7s cubic-bezier(.7,0,.2,1)}@keyframes wp{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
body .brk.off{clip-path:inset(0 100% 0 0)}
body .brk.flash{box-shadow:none;border-color:var(--red)}body .brk.flash .lb{background:var(--red);color:#000;animation:none}body .brk.flash .lb::before{background:#000}
body .brk.flash .h{color:#fff;animation:fh 1s steps(1) infinite}@keyframes fh{50%{color:var(--red)}}body .brk.flash .tx{background:none}
/* featured viewer post: MTS chat line, big */
body .feat{background:#000;border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);box-shadow:none}
body .feat .lb{background:none;border-right:1px solid var(--hair);color:var(--mut);font:500 12px var(--mono);letter-spacing:.24em}
body .feat .lb span{color:#fff;font:700 34px var(--sans)}
body .feat .u{font:700 15px var(--mono);letter-spacing:.08em;color:var(--acc);text-transform:none}
body .feat .b{font:600 28px var(--sans);letter-spacing:0;color:#fff;margin-top:6px}
/* market cards */
body .mk{background:none;border:1px solid var(--hair);border-left:1px solid var(--hair);font:500 13px var(--mono);letter-spacing:.18em;color:var(--mut)}
body .mk .p{font:700 26px var(--mono);letter-spacing:.02em;color:#fff}body .mk .c{font:700 14px var(--mono);letter-spacing:.04em}
body .mk .smp{font:500 9px var(--mono);letter-spacing:.2em;color:#4b5263;left:20px;bottom:6px}
body .up{color:var(--grn)}body .dn{color:var(--red)}
/* tickers: flat, separators */
body .tk{background:#000;border-top:1px solid var(--hair);font:500 15px var(--mono);letter-spacing:.06em}
body .tk .lab{background:#000;color:var(--mut);font:700 12px var(--mono);letter-spacing:.22em;border-right:1px solid var(--hair);box-shadow:8px 0 12px #000}
body .tk.m .lab{background:#000;color:var(--acc)}
body .tk .run{gap:0}body .tk .run span{padding:0 30px;border-right:1px solid var(--hair2)}
body .tk:not(.m) .run span{font:600 17px var(--sans);letter-spacing:.06em;color:#cfd5e1}body .tk .run span::before{content:'◆  ';color:var(--acc);font-size:9px;vertical-align:2px}body .tk.m .run span::before{content:''}
body .base{background:#000}
/* ---- layout 2 ---- */
body.l2 h4{font:700 12px var(--mono);letter-spacing:.22em;color:var(--mut);border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:12px}
body.l2 .left h4::before{width:7px;height:7px}body.l2 .right h4::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc)}
body.l2 .card{background:none;border:1px solid var(--hair);border-left:2px solid var(--acc);padding:14px 16px}
body.l2 .card .tm{font:500 12px var(--mono);color:var(--acc);letter-spacing:.14em}
body.l2 .card .tx{font:600 18px var(--sans);letter-spacing:.01em;line-height:1.3;color:#fff}
body.l2 .chart{background:none;border:1px solid var(--hair)}body.l2 .chart .lg{font:500 11px var(--mono);letter-spacing:.1em}body.l2 .chart .ax{font:500 11px var(--mono)}
body.l2 .chart .tag{font:500 9px var(--mono);letter-spacing:.2em;color:#4b5263}
body.l2 .sec{border-bottom:0;margin-bottom:18px}
body.l2 .fp{display:flex;gap:12px;margin-bottom:10px;animation:fpin .35s ease-out}@keyframes fpin{from{opacity:0;transform:translateY(6px)}}
body.l2 .fp .ts{flex:none;font:500 12px var(--mono);color:var(--mut);padding-top:3px}
body.l2 .fp .t{font:500 15px var(--sans);letter-spacing:0;line-height:1.35;color:#fff;-webkit-line-clamp:2}body.l2 .fp b{font:700 14px var(--mono);color:var(--acc)}
body.l2 .sb{font:500 12px var(--mono);letter-spacing:.12em;color:var(--txt)}body.l2 .bar2{height:2px;background:var(--hair)}body.l2 .bar2 i{background:var(--acc)}
body.l2 .it{border-bottom:1px solid var(--hair2);padding:8px 0}body.l2 .it .tm{font:500 11px var(--mono);color:var(--mut);letter-spacing:.14em}
body.l2 .it .n{font:700 18px var(--sans);color:#fff;letter-spacing:.02em;margin:3px 0 2px}body.l2 .it .r{font:500 10px var(--mono);letter-spacing:.18em;color:var(--acc)}
body.l2 .logo h1{font-size:44px}body.l2 .brk{top:780px;height:84px}body.l2 .brk .lb{width:150px;padding-left:16px}body.l2 .brk .h{font-size:30px}body.l2 .brk .s{font-size:12px}
body.l2 .mkts{top:876px}body.l2 .mk .p{font-size:20px}body.l2 .mk .c{font-size:12px}body.l2 .mk{font-size:11px}
/* ---- layout 3 ---- */
body.l3 .cam.feed .badge{background:#000}body.l3 .cam .fs{font:500 12px var(--mono);letter-spacing:.2em;color:var(--mut)}
body.l3 .col{font:500 13px var(--mono);letter-spacing:.08em;line-height:1.85;border-left:1px solid var(--hair);color:var(--txt)}
body.l3 .col h3{font:700 12px var(--mono);letter-spacing:.2em;color:var(--acc)}
body.l3 #mon3>div::before,body.l3 #gst3>div::before{content:'› ';color:var(--acc)}
body.l3 .brk .lb{background:var(--red);color:#000;font:700 14px var(--mono)}body.l3 .brk .lb::before{background:#000}
/* everything above the grid texture */
body>*{z-index:1}
/* iteration 2: bigger headline, readable meta */
body .topbar{font-size:14px}body #clock{font-size:16px}
body .brk{top:778px;height:108px}body .brk .h{font-size:52px;line-height:1}body .brk .s{font-size:15px;margin-top:10px}
body .mkts{top:898px;height:54px}body .mk{font-size:14px;color:#aab2c3}body .mk .p{font-size:24px;display:flex;align-items:baseline;gap:16px}body .mk .c{margin:0}
body .mk .smp{left:auto;right:auto;bottom:auto;top:auto;position:static;display:none}
body .mk>span:first-child::after{content:attr(data-s);}
body .mk.sample>span:first-child::after{content:'  · SAMPLE';color:#59617a;font-size:10px;letter-spacing:.2em}
body .mk.livefeed>span:first-child::after{content:'  · LIVE';color:var(--grn);font-size:10px;letter-spacing:.2em}
body .tk .run{padding-left:24px}
body .cam .ti{font-size:14px}body .logo p{font-size:12px}body .events{font-size:14px}
body.l2 .brk{top:780px;height:86px}body.l2 .brk .h{font-size:34px}body.l2 .mkts{top:878px;height:58px}body.l2 .mk .p{font-size:19px;gap:8px}body.l2 .mk{font-size:12px;padding:0 12px}
body.l2 h4{font-size:13px}body.l2 .it .r{font-size:11px}body.l2 .it .tm,body.l2 .fp .ts{font-size:12px}
body{--nm:30px}body.l2{--nm:24px}body.l3{--nm:26px}
body .brk .h{--max:54px}body.l2 .brk .h{--max:36px}
body .brk .lb{font-size:15px}
/* ===== Future Earth display face (local file, works offline in OBS). CC BY-ND 3.0 — V. Sarela, fontstruct.com/fontstructions/show/477551 ===== */
@font-face{font-family:'Future Earth';src:url('fonts/future-earth.ttf') format('truetype');font-display:block}
:root{--disp:'Future Earth','Space Grotesk',Orbitron,sans-serif}
body .logo h1{font-family:var(--disp);font-weight:400;letter-spacing:.32em}
body .cam .nm{font-family:var(--disp);font-weight:400;letter-spacing:.06em;line-height:1.1}
body .brk .h{font-family:var(--disp);font-weight:400;letter-spacing:.04em;line-height:1.05}
body .mk .p{font-family:var(--disp);font-weight:400;letter-spacing:.04em}
body.l2 .it .n{font-family:var(--disp);font-weight:400;letter-spacing:.06em;font-size:16px}
body{--nm:28px}body.l2{--nm:22px}body.l3{--nm:24px}
body .brk .h{--max:46px}body.l2 .brk .h{--max:30px}
body .mk .p{font-size:22px}body.l2 .mk .p{font-size:17px}
body .brk .h{--min:30px}body.l2 .brk .h{--min:22px}
body .brk .h[style*="normal"]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .mk .p{font-size:24px}body.l2 .mk .p{font-size:18px}
body .brk .h,body .brk .s{flex:none}body .brk .h[style*="normal"]{font-size:30px}
/* ---- overlap fixes ---- */
/* breaking label column sizes to its text (DEVELOPING, BREAKING NEWS…) instead of a fixed width */
body .brk .lb,body.l2 .brk .lb,body.l3 .brk .lb{width:auto;min-width:150px;flex:none;white-space:nowrap;padding:0 24px;justify-content:center}
body .brk .tx{min-width:0}
/* featured strap: same 16px rhythm above the banner in every layout, fully inside the brand row */
body .feat{top:640px;height:122px}            /* L1: brand row 626–766, banner at 778 → 16px gap */
body.l2 .feat{top:674px;height:90px}          /* L2: brand row 668–772, banner at 780 → 16px gap */
body.l3 .feat{top:642px;height:120px}         /* L3: brand row 630–766, banner at 778 → 16px gap */
body .feat .tx{min-width:0;overflow:hidden}
/* L3 feed tile: badge participates in the flex row instead of floating over the note */
body.l3 .cam.feed .badge{position:static;flex:none;margin-left:16px}
body.l3 .cam.feed .who{flex:1;min-width:0}body.l3 .cam .fs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* long titles/handles wrap (max 2 lines) instead of clipping */
body .cam .ti span{white-space:normal;overflow-wrap:anywhere}
body .cam .ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .cam .ti span+span{margin-left:14px}
/* banner subline is one line: shrink then ellipsis, never wraps out of the bar */
body .brk .s{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;line-height:1.3!important}

/* ===== prediction-market chart module (pmchart.js) ===== */
@keyframes pin{from{opacity:0}}.pin{animation:pin .45s ease-out}
.pmc{position:relative;border:1px solid var(--hair);background:#000c;padding:12px 14px 10px;font-family:var(--mono);color:var(--txt);transition:opacity .4s}
.pmc.pm-off,.pm-off{opacity:0!important;pointer-events:none}
.pmc .pmh{display:flex;justify-content:space-between;gap:10px;font:500 10px var(--mono);letter-spacing:.2em;color:var(--mut);white-space:nowrap}
.pmc .pmh .src{color:var(--acc)}.pmc .pmh .src::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:1px;animation:lv 2s steps(1) infinite}
.pmc.sample .pmh .src{color:#ffd400}.pmc.sample .pmh .src::before,.pmc.frozen .pmh .src::before{background:#ffd400;animation:none}
.pmc .rg{overflow:hidden;text-overflow:ellipsis}
.pmc .pq{font:500 13px var(--mono);letter-spacing:.06em;line-height:1.35;margin:8px 0 2px;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pmc .pbig{display:flex;align-items:baseline;gap:12px;min-width:0}.pmc .pbig b{font:400 40px 'Future Earth',var(--mono);color:var(--acc);letter-spacing:.04em;line-height:1.1}
.pmc .pbig span{font:500 11px var(--mono);letter-spacing:.16em;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.pmc .pplot{position:relative;height:96px;margin:6px 0 4px;border-bottom:1px solid var(--hair)}
.pmc svg{position:absolute;inset:0 34px 0 0;width:calc(100% - 34px);height:100%;overflow:visible}
.pmc .gl{stroke:var(--hair2);stroke-width:1}
.pmc path.ln{fill:none;stroke-width:2;stroke-linejoin:round;transition:d .9s cubic-bezier(.2,.7,.2,1),opacity .4s}.pmc path.l1{stroke-width:1.5}.pmc path.l2{stroke-width:1.5;stroke-dasharray:3 3}
.pmc .yax{position:absolute;right:0;top:-4px;bottom:-4px;display:flex;flex-direction:column;justify-content:space-between;font:500 9px var(--mono);color:var(--mut);text-align:right}
.pmc .plg{display:flex;flex-wrap:wrap;gap:3px 14px;font:500 10px var(--mono);letter-spacing:.08em;color:#c9d0de;text-transform:uppercase}
.pmc .plg span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.pmc .plg i{display:inline-block;width:8px;height:2px;margin:0 6px 3px 0;vertical-align:middle}.pmc .plg b{color:var(--txt);font-weight:700}
.pmc .pax{display:flex;justify-content:space-between;font:500 9px var(--mono);letter-spacing:.14em;color:var(--mut);margin-top:4px}
/* layout 2 panels */
body.l2 #charts{margin-top:4px}body.l2 #charts .pmc{margin-bottom:14px}body.l2 #charts .pmc .pplot{height:84px}body.l2 #charts .pmc .pbig b{font-size:34px}
/* camera-slot chart tile (layouts 1 & 3) */
.pmtile{background:#000;padding:0}.pmtile>.pmc{position:absolute;inset:0;border:0;padding:20px 24px 16px;display:flex;flex-direction:column}
.pmtile .pmh{font-size:12px}.pmtile .pq{font-size:17px;margin-top:14px}.pmtile .pbig b{font-size:72px}.pmtile .pbig span{font-size:13px}
.pmtile .pplot{flex:1;height:auto;margin:10px 0 8px}.pmtile .plg{font-size:12px;gap:6px 18px}.pmtile .pax,.pmtile .yax{font-size:11px}
body.l2 #charts .pmc{margin-bottom:10px;padding:10px 12px 8px}body.l2 #charts .pmc .pplot{height:74px}body.l2 #charts h4{margin-bottom:8px}

/* Kalshi unreachable (after retry): clear OFFLINE state instead of sample numbers */
.pmc.offline .pplot,.pmc.offline .plg,.pmc.offline .pax,.pmc.offline .pbig span,.pmc.offline .pq{visibility:hidden}
.pmc.offline .pmh .src{color:#ff6b6b}.pmc.offline .pmh .src::before{background:#ff6b6b;animation:none}
.pmc.offline .pbig b{color:#6b7671}
