/* SIMUL8OR — CRYPTO TRADING BOT PAGE (s8b-*)
   extends s8-content.css. tokens only; no new colours. */

/* ── stat strip: hairline cells, display numerals ─────── */
.s8b-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8b-stats>div{background:var(--s8-panel);padding:var(--s8-5)}
.s8b-stat__v{display:block;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-3xl);line-height:1.05;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff}
.s8b-stat__k{display:block;margin-top:7px;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-fg-3)}
.s8b-stats--lg>div{padding:var(--s8-6) var(--s8-5);text-align:center}
.s8b-stats--lg .s8b-stat__v{font-size:var(--s8-fs-display)}
.s8b-stat--up .s8b-stat__v{color:var(--s8-up)}
@media(max-width:820px){.s8b-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* inline pill run — lighter alternative to the strip */
.s8b-pills{display:flex;flex-wrap:wrap;gap:var(--s8-2);margin-top:var(--s8-6)}
.s8b-pill{display:inline-flex;align-items:baseline;gap:var(--s8-2);height:var(--s8-h);padding:0 var(--s8-3);border:1px solid var(--s8-line);border-radius:var(--s8-r-pill);background:var(--s8-panel);font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8b-pill b{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-size:var(--s8-fs-base);font-weight:600;color:#fff}

/* ── terminal replica of the bot's own overlay ────────── */
.s8b-term{border:1px solid var(--s8-line-2);border-radius:var(--s8-r-lg);background:var(--s8-inset);overflow:hidden;box-shadow:var(--s8-pop)}
.s8b-term__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-3);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:.04em;color:var(--s8-fg-2)}
.s8b-term__dot{width:7px;height:7px;border-radius:50%;background:var(--s8-up);box-shadow:0 0 0 3px var(--s8-up-tint)}
.s8b-term__grab{margin-left:auto;color:var(--s8-fg-4);font-weight:500}
.s8b-term__body{padding:var(--s8-4);display:flex;flex-direction:column;gap:var(--s8-3)}
.s8b-term__price{display:flex;align-items:baseline;gap:var(--s8-3)}
.s8b-term__price b{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-2xl);font-weight:600;color:#fff;letter-spacing:var(--s8-ls-tight)}
.s8b-term__sym{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-fg-3)}
.s8b-rows{display:grid;gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r);overflow:hidden}
.s8b-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8-4);padding:8px var(--s8-3);background:var(--s8-panel)}
.s8b-rows dt,.s8b-rows .k{margin:0;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-fg-3)}
.s8b-rows dd,.s8b-rows .v{margin:0;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-fg)}
.s8b-term__btns{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8-2)}
.s8b-term__log{border:1px solid var(--s8-line);border-radius:var(--s8-r);background:var(--s8-bg);padding:var(--s8-3);max-height:132px;overflow:auto}
.s8b-term__log .lbl{display:block;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-fg-4);margin-bottom:6px}
.s8b-line{display:flex;gap:var(--s8-2);font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-xs);line-height:1.9;white-space:nowrap}
.s8b-line time{color:var(--s8-fg-4)}
.s8b-line .side{font-weight:600;color:var(--s8-fg-2);width:42px}
.s8b-line .px{color:var(--s8-fg-3)}
.s8b-line .pnl{margin-left:auto;font-weight:600}

/* ── strategy parameters, read from the script ────────── */
.s8b-params{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--s8-5);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8b-params>div{background:var(--s8-panel);padding:var(--s8-4) var(--s8-5);display:flex;align-items:baseline;gap:var(--s8-4)}
.s8b-params dt{margin:0;flex:1;font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}
.s8b-params dd{margin:0;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-accent-fg)}
@media(max-width:700px){.s8b-params{grid-template-columns:1fr}}

