/* Thermocouple Simulator — tool styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d1117; --surface: #161b27; --surface2: #1f2535; --border: #2a3050;
  --accent: #ff5722; --accent-lo: rgba(255, 87, 34, .22);
  --green: #3ddc84; --red: #ff5555; --gold: #f5c842;
  --text: #dde3f0; --text-dim: #6b7a99;
  --font: 'Segoe UI', system-ui, sans-serif; --mono: 'Courier New', monospace;
  --radius: 12px;
}

/* ── Page shell ──────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; padding: 0 16px; }
#app { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

header { text-align: center; padding: 4px 0; }
header h1 {
  font-size: 1.8rem; font-weight: 700;
  background: linear-gradient(120deg, #bf360c 0%, #ff5722 50%, #ffb74d 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.subtitle { color: var(--text-dim); font-size: .85rem; margin-top: 3px; }

/* ── Controls bar / pill tabs ────────────────────────────────────── */
.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: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; }

.pill-tabs { display: flex; flex-wrap: wrap; background: var(--bg); border-radius: 8px; padding: 3px; gap: 2px; }
.pill {
  padding: 7px 13px; border: none; background: transparent; color: var(--text-dim);
  border-radius: 6px; cursor: pointer; font-size: .81rem; font-family: var(--font);
  min-height: 34px; 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); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-guide {
  margin-left: auto; padding: 8px 16px; border: none; border-radius: 8px;
  cursor: pointer; font-size: .82rem; font-weight: 700;
  background: var(--gold); color: #1a1a2e; text-decoration: none;
  transition: filter .18s;
}
.btn-guide:hover { filter: brightness(1.08); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
  font-size: .84rem; font-weight: 600; font-family: var(--font); min-height: 36px;
  transition: filter .18s, box-shadow .18s, opacity .18s, background .18s;
}
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.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); }
.canvas-action-bar .btn { padding: 7px 14px; font-size: .78rem; min-height: 36px; }

/* ── 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: 7px 12px;
  border-radius: 8px; font-size: .82rem; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--surface2); color: var(--text); border: 1.5px solid var(--border);
  white-space: nowrap; min-height: 36px;
  transition: border-color .18s, background .18s, color .18s;
}
.btn-link:hover { border-color: var(--accent); background: var(--accent-lo); 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: 7px 9px; } }

/* ── Canvas card ─────────────────────────────────────────────────── */
.canvas-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: clip;
  margin-bottom: 14px;
}
#sim-canvas {
  display: block; width: 100%;
  border-radius: 8px;
  touch-action: none;
  background: #0b0f19;
}


