/* ── Orifice Experiment Virtual Lab ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #0ea5e9;
  --accent-lo: rgba(14,165,233,.22);
  --green:     #3ddc84;
  --red:       #ff5555;
  --gold:      #f5c842;
  --blue:      #42a5f5;
  --purple:    #7c4dff;
  --text:      #dde3f0;
  --text-dim:  #6b7a99;
  --font:      'Segoe UI', system-ui, sans-serif;
  --mono:      ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Courier New', monospace;
  --radius:    12px;
}

body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; padding: 0 16px; }
/* 1400 px, matching utm-testing / impact-testing, and one step above the
   1320 px used by centrifugal-pump and hydraulic-turbine — the same fluid-rig
   family. This canvas is 1040x560 native, the widest aspect on the site, and
   at 1180 it could never render above 654 px however large the screen. */
#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, #0ea5e9 0%, #67e8f9 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);
}
.controls-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

/* ── Pill tabs ─────────────────────────────────────────────── */
.pill-tabs { display: flex; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.pill {
  padding: 5px 13px; border: none; background: transparent; color: var(--text-dim);
  border-radius: 6px; cursor: pointer; font-size: 0.81rem; font-weight: 600;
  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 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  background: var(--surface2); color: var(--text);
  font-size: 0.84rem; font-weight: 600; transition: filter .18s, box-shadow .18s, background .18s;
}
.btn:hover { background: var(--border); }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 12px var(--accent-lo); }
.btn-primary.recording { background: var(--red); box-shadow: 0 0 14px rgba(255,85,85,.35); }
.btn-guide { background: var(--gold); color: #1a1200; border-color: transparent; list-style: none; display: inline-block; }
.guide-details { margin-left: auto; }
.guide-details summary::-webkit-details-marker { display: none; }
.guide-body {
  margin-top: 10px; padding: 14px 18px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.86rem; line-height: 1.65; flex-basis: 100%;
}
.guide-body h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--accent); }
.guide-body ol { margin-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.guide-note { margin-top: 10px; color: var(--text-dim); font-size: 0.82rem; }

/* ── Lab layout: controls | apparatus | readouts ───────────── */
/* ── Bench layout ──────────────────────────────────────────────────
   The old grid was `268px 1fr 268px` with everything — setup AND the
   collection run — stacked in the left rail. Measured at 1440x900 that
   made the rail 754 px against a 331 px canvas, so the row height was
   driven by the rail and left 294 px of dead space beside it, while the
   instrument itself got barely half the width.

   Now the left rail holds SETUP only and the run controls sit in a
   horizontal bar beneath the stage. The stage column becomes
   canvas + run bar, which is close to the rails' height, so the void
   closes and the primary action lands next to the thing it drives. */
.lab-grid {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 252px;
  grid-template-areas:
    "setup stage   results"
    "setup run     results";
  grid-template-rows: auto auto;
  gap: 12px 14px;
  align-items: start;
}
.lab-controls  { grid-area: setup; }
.lab-canvas    { grid-area: stage; }
.lab-run       { grid-area: run; }
.lab-readouts  { grid-area: results; }
.lab-col { min-width: 0; }
.lab-controls, .lab-readouts {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.panel-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); font-weight: 700;
}
.panel-subtitle {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-top: 4px;
}

/* ── Control rows ──────────────────────────────────────────── */
.ctl-row { display: flex; flex-direction: column; gap: 6px; }
.ctl-label { font-size: 0.76rem; font-weight: 700; color: var(--text-dim); }
.ctl-label em { color: var(--text); font-style: italic; }
.ctl-val {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.sim-slider {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0;
  height: 6px; border-radius: 3px; outline: none;
  background: linear-gradient(90deg, var(--accent-lo), var(--surface2));
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; box-shadow: 0 0 8px var(--accent-lo);
}
.sim-slider::-moz-range-thumb {
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}
.sim-select {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); font-size: 0.84rem; font-family: var(--font); cursor: pointer;
}
.ctl-note { font-size: 0.74rem; color: var(--text-dim); font-family: var(--mono); line-height: 1.4; }
.ctl-note.warn { color: var(--gold); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; min-width: 0; }

/* ── Stopwatch ─────────────────────────────────────────────── */
.stopwatch { display: flex; align-items: center; gap: 12px; }
.stopwatch canvas { flex: 0 0 auto; }
.watch-digits { min-width: 0; }
.watch-t {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.watch-unit { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); margin-left: 2px; }
.watch-vol { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); margin-top: 2px; }

