/* ══════════════════════════════════════════════════════════════════
   Induction Motor Simulator — tool styles
   Only --accent / --accent-lo are overridden; every semantic colour
   comes from shared/site.css so the tool blends with the rest of the site.
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        #0d1117;
  --surface:   #161b27;
  --surface2:  #1f2535;
  --border:    #2a3050;
  --accent:    #00bcd4;
  --accent-lo: rgba(0,188,212,.22);
  --green:     #3ddc84;
  --red:       #ff5555;
  --gold:      #f5c842;
  --text:      #dde3f0;
  --text-dim:  #6b7a99;
  --mono:      'JetBrains Mono', 'Courier New', monospace;
  --font:      'Segoe UI', system-ui, sans-serif;
  --radius:    12px;
}
body { background: var(--bg); color: var(--text); font-family: var(--font); }
#app { max-width: 1180px; margin: 0 auto; padding: 0 18px 60px; }

/* ── Header ─────────────────────────────────────────────────────── */
header { text-align: center; margin: 14px 0 18px; }
header h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; line-height: 1.15;
  color: var(--accent); letter-spacing: -.01em;
}
.subtitle {
  max-width: 860px; margin: 10px auto 0; color: var(--text-dim);
  font-size: .92rem; line-height: 1.55;
}
.subtitle strong { color: var(--text); }

/* ── Mode bar ───────────────────────────────────────────────────── */
.mode-bar {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
}
.mode-group { display: flex; align-items: center; gap: 10px; }
.mode-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-dim); text-transform: uppercase;
}
.pill-row { display: flex; gap: 4px; background: var(--bg); border-radius: 9px; padding: 3px; }
.pill {
  border: none; background: none; color: var(--text-dim); cursor: pointer;
  padding: 6px 14px; border-radius: 7px; font: 600 .84rem var(--font);
  transition: background .13s, color .13s;
}
.pill:hover { color: var(--text); }
.pill.active { background: var(--accent); color: #05222a; box-shadow: 0 0 12px var(--accent-lo); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Canvas ─────────────────────────────────────────────────────── */
.canvas-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; overflow-x: clip; margin-bottom: 10px;
  /* Stacked, the sliders are BELOW the picture, so the picture has to leave
     them room on screen. Side by side it can have more of the height. */
  --cv-maxh: 58vh;
  /* The cap is on the CARD, not on the canvas inside it: the overlays are
     positioned against the card, so capping only the canvas left them
     floating on the card beside the picture (measured at 1024px: the view
     switcher sat at design x −126, entirely off the image). +14px for the
     card's own padding and border. */
  max-width: calc(var(--cv-maxh) / 0.6889 + 14px);
  /* width:100% is load-bearing — auto margins alone make a GRID ITEM
     shrink-to-fit, which collapsed the card to the width of the graph-tab
     row (740px column, 635px card) instead of filling and centring. */
  width: 100%; margin-left: auto; margin-right: auto;
}
/* The drawing is 900x620, so its height is 0.689 of its width and a wide
   column makes it enormous. Cap the HEIGHT and let that decide the width —
   the canvas element then still exactly bounds the drawing, which is what
   the pointer hit-tests divide by. */
#sim-canvas { width: 100%; display: block; border-radius: 8px; }

/* ── Canvas overlays: the view and graph switchers ──────────────── */
/* z-index 301, not 4: the site's home logo is position:fixed at the top-left
   of the VIEWPORT with z-index 300, so it lands on this corner of the canvas
   whenever the canvas is scrolled to the top of the screen — which is exactly
   when someone is studying the drawing. Opaque, because it now overlaps it. */
.cv-views {
  position: absolute; top: 8px; left: 8px; z-index: 301;
  display: flex; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 2px 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
/* Kept small on purpose: it floats over the drawing, and the stator ring
   starts 54 units down a 620-unit design space. */
.cv-views .gtab { padding: 5px 9px; font-size: .7rem; }
.cv-graphs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 4px 2px; margin-top: 2px;
  border-top: 1px solid var(--border);
}
.cv-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .09em;
  color: var(--text-dim); text-transform: uppercase; margin-right: 3px;
}
.stall-badge {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  background: rgba(255,85,85,.16); border: 1px solid var(--red); color: #ff8a80;
  padding: 5px 14px; border-radius: 8px; font-size: .78rem; font-weight: 700; z-index: 5;
}