/* ── Readout badges ──────────────────────────────────────────────── */
.readout-badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;
}
.readout-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; font-size: .78rem; color: var(--text-dim);
}
.readout-badge strong { font-family: var(--mono); color: var(--text); font-size: .84rem; }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Action bar ──────────────────────────────────────────────────── */
.canvas-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(139, 157, 195, .14);
}
.ab-sep { width: 1px; height: 20px; background: var(--border); }
.ab-sep-push { margin-left: auto; background: transparent; }
.btn-open.on {
  background: rgba(255, 85, 85, .18) !important;
  border-color: var(--red) !important; color: #ffb3b3 !important;
}
.btn-calc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: var(--accent-lo); border: 1px solid var(--accent);
  color: #ffd0bd; font-size: .8rem; font-weight: 600; font-family: var(--font);
  transition: background .15s, color .15s;
}
.btn-calc:hover { background: var(--accent); color: #fff; }

/* ── Simulator controls (compact) ────────────────────────────────
   Every control row is a 3-column grid — label | track | stepper — so
   nothing wraps onto a second line at desktop widths and the whole panel
   stays roughly one screen tall.                                       */
.sim-controls {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 12px; margin-bottom: 14px;
}
.preset-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.preset-chip {
  padding: 4px 10px; border-radius: 14px; cursor: pointer; min-height: 28px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .72rem; font-family: var(--font);
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.preset-chip:hover { background: var(--accent-lo); color: var(--text); border-color: var(--accent); }

.sim-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px 16px; margin-bottom: 8px;
}
.sim-slider-group {
  display: grid; grid-template-columns: minmax(78px, auto) 1fr auto;
  align-items: center; gap: 8px;
}
.sim-slider-label {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: .74rem; color: var(--text-dim); line-height: 1.2;
}
.sim-unit-badge {
  font-size: .62rem; padding: 1px 5px; border-radius: 7px;
  background: var(--accent-lo); color: var(--accent); font-weight: 700; white-space: nowrap;
}

.sim-slider {
  width: 100%; min-width: 60px;
  -webkit-appearance: none; appearance: none; height: 5px;
  background: rgba(255, 255, 255, .12); border-radius: 3px; outline: none;
  border: 1px solid rgba(255, 255, 255, .1);
}
.sim-slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent-lo), rgba(255, 255, 255, .12));
}
.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; 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);
}
.sim-slider::-moz-range-track {
  height: 5px; border-radius: 3px; border: none;
  background: linear-gradient(to right, var(--accent-lo), rgba(255, 255, 255, .12));
}
.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;
}
.sim-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.stepper {
  display: flex; align-items: center; gap: 0;
  width: 118px; flex-shrink: 0; height: 30px;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  background: var(--bg);
}
.step-btn {
  width: 28px; height: 28px; border: none; background: var(--surface2);
  color: var(--text-dim); font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.step-btn:hover { background: var(--accent-lo); color: var(--text); }
.step-btn:active { background: var(--accent); color: #fff; }
.step-input {
  flex: 1; width: 100%; min-width: 32px;
  border: none; background: transparent; color: var(--accent);
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  text-align: center; padding: 2px; outline: none;
  height: 100%; -moz-appearance: textfield;
}
.step-input::-webkit-outer-spin-button,
.step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.metal-select {
  width: 100%; height: 30px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 0 8px; font-family: var(--font); font-size: .78rem; cursor: pointer;
}
.metal-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sub-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: .74rem; color: var(--text-dim);
}
.sub-row .pill { padding: 5px 11px; min-height: 28px; font-size: .76rem; }
.sub-row select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 8px; font-family: var(--font); font-size: .76rem;
  min-height: 28px; cursor: pointer;
}
.sub-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Readout cards (compact) ─────────────────────────────────────── */
.readout-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 6px; margin-top: 10px;
}
.readout-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px; min-width: 0;
}
.readout-label {
  font-size: .62rem; color: var(--text-dim); margin-bottom: 2px;
  letter-spacing: .01em; line-height: 1.25; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.readout-val {
  font-family: var(--mono); font-size: .88rem; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.readout-val-sm { font-size: .76rem; }
/* The two carrier-direction cards carry the longest labels and the most
   important content, so give them a double-width column. */
.readout-wide { grid-column: span 2; }
@media (max-width: 500px) { .readout-wide { grid-column: span 2; } }
.readout-unit { font-size: .62rem; color: var(--text-dim); }

/* ── Learning panels ─────────────────────────────────────────────── */
.learn-panels {
  margin-bottom: 14px; padding: 14px;
  background: linear-gradient(180deg, rgba(30, 38, 66, .6), rgba(20, 26, 46, .6));
  border: 1px solid rgba(139, 157, 195, .2); border-radius: 12px;
}
.learn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 157, 195, .18); margin-bottom: 12px;
}
.learn-head-title { font-size: .95rem; font-weight: 700; color: #e1e7f3; }
.learn-head-actions { display: flex; gap: 8px; }
.learn-toggle-all {
  padding: 5px 12px; background: var(--accent-lo);
  border: 1px solid rgba(255, 87, 34, .45); color: #ffbfa8;
  border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer;
  font-family: var(--font); transition: background .15s, color .15s;
}
.learn-toggle-all:hover { background: var(--accent); color: #fff; }
.learn-toggle-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.learn-card {
  border: 1px solid rgba(139, 157, 195, .18); border-radius: 10px;
  background: rgba(13, 17, 30, .55); margin-bottom: 10px; overflow: hidden;
}
.learn-card:last-child { margin-bottom: 0; }
.learn-card[open] { border-color: rgba(255, 87, 34, .38); }
.learn-card > summary {
  list-style: none; cursor: pointer; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .88rem; font-weight: 700; color: #e1e7f3;
  user-select: none; transition: background .15s;
}
.learn-card > summary::-webkit-details-marker { display: none; }
.learn-card > summary::marker { content: ''; }
.learn-card > summary:hover { background: rgba(255, 87, 34, .08); }
.learn-card > summary::after {
  content: '\25BE'; margin-left: auto; color: #8b9dc3; font-size: .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: .9rem; flex-shrink: 0;
}
.lp-sub { color: #8b9dc3; font-weight: 500; font-size: .78rem; }
.learn-body { padding: 12px 14px 14px; font-size: .85rem; line-height: 1.6; color: var(--text); }
.eq-note { color: var(--text-dim); font-size: .8rem; margin: 8px 0; line-height: 1.55; }
.coach-list { margin: 0; padding-left: 18px; }
.coach-list li { margin-bottom: 9px; line-height: 1.6; }
.coach-list li:last-child { margin-bottom: 0; }

.mini-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.mini-table th, .mini-table td {
  padding: 5px 8px; text-align: right; border-bottom: 1px solid rgba(139, 157, 195, .14);
}
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table thead th { color: var(--text-dim); font-weight: 600; font-size: .72rem; }
.mini-table td { font-family: var(--mono); }
.mini-table tr.mt-active { background: var(--accent-lo); }
.mini-table tr.mt-active td { color: #ffd0bd; }

/* ── Reference tables mode ───────────────────────────────────────── */
.tables-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 14px;
}
.tbl-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.tbl-controls label { font-size: .8rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.tbl-controls select, .tbl-controls input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-family: var(--font); font-size: .8rem; min-height: 36px;
}
.tbl-scroll { overflow-x: auto; max-width: 100%; }
.ref-table { border-collapse: collapse; font-size: .76rem; width: 100%; min-width: 620px; }
.ref-table th, .ref-table td {
  padding: 5px 7px; text-align: right; border: 1px solid rgba(139, 157, 195, .13);
  font-family: var(--mono); white-space: nowrap;
}
.ref-table thead th {
  background: var(--surface2); color: var(--accent);
  font-weight: 700; position: sticky; top: 0;
}
.ref-table tbody th { background: var(--surface2); color: var(--text); font-weight: 700; }
.ref-table td { color: var(--text); }
.tbl-note { font-size: .78rem; color: var(--text-dim); margin-top: 10px; line-height: 1.6; }

/* ── Explore ─────────────────────────────────────────────────────── */
.item-selector {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 12px;
}
.is-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.is-item {
  padding: 8px 13px; border-radius: 8px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .8rem; font-family: var(--font);
  transition: background .15s, color .15s, border-color .15s;
}
.is-item:hover { background: var(--accent-lo); color: var(--text); }
.is-item.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.item-info {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.ii-title { font-size: 1.05rem; color: var(--accent); margin-bottom: 9px; }
.ii-body { font-size: .88rem; line-height: 1.72; color: var(--text); }
.ii-formula {
  margin-top: 12px; padding: 10px 13px;
  background: var(--bg); border-left: 3px solid var(--accent); border-radius: 5px;
  font-family: var(--mono); font-size: .88rem; color: var(--gold); overflow-x: auto;
}
.ii-note {
  margin-top: 12px; padding: 10px 13px;
  background: rgba(61, 220, 132, .07); border-left: 3px solid var(--green);
  border-radius: 5px; font-size: .82rem; line-height: 1.62; color: var(--text);
}

/* ── Practice ────────────────────────────────────────────────────── */
.practice-panel, .question-panel, .quiz-result {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.pp-prompt { font-size: .92rem; line-height: 1.68; margin-bottom: 14px; color: var(--text); }
.pp-input-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.pp-input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--mono); font-size: .92rem;
  padding: 9px 12px; min-height: 40px; width: 150px;
}
.pp-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-unit { font-size: .82rem; color: var(--text-dim); font-family: var(--mono); }
.pp-bottom { margin-top: 12px; }
.feedback { font-size: .85rem; font-weight: 600; }
.feedback.ok { color: var(--green); }
.feedback.bad { color: var(--red); }
.solution-panel {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg); border-left: 3px solid var(--gold);
  border-radius: 5px; font-size: .84rem; line-height: 1.68; color: var(--text);
}
.practice-bar, .quiz-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.pbar-score { font-family: var(--mono); font-size: .85rem; color: var(--accent); font-weight: 700; }
.qbar-counter { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: .88rem; }
.qbar-q-label { color: var(--text-dim); }
.qbar-q-num { color: var(--accent); font-weight: 700; }
.qbar-q-sep, .qbar-q-total { color: var(--text-dim); }

/* ── Quiz ────────────────────────────────────────────────────────── */
.qz-q { font-size: .95rem; line-height: 1.65; margin-bottom: 14px; color: var(--text); }
.qz-opts { display: flex; flex-direction: column; gap: 8px; }
.qz-opt {
  text-align: left; padding: 11px 14px; border-radius: 9px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: .86rem; font-family: var(--font);
  transition: background .15s, border-color .15s; min-height: 42px;
}
.qz-opt:hover:not(:disabled) { background: var(--accent-lo); border-color: var(--accent); }
.qz-opt:disabled { cursor: default; }
.qz-opt.correct { background: rgba(61, 220, 132, .16); border-color: var(--green); color: #bff7d8; }
.qz-opt.wrong { background: rgba(255, 85, 85, .16); border-color: var(--red); color: #ffc9c9; }
.qz-exp {
  margin-top: 13px; padding: 12px 14px;
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 5px; font-size: .84rem; line-height: 1.68; color: var(--text);
}
.qz-actions { margin-top: 14px; }
.quiz-result { text-align: center; }
.qr-stars { font-size: 2rem; color: var(--gold); letter-spacing: 4px; }
.qr-score { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--accent); margin: 8px 0; }
.qr-msg { font-size: .88rem; color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }

/* ── Calc modal ──────────────────────────────────────────────────── */
.calc-modal {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(5, 8, 15, .78); padding: 20px;
  overflow-y: auto; align-items: flex-start; justify-content: center;
}
.calc-modal.open { display: flex; }
.calc-modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; max-width: 720px; width: 100%; margin: auto;
}
.calc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.calc-modal-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.calc-modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 6px;
}
.calc-modal-close:hover { color: var(--accent); }
.calc-modal-body { padding: 16px; font-size: .86rem; line-height: 1.7; color: var(--text); }
.calc-modal-body h4 { margin: 16px 0 7px; color: var(--accent); font-size: .88rem; }
.calc-modal-body h4:first-child { margin-top: 0; }
.calc-modal-body p { margin-bottom: 8px; }

/* ── Context menu ────────────────────────────────────────────────── */
.ctx-menu {
  position: absolute; z-index: 100; min-width: 165px;
  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-size: .82rem;
  text-align: left; cursor: pointer; font-family: var(--font); transition: background .12s;
}
.ctx-item:hover { background: var(--accent-lo); color: var(--accent); }
.ctx-sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }

/* ── Colour-code legend ──────────────────────────────────────────── */
.wire-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; font-size: .76rem; color: var(--text-dim); }
.wl-item { display: inline-flex; align-items: center; gap: 6px; }
.wl-sw { width: 20px; height: 10px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .25); }

/* ── SEO tables ──────────────────────────────────────────────────── */
.seo-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 12px 0; }
.seo-table th, .seo-table td {
  padding: 8px 11px; text-align: left; border: 1px solid var(--border);
}
.seo-table thead th { background: var(--surface2); color: var(--accent); font-weight: 700; }
.seo-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sim-row { grid-template-columns: 1fr; }
  .readout-row { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .readout-row { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  .learn-panels { padding: 11px; }
  .learn-card > summary { padding: 10px 12px; font-size: .83rem; }
  .lp-sub { display: none; }
  .sim-slider-label { min-width: 100px; }
  .stepper { min-width: 130px; }
}

@media (max-width: 500px) {
  .canvas-card, .sim-controls, .tables-wrap { padding: 10px; }
  .readout-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .readout-val { font-size: .9rem; }
  .canvas-action-bar { gap: 6px; }
  .ab-sep { display: none; }
  .ab-sep-push { display: block; width: 100%; height: 0; margin: 0; }
  .sim-slider-group { grid-template-columns: 1fr auto; gap: 6px 8px; }
  .sim-slider-label { grid-column: 1 / -1; }
  /* Compact is for pointers; touch targets go back up on small screens. */
  .stepper { width: 118px; height: 34px; }
  .step-btn { width: 34px; height: 34px; }
  .metal-select { height: 34px; }
  .preset-chip { min-height: 30px; }
  .preset-chip { font-size: .69rem; padding: 4px 9px; min-height: 28px; }
  .qr-stars { font-size: 1.6rem; }
  .pp-input { width: 100%; }
  .learn-head-title { font-size: .85rem; }
  .learn-toggle-all { padding: 4px 10px; font-size: .72rem; }
  .calc-modal { padding: 10px; }
}

/* ── Graph mode ──────────────────────────────────────────────────── */
#graph-canvas {
  display: block; width: 100%;
  border-radius: 8px; touch-action: none; background: #0b0f19;
}
.graph-hint {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(139, 157, 195, .14);
  font-size: .8rem; line-height: 1.65; color: var(--text-dim);
}
.graph-hint strong { color: var(--text); }

