/* The Build Vault — Cooking View
 * Mobile-first Refined Brutalism: cream paper, ink type, mono labels, red accent.
 * Distinct from the print Build Sheet (which lives at /build-sheets/<slug>.html).
 */

:root {
  --paper: oklch(0.956 0.014 80);
  --paper-2: oklch(0.925 0.020 80);
  --ink: oklch(0.175 0.004 80);
  --ink-2: oklch(0.280 0.004 80);
  --muted: oklch(0.420 0.006 80);
  --hair: oklch(0.175 0.004 80 / 0.16);
  --red: oklch(0.610 0.235 28);
  --red-ink: oklch(0.540 0.215 28);
  --red-tint: oklch(0.610 0.235 28 / 0.10);
  --f-display: 'Archivo Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
  --f-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --max-w: 42rem;
}
@supports not (color: oklch(0 0 0)) {
  :root {
    --paper: #F4F1EA; --paper-2: #ECE7DB; --ink: #111111; --ink-2: #2A2A2A;
    --muted: #4a4a4a; --hair: rgba(17,17,17,.16);
    --red: #E52521; --red-ink: #C11A16; --red-tint: rgba(229,37,33,.10);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- Topbars (single sticky wrapper for app-bar + meal-strip) -------
 * Both bars share this parent so they pin together at top:0 from page
 * load. Sticky on the wrapper means there's no scroll-then-lock dance
 * between the two stacked bars. */
.topbars {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
}

/* ---- App bar -------------------------------------------------------- */
.app-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.app-bar .back { justify-self: start; }
.app-bar .num {
  justify-self: center;
  color: var(--muted);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.app-bar .print-link { justify-self: end; }
.app-bar a {
  text-decoration: none; color: var(--ink);
  padding: 6px 4px;
  transition: color 140ms var(--ease);
}
.app-bar a:hover { color: var(--red); }
.app-bar a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.app-bar .print-link.disabled { color: var(--muted); cursor: default; }

/* ---- Meal strip (cross-recipe nav from today's plan) -----------------
 * Sits directly under the app-bar, sticky too so it persists during
 * scroll. Renders only when this recipe is part of a planned meal slot
 * with at least one buddy build (main + side, or main + sides). */
.meal-strip {
  /* Pinning is handled by the .topbars sticky wrapper; this bar just
   * flows normally inside it. */
  display: flex; align-items: stretch; gap: 0;
  padding: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  overflow-x: auto;
  scrollbar-width: none;
}
.meal-strip::-webkit-scrollbar { display: none; }
.meal-strip[hidden] { display: none; }
.meal-strip .ms-meta {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  border-right: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  flex-shrink: 0;
  min-width: 88px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.meal-strip .ms-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: .18em;
  color: var(--red); text-transform: uppercase;
}
.meal-strip .ms-date {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--paper); text-transform: uppercase;
}
.meal-strip .ms-builds {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch;
  flex: 1 1 auto; min-width: 0;
}
.meal-strip .ms-build {
  display: flex; align-items: center;
  border-right: 1px solid var(--hair);
  flex-shrink: 0;
}
.meal-strip .ms-build:last-child { border-right: 0; }
.meal-strip .ms-build .ms-link,
.meal-strip .ms-build.is-current {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px; align-items: center;
  padding: 8px 12px;
  text-decoration: none; color: var(--ink);
  min-height: 40px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.meal-strip .ms-link:hover { background: var(--ink); color: var(--paper); }
.meal-strip .ms-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.meal-strip .ms-build.is-current {
  background: var(--red-tint);
}
.meal-strip .ms-build.is-current::before {
  content: ""; position: absolute;
}
.meal-strip .ms-role {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--red-ink);
  border: 1px solid var(--red-ink);
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.meal-strip .ms-link:hover .ms-role { color: var(--red); border-color: var(--red); }
.meal-strip .ms-num {
  font-size: 9px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.meal-strip .ms-link:hover .ms-num { color: var(--paper-2); }
.meal-strip .ms-name {
  font-family: var(--f-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none; color: inherit;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 22ch;
}
.meal-strip .ms-build.is-current .ms-name { color: var(--red-ink); }

/* ---- Hero ------------------------------------------------------------ */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 26px 20px 20px;
  border-bottom: 2px solid var(--ink);
}
.hero .kicker {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 14px;
}
.hero .title {
  font-family: var(--f-display);
  font-size: clamp(34px, 7.5vw, 52px);
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink);
}
.hero .lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 4px;
  max-width: 56ch;
}
.hero .lede strong { color: var(--ink); font-weight: 700; }
.hero .lede em { color: var(--ink); font-style: italic; }
.hero .lede-expand {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 0 8px;
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.hero .lede-expand:hover { color: var(--ink); }
.hero .lede-expand:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Mobile clamp: lede limited to 3 lines, expand button surfaces the rest. */
@media (max-width: 599px) {
  .hero .lede {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
  }
  .hero .lede.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .hero .lede-expand { display: inline-block; }
}
.hero .stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.hero .stat {
  border: 2px solid var(--ink);
  padding: 9px 12px 10px;
  display: flex; flex-direction: column;
  gap: 3px;
  background: var(--paper);
}
.hero .stat .label {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero .stat .value {
  font-family: var(--f-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  text-transform: capitalize;
  font-variant-numeric: tabular-nums;
}

/* ---- Hero meta (stats + scale) -------------------------------------- */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Scale chips (in hero, below stats) ----------------------------- */
.scale-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
}
.scale-label {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.scale-chips { display: flex; gap: 4px; }
.scale-chip {
  flex: 1;
  min-height: 38px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 0 8px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.scale-chip:hover { background: var(--paper-2); }
.scale-chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.scale-chip.on { background: var(--ink); color: var(--paper); }
.hero .stat .value.scaled { color: var(--red-ink); }

/* Unit toggle row — sits beneath scale row, mirrors the chip language but
 * with two pills (g·ml ↔ cup·tbsp·oz). Quantities tagged .us-units pick
 * up a subtle red-ink tint to signal "converted from source". */
.unit-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--hair);
}
.unit-label {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.unit-chips { display: flex; gap: 4px; }
.unit-chip {
  flex: 1;
  min-height: 34px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 0 12px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.unit-chip:hover { background: var(--paper-2); }
.unit-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.unit-chip.on { background: var(--ink); color: var(--paper); }
.us-units { font-variant-numeric: tabular-nums; }
.ig-qty.us-units { color: var(--red-ink); }

/* ---- Mise en Place (Before You Start — pre-cook prep, above the cook
 * layout) ------------------------------------------------------------ */
.mise-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 20px 0;
}
.mise-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 12px 16px 14px;
  position: relative;
}
.mise-card::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 4px;
  background: var(--red);
}
.mise-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
}
.mise-kicker {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mise-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.mise-prose {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 70ch;
}
.mise-prose p { margin: 0 0 8px; }
.mise-prose p:last-child { margin-bottom: 0; }
.mise-prose strong { color: var(--ink); font-weight: 700; }
.mise-prose em { color: var(--ink); font-style: italic; }
@media (min-width: 700px) {
  /* At desktop, render as 2 columns so the prose breathes wide instead of
   * stacking 5 tall paragraphs in one narrow rail. */
  .mise-prose { columns: 2; column-gap: 36px; max-width: none; }
  .mise-prose p { break-inside: avoid; }
}

/* ---- Last Cooked card (under hero, when prior annotations exist) ---- */
.last-cooked {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px 20px 0;
}
.last-cooked-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 12px 14px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.last-cooked-card::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 4px;
  background: var(--red);
}
.last-cooked-card .lc-meta {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-ink);
  white-space: nowrap;
}
.last-cooked-card .lc-meta .date { color: var(--ink); }
.last-cooked-card .lc-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}
.last-cooked-card .lc-text::before { content: "\201C"; color: var(--muted); margin-right: 1px; }
.last-cooked-card .lc-text::after { content: "\201D"; color: var(--muted); margin-left: 1px; }
.last-cooked-card .lc-prior {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 10px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .last-cooked-card { grid-template-columns: 1fr; gap: 4px; }
  .last-cooked-card .lc-prior { margin-left: 0; }
}

