/* ============================================================
   REPLACEMENT LEVEL — app.css  (v0.2)
   Look: the baseball card, modernised. Soft chunky surfaces,
   team colour as the identity system, night-game palette.
   Colour carries two jobs only: team identity, and data.
   ============================================================ */

:root{
  /* light */
  --ground:#F2F5FC;
  --surface:#FFFFFF;
  --surface-2:#E9EEFA;
  --surface-3:#DCE3F4;
  --ink:#151A2C;
  --ink-2:#3C4561;
  --ink-muted:#69728E;
  --line:#E0E6F5;
  --line-strong:#C6CFE6;
  --shadow:0 1px 2px rgba(21,26,44,.05), 0 8px 22px -12px rgba(21,26,44,.22);
  --shadow-lg:0 2px 4px rgba(21,26,44,.06), 0 20px 44px -20px rgba(21,26,44,.32);

  --gold:#D98A00;
  --coral:#E24A38;
  --sky:#1F8FD6;
  --mint:#1E9E6A;
  --violet:#7C5CE0;

  --gold-bg:#FDF2DA;
  --coral-bg:#FCE6E2;
  --sky-bg:#DFEFFB;
  --mint-bg:#DEF2E9;
  --violet-bg:#EBE5FC;

  --r-xs:7px;
  --r-sm:11px;
  --r-md:17px;
  --r-lg:23px;
  --appw:860px;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131829;
    --surface:#1C2337;
    --surface-2:#252E47;
    --surface-3:#313B58;
    --ink:#EFF2FB;
    --ink-2:#B3BCD4;
    --ink-muted:#828CA9;
    --line:#2B3450;
    --line-strong:#3D486A;
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 26px -14px rgba(0,0,0,.6);
    --shadow-lg:0 2px 6px rgba(0,0,0,.34), 0 24px 50px -22px rgba(0,0,0,.72);

    --gold:#FFC043;
    --coral:#FF6B5A;
    --sky:#49B6F5;
    --mint:#4FD19A;
    --violet:#A98BFF;

    --gold-bg:#3A2E12;
    --coral-bg:#3B201C;
    --sky-bg:#132F44;
    --mint-bg:#123322;
    --violet-bg:#271E42;

    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#131829;
  --surface:#1C2337;
  --surface-2:#252E47;
  --surface-3:#313B58;
  --ink:#EFF2FB;
  --ink-2:#B3BCD4;
  --ink-muted:#828CA9;
  --line:#2B3450;
  --line-strong:#3D486A;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.34), 0 24px 50px -22px rgba(0,0,0,.72);

  --gold:#FFC043;
  --coral:#FF6B5A;
  --sky:#49B6F5;
  --mint:#4FD19A;
  --violet:#A98BFF;

  --gold-bg:#3A2E12;
  --coral-bg:#3B201C;
  --sky-bg:#132F44;
  --mint-bg:#123322;
  --violet-bg:#271E42;

  color-scheme:dark;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
@media (min-width:820px){ body{padding-bottom:0} }

/* ---------- primitives ---------- */
.mono{font-family:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.disp{font-family:"Bricolage Grotesque","Archivo",Helvetica,sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.02;margin:0;text-wrap:balance}
.label{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-muted);
}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
.app{max-width:var(--appw);margin:0 auto;padding-inline:15px}

.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  padding-top:env(safe-area-inset-top);
}
.topbar-in{
  max-width:var(--appw);margin:0 auto;padding:0 15px;
  height:56px;display:flex;align-items:center;gap:10px;
}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:inherit}
.brand-mark{
  width:26px;height:26px;flex:none;border-radius:9px;
  background:var(--gold);color:#141A2B;
  display:grid;place-items:center;
  font-family:"Bricolage Grotesque",sans-serif;font-size:11px;font-weight:800;letter-spacing:-0.03em;
}
.brand-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px;letter-spacing:-0.03em;white-space:nowrap}
.brand-name .lo{color:var(--ink-muted);font-weight:500}

