/* ============================================================
   EDGEIQ v10 — Stylesheet
   Brand Guide: EDGEIQ_Brand_Guide.html
   Updated: August 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800&family=JetBrains+Mono:wght@400;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f7fa;--bg2:#edf0f5;--bg3:#e2e7ef;--card:#fff;--border:#dde3ec;--border2:#c8d1de;
  --accent:#1a56db;--accent-h:#1648c2;--green:#057a55;--green-bg:#f0fdf6;--green-bd:#bbf7d0;
  --red:#c81e1e;--red-bg:#fff5f5;--red-bd:#fecaca;--yellow:#92400e;--yellow-bg:#fffbeb;--yellow-bd:#fde68a;
  --blue-bg:#eff6ff;--blue-bd:#bfdbfe;--purple:#6d28d9;--purple-bg:#f5f3ff;--purple-bd:#ddd6fe;
  --text:#111827;--text2:#4b5563;--text3:#9ca3af;
  --mono:'JetBrains Mono',monospace;--sans:'Figtree',sans-serif;--r:10px;--r-lg:14px;
  --fxs:11px;--fsm:12px;--fbase:14px;--fmd:15px;--flg:18px;--fxl:22px;--f2xl:28px;
  --premarket:#4af;--hold:#4af;
  --sh-sm:0 1px 2px rgba(0,0,0,.06);--sh:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
  --sh-md:0 4px 20px rgba(0,0,0,.09),0 1px 4px rgba(0,0,0,.05);
  /* Design overhaul palette (2026-08-19) — Brian's exact prescribed hex
     values. Kept as NEW tokens alongside the original --green/--red/
     --yellow/--accent/--purple rather than overwriting them: this block
     only touches the Now tab, and re-theming every existing screen's
     colors is explicitly Block 5 (Visual Design Refresh) of this task,
     not this one. Block 5 should fold --green/etc. into these. */
  --bull:#00C851;--bull-bg:#e8faef;--bull-bd:#a6e9bd;
  --neutral:#ffbb33;--neutral-bg:#fff8e8;--neutral-bd:#ffdf9e;
  --bear:#ff4444;--bear-bg:#ffefef;--bear-bd:#ffc0c0;
  --primary:#2196F3;--primary-bg:#e8f4fe;--primary-bd:#aed9fb;
  --ai:#9C27B0;--ai-bg:#f7ebfa;--ai-bd:#e3b3ec;
}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
.hdr{height:56px;border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:var(--card);position:sticky;top:0;z-index:200;box-shadow:var(--sh-sm)}
.logo{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--accent);letter-spacing:-.5px;display:flex;align-items:center;gap:8px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hdr-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ── Unified header element — applies to pills, indicators, and buttons ── */
.hdr-item{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:32px;padding:0 12px;
  border-radius:var(--r);border:1.5px solid var(--border2);
  font-family:var(--mono);font-size:13px;font-weight:600;
  background:var(--card);color:var(--text2);
  cursor:pointer;white-space:nowrap;line-height:1;
  transition:all .15s;
}
.hdr-item:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg);}
.hdr-item.green{background:var(--green-bg);border-color:var(--green-bd);color:var(--green);}
.hdr-item.red{background:var(--red-bg);border-color:var(--red-bd);color:var(--red);}
.hdr-item.yellow{background:var(--yellow-bg);border-color:var(--yellow-bd);color:var(--yellow);}
.hp{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:5px 12px;font-family:var(--mono);font-size:13px;color:var(--text2);font-weight:600}
.hp.hg{background:var(--green-bg);border-color:var(--green-bd);color:var(--green)}
.hp.hr{background:var(--red-bg);border-color:var(--red-bd);color:var(--red)}
.hp.hy{background:var(--yellow-bg);border-color:var(--yellow-bd);color:var(--yellow)}
.nav{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--border);background:var(--card);overflow-x:auto;position:sticky;top:56px;z-index:190}
/* ── Back to Top (Session AB, 2026-08-14) — fixed bottom-right, appears after 300px scroll ── */
.back-to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:none;box-shadow:var(--sh-md);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:300;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--accent-h)}
.nt{padding:11px 14px;border:none;background:transparent;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.nt:hover{color:var(--text2)}.nt.on{color:var(--accent);border-bottom-color:var(--accent)}
.nt.gt.on{color:var(--green);border-bottom-color:var(--green)}.nt.pt.on{color:var(--purple);border-bottom-color:var(--purple)}
.nt .bdg{background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:14px;font-family:var(--mono)}.nt.gt .bdg{background:var(--green)}
.pg{padding:20px;max-width:900px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh)}
/* Standard section panel — use for all content sections on every page */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:16px}
.val-content{max-width:820px;margin:0 auto}
.panel-title{font-size:15px;font-weight:700;margin-bottom:12px}
.chdr{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0}
.ctit{font-size:14px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px}
.cbody{padding:16px 18px}
.col2{display:grid;grid-template-columns:300px 1fr;gap:16px}
.col2eq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.col4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stk{display:flex;flex-direction:column;gap:12px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.pcrd{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm);cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.pcrd:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.pcrd::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.pcrd.gn::before{background:var(--green)}.pcrd.rd::before{background:var(--red)}.pcrd.fl::before{background:var(--border2)}
.ptk{font-family:var(--mono);font-size:16px;font-weight:700;margin-bottom:2px}
.pnm{font-size:14px;color:var(--text3);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppr{font-family:var(--mono);font-size:18px;font-weight:700}
.ppl{font-family:var(--mono);font-size:14px;font-weight:600;margin-top:3px}.ppl.gn{color:var(--green)}.ppl.rd{color:var(--red)}
.pmt{font-size:14px;color:var(--text3);margin-top:6px}.psig{position:absolute;top:12px;right:12px}
.scrd{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm)}
.slbl{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}
.sval{font-family:var(--mono);font-size:20px;font-weight:700;line-height:1}.ssub{font-size:14px;color:var(--text3);margin-top:4px}
.sigbox{border-radius:var(--r);padding:16px;margin-bottom:12px;border:1.5px solid}
.sigbox.buy{background:var(--green-bg);border-color:var(--green-bd)}.sigbox.sell{background:var(--red-bg);border-color:var(--red-bd)}
.sigbox.wait{background:var(--yellow-bg);border-color:var(--yellow-bd)}.sigbox.avoid{background:#fff7f3;border-color:#fed7aa}
.sbdg{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:5px 14px;border-radius:20px;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:1.5px}
.sbdg.buy{background:rgba(5,122,85,.1);color:var(--green);border:1px solid var(--green-bd)}
.sbdg.sell{background:rgba(200,30,30,.1);color:var(--red);border:1px solid var(--red-bd)}
.sbdg.wait{background:rgba(146,64,14,.08);color:var(--yellow);border:1px solid var(--yellow-bd)}
.sbdg.avoid{background:rgba(234,88,12,.08);color:#c2410c;border:1px solid #fed7aa}
.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.met{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.mlbl{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.mval{font-family:var(--mono);font-size:14px;font-weight:700}
.cb{color:var(--accent)!important}.cg{color:var(--green)!important}.cr{color:var(--red)!important}.cy{color:var(--yellow)!important}.cd{color:var(--text2)!important}.cp{color:var(--purple)!important}
.ctrk{background:var(--bg3);border-radius:4px;height:6px;margin:10px 0 5px;overflow:hidden}
.cfil{height:100%;border-radius:4px}.cfil.hi{background:linear-gradient(90deg,#057a55,#059669)}.cfil.md{background:linear-gradient(90deg,#b45309,#d97706)}.cfil.lo{background:linear-gradient(90deg,#b91c1c,#dc2626)}
.crow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;color:var(--text3)}
.exbox{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.exrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}.exrow:last-child{border-bottom:none}
.exlbl{font-size:14px;color:var(--text2)}.exval{font-family:var(--mono);font-size:14px;font-weight:700}
.al{display:flex;align-items:flex-start;gap:8px;padding:10px 13px;border-radius:8px;margin-bottom:8px;font-size:14px;line-height:1.5;font-weight:600}
.al.ok{background:var(--green-bg);border:1px solid var(--green-bd);color:var(--green)}
.al.bad{background:var(--red-bg);border:1px solid var(--red-bd);color:var(--red)}
.al.wrn{background:var(--yellow-bg);border:1px solid var(--yellow-bd);color:var(--yellow)}
.al.inf{background:var(--blue-bg);border:1px solid var(--blue-bd);color:var(--accent)}
.al.pur{background:var(--purple-bg);border:1px solid var(--purple-bd);color:var(--purple)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;transition:all .15s;white-space:nowrap;line-height:1}
.bp{background:var(--accent);color:#fff!important;border:1.5px solid var(--accent)}.bp:hover{background:var(--accent-h);border-color:var(--accent-h)}.bp:disabled{opacity:.4;cursor:not-allowed}
.bo{background:var(--card);color:var(--text2);border:1.5px solid var(--border2)}.bo:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)}.bo:disabled{opacity:.4;cursor:not-allowed}
.bg{background:transparent;color:var(--text2);border:none}.bg:hover{background:var(--bg2)}
.bsm{padding:5px 12px!important;font-size:13px!important;border-radius:var(--r)}
.bgn{background:var(--green);color:#fff!important;border:1.5px solid var(--green)}.bgn:hover{opacity:.9}
.brd{background:var(--red-bg);color:var(--red)!important;border:1.5px solid var(--red-bd)}.brd:hover{background:var(--red);color:#fff!important}
.btn-danger{color:var(--red)!important;border-color:var(--red-bd)}.btn-danger:hover{background:var(--red-bg)}
.tinp{background:var(--bg);border:1.5px solid var(--border2);border-radius:var(--r);padding:10px 14px;color:var(--text);font-family:var(--mono);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:3px;outline:none;width:100%}
.tinp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.tinp::placeholder{color:var(--text3);letter-spacing:1px;font-size:14px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:4px 9px;border-radius:6px;background:var(--bg2);border:1px solid var(--border);font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .12s}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)}
.chip.on{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.chip.pt{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)}
.tabr{display:flex;gap:2px;background:var(--bg2);border-radius:8px;padding:3px;margin-bottom:14px}
.tabb{flex:1;padding:6px 8px;border-radius:6px;border:none;background:transparent;color:var(--text3);font-family:var(--mono);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px}
.tabb.on{background:var(--card);color:var(--accent);box-shadow:var(--sh-sm)}
.pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r);font-family:var(--mono);font-size:13px;font-weight:600}
.pg2{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.pr2{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.py2{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-bd)}
.pb2{background:var(--blue-bg);color:var(--accent);border:1px solid var(--blue-bd)}
.pd2{background:var(--bg2);color:var(--text2);border:1px solid var(--border)}
.pp2{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-bd)}
.scrh{display:grid;grid-template-columns:72px 1fr 55px 80px 90px 90px;gap:8px;padding:8px 12px}
.scrh span{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.scrr{display:grid;grid-template-columns:72px 1fr 55px 80px 90px 90px;gap:8px;align-items:center;padding:10px 12px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border)}
.scrr:last-child{border-bottom:none}.scrr:hover{background:var(--bg2)}
.ni{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:8px}
.nh{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:4px}
.nm{font-family:var(--mono);font-size:14px;color:var(--text3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ji{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:8px}
.jh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.jtk{font-family:var(--mono);font-size:18px;font-weight:700}
.lpad{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:24px;margin-bottom:20px;position:relative;overflow:hidden}
.lpad::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#7c3aed,#059669)}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.lcrd{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s}
.lcrd:hover{border-color:var(--accent);background:var(--blue-bg);transform:translateY(-2px);box-shadow:var(--sh)}
.lico{font-size:20px;margin-bottom:8px}.ltit{font-size:14px;font-weight:700;margin-bottom:4px}
.ldsc{font-size:14px;color:var(--text3);line-height:1.5}
.lcst{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 8px;border-radius:5px;background:var(--blue-bg);border:1px solid var(--blue-bd);font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:700}
.empty{text-align:center;padding:48px 20px;color:var(--text3);font-size:14px;line-height:2.4}
.eico{font-size:32px;margin-bottom:12px}
.dots{display:flex;gap:6px;align-items:center;justify-content:center;padding:24px}
.dot{width:8px;height:8px;border-radius:50%;animation:db 1.2s infinite}
.dot:nth-child(1){background:var(--accent)}.dot:nth-child(2){background:#7c3aed;animation-delay:.2s}.dot:nth-child(3){background:var(--green);animation-delay:.4s}
@keyframes db{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-7px);opacity:1}}
.scrl{overflow-y:auto;max-height:600px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.slbl2{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.tbody{font-size:14px;line-height:1.85;color:var(--text2)}.tbody p{margin-bottom:10px;color:var(--text)}
.tpck{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:20px 24px;display:flex;align-items:center;gap:24px;margin-bottom:16px;position:relative;overflow:hidden}
.tpck::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--accent),transparent)}
.tplb{font-family:var(--mono);font-size:14px;color:var(--green);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;font-weight:700}
.tptk{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1}.tprs{flex:1;font-size:14px;color:var(--text2);line-height:1.6}
.tpsc{font-family:var(--mono);font-size:52px;font-weight:700;color:var(--green);line-height:1;text-align:center}
.tpsl{font-family:var(--mono);font-size:14px;color:var(--text3);text-align:center;margin-top:2px;text-transform:uppercase;letter-spacing:1px}
.mstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.ftr{padding:16px 20px;font-family:var(--mono);font-size:14px;color:var(--text3);text-align:center;letter-spacing:.5px;border-top:1px solid var(--border);margin-top:20px}
.errb{background:#fff5f5;border:1px solid #fecaca;border-radius:var(--r);padding:12px 14px;margin-bottom:12px;font-size:14px;color:#991b1b;line-height:1.6}
.ov{position:fixed;inset:0;background:rgba(17,24,39,.88);display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px)}
.ovbox{background:var(--card);border-radius:var(--r-lg);padding:32px;width:500px;max-width:95vw;box-shadow:var(--sh-md);border:1px solid var(--border)}
.sinp{width:100%;background:var(--bg);border:1.5px solid var(--border2);border-radius:var(--r);padding:10px 14px;color:var(--text);font-family:var(--mono);font-size:14px;outline:none;margin-bottom:8px}
.sinp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.flbl{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block}
.finp{background:var(--card);border:1.5px solid var(--border2);border-radius:8px;padding:9px 12px;color:var(--text);font-family:var(--mono);font-size:14px;font-weight:700;outline:none;width:100%}
.finp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,86,219,.1)}
.fhnt{font-size:14px;color:var(--text3);margin-top:2px}.frow{display:flex;flex-direction:column;gap:4px}
.rrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}.rrow:last-child{border-bottom:none}
.rlbl{font-size:14px;color:var(--text2);font-weight:600}.rval{font-family:var(--mono);font-size:16px;font-weight:700}
.acc-row{display:grid;grid-template-columns:70px 70px 70px 70px 70px 60px 1fr;gap:6px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);font-size:14px}
.acc-hdr{display:grid;grid-template-columns:70px 70px 70px 70px 70px 60px 1fr;gap:6px;padding:8px 12px}
.acc-hdr span{font-size:14px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.cong-row{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px}
.cong-row:last-child{border-bottom:none}

/* ── Design overhaul Block 1 — Now Tab (2026-08-19) ──────────────────── */
.collapsible-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.chev{font-size:11px;color:var(--text3);transition:transform .15s;flex-shrink:0}
.regime-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1.5px solid;border-radius:var(--r-lg);padding:14px 18px;margin-bottom:16px;box-shadow:var(--sh-sm)}
.regime-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:blink 2.5s infinite}
.brief-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh);padding:16px 18px;margin-bottom:16px}
.brief-body{margin-top:12px}
.pos-card2{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh-sm);cursor:pointer;transition:all .15s}
.pos-card2:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.exit-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;background:var(--bear-bg);color:var(--bear);border:1px solid var(--bear-bd);font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.5px;white-space:nowrap}
.conf-bar{background:var(--bg3);border-radius:4px;height:6px;overflow:hidden}
.conf-bar-fill{height:100%;border-radius:4px;transition:width .3s}

