/* ── Tuning Fork Simulator ─────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #9575cd;
  --accent-lo: rgba(149,117,205,.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, #9575cd 0%, #d1c4e9 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;
}
.canvas-card canvas { display: block; width: 100%; height: auto; cursor: pointer; touch-action: pan-y; }

/* ── 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; -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: 75px; text-align: right;
}

.preset-row { 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(149,117,205,.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-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); }

/* ── Resonance warning ────────────────────────────────────────── */
.resonance-warn {
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: rgba(255,85,85,.15); color: var(--red);
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; animation: pulse-warn 1s infinite;
}
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── 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(149,117,205,.45); color: var(--text); }
.is-btn.active { border-color: var(--accent); color: #fff; background: rgba(149,117,205,.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(149,117,205,.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-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; }

.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); }

/* ── SEO article ───────────────────────────────────────────────── */
.seo-article {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-top: 8px;
}
.seo-article h2 {
  font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 14px;
  background: linear-gradient(120deg, #9575cd 0%, #d1c4e9 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.seo-article h3 { font-size: 1rem; font-weight: 700; color: var(--accent); margin: 16px 0 8px; }
.seo-article p { font-size: 0.88rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 10px; }

/* ── 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; }
  .sim-slider-group { min-width: 100%; }
  .preset-row { gap: 4px; }
  .preset-btn { padding: 5px 10px; font-size: 0.72rem; }
}

/* 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 */


/* Mobile: enlarge the slider touch target without moving the visuals.
   The visible track is the input's own background, so transparent vertical
   padding plus background-clip:content-box keeps the bar exactly where it was
   while growing the hit box. Measured on beam-bending: the effective touch
   band goes from 18px to 30px, clearing the WCAG 2.5.8 minimum of 24px.
   box-sizing must be content-box because the global reset sets border-box. */
@media (max-width: 720px) {
  .sim-slider {
    box-sizing: content-box;
    padding: 12px 0;
    background-clip: content-box;
  }
}

/* ══ Tuning-fork specific ═══════════════════════════════════════ */

/* Slider track — must stay visible on the dark ground (house pattern) */
.sim-slider {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.1);
}
.sim-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent-lo), rgba(255,255,255,.12));
}
.sim-slider::-webkit-slider-thumb { margin-top: -6px; border: 2px solid rgba(255,255,255,.2); }
.sim-slider::-moz-range-track {
  height: 6px; border-radius: 3px; border: none;
  background: linear-gradient(to right, var(--accent-lo), rgba(255,255,255,.12));
}
.sim-slider::-moz-range-thumb { border: 2px solid rgba(255,255,255,.2); }

/* Rig tabs get a little more presence than plain pills */
#rig-tabs .pill { font-weight: 700; }

/* Action row */
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Live equations panel (KaTeX) */
.learn-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
}
.learn-panel h3 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); margin-bottom: 10px;
}
.lp-eq-body { display: flex; flex-direction: column; gap: 10px; }
.lp-eq-row {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; overflow-x: auto;
}
.lp-eq-cap { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 6px; }

/* Loudness / level meter — sits at the end of the action bar, not on a row
   of its own */


/* Note / cents chip */
.note-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px;
}
.note-name { font-family: var(--mono); font-size: 1.2rem; font-weight: 700; color: var(--gold); }
.note-cents { font-size: 0.72rem; color: var(--text-dim); }

/* First-run tip — carries its own close button so hint-autodismiss.js owns it */
.canvas-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 20; max-width: 300px;
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(22,27,39,.96); border: 1px solid var(--accent);
  border-radius: 10px; padding: 9px 12px;
  font-size: 0.76rem; color: var(--text); line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.canvas-hint-close {
  border: none; background: transparent; color: var(--text-dim);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.canvas-hint-close:hover { color: var(--text); }

/* Right-click context menu */
.ctx-menu {
  position: absolute; z-index: 100; min-width: 170px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.ctx-item {
  display: block; width: 100%; padding: 8px 16px; border: none;
  background: transparent; color: var(--text); font-size: 0.82rem;
  text-align: left; cursor: pointer; transition: background .12s;
}
.ctx-item:hover { background: var(--accent-lo); color: var(--accent); }

/* Data table inside the SEO article */
.seo-article table { border-collapse: collapse; width: 100%; font-size: 0.82rem; margin: 8px 0 14px; }
.seo-article th, .seo-article td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; color: var(--text-dim); }
.seo-article th { background: var(--surface2); color: var(--text); font-weight: 700; }
.seo-article ul, .seo-article ol { margin: 0 0 12px 20px; }
.seo-article li { font-size: 0.86rem; color: var(--text-dim); line-height: 1.7; }

@media (max-width: 768px) {
}
@media (max-width: 500px) {
  .canvas-hint { max-width: calc(100% - 24px); font-size: 0.72rem; }
  .note-name { font-size: 1rem; }
}

/* Touch targets: the checkbox itself is 16 px, which is under the WCAG 2.5.8
   minimum of 24. The label is the real target, so give the whole row height
   and grow the box a little. */
.sim-toggle { min-height: 28px; padding: 4px 0; }
.sim-toggle input[type="checkbox"] { width: 18px; height: 18px; }
#sel-mat { min-height: 32px; padding: 5px 8px; }

/* ══ Control grid — the spring-design pattern ════════════════════
   A labelled cell per variable instead of a label→slider→value row.
   The stepper's value cell doubles as the range indicator: --pct is
   written by app.js on every change, so the fill shows where the
   variable sits between its own limits without spending a second row
   on a slider. */
.sim-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px; align-items: end; width: 100%;
}
.sim-grid .sim-slider-group {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 5px; min-width: 0; flex: initial;
}
.sim-grid .sim-slider-label {
  min-width: 0; text-transform: uppercase; letter-spacing: .05em; font-size: 0.68rem;
}
.sim-slider-label .sym { text-transform: none; font-style: italic; }
.sim-grid .pill-tabs { width: 100%; min-width: 0; }
.sim-grid .pill-tabs .pill { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 6px; }
.lbl-unit { text-transform: none; font-weight: 700; color: var(--accent); opacity: .85; margin-left: 2px; }

.sim-select {
  width: 100%; min-width: 0; padding: 8px 10px;
  background: var(--bg); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 9px;
  font-family: var(--font); font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.sim-select:focus { outline: none; border-color: var(--accent); }
.sim-select:hover { border-color: var(--accent); }

/* The material line states what the engine is actually using, so E and rho
   are never numbers the student has to take on trust. */
.mat-note { font-size: 0.74rem; color: var(--text-dim); margin: -2px 0 0; line-height: 1.5; }
.mat-note strong { color: var(--text); }

/* ── Steppers — the exact-value numeric control ───────────────── */
.stepper {
  display: flex; align-items: stretch; width: 100%; min-width: 0;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 9px;
  overflow: hidden; transition: border-color .15s;
}
.stepper:focus-within { border-color: var(--accent); }
.step-btn {
  flex: 0 0 auto; width: 34px; border: none; border-radius: 0;
  background: var(--surface2); color: var(--accent);
  font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.step-btn:hover  { background: var(--accent); color: #fff; }
.step-btn:active { background: var(--accent); color: #fff; filter: brightness(1.15); }
.step-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.step-input {
  flex: 1 1 auto; min-width: 44px; width: 100%;
  padding: 7px 4px; text-align: center; border: none; color: var(--text);
  font-family: var(--mono); font-size: 0.95rem; font-weight: 700;
  -moz-appearance: textfield; background-color: transparent;
  background-image:
    linear-gradient(90deg, var(--accent) 0 var(--pct, 0%), transparent var(--pct, 0%) 100%),
    linear-gradient(90deg, var(--accent-lo) 0 var(--pct, 0%), transparent var(--pct, 0%) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 2px, 100% 100%;
  background-position: left bottom, left center;
  transition: background-size .12s ease;
}
.stepper:focus-within .step-input { background-size: 100% 3px, 100% 100%; }
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-input:focus { outline: none; }

/* Readout cards, spring-design proportions */
.readout-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.readout-card { padding: 10px 12px; }
.readout-label { font-size: 0.63rem; }
.readout-val { font-size: 1.25rem; }

@media (max-width: 500px) {
  .sim-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 10px; }
  .step-btn { width: 38px; }
  .readout-row { grid-template-columns: 1fr 1fr; }
}

/* ══ In-canvas dock ══════════════════════════════════════════════
   The controls you reach for while watching the fork live on the
   canvas itself, pinned to its bottom edge, so your eye never leaves
   the apparatus to press them. app.js measures this bar and keeps the
   drawing clear of it, so it covers nothing. */
.canvas-dock {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 5px;
  padding: 7px 8px;
  background: rgba(13, 17, 30, 0.78);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
          backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(149, 117, 205, 0.22);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Shared chip geometry — buttons and toggles must be the same object */
.dock-btn, .dock-tog {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: var(--text-dim);
  font-family: var(--font); font-size: 0.74rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.dock-btn:hover, .dock-tog:hover { background: rgba(255, 255, 255, .10); color: var(--text); }
.dock-btn:active { transform: translateY(1px); }
.dock-ico { font-size: 0.98rem; line-height: 1; filter: saturate(1.15); }
.dock-lbl { line-height: 1; }

/* The primary action reads as the primary action */
.dock-primary {
  background: var(--accent); color: #fff;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 0 14px var(--accent-lo);
}
.dock-primary:hover { background: var(--accent); color: #fff; filter: brightness(1.12); }
.dock-mark { border-color: rgba(245, 200, 66, .45); color: var(--gold); }
.dock-mark:hover { background: rgba(245, 200, 66, .14); color: var(--gold); }

/* Toggles: the checkbox is the state, the chip is the control */
.dock-tog input[type="checkbox"] {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; left: 0; top: 0; cursor: pointer;
}
.dock-tog input:checked ~ .dock-ico,
.dock-tog input:checked ~ .dock-lbl { color: #fff; }
.dock-tog:has(input:checked) {
  background: var(--accent-lo); border-color: var(--accent); color: #fff;
  box-shadow: inset 0 0 12px rgba(149, 117, 205, .22);
}
/* Fallback for engines without :has() — the icon and label still switch */
.dock-tog input:checked ~ .dock-ico { transform: scale(1.05); }
.dock-tog input:not(:checked) ~ .dock-ico { opacity: .55; filter: grayscale(1); }
.dock-tog input:focus-visible ~ .dock-ico { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* A two-state icon (speaker on / muted) shows exactly one face */
.ico-off { display: none; }
.dock-tog input:not(:checked) ~ .dock-ico .ico-on  { display: none; }
.dock-tog input:not(:checked) ~ .dock-ico .ico-off { display: inline; }

.dock-sep {
  width: 1px; align-self: stretch; margin: 2px 1px;
  background: rgba(149, 117, 205, .28);
}

.level-wrap {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 2px 0 4px; flex: 0 1 88px; min-width: 62px;
}
.level-meter {
  display: block; height: 8px; border-radius: 4px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(149, 117, 205, .25);
  overflow: hidden; flex: 1 1 auto; min-width: 54px;
}
.level-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width .08s linear;
}

/* On a phone the labels are what has to give, not the tap target */
@media (max-width: 640px) {
  .canvas-dock { left: 6px; right: 6px; bottom: 6px; gap: 5px; padding: 6px; }
  .dock-btn, .dock-tog { min-height: 38px; min-width: 38px; padding: 0 8px; }
  .dock-tog .dock-lbl { display: none; }
  .dock-ico { font-size: 1.05rem; }
  .dock-sep { display: none; }
  .level-wrap { flex: 1 1 70px; min-width: 60px; }
}