.topnav{display:none;gap:3px;margin-left:auto}
@media (min-width:820px){ .topnav{display:flex} }
.topnav button{
  background:none;border:0;cursor:pointer;padding:7px 13px;border-radius:999px;
  font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-muted);transition:background .15s,color .15s;
}
.topnav button:hover{color:var(--ink);background:var(--surface-2)}
.topnav button[aria-current="page"]{color:var(--ink);background:var(--surface-2);font-weight:500}

.icon-btn{
  flex:none;background:var(--surface-2);border:0;color:var(--ink-muted);
  border-radius:999px;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;padding:0;
  transition:color .15s;
}
.icon-btn:hover{color:var(--ink)}
.topbar .icon-btn{margin-left:0}
.topbar .feedstate{margin-left:auto}
@media (min-width:820px){ .topbar .feedstate{margin-left:8px} }

.feedstate{
  font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--ink-muted);
}
.feedstate.live{color:var(--mint);background:var(--mint-bg)}
.feedstate.cached{color:var(--gold);background:var(--gold-bg)}

/* ---------- views ---------- */
.view{display:none;flex-direction:column;gap:22px;padding-block:14px 30px}
.view.on{display:flex}

.viewhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.viewhead h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:30px;letter-spacing:-0.035em;margin:0;line-height:1.05}

.block{display:flex;flex-direction:column;gap:11px}
.blockhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

.card{
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);
  padding:16px;display:flex;flex-direction:column;gap:12px;
}

/* ---------- team chip ---------- */
.tchip{
  position:relative;width:26px;height:26px;flex:none;border-radius:9px;
  display:grid;place-items:center;overflow:hidden;
  background:color-mix(in srgb,var(--tc) 20%,transparent);
}
.tchip b{
  font-family:"DM Mono",monospace;font-size:8.5px;font-weight:500;letter-spacing:0.02em;
  color:var(--tc);line-height:1;
}
.tchip img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;display:none}
.tchip.has-logo{background:color-mix(in srgb,var(--tc) 13%,transparent)}
.tchip.has-logo img{display:block}
.tchip.has-logo b{display:none}
.tchip.lg{width:40px;height:40px;border-radius:13px}
.tchip.lg b{font-size:11px}

/* ---------- hero: the least likely thing ---------- */
.hero{
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--gold) 20%,var(--surface)), var(--surface) 62%);
  box-shadow:var(--shadow-lg);
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:9px}
.hero-tag{
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-bg);padding:5px 11px;border-radius:999px;font-weight:500;
}
.hero-num{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.hero-num b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:60px;line-height:.85;
  letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--gold);
}
.hero-num span{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:0.15em;color:var(--ink-muted);text-transform:uppercase}
.hero p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.hero p b{color:var(--ink);font-weight:700}
.hero .foot{font-family:"DM Mono",monospace;font-size:10.5px;color:var(--ink-muted);line-height:1.5}

/* ---------- the feed ---------- */
.feed{display:flex;flex-direction:column;gap:12px}
.story{
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);
  padding:17px 17px 18px;display:flex;flex-direction:column;gap:10px;
  border-left:4px solid var(--tc,var(--ink-muted));
}
.story-kicker{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.story-kicker .kk{
  font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tc,var(--ink-muted));font-weight:500;
}
.story-kicker .kd{font-family:"DM Mono",monospace;font-size:9.5px;color:var(--ink-muted);letter-spacing:0.06em}
.story h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-0.03em;line-height:1.15;margin:0;text-wrap:balance;
}
.story-body{display:flex;gap:15px;align-items:flex-start}
.story-fig{display:flex;flex-direction:column;gap:3px;flex:none;min-width:74px}
.story-fig b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:.9;
  letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--tc,var(--ink));
}
.story-fig span{font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-muted);line-height:1.35}
.story p{font-size:14px;line-height:1.55;color:var(--ink-2)}
.story .why{
  font-family:"DM Mono",monospace;font-size:10.5px;line-height:1.55;color:var(--ink-muted);
  padding-top:10px;border-top:1px solid var(--line);
}
.story .why b{color:var(--tc,var(--ink-2));font-weight:500}
.story-chips{display:flex;align-items:center;gap:7px;margin-left:auto}

