/* app.css — Synthetic Control Panel v4 shell + design system
   Tokens extracted from synthetictrader.ai — extend, don't restyle. */

:root{
  --bg:#070a0e;--panel:#0e141b;--panel-top:#121a22;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.04);
  --txt:#eaf1f6;--dim:#7e8c99;--faint:#55626d;
  --cyan:#26d8e6;--cyan2:#0bb4c2;--green:#36d399;--red:#f06b6b;--amber:#f3b53f;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --hd-h:110px;   /* topbar grew with the 48px website-style logo */
}
*{box-sizing:border-box}
html{background:#05080c}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(38,216,230,.05),transparent 60%) no-repeat,#05080c;
  color:var(--txt);font-family:var(--sans);font-size:13.5px;min-height:100vh;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- header */
.hd{position:sticky;top:0;z-index:5;background:rgba(10,14,19,.82);backdrop-filter:blur(8px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 26px;border-bottom:1px solid var(--line2)}
/* brand block styled to match the website header (synthetictrader.ai):
   plain circular logo, gradient-filled wordmark, mono sub */
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.mark{width:48px;height:48px;border-radius:50%;background:#05080a;overflow:hidden;flex:0 0 auto;display:block}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.name{font-family:Inter,"Segoe UI",system-ui,sans-serif;font-weight:600;letter-spacing:5px;font-size:21px;line-height:1;background:linear-gradient(#fff,#9fb4bf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sub{color:#55626d;font-family:var(--mono);font-size:11px;letter-spacing:2px;margin-top:3px}
.topright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:6px}
.livedot.stale{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.meta{color:var(--dim);font-size:11.5px;font-family:var(--mono);white-space:nowrap}

/* price ticker */
.ticker{display:flex;gap:20px;align-items:center;justify-content:flex-end;flex:1;min-width:0;overflow:hidden;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.tick{display:inline-flex;gap:7px;align-items:baseline}
/* neutral and in-brand (Chris 2026-08-28): the per-asset colouring cheapened
   the topbar. Kept a touch larger than the original 10px, nothing more. */
.tick .sym{color:var(--faint);font-size:11px;letter-spacing:1.6px}
.tick .px{color:var(--txt)}
.tick .chg{font-size:10.5px}
.tick .chg.pos{color:var(--green)}
.tick .chg.neg{color:var(--red)}

/* risk-heat arc (topbar) */
.riskheat{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.riskheat canvas{display:block;width:46px;height:30px}
.rh-pct{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.5px;margin-top:-1px}

/* dry-run toggle (topbar) */
.dry{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-size:11px}
.dry input{accent-color:#26d8e6}
.dry b{letter-spacing:1px}
.dry.armed{border-color:var(--red);background:rgba(240,107,107,.08)}
.dry.armed b{color:var(--red)}

/* tab bar */
.tabbar{display:flex;gap:28px;padding:0 26px;border-bottom:1px solid var(--line)}
.tabbar a{color:var(--dim);text-decoration:none;padding:11px 2px 10px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabbar a:hover{color:var(--txt)}
.tabbar a.active{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ---------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:330px minmax(0,1fr) 300px;
  min-height:calc(100vh - var(--hd-h))}
/* The permanent LIVE TRADES column (Chris 2026-08-28) - mirrors .side:
   sticky, full height, clear of the bottom bars. */
.railside{min-width:0;border-left:1px solid var(--line);background:rgba(10,14,19,.55);
  position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h));
  padding:14px 12px;overflow:hidden;display:flex;flex-direction:column}
.railside .panel{height:100%;display:flex;flex-direction:column;margin-bottom:0;min-height:0}

/* ---- the rail is CHROME, not content (Chris 2026-08-28) ----------------
   It is a permanent part of the shell now, so it should read like the left
   sidebar and the tab bar - part of the frame - rather than a card that
   happens to be on this page. A bordered, rounded panel sitting inside an
   already-bordered column was framing the same thing twice.
   Done in CSS against the EXISTING markup, so railHtml stays byte-identical
   to the panel fork's copy and the resync stays a straight file copy. */
.railside{padding:0}
.railside .panel{background:transparent;border:none;border-radius:0;padding:0}
.railside .panel-top{background:transparent;border-bottom:1px solid var(--line);
  padding:13px 16px 12px;font-size:11.5px;letter-spacing:2px;color:var(--dim)}
.railside .railsec{background:transparent;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line2);padding:9px 16px}
.railside .railscroll > .railsec:first-child{border-top:none}
.railside .ltrow{padding-left:16px;padding-right:14px}
.railside .ltrow:hover,.railside .ltrow.tap:hover{background:rgba(38,216,230,.055)}
.railside .railscroll{scrollbar-width:thin}
.main{min-width:0;padding:16px 26px 40px}
.screen{min-width:0}

/* sidebar */
.side{border-right:1px solid var(--line);background:rgba(10,14,19,.55);display:flex;flex-direction:column;position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h))}
.orbwrap{padding:12px 26px 4px;text-align:center}
#avatar{width:72%;max-width:210px;display:inline-block;
  filter:drop-shadow(0 0 18px rgba(38,216,230,.5)) drop-shadow(0 0 46px rgba(38,216,230,.22));
  transition:filter .6s}
#avatar.h-warn{filter:drop-shadow(0 0 18px rgba(243,181,63,.55)) drop-shadow(0 0 46px rgba(243,181,63,.22))}
#avatar.h-bad{filter:drop-shadow(0 0 18px rgba(240,107,107,.6)) drop-shadow(0 0 46px rgba(240,107,107,.25))}
#avatar.think{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{
  0%,100%{filter:drop-shadow(0 0 14px rgba(38,216,230,.45)) drop-shadow(0 0 38px rgba(38,216,230,.18))}
  50%{filter:drop-shadow(0 0 26px rgba(38,216,230,.85)) drop-shadow(0 0 64px rgba(38,216,230,.4))}
}
.aistatus{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--faint);padding:4px 0 10px;border-bottom:1px solid var(--line2)}
.aistatus b{color:var(--green);font-weight:600}

