/* ============================================================
   BRIERLY — design system
   Light "ratings desk" default · Dark "terminal" toggle (◐)
   Zero dependencies. CSS custom properties drive both themes.
   Palette: ink + aged brass — a ratings firm, not a casino.
   ============================================================ */

:root{
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max-w: 1280px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --speed: .18s;

  --kalshi: #149f6e;
  --poly:   #4f6fe6;
  --yes:    #169a72;
  --no:     #d44a5e;
  --warn:   #b07f17;
  --flat:   #8b96a8;
}

/* ---------- LIGHT (default): the ratings desk ---------- */
:root, html[data-theme="light"]{
  --bg:        #f8f6f1;
  --bg-grad:   radial-gradient(1100px 540px at 82% -12%, rgba(138,108,29,.055), transparent 60%),
               radial-gradient(800px 460px at -8% 0%, rgba(79,111,230,.04), transparent 55%);
  --panel:     #ffffff;
  --panel-2:   #faf8f3;
  --panel-3:   #f0ede4;
  --line:      #e2ddd0;
  --line-soft: #ebe7db;
  --text:      #16191f;
  --text-2:    #3a4252;
  --muted:     #6b7484;
  --faint:     #98a0af;
  --accent:    #8a6c1d;
  --accent-2:  #6e5612;
  --accent-dim: rgba(138,108,29,.10);
  --link:      #28509e;
  --shadow:    0 10px 30px rgba(40,35,20,.09);
  --row-high:  rgba(138,108,29,.07);
  --chip:      #f1eee5;
  --code-bg:   #14181f;
  --code-text: #dbe4f5;
  --hero-ink:  #1b1709;
  --cta-bg:    #16191f;
  --cta-text:  #f6f2e7;
  --kalshi: #0f8a60;
  --poly:   #4061d6;
  --yes:    #0f7e5d;
  --no:     #bf3a4e;
  --warn:   #96690a;
}

/* ---------- DARK: the terminal ---------- */
html[data-theme="dark"]{
  --bg:        #0b0e15;
  --bg-grad:   radial-gradient(1200px 600px at 75% -10%, rgba(178,148,72,.06), transparent 60%),
               radial-gradient(900px 500px at -10% 0%, rgba(91,124,250,.05), transparent 55%);
  --panel:     #101622;
  --panel-2:   #141c2b;
  --panel-3:   #1a2336;
  --line:      #1f2940;
  --line-soft: #182238;
  --text:      #e9eef7;
  --text-2:    #b9c2d4;
  --muted:     #8b96a8;
  --faint:     #5d6678;
  --accent:    #c2a14d;
  --accent-2:  #d3b768;
  --accent-dim: rgba(194,161,77,.13);
  --link:      #9db4e8;
  --shadow:    0 8px 30px rgba(0,0,0,.45);
  --row-high:  rgba(194,161,77,.09);
  --chip:      #1b2435;
  --code-bg:   #0d1320;
  --code-text: #dbe4f5;
  --hero-ink:  #f3eedd;
  --cta-bg:    #c2a14d;
  --cta-text:  #17130a;
  --kalshi: #1fbf83;
  --poly:   #5b7cfa;
  --yes:    #2dd4a7;
  --no:     #ef5d70;
  --warn:   #e7b549;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--font-ui); color:var(--text);
  background:var(--bg); background-image:var(--bg-grad);
  background-attachment:fixed;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0 0 .5em}
h1{font-size:42px} h2{font-size:28px} h3{font-size:20px} h4{font-size:16px}
p{margin:.4em 0 .9em}
code,pre{font-family:var(--font-mono)}
pre{background:var(--code-bg); color:var(--code-text); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; overflow:auto; font-size:12.5px; line-height:1.6}
hr{border:none;border-top:1px solid var(--line); margin:28px 0}
::selection{background:var(--accent-dim)}

