/* styles.css — Chemculate Concentration
 * Maps components onto the Lavender + Willow tokens in design-system.css
 * (linked first). No palette lives here. Lavender = primary / interactive,
 * willow = the final answer. One saturated element per view. */


:root { --on-soft-accent: var(--accent-soft-ink); }
[data-theme="dark"] { --on-soft-accent: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --on-soft-accent: var(--accent); }
}


/* ---------------- frame ---------------- */
.page { max-width: 760px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }


.page-header { margin-bottom: var(--sp-5); }
h1 { margin: var(--sp-1) 0 var(--sp-3); }
h2 { margin: 0 0 var(--sp-3); }
main { display: block; }

.page-footer {
  text-align: center; margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.page-footer p { margin: 0 auto; font: var(--t-small); color: var(--muted); }

/* ---------------- screens + motion ---------------- */
.screen { display: none; }
.screen.is-active { display: block; animation: fade var(--dur-slow) var(--ease); }

.wizard-back-row { margin-top: var(--sp-4); }

/* ---------------- landing ---------------- */

.hero-lead {
  font: var(--t-display); letter-spacing: var(--tr-display);
  color: var(--ink-2); margin: var(--sp-5) 0; max-width: none;
}
.choice-grid {
  display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr;
  padding: var(--sp-2) 0 var(--sp-3);
}
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }


/* ---------------- panels ---------------- */
.prompt-card, .fields-card, .converter-bar { margin-bottom: var(--sp-5); }
.prompt-card, .fields-card { animation: fade var(--dur-slow) var(--ease); }
.prompt-step {
  display: inline-block; margin-bottom: var(--sp-2);
  font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--link);
}
.prompt-question { display: block; font: var(--t-h2); color: var(--ink-2); margin: 0 0 var(--sp-4); max-width: none; }
.conversion-pair { display: block; margin-top: var(--sp-2); font-weight: var(--w-semi); color: var(--link); }

/* ---------------- form controls ---------------- */
.select, .num-input { width: 100%; }

.field-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.field-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font: var(--t-body-strong); color: var(--ink); }
.field-unit { color: var(--muted); font-weight: var(--w-normal); }
.input-wrap { position: relative; }

.wizard-back { padding: 8px 18px; }

#learn-start, #learn-reveal-next { margin-top: var(--sp-4); }
.check-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }


/* ---------------- converter bar ---------------- */
.converter-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--sp-4); }
.converter-arrow { font-size: 1.4rem; color: var(--link); padding-bottom: var(--sp-2); }
@media (max-width: 560px) {
  .converter-bar { grid-template-columns: 1fr; }
  .converter-arrow { display: none; }
}

/* ---------------- stacked fractions ---------------- */
.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: 0.92em; position: relative; top: -0.05em;
}
.frac-num { padding: 0 5px 2px; border-bottom: 1.4px solid currentColor; }
.frac-den { padding: 2px 5px 0; }

.eqgrid { display: inline-grid; align-items: center; row-gap: 5px; column-gap: 0; max-width: 100%; }
.eqgrid .eq-seg { white-space: nowrap; }
.eqgrid .eq-op { padding: 0 0.6em; }
.eqgrid .eq-lhs { justify-self: end; }
.eqgrid .eq-rhs, .eqgrid .eq-solo { justify-self: start; }

/* ---------------- solution / reveal ---------------- */
.solution { margin-top: var(--sp-2); animation: fade var(--dur-slow) var(--ease); }
.solution-heading { margin: var(--sp-2) 0 var(--sp-4); }
.reveal-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.step-block { animation: fade var(--dur-slow) var(--ease); }

.strategy-eyebrow, .math-eyebrow, .answer-eyebrow, .full-working-answer-label, .worksheet-eyebrow, .worksheet-section {
  display: block; font: var(--t-label); text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--muted); margin-bottom: var(--sp-2);
}
.strategy-instruction { margin: 0 0 var(--sp-2); font: var(--t-h3); color: var(--ink-2); max-width: none; }
.strategy-text { margin: 0; color: var(--ink); max-width: none; }

.strategy-card {
  background: var(--primary-soft); border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--sp-4);
}
.math-card {
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-3);
  font: var(--t-quantity); line-height: 2; overflow-x: auto;
  box-shadow: var(--shadow-1); animation: fade var(--dur-slow) var(--ease);
}

/* final answer: willow is the answer. Solid fill = the view's one saturated element */
.answer-callout {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-1);
  box-shadow: var(--shadow-2); animation: fade var(--dur-slow) var(--ease);
}
.answer-callout .answer-eyebrow { color: var(--accent-ink); }
.answer-value {
  font: var(--t-h2); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--accent-ink); margin: 0; max-width: none;
}
.answer-callout--learn { padding: var(--sp-6) var(--sp-5); }
.answer-callout--learn .answer-value { font-size: 2rem; line-height: 1.25; margin-bottom: var(--sp-5); }
.answer-callout .btn--ghost { color: var(--accent-ink); border-color: var(--accent-ink); }
.answer-callout .btn--ghost:hover { background: var(--accent-hover); color: var(--accent-ink); }
[data-theme="dark"] .answer-callout .btn--ghost:hover { background: var(--grn-200); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .answer-callout .btn--ghost:hover { background: var(--grn-200); } }
.answer-callout .btn--ghost:focus-visible { box-shadow: 0 0 0 3px var(--accent-ink); }

.fineprint { color: var(--muted); font: var(--t-small); margin-top: var(--sp-5); max-width: none; }

/* ============================================================
   LEARN: strategy (soft lavender) + calculation (card)
   ============================================================ */
.step-combo {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-2); margin-bottom: var(--sp-5);
}
.step-strategy-zone { background: var(--primary-soft); padding: var(--sp-5); border-bottom: 1px solid var(--line); }
.step-strategy-zone .strategy-instruction { font: var(--t-h2); color: var(--ink-2); margin: 0 0 var(--sp-2); }
.step-strategy-zone .strategy-text { font: var(--t-body); color: var(--ink); margin: 0; }
.step-strategy-zone .strategy-footnote {
  font: var(--t-small); color: var(--muted); max-width: none;
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-strong);
}
.step-strategy-zone .strategy-footnote::before { content: "Note \2014  "; font-weight: var(--w-semi); }
.step-calc-zone { background: var(--card); color: var(--ink); padding: var(--sp-5); min-height: 56px; }
.math-typed {
  margin: 0; max-width: none; font: var(--t-quantity); font-size: 1.0625rem;
  font-variant-numeric: tabular-nums; line-height: 2.05; overflow-x: auto;
}
.step-combo-actions { background: var(--card); padding: 0 var(--sp-5) var(--sp-5); }

.full-working-item {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); font: var(--t-quantity); line-height: 2.05;
  font-variant-numeric: tabular-nums; color: var(--ink); overflow-x: auto;
}
.full-working-answer-label { color: var(--on-soft-accent); }
#learn-full-working #learn-restart { margin-top: var(--sp-1); }

/* ============================================================
   CHECK: worksheet (willow-soft result header, card body)
   ============================================================ */
.worksheet {
  width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
  background: var(--card); border: 1px solid var(--line); animation: fade var(--dur-slow) var(--ease);
}
.worksheet-header { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--sp-5); }
.worksheet-eyebrow { color: var(--accent-soft-ink); }
.worksheet-result { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); color: var(--accent-soft-ink); max-width: none; }
.worksheet-num { font: var(--t-display); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--accent-soft-ink); }
.worksheet-unit { font: var(--t-h2); color: var(--accent-soft-ink); }
.worksheet-body { padding: var(--sp-5); }
.worksheet-steps { list-style: none; margin: 0; padding: 0; }
.worksheet-step { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.worksheet-step:first-child { border-top: none; padding-top: var(--sp-1); }
.worksheet-step-num {
  flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-soft-ink);
  font: var(--t-label); display: flex; align-items: center; justify-content: center;
}
.worksheet-step-main { min-width: 0; flex: 1; }
.worksheet-step-title { margin: 0 0 var(--sp-2); font: var(--t-h3); color: var(--ink-2); max-width: none; }
.worksheet-step-math { font: var(--t-quantity); font-variant-numeric: tabular-nums; color: var(--ink); line-height: 2.05; overflow-x: auto; }
.worksheet-step-math b { font-weight: var(--w-semi); }
.worksheet-step-note { margin: var(--sp-2) 0 0; color: var(--muted); max-width: none; }
.worksheet-oneline {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--line-strong);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); color: var(--ink); overflow-x: auto;
}
.worksheet-oneline-label { font-style: italic; color: var(--muted); }
.worksheet-oneline-formula { font: var(--t-quantity); color: var(--ink-2); }
.worksheet-oneline-formula sub { font-size: 0.72em; }

@media (max-width: 600px) {
  .prompt-card, .fields-card, .converter-bar { padding: var(--sp-4); }
  .step-strategy-zone, .step-calc-zone { padding: var(--sp-4); }
  .step-combo-actions { padding: 0 var(--sp-4) var(--sp-4); }
  .answer-callout--learn { padding: var(--sp-5) var(--sp-4); }
  .answer-callout--learn .answer-value { font-size: 1.5rem; }
  .worksheet-header, .worksheet-body { padding: var(--sp-4); }
}

/* native dropdown popup */
.select option:disabled { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, .screen.is-active, .step-block, .math-card, .answer-callout, .prompt-card, .fields-card, .solution {
    animation: none !important; transition: none !important;
  }
  .btn:hover, .choice-card:hover, .theme-toggle:hover { transform: none !important; }
}