/* ── Metal selectors ─────────────────────────────────────────────── */
.metal-select {
  flex: 1; min-width: 120px; height: 36px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-family: var(--font); font-size: .82rem; cursor: pointer;
}
.metal-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ── Simulate / pause button ─────────────────────────────────────── */
.btn-sim {
  background: var(--accent); color: #fff; font-weight: 700;
  min-width: 118px; border: 1px solid var(--accent);
}
.btn-sim:hover { filter: brightness(1.12); box-shadow: 0 0 12px var(--accent-lo); }
.btn-sim.running {
  background: rgba(61, 220, 132, .16); border-color: var(--green); color: #bff7d8;
}
.btn-sim.running:hover { background: rgba(61, 220, 132, .26); }

/* ── Canvas stage + Display Controls overlay ─────────────────────── */
.canvas-stage { position: relative; width: 100%; }

.canvas-toggles {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  background: rgba(13, 17, 30, .86);
  -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);
  max-width: calc(100% - 16px);
}
.canvas-toggles > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 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 > summary:focus-visible { outline: 2px solid var(--accent); 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: .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: 6px; padding: 9px 11px 10px; }
.canvas-toggles .cvt-item {
  display: flex; align-items: center; gap: 7px;
  font-size: .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;
}
.cvt-sep { height: 1px; background: rgba(139, 157, 195, .18); margin: 3px 0 1px; }
.cvt-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cvt-lbl { font-size: .68rem; color: var(--text-dim); white-space: nowrap; }
.cvt-seg { display: flex; gap: 2px; background: var(--bg); border-radius: 6px; padding: 2px; }
.cvt-seg button {
  border: none; background: transparent; color: var(--text-dim);
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  padding: 3px 7px; border-radius: 4px; cursor: pointer; min-height: 24px;
  transition: background .12s, color .12s;
}
.cvt-seg button:hover { color: var(--text); }
.cvt-seg button.on { background: var(--accent); color: #fff; }

/* ── Action bar, now the foot of the canvas card ─────────────────── */
.readout-badges { margin: 12px 0 0; }
.canvas-action-bar {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(139, 157, 195, .16);
}
.graph-hint { margin-top: 10px; }

@media (max-width: 560px) {
  .canvas-toggles { top: 6px; right: 6px; }
  .canvas-toggles > summary { padding: 6px 8px; font-size: .6rem; }
  .canvas-toggles .cvt-title { display: none; }
  .canvas-toggles[open] .cvt-title { display: inline; }
}

/* ── Touch sizing (last, so it wins the cascade) ──────────────────
   The compact desktop sizes are tuned for a pointer. On phones every
   tappable control goes back up to a comfortable target. */
@media (max-width: 560px) {
  .pill, .sub-row .pill { min-height: 34px; padding: 7px 12px; }
  .preset-chip { min-height: 34px; padding: 6px 11px; font-size: .72rem; }
  .cvt-seg button { min-height: 30px; padding: 5px 10px; }
  .cvt-item { padding: 2px 0; }
}


/* ── Phase 3: controls-bar compaction ──────────────────────────────
   These tools had 155–223 px of controls stacked above the simulator on a
   phone — area-calculator's bar was taller than its own canvas. The bar now
   packs: Mode takes row 1 and the remaining groups flow onto the rows below
   with the tool shortcuts pushed right. Labels shrink rather than disappear,
   so nothing loses its meaning. Desktop (>560px) is untouched. */
@media (max-width: 560px) {
  .controls-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 9px; }
  .ctrl-group { flex: 0 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
  .ctrl-group:first-of-type { flex: 1 1 100%; }          /* Mode row */
  .ctrl-group:first-of-type .pill-tabs { flex: 1 1 auto; }
  .ctrl-group:first-of-type .pill-tabs .pill { flex: 1 1 0; justify-content: center; padding: 5px 4px; }
  /* Flex line-breaking sizes each group by its MAX-CONTENT width, which is
     wider than the width it finally renders at — so two groups that visibly fit
     side by side were still each taking a whole row. A percentage basis makes
     the break decision on 40% instead, pairing them up. */
  .ctrl-group:not(:first-of-type) { flex: 1 1 40%; }
  .ctrl-group:not(:first-of-type) .pill-tabs { min-width: 0; flex-wrap: wrap; }
  .ctrl-group .pill { flex-shrink: 1; }
  .ctrl-label { font-size: 0.58rem; white-space: nowrap; }
  .lc-hint { display: none; }
  .pill-tabs { flex-wrap: wrap; padding: 2px; }
  .pill { padding: 5px 9px; font-size: 0.72rem; min-height: 32px; }
  .head-actions { flex: 0 0 auto; margin-left: auto; gap: 6px; }

  /* Every shortcut becomes an icon, User Guide included. */
  .btn-guide .lbl { display: none; }
  .btn-guide { padding: 6px 10px !important; font-size: 0.95rem !important; }

  /* Canvas toolbar collapses to its glyph where the tool has one. */
  .zoom-toggle .zt-lbl { display: none; }
  .zoom-toggle {
    width: 36px; height: 36px; padding: 0; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; border-radius: 9px;
  }
}

/* ═══ Mobile: collapse the canvas display-controls to an icon-only chip ═══
   On a short phone canvas the full "DISPLAY CONTROLS" bar sits across the top
   of the simulation and hides it. Below 768px the summary shrinks to a square
   icon button so the canvas stays readable; the label and caret come back the
   moment the panel is opened, because at that point the user has deliberately
   chosen to cover the canvas. The 44px minimum keeps the tap target within the
   project's touch-size rule. */
@media (max-width: 768px) {
  .canvas-toggles > summary {
    padding: 0; gap: 0;
    min-width: 44px; min-height: 44px;
    justify-content: center;
  }
  .canvas-toggles > summary .cvt-title,
  .canvas-toggles > summary .cvt-caret { display: none; }
  .canvas-toggles .cvt-ico { width: 18px; height: 18px; }

  .canvas-toggles[open] > summary {
    padding: 7px 10px; gap: 7px;
    min-height: 0; justify-content: flex-start;
  }
  .canvas-toggles[open] > summary .cvt-title { display: inline; }
  .canvas-toggles[open] > summary .cvt-caret { display: inline; margin-left: auto; padding-left: 4px; }
}