/* ═══════════════════════════════════════════════════════════
   Airfoil Calculator — style.css
   Accent: #38bdf8 (sky blue)
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #38bdf8;
  --accent-lo: #0ea5e9;
  --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: 1400px;
  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, var(--accent) 0%, #7dd3fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.subtitle { color: var(--text-dim); font-size: .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; flex-wrap: wrap; min-width: 0; }
/* The [hidden] user-agent rule (display:none) has the lowest possible
   precedence, so the author-level `.ctrl-group { display: flex }` above
   beats it outright — a `hidden` attribute set on a `.ctrl-group` renders
   as visible. Re-assert it explicitly rather than switching to a
   class-based toggle: `hidden` also removes the element from assistive
   tech, which a plain display:none class would not signal as clearly. */
[hidden] { display: none !important; }
.ctrl-label {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim); white-space: nowrap;
}
.unit-suffix { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }

/* ── Pill tabs ── */
.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: .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); }

/* ── Text / number inputs, selects ── */
.text-input, input[type="number"] {
  width: 84px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-family: var(--mono); font-size: .86rem;
}
#naca-desig { width: 68px; letter-spacing: .04em; text-align: center; }
.text-input:focus, input[type="number"]:focus, .unit-select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lo);
}
.unit-select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2); color: var(--text); font-size: .8rem; cursor: pointer;
}

/* ── Buttons ── */
.btn {
  padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
  font-size: .84rem; font-weight: 600;
  transition: filter .18s, box-shadow .18s, opacity .18s;
}
.btn:disabled { opacity: .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); }

/* ── Simulator wrapper (block, never flex/grid — the AdSense
     slots sit outside it as plain siblings) ── */
#sim-wrapper {
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Canvas cards ── */
.canvas-card {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; position: relative; overflow-x: clip;
}
.canvas-card canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }
#af-canvas { aspect-ratio: 16 / 7; }
#chart-canvas { aspect-ratio: 16 / 9; }

/* ── In-canvas Display Controls (collapsible), top-right.
     .canvas-card already carries position:relative. ── */
.canvas-toggles {
  position: absolute; top: 8px; right: 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: var(--accent-lo); 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 { text-align: left; 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-toggles .cvt-body .sim-toggle {
  background: none; border: none; border-radius: 0;
  padding: 0; min-height: 0; font-size: 0.72rem;
}
.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; }

/* ── Readout grid ── */
.readout-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.readout-card {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; text-align: center;
}
.readout-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 4px; }
.readout-value { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.readout-unit  { font-size: .66rem; color: var(--text-dim); margin-top: 2px; }
.readout-note  { grid-column: 1 / -1; font-size: .7rem; color: var(--text-dim); padding: 0 4px; }
#mach-warn     { color: var(--red); font-weight: 600; }

/* ── SEO article ── */
.seo-article { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.seo-article h2 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text); }
.seo-article p { font-size: .88rem; line-height: 1.6; color: var(--text-dim); }
.seo-article h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--text); }
.seo-article .eq { font-family: var(--mono); font-size: .84rem; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; overflow-x: auto; }
.seo-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.seo-table th, .seo-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.seo-table th { color: var(--text-dim); font-weight: 600; background: var(--surface2); }
.seo-table td { color: var(--text-dim); }

/* ── Lab-group controls (Section geometry / Flow conditions / etc.) ── */
.lab-group {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px 12px;
}
.lab-h {
  margin: 0 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* ── Learning panels (equations / coach / compare) ── */
.learn-panels {
  margin-top: 14px; padding: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface2));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.learn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.learn-head-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.learn-head-actions { display: flex; gap: 8px; }
.learn-toggle-all {
  padding: 5px 12px;
  background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.35);
  color: var(--accent); border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.learn-toggle-all:hover { background: rgba(56,189,248,0.22); color: var(--text); }
.learn-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface2);
  margin-bottom: 10px; overflow: hidden;
}
.learn-card:last-child { margin-bottom: 0; }
.learn-card[open] { border-color: rgba(56,189,248,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);
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary::marker { content: ''; }
.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(56,189,248,0.18); font-size: 0.9rem; flex-shrink: 0;
}
.lp-sub { color: var(--text-dim); font-weight: 500; font-size: 0.78rem; }
.learn-body { padding: 4px 14px 14px; font-size: 0.84rem; color: var(--text); line-height: 1.55; }
.learn-body .eq-line { margin: 6px 0; font-family: var(--mono); font-size: 0.82rem; }
.learn-body .coach-line { margin: 4px 0; padding-left: 18px; position: relative; }
.learn-body .coach-line::before { content: '\2192'; position: absolute; left: 0; color: var(--accent); }
.learn-body table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.learn-body th, .learn-body td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.learn-body th { color: var(--text-dim); font-weight: 600; }
.learn-body td.num { font-family: var(--mono); color: var(--text); }
.learn-body tr.active td { background: rgba(56,189,248,0.10); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding: 0 10px; }
  header h1 { font-size: 1.5rem; }
  .readout-grid { grid-template-columns: repeat(3, 1fr); }
  .controls-bar { padding: 10px 12px; gap: 10px; }
  .ctrl-group { gap: 6px; }
  #af-canvas { aspect-ratio: 4 / 3; }
  .lab-group { padding: 8px 10px 10px; }
}

@media (max-width: 500px) {
  .readout-grid { grid-template-columns: repeat(2, 1fr); }
  .text-input, input[type="number"] { width: 68px; font-size: .8rem; }
  .pill { padding: 5px 10px; font-size: .76rem; }
  /* A thin section (t ~ 12% c) fills only a small band of any canvas under
     equal aspect (contract C4 — one scale factor for both axes, never
     broken to "fill space"). At this width the 4/3 ratio inherited from
     the 768px breakpoint leaves a large empty band above/below the drawn
     aerofoil; shortening the card (not the aspect LOGIC — sx/sy in
     drawSection are unaffected by this) trims that band without touching
     how the section is drawn. */
  #af-canvas { aspect-ratio: 2 / 1; }
  #chart-canvas { aspect-ratio: 4 / 3; }
}

/* ═══ Mobile: collapse the canvas display-controls to an icon-only chip ═══
   MUST STAY LAST in this file — it is an override of the desktop summary
   rules above and loses if anything re-states them afterwards. */
@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; }
}

/* ═══ Explore / Practice / Quiz modes (added for the 4-mode standard) ═══ */
.explore-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.explore-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.explore-btn {
  padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-dim); cursor: pointer; font-size: .78rem;
  text-align: left; transition: all .18s;
}
.explore-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.explore-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); }
.explore-info {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 14px;
}
.explore-info h3 { font-size: 1rem; color: var(--accent); margin-bottom: 6px; }
.explore-info p  { font-size: .84rem; color: var(--text-dim); line-height: 1.55; }
.explore-info .formula-box {
  margin-top: 10px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--mono); font-size: .82rem; color: var(--accent);
}
.explore-info .example-box {
  margin-top: 10px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: .8rem; color: var(--text-dim); line-height: 1.5;
}
.explore-info .example-box strong { color: var(--text); }
.explore-canvas-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  overflow-x: clip;
}
.explore-canvas-card canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }

.practice-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px;
}
.practice-prompt { font-size: .92rem; line-height: 1.5; margin-bottom: 14px; }
.practice-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.practice-input-row input {
  width: 130px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font-family: var(--mono); font-size: .88rem;
}
.practice-input-row .unit { font-size: .78rem; color: var(--text-dim); }
.practice-feedback { font-size: .86rem; font-weight: 600; margin-bottom: 8px; min-height: 1.2em; }
.practice-feedback.ok  { color: var(--green); }
.practice-feedback.err { color: var(--red); }
.practice-solution {
  display: none; margin-top: 10px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-size: .82rem; line-height: 1.6; color: var(--text-dim);
}
.practice-solution strong { color: var(--text); }
.practice-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.practice-score { font-size: .82rem; color: var(--text-dim); margin-left: auto; align-self: center; }
.practice-score span { color: var(--text); font-weight: 700; }

.quiz-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px;
}
.quiz-counter { font-size: .74rem; color: var(--text-dim); margin-bottom: 8px; }
.quiz-prompt { font-size: .92rem; line-height: 1.5; margin-bottom: 14px; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.quiz-opt {
  padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: .82rem; color: var(--text);
  transition: all .18s; text-align: left;
}
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.correct { background: rgba(61,220,132,.15); border-color: var(--green); color: var(--green); }
.quiz-opt.wrong   { background: rgba(255,85,85,.15); border-color: var(--red); color: var(--red); }
.quiz-opt.disabled { pointer-events: none; opacity: .6; }
.quiz-feedback { font-size: .86rem; font-weight: 600; min-height: 1.2em; margin-bottom: 8px; }
.quiz-feedback.ok  { color: var(--green); }
.quiz-feedback.err { color: var(--red); }
.quiz-btns { display: flex; gap: 8px; }

.quiz-result {
  display: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
}
.qr-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.qr-stars { font-size: 1.4rem; margin-bottom: 6px; }
.qr-score { font-size: .92rem; font-weight: 700; margin-bottom: 12px; }
.qr-score.perfect { color: var(--gold); }
.qr-score.good    { color: var(--green); }
.qr-score.poor    { color: var(--red); }
.qr-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 14px; }
.qr-table th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.qr-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.qr-row.ok  { border-left: 3px solid var(--green); }
.qr-row.err { border-left: 3px solid var(--red); }

@media (max-width: 500px) {
  .quiz-options { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   Header ribbon (sibling-tool interlinks + User Guide) and the
   first-time hint bar. These classes are NOT in shared/site.css —
   each tool carries its own copy (see CLAUDE.md). Accent is this
   tool's --accent (#38bdf8), not wind-tunnel's cyan.
   ══════════════════════════════════════════════════════════════ */
.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,#38bdf8);background:var(--accent-lo,rgba(56,189,248,.18));color:#fff;}
.btn-link img{width:20px;height:20px;border-radius:4px;flex:none;}
.btn-link .lbl{line-height:1;}
.btn-guide{
  padding:6px 16px; border:none; border-radius:8px; cursor:pointer;
  font-size:.82rem; font-weight:700;
  background:var(--gold,#f5c842); color:#1a1a2e;
  text-decoration:none; transition:filter .18s; white-space:nowrap;
}
.btn-guide:hover{filter:brightness(1.07);}
@media(max-width:560px){.btn-link .lbl{display:none;}.btn-link{padding:5px 9px;}}

/* ── First-time hint bar ── */
.hint-bar{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; padding:10px 14px;
  background:linear-gradient(90deg, rgba(56,189,248,.10), rgba(56,189,248,.04));
  border:1px solid rgba(56,189,248,.30); border-radius:10px;
  font-size:.84rem; color:var(--text); line-height:1.45;
}
.hint-bar.hidden{display:none;}
.hint-icon{font-size:1.1rem; flex-shrink:0;}
.hint-text{flex:1;}
.hint-text kbd{
  font-family:var(--mono); font-size:.74rem;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px;
}
.hint-close{
  width:28px; height:28px; padding:0; cursor:pointer; flex:none;
  background:transparent; border:1px solid var(--border);
  border-radius:6px; color:var(--text-dim);
  font-size:1.1rem; line-height:1;
}
.hint-close:hover{border-color:var(--accent); color:var(--text);}

/* ══════════════════════════════════════════════════════════════
   Simulation controls — range sliders paired with their number
   boxes, airflow transport, and the speed-colour legend.
   ══════════════════════════════════════════════════════════════ */
.ctrl-range{
  -webkit-appearance:none; appearance:none;
  width:112px; height:22px; margin:0 2px; padding:0;
  background:transparent; cursor:pointer; vertical-align:middle;
}
.ctrl-range::-webkit-slider-runnable-track{
  height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent-lo,#0ea5e9),var(--border,#2a3050));
}
.ctrl-range::-moz-range-track{
  height:5px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent-lo,#0ea5e9),var(--border,#2a3050));
}
.ctrl-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px; margin-top:-5px; border-radius:50%;
  background:var(--accent,#38bdf8); border:2px solid #0b1220;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ctrl-range::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%;
  background:var(--accent,#38bdf8); border:2px solid #0b1220;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ctrl-range:focus-visible{outline:2px solid var(--accent,#38bdf8); outline-offset:3px; border-radius:4px;}

/* Airflow transport */
.btn-run{
  min-width:96px; min-height:34px; padding:6px 14px;
  border-radius:8px; cursor:pointer;
  font-size:.84rem; font-weight:700;
  background:var(--accent,#38bdf8); color:#0b1220;
  border:1.5px solid var(--accent,#38bdf8);
  transition:filter .18s;
}
.btn-run:hover{filter:brightness(1.08);}
.btn-run[aria-pressed="false"]{
  background:var(--surface2,#1f2535); color:var(--text,#dde3f0);
}
.ctrl-hint{font-size:.72rem; color:var(--text-dim,#8b97ad); line-height:1.3;}

/* Speed-colour legend — the same ramp flowColour() paints, so the key
   and the canvas cannot drift apart visually. */
.flow-legend{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-dim,#8b97ad);}
.flow-legend .fl-bar{
  display:inline-block; width:76px; height:8px; border-radius:4px;
  background:linear-gradient(90deg,rgb(24,70,150),rgb(56,189,248),rgb(255,255,255));
  border:1px solid var(--border,#2a3050);
}
.flow-legend .fl-swatch{display:none;}

@media(max-width:560px){
  .ctrl-range{width:88px;}
  .ctrl-hint{display:none;}
}

/* A chart whose curve belongs to a previous state, while the alpha sweep
   rebuilds across frames. Dimmed and captioned rather than blanked. */
#chart-canvas-card.chart-stale{position:relative;}
#chart-canvas-card.chart-stale canvas{opacity:.38; transition:opacity .12s;}
#chart-canvas-card.chart-stale::after{
  content:"recomputing\00a0\2026"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--text-dim,#8b97ad); pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════════════
   SINGLE-PAGE LAYOUT
   The tool used to be a vertical stack — four full-width control groups,
   then the canvas, then the chart, then nine readouts — so a student
   never had the controls, the picture and the numbers on screen at once.
   It is now a two-column workbench: apparatus and its controls on the
   left, results on the right, with a sticky badge strip above both.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sticky live badges ── */
.badge-strip{
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:wrap; gap:6px;
  padding:7px 10px; margin-bottom:8px;
  background:rgba(13,17,23,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:10px;
}
.badge-cell{
  display:inline-flex; align-items:baseline; gap:5px;
  flex:1 1 auto; justify-content:center; min-width:82px;
  padding:2px 6px; border-radius:7px; background:var(--surface2,#1f2535);
}
.badge-cell .k{font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim);}
.badge-cell .v{font-family:var(--mono); font-size:.86rem; font-weight:700; color:var(--accent);}
/* Past stall: the badge Cl is the one number a scrolled-away student still
   sees, so it carries its own warning colour and a marker glyph rather than
   relying only on the readout-note far below the fold. */
.badge-cell .v.bs-stall{color:#f59e0b;}
.badge-cell .v.bs-stall::after{content:" \26A0"; font-size:.7rem;}
.badge-cell .u{font-size:.6rem; color:var(--text-dim);}

/* ── The two columns ── */
.main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);
  gap:12px; align-items:stretch;
}
.main-grid-left,.main-grid-right{display:flex; flex-direction:column; gap:10px; min-width:0;}
/* The readouts absorb the slack so the two columns finish level. */
.main-grid-right .readout-grid{flex:1 1 auto; align-content:stretch;}

/* ── Control block ── */
.sim-controls{
  background:var(--surface,#161b26); border:1px solid var(--border,#2a3050);
  border-radius:12px; padding:10px 12px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.sc-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-bottom:8px;}
.sc-band{
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-dim); padding:9px 0 5px; margin-top:2px;
  border-top:1px solid rgba(139,157,195,.12);
}
.sc-band:first-of-type{border-top:none; margin-top:0;}

/* ── A compact slider cell: label + unit over slider + stepper ── */
.sliders-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px 20px; padding:2px 0;
}
.slider-cell{display:flex; flex-direction:column; gap:3px; min-width:0; padding:3px 0;}
.slider-cell-blank{visibility:hidden;}
.slider-cell-head{display:flex; align-items:baseline; justify-content:space-between; gap:6px;}
.slider-cell-label{
  font-size:.67rem; font-weight:700; color:var(--text,#dde3f0);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slider-cell-unit{font-size:.6rem; color:var(--text-dim); white-space:nowrap; flex:none;}
.slider-line{display:flex; align-items:center; gap:7px; min-width:0;}
.slider-line .ctrl-range{flex:1 1 auto; width:auto; min-width:0;}

/* Stepper: −  [number]  +   — 28px tap targets, hold-to-repeat via
   shared/press-repeat.js, which binds any .step-btn. */
.stepper{display:inline-flex; align-items:center; flex:none;}
.stepper input[type=number]{
  width:58px; text-align:center; border-radius:0;
  border-left:none; border-right:none; padding:3px 2px;
  font-size:.76rem; -moz-appearance:textfield;
}
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper-wide input[type=number]{width:74px;}
.step-btn{
  width:26px; height:28px; flex:none; cursor:pointer;
  background:var(--surface2,#1f2535); color:var(--text,#dde3f0);
  border:1px solid var(--border,#2a3050);
  font-size:.92rem; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s,border-color .15s;
}
.step-btn:first-child{border-radius:7px 0 0 7px;}
.step-btn:last-child{border-radius:0 7px 7px 0;}
.step-btn:hover{background:var(--accent-lo,rgba(56,189,248,.2)); border-color:var(--accent,#38bdf8);}
.step-btn:active{filter:brightness(1.2);}

/* ── Airflow toolbar, sitting under the picture it drives ── */
.canvas-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
  padding:7px 11px;
  background:var(--surface,#161b26); border:1px solid var(--border,#2a3050);
  border-radius:10px;
}
.canvas-toolbar .tb-group{display:flex; align-items:center; gap:7px; min-width:0;}
.tb-label{font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); white-space:nowrap;}
.tb-val{font-family:var(--mono); font-size:.72rem; color:var(--accent); min-width:44px;}
.ctrl-range-sm{width:92px;}
.tb-legend{margin-left:auto;}
.canvas-toolbar .btn-run{min-width:92px;}

/* Chart tab bar sits tight above its canvas. The pills are only
   tightened where there is a mouse -- shrinking a tab to 24px tall on a
   phone trades a real tap target for space the phone layout does not
   need, since the chart bar has a whole row to itself there. */
.controls-bar-tight{padding:7px 10px;}
@media (min-width:821px){
  .controls-bar-tight .pill{padding:4px 10px; font-size:.74rem;}
}

/* Compact readouts in the right column — 3 across, small type, so nine
   cards plus their notes fit beside the chart instead of below it. */
.main-grid-right .readout-grid{grid-template-columns:repeat(3,1fr); gap:5px; padding:7px;}
.main-grid-right .readout-card{padding:5px 4px 6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; min-height:0;}
.main-grid-right .readout-label{font-size:.53rem; margin:0 0 2px; line-height:1.15;}
.main-grid-right .readout-value{font-size:.92rem; line-height:1.1;}
.main-grid-right .readout-unit{font-size:.53rem; margin-top:1px; line-height:1.1;}
.main-grid-right .readout-note{grid-column:1/-1;}

@media (max-width:1180px){
  .main-grid{grid-template-columns:1fr;}
  .main-grid-right .readout-grid{grid-template-columns:repeat(4,1fr);}
  .main-grid-right .readout-card{padding:8px 6px;}
  .main-grid-right .readout-value{font-size:1rem;}
  .main-grid-right .readout-label{font-size:.58rem;}
}
@media (max-width:820px){
  .sliders-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px;}
  .tb-legend{margin-left:0; flex-basis:100%;}
  /* Comfortable tap targets once there is no mouse: the stepper is the
     control a finger actually lands on, since a 15px slider thumb is
     hard to grab on glass. */
  .step-btn{width:34px; height:38px; font-size:1.05rem;}
  .stepper input[type=number]{height:38px; font-size:.82rem;}
  .btn-run{min-height:40px;}
}
@media (max-width:560px){
  .sliders-row{grid-template-columns:1fr;}
  .main-grid-right .readout-grid{grid-template-columns:repeat(2,1fr);}
  .badge-cell{min-width:70px;}
  .badge-cell .v{font-size:.78rem;}
  .sc-row{gap:10px;}
  .stepper input[type=number]{width:62px;}
  .ctrl-hint{display:none;}
}