/* SIMUL8OR PRODUCT COMPONENTS v0.1 — load after s8-ui.css.
   Pieces specific to the Simul8or app chrome, built on the same tokens. */

/* ── TOP BAR ──────────────────────────────────────────────────── */
.s8-topbar{display:flex;align-items:center;gap:var(--s8-3);height:56px;padding:0 var(--s8-3);padding-top:env(safe-area-inset-top);background:var(--s8-panel);border-bottom:1px solid var(--s8-line);flex:none}
.s8-brand{display:flex;align-items:center;flex:none}
.s8-brand img{height:22px;width:auto;display:block}
.s8-brand__txt{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff}

/* search with shortcut hint */
.s8-omni{position:relative;display:flex;align-items:center;flex:1;max-width:420px}
.s8-omni > svg{position:absolute;left:11px;width:15px;height:15px;stroke:var(--s8-fg-3);stroke-width:1.8;fill:none;pointer-events:none}
.s8-omni input{width:100%;height:var(--s8-h-lg);padding:0 56px 0 34px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-inset);color:var(--s8-fg);font:inherit;font-size:var(--s8-fs-md)}
.s8-omni input::placeholder{color:var(--s8-fg-4)}
.s8-omni input:hover{border-color:var(--s8-line-3)}
.s8-omni input:focus{outline:none;border-color:var(--s8-accent);box-shadow:var(--s8-focus)}
.s8-omni__hint{position:absolute;right:8px;display:flex;gap:3px;pointer-events:none}

.s8-kbd{padding:1px 5px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-xs);background:var(--s8-panel-2);font-family:var(--s8-mono);font-size:10px;font-weight:600;line-height:1.6;color:var(--s8-fg-2)}
.s8-btn .s8-kbd{position:absolute;top:3px;right:4px;border:0;background:rgba(0,0,0,.26);color:inherit;opacity:.72}
.s8-btn{position:relative}

/* sponsor slot — an ad is a first-class component here, so it gets a spec */
.s8-slot{display:flex;align-items:center;gap:var(--s8-3);height:var(--s8-h-lg);padding:0 var(--s8-3);border:1px solid var(--s8-accent-line);border-radius:var(--s8-r);background:var(--s8-accent-tint);font-size:var(--s8-fs-sm);color:var(--s8-fg-2);white-space:nowrap;text-decoration:none;cursor:pointer;transition:border-color var(--s8-t-fast) var(--s8-ease),background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.s8-slot:hover{border-color:var(--s8-accent-hi);background:var(--s8-active);color:var(--s8-fg);text-decoration:none}
.s8-slot__brand{display:flex;align-items:center;gap:7px;padding-right:var(--s8-3);border-right:1px solid var(--s8-accent-line);font-size:var(--s8-fs-md);font-weight:600;color:#fff}
.s8-slot__brand svg{display:block;width:auto;height:14px;fill:currentColor}
.s8-slot__cta{display:flex;align-items:center;gap:7px;color:var(--s8-accent-fg);transition:color var(--s8-t-fast) var(--s8-ease)}.s8-slot__cta>svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--s8-t-fast) var(--s8-ease)}.s8-slot:hover .s8-slot__cta{color:#fff}.s8-slot:hover .s8-slot__cta>svg{transform:translateX(2px)}
.s8-slot__cta b{color:var(--s8-fg);font-weight:500}

/* account block */
.s8-user{display:flex;align-items:center;gap:10px;flex:none}
.s8-user__txt{text-align:right;line-height:1.25}
.s8-user__hi{display:block;font-family:var(--s8-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--s8-fg-3)}
.s8-user__name{display:block;font-size:var(--s8-fs-md);font-weight:600;color:#fff}
.s8-avatar{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--s8-active);border:1px solid var(--s8-line-2);overflow:hidden}
.s8-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.s8-avatar__pro{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 4px;border-radius:2px 2px 0 0;background:var(--s8-warn);color:#20160A;font-family:var(--s8-mono);font-size:8px;font-weight:700;letter-spacing:.04em}

/* ── TICKER TAPE ──────────────────────────────────────────────── */
.s8-tape{display:flex;align-items:stretch;height:32px;overflow:hidden;background:var(--s8-inset);border-bottom:1px solid var(--s8-line);flex:none;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.s8-tape__track{display:flex;flex:none;animation:s8-tape 90s linear infinite;will-change:transform}
.s8-tape:hover .s8-tape__track{animation-play-state:paused}
.s8-tape__item{display:flex;align-items:center;gap:7px;padding:0 var(--s8-4);border-right:1px solid var(--s8-line);font-size:var(--s8-fs-sm);white-space:nowrap}
.s8-tape__sym{font-weight:600;letter-spacing:.02em;color:var(--s8-fg-2)}
.s8-tape__val,.s8-tape__chg{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;color:var(--s8-fg)}
.s8-tape__chg{display:flex;align-items:center;gap:4px}
@keyframes s8-tape{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.s8-tape__track{animation:none}}

/* ── CHART TOOL BAR (horizontal, over the chart) ──────────────── */
.s8-chartbar{display:flex;align-items:center;gap:2px;padding:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:none;border-bottom:1px solid var(--s8-line);background:var(--s8-panel)}
.s8-chartbar::-webkit-scrollbar{display:none}
.s8-chartbar > *{flex:none}
.s8-chartbar__sep{width:1px;height:20px;margin:0 5px;background:var(--s8-line-2)}
.s8-ohlc{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s8-3);padding:var(--s8-2) var(--s8-3);font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm);color:var(--s8-fg)}
.s8-ohlc b{font-weight:400;color:var(--s8-fg-3)}
.s8-ohlc span{white-space:nowrap}

/* ── SIMULATOR PANEL ──────────────────────────────────────────── */
.s8-sim{display:flex;flex-direction:column;background:var(--s8-panel);border-left:1px solid var(--s8-line);min-width:0}
.s8-sim__head{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line);background:var(--s8-panel-2);flex:none}
.s8-sim__head .s8-label{flex:1;color:var(--s8-fg-2)}
.s8-sim__head svg{width:14px;height:14px;stroke:var(--s8-accent-fg);fill:none;stroke-width:1.8}
.s8-sim__link{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-up)}
.s8-sim__grp{padding:var(--s8-3);border-bottom:1px solid var(--s8-line);display:flex;flex-direction:column;gap:var(--s8-2)}
.s8-sim__grp:last-child{border-bottom:0}

