/* ── Centripetal Force & Circular Motion Simulator ───────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #fb7185;
  --accent-lo: rgba(251,113,133,.22);
  --green:     #3ddc84;
  --red:       #ff5555;
  --gold:      #f5c842;
  --text:      #dde3f0;
  --text-dim:  #6b7a99;
  --font:      'Segoe UI', system-ui, sans-serif;
  --mono:      'Courier New', monospace;
  --radius:    12px;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; padding: 0 16px; }
#app { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* ── Header ────────────────────────────────────────────────────── */
header { text-align: center; padding: 4px 0; }
header h1 {
  font-size: 1.8rem; font-weight: 700;
  background: linear-gradient(120deg, #fb7185 0%, #fecdd3 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.subtitle { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; }

/* ── Controls bar ──────────────────────────────────────────────── */
.controls-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.ctrl-group { display: flex; align-items: center; gap: 8px; }
.ctrl-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; }

.pill-tabs { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.pill {
  padding: 5px 13px; border: none; background: transparent; color: var(--text-dim);
  border-radius: 6px; cursor: pointer; font-size: 0.81rem;
  transition: background .18s, color .18s, box-shadow .18s;
}
.pill.active { background: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent-lo); }
.pill:hover:not(.active) { background: var(--surface2); color: var(--text); }

/* ── Canvas card ───────────────────────────────────────────────── */
.canvas-card {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; position: relative; overflow-x: clip;
}
/* touch-action none: drag-to-aim is the canvas's primary interaction, and
   its vertical component (setting the angle) must not scroll the page. */
.canvas-card canvas { display: block; width: 100%; height: auto; cursor: pointer; touch-action: none; }
.canvas-stage { position: relative; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 0.84rem; font-weight: 600; transition: filter .18s, box-shadow .18s, opacity .18s;
}
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 12px var(--accent-lo); }
.btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--border); }