/* ---------- stat callout tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (min-width:620px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{
  border-radius:var(--r-sm);padding:14px;background:var(--surface);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.tile .tv{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:26px;line-height:1;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.tile .tl{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1.35}
.tile .tn{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.tile.gold .tv{color:var(--gold)} .tile.mint .tv{color:var(--mint)}
.tile.coral .tv{color:var(--coral)} .tile.sky .tv{color:var(--sky)}
.tile.violet .tv{color:var(--violet)}

/* ---------- odds bars ---------- */
.odds{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.odds h3, .panel h3{
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-muted);margin:0;padding:14px 16px 10px;font-weight:500;
}
.orow{
  display:grid;grid-template-columns:26px 1fr 52px;gap:11px;align-items:center;
  padding:9px 16px;
}
.orow + .orow{border-top:1px solid var(--line)}
.omid{min-width:0;display:flex;flex-direction:column;gap:5px}
.oname{display:flex;align-items:baseline;gap:7px;min-width:0}
.oname .nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oname .rec{font-family:"DM Mono",monospace;font-size:10.5px;color:var(--ink-muted);flex:none}
.obar{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.obar i{display:block;height:100%;border-radius:999px;background:var(--tc,var(--mint))}
.opct{font-family:"DM Mono",monospace;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.opct.in{color:var(--mint)} .opct.bubble{color:var(--gold)} .opct.out{color:var(--ink-muted)}
.oclinch{
  font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--mint-bg);color:var(--mint);flex:none;
}

/* ---------- luck board ---------- */
.luck{display:grid;grid-template-columns:1fr;gap:11px}
@media (min-width:620px){ .luck{grid-template-columns:1fr 1fr} }
.panel{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.lrow2{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:center;padding:9px 16px}
.lrow2 + .lrow2{border-top:1px solid var(--line)}
.lrow2 .nm{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow2 .sub{font-family:"DM Mono",monospace;font-size:10px;color:var(--ink-muted);display:block}
.lrow2 .delta{font-family:"DM Mono",monospace;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.delta.up{color:var(--mint)} .delta.down{color:var(--coral)}

/* ---------- scores (secondary) ---------- */
.games{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.game{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 15px}
.game + .game{border-top:1px solid var(--line)}
.gteams{display:flex;flex-direction:column;gap:5px;min-width:0}
.gside{display:flex;align-items:center;gap:9px;font-size:13.5px}
.gside .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.gside .sc{font-family:"DM Mono",monospace;font-size:14px;font-variant-numeric:tabular-nums;flex:none}
.gside.w{font-weight:700} .gside.l{color:var(--ink-muted)}
.gnote{font-family:"DM Mono",monospace;font-size:9.5px;color:var(--ink-muted);text-align:right;line-height:1.35;max-width:88px}

.datestrip{display:flex;gap:7px;flex-wrap:wrap}
.datestrip button{
  background:var(--surface-2);border:0;cursor:pointer;padding:7px 14px;border-radius:999px;
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-muted);transition:background .15s,color .15s;
}
.datestrip button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}

/* ---------- standings ---------- */
.divgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:620px){ .divgrid{grid-template-columns:1fr 1fr} }
.trow{display:grid;grid-template-columns:26px 1fr auto auto;gap:11px;align-items:center;padding:8px 16px;font-size:13.5px}
.trow + .trow{border-top:1px solid var(--line)}
.trow .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .tr{font-family:"DM Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:12.5px}
.trow .tg{font-family:"DM Mono",monospace;font-size:11.5px;color:var(--ink-muted);min-width:36px;text-align:right}
.trow.lead .tn{font-weight:700}

/* ---------- search ---------- */
.search{position:relative}
.search input{
  width:100%;padding:13px 15px 13px 40px;border-radius:999px;
  border:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);
  font-family:"DM Sans",sans-serif;font-size:16px; /* 16px stops iOS zoom-on-focus */
}
.search input::placeholder{color:var(--ink-muted)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none}
.results{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;margin-top:9px}
.results:empty{display:none;box-shadow:none}
.results button{
  display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:center;
  background:none;border:0;cursor:pointer;padding:11px 15px;text-align:left;width:100%;
}
.results button + button{border-top:1px solid var(--line)}
.results button:hover{background:var(--surface-2)}
.results .rn{font-size:14px;font-weight:500}
.results .rm{font-family:"DM Mono",monospace;font-size:10px;color:var(--ink-muted);letter-spacing:0.05em}

.suggest{display:flex;flex-wrap:wrap;gap:7px}
.suggest button{
  display:flex;align-items:center;gap:7px;
  background:var(--surface);border:0;cursor:pointer;padding:6px 13px 6px 7px;border-radius:999px;
  font-family:"DM Sans",sans-serif;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow);
}
.suggest button:hover{color:var(--ink)}
.suggest .tchip{width:20px;height:20px;border-radius:7px}
.suggest .tchip b{font-size:7px}

/* ---------- player card ---------- */
#playercard{scroll-margin-top:72px;border-top:4px solid var(--tc,var(--gold))}
.phead{display:flex;align-items:center;gap:13px}
.pname{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.035em;line-height:1.08;margin:0}
.pmeta{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-muted);margin-top:3px}

