/* Multi-timeframe side charts (js/multi-tf-charts.js). Shared by the live and replay
   simulators; each page wraps its .s8-stage in .s8-mtf-row with #s8Mtf before it. */
/* Two stacked charts at ~30% of the chart area. Collapsing leaves only the edge tab;
   below 1100px the column is hidden. */
.s8-mtf-row { flex: 1; min-height: 0; display: flex; }
.s8-mtf-row > .s8-stage { min-width: 0; }
.s8-mtf { flex: 0 0 30%; min-width: 320px; max-width: 560px; min-height: 0; display: flex; background: #000; }
.s8-mtf.is-collapsed .s8-mtf__stack { display: none; }
.s8-mtf__tab { flex: none; width: 14px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--s8-panel); border: 0; border-left: 1px solid var(--s8-line); border-right: 1px solid var(--s8-line); color: var(--s8-fg-3); cursor: pointer; }
.s8-mtf__tab:hover, .s8-mtf__tab:focus-visible { background: var(--s8-panel-2); color: var(--s8-gold); outline: none; }
.s8-mtf__tab svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.s8-mtf.is-collapsed .s8-mtf__tab svg { transform: scaleX(-1); }
/* Collapsed, the tab is the only sign the charts exist: gold edge + vertical "5m / 1H" label (the timeframes shown). */
.s8-mtf.is-collapsed { flex-basis: 20px; min-width: 20px; }
.s8-mtf.is-collapsed .s8-mtf__tab { width: 20px; flex-direction: column; gap: 8px; color: var(--s8-gold); background: linear-gradient(to right, var(--s8-panel), var(--s8-gold-tint)); border-right: 2px solid var(--s8-gold-line); }
.s8-mtf.is-collapsed .s8-mtf__tab:hover, .s8-mtf.is-collapsed .s8-mtf__tab:focus-visible { background: var(--s8-gold-tint); border-right-color: var(--s8-gold); }
.s8-mtf__tablabel { display: none; writing-mode: vertical-rl; font-size: var(--s8-fs-xs); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.s8-mtf.is-collapsed .s8-mtf__tablabel { display: block; }
.s8-mtf__stack { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Pro gate (free tier): countdown chip during the daily preview, then a static blurred
   placeholder + CTA card. Locked, no real charts load, so it costs no candle requests. */
.s8-mtf__preview { position: absolute; top: 6px; right: 66px; z-index: 6; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: rgba(12, 12, 18, .85); border: 1px solid var(--s8-gold-line); border-radius: var(--s8-r-pill); color: var(--s8-gold); font-size: var(--s8-fs-xs); font-weight: 600; pointer-events: none; }
.s8-mtf__preview[hidden], .s8-mtf__lock[hidden] { display: none; }
.s8-mtf__preview b { font-variant-numeric: tabular-nums; }
.s8-mtf.is-locked .s8-mtf__panel { visibility: hidden; }
.s8-mtf.is-locked .s8-mtf__stack { background: #000 url(/prototypes/terminal-v3/assets/multitf-locked.jpg) center / cover no-repeat; }
.s8-mtf__lock { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 16px; }
.s8-mtf__lockcard { width: 100%; max-width: 280px; padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: center; background: rgba(12, 12, 18, .92); border: 1px solid var(--s8-gold-line); border-radius: var(--s8-r); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.s8-mtf__lockh { margin: 0; font-size: var(--s8-fs-lg); font-weight: 700; color: var(--s8-fg); }
.s8-mtf__lockp { margin: 0 0 4px; font-size: var(--s8-fs-sm); line-height: 1.45; color: var(--s8-fg-2); }
.s8-mtf__notnow { align-self: center; padding: 2px 6px; background: none; border: 0; color: var(--s8-fg-3); font-size: var(--s8-fs-xs); cursor: pointer; }
.s8-mtf__notnow:hover, .s8-mtf__notnow:focus-visible { color: var(--s8-fg); text-decoration: underline; outline: none; }
.s8-mtf__panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.s8-mtf__panel + .s8-mtf__panel { border-top: 1px solid var(--s8-line); }
.s8-mtf__tf { position: absolute; top: 6px; left: 6px; z-index: 5; height: 22px; padding: 0 4px; background: rgba(12, 12, 18, .85); color: var(--s8-fg); border: 1px solid var(--s8-line); border-radius: var(--s8-r-xs); font-size: var(--s8-fs-xs); font-family: inherit; cursor: pointer; }
.s8-mtf__tf:hover { border-color: var(--s8-line-2); }
.s8-mtf__tf:focus-visible { outline: 1px solid var(--s8-gold); }
.s8-mtf__chart { flex: 1; min-width: 0; min-height: 0; display: flex; }
.s8-mtf__chart .sc-chart-container { flex: 1; min-width: 0; }
.s8-mtf__chart .sc-chart-container, .s8-mtf__chart .sc-price-chart { height: 100% !important; min-height: 0; }
.s8-mtf__chart canvas.sc-price-chart { display: block; border: 0; margin-bottom: 0; }
.s8-mtf__chart .sc-chart-controls-overlay, .s8-mtf__chart .sc-chart-info-overlay { display: none !important; }
.s8-mtf__panel.is-loading .s8-mtf__chart { opacity: .45; }
@media (max-width: 1099px) { .s8-mtf { display: none; } }