.s8-balance{text-align:center;display:flex;flex-direction:column;gap:2px}
.s8-balance__val{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff}
.s8-unlock{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:var(--s8-h);border:1px solid var(--s8-up-line);border-radius:var(--s8-r);background:var(--s8-up-tint);color:var(--s8-up);font:inherit;font-size:var(--s8-fs-sm);font-weight:600;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease)}
.s8-unlock:hover{background:rgba(53,196,142,.18)}
.s8-unlock svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none}

.s8-metric{display:flex;flex-direction:column;gap:1px}
.s8-metric__val{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-xl);font-weight:500;line-height:1.2;color:var(--s8-fg)}
.s8-metric__sub{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}

.s8-keypad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-2)}
.s8-keypad .s8-btn{height:var(--s8-h-lg);font-size:var(--s8-fs-base)}
.s8-replayrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s8-2);align-items:center}
.s8-datetime{width:100%;height:var(--s8-h);padding:0 8px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-inset);color:var(--s8-fg);font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm)}
.s8-datetime:focus{outline:none;border-color:var(--s8-accent);box-shadow:var(--s8-focus)}
.s8-elapsed{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);text-align:right;min-width:28px}

/* ── TRANSPORT: replay controls as a media bar under the chart ─── */
.s8-transport{display:flex;align-items:center;gap:var(--s8-3);height:var(--s8-toolbar);padding:0 var(--s8-3);background:var(--s8-panel);border-bottom:1px solid var(--s8-line);flex:none;overflow:hidden}
.s8-transport > *{flex:none}
.s8-transport__keys{display:flex;align-items:center;gap:2px;flex:none}
.s8-transport__play{display:flex;align-items:center;justify-content:center;width:var(--s8-h-lg);height:var(--s8-h-lg);border:0;border-radius:var(--s8-r);background:var(--s8-accent);color:#fff;cursor:pointer;flex:none;transition:background var(--s8-t-fast) var(--s8-ease)}
.s8-transport__play:hover{background:var(--s8-accent-hi)}
.s8-transport__play svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8-transport__play.is-running{background:var(--s8-active);color:var(--s8-fg)}
.s8-transport__clock{display:flex;flex-direction:column;gap:0;flex:none;padding-right:var(--s8-1);font-family:var(--s8-mono);font-variant-numeric:tabular-nums;line-height:1.25}
.s8-transport__clock b{font-size:var(--s8-fs-base);font-weight:500;color:#fff}
.s8-transport__clock span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--s8-fg-3)}
/* scrubber: the session timeline, click to seek */
/* the scrubber is the point of this bar — it wins the space contest.
   secondary readouts shed themselves before it gives up width. */
