/* MuscleMap3D. Two themes, set on <html data-theme="light|dark"> (see the script in index.html). */
:root {
  --display: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --panel-w: 540px;
  --r: 2px;
}
:root[data-theme="dark"] {
  --bg: #141210;
  --stage: #141210;
  --stage-hi: #2d2924;
  --panel: #232019;
  --raised: #2d2924;
  --hover: #37322b;
  --line: #3a352d;
  --line-strong: #5a5247;
  --text: #ece6db;
  --muted: #a39b8c;
  --faint: #776f62;
  --accent: #e2745c;
  --primary: #ff5a4d;
  --secondary: #ffa94d;
  --ok: #5dc7a1;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f4f6;
  --stage: #e4e7ec;
  --stage-hi: #fbfcfd;
  --panel: #ffffff;
  --raised: #f4f5f7;
  --hover: #eceef2;
  --line: #e3e6eb;
  --line-strong: #c6cbd3;
  --text: #1b1e23;
  --muted: #5a6270;
  --faint: #8b92a0;
  --accent: #bf3b26;
  --primary: #c8321f;
  --secondary: #d4800f;
  --ok: #2e8a67;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow: hidden; overscroll-behavior: none; } /* the page itself never scrolls or pans: only the lists inside it do */
/* On an iPhone the browser's bottom bar floats over the page, and 100% / 100dvh stop where the bar starts, leaving an
   empty strip behind it. lvh is the full screen height (the page runs underneath the bar), so use it for the page, and
   give the scrolling list extra room at the bottom so its last row can be scrolled clear of the bar. */
@supports (height: 100lvh) {
  html, body, #app { height: 100lvh; }
}
body {
  background: var(--bg); color: var(--text);
  font: 14.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { display: grid; grid-template-columns: var(--panel-w) 1fr; height: 100%; }

/* ---------- side panel ---------- */
#panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border-right: 1px solid var(--line-strong); }

.brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; }
.brand h1 { margin: 0; font: 600 25px/1.1 var(--display); letter-spacing: -0.02em; }
.brand p { margin: 6px 0 0; color: var(--faint); font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* sliding light / dark switch: the ink-coloured knob sits under whichever icon is active */
.theme-switch {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 66px; height: 32px; margin-top: 2px; padding: 2px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: transparent; cursor: pointer;
}
.theme-switch:hover { border-color: var(--text); }
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: calc((100% - 4px) / 2); height: calc(100% - 4px); border-radius: 6px; background: var(--text);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.switch-icon { position: relative; z-index: 1; display: grid; place-items: center; color: var(--faint); transition: color .2s; }
.switch-icon svg { width: 16px; height: 16px; }
:root[data-theme="light"] .switch-icon.sun, :root[data-theme="dark"] .switch-icon.moon { color: var(--bg); }
:root[data-theme="dark"] .switch-knob { transform: translateX(100%); }

.search { position: relative; margin: 0 24px; }
.search > svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.search input {
  width: 100%; height: 40px; padding: 0 40px 0 36px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg); color: var(--text); font: inherit;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus { outline: none; border-color: var(--text); }
#search-hint {
  position: absolute; right: 9px; top: 50%; translate: 0 -50%; min-width: 20px; padding: 0 5px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--faint); font: 11px/17px var(--mono);
}
#search-clear {
  position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer;
}
#search-clear:hover { background: var(--hover); color: var(--text); }
#search-clear[hidden], #search-hint[hidden] { display: none; }

