/* ──────────────────────────────────────────────────────────────────────────
   RASA — Recipe page styles (loaded by recipe.html only)
   Everything here rides on the design tokens defined in styles.css :root —
   never hardcode a color that has a token. Sections fill in per phase:
     1. Serving scaler + ingredient check-off
     2. Cook Mode
     3. Scrollytelling journey (spine, phase rail/strip)
     4. Science Lab (temperature slider, spice bloom)
     5. Steam ambience
   ────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   1 · SERVING SCALER
   ═══════════════════════════════════════════════════════════════════════ */

.scaler {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 2.2rem 0 0;
  padding: 1rem 0.2rem;
  border-top: 1px solid rgba(var(--color-science-rgb), 0.16);
}

.scaler__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.scaler__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.82);
}

.scaler__stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.scaler__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(var(--color-science-rgb), 0.06);
  border: 1px solid rgba(var(--color-science-rgb), 0.15);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.scaler__btn svg {
  width: 18px;
  height: 18px;
}

.scaler__btn:hover {
  background: rgba(var(--color-science-rgb), 0.12);
  border-color: rgba(var(--color-science-rgb), 0.35);
}

.scaler__btn:active {
  transform: scale(0.92);
}

.scaler__btn:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.7);
  outline-offset: 2px;
}

.scaler__value {
  min-width: 2.2ch;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.scaler__noun {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scaler__mult {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  min-width: 3.5ch;
}

.scaler__chips {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.scaler__chip {
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.scaler__chip:hover {
  border-color: rgba(var(--color-science-rgb), 0.35);
  color: var(--color-text-primary);
}

.scaler__chip.is-active {
  background: rgba(var(--color-science-rgb), 0.12);
  border-color: rgba(var(--color-science-rgb), 0.45);
  color: var(--color-accent);
}

.scaler__chip:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.7);
  outline-offset: 2px;
}

.scaler__base {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.56);
}

.scaler__nudge[hidden] {
  display: none;
}

.scaler__nudge {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 0.4rem;
  padding: 0.85rem 1rem;
  background: rgba(var(--color-science-rgb), 0.05);
  border: 1px solid rgba(var(--color-science-rgb), 0.14);
  border-radius: var(--radius-sm);
  animation: fadeInUp 0.4s ease-out;
}

.scaler__nudge-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.scaler__nudge-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.scaler__nudge-text strong {
  color: var(--color-science, #F5A623);
  font-weight: 500;
}

/* Quantity states */
.ingredient-card__quantity {
  transition: color var(--transition-fast);
}

.ingredient-card__quantity.is-scaled {
  color: var(--color-accent);
}

.ingredient-card__quantity.is-fixed {
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════
   1b · THE MANIFEST — editorial ingredient rows + check-off
   ═══════════════════════════════════════════════════════════════════════ */

.gather-progress {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.82);
  transition: color var(--transition-smooth);
}

.gather-progress.is-complete {
  color: var(--color-herb, #4caf50);
}

/* The manifest replaces the card grid entirely */
.ingredients-grid {
  display: block;
  border-top: 1px solid rgba(var(--color-science-rgb), 0.16);
  margin-top: 1.5rem;
}

.ing-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto 44px;
  align-items: baseline;
  gap: 0 1.2rem;
  padding: 1.05rem 0.2rem;
  border-bottom: 1px solid rgba(var(--color-science-rgb), 0.09);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ing-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ing-row__ordinal {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: rgba(var(--color-science-rgb), 0.4);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--transition-fast);
}

.ing-row:hover .ing-row__ordinal {
  color: var(--color-accent);
}

.ing-row__namebtn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.ing-row__namebtn--static {
  cursor: default;
}

.ing-row__name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.ing-row__hindi {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.ing-row__affordance {
  align-self: center;
  opacity: 0;
  transform: translateY(1px);
  transition: opacity var(--transition-fast), transform var(--transition-smooth);
}

.ing-row__affordance svg {
  width: 13px;
  height: 13px;
  stroke: rgba(var(--color-science-rgb), 0.75);
  fill: none;
  stroke-width: 2;
}

.ing-row:hover .ing-row__affordance,
.ing-row__namebtn:focus-visible .ing-row__affordance {
  opacity: 1;
}

.ing-row.is-open .ing-row__affordance {
  opacity: 1;
  transform: rotate(180deg);
}

.ing-row__namebtn:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.7);
  outline-offset: 3px;
  border-radius: 2px;
}

.ing-row__qty {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--transition-fast);
  max-width: 34ch;
}

.ing-row__qty.is-scaled {
  color: var(--color-accent);
}

.ing-row__qty.is-fixed {
  opacity: 0.7;
}

/* Chemistry marginalia (expands under the row) */
.ing-row__science {
  grid-column: 2 / -1;
  margin-top: 0.7rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(var(--color-science-rgb), 0.45);
  animation: fadeInUp 0.3s ease-out;
}

.ing-row__compound {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-science, #F5A623);
  margin-bottom: 0.4rem;
}

.ing-row__science-text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 58ch;
}

/* "Hard to find?" — a quiet cook's whisper beside tricky ingredients.
   A soft swap tip: what it is, why it's used, and what to reach for instead. */
.ing-row__swap {
  grid-column: 2 / -1;
  margin: 0.55rem 0 0;
  padding: 0.5rem 0 0.1rem 0.85rem;
  border-left: 1px solid rgba(var(--color-science-rgb), 0.28);
  max-width: 60ch;
  animation: fadeInUp 0.4s ease-out;
}

.ing-row__swap-label {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
  margin-right: 0.5rem;
  white-space: nowrap;
}

.ing-row__swap-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Check control */
.ing-row__check {
  align-self: center;
  justify-self: end;
  width: 44px;
  height: 44px;
  margin: -10px 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  grid-row: 1;
  grid-column: 4;
}

.ing-row__check svg {
  width: 21px;
  height: 21px;
  transition: transform var(--transition-fast);
}

.ing-row__check:hover svg {
  transform: scale(1.12);
}

.ing-row__check:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.7);
  outline-offset: -6px;
}

.ing-row__check .check-mark {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset 0.3s ease 0.05s;
}

.ing-row.is-checked .ing-row__check .check-mark {
  stroke-dashoffset: 0;
}

.ing-row.is-checked .ing-row__check .check-ring {
  stroke: rgba(var(--color-science-rgb), 0.9);
  fill: rgba(var(--color-science-rgb), 0.14);
}

.ing-row.is-checked .ing-row__ordinal,
.ing-row.is-checked .ing-row__qty {
  opacity: 0.4;
}

.ing-row.is-checked .ing-row__name {
  color: var(--color-text-muted);
  position: relative;
  /* Native line-through, one stroke PER rendered line. The old approach was a
     single absolutely-positioned ::after bar at `top: 55%` spanning the whole
     element — correct on a one-line name, but on a name that wraps ("Ginger-
     Garlic Paste" at 390px) 55% of the COMBINED height lands in the gap between
     the two lines, striking neither and reading as a stray rule through the
     text. `skip-ink` keeps the stroke off descenders. */
  text-decoration: line-through 1px rgba(var(--color-science-rgb), 0.7);
  text-decoration-skip-ink: auto;
}

/* The old ::after bar is retired — the native stroke above replaces it on every
   line. Kept as an explicit `none` so any cached stylesheet or sibling rule that
   still sets it can't resurrect the misplaced bar. */