/* ── Sim controls ─────────────────────────────────────────────── */
.sim-controls {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 12px;
}
.sim-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sim-slider-group { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.sim-slider-label { font-size: 0.76rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; min-width: 80px; }
.sim-slider {
  flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 6px;
  background: var(--surface2); border-radius: 3px; outline: none;
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 8px var(--accent-lo);
}
.sim-slider::-moz-range-thumb {
  width: 18px; height: 18px; border: none;
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
.sim-slider-val {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
  color: var(--accent); min-width: 65px; text-align: right;
}

/* Aligned 2-column grid for the Simulate panel ------------------- */
/* Shared 80px label column so Angle/Velocity/Height/Gravity/Presets/Show line up */
.sim-controls .ctrl-label { min-width: 80px; }
/* Gravity occupies the right half (mirrors Velocity, identical flex to slider groups) */
.sim-row .sim-env { flex: 1; min-width: 200px; }
.sim-row .sim-env #gravity-tabs { margin-left: auto; }

.mass-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset-btn {
  padding: 6px 14px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--surface2); color: var(--text-dim); font-size: 0.78rem;
  font-weight: 700; cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.preset-btn:hover { border-color: var(--accent); color: var(--text); }
.preset-btn.active { border-color: var(--accent); color: #fff; background: rgba(251,113,133,.18); }

.readout-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
}
.readout-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; text-align: center;
}
.readout-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 3px; }
.readout-val { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.readout-val.warn { color: var(--red); }
.readout-unit { font-size: 0.68rem; color: var(--text-dim); margin-left: 2px; }

.sim-toggles { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sim-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.78rem; color: var(--text-dim); }
.sim-toggle input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.sim-toggle.checked { color: var(--text); }

/* ── Explore mode ──────────────────────────────────────────────── */
.item-selector {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; margin-top: 10px; }
.is-btn {
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--text-dim); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.is-btn:hover { border-color: rgba(251,113,133,.45); color: var(--text); }
.is-btn.active { border-color: var(--accent); color: #fff; background: rgba(251,113,133,.15); box-shadow: 0 0 14px var(--accent-lo); }
.is-btn-name { display: block; font-size: 0.82rem; font-weight: 700; }
.is-btn-sym  { display: block; font-size: 0.68rem; color: var(--accent); margin-top: 2px; font-family: var(--mono); }

.item-info {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.ii-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ii-name { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ii-cat-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 3px 10px; border-radius: 20px;
  background: var(--accent-lo); color: var(--accent);
}
.ii-desc { font-size: 0.85rem; color: var(--text-dim); line-height: 1.65; }

/* Formula box */
.formula-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.fb-formula { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.fb-unit { font-size: 0.78rem; color: var(--text-dim); }

/* Example calculation */
.example-box {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
}
.example-box h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.example-box .ex-problem { font-size: 0.84rem; color: var(--text); margin-bottom: 8px; line-height: 1.6; }
.example-box .ex-step { font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; padding: 2px 0; }
.example-box .ex-step strong { color: var(--green); font-family: var(--mono); }

/* ── Practice mode ─────────────────────────────────────────────── */
.practice-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.pp-prompt { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 14px; line-height: 1.6; }
.pp-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-input {
  flex: 1; min-width: 120px; max-width: 220px;
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: var(--mono);
  font-size: 1rem; font-weight: 700; transition: border-color .18s;
}
.pp-input:focus { outline: none; border-color: var(--accent); }
.pp-unit { font-size: 0.88rem; color: var(--text-dim); font-weight: 600; }
.pp-bottom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.feedback { font-size: 0.88rem; font-weight: 600; }
.feedback.ok  { color: var(--green); }
.feedback.err { color: var(--red); }

.solution-panel {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin-top: 12px;
}
.solution-panel h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.sol-step { font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; padding: 2px 0; }
.sol-step strong { color: var(--green); font-family: var(--mono); }

.practice-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.pbar-score { font-size: 0.84rem; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.pbar-score span { color: var(--text); font-weight: 700; }

/* ── Quiz panels ───────────────────────────────────────────────── */
.question-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.qp-prompt { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 12px; line-height: 1.6; }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-btn {
  padding: 14px 16px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface2); color: var(--text); font-size: 0.88rem;
  font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color .18s, background .18s, color .18s, transform .12s;
}
.answer-btn:hover:not(.locked) { border-color: var(--accent); background: rgba(251,113,133,.06); }
.answer-btn.correct { border-color: var(--green); background: rgba(61,220,132,.12); color: var(--green); }
.answer-btn.wrong { border-color: var(--red); background: rgba(255,85,85,.08); color: var(--red); }
.answer-btn.locked { cursor: default; opacity: 0.6; }
.answer-btn.correct.locked { opacity: 1; }

.quiz-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.qbar-counter { display: flex; align-items: baseline; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; }
.qbar-q-label { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.qbar-q-num { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1; }
.qbar-q-sep { font-size: 0.82rem; color: var(--text-dim); }
.qbar-q-total { font-family: var(--mono); font-size: 0.88rem; color: var(--text-dim); }
.quiz-feedback { font-size: 0.88rem; font-weight: 600; }
.quiz-feedback.ok  { color: var(--green); }
.quiz-feedback.err { color: var(--red); }

/* Quiz result */
.quiz-result {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.qr-header { display: flex; align-items: flex-start; justify-content: space-between; }
.qr-title-wrap { display: flex; flex-direction: column; gap: 5px; }
.qr-title  { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.qr-stars  { font-size: 1.2rem; letter-spacing: 3px; }
.qr-score-wrap { text-align: right; }
.qr-score { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; text-shadow: 0 0 14px currentColor; }
.qr-score.perfect { color: var(--gold); }
.qr-score.good { color: var(--green); }
.qr-score.poor { color: var(--red); }
.qr-verdict { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; }
.qr-rows { display: flex; flex-direction: column; gap: 7px; }
.qr-row {
  display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 8px; padding: 9px 12px;
}
.qr-row.ok  { border-left-color: var(--green); }
.qr-row.err { border-left-color: var(--red); }
.qr-qnum { font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.qr-detail { font-size: 0.78rem; color: var(--text-dim); }
.qr-detail strong { color: var(--text); }
.qr-mark { text-align: right; font-size: 1rem; font-weight: 700; }
.qr-row.ok .qr-mark { color: var(--green); }
.qr-row.err .qr-mark { color: var(--red); }

/* Quiz input row (for numeric quiz questions) */
.quiz-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.qi-input {
  flex: 1; min-width: 120px; max-width: 200px;
  padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: var(--mono);
  font-size: 1rem; font-weight: 700; transition: border-color .18s;
}
.qi-input:focus { outline: none; border-color: var(--accent); }
.qi-unit { font-size: 0.84rem; color: var(--text-dim); font-weight: 600; }

/* ── Fire / Reset button row ──────────────────────────────────── */
.btn-fire-row {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* ── Gravity selector spacing ─────────────────────────────────── */
#frame-tabs .pill {
  min-width: 52px; text-align: center;
}

/* ── Canvas overlay info box ──────────────────────────────────── */
.canvas-info-overlay {
  position: absolute; top: 8px; right: 8px;
  background: rgba(22,27,39,0.88); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .answer-grid { grid-template-columns: 1fr 1fr; }
  .is-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .controls-bar { gap: 10px; }
  .readout-row { grid-template-columns: repeat(2, 1fr); }
  .sim-slider-group { min-width: 160px; }
}
@media (max-width: 500px) {
  header h1 { font-size: 1.4rem; }
  .subtitle  { font-size: 0.78rem; }
  .controls-bar { padding: 10px 12px; gap: 8px; }
  .pill { padding: 5px 10px; font-size: 0.76rem; }
  .answer-grid { grid-template-columns: 1fr; }
  .is-grid { grid-template-columns: 1fr 1fr; }
  .readout-row { grid-template-columns: 1fr 1fr; }
  /* Wrap so the stepper drops below the slider instead of overflowing */
  .sim-slider-group { min-width: 100%; flex-wrap: wrap; }
  .sim-slider { flex: 1 1 120px; }
  .sim-slider-group .stepper { margin-left: 90px; } /* align under slider (80px label + gap) */
  .preset-btn { padding: 5px 10px; font-size: 0.72rem; }
}

/* Touch devices: comfortable tap targets (audit E7) */
@media (pointer: coarse) {
  .step-btn { width: 40px; height: 40px; }
  .pill { min-height: 40px; }
  .ct-btn, .ct-toggle, .preset-btn { min-height: 44px; }
}

/* ═══ Stepper inputs ═════════════════════════════════════════════ */
.stepper {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 2px;
}
.step-btn {
  width: 26px; height: 26px; padding: 0;
  border: none; background: var(--surface2); color: var(--text);
  border-radius: 6px; cursor: pointer; font-size: 0.95rem; font-weight: 700;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.step-btn:hover { background: var(--accent); color: #fff; }
.step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.step-input {
  width: 56px; padding: 4px 6px;
  border: none; background: transparent; color: var(--accent);
  font-family: var(--mono); font-size: 0.88rem; font-weight: 700;
  text-align: center;
}
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input { -moz-appearance: textfield; }
.step-input:focus { outline: none; }
.step-unit { font-size: 0.74rem; color: var(--text-dim); padding-right: 6px; min-width: 28px; }

/* ═══ Feature toggles row ════════════════════════════════════════ */
.feature-toggles { gap: 16px 18px; }
.feature-toggles .sim-toggle { font-size: 0.78rem; }

/* ═══ Canvas display-controls (collapsible, extreme top-left) ════ */
.canvas-toggles {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: rgba(13,17,30,0.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(139,157,195,0.22); border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.32);
}
.canvas-toggles > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text); border-radius: 9px;
  transition: background 0.12s, color 0.12s;
}
.canvas-toggles > summary::-webkit-details-marker { display: none; }
.canvas-toggles > summary::marker { content: ''; }
.canvas-toggles > summary:hover { background: rgba(251,113,133,0.10); color: var(--accent); }
.canvas-toggles .cvt-ico { flex-shrink: 0; color: var(--accent); }
.canvas-toggles .cvt-caret { margin-left: auto; padding-left: 4px; color: var(--text-dim); font-size: 0.7rem; transition: transform 0.2s; }
.canvas-toggles[open] > summary .cvt-caret { transform: rotate(180deg); color: var(--accent); }
.canvas-toggles[open] > summary { border-bottom: 1px solid rgba(139,157,195,0.18); border-radius: 9px 9px 0 0; }
.canvas-toggles .cvt-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 11px 9px; }
.canvas-toggles .cvt-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--text-dim); cursor: pointer; white-space: nowrap;
  transition: color 0.12s;
}
.canvas-toggles .cvt-item:hover { color: var(--text); }
.canvas-toggles .cvt-item input[type="checkbox"] {
  accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0;
}

/* ═══ Canvas hint banner ═════════════════════════════════════════ */
.canvas-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(245,200,66,0.95); color: #1a1a2e;
  padding: 6px 30px 6px 12px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  z-index: 4; max-width: calc(100% - 40px);
}
.canvas-hint.hidden { display: none; }
.hint-close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: none; background: transparent; color: #1a1a2e;
  font-size: 1.1rem; line-height: 1; cursor: pointer; font-weight: 700;
}
.canvas-card canvas { cursor: crosshair; }

/* ═══ Canvas toolbar — chip-style action bar docked under canvas ══ */
.canvas-toolbar {
  display: flex; flex-wrap: nowrap; gap: 4px;
  margin-top: 8px; padding: 8px 6px;
  background: linear-gradient(180deg, rgba(30,38,66,0.35), rgba(20,26,46,0.25));
  border: 1px solid rgba(139,157,195,0.22);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.canvas-toolbar .ct-btn {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  appearance: none;
  background: var(--surface2);
  border: 1px solid rgba(139,157,195,0.22);
  border-radius: 6px; color: var(--text);
  padding: 8px 8px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap; min-width: 0; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.canvas-toolbar .ct-btn .ct-icon  { font-size: 0.9rem; line-height: 1; }
.canvas-toolbar .ct-btn .ct-label { overflow: hidden; text-overflow: ellipsis; }
.canvas-toolbar .ct-btn:hover:not(:disabled) {
  background: var(--accent-lo); border-color: rgba(251,113,133,0.55);
  color: var(--accent); transform: translateY(-1px);
}
.canvas-toolbar .ct-btn:active:not(:disabled) { transform: translateY(0); }
.canvas-toolbar .ct-btn:disabled {
  opacity: 0.40; cursor: not-allowed; background: var(--surface); color: var(--text-dim);
}
.canvas-toolbar .ct-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -1px; }

/* Air Resistance — chip-style toggle on the far left */
.canvas-toolbar .ct-toggle {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface2);
  border: 1px solid rgba(139,157,195,0.22);
  border-radius: 6px; color: var(--text-dim);
  padding: 8px 8px; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap; min-width: 0; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.canvas-toolbar .ct-toggle input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
}
.canvas-toolbar .ct-toggle:hover { border-color: rgba(251,113,133,0.45); color: var(--text); }
.canvas-toolbar .ct-toggle.checked {
  color: var(--accent); border-color: rgba(251,113,133,0.55); background: var(--accent-lo);
}
.canvas-toolbar .ct-toggle .ct-label { overflow: hidden; text-overflow: ellipsis; }
.canvas-toolbar .ct-toggle.disabled { opacity: 0.4; cursor: not-allowed; }
.canvas-toolbar .ct-toggle.disabled:hover { border-color: rgba(139,157,195,0.22); color: var(--text-dim); background: var(--surface2); }
.canvas-toolbar .ct-toggle.disabled input[type="checkbox"] { cursor: not-allowed; }

/* Wider chips for the long-label items so text isn't clipped */
.canvas-toolbar .ct-btn-calc { flex-grow: 1.7; }
.canvas-toolbar .ct-toggle  { flex-grow: 2.2; }

/* Show Calculations — gold-tinted highlight */
.canvas-toolbar .ct-btn-calc {
  background: linear-gradient(180deg, rgba(245,200,66,0.20), rgba(245,200,66,0.06));
  border-color: rgba(245,200,66,0.45); color: var(--gold); font-weight: 700;
}
.canvas-toolbar .ct-btn-calc:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(245,200,66,0.34), rgba(245,200,66,0.14));
  border-color: var(--gold); color: var(--gold);
}
/* Fire — primary action, green */
.canvas-toolbar .ct-btn-fire {
  background: linear-gradient(180deg, #fb7185, #e11d48);
  border-color: rgba(255,255,255,0.15); color: #fff; font-weight: 700;
}
.canvas-toolbar .ct-btn-fire:hover:not(:disabled) {
  filter: brightness(1.1); background: linear-gradient(180deg, #fda4af, #f43f5e);
  border-color: var(--accent); color: #fff;
}

/* ═══ Calculation modal ══════════════════════════════════════════ */
.calc-modal {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.calc-modal.active { display: flex; }
.calc-modal-box {
  background: var(--surface); border: 1px solid rgba(139,157,195,0.25); border-radius: 12px;
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  max-height: calc(100vh - 48px); overflow: hidden;
}
.calc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2); flex-shrink: 0;
}
.calc-modal-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.calc-modal-close {
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.calc-modal-close:hover { border-color: var(--accent); color: var(--text); background: var(--surface2); }
.calc-modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.cs-inputs {
  background: rgba(251,113,133,0.08);
  border: 1px solid rgba(251,113,133,0.25); border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cs-badge {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  background: rgba(251,113,133,0.22); color: var(--accent);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-start;
}
.cs-given { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cs-given span { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }
.cs-si-note { font-size: 0.72rem; color: var(--text-dim); margin: 0; }

.cs-step {
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-step-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-num {
  font-size: 0.64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); background: rgba(251,113,133,0.18);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.cs-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.cs-formula {
  font-size: 0.95rem; color: var(--text);
  background: var(--surface2); border-radius: 6px;
  padding: 8px 12px; border-left: 3px solid var(--accent);
}
.cs-calc   { font-family: var(--mono); font-size: 0.8rem; color: var(--text); white-space: pre-wrap; line-height: 1.7; }
.cs-result { font-size: 0.88rem; color: var(--text-dim); margin-top: 2px; }
.cs-result strong { font-family: var(--mono); font-size: 0.95rem; color: var(--green); }

/* ═══ Learning panels (collapsible) ══════════════════════════════ */
.learn-panels {
  margin-top: 4px; padding: 14px;
  background: linear-gradient(180deg, rgba(30,38,66,0.6), rgba(20,26,46,0.6));
  border: 1px solid rgba(139,157,195,0.2);
  border-radius: 12px;
}
.learn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139,157,195,0.18);
  margin-bottom: 12px;
}
.learn-head-title { font-size: 0.95rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.learn-head-actions { display: flex; gap: 8px; }
.learn-toggle-all {
  padding: 5px 12px;
  background: rgba(251,113,133,0.12); border: 1px solid rgba(251,113,133,0.35);
  color: var(--accent); border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.learn-toggle-all:hover { background: rgba(251,113,133,0.25); color: var(--text); }
.learn-toggle-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.learn-card {
  border: 1px solid rgba(139,157,195,0.18); border-radius: 10px;
  background: rgba(13,17,30,0.55);
  margin-bottom: 10px; overflow: hidden;
  transition: border-color 0.2s;
}
.learn-card:last-child { margin-bottom: 0; }
.learn-card[open] { border-color: rgba(251,113,133,0.35); }
.learn-card > summary {
  list-style: none; cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  user-select: none; transition: background 0.15s; position: relative;
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary::marker { display: none; content: ''; }
.learn-card > summary:hover { background: rgba(251,113,133,0.08); }
.learn-card > summary::after {
  content: '\25BE'; margin-left: auto;
  color: var(--text-dim); font-size: 0.78rem;
  transition: transform 0.2s;
}
.learn-card[open] > summary::after { transform: rotate(180deg); color: var(--accent); }

.lp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(251,113,133,0.18); font-size: 0.9rem; flex-shrink: 0;
  color: var(--accent);
}
.lp-sub { color: var(--text-dim); font-weight: 500; font-size: 0.78rem; }
.learn-body { padding: 12px 14px 14px; }
.learn-body .eq-line { padding: 6px 0; border-bottom: 1px dashed rgba(139,157,195,0.15); overflow-x: auto; }
.learn-body .eq-line:last-child { border-bottom: none; }
.learn-body .eq-label { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 4px; }
.learn-body .coach-tip {
  padding: 8px 12px; margin: 6px 0;
  background: rgba(251,113,133,0.08); border-left: 3px solid var(--accent);
  border-radius: 6px; font-size: 0.82rem; color: var(--text); line-height: 1.55;
}
.learn-body .coach-tip strong { color: var(--accent); }

/* ═══ Context menu ═══════════════════════════════════════════════ */
.ctx-menu {
  display: none; position: fixed; z-index: 1100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  padding: 4px; min-width: 180px;
}
.ctx-menu.active { display: flex; flex-direction: column; }
.ctx-item {
  padding: 8px 12px; border: none; background: transparent;
  color: var(--text); text-align: left; font-size: 0.84rem;
  cursor: pointer; border-radius: 6px;
}
.ctx-item:hover { background: var(--surface2); color: var(--accent); }

/* ═══ Featured snippet table ═════════════════════════════════════ */
.snippet-table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.snippet-table th, .snippet-table td {
  padding: 8px 12px; text-align: left;
  font-size: 0.84rem; border-bottom: 1px solid var(--border);
}
.snippet-table th {
  background: var(--surface2); color: var(--accent);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem;
}
.snippet-table td:nth-child(2) { font-family: var(--mono); color: var(--text); }
.snippet-table tbody tr:last-child td { border-bottom: none; }
.snippet-table tbody tr:hover { background: rgba(251,113,133,0.05); }

@media (max-width: 540px) {
  .canvas-toolbar { flex-wrap: wrap; }
  .canvas-toolbar .ct-btn,
  .canvas-toolbar .ct-toggle { flex: 1 1 28%; font-size: 0.72rem; padding: 8px 6px; min-height: 40px; }
}
@media (max-width: 500px) {
  .stepper .step-input { width: 44px; font-size: 0.82rem; }
  .step-btn { width: 24px; height: 24px; }
  .step-unit { font-size: 0.7rem; min-width: 22px; padding-right: 4px; }
  .feature-toggles { gap: 8px 12px; }
  .feature-toggles .sim-toggle { font-size: 0.72rem; }
  /* Compact the collapsible display controls on the short mobile canvas */
  .canvas-toggles > summary { padding: 5px 8px; font-size: 0.6rem; gap: 5px; }
  .canvas-toggles .cvt-body { padding: 6px 9px 7px; gap: 4px; }
  .canvas-toggles .cvt-item { font-size: 0.64rem; gap: 5px; }
  .canvas-toggles .cvt-item input[type="checkbox"] { width: 12px; height: 12px; }
  /* Hide the first-time tip on mobile — it can't fit clear of the toggles on a short canvas; the User Guide covers it */
  .canvas-hint { display: none; }
  .calc-modal { padding: 12px 8px; }
  .calc-modal-box { max-height: calc(100vh - 24px); }
  .calc-modal-body { padding: 12px 12px; }
  .cs-step { padding: 10px; }
  .learn-panels { padding: 10px; }
  .learn-card > summary { padding: 10px 12px; font-size: 0.82rem; }
  .lp-sub { display: none; }
  .learn-body { padding: 10px 12px 12px; }
  .learn-head-title { font-size: 0.85rem; }
  .learn-toggle-all { padding: 4px 10px; font-size: 0.72rem; }
  .snippet-table th, .snippet-table td { padding: 6px 8px; font-size: 0.76rem; }
}

/* INTERLINK-START  header quick-links */
.head-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.btn-link{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:8px;font-size:.82rem;font-weight:700;text-decoration:none;cursor:pointer;background:var(--surface2,#1f2535);color:var(--text,#dde3f0);border:1.5px solid var(--border,#2a3050);white-space:nowrap;transition:border-color .18s,background .18s,color .18s;}
.btn-link:hover{border-color:var(--accent,#4fc3f7);background:var(--accent-lo,rgba(79,195,247,.18));color:#fff;}
.btn-link img{width:20px;height:20px;border-radius:4px;flex:none;}
.btn-link .lbl{line-height:1;}
@media(max-width:560px){.btn-link .lbl{display:none;}.btn-link{padding:5px 9px;}}
/* INTERLINK-END */


/* Slider hit area: the input itself is 24px tall and the visible 6px bar is its
   runnable track, so no padding trick is needed here. */

/* ═══ Mobile: collapse the canvas display-controls to an icon-only chip ═══
   On a short phone canvas the full "DISPLAY CONTROLS" bar sits across the top
   of the simulation and hides it. Below 768px the summary shrinks to a square
   icon button so the canvas stays readable; the label and caret come back the
   moment the panel is opened, because at that point the user has deliberately
   chosen to cover the canvas. The 44px minimum keeps the tap target within the
   project's touch-size rule. */
@media (max-width: 768px) {
  .canvas-toggles > summary {
    padding: 0; gap: 0;
    min-width: 44px; min-height: 44px;
    justify-content: center;
  }
  .canvas-toggles > summary .cvt-title,
  .canvas-toggles > summary .cvt-caret { display: none; }
  .canvas-toggles .cvt-ico { width: 18px; height: 18px; }

  .canvas-toggles[open] > summary {
    padding: 7px 10px; gap: 7px;
    min-height: 0; justify-content: flex-start;
  }
  .canvas-toggles[open] > summary .cvt-title { display: inline; }
  .canvas-toggles[open] > summary .cvt-caret { display: inline; margin-left: auto; padding-left: 4px; }
}

/* SI/Imperial toggle — first row of the control panel (moved out of the mode bar) */
.unit-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.unit-row .ctrl-group { margin: 0; }
/* In Simulate the toggle sits in the canvas toolbar, right after Reset. */
.unit-row.in-toolbar { margin: 0; }
.in-toolbar .ctrl-label { display: none; }
@media (max-width: 500px) { .unit-row { justify-content: flex-start; } }

/* ═══════════════════════════════════════════════════════════════════
   CENTRIPETAL FORCE — layout and components
   Canvas first (projectile-motion pattern), a four-step guide and key-reading
   tiles (galvanic-cell pattern), and the situation's controls in a column that
   sits BESIDE the canvas on wide screens and under it otherwise.
   ═══════════════════════════════════════════════════════════════════ */
#app { max-width: 1280px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pill:disabled { opacity: 0.38; cursor: not-allowed; }
.pill:focus-visible, .chip:focus-visible, .btn:focus-visible, .situ-pill:focus-visible, .situ-group:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.anchor-offset { display: block; position: relative; top: -12px; visibility: hidden; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(251,113,133,.65); } 100% { box-shadow: 0 0 0 14px rgba(251,113,133,0); } }
.pulse-ring { animation: pulse-ring 1.1s ease-out 1; }
#sec-simulate { display: flex; flex-direction: column; gap: 12px; }

/* ── 1. the four-step guide: a progress rail, not a wall of text ── */
.lab-steps {
  list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.lab-steps li { min-width: 0; }
.lab-steps button {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 42px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-dim);
  font: 600 0.82rem var(--font); text-align: left; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.lab-steps button:hover { background: var(--surface2); color: var(--text); }
.ls-num { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.74rem; font-weight: 800; background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
.ls-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-steps button.current { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.45); color: var(--text); }
.lab-steps button.current .ls-num { background: var(--accent); border-color: var(--accent); color: #2a0710; box-shadow: 0 0 0 4px rgba(251,113,133,.18); }
.lab-steps button.done { color: var(--text); }
.lab-steps button.done .ls-num { background: rgba(61,220,132,.16); border-color: rgba(61,220,132,.5); color: var(--green); font-size: 0; }
.lab-steps button.done .ls-num::before { content: "\2713"; font-size: 0.8rem; }

/* ── 2. the workbench: canvas column + controls column ── */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1180px) {
  .workbench { grid-template-columns: minmax(0, 1fr) 340px; }
  .ctrl-col { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.bench-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* the canvas card: picker on top, picture, toolbar docked underneath */
.canvas-card { padding: 0; border-radius: 16px; overflow: clip; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.canvas-stage { position: relative; padding: 8px 8px 0; }
.canvas-card canvas { cursor: default; touch-action: manipulation; border-radius: 10px; }

.situ-bar {
  display: flex; flex-direction: column; gap: 9px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(251,113,133,.09), rgba(251,113,133,0) 85%);
  border-bottom: 1px solid rgba(139,157,195,.16);
}
.situ-groups {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%;
  background: var(--bg); border: 1px solid var(--border); padding: 4px; border-radius: 12px;
}
.situ-group {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  border: 1px solid transparent; background: transparent; color: var(--text-dim); font: 700 0.82rem var(--font); letter-spacing: .01em;
  padding: 8px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.situ-group svg { width: 20px; height: 20px; flex: none; }
.sg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font: 800 0.68rem var(--font); color: var(--text-dim); background: rgba(139,157,195,.14); }
.situ-group:hover { color: var(--text); background: rgba(139,157,195,.07); }
.situ-group.active { background: var(--surface2); color: #fff; border-color: rgba(251,113,133,.45); box-shadow: inset 0 -2px 0 var(--accent); }
.situ-group.active svg { color: var(--accent); }
.situ-group.active .sg-n { background: var(--accent); color: #1a0d12; }
/* situation tiles stretch to fill the row, however many the group holds */
.situ-pills { display: flex; gap: 8px; }
.situ-pills .situ-pill { flex: 1 1 0; }
.situ-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 54px; padding: 10px 8px 9px; text-align: center;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
  font: 600 0.84rem var(--font); cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .1s;
}
.sp-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(139,157,195,.10); border: 1px solid rgba(139,157,195,.18); transition: background .15s, color .15s; }
.sp-ico svg { width: 21px; height: 21px; }
.sp-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.sp-name, .sp-hint { overflow-wrap: anywhere; }
.sp-name { font-weight: 700; color: inherit; line-height: 1.2; }
.sp-hint { font: 600 0.7rem var(--font); color: var(--text-dim); opacity: .85; line-height: 1.25; }
.situ-pill:hover { border-color: rgba(251,113,133,.55); color: var(--text); }
.situ-pill:hover .sp-ico { color: var(--accent); }
.situ-pill:active { transform: translateY(1px); }
.situ-pill.active { border-color: var(--accent); background: linear-gradient(180deg, rgba(251,113,133,.20), rgba(251,113,133,.08)); color: #fff; }
.situ-pill.active .sp-ico { background: var(--accent); border-color: var(--accent); color: #1a0d12; }
.situ-pill.active .sp-hint { color: #ffd0d8; opacity: 1; }
.situ-pill[hidden] { display: none; }

/* toolbar: projectile-motion's chips, with ONE primary action */
.canvas-toolbar { margin: 8px; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px; }
.canvas-toolbar .ct-btn { flex: 0 0 auto; padding: 8px 11px; }
.canvas-toolbar { gap: 5px; }
.canvas-toolbar .ct-btn-fire {
  flex: 1 1 108px; font-size: 0.86rem; padding: 9px 12px;
  background: linear-gradient(180deg, #fb7185, #e11d48); border-color: rgba(255,255,255,.18); color: #fff; font-weight: 800;
  box-shadow: 0 6px 18px rgba(225,29,72,.28);
}
.canvas-toolbar .ct-btn-fire:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(180deg, #fda4af, #f43f5e); color: #fff; border-color: rgba(255,255,255,.3); }
.canvas-toolbar .ct-frame {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  background: var(--surface2); border: 1px solid rgba(139,157,195,.22); border-radius: 6px; color: var(--text-dim); font: 600 0.75rem var(--font);
}
.ct-frame .sw { width: 30px; height: 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); position: relative; flex: none; transition: background .15s, border-color .15s; }
.ct-frame .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #6b7a99; transition: transform .18s, background .15s; }
.ct-frame[aria-pressed="true"] { color: #ffd2c4; border-color: rgba(255,112,67,.6); background: rgba(255,112,67,.12); }
.ct-frame[aria-pressed="true"] .sw { background: rgba(255,112,67,.25); border-color: #ff7043; }
.ct-frame[aria-pressed="true"] .sw::after { transform: translateX(14px); background: #ff7043; }
.ct-frame:disabled { opacity: .45; cursor: not-allowed; }
.ct-frame:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ct-speed { display: inline-flex; }
/* the SI/Imperial switch lives in the toolbar right after Reset (moved out
   in Explore/Practice/Quiz, where the toolbar is hidden) */
.canvas-toolbar .unit-row { flex: 0 0 auto; }
.canvas-toolbar .unit-row .pill-tabs { min-height: 34px; }
.canvas-toolbar .unit-row .pill { padding: 6px 10px; font-size: 0.75rem; }
.speed-sel { min-height: 34px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(139,157,195,.3); background: var(--surface2); color: var(--text); font: 600 0.75rem var(--font); }
.ct-more { position: relative; }
.ct-more > summary { list-style: none; }
.ct-more > summary::-webkit-details-marker { display: none; }
.act-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 210px; padding: 4px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.act-menu button { text-align: left; padding: 9px 12px; border: 0; background: transparent; color: var(--text); border-radius: 7px; font: 600 0.82rem var(--font); cursor: pointer; }
.act-menu button:hover { background: var(--surface2); color: var(--accent); }

/* status: one sentence that says what is happening, coloured by verdict */
.sim-status {
  margin: 0; padding: 10px 14px 10px 40px; position: relative; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); font-size: 0.86rem; line-height: 1.45; color: var(--text); min-height: 1.4em;
}
.sim-status::before { content: "i"; position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 0.72rem var(--font); background: var(--surface2); color: var(--text-dim); }
.sim-status.ok { border-color: rgba(61,220,132,.35); }
.sim-status.ok::before { content: "\2713"; background: rgba(61,220,132,.18); color: var(--green); }
.sim-status.warn { border-color: rgba(245,200,66,.4); }
.sim-status.warn::before { content: "!"; background: rgba(245,200,66,.18); color: var(--gold); }
.sim-status.bad { border-color: rgba(255,85,85,.45); background: rgba(255,85,85,.06); }
.sim-status.bad::before { content: "!"; background: rgba(255,85,85,.2); color: var(--red); }

/* key readings: the situation's headline number is a full-width hero bar,
   the other five sit in one row beneath it */
.kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kpi-l { font-size: 0.66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; line-height: 1.25; }
.kpi-v { font: 700 0.98rem var(--mono); color: var(--text); overflow-wrap: anywhere; }
.kpi.hero {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px;
  background: linear-gradient(100deg, rgba(251,113,133,.18), rgba(251,113,133,.04) 70%); border-color: rgba(251,113,133,.5);
}
.kpi.hero .kpi-l { font-size: 0.74rem; color: #fecdd3; }
.kpi.hero .kpi-v { font-size: 1.5rem; color: #fff; text-shadow: 0 0 18px rgba(251,113,133,.45); text-align: right; }
.kpi.live .kpi-l::after { content: " \25CF live"; color: var(--green); letter-spacing: 0; text-transform: none; font-weight: 600; }
.kpi.warn { border-color: rgba(255,85,85,.55); background: rgba(255,85,85,.07); }
.kpi.warn .kpi-v { color: var(--red); }
.kpi.hero.warn { background: linear-gradient(100deg, rgba(255,85,85,.2), rgba(255,85,85,.04) 70%); }
@media (max-width: 860px) { .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 3. the controls column ── */
.ctrl-col { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.situ-now { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid rgba(139,157,195,.16); }
.situ-now-ico { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.35); }
.situ-now-ico svg { width: 26px; height: 26px; }
.situ-now-txt { min-width: 0; }
.scen-title { display: block; font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.sp-note { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-dim); }
.param-set { display: flex; flex-direction: column; gap: 10px; }
.ctl { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s; }
.ctl:focus-within { border-color: rgba(251,113,133,.5); }
.ctl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctl-name { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.ctl .sim-slider { width: 100%; margin: 4px 0 0; }
.ctl-hint { margin: 0; font-size: 0.74rem; line-height: 1.4; color: var(--text-dim); }
.param-select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 0.84rem; margin-top: 4px; }
.ctl .stepper { padding: 2px; }
.ctl .step-input { width: 64px; }
.step-unit { min-width: 34px; }
.sim-slider { height: 24px; background: transparent; border: none; }
.sim-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--pct, 0%), rgba(255,255,255,.12) var(--pct, 0%)); }
.sim-slider::-webkit-slider-thumb { margin-top: -7px; border: 2px solid rgba(255,255,255,.25); }
.sim-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.1); }
.sim-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip-lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; margin-right: 2px; }
.chip { padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.chip em { font-style: normal; color: var(--accent); font-family: var(--mono); margin-left: 2px; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { border-color: var(--accent); color: #fff; background: rgba(251,113,133,.16); }
.try-this {
  font-size: 0.8rem; line-height: 1.55; color: var(--text); padding: 10px 12px; border-radius: 12px;
  background: rgba(245,200,66,.07); border: 1px dashed rgba(245,200,66,.45);
}
.try-this:empty { display: none; }
.try-k { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #1a1a2e; background: var(--gold); border-radius: 5px; padding: 1px 6px; margin-right: 4px; }
.try-this strong { color: var(--gold); }

/* stacked layout (below 1180): the controls sit in two columns under the canvas */
@media (min-width: 700px) and (max-width: 1179px) {
  .param-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* learning panels */
#lp-graph canvas { display: block; width: 100%; border-radius: 8px; }

/* ── Calculator card (the page's first answer) ── */
.calc-card {
  background: linear-gradient(180deg, rgba(251,113,133,0.08), rgba(22,27,39,0.9) 60%);
  border: 1px solid rgba(251,113,133,0.35); border-radius: var(--radius); padding: 14px 16px 16px;
}
.cc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cc-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 0; }
.cc-sub { font-size: 0.8rem; color: var(--text-dim); }
.cc-solve-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cc-field { display: flex; flex-direction: column; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cc-field.solved { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-lo) inset; background: rgba(251,113,133,0.08); }
.cc-lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); display: flex; justify-content: space-between; gap: 6px; }
.cc-field.solved .cc-lbl::after { content: 'answer'; color: var(--accent); }
.cc-in-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-in-row input {
  flex: 1; min-width: 0; width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px;
  background: #0b0f17; color: var(--text); font-family: var(--mono); font-size: 0.95rem; font-weight: 700;
}
.cc-in-row input:focus { outline: none; border-color: var(--accent); }
.cc-in-row input[readonly] { background: transparent; border-color: transparent; color: var(--accent); }
.cc-unit { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.cc-motion-sel { width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 0.78rem; }
.cc-result { margin-top: 12px; }
.cc-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cc-main-l { font-size: 0.82rem; color: var(--text-dim); font-weight: 700; }
.cc-main-v { font-family: var(--mono); font-size: 1.6rem; font-weight: 800; color: var(--accent); text-shadow: 0 0 14px var(--accent-lo); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cc-chips span { font-size: 0.76rem; color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.cc-chips b { color: var(--text); font-family: var(--mono); }
.cc-err { color: var(--gold); font-size: 0.85rem; font-weight: 600; }
.cc-steps { margin-top: 10px; }
.cc-steps .eq-line { padding: 6px 0; border-bottom: 1px dashed rgba(139,157,195,0.15); overflow-x: auto; }
.cc-note { font-size: 0.74rem; color: var(--text-dim); margin-top: 6px; }
.cc-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cc-foot small { color: var(--text-dim); font-size: 0.75rem; }

/* ── Data Lab ── */
.lab-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lab-bar select { padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 0.8rem; }
.lab-intro { font-size: 0.82rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 10px; }
.lab-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-bottom: 10px; }
.lab-tbl th, .lab-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.lab-tbl th:nth-child(2), .lab-tbl td:nth-child(2) { text-align: left; }
.lab-tbl th { color: var(--accent); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; }
.lab-tbl td { font-family: var(--mono); color: var(--text); }
.lab-empty { text-align: center !important; color: var(--text-dim) !important; font-family: var(--font) !important; white-space: normal !important; }
.lab-table-wrap { overflow-x: auto; max-height: 220px; overflow-y: auto; }
.lab-fit { font-size: 0.82rem; color: var(--text); margin-top: 8px; line-height: 1.5; }
#lab-canvas { display: block; width: 100%; border-radius: 8px; margin-top: 8px; }

/* ── Quiz key letters ── */
.ab-key { display: inline-block; min-width: 20px; color: var(--accent); font-family: var(--mono); font-weight: 800; }
.answer-btn { text-align: left; }
.rec-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: 0.74rem; text-align: center; }

/* ── responsive ── */
@media (max-width: 900px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lab-steps { grid-template-columns: 1fr 1fr; }
  .canvas-toolbar { margin: 6px; }
  .canvas-toolbar .ct-btn-fire { flex: 1 1 100%; min-height: 44px; }
  .canvas-toolbar .ct-btn, .canvas-toolbar .ct-frame, .speed-sel { min-height: 44px; }
  .canvas-toolbar .ct-btn, .canvas-toolbar .ct-frame, .ct-speed, .ct-more { flex: 1 1 calc(33% - 6px); justify-content: center; }
  .ct-more > summary { width: 100%; justify-content: center; }
  .canvas-toolbar .ct-btn.ct-btn-fire { flex: 1 1 100%; }
  .canvas-toolbar .unit-row { flex: 1 1 calc(33% - 6px); }
  .canvas-toolbar .unit-row .ctrl-group, .canvas-toolbar .unit-row .pill-tabs { width: 100%; height: 100%; }
  .canvas-toolbar .unit-row .pill { flex: 1 1 0; min-height: 44px; padding: 6px 4px; }
  .canvas-toolbar .ct-frame, .canvas-toolbar .ct-speed, .canvas-toolbar .ct-btn-calc, .canvas-toolbar .ct-more { flex: 1 1 calc(50% - 4px); }
  .speed-sel { width: 100%; }
}
@media (max-width: 500px) {
  .cc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cc-main-v { font-size: 1.3rem; }
  .lab-steps .ls-txt { font-size: 0.74rem; white-space: normal; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-v { font-size: 0.9rem; }
  .kpi.hero .kpi-v { font-size: 1.2rem; }
  .ctl .step-input { width: 54px; }
  .canvas-stage { padding: 6px 6px 0; }
  .situ-bar { padding: 8px; }
}
@media (pointer: coarse) {
  .chip, .situ-group { min-height: 40px; }
  .cc-in-row input { min-height: 40px; }
}
@media (max-width: 560px) {
  .situ-group { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 0.72rem; }
  .sg-name { white-space: normal; text-align: center; line-height: 1.15; }
  .sg-n { display: none; }
  .situ-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .situ-pill[data-scen="rotor"] { grid-column: span 2; }   /* the odd fifth tile of its group fills the row */
  .situ-pill { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 50px; padding: 6px 8px 6px 6px; gap: 8px; font-size: 0.78rem; }
  .sp-txt { align-items: flex-start; }
  .sp-name, .sp-hint { white-space: normal; }
  .sp-ico { width: 30px; height: 30px; border-radius: 8px; }
  .sp-ico svg { width: 18px; height: 18px; }
  .sp-hint { font-size: 0.64rem; }
}