/* ============================================================
   MAINE STREET INVESTING — design system (R1 shell)
   Ported from design-preview/maine-street-redesign.html.
   Loaded AFTER style.css: the compat layer at the bottom re-skins
   every legacy class in tokens so old templates keep their wiring
   and render correctly in BOTH themes. Fixed vs the prototype:
   the info, k-ramp, series and lock variables are now present in
   the [data-theme=dark] block too (the prototype forgot them).
   NOTE: never write a star-slash sequence inside this comment —
   it terminates the comment early and the parser then swallows
   the next rule whole (this once ate the entire light palette).
   ============================================================ */
:root{
  --bg:#EDEEEA; --surface:#FBFBF9; --surface-2:#F4F5F1; --surface-3:#E7E9E4;
  --ink:#15171A; --ink-2:#4C5155; --ink-3:#70757B;
  --rule:#DBDDD6; --rule-2:#C6C9C0;
  --brand:#9A5F0E; --brand-hi:#7C4C09; --brand-soft:#F4E9D6; --brand-line:#E0CBA6;
  --up:#126E4A; --down:#B03A2E; --up-soft:#E3EFE9; --down-soft:#F8E6E3;
  --neutral-series:#5C6470;
  --shadow:0 1px 2px rgba(20,22,18,.05), 0 8px 24px -14px rgba(20,22,18,.22);
  --shadow-lg:0 2px 4px rgba(20,22,18,.06), 0 24px 60px -28px rgba(20,22,18,.35);
  --lock:#8A6A2C;
  --s1:#B06A0F; --s2:#1F63C4; --s3:#9B2F6E; --s4:#4E7A2E; --s5:#0E7C7B; --s6:#7A4B9E; --sb:#5C6470;
  --btn-bg:var(--brand); --btn-fg:#FFFCF6;
  --info:#1F63C4;
  --k1:#7C4C09; --k2:#9A5F0E; --k3:#B9803A; --k4:#D2A667; --k5:#E6CCA1;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0B0D; --surface:#111316; --surface-2:#16191D; --surface-3:#1F2329;
    --ink:#E9EAEC; --ink-2:#A4A9B0; --ink-3:#8A8F97;
    --rule:#20242A; --rule-2:#2C313A;
    --brand:#E8BC63; --brand-hi:#F2CE81; --brand-soft:#1C1A14; --brand-line:#3C3524;
    --up:#45C08A; --down:#F07C71; --up-soft:#0F241C; --down-soft:#241513;
    --neutral-series:#8B939E;
    --btn-bg:#ECEDEA; --btn-fg:#0A0B0D;
    --info:#5A8FD2;
    --k1:#F0D093; --k2:#DDB264; --k3:#C4933F; --k4:#A2762C; --k5:#7D591D;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -16px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.9);
    --lock:#E8BC63;
    --s1:#BC8A38; --s2:#5A8FD2; --s3:#C9699B; --s4:#6F9A49; --s5:#53B8B0; --s6:#B08AD0; --sb:#8B939E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0B0D; --surface:#111316; --surface-2:#16191D; --surface-3:#1F2329;
  --ink:#E9EAEC; --ink-2:#A4A9B0; --ink-3:#8A8F97;
  --rule:#20242A; --rule-2:#2C313A;
  --brand:#E8BC63; --brand-hi:#F2CE81; --brand-soft:#1C1A14; --brand-line:#3C3524;
  --up:#45C08A; --down:#F07C71; --up-soft:#0F241C; --down-soft:#241513;
  --neutral-series:#8B939E;
  --btn-bg:#ECEDEA; --btn-fg:#0A0B0D;
  --info:#5A8FD2;
  --k1:#F0D093; --k2:#DDB264; --k3:#C4933F; --k4:#A2762C; --k5:#7D591D;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -16px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.9);
  --lock:#E8BC63;
  --s1:#BC8A38; --s2:#5A8FD2; --s3:#C9699B; --s4:#6F9A49; --s5:#53B8B0; --s6:#B08AD0; --sb:#8B939E;
  color-scheme:dark;
}

