/* ══════════════════════════════════════════════════════════════════════════════
   SIM — the three-layer header from sim-header-mockup-v2.html.
   Loaded after css/pn-theme.css, and only by /sim.

     1 · #nav         brand / logo only
     2 · #site-tabs   nav tabs + the account chip
     3 · #pnl-header  ALL the sim's data, consolidated below the header:
                      SYN price, Unrealised, Realised, Equity, Option P&L,
                      Total P&L, IVX, Orders Used, Open Pos, DAY

   Every element inside keeps the id the simulator's JS already writes to, so this
   file moves and dresses them — it never changes what fills them. Values are
   coloured at runtime by that JS (inline style.color), which is why the colours
   here are only defaults.
   ══════════════════════════════════════════════════════════════════════════════ */

/* the three rows travel together, over the page background */
#sticky-header{position:sticky;top:0;z-index:200;background:transparent;box-shadow:none;border-bottom:0}
/* they are stacked inside the sticky wrapper, so they must not try to stick again */
#sticky-header #nav,#sticky-header #site-tabs{position:static;top:auto}
#sticky-header #nav{border-bottom:0}

/* ── 3 · THE SIM P&L HEADER ── */
#pnl-header{position:relative;z-index:180;display:flex;align-items:center;gap:0;padding:0 18px;height:52px;
  background:rgba(6,4,14,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-glow);box-shadow:0 0 20px rgba(34,211,238,0.05);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#pnl-header::-webkit-scrollbar{display:none}

.syn-block{display:flex;align-items:baseline;gap:9px;padding-right:20px;margin-right:4px;
  border-right:1px solid var(--border);flex-shrink:0}
.syn-tkr{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--cyan)}
.syn-val{font-family:'Share Tech Mono',monospace;font-size:18px;font-weight:700;color:var(--text)}
/* the JS rewrites this element's className as "tchg pos" / "tchg neg" */
#pnl-header .tchg{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text2)}
#pnl-header .tchg.pos{color:var(--green)}
#pnl-header .tchg.neg{color:var(--red)}

.pnl-item{display:flex;flex-direction:column;gap:2px;padding:0 15px;height:100%;justify-content:center;
  border-right:1px solid var(--border);flex-shrink:0}
.pnl-l{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1.3px;color:var(--text3);
  text-transform:uppercase;white-space:nowrap}
.pnl-v{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.pnl-day{margin-left:auto;padding-left:18px;font-family:'Share Tech Mono',monospace;font-size:12px;
  letter-spacing:1.5px;color:var(--text3);flex-shrink:0;white-space:nowrap}
.pnl-day b{color:var(--text);font-weight:400}

/* the simulator's own tab bar carried an admin tab the JS reveals — keep it a clean tab */
#site-tabs #tab-admin{color:var(--gold)}
#site-tabs #tab-admin:hover{color:#ffe17a}

@media(max-width:768px){
  /* the tab bar hides (shared theme); the account row inside the hamburger menu covers it */
  #pnl-header{height:48px;padding:0 12px;gap:0}
  .syn-block{padding-right:14px;gap:7px}
  .syn-val{font-size:16px}
  .pnl-item{padding:0 11px}
  .pnl-day{padding-left:12px;font-size:11px}
}

/* the right-hand cluster: IVx, Orders Used, DAY (owner layout, 2026-09-24) */
.pnl-right{margin-left:auto;display:flex;align-items:center;height:100%;flex-shrink:0}
.pnl-right .pnl-item:first-child{border-left:1px solid var(--border)}
.pnl-right .pnl-item:last-of-type{border-right:0}
.pnl-right .pnl-day{margin-left:0;padding-left:15px}
/* Equity / Option P&L / Total P&L / Open Pos still exist for the engine to write to */
#pnl-retired{display:none!important}

/* ══════════════════════════════════════════════════════════════════════════════
   SOLID BY DEFAULT, TRANSPARENT WHEN OPEN  (owner rule, 2026-09-24)

   Transparency is a STATE, not decoration:
     closed / default  →  solid dark surface
     open / expanded   →  translucent, blurred, cyan-edged: "this is open"

   Header 3 (#pnl-header) keeps its own translucent treatment, as approved.
   ══════════════════════════════════════════════════════════════════════════════ */

/* the whole working area is one solid surface, so the page's glow, grid and
   vignette stop at the headers and never show through the sim UI.
   EVERY top-level band needs its own stacking context, not just a background: the
   bg layers are position:fixed, so they paint OVER an unpositioned block no matter
   how opaque its background is. That was why the walkthrough bar still read as
   see-through - it was the grid and the vignette lying on top of it. */
#simulator-view,#sim-walk,#portfolio-strip,#journal-view{position:relative;z-index:5}
#simulator-view{background:var(--bg)}
/* the CRT scanline drops behind that surface: it now textures the headers and the
   page background only, never the chart or the panels */
.bg-scan{z-index:1}

/* the chart: solid, in the closed-state shade (the canvas paints the same colour) */
#chart-wrap{background:var(--bg2)}
#chartCanvas{background:var(--bg2)}

/* every default surface below the headers, explicitly solid */
#chart-section,#pos-bar,#chain-section,#chain-body,#chain-body-mobile,#sim-walk,.strike-wrap{background:var(--bg)}
#trade-bar,#builder-toggle-bar,#nt-import-bar,#dte-session-bar,.sim-walk-panel{background:var(--bg2)}
#builder-panel,#nt-import-panel{background:var(--bg3)}

/* ── OPEN STATE: the only place transparency appears below the headers ── */
#builder-panel.open,
#nt-import-panel.open,
.strike-wrap.open,
#sim-walk.open .sim-walk-panel{
  /* LIGHTER, not darker: the owner's cue is "lighter = open / active / highlighted" */
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-color:var(--border-glow);
  box-shadow:inset 0 0 0 1px rgba(34,211,238,0.10),0 0 24px rgba(34,211,238,0.06);
}
/* the bar that opened it lights up with it */
#builder-toggle-bar:has(+ #builder-panel.open),
#nt-import-bar:has(+ #nt-import-panel.open){
  background:rgba(6,4,14,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--border-glow);
}