/* ══ MOBILE — added 2026-09-09 for phone-only access while travelling ══════
   Before this, edge.css and edge.js contained ZERO @media rules between them,
   so the desktop grid rendered unchanged on a phone. Measured against a 375px
   viewport with .pg's 20px padding on each side (335px usable):
     .acc-row / .acc-hdr  70px 70px 70px 70px 70px 60px 1fr = 410px fixed
     .scrh   / .scrr      72px 1fr 55px 80px 90px 90px      = 387px fixed
     .col2                300px 1fr                          = 300px fixed
   All three overflowed horizontally. repeat(4,1fr)/repeat(5,1fr) fit but gave
   67-84px columns, which is unreadable for numeric data.

   Breakpoint is 640px rather than 375px so landscape phones and small tablets
   get the same single-column treatment.                                    */
@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){

  /* ── every multi-column grid collapses to one column ── */
  /* !important added 2026-09-21. Without it this rule was DEAD on nine
     grids: edge.js writes style="grid-template-columns:repeat(4,1fr)"
     inline (lines 1913, 2284, 7729, 8134, 8233, 8438, 8551, 8649, 9449) and
     an inline style beats a stylesheet rule at any specificity, media query
     or not. That is why the Signals price row still rendered four 80px
     columns at 375px and broke "$3.62" into "$3." / "62" and "ENTRY" into
     "ENT" / "RY" — the same class of defect as the 2026-09-09 "breakpoint
     defeated" root cause, one layer up. Fixing it here rather than editing
     nine call sites keeps it in one place, and catches any tenth. */
  .col2, .col2eq, .col3, .col4, .pgrid, .mets, .lgrid,
  .scrh, .scrr, .acc-row, .acc-hdr{grid-template-columns:1fr!important}

  /* .mets is short numeric metrics (ENTRY / STOP / T1 / T2 / Hold) and reads
     well in pairs; a single column would make an already 56-screen Signals
     tab taller still. Same reasoning the .mstrip rule below already records,
     and two columns give ~170px — far more than "$3.62" or "ENTRY" needs, so
     nothing breaks mid-token. Declared AFTER the 1fr rule above so it wins. */
  .mets{grid-template-columns:repeat(2,1fr)!important}

  /* .mstrip is a strip of short numeric metrics — it reads well in pairs and
     would become a needlessly tall stack at 1fr. */
  .mstrip{grid-template-columns:repeat(2,1fr)}

  /* ── tap targets: 44px is the iOS/Android minimum ──
     .btn was 9px/14px (~34px tall), .tabb 6px/14px (~31px), .nt 11px/14px. */
  .btn{padding:12px 20px;font-size:16px;min-height:44px}
  .tabb{padding:12px 16px;font-size:16px;min-height:44px}
  .nt{padding:12px 14px;font-size:16px;min-height:44px}

  /* ── 16px minimum body text.
     16px on inputs is not cosmetic: iOS Safari (and iOS Chrome, which is also
     WebKit) auto-zooms the whole page when focusing an input under 16px. ── */
  .nt, .nt .bdg, .ctit, .pnm, .ppl, .pmt, .slbl, .ssub, .sbdg, .mlbl, .mval, .crow, .exlbl,
  .exval, .al, .btn, .tinp::placeholder, .chip, .tabb, .scrh span, .nh, .nm, .ltit, .ldsc,
  .lcst, .empty, .slbl2, .tbody, .tplb, .tprs, .tpsl, .ftr, .errb, .sinp, .flbl, .finp,
  .fhnt, .rlbl, .acc-row, .acc-hdr span, .cong-row{font-size:16px}
  /* Chrome at 375px measured the password field at 40px tall — under the
     44px touch minimum — because .sinp's 10px padding plus a 16px line box
     lands just short. The field is the primary tap target on the login
     screen, so it gets the same floor as the buttons. */
  .sinp, input, select, textarea{font-size:16px;min-height:44px}

  /* ── breathing room ── */
  .pg{padding:14px}
  .ovbox{width:100%;max-width:100vw;padding:20px}

  /* ── FIX 5: dashboard priority order on a phone ──
     `order` is ignored on block-level children, and .pg is a plain block, so
     it has to become a flex column here for any of this to apply. pgNow()
     wraps each of its six panels in a .mo-* div purely so they can be named.
     Desktop is untouched: outside this query .pg stays a block, the wrappers
     are inert, and document order (the desktop order) wins. */
  .pg{display:flex;flex-direction:column}
  .pg > .errb{order:0}
  .mo-regime{order:1}     /* health score / VIX / regime      */
  .mo-positions{order:2}  /* portfolio positions with P&L     */
  .mo-brief{order:3}      /* today's signals, BUY count       */
  .mo-alerts{order:4}     /* active BD + position alerts      */
  .mo-sell{order:5}       /* sell-signal monitor              */
  .mo-market{order:6}     /* everything else                  */
}