/* Legacy variables from style.css, re-pointed at tokens so every rule still
   using them theme-switches. Aliases resolve at use time, so one definition
   covers light, dark, and the toggle. */
:root{
  --card:var(--surface); --panel:var(--surface-2); --panel2:var(--surface-3);
  --line:var(--rule); --muted:var(--ink-3); --link:var(--brand-hi);
  --accent:var(--brand); --good:var(--up); --bad:var(--down); --fill:var(--brand);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:500; letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:2px}
.serif{font-family:"Newsreader",Georgia,serif; font-weight:400; letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-ligatures:none}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.up{color:var(--up)} .down{color:var(--down)}

/* ---------- brand mark ---------- */
.mark{display:flex; align-items:center; gap:10px; text-decoration:none}
.mark-glyph{width:26px; height:26px; flex:none; display:block}
.mark-word{display:flex; flex-direction:column; line-height:1}
.mark-word b{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:17px; letter-spacing:-.02em}
.mark-word span{font-size:8.5px; font-weight:600; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase; margin-top:3px}

/* ---------- app header ---------- */
.site-wide{max-width:1400px; margin:0 auto; padding-inline:28px}
@media(max-width:640px){.site-wide{padding-inline:16px}}
.sitebar{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule)}
.sitebar-in{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px}
.sitenav{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-2)}
.sitenav a{text-decoration:none}
.sitenav a:hover{color:var(--ink)}
.sitenav.appnav{gap:30px}
.appnav>.navitem>a{position:relative; padding:21px 0; font-weight:500; display:flex; align-items:center; gap:5px}
.appnav a.on{color:var(--ink); font-weight:600}
.appnav a.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand)}
.sitebar-cta{display:flex; align-items:center; gap:12px}
@media(max-width:960px){.sitenav.appnav{display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px;
  border-radius:6px; font-size:14px; font-weight:600; border:1px solid transparent; white-space:nowrap;
  text-decoration:none; cursor:pointer; background:none; font-family:inherit;
  transition:background .15s, border-color .15s, color .15s}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--rule-2); color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn-quiet{color:var(--ink-2); padding:0 4px; border:0}
.btn-quiet:hover{color:var(--ink)}
.btn-sm{height:32px; padding:0 13px; font-size:13px}

/* mega menus (hover on desktop, click everywhere, Escape closes) */
.navitem{position:relative; display:flex; align-items:center}
.navitem .cx{opacity:.55; transition:transform .15s}
.navitem:hover .cx, .navitem:focus-within .cx, .navitem.open .cx{transform:rotate(180deg); opacity:1}
.mega{position:absolute; top:100%; left:50%; width:min(640px,92vw); z-index:90;
  transform:translateX(-50%) translateY(8px); opacity:0; visibility:hidden;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:16px; transition:opacity .14s ease, transform .14s ease, visibility .14s}
.mega.wide{width:min(880px,94vw)}
.mega::before{content:""; position:absolute; top:-16px; left:0; right:0; height:16px}
.navitem:hover .mega, .navitem:focus-within .mega, .navitem.open .mega{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.mega{transition:none}}
.mega-head{display:flex; align-items:baseline; gap:12px; padding:2px 8px 12px; border-bottom:1px solid var(--rule); margin-bottom:10px; flex-wrap:wrap}
.mega-head b{font-size:13.5px; font-weight:600}
.mega-head span{font-size:12px; color:var(--ink-3)}
.megagrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.megacard{display:flex; flex-direction:column; gap:6px; padding:12px; border-radius:9px; border:1px solid transparent; text-decoration:none}
.megacard:hover{background:var(--surface-2); border-color:var(--rule)}
.mc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.mc-name{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px}
.mc-ret{font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums}
.mc-desc{font-size:12px; color:var(--ink-3); line-height:1.5}
.mc-meta{display:flex; gap:5px 12px; flex-wrap:wrap; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.mc-meta b{color:var(--ink-2); font-weight:600}
.megalist{display:grid; gap:6px}
.megalist.two{grid-template-columns:1fr 1fr}
.megalist a{display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:9px; border:1px solid transparent; text-decoration:none}
.megalist a:hover{background:var(--surface-2); border-color:var(--rule)}
.megalist b{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px}
.megalist span{font-size:12px; color:var(--ink-3); line-height:1.5}
.megalist em{font-style:normal; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
@media(max-width:900px){.megagrid{grid-template-columns:1fr} .megalist.two{grid-template-columns:1fr}}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 8px; border-radius:4px; white-space:nowrap}
.badge-pro{background:var(--brand-soft); color:var(--brand-hi); border:1px solid var(--brand-line)}
.badge-free{background:var(--surface-3); color:var(--ink-2)}

/* theme switch */
.tsw{display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--rule-2); border-radius:999px}
.tsw button{width:28px; height:26px; border-radius:999px; display:grid; place-items:center; color:var(--ink-3);
  background:none; border:0; cursor:pointer}
