/* ═══ SFTi — THE COMPOUNDING SIMULATOR. One component card, shop's own vocabulary. ═══════

   ⚠ THIS DECLARES NO COLOUR OF ITS OWN (R10). Every value below is a token from
   app/shared/css/tokens.css, and the three inks carry the meanings shop already assigns them:
     GOLD    the MEDIAN path — what actually happens to the middle of the distribution.
     RED     the EV path — the naive projection, drawn so it can be SEEN to diverge.
     SILVER  the p10-p90 band — informational spread, shop's quiet ink.
     CYAN    status. It stays the status colour here too: the readout strip and nothing else.
   A fourth hue would be a new theme, which is the one thing this card may not introduce.

   ── WHY THE CHART IS SELF-DRAWN SVG AND NOT A LIBRARY ──
   Nothing else on this site loads a charting library — app/system/js/chart.js draws its own
   candles as SVG, and the two public pages carry no chart at all. Pulling a CDN bundle in for
   one page would make this the only surface with an external runtime dependency, and it would
   have to be styled back into the deck anyway. The whole renderer is under 80 lines. */

/* ── THE TWO-COLUMN FRAME ───────────────────────────────────────────────────────────────── */
.sim-wrap {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
/* One column under the storefront's own breakpoint — the sliders are the thing you touch on a
   phone, so they lead and the chart follows. */
@media (max-width: 900px) {
  .sim-wrap { grid-template-columns: minmax(0, 1fr); }
}

.sim-panel {
  background: linear-gradient(135deg, rgba(26, 26, 38, 0.6) 0%, rgba(18, 18, 26, 0.8) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-sizing: border-box;
  min-width: 0;            /* a grid child must be allowed to shrink or the SVG forces overflow */
}

/* ── THE MODE SWITCH — options / pennies ────────────────────────────────────────────────── */
.sim-modes { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sim-mode {
  flex: 1 1 0;
  min-height: 44px;                       /* the finger floor this site states once, kept */
  font-family: 'Orbitron', monospace;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--bg-void) 60%, transparent);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 10px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.sim-mode[aria-pressed="true"] {
  border-color: var(--glass-border-active);
  color: var(--accent-gold);
  box-shadow: var(--glow-gold);
}

/* ── ONE SLIDER ROW ─────────────────────────────────────────────────────────────────────── */
.sim-row { margin-bottom: 0.85rem; }
.sim-row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  margin-bottom: 0.3rem;
}
.sim-label {
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.sim-value {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.82rem; font-weight: 700;
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}
/* The track. `accent-color` paints the native thumb and fill in one declaration on every
   engine that matters, so there is no vendor-prefixed thumb block to keep in step. */
.sim-row input[type="range"] {
  width: 100%; margin: 0; cursor: pointer;
  accent-color: var(--accent-gold);
  background: transparent;
}
.sim-note {
  font-size: 0.66rem; color: var(--text-dim); margin-top: 0.2rem; line-height: 1.4;
}

/* ── THE READOUT STRIP — cyan, because that is this site's status ink ────────────────────── */
.sim-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--glass-border);
  border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden;
  margin-bottom: 1rem;
}
.sim-stat { background: var(--glass-bg); padding: 0.7rem 0.8rem; }
.sim-stat-val {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-gold); word-break: break-all;
}
.sim-stat-val.warn { color: var(--accent-red-bright); }
.sim-stat-val.mute { color: var(--text-secondary); }
.sim-stat-lbl {
  font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 0.22rem;
}

/* ── THE CHART ──────────────────────────────────────────────────────────────────────────── */
.sim-chart { width: 100%; display: block; overflow: visible; }
.sim-chart .grid  { stroke: var(--glass-border); stroke-width: 1; }
.sim-chart .axis  { fill: var(--text-dim); font-size: 9px; font-family: ui-monospace, monospace; }
.sim-chart .band  { fill: rgba(192, 192, 192, 0.13); stroke: none; }
.sim-chart .median{ fill: none; stroke: var(--accent-gold); stroke-width: 2;
                    stroke-linejoin: round; stroke-linecap: round; }
.sim-chart .ev    { fill: none; stroke: var(--accent-red); stroke-width: 1.6;
                    stroke-dasharray: 5 4; stroke-linecap: round; }
.sim-chart .ruin  { stroke: var(--accent-red); stroke-width: 1; stroke-dasharray: 2 3; }

.sim-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.7rem;
  font-size: 0.68rem; color: var(--text-secondary);
}
.sim-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.sim-key i { width: 16px; height: 0; border-top: 2px solid currentColor; display: inline-block; }
.sim-key.k-median { color: var(--accent-gold); }
.sim-key.k-ev     { color: var(--accent-red); }
.sim-key.k-band   { color: var(--accent-silver); }
.sim-key.k-band i { border-top-width: 8px; opacity: 0.4; }

/* ── THE VERDICT — the one sentence the numbers add up to ────────────────────────────────── */
.sim-verdict {
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--accent-cyan);
  background: rgba(0, 229, 255, 0.06);
  border-radius: 0 10px 10px 0;
  padding: 0.8rem 1rem; margin-top: 1rem;
  font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary);
}
.sim-verdict.bad { border-left-color: var(--accent-red); background: rgba(230, 57, 70, 0.07); }
.sim-verdict strong { color: var(--text-primary); font-weight: 600; }
.sim-verdict code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--accent-gold); font-size: 0.92em;
}