/* ============================================================
   Trade Companion — design system
   Layout: hash-routed single page; each view is a column of panels.
   Palette: lab categorical set (blue / orange / aqua / violet), dark steps
   validated on #171b20; status colours (good / bad) carry lean and verdict
   only, never series. Three theme states: light, OS-dark, explicit toggle.
   ============================================================ */
:root{
  color-scheme: light;
  --ground:#f4f6f7; --surface:#ffffff; --surface-2:#eef1f3;
  --ink:#10151a; --ink-2:#525a63; --muted:#787f87;
  --rule:#dfe4e8; --rule-strong:#c2cad1;
  --pick:#eb6834; --pick-soft:rgba(235,104,52,.13);
  --idx:#2a78d6;  --idx-soft:rgba(42,120,214,.12);
  --s3:#1baf7a;   --s4:#4a3aa7;
  --good:#0f7d2e; --bad:#c0392f; --warn:#8a5a00; --warn-soft:#fdf4e3;
  --good-soft:rgba(15,125,46,.12); --bad-soft:rgba(192,57,47,.11); --muted-soft:rgba(120,127,135,.14);
  --shadow:0 1px 2px rgba(16,21,26,.05), 0 8px 24px -16px rgba(16,21,26,.25);
  --maxw:1180px; --step:clamp(14px,1.6vw,16px);
  --font-display:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0e1114; --surface:#171b20; --surface-2:#1e242a;
    --ink:#f2f5f7; --ink-2:#b3bcc4; --muted:#8d959d;
    --rule:#2a3138; --rule-strong:#3b444d;
    --pick:#d95926; --pick-soft:rgba(217,89,38,.18);
    --idx:#3987e5;  --idx-soft:rgba(57,135,229,.16);
    --s3:#199e70;   --s4:#9085e9;
    --good:#3fbf62; --bad:#e8695c; --warn:#e8b45c; --warn-soft:#2a2113;
    --good-soft:rgba(63,191,98,.14); --bad-soft:rgba(232,105,92,.13); --muted-soft:rgba(141,149,157,.16);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0e1114; --surface:#171b20; --surface-2:#1e242a;
  --ink:#f2f5f7; --ink-2:#b3bcc4; --muted:#8d959d;
  --rule:#2a3138; --rule-strong:#3b444d;
  --pick:#d95926; --pick-soft:rgba(217,89,38,.18);
  --idx:#3987e5;  --idx-soft:rgba(57,135,229,.16);
  --s3:#199e70;   --s4:#9085e9;
  --good:#3fbf62; --bad:#e8695c; --warn:#e8b45c; --warn-soft:#2a2113;
  --good-soft:rgba(63,191,98,.14); --bad-soft:rgba(232,105,92,.13); --muted-soft:rgba(141,149,157,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:var(--step); line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(24px,4.4vw,36px); font-weight:700; line-height:1.1}
h2{font-size:clamp(17px,2.4vw,21px); font-weight:600}
h3{font-size:15.5px; font-weight:600}
h3.big{font-size:clamp(18px,2.6vw,24px)}
p{margin:0}
a{color:var(--idx)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--idx); outline-offset:2px; border-radius:4px}
img,svg{max-width:100%}
.mono{font-family:var(--font-mono)}
[hidden]{display:none!important}
ul{margin:6px 0 0; padding-left:18px} li{margin:3px 0; color:var(--ink-2); font-size:14px}
.sub{font-size:12.5px; color:var(--muted); line-height:1.45}
.sub b{color:var(--ink-2)}
.lbl{display:block; margin-top:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.back{font-size:13px; color:var(--ink-2); text-decoration:none}
.back:hover{text-decoration:underline}

/* ---------- skip link + layout ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink); padding:10px 14px; border-radius:0 0 8px 0; z-index:99}
.skip:focus{left:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:clamp(16px,3.5vw,26px)}
main{padding-bottom:clamp(48px,8vw,88px)}
#app{padding-top:clamp(22px,4vw,40px)}
#app > div > h1{margin-bottom:8px}
section{margin-top:clamp(26px,4vw,40px)}
section > h2{margin-bottom:10px}
.mt-14{margin-top:14px}

/* ---------- site nav ---------- */
.site{border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:env(safe-area-inset-top,0px); z-index:20}
.site .wrap{display:flex; align-items:center; gap:8px 18px; min-height:54px; flex-wrap:wrap; padding-block:6px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; margin-right:auto}
.brand .dot{width:10px;height:10px;border-radius:3px;background:var(--pick);flex:none}
.site nav{display:flex; gap:2px; flex-wrap:wrap}
.site nav a{font-size:13.5px; color:var(--ink-2); text-decoration:none; padding:6px 10px; border-radius:7px}
.site nav a:hover{background:var(--surface-2); color:var(--ink)}
.site nav a[aria-current="true"]{background:var(--pick-soft); color:var(--ink); font-weight:600}
.themebtn{border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink-2); border-radius:7px; width:34px; height:30px; cursor:pointer; font-size:14px; line-height:1; flex:none}
.themebtn:hover{color:var(--ink)}
@media (max-width:640px){ .site nav{order:3; flex-basis:100%; margin-top:-4px} .themebtn{order:2} }