.tsw button:hover{color:var(--ink)}
.tsw button.on{background:var(--surface-3); color:var(--ink)}

/* search */
.search{display:flex; align-items:center; gap:8px; height:32px; padding:0 11px; border:1px solid var(--rule-2);
  border-radius:6px; background:var(--surface); color:var(--ink-3); font-size:13px; min-width:200px;
  cursor:pointer; font-family:inherit}
.search:hover{border-color:var(--ink-3); color:var(--ink-2)}
.search kbd{margin-left:auto; font-family:inherit; font-size:10.5px; border:1px solid var(--rule-2); border-radius:3px; padding:1px 5px}
@media(max-width:1100px){.search{min-width:0} .search .search-label,.search kbd{display:none}}
.search-overlay{position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px; background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(3px)}
.search-overlay.on{display:flex}
.search-panel{width:min(560px,100%); background:var(--surface); border:1px solid var(--rule-2); border-radius:12px;
  box-shadow:var(--shadow-lg); overflow:hidden}
.search-panel input{width:100%; border:0; background:transparent; color:var(--ink); font:inherit; font-size:16px;
  padding:16px 18px; outline:none; border-bottom:1px solid var(--rule)}
.search-results{max-height:46vh; overflow-y:auto}
.search-results a{display:flex; align-items:baseline; gap:12px; padding:11px 18px; text-decoration:none; font-size:14px}
.search-results a .tick{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px; min-width:64px}
.search-results a span{color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.search-results a em{margin-left:auto; font-style:normal; font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.search-results a:hover, .search-results a.sel{background:var(--surface-2)}
.search-empty{padding:16px 18px; font-size:13px; color:var(--ink-3)}

/* mobile nav */
.navbtn{display:none; width:36px; height:36px; border-radius:7px; border:1px solid var(--rule-2);
  background:var(--surface); color:var(--ink-2); place-items:center; cursor:pointer}
@media(max-width:960px){.navbtn{display:grid}}
.mobnav{display:none; border-bottom:1px solid var(--rule); background:var(--surface)}
.mobnav.on{display:block}
.mobnav .mn-group{padding:10px 0 4px; border-bottom:1px solid var(--rule)}
.mobnav .mn-group:last-child{border-bottom:0}
.mobnav .mn-h{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:4px 0}
.mobnav a{display:block; padding:9px 0; font-size:15px; text-decoration:none; color:var(--ink-2)}
.mobnav a:hover, .mobnav a.on{color:var(--ink)}

/* footer */
.appfoot{border-top:1px solid var(--rule); padding:20px 0 44px; font-size:11.5px; color:var(--ink-3); line-height:1.7; margin-top:32px}

/* page scaffolding shared by R2+ pages */
.sect-lead h1{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:34px; letter-spacing:-.025em}
.runline{display:flex; gap:5px 26px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--ink-3); padding-bottom:14px}
.runline b{color:var(--ink); font-weight:600}

/* ---------- board cards (R2) ---------- */
.viewtoggle{display:inline-flex; border:1px solid var(--rule-2); border-radius:7px; overflow:hidden; flex:none}
.viewtoggle button{padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--ink-3); background:var(--surface);
  border:0; cursor:pointer; font-family:inherit}
.viewtoggle button+button{border-left:1px solid var(--rule-2)}
.viewtoggle button.on{background:var(--surface-3); color:var(--ink)}
.viewtoggle button:hover{color:var(--ink)}
.boardbar{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; padding-bottom:16px; flex-wrap:wrap}
.boardbar .bb-left{font-size:12.5px; color:var(--ink-3); display:flex; gap:5px 24px; flex-wrap:wrap; align-items:center}
.boardbar .bb-left b{color:var(--ink); font-weight:600}
.boardbar .bb-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.sortsel{height:32px; padding:0 9px; border:1px solid var(--rule-2); border-radius:6px; background:var(--surface);
  color:var(--ink-2); font-size:12.5px; font-family:inherit}

.cards{display:flex; flex-direction:column; gap:12px}
.tierhead{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  padding:14px 2px 2px}
.bcard{position:relative; display:grid; grid-template-columns:38px 1fr 168px; gap:20px; align-items:start;
  border:1px solid var(--rule); border-radius:12px; background:var(--surface); padding:16px 20px;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color .14s ease, box-shadow .14s ease}
.bcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rule-2)}
.bcard.st-good::before{background:var(--up)}
.bcard.st-info::before{background:var(--info)}
.bcard.st-warn::before{background:var(--brand)}
.bcard.st-bad::before{background:var(--down)}
.bcard:hover{border-color:var(--rule-2); box-shadow:var(--shadow)}
.bcard:hover .bc-open{opacity:1; transform:translateX(0)}
@media(max-width:880px){.bcard{grid-template-columns:30px 1fr; gap:14px}}
.bc-rank{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:3px}
.bc-body{min-width:0}
.bc-id{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.bc-id .tickr{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:17px; letter-spacing:-.02em}
.bc-name{font-family:"Newsreader",Georgia,serif; font-size:18px; letter-spacing:-.015em; color:var(--ink)}
.bc-sector{font-size:11px; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; font-weight:600}
.bc-px{margin-left:auto; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2)}
@media(max-width:880px){.bc-px{margin-left:0}}
.bc-thesis{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin:8px 0 12px; max-width:88ch}
.bc-metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
@media(max-width:1180px){.bc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bc-metrics>div{background:var(--surface); padding:8px 11px; display:flex; flex-direction:column; gap:2px; min-width:0}
.bc-metrics>div>span{font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bc-metrics>div>b{font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.015em}
.bc-metrics>div>b.dim{font-weight:400}
.bc-chart{margin-top:12px}
.bc-chart h5{margin:0 0 6px; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.cbar{display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--surface-3)}
.cbar i{display:block; height:100%}
.cbar-legend{display:flex; gap:4px 16px; flex-wrap:wrap; margin-top:7px; font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.cbar-legend b{color:var(--ink-2); font-weight:600}
.cbar-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.bc-foot{display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--ink-3)}
.bc-foot b{color:var(--ink-2); font-weight:600}
.bc-open{margin-left:auto; color:var(--brand-hi); font-weight:600; font-size:12.5px; opacity:0;
  transform:translateX(-4px); transition:opacity .14s, transform .14s}
@media(max-width:880px){.bc-open{opacity:1; transform:none; margin-left:0}}
@media(prefers-reduced-motion:reduce){.bc-open{transition:none}}
.bc-score{display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right;
  border-left:1px solid var(--rule); padding-left:22px; align-self:stretch}
@media(max-width:880px){.bc-score{grid-column:2; text-align:left; border-left:0; padding-left:0;
  flex-direction:row; flex-wrap:wrap; align-items:center; order:-1; align-self:auto}}
.bc-num{font-size:32px; font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.bc-num small{font-size:12px; font-weight:400; color:var(--ink-3); letter-spacing:0; margin-left:3px}
.bc-bar{width:100%; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden}
@media(max-width:880px){.bc-bar{width:90px}}
.bc-bar i{display:block; height:100%; background:var(--brand); border-radius:2px}
.bc-hero{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.hidden{display:none !important}

/* ---------- home hub (R4) ---------- */
.hub-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px}
.greet{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:32px; letter-spacing:-.025em; margin:0 0 5px}
.hub-head p{margin:0; font-size:13.5px; max-width:76ch; color:var(--ink-2)}
/* The 1px rules between stat cells come from a grid gap over a rule-colored
   background, not per-cell borders: when the strip wraps to two rows at a
   narrow window, the divider network stays clean instead of a stray border
   slicing through a neighboring number. */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--rule); border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule); margin-bottom:8px}