.headline{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.headline .hv{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:50px;line-height:.88;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--tc,var(--ink))}
.headline .hl{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-top:7px;line-height:1.5}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media (min-width:480px){ .statgrid{grid-template-columns:repeat(4,1fr)} }
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-family:"DM Mono",monospace;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-muted)}

/* trust meter */
.trow2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 0}
.trow2 + .trow2{border-top:1px solid var(--line)}
.segs{display:flex;gap:2.5px;flex:none}
.segs i{width:6px;height:13px;border-radius:3px;background:var(--surface-3);display:block}
.segs i.on{background:var(--mint)}
.segs i.warn{background:var(--gold)}
.segs i.no{background:var(--coral)}
.tinfo{min-width:0}
.tinfo .tk{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tinfo b{font-family:"DM Mono",monospace;font-size:13px;font-weight:500}
.tinfo .tv{font-family:"DM Mono",monospace;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tinfo .tx{font-family:"DM Mono",monospace;font-size:10px;color:var(--ink-muted);line-height:1.4;display:block;margin-top:3px}
.verdict{
  font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;font-weight:500;
}
.verdict.yes{color:var(--mint);background:var(--mint-bg)}
.verdict.mid{color:var(--gold);background:var(--gold-bg)}
.verdict.no{color:var(--coral);background:var(--coral-bg)}

/* ---------- boards ---------- */
.boards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:620px){ .boards{grid-template-columns:1fr 1fr} }
.board{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.board h3{
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--ink-muted);margin:0;padding:14px 16px 6px;font-weight:500;
}
.board .sub{font-size:12px;color:var(--ink-muted);padding:0 16px 10px;line-height:1.45;display:block}
.board.odd h3{color:var(--violet)}
.lrow{
  display:grid;grid-template-columns:18px 26px 1fr auto;gap:10px;align-items:center;
  padding:9px 16px;background:none;border:0;width:100%;text-align:left;cursor:pointer;
}
.lrow + .lrow{border-top:1px solid var(--line)}
.lrow:hover{background:var(--surface-2)}
.lrow .rk{font-family:"DM Mono",monospace;font-size:10.5px;color:var(--ink-muted)}
.lrow .nm{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .vl{font-family:"DM Mono",monospace;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- newsletter ---------- */
.news{
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--gold) 18%,var(--surface)), var(--surface) 64%);
  box-shadow:var(--shadow-lg);
}
.news h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:25px;letter-spacing:-0.035em;margin:0;line-height:1.05}
.news p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.subrow{display:flex;gap:9px;flex-wrap:wrap}
.subrow input{
  flex:1 1 190px;min-width:0;padding:12px 16px;border-radius:999px;border:0;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow);
  font-family:"DM Sans",sans-serif;font-size:16px;
}
.subrow input::placeholder{color:var(--ink-muted)}
.btn{
  border:0;cursor:pointer;padding:12px 22px;border-radius:999px;
  background:var(--ink);color:var(--ground);
  font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:0.09em;text-transform:uppercase;
  white-space:nowrap;
}
.btn:hover{opacity:.88}
.btn.ghost{background:var(--surface-2);color:var(--ink-2);box-shadow:var(--shadow)}
.subnote{font-family:"DM Mono",monospace;font-size:11px;color:var(--ink-muted);line-height:1.5;min-height:1em}
.subnote.good{color:var(--mint)}
.subnote.bad{color:var(--coral)}