.s8-scrub{position:relative;flex:1 1 auto;min-width:120px;height:22px;display:flex;align-items:center;cursor:pointer}
.s8-scrub__track{position:absolute;inset:9px 0;border-radius:var(--s8-r-pill);background:var(--s8-active)}
.s8-scrub__fill{position:absolute;inset:9px auto 9px 0;border-radius:var(--s8-r-pill);background:var(--s8-accent)}
.s8-scrub__head{position:absolute;top:4px;width:5px;height:14px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(10,11,13,.6)}
.s8-scrub__mark{position:absolute;top:2px;width:2px;height:18px;margin-left:-1px;border-radius:1px}
.s8-scrub__mark--buy{background:var(--s8-buy)}
.s8-scrub__mark--sell{background:var(--s8-sell)}
.s8-transport__span{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-xs);color:var(--s8-fg-2);white-space:nowrap;flex:none}
/* shed order as the column narrows: session span → speed segment → date line.
   thresholds sit above the 860px mobile cutover, where the bar still exists. */
@media (max-width:1240px){.s8-transport__span{display:none}}
@media (max-width:1100px){.s8-transport .s8-seg{display:none}}
@media (max-width:980px){.s8-transport__clock span{display:none}}
@media (max-width:860px){.s8-transport{gap:var(--s8-2);padding:0 var(--s8-2)}.s8-transport__clock span{display:block}}

/* ── ACCOUNT STRIP: session state. belongs to the terminal workspace,
   never the site header — it is meaningless on Academy or marketing. ── */
.s8-acct{display:flex;align-items:stretch;flex:none;background:var(--s8-panel);border-bottom:1px solid var(--s8-line);overflow-x:auto;scrollbar-width:none}
.s8-acct::-webkit-scrollbar{display:none}
.s8-acct__cell{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:none;padding:7px var(--s8-4);border-right:1px solid var(--s8-line);white-space:nowrap}
.s8-acct__cell b{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-lg);font-weight:500;line-height:1.15;color:#fff}
.s8-acct__cell b.sm{font-size:var(--s8-fs-md)}
.s8-acct__end{display:flex;align-items:center;gap:var(--s8-2);margin-left:auto;padding:0 var(--s8-3);flex:none}

/* ── DOCK: positions / orders under the chart ─────────────────── */
.s8-dock{display:flex;flex-direction:column;flex:none;background:var(--s8-panel);border-top:1px solid var(--s8-line);max-height:210px;min-height:0}
.s8-dock__head{display:flex;align-items:center;gap:var(--s8-3);padding:0 var(--s8-3);border-bottom:1px solid var(--s8-line);flex:none}
.s8-dock__head .s8-tabs{flex:1;border-bottom:0;min-width:0}
.s8-dock__body{overflow:auto;min-height:0}

/* ── PLAN CARD (paywall, upgrade) ─────────────────────────────── */
.s8-plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-2)}
.s8-plan{display:flex;flex-direction:column;gap:var(--s8-2);padding:var(--s8-3);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-inset);cursor:pointer;text-align:left;font:inherit;color:var(--s8-fg);transition:border-color var(--s8-t-fast) var(--s8-ease),background var(--s8-t-fast) var(--s8-ease)}
.s8-plan:hover{border-color:var(--s8-line-3)}
.s8-plan[aria-checked="true"]{border-color:var(--s8-accent);background:var(--s8-accent-tint)}
.s8-plan__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2)}
.s8-plan__name{font-size:var(--s8-fs-md);font-weight:600;color:#fff}
.s8-plan__price{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-xl);font-weight:500;line-height:1.1;color:#fff}
.s8-plan__per{font-family:var(--s8-mono);font-size:var(--s8-fs-xs);color:var(--s8-fg-2)}
.s8-feats{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.s8-feats li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s8-2);font-size:var(--s8-fs-base);line-height:1.5;color:var(--s8-fg-2)}
.s8-feats li::before{content:"✓";font-family:var(--s8-mono);font-size:var(--s8-fs-sm);color:var(--s8-up);line-height:1.4}
@media (max-width:480px){.s8-plans{grid-template-columns:1fr}}