.stat{padding:14px 20px 15px 0; background:var(--bg)}
.stat + .stat{padding-left:18px}
.stat span{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:5px}
.stat b{font-size:21px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.stat .sub{font-size:11.5px; color:var(--ink-3); font-weight:400; letter-spacing:0; text-transform:none; margin-top:5px}
.hub-grid{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:40px; align-items:start}
.hub-grid > *{min-width:0}
.hub-grid .vtable td, .hub-grid .vtable th{padding:9px 9px}
@media(max-width:1080px){.hub-grid{grid-template-columns:1fr; gap:0}}
.sect{padding:26px 0; border-top:1px solid var(--rule)}
.sect.first{border-top:0; padding-top:12px}
.sect-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.sect-head h2{margin:0; font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:21px; letter-spacing:-.02em}
.sect-note{font-size:12.5px; color:var(--ink-3)}
.sect-link{font-size:12.5px; color:var(--brand-hi); font-weight:600; text-decoration:none}
.follow-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.follow-grid{grid-template-columns:1fr}}
.fcard{border:1px solid var(--rule); border-radius:10px; padding:15px; display:flex; flex-direction:column; gap:11px;
  text-decoration:none; transition:border-color .15s}
.fcard:hover{border-color:var(--rule-2)}
.fcard.add{border-style:dashed; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); font-size:13px; gap:8px}
.fc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.fc-name{font-size:14px; font-weight:600}
.fc-ret{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.fc-change{font-size:12px; color:var(--ink-3); line-height:1.5}
.fc-change b{color:var(--ink-2)}
.fc-thumb{height:44px; border-radius:6px; background:var(--surface-2); overflow:hidden; display:block}
.feed{list-style:none; margin:0; padding:0}
.feed li{display:grid; grid-template-columns:86px 1fr; gap:18px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--rule); font-size:13.5px; color:var(--ink-2); line-height:1.55}
.feed li:last-child{border-bottom:0}
.feed .fk{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.feed .ft{display:block; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:3px}
.wl{display:flex; flex-direction:column}
.wl-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:13px; text-decoration:none}
.wl-row:last-child{border-bottom:0}
.wl-row:hover .tickr{color:var(--brand-hi)}
.wl-nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--ink-3)}
.wl-r{text-align:right; font-variant-numeric:tabular-nums; display:flex; flex-direction:column; gap:1px}
.wl-r em{font-style:normal; font-size:11px; color:var(--ink-3)}
.cal{list-style:none; margin:0; padding:0}
.cal li{display:grid; grid-template-columns:78px 1fr auto; gap:10px; align-items:baseline; padding:9px 0;
  border-bottom:1px solid var(--rule); font-size:13px}
.cal li:last-child{border-bottom:0}
.cal .cd{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.posform{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px}
.posform input{height:36px; padding:0 11px; border:1px solid var(--rule-2); border-radius:6px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px}
.posform input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.star{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:6px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-3); cursor:pointer; flex:none}
.star:hover{color:var(--brand); border-color:var(--brand-line)}
.star.on{color:var(--brand)}
.star svg{display:block}
.star.on svg path{fill:currentColor}

/* ---------- company research card (R3) ---------- */
.crumbs{display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--ink-3); margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--ink-2); font-weight:600}
.co-head{display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:4px}
.co-title{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.co-title h1{margin:0; font-family:"IBM Plex Mono",monospace; font-size:30px; font-weight:600; letter-spacing:-.03em}
.co-title .co-name{font-family:"Newsreader",Georgia,serif; font-size:24px; color:var(--ink-2); font-weight:400; letter-spacing:-.01em}
.co-facts{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:10px; font-size:13px; color:var(--ink-3)}
.co-facts b{color:var(--ink); font-weight:600}
.co-score{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.co-score .big{font-size:50px; font-weight:600; letter-spacing:-.04em; line-height:.95; font-variant-numeric:tabular-nums}
.co-score .cap{font-size:12px; color:var(--ink-3)}
@media(max-width:700px){.co-score{align-items:flex-start; text-align:left}}
.lede{font-family:"Newsreader",Georgia,serif; font-size:19.5px; line-height:1.52; max-width:76ch; margin:18px 0 4px; letter-spacing:-.012em}
.jump{display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:11px 0; margin:20px 0 22px; font-size:12.5px; position:sticky; top:66px; z-index:30;
  background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); overflow-x:auto}
.jump a{color:var(--ink-3); text-decoration:none; white-space:nowrap}
.jump a:hover{color:var(--ink)}
.card h2{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:20px; letter-spacing:-.02em}
.card h2 .muted, .card h2 .tag{font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
html{scroll-behavior:smooth; scroll-padding-top:120px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   COMPAT LAYER — re-skins the legacy classes in tokens.
   Structure untouched; only colors, borders, and type change.
   ============================================================ */
main.wrap, .wrap{max-width:1400px}
main.wrap{padding-top:28px; padding-bottom:56px; min-height:64vh}
.page-head h1{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:30px; letter-spacing:-.025em}
.page-head .muted, .muted{color:var(--ink-2)}
h2 .muted{color:var(--ink-3)}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:12px; color:inherit}
.rank-card:hover{border-color:var(--rule-2); box-shadow:var(--shadow)}
.rank-num{color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:15px}
.ticker{font-family:"IBM Plex Mono",monospace; font-weight:600; letter-spacing:-.02em}
.coname{color:var(--ink-2)}
.summary,.summary.big{color:var(--ink-2)}
.score-num{font-weight:600; letter-spacing:-.035em}
.score-cap,.asof,.sec-tag{color:var(--ink-3)}
.px{color:var(--ink); opacity:1}

.flash{background:var(--up-soft); border:1px solid var(--up); color:var(--up); border-radius:8px}
.research-banner{background:var(--brand-soft); border-bottom:1px solid var(--brand-line); color:var(--brand-hi)}
footer.wrap{color:var(--ink-3); border-top:1px solid var(--rule)}

/* tables */
table{font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--rule)}
thead th{color:var(--ink-3); font-size:10.5px; letter-spacing:.07em}
.vtable-wrap{border:1px solid var(--rule); border-radius:10px; background:var(--surface)}
.vtable th,.vtable td{border-bottom:1px solid var(--rule)}
.vtable thead th{background:var(--surface-2); color:var(--ink-3)}
.vtable tbody tr:hover{background:var(--surface-2)}
.vtable .rk{color:var(--ink-3)}
.vtable .tk a{color:var(--ink); font-family:"IBM Plex Mono",monospace}
.vtable .co{color:var(--ink-2)}
.vtable .sec{color:var(--ink-3)}
.vtable td.pen{color:var(--down)}
.mtable th{color:var(--ink-3)}
.mtable th,.mtable td{border-bottom:1px solid var(--rule)}
.mtable a{color:var(--ink)}
.bridge td{border-bottom:1px solid var(--rule)}
.bridge .tot td{border-top:1px solid var(--rule-2); background:var(--surface-2)}
.breakdown tfoot th{color:var(--ink); border-top:2px solid var(--rule-2)}
.subtbl td{border-bottom:1px solid var(--rule)}
.stmt-h{color:var(--ink-3)}
.note,.breakdown td .note{color:var(--ink-3)}
.dd-note{color:var(--ink-2)}
.note-row td{border-bottom:1px solid var(--rule)}
.note-row summary,.subtbl details summary,details summary{color:var(--brand-hi)}
.excl-list,.excl-list a{color:var(--ink-3)}
.excl-list a{border-bottom:1px dotted var(--rule-2)}

/* bars + fills */
.scorebar,.minibar,.fb-track,.bc-bar{background:var(--surface-3)}
.scorebar>span{background:var(--brand)}
.minibar>span,.fb-fill,.bc-bar i{background:var(--brand)}
.chg-up{color:var(--up)} .chg-dn{color:var(--down)}

/* chips: neutral pill + colored dot (the one rule) */
.clschip{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:2.5px 9px;
  border-radius:4px; white-space:nowrap; background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-2)}
.clschip::before{content:""; width:5px; height:5px; border-radius:999px; flex:none; background:var(--ink-3)}
.chip-good{background:var(--surface-2); color:var(--ink-2)} .chip-good::before{background:var(--up)}
.chip-warn{background:var(--surface-2); color:var(--ink-2)} .chip-warn::before{background:var(--brand)}
.chip-bad{background:var(--surface-2); color:var(--ink-2)} .chip-bad::before{background:var(--down)}
.chip-info{background:var(--surface-2); color:var(--ink-2)} .chip-info::before{background:var(--info)}
.chip-neutral{background:var(--surface-2); color:var(--ink-2)}
.clschip.chip-flat::before{display:none}
.conf{font-size:11px; font-weight:600; padding:2.5px 9px; border-radius:4px; background:var(--surface-2);
  border:1px solid var(--rule); color:var(--ink-2)}
.conf-high,.conf-medium,.conf-low,.conf-n\/a{background:var(--surface-2); color:var(--ink-2)}
.pill-attr{background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-3)}
.pill-outline{background:transparent; border:1px solid var(--rule-2)}
.pill-writeup{background:var(--brand-soft); color:var(--brand-hi); border:1px solid var(--brand-line)}
.tag.computed{background:var(--surface-3); color:var(--ink-2)}
.tag.reported{background:var(--up-soft); color:var(--up)}
.tag.ai{background:var(--brand-soft); color:var(--brand-hi)}
.vtag{background:var(--surface-3); color:var(--ink-2)}
.code{background:var(--surface-3); color:var(--ink-2)}
.code-P{background:var(--up-soft); color:var(--up)}
.code-S{background:var(--down-soft); color:var(--down)}
.pill.buy{background:var(--up-soft); color:var(--up)}
.pill.sell{background:var(--down-soft); color:var(--down)}
.jf-dot{background:var(--info)}
.dot::before{background:var(--ink-3)}
.dot-low::before,.dot-conf-high::before{background:var(--up)}
.dot-medium::before,.dot-conf-medium::before{background:var(--brand)}
.dot-high::before,.dot-conf-low::before{background:var(--down)}
.badge.b-value{background:var(--surface-2); color:var(--info); border:1px solid var(--rule)}
.badge.b-formula{background:var(--surface-2); color:var(--up); border:1px solid var(--rule)}
.badge.b-rel{background:var(--surface-2); color:var(--s3); border:1px solid var(--rule)}

/* screens switcher (.seg) — restyled as underline tabs */
.seg{background:transparent; border:0; border-bottom:1px solid var(--rule); border-radius:0; padding:0;
  width:auto; gap:0; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap}
.seg a{padding:10px 14px 11px; border-radius:0; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--ink-3)}
.seg a:first-child{padding-left:0}
.seg a b{color:var(--ink-2)}
.seg a span{color:var(--ink-3); font-size:11.5px}
.seg a:hover{background:transparent}
.seg a:hover b{color:var(--ink)}
.seg a.on{background:transparent; border-bottom-color:var(--brand); color:var(--ink)}
.seg a.on b{color:var(--ink)}
.seg a.on span,.seg a.gold.on span{color:var(--ink-3)}
.seg a.gold.on{background:transparent; color:var(--ink)}

/* inputs + buttons */
.screenbox input,.jf-in,.login-card input,.tool-select{background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-2); border-radius:6px}
.screenbox input:focus,.jf-in:focus,.login-card input:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.screenbox input::placeholder{color:var(--ink-3)}
.screenbox button{background:var(--btn-bg); color:var(--btn-fg); border-radius:6px; font-weight:600}
.screenbox button:hover{background:var(--btn-bg); filter:brightness(1.08); color:var(--btn-fg)}
.refresh-btn,.login-card button{background:var(--btn-bg); color:var(--btn-fg); border-radius:6px}
.refresh-btn:hover,.login-card button:hover{background:var(--btn-bg); filter:brightness(1.08)}
.fchip{background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-2); font-size:11.5px;
  border-radius:4px; padding:3px 9px; font-weight:500}
.uchip{background:var(--brand-soft); color:var(--brand-hi)}
.unsupported{background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-hi)}
.examples a{color:var(--brand-hi)}
.error{color:var(--down)}
.login-card{background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow)}
.login-card label{color:var(--ink-2)}

/* conviction */
.conv-filter{background:var(--surface); border:1px solid var(--rule-2); color:var(--ink-2); border-radius:6px}
.conv-filter.on{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand-hi)}
.conv-filter input{accent-color:var(--brand)}
.conv-gold{border-color:var(--brand-line); box-shadow:var(--shadow)}

/* charts + panels */
.chartbox{background:var(--surface); border:1px solid var(--rule)}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:0;
  border-top:1px solid var(--rule-2); border-left:1px solid var(--rule)}
.mi{border:0; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  border-radius:0; background:transparent; padding:11px 14px}
.mi span{color:var(--ink-3); font-size:11px}
.mi b{font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.mi.hl{background:transparent; border-color:var(--rule)}
.mi.hl b{color:var(--brand-hi)}
.sidenav a{color:var(--ink-3)}
.sidenav a:hover{background:var(--surface-2); color:var(--ink)}
.sidenav a.active{background:var(--surface-3); color:var(--ink)}
.pager a{background:var(--surface); border:1px solid var(--rule-2); color:var(--ink-2); border-radius:6px}
.pager a:hover{background:var(--surface-2); color:var(--ink)}
.pager .cur{background:var(--surface-3); color:var(--ink); border-radius:6px}
.pager .gap{color:var(--ink-3)}
.formula{background:var(--surface-2); border:1px solid var(--rule); color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.inputs{color:var(--ink-3)}
.inputs i{color:var(--ink-3)}
.writeup-body{color:var(--ink-2)}
.writeup-body h1,.writeup-body h2,.writeup-body h3,.writeup-body strong,.writeup-body b{color:var(--ink)}
.writeup-body h2{border-bottom:1px solid var(--rule)}
.writeup-body hr{border-top:1px solid var(--rule)}
.writeup-body code{background:var(--surface-2)}
.writeup .ai-disclaimer{background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-hi)}
.writeup-fallback{color:var(--ink-2)}
.flags li{color:var(--ink-2); border-bottom:1px solid var(--rule)}
.fpen{color:var(--down)}
.adjcls{color:var(--ink-3)}
.adj-accepted_addback td:first-child{border-left:3px solid var(--up)}
.adj-rejected_addback td:first-child,.adj-questionable_addback td:first-child{border-left:3px solid var(--brand)}
.adj-one_time_gain_subtraction td:first-child{border-left:3px solid var(--info)}
.cathead{border-bottom:2px solid var(--rule)}
.catname.pen,.catpts.pen{color:var(--down)}
.head-facts{color:var(--ink-3)}
.head-facts .fact b{color:var(--ink)}
.back{color:var(--ink-3)}
#jf-board th[data-sort]::after{border-top-color:var(--rule-2)}
#jf-board th[data-dir=asc]::after{border-bottom-color:var(--brand); border-top:none}
#jf-board th[data-dir=desc]::after{border-top-color:var(--brand)}

/* writeup version tabs — briefings are versioned, never replaced */
.wu-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.wu-tab{padding:5px 12px; border:1px solid var(--rule); border-radius:999px;
  background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer}
.wu-tab:hover{background:var(--surface-2)}
.wu-tab.on{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-hi)}