/* In-canvas display controls — top RIGHT, clear of the canvas title strip */
.canvas-toggles {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  background: rgba(13,17,30,.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(139,157,195,.22); border-radius: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
}
.canvas-toggles > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px; padding: 6px 10px; white-space: nowrap;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text); border-radius: 9px; transition: background .12s, color .12s;
}
.canvas-toggles > summary::-webkit-details-marker { display: none; }
.canvas-toggles > summary::marker { content: ''; }
.canvas-toggles > summary:hover { background: var(--accent-lo); color: var(--accent); }
.canvas-toggles .cvt-ico { flex-shrink: 0; color: var(--accent); }
.canvas-toggles .cvt-caret { margin-left: auto; padding-left: 4px; color: var(--text-dim); font-size: .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,.18); border-radius: 9px 9px 0 0; }
.canvas-toggles .cvt-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 11px 9px; text-align: left; }
/* The checkbox is 15px but the LABEL is the target — a label forwards its
   click to a checkbox — so the row is what has to be comfortable. */
.canvas-toggles .cvt-item {
  display: flex; align-items: center; gap: 6px; font-size: .72rem; min-height: 24px;
  padding: 2px 3px; margin: 0 -3px; border-radius: 6px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: color .12s, background .12s;
}
.canvas-toggles .cvt-item:hover { background: var(--surface2); }
.canvas-toggles .cvt-item:hover { color: var(--text); }
.canvas-toggles .cvt-item input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0;
}

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

/* ── Graph tabs ─────────────────────────────────────────────────── */
.gtab {
  border: 1px solid transparent; background: none; color: var(--text-dim);
  padding: 4px 9px; border-radius: 7px; cursor: pointer;
  font: 600 .73rem var(--font); transition: all .13s;
}
.gtab:hover { color: var(--text); background: var(--surface2); }
.gtab.active { background: var(--accent); color: #05222a; }
.gtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-test.is-running {
  background: rgba(255,138,101,.18) !important; border-color: #ff8a65 !important;
  color: #ff8a65 !important; animation: testPulse 1.4s ease-in-out infinite;
}
@keyframes testPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,138,101,.45); }
                       50%     { box-shadow: 0 0 0 5px rgba(255,138,101,0); } }
@media (prefers-reduced-motion: reduce) { .tb-test.is-running { animation: none; } }

/* ── Control panel ──────────────────────────────────────────────── */
.sim-controls {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
/* Stacked by default; side by side once there is room for both, so a slider
   and the thing it moves are on screen together. */
.sim-split { display: block; }
@media (min-width: 1120px) {
  .sim-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 392px;
    gap: 12px; align-items: start;
  }
  .sim-split .canvas-card { margin-bottom: 0; --cv-maxh: 72vh; }
  .sim-split .sim-controls { margin-bottom: 0; }
  /* one column of sliders in a 392px rail */
  /* In a 392px rail a three-column row leaves the slider 90px of travel —
     the same squeeze as a phone, so use the same fix: label and stepper share
     a line, the slider gets its own full-width one. */
  .sim-split .sim-params { grid-template-columns: 1fr; gap: 12px 0; }
  .sim-split .sim-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'l p' 's s';
    gap: 6px 8px;
  }
  .sim-split .sim-row > label { grid-area: l; align-self: center; }
  .sim-split .sim-row > .sim-slider { grid-area: s; }
  .sim-split .sim-row > .stepper { grid-area: p; }
  .sim-split .readout-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* Workflow breadcrumb — a hint, not a control */