/* ══ MOBILE ROUND 2 — 2026-09-09 ══════════════════════════════════════════
   Round 1 added the 640px breakpoint but a CDP audit at 375x812 showed it was
   being DEFEATED by the overflow it was meant to fix: content wider than the
   device expands the layout viewport, and the media query keys off that
   expanded viewport. Measured window.innerWidth was 422px on Now/Login and
   676px on Signals — so on Signals the whole mobile stylesheet switched OFF
   (.mets was still rendering four columns with T2 off-screen).

   Everything below either removes a width forcer so the viewport stays at 375,
   or fixes something the screenshots exposed.                              */

/* Table scroll container — the wrapper is created in render(). Outside any
   media query on purpose: a 640px table overflows a 900px .pg too.          */
.tblwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){

  /* ── FIX 1: stop content forcing the viewport wider than the device ──
     min-width:0 is the load-bearing one. Grid and flex items default to
     min-width:auto, which refuses to shrink below their content — that is
     how a long ticker row or a wide card pushed the page past 640px. */
  .pg, .card, .cbody, .panel, .pos-card2, .mets, .col2, .col2eq, .col3,
  .col4, .pgrid, .lgrid, .mstrip, .scrr, .scrh, .acc-row, .acc-hdr{
    min-width:0;max-width:100%}
  .pg *{min-width:0}
  .card, .cbody, .panel, .pos-card2{overflow-wrap:anywhere}
  /* nowrap on these two kept the nav strip and button rows wider than the
     screen; at phone width wrapping is better than overflowing. */
  .btn, .nt{white-space:normal}

  /* ── FIX 2: header must grow with its contents ──
     .hdr was height:56px FIXED while .hdr-r wraps, so the buttons overflowed
     the box and painted on top of the sticky nav below it. */
  .hdr{height:auto;min-height:52px;padding:8px 12px;flex-wrap:wrap;gap:8px}
  .hdr-pills{display:none}          /* status pills live in Settings on a phone */
  .hdr-r{gap:8px;flex-wrap:nowrap}
  .hdr-item{min-height:44px;padding:10px 14px;font-size:15px}
  /* P2a, 2026-09-21 — de-emphasised. This rule gave Sign Out the full
     bear/red treatment on MOBILE ONLY, which made a logout button the
     highest-contrast element on all five tabs: on a 375px screen the
     visual headline of the product was "Sign Out". It stays a 44px tap
     target and keeps its door glyph, it just no longer outranks the data.
     Red is reserved for things that are actually wrong. */
  .hdr-logout{background:transparent;color:var(--text3);border:1px solid var(--border2)}
  .hdr-logout:hover{background:var(--bear-bg);color:var(--bear);border-color:var(--bear-bd)}
  .logo{font-size:15px}

  /* ── FIX 3: bottom tab bar ──
     The top strip was sticky at top:56px, overlapped by the wrapping header,
     and its right half sat off-screen with no scroll affordance. There are
     exactly five tabs, so a five-column grid fits without scrolling at all. */
  .nav{position:fixed;top:auto;bottom:0;left:0;right:0;
       display:grid;grid-template-columns:repeat(5,1fr);gap:0;
       padding:0;overflow:visible;
       border-top:1px solid var(--border);border-bottom:none;
       box-shadow:0 -2px 10px rgba(0,0,0,.08);z-index:400}
  .nt{flex-direction:column;gap:2px;min-height:56px;padding:8px 2px;
      font-size:11px;border-bottom:none;margin-bottom:0;
      justify-content:center;text-align:center;border-top:2px solid transparent}
  .nt.on{border-bottom-color:transparent;border-top-color:var(--accent)}
  .nt.gt.on{border-top-color:var(--green)}
  .nt.pt.on{border-top-color:var(--purple)}
  .nt-ico{font-size:19px;line-height:1}
  .nt-lbl{font-size:11px;letter-spacing:.2px}
  /* clear the fixed bar so the last panel and the footer stay reachable */
  .pg{padding-bottom:84px}
  .ftr{margin-bottom:72px}
  .back-to-top{bottom:80px}

  /* ── FIX 5: footer stacks instead of being squeezed into a 90px column ──
     display:flex and justify-content are set INLINE on this element, so only
     flex-direction can be overridden from here — which is all that is needed. */
  .ftr{flex-direction:column;gap:12px;align-items:stretch;text-align:center;
       font-size:13px;letter-spacing:0}

  /* ── FIX 5: remaining sub-44px tap targets seen in the CDP audit ── */
  .chev{font-size:16px;min-width:44px;min-height:44px;display:inline-flex;
        align-items:center;justify-content:center}
  .exit-badge{min-height:44px;padding:8px 14px;font-size:13px}
  summary{min-height:44px;display:flex;align-items:center;font-size:16px}
  details > summary{padding:10px 0}
}


/* ══ MOBILE ROUND 3 — 2026-09-09 ══════════════════════════════════════════
   Round 2 got Login, Signals and News to a true 375px layout viewport, but the
   CDP audit still measured 426px on Now, 555px on Research and 634px on
   Validation. A width-forcer walk (elements wider than the device with no
   scroll-container ancestor) named the remaining causes precisely:

     560px  details > pre        "--- a/cron/paper_trade_manager.php"
     568px  div.val-content > ul > li
     620px  div.pg > div.val-content

   <pre> is the interesting one: white-space:pre never wraps at any width, so a
   unified diff rendered inside a <details> sets a hard floor on the page. And
   .val-content carries max-width:820px but was never in the collapse list.  */

@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){

  /* Last-resort clamp. overflow-x:CLIP rather than hidden on purpose: `hidden`
     turns the element into a scroll container, which would break the sticky
     header and the fixed bottom bar's stacking. `clip` does neither. This is
     the belt to the braces below — nothing it clips is content that was not
     already given its own scroll container. */
  body{max-width:100vw;overflow-x:clip}

  /* Preformatted blocks (diffs, JSON, stack traces) must wrap on a phone. */
  pre, code, kbd, samp{white-space:pre-wrap;overflow-wrap:anywhere;
                       word-break:break-word;max-width:100%;font-size:12px}
  pre{overflow-x:auto}

  /* Lists were indented by the browser default 40px and their long items were
     not breaking. */
  ul, ol{padding-left:20px;max-width:100%}
  li{overflow-wrap:anywhere;max-width:100%}

  /* .val-content is the Validation/Research page wrapper (max-width:820px). */
  .val-content, details, summary, blockquote, figure{max-width:100%;min-width:0}
  details > *{max-width:100%}

  /* Long unbroken tokens — GOLD_ZONE_BREAK, SOCIAL_SELL_CHART, ticker//date
     concatenations — were setting min-content width on their containers.

     ⚠ DO NOT SOFTEN THIS TO `break-word`. Tried and reverted 2026-09-21,
     measured through CDP at 375px both ways. The theory was that `anywhere`
     causes the mid-word splits; it does not, in any amount worth having:

       metric            anywhere -> break-word
       Research breaks    1228 -> 1213   (no material change)
       Validation breaks   939 ->  734
       Now breaks          128 ->   99
       OVERFLOWING ELEMENTS  0 ->  21 / 11 / 6   <- the regression

     So `break-word` bought little and brought back the exact horizontal
     overflow this rule exists to prevent — the 2026-09-09 defect. The real
     cause of the visible price and label splitting was inline
     `grid-template-columns` defeating the collapse rule above; fixing that
     took .mets from four ~80px columns to two 135px ones and dropped
     .mets mid-token breaks to ZERO with overflow still at zero. */
  .pg, .pg div, .pg span, .pg td, .pg th, .pg li, .pg p{overflow-wrap:anywhere}

  /* Media and embeds should never exceed the column. */
  img, svg, canvas, iframe, video{max-width:100%;height:auto}
}


