/* ── Reset & Tokens ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Background layers ── */
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;

  /* ── Accent — Flight Theory (sky blue) ── */
  --accent:    #4fb3ff;
  --accent-lo: rgba(79,179,255,.22);

  /* ── Semantic colours — DO NOT CHANGE ── */
  --green:     #3ddc84;
  --red:       #ff5555;
  --gold:      #f5c842;

  /* ── Typography ── */
  --text:      #dde3f0;
  --text-dim:  #6b7a99;
  --font:      'Segoe UI', system-ui, sans-serif;
  --mono:      'Courier New', monospace;

  /* ── Layout ── */
  --radius:    12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  padding: 0 16px;
}

#app { max-width: 1180px; 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, #e53935 0%, #ff7043 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; }
.ctrl-value  { font-size: 0.82rem; color: var(--accent); font-weight: 600; min-width: 40px; }

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

/* ── 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); }

/* ── Sliders ─── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 6px;
  background: var(--surface2); border-radius: 3px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 6px var(--accent-lo);
}

/* ── Canvas card ─── */
.canvas-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px;
  overflow-x: clip;
}
.canvas-card canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }

/* ── Readout panel ─── */
.readout-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.readout-cell {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.readout-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.readout-value { font-size: 1.05rem; font-weight: 700; color: var(--text); font-family: var(--mono); }

/* ── Explore panel ─── */
.explore-tabs {
  display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.concept-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  transition: border-color .2s;
}
.concept-card:hover { border-color: var(--accent); }
.concept-card h3 { font-size: 0.95rem; color: var(--accent); margin-bottom: 4px; }
.concept-card .cc-formula {
  font-family: var(--mono); font-size: 0.82rem;
  background: var(--surface2); padding: 6px 10px; border-radius: 6px;
  margin: 8px 0; color: var(--gold);
}
.concept-card .cc-desc { font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; }
.concept-card .cc-example {
  margin-top: 10px; padding: 10px; background: var(--bg);
  border-radius: 8px; border-left: 3px solid var(--accent);
}
.concept-card .cc-example-title { font-size: 0.72rem; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.concept-card .cc-example p { font-size: 0.8rem; color: var(--text-dim); margin: 2px 0; }

/* ── Practice panel ─── */
.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);
}
.practice-prompt { font-size: 0.9rem; flex: 1 1 100%; margin-bottom: 4px; line-height: 1.5; }
.practice-input-group { display: flex; align-items: center; gap: 6px; }
.practice-input-group input {
  width: 120px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 0.9rem; font-family: var(--mono);
}
.practice-unit { font-size: 0.82rem; color: var(--text-dim); }
.pbar-score { font-size: 0.84rem; color: var(--text-dim); margin-left: auto; }
.pbar-score span { color: var(--text); font-weight: 700; }
.feedback { margin-top: 6px; padding: 0 16px; min-height: 22px; }
.feedback.ok  { color: var(--green); font-size: 0.88rem; font-weight: 600; }
.feedback.err { color: var(--red);   font-size: 0.88rem; font-weight: 600; }
.solution-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
  font-size: 0.85rem; line-height: 1.6; color: var(--text-dim);
}
.solution-panel .step { margin: 4px 0; }
.solution-panel .step-num { color: var(--accent); font-weight: 600; }

/* ── Quiz panel ─── */
.quiz-bar {
  padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.quiz-counter { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.quiz-prompt { display: block; font-size: 0.95rem; margin: 10px 0; line-height: 1.5; }
.quiz-options { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.quiz-opt {
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: 0.88rem; transition: border-color .2s;
  text-align: left;
}
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.selected { border-color: var(--accent); background: var(--accent-lo); }
.quiz-opt.correct { border-color: var(--green); background: rgba(61,220,132,.15); }
.quiz-opt.wrong { border-color: var(--red); background: rgba(255,85,85,.15); }
.quiz-input-group { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.quiz-input-group input {
  width: 140px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-size: 0.9rem; font-family: var(--mono);
}
.quiz-unit { font-size: 0.82rem; color: var(--text-dim); }
.quiz-actions { display: flex; gap: 10px; margin-top: 10px; }

/* ── Quiz result ─── */
.quiz-result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.qr-header { text-align: center; margin-bottom: 16px; }
.qr-score { font-size: 2rem; font-weight: 700; }
.qr-score.perfect { color: var(--gold); }
.qr-score.good    { color: var(--green); }
.qr-score.poor    { color: var(--red); }
.qr-stars { font-size: 1.4rem; margin-top: 4px; }
.qr-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.qr-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 8px; background: var(--surface2);
  font-size: 0.84rem;
}
.qr-row.ok  { border-left: 3px solid var(--green); }
.qr-row.err { border-left: 3px solid var(--red); }
.qr-row .qr-q { flex: 1; color: var(--text-dim); }
.qr-row .qr-a { color: var(--text); font-weight: 600; margin: 0 10px; }
.qr-row .qr-icon { font-size: 1rem; }
.qr-retry { text-align: center; margin-top: 14px; }

/* ── SEO article ─── */
.seo-article {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px; line-height: 1.7;
}
.seo-article h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: 12px; }
.seo-article h3 { font-size: 1.05rem; color: var(--text); margin: 18px 0 8px; }
.seo-article p { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 10px; }
.seo-article a { color: var(--accent); text-decoration: none; }
.seo-article a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .readout-panel { grid-template-columns: repeat(3, 1fr); }
  .controls-bar { gap: 10px; }
  input[type="range"] { width: 90px; }
  .concept-grid { grid-template-columns: 1fr; }
}

@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; }
  .readout-panel { grid-template-columns: repeat(2, 1fr); }
  input[type="range"] { width: 70px; }
  .practice-bar { flex-direction: column; align-items: stretch; }
  .pbar-score { margin-left: 0; }
}

/* 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;}}
/* With a third quick-link (Gearbox) the row overflowed by ~17 px and
   wrapped under the mode tabs — at every width, since #app caps the bar.
   Share keeps its icon and word; only the trailing "your setup" goes, as
   site.css already does below 640 px. */
.head-actions .btn-share-ext { display: none; }
/* ...and on a 1024-1100 px window it still did not fit, so the quick-links
   go icon-only there (title + aria-label keep the name), as they already
   do below 560 px. Wider than 1100 px the labels return. */
@media (max-width: 1100px) { .btn-link .lbl { display: none; } .btn-link { padding: 5px 9px; } }
/* INTERLINK-END */

/* ═══════════════════════════════════════════════════════════════════
   UPGRADE v3 — parameter grid, advanced panel, display controls,
   calculation modal, learning panels, context menu.
   ═══════════════════════════════════════════════════════════════════ */

/* The canvas card anchors both the display-controls overlay and the
   calculation FAB, so it has to establish a positioning context. */
.canvas-card { position: relative; }