.tabs { display: flex; margin: 18px 24px 0; border-bottom: 1px solid var(--line-strong); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; white-space: nowrap; margin: 0 20px -1px 0; padding: 8px 0 9px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; font-weight: 500; font-size: 14px;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { margin-left: 5px; color: var(--faint); font: 400 12px var(--mono); }
.tabs.is-hidden { display: none; }

.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 20px 24px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

.credit { padding: 11px 24px 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; line-height: 1.55; }
.credit a { color: var(--muted); }

/* lists */
.group-title, .section-title {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 0 7px; background: var(--panel);
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.group-title { position: sticky; top: 0; z-index: 1; }
.group-title::after, .section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.group-title .dot { width: 7px; height: 7px; }
.section-title { color: var(--muted); }
.section-title .badge { order: 2; }
.section-title::after { order: 1; }

.row {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 8px 8px 10px; border: 0; border-left: 2px solid transparent;
  background: transparent; text-align: left; cursor: pointer;
}
.row + .row, .row-line + .row-line { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.row-line { display: flex; align-items: stretch; }
.row-line .row { flex: 1; min-width: 0; }
.add {
  flex: none; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border: 1px solid var(--line-strong);
  border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer;
}
.add svg { width: 15px; height: 15px; }
.add:hover { color: var(--text); border-color: var(--text); }
.add.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.row:hover { background: var(--hover); border-left-color: var(--accent); }
.row .dot { width: 7px; height: 7px; }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 14.5px; }
.badge { flex: none; background: none; padding: 0; color: var(--faint); font: 400 12px var(--mono); font-variant-numeric: tabular-nums; }
.tagline { flex: none; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tagline.muscle { color: var(--accent); }
.row.child { margin-left: 14px; width: calc(100% - 14px); padding-top: 6px; padding-bottom: 6px; border-left: 1px solid var(--line-strong); }
.row.child:hover { border-left: 2px solid var(--accent); }
.row.child .row-title { font-size: 13.5px; color: var(--muted); }
.row.child .dot { width: 5px; height: 5px; opacity: .75; }

.filter-label { display: flex; align-items: baseline; gap: 12px; padding: 14px 0 6px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.link { padding: 0; border: 0; background: transparent; color: var(--accent); font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link:hover { text-decoration-thickness: 2px; }
.result-count { padding: 14px 0 4px; color: var(--muted); font: 400 12px var(--mono); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--muted);
  font-size: 12.5px; cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

.empty { padding: 28px 4px; color: var(--muted); font-size: 14px; }
.empty b { color: var(--text); font-weight: 600; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: var(--c, var(--faint)); flex: none; }
.dot.primary { background: var(--primary); }
.dot.secondary { background: var(--secondary); }

/* detail view */
.back {
  display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 0 -4px; padding: 4px 8px 4px 4px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
}
.back:hover { color: var(--text); background: var(--hover); }
.back svg { width: 15px; height: 15px; }
.detail-head { padding: 14px 0 2px; }
.detail-head h2 { margin: 0 0 12px; font: 600 28px/1.12 var(--display); letter-spacing: -0.02em; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 6px 6px 0; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: transparent; color: var(--muted); font: 500 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.pill .dot { width: 7px; height: 7px; }
.pill.part-of { cursor: pointer; }
.pill.part-of:hover, .pill.equip:hover { color: var(--text); border-color: var(--text); }
.pill.equip { margin: 0; background: transparent; cursor: pointer; }
.equip-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.equip-line > span { margin-right: 4px; }
.desc { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.stats { display: flex; margin: 20px 0 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.stat { flex: 1; padding: 12px 0 11px; }
.stat + .stat { padding-left: 16px; border-left: 1px solid var(--line); }
.stat b { display: block; font: 600 30px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.stat span { display: block; margin-top: 5px; color: var(--muted); font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stat.primary b { color: var(--primary); }
.stat.secondary b { color: var(--secondary); }
.muscle-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.muscle-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: transparent; cursor: pointer; font-size: 13.5px;
}
.muscle-chip:hover { border-color: var(--text); background: var(--hover); }
.muscle-chip .dot { width: 8px; height: 8px; }
.notice { margin: 14px 0 0; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--raised); color: var(--muted); font-size: 13px; }
.notice .link { margin-left: 4px; }

/* workout */
.action {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 9px 12px;
  border: 1px solid var(--text); border-radius: var(--r); background: transparent; color: var(--text); cursor: pointer; font-size: 14px; font-weight: 500;
}
.action svg { width: 16px; height: 16px; }
.action:hover { background: var(--hover); }
.action.on { background: var(--text); color: var(--bg); }
.action.on span { margin-left: 4px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); opacity: .8; font-weight: 400; }
.inline-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 1px; vertical-align: middle; position: relative; top: -1px; border: 1px solid var(--line-strong); border-radius: var(--r); }
.inline-icon svg { width: 13px; height: 13px; }
.w-summary { padding: 14px 0 6px; color: var(--muted); font: 400 12px var(--mono); }
.w-summary b { color: var(--text); font-weight: 500; }
.w-row { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 2px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.w-row:first-of-type { border-top: 0; }
.w-name { flex: 1; min-width: 0; padding: 4px 6px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14.5px; }
.w-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.stepper { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); }
.stepper button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.stepper button:hover { background: var(--hover); color: var(--text); }
.stepper span { min-width: 52px; text-align: center; color: var(--muted); font: 400 11.5px var(--mono); }
.stepper b { color: var(--text); font-weight: 500; font-size: 13px; }
.w-remove { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--faint); cursor: pointer; }
.w-remove svg { width: 14px; height: 14px; }
.w-remove:hover { background: var(--hover); color: var(--text); }
.w-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 2px; }
.w-save { display: flex; gap: 8px; padding: 12px 0 2px; }
.w-save input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--text); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.w-save input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.s-row { display: flex; align-items: center; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.s-row:first-of-type { border-top: 0; }
.s-open { flex: 1; min-width: 0; display: block; padding: 8px 6px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.s-open:hover { background: var(--hover); }
.s-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; }
.s-meta { display: block; margin-top: 1px; color: var(--faint); font: 400 11.5px var(--mono); }
.s-btn { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r); background: transparent; color: var(--faint); cursor: pointer; }
.s-btn svg { width: 14px; height: 14px; }
.s-btn:hover { background: var(--hover); color: var(--text); }
.build-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 24px 0; padding: 6px 6px 6px 12px;
  border: 1px solid var(--text); border-radius: var(--r); background: var(--raised); font: 400 12px var(--mono); color: var(--muted);
}
.build-bar[hidden] { display: none; }
.build-bar b { color: var(--text); font-weight: 500; }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn { padding: 7px 12px; border: 1px solid var(--text); border-radius: var(--r); background: var(--text); color: var(--bg); cursor: pointer; font-size: 13px; font-weight: 500; }
.btn:hover { opacity: .88; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--text); opacity: 1; }
.ramp { display: flex; align-items: center; gap: 8px; padding: 4px 0 0; color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ramp i { flex: 1; max-width: 160px; height: 6px; border-radius: 1px; background: linear-gradient(90deg, #f4d58d, #ee8a2c, #c3241a); }
.load-note { margin: 8px 0 4px; color: var(--muted); font-size: 12.5px; }
.load-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 34px; align-items: center; gap: 12px; width: 100%; padding: 5px 4px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.load-row:hover { background: var(--hover); }
.load-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.load-bar { height: 8px; background: var(--line); border-radius: 1px; overflow: hidden; }
.load-bar i { display: block; height: 100%; }
.load-val { text-align: right; color: var(--muted); font: 400 12px var(--mono); font-variant-numeric: tabular-nums; }
.missed { margin-top: 12px; }
.missed summary { cursor: pointer; padding: 6px 0; color: var(--muted); font-size: 13px; }
.missed .muscle-chips { padding-top: 6px; }

/* quiz */
.quiz { padding-top: 6px; }
.quiz-title { margin: 12px 0 4px; font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; }
.quiz-intro, .quiz-note { margin: 6px 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.quiz-note b { color: var(--text); font-weight: 600; }
.quiz-head { display: flex; justify-content: space-between; padding: 14px 0 6px; color: var(--muted); font: 400 12px var(--mono); }
.quiz-head b { color: var(--text); font-weight: 500; }
.quiz-bar { height: 3px; background: var(--line); }
.quiz-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.quiz-q { margin: 18px 0 12px; font: 600 21px/1.25 var(--display); letter-spacing: -0.02em; }
.quiz-q em { font-style: normal; color: var(--accent); }
.quiz-options { display: grid; gap: 8px; }
.quiz-option {
  padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--text);
  text-align: left; font-size: 15px; cursor: pointer;
}
.quiz-option:hover:not(:disabled) { border-color: var(--text); background: var(--hover); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); font-weight: 600; }
.quiz-option.wrong { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.quiz-option.dim { opacity: .45; }
.quiz-feedback { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--faint); background: var(--raised); }
.quiz-feedback.ok { border-left-color: var(--ok); }
.quiz-feedback.bad { border-left-color: var(--primary); }
.quiz-feedback p { margin: 6px 0 2px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.quiz-status { display: flex; align-items: center; gap: 12px; min-height: 22px; margin: -4px 0 12px; }
.quiz-pips { display: inline-flex; gap: 5px; flex: none; }
.quiz-pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.quiz-pips i.gone { background: transparent; border: 1.5px solid var(--primary); opacity: .8; }
.quiz-miss { color: var(--primary); font-size: 13.5px; font-weight: 500; }
.quiz-option.wrong:disabled { opacity: 1; color: var(--primary); text-decoration: line-through; }
.quiz-score { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; }
.quiz-score b { font: 600 56px/1 var(--display); letter-spacing: -0.03em; }
.quiz-score span { color: var(--muted); font: 400 16px var(--mono); }

/* ---------- stage ---------- */
#stage { position: relative; min-width: 0; min-height: 0; background: radial-gradient(ellipse 75% 62% at 50% 44%, var(--stage-hi), var(--stage)); overflow: hidden; overflow: clip; } /* clip can't be scrolled at all. Clips the Layers / Spin panels while they are tucked off the right edge, so the page can't be panned sideways to reveal them */
#viewer { position: absolute; inset: 0; }
#viewer canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#viewer canvas:active { cursor: grabbing; }

.stage-top { --panel-edge: 16px; position: absolute; left: 16px; right: 16px; top: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.stage-top > * { pointer-events: auto; }
/* The toolbar and the Layers / Spin panels are stacked in one column, so the panels always start below the toolbar
   however many rows it wraps onto at a given width, and can't land on top of its buttons. */
.stage-top > .stage-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; min-width: 0; max-width: 100%; pointer-events: none; }
.stage-right > * { pointer-events: auto; }

.selection {
  display: inline-flex; align-items: center; gap: 10px; max-width: 34%; padding: 5px 5px 5px 12px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--panel);
}
.selection[hidden] { display: none; }
.selection::before { content: "Selected"; color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.selection-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--primary); flex: none; }
#selection-text { font: 600 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#selection-clear { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
#selection-clear:hover { background: var(--hover); color: var(--text); }
#selection-clear svg { width: 14px; height: 14px; }

.toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.seg, .tool { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r); }
.seg { display: inline-flex; }
.seg button { height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); background: var(--hover); }
.seg button.on { background: var(--text); color: var(--bg); }
.tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 500; }
.tool[hidden] { display: none; }
.tool:hover { color: var(--text); background: var(--hover); }
.tool[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.tool.has-peel:not([aria-pressed="true"]) { border-color: var(--accent); color: var(--accent); }

.stage-panels { display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.stage-panels > * { pointer-events: auto; }
.layer-range { width: 100%; accent-color: var(--accent); }
.layer-ticks { display: flex; justify-content: space-between; margin-top: -4px; color: var(--faint); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
#layer-name { color: var(--text); font: 500 12px var(--mono); }
.spin-panel {
  display: grid; gap: 10px; padding: 12px 14px; min-width: 250px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r); font-size: 13px;
}
.spin-panel { position: relative; transition: transform .25s ease; }
.spin-panel[hidden] { display: none; }
.panel-handle { display: none; }
.spin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); }
.spin-row input[type="range"] { width: 150px; accent-color: var(--accent); }
.spin-panel .seg button { height: 28px; }