/* ══ MOBILE ROUND 4 — 2026-09-09 ══════════════════════════════════════════
   Round 2/3 verified clean in headless Chrome but the real phone still showed
   the desktop header and no bottom bar. The cause was NOT css: the server sent
   no Cache-Control at all (mod_headers was not even enabled), so the device
   was running August's edge.css. Fixed in .htaccess + index.html ?v=.

   Two real css defects were found alongside it, both fixed here.            */

/* The overflow menu button is phone-only; on desktop the pills are visible so
   it would be redundant. Base state is hidden, the media block turns it on. */
.hdr-more{display:none}
.hdr-menu{position:absolute;top:100%;right:8px;z-index:500;background:var(--card);
          border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-md);
          padding:6px;display:flex;flex-direction:column;gap:4px;min-width:210px}
.hdr-menu-item{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;
               border:none;background:transparent;border-radius:6px;cursor:pointer;
               font-family:var(--sans);font-size:15px;font-weight:600;color:var(--text);
               text-align:left;width:100%}
.hdr-menu-item:hover{background:var(--bg2)}
.hdr{position:sticky}
.lastupd{display:flex;align-items:center;justify-content:space-between;gap:10px;
         font-family:var(--mono);font-size:13px;color:var(--text3);margin-bottom:10px}

@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){

  /* PROBLEM 2: Social and Settings now sit inside .hdr-pills, which this
     already hides. The menu button replaces them. */
  .hdr-more{display:inline-flex}
  .hdr-refresh{min-width:44px;justify-content:center;font-size:20px;padding:8px 12px}

  /* PROBLEM 1: also drop the version number — it costs horizontal space and
     tells Brian nothing he needs on a phone. */
  .logo-ver{display:none}
  .logo{gap:6px}

  /* the header must be the positioning context for .hdr-menu */
  .hdr{position:sticky;top:0;overflow:visible}
  .hdr-r{position:relative}

  /* PROBLEM 3 belt-and-braces: make certain nothing re-establishes the old
     top strip. These repeat Round 2's rules at higher specificity so a later
     stylesheet edit cannot silently undo the bottom bar. */
  .nav{position:fixed !important;top:auto !important;bottom:0 !important;
       left:0;right:0;width:100%;
       display:grid !important;grid-template-columns:repeat(5,1fr);
       overflow:visible !important;z-index:400}

  /* iPhone home-screen apps sit under the home indicator; keep the bar clear. */
  .nav{padding-bottom:env(safe-area-inset-bottom,0)}
  /* 132px, not 84px (2026-09-21): .back-to-top is bottom:80px and 46px
     tall on mobile, so it reaches 126px up from the bottom edge. At 84px
     the FAB floated over the last line of content. 132px clears it with a
     6px gap. */
  .pg{padding-bottom:calc(132px + env(safe-area-inset-bottom,0))}

  .lastupd{font-size:12px}
  /* 44px, not 36px (2026-09-21) — the iOS/Android minimum the rest of this
     media query already enforces. This one was missed. */
  .lastupd-btn{min-height:44px;padding-top:10px;padding-bottom:10px}
}


/* ══ EDGE DAILY BRIEF PANEL — 2026-09-10 ═════════════════════════════════
   First card on the Now tab (edge.js renderDailyBriefPanel). Rows are
   flex label/value pairs rather than a table, so no line can force the
   document wider than a phone; long values wrap inside their own cell.     */
.dbrief{margin-bottom:14px}
.dbrief-hdr{flex-wrap:wrap;gap:8px}
.dbrief-title{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.02em;
              color:var(--text);min-width:0;overflow-wrap:anywhere}
.dbrief-body{padding-top:6px;padding-bottom:8px}
.dbrief-row{display:flex;align-items:baseline;gap:2px 12px;padding:7px 0;
            border-bottom:1px solid var(--border);font-size:14px;line-height:1.45}
.dbrief-row:last-child{border-bottom:none}
.dbrief-k{flex:0 0 118px;font-family:var(--mono);font-size:12px;font-weight:700;
          color:var(--text2);letter-spacing:.02em}
.dbrief-v{flex:1 1 0;min-width:0;font-family:var(--mono);color:var(--text);overflow-wrap:anywhere}
.dbrief-sub{color:var(--text3);font-size:12px}
.dbrief-warn,.dbrief-bad{padding:0 6px;border-radius:6px;font-weight:700}
.dbrief-warn{color:var(--yellow);background:var(--yellow-bg);border:1px solid var(--yellow-bd)}
.dbrief-bad{color:var(--red);background:var(--red-bg);border:1px solid var(--red-bd)}
.dbrief-err{font-size:13px;color:var(--yellow);background:var(--yellow-bg);
            border:1px solid var(--yellow-bd);border-radius:8px;padding:6px 10px;margin:4px 0 6px}