/* ── repo card ────────────────────────────────────────── */
.s8b-repo{display:flex;align-items:center;gap:var(--s8-4);margin-top:var(--s8-5);padding:var(--s8-5);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-panel)}
.s8b-repo__ico{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--s8-r);background:var(--s8-panel-2);border:1px solid var(--s8-line-2);color:var(--s8-fg-2)}
.s8b-repo__ico svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8b-repo__t{font-size:var(--s8-fs-base);font-weight:600;color:#fff}
.s8b-repo__p{margin:3px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8b-repo>a{margin-left:auto;flex:none}

/* ── code panel height caps ───────────────────────────── */
/* grid items default to min-width:auto, so a wide <pre> blows out the track;
   zero the min so the code scrolls instead of expanding the column. */
.s8c-docs>*{min-width:0}
.s8c-code,.s8c-code pre,.s8b-prompt,.s8b-prompt pre{max-width:100%}
.s8b-scroll pre{max-height:420px}
.s8b-scroll--sm pre{max-height:300px}
.s8b-scroll--tall pre{max-height:560px}
.s8c-code pre::-webkit-scrollbar{width:10px;height:10px}
.s8c-code pre::-webkit-scrollbar-thumb{background:var(--s8-line-2);border-radius:var(--s8-r-pill);border:3px solid var(--s8-inset)}
.s8c-code pre::-webkit-scrollbar-track{background:transparent}

/* ── prompt block: quoted, distinct from runnable code ── */
.s8b-prompt{margin-top:var(--s8-5);border:1px solid var(--s8-line);border-left:2px solid var(--s8-accent-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);overflow:hidden}
.s8b-prompt__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-4);border-bottom:1px solid var(--s8-line);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:.05em;color:var(--s8-fg-3)}
.s8b-prompt__bar .s8-btn{margin-left:auto}
.s8b-prompt pre{margin:0;padding:var(--s8-5);max-height:340px;overflow:auto;font-family:var(--s8-sans);font-size:var(--s8-fs-sm);line-height:1.7;color:var(--s8-fg-2);white-space:pre-wrap}

/* ── simulated disclaimer band ────────────────────────── */
.s8b-sim{display:flex;align-items:center;gap:var(--s8-3);margin-top:var(--s8-6);padding:var(--s8-4) var(--s8-5);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-inset);font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.s8b-sim svg{flex:none;width:16px;height:16px;stroke:var(--s8-fg-4);stroke-width:1.7;fill:none;stroke-linecap:round}
.s8b-sim b{color:var(--s8-fg)}

/* ── numbered run steps ───────────────────────────────── */
.s8b-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8b-steps>div{background:var(--s8-panel);padding:var(--s8-5)}
.s8b-steps .n{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--s8-r-sm);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;color:var(--s8-accent-fg)}
.s8b-steps h3{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-base);font-weight:600;color:#fff}
.s8b-steps p{margin:6px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);text-wrap:pretty}
@media(max-width:820px){.s8b-steps{grid-template-columns:1fr}}


/* Option B production adaptation: shared document width, centered marquee hero,
   real iframe, and the existing visible botScript textarea contract. */
.s8b-page{--s8c-w:1180px}
.s8b-hero{display:block;text-align:center}
.s8b-hero h1{max-width:15ch;margin-left:auto;margin-right:auto}
.s8b-hero .s8c-sub{margin-left:auto;margin-right:auto;text-align:center}
.s8b-hero .s8c-cta-row{justify-content:center}
.s8b-page .s8c-sec--band .s8b-steps>div{background:var(--s8-panel-2)}
.s8b-page .s8c-note{margin-top:var(--s8-4)}
.s8b-page .s8c-code{margin-top:0}
.s8b-page .s8c-code textarea{display:block;width:100%;height:560px;max-height:560px;margin:0;padding:var(--s8-4);resize:vertical;overflow:auto;border:0;outline:0;background:var(--s8-inset);color:var(--s8-fg-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--s8-fs-sm);line-height:1.75;tab-size:2;white-space:pre}
.s8b-page .s8c-code textarea::-webkit-scrollbar,.s8b-prompt pre::-webkit-scrollbar{width:10px;height:10px}
.s8b-page .s8c-code textarea::-webkit-scrollbar-thumb,.s8b-prompt pre::-webkit-scrollbar-thumb{background:var(--s8-line-2);border-radius:var(--s8-r-pill);border:3px solid var(--s8-inset)}
.s8b-section-lead{margin-top:0}
.s8b-page .s8c-close .s8c-eyebrow{justify-content:center}
@media(max-width:600px){.s8b-page .s8c-code textarea{height:420px;max-height:420px}.s8b-page .s8c-code__bar{height:auto;min-height:var(--s8-h-lg);padding-top:var(--s8-2);padding-bottom:var(--s8-2)}}