.ing-row.is-checked .ing-row__name::after {
  content: none;
}


@media (max-width: 640px) {
  .ing-row {
    grid-template-columns: 2.2rem minmax(0, 1fr) 44px;
    row-gap: 0.15rem;
  }
  .ing-row__ordinal { font-size: 0.95rem; }
  .ing-row__name { font-size: 1.15rem; }
  .ing-row__qty {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 0.76rem;
  }
  .ing-row__check { grid-row: 1 / span 2; grid-column: 3; }
  .ing-row__science { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  /* The checked-ingredient strike is now a static native line-through with no
     animation, so there is nothing to disable here. */
  .ing-row__check .check-mark { transition: none; }
  .ing-row__science { animation: none; }
  .scaler__nudge { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · COOK MODE
   ═══════════════════════════════════════════════════════════════════════ */

/* Entry FAB */
.cook-fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(var(--color-science-rgb), 0.35);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(var(--color-science-rgb), 0.25);
}

/* On desktop the FAB floats in the empty right margin — correct there. On a
   phone there IS no margin, so a floating pill sits directly on the ingredient
   column and permanently hides whatever is behind it (measured 4988px² of
   ingredient 05's text, with elementFromPoint confirming the FAB paints on
   top). Scrolling never helps: it's fixed to the viewport.
   Below 640px it becomes a docked bottom bar instead — the standard mobile
   treatment for a primary action — and `main` reserves exactly its height so
   nothing is ever underneath it. */
@media (max-width: 640px) {
  .cook-fab {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 12, 20, 0.94);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
  }

  .cook-fab.is-visible {
    transform: translateY(0);
  }

  /* Clearance equal to the docked bar's own height, so the final ingredient is
     always reachable. */
  body:has(.cook-fab) main {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.cook-fab svg {
  width: 20px;
  height: 20px;
}

.cook-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cook-fab:hover {
  border-color: rgba(var(--color-science-rgb), 0.7);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 24px 2px rgba(var(--color-science-rgb), 0.18);
}

.cook-fab:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.8);
  outline-offset: 3px;
}

body.cook-mode-open .cook-fab {
  opacity: 0;
  pointer-events: none;
}

/* Dialog shell */
.cook-mode {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.cook-mode::backdrop {
  background: rgba(4, 6, 10, 0.8);
  backdrop-filter: blur(6px);
}

.cook-mode__shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 860px;
  margin: 0 auto;
  padding: max(0.9rem, env(safe-area-inset-top)) 1.2rem max(0.9rem, env(safe-area-inset-bottom));
}

/* ── Ambient backdrop (signup-screen treatment): blurred dish photo + saffron
      glow + floating embers, all behind the working shell and non-interactive. */
.cook-mode__ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cook-mode__ambient-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Visible dish color at the edges, clean dark under the text. Balance: the
     photo is genuinely present (you can read the dish) but a radial mask keeps
     it OUT of the central text column, and the overlay gradient below darkens
     the middle band — so it never smears behind the words (rejected 2026-07-08
     was the over-dim over-correction; this brings it back). Higher opacity +
     less brightness-crush so bright dishes (lassi/rasgulla) still read as
     color, not grey. */
  opacity: 0.32;
  filter: blur(16px) brightness(0.6) saturate(1.25);
  transform: scale(1.12); /* hide blur-edge bleed */
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 8%, #000 62%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 8%, #000 62%);
  animation: cookAmbientDrift 40s ease-in-out infinite alternate;
}
.cook-mode__ambient-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(var(--color-science-rgb), 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 62% 55% at 50% 48%, rgba(8, 12, 20, 0.82) 30%, transparent 72%),
    linear-gradient(to bottom,
      rgba(8, 12, 20, 0.28) 0%,
      rgba(8, 12, 20, 0.7) 55%,
      rgba(8, 12, 20, 0.95) 100%);
}
.cook-mode__particles { position: absolute; inset: 0; }
.cook-mode__particle {
  position: absolute;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(var(--color-science-rgb), 0.9);
  box-shadow: 0 0 6px rgba(var(--color-science-rgb), 0.5);
  opacity: 0;
  animation: cookEmberRise var(--dur, 12s) var(--delay, 0s) infinite ease-out;
}
@keyframes cookEmberRise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  12%  { opacity: var(--max-op, 0.3); }
  88%  { opacity: var(--max-op, 0.3); }
  100% { opacity: 0; transform: translateY(-100dvh) scale(1); }
}
@keyframes cookAmbientDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .cook-mode__ambient-photo { animation: none; }
  .cook-mode__particle { display: none; }
}

/* Header */
.cook-mode__header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cook-mode__dots {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  flex: 1;
}

.cook-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cook-dot--prep { border-color: rgba(242, 221, 208, 0.4); }
.cook-dot--finish { border-color: rgba(76, 175, 80, 0.5); }

.cook-dot.is-done {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.cook-dot.is-current {
  transform: scale(1.45);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-science-rgb), 0.18);
}

.cook-dot.has-timer {
  animation: pulseGlow 1.6s ease-in-out infinite;
}

.cook-mode__timerchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: rgba(var(--color-science-rgb), 0.1);
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-accent);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.cook-mode__timerchip[hidden] { display: none; }
.cook-mode__timerchip svg { width: 14px; height: 14px; }
.cook-mode__timerchip em { font-style: normal; opacity: 0.7; }

.cook-mode__counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cook-mode__exit {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.cook-mode__exit svg { width: 18px; height: 18px; }
.cook-mode__exit:hover { border-color: rgba(var(--color-science-rgb), 0.5); background: rgba(var(--color-science-rgb), 0.06); }
.cook-mode__exit:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }

/* Timer-sound toggle (chime + spoken start/end cues). Pill with a label so
   its state is legible; dims when off. */
.cook-mode__sound {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 44px;
  padding: 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(var(--color-science-rgb), 0.08);
  border: 1px solid rgba(var(--color-science-rgb), 0.35);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}
.cook-mode__sound svg { width: 17px; height: 17px; flex-shrink: 0; }
.cook-mode__sound:hover { background: rgba(var(--color-science-rgb), 0.16); border-color: rgba(var(--color-science-rgb), 0.55); }
.cook-mode__sound:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }
.cook-mode__sound--off {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
/* On the narrowest widths the label hides (icon alone), like the counter. */
@media (max-width: 560px) {
  .cook-mode__sound span { display: none; }
  .cook-mode__sound { padding: 0; width: 44px; justify-content: center; }
}

/* Stage / step */
.cook-mode__stage {
  flex: 1;
  overflow-y: auto;
  padding: 1.6rem 0.2rem;
  touch-action: pan-y;
  /* Slim saffron-tinted scrollbar — the default grey bar was off-brand. */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-science-rgb), 0.35) transparent;
}
.cook-mode__stage::-webkit-scrollbar { width: 6px; }
.cook-mode__stage::-webkit-scrollbar-track { background: transparent; }
.cook-mode__stage::-webkit-scrollbar-thumb {
  background: rgba(var(--color-science-rgb), 0.28);
  border-radius: 100px;
  transition: background 0.25s;
}
.cook-mode__stage:hover::-webkit-scrollbar-thumb { background: rgba(var(--color-science-rgb), 0.45); }
.cook-mode__stage::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-science-rgb), 0.6); }

.cook-step {
  animation: fadeInUp 0.35s ease-out;
}

/* ── Focus dim: while a science <details> is open, everything else softly
      blurs (camera rack-focus) and sharpens back on close. Driven by ONE
      class on the dialog (.cook-mode--focus, synced from the live DOM in
      cook-mode.js) so it can never stick after a step change. Elements stay
      clickable — no pointer traps. */
.cook-step > *,
.cook-mode__header,
.cook-mode__footer,
.cook-clock {
  filter: blur(0);
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.cook-mode--focus .cook-step > *:not(details[open]),
.cook-mode--focus .cook-mode__header,
.cook-mode--focus .cook-mode__footer,
.cook-mode--focus .cook-clock {
  filter: blur(4px);
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .cook-step > *,
  .cook-mode__header,
  .cook-mode__footer,
  .cook-clock {
    transition: none;
  }
}

.cook-step__meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cook-step__phase {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  color: var(--color-accent);
}

.cook-step__phase--prep { border-color: rgba(242, 221, 208, 0.35); color: var(--color-blush); }
.cook-step__phase--finish { border-color: rgba(76, 175, 80, 0.4); color: var(--color-herb, #4caf50); }

.cook-step__duration {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.cook-step__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
}

.cook-step.is-done .cook-step__title {
  color: rgba(255, 255, 255, 0.55);
}

.cook-step__description {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.cook-step__description strong { color: var(--color-text-primary); font-weight: 500; }

.cook-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem;
}

.cook-step__tag {
  padding: 0.42rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
}

.cook-step__tag em {
  font-style: normal;
  color: var(--color-accent);
}

.cook-step__temp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-chili, #e63946);
  background: rgba(230, 57, 70, 0.07);
  border: 1px solid rgba(230, 57, 70, 0.2);
  border-radius: var(--radius-full);
}

.cook-step__temp svg { width: 16px; height: 16px; }

/* Timer card */
.cook-timer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding: 0.5rem 0.2rem;
  /* No outer box in the idle state — the row is just a labelled line with ONE
     button, so the Start pill isn't a box-in-a-box. The running/done states
     re-add a subtle surface below (they're a status, not just an action). */
}
.cook-timer--running,
.cook-timer--done {
  padding: 0.9rem 1.1rem;
  background: rgba(var(--color-science-rgb), 0.06);
  border: 1px solid rgba(var(--color-science-rgb), 0.22);
  border-radius: var(--radius-md);
}

.cook-timer__icon svg { width: 22px; height: 22px; display: block; }

.cook-timer__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
}

.cook-timer__readout {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.cook-timer--running .cook-timer__readout { color: var(--color-accent); }

.cook-timer--done {
  border-color: rgba(76, 175, 80, 0.5);
  background: rgba(76, 175, 80, 0.08);
  /* No pulse/glow behind the bar — rejected 2026-08-05 ("looks nasty").
     The green border + tint carry the state on their own. */
}

.cook-timer__btn {
  margin-left: auto;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--color-accent);
  background: rgba(var(--color-science-rgb), 0.1);
  border: 1px solid rgba(var(--color-science-rgb), 0.4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cook-timer__btn + .cook-timer__btn { margin-left: 0.4rem; }
.cook-timer__btn:hover { background: rgba(var(--color-science-rgb), 0.2); }
.cook-timer__btn:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }

/* Bare cross that cancels/dismisses the inline running/done bar — a pill
   button inside the status box read as box-in-a-box (rejected 2026-08-05).
   Colored by the bar's state via currentColor. */
/* The control group hugs the right edge as ONE unit: the first button carries
   the auto-margin, the rest simply follow it (a per-button auto-margin would
   scatter them apart — the same orphan trap as a wrapping filter bar). */
.cook-timer__x { margin-left: 0.1rem; }
.cook-timer__readout ~ .cook-timer__x:first-of-type { margin-left: auto; }
.cook-timer__pausedtag {
  margin-left: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.cook-timer--paused .cook-timer__readout { color: rgba(255, 255, 255, 0.62); }

.cook-timer__x {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cook-timer__x svg { width: 18px; height: 18px; }
.cook-timer__x:hover { background: rgba(var(--color-science-rgb), 0.12); }
.cook-timer__x:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }
.cook-timer--done .cook-timer__x { color: var(--color-herb, #4caf50); }
.cook-timer--done .cook-timer__x:hover { background: rgba(76, 175, 80, 0.12); }
.cook-timer--done .cook-timer__x:focus-visible { outline-color: rgba(76, 175, 80, 0.8); }

/* Idle "Start N min" state — play glyph + verb so the pill reads as a button,
   not a stat (microcopy rule: buttons say exactly what happens). */
.cook-timer__btn--start {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.cook-timer__play { flex-shrink: 0; }
.cook-timer__btn--start:hover .cook-timer__play path {
  fill: rgba(var(--color-science-rgb), 0.35);
}

/* ── The Watchmaker's Dial — desktop floating timer ─────────────────────
   On wide viewports the RUNNING/DONE timer leaves the text column and
   becomes a kitchen timepiece in the right gutter: 60 engraved ticks, a
   saffron arc draining in real time, one quiet control beneath. Gated to
   ≥1280px — below that (tablet/mobile) the inline bar remains and this
   element stays display:none. Idle "Start" pills always stay inline:
   they're an action in the step's flow, not a status. */
.cook-clock { display: none; }

@media (min-width: 1280px) {
  .cook-clock {
    position: fixed;
    top: 21dvh;
    /* Center of the free gutter right of the 860px shell:
       midpoint of [50vw + 430px … 100vw] = 75vw + 215px. */
    left: calc(75vw + 215px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    animation: cookClockRise 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Display gate must never beat the hidden attribute (the [hidden] trap). */
  .cook-clock[hidden] { display: none !important; }

  /* The dial replaces the inline running/done bar out here — never both. */
  .cook-timer--running,
  .cook-timer--done { display: none; }

  .cook-clock__dial {
    position: relative;
    width: 176px;
    height: 176px;
  }
  /* Soft saffron aura behind the glass — ambient, not a card shadow. */
  .cook-clock__dial::before {
    content: "";
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-science-rgb), 0.1) 0%, transparent 65%);
    pointer-events: none;
  }
  .cook-clock__dial svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .cook-clock__face {
    fill: rgba(8, 12, 20, 0.55);
    stroke: rgba(255, 255, 255, 0.09);
  }
  .cook-clock__track { stroke: rgba(var(--color-science-rgb), 0.14); }
  .cook-clock__arc {
    stroke: var(--color-accent);
    transition: stroke-dashoffset 1s linear, stroke 0.4s ease;
  }
  .cook-clock__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }
  .cook-clock__readout {
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    transition: color 0.35s ease;
  }
  .cook-clock__sub {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(var(--color-science-rgb), 0.7);
    transition: color 0.35s ease;
  }
  /* The running⇄paused colour shift eases rather than snapping. */
  .cook-clock__dial::before { transition: background 0.35s ease; }
  .cook-clock__step {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  /* Control row — three bare glyphs, no boxes. Pause/Play is the primary and
     reads slightly larger and brighter; reset and cancel sit quieter beside
     it. The hierarchy is weight and opacity, never a border. */
  .cook-clock__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
  }
  .cook-clock__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--color-accent);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast),
      transform var(--transition-fast);
  }
  .cook-clock__ctrl[hidden] { display: none !important; }
  .cook-clock__ctrl svg {
    width: 19px;
    height: 19px;
    display: block;
    /* Pause ⇄ play swaps the glyph in place; a short scale-in keeps it from
       reading as a hard cut. */
    animation: cookGlyphIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cook-clock__ctrl--primary { opacity: 0.95; }
  .cook-clock__ctrl--primary svg { width: 24px; height: 24px; }
  .cook-clock__ctrl:hover {
    opacity: 1;
    background: rgba(var(--color-science-rgb), 0.1);
    transform: scale(1.06);
  }
  .cook-clock__ctrl:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(var(--color-science-rgb), 0.8);
    outline-offset: 2px;
  }

  /* Paused — the ring and numerals cool to a neutral grey so a stopped clock
     never looks like a running one at a glance across the kitchen. */
  .cook-clock--paused .cook-clock__arc { stroke: rgba(255, 255, 255, 0.5); }
  .cook-clock--paused .cook-clock__readout { color: rgba(255, 255, 255, 0.72); }
  .cook-clock--paused .cook-clock__sub { color: rgba(255, 255, 255, 0.45); }
  .cook-clock--paused .cook-clock__dial::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 65%);
  }

  /* Time's up — the dial turns herb-green and breathes until dismissed. */
  .cook-clock--done .cook-clock__arc { stroke: var(--color-herb, #4caf50); }
  .cook-clock--done .cook-clock__readout,
  .cook-clock--done .cook-clock__sub { color: var(--color-herb, #4caf50); }
  .cook-clock--done .cook-clock__dial { animation: cookClockPulse 1.6s ease-in-out infinite; }
  .cook-clock--done .cook-clock__dial::before {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.14) 0%, transparent 65%);
  }
  .cook-clock--done .cook-clock__ctrl { color: var(--color-herb, #4caf50); opacity: 0.95; }
  .cook-clock--done .cook-clock__ctrl:hover { background: rgba(76, 175, 80, 0.14); }
  .cook-clock--done .cook-clock__ctrl:focus-visible { outline-color: rgba(76, 175, 80, 0.8); }
}

@keyframes cookGlyphIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cookClockRise {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes cookClockPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .cook-clock { animation: none; }
  .cook-clock__arc { transition: stroke 0.4s ease; }
  .cook-clock--done .cook-clock__dial { animation: none; }
  .cook-clock__ctrl svg { animation: none; }
}

/* Science accordion + chef tip inside a step */
.cook-step__science {
  margin-top: 1.4rem;
  border: 1px solid rgba(var(--color-science-rgb), 0.18);
  border-radius: var(--radius-md);
  background: rgba(var(--color-science-rgb), 0.04);
}

.cook-step__science summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 1px;
  color: var(--color-science, #F5A623);
}

.cook-step__science summary::-webkit-details-marker { display: none; }
.cook-step__science summary svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }

.cook-step__science p {
  padding: 0 1.05rem 1rem;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.cook-step__tip {
  margin-top: 1.2rem;
  padding: 0.95rem 1.1rem;
  border-left: 2px solid rgba(var(--color-science-rgb), 0.6);
  background: rgba(var(--color-science-rgb), 0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cook-step__tip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.8);
  margin-bottom: 0.4rem;
}

.cook-step__tip p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Footer */
.cook-mode__footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* The completion screen carries its own actions (Close, Cook again, Add to
   plan), so the step-navigation footer underneath it is redundant — it put a
   SECOND `.cook-mode__done` exit ("FINISH") directly below the first
   ("CLOSE"), two identical-looking primary buttons 82px apart offering the
   same way out. One screen, one primary action. */
.cook-mode__stage:has(.cook-complete) ~ .cook-mode__footer,
.cook-mode:has(.cook-complete) .cook-mode__footer {
  display: none;
}

.cook-mode__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.cook-mode__tool svg { width: 17px; height: 17px; }

/* Cook Mode is used with wet, greasy hands at arm's length on a counter — the
   one place on the site where an undersized target really costs something.
   Measured 40-41px on the tool buttons ("Cook again", the icon-only sound and
   timer controls) against Apple's 44px minimum. */
@media (max-width: 900px) {
  .cook-mode__tool {
    min-height: 44px;
  }
  .cook-mode__tool:not(:has(span)),
  .cook-complete__actions .cook-mode__tool {
    min-width: 44px;
    justify-content: center;
  }
}
.cook-mode__tool:hover { border-color: rgba(var(--color-science-rgb), 0.45); color: var(--color-text-primary); }
.cook-mode__tool:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }
/* Active read-aloud: filled saffron + soft pulse so "it's speaking, tap to stop"
   is obvious. */
.cook-mode__tool.is-speaking {
  color: var(--color-accent);
  border-color: rgba(var(--color-science-rgb), 0.6);
  background: rgba(var(--color-science-rgb), 0.12);
  animation: cookSpeakPulse 1.6s ease-in-out infinite;
}
@keyframes cookSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-science-rgb), 0.28); }
  50% { box-shadow: 0 0 0 5px rgba(var(--color-science-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cook-mode__tool.is-speaking { animation: none; }
}

.cook-mode__nav {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}

.cook-mode__navbtn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.cook-mode__navbtn svg { width: 20px; height: 20px; }
.cook-mode__navbtn:disabled { opacity: 0.3; cursor: default; }
.cook-mode__navbtn:not(:disabled):hover { border-color: rgba(var(--color-science-rgb), 0.5); color: var(--color-text-primary); }
.cook-mode__navbtn:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }

.cook-mode__done {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  background: var(--gradient-saffron, linear-gradient(135deg, #f5a623, #ffd700, #f5a623));
  color: #14100a;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 4px 20px rgba(var(--color-science-rgb), 0.25);
}

.cook-mode__done svg { width: 18px; height: 18px; }
.cook-mode__done:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(var(--color-science-rgb), 0.4); }
.cook-mode__done:active { transform: translateY(0) scale(0.98); }
.cook-mode__done:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Complete state */
.cook-complete {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: fadeInUp 0.5s ease-out;
  padding: 2rem 1rem;
}

.cook-complete__emblem {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-science-rgb), 0.35);
  background: radial-gradient(circle, rgba(var(--color-science-rgb), 0.12) 0%, transparent 70%);
  margin-bottom: 1.6rem;
  animation: breathe 3.2s ease-in-out infinite;
}

.cook-complete__emblem svg { width: 42px; height: 42px; }

.cook-complete__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.7);
  margin: 0 0 0.7rem;
}

.cook-complete__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  margin: 0 0 1rem;
}

.cook-complete__stats {
  display: flex;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 1.4rem;
}

.cook-complete__text {
  max-width: 42ch;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 2rem;
}

.cook-complete__actions {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

/* ── Next-up block on the completion screen (Retention MVP Build 1) ─────── */
.cook-complete__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 2rem;
}

.cook-complete__next-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
  margin: 0;
}

.cook-next-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  border: 1px solid rgba(var(--color-science-rgb), 0.25);
  border-radius: 14px;
  background: rgba(var(--color-science-rgb), 0.06);
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.cook-next-card:hover {
  border-color: rgba(var(--color-science-rgb), 0.55);
  background: rgba(var(--color-science-rgb), 0.1);
  transform: translateY(-2px);
}

.cook-next-card__img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}

.cook-next-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.cook-next-card__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cook-next-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.cook-complete__plan {
  font-size: 0.82rem;
}

/* Screen-reader live region */
.cook-mode__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cook-mode__shell { padding-left: 1rem; padding-right: 1rem; }
  .cook-mode__counter { display: none; }
  .cook-mode__tool span { display: none; }
  .cook-mode__tool { padding: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cook-step,
  .cook-complete,
  .cook-fab,
  .cook-dot.has-timer,
  .cook-timer--done,
  .cook-complete__emblem {
    animation: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · SCROLLYTELLING JOURNEY
   ═══════════════════════════════════════════════════════════════════════ */

/* Two-column grid with sticky rail (desktop) */
.journey-grid {
  position: relative;
}

.journey-rail {
  display: none;
}

.journey-strip {
  display: none;
}

@media (min-width: 1024px) {
  .journey-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 3.5rem;
    align-items: start;
  }

  .journey-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    position: sticky;
    top: calc(var(--nav-offset) + var(--space-md));
    padding: 2rem 1.4rem;
    background: var(--color-bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .journey-arc {
    position: relative;
    width: 120px;
    height: 120px;
  }

  .journey-arc svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .journey-arc circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
  }

  .journey-arc__track {
    stroke: rgba(255, 255, 255, 0.06);
  }

  .journey-arc__seg {
    opacity: 0.28;
    transition: opacity var(--transition-smooth);
  }

  .journey-rail[data-phase="prep"] .journey-arc__seg[data-phase="prep"],
  .journey-rail[data-phase="cook"] .journey-arc__seg[data-phase="cook"],
  .journey-rail[data-phase="finish"] .journey-arc__seg[data-phase="finish"] {
    opacity: 0.9;
  }

  .journey-arc__progress {
    stroke: var(--color-accent);
    stroke-width: 3.5;
    filter: drop-shadow(0 0 6px rgba(var(--color-science-rgb), 0.45));
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .journey-arc__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .journey-arc__num {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-text-primary);
  }

  .journey-arc__total {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
  }

  .journey-rail__phase {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(var(--color-science-rgb), 0.75);
    transition: color var(--transition-smooth);
  }

  .journey-rail[data-phase="prep"] .journey-rail__phase { color: var(--color-rose-gold, #d4a89a); }
  .journey-rail[data-phase="cook"] .journey-rail__phase { color: var(--color-chili, #e63946); }
  .journey-rail[data-phase="finish"] .journey-rail__phase { color: var(--color-herb, #4caf50); }

  .journey-rail__title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    min-height: 3em;
  }

  .journey-rail__temp {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-chili, #e63946);
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(230, 57, 70, 0.25);
    border-radius: var(--radius-full);
    background: rgba(230, 57, 70, 0.06);
  }
}

/* Mobile sticky phase strip */
@media (max-width: 1023px) {
  .journey-strip {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: sticky;
    /* was 64px — slid under the ~79px nav on phones (2026-08-06) */
    top: var(--nav-offset);
    z-index: 40;
    margin: 0 0 1.4rem;
    padding: 0.55rem 1rem;
    background: rgba(8, 12, 20, 0.82);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-full);
  }

  .journey-strip__phase {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(var(--color-science-rgb), 0.8);
    white-space: nowrap;
  }

  .journey-strip[data-phase="prep"] .journey-strip__phase { color: var(--color-rose-gold, #d4a89a); }
  .journey-strip[data-phase="cook"] .journey-strip__phase { color: var(--color-chili, #e63946); }
  .journey-strip[data-phase="finish"] .journey-strip__phase { color: var(--color-herb, #4caf50); }

  .journey-strip__count {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
  }

  .journey-strip__bar {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    overflow: hidden;
  }

  .journey-strip__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light, #ffd700));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-arc__progress,
  .journey-strip__fill {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · THE LAB — heat map + spice-bloom band
   ═══════════════════════════════════════════════════════════════════════ */

.heat-lab {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .heat-lab {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }
}

.heat-lab__dial {
  padding: 1.8rem 1.6rem 2.6rem;
  background: var(--color-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

.heat-lab__readout {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 2.6rem;
}

.heat-lab__temp {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 4.4rem);
  line-height: 1;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}

.heat-lab__unit {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--color-text-muted);
}

.heat-lab__f {
  margin-left: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.56);
}

.heat-lab[data-tone="gold"] .heat-lab__temp { color: var(--color-accent); }
.heat-lab[data-tone="hot"] .heat-lab__temp { color: var(--color-chili, #e63946); }
.heat-lab[data-tone="cool"] .heat-lab__temp { color: var(--color-science, #F5A623); }
.heat-lab[data-tone="warm"] .heat-lab__temp { color: var(--color-turmeric, #e8a317); }

.heat-lab__track {
  position: relative;
}

.heat-lab__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #1a2238 0%,
    #24406b 22%,
    #5a4a2a 38%,
    var(--color-accent) 60%,
    var(--color-chili, #e63946) 76%,
    #3a0f12 100%
  );
  outline: none;
  cursor: pointer;
}

.heat-lab__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9c2, var(--color-accent) 70%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 16px rgba(var(--color-science-rgb), 0.55);
  cursor: grab;
  transition: transform var(--transition-fast);
}

.heat-lab__slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.heat-lab__slider::-webkit-slider-thumb:active { cursor: grabbing; }

.heat-lab__slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9c2, var(--color-accent) 70%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 16px rgba(var(--color-science-rgb), 0.55);
  cursor: grab;
}

.heat-lab__slider:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.8);
  outline-offset: 6px;
  border-radius: 4px;
}

.heat-lab__marks {
  position: relative;
  height: 1.4rem;
  margin-top: 0.6rem;
}

.heat-lab__mark {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
}

/* The three scale words are wider than the gaps between their ticks on a phone
   — measured "100° boil" running into "150° Maillard" by 1.4px and that into
   "200° smoke" by 4.5px, printing as one unreadable run of text. The
   temperature IS the scale; the word is the gloss, so the word steps aside and
   the numbers stay honest. The zone name is always spelled out in the card
   directly below, so no information is lost. */
@media (max-width: 560px) {
  .heat-lab__mark-word {
    display: none;
  }
}

.heat-lab__mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.75rem;
  width: 1px;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
}

/* Step pins above the track.

   Height is driven by --pin-rows (set by science-lab.js to the number of rows
   the de-collision pass actually used), so a recipe with several steps at
   similar temperatures gets the vertical room it needs instead of stacking
   two pins in one place. */
.heat-lab__pins {
  position: relative;
  height: calc(34px + (var(--pin-rows, 2) - 1) * 38px + 0.6rem);
  margin-bottom: 0.4rem;
}

/* --pin-row is stamped per pin (0 = nearest the track). Row 1 was previously
   the only lift available, which is why crowded pins collided. */
.heat-pin {
  bottom: calc(var(--pin-row, 0) * 38px);
}

.heat-pin {
  position: absolute;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 20, 0.9);
  border: 1.5px solid rgba(var(--color-science-rgb), 0.6);
  border-radius: 50% 50% 50% 4px;
  rotate: 0deg;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.heat-pin__num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-accent);
}

.heat-pin:hover {
  transform: translateX(-50%) scale(1.2);
  box-shadow: 0 0 14px rgba(var(--color-science-rgb), 0.4);
}

.heat-pin:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.8);
  outline-offset: 2px;
}

/* Zone card */
.heat-lab__card {
  padding: 1.7rem 1.7rem 1.9rem;
  background: var(--color-bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

.heat-lab__card.is-swapping {
  animation: heat-card-in 0.35s ease-out;
}

@keyframes heat-card-in {
  from { opacity: 0.35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.heat-lab__zone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.heat-lab__zone-name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--color-text-primary);
}

.heat-lab__zone-span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.56);
  white-space: nowrap;
}

.heat-lab__zone-body {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.heat-lab__compounds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.heat-lab__compound {
  padding: 0.38rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: var(--color-science, #F5A623);
  background: rgba(var(--color-science-rgb), 0.06);
  border: 1px solid rgba(var(--color-science-rgb), 0.18);
  border-radius: var(--radius-full);
}

.heat-lab__pinhint {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.heat-lab__jump {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--color-science-rgb), 0.4);
}

.heat-lab__jump:hover { text-decoration-color: var(--color-accent); }
.heat-lab__jump:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }

/* Spice-bloom timing band (inside timeline steps that temper/bloom) */
.bloom-band {
  margin: 1.4rem 0;
  padding: 1rem 1.1rem 0.8rem;
  background: rgba(var(--color-science-rgb), 0.04);
  border: 1px solid rgba(var(--color-science-rgb), 0.14);
  border-radius: var(--radius-sm);
}

.bloom-band__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.7);
  margin-bottom: 0.8rem;
}

.bloom-band__track {
  position: relative;
  height: 26px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.bloom-band__seg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scaleX(0);
  transform-origin: left center;
}

.timeline-step.revealed .bloom-band__seg {
  transform: scaleX(1);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.bloom-band__seg em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

.bloom-band__seg--ground {
  background: rgba(232, 163, 23, 0.35);
  border: 1px solid rgba(232, 163, 23, 0.5);
}

.bloom-band__seg--whole {
  background: rgba(var(--color-science-rgb), 0.3);
  border: 1px solid rgba(var(--color-science-rgb), 0.55);
}

.bloom-band__burn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--burn-left, 83%);
  background: repeating-linear-gradient(
    -45deg,
    rgba(230, 57, 70, 0.18),
    rgba(230, 57, 70, 0.18) 4px,
    transparent 4px,
    transparent 8px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.bloom-band__burn em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-chili, #e63946);
}

.bloom-band__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-subtle, rgba(255, 255, 255, 0.25));
}

@media (prefers-reduced-motion: reduce) {
  .heat-lab__card.is-swapping { animation: none; }
  .bloom-band__seg,
  .timeline-step.revealed .bloom-band__seg {
    transform: scaleX(1);
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   5 · AMBIENCE & MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════ */

.recipe-stat__icon {
  transition: transform var(--transition-fast);
}

.recipe-stat:hover .recipe-stat__icon {
  transform: scale(1.1);
  animation: breathe 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .recipe-stat:hover .recipe-stat__icon {
    animation: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   6 · EDITORIAL HERO — cinematic cover, hairline meta row (no icon boxes)
   ═══════════════════════════════════════════════════════════════════════ */

.recipe-hero__cuisine {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
}

.recipe-hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0.5rem 0 1rem;
}

.recipe-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
}

.recipe-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(var(--color-science-rgb), 0.25);
  max-width: 720px;
}

.recipe-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
}

.recipe-meta__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
}

.recipe-meta .recipe-stat__value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  font-variant-numeric: tabular-nums lining-nums;
}

.recipe-meta__sep {
  color: rgba(var(--color-science-rgb), 0.45);
  font-size: 0.8rem;
}

.recipe-meta .heat-dots {
  display: inline-flex;
  gap: 4px;
  align-self: center;
}

@media (max-width: 640px) {
  .recipe-meta__sep { display: none; }
  .recipe-meta { gap: 0.7rem 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7 · CHAPTERS — the journey as typography (ghost numerals, act breaks)
   ═══════════════════════════════════════════════════════════════════════ */

.cooking-timeline {
  padding-left: 0; /* kill the legacy marker gutter */
  margin-top: 1rem;
}

.cooking-timeline::before {
  display: none; /* legacy gradient line retired on this page */
}

/* Act groups — each act is a collapsible section; the divider is its button */
.act-group {
  margin-top: 4.5rem;
}

.act-group:first-child {
  margin-top: 2rem;
}

/* A folded act reads as a single index line — pull the next act up so
   stacked folded acts sit as a neat table of contents, not islands. */
.act-group--collapsed + .act-group {
  margin-top: 1.6rem;
}

/* The fold: grid-rows 1fr→0fr animates height without measuring it */
.act-group__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.act-group__inner {
  min-height: 0;
  overflow: hidden;
}

.act-group--collapsed .act-group__body {
  grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: reduce) {
  .act-group__body { transition: none; }
}

/* Act dividers — the only full-width structural breaks. Real <button>s. */
.act-divider {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: 0 0 2.8rem;
  width: 100%;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.act-divider:focus-visible {
  outline: 1px solid rgba(var(--color-science-rgb), 0.6);
  outline-offset: 4px;
  border-radius: 2px;
}

.act-group--collapsed .act-divider {
  margin-bottom: 0;
}

.act-divider__act {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-accent);
  white-space: nowrap;
}

.act-divider__label {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

.act-divider__count {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55); /* AA on #080C14 */
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.act-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-science-rgb), 0.35), rgba(var(--color-science-rgb), 0.04));
  transition: background var(--transition-slow, 0.4s ease);
}

.act-divider:hover .act-divider__line {
  background: linear-gradient(90deg, rgba(var(--color-science-rgb), 0.6), rgba(var(--color-science-rgb), 0.12));
}

/* Fold indicator — thin stroke chevron, points down open / left closed */
.act-divider__chev {
  align-self: center;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease;
}

.act-divider:hover .act-divider__chev {
  color: var(--color-accent);
}

.act-divider__chev svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.act-group--collapsed .act-divider__chev svg {
  transform: rotate(-90deg);
}

.act-divider[data-phase="prep"] .act-divider__act { color: var(--color-rose-gold, #d4a89a); }
.act-divider[data-phase="cook"] .act-divider__act { color: var(--color-chili, #e63946); }
.act-divider[data-phase="finish"] .act-divider__act { color: var(--color-herb, #4caf50); }

/* ── Chapter — the "dum seal" spine ──────────────────────────────────────
   Signature: a continuous saffron thread runs down the left edge like the
   sealed rim of a dum pot. Each step is a WAX-SEAL node on the thread; when
   a step is done the seal "closes" (fills saffron) and the thread above it
   turns solid — the pot progressively sealing as you cook. The numeral only
   LABELS the node; it never underlays the title. One display device per
   region; no ghost numeral, no drop cap. */
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.8rem;
  margin-bottom: 3.6rem;
}

/* The spine column: thread + seal node, vertically centered on the head */
.chapter__seal {
  position: relative;
  grid-column: 1;
  display: flex;
  justify-content: center;
}

/* The connecting thread — faint at rest, solid saffron once the step is done.
   Drawn from just below this node up into the previous one. */
.chapter__thread {
  position: absolute;
  top: 2.4rem;           /* start below the node */
  bottom: -3.6rem;       /* reach into the next chapter's node */
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(var(--color-science-rgb), 0.14);
  transition: background var(--transition-slow);
}

.chapter--last .chapter__thread { display: none; }

/* A chapter that ends its act shouldn't trail its thread past the fold —
   cap it at the node. (Acts wrap their chapters, so last-child = act end.) */
.act-group__inner .chapter:last-child .chapter__thread { display: none; }

.chapter.is-done .chapter__thread {
  background: linear-gradient(180deg, rgba(var(--color-science-rgb), 0.85), rgba(var(--color-science-rgb), 0.3));
}

/* The seal node — a disc carrying the step numeral */
.chapter__node {
  position: relative;
  z-index: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(8, 12, 20, 0.9);
  box-shadow: inset 0 0 0 1px rgba(var(--color-science-rgb), 0.16);
  transition: box-shadow var(--transition-smooth);
}

/* the seal glyph — hidden at rest, revealed (pressed) when the step is done */
.chapter__node svg {
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  opacity: 0;
  transform: scale(0.7) rotate(-8deg);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}

.chapter__num {
  font-family: var(--font-mono);
  font-size: 0.82rem; /* ≥12px */
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

/* Active step: node ring ignites, numeral brightens */
.chapter.is-active .chapter__node {
  box-shadow: inset 0 0 0 1.5px rgba(var(--color-science-rgb), 0.7);
}
.chapter.is-active .chapter__num { color: var(--color-accent); }

/* Phase tints the resting ring (color is reinforced by the kicker word) */
.chapter[data-phase="prep"] .chapter__node { box-shadow: inset 0 0 0 1px rgba(212, 168, 154, 0.35); }
.chapter[data-phase="cook"] .chapter__node { box-shadow: inset 0 0 0 1px rgba(230, 57, 70, 0.32); }
.chapter[data-phase="finish"] .chapter__node { box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.32); }
.chapter.is-active[data-phase="prep"] .chapter__node,
.chapter.is-active[data-phase="cook"] .chapter__node,
.chapter.is-active[data-phase="finish"] .chapter__node {
  box-shadow: inset 0 0 0 1.5px rgba(var(--color-science-rgb), 0.7);
}

/* Done: the seal closes — numeral fades out, wax seal presses in */
.chapter.is-done .chapter__node {
  box-shadow: inset 0 0 0 1.5px rgba(var(--color-science-rgb), 0.5);
}
.chapter.is-done .chapter__num {
  opacity: 0;
}
.chapter.is-done .chapter__node svg {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.chapter__body {
  grid-column: 2;
  min-width: 0;
  padding-top: 0.1rem;
}

.chapter__head {
  position: relative;
}

.chapter__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.chapter__kicker--prep { color: rgba(212, 168, 154, 0.9); }
.chapter__kicker--cook { color: #e63946; } /* full opacity → AA 4.7:1 */
.chapter__kicker--finish { color: rgba(76, 175, 80, 0.9); }

.chapter__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0.35rem 0 1.1rem;
  color: var(--color-text-primary);
  transition: color var(--transition-smooth);
}

.chapter.is-done .chapter__title {
  color: rgba(255, 255, 255, 0.62);
}

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 36em) minmax(11rem, 14rem);
  gap: 0 2.6rem;
  align-items: start;
}

.chapter__desc {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  font-variant-numeric: oldstyle-nums;
}

.chapter__desc strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Voice 2 — science: italic serif, saffron hairline, no box */
.chapter__science {
  margin-top: 1.5rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(var(--color-science-rgb), 0.45);
}

.chapter__science-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-science, #F5A623);
  margin-bottom: 0.45rem;
}

.chapter__science-label svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.chapter__science p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
}

/* Voice 3 — chef tip: saffron hairline + mono kicker */
.chapter__tip {
  margin-top: 1.3rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(var(--color-science-rgb), 0.55);
}

.chapter__tip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
  margin-bottom: 0.45rem;
}

.chapter__tip p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* Margin notes — Tufte-style data column */
.chapter__margin {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding-left: 1.4rem;
  min-height: 3rem;
}

.chapter__duration {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums lining-nums;
}

.chapter__temp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  line-height: 1.5;
  color: var(--color-chili, #e63946);
}

.chapter__temp svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.chapter__uses {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* ≥12px */
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.62);
}

.chapter__uses-label {
  display: block;
  font-size: 0.75rem; /* ≥12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
  margin-bottom: 0.25rem;
}

.chapter__use-sep {
  color: rgba(var(--color-science-rgb), 0.5);
  padding: 0 0.35rem;
}

/* ── Cook's glossary: the "i" on a jargon term + its definition popover ──
   Kitchen vocabulary (mise en place, bhuna, maillard) carries a small info
   glyph that explains it in plain words on hover or tap. Ingredient tags,
   which already show a quantity, never get one. Built 2026-08-05 after
   "what the heck is this knife work? I say in place. I don't know what
   that is." — the jargon stays (it's the real name of the technique), but
   it can no longer appear without a way to find out what it means. */
.term-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  width: 15px;
  height: 15px;
  margin-left: 0.35rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  /* The glyph is small; extend the *hit* area to a comfortable target
     without changing the layout box (the chip must not grow). */
  position: relative;
}
.term-info::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
.term-info svg {
  width: 100%;
  height: 100%;
  display: block;
}
.term-info:hover,
.term-info[aria-expanded="true"] {
  opacity: 1;
  transform: scale(1.12);
}
.term-info:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.8);
  outline-offset: 3px;
  opacity: 1;
}