/* ── Canvas ────────────────────────────────────────────────── */
.canvas-card {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; position: relative; overflow-x: clip;
}
.canvas-card canvas { display: block; width: 100%; height: auto; touch-action: pan-y; }
.canvas-hint {
  margin-top: 8px; font-size: 0.78rem; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 34px 7px 12px; position: relative;
}
.hint-close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; border-radius: 5px;
  background: transparent; color: var(--text-dim); font-size: 1rem; cursor: pointer;
}
.hint-close:hover { background: var(--border); color: var(--text); }

/* ── Readouts ──────────────────────────────────────────────── */
.readout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.readout-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px;
}
.readout-label {
  font-size: 0.63rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 3px;
}
.readout-val {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.readout-unit { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); }

.coeff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.coeff-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 4px; text-align: center;
}
.coeff-card.cd { border-color: rgba(14,165,233,.45); }
.coeff-card.cv { border-color: rgba(61,220,132,.35); }
.coeff-card.cc { border-color: rgba(245,200,66,.35); }
.coeff-sym { font-size: 0.82rem; font-weight: 700; color: var(--text-dim); }
.coeff-val {
  font-family: var(--mono); font-size: 1.22rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; margin: 2px 0;
}
.coeff-card.cd .coeff-val { color: var(--accent); }
.coeff-card.cv .coeff-val { color: var(--green); }
.coeff-card.cc .coeff-val { color: var(--gold); }
.coeff-cap { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.coeff-note { font-size: 0.74rem; color: var(--text-dim); line-height: 1.45; }

@keyframes digitflip { from { transform: translateY(-45%); opacity: .25; } to { transform: none; opacity: 1; } }
.coeff-val.flip { animation: digitflip .26s cubic-bezier(.2,.7,.3,1); }

/* ── Reference table ───────────────────────────────────────── */
.ref-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.ref-table th {
  text-align: left; padding: 5px 4px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); font-weight: 700;
}
.ref-table td { padding: 5px 4px; border-bottom: 1px solid rgba(42,48,80,.5); font-family: var(--mono); }
.ref-table td:first-child { font-family: var(--font); }
.ref-table tr.active td { background: var(--accent-lo); color: #fff; }

/* ── Experiment log ────────────────────────────────────────── */
.log-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.log-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.log-actions { margin-left: auto; display: flex; gap: 8px; }
.log-scroll { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; white-space: nowrap; }
.log-table th {
  text-align: right; padding: 6px 8px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); font-weight: 700; position: sticky; top: 0;
  background: var(--surface);
}
.log-table th:nth-child(-n+3), .log-table td:nth-child(-n+3) { text-align: left; }
.log-table td {
  text-align: right; padding: 6px 8px; font-family: var(--mono);
  border-bottom: 1px solid rgba(42,48,80,.5); font-variant-numeric: tabular-nums;
}
.log-table td.cd { color: var(--accent); font-weight: 700; }
.log-table td.cv { color: var(--green); }
.log-table td.cc { color: var(--gold); }
.log-table tr.log-empty td { text-align: center; color: var(--text-dim); font-family: var(--font); padding: 16px; }

/* ── Info panel ────────────────────────────────────────────── */
.info-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.info-panel-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}
.formula-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.formula {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; display: flex; flex-direction: column; gap: 3px;
}
.f-name { font-size: 0.63rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.f-eq { font-family: var(--mono); font-size: 0.8rem; color: var(--text); }

/* ── Explore ───────────────────────────────────────────────── */
.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.is-card {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 11px 13px; cursor: pointer; text-align: left;
  font-size: 0.83rem; font-weight: 600; transition: background .16s, border-color .16s;
}
.is-card:hover { background: var(--surface2); }
.is-card.active { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-lo); }
.explore-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.explore-detail canvas { width: 100%; height: auto; border-radius: 8px; display: block; }
.explore-text h3 { font-size: 1rem; color: var(--accent); margin-bottom: 8px; }
.explore-text p { font-size: 0.87rem; line-height: 1.7; color: var(--text); }

/* ── Practice / Quiz ───────────────────────────────────────── */
.practice-card, .quiz-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.practice-q, .quiz-q { font-size: 0.95rem; line-height: 1.7; }
.practice-input { display: flex; gap: 8px; flex-wrap: wrap; }
.practice-input input {
  flex: 1; min-width: 140px; padding: 9px 12px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--mono); font-size: 0.92rem;
}
.practice-fb { font-size: 0.88rem; font-weight: 700; min-height: 1.2em; }
.practice-fb.good { color: var(--green); }
.practice-fb.bad  { color: var(--red); }
.practice-fb.warn { color: var(--gold); }
.practice-sol {
  display: none; white-space: pre-wrap; font-family: var(--mono); font-size: 0.8rem;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; line-height: 1.65; color: var(--text-dim);
}
.quiz-progress { font-size: 0.75rem; color: var(--text-dim); font-family: var(--mono); }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.answer-btn {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 11px 14px; cursor: pointer; text-align: left;
  font-size: 0.85rem; font-family: var(--font); transition: background .16s;
}
.answer-btn:hover { background: var(--border); }
.answer-btn.correct { border-color: var(--green); background: rgba(61,220,132,.14); }
.answer-btn.wrong   { border-color: var(--red);   background: rgba(255,85,85,.14); }
.quiz-fb { font-size: 0.86rem; font-weight: 700; min-height: 1.2em; }

/* ── SEO article ───────────────────────────────────────────── */
.seo-article {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; line-height: 1.8; font-size: 0.9rem;
}
.seo-article h2 { font-size: 1.25rem; color: var(--accent); margin-bottom: 12px; }
.seo-article h3 { font-size: 1rem; color: var(--text); margin: 18px 0 8px; }
.seo-article p { margin-bottom: 10px; color: #c3ccdd; }
.seo-article a { color: var(--accent); text-decoration: none; }
.seo-article a:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1120px) {
  /* Single column, and the AREAS must be reset too — leaving them defined
     against one column collapses the whole grid. */
  .lab-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "run" "setup" "results";
  }
  .lab-controls, .lab-readouts { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .lab-controls .ctl-row { flex: 1 1 200px; }
  .lab-controls .panel-title, .lab-readouts .panel-title,
  .lab-readouts .panel-subtitle { flex-basis: 100%; }
  .readout-grid { flex: 1 1 320px; }
  .coeff-grid { flex: 1 1 280px; }
  .ref-table { flex-basis: 100%; }
  .stopwatch { flex: 1 1 200px; }
  .btn-row { flex: 1 1 220px; }
}
@media (max-width: 768px) {
  .explore-detail { grid-template-columns: minmax(0, 1fr); }
  .answer-grid { grid-template-columns: 1fr; }
  .guide-details { margin-left: 0; flex-basis: 100%; }
}
/* Phone block LAST in the file — a media query adds no specificity,
   so only source order makes these win. */
@media (max-width: 500px) {
  body { padding: 0 10px; }
  header h1 { font-size: 1.35rem; }
  .subtitle { font-size: 0.76rem; }
  .controls-bar { padding: 10px 12px; gap: 8px; }
  .pill { padding: 7px 11px; font-size: 0.78rem; min-height: 36px; }
  .readout-grid { grid-template-columns: 1fr 1fr; }
  .coeff-grid { grid-template-columns: repeat(3, 1fr); }
  .seo-article { padding: 16px 15px; }
  /* the range track's intrinsic minimum plus a label column overflowed a
     375px viewport on other tools in this repo — let the track shrink */
  .sim-slider { min-width: 0; }
  .lab-controls .ctl-row { flex-basis: 100%; }
  .sim-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
  .sim-slider::-moz-range-thumb { width: 24px; height: 24px; }
  .btn { min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   UPGRADE v2 — steppers, unit toggle, display controls, context menu
   ══════════════════════════════════════════════════════════════════ */

/* ── Steppers (D7/D19/D20) ─────────────────────────────────────────
   press-repeat.js picks these up because the button text is exactly
   "−" / "+" and it sits beside an <input> inside .stepper. */
.stepper-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper-btn {
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface2); color: var(--text); font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.stepper-btn:hover:not(:disabled) { background: var(--border); }
.stepper-btn:disabled { opacity: .45; cursor: not-allowed; }
.stepper-input {
  width: 68px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--accent); font-family: var(--mono);
  font-size: 0.88rem; font-weight: 700; text-align: center; min-height: 32px;
  transition: border-color .18s;
}
.stepper-input:focus { outline: none; border-color: var(--accent); }
.stepper-input:disabled { opacity: .45; cursor: not-allowed; }
.stepper-unit { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; min-width: 26px; }

/* a locked control should look locked, not merely refuse to move */
.ctl-row.locked, .stepper-row.locked { opacity: .55; }

/* ── Unit pills in the controls bar ────────────────────────────── */
.unit-pills .pill { font-size: 0.72rem; padding: 5px 12px; }

/* ── Run status messages ───────────────────────────────────────── */
.run-msg {
  font-size: 0.76rem; line-height: 1.4; border-radius: 8px; padding: 7px 9px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
}
.run-msg.warn { border-color: var(--gold); color: var(--gold); }
.run-msg.good { border-color: var(--accent); color: var(--accent); }
.run-msg.busy { border-color: var(--accent); color: var(--text); }
.lock-note { color: var(--gold); }

/* ── Canvas action row ─────────────────────────────────────────── */
.canvas-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ── Right-click menu (D4c) ────────────────────────────────────── */
.cvs-menu {
  display: none; position: fixed; z-index: 60; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 5px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.cvs-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 11px; min-height: 40px;
  border: none; border-radius: 7px; background: none; color: var(--text);
  font-size: 0.82rem; font-family: inherit; cursor: pointer;
}
.cvs-menu-item:hover { background: var(--accent-lo); color: var(--accent); }
.cvs-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }


/* ══════════════════════════════════════════════════════════════════
   UPGRADE v5 — learn panels, KaTeX, Show-Calculations FAB + modal
   ══════════════════════════════════════════════════════════════════ */

/* ── Learning panels (F1) ─────────────────────────────────────── */
.learn-panels { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.learn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.learn-title {
  margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.learn-actions { display: flex; gap: 6px; }
.learn-btn { padding: 5px 11px; font-size: 0.72rem; min-height: 32px; }

.learn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.learn-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: 0.84rem; font-weight: 700; color: var(--text);
  user-select: none; min-height: 44px; box-sizing: border-box;
}
.learn-summary::-webkit-details-marker { display: none; }
.learn-summary::marker { content: ''; }
.learn-summary:hover { background: var(--accent-lo); color: var(--accent); }
.learn-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.learn-caret { color: var(--text-dim); font-size: 0.72rem; transition: transform 0.2s; }
.learn-card[open] > .learn-summary { border-bottom: 1px solid var(--border); }
.learn-card[open] > .learn-summary .learn-caret { transform: rotate(180deg); color: var(--accent); }
.learn-body { padding: 12px 14px 14px; font-size: 0.84rem; line-height: 1.55; color: var(--text-dim); }
.learn-body p { margin: 0 0 8px; }
.learn-body p:last-child { margin-bottom: 0; }
.learn-body strong { color: var(--text); }

/* live-equations lines — KaTeX renders inside these */
.eq-line {
  padding: 7px 0; border-bottom: 1px dashed rgba(139,157,195,0.16);
  overflow-x: auto; overflow-y: hidden;
}
.eq-line:last-child { border-bottom: none; }
.eq-name {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px;
}
.eq-line .katex { color: var(--text); }
.eq-pending { opacity: 0.72; }
.eq-pending em { font-size: 0.78rem; color: var(--text-dim); }

.learn-steps { margin: 0; padding-left: 20px; }
.learn-steps li { margin-bottom: 7px; }
.learn-note {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border); font-size: 0.79rem;
}
.coach-warn {
  padding: 8px 10px; border-radius: 8px;
  background: rgba(245,200,66,0.10); border: 1px solid var(--gold); color: var(--gold);
}
.coach-ok {
  padding: 8px 10px; border-radius: 8px;
  background: var(--accent-lo); border: 1px solid var(--accent); color: var(--text);
}

