/* build/dyno_demo_polish.css
 * Demo polish overrides for the Dyno room. Loaded AFTER dyno.css.
 *
 * Goals (per Bud's notes):
 *   1. Bigger dyno screen — chart is the hero of this room.
 *   2. Gauges and metrics always visible (sticky), don't scroll away.
 *   3. Build summary deemphasized: smaller, scrollable.
 *   4. (Line widths handled in dyno-perf.js / dyno-eco.js — separate change.)
 *
 * NO PHYSICS CHANGES.
 */

/* ---- Stage: a touch wider so the chart can breathe ---- */
.dyno-stage {
  max-width: 1480px;
}

/* ---- Left column slightly narrower so right (chart) gets more room ---- */
@media (min-width: 1100px) {
  .dyno-main {
    grid-template-columns: 290px 1fr;
  }
}

/* ---- Pin the LEFT panel (gauges / build summary) so it's always visible
        when the user scrolls the chart panel. Includes its own scroll
        if the contents exceed viewport. ---- */
.dyno-left {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---- Build summary: smaller, scrollable when long ---- */
.dyno-build {
  max-height: 260px;
  overflow-y: auto;
  font-size: 12.5px;
}
.dyno-build .car { font-size: 14px; }
.dyno-build .eng { font-size: 10.5px; }

/* ---- Chart: bigger ---- */
.dyno-chart-wrap {
  padding: 18px 20px;
}
.dyno-chart-area {
  padding: 36px 20px 22px;
  min-height: 520px;
}
.dyno-chart-svg {
  min-height: 500px;
}

/* ---- Legend a hair bolder so AFR is easier to spot ---- */
.dyno-chart-legend .leg-row {
  font-weight: 600;
  letter-spacing: 0.3px;
}
.dyno-chart-legend .leg-dot {
  width: 14px;
  height: 14px;
}

/* ---- Bottom metrics row: sticky to the bottom of the right pane so the
        Peak HP / TQ / Δ readouts are always in view ---- */
.dyno-right { position: relative; }
.dyno-bottom {
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  z-index: 5;
  border-top: 1px solid var(--ink-faint);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.18);
}

/* ---- Slightly bigger metric values so they read at a distance ---- */
.dyno-metrics .m-value {
  font-size: 22px;
  letter-spacing: -0.5px;
}
.dyno-metrics .m-label {
  font-size: 10px;
  letter-spacing: 1.4px;
}

/* ---- Compact wide-screen tweaks: keep the chart and gauges on one row
        even when there's a lot of room. ---- */
@media (min-width: 1400px) {
  .dyno-stage { padding: 16px 24px 60px; }
}