/* Yes No Levels hero stage (unit H2, 2026-10-12): a replay of real alert rows over the price the
   script saw. Tokens fall back to the site's values so the stage renders on any page. */
.ynl-stage{
  --st-bg:var(--bg,#0a0a0a);--st-surface:var(--surface,#141414);--st-border:var(--border,#2a2a2a);
  --st-accent:#32AFFF;--st-text:var(--text,#e5e5e5);--st-muted:var(--muted,#9a9a9a);--st-white:#fafafa;
  --st-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--st-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:relative;box-sizing:border-box;width:100%;background:var(--st-bg);color:var(--st-text);
  border:1px solid var(--st-border);border-radius:14px;overflow:hidden;font-family:var(--st-sans);
  display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;
}
.ynl-stage *,.ynl-stage *::before,.ynl-stage *::after{box-sizing:border-box}

/* Chart: canvas fills the plot; the title sits over its top-left corner. */
.ynl-stage .st-chart{position:relative;min-width:0;height:272px;background:var(--st-bg)}
.ynl-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ynl-stage .st-title{position:absolute;left:14px;top:10px;display:flex;align-items:baseline;gap:8px;pointer-events:none;max-width:calc(100% - 28px)}
.ynl-stage .st-tk{font:600 16px var(--st-mono);color:var(--st-white);letter-spacing:.02em}
.ynl-stage .st-disp{font:500 13px var(--st-sans);color:var(--st-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ynl-stage .st-date{font:500 12px var(--st-mono);color:var(--st-muted);white-space:nowrap}

/* Out-of-band notice: bottom-centre of the chart, only for an event of kind "notice". */
.ynl-stage .st-notice{position:absolute;left:50%;bottom:30px;transform:translate(-50%,8px);opacity:0;
  width:max-content;max-width:calc(100% - 32px);padding:10px 14px;border-radius:10px;
  background:rgba(20,20,20,.94);border:1px solid var(--st-border);color:var(--st-text);
  font:500 16px/1.45 var(--st-sans);text-align:center;transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.ynl-stage.st-wide .st-notice.on{opacity:1;transform:translate(-50%,0)}

/* Panel: the card the script prints on the chart, one read at a time. */
.ynl-stage .st-panel{position:relative;min-width:0;padding:14px 16px 16px;background:var(--st-surface);border-top:1px solid var(--st-border);display:flex;flex-direction:column}
.ynl-stage .st-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:40px}
.ynl-stage .st-ptk{font:600 15px var(--st-mono);color:var(--st-white)}
.ynl-stage .st-chip{font:500 12px var(--st-mono);border:1px solid var(--st-border);border-radius:999px;padding:2px 9px;color:var(--st-text);white-space:nowrap}
.ynl-stage .st-when{font:500 13px var(--st-mono);color:var(--st-muted);white-space:nowrap;margin-right:auto}
.ynl-stage .st-listen{font:600 15px var(--st-sans);border-radius:8px;padding:8px 14px;min-height:40px;min-width:84px;
  border:1px solid var(--st-border);background:var(--st-bg);color:var(--st-text);cursor:pointer}
.ynl-stage .st-listen:hover{border-color:var(--st-accent)}
.ynl-stage .st-listen.on{border-color:var(--st-accent);color:var(--st-accent)}
.ynl-stage .st-listen:focus-visible{outline:2px solid var(--st-accent);outline-offset:2px}
.ynl-stage .st-body{flex:1}
.ynl-stage .st-line{margin:0 0 6px;font:400 16px/1.5 var(--st-sans);color:var(--st-text);overflow-wrap:anywhere}
.ynl-stage .st-line:first-child{color:var(--st-white);font-weight:500}
.ynl-stage .st-line.st-ctx{color:var(--st-muted)}
/* The untyped rest of a line keeps its space (no reflow while typing) and is invisible. */
.ynl-stage .st-rest{color:transparent}

/* Fallback (no script, no data): ticker name and the notice, never a blank box. */
.ynl-stage .ynl-stage-fallback{padding:24px 16px;font:400 16px/1.5 var(--st-sans);color:var(--st-text)}
.ynl-stage .ynl-stage-fallback b{font:600 16px var(--st-mono);color:var(--st-white);display:block;margin-bottom:6px}
.ynl-stage.st-ready .ynl-stage-fallback{display:none}

/* Wide (the stage's OWN width >= 720 px, set by stage.js, so a gallery tile and the hero each pick
   the layout that fits them): the chart fills a 16:9-ish stage and the panel stands to its right. */
.ynl-stage.st-wide{grid-template-columns:minmax(0,1fr) minmax(300px,36%);grid-template-rows:1fr;aspect-ratio:16/8.4}
.ynl-stage.st-wide .st-chart{height:auto;min-height:340px}
.ynl-stage.st-wide .st-panel{border-top:0;border-left:1px solid var(--st-border);justify-content:center;padding:24px 26px}
.ynl-stage.st-wide .st-body{flex:0 0 auto}
.ynl-stage.st-wide .st-line{font-size:19px;margin-bottom:10px}
.ynl-stage.st-wide .st-tk{font-size:18px}
@media (prefers-reduced-motion:reduce){.ynl-stage .st-notice{transition:none}}