.term-pop {
  position: fixed;
  z-index: 2147483000; /* above Cook Mode's top-layer <dialog> */
  width: min(310px, calc(100vw - 24px));
  padding: 0.95rem 1.05rem 1.05rem;
  background: rgba(10, 14, 22, 0.97);
  border: 1px solid rgba(var(--color-science-rgb), 0.28);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}
.term-pop.is-open {
  opacity: 1;
  transform: translateY(0);
}
.term-pop[hidden] { display: none !important; }
/* When re-parented into the Cook Mode dialog (top-layer fix), never inherit
   the focus-dim blur — the definition must stay sharp and readable. */
.cook-mode--focus .term-pop,
.cook-mode .term-pop {
  filter: none !important;
  opacity: inherit;
}
.cook-mode .term-pop.is-open { opacity: 1; }

/* Arrow — tracks the chip via --arrow-x even when the body is clamped
   away from centre near a viewport edge. */
.term-pop::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: rgba(10, 14, 22, 0.97);
  border-right: 1px solid rgba(var(--color-science-rgb), 0.28);
  border-bottom: 1px solid rgba(var(--color-science-rgb), 0.28);
  transform: rotate(45deg);
}
.term-pop--below::after {
  bottom: auto;
  top: -5px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(var(--color-science-rgb), 0.28);
  border-top: 1px solid rgba(var(--color-science-rgb), 0.28);
}

.term-pop__origin {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
  margin-bottom: 0.3rem;
}
.term-pop__label {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: 0.45rem;
}
.term-pop__what {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .term-info,
  .term-pop { transition: none; }
  .term-info:hover,
  .term-info[aria-expanded="true"] { transform: none; }
}

/* Tablet/mobile: narrower spine, prose fills, margin notes fold inline */
@media (max-width: 900px) {
  .chapter {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0 1.2rem;
    margin-bottom: 2.8rem;
  }
  .chapter__node {
    width: 2.3rem;
    height: 2.3rem;
  }
  .chapter__node svg { width: 1.5rem; height: 1.5rem; }
  .chapter__thread { top: 2.2rem; bottom: -2.8rem; }
  .chapter__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem 0;
  }
  .chapter__margin {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.8rem 0 0;
    order: 2;
  }
  .chapter__uses { flex-basis: 100%; }
}

/* Small phones: keep a slim spine gutter (320px safe) */
@media (max-width: 400px) {
  .chapter {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.9rem;
  }
  .chapter__node { width: 2rem; height: 2rem; }
  .chapter__node svg { width: 1.3rem; height: 1.3rem; }
  .chapter__num { font-size: 0.75rem; }
  .chapter__thread { top: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__thread,
  .chapter__node,
  .chapter__node svg,
  .chapter__num,
  .chapter__title {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   8 · TECHNIQUE CLIPS — margin "Watch" affordance + film theater
   ═══════════════════════════════════════════════════════════════════════ */

.chapter__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast);
}

.chapter__watch svg {
  width: 26px;
  height: 26px;
  flex: none;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.chapter__watch:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(var(--color-science-rgb), 0.4));
}

.chapter__watch:focus-visible {
  outline: 2px solid rgba(var(--color-science-rgb), 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}

.chapter__watch-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
}

.chapter__watch-text em {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.75);
}

/* Theater */
.clip-theater {
  max-width: min(92vw, 960px);
  width: 100%;
  margin: auto; /* the global reset zeroes dialog margins — restore centering */
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.clip-theater::backdrop {
  background: rgba(4, 6, 10, 0.88);
  backdrop-filter: blur(8px);
}

.clip-theater__frame {
  position: relative;
}

.clip-theater__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--color-science-rgb), 0.2);
  background: #05070c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.clip-theater__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.clip-theater__close svg { width: 18px; height: 18px; }
.clip-theater__close:hover { border-color: rgba(var(--color-science-rgb), 0.7); }
.clip-theater__close:focus-visible { outline: 2px solid rgba(var(--color-science-rgb), 0.8); outline-offset: 2px; }

.clip-theater__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.2rem 0;
}

.clip-theater__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-text-primary);
}

.clip-theater__context {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   NUTRITION — "On Your Plate" (per-serving lens)
   Typography-first: ghost serif calorie numeral, saffron macro bars that
   fill on tab entry, hairline fine-print manifest, calorie-source bars.
   ────────────────────────────────────────────────────────────────────────── */

/* House rule: display-setting classes silently override [hidden] — pin it. */
#nutrition[hidden],
#nutritionDivider[hidden] {
  display: none !important;
}

.ntr-panel {
  margin-top: 3rem;
}

/* Hero: the big number + macro bars */
.ntr-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.6fr;
  gap: 3rem 4.5rem;
  align-items: start;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  animation: fadeInUp 0.6s ease-out both;
}

.ntr-hero__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 9vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  /* Cormorant's old-style figures (3,4,5,7,9) descend below the baseline;
     at line-height 0.9 that ink escapes the box by ~0.14em and paints over
     the unit label. Reserve the descender room inside the box. */
  padding-bottom: 0.16em;
}

.ntr-hero__unit {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
}

.ntr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.ntr-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.42rem 0.8rem;
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  border-radius: 999px;
  white-space: nowrap;
}

/* Macro bars */
.ntr-macros {
  display: grid;
  gap: 1.7rem;
}

.ntr-macro__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ntr-macro__label {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-text-primary);
}

.ntr-macro__grams {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
  font-variant-numeric: tabular-nums lining-nums;
}

.ntr-bar {
  margin-top: 0.55rem;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.ntr-bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--color-science-rgb), 0.5), rgba(var(--color-science-rgb), 0.95));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bars fill each time the lens opens (hidden → shown restarts the transition). */
#nutrition:not([hidden]) .ntr-bar__fill {
  transform: scaleX(1);
}

.ntr-macro:nth-child(2) .ntr-bar__fill { transition-delay: 0.12s; }
.ntr-macro:nth-child(3) .ntr-bar__fill { transition-delay: 0.24s; }

.ntr-macro__meta {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ntr-macro__note {
  margin: 0.25rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Fine-print manifest */
.ntr-block {
  margin-top: 2.6rem;
  animation: fadeInUp 0.6s ease-out 0.15s both;
}

.ntr-block + .ntr-block {
  animation-delay: 0.28s;
}

.ntr-subhead {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(var(--color-science-rgb), 0.85);
  margin-bottom: 1.1rem;
}

.ntr-detail {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ntr-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ntr-row__label {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-text-primary);
}

.ntr-row__value {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
  text-align: right;
  align-self: baseline;
  font-variant-numeric: tabular-nums lining-nums;
}

.ntr-row__dv {
  font-style: normal;
  margin-left: 0.7rem;
  color: rgba(var(--color-science-rgb), 0.8);
}

.ntr-row__note {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* Calorie sources */
.ntr-sources {
  display: grid;
  gap: 0.95rem;
}

.ntr-src {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr auto;
  gap: 1.2rem;
  align-items: center;
}

.ntr-src__label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-text-secondary);
}

.ntr-bar--thin {
  margin-top: 0;
  height: 2px;
}

.ntr-src__pct {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Ca:P mineral-balance block (paws) — rides the ntr token system */
.ntr-cap {
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  border-radius: var(--radius-sm);
}

.ntr-cap__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.ntr-cap__ratio {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.ntr-cap__chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-science-rgb), 0.3);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ntr-cap--balanced .ntr-cap__chip {
  border-color: rgba(var(--color-science-rgb), 0.55);
  color: var(--color-accent);
}

.ntr-cap--low .ntr-cap__chip,
.ntr-cap--high .ntr-cap__chip {
  border-color: rgba(245, 166, 35, 0.5);
  color: var(--color-accent);
}

.ntr-cap__meta {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}

.ntr-cap__note {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.ntr-foot {
  margin-top: 2.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.8;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.4);
  max-width: 72ch;
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.ntr-foot__dv {
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 760px) {
  .ntr-hero {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .ntr-src {
    grid-template-columns: 110px 1fr auto;
    gap: 0.8rem;
  }
}

/* ═══ Mobile placement pass (2026-08-07) — appended last so it wins on
   source order (equal-specificity trap, see mobile-forms.css lesson) ═══ */

/* Native name stacks UNDER the English name on narrow phones — side-by-side
   the two collide once the English name wraps ("Ginger-Garlic Paste /
   Adrak-Lehsun" interleaved at 390px). */
@media (max-width: 430px) {
  .ing-row__namebtn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .ing-row__hindi {
    font-size: 0.85rem;
  }
}

/* The ½×/1×/2× chips: margin-left:auto inside a wrapping flex row shoves
   them onto their own line hard-right (the banned filter-bar pattern).
   On phones they become a full-width left-aligned row under the stepper. */
@media (max-width: 640px) {
  .scaler__chips {
    margin-left: 0;
    width: 100%;
  }
}