/* ── CHART STAGE: tools float OVER the chart, never as bands above it.
   every band added above the chart costs the chart its height, so the
   toolbar, readout and symbol plate are overlays with their own backdrop. ── */
.s8-stage{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
.s8-stage__canvas{flex:1;min-width:0;min-height:0;display:flex}
.s8-float{position:absolute;z-index:5;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--s8-line);border-radius:var(--s8-r);background:rgba(16,19,24,.86);backdrop-filter:blur(8px)}
.s8-float--tl{top:10px;left:10px}
.s8-float--tr{top:10px;right:10px}
.s8-float__sep{width:1px;height:18px;margin:0 4px;background:var(--s8-line-2)}
/* readout sits under the floating toolbar, no backdrop — it reads as chart ink */
.s8-readout{position:absolute;z-index:4;top:58px;left:12px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8-3);max-width:calc(100% - 24px);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-sm);color:var(--s8-fg);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.s8-readout b{font-weight:400;color:var(--s8-fg-3)}
.s8-readout span{white-space:nowrap}
@media (max-width:860px){.s8-readout{top:54px;left:10px;font-size:var(--s8-fs-xs);gap:var(--s8-2)}}

/* ── DRAWER: positions collapse to a summary rail ─────────────── */
.s8-drawer{display:flex;flex-direction:column;flex:none;background:var(--s8-panel);border-top:1px solid var(--s8-line);min-height:0}
.s8-drawer__bar{display:flex;align-items:center;gap:var(--s8-3);height:36px;padding:0 var(--s8-3);flex:none;cursor:pointer;user-select:none;transition:background var(--s8-t-fast) var(--s8-ease)}
.s8-drawer__bar:hover{background:var(--s8-hover)}
.s8-drawer__caret{width:14px;height:14px;flex:none;stroke:var(--s8-fg-2);stroke-width:2;fill:none;transition:transform var(--s8-t) var(--s8-ease)}
.s8-drawer.is-open .s8-drawer__caret{transform:rotate(180deg)}
.s8-drawer__tabs{display:flex;gap:var(--s8-3);flex:1;min-width:0;overflow:hidden}
.s8-drawer__tabs button{border:0;background:none;padding:0;font:inherit;font-size:var(--s8-fs-md);font-weight:500;color:var(--s8-fg-3);cursor:pointer;white-space:nowrap}
.s8-drawer__tabs button[aria-selected="true"]{color:#fff}
.s8-drawer__body{max-height:0;overflow:hidden;transition:max-height var(--s8-t-slow) var(--s8-ease)}
.s8-drawer.is-open .s8-drawer__body{max-height:230px;overflow:auto;border-top:1px solid var(--s8-line)}

/* ── ACCORDION: secondary panel sections, shut by default ─────── */
.s8-acc{border-top:1px solid var(--s8-line)}
.s8-acc > summary{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);cursor:pointer;list-style:none;user-select:none;transition:background var(--s8-t-fast) var(--s8-ease)}
.s8-acc > summary::-webkit-details-marker{display:none}
.s8-acc > summary:hover{background:var(--s8-hover)}
.s8-acc > summary .s8-label{flex:1}
.s8-acc > summary svg{width:13px;height:13px;stroke:var(--s8-fg-3);stroke-width:2;fill:none;transition:transform var(--s8-t) var(--s8-ease)}
.s8-acc[open] > summary svg{transform:rotate(180deg)}
.s8-acc__body{padding:var(--s8-3);display:flex;flex-direction:column;gap:var(--s8-2)}
.s8-limit-order-form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--s8-2);align-items:end}
.s8-limit-orders{width:100%;border-collapse:collapse;color:var(--s8-fg-2);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-variant-numeric:tabular-nums}
.s8-limit-orders:has(tbody:empty){display:none}
.s8-limit-orders td{height:34px;padding:4px var(--s8-2);border-bottom:1px solid var(--s8-line)}
.s8-limit-orders .type-column{padding-left:0}.s8-limit-orders .quantity-column,.s8-limit-orders .price-column{text-align:right}.s8-limit-orders .action-column{width:28px;padding-right:0;text-align:right}
.s8-limit-orders .order-type-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);font-family:var(--s8-sans);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.s8-limit-orders .order-type-buy{border-color:var(--s8-up-line);background:var(--s8-up-tint);color:var(--s8-up)}.s8-limit-orders .order-type-sell{border-color:var(--s8-down-line);background:var(--s8-down-tint);color:var(--s8-down)}
.s8-limit-orders .btn-remove{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-panel-2);color:var(--s8-fg-2);cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),border-color var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}.s8-limit-orders .btn-remove:hover{border-color:var(--s8-down-line);background:var(--s8-down-tint);color:var(--s8-down)}
.s8-limit-orders .btn-remove::before{content:"\00d7";font-family:var(--s8-sans);font-size:18px;font-weight:400;line-height:1;transform:translateY(-1px)}
.s8-limit-orders .btn-remove i{display:none}

/* ── BALANCE HERO: the emotional anchor of the panel ──────────── */
.s8-hero{display:flex;flex-direction:column;align-items:center;gap:var(--s8-2);padding:var(--s8-4) var(--s8-3);border-bottom:1px solid var(--s8-line)}
.s8-hero__val{font-variant-numeric:tabular-nums;font-size:var(--s8-fs-3xl);font-weight:600;letter-spacing:-.025em;line-height:1;color:#fff}
.s8-hero__row{display:flex;align-items:baseline;gap:var(--s8-2)}

/* a row that navigates away, styled to sit in the same rhythm as s8-acc
   summaries so the foot of a panel reads as one list */
.s8-navrow{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);border-top:1px solid var(--s8-line);color:var(--s8-fg-2);text-decoration:none;transition:background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.s8-navrow:hover{background:var(--s8-hover);color:#fff;text-decoration:none}
.s8-navrow .s8-label{flex:1}
.s8-navrow svg{width:13px;height:13px;stroke:var(--s8-fg-3);stroke-width:2;fill:none}

/* ── PREMIUM CTA: paid features. accent-tinted so it carries weight without
   borrowing green or red, which mean up/down and buy/sell everywhere else. ── */
.s8-btn--premium{background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);color:#fff;font-weight:600}
.s8-btn--premium:hover{background:rgba(62,162,242,.26);border-color:var(--s8-accent)}
.s8-btn--premium svg{stroke:var(--s8-accent-fg)}
.s8-btn--premium .s8-badge{margin-left:auto;height:18px;padding:0 5px;background:var(--s8-accent);border-color:var(--s8-accent);color:#fff}

/* ── TRADE KEYPAD: four blocks you can hit without looking ────── */
.s8-pad{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-2)}
.s8-pad .s8-btn{height:var(--s8-h-lg);font-size:var(--s8-fs-base);font-weight:600}
.s8-pad .s8-btn .s8-kbd{top:4px;right:5px}
/* neutral actions stay solid blocks so the grid reads as one control,
   but carry no hue — only buy and sell get colour */
.s8-btn--neutral{background:var(--s8-active);color:var(--s8-fg);border:1px solid var(--s8-line-3);font-weight:600}
.s8-btn--neutral:hover{background:var(--s8-line-2);color:#fff}

/* ── PAGE HEADER (in-app content pages) ───────────────────────── */
.s8-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s8-4);flex-wrap:wrap;padding:var(--s8-7) 0 var(--s8-5)}
.s8-pagehead__t{display:flex;flex-direction:column;gap:6px;min-width:0}
.s8-pagehead h1{margin:0;font-size:var(--s8-fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff}
.s8-pagehead p{margin:0;font-size:var(--s8-fs-base);color:var(--s8-fg-2);text-wrap:pretty}
@media (max-width:640px){.s8-pagehead{padding-top:var(--s8-5)}.s8-pagehead h1{font-size:var(--s8-fs-2xl)}}

/* ── KPI STRIP: one panel, cells divided by hairlines ─────────── */
.s8-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--s8-panel);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8-kpi__cell{display:flex;flex-direction:column;gap:3px;padding:var(--s8-4);border-left:1px solid var(--s8-line)}
.s8-kpi__cell:first-child{border-left:0}
.s8-kpi__val{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-2xl);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--s8-fg)}
.s8-kpi__sub{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-xs);color:var(--s8-fg-2)}
@media (max-width:1100px){.s8-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}.s8-kpi__cell:nth-child(3n+1){border-left:0}.s8-kpi__cell:nth-child(n+4){border-top:1px solid var(--s8-line)}}
@media (max-width:640px){.s8-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.s8-kpi__cell{padding:var(--s8-3)}.s8-kpi__cell:nth-child(3n+1){border-left:1px solid var(--s8-line)}.s8-kpi__cell:nth-child(2n+1){border-left:0}.s8-kpi__cell:nth-child(n+3){border-top:1px solid var(--s8-line)}.s8-kpi__val{font-size:var(--s8-fs-xl)}}