/* ── the IVx sparkline and the Vol Term Structure leave the page (owner, 2026-09-24).
   The engine still sets .style.display='' on both bars, unguarded, when it switches
   data modes — so they stay in the DOM, inert, and this rule outranks that. ── */
#iv-bar,#ts-bar{display:none!important}

/* ══════════════════════════════════════════════════════════════════════════════
   SKIN REFINEMENTS (owner, 2026-09-24)
     magenta = Active Positions · purple = Option Builder · lighter = open
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1 ── the walkthrough banner sits a shade DARKER than the P&L header above it,
   so it reads as its own element rather than part of the header stack.
   SOLID, with no see-through anywhere: the bar is the clickable surface, so it
   carries the colour itself rather than borrowing a translucent parent's. */
#sim-walk{background:#05030b;border-bottom:1px solid var(--border)}
#sim-walk .sim-walk-bar{background:#05030b;backdrop-filter:none;-webkit-backdrop-filter:none}
#sim-walk .sim-walk-bar:hover{background:#0a0714}
/* closed, the video panel is solid too; it only lightens once open (rule above) */
#sim-walk .sim-walk-panel{background:var(--bg2)}

/* 2 ── ACTIVE POSITIONS: lighter than the UI around it, inside a magenta frame */
#pos-bar{background:var(--bg3);border:1px solid var(--magenta);border-radius:10px;
  margin:8px 14px;box-shadow:0 0 18px rgba(244,114,182,0.10)}
.pos-bar-title{color:var(--magenta)}

/* 3 ── and every strategy card inside carries its own thin magenta edge */
.pos-strat-row{border:1px solid rgba(244,114,182,0.45)}
.pos-strat-row:hover{border-color:rgba(244,114,182,0.7)}
.pos-card{border:1px solid rgba(244,114,182,0.30)}

/* 4 ── OPTION BUILDER is purple end to end: title (already --cp-accent2 = --purple),
   border, and the close button it turns into when open */
/* One contained box, framed exactly like Active Positions but purple. The bar and the
   panel are siblings, so the frame is drawn across both: closed, the bar is a rounded
   purple pill on its own; open, it becomes the top of the box and the panel closes it
   off underneath, with no seam between them. */
#builder-toggle-bar{background:var(--bg2);border:1px solid rgba(167,139,250,0.45);
  border-radius:10px;margin:8px 14px;box-shadow:0 0 18px rgba(167,139,250,0.10)}
#builder-toggle-bar:has(+ #builder-panel.open){
  border-bottom-color:transparent;border-radius:10px 10px 0 0;margin-bottom:0;box-shadow:none}
#builder-panel{margin:0 14px 8px;border:1px solid rgba(167,139,250,0.55);border-top:0;
  border-radius:0 0 10px 10px}
#builder-panel.open{border-color:rgba(167,139,250,0.55);border-top:0;
  box-shadow:0 0 18px rgba(167,139,250,0.10)}
/* the toggle becomes "Close Builder" and gains .active - beat the mobile !important rule */
#builder-toggle-bar .btog.active{
  background:rgba(167,139,250,0.12)!important;color:var(--purple)!important;
  border-color:rgba(167,139,250,0.5)!important;box-shadow:0 0 8px rgba(167,139,250,0.25)!important}

/* 5 ── a revealed option-chain expiry is LIGHTER than its closed row */
.strike-wrap{background:var(--bg)}
.strike-wrap.open{background:rgba(255,255,255,0.05)}
.exp-hdr{background:var(--bg2)}
/* the expiry header itself never gets .open - only its caret and its wrap do - so the
   open row is matched through the sibling that does carry the class */
.exp-hdr:has(+ .strike-wrap.open){background:rgba(255,255,255,0.06)}
/* mobile: the strikes list is only rendered while the expiry is open */
.mch-strikes{background:rgba(255,255,255,0.05)}