/* chat */
.chat{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px}
.bub{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.55;max-width:94%;white-space:pre-wrap}
.bub.ai{background:rgba(38,216,230,.05);border-color:rgba(38,216,230,.18);align-self:flex-start}
.bub.me{background:var(--panel-top);align-self:flex-end}
.bub.think{color:var(--dim);font-family:var(--mono)}
.chiprow{display:flex;gap:6px;flex-wrap:wrap}
button.chip{font-size:10.5px;padding:3px 9px}
.chatin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chatin input{flex:1}
.chatin button{color:var(--cyan);border-color:rgba(38,216,230,.4);font-size:15px;padding:4px 14px}

/* ---------------------------------------------------------------- shared components */

/* section header — cyan smallcaps with hairline rule */
.mkt{color:var(--cyan);font-size:11px;letter-spacing:4px;font-weight:600;text-transform:uppercase;margin:26px 0 12px;display:flex;align-items:center;gap:10px}
.mkt:first-child{margin-top:4px}
.mkt:after{content:'';flex:1;height:1px;background:var(--line)}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin-bottom:12px;min-width:0}
.panel.tight{padding:0;overflow:hidden}
.panel-top{background:var(--panel-top);border-bottom:1px solid var(--line2);padding:10px 18px}
.panel-title{color:var(--faint);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}

/* KPI tiles */
.strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 16px;min-width:132px}
.kpi .l{color:var(--faint);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase}
.kpi .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:3px}
.kpi .v.cy{color:var(--cyan)}
.kpi .v.gr{color:var(--green)}
.kpi .v.rd{color:var(--red)}
.kpi .v.am{color:var(--amber)}
.kpi .s{color:var(--dim);font-size:10.5px;font-family:var(--mono);margin-top:2px}

