/* 23 Oct 2026 (Chris): ONE content width for the whole site. --ci-col is the single outer column; legal_pages.SHELL uses the same value (test_width checks). */
:root{--ci-col:1320px}
/* calledit.css (21 Oct 2026): "Called It" brand for the standalone /sentiment site (body.ci). Mark: static/calledit_mark_t.png.
   Green accent #78F059, near-black surfaces, Inter (self-hosted, static/fonts, OFL), rounded cards, consistent pills.
   The paper-trading dashboard does not load this file. */
@font-face{font-family:"Inter";src:url(/static/fonts/Inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Calm palette (21 Oct 2026, Chris: "too green"): neutral charcoal surfaces, white text, grey secondary. Brand green ONLY for the
   logo mark, the single primary CTA, positive numbers and hit pills (desaturated, tinted), and the active-tab underline. Tune here. */
body.ci{--ci-bg:#0c0d0f;--ci-surface:#131417;--ci-surface-2:#18191c;--ci-border:#26282d;--ci-border-strong:#34373d;--ci-text:#f1f2f4;--ci-text-2:#c4c7cd;--ci-muted:#8b9099;
 --ci-brand:#78F059;--ci-brand-ink:#05140a;--ci-pos:#78F059;--ci-pos-bg:rgba(120,240,89,.10);--ci-pos-line:rgba(120,240,89,.32);--ci-neg:#ff4d6d;--ci-neg-bg:rgba(255,77,109,.10);--ci-neg-line:rgba(255,77,109,.32);
 --ci-warn:#d1b066;--ci-link:#e8eaed;--ci-chip-on-bg:#f1f2f4;--ci-chip-on-ink:#111214;
 --bg:var(--ci-bg);--panel:var(--ci-surface);--panel2:var(--ci-surface-2);--line:var(--ci-border);--text:var(--ci-text);--muted:var(--ci-muted);--acc:var(--ci-text);--acc-d:var(--ci-text-2);--acc-ink:var(--ci-chip-on-ink);--pos:var(--ci-pos);--neg:var(--ci-neg);--hdr:64px;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--ci-bg);color:var(--ci-text);-webkit-font-smoothing:antialiased}
body.ci::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(900px 520px at 12% -8%,rgba(255,255,255,.035),transparent 62%)}
body.ci a{color:var(--ci-link)}body.ci a:hover{color:#fff}body.ci .pos{color:var(--pos)}body.ci .neg{color:var(--neg)}
/* header */
body.ci header{display:flex;justify-content:space-between;align-items:center;gap:14px;height:var(--hdr);padding:0 clamp(14px,4vw,40px);background:rgba(12,13,15,.9);border-bottom:1px solid var(--ci-border);backdrop-filter:blur(10px)}
.ci-brand{display:flex;align-items:center;gap:12px;text-decoration:none!important;color:var(--text)!important}.ci-brand img{height:30px;width:auto;display:block}
.ci-brand b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}
.ci-nav{display:flex;align-items:center;gap:6px}.ci-nav a.l{color:#c7cfc9!important;font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:10px;text-decoration:none!important}.ci-nav a.l:hover{color:#fff!important;background:#ffffff0a}
.ci-nav .sep{width:1px;height:24px;background:#ffffff1f;margin:0 6px}
.ci-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none!important;cursor:pointer;border:1px solid transparent;font-family:inherit;white-space:nowrap;transition:filter .15s,background .15s}
.ci-btn.pri{background:var(--ci-brand);color:var(--ci-brand-ink)!important;border-color:var(--ci-brand)}.ci-btn.pri:hover{filter:brightness(1.07)}
.ci-btn.out{background:transparent;color:var(--ci-text)!important;border-color:var(--ci-border-strong)}.ci-btn.out:hover{background:#ffffff10}
.ci-btn.ghost{background:transparent;color:var(--ci-text)!important;border-color:var(--ci-border-strong);padding:8px 14px;font-size:14px}.ci-btn.ghost:hover{background:rgba(255,255,255,.05)}
body.ci-user .ci-anon-only{display:none!important}body.ci-anon header .hl-me{display:none!important}
body.ci header .hl-me a,body.ci header .hl-me button{border-color:var(--line)}
/* hero */
.ci-hero{max-width:var(--ci-col);margin:0 auto;padding:clamp(28px,6vw,72px) clamp(16px,4vw,40px) clamp(20px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.ci-hero h2{font-size:clamp(44px,7.4vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:800;margin:0;color:#fff}
.ci-hero .sub{font-size:clamp(16px,1.6vw,19px);color:#aeb7b0;margin:22px 0 30px;max-width:560px}
.ci-cta{display:flex;flex-wrap:wrap;gap:14px}.ci-cta .ci-btn{padding:14px 24px;font-size:16.5px;border-radius:12px}
.ci-free{margin-top:14px;color:#aeb7b0;font-size:14.5px;padding-left:4px}
.ci-lb{background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:16px;padding:22px 22px 10px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.ci-lb .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.ci-lb .hd b{font-size:20px;color:#fff;font-weight:650}
.ci-live{display:inline-flex;align-items:center;gap:7px;color:#c7cfc9;font-size:14px}.ci-live i{width:7px;height:7px;border-radius:50%;background:var(--ci-pos);animation:ciPulse 2.4s infinite}
@keyframes ciPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ci-lb table{width:100%;border-collapse:collapse;table-layout:fixed}.ci-lb th:first-child{width:46px}.ci-lb th:last-child{width:150px}.ci-who>div{overflow:hidden}.ci-who a{display:block}.ci-lb th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8d978f;font-weight:600;text-align:left;padding:6px 4px 10px;border-bottom:1px solid #ffffff14;position:static;background:none;cursor:default}
.ci-lb th:last-child,.ci-lb td:last-child{text-align:right}.ci-lb td{padding:14px 4px;border-bottom:1px solid #ffffff0f;vertical-align:middle}.ci-lb tr:last-child td{border-bottom:0}
.ci-lb .rk{font-size:18px;color:#c7cfc9;width:34px}.ci-who{display:flex;align-items:center;gap:12px;min-width:0}.ci-who a{color:#fff!important;font-weight:550;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-who small{display:block;color:#8d978f;font-size:12px;font-weight:400}
.ci-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:16px;color:var(--ci-text-2);background:var(--ci-surface-2);border:1px solid var(--ci-border)}
.ci-av.up,.ci-av.dn{background:var(--ci-surface-2)}
.ci-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid}
.ci-pill.up{color:var(--ci-pos);border-color:transparent;background:var(--ci-pos-bg)}.ci-pill.dn{color:var(--ci-neg);border-color:transparent;background:var(--ci-neg-bg)}
.ci-lb .ft{font-size:11.5px;color:#7c867f;padding:8px 2px 6px;border-top:1px solid #ffffff0f}
.ci-how{max-width:var(--ci-col);margin:0 auto;padding:0 clamp(16px,4vw,40px) 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;scroll-margin-top:80px}
.ci-how div{background:var(--ci-surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}.ci-how b{display:block;color:#fff;font-size:15px;margin-bottom:4px}.ci-how span{color:#9aa49c;font-size:13.5px}
.ci-how em{font-style:normal;color:var(--ci-muted);font-weight:600;margin-right:6px}
/* restyle of the sentiment content */
body.ci main#main{max-width:var(--ci-col);margin:0 auto;padding:18px clamp(14px,4vw,40px) 40px;scroll-margin-top:70px}
body.ci .panel,body.ci .card,body.ci .sx-k,body.ci .tp-c,body.ci .ap-r,body.ci .sx-ytc,body.ci .story,body.ci .sx-wl-i,body.ci .sx-basisbar{border-radius:14px!important;border-color:var(--line)!important;background:var(--panel)}
body.ci .tw{border-radius:12px;border-color:var(--line)}body.ci th{background:var(--panel2)}
body.ci .sx-btn{background:var(--ci-surface-2);color:var(--ci-text);border:1px solid var(--ci-border-strong);border-radius:10px}body.ci .sx-btn.ghost{background:transparent;color:var(--ci-text);border:1px solid var(--ci-border-strong)}
body.ci .seg{border-radius:999px}body.ci .seg span.on,body.ci .sx-mk span.on{background:var(--ci-chip-on-bg);color:var(--ci-chip-on-ink)}body.ci .sx-mk span.on small{color:#4a4d52}
body.ci .tp-c:hover{border-color:var(--ci-border-strong)!important}body.ci .badge{border-radius:999px}
body.ci .sxn{background:rgba(12,13,15,.94);border-bottom-color:var(--ci-border)}body.ci .sxn a{border-radius:999px;background:transparent;color:var(--ci-muted)}body.ci .sxn a:hover{border-color:var(--ci-border-strong);color:var(--ci-text)}body.ci .sxn a.on{background:var(--ci-chip-on-bg);border-color:var(--ci-chip-on-bg);color:var(--ci-chip-on-ink)}
body.ci .asx-btn{border-color:var(--ci-border-strong);border-radius:10px;background:transparent}body.ci .asx-btn:hover{background:rgba(255,255,255,.05)}body.ci .asx-tools input{border-radius:10px}
body.ci .sxf-more{border:1px solid var(--ci-border);background:var(--ci-surface);border-radius:14px}body.ci .sxf-more a.p{background:var(--ci-brand);border-color:var(--ci-brand);color:var(--ci-brand-ink)!important}body.ci .sxf-more a.g{color:var(--ci-text)!important;border-color:var(--ci-border-strong)}
body.ci .story .post .ft a.go{border-color:var(--ci-border-strong);background:transparent}
body.ci .sx-hero h2{font-size:26px;letter-spacing:-.02em;color:#fff}body.ci .sx-sec h3,body.ci h2,body.ci h3{color:var(--ci-text);letter-spacing:-.01em}
body.ci .sx-pro{background:var(--ci-surface-2);color:var(--ci-text);border:1px solid var(--ci-border-strong)}
/* neutralise the inherited dashboard greens: soft tints for positive, no green borders / fills / headings */
body.ci .pos,body.ci .bull,body.ci .tp-l.bull,body.ci .tp-n.bull,body.ci .tp-lb.bull,body.ci .tp-fa .k.bull,body.ci .sx-wl-i .bull,body.ci .cmc-sec.up,body.ci .story .row .g,body.ci .story .res .pct,body.ci .story .tl .arr,body.ci .pk-lg{color:var(--ci-pos)!important}
body.ci .neg,body.ci .bear{color:var(--ci-neg)}
body.ci .stc.bullish,body.ci .hchip,body.ci .story .row .dir.bull,body.ci .story .call .dir.bull,body.ci .sx-ih1 .dir.bull,body.ci .sx-pick .dir.bull,body.ci .pk-c.bull,body.ci .bp-st-hit,body.ci .cmc-pill.hl{background:var(--ci-pos-bg)!important;color:var(--ci-pos)!important;border-color:transparent!important}
body.ci .hit{background:var(--ci-surface)!important;border-color:var(--ci-border)!important}
body.ci .story:before,body.ci .sx-pick:before{background:var(--ci-border-strong)!important}body.ci .bp-call.st-hit{border-left-color:var(--ci-pos)}
body.ci .sx-k.on{border-color:var(--ci-border-strong);box-shadow:0 0 0 1px var(--ci-border-strong) inset}
body.ci .tab.on,body.ci .fchip.on{background:var(--ci-chip-on-bg);border-color:var(--ci-chip-on-bg);color:var(--ci-chip-on-ink)}
body.ci .story .row .tg,body.ci .story .post .more{color:var(--ci-text-2)}
body.ci .cmc-cat:before{background:var(--ci-border-strong)}body.ci .cmc-cat .rank,body.ci .cmc-cat .big{color:var(--ci-text)}
body.ci .asx-side.pick{color:var(--ci-pos);border-color:transparent;background:var(--ci-pos-bg)}body.ci .asx-side.bearish{color:var(--ci-neg);border-color:transparent;background:var(--ci-neg-bg)}
body.ci .cs-st.hit{color:var(--ci-pos);border-color:transparent;background:var(--ci-pos-bg)}body.ci .cs-st.miss{color:var(--ci-neg);border-color:transparent;background:var(--ci-neg-bg)}body.ci .cs-st.open{color:var(--ci-warn);border-color:transparent;background:rgba(209,176,102,.10)}
body.ci .cs-side.long{color:var(--ci-pos)}body.ci .cs-side.short{color:var(--ci-neg)}body.ci .cs-sp .x{color:var(--ci-pos)}
@media(max-width:900px){.ci-hero{grid-template-columns:minmax(0,1fr)}.ci-how{grid-template-columns:minmax(0,1fr)}}
body.ci{overflow-x:hidden}.ci-nav .sm{display:none}
@media(max-width:600px){body.ci{--hdr:56px}.ci-brand b{font-size:19px}.ci-brand img{height:25px}.ci-nav a.l.hw,.ci-nav .sep{display:none}.ci-nav a.l{padding:6px 8px;font-size:14px}.ci-nav .ci-btn.ghost{padding:7px 10px;font-size:13px}
 .ci-cta .ci-btn{flex:1 1 100%}.ci-nav .lg{display:none}.ci-nav .sm{display:inline}body.ci header{gap:8px}.ci-hero .sub{font-size:16px}.ci-free{text-align:center}.ci-lb{padding:16px 14px 8px}.ci-av{width:36px;height:36px;font-size:14px}.ci-pill{font-size:13px;padding:5px 9px}.ci-pill .hr{display:none}.ci-lb th:last-child{width:84px}.ci-lb th:first-child{width:46px}.ci-lb th{font-size:10.5px;letter-spacing:.05em}.ci-who a{font-size:14.5px}}
@media(max-width:380px){.ci-nav a.l.li{display:none}}
/* ---- Theme classes (21 Oct 2026): brand green (logo, primary CTA, positive values) + ONE secondary accent that carries navigation,
   active states, links, chart series and section accents. body.ci-theme-a (default, electric blue) / -b (violet) / -c (amber).
   Switch: /sentiment?theme=b (remembered in localStorage 'ciTheme'). Tune the tokens below. ---- */
body.ci,body.ci.ci-theme-a{--ci-bg:#0a0e16;--ci-surface:#10151f;--ci-surface-2:#151b27;--ci-border:#1e2635;--ci-border-strong:#2c3648;--ci-muted:#8691a3;
 --ci-accent:#3b82f6;--ci-accent-hi:#7fb0ff;--ci-accent-bg:rgba(59,130,246,.14);--ci-accent-line:rgba(59,130,246,.45)}
body.ci.ci-theme-b{--ci-bg:#0a0812;--ci-surface:#110e1b;--ci-surface-2:#16122a;--ci-border:#262138;--ci-border-strong:#352e4d;--ci-muted:#918ba3;
 --ci-accent:#a259ff;--ci-accent-hi:#c69bff;--ci-accent-bg:rgba(162,89,255,.15);--ci-accent-line:rgba(162,89,255,.45)}
body.ci.ci-theme-c{--ci-bg:#0f0e0c;--ci-surface:#171512;--ci-surface-2:#1d1a16;--ci-border:#2a2620;--ci-border-strong:#3a342b;--ci-muted:#9a9184;
 --ci-accent:#f5b84a;--ci-accent-hi:#ffd27f;--ci-accent-bg:rgba(245,184,74,.13);--ci-accent-line:rgba(245,184,74,.42)}
body.ci{--ci-link:var(--ci-accent-hi);--sxn-ul:var(--ci-accent);--sxn-chip:var(--ci-accent-bg);--sxn-chip-ink:var(--ci-accent-hi)}
body.ci::before{background:radial-gradient(900px 520px at 12% -8%,var(--ci-accent-bg),transparent 62%)!important;opacity:.55}
body.ci .sxn{background:var(--ci-bg)!important}
body.ci .sxn .sxn-s a.on{border-color:var(--ci-accent-line)!important}
body.ci .sx-sec h3{position:relative;padding-left:12px}body.ci .sx-sec h3::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:3px;border-radius:2px;background:var(--ci-accent)}
body.ci .seg span.on,body.ci .sx-mk span.on,body.ci .tab.on,body.ci .fchip.on{background:var(--ci-accent-bg);color:var(--ci-accent-hi);box-shadow:inset 0 0 0 1px var(--ci-accent-line)}body.ci .sx-mk span.on small{color:var(--ci-muted)}
body.ci .ci-live i{background:var(--ci-accent)}body.ci .ci-how em{color:var(--ci-accent-hi)}
body.ci a.vlink,body.ci .ci-who a{color:var(--ci-text)!important}body.ci .ci-who a:hover{color:var(--ci-accent-hi)!important}
body.ci .ti,body.ci [data-tip]>.ti,body.ci .tipi{color:var(--ci-accent-hi)}
body.ci .ci-btn.ghost:hover,body.ci .ci-btn.out:hover{border-color:var(--ci-accent-line)}
body.ci .sx-k .verd,body.ci .sx-k .sx-g,body.ci .sx-k .bars,body.ci .sx-k [class*=bar]{filter:saturate(.6)}
/* sticky v3 (21 Oct 2026): the page header scrolls away; the section bar (.sxn: logo · tabs · Crypto|Stocks · account + chips) is the ONE pinned bar */
body.ci header{position:relative!important;top:auto!important}
/* entry flow + How it works cards (21 Oct 2026) */
body.ci.ci-entry #main,body.ci.ci-entry #sxTop{display:none!important}
body.ci.ci-app #ciHero,body.ci.ci-app #ciHow{display:none!important}
body.ci.ci-app #main{padding-top:6px}
.ci-pitch{color:var(--ci-muted);font-size:15.5px;line-height:1.55;max-width:520px;margin:-6px 0 18px}
.ci-btn.txt{background:transparent!important;border-color:transparent!important;color:var(--ci-accent-hi,#c69bff)!important;font-weight:600}.ci-btn.txt:hover{text-decoration:underline}
.ci-how{gap:18px!important;padding-bottom:48px!important}
.ci-how .hw-c{background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:16px;padding:0 0 18px!important;overflow:hidden;display:flex;flex-direction:column}
.ci-how .hw-img{position:relative;height:220px;margin:0 0 14px;border-radius:12px 12px 0 0;overflow:visible}
.ci-how .hw-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0}
.ci-how .hw-img::after{content:"";position:absolute;inset:0;border-radius:12px 12px 0 0;background:linear-gradient(180deg,rgba(13,11,21,0) 45%,var(--ci-surface) 100%);pointer-events:none}
.ci-how .hw-img em{position:absolute;left:16px;bottom:-14px;z-index:2;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:15px;color:#fff!important;background:var(--ci-accent,#a259ff);box-shadow:0 0 0 4px var(--ci-surface),0 6px 18px rgba(162,89,255,.35);margin:0!important}
.ci-how .hw-c b{padding:12px 18px 0;font-size:16px!important}.ci-how .hw-c span{display:block;padding:4px 18px 0}
@media(max-width:900px){.ci-how .hw-img{height:160px}}
/* losers in the losing colour (21 Oct 2026, Chris): colour follows the value / outcome, not the section template */
body.ci #sxMiss h3::before,body.ci #sxTop5b h3::before{background:var(--ci-neg,#ff4d6d)!important}
body.ci #sxMiss h3,body.ci #sxTop5b h3{color:var(--ci-text)}
body.ci .cs-st.miss{color:#ff4d6d!important;border-color:rgba(255,77,109,.45)!important;background:rgba(255,77,109,.08)!important}
body.ci .cs-st.hit{color:#78F059!important;border-color:rgba(120,240,89,.45)!important;background:rgba(120,240,89,.08)!important}
body.ci .cs-st.open,body.ci .cs-st.exit,body.ci .cs-st.void{color:var(--ci-muted)!important;border-color:var(--ci-border-strong)!important;background:transparent!important}
body.ci .cs-side.long{color:#78F059}body.ci .cs-side.short{color:#ff4d6d}
/* entry screen fits one laptop viewport (21 Oct 2026, Chris: 1280x720 … 1536x864, no scrolling) */
@media(min-width:901px){
 body.ci.ci-entry{--hdr:56px}
 body.ci.ci-entry header{height:56px}body.ci.ci-entry .ci-brand img{height:24px}body.ci.ci-entry .ci-brand b{font-size:19px}
 body.ci.ci-entry .ci-hero{padding:clamp(16px,3.2dvh,40px) clamp(16px,4vw,40px) clamp(12px,2.2dvh,24px);gap:clamp(20px,3vw,44px)}
 body.ci.ci-entry .ci-hero h2{font-size:clamp(32px,min(4.2vw,7.2dvh),56px);line-height:1}
 body.ci.ci-entry .ci-hero .sub{font-size:clamp(15px,1.3vw,17.5px);margin:clamp(10px,1.8dvh,18px) 0 8px}
 body.ci.ci-entry .ci-pitch{font-size:14px;margin:0 0 clamp(12px,2dvh,20px);max-width:500px}
 body.ci.ci-entry .ci-cta .ci-btn{padding:10px 16px;font-size:14.5px}
 body.ci.ci-entry .ci-free{font-size:12px;margin-top:8px}
 body.ci.ci-entry .ci-lb{padding:14px 16px 6px;border-radius:14px}body.ci.ci-entry .ci-lb .hd{margin-bottom:6px}body.ci.ci-entry .ci-lb .hd b{font-size:16px}
 body.ci.ci-entry .ci-lb td{padding:clamp(5px,1dvh,9px) 4px}body.ci.ci-entry .ci-av{width:32px;height:32px;font-size:13px}body.ci.ci-entry .ci-who a{font-size:14px}body.ci.ci-entry .ci-lb .rk{font-size:15px}
 body.ci.ci-entry .ci-lb .ft{padding:6px 2px 4px}
 body.ci.ci-entry .ci-how{gap:14px!important;padding-bottom:clamp(12px,2dvh,24px)!important}
 body.ci.ci-entry .ci-how .hw-img{height:clamp(110px,19dvh,160px);margin-bottom:10px}
 body.ci.ci-entry .ci-how .hw-c{padding-bottom:12px!important}body.ci.ci-entry .ci-how .hw-c b{padding-top:10px;font-size:15px!important}
 body.ci.ci-entry .ci-how .hw-c span{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 body.ci.ci-entry .ci-how .hw-img em{width:30px;height:30px;font-size:14px;bottom:-12px}
}
@media(min-width:901px) and (max-height:820px){
 body.ci.ci-entry .ci-hero h2{font-size:clamp(30px,6.4dvh,48px)}body.ci.ci-entry .ci-pitch{display:none}
 body.ci.ci-entry .ci-lb .ci-pill .hr{display:none}
}
/* fixed nav (21 Oct 2026 19:25): in the app view the section bar (logo · tabs · Crypto|Stocks · Home/account) is THE header, fixed at y=0 */
body.ci.ci-app>header{display:none!important}
body.ci .sxn .sxn-acc a.hm{color:var(--ci-muted)!important;font-weight:600}
/* clean app top (21 Oct 2026 19:30, Chris: "bullshit up there"): content starts right under the fixed bar */
body.ci.ci-app #main>.sx-hero,body.ci.ci-app #main>#sxMkBar{display:none!important}
body.ci.ci-app #main{padding-top:0!important}
body.ci.ci-app #main>.sxn-sent{margin:0 0 18px!important}
html:has(body.ci){background:var(--ci-bg,#0a0812)}
/* 21 Oct 2026 19:30 neon palette (Chris: logo green everywhere, "more punch"): one green = the logo's (#78F059, sampled from calledit_mark.png),
   electric violet accent, hot red; plum background slightly deeper. Tints are ~16% alpha; neon only on accents, numbers, borders, pills, the CTA. */
body.ci,body.ci.ci-theme-b{--ci-green:#78F059;--ci-brand:var(--ci-green);--ci-pos:var(--ci-green);--ci-pos-bg:rgba(120,240,89,.16);--ci-pos-line:rgba(120,240,89,.45);
 --ci-red:#ff4d6d;--ci-neg:var(--ci-red);--ci-neg-bg:rgba(255,77,109,.16);--ci-neg-line:rgba(255,77,109,.45)}
body.ci.ci-theme-b{--ci-bg:#0a0812;--ci-surface:#110e1b;--ci-surface-2:#16122a;--ci-border:#241e38;--ci-border-strong:#342b4f;--ci-muted:#958fa8;
 --ci-accent:#a259ff;--ci-accent-hi:#c69bff;--ci-accent-bg:rgba(162,89,255,.16);--ci-accent-line:rgba(162,89,255,.5)}
/* 19:41 'Live' dot = the live colour (logo green), pulsing */
body.ci .ci-live i{background:var(--ci-green,#78F059)!important;box-shadow:0 0 0 0 rgba(120,240,89,.55);animation:ciLivePulse 2.4s infinite}
@keyframes ciLivePulse{0%{box-shadow:0 0 0 0 rgba(120,240,89,.55)}70%{box-shadow:0 0 0 6px rgba(120,240,89,0)}100%{box-shadow:0 0 0 0 rgba(120,240,89,0)}}
@media(prefers-reduced-motion:reduce){body.ci .ci-live i{animation:none}}
/* 19:42 footer content aligned with the content block (bar/cards edges); background still full width */
body.ci div.ci-footer{padding:16px clamp(14px,4vw,40px)!important}
/* 21:20 entry polish: How-it-works copy fits without clamping (no ellipses); leaderboard receipts arrow inline on the same line */
body.ci.ci-entry .ci-how .hw-c span{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
#ciLbB small .rc-link.rc-in{margin-left:4px;font-size:inherit!important;vertical-align:baseline;display:inline!important}
/* 22 Oct 2026 (Chris: "the header spans the full length on the entry page, adapt it to only be above the content area"): the header
   background stays full width, its logo and buttons sit in the same --ci-col content column as the hero and every other page. */
body.ci header{padding-left:calc(max(0px,(100% - var(--ci-col)) / 2) + clamp(16px,4vw,40px))!important;padding-right:calc(max(0px,(100% - var(--ci-col)) / 2) + clamp(16px,4vw,40px))!important}

/* 22 Oct 2026 (Chris: "leaderboard looks a bit squeezed"): 4 roomy columns, plain coloured figures instead of big pills, return next to hit rate */
.ci-lb table{table-layout:auto!important}.ci-lb th:first-child,.ci-lb td.rk{width:38px!important}.ci-lb th:last-child{width:auto!important}
.ci-lb th.ret,.ci-lb td.ret,.ci-lb th.hit,.ci-lb td.hit{text-align:right!important;white-space:nowrap;padding-left:14px!important}
.ci-lb td{padding:13px 4px!important}body.ci.ci-entry .ci-lb td{padding:clamp(10px,1.5dvh,14px) 4px!important}
.ci-lb td.ret b,.ci-lb td.hit b{display:block;font-size:17px;font-weight:750;line-height:1.15}.ci-lb td.ret small,.ci-lb td.hit small{display:block;font-size:11.5px;color:#8d978f;margin-top:2px}
.ci-lb td b.up{color:#78F059}.ci-lb td b.dn{color:#ff4d6d}.ci-lb .ci-who small{display:block;font-size:12px;color:#8d978f;margin-top:2px;white-space:nowrap;overflow:hidden}
.ci-lb .ci-who{gap:10px}.ci-lb .ci-who a{font-size:15px!important}
@media(max-width:700px){.ci-lb .ci-av{width:30px;height:30px}.ci-lb td.ret b,.ci-lb td.hit b{font-size:15.5px}.ci-lb th{font-size:10.5px}.ci-lb th.ret,.ci-lb td.ret,.ci-lb th.hit,.ci-lb td.hit{padding-left:8px!important}}
/* 22 Oct 2026: the page-wide .hit card style (min-width 220px) leaked into the leaderboard hit-rate column and caused sideways scroll at 1024 / 390 */
.ci-lb th.hit,.ci-lb td.hit{display:table-cell!important;min-width:0!important;max-width:none!important;background:none!important;border-color:var(--ci-border)!important;flex:none!important;gap:0!important;width:auto}
@media(max-width:700px){.ci-lb td.ret small,.ci-lb td.hit small{white-space:normal;font-size:11px}.ci-lb td.ret,.ci-lb td.hit{white-space:normal!important}.ci-lb td{padding-left:4px;padding-right:4px}.ci-who small{white-space:normal}}
@media(max-width:700px){.ci-lb table{table-layout:fixed;width:100%}.ci-lb th:first-child{width:30px!important}.ci-lb th.ret{width:30%}.ci-lb th.hit{width:22%}.ci-who a{overflow:hidden;text-overflow:clip;display:block;white-space:nowrap}}
@media(max-width:700px){body.ci .ci-lb table{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;table-layout:fixed!important}}
.ci-lb th.hit,.ci-lb td.hit{border-left:0!important;border-right:0!important;border-top:0!important;border-radius:0!important;box-shadow:none!important}.ci-lb thead th.hit{background:inherit!important}
@media(max-width:700px){.ci-lb th:first-child{width:24px!important;padding-left:2px!important}.ci-lb th.ret{width:31%!important}.ci-lb th.hit{width:19%!important}.ci-lb .ci-who{gap:7px}.ci-lb .ci-av{width:26px!important;height:26px!important}.ci-lb .ci-who a{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;overflow:hidden;font-size:13.5px}.ci-lb .ci-who small{white-space:nowrap!important;overflow:hidden;display:block}.ci-lb .ci-who>div{min-width:0;overflow:hidden}.ci-lb th{font-size:9.5px!important;letter-spacing:.03em!important}.ci-lb th .tip-i,.ci-lb th [class*=tip]{display:none}}
@media(max-width:700px){.ci-lb .ci-lg2{display:none}.ci-lb thead th:first-child{font-size:0!important}.ci-lb thead th:first-child::after{content:"#";font-size:10px}}
/* 22 Oct 2026: profile pictures sit inline before the handle in Highlights rows */
a.hl-vh{display:inline-flex;align-items:center;gap:0;max-width:100%}a.hl-vh .av-img.av-sm{vertical-align:middle;margin-right:7px}
a.hl-vh{white-space:nowrap;min-width:0}
/* 22 Oct 2026 17:05 (Chris: the two full-width lines don't fit the layout): header and footer divider lines span only the content width */
body.ci header{border-bottom:0!important}
body.ci header::after,body.ci div.ci-footer::before{content:"";position:absolute;height:1px;background:var(--ci-border);pointer-events:none;
 left:max(clamp(16px,4vw,40px),calc((100% - var(--ci-col))/2 + clamp(16px,4vw,40px)));right:max(clamp(16px,4vw,40px),calc((100% - var(--ci-col))/2 + clamp(16px,4vw,40px)))}
body.ci header::after{bottom:0}
body.ci div.ci-footer{border-top:0!important;position:relative}
body.ci div.ci-footer::before{top:0}
body.ci header{background:rgba(10,8,18,.92)!important}
/* 22 Oct 2026 17:08 (Chris: logo and header text sizes differ between entry page and app): one size set for both headers */
body.ci .sxn .sxn-r1 a.sxn-logo{font-size:19px!important;font-weight:700!important;gap:8px!important;padding-right:12px!important}
body.ci .sxn .sxn-r1 a.sxn-logo img{height:24px!important;width:auto}
body.ci header .ci-nav a.l{font-size:14px!important;font-weight:600!important}
body.ci header .hl-me,body.ci header .hl-me a,body.ci header .hl-me button,body.ci header .hl-me span,body.ci header .ci-nav .ci-btn.ghost,body.ci .sxn .sxn-acc,body.ci .sxn .sxn-acc a{font-size:12.5px!important}
body.ci header .hl-me a,body.ci header .hl-me button,body.ci header .ci-nav .ci-btn.ghost{font-weight:600!important}
@media(max-width:600px){body.ci .sxn .sxn-r1 a.sxn-logo{font-size:0!important;gap:0!important;padding-right:2px!important}}
/* 17:10 leaderboard footnote on one line */
body.ci .ci-lb .ft{white-space:nowrap;overflow:hidden}
@media(max-width:480px){body.ci .ci-lb .ft{white-space:normal}}
/* 17:14 leaderboard never squeezed: hero stacks below 1100px so the leaderboard gets the full width */
@media(max-width:1100px){body.ci .ci-hero{grid-template-columns:minmax(0,1fr)!important}body.ci .ci-hero .ci-lb{max-width:640px;width:100%}}

/* 22 Oct 2026 17:45 (Chris): entry header 'How we score' in the nav font (14px/600) and visible on mobile too */
body.ci .ci-nav a.l.hw{display:inline-block!important;font-family:inherit!important;font-size:14px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:normal!important;white-space:nowrap}
@media(max-width:600px){body.ci .ci-nav a.l.hw{padding:6px 6px!important}}
@media(max-width:360px){body.ci .ci-nav a.l.hw{font-size:13px!important}}
/* 22 Oct 2026 17:45 (Chris: the three step cards look squeezed): roomier cards, clear space badge / title / text, wider gaps */
body.ci .ci-how{gap:24px!important}
body.ci .ci-how .hw-c,body.ci.ci-entry .ci-how .hw-c{padding:0 0 26px!important}
body.ci .ci-how .hw-img,body.ci.ci-entry .ci-how .hw-img{height:clamp(170px,22vw,240px)!important;margin:0 0 10px!important}
body.ci .ci-how .hw-img em,body.ci.ci-entry .ci-how .hw-img em{left:26px!important;width:36px!important;height:36px!important;font-size:15px!important;bottom:-18px!important}
body.ci .ci-how .hw-c b,body.ci.ci-entry .ci-how .hw-c b{padding:24px 26px 0!important;margin:0 0 8px!important;font-size:17px!important;line-height:1.3!important}
body.ci .ci-how .hw-c span,body.ci.ci-entry .ci-how .hw-c span{padding:0 26px!important;font-size:14px!important;line-height:1.65!important}
@media(max-width:900px){body.ci .ci-how{gap:18px!important}body.ci .ci-how .hw-img,body.ci.ci-entry .ci-how .hw-img{height:200px!important}}
@media(max-width:600px){body.ci .ci-how .hw-img,body.ci.ci-entry .ci-how .hw-img{height:170px!important}body.ci .ci-how .hw-c b,body.ci.ci-entry .ci-how .hw-c b{padding:22px 22px 0!important}body.ci .ci-how .hw-c span,body.ci.ci-entry .ci-how .hw-c span{padding:0 22px!important}body.ci .ci-how .hw-img em,body.ci.ci-entry .ci-how .hw-img em{left:22px!important}body.ci .ci-how .hw-c,body.ci.ci-entry .ci-how .hw-c{padding-bottom:22px!important}}
/* How we score in the main tab row: same 14px/600 as the other tabs */
.sxn .sxn-t a.sxn-hw{white-space:nowrap}
@media(min-width:1301px){body.ci .sxn .sxn-r1 .sxn-t a{padding-left:8px!important;padding-right:8px!important}}
/* Home pill hidden (the logo already opens the start page) so every tab incl. How we score fits on one row */
body.ci .sxn .sxn-acc a.hm{display:none!important}
/* tabs scroll sideways below 1300 px: a soft fade on the right edge shows there are more tabs (How we score is the last one) */
@media(max-width:1300px){body.ci .sxn .sxn-r1 .sxn-t{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}
body.ci .sxn .sxn-r1 .sxn-t.sxn-end{-webkit-mask-image:none!important;mask-image:none!important}
body.ci .ci-how .hw-img{padding:0!important;border:0!important;background:transparent!important;border-radius:16px 16px 0 0!important}body.ci .ci-how .hw-img img,body.ci .ci-how .hw-img::after{border-radius:16px 16px 0 0!important}
/* 22 Oct 2026 18:20 navh (Chris: the navigation height still differs between the start page and the app pages). The app tab bar row
   was 43 px (desktop) / 41 px (mobile) while the start-page header is 56 px, and the logo sat 2 px further right. One header box everywhere:
   56 px row, logo 24 px + 19 px wordmark at the same x, tabs 14px/600 vertically centred, active underline on the bar's bottom line. */
body.ci header,body.ci.ci-entry header{height:56px!important;min-height:56px}
body.ci .ci-brand img,body.ci.ci-entry .ci-brand img{height:24px!important;width:auto}
body.ci .ci-brand b,body.ci.ci-entry .ci-brand b{font-size:19px!important;white-space:nowrap}
body.ci.ci-app .sxn .sxn-r1{height:56px!important;min-height:56px!important;box-sizing:border-box!important;padding:0!important}
body.ci.ci-app .sxn .sxn-r1 .sxn-t{align-self:stretch!important;align-items:stretch!important}
body.ci.ci-app .sxn .sxn-r1 .sxn-t a,body.ci.ci-app .sxn.stuck .sxn-r1 .sxn-t a{display:inline-flex!important;align-items:center!important;padding-top:0!important;padding-bottom:0!important;font-size:14px!important}
body.ci.ci-app .sxn .sxn-r1 a.sxn-logo{display:inline-flex!important;align-items:center!important;align-self:center!important;line-height:1.2!important;padding-top:1px!important}
@media(max-width:600px){
 /* app tab bar on phones keeps the 24 px mark only (the wordmark would leave room for a single tab next to All/Crypto/Stocks) */
 body.ci.ci-entry header .ci-nav{gap:4px!important}body.ci.ci-entry header .ci-nav .sep{display:none!important}
}
/* start page on phones: logo + How we score + Log in + Sign up did not fit in 358 px, so the wordmark and Log in wrapped onto two lines.
   The header Sign up button hides below 480 px on the start page; the hero right below has Create free account as its main button. */
@media(max-width:480px){body.ci.ci-entry header .ci-nav .ci-btn.ghost{display:none!important}body.ci.ci-entry header .ci-nav a.l{white-space:nowrap}}

/* 22 Oct 2026 19:30: entry leaderboard -> Leaderboard tab */
.ci-lb .ci-lb-all{display:block;text-align:right;font-size:12.5px;font-weight:700;color:#a259ff;text-decoration:none;padding:2px 2px 4px}.ci-lb .ci-lb-all:hover{text-decoration:underline}
/* 23 Oct 2026 02:10 (Chris): Leaderboard card: headers carry the labels, standard vs tag right-aligned under the return */
.ci-lb td.ret .hl-vs{display:inline-block;margin:4px 0 0;font-size:12px}
.ci-lb th .ci-i{font-weight:700;color:#c69bff;cursor:help;letter-spacing:0}
@media(max-width:700px){.ci-lb td.ret .hl-vs{font-size:11px;padding:1px 6px}.ci-lb th.ret{width:38%!important}.ci-lb th{white-space:normal}}
/* 23 Oct 2026 02:30: two-line return header so Hit rate fits in the narrow card (1440 start screen) and at 390 */
.ci-lb th.ret{white-space:normal!important;line-height:1.3!important;vertical-align:bottom}
.ci-lb th.hit{white-space:nowrap!important;vertical-align:bottom}
/* 23 Oct 2026 (Chris): more air between the hero and the 3 image cards (about 84px visible on desktop, about 56px on phones) */
body .ci-how{margin-top:clamp(36px,5vw,64px)!important}