/* ── Show-Calculations FAB (F3/F14) ───────────────────────────── */
.btn-calc-fab {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; min-height: 44px;
  background: linear-gradient(180deg, #42a5f5, #1e88e5);
  color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; font-size: 0.86rem; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 18px rgba(66,165,245,0.35); cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-calc-fab:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(66,165,245,0.5); }
.btn-calc-fab:active { transform: translateY(0); }
.btn-calc-fab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Calculation modal (F4) ───────────────────────────────────── */
.calc-modal {
  display: none; position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.calc-modal.active { display: flex; }
.calc-modal-box {
  background: var(--surface); border: 1px solid 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: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text-dim);
  font-size: 1.4rem; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.calc-modal-close:hover { border-color: var(--accent); color: var(--text); background: var(--surface2); }
.calc-modal-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.cs-inputs {
  background: var(--accent-lo); border: 1px solid var(--accent); 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: var(--accent-lo); color: var(--accent);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; align-self: flex-start;
}
.cs-given { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cs-given span { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }
.cs-si-note { font-size: 0.72rem; color: var(--text-dim); margin: 0; }

.cs-step {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.cs-step-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-num {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); background: var(--accent-lo);
  padding: 2px 8px; border-radius: 20px;
}
.cs-title { font-size: 0.86rem; font-weight: 700; color: var(--text); }
.cs-formula, .cs-calc, .cs-result { overflow-x: auto; overflow-y: hidden; }
.cs-formula { padding: 2px 0; }
.cs-calc { color: var(--text-dim); }
.cs-result { color: var(--text); }
.cs-result .katex { color: var(--accent); }
.cs-note { font-size: 0.78rem; color: var(--text-dim); margin: 2px 0 0; line-height: 1.5; }
.cs-pending { opacity: 0.85; border-style: dashed; }

@media (max-width: 768px) {
  .btn-calc-fab { right: 10px; bottom: 10px; padding: 9px 13px; font-size: 0.8rem; }
}
@media (max-width: 500px) {
  .btn-calc-fab .btn-calc-label { display: none; }
  .btn-calc-fab { padding: 10px; gap: 0; }
  .learn-head { flex-direction: column; align-items: flex-start; }
  .calc-modal { padding: 12px 8px; }
  .calc-modal-body { padding: 12px 14px; }
}

/* ── Head-banner related links ─────────────────────────────────────
   site.css does not carry .btn-link — every tool copies this block.
   The labels collapse to icons under 560px so the row never wraps
   the User Guide button onto its own line on a phone. */
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.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;min-height:32px;box-sizing:border-box;}
.btn-link:hover{border-color:var(--accent);background:var(--accent-lo);color:#fff;}
.btn-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.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;}}

/* ── SEO article reference table (I5) ─────────────────────────────
   Wide content scrolls inside its own container; the page body must
   never scroll sideways. */
.seo-article .seo-table { width: 100%; border-collapse: collapse; margin: 12px 0 6px; font-size: 0.84rem; }
.seo-article .seo-table th,
.seo-article .seo-table td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.seo-article .seo-table thead th { background: var(--surface2); color: var(--accent); font-weight: 800; }
.seo-article .seo-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.seo-article .table-note { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.seo-article ol, .seo-article ul { padding-left: 22px; }
.seo-article ol li, .seo-article ul li { margin-bottom: 7px; }
@media (max-width: 560px) {
  .seo-article .seo-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── The run bar ───────────────────────────────────────────────────
   Four zones on one line: the clock, the settings, the go button and
   the live status. It reads left-to-right as the run actually happens. */
.lab-run {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: grid; gap: 10px 14px;
  /* Three zones on the top line, status full-width beneath. Four abreast
     squeezed "Stop & Record" onto three wrapped lines in the ~656 px the
     stage column actually has. */
  grid-template-columns: minmax(170px, 1fr) minmax(132px, 0.8fr) minmax(215px, auto);
  grid-template-areas:
    "clock set go"
    "status status status";
  align-items: center;
}
.run-clock  { grid-area: clock; }
.run-set    { grid-area: set; }
.run-go     { grid-area: go; }
.run-status { grid-area: status; }
.lab-run > div { min-width: 0; }

/* The <=1120px rail rules set `.stopwatch { flex: 1 1 200px }` and
   `.btn-row { flex: 1 1 220px }` back when both were children of a ROW flex
   rail. Inside these column-flex zones that basis becomes a HEIGHT — it
   inflated the Start button to 220 px tall and the run bar to 623 px. The run
   bar lays out its own children; the rail rules must not reach in. */
.lab-run .stopwatch,
.lab-run .btn-row,
.lab-run .ctl-row { flex: 0 0 auto; }

.run-clock { display: flex; flex-direction: column; gap: 8px; }
.run-clock .stopwatch { margin: 0; }

/* tank fill — the one number a running collection actually needs */
.run-fill { display: flex; flex-direction: column; gap: 4px; }
.run-fill-track {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
}
.run-fill-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #7dd3fc);
  border-radius: 999px;
  transition: width .18s linear;
}
.run-fill-bar.full { background: linear-gradient(90deg, var(--gold), #ffe9a8); }
.run-fill-cap { font-size: 0.68rem; color: var(--text-dim); font-family: var(--mono); }

.run-set  { display: flex; flex-direction: column; gap: 6px; }
.run-set .ctl-row { gap: 4px; }
.run-go   { display: flex; flex-direction: column; gap: 8px; }
.run-go .btn-row { margin: 0; }
.run-out  { display: flex; gap: 8px; flex-wrap: wrap; }
.run-status { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.run-status > * { margin: 0; }
.run-status .run-msg { flex: 1 1 260px; }
.run-status .ctl-note { flex: 0 1 auto; }
.run-status:empty { display: none; }

/* the primary action must never wrap its label */
.run-go .btn-row { display: flex; gap: 8px; }
.run-go .btn-row .btn { flex: 1 1 auto; white-space: nowrap; min-height: 42px; }
.run-go #btn-collect { flex: 1 1 60%; font-weight: 800; }

/* the Show-Calculations button is no longer a FAB floating over the
   apparatus — it sat on the bench and the measuring tank. It is a real
   button in the run bar now, beside the other outputs. */
.lab-run .btn-calc-fab {
  position: static; right: auto; bottom: auto;
  padding: 8px 13px; min-height: 38px; font-size: 0.8rem;
  box-shadow: 0 4px 12px rgba(66,165,245,0.28);
}
.lab-run .btn-calc-fab:hover { transform: translateY(-1px); }

/* canvas-attached actions: these manipulate the drawing, so they live
   with the drawing rather than floating in the gap below it */
.stage-tools { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.stage-btn { padding: 7px 12px; font-size: 0.78rem; min-height: 38px; }

@media (max-width: 900px) {
  .lab-run {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-areas: "clock set" "go go" "status status";
  }
}
@media (max-width: 560px) {
  .lab-run {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "clock" "set" "go" "status";
    padding: 12px;
  }
  .run-out { width: 100%; }
  .run-out .btn, .run-out .btn-calc-fab { flex: 1 1 0; justify-content: center; }
  /* every button a thumb has to hit gets the full 44 px on a phone */
  .run-out .btn, .run-out .btn-calc-fab, .stage-btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   Display Controls — the 44x44 mobile chip MUST stay last in this
   file so it wins the cascade over the desktop summary rule above.
   ══════════════════════════════════════════════════════════════════ */
.canvas-toggles {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  background: rgba(13,17,30,0.86);
  border: 1px solid rgba(139,157,195,0.22); border-radius: 10px;
  backdrop-filter: blur(3px); font-size: 0.76rem;
}
.canvas-toggles > summary {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  cursor: pointer; list-style: none; color: var(--text-dim);
  font-weight: 700; font-size: 0.72rem; border-radius: 9px;
  user-select: none; min-height: 24px;
}
.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 .2s; }
.canvas-toggles[open] > summary .cvt-caret { transform: rotate(180deg); color: var(--accent); }
.canvas-toggles[open] > summary { border-bottom: 1px solid rgba(139,157,195,0.18); border-radius: 9px 9px 0 0; }
.canvas-toggles .cvt-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 11px 9px; }
.canvas-toggles .cvt-item {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--text-dim); font-size: 0.76rem; white-space: nowrap; min-height: 24px;
}
.canvas-toggles .cvt-item:hover { color: var(--text); }
.canvas-toggles .cvt-item input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.canvas-toggles .cvt-reset {
  margin-top: 4px; padding: 5px 9px; font-size: 0.72rem; min-height: 32px;
}

@media (max-width: 720px) {
  /* collapsed, the panel is a 44x44 icon chip and nothing else */
  .canvas-toggles > summary {
    width: 44px; height: 44px; min-height: 44px; padding: 0;
    justify-content: center; border-radius: 10px;
  }
  .canvas-toggles > summary .cvt-title,
  .canvas-toggles > summary .cvt-caret { display: none; }
  .canvas-toggles .cvt-ico { width: 18px; height: 18px; }
  .canvas-toggles[open] > summary {
    width: auto; height: auto; min-height: 34px; padding: 7px 10px; 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; }
  .stepper-input { width: 62px; }
}