.stage-bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none; }
.hint { color: var(--faint); font: 400 11.5px/1.4 var(--mono); transition: opacity .3s; }
.hint.is-hidden { opacity: 0; }

.tip {
  position: absolute; z-index: 5; pointer-events: none; padding: 5px 10px; border-radius: var(--r); white-space: nowrap;
  background: var(--text); color: var(--bg); font: 500 13px var(--sans);
}
.tip small { display: block; opacity: .65; font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tip[hidden] { display: none; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--stage); z-index: 6; transition: opacity .35s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-box { width: min(240px, 70%); color: var(--muted); font: 400 12px var(--mono); letter-spacing: .06em; text-align: center; }
.loading-bar { height: 2px; margin-bottom: 12px; background: var(--line-strong); overflow: hidden; }
.loading-bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .2s; }

/* medium widths: keep the toolbar on one row by dropping the button labels */
@media (max-width: 1520px) {
  .tool span { display: none; }
  .tool { padding: 0 11px; }
}

/* ---------- narrow screens: model on top, panel below ---------- */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 46svh) 1fr; } /* svh: a steady height that doesn't jump as the browser bar moves */
  #stage { order: -1; }
  #panel { border-right: 0; border-top: 1px solid var(--line-strong); }
  .brand { padding: 14px 16px 10px; }
  .brand p { display: none; }
  .brand h1 { font-size: 21px; }
  .theme-switch { margin-top: 0; }
  .search { margin: 0 16px; }
  .tabs { margin: 12px 16px 0; }
  .build-bar { margin: 8px 16px 0; }
  .panel-scroll { padding: 2px 10px calc(76px + env(safe-area-inset-bottom)) 16px; } /* room so the last row scrolls clear of the browser's bottom bar and the home bar */
  html { background: var(--panel); } /* anything exposed below the page blends with the panel */
  /* Safari keeps the bottom ~58px of the screen for its own bar, so the list can't be drawn all the way down. Fade the
     last rows out into the panel colour instead of cutting them off in a hard line. */
  .panel-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
  #search-hint { display: none; }
  .credit { display: none; }
  /* mid-quiz on a phone: drop the title, theme switch and search box so the question gets the room */
  .quiz-live .brand, .quiz-live .search { display: none; }
  .quiz-live .tabs { margin-top: 10px; }
  /* once a multiple-choice question is answered, the result card takes the place of the choices instead of sitting under them */
  .quiz.is-answered .quiz-options { display: none; }
  .stage-top { --panel-edge: 10px; left: 10px; right: 10px; top: 10px; flex-direction: column; align-items: stretch; }
  .selection { display: none; } /* the "Selected" tag takes up room on a phone; the panel and the model's empty space still clear it */
  .toolbar { margin-left: 0; justify-content: space-between; flex-wrap: nowrap; }
  .tool { padding: 0 10px; }
  .stage-top > .stage-right { align-self: stretch; margin-left: 0; }
  .stage-right > .toolbar { align-self: stretch; }
  .hint { display: none; }
  .stage-bottom { left: 10px; right: 10px; bottom: 8px; }
  /* app.js moves the Focus button here on narrow screens: bottom right of the model */
  .stage-bottom .tool { margin-left: auto; pointer-events: auto; }
  .detail-head h2 { font-size: 25px; }
}
/* Layers / Spin panels: a handle on the left edge tucks the panel off the right of the screen (see setTucked in
   app.js). It is there on phones and on any touch screen, so iPads in landscape (wide enough for the desktop layout) get
   it too. A mouse user on a desktop doesn't need it. */
@media (max-width: 860px), (pointer: coarse) {
  .panel-handle { display: grid; place-items: center; position: absolute; left: -23px; top: 50%; transform: translateY(-50%); width: 23px; height: 56px; padding: 0; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--panel); color: var(--muted); cursor: pointer; }
  .panel-handle svg { width: 14px; height: 14px; transition: transform .25s ease; }
  .spin-panel.is-tucked { transform: translateX(calc(100% + var(--panel-edge, 16px))); }
  .spin-panel.is-tucked .panel-handle svg { transform: rotate(180deg); }
}
@media (max-width: 420px) {
  .seg button { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
.quiz-end { display: block; margin: 18px 0 4px; font-size: 13px; }
.quiz-clue { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--faint); background: var(--raised); font-size: 15px; line-height: 1.55; }

/* confirm dialog (leaving a quiz) */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(15, 13, 11, .55); }
.modal { width: min(400px, 100%); padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.modal h3 { margin: 0 0 8px; font: 600 18px/1.25 var(--display); letter-spacing: -0.02em; }
.modal p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.modal .w-actions { margin: 0; justify-content: center; }

/* dark theme: buttons sit a step lighter than the panel, like the paper buttons do in the light theme */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .btn.ghost,
:root[data-theme="dark"] .quiz-option:not(.correct):not(.wrong):not(.dim) { background: var(--raised); }
:root[data-theme="dark"] .chip:hover,
:root[data-theme="dark"] .btn.ghost:hover { background: var(--hover); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--text); }
:root[data-theme="dark"] .quiz-option:hover:not(:disabled) { background: var(--hover); }