/* status pills */
.pill{font-family:var(--mono);font-size:11px;padding:2px 9px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.pill.live{color:var(--green);border-color:rgba(54,211,153,.35)}
.pill.calibration{color:var(--amber);border-color:rgba(243,181,63,.35)}
.pill.shadow{color:#a78bfa;border-color:rgba(167,139,250,.35)}
.pill.bench{color:var(--dim)}
.pill.graveyard{color:#6e4747}
.pill.down{color:var(--red);border-color:rgba(240,107,107,.4)}

/* dark tables */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{color:var(--faint);font-weight:400;font-size:10.5px;text-transform:uppercase;letter-spacing:1.5px;text-align:left;padding:7px 14px;border-top:none}
.tbl td{padding:7px 14px;text-align:left;border-top:1px solid var(--line2)}
.tbl td.mono,.tbl .mono{font-family:var(--mono);font-size:12px}
.tbl tr:hover td{background:rgba(255,255,255,.015)}

/* value colouring */
.r.pos,.pos{color:var(--green)}
.r.neg,.neg{color:var(--red)}
.openflag{color:var(--amber);font-family:var(--mono);font-size:11px}
.note{color:var(--dim);font-size:12px}
.warn{color:var(--amber);font-size:12.5px;font-family:var(--mono);margin:8px 0}

/* buttons + inputs */
button{background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:5px 13px;font-size:11.5px;cursor:pointer;font-family:var(--sans);letter-spacing:.5px}
button:hover{border-color:var(--cyan2);color:var(--cyan)}
button:disabled{opacity:.45;cursor:default}
button.danger:hover{border-color:var(--red);color:var(--red)}
button.go{border-color:rgba(54,211,153,.4)}
button.go:hover{border-color:var(--green);color:var(--green)}
input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:6px 10px;font-size:13px;font-family:var(--mono)}
input:focus{outline:none;border-color:var(--cyan2)}

/* charts */
canvas{display:block;width:100%}

/* layout helpers for screens */
.grid{display:grid;gap:12px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1200px){.cols-3,.cols-4{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- modal */
#modal{position:fixed;inset:0;background:rgba(4,7,10,.82);display:none;align-items:center;justify-content:center;z-index:20}
#modal .box{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:780px;width:92%;max-height:82vh;overflow:auto;padding:22px}
#modal h3{margin:0 0 6px;letter-spacing:1px}
.mbtns{display:flex;gap:10px;margin-top:10px}
pre{background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:12px;font-size:11px;white-space:pre-wrap;color:#7ee787;font-family:var(--mono)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:420px}
  .railside{position:static;height:420px;border-left:none;border-top:1px solid var(--line)}
  .ticker{display:none}
}

/* ---------------- bottom ticker bars: NEWS + SYNTHETIC (Chris 2026-08-21) */
:root{--bars-h:101px}   /* two 50px bars + divider (50% bigger, Chris) */
.side,.railside{height:calc(100vh - var(--hd-h) - var(--bars-h))}
.main{padding-bottom:calc(40px + var(--bars-h))}
#bars{position:fixed;left:0;right:0;bottom:0;z-index:15;border-top:1px solid var(--line);background:rgba(8,11,15,.93);backdrop-filter:blur(6px)}
.bar{display:flex;align-items:stretch;height:50px;border-top:1px solid var(--line2)}
.bar:first-child{border-top:none}
.barlabel{flex:0 0 150px;display:flex;align-items:center;padding:0 20px;font-size:15px;letter-spacing:4px;text-transform:uppercase;font-weight:600;border-right:1px solid var(--line2);white-space:nowrap}
.barlabel.news{color:var(--cyan);background:linear-gradient(90deg,rgba(38,216,230,.13),transparent);box-shadow:inset 3px 0 0 var(--cyan)}
.barlabel.synth{color:var(--green);background:linear-gradient(90deg,rgba(54,211,153,.13),transparent);box-shadow:inset 3px 0 0 var(--green)}
.barviewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.bartrack{display:inline-flex;align-items:center;height:50px;white-space:nowrap;will-change:transform;animation:barscroll linear infinite;animation-duration:60s}
.bar:hover .bartrack{animation-play-state:paused}
@keyframes barscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.barcopy{display:inline-flex;align-items:center;flex:none}
.baritem{display:inline-flex;align-items:center;gap:10px;font-size:17px}
/* a resolvable trade in the ticker is clickable - it opens the same detail
   sheet the rail opens (Chris 2026-08-28). The marquee already pauses on
   hover, so there is a stationary target to hit. */
.baritem.btap{cursor:pointer;border-radius:6px;padding:2px 6px;margin:0 -6px;
  transition:background .12s}
.baritem.btap:hover,.baritem.btap:focus-visible{background:rgba(38,216,230,.1);
  outline:none}
.baritem.btap:focus-visible{box-shadow:0 0 0 1px var(--cyan2)}
.barsep{color:var(--cyan);opacity:.35;font-size:12px;margin:0 24px}
.bage{color:var(--faint);font-family:var(--mono);font-size:15px}
.bsrc{color:var(--dim);font-size:15px;letter-spacing:.5px}
.bhead{color:var(--txt);text-decoration:none}
.bhead:hover{color:var(--cyan)}
.btid{font-family:var(--mono);font-size:16px;color:var(--cyan)}
.bdim{color:var(--dim);font-size:15px}
.bchip{font-family:var(--mono);font-size:13px;letter-spacing:1px;padding:2px 10px;border-radius:4px;text-transform:uppercase;flex:none}
.bchip.sys,.bchip.entry{color:var(--cyan);border:1px solid rgba(38,216,230,.35);background:rgba(38,216,230,.08)}
.bchip.win{color:var(--green);border:1px solid rgba(54,211,153,.35);background:rgba(54,211,153,.1)}
.bchip.lose{color:var(--red);border:1px solid rgba(240,107,107,.3);background:rgba(240,107,107,.08)}
.bchip.stop{color:var(--red);border:1px solid rgba(240,107,107,.4);background:rgba(240,107,107,.12)}
.bchip.moved{color:var(--amber);border:1px solid rgba(243,181,63,.35);background:rgba(243,181,63,.1)}
.bchip.brk{color:#0a0d10;background:var(--red);font-weight:700;box-shadow:0 0 10px rgba(240,107,107,.55);animation:brkpulse 1.1s ease-in-out infinite}
@keyframes brkpulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (max-width:980px){#bars{display:none}.side{height:420px}.main{padding-bottom:40px}}

/* Overview: LIVE TRADES right rail (Chris 2026-08-21) */
/* .ovwrap / .ovmain / .ovbody / .ovrail all removed 2026-08-28: the rail
   moved to the shell and the overview became a single flat grid (.ovgrid),
   so these described a structure that no longer exists. */

/* Overview is STATIC — no page scroll; the sub boxes scroll instead
   (LIVE TRADES via .railscroll, the chat pane already scrolls) */
body[data-tab="overview"]{overflow:hidden}
body[data-tab="overview"] .main{padding-bottom:16px}
#screen-overview{height:calc(100vh - var(--hd-h) - var(--bars-h) - 32px);overflow:hidden}
#screen-overview .ovgrid{height:100%}
#screen-overview .ovstrip{flex:0 0 auto}
.railscroll{flex:1;overflow-y:auto;min-height:0}

/* Overview centre spread: neural galaxy + projection/performance chart */
#ov-centre{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:9px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,rgba(20,32,44,.55),rgba(6,9,13,.2) 70%)}
#ov-centre canvas{position:absolute;inset:0}
#ov-galaxy{z-index:1;opacity:.6}   /* dulled so the equity line reads over it */
#ov-perf{z-index:2;pointer-events:none}
.ov-tf,.ov-series{position:absolute;z-index:3;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.ov-tf{left:12px}
.ov-series{right:12px;justify-content:flex-end;max-width:62%}
.ovchip{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);background:rgba(8,11,15,.6);color:var(--dim);cursor:pointer}
.ovchip:hover{border-color:var(--cyan2);color:var(--cyan)}
#ov-pace{position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:4px 13px;border-radius:20px;border:1px solid var(--line);background:rgba(8,11,15,.7);white-space:nowrap}
.railsec{background:var(--panel-top);border-top:1px solid var(--line2);padding:8px 14px;color:var(--faint);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.ltrow{display:flex;align-items:center;gap:8px;padding:7px 14px;border-top:1px solid var(--line2);font-size:11.5px;min-width:0}
.ltrow:hover{background:rgba(255,255,255,.015)}
.ltrow .when{color:var(--dim);font-family:var(--mono);font-size:10.5px;flex:0 0 auto}
.ltrow .tid{font-family:var(--mono);font-size:11px;color:var(--cyan);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ltrow .right{margin-left:auto;font-family:var(--mono);font-size:11.5px;white-space:nowrap;flex:0 0 auto}
.ltrow .sub{color:var(--dim);font-size:10px}
.sbadge{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:1px 6px;border-radius:3px;text-transform:uppercase;flex:0 0 auto}
.sbadge.long{color:var(--green);background:rgba(54,211,153,.1);border:1px solid rgba(54,211,153,.3)}
.sbadge.short{color:var(--red);background:rgba(240,107,107,.1);border:1px solid rgba(240,107,107,.3)}


/* Overview: single instrument strip (Chris 2026-08-21) */
.ovstrip{display:flex;align-items:stretch;overflow-x:auto;background:var(--panel);
border:1px solid var(--line);border-radius:9px;margin-bottom:12px;
overflow-x:auto}
.ovcell{flex:1 1 0;min-width:112px;padding:14px 16px;border-left:1px solid var(--line2);
  display:flex;flex-direction:column;justify-content:center}
.ovcell:first-child{border-left:none}
/* tile-as-selector (Chris 2026-08-27): the four account tiles ARE the chart
   selector. `.on` = this account is in view - crypto stays lit while an asset
   inside it is chosen, because the asset IS crypto. `.hard` = the exact slice
   being drawn. */
.ovcell.ovsel{cursor:pointer;position:relative;transition:background .12s}
.ovcell.ovsel:hover{background:rgba(38,216,230,.05)}
.ovcell.ovsel.on{background:rgba(38,216,230,.07)}
.ovcell.ovsel.on::before{content:'';position:absolute;left:0;right:0;top:0;
  height:2px;background:var(--cyan2)}
.ovcell.ovsel.hard::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ovcell.ovsel:focus-visible{outline:1px solid var(--cyan);outline-offset:-2px}
/* BTC/ETH/SOL sit INSIDE the crypto tile, never beside the accounts */
/* BTC/ETH/SOL are their own tiles sitting inside the crypto run (Chris
   2026-08-28). Narrower than an account tile and tinted as one group, so
   the run reads as "crypto, broken into three" rather than three more
   accounts. They never draw a cap - only their share of crypto's. */
/* All seven tiles are the SAME size - one row of one kind (Chris
   2026-08-28). BTC/ETH/SOL are marked as belonging to crypto by a tint and
   a hairline, not by being smaller. */
.ovcell.ovasset{background:linear-gradient(180deg,rgba(38,216,230,.05),transparent 72%)}
.ovcell.ovasset .l{color:var(--dim)}
.ovcell.ovasset.on{background:rgba(38,216,230,.1)}
.ovcell.ovasset:first-of-type{box-shadow:inset 1px 0 0 var(--cyan2)}

/* chart + the data column that reads out whatever the selector points at */
/* ---- the overview grid: seven columns, two rows (Chris 2026-08-28) -----
   The strip spans all seven; the data column takes the SEVENTH, so it sits
   exactly under the NASDAQ tile because it is literally the same column
   track. It was a fixed 208px before, which landed under GOLD.

   Strip and data column are flush and share their corner, so the two read
   as ONE right-angled block; the chart is inset into the notch and takes
   every pixel that leaves. */
.ovgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}
.ovgrid > .ovstrip{grid-column:1/-1;grid-row:1;margin-bottom:0;
  border-bottom-right-radius:0}
.ovgrid > #ov-centre{grid-column:1/7;grid-row:2;min-width:0;min-height:0;
  margin:12px 12px 0 0}
.ovgrid > .ovdata{grid-column:7/-1;grid-row:2;min-width:0;
  display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-top:none;border-radius:0 0 9px 9px;
  overflow:hidden}
/* narrow: stack the column under the chart rather than crush it to a slice */
@media (max-width:1200px){
  .ovgrid{grid-template-rows:auto minmax(0,1fr) auto}
  .ovgrid > #ov-centre{grid-column:1/-1;margin-right:0}
  .ovgrid > .ovdata{grid-column:1/-1;grid-row:3;margin-top:12px;
    border-top:1px solid var(--line);border-radius:9px;
    flex-direction:row}
}
.ovdata .ovcell{flex:1 1 0;min-width:0;border-left:none;
  border-top:1px solid var(--line2);display:flex;flex-direction:column;
  justify-content:center;padding:10px 14px}
.ovdata .ovcell:first-child{border-top:none}
/* Live trades and Units up are single facts - shallower boxes, so Open risk
   and Fees (both multi-line readings) get the room (Chris 2026-08-28) */
.ovdata .ovcell.ovmini{flex:0 0 auto;padding:7px 14px}
.ovdata .ovcell.ovmini .v{font-size:15px}
.ovdata .ovcell.ovmini .s{font-size:10px}
.ovdata .ovcell .v{font-size:19px}
.ovdata .ovcell .s{line-height:1.45}
.ovcell .l{color:var(--faint);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap}
.ovcell .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:4px;white-space:nowrap}
.ovcell .v.cy{color:var(--cyan)}.ovcell .v.gr{color:var(--green)}
.ovcell .v.am{color:var(--amber)}.ovcell .v.rd{color:var(--red)}
.ovcell .s{color:var(--dim);font-size:10.5px;font-family:var(--mono);margin-top:3px}

/* ---------------- The Panel: public read-only mirror additions ---------- */
/* read-only badge (replaces the console's DRY RUN toggle) */
.rolock{display:flex;gap:8px;align-items:center;background:var(--panel);
  border:1px solid rgba(38,216,230,.35);border-radius:9px;padding:6px 12px;
  font-size:11px;color:var(--cyan);letter-spacing:1px;font-family:var(--mono);
  white-space:nowrap}

/* site nav back to the classic pages */
.sitenav{display:flex;gap:18px;align-items:center;font-size:11.5px}
.sitenav a{color:var(--dim);text-decoration:none;letter-spacing:1px}
.sitenav a:hover{color:var(--txt)}

/* locked operator controls: visible, padlocked, inert-looking */
/* `.pband` added 2026-08-28: the per-pod STATUS and STRATEGY RISK
   buttons rendered with a normal pointer on the public mirror, so they
   looked operable while every other operator control was padlocked.
   Harmless - window.Action is a locked stub here - but inconsistent,
   and this panel's rule is that locked things must LOOK locked. */
.fambtns button,.bandbtn,#bt-refresh,#pod-live,#pod-bench,#pod-grave,#pod-logs{
  opacity:.55;cursor:not-allowed}
.fambtns button:hover,.bandbtn:hover,#bt-refresh:hover,#pod-live:hover,
#pod-bench:hover,#pod-grave:hover,#pod-logs:hover{
  border-color:var(--line);color:var(--dim)}
.fambtns button::after,#bt-refresh::after,#pod-live::after,#pod-bench::after,
#pod-grave::after,#pod-logs::after{content:' 🔒';font-size:9px}

/* guide bubbles share the console's ai styling */
.bub.guide{background:rgba(38,216,230,.05);border-color:rgba(38,216,230,.18);
  align-self:flex-start}

/* ===================================================== mobile / responsive
   Phone + small-tablet pass, layered on the existing ≤980 tablet rules.
   Pure CSS: the board comes first, Synthetic's guide becomes a compact
   card below it, the tab bar swipes horizontally, and Overview drops its
   desktop no-scroll lock so the whole board flows in one column. */
@media (max-width:720px){
  /* header — compact, allowed to wrap; ticker already hidden ≤980 */
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .mark{width:36px;height:36px}
  .name{font-size:17px;letter-spacing:3px}
  .sub{font-size:9.5px;letter-spacing:1px}
  .topright{gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .rolock{padding:5px 9px;font-size:10px}
  .meta{font-size:10px}
  .riskheat{display:none}   /* redundant with the OPEN RISK KPI below */

  /* tab bar — one swipeable row, all ten tabs reachable */
  .tabbar{gap:0;padding:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar a{flex:0 0 auto;padding:11px 14px;font-size:11px;letter-spacing:1.5px}

  /* shell — single column, DATA first, Synthetic's card below */
  .shell{display:flex;flex-direction:column;min-height:0}
  .main{order:1;padding:12px 14px 28px}
  .side{order:2;position:static;height:auto;min-height:0;
    border-right:0;border-top:1px solid var(--line)}
  .orbwrap{padding:12px 14px 2px}
  #avatar{width:84px;max-width:84px}
  .chat{max-height:230px}

  /* panels + tables denser */
  .panel{padding:11px 12px}
  .mkt{margin:18px 0 10px;font-size:10px;letter-spacing:3px}
  .tbl th,.tbl td{padding:6px 9px}
  .grid{gap:10px}
  .grid.cols-2,.cols-2{grid-template-columns:1fr}
  .strip{gap:8px}
  .kpi{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}

  /* Overview — release the desktop no-scroll lock; flow the board */
  body[data-tab="overview"]{overflow:auto}
  body[data-tab="overview"] .main{padding-bottom:28px}
  #screen-overview{height:auto;overflow:visible}
  #screen-overview .ovwrap{height:auto;align-items:stretch}
  #screen-overview .ovmain{height:auto;overflow:visible}
  #screen-overview .ovrail,#screen-overview .ovrail .panel{height:auto}
  .ovwrap{grid-template-columns:1fr}
  #ov-centre{height:440px;flex:0 0 auto}
  .ovchip{padding:2px 7px;font-size:9.5px}
  /* the two chip groups can't share the top corners on a narrow chart —
     stack them as two swipeable strips pinned to the top edge */
  .ov-tf,.ov-series{left:8px;right:8px;max-width:none;flex-wrap:nowrap;
    overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    padding-bottom:3px;background:linear-gradient(rgba(8,11,15,.82),rgba(8,11,15,0))}
  .ov-tf::-webkit-scrollbar,.ov-series::-webkit-scrollbar{display:none}
  .ov-tf{top:6px}
  .ov-series{top:34px}
  .railscroll{max-height:340px}

  /* KPI instrument strip — stack into a readable 2-col grid */
  .ovstrip{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  .ovcell{min-width:0;padding:10px 12px;
    border-left:1px solid var(--line2);border-top:1px solid var(--line2)}
  .ovcell:first-child,.ovcell:nth-child(2){border-top:0}
  .ovcell:nth-child(odd){border-left:0}
  .ovcell .v{font-size:15px}

  /* fixed bottom ticker bars — restored on mobile (the ≤980 rule hides
     them), compacted, with body clearance so content scrolls above them */
  #bars{display:block}
  .bar{height:40px}
  .bartrack{height:40px}
  .barlabel{flex:0 0 90px;font-size:9.5px;letter-spacing:1.5px;padding:0 9px}
  .baritem{font-size:12px;gap:8px}
  .barsep{margin:0 13px}
  .bage,.bsrc,.bdim{font-size:11px}
  .btid{font-size:12px}
  .bchip{font-size:10px;padding:2px 7px}
  body{padding-bottom:90px}
}

@media (max-width:460px){
  .name{font-size:15px}
  #ov-centre{height:400px}
  .ov-series{max-width:52%}
  .kpi{min-width:100%;flex-basis:100%}
}

/* ---------------------------------------------- Panel Inspector sheets
   2026-08-26. Rail rows became clickable and two-line; the sheet itself
   is a centred modal that keeps the Discord card's reading order. */

/* two-line rail row */
.ltrow.rich{display:block;padding:8px 14px;cursor:pointer;
            border-left:2px solid transparent}
.ltrow.rich:hover,.ltrow.rich:focus-visible{
  background:rgba(38,216,230,.045);border-left-color:var(--cyan);outline:none}
.ltrow.rich .l1{display:flex;align-items:baseline;gap:7px}
.ltrow.rich .l2{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.ltrow.rich .nm{color:var(--dim);font-size:10px;font-family:var(--sans);
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ltrow.rich .asset{color:var(--cyan2);font-family:var(--mono);font-size:10px;
                   letter-spacing:.05em}
.ltrow.rich .push{margin-left:auto;font-family:var(--mono);font-size:10.5px;
                  white-space:nowrap}
.ltrow.rich .exp{color:var(--amber)}
.ltrow.rich .lvl{font-family:var(--mono);font-size:11px;color:var(--txt)}

/* clickable single-line rows (open + trade log) */
.ltrow.tap{cursor:pointer;border-left:2px solid transparent}
.ltrow.tap:hover,.ltrow.tap:focus-visible{
  background:rgba(38,216,230,.045);border-left-color:var(--cyan);outline:none}

/* stale-arm footnote */
.railnote{padding:6px 14px 9px;color:var(--faint);font-size:10px;
          font-family:var(--mono)}

/* ---- the sheet ---- */
#sheetwrap{position:fixed;inset:0;z-index:90;display:none;
           align-items:center;justify-content:center;padding:24px;
           background:rgba(3,6,9,.72);backdrop-filter:blur(3px)}
#sheetwrap.on{display:flex}
body.sheet-open{overflow:hidden}

.sheet{
  width:min(420px,100%);max-height:min(86vh,760px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(38,216,230,.09);
  animation:shpop .16s ease-out}
@keyframes shpop{from{opacity:0;transform:translateY(6px) scale(.985)}
                 to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}

.shhd{display:flex;align-items:center;justify-content:space-between;
      padding:10px 14px;border-bottom:1px solid var(--line);
      background:var(--panel-top);position:sticky;top:0}
.shhd .tag{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
           text-transform:uppercase;color:var(--cyan)}
.shx{background:none;border:0;color:var(--faint);font-size:14px;
     cursor:pointer;padding:0 2px;line-height:1}
.shx:hover,.shx:focus-visible{color:var(--txt);outline:none}

.shbd{padding:13px 15px 15px}
.shtitle{font-family:var(--mono);font-size:13px;color:var(--txt);font-weight:600}
.shsub{color:var(--dim);font-size:11px;margin-bottom:10px}

.shkv{display:flex;justify-content:space-between;gap:12px;padding:2px 0;
      font-family:var(--mono);font-size:11.5px}
.shkv .k{color:var(--dim);flex:0 0 auto}
.shkv .v{text-align:right;color:var(--txt);
         font-variant-numeric:tabular-nums;min-width:0}
.shkv .v em{font-style:normal;color:var(--faint);font-size:10.5px}
.shkv .v b{font-size:13px}
.shkv .v.pos{color:var(--green)}
.shkv .v.neg{color:var(--red)}
.shkv .v.amber{color:var(--amber)}
.shrule{border-top:1px solid var(--line2);margin:9px 0}

.shform{letter-spacing:.13em;font-size:10.5px}
.shform .fw{color:var(--green)}
.shform .fl{color:var(--red)}

.shrobot{border-top:1px solid var(--line2);margin-top:11px;padding-top:10px;
         color:var(--dim);font-size:11.5px;line-height:1.5}
.shnote{margin-top:8px;color:var(--faint);font-size:10.5px;line-height:1.45;
        font-family:var(--mono)}

/* one star holds bright while a sheet is open */
#orbwrap.sheet-lit{filter:brightness(1.35) saturate(1.1);transition:filter .2s}

/* Per-pod STATUS + STRATEGY RISK, locked on the public mirror.
   Needs #screen-control: control.js injects its own `.pband{cursor:pointer}`
   stylesheet at runtime, which lands AFTER panel.css and wins at equal
   specificity - a plain `.pband` rule here silently does nothing. */
#screen-control .pband{opacity:.55;cursor:not-allowed}
/* the emergency close is a live control on the console; on the public
   mirror it must look as locked as everything else (Chris 2026-08-28) */
#screen-control .pclose{cursor:not-allowed;opacity:.5}
#screen-control .pclose:hover>i{opacity:.5;box-shadow:none}
#screen-control .pband:hover{border-color:var(--line);color:var(--faint)}