.lab-procedure { margin-bottom: 6px; }
.lab-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.lab-step {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; color: var(--text-dim);
}
.lab-step:not(:last-child)::after { content: '\203a'; margin-left: 3px; color: #3a4260; font-size: .82rem; }
.lab-step-num {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--surface2); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font: 700 .58rem var(--mono);
}
.lab-step.active { color: var(--text); font-weight: 600; }
.lab-step.active .lab-step-num { background: var(--accent); color: #05222a; }
.lab-step.done .lab-step-num { background: var(--green); color: #0d1117; }
@media (max-width: 768px) { .lab-procedure { display: none; } }

/* Toolbar — one line */
/* One line. Everything is sized to fit rather than allowed to wrap, and the
   machine picker is the only elastic item so it absorbs the slack. */
.sim-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  padding: 7px 9px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px; overflow-x: auto;
}
/* Hairline between the actions and the pickers — cheaper than a gap, and it
   tells the eye the row has two halves. */
.tb-sep { flex: none; width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
.sim-toolbar button {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; flex: none;
  border-radius: 8px; font: 700 .74rem var(--font); padding: 0 9px; height: 34px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  white-space: nowrap; transition: all .13s;
}
.sim-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.tb-sm { display: none; }
.sim-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-play { background: rgba(255,85,85,.14) !important; border-color: rgba(255,85,85,.5) !important; color: #ff8a80 !important; }
.tb-test { background: rgba(0,188,212,.16) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.tb-calc { background: var(--accent) !important; border-color: var(--accent) !important; color: #05222a !important; }
/* The <select> FILLS the field and the caption floats over it. A label
   wrapping a select does not forward a click to the popup the way it does for
   a checkbox, so whatever the select does not physically cover is dead: with
   the caption in the flow the control was a 15px strip and you had to hit the
   text itself. */
.tb-field {
  position: relative; flex: 0 1 auto; min-width: 0; height: 34px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface2);
  cursor: pointer;
}
/* appearance:none removes the native arrow, so draw one back — a select with
   no affordance reads as a static label. */
.tb-field::after {
  content: ''; position: absolute; right: 7px; top: 50%; width: 6px; height: 6px;
  margin-top: -4px; border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim); transform: rotate(45deg); pointer-events: none;
}
.tb-field:hover { border-color: var(--accent); }
.tb-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lo); }
/* The machine names are the longest strings in the row, so that picker takes
   the larger share of the slack; the other two only ever hold short labels. */
.tb-field.tb-mach { flex: 2 1 230px; }
.tb-field.tb-cond { flex: 1 1 150px; max-width: 215px; }
.tb-field.tb-conn { flex: 0 1 96px; }
.tb-field > span {
  position: absolute; left: 8px; top: 5px; z-index: 1; pointer-events: none;
  font-size: .52rem; font-weight: 700; letter-spacing: .09em; line-height: 1;
  color: var(--text-dim); text-transform: uppercase; white-space: nowrap;
}
.tb-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; color: var(--text); border: 0;
  padding: 13px 18px 0 7px; margin: 0;
  font: 600 .74rem var(--font); line-height: 1.1;
  cursor: pointer; min-width: 0; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis;
}
.tb-select:focus { outline: none; }

/* Parameter grid: label | slider | stepper */
/* Two columns, not three: with a 110px label and a 178px stepper a third
   column left the slider only ~70px of travel, which was most of the dead
   space in this panel. */
.sim-params {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 9px 22px;
}
.sim-row {
  display: grid; grid-template-columns: 92px minmax(90px, 1fr) auto;
  align-items: center; gap: 10px;
}
.sim-row > label { font-size: .78rem; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.sim-row > label b { color: var(--text); font-weight: 700; }
/* The filled portion IS the reading — a flat track tells you nothing about
   where in its range the value sits. --pct is written by syncControls(). */
/* The bar is 6px but the INPUT is 24px: painting the fill on the element's
   own background made the element the same 6px as the bar, so the grab area
   was 6px tall. The fill moves to the track pseudo-element and the input
   keeps a real height. */
.sim-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 24px;
  background: transparent; border: 0; padding: 0; cursor: pointer; outline: none;
}
.sim-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(to right,
      var(--accent) 0%, var(--accent) var(--pct, 50%),
      rgba(255,255,255,.11) var(--pct, 50%), rgba(255,255,255,.11) 100%);
}
.sim-slider::-moz-range-track {
  height: 6px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(to right,
      var(--accent) 0%, var(--accent) var(--pct, 50%),
      rgba(255,255,255,.11) var(--pct, 50%), rgba(255,255,255,.11) 100%);
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 0 7px var(--accent-lo); cursor: pointer;
  margin-top: -5.5px;                 /* centre on a 6px track + 1px border */
}
.sim-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: 0 0 7px var(--accent-lo); cursor: pointer;
}
.sim-slider:focus-visible::-webkit-slider-runnable-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.sim-slider:focus-visible::-moz-range-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.sim-slider:disabled { opacity: .4; cursor: not-allowed; }
.stepper {
  display: grid; grid-template-columns: 26px 4.4em 26px auto;
  align-items: center; gap: 3px;
}
.stepper button {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  border-radius: 6px; cursor: pointer; font: 700 .9rem var(--font); padding: 0; line-height: 1;
}
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper input {
  height: 26px; width: 100%; text-align: center; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  font: 700 .8rem var(--mono); padding: 0 2px;
}
.stepper input:focus { outline: 1px solid var(--accent); }
.stepper .unit { font-size: .7rem; color: var(--text-dim); font-weight: 600;
  padding-left: 3px; min-width: 2.6em; white-space: nowrap; }

/* ── Readouts ───────────────────────────────────────────────────── */
.readout-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px; margin-top: 14px;
}
.readout {
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; text-align: center;
}
.readout-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .07em;
  color: var(--text-dim); text-transform: uppercase; display: block; margin-bottom: 3px;
}
.readout-val { font: 700 1.02rem var(--mono); color: var(--accent); }
.readout-val .u { font-size: .68rem; color: var(--text-dim); margin-left: 2px; font-weight: 600; }
.readout.r-green .readout-val { color: var(--green); }
.readout.r-gold  .readout-val { color: var(--gold); }
.readout.r-red   .readout-val { color: var(--red); }

.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.mini-btn {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  border-radius: 8px; padding: 7px 13px; font: 600 .78rem var(--font); cursor: pointer;
  transition: all .13s;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-btn.is-primary {
  background: var(--accent); border-color: var(--accent); color: #05222a; font-weight: 700;
}
.mini-btn.is-primary:hover { color: #05222a; filter: brightness(1.08); }

.export-note { margin-left: auto; font-size: .72rem; color: var(--text-dim); }

/* ── Explore ────────────────────────────────────────────────────── */
.explore-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.explore-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.explore-tab {
  border: 1px solid var(--border); background: var(--bg); color: var(--text-dim);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font: 600 .8rem var(--font);
  transition: all .13s;
}
.explore-tab:hover { color: var(--text); }
.explore-tab.active { background: var(--accent); color: #05222a; border-color: var(--accent); }
.explore-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.ex-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.ex-card h3 { font-size: .95rem; color: var(--accent); margin-bottom: 8px; }
.ex-card p { font-size: .85rem; line-height: 1.6; color: var(--text-dim); }
.ex-card p + p { margin-top: 8px; }
.ex-formula {
  display: block; margin: 10px 0; padding: 9px 12px; background: var(--surface2);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  font: 600 .84rem var(--mono); color: var(--text); overflow-x: auto;
}
.ex-note {
  display: block; margin-top: 10px; padding: 8px 11px; background: var(--accent-lo);
  border-radius: 6px; font-size: .78rem; color: var(--text); line-height: 1.5;
}
.ex-canvas { width: 100%; border-radius: 8px; background: var(--surface2); margin-bottom: 10px; display: block; }

/* ── Practice & Quiz ────────────────────────────────────────────── */
.practice-panel, .quiz-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.practice-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.practice-head h2 { font-size: 1.05rem; color: var(--accent); }
.practice-score { font: 700 .82rem var(--mono); color: var(--text-dim); }
.practice-body { font-size: .9rem; line-height: 1.65; }
.prompt-box {
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 12px 14px; margin-bottom: 12px; line-height: 1.6;
}
.answer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.answer-row input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; font: 700 .9rem var(--mono); width: 150px;
}
.answer-row input:focus { outline: 2px solid var(--accent); }
.answer-unit { font-size: .82rem; color: var(--text-dim); font-weight: 600; }
.practice-actions { display: flex; gap: 8px; margin-top: 14px; }
.fb { margin-top: 12px; padding: 11px 13px; border-radius: 8px; font-size: .85rem; line-height: 1.6; }
.fb.good { background: rgba(61,220,132,.12); border: 1px solid rgba(61,220,132,.4); color: var(--green); }
.fb.bad  { background: rgba(255,85,85,.12);  border: 1px solid rgba(255,85,85,.4);  color: #ff8a80; }
.fb .work { display: block; margin-top: 7px; color: var(--text-dim); font-family: var(--mono); font-size: .78rem; }

.quiz-q { font-size: .95rem; line-height: 1.6; margin-bottom: 14px; }
.quiz-progress { font: 700 .75rem var(--mono); color: var(--text-dim); margin-bottom: 10px; }
.answer-grid { display: grid; gap: 8px; }
.answer-btn {
  text-align: left; padding: 11px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: 500 .87rem var(--font); line-height: 1.5; transition: all .13s;
}
.answer-btn:hover { border-color: var(--accent); background: var(--surface2); }
.answer-btn.correct { border-color: var(--green); background: rgba(61,220,132,.14); color: var(--green); }
.answer-btn.wrong   { border-color: var(--red);   background: rgba(255,85,85,.14);  color: #ff8a80; }
.answer-btn:disabled { cursor: default; }
.quiz-result { text-align: center; padding: 20px 10px; }
.quiz-stars { font-size: 1.7rem; letter-spacing: 4px; color: var(--gold); margin: 10px 0; }

/* ── Learn panels ───────────────────────────────────────────────── */
.learn-panels {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin: 14px 0;
}
.learn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.learn-head h2 { font-size: 1rem; color: var(--accent); }
.learn-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.learn-card > summary {
  cursor: pointer; padding: 11px 14px; font: 700 .87rem var(--font); color: var(--text);
  display: flex; align-items: center; gap: 9px; list-style: none;
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary em { color: var(--text-dim); font-weight: 400; font-size: .78rem; font-style: normal; }
.learn-ico {
  width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--accent-lo);
  color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.learn-body { padding: 4px 14px 14px; font-size: .86rem; line-height: 1.7; color: var(--text-dim); overflow-x: auto; }
.eq-line { margin: 10px 0; color: var(--text); }
.loss-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 8px; }
.loss-table th, .loss-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.loss-table th { color: var(--text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.loss-table td:last-child, .loss-table th:last-child { text-align: right; font-family: var(--mono); }
.coach-item { display: flex; gap: 9px; margin: 9px 0; align-items: flex-start; }
.coach-icon { flex: none; font-size: .95rem; }

/* ── Modals ─────────────────────────────────────────────────────── */
.auto-modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(5,8,15,.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.auto-modal-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; max-width: 720px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.auto-modal-box.calc-box { max-width: 860px; }
.auto-modal-title { font-size: 1.06rem; color: var(--accent); margin-bottom: 14px; }
.auto-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.proc-list { display: grid; gap: 9px; }
.proc-card {
  text-align: left; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 13px 15px; cursor: pointer; transition: all .13s; width: 100%;
}
.proc-card:hover { border-color: var(--accent); background: var(--surface2); }
.proc-name { font: 700 .9rem var(--font); color: var(--text); margin-bottom: 4px; }
.proc-desc { font-size: .79rem; color: var(--text-dim); line-height: 1.55; }
.proc-meta { font: 600 .7rem var(--mono); color: var(--accent); margin-top: 6px; }
.proc-card:disabled { opacity: .45; cursor: not-allowed; }
.proc-card:disabled:hover { border-color: var(--border); background: var(--bg); }
.calc-body { font-size: .86rem; line-height: 1.7; color: var(--text-dim); }
.calc-body h4 { color: var(--accent); font-size: .88rem; margin: 14px 0 6px; }
.calc-body table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: 8px 0; }
.calc-body th, .calc-body td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.calc-body td:last-child, .calc-body th:last-child { text-align: right; font-family: var(--mono); }

/* ── Article tables ─────────────────────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .84rem;
  display: block; overflow-x: auto; white-space: nowrap;
}
.data-table caption {
  caption-side: top; text-align: left; color: var(--text-dim);
  font-size: .78rem; font-style: italic; padding-bottom: 8px; white-space: normal;
}
.data-table th, .data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table thead th {
  color: var(--accent); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; border-bottom: 2px solid var(--border);
}
.data-table tbody tr:hover { background: var(--surface2); }
.eq-block {
  background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 11px 15px; margin: 14px 0; overflow-x: auto;
}
.eq-block code { font: 600 .9rem var(--mono); color: var(--text); }
.seo-article kbd, .user-guide kbd {
  background: var(--surface2); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font: 600 .78rem var(--mono); color: var(--text);
}

.tb-diag { background: rgba(179,157,219,.16) !important; border-color: #b39ddb !important; color: #b39ddb !important; }
/* A finished test is the only moment the report has anything new to say, so
   the button asks for attention then — and stops the moment the user does
   anything at all, so it never nags. */
.tb-report.is-ready {
  background: rgba(255,213,79,.16) !important; border-color: #ffd54f !important; color: #ffd54f !important;
  animation: reportReady 1.15s ease-in-out infinite;
}
@keyframes reportReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,79,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(255,213,79,0); }
}
@media (prefers-reduced-motion: reduce) { .tb-report.is-ready { animation: none; } }
.tb-field.cond-faulty { border-color: #ff8a65; }
.tb-field.cond-faulty::after { border-color: #ff8a65; }
.cond-faulty .tb-select, .cond-faulty > span { color: #ff8a65; }

/* ── Responsive ─────────────────────────────────────────────────── */
/* Too narrow for one line: break deterministically at the divider so the
   actions keep row one and the three pickers share row two evenly. Letting
   flex wrap where it likes strands one picker alone and it stretches. */
@media (max-width: 1300px) {
  .sim-toolbar { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .tb-sep { display: none; }
  .tb-break { display: block; flex: 1 0 100%; width: auto; height: 0; margin: 0; background: none; }
  .tb-field.tb-mach { flex: 2 1 240px; }
  .tb-field.tb-cond { flex: 1 1 180px; max-width: none; }
  .tb-field.tb-conn { flex: 0 1 132px; }
}
@media (max-width: 768px) {
  #app { padding: 0 12px 40px; }
  .sim-params { grid-template-columns: 1fr; }
  /* On a phone a three-column row leaves the slider ~77px of travel. Give it
     its own full-width line, with the label and stepper sharing the one above. */
  .sim-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'l p' 's s';
    gap: 6px 8px;
  }
  .sim-row > label { grid-area: l; font-size: .76rem; align-self: center; }
  .sim-row > .sim-slider { grid-area: s; }
  .sim-row > .stepper { grid-area: p; }
  .stepper { grid-template-columns: 24px 3.6em 24px auto; }
  .stepper button { width: 24px; height: 24px; }
  .stepper input { height: 24px; font-size: .74rem; }
  /* Three pills plus their caption are wider than a 375px phone, and the row
     was pushing the whole page sideways. Let it wrap instead. */
  .mode-group { flex-wrap: wrap; gap: 6px 10px; }
  .pill-row { flex-wrap: wrap; }
  .pill { padding: 6px 11px; font-size: .8rem; }
  /* On a phone the canvas is ~300px wide, so a 32px overlay is 100 units tall
     in the 620-unit design space — it would sit on the stator. Put the view
     switcher back in the flow there; drawTopStrip tests for that. */
  .cv-views {
    position: static; background: none; border: 0; backdrop-filter: none;
    padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  }
  .sim-toolbar { flex-wrap: wrap; }
  /* "Calculations" is the one label long enough to push Report onto a fourth
     row all by itself, so it abbreviates and the four fit one line. */
  .sim-toolbar button { padding: 0 8px; font-size: .72rem; height: 32px; }
  .tb-lg { display: none; }
  .tb-sm { display: inline; }
  /* Machine names are long, so that one keeps the full width; the two short
     pickers pair up rather than each eating a whole line. */
  .tb-field { height: 32px; max-width: none; }
  .tb-field > span { top: 4px; }
  .tb-select { padding-top: 12px; }
  .tb-field.tb-mach { flex: 1 1 100%; }
  .tb-field.tb-conn, .tb-field.tb-cond { flex: 1 1 calc(50% - 3px); }
  /* Trimmed chip: still comfortably tappable, but it no longer dominates a
     narrow canvas the way a 44px square did. */
  .canvas-toggles > summary { padding: 0; gap: 0; min-width: 36px; min-height: 36px; justify-content: center; }
  .canvas-toggles > summary .cvt-title, .canvas-toggles > summary .cvt-caret { display: none; }
  .canvas-toggles .cvt-ico { width: 15px; height: 15px; }
  .canvas-toggles { top: 6px; right: 6px; }
  .export-note { margin-left: 0; width: 100%; }
  .readout-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }