/* styles.css - Yield calculator, Lavender + Willow.
 * design-system.css (linked first) owns every colour, type, shape and motion token.
 * This file only maps the app's existing components onto those tokens.
 * Roles: lavender = primary/interactive, willow = positive / the answer.
 * Saturation budget: one saturated element per view (the primary button, or the answer chip).
 * The ratio-ball picture has its own file, ratiovis.css. */

:root {
  color-scheme: light;

  /* Reaction-category accents: semantically meaningful data colours (named tokens, light values
     all >= 6:1 on white). Each tag also carries its text label, so colour is never the only cue. */
  --cat-neut:#1d4ed8; --cat-ametal:#be185d; --cat-carb:#92400e; --cat-oxide:#9a3412;
  --cat-comb:#b91c1c; --cat-precip:#6d28d9; --cat-decomp:#047857; --cat-disp:#0e7490;
  --cat-synth:#0369a1; --cat-titr:#7e22ce; --cat-elec:#854d0e; --cat-complex:#a21caf;
  --cat-pblock:#4338ca; --cat-gasform:#3f6212; --cat-custom:#475569;
}
[data-theme="dark"] {
  color-scheme: dark;
  --cat-neut:#93bbfd; --cat-ametal:#f9a8d4; --cat-carb:#fcd34d; --cat-oxide:#fdba74;
  --cat-comb:#fca5a5; --cat-precip:#c4b5fd; --cat-decomp:#6ee7b7; --cat-disp:#67e8f9;
  --cat-synth:#7dd3fc; --cat-titr:#d8b4fe; --cat-elec:#fde047; --cat-complex:#f0abfc;
  --cat-pblock:#a5b4fc; --cat-gasform:#bef264; --cat-custom:#cbd5e1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-neut:#93bbfd; --cat-ametal:#f9a8d4; --cat-carb:#fcd34d; --cat-oxide:#fdba74;
    --cat-comb:#fca5a5; --cat-precip:#c4b5fd; --cat-decomp:#6ee7b7; --cat-disp:#67e8f9;
    --cat-synth:#7dd3fc; --cat-titr:#d8b4fe; --cat-elec:#fde047; --cat-complex:#f0abfc;
    --cat-pblock:#a5b4fc; --cat-gasform:#bef264; --cat-custom:#cbd5e1;
  }
}

/* aliases so the category colours chemistry.js reads (var(--c-*)) resolve to the named tokens */
:root {
  --c-neut:var(--cat-neut); --c-ametal:var(--cat-ametal); --c-carb:var(--cat-carb); --c-oxide:var(--cat-oxide);
  --c-comb:var(--cat-comb); --c-precip:var(--cat-precip); --c-decomp:var(--cat-decomp); --c-disp:var(--cat-disp);
  --c-synth:var(--cat-synth); --c-titr:var(--cat-titr); --c-elec:var(--cat-elec); --c-complex:var(--cat-complex);
  --c-pblock:var(--cat-pblock); --c-gasform:var(--cat-gasform); --c-custom:var(--cat-custom);
}


/* ---------------- page frame, navigation, header ---------------- */
.page { max-width: 900px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) 0; }
main { max-width: 900px; margin: 0 auto; padding: 0 var(--sp-5); }


.page-header { margin-bottom: var(--sp-6); }
h1, .site-title { margin: var(--sp-1) 0 var(--sp-3); }


/* ---------------- landing + choice cards ---------------- */
.hero-lead {
  font: var(--t-display); letter-spacing: var(--tr-display); text-wrap: balance;
  color: var(--ink-2); max-width: none; margin: var(--sp-3) 0 var(--sp-5);
}

.choice-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); padding: 0 0 var(--sp-3); }
.prompt-card .choice-grid { margin-top: var(--sp-4); }
.choice-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .choice-grid, .choice-grid--three { grid-template-columns: 1fr; } }


/* ---------------- panels ---------------- */
.prompt-card { margin-bottom: var(--sp-5); }
.prompt-step {
  display: inline-block; font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--primary-soft-ink); margin-bottom: var(--sp-2);
}
.prompt-question { display: block; font: var(--t-h2); color: var(--ink-2); max-width: none; margin: 0 0 var(--sp-3); }
.wizard-back-row { margin-top: var(--sp-3); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------------- form controls / buttons ---------------- */
.text-input { width: 100%; }

#measure-continue { margin-top: var(--sp-4); }


/* ---------------- species / formula search ---------------- */
.searchbar { position: relative; margin-bottom: var(--sp-2); }
.search-preview { display: block; min-height: 1.1em; margin: var(--sp-2) 2px 0; font: var(--t-mono); color: var(--primary-soft-ink); }
.search-preview:empty { display: none; }
.searchbar-divider {
  display: flex; align-items: center; gap: var(--sp-3); font: var(--t-label); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--tr-label); margin: var(--sp-1) 0 var(--sp-3);
}
.searchbar-divider::before, .searchbar-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------- periodic-table picker ---------------- */
.tablewrap { margin-bottom: var(--sp-3); }
.legend { display: flex; gap: var(--sp-4); font: var(--t-small); color: var(--muted); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l-active { background: var(--primary-soft); border: 1px solid var(--line-strong); }
.legend .l-sel { background: var(--primary); }
.legend .l-off { background: var(--bg-tint); border: 1px solid var(--line); }

.ptscroll { overflow-x: auto; padding: var(--sp-1) var(--sp-1) var(--sp-2); -webkit-overflow-scrolling: touch; }
.ptable { display: grid; grid-template-columns: repeat(18, minmax(33px, 1fr)); grid-auto-rows: 36px; gap: 4px; min-width: 640px; }
.cell {
  appearance: none; padding: 0; margin: 0;
  border-radius: 6px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  font: var(--w-semi) 13px/1 var(--font-body); user-select: none; border: 1px solid transparent;
}
.cell .z { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: var(--w-medium); }
.cell.off { background: var(--bg-tint); color: var(--faint); border-color: var(--line); cursor: default; }
.cell.on {
  background: var(--primary-soft); color: var(--primary-soft-ink); border-color: var(--line-strong); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cell.on:hover { background: var(--lav-100); color: var(--lav-700); border-color: var(--primary); transform: translateY(-1px); z-index: 2; }
[data-theme="dark"] .cell.on:hover { background: var(--line-strong); color: var(--lav-50); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cell.on:hover { background: var(--line-strong); color: var(--lav-50); }
}
.cell.sel {
  background: var(--primary); color: var(--primary-ink); border-color: transparent;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
}

.ftag { grid-column: 3 / span 1; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 6px; }

.controls { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin: var(--sp-3) 0 var(--sp-1); }

.statusbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) 2px 2px; }
.count { color: var(--muted); font: var(--t-small); }
.count b { color: var(--ink); font-weight: var(--w-semi); }
.selchips { display: flex; gap: 6px; flex-wrap: wrap; }
.selchip {
  background: var(--primary-soft); color: var(--primary-soft-ink); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 4px 10px 4px 12px; font: var(--t-small); font-weight: var(--w-semi);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur) var(--ease);
}
.selchip:hover { background: var(--lav-100); color: var(--lav-700); }
[data-theme="dark"] .selchip:hover { background: var(--line-strong); color: var(--lav-50); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .selchip:hover { background: var(--line-strong); color: var(--lav-50); }
}
.selchip span { font-size: .875rem; opacity: .85; }

/* reaction list */
.list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); padding: 2px var(--sp-1); }
.rx {
  appearance: none; width: 100%; margin: 0; text-align: left; font: inherit; color: inherit;
  display: grid; grid-template-columns: 42px 1fr auto; gap: var(--sp-3); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); align-items: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rx:hover { border-color: var(--primary); background: var(--bg-tint); box-shadow: var(--shadow-1); }
.idx {
  font: var(--w-semi) 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2);
  background: var(--primary-soft); border: 1px solid var(--line); border-radius: var(--r-sm); height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.rxbody { min-width: 0; }
.rxbody, .rx .eq { display: block; }   /* spans, because the row is a button */
.eq { font: var(--w-normal) 15px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.eq .coef { color: var(--primary-soft-ink); }
.eq .op { color: var(--muted); padding: 0 2px; }
.eq .arrow { color: var(--primary-soft-ink); padding: 0 6px; font-weight: var(--w-semi); }
.eq sub, .eq sup { font-size: .66em; }
.meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.tag {
  font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  padding: 3px 10px; border-radius: var(--r-pill);
  color: var(--tag, var(--primary-soft-ink));
  background: color-mix(in srgb, var(--tag, var(--primary-soft-ink)) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--tag, var(--primary-soft-ink)) 40%, var(--card));
}
.cond { font: var(--t-small); color: var(--muted); font-style: italic; }
.cond--warn { color: var(--warn-ink); font-style: normal; }
.pick { font: var(--t-small); font-weight: var(--w-semi); color: var(--muted); white-space: nowrap; }
.rx:hover .pick { color: var(--primary-soft-ink); }
.empty { text-align: center; color: var(--muted); padding: var(--sp-7) var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); font: var(--t-body); max-width: none; }
.empty b { color: var(--ink); font-weight: var(--w-semi); }