.num, td.num, .mono{font-family:var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing:-.01em}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 22px}
.wrap-n{max-width:980px; margin:0 auto; padding:0 22px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:12.5px}
.up{color:var(--yes)} .down{color:var(--no)} .warn{color:var(--warn)}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.flex{display:flex;align-items:center;gap:10px} .grow{flex:1} .gap6{gap:6px} .gap16{gap:16px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt40{margin-top:40px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}

/* ---------- header / nav ---------- */
.topbar{
  position:sticky; top:0; z-index:90;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{max-width:var(--max-w); margin:0 auto; padding:0 18px; height:58px; display:flex; align-items:center; gap:14px}
.brand{display:flex;align-items:center;gap:10px; color:var(--text); font-family:var(--font-display); font-size:18.5px; font-weight:700; letter-spacing:.015em; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{flex:0 0 auto}
.nav{display:flex; align-items:center; gap:2px; margin-left:6px}
.nav a, .nav .navbtn{
  color:var(--text-2); padding:7px 10px; border-radius:8px; font-size:13.5px; font-weight:500;
  background:none;border:none;cursor:pointer;font-family:var(--font-ui); white-space:nowrap;
}
.nav a:hover,.nav .navbtn:hover{color:var(--text); background:var(--panel-2); text-decoration:none}
.nav a.active{color:var(--accent)}
.dropdown{position:relative}
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:236px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:6px; display:none; z-index:99;
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:7px; color:var(--text-2); font-size:13.5px}
.dropdown-menu a:hover{background:var(--panel-2); color:var(--text); text-decoration:none}
.dropdown-menu a .k{color:var(--faint); font-size:11px}
.dropdown-menu .sep{border-top:1px solid var(--line-soft); margin:5px 4px}
.topbar .spacer{flex:1}
.statusdot{width:8px;height:8px;border-radius:50%;background:var(--flat); box-shadow:0 0 0 3px color-mix(in srgb, var(--flat) 20%, transparent)}
.statusdot.ok{background:var(--yes); box-shadow:0 0 0 3px color-mix(in srgb, var(--yes) 18%, transparent)}
.statusdot.warn{background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent)}
.statusdot.bad{background:var(--no); box-shadow:0 0 0 3px color-mix(in srgb, var(--no) 18%, transparent)}
.iconbtn{
  background:var(--panel-2); color:var(--text-2); border:1px solid var(--line); cursor:pointer;
  width:32px;height:32px; border-radius:8px; display:inline-flex;align-items:center;justify-content:center; font-size:14px;
}
.iconbtn:hover{color:var(--text); border-color:var(--accent)}
.searchbox{position:relative}
.searchbox input{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; height:32px; width:215px; padding:0 28px 0 30px; font-size:13px; font-family:var(--font-ui);
}
.searchbox input:focus{outline:none; border-color:var(--accent); width:262px; transition:width var(--speed)}
.searchbox .si{position:absolute; left:9px; top:7px; color:var(--faint); font-size:13px}
.searchbox .sk{position:absolute; right:8px; top:6px; color:var(--faint); font-size:10.5px; border:1px solid var(--line); padding:1px 5px; border-radius:5px}
.cta{
  background:var(--cta-bg); color:var(--cta-text) !important; font-weight:600;
  padding:7px 14px; border-radius:8px; font-size:13.5px; border:none; cursor:pointer; white-space:nowrap;
}
.cta:hover{filter:brightness(1.12); text-decoration:none}
.hamb{display:none}

/* ---------- page chrome ---------- */
.page{min-height:calc(100vh - 58px); padding:26px 0 70px}
.crumbs{font-size:12px;color:var(--faint); margin-bottom:14px}
.crumbs a{color:var(--muted)}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.pagehead h1{margin:0; font-size:34px}
.pagehead .sub{color:var(--muted); max-width:760px; margin-top:6px}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--yes); text-transform:uppercase; letter-spacing:.08em}
.live-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--yes); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--yes) 50%, transparent)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent}}
.updated{font-size:11.5px;color:var(--faint)}