@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){
  .mo-dailybrief{order:-1}          /* above .mo-updated (order 0) and every numbered panel */
  /* Title wraps beside Refresh instead of pushing the button onto its own
     row — the first CDP pass showed a ~120px header on a card that already
     fills the first phone screen. */
  .dbrief-hdr{flex-wrap:nowrap;padding:10px 14px}
  .dbrief-title{flex:1 1 auto;font-size:12px}
  /* 104px (2026-09-21): at 96px "DIRECTIONAL ACC." still wrapped. Paired
     with shortening the label itself in edge.js — both were needed. */
  .dbrief-k{flex-basis:118px;font-size:11px}
  .dbrief-row{font-size:13px}
  .dbrief-btn{min-height:44px;flex:0 0 auto}
}


/* ══ TICKER INTEL — 2026-09-10 ════════════════════════════════════════════
   Search bar at the top of the Now tab + result card (edge.js
   renderTickerIntelPanel). PROS green, CONS red, VERDICT amber. The input is
   16px so iOS does not zoom the page when it takes focus.                   */
.ti-wrap{margin-bottom:14px}
.ti-bar{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);
        border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:8px 10px}
.ti-lbl{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--text2);white-space:nowrap;flex:0 0 auto}
.ti-input{flex:1 1 auto;min-width:0;height:40px;padding:0 12px;border:1px solid var(--border2);border-radius:10px;
          font-family:var(--mono);font-size:16px;text-transform:uppercase;background:var(--bg);color:var(--text)}
.ti-input:focus{outline:2px solid #2563eb;outline-offset:1px;background:var(--card)}
.ti-btn{flex:0 0 auto;height:40px;padding:0 16px;background:var(--text);color:var(--card);border-radius:10px;font-weight:700}
.ti-btn:disabled{opacity:.6;cursor:wait}
.ti-card{margin-top:10px}
.ti-hdr{padding:8px 14px}
.ti-title{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text);min-width:0;overflow-wrap:anywhere}
.ti-close{flex:0 0 auto}
.ti-body{padding-top:12px}
.ti-line{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.ti-up{color:var(--green)}
.ti-down{color:var(--red)}
.ti-sub{font-size:12px;color:var(--text3);margin-top:4px;overflow-wrap:anywhere}
.ti-warn{color:var(--yellow);font-weight:700}
.ti-status{padding:14px 16px;font-size:14px;color:var(--text2)}
.ti-sec{margin-top:12px;border-radius:10px;padding:8px 12px}
.ti-sec-h{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:4px}
.ti-sec ul{margin:0;padding-left:18px}
.ti-sec li{font-size:14px;line-height:1.5;margin:3px 0;overflow-wrap:anywhere}
.ti-pros{background:var(--green-bg);border:1px solid var(--green-bd)}
.ti-pros .ti-sec-h,.ti-pros li{color:var(--green)}
.ti-cons{background:var(--red-bg);border:1px solid var(--red-bd)}
.ti-cons .ti-sec-h,.ti-cons li{color:var(--red)}
.ti-verdict{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--yellow-bg);border:1px solid var(--yellow-bd);
            color:var(--yellow);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.ti-foot{margin-top:10px;font-size:12px;color:var(--text3);line-height:1.5;overflow-wrap:anywhere}
.ti-err{margin-top:8px;font-size:13px;color:var(--red);background:var(--red-bg);border:1px solid var(--red-bd);border-radius:8px;padding:6px 10px}
@media (max-width: 640px), (hover: none) and (pointer: coarse) and (max-width: 950px){
  .mo-tintel{order:-2}              /* search sits above the Daily Brief (-1) */
  .ti-input,.ti-btn{height:44px}
  .ti-btn{padding:0 14px}
  .ti-lbl{font-size:11px}
  .ti-close{min-height:44px;min-width:44px}
}


/* ══ LOGIN SCREEN — 2026-09-09 ════════════════════════════════════════════
   render() returns early for S.page==="login" and emits only this wrapper
   around pgLogin(), so there is no header, nav, footer or overlay to style
   around. 100dvh after 100vh because mobile Safari's 100vh includes the
   collapsing URL bar and leaves the card sitting slightly low.              */
.loginscreen{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
             justify-content:center;padding:24px;background:var(--bg)}
.loginscreen > div{width:100%;max-width:380px;min-height:0}

/* ══════════════════════════════════════════════════════════════════════
   NOW + VALIDATION REDESIGN (2026-09-24)
   Mobile-first. Every rule below is authored at 375px and widened upward.

   ⚠ NO INLINE grid-template-columns ANYWHERE IN THE JS THAT USES THESE.
   The 2026-09-21 UI audit found inline grid styles written by edge.js
   silently defeating the mobile collapse stylesheet on NINE grids — an
   inline style beats a stylesheet rule at any specificity, media query or
   not. Columns for these components are declared HERE and only here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── §1 system status: one line, always visible ───────────────────────── */
.nv-status{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  font-family:var(--mono);font-size:13px;line-height:1.45;
}
.nv-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.nv-status-sep{color:var(--text3)}
.nv-status-warn{color:var(--neutral);font-weight:700}
.nv-status-btn{margin-left:auto;flex:0 0 auto}

/* ── shared card shell ────────────────────────────────────────────────── */
.nv-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;margin-bottom:12px;
}
.nv-card-hdr{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--text3);margin-bottom:10px;
}
.nv-count{color:var(--text2)}
.nv-empty{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:18px 14px;margin-bottom:12px;text-align:center;
}
.nv-empty-h{font-size:15px;font-weight:700;margin-bottom:6px}
.nv-empty-s{font-size:13px;color:var(--text3);line-height:1.5}