.rx--custom { border-style: dashed; background: var(--bg-tint); }
.rx--custom:hover { border-color: var(--primary); }
.rx--custom .idx { color: var(--primary-soft-ink); font-size: 19px; }
.rx--custom .rxbody .eq { font-family: var(--font-body); color: var(--muted); font-style: italic; }

/* ---------------- custom-reaction builder ---------------- */
.custom-side-label {
  font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--muted); margin: var(--sp-4) 0 var(--sp-2);
}
.custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 620px) { .custom-grid { grid-template-columns: minmax(0, 1fr); } }
.custom-arrow-row { text-align: center; margin: 6px 0; }
.custom-arrow { color: var(--primary-soft-ink); font-size: 1.2rem; font-weight: var(--w-semi); }
.customfield { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.customfield .cf-label {
  font: var(--t-label); color: var(--muted); letter-spacing: var(--tr-label); text-transform: uppercase; margin-bottom: var(--sp-2);
}
.coefrow { display: flex; gap: var(--sp-2); }
.coef-input { width: 56px; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }
.name-input { flex: 1; min-width: 0; font-family: var(--font-mono); }
.formula-preview { margin-top: var(--sp-2); font: var(--t-quantity); font-size: 15px; color: var(--ink); min-height: 20px; }
.formula-preview sub, .formula-preview sup { font-size: .66em; }
.formula-preview:empty::before { content: '—'; color: var(--faint); }
.formula-conflict { margin-top: var(--sp-3); }
.formula-conflict-label { font: var(--t-small); color: var(--muted); margin-bottom: 6px; }
.formula-conflict-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.formula-option {
  font: var(--t-quantity); padding: 6px 12px; border-radius: var(--r-sm); min-height: 36px;
  border: 1px solid var(--primary); background: transparent; color: var(--primary-soft-ink); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.formula-option sub, .formula-option sup { font-size: .7em; }
.formula-option:hover { background: var(--primary-soft); }

/* ---------------- measurements card ---------------- */
.calc-eq {
  font: var(--w-normal) 17px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); overflow-x: auto;
}
.calc-eq .arrow { color: var(--primary-soft-ink); padding: 0 8px; font-weight: var(--w-semi); }
.calc-eq .op { color: var(--muted); padding: 0 3px; }
.calc-eq .coef { color: var(--primary-soft-ink); }
.calc-eq sub, .calc-eq sup { font-size: .66em; }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (max-width: 620px) { .inputs { grid-template-columns: 1fr; } }
.massfield { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.massfield .who { font: var(--w-semi) 16px/1.45 var(--font-mono); color: var(--ink); }
.massfield .who sub, .massfield .who sup { font-size: .66em; }
.massfield .cf, .seg .cf {
  font: var(--t-label); color: var(--muted); letter-spacing: var(--tr-label); text-transform: uppercase; margin-left: 6px;
}
.seg .cf { margin-left: var(--sp-2); }
.methodrow { margin: var(--sp-2) 0; }
.methodrow .msel { width: 100%; font-weight: var(--w-semi); }
.massrow { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.massrow input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.massrow .unit { color: var(--muted); font: var(--t-small); font-weight: var(--w-semi); }
.massrow .uSel { font-size: var(--fs-small); font-weight: var(--w-semi); }
.massrow .uSel.wide { flex: 1; }

/* ---------------- learn: a worksheet that grows one step at a time ---------------- */
.learn-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); margin-bottom: var(--sp-5);
}
.learn-head { background: var(--primary-soft); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.strategy-eyebrow {
  font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--primary-soft-ink); display: block; margin-bottom: var(--sp-2);
}
.learn-head .calc-eq { background: var(--card); }

.step-list { list-style: none; margin: 0; padding: 0 var(--sp-6); }
.step-block { max-width: none; padding: var(--sp-5) 0; border-top: 1px solid var(--line); scroll-margin-bottom: 110px; }
.step-block:first-child { border-top: 0; }
.step-block__head { display: flex; align-items: center; gap: var(--sp-3); }
.step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-ink); border: 1px solid var(--line-strong);
  font: var(--w-semi) .8125rem/1 var(--font-mono);
}
.step-block__title { margin: 0; max-width: none; font: var(--t-body-strong); font-size: 1.0625rem; color: var(--ink-2); }
.math-typed { margin: 0; font: var(--w-normal) 1rem/2.05 var(--font-mono); font-variant-numeric: tabular-nums; overflow-x: auto; }
.step-block__math { margin-top: var(--sp-2); }
.step-pic { margin-top: var(--sp-3); min-width: 0; }
.step-combo-actions { background: var(--card); padding: 0 var(--sp-6) var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* the controls stay in reach while the worksheet grows */
.learn-bar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-6); background: var(--card);
  border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.learn-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.learn-bar .btn { min-height: 40px; padding: 8px 16px; }
@media (max-width: 420px) {
  .learn-bar { gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-2); }
  .learn-actions { flex-wrap: nowrap; }
  .learn-bar .btn { min-height: 40px; padding: 8px 12px; font-size: var(--fs-small); }
}
.dots { display: flex; align-items: center; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color var(--dur) var(--ease); }
.dots i.on { background: var(--primary); }

/* ---------------- stacked fractions + equation grid ---------------- */
.frac {
  display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center;
  vertical-align: middle; margin: 0 6px; line-height: 1.3; font-size: .92em; position: relative; top: -.05em;
}
.frac-num { padding: 0 5px 2px; border-bottom: 1.4px solid currentColor; }
.frac-den { padding: 2px 5px 0; }

.eqgrid {
  display: inline-grid; grid-template-columns: max-content max-content minmax(0, max-content);
  align-items: center; row-gap: 6px; column-gap: 0; max-width: 100%;
}
.eqgrid .eq-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 0; align-items: center; }
.eqgrid .eq-seg { white-space: nowrap; }
.eqgrid .eq-rhs, .eqgrid .eq-solo { white-space: normal; }    /* a long right-hand side wraps on a phone instead of being cut off */
.eqgrid .eq-solo { width: 0; min-width: 100%; }               /* a line with no "=" fills the grid but never widens its columns */
.eqgrid .eq-op { padding: 0 .6em; }
.eqgrid .eq-lhs { justify-self: end; }
.eqgrid .eq-rhs, .eqgrid .eq-solo { justify-self: start; }
.eqgrid sub, .eqgrid sup { font-size: .7em; }

@supports not (grid-template-columns: subgrid) {
  .eqgrid .eq-row { grid-template-columns: max-content max-content minmax(0, max-content); }
}

/* ---------------- verify worksheet ---------------- */
.worksheet {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
  background: var(--card); border: 1px solid var(--line); margin-bottom: var(--sp-5);
}
.worksheet-header { background: var(--primary-soft); color: var(--ink); padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.worksheet-title { font: var(--t-h2); color: var(--ink-2); max-width: none; margin: 0; }
.worksheet-body { padding: var(--sp-2) var(--sp-6) var(--sp-3); }
.vrow { display: grid; grid-template-columns: 170px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px dashed var(--line-strong); align-items: baseline; }
.vrow:first-child { border-top: 0; }
@media (max-width: 560px) { .vrow { grid-template-columns: 1fr; gap: 4px; } }
.vlabel { font: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--primary-soft-ink); }
.vval { font: var(--w-normal) 1rem/1.8 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
/* the figure to compare against = the answer = willow */
.vval b { color: var(--accent); font-weight: var(--w-semi); }
.vval sub, .vval sup { font-size: .7em; }
.dotsep { color: var(--muted); padding: 0 .6em; }
.worksheet-pic { padding: var(--sp-2) var(--sp-6) var(--sp-4); }
.worksheet-pic[hidden] { display: none; }
.worksheet-actions { background: var(--card); padding: var(--sp-2) var(--sp-6) var(--sp-5); }

/* ---------------- verdict card: the answer, in willow ---------------- */
.verdict-card {
  background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-2); margin-bottom: var(--sp-5);
  animation: fade var(--dur-slow) var(--ease);
}
.verdict-headline { font: var(--t-h2); color: var(--ink-2); max-width: none; margin: 0 0 var(--sp-3); }
.verdict-body { font: var(--t-body); margin: 0; color: var(--ink); }
.verdict-flag {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-4); max-width: none; font: var(--t-body); color: var(--ink);
  background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.verdict-pic { margin-top: var(--sp-4); }
.verdict-pic[hidden] { display: none; }
.chip { display: inline-block; font: var(--t-quantity); font-weight: var(--w-semi); padding: 2px 10px; border-radius: var(--r-sm); }
.chip sub, .chip sup { font-size: .7em; }
/* the one saturated element on the verdict view */
.chip--lim { background: var(--accent); color: var(--accent-ink); }
.verdict-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.verdict-card .btn { background: var(--card); border-color: var(--line-strong); color: var(--primary-soft-ink); }
.verdict-card .btn:hover { background: var(--primary-soft); border-color: var(--primary); }
.verdict-card .btn--primary { background: var(--primary-soft); }
.verdict-card .btn--ghost { background: transparent; }

/* ---------------- practice ---------------- */
.practice-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.score-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 2px 14px; border-radius: var(--r-pill);
  font: var(--t-quantity); font-weight: var(--w-semi); font-variant-numeric: tabular-nums;
  background: var(--accent-soft); color: var(--accent-soft-ink); border: 1px solid var(--accent);
}
.practice-problem { outline: none; }
.cond-row { margin-top: var(--sp-2); }
.cond-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font: var(--t-small); color: var(--ink-2); background: var(--bg-tint); border: 1px solid var(--line-strong);
}
.givens { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; }
.given {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-3); max-width: none;
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-tint);
  font: var(--t-quantity);
}
.given-f { font-weight: var(--w-semi); }
.given-v { color: var(--ink-2); }
.given sub, .given sup { font-size: .7em; }

.pq { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--line-strong); }
.pq-title { margin: 0 0 var(--sp-3); max-width: none; font: var(--t-h3); font-size: 1.125rem; color: var(--ink-2); }
.pq-title sub, .pq-title sup { font-size: .7em; }
.pq-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.pq-picks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pq-pick { min-width: 76px; font-family: var(--font-mono); font-weight: var(--w-medium); }
.pq-pick sub, .pq-pick sup { font-size: .7em; }
.pq-pick:disabled { cursor: default; }
.pq-pick.is-right, .pq-pick.is-wrong, .pq-pick.is-answer { opacity: 1; }
.pq-pick.is-right { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.pq-pick.is-wrong { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.pq-pick.is-answer { border-color: var(--success); border-style: dashed; color: var(--success); }
.pq-pick.is-right::before, .pq-pick.is-answer::before { content: "✓"; }
.pq-pick.is-wrong::before { content: "✗"; }
.pq-hint { margin: var(--sp-3) 0 0; max-width: none; font: var(--t-quantity); color: var(--ink-2); }

.pq-answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pq-answer .num-input { width: 11rem; }
.pq-answer .unit { color: var(--muted); font: var(--t-small); font-weight: var(--w-semi); }
.num-input.is-right { border-color: var(--success); }
.num-input.is-wrong { border-color: var(--danger); }
.pq-feedback { margin-top: var(--sp-3); outline: none; }
.pq-feedback:empty { display: none; }
.fb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); margin: 0; max-width: none;
  padding: var(--sp-3) var(--sp-4); border-left: 3px solid; border-radius: 0 var(--r-md) var(--r-md) 0; font: var(--t-body);
}
.fb--ok { background: var(--success-soft); border-color: var(--success); }
.fb--no { background: var(--danger-soft); border-color: var(--danger); }
.fb-ic { font-weight: var(--w-semi); }
.fb--ok .fb-ic { color: var(--success); }
.fb--no .fb-ic { color: var(--danger); }
.fb b { font-weight: var(--w-semi); }
.fb sub, .fb sup { font-size: .7em; }
.fb-slip { margin: var(--sp-2) 0 0; max-width: none; font: var(--t-body); color: var(--ink); }
.pq-pic { margin-top: var(--sp-3); }
.pq-pic[hidden] { display: none; }

.pq-after { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--line-strong); }
.disclosure { gap: var(--sp-1); }
.pq-maths { margin: var(--sp-3) 0 0; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-tint); }
.pq-next { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ---------------- narrow screens ---------------- */
@media (max-width: 600px) {
  .page { padding: var(--sp-5) var(--sp-4) 0; }
  main { padding: 0 var(--sp-4); }
  .prompt-card { padding: var(--sp-4); }
  .learn-head, .learn-bar, .step-list, .worksheet-header, .worksheet-body, .worksheet-pic, .worksheet-actions, .step-combo-actions { padding-inline: var(--sp-4); }
  .verdict-card { padding-inline: var(--sp-4); }
  .pq-maths { padding-inline: var(--sp-3); }
  .practice-bar .seg { flex: 1 1 100%; }
  .practice-bar .seg > button { flex: 1 1 auto; }
}

/* ---------------- reduced motion (design-system.css shortens durations globally) ---------------- */
@media (prefers-reduced-motion: reduce) {
  .choice-card:hover, .btn:hover, .cell.on:hover, .theme-toggle:hover { transform: none !important; }
}