/* ---------- cards & panels ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px}
.panel.tight{padding:12px 14px}
.panel h3{display:flex; align-items:center; gap:8px; font-size:17px; margin-bottom:12px}
.panel h3 .live-badge{margin-left:auto}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.g23{grid-template-columns:2fr 1fr} .g32{grid-template-columns:1fr 2fr}
@media(max-width:980px){.g2,.g3,.g4,.g23,.g32{grid-template-columns:1fr}}

.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px}
.stat .l{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px}
.stat .v{font-family:var(--font-mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.stat .d{font-size:11.5px; color:var(--faint); margin-top:3px}

.chip{display:inline-flex;align-items:center;gap:5px;background:var(--chip); color:var(--text-2); border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:500; border:1px solid var(--line-soft)}
.chip.kalshi{color:var(--kalshi); border-color:color-mix(in srgb, var(--kalshi) 35%, transparent)}
.chip.poly{color:var(--poly); border-color:color-mix(in srgb, var(--poly) 35%, transparent)}
.chip.gold{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent)}
.chip.click{cursor:pointer}
.chip.click:hover{border-color:var(--accent)}
.vbadge{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 6px; border-radius:5px; text-transform:uppercase}
.vbadge.k{background:color-mix(in srgb, var(--kalshi) 14%, transparent); color:var(--kalshi)}
.vbadge.p{background:color-mix(in srgb, var(--poly) 14%, transparent); color:var(--poly)}
.vbadge.b{background:var(--accent-dim); color:var(--accent)}

/* ---------- tables ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:default;
}
.tbl th.sortable{cursor:pointer} .tbl th.sortable:hover{color:var(--text)}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background var(--speed)}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tbody tr.click{cursor:pointer}
.tbl .hi{background:var(--row-high)}
.tbl td.num,.tbl th.num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.cell-flash{animation:flash 1s ease-out}
@keyframes flash{0%{background:var(--accent-dim)} 100%{background:transparent}}
.pager{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px}
.pager button{background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);border-radius:7px;padding:5px 11px;cursor:pointer;font-size:12.5px}
.pager button:disabled{opacity:.4;cursor:default}
.pager button:not(:disabled):hover{border-color:var(--accent);color:var(--text)}

/* ---------- buttons / inputs / forms ---------- */
.btn{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:8px;
  padding:8px 14px; font-size:13.5px; font-weight:500; cursor:pointer; font-family:var(--font-ui);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{border-color:var(--accent); text-decoration:none}
.btn.primary{background:var(--cta-bg); color:var(--cta-text); border:none; font-weight:600}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:none}
.btn.danger{color:var(--no); border-color:color-mix(in srgb, var(--no) 40%, transparent)}
.btn.sm{padding:4px 10px; font-size:12px}
.btn.yes{background:color-mix(in srgb, var(--yes) 12%, transparent); color:var(--yes); border-color:color-mix(in srgb, var(--yes) 35%, transparent)}
.btn.nope{background:color-mix(in srgb, var(--no) 12%, transparent); color:var(--no); border-color:color-mix(in srgb, var(--no) 35%, transparent)}
.seg{display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; flex-wrap:wrap}
.seg button{background:none;border:none;color:var(--muted); padding:5px 12px; font-size:12.5px; border-radius:7px; cursor:pointer; font-weight:500; font-family:var(--font-ui); white-space:nowrap}
.seg button.on{background:var(--panel); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.14); border:1px solid var(--line)}
.seg button:hover:not(.on){color:var(--text)}
label.fl{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin:0 0 5px}
input[type=text],input[type=number],input[type=email],select,textarea{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:8px;
  padding:8px 11px; font-size:13.5px; font-family:var(--font-ui); width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
input[type=range]{width:100%; accent-color:var(--accent)}
.field{margin-bottom:14px}
.formrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}

/* ---------- hero (landing) ---------- */
.hero{padding:72px 0 48px; position:relative}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent); font-weight:700; margin-bottom:18px}
.hero h1{font-size:clamp(38px,5.4vw,64px); line-height:1.04; letter-spacing:-.02em; max-width:880px; color:var(--hero-ink)}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero .lede{font-size:18px; color:var(--text-2); max-width:680px; margin-top:18px}
.hero .ctas{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.ticker-rail{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--panel) 60%, transparent);
  overflow:hidden; white-space:nowrap; margin-top:54px;
}
.ticker-track{display:inline-block; padding:9px 0; animation:tick 60s linear infinite}
.ticker-rail:hover .ticker-track{animation-play-state:paused}
@keyframes tick{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
.tick-item{display:inline-flex; align-items:center; gap:7px; margin:0 22px; font-size:12.5px; color:var(--text-2)}
.tick-item .num{font-size:12.5px}
.sectionhead{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:46px 0 18px}
.sectionhead h2{margin:0}
.sectionhead .more{font-size:13px; white-space:nowrap}
.prodcard{display:flex; flex-direction:column; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; transition:transform var(--speed), border-color var(--speed), box-shadow var(--speed); color:var(--text)}
.prodcard:hover{transform:translateY(-2px); border-color:var(--accent); text-decoration:none; box-shadow:var(--shadow)}
.prodcard .t{font-family:var(--font-display); font-size:18px; font-weight:600; display:flex; align-items:center; gap:8px}
.prodcard .d{color:var(--muted); font-size:13.5px; flex:1}
.prodcard .m{font-family:var(--font-mono); font-size:12px; color:var(--accent)}

/* the wedge panels on the landing page */
.wedge{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:980px){.wedge{grid-template-columns:1fr}}
.wedge .step{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px}
.wedge .step .n{font-family:var(--font-mono); color:var(--accent); font-size:12px; letter-spacing:.1em; margin-bottom:10px}
.wedge .step h3{font-size:19px}
.metricstrip{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; flex-wrap:wrap; background:var(--panel)}
.metricstrip .m{flex:1; min-width:150px; padding:16px 18px; border-right:1px solid var(--line-soft)}
.metricstrip .m:last-child{border-right:none}
.metricstrip .v{font-family:var(--font-mono); font-size:21px; font-weight:600}
.metricstrip .l{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:2px}
.metricstrip .d{font-size:11px; color:var(--faint); margin-top:2px}

/* ---------- event cards (explore) ---------- */
.evcard{
  display:flex; flex-direction:column; gap:7px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px 16px; color:var(--text); transition:border-color var(--speed), transform var(--speed);
}
.evcard:hover{border-color:var(--accent); text-decoration:none; transform:translateY(-1px)}
.evcard .row1{display:flex; align-items:center; gap:8px; font-size:11px}
.evcard .t{font-weight:600; font-size:14px; line-height:1.3}
.evcard .outs{display:flex; flex-direction:column; gap:3px; margin-top:2px}
.evcard .outs .o{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-2)}
.evcard .outs .o .num{color:var(--text)}
.evcard .meta{display:flex; gap:14px; font-size:11.5px; color:var(--faint); margin-top:4px}
.probbar{height:4px; border-radius:3px; background:var(--panel-3); overflow:hidden}
.probbar>div{height:100%; background:var(--accent)}

/* ---------- orderbook ---------- */
.ob{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ob .side h4{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px; font-family:var(--font-ui)}
.ob-rows{display:flex; flex-direction:column; gap:2px}
.ob-row{position:relative; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12.5px; padding:3px 8px; border-radius:4px; overflow:hidden}
.ob-row .depth{position:absolute; top:0; bottom:0; opacity:.13; border-radius:4px}
.ob-row.bid .depth{right:0; background:var(--yes)}
.ob-row.ask .depth{left:0; background:var(--no)}
.ob-row .p{z-index:1} .ob-row .s{z-index:1; color:var(--muted)}
.ob-row.bid .p{color:var(--yes)} .ob-row.ask .p{color:var(--no)}
.ob-mid{display:flex; justify-content:space-between; font-size:11.5px; color:var(--faint); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:5px 8px; margin:6px 0}

/* ---------- score / rating visuals ---------- */
.scorering{position:relative; width:118px; height:118px}
.scorering svg{transform:rotate(-90deg)}
.scorering .val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.scorering .val .n{font-family:var(--font-mono); font-size:30px; font-weight:700}
.scorering .val .b{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.gradepill{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-weight:700; padding:3px 10px; border-radius:7px; font-size:13px}
.band-minimal{background:rgba(45,212,167,.16); color:#0f7e5d}
.band-low{background:rgba(141,212,45,.16); color:#5d7d14}
.band-moderate{background:rgba(231,181,73,.18); color:#8a6207}
.band-elevated{background:rgba(240,138,93,.18); color:#b35527}
.band-high{background:rgba(239,93,112,.16); color:#b32c40}
html[data-theme="dark"] .band-minimal{color:#2dd4a7}
html[data-theme="dark"] .band-low{color:#a8d44f}
html[data-theme="dark"] .band-moderate{color:#e7b549}
html[data-theme="dark"] .band-elevated{color:#f08a5d}
html[data-theme="dark"] .band-high{color:#ef5d70}
.subscore{margin-bottom:10px}
.subscore .l{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px}
.subscore .bar{height:6px; border-radius:4px; background:var(--panel-3); overflow:hidden}
.subscore .bar>div{height:100%; border-radius:4px}
mark.flagged{background:var(--accent-dim); color:var(--accent-2); padding:0 3px; border-radius:3px; cursor:help; border-bottom:1px dashed var(--accent)}
.rulesbox{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; font-size:13.5px; line-height:1.7; max-height:420px; overflow:auto; white-space:pre-wrap}

/* band histogram (grades distribution) */
.bandhist{display:flex; gap:10px; align-items:flex-end; padding:4px 2px}
.bh-col{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:34px}
.bh-bar{width:26px; border-radius:4px 4px 2px 2px}
.bh-n{font-family:var(--font-mono); font-size:11px; color:var(--text-2)}
.bh-l{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint)}

/* receipt line on grade pages */
.receipt{font-family:var(--font-mono); font-size:11px; color:var(--faint); word-break:break-all; background:var(--panel-2); border:1px dashed var(--line); border-radius:8px; padding:8px 10px}

/* ---------- chat ---------- */
.chatwrap{display:flex; flex-direction:column; height:calc(100vh - 220px); min-height:460px}
.chatlog{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:6px 2px 18px}
.msg{max-width:78%; padding:11px 15px; border-radius:14px; font-size:14px; line-height:1.55}
.msg.user{align-self:flex-end; background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.msg.bot{align-self:flex-start; background:var(--panel); border:1px solid var(--line)}
.msg.bot .tbl{font-size:12.5px; margin:8px 0}
.msg .src{font-size:11px; color:var(--faint); margin-top:8px; border-top:1px solid var(--line-soft); padding-top:6px}
.chatbar{display:flex; gap:10px; padding-top:14px; border-top:1px solid var(--line)}
.chatbar input{flex:1; height:42px; font-size:14px}
.suggestions{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}

/* ---------- misc components ---------- */
.notice{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--panel-2); border-radius:8px; padding:12px 15px; font-size:13px; color:var(--text-2); margin:14px 0}
.notice.red{border-left-color:var(--no)} .notice.green{border-left-color:var(--yes)}
.banner{background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); color:var(--text); padding:9px 16px; border-radius:9px; font-size:13px; display:flex; gap:10px; align-items:center; margin-bottom:16px}
.banner .x{margin-left:auto; cursor:pointer; color:var(--muted)}
.empty{padding:40px 20px; text-align:center; color:var(--muted)}
.empty .big{font-size:30px; margin-bottom:8px}
.skel{position:relative; overflow:hidden; background:var(--panel-2); border-radius:8px; min-height:14px}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--text) 6%, transparent),transparent); animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.toast-host{position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px}
.toast{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; box-shadow:var(--shadow); padding:11px 16px; font-size:13px; min-width:240px; max-width:380px; animation:slidein .25s ease-out}
.toast.green{border-left-color:var(--yes)} .toast.red{border-left-color:var(--no)}
@keyframes slidein{from{transform:translateX(30px); opacity:0} to{transform:none; opacity:1}}
.kbd{font-family:var(--font-mono); font-size:11px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--muted); background:var(--panel-2)}
details.acc{border:1px solid var(--line); border-radius:10px; padding:0 16px; margin-bottom:10px; background:var(--panel)}
details.acc summary{cursor:pointer; padding:13px 0; font-weight:600; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; align-items:center}
details.acc summary::after{content:"+"; color:var(--accent); font-size:18px; font-family:var(--font-mono)}
details.acc[open] summary::after{content:"–"}
details.acc .body{padding:0 0 14px; color:var(--text-2); font-size:13.5px}
.tooltip{position:relative}
.tooltip:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:var(--panel-3); color:var(--text); border:1px solid var(--line); padding:6px 10px; font-size:11.5px;
  border-radius:7px; z-index:50; box-shadow:var(--shadow); max-width:320px; white-space:normal; width:max-content;
}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
.tabs button{background:none; border:none; color:var(--muted); font-size:13.5px; font-weight:500; padding:9px 14px; cursor:pointer; border-bottom:2px solid transparent; font-family:var(--font-ui); white-space:nowrap}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}
.tabs button:hover:not(.on){color:var(--text)}
.checklist{list-style:none; padding:0; margin:0}
.checklist li{display:flex; gap:10px; padding:7px 0; font-size:13.5px; color:var(--text-2); border-bottom:1px solid var(--line-soft)}
.checklist li::before{content:"✓"; color:var(--accent); font-weight:700}
.timeline{border-left:2px solid var(--line); padding-left:20px; margin-left:8px}
.timeline .ti{position:relative; padding-bottom:20px}
.timeline .ti::before{content:""; position:absolute; left:-25.5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.timeline .ti .d{font-family:var(--font-mono); font-size:11px; color:var(--muted)}

/* engagement scopes (advisory) — no prices in early access */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; align-items:stretch}
.tier{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:10px; position:relative}
.tier.popular{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow)}
.tier .pop{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:3px 12px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase}
html[data-theme="dark"] .tier .pop{color:#17130a}
.tier .nm{font-family:var(--font-display); font-size:19px; font-weight:600}
.tier .pr{font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--muted)}
.tier ul{list-style:none; margin:6px 0 14px; padding:0; flex:1}
.tier li{font-size:13px; color:var(--text-2); padding:4.5px 0; display:flex; gap:8px}
.tier li::before{content:"—"; color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:color-mix(in srgb, var(--panel) 55%, transparent); margin-top:60px}
.foot-inner{max-width:var(--max-w); margin:0 auto; padding:40px 22px 28px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:26px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h5{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 10px}
.foot-grid a{display:block; color:var(--text-2); font-size:13px; padding:3px 0}
.foot-grid a:hover{color:var(--text)}
.foot-bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line-soft); margin-top:30px; padding-top:18px; font-size:12px; color:var(--faint)}
.disclaimer{font-size:11.5px; color:var(--faint); line-height:1.6; max-width:880px; margin-top:14px}

/* ---------- print (EventBasis outputs) ---------- */
@media print{
  .topbar, footer, .no-print, .chatbar, .toast-host{display:none !important}
  body{background:#fff; color:#000; font-size:12px}
  .panel{border:1px solid #999; box-shadow:none; break-inside:avoid}
  .page{padding:0}
  a{color:#000}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .nav{display:none}
  .hamb{display:inline-flex}
  .searchbox input{width:130px}
  .pagehead h1{font-size:27px}
  .hero h1{font-size:34px}
  .msg{max-width:92%}
  .ob{grid-template-columns:1fr}
  .panel{overflow-x:auto}
}
.mobile-menu{position:fixed; inset:58px 0 0 0; background:var(--bg); z-index:80; padding:18px 22px; overflow-y:auto; display:none}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:11px 4px; font-size:16px; color:var(--text); border-bottom:1px solid var(--line-soft)}
.mobile-menu .grp{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:18px 0 4px}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
::-webkit-scrollbar-track{background:transparent}

/* reduced motion: pause the ticker rail, kill pulses/shimmer/slide-ins */
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none; transform:none}
  .live-badge .pulse{animation:none}
  .skel{animation:none}
  .toast{animation:none}
  .cell-flash{animation:none}
  *{scroll-behavior:auto !important}
}