/* ── §2 signal card ───────────────────────────────────────────────────── */
.nv-sig{
  border:1px solid var(--border);border-radius:var(--r);
  padding:12px;margin-bottom:10px;background:var(--bg);
}
.nv-sig:last-child{margin-bottom:0}
.nv-sig-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.nv-tick{font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:.5px}
.nv-conf{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text2)}
.nv-pill{
  font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--bg3);color:var(--text3);white-space:nowrap;
}
.nv-why{font-size:13px;line-height:1.5;color:var(--text2);margin-bottom:4px}
.nv-why b{color:var(--text);font-weight:700}
.nv-mkt{font-size:12px;line-height:1.5;color:var(--text3);margin-bottom:4px}
.nv-outcome{font-size:12px;color:var(--text3);margin-bottom:6px}
.nv-sig-actions{display:flex;justify-content:flex-end}
.nv-thesis{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  font-size:13px;line-height:1.6;color:var(--text2);
  /* ⚠ DO NOT SOFTEN — see edge.css's existing marker. Long unbroken
     thesis strings overflow at 375px without this. */
  overflow-wrap:anywhere;
}

/* ── §3 alerts ────────────────────────────────────────────────────────── */
.nv-alert{
  border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;margin-bottom:8px;background:var(--bg);
}
.nv-alert:last-child{margin-bottom:0}
.nv-alert-t{font-size:14px;font-weight:700;margin-bottom:3px}
.nv-alert-s{font-family:var(--mono);font-size:12px;color:var(--text3);line-height:1.5}

/* ── §4 market conditions ─────────────────────────────────────────────── */
.nv-mkt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.nv-mkt-k{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3)}
.nv-mkt-v{font-family:var(--mono);font-size:14px;font-weight:700}

/* ── §5 portfolio ─────────────────────────────────────────────────────── */
.nv-pos{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px;
}
.nv-pos:last-child{border-bottom:none}
.nv-pos-t{font-weight:800;min-width:56px}
.nv-pos-p{font-weight:700}
.nv-pos-flag{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--neutral)}

/* ── §6 gate ──────────────────────────────────────────────────────────── */
.nv-gate{font-family:var(--mono);font-size:13px;line-height:1.6}
.nv-gate-s{font-weight:800;letter-spacing:.5px}

/* ── validation: gate hero ────────────────────────────────────────────── */
.vx-hero{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;margin-bottom:14px;
}
.vx-hero-h{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.vx-metric-l{font-size:12px;color:var(--text3);margin-bottom:2px}
.vx-metric-v{font-family:var(--mono);font-size:30px;font-weight:800;line-height:1.1}
.vx-bar{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden;margin:8px 0 6px}
.vx-bar-f{height:100%;border-radius:999px}
.vx-sub{font-size:12px;color:var(--text3);line-height:1.6;overflow-wrap:anywhere}
.vx-secondary{
  display:grid;grid-template-columns:1fr;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
}
.vx-sec-row{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.vx-sec-k{color:var(--text3)}
.vx-sec-v{font-family:var(--mono);font-weight:700;text-align:right}

/* ── validation: layer + history tables ───────────────────────────────── */
.vx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vx-tbl{width:100%;border-collapse:collapse;font-size:12px}
.vx-tbl th{
  text-align:left;padding:7px 6px;font-size:10px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text3);white-space:nowrap;
  border-bottom:1px solid var(--border);
}
/* ⚠ 12px vertical is a TAP TARGET, not styling. The 2026-09-24 CDP audit
   measured these rows at 34px while they carry an onclick that expands the
   signal's conditions — under the 44px floor this project enforces on every
   other control. 12px + 20px line-height clears it. */
.vx-tbl td{padding:13px 6px;border-bottom:1px solid var(--border);white-space:nowrap}
.vx-tbl tr:last-child td{border-bottom:none}
.vx-mono{font-family:var(--mono);font-weight:700}
.vx-row-tap{cursor:pointer}
.vx-legend{font-size:11px;color:var(--text3);margin-top:8px;line-height:1.6}
.vx-cond{
  font-size:12px;line-height:1.7;color:var(--text2);white-space:normal;
  padding:8px 10px;background:var(--bg);border-radius:var(--r);overflow-wrap:anywhere;
}

/* ── validation: design cards ─────────────────────────────────────────── */
.vx-design{
  border:1px solid var(--border);border-radius:var(--r);
  padding:12px;margin-bottom:10px;background:var(--bg);
}
.vx-design-t{font-size:13px;font-weight:800;letter-spacing:.4px;margin-bottom:6px;overflow-wrap:anywhere}
.vx-design-s{font-size:12px;font-weight:700;margin-bottom:6px}
.vx-design-b{font-size:12px;color:var(--text3);line-height:1.6;overflow-wrap:anywhere}

/* ── collapsible ──────────────────────────────────────────────────────── */
/* ⚠ min-height 44px is not cosmetic. The 2026-09-24 CDP audit measured these
   headers at 21px — under the 44px tap-target floor the same audit enforces
   on every other control, and these are the ONLY way to open Market
   Conditions, Portfolio detail, Audit Findings and System Details on a
   phone. A control that is hard to hit is a section that does not exist. */
.vx-collapse-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;user-select:none;
  min-height:44px;
}
/* The header doubles as a card title, so the uppercase label keeps its
   bottom margin while the tap box grows around it rather than below it. */
.nv-card-hdr.vx-collapse-hdr{margin-bottom:4px}
.vx-chev{transition:transform .15s ease;color:var(--text3);font-size:12px}

/* ── 376px and up ─────────────────────────────────────────────────────── */
@media (min-width:600px){
  .nv-mkt-grid{grid-template-columns:repeat(4,1fr)}
  .vx-secondary{grid-template-columns:repeat(3,1fr)}
  .vx-sec-row{flex-direction:column;gap:2px}
  .vx-sec-v{text-align:left}
}