/* ---- Cook layout (Ingredients | Instructions side-by-side) ---------- */
.cook-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.col-title {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.col { min-width: 0; }

/* ---- Cook Mode toggle ----------------------------------------------- */
.cook-mode-btn {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.cook-mode-btn .dot {
  width: 8px; height: 8px;
  background: var(--muted);
  display: inline-block;
  transition: background 140ms var(--ease);
}
.cook-mode-btn:hover { border-color: var(--red); }
.cook-mode-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cook-mode-btn.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cook-mode-btn.on .dot {
  background: var(--red);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--red);
}

/* ---- Cook Mode visual states (only active when body.cook-mode) ------
 * Accessibility note: `.cook-dim` previously used opacity:0.32 — too low for
 * WCAG AA against cream paper. v0.2 keeps the tick + structure at full
 * contrast (so checkoff still works) and only mutes the qty + name to ~62%
 * via `--muted` color. Active rows get a red bar + tint as before. */
body.cook-mode .ig-item,
body.cook-mode .ig-group {
  transition: background 220ms var(--ease);
}
body.cook-mode .ig-item.cook-dim .ig-qty,
body.cook-mode .ig-item.cook-dim .ig-name {
  color: var(--muted);
}
body.cook-mode .ig-item.cook-active {
  background: var(--red-tint);
}
/* Active row signal is the red-tint fill alone — no side stripe.
 * The tint is enough to mark "in play this phase" without leaning on the
 * left-bar cliché found in admin / dashboard / medical UIs. */
body.cook-mode .ig-group.cook-dim .ig-title-text {
  color: var(--muted);
}

/* Pin button removed (per design critique): IntersectionObserver alone drives
 * the active phase. Entering Focus mode on a phase implicitly "pins" it. */

/* ---- "Done Cooking" CTA + annotation modal -------------------------- */
.cook-finish {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: center;
}
.done-cooking-btn {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 22px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.done-cooking-btn:hover {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.done-cooking-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.annot-backdrop {
  position: fixed; inset: 0;
  background: rgba(17,17,17,.45);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.annot-modal {
  background: var(--paper);
  border: 2px solid var(--ink);
  width: 100%; max-width: 520px;
  padding: 22px 22px 18px;
  position: relative;
}
.annot-modal::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 4px;
  background: var(--red);
}
.annot-modal h3 {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.annot-modal .kicker {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin-bottom: 12px;
}
.annot-modal .annot-q {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.annot-modal textarea {
  width: 100%;
  min-height: 90px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 10px 12px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
  margin-bottom: 12px;
}
.annot-modal textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.annot-modal .who-row {
  display: flex; gap: 6px;
  margin-bottom: 14px;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  align-items: center;
  flex-wrap: wrap;
}
.annot-modal .who-row .label { color: var(--muted); margin-right: 4px; }
.annot-modal .who-chip {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 6px 10px; cursor: pointer;
  font: inherit;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.annot-modal .who-chip.on { background: var(--ink); color: var(--paper); }
.annot-modal .actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.annot-modal .actions button {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 8px 14px; cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.annot-modal .actions .save { background: var(--red); color: var(--paper); border-color: var(--red); }
.annot-modal .actions .save:hover { background: var(--ink); border-color: var(--ink); }
.annot-modal .actions .cancel:hover { background: var(--ink); color: var(--paper); }
.annot-modal .recent {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px solid var(--hair);
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}
.annot-modal .recent strong { color: var(--ink); }

.notes-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ---- Phase meta line (auto-derived under phase number chip) --------- */
.phase-meta {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
}

/* ---- Manual section: print-sheet-style spec cards ------------------- */
.manual {
  max-width: var(--max-w);
  margin: 30px auto 0;
  padding: 0 20px;
}
.manual-section-head {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.manual-section-head .col-title { font-size: 22px; }
.manual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 30px;
}
@media (min-width: 700px) {
  .manual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .manual-grid .mc-wide { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .manual-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .manual-card { grid-column: span 6; }
  .manual-card.mc-wide { grid-column: span 12; }
  /* Five consolidated cards — Setup, Build, and Time stack as full-width
   * rows (their internal grids own the horizontal split). Pass + Repair
   * share the final row. Avoids the awkward half-card-with-empty-space
   * problem that comes from mixing card-grid spans with internal grids. */
  .manual-card.mc-setup { grid-column: span 12; }
  .manual-card.mc-build { grid-column: span 12; }
  .manual-card.mc-time  { grid-column: span 12; }
  .manual-card.mc-plate { grid-column: span 12; }
  .manual-card.mc-fail  { grid-column: span 12; }
}
.manual-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 14px 16px 16px;
  position: relative;
  min-width: 0;
}
/* Native <details> styling — kill default marker, summary becomes the
 * card-head; chevron rotates on [open] */
details.manual-card > summary { list-style: none; cursor: pointer; }
details.manual-card > summary::-webkit-details-marker { display: none; }
.manual-chevron, .col-chevron, .mise-chevron {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transition: transform 200ms var(--ease);
  flex-shrink: 0;
  margin-left: auto;
}
details.manual-card:not([open]) .manual-chevron,
details.col:not([open]) .col-chevron,
details.mise-card:not([open]) .mise-chevron { transform: rotate(-90deg); }
details.manual-card:not([open]) > summary { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
details.manual-card:not([open]) > summary .manual-head { border-bottom: 0; }

details.col > summary { list-style: none; cursor: pointer; }
details.col > summary::-webkit-details-marker { display: none; }
details.mise-card > summary { list-style: none; cursor: pointer; }
details.mise-card > summary::-webkit-details-marker { display: none; }

/* When a manual-card's summary is the inner head, the existing border-bottom
 * styling is on .manual-head — keep it when open, remove when closed. */
details.manual-card[open] > .manual-head,
details.manual-card:not([open]) > .manual-head {
  /* No-op: keep existing styling. */
}
.manual-card::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 4px;
  background: var(--red);
}
/* Reference cards (no action mid-cook) lose the red top bar so the accent
 * stays meaningful on cards you'd actually consult while cooking. */
.manual-card.mc-setup::before {
  display: none;
}
.manual-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
}
.manual-num {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Title is mono-caps to read as a unified label with the kicker rather than
 * a competing display element. Heavier weight + ink color set hierarchy. */
.manual-title {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

/* Sub-section heading inside consolidated cards */
.sub-head {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--hair);
}

/* I · SETUP — three sub-blocks: Equipment, Substitutions, Pairing
 * Container query: only stack 3-across when the card itself has enough room.
 * Below ~1000px container width: 1 column. ~1000-1300px: 2 columns. Above: 3.
 * This keeps the inner grids (pairing, kit-list) from being squeezed into
 * impossible widths inside narrow viewports. */
.manual-card.mc-setup { container-type: inline-size; container-name: setup-card; }
.setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@container setup-card (min-width: 720px) {
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@container setup-card (min-width: 1080px) {
  .setup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.setup-block { min-width: 0; }

/* II · BUILD — two sub-blocks: Architecture, Key Ratios */
.build-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 600px) {
  .build-grid { grid-template-columns: 1.2fr 1fr; gap: 26px; }
}
.build-block { min-width: 0; }

/* III · TIME — Timeline above, Temperature spec grid below */
.time-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 800px) {
  .time-stack { grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
}
.time-block { min-width: 0; }

/* III — Temperature Codes (spec grid) */
.spec-grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 14px;
}
@media (min-width: 480px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spec-grid .sp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed var(--hair);
}
.spec-grid .sp:last-child { border-bottom: 0; }
.spec-grid .k {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.spec-grid .v {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}

/* Doneness Reference table (inside I·Time card for variable-doneness
 * proteins — beef, lamb, pork chop, duck, fatty fish). Auto-rendered;
 * no per-recipe authoring. */
.doneness-chart {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.doneness-chart thead th {
  font-size: 9px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 6px 8px 4px;
  border-bottom: 1.5px solid var(--ink);
}
.doneness-chart thead th.dn-pull,
.doneness-chart thead th.dn-final { text-align: right; }
.doneness-chart .dn-row td {
  padding: 7px 8px;
  border-bottom: 1px dashed var(--hair);
  font-size: 11px;
  color: var(--ink-2);
}
.doneness-chart .dn-row:last-child td { border-bottom: 0; }
.doneness-chart .dn-row.is-recipe-default td {
  color: var(--ink);
  background: var(--red-tint);
}
.doneness-chart .dn-row.is-recipe-default .dn-name { font-weight: 700; }
.doneness-chart .dn-name { color: var(--ink); font-weight: 600; }
.doneness-chart .dn-pull, .doneness-chart .dn-final { text-align: right; }
.doneness-chart .dn-temp {
  font-weight: 700;
  letter-spacing: .04em;
}
.doneness-chart .dn-row.is-recipe-default .dn-temp { color: var(--red-ink); }
.dn-tag {
  display: inline-block;
  font-size: 8px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 1px 4px; line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
}
.dn-aside {
  font-family: var(--f-body);
  font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
  margin: 4px 0 0;
  max-width: 65ch;
}
.sub-head-aside {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--muted);
  margin-left: 8px;
  border-left: 1px solid var(--hair);
  padding-left: 8px;
}

/* Diet Adaptations list (inside V·Setup card) — like substitutions but
 * with a flag-style tag on the key for quick visual scan. */
.diet-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.diet-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hair);
}
.diet-list li:last-child { border-bottom: 0; }
.diet-tag {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1.5px solid var(--red);
  padding: 3px 6px; line-height: 1;
  white-space: nowrap;
  align-self: start;
}
.diet-list .v {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.diet-list .v strong { font-weight: 700; color: var(--ink); }
.diet-list .v em { font-style: italic; color: var(--ink); }

/* Make-Ahead Plan — ordered list with timing-tag prefixes (Day before,
 * Morning of, 30 min before, etc.). Spans the full setup-grid width
 * because timeline-style content reads better as one column. */
.setup-block-wide {
  grid-column: 1 / -1;
}
.makeahead-list {
  list-style: none;
  counter-reset: makeahead;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.makeahead-list li {
  counter-increment: makeahead;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 8px 0 8px 32px;
  position: relative;
  border-bottom: 1px dashed var(--hair);
}
.makeahead-list li::before {
  content: counter(makeahead);
  position: absolute;
  left: 0; top: 8px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.makeahead-list li:last-child { border-bottom: 0; }
.ma-when {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 2px;
}
.ma-what {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.ma-what strong { font-weight: 700; color: var(--ink); }
.ma-what em { font-style: italic; color: var(--ink); }

/* Equipment list (lives inside Setup card)
 * Container query against the setup-block: only 2-up when the column itself
 * is wide. Prevents 2-up columns from cramming "Wooden spoon" against
 * "Paper-towel-lined plate" in a 200px slot. */
.setup-block { container-type: inline-size; container-name: setup-block; }
.kit-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
}
@container setup-block (min-width: 360px) {
  .kit-list { grid-template-columns: 1fr 1fr; }
}
.kit-list li {
  position: relative;
  padding-left: 14px;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.45;
}
.kit-list li::before {
  content: "·";
  position: absolute; left: 4px; top: -2px;
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
}

/* Layer Architecture / Key Ratios prose blocks (live inside Build card) */
.layer-prose, .ratios-prose {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.layer-prose p, .ratios-prose p { margin: 0 0 10px; }
.layer-prose p:last-child, .ratios-prose p:last-child { margin-bottom: 0; }
.layer-prose strong, .ratios-prose strong {
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.92em;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--red-tint);
  padding: 0 4px;
}

/* IV · Pass — Plating (narrative prose + raw SVG + ordered legend) */
.plate-prose {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 65ch;
}
.plate-prose p { margin: 0 0 8px; }
.plate-prose p:last-child { margin-bottom: 0; }
.plate-prose strong { color: var(--ink); font-weight: 700; }
.plate-prose em { color: var(--ink); font-style: italic; }

.plate-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
@media (min-width: 600px) {
  .plate-wrap {
    grid-template-columns: minmax(180px, 220px) 1fr;
    align-items: start;
  }
}
.plate-wrap .plate-svg,
.plate-wrap > svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  justify-self: center;
}
/* Any extra content inside .plate-wrap (commentary paragraphs, asides) spans
 * both columns so it doesn't get squeezed into the SVG column. */
.plate-wrap > p,
.plate-wrap > .plate-aside,
.plate-wrap > aside {
  grid-column: 1 / -1;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 4px 0 0;
}

/* At wide widths: pull the prose left and float the SVG+legend on the right
   so the 1240px card doesn't have a 700px empty band next to a 50ch prose.
   We use a flow layout with float because <details> is not reliably a grid
   container in Chromium. */
@media (min-width: 1100px) {
  .manual-card.mc-plate .plate-prose {
    float: left;
    width: 42%;
    max-width: 50ch;
    margin: 0 28px 14px 0;
  }
  .manual-card.mc-plate .plate-wrap {
    overflow: hidden;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 18px;
  }
  /* Once the prose ends, the next sibling content (none) would clear; if a
     future prose-less recipe renders just .plate-wrap, the float won't
     interfere because plate-wrap establishes a new BFC via overflow:hidden. */
}
.plate-wrap ol,
.plate-wrap .plate-order {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: plate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.plate-wrap ol li,
.plate-wrap .plate-order li {
  counter-increment: plate;
  position: relative;
  padding-left: 26px;
  padding-top: 1px;
}
.plate-wrap ol li::before,
.plate-wrap .plate-order li::before {
  content: counter(plate);
  position: absolute;
  left: 0; top: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.plate-wrap ol li b,
.plate-wrap .plate-order li b {
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.92em;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Prep Timeline (Gantt-style; lives inside Time card) */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 12px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
}
.timeline-label {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.timeline-axis-label { color: var(--muted); }
.timeline-axis {
  display: flex; justify-content: space-between;
  font-size: 9px; font-weight: 500;
  color: var(--muted);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 4px;
}
.timeline-track {
  position: relative;
  height: 22px;
  background: repeating-linear-gradient(to right, transparent 0 23.99%, var(--hair) 23.99% 24%);
  border: 1.5px solid var(--hair);
}
.timeline-bar {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-bar.red { background: var(--red); }

/* V · Repair — Failure Modes + Fixes (3-col grid) */
.fail-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.fail-matrix > div {
  background: var(--paper);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.fail-matrix .head-cell {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.fail-matrix .fail {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.fail-matrix .cause {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.fail-matrix .fix { color: var(--ink-2); font-size: 12px; }
.fail-matrix .fix strong { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) {
  .fail-matrix { grid-template-columns: 1fr; }
  .fail-matrix .head-cell:nth-of-type(n+2) { display: none; }
}

/* Substitution Lab list (lives inside Setup card) */
.sub-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--hair);
}
.sub-list .k {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.sub-list .v {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.sub-list .v em { color: var(--ink); font-style: italic; }
.sub-list .v strong { color: var(--ink); font-weight: 700; }

/* Pairing block (lives inside Setup card) */
/* Pairing list: stays single-column inside its setup-block column. The
 * setup-block container is already narrow (~330-380px when 3-up); a 2-col
 * pairing inside it would crush K + V into unreadable strips. Only opens
 * to 2-up when the setup-block is genuinely wide (single-card layouts). */
.pairing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@container setup-block (min-width: 640px) {
  .pairing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
}
.pairing .p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hair);
}
.pairing .k {
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  white-space: nowrap;
}
.pairing .v {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}

/* ---- Ingredients ---------------------------------------------------- */
.ig-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.ig-count {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ig-count.has-checks { color: var(--ink); }
.ig-count .red { color: var(--red-ink); }
.ig-reset {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 7px 12px; cursor: pointer;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.ig-reset:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.ig-reset:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.ig-reset[hidden] { display: none; }

.ig-group { margin: 0 0 24px; }
.ig-group:last-child { margin-bottom: 0; }
.ig-title {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 1.5px solid var(--ink);
}
.ig-section-tick,
.ig-section-toggle {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: background 120ms var(--ease);
}
.ig-section-tick {
  padding: 9px 8px 9px 4px;
  display: flex; align-items: center;
}
.ig-section-tick:hover { background: var(--paper-2); }
.ig-section-tick:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ig-section-toggle {
  padding: 9px 6px 9px 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.ig-section-toggle:hover { background: var(--paper-2); }
.ig-section-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ig-title-text {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  transition: color 120ms var(--ease), text-decoration-color 120ms var(--ease);
}
.ig-chevron {
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  transition: transform 200ms var(--ease);
  display: inline-block;
}
.ig-group.collapsed .ig-chevron { transform: rotate(-90deg); }
.ig-group.collapsed .ig-list { display: none; }
/* Partial: some items checked → horizontal indeterminate bar */
.ig-group.partial .ig-tick-section::after {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 10px; height: 2px;
  border: 0;
  background: var(--ink);
  transform: none;
  opacity: 1;
}
/* Checked: all items checked → fill + checkmark + strikethrough title */
.ig-group.checked .ig-tick-section { background: var(--red); border-color: var(--red); }
.ig-group.checked .ig-tick-section::after { opacity: 1; }
.ig-group.checked .ig-title-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1.5px;
}
.ig-list { list-style: none; margin: 0; padding: 0; }
.ig-item {
  display: grid;
  grid-template-columns: 18px 6rem 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px 6px 11px 4px;
  border-bottom: 1px dashed var(--hair);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: background 120ms var(--ease);
}
.ig-item:last-child { border-bottom: 0; }
.ig-item:hover { background: var(--paper-2); }
.ig-item:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ig-item:active { background: var(--paper-2); }

.ig-tick {
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.ig-tick::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
.ig-item.checked .ig-tick { background: var(--red); border-color: var(--red); }
.ig-item.checked .ig-tick::after { opacity: 1; }

.ig-qty {
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  transition: color 120ms var(--ease);
}
.ig-qty.empty { color: var(--muted); font-weight: 500; }
.ig-name {
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-2);
  transition: color 120ms var(--ease), text-decoration-color 120ms var(--ease);
}
/* Non-numeric qualifier inlined into the name when the qty isn't a number
 * (e.g., "Water — *as needed for boiling*"). Keeps the qty column clean and
 * avoids 5-line mono text wrapping. */
.ig-name .ig-qual {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95em;
  margin-left: 4px;
}
.ig-name .ig-qual::before { content: "— "; color: var(--muted); margin-right: 1px; font-style: normal; }
.ig-item.checked .ig-qty,
.ig-item.checked .ig-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1.5px;
}

/* ---- Instructions / Phases (native <details>) ----------------------- */
.phase {
  margin: 0 0 38px;
  padding-top: 4px;
}
.phase:last-child { margin-bottom: 0; }
.phase-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  padding: 4px 0 12px;
  border-bottom: 1.5px solid var(--ink);
  transition: background 120ms var(--ease);
}
.phase-head::-webkit-details-marker { display: none; }
.phase-head:hover { background: var(--paper-2); }
.phase-head:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.phase-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.phase-num {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  background: var(--red-tint);
  padding: 4px 9px;
}
.phase-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.phase-chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: transform 200ms var(--ease);
  flex-shrink: 0;
}

/* ---- Phase Complete affordance + complete state --------------------- */
.phase-foot {
  display: flex; justify-content: flex-end;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--hair);
}
.phase-done-btn {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.phase-done-btn:hover {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
}
.phase-done-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.phase.complete .phase-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 2px;
}
.phase.complete .phase-num {
  background: transparent;
  color: var(--muted);
}
.phase.complete .phase-done-btn {
  background: var(--ink);
  color: var(--red);
  border-color: var(--ink);
}
.phase.complete .phase-done-btn::before {
  content: "↺ ";
}
.phase.complete .phase-done-btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}
.phase:not([open]) .phase-chevron { transform: rotate(-90deg); }
.phase:not([open]) .phase-head { margin-bottom: 0; }
.phase-prose {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}
.phase-prose p { margin: 0 0 14px; }
.phase-prose p:last-child { margin-bottom: 0; }
.phase-prose strong {
  color: var(--ink);
  font-weight: 700;
  background: var(--red-tint);
  padding: 0 4px;
  border-radius: 1px;
}
/* Scalable quantity in prose — at 1× it sits quietly inline (just tabular
 * numerics for clean alignment); when the Scale chips fire and rewrite the
 * value, it pops to solid red so the eye sees what changed. */
.phase-prose .prose-qty {
  font-variant-numeric: tabular-nums;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.phase-prose span.prose-qty {
  font-weight: 700;
  color: var(--ink);
}
.phase-prose .prose-qty.scaled {
  background: var(--red);
  color: var(--paper);
  padding: 0 4px;
  border-radius: 1px;
}

/* ---- Phase Focus button (per-phase fullscreen entry) --------------- */
.phase-focus-btn {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.phase-focus-btn:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.phase-focus-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.phase-focus-btn .focus-icon {
  font-size: 14px;
  line-height: 1;
}

/* ---- Cook Focus mode (full-screen one-phase-at-a-time overlay) ------ */
.cook-focus-chrome {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  flex-direction: column;
}
body.cook-focus {
  overflow: hidden;
}
body.cook-focus .cook-focus-chrome {
  display: flex;
}
/* Hide everything underneath while in focus */
body.cook-focus .app-bar,
body.cook-focus .hero,
body.cook-focus .last-cooked,
body.cook-focus .cook-layout,
body.cook-focus .notes-section,
body.cook-focus .page-footer {
  visibility: hidden;
}
/* Move Timer Dock to top-right of focus overlay */
body.cook-focus .timer-dock {
  bottom: auto;
  top: 60px;
  right: 14px;
  z-index: 110;
  max-width: min(280px, calc(100vw - 28px));
}

.focus-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.focus-bar .focus-back {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.focus-bar .focus-back:hover { background: var(--red); color: var(--paper); border-color: var(--red); }
.focus-bar .focus-back:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.focus-bar .focus-title {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-bar .focus-counter {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--red-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.focus-stage {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px 32px;
  background: var(--paper);
}
.focus-stage:focus { outline: none; }

/* The focused phase fills the stage. Strip the <details>/<summary> chrome
 * since the focus bar already provides nav/title context. */
.focus-stage .phase {
  margin: 0;
}
.focus-stage .phase summary { list-style: none; cursor: default; padding: 0; border: 0; margin-bottom: 18px; }
.focus-stage .phase summary::-webkit-details-marker { display: none; }
.focus-stage .phase .phase-pin,
.focus-stage .phase .phase-focus-btn,
.focus-stage .phase .phase-chevron { display: none; }
.focus-stage .phase .phase-head { background: transparent; }
.focus-stage .phase .phase-num { font-size: 11px; }
.focus-stage .phase .phase-title { font-size: clamp(28px, 5.5vw, 40px); }
.focus-stage .phase .phase-prose {
  font-size: 17.5px;
  line-height: 1.7;
}
.focus-stage .phase .phase-prose p { margin: 0 0 18px; }
.focus-stage .phase[data-focused] { display: block; }
.focus-stage .phase[data-focused] .phase-prose { display: block; }

/* When NOT focus-mode, the phase[data-focused] class can persist briefly —
 * defensive: only apply focused styling inside focus-stage. */

.focus-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}
.focus-nav button {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.focus-nav button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}
.focus-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.focus-nav .focus-nav-spacer { /* center column visual filler */ }

/* Bottom sheet for this-phase ingredients */
.focus-sheet {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  max-height: 140px;
  overflow: hidden;
  transition: max-height 280ms var(--ease);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.focus-sheet[data-state="expanded"] {
  max-height: 70vh;
}
.sheet-handle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0; background: transparent; color: inherit;
  padding: 10px 16px 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  position: relative;
}
.sheet-handle:hover { background: var(--paper-2); }
.sheet-handle:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.sheet-handle .handle-bar {
  width: 36px; height: 4px;
  background: var(--ink);
  display: block;
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  border-radius: 0;
}
.sheet-handle .sheet-label {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.sheet-handle .sheet-count {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  color: var(--red-ink);
  font-variant-numeric: tabular-nums;
}

.sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}
.sheet-item {
  display: grid;
  grid-template-columns: 18px 6rem 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--hair);
  cursor: pointer;
}
.sheet-item:hover { background: var(--paper-2); }
.sheet-item:last-child { border-bottom: 0; }
.sheet-item .sheet-tick {
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.sheet-item .sheet-tick::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
.sheet-item.checked .sheet-tick { background: var(--red); border-color: var(--red); }
.sheet-item.checked .sheet-tick::after { opacity: 1; }
.sheet-item.checked .sheet-qty,
.sheet-item.checked .sheet-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1.5px;
}
.sheet-item .sheet-qty {
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sheet-item .sheet-name {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.sheet-empty {
  padding: 20px 4px;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---- Timer Dock (floating panel of running timers) ------------------ */
.timer-dock {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 30;
  background: var(--paper);
  border: 2px solid var(--ink);
  max-width: min(320px, calc(100vw - 32px));
  min-width: 220px;
  padding: 4px;
  box-shadow: 0 12px 32px -10px rgba(17,17,17,.35), 0 2px 6px rgba(17,17,17,.18);
}
.timer-dock::before {
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: -2px;
  height: 4px;
  background: var(--red);
}
.timer-dock-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px 4px;
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.timer-dock-list { display: flex; flex-direction: column; }
.timer-dock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.timer-dock-row:first-child { border-top: 0; }
.timer-dock-row:hover { background: var(--paper-2); }
.timer-dock-row .countdown {
  font-family: var(--f-mono);
  font-size: 18px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.timer-dock-row.running .countdown { color: var(--red-ink); }
.timer-dock-row.complete .countdown { color: var(--red); }
.timer-dock-row .label {
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.timer-dock-row .dismiss {
  border: 0; background: transparent;
  font-family: var(--f-mono); font-size: 16px; font-weight: 700;
  color: var(--muted); cursor: pointer;
  padding: 2px 6px; line-height: 1;
  transition: color 140ms var(--ease);
}
.timer-dock-row .dismiss:hover { color: var(--red); }
.timer-dock-row .dismiss:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.timer-dock-row.paused .countdown { color: var(--muted); }

/* Foreign rows = timers from other recipes. Visually separated by a tint
 * + a recipe tag. Tapping these navigates to the source recipe. */
.timer-dock-row.foreign {
  grid-template-columns: auto 1fr auto auto;
  background: linear-gradient(to right, transparent, var(--paper-2) 30%);
}
.timer-dock-row.foreign:hover { background: var(--ink); color: var(--paper); }
.timer-dock-row.foreign:hover .countdown,
.timer-dock-row.foreign:hover .label,
.timer-dock-row.foreign:hover .recipe-tag,
.timer-dock-row.foreign:hover .dismiss { color: var(--paper); }
.timer-dock-row.foreign:hover .recipe-tag { border-color: var(--paper); }
.timer-dock-row .recipe-tag {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-ink);
  border: 1px solid var(--red-ink);
  padding: 3px 6px; line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Timers (inline tappable countdowns) ----------------------------
 * Visually distinct from bolded prose: thicker 2px ink border, paper-2 bg,
 * larger padding, prominent play icon. Reads as a button, not as emphasis. */
.timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  padding: 1px 9px 2px;
  margin: 0 2px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 0.88em;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.3;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.timer::before {
  content: "▶";
  color: var(--red);
  font-size: 0.78em;
  line-height: 1;
  margin-right: 1px;
}
.timer:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.timer:hover::before { color: var(--red); }
.timer:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.timer.running {
  background: var(--red);
  color: var(--paper);
  border-color: var(--red);
  animation: timer-pulse 1.6s ease-in-out infinite;
}
.timer.running::before { content: "⏸"; color: var(--paper); }
.timer.running:hover { background: var(--ink); border-color: var(--ink); }

.timer.paused {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--ink);
}
.timer.paused::before { content: "▶"; color: var(--red-ink); }

.timer.complete {
  background: var(--ink);
  color: var(--red);
  border-color: var(--ink);
  animation: timer-flash 0.5s ease-in-out 4;
}
.timer.complete::before { content: "✓"; color: var(--red); }
.timer.complete:hover { background: var(--red); color: var(--paper); }
.timer.complete:hover::before { color: var(--paper); }

@keyframes timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--red-tint); }
  50%      { box-shadow: 0 0 0 4px var(--red-tint); }
}
@keyframes timer-flash {
  0%, 100% { background: var(--ink); color: var(--red); }
  50%      { background: var(--red); color: var(--paper); }
}

/* Reduce motion: drop animations */
@media (prefers-reduced-motion: reduce) {
  .timer.running, .timer.complete { animation: none; }
}
.phase-prose em {
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}

/* ---- Notes (collapsibles) ------------------------------------------- */
.note-block {
  border: 2px solid var(--ink);
  background: var(--paper);
  margin: 0 0 12px;
}
.note-block summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 14px 16px;
  color: var(--ink);
  position: relative;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.note-block summary::-webkit-details-marker { display: none; }
.note-block summary::after {
  content: "+";
  position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1;
  color: var(--red);
  transition: color 140ms var(--ease);
}
.note-block[open] summary::after { content: "−"; }
.note-block summary:hover { background: var(--ink); color: var(--paper); }
.note-block summary:hover::after { color: var(--paper); }
.note-block summary:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.note-block .note-prose {
  padding: 4px 16px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  border-top: 1.5px solid var(--ink);
}
.note-block .note-prose p { margin: 12px 0; }
.note-block .note-prose p:first-child { margin-top: 14px; }
.note-block .note-prose p:last-child { margin-bottom: 0; }
.note-block .note-prose strong { color: var(--ink); font-weight: 700; }
.note-block .note-prose em { color: var(--ink); font-style: italic; }

/* ---- Footer --------------------------------------------------------- */
.page-footer {
  max-width: var(--max-w);
  margin: 30px auto 0;
  padding: 18px 20px 24px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-footer .red { color: var(--red-ink); }

.empty-state {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 40px 20px;
}

/* ---- Larger screens (tablet / desktop) ------------------------------ */
@media (min-width: 600px) {
  body { font-size: 18px; }
  .hero { padding: 30px 24px 22px; }
  .hero .stats { grid-template-columns: repeat(4, 1fr); }
  .ig-item { grid-template-columns: 18px 7.5rem 1fr; gap: 16px; }
  .cook-layout { padding: 28px 24px 60px; }
}

@media (min-width: 900px) {
  :root { --max-w: 80rem; }

  /* Densified hero: title + lede + meta stack tightly, like the print sheet's
   * masthead → titleband → tiles cascade. Title compressed from display
   * mobile-large to tabloid-headline scale; lede capped to ~85ch single-block;
   * stats + scale on the same horizontal row to reclaim vertical space. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto auto auto;
    column-gap: 36px;
    row-gap: 10px;
    padding: 22px 24px 18px;
    align-items: start;
  }
  .hero .kicker { grid-column: 1 / -1; margin: 0; }
  .hero .title {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(36px, 4.2vw, 48px);
    line-height: .98;
    margin: 0;
    align-self: end;
  }
  .hero .lede {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 70ch;
  }
  .hero .hero-meta {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    flex-direction: column;
    gap: 6px;
    min-width: 360px;
  }
  .hero .stats {
    grid-template-columns: repeat(4, minmax(80px, auto));
    gap: 4px;
  }
  .hero .stat {
    padding: 6px 10px 7px;
    gap: 2px;
  }
  .hero .stat .label { font-size: 8.5px; letter-spacing: .18em; }
  .hero .stat .value { font-size: 12.5px; }
  .scale-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .scale-label { font-size: 9px; }
  .scale-chip { min-height: 32px; font-size: 11px; padding: 0 6px; }

  /* Cook layout: wider, tighter gap, ingredients column gets a small visual
   * separation rather than a chunky one. */
  .cook-layout {
    display: grid;
    grid-template-columns: minmax(260px, 20rem) 1fr;
    gap: 28px;
    align-items: start;
    padding-top: 20px;
  }
  .col-ingredients {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-right: 6px;
  }
  .col-ingredients::-webkit-scrollbar { width: 6px; }
  .col-ingredients::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 0; }
  .col-head { margin-bottom: 12px; padding-bottom: 6px; }
  .col-title { font-size: 18px; }
  .ig-item { padding: 8px 4px 8px 4px; }
  .ig-toolbar { margin-bottom: 12px; padding-bottom: 8px; }
  .phase { margin-bottom: 26px; }
  .phase-head { margin-bottom: 12px; padding-bottom: 8px; }
}

@media (min-width: 1200px) {
  /* Ultra-wide: bring the lede next to title, push hero meta tighter still. */
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero .title { font-size: clamp(40px, 3.6vw, 52px); }
}

/* ---- Print: kick to the dedicated build sheet ----------------------- */
@media print {
  body::before {
    content: "Open the printable Build Sheet at /build-sheets/<slug>.html for print layout.";
    display: block; padding: 20px; font-family: var(--f-mono);
  }
}