/* The simulate panel stacks: diagram selector, canvas, warnings, then the
   parameters that drive it. A tighter gap than the page default keeps the
   canvas and its controls reading as one unit. */
#sim-panel { display: flex; flex-direction: column; gap: 10px; }

/* ── Preset dropdown ── */
.sel-preset {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; min-height: 36px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
}
.sel-preset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ctrl-actions { gap: 8px; flex-wrap: wrap; }
/* Run controls read as the primary action group: a divider separates them
   from the configuration controls that follow on the same bar. */
.sim-controls .ctrl-actions {
  padding-right: 14px; margin-right: 2px;
  border-right: 1px solid var(--border);
}
.sim-controls { gap: 9px 12px; padding: 8px 12px; }
.sim-controls .btn { padding: 7px 14px; font-size: 0.81rem; min-height: 36px; }
.sim-controls .ctrl-label { font-size: 0.68rem; }
.sim-controls .sel-preset { padding: 6px 8px; font-size: 0.79rem; min-height: 34px; }
.sim-controls .pill { padding: 5px 11px; font-size: 0.78rem; }

.load-note {
  margin: 0 2px; font-size: 0.76rem; line-height: 1.45; color: var(--text-dim);
}
.load-note strong { color: var(--text); }

/* ── Parameter grid: slider + companion number input ── */
.param-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 9px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
/* Caption above, control row below. The caption is the flexible part and
   the control row is pinned to the bottom of the cell, so every slider in
   a grid row lands on the same baseline no matter how many lines its
   caption wraps to — a two-line minimum alone was not enough, because a
   long name plus a hint can still run to three. */
.param { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.param > label {
  flex: 1 0 auto;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); font-weight: 700; line-height: 1.3;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  min-height: 2.6em; align-content: flex-start;
}
.param > .p-row { flex: 0 0 auto; }
.param > label em { font-style: italic; text-transform: none; color: var(--text); }
.p-hint {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: 0.64rem; color: var(--text-dim); opacity: .8;
}
.p-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ── Sliders + steppers — the Titration Simulator design, tightened so a
   label/slider/stepper row still fits four to a line on a desktop. ── */
input[type="range"].sim-slider {
  flex: 1 1 auto; min-width: 56px; width: auto;
  -webkit-appearance: none; appearance: none; height: 6px;
  background: rgba(255,255,255,.12); border-radius: 3px; outline: none;
  border: 1px solid rgba(255,255,255,.1); cursor: pointer;
}
input[type="range"].sim-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent-lo), rgba(255,255,255,.12));
}
input[type="range"].sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 8px var(--accent-lo); border: 2px solid rgba(255,255,255,.2);
}
input[type="range"].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));
}
input[type="range"].sim-slider::-moz-range-thumb {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%; background: var(--accent); cursor: pointer;
}
input[type="range"].sim-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Stepper: type an exact value, or nudge it by one step ── */
.stepper-wrap {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  background: var(--bg); height: 30px;
}
.stepper-btn {
  width: 26px; height: 30px; border: none; cursor: pointer; padding: 0;
  font-family: var(--font); font-size: 0.95rem; font-weight: 700; color: var(--text-dim);
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.stepper-btn:hover { background: var(--accent-lo); color: var(--accent); }
.stepper-btn:active { background: var(--accent); color: #fff; }
.stepper-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.stepper-input {
  width: 56px; border: none; text-align: center; height: 100%;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  color: var(--accent); background: var(--bg); outline: none;
  padding: 2px 1px; -moz-appearance: textfield; appearance: textfield;
}
.stepper-input:focus { background: var(--surface2); }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.p-unit {
  flex: 0 0 auto; font-size: 0.66rem; font-weight: 700;
  color: var(--accent); text-transform: none; letter-spacing: 0;
}
/* Greek must opt out of the label's uppercase transform: it turns η into
   Η — a capital eta indistinguishable from a Latin H — which defeats the
   point of naming the quantity with its symbol at all. */
.param > label .sym { text-transform: none; font-style: italic; font-weight: 700; color: var(--text); }
.param > label em { font-style: italic; text-transform: none; color: var(--text); }

/* ── Advanced parameters ── */
.adv-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.adv-panel > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; min-height: 44px;
  font-size: 0.8rem; font-weight: 700; color: var(--text);
  transition: background .15s;
}
.adv-panel > summary::-webkit-details-marker { display: none; }
.adv-panel > summary::marker { content: ''; }
.adv-panel > summary:hover { background: var(--accent-lo); }
.adv-panel > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.adv-panel > summary::after {
  content: '\25BE'; margin-left: auto; color: var(--text-dim);
  font-size: 0.8rem; transition: transform .2s;
}
.adv-panel[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
.adv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--accent-lo); color: var(--accent); font-size: 0.95rem; flex-shrink: 0;
}
.adv-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 9px; }
.adv-group-title {
  font-size: 0.62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: 2px; border-bottom: 1px solid var(--border);
}
.adv-body .param-grid { background: transparent; border: none; padding: 0; }
.adv-note { font-size: 0.74rem; line-height: 1.5; color: var(--text-dim); margin: 0; }

/* ── Diagram selector + export row ── */
.export-group { margin-left: auto; gap: 6px; flex-wrap: nowrap; }
.export-group .btn-exp {
  font-size: 0.74rem; padding: 6px 10px; min-height: 34px;
  white-space: nowrap;
}


/* ── Warning strip ── */
.sim-warn {
  background: rgba(245,200,66,.10); border: 1px solid rgba(245,200,66,.42);
  border-left-width: 4px; border-radius: 8px;
  padding: 10px 14px; font-size: 0.83rem; line-height: 1.55; color: var(--gold);
}
.sim-warn strong { color: var(--text); }

/* ── Performance readout row reads a little quieter than the live one ── */
.readout-perf .readout-value { font-size: 0.95rem; }

/* ── Display Controls — collapsible overlay pinned to the canvas ── */
.canvas-toggles {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  background: rgba(13,17,23,0.88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  max-width: calc(100% - 32px);
}
.canvas-toggles > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 0; white-space: nowrap;
  width: 34px; height: 34px;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text); border-radius: 9px; transition: background .12s, color .12s;
}
.canvas-toggles > summary .cvt-title,
.canvas-toggles > summary .cvt-caret { display: none; }
.canvas-toggles .cvt-ico { width: 17px; height: 17px; }
/* Opened, it earns its caption back — the user has chosen to cover the canvas. */
.canvas-toggles[open] > summary {
  width: auto; height: auto; min-height: 30px;
  padding: 6px 10px; gap: 7px; justify-content: flex-start;
}
.canvas-toggles[open] > summary .cvt-title { display: inline; }
.canvas-toggles[open] > summary .cvt-caret { display: inline; }
.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 > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.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 .2s;
}
.canvas-toggles[open] > summary .cvt-caret { transform: rotate(180deg); color: var(--accent); }
.canvas-toggles[open] > summary {
  border-bottom: 1px solid var(--border); border-radius: 9px 9px 0 0;
}
.canvas-toggles .cvt-body {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 11px 10px; max-height: 60vh; overflow-y: auto;
}
.canvas-toggles .cvt-group {
  font-size: 0.58rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
  margin-top: 4px; padding-bottom: 2px; border-bottom: 1px solid var(--border);
}
.canvas-toggles .cvt-group:first-child { margin-top: 0; }
.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 .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-reset {
  margin-top: 7px; padding: 5px 9px; min-height: 28px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.canvas-toggles .cvt-reset:hover { border-color: var(--accent); color: var(--accent); }
.canvas-toggles .cvt-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Diagram selector — overlay on the top-left of the diagram pane ──
   Same translucent chrome as the Display Controls chip on the engine
   side, so the canvas reads as having two consistent in-canvas controls.
   JS sets left/top from the pane rectangle; everything else is here. */
.pane-toggle {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px;
  background: rgba(13,17,23,0.88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.pane-toggle .pt-label {
  font-size: 0.58rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.pane-toggle .pt-tabs {
  display: flex; gap: 2px; padding: 2px;
  background: var(--bg); border-radius: 7px;
}
.pane-toggle .pt-pill {
  padding: 4px 9px; min-height: 26px;
  background: transparent; border: none; border-radius: 5px;
  color: var(--text-dim); font-family: var(--font);
  font-size: 0.7rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.pane-toggle .pt-pill:hover:not(.active) { background: var(--surface2); color: var(--text); }
.pane-toggle .pt-pill.active { background: var(--accent); color: #fff; box-shadow: 0 0 10px var(--accent-lo); }
.pane-toggle .pt-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* On a phone the pane is narrow: drop the "Diagram" caption and let the
   three pills use the full width of the overlay. */
@media (max-width: 640px) {
  .pane-toggle { padding: 4px; gap: 0; }
  .pane-toggle .pt-label { display: none; }
  .pane-toggle .pt-pill { padding: 5px 10px; min-height: 30px; font-size: 0.68rem; }
}

/* ── Show-Calculations: a compact icon in the toolbar under the canvas.
   It used to be a floating action button over the plot, which cost the
   diagram its bottom-right corner on every layout. ── */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  background: linear-gradient(180deg, #ef5350, #c62828);
  color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; cursor: pointer;
  transition: filter .15s, box-shadow .15s;
}
.btn-icon:hover { filter: brightness(1.12); box-shadow: 0 0 10px var(--accent-lo); }
.btn-icon:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Calculation modal ── */
.calc-modal {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.72); -webkit-backdrop-filter: blur(4px); 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 var(--border); border-radius: 12px;
  width: 100%; max-width: 780px; 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 .15s, color .15s, background .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: var(--accent-lo); border: 1px solid var(--border); 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(229,57,53,.28); color: #ffcdd2;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .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.74rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.cs-step {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.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: .06em;
  color: #ffcdd2; background: rgba(229,57,53,.28);
  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.9rem; color: var(--text);
  background: var(--surface2); border-radius: 6px;
  padding: 8px 12px; border-left: 3px solid var(--accent);
  overflow-x: auto;
}
.cs-calc { font-size: 0.86rem; color: var(--text); line-height: 1.9; overflow-x: auto; }
.cs-result { font-size: 0.86rem; color: var(--text-dim); margin-top: 2px; }
.cs-result strong { font-family: var(--mono); font-size: 0.92rem; color: var(--green); }

/* ── Learning panels ── */
.learn-panels {
  padding: 14px; background: var(--surface);
  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: 6px 12px; min-height: 32px;
  background: var(--accent-lo); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px;
  font-family: var(--font); font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.learn-toggle-all:hover { background: var(--surface2); border-color: var(--accent); }
.learn-toggle-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.learn-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); margin-bottom: 10px; overflow: hidden;
  transition: border-color .2s;
}
.learn-card:last-child { margin-bottom: 0; }
.learn-card[open] { border-color: var(--accent); }
.learn-card > summary {
  list-style: none; cursor: pointer;
  padding: 11px 14px; min-height: 44px;
  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 .15s;
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary::marker { content: ''; }
.learn-card > summary:hover { background: var(--accent-lo); }
.learn-card > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.learn-card > summary::after {
  content: '\25BE'; margin-left: auto; color: var(--text-dim);
  font-size: 0.78rem; transition: transform .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: var(--accent-lo); font-size: 0.9rem; flex-shrink: 0;
}
.lp-sub { color: var(--text-dim); font-weight: 500; font-size: 0.78rem; }
.learn-body { padding: 12px 14px 14px; }
.eq-line { margin: 8px 0; overflow-x: auto; overflow-y: hidden; font-size: 0.95rem; }
.lp-note { font-size: 0.8rem; line-height: 1.6; color: var(--text-dim); margin: 10px 0 0; }
.lp-note strong { color: var(--text); }

/* Cycle state table — explicit cell colours so it never inherits the
   dark surface and disappears (audit C18). */
.tbl-wrap { overflow-x: auto; max-width: 100%; }
.state-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.state-table th {
  background: var(--surface2); color: var(--text);
  text-align: left; padding: 7px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--border); font-weight: 700;
}
.state-table td {
  padding: 7px 10px; color: var(--text); font-family: var(--mono);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.state-table td:nth-child(2) { font-family: var(--font); color: var(--text-dim); white-space: normal; min-width: 150px; }
.state-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.state-table .st-n { color: var(--gold); font-weight: 800; }

/* Efficiency bars */
.perf-row { margin-bottom: 10px; }
.perf-lbl {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.78rem; color: var(--text-dim); margin-bottom: 4px;
}
.perf-val { font-family: var(--mono); font-weight: 700; color: var(--text); }
.perf-track { height: 9px; background: var(--surface2); border-radius: 5px; overflow: hidden; }
.perf-fill { height: 100%; border-radius: 5px; transition: width .25s ease; }

.coach-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.coach-list li { font-size: 0.83rem; line-height: 1.6; color: var(--text-dim); }

/* ── Explore card body (now prose with KaTeX, not the old cc-* blocks) ── */
.concept-card p { font-size: 0.84rem; color: var(--text-dim); line-height: 1.6; }
.concept-card p strong { color: var(--text); }
.concept-card .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; }

/* ── Practice / quiz feedback states not already defined ── */
.feedback.bad  { color: var(--red);  font-size: 0.88rem; font-weight: 600; }
.feedback.warn { color: var(--gold); font-size: 0.88rem; font-weight: 600; }
.solution-panel pre {
  white-space: pre-wrap; font-family: var(--mono); font-size: 0.82rem;
  color: var(--text); margin-top: 6px; line-height: 1.7;
}
.qr-pct { text-align: center; font-size: 1.1rem; color: var(--text-dim); margin-top: 2px; }
.qr-msg { text-align: center; font-size: 0.88rem; color: var(--text-dim); margin-top: 10px; line-height: 1.6; }
.quiz-result { text-align: center; }

/* ── Canvas context menu ── */
.ctx-menu {
  position: fixed; z-index: 1300; min-width: 210px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 2px;
}
.ctx-item {
  text-align: left; padding: 8px 11px; min-height: 38px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text); font-family: var(--font); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: background .12s;
}
.ctx-item:hover { background: var(--surface2); }
.ctx-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ctx-sep { height: 1px; background: var(--border); margin: 3px 6px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sim-controls .ctrl-actions {
    padding-right: 0; margin-right: 0; border-right: none;
    padding-bottom: 9px; margin-bottom: 1px;
    border-bottom: 1px solid var(--border); width: 100%;
  }
  /* Touch targets: the run buttons inherit the site's 36px .btn height,
     which is under the project's 44px minimum. */
  .sim-controls .ctrl-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .sim-controls .sel-preset { min-height: 44px; }
  .sim-controls .pill { min-height: 40px; }
  .export-group { margin-left: 0; }
  .param-grid { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .param > label { min-height: 0; }
  /* Touch: the stepper grows to the 44px minimum and the row has the
     width to spare because the grid is one column here. */
  .stepper-wrap { height: 44px; }
  .stepper-btn { width: 40px; height: 44px; font-size: 1.05rem; }
  .stepper-input { width: 70px; font-size: 0.86rem; }
  .readout-perf { grid-template-columns: repeat(2, 1fr); }
  .ctrl-actions { margin-left: 0; width: 100%; }
  .export-group { margin-left: 0; }

  /* ── Tap targets. The run buttons, the preset and the toolbar pills were
     sized above; these four were not, and they are the ones a student
     actually reaches for first. Measured at 375 / 500 / 768 px:
       #mode-tabs .pill      24 px      (Simulate / Explore / Practice / Quiz)
       #explore-tabs .pill   24 px
       .pane-toggle .pt-pill 26 px      (P–V / T–s / Valves)
       .sim-slider            6 px      — all seventeen of them
     The slider is the worst of them and the least obvious: the ELEMENT is
     6 px tall because the track height was put on the input itself, and a
     finger hits the element, not the 17 px thumb drawn overflowing it. Give
     the input real height and let the pseudo-element keep the 6 px track. ── */
  #mode-tabs .pill,
  #explore-tabs .pill { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
  .pane-toggle .pt-pill { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }
  input[type="range"].sim-slider {
    height: 30px; background: transparent; border: none; border-radius: 0;
  }
  input[type="range"].sim-slider::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; border: 1px solid rgba(255,255,255,.1);
  }
  input[type="range"].sim-slider::-moz-range-track {
    height: 6px; border-radius: 3px; border: 1px solid rgba(255,255,255,.1);
  }
}

@media (max-width: 500px) {
  .learn-panels { padding: 10px; }
  .learn-card > summary { padding: 11px 12px; font-size: 0.82rem; }
  .lp-sub { display: none; }
  .learn-body { padding: 10px 12px 12px; }
  .learn-head-title { font-size: 0.85rem; }
  .calc-modal { padding: 12px 8px; }
  .calc-modal-box { max-height: calc(100vh - 24px); }
  .calc-modal-body { padding: 12px; }
  .cs-step { padding: 10px; }
  .btn-icon { width: 44px; height: 44px; }
  .export-group .btn-exp { min-width: 44px; min-height: 44px; }
  .canvas-toggles { top: 10px; left: 10px; }
  .canvas-toggles .cvt-body { padding: 6px 9px 8px; gap: 4px; }
  .canvas-toggles .cvt-item { font-size: 0.66rem; gap: 5px; }
}

/* ═══ Diagram toggle — phones only (the button is hidden on a wide screen) ═══ */
.diagram-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 8px; padding: 10px 14px; min-height: 44px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: .84rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.diagram-toggle[hidden] { display: none; }
.diagram-toggle .dt-ico { color: var(--accent); flex: none; }
.diagram-toggle .dt-sub { color: var(--text-muted, #8b9dc3); font-weight: 500; font-size: .74rem; }
.diagram-toggle .dt-caret { margin-left: auto; transition: transform .18s; }
.diagram-toggle.open .dt-caret { transform: rotate(180deg); }
.diagram-toggle:hover { border-color: var(--accent); }
.diagram-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .diagram-toggle .dt-caret { transition: none; } }

/* ═══ Explain — the guided lesson ═══════════════════════════════════
   The button sits with Play / Step / Reset; the transport is a strip
   UNDER the canvas (never over it — the lesson writes on every part of
   the picture), with a scrubber whose dots are the chapters. */
.btn-explain {
  background: rgba(255, 213, 74, .10); color: #ffd54a;
  border: 1px solid rgba(255, 213, 74, .55);
}
.btn-explain:hover { background: rgba(255, 213, 74, .2); border-color: #ffd54a; }
.btn-explain.active { background: #ffd54a; color: #14161c; border-color: #ffd54a; }
.btn-explain:focus-visible { outline: 2px solid #ffd54a; outline-offset: 2px; }
.btn-explain .ex-cap { font-size: .95em; }

.canvas-card.explaining .canvas-toggles,
.canvas-card.explaining .pane-toggle { display: none; }

.explain-bar {
  margin-top: 8px; padding: 6px 8px 8px;
  background: rgba(13, 17, 23, .82);
  border: 1px solid rgba(255, 213, 74, .35); border-radius: 12px;
}
.explain-bar[hidden] { display: none; }
.ex-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ex-step {
  color: #ffd54a; font-weight: 700; font-size: .76rem; min-width: 38px;
  text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ex-btn {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-size: .82rem; cursor: pointer; touch-action: manipulation;
}
.ex-btn.ex-play { background: #ffd54a; color: #14161c; font-size: .74rem; letter-spacing: -1px; }
.ex-btn:focus-visible, .ex-chip:focus-visible, .ex-dot:focus-visible { outline: 2px solid #ffd54a; outline-offset: 1px; }
.ex-btn:active, .ex-chip:active { transform: scale(.93); }
@media (hover: hover) {
  .ex-btn:not(.ex-play):hover { background: rgba(255, 213, 74, .14); border-color: rgba(255, 213, 74, .4); }
  .ex-chip:hover { border-color: #ffd54a; }
}
.ex-chip {
  height: 30px; padding: 0 10px; border-radius: 15px; flex: none;
  background: rgba(255, 255, 255, .04); color: #e8ebf2;
  border: 1px solid rgba(255, 213, 74, .3);
  font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; touch-action: manipulation;
}
.ex-chip[aria-pressed="true"] { background: rgba(255, 213, 74, .16); color: #ffd54a; }
/* the scrubber, with the chapters as dots on its track */
.ex-track { position: relative; flex: 1 1 160px; min-width: 120px; height: 34px; margin: 0 6px; }
.ex-scrub {
  --ex-p: 0%;
  -webkit-appearance: none; appearance: none;
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, #ffd54a var(--ex-p), rgba(255, 255, 255, .14) var(--ex-p));
}
.ex-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #ffd54a; box-shadow: 0 0 8px rgba(255, 213, 74, .6);
  position: relative; z-index: 2;
}
.ex-scrub::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #ffd54a; box-shadow: 0 0 8px rgba(255, 213, 74, .6);
}
/* Two classes, so it outranks the generic input[type="range"] rule (and its
   90 px / 70 px phone widths): that rule used to win, leaving the scrubber
   120 px long at the left of a 688 px track while the chapter dots ran the
   whole width. The input fills the track's HEIGHT so a finger can hit it;
   the 6 px bar is its background clipped to the content box. */
.ex-track .ex-scrub {
  width: 100%; height: 34px; padding: 14px 0; box-sizing: border-box;
  background-clip: content-box;
}
.ex-scrub:focus-visible { outline: 2px solid #ffd54a; outline-offset: 4px; }
.ex-dots { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.ex-dot {
  position: absolute; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto;
}
.ex-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #2a3042; border: 1.5px solid rgba(255, 213, 74, .6);
}
.ex-dot.done::after { background: #ffd54a; }
.ex-dot.now::after { background: #fff; border-color: #ffd54a; box-shadow: 0 0 0 3px rgba(255, 213, 74, .3); }
.ex-sub {
  margin: 6px 6px 0; color: #cfd6e6; font-size: .84rem; line-height: 1.45;
  min-height: 2.9em;
}
.ex-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;
}
@media (pointer: coarse) {
  .ex-btn { width: 44px; height: 44px; }
  .ex-chip { height: 40px; }
  .ex-track { height: 44px; }
  .ex-track .ex-scrub { height: 44px; padding: 19px 0; }
  .ex-dot { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}
@media (max-width: 560px) {
  .ex-row { gap: 2px; justify-content: space-between; }
  .ex-cam-lbl { display: none; }
  .ex-step { min-width: 0; margin-right: 2px; }
  .ex-chip { padding: 0 8px; min-width: 38px; }
  .ex-track { order: 10; flex-basis: 100%; margin: 2px 4px 0; }
  .ex-sub { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .ex-btn:active, .ex-chip:active { transform: none; } }

/* ═══ Touch: the collapsed chip grows to the 44px minimum. Must stay LAST
   so it wins over the .canvas-toggles rules above. ═══ */
@media (max-width: 768px) {
  .canvas-toggles > summary { width: 44px; height: 44px; }
  .canvas-toggles .cvt-ico { width: 18px; height: 18px; }
  .canvas-toggles[open] > summary { width: auto; height: auto; padding: 7px 10px; }
}

/* ── Rev it ── */
.btn-revit { background: rgba(61, 220, 132, .1); border: 1px solid rgba(61, 220, 132, .55); color: #3ddc84; }
.btn-revit:hover { background: rgba(61, 220, 132, .2); }
.btn-revit.active { background: #3ddc84; color: #10141c; border-color: #3ddc84; }
.btn-revit:focus-visible { outline: 2px solid #3ddc84; outline-offset: 2px; }
.rev-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.rev-panel[hidden], .dyno-card[hidden] { display: none; }
.rev-thr { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; }
.rev-thr-lbl { font-weight: 600; font-size: .85rem; }
.rev-thr input.rev-slider { flex: 1; width: auto; min-width: 0; height: 44px; padding: 19px 0; box-sizing: border-box; background-clip: content-box; cursor: pointer; touch-action: none; }
.rev-thr input.rev-slider::-webkit-slider-thumb { width: 24px; height: 24px; background: #3ddc84; }
.rev-thr-val { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rev-mute { min-height: 36px; }
.rev-note { flex: 1 1 100%; margin: 0; font-size: .8rem; color: var(--text-muted, #9aa4bf); line-height: 1.45; }
.rev-warn { color: #ffb84a; }
.dyno-card { margin: 10px 0; padding: 8px 14px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-x: clip; }
.dyno-card summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
#dyno-canvas { display: block; width: 100%; height: 240px; }
.dyno-live { margin: 6px 0 2px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.dyno-note { margin: 4px 0 0; font-size: .78rem; color: var(--text-muted, #9aa4bf); line-height: 1.45; }
@media (max-width: 500px) {
  .rev-thr { flex-basis: 100%; }
  #dyno-canvas { height: 210px; }
}
.btn-revit { display: inline-flex; align-items: center; }
.btn-revit .rev-ico { vertical-align: -3px; }
.btn-revit .rev-snd { margin-left: 5px; opacity: .85; }
.rev-rpm-val { min-width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #ffb84a; }

/* ── Engine view: 1 cylinder | Multi-cylinder, plus the cylinder count ──
   A header strip ABOVE the canvas, inside the card. The Display Controls
   chip (absolute, top-left of the card) sits in its left padding, so the
   strip covers nothing that is drawn. */
.view-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  min-height: 40px; padding: 0 0 8px 46px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.view-toggle .vt-label {
  font-size: 0.6rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
}
.view-toggle .vt-count { display: flex; align-items: center; gap: 8px; }
.view-toggle .vt-count[hidden] { display: none; }
.view-toggle .vt-tabs {
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.view-toggle .vt-pill {
  padding: 5px 12px; min-height: 30px; min-width: 34px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text); opacity: .72; font-family: var(--font);
  font-size: 0.76rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
}
.view-toggle .vt-pill:hover:not(.active) { background: var(--surface2); opacity: 1; }
.view-toggle .vt-pill.active { background: var(--accent); color: #fff; opacity: 1; box-shadow: 0 0 10px var(--accent-lo); }
.view-toggle .vt-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.view-toggle .vt-count .vt-pill.active { background: var(--gold); color: #0d1117; box-shadow: none; }
.canvas-card.explaining .view-toggle { opacity: .45; pointer-events: none; }
@media (max-width: 640px) {
  .view-toggle { gap: 6px 10px; }
  .view-toggle > .vt-label { display: none; }
  .view-toggle .vt-pill { padding: 5px 10px; font-size: 0.72rem; }
}

/* ── 3D view (engine3d.js) ──
   The stage replaces the canvas in the card; the 2D overlays (Display
   Controls, the diagram selector, Show diagram) belong to the section and
   step aside. Controls sit in one bar along the bottom of the stage. */
.view-toggle .vt-3d { display: inline-flex; align-items: center; gap: 5px; }
.view-toggle .vt-3d svg { flex: none; }
.canvas-card.view-3d .canvas-toggles,
.canvas-card.view-3d .pane-toggle,
.canvas-card.view-3d .diagram-toggle { display: none !important; }
.e3d-stage { position: relative; width: 100%; }
.e3d-view {
  position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 82vh;
  border-radius: 8px; overflow: hidden; background: #0b0d12;
  user-select: none; -webkit-user-select: none;
}
.e3d-stage[hidden] { display: none; }
.e3d-stage .e3d-gl, .e3d-stage .e3d-hud {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.e3d-stage .e3d-gl { cursor: grab; outline: none; }
.e3d-stage .e3d-gl.grabbing { cursor: grabbing; }
.e3d-stage .e3d-gl:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.e3d-stage .e3d-hud { pointer-events: none; }
.e3d-bar {
  position: absolute; left: 10px; right: 10px; bottom: 10px;  /* over the view's foot on a wide screen */
  display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; pointer-events: none;
}
.e3d-seg {
  display: flex; gap: 2px; padding: 3px; pointer-events: auto;
  background: rgba(10, 13, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.e3d-seg button {
  min-height: 30px; min-width: 32px; padding: 4px 10px; border: none; border-radius: 6px;
  background: transparent; color: #dfe5f2; font: 700 0.74rem var(--font); cursor: pointer; opacity: .8;
}
.e3d-seg button:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
.e3d-seg button.on { background: var(--accent); color: #fff; opacity: 1; }
.e3d-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.e3d-info {
  position: absolute; right: 10px; bottom: 56px; width: min(320px, calc(100% - 20px));
  padding: 12px 14px 12px; border-radius: 10px;
  background: rgba(10, 13, 22, 0.9); border: 1px solid rgba(255, 190, 90, 0.45);
  color: #e8ecf6; font-size: 0.8rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.e3d-info[hidden] { display: none; }
.e3d-ititle { font-weight: 800; color: #ffbe5a; font-size: 0.9rem; margin: 0 22px 4px 0; }
.e3d-ilive { margin-top: 6px; color: #9fc4ff; font-variant-numeric: tabular-nums; }
.e3d-ilive:empty { display: none; }
.e3d-x {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: none; border-radius: 6px;
  background: transparent; color: #cfd6e6; font-size: 1.1rem; cursor: pointer;
}
.e3d-x:hover { background: rgba(255, 255, 255, 0.1); }
.e3d-hint {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; background: rgba(10, 13, 22, 0.6);
  color: #b7c0d6; font-size: 0.7rem; white-space: nowrap; pointer-events: none; transition: color .2s, background .2s;
}
.e3d-hint.flash { color: #141414; background: #ffbe5a; }
.e3d-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #e8ecf6; font-size: 0.9rem; background: #0b0d12;
}
.e3d-msg[hidden] { display: none; }
/* On a phone the bar is a row UNDER the view, so it never covers the engine */
@media (max-width: 640px) {
  .e3d-view { aspect-ratio: 4 / 5; max-height: 74vh; }
  .e3d-bar { position: static; margin-top: 8px; justify-content: flex-start; gap: 6px; }
  .e3d-seg button { padding: 4px 8px; font-size: 0.72rem; min-height: 34px; }
  .e3d-hint { display: none; }
  .e3d-info { bottom: 10px; left: 10px; right: 10px; width: auto; }
}

/* ── Radial engine additions ── */
.re3d-note { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); z-index: 6; padding: 8px 34px 8px 12px; border-radius: 10px; background: rgba(13,17,23,.92); border: 1px solid var(--border); font-size: 0.8rem; color: var(--text); }
.re3d-note[hidden] { display: none; }
.re3d-note button { position: absolute; right: 6px; top: 5px; border: 0; background: transparent; color: var(--text-dim); font-size: 0.9rem; cursor: pointer; min-width: 24px; min-height: 24px; }
.concept-card .cc-diag { display: block; width: 100%; height: auto; aspect-ratio: 320 / 170; border-radius: 8px; margin: 6px 0 10px; background: #0f141e; }
.concept-card .cc-formula { margin-top: 8px; color: var(--gold); font-size: 0.9rem; overflow-x: auto; }
.feedback.ok { color: var(--green); }
.feedback.bad { color: var(--red); }
.quiz-opt.selected { border-color: var(--accent); background: var(--accent-lo); }
.quiz-opt.correct { border-color: var(--green); background: rgba(61,220,132,.15); }
.quiz-opt.wrong { border-color: var(--red); background: rgba(255,85,85,.15); }
.ex-dot.active { background: var(--gold); }
.btn-revit.active { box-shadow: 0 0 0 2px var(--accent) inset; }

/* ── Radial engine: cylinder picker in the view strip, the rods table ── */
.vt-sel { display: flex; align-items: center; gap: 6px; }
.vt-sel select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 0.8rem; min-height: 30px; }
.rods-table td:nth-child(2) { min-width: 0; }
.rods-table tr.sel td { background: var(--accent-lo) !important; color: var(--text); }
@media (max-width: 500px) { .vt-sel select { min-height: 40px; } }
.readout-panel .readout-wide { grid-column: 1 / -1; }
.readout-wide .readout-value { font-size: 0.95rem; letter-spacing: .02em; word-break: break-word; }

/* ── Flight theory ───────────────────────────────────────────── */
.view-toggle { padding-left: 46px; }
.ft-stage { position: relative; }
.ft-stage canvas { display: block; width: 100%; height: auto; touch-action: pan-y; border-radius: 8px; background: #0b1220; }
.canvas-card .pane-toggle {
  position: static; margin-top: 8px; width: fit-content; max-width: 100%; flex-wrap: wrap;
  background: var(--bg); box-shadow: none;
}
.canvas-card.view-3d .pane-toggle { display: none !important; }

.ft-msg {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6;
  padding: 14px 20px; border-radius: 12px; background: rgba(40, 8, 8, 0.92); border: 1px solid var(--red);
  color: #ffd9d9; font-weight: 700; text-align: center; max-width: 80%;
}
.ft-msg[hidden] { display: none; }
@media (max-width: 500px) { .ft-msg { padding: 8px 12px; font-size: 0.8rem; top: 30%; } }
.ft-msg button { margin-top: 10px; }

/* cockpit: the flying controls under the picture */
.cockpit {
  display: grid; grid-template-columns: 170px 1fr 290px; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
.ck-title { font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.ck-sub { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .8; }
.yoke-pad {
  position: relative; width: 150px; height: 150px; border-radius: 14px; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 45%, #1d2638 0%, #121826 70%);
  border: 1px solid var(--border); outline: none;
}
.yoke-pad:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.yoke-pad.grabbing { cursor: grabbing; }
.yoke-cross { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--border), var(--border)) center/1px 100% no-repeat, linear-gradient(90deg, var(--border), var(--border)) center/100% 1px no-repeat; }
.yoke-knob {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fd0ff, var(--accent) 55%, #1f6fb0);
  box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 0 0 3px rgba(79,179,255,.18); pointer-events: none;
}
.ck-sliders { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ck-row { display: flex; align-items: center; gap: 10px; }
.ck-row .sim-slider { flex: 1; min-width: 80px; }
.ck-lbl { min-width: 128px; font-size: 0.78rem; font-weight: 700; color: var(--text); }
.ck-key { display: block; font-size: 0.64rem; font-weight: 600; color: var(--text-dim); }
.ck-val { min-width: 58px; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; color: var(--accent); }
.ck-pills { flex-wrap: wrap; }
.ck-pills .pill[aria-pressed="true"] { background: var(--gold); color: #141414; }
.ck-pills .pill[hidden] { display: none; }
.ck-surf { display: flex; flex-direction: column; gap: 7px; }
.surf-row { display: grid; grid-template-columns: 96px 1fr 46px; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text); }
.surf-row b { font-family: var(--mono); color: var(--accent); text-align: right; font-size: 0.8rem; }
.surf-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); }
.surf-bar::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-dim); }
.surf-bar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 4px; background: var(--accent); }
.ck-chk { display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--text); margin-top: 4px; cursor: pointer; }
.ck-chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.readout-panel { grid-template-columns: repeat(6, 1fr); }
.eq-line { margin: 4px 0 10px; }
.eq-cmp { font-size: 0.8rem; color: var(--text-dim); margin: -4px 0 10px; }
.eq-cmp b { color: var(--green); }
kbd { font-family: var(--mono); font-size: 0.75rem; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ac-table td:first-child { color: var(--text-dim); }
@media (max-width: 960px) {
  .cockpit { grid-template-columns: 160px 1fr; }
  .ck-surf { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ck-surf .ck-title, .ck-surf .ck-chk { grid-column: 1 / -1; }
  .readout-panel { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .ck-lbl { min-width: 104px; }
  .ck-surf { grid-template-columns: 1fr; }
  .readout-panel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
  .cockpit { grid-template-columns: 1fr; padding: 10px; }
  .ck-yoke-col { display: flex; flex-direction: column; align-items: center; }
  .yoke-pad { width: 170px; height: 170px; }
  .ck-lbl { min-width: 92px; font-size: 0.74rem; }
  .readout-panel { grid-template-columns: repeat(2, 1fr); }
  .surf-row { grid-template-columns: 86px 1fr 42px; }
}
.eq-line { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
#lp-eq-body { max-width: 100%; overflow: hidden; }
.vt-sel { min-width: 0; max-width: 100%; }
.vt-sel select { max-width: 100%; min-width: 0; }
.canvas-card .pane-toggle .pt-tabs { flex-wrap: wrap; }
@media (max-width: 500px) {
  .view-toggle { padding-left: 46px; }
  .vt-sel { width: 100%; }
  .vt-sel select { flex: 1; }
  .canvas-card .pane-toggle .pt-label { display: none; }
}
.seo-article .tbl-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══ Flight deck layout (v2): one toolbar, controls inside the picture, fits one screen ══ */
.canvas-card { padding: 8px; }
.ft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 40px; padding: 0 0 8px 46px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.ft-bar .vt-label { margin-right: 4px; }
.ft-bar .vt-sel select { min-height: 32px; padding: 4px 8px; font-size: 0.78rem; }
.bar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }
.bar-group { display: flex; gap: 4px; align-items: center; }
.bar-end { margin-left: auto; }
.bar-btn {
  display: inline-flex; align-items: center; gap: 3px; min-height: 32px; min-width: 34px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
  font: 700 0.76rem var(--font); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.bar-btn:hover { background: var(--surface2); border-color: var(--accent); }
.bar-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.bar-btn.bar-play { background: var(--accent); border-color: var(--accent); color: #fff; min-width: 40px; justify-content: center; }
.bar-btn[aria-pressed="true"].bar-full { background: var(--gold); color: #141414; }
@media (max-width: 1100px) { .bb-l { display: none; } }

.ft-stage { position: relative; }
.ft-stage canvas, #e3d-stage { display: block; width: 100%; border-radius: 8px; background: #0b1220; }
#e3d-stage { position: relative; overflow: hidden; }
#e3d-stage[hidden] { display: none; }

/* panel tabs sit on the top edge of the right-hand lower panel (placed by app.js) */
.ft-stage .pane-toggle { position: absolute; z-index: 4; margin: 0; padding: 3px; width: auto; background: rgba(10,14,24,0.86); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; box-shadow: none; }
.ft-stage .pane-toggle .pt-tabs { flex-wrap: nowrap; gap: 2px; }
.ft-stage .pane-toggle .pt-pill { padding: 3px 8px; min-height: 24px; font-size: 0.7rem; }
.canvas-card.view-3d .pane-toggle { display: none !important; }

/* the flight deck */
.ft-deck { position: absolute; z-index: 5; display: flex; justify-content: space-between; align-items: stretch; pointer-events: none; }
.ft-deck > div { pointer-events: auto; }
.deck-l { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; }
.deck-r { display: flex; align-items: stretch; gap: 8px; padding: 6px 8px; }
.ft-deck.deck-under { position: static; margin-top: 8px; padding: 8px; gap: 10px; background: #14171d; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.yoke-pad { position: relative; width: 104px; height: 82px; border-radius: 12px; cursor: grab; touch-action: none; outline: none;
  background: radial-gradient(circle at 50% 45%, #232c3f 0%, #121826 75%); border: 1px solid #39425a; box-shadow: inset 0 2px 8px rgba(0,0,0,.5); }
.yoke-pad.grabbing { cursor: grabbing; }
.yoke-pad:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.yoke-cross { position: absolute; inset: 6px; pointer-events: none;
  background: linear-gradient(#39425a, #39425a) center/1px 100% no-repeat, linear-gradient(90deg, #39425a, #39425a) center/100% 1px no-repeat; }
.yk { position: absolute; left: 50%; transform: translateX(-50%); font: 800 8px var(--font); letter-spacing: .08em; color: #6b7a99; pointer-events: none; }
.yk-up { top: 3px; } .yk-dn { bottom: 3px; }
.yoke-knob { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #a8dcff, var(--accent) 55%, #1f6fb0); box-shadow: 0 3px 10px rgba(0,0,0,.55), 0 0 0 3px rgba(79,179,255,.18); }
.lever { position: relative; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; }
.lever:focus-visible { box-shadow: 0 0 0 2px var(--gold); border-radius: 6px; }
.lever-v { width: 34px; height: 100%; min-height: 96px; }
.lever-h { width: 104px; height: 26px; }
.lv-track { position: absolute; background: #0b0d12; border: 1px solid #39425a; border-radius: 4px; }
.lever-v .lv-track { left: 50%; top: 14px; bottom: 16px; width: 8px; margin-left: -4px; }
.lever-h .lv-track { top: 5px; left: 4px; right: 4px; height: 8px; }
.lv-fill { position: absolute; left: 50%; width: 8px; margin-left: -4px; bottom: 16px; border-radius: 4px; background: linear-gradient(#f5c842, #c98f1f); pointer-events: none; }
.lv-mid { position: absolute; background: #6b7a99; pointer-events: none; }
.lever-v .lv-mid { left: 6px; right: 6px; height: 1px; }
.lever-h .lv-mid { top: 2px; height: 14px; width: 1px; left: 50%; }
.lv-handle { position: absolute; pointer-events: none; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.lever-v .lv-handle { left: 3px; right: 3px; height: 12px; margin-top: -6px; background: linear-gradient(#e9edf3, #9aa5b8); }
.lv-throttle .lv-handle { background: linear-gradient(#2d2f36, #0d0e11); border: 1px solid #555; }
.lv-trim .lv-handle { background: linear-gradient(#e9edf3, #7d889c); height: 8px; margin-top: -4px; }
.lever-h .lv-handle { top: 1px; width: 14px; height: 16px; margin-left: -7px; background: linear-gradient(#e9edf3, #9aa5b8); }
.lv-cap { position: absolute; font: 800 8.5px var(--font); letter-spacing: .07em; color: #8a93a6; pointer-events: none; white-space: nowrap; }
.lever-v .lv-cap { top: 0; left: 50%; transform: translateX(-50%); }
.lever-h .lv-cap { bottom: -1px; left: 50%; transform: translateX(-50%); }
.lv-val { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font: 700 9.5px var(--mono); color: #e8ecf3; white-space: nowrap; pointer-events: none; }
.flap-sel { position: relative; width: 44px; display: flex; flex-direction: column; align-items: center; padding-top: 13px; }
.flap-sel .lv-cap { top: 0; }
.flap-tabs { display: flex; flex-direction: column; gap: 3px; }
.flap-tabs .pill { min-height: 0; height: 20px; padding: 0 6px; font-size: 0.66rem; border-radius: 5px; }
.flap-tabs[hidden] { display: none; }
.deck-side { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 128px; }
.deck-side .surf-row { grid-template-columns: 22px 1fr 40px; gap: 6px; font-size: 0.72rem; }
.deck-side .surf-row b { font-size: 0.72rem; }
.deck-btns { display: flex; gap: 4px; }
.deck-btn { flex: 1; min-height: 22px; padding: 0 6px; border: 1px solid #39425a; border-radius: 6px; background: #0b0d12; color: #cfd6e4; font: 700 0.66rem var(--font); cursor: pointer; }
.deck-btn[aria-pressed="true"] { background: var(--gold); color: #141414; border-color: var(--gold); }
.deck-btn[hidden] { display: none; }
.ft-deck .ck-chk { font-size: 0.68rem; margin: 0; }

/* lesson card: compact, top-right of the picture, foldable (placed by app.js) */
.ft-lesson-card {
  position: absolute; z-index: 6; width: 290px; max-width: calc(100% - 16px); padding: 8px 10px; border-radius: 10px;
  background: rgba(10, 14, 24, 0.9); border: 1px solid rgba(79, 179, 255, 0.45); color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ft-lesson-card[hidden] { display: none; }
.ft-lesson-card.folded .lc-body { display: none; }
.ft-lesson-card .lc-text { font-size: 0.72rem; line-height: 1.45; margin: 4px 0 6px; }
.ft-lesson-card .lc-checks li { font-size: 0.71rem; }
.ft-lesson-card .lc-actions { flex-direction: row; }
.ft-lesson-card .lc-btn { padding: 5px 10px; font-size: 0.74rem; }
.ft-lesson-card.under { position: static; width: auto; max-width: none; margin-top: 8px; }

/* full screen: the card fills the window */
body.ft-noscroll { overflow: hidden; }
.canvas-card.ft-full { position: fixed; inset: 0; z-index: 2000; border-radius: 0; margin: 0; overflow: auto; background: var(--bg); padding: 8px 10px; }
.lc-head { display: flex; align-items: center; gap: 8px; }
.lc-title { flex: 1; font-weight: 800; font-size: 0.84rem; color: var(--accent); }
.lc-x { border: 0; background: transparent; color: var(--text-dim); font-size: 0.9rem; cursor: pointer; min-width: 26px; min-height: 26px; border-radius: 6px; }
.lc-x:hover { background: rgba(255,255,255,.08); color: var(--text); }
.lc-checks { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 7px; padding: 0; }
.lc-checks li { color: var(--text-dim); padding-left: 18px; position: relative; line-height: 1.35; }
.lc-checks li::before { content: '\25CB'; position: absolute; left: 2px; color: var(--text-dim); }
.lc-checks li.done { color: var(--green); }
.lc-checks li.done::before { content: '\2713'; color: var(--green); font-weight: 800; }
.lc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lc-btn.on { background: var(--gold); color: #141414; }
.lc-btn[hidden] { display: none; }
/* compact toolbar: one row on a laptop */
.ft-bar .vt-label { display: none; }
.ft-bar #sel-aircraft { max-width: 190px; }
.ft-bar #sel-lesson { max-width: 230px; }
.ft-bar .vt-pill { padding: 4px 9px; min-height: 30px; font-size: 0.72rem; }
.ft-bar .bar-btn { padding: 4px 8px; font-size: 0.72rem; }
@media (max-width: 1240px) { .ft-bar .bb-l { display: none; } }
.ft-deck.narrow .deck-side .surf-row { display: none; }
.ft-deck.narrow .deck-side { min-width: 86px; }
.ft-deck.narrow .deck-btns { flex-direction: column; }

/* ── Labels menu (toolbar): which arrows and labels the picture draws ── */
.lbl-wrap { position: relative; }
.bar-btn.bar-labels[aria-expanded="true"] { background: var(--accent-lo); border-color: var(--accent); color: var(--accent); }
.lbl-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 232px;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px;
  background: rgba(13,17,23,0.97); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.lbl-pop[hidden] { display: none; }
.lbl-quick { display: flex; gap: 4px; margin-bottom: 4px; }
.lbl-quick button { flex: 1; min-height: 30px; padding: 3px 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.lbl-quick button:hover { border-color: var(--accent); color: var(--accent); }
.lbl-group { font-size: 0.58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  margin-top: 5px; padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.lbl-item { display: flex; align-items: center; gap: 7px; min-height: 26px; font-size: 0.78rem; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.lbl-item:hover { color: var(--text); }
.lbl-item input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.lbl-sw { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
@media (max-width: 768px) { .lbl-item { min-height: 34px; } .lbl-pop { max-width: calc(100vw - 24px); } }
.ft-bar .bar-labels .bb-l { display: inline; font-weight: 700; }
.bar-btn.bar-labels { gap: 4px; }

/* phone: the deck sits under the canvas in normal flow, so its small cockpit controls can grow to the 28 px tap floor
   (flap pills were 20 px, panel tabs 24 px, Brakes/Airbrake 22 px); the compact desktop deck is unchanged */
@media (max-width: 768px) {
  .flap-tabs .pill { height: 28px; }
  .deck-btn { min-height: 28px; }
  .ft-stage .pane-toggle .pt-pill { min-height: 28px; }
}