.edition{
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;
}
.edition-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.edition pre{
  margin:0;padding:0 16px 18px;font-family:"DM Mono",monospace;font-size:11.5px;line-height:1.7;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-word;max-height:420px;overflow-y:auto;
}

/* ---------- articles ---------- */
.arts{display:flex;flex-direction:column;gap:12px}
.art{
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);
  overflow:hidden;border-left:4px solid var(--tc,var(--ink-muted));
}
.art-head{
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
  background:none;border:0;cursor:pointer;padding:17px;text-align:left;width:100%;
}
.art-head:hover{background:var(--surface-2)}
.art-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.art-meta .kk{
  font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--tc,var(--ink-muted));font-weight:500;
}
.art-meta .kd{font-family:"DM Mono",monospace;font-size:9.5px;color:var(--ink-muted);letter-spacing:0.05em;margin-left:auto}
.art-meta .tchip{width:21px;height:21px;border-radius:7px}
.art-meta .tchip b{font-size:7px}
.art h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-0.03em;line-height:1.16;margin:0;text-wrap:balance;
}
.art .dek{font-size:14px;line-height:1.5;color:var(--ink-muted)}
.art-body{display:none;flex-direction:column;gap:14px;padding:2px 17px 18px}
.art.open .art-body{display:flex}
.art-body p{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:62ch}
.art-body p:first-child{font-size:16.5px;color:var(--ink)}
.art-close{
  align-self:flex-start;background:var(--surface-2);border:0;cursor:pointer;
  padding:8px 18px;border-radius:999px;color:var(--ink-muted);
  font-family:"DM Mono",monospace;font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;
}
.art-close:hover{color:var(--ink)}

/* ---------- stale banner ---------- */
.stale{
  font-family:"DM Mono",monospace;font-size:11px;line-height:1.55;
  color:var(--gold);background:var(--gold-bg);padding:11px 14px;border-radius:var(--r-sm);
}
.stale[hidden]{display:none}

/* ---------- glossary ---------- */
.gloss{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.gitem + .gitem{border-top:1px solid var(--line)}
.gitem > button{
  display:grid;grid-template-columns:1fr auto;gap:11px;align-items:center;
  background:none;border:0;cursor:pointer;padding:14px 16px;text-align:left;width:100%;
}
.gitem > button:hover{background:var(--surface-2)}
.gitem .gt{font-family:"DM Mono",monospace;font-size:13.5px;font-weight:500}
.gitem .gs{font-size:12.5px;color:var(--ink-muted);display:block;margin-top:2px;line-height:1.45}
.gbody{padding:0 16px 16px;display:none;flex-direction:column;gap:10px}
.gitem.open .gbody{display:flex}
.gbody p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.gbody .gmeta{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-family:"DM Mono",monospace;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-muted);
}
.tag.pred{background:var(--mint-bg);color:var(--mint)}
.tag.desc{background:var(--sky-bg);color:var(--sky)}
.chev{color:var(--ink-muted);flex:none;transition:transform .18s}
.gitem.open .chev{transform:rotate(90deg)}

/* ---------- notes ---------- */
.note{
  font-family:"DM Mono",monospace;font-size:11px;color:var(--ink-muted);line-height:1.6;
  background:var(--surface-2);padding:13px 15px;border-radius:var(--r-sm);
}
.note b{color:var(--ink-2);font-weight:500}
.skel{padding:18px 16px;font-family:"DM Mono",monospace;font-size:11.5px;color:var(--ink-muted)}

/* ---------- bottom tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:820px){ .tabbar{display:none} }
.tabbar button{
  background:none;border:0;cursor:pointer;padding:9px 2px 11px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:"DM Mono",monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-muted);position:relative;
}
.tabbar button[aria-current="page"]{color:var(--ink)}
.tabbar button[aria-current="page"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:999px;background:var(--gold);
}
.tabbar svg{width:19px;height:19px;display:block}

/* ---------- footer ---------- */
.foot{
  margin-top:10px;padding-block:24px 32px;
  font-family:"DM Mono",monospace;font-size:10.5px;color:var(--ink-muted);line-height:1.7;
  display:flex;flex-direction:column;gap:9px;
}