/* ---------- compare two exercises ---------- */
:root { --cmp-a: #3a8dde; --cmp-b: #e0559a; --cmp-both: #8e6bd8; }
:root[data-theme="light"] { --cmp-a: #2a6fbf; --cmp-b: #c23d83; --cmp-both: #6d4cc2; }
.detail-head .action + .action { margin-top: 8px; }
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.cmp-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--r); background: var(--raised); }
.cmp-side.a { border-left-color: var(--cmp-a); }
.cmp-side.b { border-left-color: var(--cmp-b); }
.cmp-name { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font: 600 15px/1.25 var(--display); letter-spacing: -0.01em; }
.cmp-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-equip { color: var(--muted); font-size: 12px; line-height: 1.35; }
.cmp-side .link { margin-top: auto; }
.cmp-swap { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--muted); cursor: pointer; }
.cmp-swap:hover { color: var(--text); border-color: var(--text); background: var(--hover); }
.cmp-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 2px; color: #fff; font: 600 11px/1 var(--mono); }
.cmp-badge.a { background: var(--cmp-a); }
.cmp-badge.b { background: var(--cmp-b); }
.cmp-side .cmp-badge { margin-bottom: 2px; }
.cmp-stats { display: flex; margin: 20px 0 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.cmp-stats > div { flex: 1 1 0; min-width: 0; padding: 12px 0 11px; }
.cmp-stats > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.cmp-stats b { display: block; font: 600 30px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.cmp-stats span { display: block; margin-top: 5px; overflow-wrap: anywhere; padding-right: 8px; color: var(--muted); font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cmp-stats .both b { color: var(--cmp-both); }
.cmp-stats .a b { color: var(--cmp-a); }
.cmp-stats .b b { color: var(--cmp-b); }
.cmp-key { display: grid; gap: 6px; margin: 14px 0 4px; color: var(--text); font-size: 13.5px; }
.cmp-key-how { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12.5px; }
.cmp-key-how > span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-role.neutral.primary { background: var(--text); color: var(--bg); }
.cmp-role.neutral.secondary { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.cmp-cols { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; margin-top: 10px; padding: 6px 0; background: var(--panel); border-bottom: 1px solid var(--line-strong); color: var(--faint); font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cmp-cols > span:not(:first-child) { justify-self: center; }

.cmp-grid { display: grid; grid-template-columns: 1fr 64px 64px; align-items: center; row-gap: 1px; }
.cmp-muscle { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 4px; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }
.cmp-muscle:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-role { justify-self: center; padding: 2px 6px; border-radius: 2px; font: 500 11px/1.3 var(--mono); }
.cmp-role.none { color: var(--faint); }
.cmp-role.a.primary { background: var(--cmp-a); color: #fff; }
.cmp-role.b.primary { background: var(--cmp-b); color: #fff; }
.cmp-role.a.secondary { color: var(--cmp-a); box-shadow: inset 0 0 0 1px var(--cmp-a); }
.cmp-role.b.secondary { color: var(--cmp-b); box-shadow: inset 0 0 0 1px var(--cmp-b); }
@media (max-width: 520px) { .cmp-head { grid-template-columns: 1fr; } .cmp-swap { justify-self: center; } }