/* ── STAT GRID: labelled figures inside a panel ───────────────── */
.s8-statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.s8-statcell{display:flex;flex-direction:column;gap:4px;padding:var(--s8-4);border-left:1px solid var(--s8-line);border-top:1px solid var(--s8-line)}
.s8-statcell:nth-child(4n+1){border-left:0}
.s8-statgrid > .s8-statcell:nth-child(-n+4){border-top:0}
.s8-statcell__val{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-xl);font-weight:500;line-height:1.2;color:var(--s8-fg)}
.s8-statcell__sub{font-size:var(--s8-fs-xs);color:var(--s8-fg-2)}
@media (max-width:1100px){.s8-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.s8-statcell:nth-child(4n+1){border-left:1px solid var(--s8-line)}.s8-statcell:nth-child(2n+1){border-left:0}.s8-statgrid > .s8-statcell:nth-child(-n+2){border-top:0}.s8-statgrid > .s8-statcell:nth-child(3),.s8-statgrid > .s8-statcell:nth-child(4){border-top:1px solid var(--s8-line)}}
@media (max-width:520px){.s8-statgrid{grid-template-columns:minmax(0,1fr)}.s8-statcell{border-left:0 !important;border-top:1px solid var(--s8-line) !important}.s8-statgrid > .s8-statcell:first-child{border-top:0 !important}}

/* ── EQUITY CURVE ─────────────────────────────────────────────── */
.s8-curve{display:block;width:100%;height:auto}
.s8-curve .grid{stroke:var(--s8-line);stroke-width:1}
.s8-curve .axis{fill:var(--s8-fg-3);font-family:var(--s8-mono);font-size:11px}
.s8-curve .area{fill:var(--s8-up-tint)}
.s8-curve .line{fill:none;stroke:var(--s8-up);stroke-width:1.6;stroke-linejoin:round}
.s8-curve .dot{fill:var(--s8-panel);stroke:var(--s8-up);stroke-width:1.3}

/* ── SORTABLE TABLE HEADER ────────────────────────────────────── */
.s8-table th.sortable{cursor:pointer;user-select:none;transition:color var(--s8-t-fast) var(--s8-ease)}
.s8-table th.sortable:hover{color:var(--s8-fg)}
.s8-table th.sortable::after{content:"↕";margin-left:5px;opacity:.45}
.s8-table th.sortable[aria-sort="ascending"]{color:var(--s8-fg)}
.s8-table th.sortable[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--s8-accent-fg)}
.s8-table th.sortable[aria-sort="descending"]{color:var(--s8-fg)}
.s8-table th.sortable[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--s8-accent-fg)}

/* ── MOBILE STATS STRIP + ACTION BAR ──────────────────────────── */
.s8-mstats{display:none;align-items:center;gap:var(--s8-3);padding:var(--s8-2) var(--s8-4);background:var(--s8-panel);border-bottom:1px solid var(--s8-line);overflow-x:auto;scrollbar-width:none;flex:none}
.s8-mstats::-webkit-scrollbar{display:none}
.s8-mstat{display:flex;flex-direction:column;gap:1px;flex:none;padding-right:var(--s8-3);border-right:1px solid var(--s8-line)}
.s8-mstat:last-child{border-right:0;padding-right:0}
.s8-mstat b{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-lg);font-weight:500;color:var(--s8-fg)}
.s8-mbar{display:none;gap:var(--s8-2);padding:var(--s8-2) var(--s8-3);padding-bottom:calc(var(--s8-2) + env(safe-area-inset-bottom));background:var(--s8-panel);border-top:1px solid var(--s8-line);flex:none}
.s8-mbar .s8-btn{flex:1;height:48px;font-size:var(--s8-fs-base)}
.s8-mbar .s8-iconbtn{width:48px;height:48px;border:1px solid var(--s8-line-2);flex:none}
@media (max-width:860px){.s8-mstats{display:flex}.s8-mbar{display:flex}}