/* ---------- page head ---------- */
.pagehead{padding:clamp(22px,4vw,40px) 0 clamp(8px,2vw,16px); display:flex; flex-direction:column; gap:12px}
.pagehead.tight{padding-top:6px}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.strip{display:flex; flex-wrap:wrap; gap:6px}
.chip-ctx{background:var(--surface); border:1px solid var(--rule-strong); border-radius:14px; padding:4px 11px; font-size:12.5px; color:var(--ink-2)}
.hl{background:var(--pick-soft); border:1px solid var(--pick); color:var(--ink); border-radius:9px; padding:9px 14px; font-weight:600; font-size:14px}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:clamp(14px,2.2vw,20px); min-width:0}
.panel-head{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.panel-head > div{min-width:0}
.panel-note{font-size:13.5px; color:var(--ink-2); max-width:72ch; margin-top:4px}
.legend{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:13px; color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.shape{display:inline-block; width:11px; height:11px; flex:none}
.lk{display:inline-block; width:15px; height:2.5px; border-radius:2px; flex:none}
.lk.bar{height:8px; border-radius:4px; opacity:.45}
.lk-idx{background:var(--idx)}
.theme{scroll-margin-top:80px}
.theme.flash{border-color:var(--pick); background:var(--pick-soft)}
.cards2{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:800px){ .cards2{grid-template-columns:repeat(2,1fr)} }
.cards3{display:grid; grid-template-columns:1fr; gap:14px; align-items:start}
@media (min-width:860px){ .cards3{grid-template-columns:repeat(3,1fr)} }
.row{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.row a{color:var(--ink); font-weight:600; text-decoration:none}
.row a:hover{text-decoration:underline}
.row .win,.row .lose{white-space:nowrap; font-size:13px; font-weight:600}
.win{color:var(--good)} .lose{color:var(--bad)}
.kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin:10px 0}
.kv div{background:var(--surface-2); border-radius:8px; padding:7px 9px; min-width:0}
.kv b{display:block; font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.03em}
.kv span{font-size:13.5px; color:var(--ink); overflow-wrap:anywhere}
.tradecard h3 a{color:var(--ink); text-decoration:none} .tradecard h3 a:hover{text-decoration:underline}
.tags{display:flex; flex-wrap:wrap; gap:5px; margin:6px 0}
.cat-t{font-weight:600; color:var(--ink); line-height:1.35}

/* ---------- tags, badges ---------- */
.tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; padding:1px 7px; border-radius:4px; border:1px solid var(--rule-strong); color:var(--ink-2); white-space:nowrap; line-height:1.6}
.tag.st-placed{background:var(--good-soft); color:var(--good); border-color:transparent}
.tag.st-committed{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.tag.st-hypothesized{background:var(--idx-soft); color:var(--idx); border-color:transparent}
.tag.status-expected{border-style:dashed}
.tag.aff{color:var(--muted)}
.tag.lane{color:var(--ink-2)}
.tag.impact{border-color:transparent; background:var(--muted-soft); color:var(--ink-2); margin-top:4px}
.tag.i-high{background:var(--bad-soft); color:var(--bad)} .tag.i-med{background:var(--warn-soft); color:var(--warn)}
.verdict{border-color:transparent; font-weight:600}
.v-helped{background:var(--good-soft); color:var(--good)} .v-hurt{background:var(--bad-soft); color:var(--bad)}
.v-neutral{background:var(--muted-soft); color:var(--ink-2)} .v-pending{background:var(--surface-2); color:var(--muted)} .v-await{background:var(--warn-soft); color:var(--warn)}
.dir{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px}
.dir-bull{color:var(--good)} .dir-bear{color:var(--bad)} .dir-mixed{color:var(--idx)} .dir-binary{color:var(--pick)} .dir-neutral{color:var(--muted)}
.ant{display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.ant-l{font-size:13.5px; color:var(--ink); line-height:1.4}

/* ---------- countdown + next ---------- */
.cd{font-family:var(--font-display); font-size:clamp(26px,4vw,34px); font-weight:700; color:var(--pick); line-height:1.1; margin:6px 0}
.cd-inline{font-family:var(--font-mono); font-weight:600; color:var(--pick); font-size:14px}
.cd-s{font-family:var(--font-mono); font-size:11.5px; color:var(--pick); font-weight:600; margin-top:3px}
.nx{margin-top:12px; border-top:1px solid var(--rule); padding-top:10px}
.nx b{color:var(--ink)}
.nx-row{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:4px}

/* ---------- scorecard ---------- */
.score{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px}
.sc{display:inline-flex; align-items:baseline; gap:6px; padding:5px 10px; border-radius:8px; background:var(--surface-2); font-size:12.5px; color:var(--ink-2)}
.sc b{font-family:var(--font-display); font-size:16px; color:var(--ink)}
.sc.v-helped b{color:var(--good)} .sc.v-hurt b{color:var(--bad)} .sc.v-await b{color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; min-width:0}
table{border-collapse:collapse; width:100%; font-size:13.5px}
caption{text-align:left; font-size:12.5px; color:var(--muted); padding-bottom:8px}
th,td{padding:10px 10px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap}
tbody tr:hover{background:var(--surface-2)}
table.ct{min-width:900px}
table.ct th:nth-child(1),table.ct td:nth-child(1){width:112px; white-space:nowrap}
table.ct th:nth-child(3),table.ct td:nth-child(3){width:23%}
table.ct th:nth-child(4),table.ct td:nth-child(4){width:19%}
table.ct th:nth-child(5),table.ct td:nth-child(5){width:21%}
table.ct td:nth-child(1) b{font-family:var(--font-mono); font-size:13px; color:var(--ink)}
tr.past{opacity:.6} tr.past:hover{opacity:1}
tr.next{background:var(--pick-soft)}
tr.flash td{background:var(--pick-soft)}
tr[id]{scroll-margin-top:80px}
table.hy{min-width:560px}
table.ct.gz{min-width:860px}
table.ct.gz th:nth-child(1),table.ct.gz td:nth-child(1){width:24%; white-space:normal}
table.ct.gz th:nth-child(2),table.ct.gz td:nth-child(2){width:128px}
table.ct.gz th:nth-child(3),table.ct.gz td:nth-child(3){width:36%}
table.ct.gz th:nth-child(4),table.ct.gz td:nth-child(4){width:auto}
table.ct.gz td:nth-child(1) b{display:block; margin:3px 0 2px}
table.ct.gz td p{margin:0 0 6px}
.tag.g-calm{background:var(--good-soft); color:var(--good); border-color:transparent}
.tag.g-watch{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.tag.g-warning{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.tag.g-unknown{background:var(--muted-soft); color:var(--ink-2); border-color:transparent}
.ov-gauges{margin-top:14px}
.ov-gauges .gz-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px}
.ov-gauges .gz-list{list-style:none; margin:10px 0 8px; padding:0}
.ov-gauges .gz-list li{margin:6px 0; font-size:14px; color:var(--ink)}
.ov-gauges .more{font-size:13.5px}
td.wrap-cell{white-space:normal; color:var(--ink-2)}
@media (max-width:760px){
  table.ct, table.ct.gz{min-width:0}
  .ct.gz td:first-child::before{display:none}
  .ct thead{display:none}
  .ct tr{display:block; padding:10px 0; border-bottom:1px solid var(--rule-strong)}
  .ct td{display:block; border:0; padding:4px 0; width:auto!important; white-space:normal!important}
  .ct td::before{content:attr(data-l); display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
}

/* ---------- editable cells ---------- */
.mine{cursor:pointer; border:1px dashed var(--rule-strong); border-radius:7px; padding:6px 8px; min-height:30px; font-size:13.5px; color:var(--ink); line-height:1.4}
.mine:hover{border-color:var(--pick)}
.mine.empty{color:var(--muted); font-style:italic}
.mine.editing{cursor:auto; border-style:solid; border-color:var(--pick); font-style:normal; display:flex; flex-direction:column; gap:6px}
.mine.editing label{display:flex; align-items:center; gap:8px}
textarea,select{width:100%; background:var(--ground); color:var(--ink); border:1px solid var(--rule-strong); border-radius:6px; font:inherit; font-size:13.5px; padding:6px 8px}
select{width:auto}
textarea.export{width:min(100%,520px); font-family:var(--font-mono); font-size:12px}
.tools{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.btn{background:var(--surface); color:var(--ink); border:1px solid var(--rule-strong); border-radius:7px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; min-height:32px}
.btn:hover{border-color:var(--ink-2)}
.btn.pri{background:var(--pick); color:#fff; border-color:var(--pick); font-weight:600}
.myview{display:flex; flex-direction:column; gap:4px; margin-top:4px}
.myview > b{font-size:12.5px; color:var(--ink)}

/* ---------- controls ---------- */
.controls{background:var(--surface-2); border:1px solid var(--rule); border-radius:10px; padding:12px 14px; margin:14px 0; display:flex; flex-direction:column; gap:10px}
.ctlrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.flabel{font-family:var(--font-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); flex:0 0 auto; min-width:70px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{position:relative; display:inline-flex; align-items:center; gap:6px; justify-content:center; min-height:32px; padding:4px 11px; border:1px solid var(--rule-strong); border-radius:7px; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); cursor:pointer; user-select:none}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip:hover{border-color:var(--ink-2)}
.chip:has(input:checked){background:var(--ink); border-color:var(--ink); color:var(--surface)}
.chip:has(input:focus-visible){outline:2px solid var(--idx); outline-offset:2px}
.chip .shape{width:9px; height:9px}
.chip:has(input:checked) .shape{filter:saturate(1.2)}
.controls.filters{margin:10px 0 12px}
.sub.filtered{margin:-4px 0 10px; color:var(--pick)}

/* ---------- themes ---------- */
.themes{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:800px){ .themes{grid-template-columns:repeat(2,1fr)} }
.theme{background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:9px; min-width:0}
.theme .th{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between}
.theme > p{font-size:13.8px; color:var(--ink-2)}
.theme .pn{display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--rule); padding-top:10px}
.theme .pn > p{padding-left:12px; border-left:2px solid var(--rule-strong); font-size:13.5px; color:var(--ink-2)}
.theme .pn p.up{border-left-color:var(--good)} .theme .pn p.down{border-left-color:var(--bad)}
.theme .pn b{color:var(--ink); font-weight:600}
.updates{display:flex; flex-direction:column; gap:3px}
.updates > b{font-size:12.5px; color:var(--ink)}
.updates .mono{font-size:11.5px; color:var(--muted)}

/* ---------- charts ---------- */
.chartbox{position:relative; width:100%; min-width:0}
.chartbox svg{display:block; width:100%; height:auto; overflow:visible}
.grid{stroke:var(--rule); stroke-width:1}
.axis{stroke:var(--rule-strong); stroke-width:1}
.tick{fill:var(--muted); font-family:var(--font-mono); font-size:10.5px; font-variant-numeric:tabular-nums}
.tick.strong{fill:var(--ink-2); font-weight:600; letter-spacing:.04em}
.tip .t-p.hint{color:var(--pick); font-weight:600; margin-top:6px}
.hit{touch-action:manipulation}
.slab{fill:var(--ink); font-family:var(--font-mono); font-size:11.5px; font-weight:500; paint-order:stroke; stroke:var(--surface); stroke-width:3px; stroke-linejoin:round}
.slab.dim{fill:var(--ink-2); font-weight:400; font-size:11px}
.slab.strong{font-weight:600}
.wash-surface{fill:var(--surface-2)} .wash-past{fill:var(--muted-soft); opacity:.5}
.ln-pick{stroke:var(--pick)} .ln-idx{stroke:var(--idx)} .ln-good{stroke:var(--good)} .ln-bad{stroke:var(--bad)} .ln-muted{stroke:var(--rule-strong)} .ln-ink{stroke:var(--ink-2)}
.fl-pick{fill:var(--pick)} .fl-idx{fill:var(--idx)} .fl-good{fill:var(--good)} .fl-bad{fill:var(--bad)} .fl-muted{fill:var(--muted)}
.ring{stroke:var(--surface); stroke-width:2}
.dim{opacity:.45}
.hit{fill:transparent; cursor:pointer}
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .1s; background:var(--surface); border:1px solid var(--rule-strong); border-radius:7px; box-shadow:var(--shadow); padding:9px 11px; font-size:12.5px; min-width:180px; max-width:300px; z-index:5}
.tip .t-h{font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:5px}
.tip .t-t{font-weight:600; color:var(--ink); margin-bottom:3px; line-height:1.35}
.tip .t-p{color:var(--ink-2); font-size:12px; line-height:1.4; margin-top:4px}
.tip .t-p.strong{color:var(--ink); font-weight:600}

/* ---------- notes / sources ---------- */
ul.notes{padding-left:18px} ul.notes li{font-size:13.8px; max-width:80ch}
.sources{columns:1; column-gap:28px; padding-left:18px; margin:10px 0 0; font-size:13px; color:var(--ink-2)}
@media (min-width:760px){ .sources{columns:2} }
.sources li{break-inside:avoid; margin-bottom:4px}
details{margin-top:14px; border-top:1px solid var(--rule); padding-top:12px}
summary{cursor:pointer; font-size:13.5px; color:var(--ink-2); font-weight:600; min-height:32px}
.empty{padding:18px 8px; color:var(--muted); font-size:14px}

/* ---------- overview ---------- */
.ov-head{padding:0 0 clamp(14px,2.5vw,22px); display:flex; flex-direction:column; gap:10px}
.ov-head .lede{font-size:clamp(15px,2vw,18px); color:var(--ink-2); max-width:70ch}
.ov-head .lede b{color:var(--ink); font-weight:600}
.ov-grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:900px){ .ov-grid{grid-template-columns:7fr 5fr} }
.ov-next{display:flex; flex-direction:column; gap:6px}
.ov-next .cd{margin:4px 0 2px}
.agenda{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px; display:flex; flex-direction:column; gap:2px}
.ag-row{display:grid; grid-template-columns:140px 1fr auto; gap:6px 12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:13.5px}
.ag-row:last-child{border-bottom:0}
.ag-when{font-size:12px; color:var(--ink-2); white-space:nowrap}
.ag-what{color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ag-right{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
@media (max-width:560px){ .ag-row{grid-template-columns:1fr auto} .ag-when{grid-column:1 / -1} .ag-what{white-space:normal} }
.tape{display:grid; grid-template-columns:84px 1fr; gap:8px 12px; margin:8px 0 0}
.tape dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.tape dd{margin:0; display:flex; flex-direction:column; gap:1px; min-width:0}
.tape dd b{font-size:15px; color:var(--ink); font-weight:600}
.ov-tape .open{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px; font-size:13px; color:var(--ink-2)}
.sec-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; margin-bottom:10px}
.sec-head .more{font-size:13.5px}
.poslist{display:flex; flex-direction:column; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.pos{background:var(--surface); display:grid; grid-template-columns:1fr; gap:6px 14px; padding:12px 16px; align-items:center}
@media (min-width:860px){ .pos{grid-template-columns:110px minmax(0,1.6fr) 150px minmax(0,1.2fr) 90px} }
.pos-name a{color:var(--ink); font-weight:600; text-decoration:none} .pos-name a:hover{text-decoration:underline}
.pos-next{display:flex; flex-direction:column; gap:1px} .pos-next b{color:var(--ink); font-size:13.5px}
.pos-pl{font-family:var(--font-mono); font-weight:600; text-align:right}
@media (max-width:859px){ .pos-pl{text-align:left} }
.score.compact{margin:0; gap:4px} .score.compact .sc{padding:3px 8px; font-size:11.5px} .score.compact .sc b{font-size:13px}
.ideas{display:flex; flex-wrap:wrap; gap:8px}
.idea{display:inline-flex; flex-direction:column; gap:2px; padding:8px 12px; border:1px solid var(--rule-strong); border-radius:9px; background:var(--surface); color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600; min-width:0}
.idea:hover{border-color:var(--idx)} .idea .sub{font-weight:400}
.days{display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:700px){ .days{grid-template-columns:repeat(7,minmax(0,1fr))} }
.day{background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:10px 10px; display:flex; flex-direction:column; gap:6px; min-width:0}
.day.today{border-color:var(--pick)}
.day-h{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.day.today .day-h{color:var(--pick)}
.day-item{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink); min-width:0}
.day-item > span:nth-child(2){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.day-item .sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px}

/* ---------- segmented controls, status switch, removal ---------- */
.ctl{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:6px 0 10px}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--rule); border-radius:9px; padding:3px; gap:3px; flex-wrap:wrap}
.seg label{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:5px 11px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap; min-height:30px}
.seg.small label{padding:3px 9px; font-size:12px; min-height:26px}
.seg input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.seg input:disabled{cursor:not-allowed}
.seg label:hover{color:var(--ink)}
.seg label:has(input:checked){background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.seg label:has(input:checked) .st-placed{color:var(--good)} .seg label:has(input:checked) .st-committed{color:var(--warn)} .seg label:has(input:checked) .st-hypothesized{color:var(--idx)}
.seg label:has(input:focus-visible){outline:2px solid var(--idx); outline-offset:2px}
.btn.danger{color:var(--bad); border-color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft)}
.confirm{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink)}
.removed{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.removed .row{font-size:13.5px; color:var(--ink-2)}
.store-badge{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); border:1px solid var(--rule); border-radius:4px; padding:1px 6px; white-space:nowrap}
.copybar{border-bottom:1px solid var(--rule); background:var(--surface-2); font-size:13px; color:var(--ink-2)}
.copybar .wrap{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:44px; padding-block:6px}
.copybar .copy-msg{margin-right:auto}
.copybar a.btn{display:inline-flex; align-items:center; text-decoration:none}
.copybar.nudge{animation:nudge 1.2s ease-out}
dialog.signin{border:1px solid var(--rule-strong); border-radius:12px; padding:20px; background:var(--surface); color:var(--ink); width:min(340px, calc(100vw - 32px)); box-shadow:var(--shadow)}
dialog.signin[open]{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
dialog.signin::backdrop{background:rgba(10,14,18,.45)}
dialog.signin h2{font-size:17px; margin:0}
dialog.signin .sub{margin:0}
dialog.signin .gsi{min-height:40px; display:flex; align-items:center}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--ink-2); text-decoration:underline; cursor:pointer}
.linkbtn:hover{color:var(--ink)}
@keyframes nudge{0%,40%{background:var(--pick-soft)}100%{background:var(--surface-2)}}

/* ---------- loading / footer ---------- */
.loading{padding:26px 0; text-align:center; color:var(--muted); font-size:14px}
.loadfail{border:1px solid var(--bad); border-radius:10px; padding:16px; color:var(--bad); font-size:14px}
footer.site-foot{margin-top:clamp(40px,7vw,72px); padding-block:24px 40px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--muted)}
footer.site-foot .wrap{display:flex; flex-direction:column; gap:12px}
footer.site-foot p{max-width:78ch}
footer.site-foot .fingerprint code{font-family:var(--font-mono); font-size:12px; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }