html, body{
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
:root{
  /* Horizontal padding for `.app`; used to size the sticky top nav without overflow “wiggle”. */
  --appPadX: 18px;
  /* Space between `.pixelNav` and sticky section heads on Knowledge + Flours pages. */
  --pdc-sticky-heading-gap: 10px;
}
.neonFrame{
  border: 1px solid rgba(246,249,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  position: relative;
  overflow: visible;
  --nf-border: rgba(228,49,115,.55);
  --nf-glow: rgba(228,49,115,.14);
}
.neonFrame::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  pointer-events:none;
  border: 2px solid var(--nf-border);
  box-shadow: 0 0 0 4px var(--nf-glow);
  opacity: 1;
}
.neonFrame--cyan{--nf-border: rgba(75,248,254,.55); --nf-glow: rgba(75,248,254,.14);}
.neonFrame--blue{--nf-border: rgba(120, 190, 255, .60); --nf-glow: rgba(120, 190, 255, .14);}
.neonFrame--green{--nf-border: rgba(30,181,130,.55); --nf-glow: rgba(30,181,130,.14);}
.neonFrame--gold{--nf-border: rgba(255,207,90,.65); --nf-glow: rgba(255,207,90,.14);}
.neonFrame--pink{--nf-border: rgba(228,49,115,.55); --nf-glow: rgba(228,49,115,.14);}

/* Recipe gate: “attract” glow (~0.87 Hz, asymmetric rise/decay + dwell) — under ~1.5 Hz avoids
 * alarm/hazard feel; quick brighten + slow fade + pause reads more organic than symmetric 50/50.
 * Luminance swing kept modest (~10–18% opacity band) so it reads arcade-inviting not warning-strobe.
 * See: visual salience / habituation UX; avoid >3 Hz for consumer UI (photosensitivity). */
#ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before{
  animation: pdcFieldNeedNeonPulse 1.15s linear infinite;
  will-change: opacity, filter;
}
@keyframes pdcFieldNeedNeonPulse{
  0%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(75, 248, 254, 0.1);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    opacity: 0.88;
    filter: brightness(1.08) saturate(1.12);
    box-shadow:
      0 0 0 3px var(--nf-glow),
      0 0 9px rgba(75, 248, 254, 0.32),
      0 0 14px rgba(167, 120, 255, 0.16);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(75, 248, 254, 0.1);
    animation-timing-function: linear;
  }
  100%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(75, 248, 254, 0.1);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce){
  #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before{
    animation: none;
    opacity: 0.72;
    filter: brightness(0.98) saturate(1.05);
    box-shadow: 0 0 0 2px var(--nf-glow), 0 0 6px rgba(75, 248, 254, 0.16);
    will-change: auto;
  }
}
#ballsField.field.neonFrame.pdcFieldSatisfied::before{
  animation: none;
}

/* Same rhythm + asymmetry as cyan pulse; pink-tinted halos for the weight field. */
#portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention::before{
  animation: pdcFieldNeedNeonPulsePink 1.15s linear infinite;
  will-change: opacity, filter;
}
@keyframes pdcFieldNeedNeonPulsePink{
  0%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(228, 49, 115, 0.12);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    opacity: 0.88;
    filter: brightness(1.08) saturate(1.12);
    box-shadow:
      0 0 0 3px var(--nf-glow),
      0 0 9px rgba(228, 49, 115, 0.3),
      0 0 14px rgba(255, 130, 198, 0.14);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(228, 49, 115, 0.12);
    animation-timing-function: linear;
  }
  100%{
    opacity: 0.52;
    filter: brightness(0.94) saturate(1.05);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 5px rgba(228, 49, 115, 0.12);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce){
  #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention::before{
    animation: none;
    opacity: 0.72;
    filter: brightness(0.98) saturate(1.05);
    box-shadow: 0 0 0 2px var(--nf-glow), 0 0 6px rgba(228, 49, 115, 0.18);
    will-change: auto;
  }
}
#portionWeightField.field.neonFrame.pdcFieldSatisfied::before{
  animation: none;
}
:root{
  /* Arcade-night palette (based on provided reference UI) */
  /* sampled from your target screenshot */
  --bg0:#0b123c; /* top bar */
  --bg1:#08103a; /* main gradient base */
  --panel0:#10153d; /* main panels */
  --panel1:#0d103d; /* inner panels / buttons */
  --panel2:#05103d; /* bar tracks / pills */
  --outline:#f6f9ff;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.085);
  --border:#573f97;
  --border2:#573f97;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --dim:rgba(255,255,255,.50);
  --accent:#5a4a95;
  --accent2:#4bf8fe;
  --accentHot:#e43173;
  --accentGold:#f2b02a;
  --good:#1eb582;
  --bad:#e43173;
  --warn:#ffcf5a;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --shadow2: 0 10px 28px rgba(0,0,0,.35);
  --radius:16px;
  --radius2:16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --arcade: "Press Start 2P", ui-monospace, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Typography: prefs set --type-bump-* on <html> (see pdc-type-bumps.js / pdc-app.js) */
  --type-bump-heading: 0pt;
  --type-bump-body: 0pt;
  --type-bump-chip: 0pt;
  --type-bump-input: 0pt;
  --fs-b-8: calc(8px + var(--type-bump-body));
  --fs-b-9: calc(9px + var(--type-bump-body));
  --fs-h-9: calc(9px + var(--type-bump-heading));
  --fs-b-10: calc(10px + var(--type-bump-body));
  --fs-h-10: calc(10px + var(--type-bump-heading));
  --fs-b-11: calc(11px + var(--type-bump-body));
  --fs-h-11: calc(11px + var(--type-bump-heading));
  --fs-b-12: calc(12px + var(--type-bump-body));
  --fs-h-12: calc(12px + var(--type-bump-heading));
  --fs-b-13: calc(13px + var(--type-bump-body));
  --fs-h-13: calc(13px + var(--type-bump-heading));
  --fs-b-14: calc(14px + var(--type-bump-body));
  --fs-h-14: calc(14px + var(--type-bump-heading));
  --fs-b-15: calc(15px + var(--type-bump-body));
  --fs-h-15: calc(15px + var(--type-bump-heading));
  --fs-b-16: calc(16px + var(--type-bump-body));
  --fs-h-16: calc(16px + var(--type-bump-heading));
  --fs-b-18: calc(18px + var(--type-bump-body));
  --fs-b-26: calc(26px + var(--type-bump-body));
  --fs-h-30: calc(30px + var(--type-bump-heading));
  --fs-h-40: calc(40px + var(--type-bump-heading));
}
.slider[data-key="hydration"] .val,
.slider[data-key="saltPct"] .val,
.slider[data-key="oilPct"] .val,
.slider[data-key="sugarPct"] .val,
.slider[data-key="yeastPct"] .val{
  background: var(--good);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.slider[data-key="hydration"] .val.hydWarn{
  background: rgba(255, 207, 90, .22);
  border-color: rgba(255, 207, 90, .80);
  box-shadow: 0 0 0 4px rgba(255, 207, 90, .14);
  color:#fff;
}
.slider[data-key="hydration"] .val.hydDanger{
  background: rgba(228, 49, 115, .22);
  border-color: rgba(228, 49, 115, .85);
  box-shadow: 0 0 0 4px rgba(228, 49, 115, .14);
  color:#fff;
}

/* Generic out-of-range pill coloring for slider value chips */
.val.rangeWarn{
  background: rgba(255, 207, 90, .22) !important;
  border-color: rgba(255, 207, 90, .80) !important;
  box-shadow: 0 0 0 4px rgba(255, 207, 90, .14);
  color:#fff;
}
.val.rangeDanger{
  background: rgba(228, 49, 115, .22) !important;
  border-color: rgba(228, 49, 115, .85) !important;
  box-shadow: 0 0 0 4px rgba(228, 49, 115, .14);
  color:#fff;
}

/* Auto pills (yeast, dough formula, preferment): green when on, pink when off */
.pill.subtle.autoOn{
  background: var(--good);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.pill.subtle.autoOff{
  background: var(--bad);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
/* Dashboard "Auto" boxes: slightly squarer corners + thin black border */
#autoFormulaPill.pill,
#autoYeastPill.pill{
  border-radius: 12px;
  border-color: rgba(0,0,0,.75) !important;
}

#coldFermentBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 700;
  min-height: 46px; /* match chip depth */
  padding: 8px 12px;
}

/* Keep fridge chips aligned with the toggle */
#coldHoursChips{
  align-items: center;
}
#coldHoursChips .chip{
  min-height: 46px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  border-color: rgba(246, 249, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(167, 120, 255, 0.24),
    0 0 16px rgba(167, 120, 255, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.3);
}
#coldHoursChips .chip:not(.activeGreen):hover{
  border-color: rgba(126, 240, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 5px rgba(75, 248, 254, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.32);
}
#coldHoursChips .chip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0, 0, 0, 0.28);
}
#coldFermentBtn.autoOn{
  background: var(--good);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
#coldFermentBtn.autoOff{
  background: var(--bad);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
#coldFermentBtn .pillToggle{
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#coldFermentBtn.autoOn .pillToggle{
  background: rgba(255,255,255,.15);
}
#coldFermentBtn.autoOff .pillToggle{
  background: rgba(0,0,0,.08);
  opacity: .85;
}
#coldFermentBtn.autoOn .pillToggle::after{
  content:"✓";
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  line-height: 1;
  color:#fff;
  transform: translateY(-1px);
}

/* Selected-style blurb: whole panel reads as one emphasis block */
#styleInfo:not(:empty){
  font-weight: 700;
  text-align: left;
}
/* Moved from bake setup: knowledge prep `intro` (style story, not oven steps). */
#styleInfo .styleInfoStyleContext{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(244, 255, 120, 0.62);
  background: rgba(75,248,254,.06);
  box-shadow:
    0 0 5px rgba(255, 245, 100, 0.52),
    0 0 14px rgba(255, 230, 60, 0.3),
    0 0 22px rgba(255, 230, 40, 0.12);
  font-weight: 500;
  font-size: var(--fs-b-12);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
#styleInfo .styleInfoFacts{
  display: grid;
  /* One shared label column so every value lines up (tabular / “definition list” look). */
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1ch;
  row-gap: 6px;
  width: 100%;
  text-align: left;
  align-items: start;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
#styleInfo .styleInfoFactRow{
  display: contents;
}
#styleInfo .styleInfoFactLabel{
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.68);
}
#styleInfo .styleInfoFactValue{
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
  color: #fff;
}
/* Origin / group line under the style name (two body steps up from default .desc). */
#styleInfo .sliderTop .desc:not(:empty){
  margin-top: 10px;
  font-size: var(--fs-b-16);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
#styleInfo .label{
  font-family: var(--arcade);
  color: #fffb80;
  font-size: var(--fs-h-16);
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Preferment slider value badges: preset (green) vs overridden (yellow) */
.slider .val.valPreset{
  background: var(--good);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.slider .val.valOverride{
  background: rgba(247,182,36,.22);
  border-color: rgba(247,182,36,.75);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(247,182,36,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scrollbar-gutter: stable;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(1200px 840px at 20% 18%, rgba(90,74,149,.30), transparent 62%),
    radial-gradient(1000px 760px at 78% 22%, rgba(75,248,254,.12), transparent 64%),
    radial-gradient(980px 760px at 72% 88%, rgba(228,49,115,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 650px at 12% 60%, rgba(242,176,42,.09), transparent 66%),
    radial-gradient(900px 650px at 70% 82%, rgba(90,74,149,.14), transparent 66%);
  pointer-events:none;
  filter: blur(0px);
}

.bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 2px);
  background-size: 140px 140px, 220px 220px;
  background-position: 20px 40px, 80px 120px;
  opacity:.22;
  pointer-events:none;
}
.app{
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 18px 40px;
  border: 4px solid var(--border);
  border-radius: 22px;
  /* Matches `main.grid` gap — used to size the dashboard banner to one column width. */
  --pdc-dashboard-grid-gap: 16px;
  /* Slightly larger UI on desktop; zoom >1 clips narrow phones (e.g. Fold cover) — reset below. */
  zoom: 1.07;
  /* Body/html already constrain horizontal overflow. `hidden` here makes `.app` a scrollport in Blink/WebKit
     and breaks `position: sticky` for Flour/Styles section heads — use visible so headings stick under `.pixelNav`. */
  overflow-x: visible;
  overflow-y: visible;
  touch-action: pan-y;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Pizza Styles codex (`pizzastyles.html`): drop page `zoom` so `position: fixed` (docked quick chips) uses the real viewport.
 * `:has()` is avoided — class on `<html>` is reliable in older engines + doesn’t depend on descendant parsing. */
html.pdcPizzaStylesCodex .app{
  zoom: 1;
}

/* Retro nav: span the padded content width of `.app` (avoid `100vw` — it overflows the shell on many phones). */
.pixelNav{
  position: sticky;
  top: 0;
  z-index: 100;
  width: calc(100% + (var(--appPadX) * 2));
  max-width: calc(100% + (var(--appPadX) * 2));
  box-sizing: border-box;
  margin: -8px calc(-1 * var(--appPadX)) 18px;
  padding-block: 2px;
  border-top: 2px solid rgba(167, 120, 255, .95);
  border-bottom: 2px solid rgba(167, 120, 255, .95);
  background: linear-gradient(180deg, rgba(8, 16, 58, .92), rgba(5, 12, 48, .96));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.pixelNavInner{
  display:flex;
  align-items:stretch;
  justify-content: stretch;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0 10px;
  font-family: var(--arcade);
  /* One vertical rhythm for full-width links + burger row (links are `display:none` in burger — still need same bar height).
   * Was `14px`; collapsed so the bar height hugs its content (the menu icon
   * image + the centred title text) rather than carrying tall slab padding. */
  --pdcNavPadY: 2px;
  --pdcNavPadX: 10px;
  /* Burger title `font-size` uses `cqi` — percentage of this strip’s inline size. */
  container-type: inline-size;
  container-name: pixelnav;
}
.pixelNavBurgerTitle{
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pdcNavPadY) 8px;
  /* Breathing room under the purple top border above the marquee title copy. */
  padding-top: calc(5px + var(--pdcNavPadY));
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(246,249,255,.95);
  white-space: normal;
  overflow: visible;
  text-align: center;
  line-height: 1.12;
}
.pixelNavBurgerTitleCluster{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}
.pixelNavBurgerTitleW{
  color: rgba(246,249,255,.96);
}
.pixelNavBurgerTitleB{
  color: #0099fb;
}
.pixelNavBurgerTitleM{
  color: #fc0c71;
}
.pixelNav.pixelNav--burger .pixelNavBurgerTitle{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 0.38em;
  row-gap: 0.1em;
  /* Fallback when container queries aren’t available (`cqi` invalidates the rule in older engines). */
  font-size: clamp(10px, 4.25vw, 26px);
}
@supports (font-size: 1cqi){
  .pixelNav.pixelNav--burger .pixelNavBurgerTitle{
    /* Tracks nav strip width — tweak multiplier so one line fills the middle slot on typical phones. */
    font-size: clamp(10px, 5.6cqi, 26px);
  }
}
/* Retired: centred nav marquee (“8BIT. PIZZA / CALCULATOR”, `#pixelNavBurgerTitle`).
 * Restore — delete class `pixelNavBurgerTitle--suppressed` on that node in `index.html`,
 * `flours.html`, and `pizzastyles.html` (and drop this rule block if you remove all uses). */
.pixelNavBurgerTitle.pixelNavBurgerTitle--suppressed,
.pixelNav.pixelNav--burger .pixelNavBurgerTitle.pixelNavBurgerTitle--suppressed,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerTitle.pixelNavBurgerTitle--suppressed{
  display: none !important;
  flex: 0 0 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.pixelNav.pixelNav--burger .pixelNavSettings{
  display: none !important;
}
/* Thin title strip (was in header): sits in the sticky nav beside the burger. */
.pixelNavBarEnd{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 0;
  margin-left: auto;
}
/* Burger / forced-burger first paint: stretch the thin strip across the gap between IG + cap and the burger. */
.pixelNav.pixelNav--burger .pixelNavBarEnd{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  align-items: stretch;
  align-self: stretch;
}
.pixelNavThinBrand{
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
  padding: 2px 4px 2px 0;
  border: none;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pixelNavThinBrand:focus-visible{
  outline: 2px solid rgba(184, 255, 249, 0.9);
  outline-offset: 2px;
  border-radius: 6px;
}
.pixelNavThinBrandImg{
  display: block;
  height: clamp(22px, 5.6cqi, 34px);
  width: auto;
  max-width: min(200px, 46cqi, 52vw);
  object-fit: contain;
  object-position: center 48%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}
@supports not (font-size: 1cqi){
  .pixelNavThinBrandImg{
    height: clamp(22px, 5.5vw, 34px);
    max-width: min(200px, 52vw);
  }
}
.pixelNav.pixelNav--burger .pixelNavThinBrand,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrand{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.pixelNav.pixelNav--burger .pixelNavThinBrandImg,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandImg{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center 48%;
}
/* Explicit “Normal” menu preference (`html` without `pdcPrefForceBurger`): hide thin title strip — tab links + page header carry branding. */
html:not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrand{
  display: none !important;
}
/* Right-side cluster: menu button + dropdown (burger mode only). */
.pixelNavBurgerCluster{
  position: relative;
  display: none;
  flex: 0 0 auto;
  align-items: stretch;
  /* Was stretch: matched the title block height and made the burger look high.
   * Center the cluster in the nav strip so the icon sits on the optical midline. */
  align-self: center;
  flex-direction: column;
}
.pixelNav.pixelNav--burger .pixelNavBurgerCluster{
  display: flex;
}
.pixelNavBurgerBtn{
  flex: 0 0 auto;
  align-self: stretch;
  /* Hidden by default; enabled only when `.pixelNav--burger` is active. */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 58px;
  box-sizing: border-box;
  /* Vertical padding around the burger icon so it doesn’t sit hard against
   * the top/bottom borders of the nav strip. */
  padding: 5px 12px;
  border: none;
  border-left: 1px solid rgba(167, 120, 255, .22);
  border-right: 1px solid rgba(167, 120, 255, .22);
  background: transparent;
  color: rgba(246,249,255,.95);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  /* `position: relative` + `overflow: hidden` set up the burger button as the
   * positioning + clip context for the periodic neon shimmer (`::after` below)
   * that sweeps top-to-bottom across the burger icon. */
  position: relative;
  overflow: hidden;
}
/* Three-bar burger icon. Shimmer (`.pixelNavBurgerBtn::after`) still uses
 * `mix-blend-mode: screen` so the neon sweep reads across the bars. */
.pixelNavBurgerIcon{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  gap: clamp(5px, 1.25vw, 7px);
  width: clamp(22px, 5.5vw, 30px);
  height: clamp(16px, 4vw, 22px);
  pointer-events: none;
  user-select: none;
}
.pixelNavBurgerBar{
  display: block;
  flex: 0 0 auto;
  height: clamp(2.5px, 0.55vw, 3px);
  border-radius: 2px;
  background: currentColor;
  opacity: 0.95;
}
/* Periodic vertical neon shimmer to nudge first-time users toward the burger.
 * Cycle is ~5.5s with a short bright sweep (~1.4s) and a longer dwell (~4.1s)
 * so it reads as a recurring "psst, click me" rather than a distracting pulse.
 *
 * The gradient packs TWO bright bands a short distance apart, each with its
 * own neon-rainbow halo (cyan → white → magenta → violet → cyan), so a single
 * sweep registers as a quick double-shimmer with full neon palette rather than
 * a single muted glint.
 *
 * `mix-blend-mode: screen` makes the bands lighten whatever they cross, so the
 * shimmer appears to pass *through* the burger bars (briefly
 * tinting them with the neon hues) rather than sitting on top of them. A small
 * `filter: blur(...) saturate(...)` adds the neon halo bloom and pumps the
 * colours up.
 *
 * The staggered start delay (`1s`) avoids hitting on first paint, which would
 * compete with everything else loading in. */
.pixelNavBurgerBtn::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 10%,
    rgba(75, 248, 254, 0.28) 16%,
    rgba(167, 120, 255, 0.50) 20%,
    rgba(225, 250, 255, 0.95) 25%,
    rgba(255, 130, 198, 0.60) 30%,
    rgba(75, 248, 254, 0.28) 36%,
    transparent 44%,
    transparent 58%,
    rgba(255, 130, 198, 0.28) 64%,
    rgba(255, 200, 230, 0.95) 70%,
    rgba(167, 120, 255, 0.55) 75%,
    rgba(75, 248, 254, 0.32) 80%,
    transparent 88%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(0.6px) saturate(1.45);
  transform: translateY(-110%);
  animation: pdcBurgerShimmer 5.5s ease-in-out 1s infinite;
  will-change: transform;
}
/* Stop the lure once the user has actually opened the menu. Two stop conditions:
 *   1. `[aria-expanded="true"]` — covers the moment the panel is open.
 *   2. `html.pdcBurgerSeen` — set + persisted to localStorage by
 *      pdc-settings-nav.js the first time the menu is opened. This is the
 *      "stop forever once aware" rule: subsequent visits never see the
 *      shimmer again because the user already knows what the button does. */
.pixelNavBurgerBtn[aria-expanded="true"]::after,
html.pdcBurgerSeen .pixelNavBurgerBtn::after{
  animation: none;
  opacity: 0;
}
@keyframes pdcBurgerShimmer{
  0%   { transform: translateY(-110%); }
  20%  { transform: translateY(110%); }
  100% { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce){
  .pixelNavBurgerBtn::after{
    animation: none;
    opacity: 0;
  }
}
/* Burger control: `.pixelNavBurgerIcon` + `.pixelNavBurgerBar` (three lines). */
.pixelNavBurgerBtn:hover{
  background: rgba(90, 74, 149, .18);
  filter: brightness(1.04);
}
.pixelNavBurgerBtn:focus-visible{
  outline: 2px solid rgba(75, 248, 254, .55);
  outline-offset: -2px;
}
.pixelNavBurgerPanel{
  position: absolute;
  left: auto;
  right: 0;
  top: calc(100% + 2px);
  width: min(420px, calc(100vw - 20px));
  max-height: min(85vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Same stacking band as the sticky nav chrome (avoid floating above the bar). */
  z-index: 1;
  margin: 0;
  padding: 10px;
  border-top: 2px solid rgba(167, 120, 255, .95);
  border-bottom: 2px solid rgba(167, 120, 255, .95);
  background: linear-gradient(180deg, rgba(8, 16, 58, .98), rgba(5, 12, 48, .98));
  /* Match `.pixelNav` drop shadow so burger mode doesn’t read as “deeper” than the full menu bar. */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  /* Never show unless explicitly opened (prevents “mystery strip” artifacts on some WebViews). */
  display: none;
  grid-template-columns: 1fr;
  gap: 8px;
  /* Shared by `.pixelNavBurgerLink` rows + Preferences `<summary>` so they align visually. */
  --pdcBurgerRow: clamp(48px, 11vw, 64px);
  --pdcBurgerPadY: clamp(5px, 1.4vw, 10px);
  --pdcBurgerPadX: clamp(10px, 2.4vw, 16px);
  --pdcBurgerIconInset: clamp(3px, 0.9vw, 6px);
}
.pixelNavBurgerPanelLinks{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pixelNav:not(.pixelNav--burger) .pixelNavBurgerPrefsDetails{
  display: none !important;
}
.pixelNavBurgerPrefsDetails{
  margin-top: 0;
  border-top: none;
  padding: 0;
}
.pixelNavBurgerPrefsSummary{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.5vw, 16px);
  min-height: var(--pdcBurgerRow);
  padding: var(--pdcBurgerPadY) var(--pdcBurgerPadX);
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
  font-family: var(--arcade), system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: calc(var(--fs-h-10) + 2pt);
  line-height: 1.2;
  color: rgba(246, 249, 255, 0.96);
  border-radius: 12px;
  border: 1px solid rgba(167, 120, 255, 0.22);
  background: rgba(90, 74, 149, 0.1);
  user-select: none;
  transition: background 0.12s ease, filter 0.12s ease;
}
.pixelNavBurgerPrefsSummary::-webkit-details-marker{
  display: none;
}
.pixelNavBurgerPrefsSummary::marker{
  content: "";
}
.pixelNavBurgerPrefsDetails .pixelNavBurgerPrefsSummary:hover{
  background: rgba(90, 74, 149, 0.18);
  filter: brightness(1.04);
}
.pixelNavBurgerPrefsDetails .pixelNavBurgerPrefsSummary:focus-visible{
  outline: 2px solid rgba(75, 248, 254, 0.55);
  outline-offset: 2px;
}
.pixelNavBurgerPrefsDetails[open] > .pixelNavBurgerPrefsSummary{
  padding-bottom: 8px;
}
.pixelNavBurgerPrefsDetails .settingsDockBurger.isActive{
  padding-left: clamp(4px, 1.2vw, 8px);
  padding-right: clamp(4px, 1.2vw, 8px);
  padding-bottom: 8px;
}
.pixelNavBurgerPrefsCogSvg{
  flex: 0 0 auto;
  display: block;
  box-sizing: border-box;
  width: calc(var(--pdcBurgerRow) - 2 * var(--pdcBurgerPadY) - 2 * var(--pdcBurgerIconInset));
  height: calc(var(--pdcBurgerRow) - 2 * var(--pdcBurgerPadY) - 2 * var(--pdcBurgerIconInset));
  color: rgba(246, 249, 255, 0.9);
  filter: drop-shadow(0 0 6px rgba(75, 248, 254, 0.25));
}
.pixelNavBurgerPrefsHeadingText{
  flex: 1 1 auto;
  min-width: 0;
}
.pixelNavBurgerPanel.isOpen{
  display: grid;
}
.pixelNavBurgerPanel[hidden]{
  display: none !important;
}
.pixelNavBurgerPanel .pixelNavBurgerLink{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.5vw, 16px);
  min-height: var(--pdcBurgerRow);
  padding: var(--pdcBurgerPadY) var(--pdcBurgerPadX);
  border-radius: 12px;
  text-decoration: none;
  color: rgba(246,249,255,.95);
  border: 1px solid rgba(167, 120, 255, .22);
  background: rgba(90, 74, 149, .10);
  font-family: var(--arcade);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: calc(var(--fs-h-10) + 2pt);
  line-height: 1.2;
}
.pixelNavBurgerPanel .pixelNavIconImg{
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(var(--pdcBurgerRow) - 2 * var(--pdcBurgerPadY) - 2 * var(--pdcBurgerIconInset));
  height: calc(var(--pdcBurgerRow) - 2 * var(--pdcBurgerPadY) - 2 * var(--pdcBurgerIconInset));
  object-fit: contain;
  object-position: center;
}
.pixelNavBurgerPanel .pixelNavBurgerLink:hover{
  background: rgba(90, 74, 149, .18);
  filter: brightness(1.04);
}
.pixelNav.pixelNav--burger .pixelNavBurgerBtn{
  display: inline-flex;
}
.pixelNav.pixelNav--burger .pixelNavLink{
  display: none;
}
.pixelNav.pixelNav--burger .pixelNavCap--end{
  display: none;
}

/* Nav first paint: avoid a flash of full tab bar before `pdc-settings-nav.js` adds `.pixelNav--burger`. */
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerTitle{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 0.38em;
  row-gap: 0.1em;
  font-size: clamp(10px, 4.25vw, 26px);
}
@supports (font-size: 1cqi){
  html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerTitle{
    font-size: clamp(10px, 5.6cqi, 26px);
  }
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerBtn{
  display: inline-flex !important;
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavLink,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavCap--end{
  display: none !important;
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavSettings{
  display: none !important;
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerCluster{
  display: flex !important;
  align-self: center;
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBarEnd{
  display: flex !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  align-items: stretch !important;
}
/* Overflow-driven burger: keep tab row in layout for width math, hide labels until first sync. */
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavLink,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavCap--end{
  visibility: hidden;
}
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerTitle,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerBtn,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBarEnd{
  visibility: hidden;
}

.pixelNavCap{
  width: 10px;
  flex: 0 0 auto;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(167, 120, 255, .55) 0 2px,
      transparent 2px 4px
    );
  opacity: .55;
}
.pixelNavCap--end{
  transform: scaleX(-1);
}
/* External author link — stays in the chrome row (also visible in burger mode). */
.pixelNavInstagram{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: var(--pdcNavPadY) clamp(6px, 1.8vw, 10px);
  margin: 0;
  border: none;
  border-right: 1px solid rgba(167, 120, 255, 0.22);
  border-radius: 0;
  background: transparent;
  color: rgba(246, 249, 255, 0.92);
  text-decoration: none;
  transition: background 0.12s ease, filter 0.12s ease, color 0.12s ease;
}
.pixelNavInstagram:hover{
  background: rgba(90, 74, 149, 0.18);
  filter: brightness(1.04);
  color: rgba(255, 253, 255, 1);
}
.pixelNavInstagram:focus-visible{
  outline: 2px solid rgba(75, 248, 254, 0.55);
  outline-offset: -2px;
}
.pixelNavSocialSvg{
  flex: 0 0 auto;
  display: block;
  /* Fluid IG mark; ~20% smaller than prior clamp (was max 66px ≈ 2× old 33px). */
  width: clamp(21px, min(9.6vw, 9.6vmin), 53px);
  height: clamp(21px, min(9.6vw, 9.6vmin), 53px);
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavInstagram{
  display: inline-flex !important;
}
.pixelNav.pixelNav--burger .pixelNavInstagram{
  display: inline-flex;
}
.pixelNavLink{
  position: relative;
  flex: 1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: var(--pdcNavPadY) var(--pdcNavPadX);
  text-decoration: none;
  color: rgba(246,249,255,.95);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--fs-h-10);
  line-height: 1.2;
  border-left: 1px solid rgba(167, 120, 255, .22);
  border-right: 1px solid rgba(167, 120, 255, .22);
  transition: background .12s ease, filter .12s ease;
}

/* Large screens: make the top nav feel less tiny. */
@media (min-width: 900px){
  .pixelNavInner{
    padding: 0 14px;
    /* Was `16px`; collapsed so the bar hugs the burger control. */
    --pdcNavPadY: 3px;
    --pdcNavPadX: 12px;
  }
  .pixelNavLink{
    gap: 14px;
    font-size: clamp(var(--fs-h-10), 0.95vw, var(--fs-h-14));
  }
  .pixelNavBurgerBtn{
    min-width: 56px;
  }
  .pixelNavBurgerIcon{
    width: clamp(24px, 4.8vw, 32px);
    height: clamp(17px, 3.5vw, 23px);
    gap: clamp(5px, 1vw, 7px);
  }
  .pixelNavIconImg{
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1200px){
  .pixelNavInner{
    /* Was `18px`; collapsed so the bar hugs the burger control. */
    --pdcNavPadY: 4px;
    --pdcNavPadX: 14px;
  }
  .pixelNavLink{
    gap: 16px;
    font-size: clamp(var(--fs-h-12), 0.85vw, var(--fs-h-16));
  }
  .pixelNavIconImg{
    width: 20px;
    height: 20px;
  }
}
.pixelNavLink:hover{
  background: rgba(90, 74, 149, .18);
  filter: brightness(1.04);
}
.pixelNavLink.isActive::after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, rgba(167,120,255,.25), rgba(200, 150, 255, .95), rgba(167,120,255,.25));
  box-shadow: 0 0 12px rgba(200, 150, 255, .35);
}
.pixelNavText{white-space: nowrap}
/* Top nav: PNG icons in `assets/icons/` (calc, recipes, flourmenu, styles). */
.pixelNavIconImg{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

/* Optional fixed bottom shortcut bar (same items as thin top nav; toggled in Settings). */
.pixelNav.pixelNav--bottomQuick{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 101;
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 2px solid rgba(167, 120, 255, 0.95);
  border-bottom: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.35);
}
.pixelNav.pixelNav--bottomQuick .pixelNavInner--bottomQuick{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 4px;
  min-height: 46px;
  --pdcNavPadY: 2px;
  --pdcNavPadX: 6px;
}
.pixelNav.pixelNav--bottomQuick .pixelNavLink{
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 6px 2px 8px;
  font-size: clamp(7px, 2.4vw, var(--fs-h-10));
  border-left: 1px solid rgba(167, 120, 255, 0.22);
  border-right: 1px solid rgba(167, 120, 255, 0.22);
}
.pixelNav.pixelNav--bottomQuick .pixelNavText{
  white-space: normal;
  text-align: center;
  line-height: 1.05;
  max-width: 22vw;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (min-width: 720px){
  .pixelNav.pixelNav--bottomQuick .pixelNavLink{
    flex-direction: row;
    gap: 8px;
    font-size: clamp(var(--fs-h-10), 0.9vw, var(--fs-h-12));
    padding: var(--pdcNavPadY) 6px;
  }
  .pixelNav.pixelNav--bottomQuick .pixelNavText{
    white-space: nowrap;
    max-width: none;
  }
}

/* Extra bottom padding on `.app` when the bottom bar is enabled (matches bar + safe area). */
html.pdcBottomQuickNavOn .app{
  padding-bottom: calc(40px + 52px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 980px){
  html.pdcBottomQuickNavOn .app{
    padding-bottom: calc(38px + 52px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 640px){
  html.pdcBottomQuickNavOn .app{
    padding-bottom: calc(36px + 52px + env(safe-area-inset-bottom, 0px));
  }
}

.top{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px 7px;
  margin-bottom: 18px;
}
.topBrand{
  flex: 0 1 auto;
  min-width: 0;
  margin-inline: auto;
}
.topBrandBtn{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.topBrandBtn:visited{
  color: inherit;
}
/* Styles + Flours use `.topRight--phantom` as an invisible copy of the calculator
 * header's right lane. Keep it in flex flow on desktop so the title PNG uses the
 * same left-lane sizing/alignment as the calculator rather than becoming a
 * centred full-width banner. Thin screens hide it later in the mobile header
 * rules, where the calculator also stacks. */
header.top:has(.topRight--phantom){
  justify-content: flex-start;
}
.topBrandBtn:focus-visible{
  outline: 2px solid rgba(184, 255, 249, 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}
/* CRT shell + warm-up overlay target for the dashboard title PNG — matches the reset
 * hero placeholder look (`heroResetPlaceholder` rules) without the recurring power-off. */
.topBrandCrtHost{
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
/* Lighter than the reset-hero CRT so the title art stays close to true brightness. */
.topBrandCrtHost::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 72% 88% at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.12) 78%,
    rgba(0, 0, 0, 0.28) 100%
  );
  z-index: 1;
}
.topBrandCrtHost::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 8%,
      rgba(255, 255, 255, 0.03) 16%,
      rgba(255, 255, 255, 0) 28%,
      rgba(255, 255, 255, 0) 100%
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0.08) 1px,
      rgba(0, 0, 0, 0.08) 2px
    );
  z-index: 2;
}
.topBrandCrtHost .heroResetCrtOverlay{
  border-radius: inherit;
}
/* Bright “TV warming up”: hairline expands + blur sharpens → normal brightness (not black). */
.topBrandCrtHost.topBrandCrtHost--crtOn .topBrandImg{
  animation: pdcCrtOnPictureBrand 4s cubic-bezier(0.2, 0.72, 0.2, 1) both;
  transform-origin: center;
  will-change: transform, filter;
}
.topBrandImg{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  vertical-align: top;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 0;
}

/* Dashboard header: banner width = one `main.grid` track (`(inlineSize - gap) / 2`).
 * Primary: `100cqi` on `.app:has(> main.grid.dashboard)` (see block after the stacked
 * header media). Fallback: `(100% - gap) / 2` on `.top` when `cqi` is unavailable
 * (desktop two-column uses `padding-inline-end: 0` + column-2 `.topRight` box). */
/* Wide calculator: left-lane banner + padding that always clears chip rows (they are absolute, not in flow). */
@media (min-width: 901px){
  .app:has(> main.grid.dashboard) > .top{
    --pdc-top-right-slot: min(
      440px,
      max(
        clamp(200px, 32vw, 420px),
        calc(min(380px, 30vw) + 18px)
      )
    );
    justify-content: flex-start;
    box-sizing: border-box;
  }
  /* Two-column main: no end padding — `.topRight` is sized/placed to match column 2. */
  .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top{
    padding-inline-end: 0;
  }
  .app:has(> main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain)) > .top{
    padding-inline-end: var(--pdc-top-right-slot);
  }
  /* Real chip rails: same box as `main.grid` column 2; inner flex already centres headings/chips. */
  .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top .topRight:not(.topRight--phantom){
    position: absolute;
    left: calc((100% + var(--pdc-dashboard-grid-gap)) / 2);
    right: auto;
    width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
    max-width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
    bottom: 0;
    z-index: 1;
    box-sizing: border-box;
  }
  .app:has(> main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain)) > .top .topRight:not(.topRight--phantom){
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    z-index: 1;
  }
  .app:has(> main.grid.dashboard) > .top .topRight--phantom{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    left: auto;
    width: auto;
    max-width: none;
  }
  .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top .topBrand{
    margin-inline: 0;
    margin-right: auto;
    align-self: flex-end;
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 0;
  }
  .app:has(> main.grid.dashboard) > .top .topBrandBtn{
    text-align: left;
  }
}
/* Folded sidebar (double-tap hero): single full-width column — banner matches it. */
.app:has(> main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain)) > .top > .topBrand{
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/*
 * When the dashboard branding PNG would touch `.topRight`, `pdc-top-brand-scroll.js` sets
 * `header.top.top--brandTight` + `--topBrandMax` — tuck left and shrink so nothing collides.
 */
header.top.top--brandTight{
  justify-content: flex-start;
}
@media (min-width: 901px){
  header.top.top--brandTight{
    padding-inline-end: max(8px, env(safe-area-inset-right, 0px));
  }
}
header.top.top--brandTight .topBrand{
  margin-inline: 0;
  margin-right: auto;
  align-self: flex-end;
  max-width: min(var(--topBrandMax, 200px), 100%);
}
header.top.top--brandTight .topBrandBtn{
  margin-inline: 0;
  text-align: left;
}
/* Beat column-1 cap while tight (`pdc-top-brand-scroll.js` sets `--topBrandMax`). */
.app:has(> main.grid.dashboard) > header.top.top--brandTight > .topBrand{
  width: min(var(--topBrandMax, 200px), 100%) !important;
  max-width: min(var(--topBrandMax, 200px), 100%) !important;
}
/* Calculator: wide-banner scroll-away hides the title strip for the rest of the visit (pdc-top-brand-scroll.js). */
.app:has(> main.grid.dashboard:not(.knowledgeMain)) > header.top.top--brandScrolledAway{
  min-height: var(--pdc-top-banner-gone-min, 0px);
}
.app:has(> main.grid.dashboard:not(.knowledgeMain)) > header.top.top--brandScrolledAway > .topBrand{
  display: none !important;
}
.topRight{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
/* Reserves the same header column as the dashboard so the banner scales/aligns the same. */
.topRight--phantom{
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.topRight--phantom .chipRow{
  min-width: min(380px, 30vw);
}
/* Dashboard: same Quick-styles rack footprint as phantom headers so the title PNG scales/aligns like Flour / Styles. */
@media (min-width: 901px){
  .top .topRight:not(.topRight--phantom) .topBakeReadyPlans .chipRow,
  .top .topRight:not(.topRight--phantom) .topQuickStylesStrip .topQuickStyles .chipRow{
    min-width: min(380px, 30vw);
  }
}
.appVer{
  font-family: var(--mono);
  font-size: var(--fs-b-10);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 6px 8px;
}
.dashboardVerBar{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Decorative: bottom-right under results column border (hidden with `main` on #recipes). */
.pdcEasterEggRow{
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 2px;
  padding: 0 max(2px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) 0;
  pointer-events: none;
}
.pdcEasterEggTrigger{
  pointer-events: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
}
.pdcEasterEggTrigger:focus-visible{
  outline: 2px solid rgba(255, 107, 203, 0.95);
  outline-offset: 2px;
}
main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) .pdcEasterEggRow{
  grid-column: 1 / -1;
}
/* Below 650px `.grid` is single-column (see `.grid` @media); column 2 would be wrong. */
@media (max-width: 649px){
  main.grid.dashboard .pdcEasterEggRow{
    grid-column: 1 / -1;
  }
}
.pdcEasterEggImg{
  display: block;
  width: auto;
  height: 22px;
  opacity: 0.9;
}

/* Pizza Invaders easter egg (iframe modal — above eat-plan z-index 9999) */
.pdcPiModal[hidden]{
  display: none !important;
}
.pdcPiModal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  grid-template: 1fr / 1fr;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.pdcPiModal__scrim{
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  /* Dim the app behind the modal only; keep fairly light so the iframe doesn’t feel “tunneled”. */
  background: rgba(14, 10, 22, 0.28);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
  cursor: pointer;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .pdcPiModal__scrim{
    background: rgba(14, 10, 22, 0.42);
  }
}
.pdcPiModal__shell{
  grid-area: 1 / 1;
  place-self: start center;
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: min(100vw - 20px, 560px);
  max-width: 100%;
  display: block;
  max-height: min(96dvh, 920px);
  /* Transparent: avoid a second solid black “mat” behind the iframe (cabinet game paints its own bezel). */
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}
.pdcPiModal__iframe{
  display: block;
  width: 100%;
  min-height: 280px;
  height: min(90dvh, 860px);
  max-height: 100%;
  border: 0;
  border-radius: 0;
  /* Transparent: the game draws its own cabinet/screen; avoids a second black slab behind it. */
  background: transparent;
  overflow: hidden;
}
.topBakeReadyPlans{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 10px;
  /* Pull bake-ready + quick-style racks to the bottom of the header column (under top actions).
   * The negative translate raises the rack toward the pixel nav above; trimmed from
   * -20px to -15px on user request to leave 5px more breathing room under the menu strip. */
  margin-top: auto;
  transform: translateY(-15px);
}
.topBakeReadyPlansMain{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.bakeReadyPlansLabel{
  font-family: var(--arcade);
  font-size: calc(var(--fs-h-9) + 1.5pt);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8fff9;
  line-height: 1.25;
  margin: -3px 0 0;
  font-weight: 400;
  text-shadow:
    0 0 10px rgba(75, 248, 254, 0.55),
    0 0 22px rgba(111, 53, 215, 0.45),
    0 0 34px rgba(75, 248, 254, 0.22);
}
.topBakeReadyPlans .chipRow{
  justify-content: center;
}
/* “Mix now · Eat later”: own row (see `.bakeReadyPlanChipsBreak` in `pdc-app.js`) + width from text. */
#bakeReadyPlanChips > .bakeReadyPlanChipsBreak{
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}
#bakeReadyPlanChips #eatPlanChip{
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  justify-content: center;
  font-size: calc(12px + 3pt);
}
/* Row: quick-style rack (hideable when bake-ready plan selected) + always-visible Reset. */
.topQuickStylesStrip{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 10px;
  margin-top: 0;
}
/* Save Recipe + Reset (right-aligned) live in the sidebar `.eatPlanChipRow` (the eat-plan chip itself
 * has since been promoted to the BAKE-READY PLANS rail at the top of the page). */
/* Quick style chips (Neapolitan … New York) stay grouped; Reset sits in the chip row after New York */
#quickStyleChips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
/* Tighter than global `.chip`: −2px inset on each side (padding + min-height). */
#quickStyleChips .chip{
  min-height: 36px;
  padding-inline: 8px;
}
.topQuickStyles{
  flex: 1 1 auto;
  min-width: 0;
}
.topQuickStyles[hidden]{
  display: none !important;
}
.topQuickStylesMain{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.quickStylesLabel{
  font-family: var(--arcade);
  font-size: calc(var(--fs-h-9) + 1.5pt);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fffb80;
  line-height: 1.25;
  margin: 0;
  font-weight: 400;
}
.topQuickStyles .chipRow{
  justify-content: center;
}

/* When the eat-plan chip is active, the entire top-right rack of bake-ready plans and
 * quick-style chips is hidden — eat-plan mode is the master entry point and the user
 * picks a style via the inline filtered list, so the duplicate chip rows up top are
 * just noise. We hide the wrapping blocks (labels + chip rows together) so the layout
 * collapses cleanly instead of leaving empty headings or chip strips.
 *
 * The pizza-style search field (`.dashboardStyleSearchField`) is also hidden in this
 * mode: the eat-plan has already pruned the list to the styles that fit the chosen
 * window, so type-to-filter would either narrow further (rarely useful with such a
 * short list) or reveal styles that don't fit (defeats the purpose of the plan). */
/* Eat-plan active mode: the chip lives in column 1 now, so we can hide the whole
 * top BAKE-READY / QUICK STYLES rails plus the search field — the eat-plan workflow
 * already pre-filters the styles list to fit the chosen window so type-to-filter /
 * quick-styles would be redundant. */
html[data-eat-plan-active] .topBakeReadyPlans,
html[data-eat-plan-active] .topQuickStylesStrip,
html[data-eat-plan-active] .dashboardStyleSearchField{
  display: none !important;
}

/* Mix-now eat-plan mode: start schedule is not a user control (mix is "now" + solver),
 * so hide the optional start date/time row + shortcut chips to reduce confusion. */
html[data-eat-plan-active] #fermentManualStartBlock{
  display: none !important;
}

.topActions{
  display: flex;
  gap: 6px;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
}
.topActions .btn.ghost{
  display: inline-flex;
  align-items: center;
  justify-content:center;
  white-space: nowrap;
  font-size: var(--fs-h-9);
  padding: 8px 8px;
  line-height: 1.15;
}

.settingsWrap{
  position: relative;
  display:flex;
  align-items:center;
}
.settingsDockNormal{
  /* Positioned dropdown anchors to `.pixelNavSettings` (relative), not this wrapper. */
  position: static;
}
.settingsDockBurger{
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.settingsDockBurger.isActive{
  display: block;
}
.settingsDockBurger .settingsTitle{
  display: none !important;
}
.settingsDockBurger .settingsPanel{
  position: static !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 8px !important;
  box-shadow: none !important;
  max-height: none !important;
  border: 1px solid rgba(246, 249, 255, 0.12);
  /* One scroll surface: the burger panel scrolls. A nested scrollport + overscroll-contain
   * on this panel traps touch/wheel on long preference lists (see pdc-settings-nav.js). */
  overflow-y: visible !important;
  overflow-x: visible !important;
  overscroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto !important;
}
.pixelNavSettings{
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: stretch;
  align-items: stretch;
}
.pixelNavCogBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  box-sizing: border-box;
  padding: var(--pdcNavPadY) 12px;
  border: none;
  border-left: 1px solid rgba(167, 120, 255, .22);
  border-right: 1px solid rgba(167, 120, 255, .22);
  background: transparent;
  color: rgba(246,249,255,.92);
  cursor: pointer;
  transition: background .12s ease, filter .12s ease;
  font-family: inherit;
}
.pixelNavCogBtn:hover{
  background: rgba(90, 74, 149, .18);
  filter: brightness(1.04);
}
.pixelNavCogBtn:focus-visible{
  outline: 2px solid rgba(75, 248, 254, .55);
  outline-offset: -2px;
}
.pixelNavCogSvg{
  display: block;
  flex: 0 0 auto;
}
.pixelNavSettings .settingsPanel{
  top: calc(100% + 8px);
  z-index: 120;
}
.settingsPanel{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(420px, 92vw);
  z-index: 80;
  border-radius: 14px;
  border: 1px solid rgba(246,249,255,.16);
  /* Solid base + gradient: avoids “empty” compositing when a parent overflow trap flattens layers (narrow + WebKit). */
  background-color: var(--panel0);
  background-image: linear-gradient(180deg, var(--panel0), var(--panel1));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 12px;
  isolation: isolate;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Narrow screens: the settings list can exceed viewport height. Make the
   * panel itself scrollable so the user can reach every row without scrolling
   * the page (the page-scroll handler closes the panel, which is the wrong
   * outcome when they're trying to read the panel itself).
   *
   * `overscroll-behavior: contain` is the key bit — it stops scroll-chaining
   * out to the body when the user reaches the panel's top/bottom edge. Without
   * it, "keep scrolling at the boundary" would scroll the page and trip the
   * close-on-page-scroll handler in `pdc-settings-nav.js`. With it, panel
   * scrolls stay inside the panel; body scrolls outside it still close it.
   *
   * `100dvh` accounts for mobile browser chrome (URL bar) — the panel resizes
   * as the bar hides/shows. The `100vh` line is a fallback for older engines. */
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.settingsTitle{
  font-family: inherit;
  font-size: var(--fs-b-13);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 10px;
  font-weight: 800;
}
.settingsRow{
  display:grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items:center;
  justify-content: stretch;
  gap: 10px 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.settingsRow:first-of-type{
  border-top: 0;
  padding-top: 0;
}
.settingsLabel{
  font-weight: 700;
  color: rgba(255,255,255,.80);
  font-size: var(--fs-b-12);
  letter-spacing: 0.01em;
}
.settingsPanel select{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  padding: 8px 10px;
  min-width: 0;
  width: 100%;
  font-family: inherit;
}
/* The Font Sizes target dropdown lives inside the 132px label column. Force a fresh line so
 * it sits flush-left under the heading (matching every other settings row label), nudge it
 * 4px down for breathing room, and keep ~10px short of the column edge for a tidy gutter. */
.settingsPanel #prefFontTarget{
  display: block;
  margin-left: 0;
  margin-top: 4px;
  width: calc(100% - 10px);
}

/* Settings panel structure: controls fill the right column. */
.settingsRow > :is(.seg, select){
  width: 100%;
  margin-top: 0;
}
.settingsRow .seg{
  gap: 8px;
}
.settingsRow .segBtn{
  min-height: 42px;
  font-family: inherit;
  font-size: var(--fs-b-11);
  letter-spacing: 0.01em;
}

/* Settings: font size controls (Reset / − / +).
 * Inherit the default `.seg` 3-column grid so `Reset` matches the standard chip width used by
 * every other row (Temp, Length, English, Time, Menu). The narrower `−` / `+` chips share
 * column 2 — they're intentionally smaller per the keep-them-distinct request. */
.settingsRow .seg[aria-label="Font size controls"]{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settingsRow .seg[aria-label="Font size controls"] :is(#prefFontBodySmaller, #prefFontBodyLarger){
  position: relative;
  overflow: hidden;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.settingsRow .seg[aria-label="Font size controls"] #prefFontBodyReset{
  grid-column: 1;
  white-space: nowrap;
  width: 100%;
  justify-self: stretch;
}
/* Pin both chips to row 1 — without `grid-row: 1` the auto-placement algorithm puts the
 * second `grid-column: 2` item on a new row. `justify-self: start`/`end` + the half widths
 * keep them side-by-side in the same cell without overlap. */
.settingsRow .seg[aria-label="Font size controls"] #prefFontBodySmaller{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: calc(50% - 4px);
}
.settingsRow .seg[aria-label="Font size controls"] #prefFontBodyLarger{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: calc(50% - 4px);
}
.settingsRow .seg[aria-label="Font size controls"] :is(#prefFontBodySmaller, #prefFontBodyLarger)::before{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(228, 49, 115, 0.45);
  transform: scaleX(var(--pdcFontFill, 0));
  z-index: 0;
}
.settingsRow .seg[aria-label="Font size controls"] #prefFontBodySmaller::before{
  transform-origin: right center;
}
.settingsRow .seg[aria-label="Font size controls"] #prefFontBodyLarger::before{
  transform-origin: left center;
}
.settingsRow .seg[aria-label="Font size controls"] :is(#prefFontBodySmaller, #prefFontBodyLarger) > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 420px){
  .settingsRow{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .settingsLabel{
    margin-bottom: 2px;
  }
}

/* Fermentation start: wrap on narrow widths; time/date keep readable min widths (no squish). */
.field .row.fermentStartRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-width: 0;
}

#coldHoursChips{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.coldStageChipsField{
  display:flex;
  align-items:flex-end;
  justify-content:stretch;
}
#coldHoursChips{
  margin-top: 0;
}

.coldFermentFrame{
  padding: 10px 10px 12px;
}
.coldFermentFrame .field{
  border: 0;
  padding: 0;
  background: transparent;
}
.coldFermentFrame .coldFermentTopRow{
  align-items: end;
}
.field .row.fermentStartRow .fermentTimeWrap,
.field .row.fermentStartRow .fermentDateWrap{
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.field .row.fermentStartRow .fermentNativeFieldLab{
  font-size: var(--fs-b-11, 0.78rem);
  font-weight: 700;
  color: rgba(255, 250, 230, 0.82);
  letter-spacing: 0.04em;
}
.field .row.fermentStartRow .fermentStartActions{
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.field .row.fermentStartRow .fermentStartActions .fermentStartNowBtn,
.field .row.fermentStartRow .fermentStartActions #startScheduleResetBtn{
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
}
.field .row.fermentStartRow #startTime,
.field .row.fermentStartRow #startDate{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Start schedule active: green neon + tint (matches hero/timeline “live” anchor). */
.field .row.fermentStartRow #startTime.fermentStartInput--live,
.field .row.fermentStartRow #startDate.fermentStartInput--live{
  background: linear-gradient(180deg, rgba(30, 181, 130, 0.22), rgba(30, 181, 130, 0.1));
  border-color: rgba(30, 181, 130, 0.75);
  box-shadow:
    0 0 0 2px rgba(30, 181, 130, 0.16),
    0 0 14px rgba(30, 181, 130, 0.28),
    inset 0 0 20px rgba(30, 181, 130, 0.08);
  color: rgba(255, 255, 255, 0.96);
}
.field .row.fermentStartRow #startTime.fermentStartInput--live:focus,
.field .row.fermentStartRow #startDate.fermentStartInput--live:focus{
  outline: 2px solid rgba(72, 220, 160, 0.92);
  outline-offset: 1px;
  border-color: rgba(72, 220, 160, 0.92);
  box-shadow:
    0 0 0 2px rgba(30, 181, 130, 0.2),
    0 0 14px rgba(30, 181, 130, 0.28);
}

.kicker{
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-size: var(--fs-h-12);
}

h1{
  margin:.35rem 0 .25rem;
  font-size: var(--fs-h-30);
  line-height:1.15;
}
.sub{
  margin:0;
  color:var(--muted);
  max-width: 62ch;
}
.btn{
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(90,74,149,.35), rgba(10,17,61,.75));
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn#btnReset{
  background: linear-gradient(180deg, rgba(228,49,115,1), rgba(166,36,86,1));
  border-color: rgba(246,249,255,.22);
  box-shadow: 0 14px 26px rgba(228,49,115,.18), 0 10px 26px rgba(0,0,0,.25);
}
.btn.heroReset#btnReset{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 12px;
  font-family: var(--arcade);
  font-size: var(--fs-h-10);
  font-weight: 400;
  line-height: 1.1;
}
.btn:hover{border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(1px)}
.btn.ghost{
  background: linear-gradient(180deg, rgba(13,16,61,.92), rgba(5,16,61,.92));
  border-color: rgba(246,249,255,.12);
  box-shadow:none;
}
.btn.ghost:hover{background: rgba(255,255,255,.06)}

/* Two columns share space evenly (Fold unfolded, tablets, desktop) — avoids a fixed 520px sidebar dominating mid-width viewports. */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pdc-dashboard-grid-gap);
  min-width: 0;
}
/* Double-tap hero pizza / stamp (`pdc-app.js`): fold grid column 1 (sidebar); repeat to restore. */
main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain){
  grid-template-columns: 1fr;
}
main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) > section.card.sidebar{
  display: none;
}

.card{
  background: linear-gradient(180deg, rgba(16,21,61,.86), rgba(8,16,58,.70));
  border: 2px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 0;
}
.card:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: var(--shadow2);
}

.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.cardHeader.seamlessHeader{
  margin-bottom: 8px;
  /* Chips / pills in .right must not shift 7./8. headings (avoid vertical centering vs taller controls). */
  align-items: flex-start;
  flex-wrap: wrap;
}
.cardHeader.seamlessHeader .right .menuSelect{
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}
/* Mix / bake menu chips: width ≥ longest menu row (see menu-select.js + --pdcMenuIntrinsicMin) */
.cardHeader.seamlessHeader .right .menuSelect.menuSelect--intrinsicW{
  flex: 0 1 auto;
  min-width: min(var(--pdcMenuIntrinsicMin, 200px), 100%);
  max-width: 100%;
  box-sizing: border-box;
}
.cardHeader.seamlessHeader.cardHeader--chipBelow .right:has(.menuSelect--intrinsicW){
  flex: 1 1 100%;
  max-width: 100%;
  justify-content: flex-start;
}
.cardHeader.seamlessHeader.cardHeader--chipBelow .right .menuSelect.menuSelect--intrinsicW{
  width: 100%;
}
.cardHeader.seamlessHeader .right{
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}
.cardHeader.seamlessHeader .sectionTitle{
  flex-shrink: 0;
}
.cardHeader.alignTop{align-items:flex-start}
.cardHeader.alignTop .right{align-items:flex-start}
.cardHeader.styleHeader{align-items:center}
.cardHeader.styleHeader .sectionTitle{align-items:center}
.cardHeader.styleHeader .right{align-items:center}

/* Section heading on first row, menu chip full width beneath (pizza style, mixing). */
.cardHeader.cardHeader--blockBelow{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cardHeader.cardHeader--blockBelow .right{
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}
.cardHeader.cardHeader--blockBelow .menuSelect{
  width: 100%;
  max-width: 100%;
}
.cardHeader.styleHeader.cardHeader--blockBelow{
  align-items: stretch;
}
.cardHeader.styleHeader.cardHeader--blockBelow .sectionTitle{
  align-items: flex-start;
}
.cardHeader.styleHeader.cardHeader--blockBelow .right{
  align-items: stretch;
}

/* Dashboard §1 layout helpers: the heading row + Save Recipe wrapper used to live here.
 * Both have been removed (search field + picker placeholder do the labelling, and Save
 * Recipe sits in the eat-plan chip row). Rules retained as no-ops in case other code
 * still queries the selectors. */
.dashboardStyleHeadRow,
.dashboardStyleHeadActions{
  display: none;
}
/* Keeps `.top` banner width aligned with phantom pages after Save moved into the card. */
.topActionsWidthLock{
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Dashboard: pizza-style search = one narrow column, flush left (× stays inside the bar) */
.dashboard .sidebar .field.pdcSearchField.dashboardStyleSearchField,
.knowledgeMain .field.pdcSearchField.knowledgeStyleSearchField{
  width: min(220px, 100%);
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}
/* Search sits above the style chip in a stacked header — match chip width. */
.dashboard .sidebar .cardHeader.cardHeader--blockBelow .field.pdcSearchField.dashboardStyleSearchField{
  width: 100%;
  max-width: 100%;
}
/* Styles (knowledge) toolbar: same full-width search strip as dashboard §1 above the picker. */
.knowledgeMain .knowledgeStyleToolbar > .field.pdcSearchField.knowledgeStyleSearchField{
  width: 100%;
  max-width: 100%;
}
.sectionTitle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.sectionNum{
  font-family: var(--arcade);
  font-weight: 400;
  color: rgba(255,255,255,.96);
  font-size: var(--fs-h-14);
  line-height: 1.1;
  /* Step numbers are intentionally hidden everywhere — the labels carry the meaning.
   * Markup is preserved so the numbering can be re-enabled by removing this `display`
   * rule. JS-created `.sectionNum` spans (e.g. the ingredient bars sub-header that used
   * `visibility: hidden` for layout-space alignment with numbered sections) are also
   * hidden by this rule, which is fine now that nothing else shows a visible number. */
  display: none;
}
.sectionLabel{
  font-family: var(--arcade);
  font-weight: 400;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--accentHot);
  font-size: var(--fs-h-14);
  line-height: 1.1;
}
.cardHeader h2{
  margin:0;
  font-size: var(--fs-h-16);
  letter-spacing:.01em;
}
.right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  min-width: 0;
  max-width: 100%;
}

.mixRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mixRow .menuSelect{
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}
.mixRow.mixRowLeft{justify-content:flex-start}
.mixRow.mixRowLeft .menuSelect{flex: 1 1 auto; min-width: 0}

.pill{
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid rgba(246,249,255,.12);
  color: var(--muted);
  font-weight: 600;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
}
.pill.subtle{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: var(--dim);
}

/* Flour hint: same pill border as yeast hint */
#flourHint{
  display: block;
  white-space: normal;
  margin-top: 10px;
}

.chipRow{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start}
.prefAutoChip{
  border-color: rgba(255,255,255,.18);
}

/* Preferment kind chips: grow with font size; wrap only when space is tight */
#prefermentSection #prefermentKindChips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 8px; /* space from preferment text/inputs */
}
#prefermentSection #prefermentKindChips .chip.prefKindChip{
  /* Wide screens: chips can expand to fit larger text.
     Narrow screens: they wrap + allow multi-line labels. */
  flex: 1 1 max-content;
  width: auto;
  min-width: clamp(108px, 18vw, 190px);
  max-width: 100%;
  height: auto;
  min-height: 44px;
  padding: 8px 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  text-wrap: balance;
}

#prefermentSection #prefermentAutoChips{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 19rem;
  margin-top: 10px; /* space between preferment rows */
}
/* `.prefermentStrengthRow` was the previous home for the Auto pill (alongside
 * the Light/Standard/Strong chips). The pill has since moved up into the
 * Biga/Poolish % heading row, so the strength chips sit on their own
 * row again — no extra wrapper styling needed here. */

/* "Main dough" sub-heading inside DOUGH FORMULA. Sits above the hydration
 * slider and visually pairs with the Preferment block above (when active),
 * so the form mirrors the Preferment / Main split shown in the hero summary
 * box. Cyan arcade type — distinct from the hot-pink section label and the
 * yellow preferment hint — with a thin underline for a quiet section break.
 * Margin tightens when it's the first child after the (hidden) preferment
 * section so the Auto pill row above doesn't double-up its bottom margin. */
.formulaSubHead{
  font-family: var(--arcade);
  /* Slightly larger than the hero's `.heroSumSubH` baseline so the form
   * sub-heading reads as a proper section break in the wider sidebar layout. */
  font-size: calc(var(--fs-h-9) + 2px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(75, 248, 254, 0.92);
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.1);
}
/* Preferment variant — yellow accent so it visually pairs with the preferment
 * hint and the hero summary's `.heroSumSubH--preferment` heading. Used above
 * the "Flour in preferment" slider; text flips to "Biga %" or
 * "Poolish %" via JS depending on the active kind. */
.formulaSubHead--preferment{
  color: #fffb80;
  border-bottom-color: rgba(255, 251, 128, 0.18);
}
/* "MAIN DOUGH %" variant: heading text on the left, Auto toggle pill
 * pushed flush right on the same line. The underline (inherited from
 * `.formulaSubHead`) spans the full row so the row reads as one section break
 * with a built-in toggle, rather than a heading sitting above a separate chip
 * row. The Auto pill keeps its own background, so the underline passing
 * beneath it is barely visible — that's by design. */
.formulaSubHead--withAuto{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 14px;
}
.formulaSubHead--withAuto > .formulaSubHeadText{
  /* Inherit the heading's typography; just acts as a spanning text node so the
   * Auto pill can sit alongside without adopting heading styles. */
  flex: 0 1 auto;
  min-width: 0;
}
/* Any pill placed inside a heading row pins to the right edge. Currently used
 * by `#autoFormulaPill` (Main dough heading) and `#autoPrefermentPill`
 * (Biga/Poolish % heading). */
.formulaSubHead--withAuto > .pill{
  margin-left: auto;
  flex: 0 0 auto;
}
#prefermentSection #prefermentAutoChips .chip{
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 10px;
  font-weight: 900;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  line-height: 1.1;
  letter-spacing: .02em;
  display:flex;
  align-items: center;
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  color: rgba(255,255,255,.96);
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0,0,0,.25);
  justify-content: center;
}
#prefermentSection #prefermentAutoChips .chip:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
#prefermentSection #prefermentAutoChips .chip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}

/* Dough balls + ball weight chips: one row, equal flex share (count can change without CSS). */
#ballsChips,
#ballWeightChips{
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-left: -10px; /* align to the field border (field has 10px padding) */
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  min-width: 0;
}
#ballsChips .chip,
#ballWeightChips .chip{
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  justify-content: center;
  font-size: var(--fs-b-11);
  padding: 6px 6px;
  white-space: nowrap;
}

/* Skinny screens + big fonts: shrink chip text/padding so one row still fits */
@supports (font-size: 1cqi){
  @media (max-width: 420px){
    #ballsChips .chip,
    #ballWeightChips .chip{
      font-size: clamp(var(--fs-b-9), calc(6px + 3.0cqi), var(--fs-b-11));
      padding: 6px 4px;
      letter-spacing: 0.01em;
    }
  }
}
.chip{
  border-radius: 10px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 10px;
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  color: rgba(255,255,255,.96);
  cursor:pointer;
  font-weight: 900;
  font-family: var(--mono);
  /* Chips preference applies only to dropdown list rows (`.menuPanel .menuItem`), not dashboard chips. */
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .02em;
  display:inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
}
.chip:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
.chip:active{transform: translateY(1px)}

/* Selected (common): consistent across all chips (black text on neon) */
.chip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}
.chip.activeGreen:hover{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.16), 0 14px 30px rgba(0,0,0,.28);
}

/* Extra color variety (same shape, different accents) */
.chip.chipVarPink{
  border-color: rgba(228,49,115,.92);
  background: linear-gradient(180deg, rgba(228,49,115,.18), rgba(10,17,61,.78));
  box-shadow: 0 0 0 3px rgba(228,49,115,.14), 0 10px 22px rgba(0,0,0,.25);
}
.chip.chipVarPink:hover{
  border-color: rgba(255,251,128,.92);
  background: linear-gradient(180deg, rgba(255,251,128,.12), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(255,251,128,.12), 0 12px 26px rgba(0,0,0,.28);
}
.chip.chipVarCyan{
  border-color: rgba(75, 248, 254, 0.95);
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.2), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 3px rgba(75, 248, 254, 0.16), 0 10px 22px rgba(0, 0, 0, 0.25);
}
.chip.chipVarCyan:hover{
  border-color: rgba(186, 160, 255, 0.98);
  background: linear-gradient(180deg, rgba(167, 120, 255, 0.22), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 4px rgba(167, 120, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.28);
}
.chip.chipVarGold{
  border-color: rgba(242,176,42,.92);
  background: linear-gradient(180deg, rgba(242,176,42,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 3px rgba(242,176,42,.12), 0 10px 22px rgba(0,0,0,.25);
}
/* Bake-ready row: keep gold accent on hover (global .chip:hover is cyan). */
#bakeReadyPlanChips .chip.chipVarGold:hover:not(.activeGreen),
#bakeReadyPlanChips .chip.chipVarGold:focus-visible:not(.activeGreen){
  border-color: rgba(255, 251, 128, 0.98);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.22), rgba(10, 17, 61, 0.86));
  box-shadow:
    0 0 0 4px rgba(255, 207, 90, 0.18),
    0 0 22px rgba(255, 207, 90, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.98);
}
/* Pan size chips: .chip.chipVarGold beats generic .chip:hover — give a clear gold hover */
#panPlannerRow .chip.chipVarGold:hover:not(.activeGreen),
#panPlannerRow .chip.chipVarGold:focus-visible:not(.activeGreen){
  border-color: rgba(255, 251, 128, 0.98);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.26), rgba(10, 17, 61, 0.86));
  box-shadow:
    0 0 0 4px rgba(255, 207, 90, 0.18),
    0 0 22px rgba(255, 207, 90, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.98);
}
.chip.chipVarGreen{
  border-color: rgba(30,181,130,.92);
  background: linear-gradient(180deg, rgba(30,181,130,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 3px rgba(30,181,130,.12), 0 10px 22px rgba(0,0,0,.25);
}

/* Active state must always “win” over color variants */
.chip.chipVarPink.activeGreen,
.chip.chipVarCyan.activeGreen,
.chip.chipVarGold.activeGreen,
.chip.chipVarGreen.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}

/* Allow the Detroit + button to flash green */
#detroitPanAdd.activeGreen{
  border-color: rgba(255,255,255,.22);
  background: var(--good);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}

/* Top Reset chip: red default, green while pressed */
#btnReset.chip{
  background: var(--bad);
  border-color: rgba(255,255,255,.22);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(228,49,115,.12);
}
#btnReset.chip:active{
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}

/* Pizza size preset chips: equal-width flex children fill the row */
#sizeRow #sizeChips.sizeChipsRound,
#sizeRow #sizeChips.sizeChipsPan{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Ultra-narrow screens / big fonts: avoid horizontal overflow in Optional pizza sizer. */
@media (max-width: 420px){
  #sizeRow #sizeChips.sizeChipsRound{
    flex-wrap: wrap;
  }
  #sizeRow #sizeChips.sizeChipsRound .chip{
    flex: 1 1 calc(25% - 8px);
    min-width: 54px;
    font-size: clamp(var(--fs-b-10), calc(7px + 1.2vw), var(--fs-b-12));
  }
}

/* If it’s still too tight (Fold/Flip cover-like widths), drop 8" and 14" to keep one-row feel. */
@media (max-width: 360px){
  #sizeRow #sizeChips.sizeChipsRound .chip[data-size-in="8"],
  #sizeRow #sizeChips.sizeChipsRound .chip[data-size-in="14"]{
    display: none;
  }
  #sizeRow #sizeChips.sizeChipsRound{
    flex-wrap: nowrap;
  }
}
#sizeRow #sizeChips .chip{
  flex: 1 1 0;
  min-width: 44px;
  width: auto;
  max-width: none;
  border-radius: 11px;
  box-sizing: border-box;
  height: 44px;
  padding: 0 9px;
  font-weight: 900;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  line-height: 1.1;
  letter-spacing: .02em;
  display:flex;
  align-items: center;
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  color: rgba(255,255,255,.96);
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0,0,0,.25);
  justify-content: center;
}
#sizeRow #sizeChips .chip:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}

/* Selected size: obvious neon cyan */
#sizeRow #sizeChips .chip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}

/* “Not using preset yet” cue: magenta */
#sizeRow #sizeChips .chip.danger{
  border-color: rgba(228,49,115,.92);
  background: rgba(228,49,115,.16);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(228,49,115,.12), 0 14px 30px rgba(0,0,0,.28);
}
.chip.sizeChip.danger{
  background: rgba(228,49,115,.16);
  border-color: rgba(228,49,115,.92);
  box-shadow: 0 0 0 4px rgba(228,49,115,.12);
  color:#fff;
}
.chip.sizeChip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14);
  color: rgba(0,0,0,.92);
}

/* Dashboard visuals — Total dough HERO: primary metric, then banded summary */
.hero{
  position: relative;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(18, 10, 42, 0.55), rgba(9, 21, 69, 0.78), rgba(8, 16, 53, 0.72));
  /* No top padding so pizza style row can sit flush to the top of the box. */
  padding: 0 16px 18px;
  font-family: var(--arcade);
  overflow: hidden; /* keep thumbnail + title inside box */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  container-type: inline-size;
  container-name: heroDough;
}

/* Total dough hero: stronger “winner” ring + pink/cyan bloom (scoped to dashboard hero only). */
.hero.neonFrame.neonFrame--pink{
  /* Shift pizza style, metric, summary, and stamp together (matches PDF/share clone). */
  padding: 20px 16px 18px;
  overflow: visible;
  z-index: 2;
  --nf-border: rgba(255, 130, 198, 0.98);
  --nf-glow: rgba(228, 49, 115, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 40px rgba(228, 49, 115, 0.16),
    inset 0 -32px 56px rgba(75, 248, 254, 0.07),
    0 0 0 1px rgba(228, 49, 115, 0.48),
    0 0 22px rgba(228, 49, 115, 0.52),
    0 0 46px rgba(111, 53, 215, 0.34),
    0 0 72px rgba(75, 248, 254, 0.22);
}
.hero.neonFrame.neonFrame--pink::before{
  border-color: var(--nf-border);
  box-shadow:
    0 0 0 4px var(--nf-glow),
    0 0 20px rgba(228, 49, 115, 0.58),
    0 0 40px rgba(75, 248, 254, 0.34);
}

/* Calculator results column (`section.card.results` — hero, ingredients, sections 7/8/9)
 * wears the hero's pink neon frame so the whole column reads as one big "hero box".
 * The `.card` purple border is replaced by the same `::before` ring used by the hero,
 * and the inner `.hero` cancels its own frame so the borders don't double up. */
.card.results{
  position: relative;
  border-color: transparent;
  --nf-border: rgba(255, 130, 198, 0.98);
  --nf-glow: rgba(228, 49, 115, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 40px rgba(228, 49, 115, 0.16),
    inset 0 -32px 56px rgba(75, 248, 254, 0.07),
    0 0 0 1px rgba(228, 49, 115, 0.48),
    0 0 22px rgba(228, 49, 115, 0.52),
    0 0 46px rgba(111, 53, 215, 0.34),
    0 0 72px rgba(75, 248, 254, 0.22);
  overflow: visible;
}
.card.results::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius2) + 2px);
  pointer-events: none;
  border: 2px solid var(--nf-border);
  box-shadow:
    0 0 0 4px var(--nf-glow),
    0 0 20px rgba(228, 49, 115, 0.58),
    0 0 40px rgba(75, 248, 254, 0.34);
}
/* The column wrapper isn't a hover-able card — kill the lift/border-flip from `.card:hover`. */
.card.results:hover{
  transform: none;
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 40px rgba(228, 49, 115, 0.16),
    inset 0 -32px 56px rgba(75, 248, 254, 0.07),
    0 0 0 1px rgba(228, 49, 115, 0.48),
    0 0 22px rgba(228, 49, 115, 0.52),
    0 0 46px rgba(111, 53, 215, 0.34),
    0 0 72px rgba(75, 248, 254, 0.22);
}
/* Inner hero: keep its background/padding but drop its own ring + outer glow so the
 * outer column frame is the only border showing. */
.card.results .hero.neonFrame.neonFrame--pink{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: auto;
}
.card.results .hero.neonFrame.neonFrame--pink::before{
  display: none;
}

/* Section dividers inside the results column: a glowing pink strip that echoes the
 * outer neon frame, giving each section (Hero → Mixing → Timeline → Bake Setup) a
 * distinct visual rhythm. */
/* Optional balance artwork: pdc-column-balance.js shows this only in whichever
 * dashboard column is shorter and scales its height to the spare gap. The wrapper
 * carries `neonFrame neonFrame--pink` so the box matches the hero's reset
 * placeholder; the inner `<img>` fills the box without cropping the artwork. */
.columnBalanceBrand{
  display: none;
  width: var(--pdc-column-balance-brand-width, 100%);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 14px;
  height: var(--pdc-column-balance-brand-height, 0px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.columnBalanceBrand[data-balance-visible="true"]{
  display: block;
}
.columnBalanceBrandImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  /* Match the rest of the 8-bit branding artwork. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.card.results .divider,
.card.sidebar .divider.sidebarNeonBreaker{
  position: relative;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 130, 198, 0) 0%,
    rgba(255, 130, 198, 0.95) 18%,
    rgba(255, 130, 198, 0.95) 82%,
    rgba(255, 130, 198, 0) 100%
  );
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 0 6px rgba(228, 49, 115, 0.55),
    0 0 14px rgba(228, 49, 115, 0.32),
    0 0 22px rgba(75, 248, 254, 0.18);
  margin: 18px 4px;
  opacity: 0.95;
}

/* `.cardHeader` and `.stepper` set their own `display: flex`, which has higher
 * precedence than the user-agent `[hidden] { display: none }` rule. When
 * `applyHeroResetVisibility()` toggles `el.hidden = true` on the column-two guide
 * sections (Mixing / Timeline / Bake Setup), the headings/steppers still showed
 * because the flex display was winning the cascade. These attribute-selector rules
 * out-specify the base rules so the `hidden` attribute actually hides them. */
.cardHeader[hidden],
.stepper[hidden]{
  display: none;
}

/* First paint (before `applyHeroResetVisibility` adds `.pdcHeroVisApplied`): avoid a flash
 * of full hero metrics + section headings when the session will resolve to reset mode.
 * `html.pdcUrlRecipeIntent` is set inline in `index.html` when the URL hydrates a style —
 * then we skip this mask so deep links don’t flash the empty-state shell.
 * Once JS runs, `.pdcHeroVisApplied` is set every pass and normal reset / revealed rules apply. */
/* Use `display:none` (not `visibility:hidden`) so flex doesn’t reserve space for these
 * rows — otherwise the placeholder image is squeezed and the hero reads as an empty box. */
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) .hero .heroPrimaryCol,
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) .hero .heroBody{
  display: none !important;
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) .hero .heroStyle{
  display: none !important;
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > *:not(.hero){
  display: none !important;
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) #heroResetPlaceholder[hidden]{
  display: block !important;
}
/* Match `.results--reset` chrome on first paint so the pink `::before` ring + outer glow
 * do not flash before JS adds `.results--reset` (same values as that block below). */
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied){
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied):hover{
  transform: none;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied)::before{
  display: none;
}
html:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) .hero.neonFrame.neonFrame--pink{
  padding: 0;
  overflow: hidden;
}

/* Reset / "let's make some dough" empty state for the results column.
 *
 * `.results--reset` is added by `applyHeroResetVisibility()` (in `pdc-app.js`) when no
 * heroSumBlock and no section 7/8/9 has been triggered. We hide the hero's metric column
 * + body so the column reads as a calm, mostly-empty neon frame, and reveal the
 * `#heroResetPlaceholder` slot for the user-supplied empty-state copy/imagery.
 *
 * Section 7/8/9 cardHeaders, dividers, and steppers are toggled via the `hidden`
 * attribute (set in JS) — no CSS needed for those. */
.card.results.results--reset .hero .heroPrimaryCol,
.card.results.results--reset .hero .heroBody,
.card.results.results--reset .hero .heroStyle{
  display: none !important;
}

/* In reset mode the hero box is just the placeholder image — drop the hero's own
 * padding so the artwork fills the frame edge-to-edge, and clip to the same rounded
 * corners as the box so the image inherits the curve. */
.card.results.results--reset .hero.neonFrame.neonFrame--pink{
  padding: 0;
  overflow: hidden;
}

/* Reset state: kill the column "border" (the .card 16px inner padding + the pink
 * neon ring + the outer pink/cyan glow) so the placeholder image becomes the
 * entire visible card. The image fills `.card.results` edge-to-edge and clips
 * to the card's rounded corners; the curved-CRT illusion is carried entirely
 * by the vignette / glass / scanlines / animation overlays inside the
 * placeholder, not by the surrounding ring. Out of reset mode the column
 * regains its full neon frame via the rules above. */
.card.results.results--reset{
  padding: 0;
  overflow: hidden;
  /* Keep just the inset top-edge highlight so the rounded corners still read,
   * but drop the neon glow halo so there's no visible "border" around it. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.card.results.results--reset:hover{
  /* Match: don't restore the glow on hover either. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.card.results.results--reset::before{
  /* The pink ring lives on `.card.results::before`; suppress it in reset mode. */
  display: none;
}

/* Reset state: hide the Advanced overrides accordion that lives at the bottom of the
 * results column so the column shrinks to just the placeholder. */
.card.results.results--reset .detailsAdvancedDoughOverrides{
  display: none;
}

/* The dashboard grid stretches both columns to equal height by default, so the pink
 * neon ring on `.card.results` would extend down to match the (taller) sidebar even
 * when sections 7/8/9 are hidden (no mixer / no oven / no preferment / etc.). Always
 * sit at the top of the grid cell and let the column be the height of its content,
 * so the ring hugs the last visible block — whether that's the placeholder image in
 * full-reset mode, just the hero summary, or the hero plus a single guide section. */
.card.results,
.card.results.results--reset{
  align-self: start;
}

.heroResetPlaceholder{
  /* Edge-to-edge image slot inside the hero. The branded `makedough2.webp` artwork
   * fills the full frame while the recipe is in reset state.
   *
   * The placeholder is dressed up to read as the screen of an old CRT TV via:
   *   - Persistent radial vignette on `::before` (mix-blend multiply) that
   *     darkens the corners, selling the curved-tube illusion.
   *   - Top-glass linear highlight + faint persistent scanlines on `::after`.
   *   - Inset box-shadow halo around the inner edge to suggest the screen
   *     pressing into the bezel cutout.
   *
   * `position: relative` anchors the pseudo-element overlays AND the JS-injected
   * warm-up overlay (`.heroResetCrtOverlay`). `isolation: isolate` keeps the
   * mix-blend layers contained so they don't bleed onto the surrounding hero. */
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  /* Inherit the hero's rounded corners so the image is clipped to match. */
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  /* No `box-shadow` halo here. An earlier version inset a dark ring around the
   * placeholder to suggest a screen sitting inside a bezel, but that ring read
   * as "the image is in its own inner box" — visually competing with the
   * hero's outer pink neon frame. Removing it lets the image fill the hero
   * edge-to-edge, with the curve illusion carried entirely by the radial
   * vignette + glass highlight + scanlines on the pseudos below. */
}
.heroResetPlaceholder[hidden]{ display: none; }
/* Persistent CRT curvature vignette: dark at the corners, transparent at the
 * centre. This is the strongest single signal that the screen is "curved" —
 * real CRTs have phosphor falloff and physical tube curvature that produce
 * exactly this look.
 *
 * Originally used `mix-blend-mode: multiply` to *tint* the picture rather than
 * sit on top as a flat grey, but the multiply layer was being neutralised in
 * some contexts (ancestor stacking + already-dark picture), so the vignette
 * was effectively invisible. Switched to a plain alpha overlay — it sits ON
 * TOP of the picture (which is what we want for a glass-front CRT anyway) and
 * works the same across every browser regardless of stacking context. */
.heroResetPlaceholder::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 70% 85% at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.45) 75%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
}
/* Persistent top-glass highlight + visible full-frame scanlines.
 * The top highlight reads as light reflecting off the curved glass face;
 * the scanlines are visible enough to read as "tube TV" at typical viewing
 * distance without fighting the picture content itself. */
.heroResetPlaceholder::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.12) 6%,
      rgba(255, 255, 255, 0.04) 14%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 100%
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0.14) 1px,
      rgba(0, 0, 0, 0.14) 2px
    );
  z-index: 2;
}
.heroResetPlaceholderImg{
  display: block;
  width: 100%;
  height: auto;
  /* Crisp pixel-art rendering to match the rest of the 8-bit branding. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Dashboard: hover/focus preview of a pizza style in the reset CRT slot — keep vignette
 * + glass scanlines (`::before` / `::after`); pause the power-on/off TV loop + snow overlay. */
.heroResetPlaceholder--stylePreview .heroResetPlaceholderImg{
  animation: none !important;
  image-rendering: auto;
}
.heroResetPlaceholder--stylePreview.heroResetPlaceholder--crtOn .heroResetPlaceholderImg,
.heroResetPlaceholder--stylePreview.heroResetPlaceholder--crtOff .heroResetPlaceholderImg{
  animation: none !important;
}
.heroResetPlaceholder--stylePreview .heroResetCrtOverlay{
  display: none !important;
}
.heroResetPreviewCap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 9px;
  border-radius: 0 0 inherit;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 32, 0.72) 28%, rgba(4, 8, 28, 0.94));
  pointer-events: none;
  text-align: center;
  z-index: 3;
}
.heroResetPreviewCapLabel{
  display: block;
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(10px, 0.55vw + 9px, 15px);
  line-height: 1.2;
  color: #fffcef;
  text-shadow:
    0 0 12px rgba(75, 248, 254, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.65);
}

/* ===================================================================== */
/* CRT power-on / "tuning in" effect                                       */
/* ===================================================================== */
/*
 * Triggered by JS via the `--crtOn` modifier class on `.heroResetPlaceholder`
 * the first time the placeholder is shown after page load (see
 * `applyHeroResetVisibility` in pdc-app.js). The class is removed once the
 * animation completes so subsequent reset cycles within the same session
 * don't replay it.
 *
 * Phases (4s total):
 *   1. ~0–6%   Picture collapsed to a hairline at vertical centre, dark.
 *              Static (snow) on top; flash band primed (brightness peaks are
 *              capped so this stays CRT-nostalgic, not seizure-risky).
 *   2. ~6–22%  Flash line + hairline expand; static drifts slowly (no rapid
 *              stepped flicker — that pattern is avoided for photosensitivity).
 *   3. ~22–55% Picture slightly bright then settles; static fades; heavy
 *              scanlines visible, then ease out.
 *   4. ~55–100% Picture settles to normal brightness. Static + heavy scanlines
 *              fade out. Persistent CRT screen visuals (vignette, top glass,
 *              faint scanlines) remain — that's the static "tuned-in" look.
 *
 * The animated overlay (static / flash / heavy scanlines) lives in a
 * JS-injected `.heroResetCrtOverlay` child rather than `::before`/`::after`
 * on the placeholder, because those pseudos are reserved for the persistent
 * CRT screen look (vignette + glass + faint scanlines).
 *
 * Honors `prefers-reduced-motion: reduce` (effect fully suppressed). */
.heroResetPlaceholder--crtOn .heroResetPlaceholderImg{
  /* 4s lets the warm-up read as a real CRT — the early "tube cold" pause and
   * line-collapse still snap because they live in the first ~10% of the
   * percentage-keyframed sequence (~0.4s of the new total), and the longer
   * tail gives the picture-stabilise phase a satisfying slow settle. */
  animation: pdcCrtOnPicture 4s cubic-bezier(.2, .7, .2, 1) both;
  transform-origin: center;
  will-change: transform, filter;
}

/* JS-injected overlay container. Sits above the persistent vignette/glass
 * pseudos (z-index 3 vs 1/2) so the warm-up effects paint over them. */
.heroResetCrtOverlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 3;
}

/* Static / "snow" — animated noise that simulates the CRT trying to lock
 * onto a signal during warm-up. The SVG `feTurbulence` produces a smooth
 * noise field; the `feColorMatrix` thresholds it into mostly-transparent
 * with bright-white speckles, which look like classic CRT static when
 * blended over the dark warming-up picture. The slight `inset: -10%` lets
 * the noise tile cover the screen even after the position-shift animation
 * pushes it around. */
.heroResetCrtNoise{
  position: absolute;
  inset: -12%;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    pdcCrtNoiseFade 4s ease-out both,
    /* Single smooth drift over the warm-up — no fast `steps(...) infinite` which
     * can read as harsh luminance flicker for photosensitive viewers. */
    pdcCrtNoiseShift 4s ease-in-out both;
  will-change: opacity, background-position;
}

/* Bright white flash band at vertical centre that expands to fill the screen. */
.heroResetCrtFlash{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 47%,
    rgba(255, 255, 255, 0.38) 49%,
    rgba(255, 255, 255, 0.48) 50%,
    rgba(255, 255, 255, 0.38) 51%,
    rgba(255, 255, 255, 0) 53%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateY(-50%) scaleY(0.01);
  transform-origin: center;
  opacity: 0;
  filter: blur(0.6px);
  /* Softer than `screen` so the expanding band does not blow out luminance. */
  mix-blend-mode: soft-light;
  animation: pdcCrtFlashLine 4s ease-out both;
}

/* Heavy animated scanlines on top of the warm-up picture. These are darker
 * and more visible than the persistent ones on `.heroResetPlaceholder::after`
 * — they fade out as the picture stabilises, leaving only the faint
 * persistent scanlines behind. */
.heroResetCrtHeavyScan{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.22) 1px,
    rgba(0, 0, 0, 0.22) 2px
  );
  mix-blend-mode: multiply;
  opacity: 0;
  animation: pdcCrtScanlinesFade 4s ease-out both;
}

@keyframes pdcCrtOnPicture{
  /* `opacity: 1` is included on every keyframe so the on-animation forcibly
   * restores visibility when restarting after a `pdcCrtOffPicture` cycle that
   * ended at `opacity: 0`. Without it, the image would stay invisible because
   * `animation-fill-mode: both` on the off-animation persists its final state
   * until the on-animation overrides it. */
  0%   { transform: scaleX(1) scaleY(0.01); filter: brightness(0);                    opacity: 1; }
  6%   { transform: scaleX(1) scaleY(0.01); filter: brightness(0);                    opacity: 1; }
  10%  { transform: scaleX(1) scaleY(0.04); filter: brightness(2) contrast(1.08);     opacity: 1; }
  20%  { transform: scaleX(1) scaleY(1);    filter: brightness(1.38) contrast(1.12); opacity: 1; }
  30%  { transform: scaleX(1) scaleY(1.005); filter: brightness(1.18) contrast(1.08); opacity: 1; }
  45%  { transform: scaleX(1) scaleY(0.998); filter: brightness(0.9) contrast(0.98);  opacity: 1; }
  60%  { transform: scaleX(1) scaleY(1.002); filter: brightness(1.05) contrast(1.03); opacity: 1; }
  75%  { transform: scaleX(1) scaleY(1);    filter: brightness(0.98);                opacity: 1; }
  100% { transform: scaleX(1) scaleY(1);    filter: brightness(1);                    opacity: 1; }
}

/* Header title only: same story as `pdcCrtOnPicture` but stays near real brightness
 * and leans on blur for the “fuzzy switch-on” instead of a black raster. */
@keyframes pdcCrtOnPictureBrand{
  0%   { transform: scaleX(1) scaleY(0.012); filter: brightness(0.72) blur(8px) contrast(1.02); opacity: 1; }
  4%   { transform: scaleX(1) scaleY(0.016); filter: brightness(0.84) blur(6.5px) contrast(1.02); opacity: 1; }
  9%   { transform: scaleX(1) scaleY(0.045); filter: brightness(1) blur(4.5px) contrast(1.03); opacity: 1; }
  16%  { transform: scaleX(1) scaleY(0.92); filter: brightness(1.04) blur(2.4px) contrast(1.04); opacity: 1; }
  24%  { transform: scaleX(1) scaleY(1); filter: brightness(1.05) blur(1.2px) contrast(1.04); opacity: 1; }
  38%  { transform: scaleX(1) scaleY(1); filter: brightness(1.02) blur(0.45px) contrast(1.02); opacity: 1; }
  52%  { transform: scaleX(1) scaleY(1); filter: brightness(1) blur(0); opacity: 1; }
  100% { transform: scaleX(1) scaleY(1); filter: brightness(1) blur(0); opacity: 1; }
}

/* Thin banner variant: less vertical “squeeze” so the warm-up effect fills
 * the available height without looking like a collapsed sliver. */
@keyframes pdcCrtOnPictureBrandThin{
  /* Keep `scaleY(1)` so the banner box stays tightly sized; we still simulate the
   * warm-up depth using blur/brightness/contrast only (transforms don’t affect
   * layout height, so scaleY squeeze can look like a tall empty CRT frame). */
  0%   { transform: scaleX(1) scaleY(1); filter: brightness(0.72) blur(8px)   contrast(1.02); opacity: 1; }
  4%   { transform: scaleX(1) scaleY(1); filter: brightness(0.84) blur(6.5px) contrast(1.02); opacity: 1; }
  9%   { transform: scaleX(1) scaleY(1); filter: brightness(1)    blur(4.5px) contrast(1.03); opacity: 1; }
  16%  { transform: scaleX(1) scaleY(1); filter: brightness(1.04) blur(2.4px) contrast(1.04); opacity: 1; }
  24%  { transform: scaleX(1) scaleY(1); filter: brightness(1.05) blur(1.2px) contrast(1.04); opacity: 1; }
  38%  { transform: scaleX(1) scaleY(1); filter: brightness(1.02) blur(0.45px) contrast(1.02); opacity: 1; }
  52%  { transform: scaleX(1) scaleY(1); filter: brightness(1)    blur(0); opacity: 1; }
  100% { transform: scaleX(1) scaleY(1); filter: brightness(1)    blur(0); opacity: 1; }
}

@keyframes pdcCrtNoiseFadeBrand{
  0%   { opacity: 0; }
  6%   { opacity: 0.26; }
  18%  { opacity: 0.18; }
  35%  { opacity: 0.1; }
  60%  { opacity: 0.03; }
  100% { opacity: 0; }
}
@keyframes pdcCrtScanlinesFadeBrand{
  0%   { opacity: 0; }
  18%  { opacity: 0.18; }
  55%  { opacity: 0.06; }
  100% { opacity: 0; }
}
@keyframes pdcCrtFlashLineBrand{
  0%   { opacity: 0; transform: translateY(-50%) scaleY(0.01); }
  4%   { opacity: 0.38; transform: translateY(-50%) scaleY(0.06); }
  10%  { opacity: 0.32; transform: translateY(-50%) scaleY(0.12); }
  22%  { opacity: 0.16; transform: translateY(-50%) scaleY(1); }
  38%  { opacity: 0; transform: translateY(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleY(1); }
}

.topBrandCrtHost .heroResetCrtNoise.topBrandCrtNoise{
  animation:
    pdcCrtNoiseFadeBrand 4s ease-out both,
    pdcCrtNoiseShift 4s ease-in-out both;
}
.topBrandCrtHost .heroResetCrtHeavyScan.topBrandCrtHeavyScan{
  animation: pdcCrtScanlinesFadeBrand 4s ease-out both;
}
.topBrandCrtHost .heroResetCrtFlash.topBrandCrtFlash{
  filter: blur(1.4px);
  animation: pdcCrtFlashLineBrand 4s ease-out both;
}

/* ===================================================================== */
/* CRT power-off ("collapse to dot") effect                                */
/* ===================================================================== */
/*
 * Mirror of the power-on animation: simulates the CRT being switched off.
 * Triggered by JS via the `--crtOff` modifier class on `.heroResetPlaceholder`
 * during the recurring on/off cycle scheduled in `applyHeroResetVisibility`
 * (see pdc-app.js, `startHeroCrtCycle()`).
 *
 * Phases (~1.2s total):
 *   ~0–35%   Picture compresses vertically toward the centre (scaleY → ~0).
 *            Brightness rises modestly (capped) to suggest beam collapse.
 *   ~35–70%  The thin line shrinks horizontally toward a small dot; brightness
 *            stays within a safe range vs. older ultra-bright versions.
 *   ~70–100% The dot fades out (opacity → 0).
 *
 * `animation-fill-mode: both` on the rule below holds the final keyframe
 * (invisible dot) for the entire `dark` pause that follows, until JS removes
 * `--crtOff` and re-adds `--crtOn` to restart the cycle. */
.heroResetPlaceholder--crtOff .heroResetPlaceholderImg{
  animation: pdcCrtOffPicture 1.2s cubic-bezier(.4, .15, .55, .95) both;
  transform-origin: center;
  will-change: transform, filter, opacity;
}
@keyframes pdcCrtOffPicture{
  0%   { transform: scaleX(1)     scaleY(1);     filter: brightness(1)   contrast(1);    opacity: 1; }
  20%  { transform: scaleX(1)     scaleY(0.55);  filter: brightness(1.22) contrast(1.1); opacity: 1; }
  35%  { transform: scaleX(1)     scaleY(0.04);  filter: brightness(1.85) contrast(1.22); opacity: 1; }
  50%  { transform: scaleX(1)     scaleY(0.012); filter: brightness(2.35) contrast(1.28); opacity: 1; }
  70%  { transform: scaleX(0.05)  scaleY(0.012); filter: brightness(2.55) contrast(1.32); opacity: 1; }
  82%  { transform: scaleX(0.008) scaleY(0.01);  filter: brightness(2.1) contrast(1.28); opacity: 0.95; }
  92%  { transform: scaleX(0.003) scaleY(0.008); filter: brightness(1.4) contrast(1.15); opacity: 0.45; }
  100% { transform: scaleX(0.001) scaleY(0.005); filter: brightness(0);                  opacity: 0; }
}
@keyframes pdcCrtFlashLine{
  0%   { opacity: 0;    transform: translateY(-50%) scaleY(0.01); }
  4%   { opacity: 0.65; transform: translateY(-50%) scaleY(0.05); }
  10%  { opacity: 0.55; transform: translateY(-50%) scaleY(0.10); }
  20%  { opacity: 0.28; transform: translateY(-50%) scaleY(1); }
  35%  { opacity: 0;    transform: translateY(-50%) scaleY(1); }
  100% { opacity: 0;    transform: translateY(-50%) scaleY(1); }
}
@keyframes pdcCrtScanlinesFade{
  0%   { opacity: 0; }
  18%  { opacity: 0.38; }
  55%  { opacity: 0.14; }
  100% { opacity: 0; }
}
@keyframes pdcCrtNoiseFade{
  0%   { opacity: 0; }
  6%   { opacity: 0.52; }
  18%  { opacity: 0.4; }
  35%  { opacity: 0.22; }
  60%  { opacity: 0.07; }
  100% { opacity: 0; }
}
@keyframes pdcCrtNoiseShift{
  0%   { background-position: 0 0; }
  50%  { background-position: 48px 22px; }
  100% { background-position: 88px 40px; }
}
@media (prefers-reduced-motion: reduce){
  /* Entire warm-up / power-off motion + overlay (snow / flash / heavy scanlines)
   * suppressed — safest default for vestibular / motion + luminance sensitivity. */
  .heroResetPlaceholder--crtOn .heroResetPlaceholderImg{ animation: none; }
  .heroResetPlaceholder--crtOff .heroResetPlaceholderImg{ animation: none; opacity: 1; }
  .heroResetCrtOverlay{ display: none; }
  .topBrandCrtHost.topBrandCrtHost--crtOn .topBrandImg{ animation: none; }
  .topBrandCrtHost .heroResetCrtOverlay{ display: none !important; }
}

/* ===================================================================== */
/* "When do you want to eat?" guided flow                                  */
/* See pdc-eat-plan.js for state + filter logic.                           */
/* ===================================================================== */

.eatPlanSection{
  margin: 0 0 14px;
  padding: 0;
}
.eatPlanChipRow{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
/* Active-mode home for the eat-plan chip. Lives above the pizza-style picker in
 * column 1; pdc-eat-plan.js moves the chip element here while a plan is active
 * (and back to the BAKE-READY PLANS rail when the plan is off / the recipe is
 * reset). The wrapper is `hidden` while the plan is inactive so the column-1
 * layout collapses cleanly back to "no eat-plan affordance here". */
.eatPlanChipActiveHome{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.eatPlanChipActiveHome[hidden]{ display: none; }

/* Mix now / eat-plan on: keep the “PIZZA QUEST” chip (+ inline receipt) pinned under the sticky nav while scrolling the dashboard. */
html[data-eat-plan-active] #eatPlanChipActiveHome:not([hidden]){
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 8px);
  z-index: 35;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 0 10px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(11, 14, 48, 0.98) 0%, rgba(11, 14, 48, 0.96) 72%, rgba(11, 14, 48, 0.9) 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  border-bottom: 1px solid rgba(75, 248, 254, 0.2);
}

/* Inline summary that sits directly under the active eat-plan chip in column 1.
 * Hidden until a plan is confirmed; shows the eat sentence (+ optional warns).
 * Sentence font size is shrunk in JS (`fitEatPlanInlineSummarySentenceEl`) to fit ≤2 lines.
 * Styled to read as a "neon receipt": thicker cyan edge, layered glow, soft inner
 * sheen, and warm cream lettering with a subtle cyan halo so it stands out from
 * the surrounding cards rather than blending in like a plain hint box. */
.eatPlanInlineSummary{
  margin-top: 8px;
  padding: 10px 14px;
  text-align: center;
  border: 2px solid rgba(75, 248, 254, 0.85);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(75, 248, 254, 0.18), rgba(8, 16, 53, 0.55));
  /* Box keeps its neon edge; text drops the halo so the copy is easy to read
   * (the previous text-shadow was bleeding into stroke and fuzzing letters). */
  color: #fff8c8;
  box-shadow:
    0 0 6px rgba(75, 248, 254, 0.55),
    0 0 16px rgba(75, 248, 254, 0.32),
    0 0 28px rgba(255, 230, 60, 0.18),
    inset 0 0 12px rgba(75, 248, 254, 0.14);
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: calc(var(--fs-h-9) + 1pt);
  font-weight: 700;
  letter-spacing: 0.02em;
  /* A touch more leading: the arcade face stacks tightly at 1.35, especially
   * once the sentence wraps across two lines on narrow screens. 1.55 gives
   * each row room to breathe without feeling double-spaced. */
  line-height: 1.55;
}
.eatPlanInlineSummary[hidden]{ display: none; }
/* Eat-time sentence; modal “Choose from …” lives in `#eatPlanModalChooseHost` (see
 * `.eatPlanModalChooseHost .eatPlanDetail--choose`); inline chip summary uses `.eatPlanInlineSummary`). */
.eatPlanSummary .eatPlanDetail--sentence,
.eatPlanInlineSummary .eatPlanDetail--sentence{
  white-space: normal;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
.eatPlanSummary .eatPlanDetail--sentence{
  line-height: calc(1.35em + 1px);
}
.eatPlanInlineSummary .eatPlanDetail--sentence{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.eatPlanWarning{
  color: #fffb80;
  font-size: calc(var(--fs-h-9) + 1.5pt);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 3px;
  text-shadow: 0 0 8px rgba(255, 207, 90, 0.28);
}
.eatPlanDetail{
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Chip itself uses the existing chipVarGold language; just nudge weight + sizing
 * so it reads as a guided-flow trigger rather than a casual filter chip. */
.eatPlanChip{
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "MIX NOW · EAT LATER!" lure treatment — only while inactive (i.e. not toggled
 * on). The chip already inherits .chipVarGold; we replace its background with a
 * retro arcade purple/indigo treatment with cyan edging and warm cream lettering
 * so it feels more 8-bit/synthwave than modern CTA. A soft pulse + slow sheen
 * nudge the eye toward it. Once toggled on the `.activeGreen` rule below wins (greater
 * specificity via the compound selector + the `:not(.activeGreen)` exclusion
 * here), so the active state remains the calm green confirmation it was. */
.chip.eatPlanChip:not(.activeGreen){
  position: relative;
  overflow: hidden;
  border-color: rgba(75, 248, 254, 0.9);
  background: linear-gradient(
    180deg,
    rgba(75, 248, 254, 0.22) 0%,
    rgba(64, 38, 152, 0.94) 45%,
    rgba(24, 14, 88, 0.98) 100%
  );
  color: #fff3a6;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 0 7px rgba(255, 207, 90, 0.38);
  box-shadow:
    0 0 0 2px rgba(75, 248, 254, 0.2),
    0 0 10px rgba(75, 248, 254, 0.35),
    inset 0 0 0 1px rgba(255, 207, 90, 0.16);
  animation: pdcEatPlanPulse 2.6s ease-in-out infinite;
}
.chip.eatPlanChip:not(.activeGreen):hover{
  filter: brightness(1.05);
}
/* Sheen sweep — a translucent diagonal band that glides across the chip. The
 * `::after` overlay is `pointer-events: none` so it never blocks the click, and
 * the parent's `overflow: hidden` clips it to the chip's rounded corners. */
.chip.eatPlanChip:not(.activeGreen)::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 243, 166, 0.52) 48%,
    rgba(75, 248, 254, 0.1) 56%,
    transparent 72%
  );
  transform: translateX(-110%);
  /* Kept off-rhythm from the style-picker sheen (4.5s) so the two enticement
   * effects don't sync up and pulse-double when both are on screen. */
  animation: pdcEatPlanShine 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pdcEatPlanShine{
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
@keyframes pdcEatPlanPulse{
  /* Brightness/intensity breath kept compact (≤ ~12px of total bloom) so the
   * chip never visually crowds the BAKE-READY plan chips that sit alongside it. */
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(75, 248, 254, 0.2),
      0 0 10px rgba(75, 248, 254, 0.35),
      inset 0 0 0 1px rgba(255, 207, 90, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 207, 90, 0.28),
      0 0 14px rgba(75, 248, 254, 0.52),
      0 0 20px rgba(111, 53, 215, 0.36),
      inset 0 0 0 1px rgba(255, 243, 166, 0.24);
  }
}
@media (prefers-reduced-motion: reduce){
  .chip.eatPlanChip:not(.activeGreen){
    animation: none;
  }
  .chip.eatPlanChip:not(.activeGreen)::after{
    display: none;
  }
}
/* Real-green active state for the eat-plan chip (the app-wide `.activeGreen` is
 * actually a yellow/gold treatment, so we override it here so "selected" reads as
 * a clear go-state matching the rest of the green-on language elsewhere).
 * In active state the chip is the only element in `#eatPlanChipActiveHome`, so
 * we let it stretch to the full column width — the inner label is then resized
 * by JS (`fitActiveChip` in pdc-eat-plan.js) to fill that width with a margin
 * so the row reads as a banner rather than a tucked-away chip. */
.chip.eatPlanChip.activeGreen,
.chip.eatPlanChip.activeGreen:hover{
  border-color: rgba(48, 200, 150, 0.95);
  background: linear-gradient(180deg, rgba(48, 200, 150, 0.92), rgba(30, 181, 130, 0.92));
  color: rgba(0, 0, 0, 0.92);
  box-shadow:
    0 0 0 4px rgba(30, 181, 130, 0.18),
    0 0 22px rgba(30, 181, 130, 0.32),
    0 14px 30px rgba(0, 0, 0, 0.28);
  font-weight: 900;
  width: 100%;
  min-height: 52px;
  padding: 6px 16px;
  letter-spacing: 0.06em;
}
/* Inner label span — present on both inactive + active so the chip's accessible
 * text node lives in one place. In inactive mode the span just inherits and the
 * chip looks the same as before. In active mode we render it as a chunky two-tone
 * gradient with a soft inner highlight so the "PIZZA QUEST · ACTIVE!"
 * line reads as a celebratory banner — the gradient cycles slowly so it has a
 * little life without distracting from the real work below. */
.chip.eatPlanChip .eatPlanChipLabel{
  display: inline-block;
}
.chip.eatPlanChip.activeGreen .eatPlanChipLabel{
  font-size: var(--eat-plan-chip-active-font-size, 14px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: inherit;
  /* Two-tone gradient text: deep ink for legibility, brighter cream highlight
   * across the middle so the band catches the eye like a marquee sign. */
  background: linear-gradient(
    100deg,
    #042e1f 0%,
    #042e1f 30%,
    #fffbe6 50%,
    #042e1f 70%,
    #042e1f 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* Subtle drop shadow keeps the letterforms readable when the marquee
   * highlight passes — without this the cream stripe would dissolve mid-word. */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
  animation: pdcEatPlanLabelMarquee 8s ease-in-out infinite;
}
@keyframes pdcEatPlanLabelMarquee{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .chip.eatPlanChip.activeGreen .eatPlanChipLabel{
    animation: none;
    background-position: 50% 50%;
  }
}
/* Active quest window no longer has any workable dough timing — diagonal strike. */
.chip.eatPlanChip.activeGreen.eatPlanChip--noFit{
  position: relative;
  border-color: rgba(255, 88, 98, 0.78);
  background: linear-gradient(180deg, rgba(118, 60, 60, 0.88), rgba(55, 30, 30, 0.92));
  box-shadow:
    0 0 0 4px rgba(255, 60, 80, 0.18),
    0 0 18px rgba(255, 60, 80, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.3);
}
.chip.eatPlanChip.activeGreen.eatPlanChip--noFit .eatPlanChipLabel{
  animation: none;
  background-position: 50% 50%;
  -webkit-text-fill-color: rgba(255, 246, 240, 0.78);
          color: rgba(255, 246, 240, 0.78);
}
.chip.eatPlanChip.activeGreen.eatPlanChip--noFit::before,
.chip.eatPlanChip.activeGreen.eatPlanChip--noFit::after{
  content: "";
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 48, 72, 0.95) 18%,
    rgba(255, 120, 120, 0.98) 50%,
    rgba(255, 48, 72, 0.95) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 6px rgba(255, 72, 90, 0.55),
    0 0 16px rgba(255, 0, 20, 0.28);
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(-38deg);
}
.chip.eatPlanChip.activeGreen.eatPlanChip--noFit::after{
  transform: translate(-50%, -50%) rotate(38deg);
}
@media (prefers-reduced-motion: reduce){
  .chip.eatPlanChip.activeGreen.eatPlanChip--noFit::before,
  .chip.eatPlanChip.activeGreen.eatPlanChip--noFit::after{
    box-shadow:
      0 0 4px rgba(255, 72, 90, 0.45),
      0 0 10px rgba(255, 0, 20, 0.22);
  }
}
.eatPlanPanel{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 207, 90, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.06), rgba(8, 16, 53, 0.36));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eatPlanPanel[hidden]{ display: none; }
/* Modal variant: full-viewport backdrop; card pinned to the top (below sticky nav
 * when `--pdc-sticky-nav-offset` is set) with a small gap — same pattern as other
 * app modals on phones and desktop. */
.eatPlanPanel--modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 12px)
    max(16px, env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  background: rgba(5, 8, 30, 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  /* Tall modal: backdrop scrolls; the bordered card grows to wrap every block (no in-card scrollbar). */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.eatPlanModalCard{
  width: min(420px, 100%);
  flex: 0 0 auto;
  padding: 18px 18px 16px;
  padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
  border: 2px solid rgba(75, 248, 254, 0.6);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(64, 38, 152, 0.55), rgba(8, 16, 53, 0.95));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(75, 248, 254, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  /* Border always wraps full content height; scrolling (if needed) happens on `#eatPlanPanel`. */
}
/* Hero art for the eat-plan modal (mix now · eat later).
 * `width: auto` + `max-height` keeps the element box tight to the bitmap (no full-width
 * letterboxing), so `border-radius` / shadow hug the visible art instead of a wide frame. */
.eatPlanModalHeroFrame{
  position: relative;
  align-self: center;
  max-width: 100%;
  margin: -2px auto 0;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.eatPlanModalHeroFrame--preview .eatPlanModalHero{
  box-shadow: none;
}
.eatPlanModalHero{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(200px, 32vh);
  margin: 0 auto;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 10px;
}
.eatPlanModalHeroCap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 9px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 32, 0.72) 28%, rgba(4, 8, 28, 0.94));
  pointer-events: none;
  text-align: center;
}
.eatPlanModalHeroCapLabel{
  display: block;
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(10px, 0.55vw + 9px, 15px);
  line-height: 1.2;
  color: #fffcef;
  text-shadow:
    0 0 12px rgba(75, 248, 254, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.65);
}
.eatPlanModalHead{
  margin-top: 10px;
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
/* Invitation line — pulls you toward the adventure */
.eatPlanModalHeadLead{
  font-size: 0.7em;
  letter-spacing: 0.22em;
  color: rgba(255, 224, 160, 0.92);
  text-shadow:
    0 0 14px rgba(255, 190, 90, 0.45),
    0 2px 0 rgba(60, 20, 0, 0.55);
}
/* Main quest banner — louder gold, depth, heroic spacing */
.eatPlanModalHeadBreak{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-top: 2px;
  font-size: 1.12em;
  letter-spacing: 0.18em;
  color: #ffee9a;
  text-shadow:
    0 0 22px rgba(255, 200, 95, 0.65),
    0 0 44px rgba(255, 130, 50, 0.28),
    0 2px 0 rgba(120, 55, 0, 0.85),
    0 5px 14px rgba(0, 0, 0, 0.55);
  animation: eatPlanQuestCall 2.4s ease-in-out infinite;
}
.eatPlanModalHeadSub{
  margin-top: 17px;
  font-size: calc(0.62em + 2pt);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 0 14px rgba(75, 248, 254, 0.22);
}
.eatPlanModalHeadSpark{
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  flex-shrink: 0;
  background: radial-gradient(
    circle at 35% 35%,
    #fffcef 0%,
    rgba(255, 220, 120, 0.95) 42%,
    rgba(255, 140, 40, 0.35) 70%,
    transparent 72%
  );
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 210, 100, 0.75), 0 0 18px rgba(255, 120, 60, 0.35);
  animation: eatPlanQuestSpark 1.8s ease-in-out infinite;
}
.eatPlanModalHeadSpark--trail{
  animation-delay: 0.35s;
  opacity: 0.92;
}
@keyframes eatPlanQuestCall{
  0%,
  100%{ filter: brightness(1) saturate(1); letter-spacing: 0.18em; }
  50%{ filter: brightness(1.14) saturate(1.08); letter-spacing: 0.2em; }
}
@keyframes eatPlanQuestSpark{
  0%,
  100%{ transform: rotate(45deg) scale(0.92); opacity: 0.88; }
  50%{ transform: rotate(45deg) scale(1.06); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .eatPlanModalHeadBreak,
  .eatPlanModalHeadSpark{
    animation: none;
  }
}
.eatPlanModalActions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
#eatPlanCancelBtn{
  margin-left: -5px;
}
/* Eat-plan modal primary — thrilled to be picked (quest confirm) */
.eatPlanModalActions .eatPlanQuestConfirm{
  position: relative;
  isolation: isolate;
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: clamp(10px, 2.9vw, 12px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 16px;
  overflow: visible;
  border-color: rgba(255, 236, 160, 0.98);
  background: linear-gradient(
      158deg,
      rgba(255, 245, 190, 0.42) 0%,
      rgba(255, 175, 95, 0.28) 42%,
      rgba(186, 120, 255, 0.18) 100%
    ),
    linear-gradient(180deg, rgba(76, 42, 120, 0.45), rgba(8, 14, 48, 0.88));
  color: rgba(255, 255, 252, 0.99);
  box-shadow:
    0 0 0 3px rgba(255, 210, 120, 0.32),
    0 0 28px rgba(255, 195, 100, 0.42),
    0 0 44px rgba(75, 248, 254, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.3);
  text-shadow:
    0 0 10px rgba(255, 255, 220, 0.45),
    0 1px 0 rgba(90, 40, 0, 0.5);
  animation: eatPlanQuestConfirmJoy 1.05s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.eatPlanModalActions .eatPlanQuestConfirm::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0;
  opacity: 0;
  animation: eatPlanQuestConfirmShine 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
.eatPlanModalActions .eatPlanQuestConfirm:hover,
.eatPlanModalActions .eatPlanQuestConfirm:focus-visible{
  animation-play-state: paused;
  border-color: rgba(255, 255, 210, 1);
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.14) saturate(1.12);
  box-shadow:
    0 0 0 4px rgba(255, 230, 150, 0.45),
    0 0 36px rgba(255, 205, 120, 0.55),
    0 0 52px rgba(75, 248, 254, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.34);
  color: #fff;
}
.eatPlanModalActions .eatPlanQuestConfirm:active{
  animation-play-state: paused;
  transform: translateY(0) scale(1.01);
  filter: brightness(1.05);
}
.eatPlanModalActions .eatPlanQuestConfirm:disabled,
.eatPlanModalActions .eatPlanQuestConfirm:disabled:hover,
.eatPlanModalActions .eatPlanQuestConfirm:disabled:focus-visible{
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.45) brightness(0.78);
  opacity: 0.48;
  border-color: rgba(255, 120, 130, 0.45);
  color: rgba(255, 245, 245, 0.78);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.28),
    0 2px 10px rgba(0, 0, 0, 0.2);
  animation: none;
  pointer-events: none;
}
.eatPlanModalActions .eatPlanQuestConfirm:disabled::after{
  opacity: 0;
  animation: none;
}
@keyframes eatPlanQuestConfirmJoy{
  0%,
  100%{
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
  35%{
    transform: translateY(-3px) scale(1.035);
    filter: brightness(1.12) saturate(1.1);
  }
  70%{
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.08) saturate(1.06);
  }
}
@keyframes eatPlanQuestConfirmShine{
  0%,
  45%{ opacity: 0; background-position: 160% 0; }
  50%{ opacity: 0.38; background-position: 50% 0; }
  55%,
  100%{ opacity: 0; background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce){
  .eatPlanModalActions .eatPlanQuestConfirm,
  .eatPlanModalActions .eatPlanQuestConfirm::after{
    animation: none;
  }
  .eatPlanModalActions .eatPlanQuestConfirm:hover,
  .eatPlanModalActions .eatPlanQuestConfirm:focus-visible{
    transform: none;
  }
}
.eatPlanFields{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 420px){
  .eatPlanFields{ grid-template-columns: 1fr; }
}
.eatPlanField{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: var(--fs-h-9);
}

/* Eat-plan modal week-picker: tapping a day commits + updates preview (`pdc-eat-plan.js`).
 * Shown inside `#eatPlanPanel` on all viewports — same UX as desktop. */
.eatPlanHoverCalendar{
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1;
  border-radius: 14px;
  border: 2px solid rgba(75, 248, 254, 0.38);
  background: linear-gradient(
    185deg,
    rgba(54, 88, 160, 0.42) 0%,
    rgba(14, 20, 58, 0.88) 55%,
    rgba(6, 10, 32, 0.94) 100%
  );
  box-shadow:
    0 0 28px rgba(75, 248, 254, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 12px 12px 10px;
}
.eatPlanHoverCalendar[hidden]{ display: none; }
.eatPlanHoverCalendarHead{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: calc(var(--fs-b-11) + 2px);
  color: rgba(210, 255, 254, 0.95);
  text-shadow:
    0 0 10px rgba(75, 248, 254, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.65);
}
.eatPlanHoverCalendarMonth{
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eatPlanHoverCalendarGrid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
/* Idle / unlit days: one shared look for every cell (weekend dimming removed in JS). */
.eatPlanHoverDay{
  appearance: none;
  border-radius: 11px;
  min-height: 44px;
  padding: 6px 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(8, 14, 48, 0.58);
  color: rgba(250, 252, 255, 0.9);
  font-family: var(--mono);
  font-weight: 800;
  font-size: calc(var(--fs-b-11) + 2px);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease,
    text-shadow 0.14s ease;
}
.eatPlanHoverDayInner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
}
.eatPlanHoverDayDow{
  font-size: calc(var(--fs-b-9) + 0px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: rgba(175, 215, 255, 0.92);
  text-transform: none;
}
.eatPlanHoverDayNum{
  font-size: calc(var(--fs-b-11) + 2px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eatPlanHoverDay:hover:not(.isSelected){
  background: rgba(40, 80, 140, 0.45);
  border-color: rgba(75, 248, 254, 0.55);
  color: rgb(243, 255, 254);
}
.eatPlanHoverDay:focus-visible{
  outline: 2px solid rgba(255, 232, 150, 0.85);
  outline-offset: 2px;
}
.eatPlanHoverDay--noFit,
.eatPlanHoverDay--noFit:hover:not(.isSelected){
  cursor: not-allowed;
  opacity: 0.36;
  border-color: rgba(255, 90, 120, 0.28);
  background: repeating-linear-gradient(
    -32deg,
    rgba(255, 60, 80, 0.14) 0 3px,
    rgba(22, 12, 40, 0.35) 3px 6px
  );
  color: rgba(255, 255, 255, 0.38);
  text-decoration: line-through;
  box-shadow: none;
  filter: saturate(0.55);
}
/* Selected (“lit”) day: bright teal stack vs neighbours. */
.eatPlanHoverDay.isSelected{
  border-color: rgba(120, 255, 240, 0.95);
  background: radial-gradient(
    circle at 50% 38%,
    rgba(155, 255, 246, 0.35) 0%,
    rgba(42, 200, 180, 0.45) 45%,
    rgba(26, 120, 150, 0.55) 100%
  );
  color: #f5fffc;
  text-shadow:
    0 0 14px rgba(180, 255, 246, 0.95),
    0 0 22px rgba(75, 248, 254, 0.6),
    0 2px 0 rgba(10, 50, 60, 0.75);
  box-shadow:
    0 0 16px rgba(75, 248, 254, 0.45),
    0 0 28px rgba(75, 248, 254, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.eatPlanHoverDay.isSelected:hover{
  filter: brightness(1.06);
}

/* Eat-plan overlay only: synthetic week grid + labelled date everywhere (tap / pointer / hover). */
#eatPlanPanel .eatPlanHoverCalendar{
  display: block;
}
#eatPlanPanel .eatPlanDateNative{
  display: none !important;
}
#eatPlanPanel .eatPlanHoverCalendarGrid{
  touch-action: manipulation;
}

@media (pointer: coarse){
  .eatPlanHoverDay{
    min-height: 52px;
    padding: 8px 5px 10px;
  }
}
.eatPlanFieldLabel{
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.eatPlanDateValue{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 16, 53, 0.28);
  color: rgba(246, 249, 255, 0.9);
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: var(--fs-h-9);
  font-weight: 700;
  line-height: 1.2;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}
.eatPlanDateValue.eatPlanDateValue--placeholder{
  color: rgba(255, 250, 230, 0.48);
  font-weight: 600;
}
/* Wrap native date/time: overlay hint when empty (real `placeholder` is not supported on these types). */
.pdcNativeInputShell{
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pdcNativeInputShell input[type="date"],
.pdcNativeInputShell input[type="time"]{
  position: relative;
  z-index: 1;
}
.pdcNativeInputShell .pdcNativeInputGhost{
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: var(--fs-h-9);
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 250, 230, 0.48);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) .pdcNativeInputGhost{
  opacity: 1;
}
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input[type="date"],
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input[type="time"]{
  color: transparent !important;
}
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-fields-wrapper,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-text,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-month-field,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-day-field,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-year-field,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-hour-field,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-minute-field,
.pdcNativeInputShell.pdcNativeInputShell--ghost:not(:focus-within) input::-webkit-datetime-edit-ampm-field{
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#eatPlanPanel .pdcNativeInputShell .pdcNativeInputGhost{
  text-align: center;
  font-size: calc(var(--fs-h-9) + 2pt);
  font-weight: 700;
}
#eatPlanPanel .eatPlanField .pdcNativeInputShell{
  min-height: 46px;
}
/* Native date/time: shared by eat-plan modal + optional “mix start” in Total ferment */
.eatPlanField input[type="date"],
.eatPlanField input[type="time"],
.field.fermentTotalPlanField .fermentStartRow input[type="date"],
.field.fermentTotalPlanField .fermentStartRow input[type="time"]{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 16, 53, 0.55);
  color: var(--text);
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: var(--fs-h-9);
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  /* Critical: stripping `appearance` removes WebKit/Safari’s calendar/clock picker
   * UI (looks like plain text → users must type). Keep native widgets. */
  appearance: auto;
  -webkit-appearance: auto;
  box-shadow: none;
}
/* Eat-later modal (#eatPlanPanel): date “chip” + time input share footprint and +2 pt type. */
#eatPlanPanel .eatPlanDateValue,
#eatPlanPanel .eatPlanField input[type="date"],
#eatPlanPanel .eatPlanField input[type="time"]{
  width: 100%;
  font-size: calc(var(--fs-h-9) + 2pt);
  font-weight: 700;
  line-height: 1.22;
  min-height: 46px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 16, 53, 0.55);
  color: rgba(246, 249, 255, 0.95);
  box-sizing: border-box;
  text-align: center;
}
#eatPlanPanel .eatPlanDateValue{
  display: flex;
  align-items: center;
  justify-content: center;
}
.eatPlanField input[type="date"]:focus,
.eatPlanField input[type="time"]:focus,
.field.fermentTotalPlanField .fermentStartRow input[type="date"]:focus,
.field.fermentTotalPlanField .fermentStartRow input[type="time"]:focus{
  outline: 2px solid rgba(255, 207, 90, 0.72);
  outline-offset: 1px;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}
.eatPlanSummary{
  font-size: calc(var(--fs-h-9) + 4pt);
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  min-height: 1.2em;
}
.eatPlanSummary .eatPlanWarning{
  font-size: 1em;
}
/* Modal-only: above DATE/TIME + hover calendar. Single reserved band for every preview alert
 * (too soon / too far / long-ferment, etc.) so nothing jumps in/out of `#eatPlanSummary`. */
.eatPlanModalHintRow{
  display: none;
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.35;
  font-family: var(--arcade), system-ui, sans-serif;
  /* Max baseline; `fitEatPlanModalHintRowText` in pdc-eat-plan.js scales down to fit width. */
  font-size: 17px;
  font-weight: 900;
  color: transparent;
}
.eatPlanModalHintRow.eatPlanModalHintRow--reserved{
  /* Fixed band height — `em`/`min-height` tied to shrunk inner text collapsed the modal. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 2px 0 0;
  padding: 0 10px;
  box-sizing: border-box;
  color: transparent;
}
.eatPlanModalHintInner{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.eatPlanModalHintRow.eatPlanModalHintRow--reserved.eatPlanModalHintRow--hasMsg{
  color: #fffb80;
  text-shadow: 0 0 8px rgba(255, 207, 90, 0.28);
}

/* Modal choose host — width for JS fit-text measurements. */
.eatPlanModalChooseHost{
  width: 100%;
  /* Match `#eatPlanModalStyleSelect .menuBtn`: 10px pad ×2 + 2px border ×2 + row (title line vs caret). */
  --eatPlanChooseTriggerMinH: calc(24px + max(15.6px, clamp(18px, 4.8vw, 26px)));
}
.eatPlanModalChooseHost .eatPlanChooseSlot{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* “Choose from N styles.” — neon ticket inside the eat-plan modal only (column-1 receipt omits this). */
.eatPlanModalChooseHost .eatPlanDetail--choose{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 12px;
  padding: 12px 20px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 2px solid rgba(255, 115, 255, 0.82);
  background: linear-gradient(
    155deg,
    rgba(140, 40, 160, 0.5) 0%,
    rgba(28, 12, 72, 0.88) 42%,
    rgba(55, 22, 110, 0.78) 100%
  );
  color: #fff6a8;
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  font-size: 0.92em;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 4px rgba(255, 115, 255, 0.28),
    0 0 10px rgba(75, 248, 254, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.65);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.22),
    0 0 6px rgba(255, 115, 255, 0.22),
    0 0 14px rgba(75, 248, 254, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -8px 24px rgba(0, 0, 0, 0.35);
}
/* Modal chip: full width — `pdc-eat-plan.js` scales inner type; same footprint as the style `menuBtn`. */
.eatPlanModalChooseHost .eatPlanDetail--choose{
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--eatPlanChooseTriggerMinH);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin: 10px 0 12px;
  line-height: 1.35;
  padding-block: 10px;
  padding-inline: clamp(10px, 4vw + 8px, 20px);
  letter-spacing: 0.045em;
  box-sizing: border-box;
  font-size: 14px;
}
.eatPlanModalChooseHost .eatPlanDetail--chooseNoFit{
  color: rgba(255, 240, 200, 0.85);
}

/* Modal “pick a fitting style”: shared menuSelect, opens upward inside the eat-plan overlay. */
#eatPlanModalStyleSelect.menuSelect{
  width: 100%;
  flex: 1 1 auto;
  margin: 10px auto 12px;
}
#eatPlanModalStyleSelect.menuSelect .menuBtn{
  min-height: var(--eatPlanChooseTriggerMinH, calc(24px + max(15.6px, clamp(18px, 4.8vw, 26px))));
  border-radius: 12px;
  border-width: 2px;
  border-color: rgba(255, 115, 255, 0.72);
  background: linear-gradient(
    155deg,
    rgba(140, 40, 160, 0.45) 0%,
    rgba(28, 12, 72, 0.88) 42%,
    rgba(55, 22, 110, 0.74) 100%
  );
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.2),
    0 0 10px rgba(255, 115, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#eatPlanModalStyleSelect.menuSelect .menuBtn .menuSelectTitle{
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
#eatPlanModalStyleSelect.menuSelect .menuBtn > .menuSelectTriggerHead{
  align-items: center;
  justify-content: center;
}
#eatPlanModalStyleSelect.menuSelect .menuBtn.menuChosen{
  border-color: rgba(75, 248, 254, 0.55);
  color: #fff6a8;
  text-shadow: 0 0 8px rgba(75, 248, 254, 0.22);
}
#eatPlanModalStyleSelect.menuSelect .menuBtn.menuChosen .menuCaret{
  color: rgba(255, 250, 200, 0.95);
}
#eatPlanModalStyleSelect.menuSelect .menuBtn.menuUnset{
  border-color: rgba(255, 115, 255, 0.85);
  color: #fff6a8;
}
#eatPlanModalStyleSelect.menuSelect .menuBtn .menuCaret{
  font-size: clamp(18px, 4.8vw, 26px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
}
/* × cancel / clear — only when a style is chosen (`showClearWhenUnset: false`); opens nothing on its own */
#eatPlanModalStyleSelect.menuSelect .menuClear{
  flex-shrink: 0;
  border-color: rgba(255, 168, 220, 0.48);
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 253, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(75, 248, 254, 0.12), 0 4px 14px rgba(0, 0, 0, 0.22);
}
#eatPlanModalStyleSelect.menuSelect .menuBtn.menuChosen .menuClear{
  border-color: rgba(255, 255, 255, 0.32);
}
#eatPlanModalStyleSelect.menuSelect .menuClear:hover{
  background: rgba(255, 64, 100, 0.38);
  border-color: rgba(255, 150, 160, 0.88);
  box-shadow: 0 0 0 3px rgba(255, 82, 120, 0.2), 0 8px 20px rgba(0, 0, 0, 0.25);
}
#eatPlanModalStyleSelect.menuSelect .menuPanel{
  max-height: min(280px, 42vh);
  z-index: 80;
}

/* "Loud" recommended-flour banner above the flour picker. Only renders when an eat
 * plan is active and a style is selected (see pdc-eat-plan.js). */
.eatPlanFlourBanner{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
}
.eatPlanFlourBanner[hidden]{ display: none; }
.eatPlanFlourBannerHead{
  font-family: var(--arcade), system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-h-9);
  color: rgba(255, 207, 90, 0.92);
  margin-bottom: 4px;
}
.eatPlanFlourBannerBody{
  font-size: calc(var(--fs-h-9) + 2pt);
  color: var(--text);
  line-height: 1.4;
}

/* Simplified mode: when an eat-plan is active AND a style has been selected, the
 * calculator drops to the focused inputs the user actually needs. Hidden:
 *   - Section 5 DOUGH FORMULA head + auto toggle + hydration/salt/oil+sugar/yeast pct
 *   - Fermentation suggestion box, Bulk box, Bench rest box (room temp + cold stay)
 * Kept: yeast type segmented control, preferment chips/sliders, room temp, cold ferment,
 *       mix method (optional), oven (optional), pans/sizes/balls/weight, flour. */
html[data-eat-plan-simplified] #doughFormulaHead,
html[data-eat-plan-simplified] #formulaMainHeadRow,
html[data-eat-plan-simplified] .slider[data-key="hydration"],
html[data-eat-plan-simplified] .slider[data-key="saltPct"],
html[data-eat-plan-simplified] .split:has(> .slider[data-key="oilPct"]),
html[data-eat-plan-simplified] .slider[data-key="yeastPct"],
html[data-eat-plan-simplified] #fermentSuggest,
html[data-eat-plan-simplified] .fermentStageBulk,
html[data-eat-plan-simplified] .fermentStageBench,
/* Cold ferment box is also out-of-scope in simplified mode — the eat-plan filter has
 * already pruned styles to ones that fit the chosen window, so the user shouldn't
 * need to twiddle fridge temp / fridge time to make it work. */
html[data-eat-plan-simplified] .fermentStageCold{
  display: none !important;
}
/* Yeast type + Yeast (pct) live in a 2-column `.split` grid by default. We
 * always stack them: the segmented control (Instant / Active / Fresh / Sourdough
 * starter) sits ABOVE the percentage slider. Stacking gives each row the full
 * column width, which:
 *   - lets the segmented buttons read at a usable size on narrow screens
 *     (4 buttons in a half-column otherwise crowd to the point of overlapping),
 *   - keeps the percentage slider's full label + Auto pill visible without
 *     fighting the segmented row for horizontal space,
 *   - automatically handles simplified eat-plan mode (where the percentage row
 *     is hidden) — the surviving segmented control already fills the column.
 * HTML order (yeastMode first, yeastPct second) is preserved, so a single-track
 * grid renders Yeast type on top with no markup change. */
.split:has(> .slider[data-key="yeastMode"]):has(> .slider[data-key="yeastPct"]){
  grid-template-columns: minmax(0, 1fr);
}

/* Flour picker highlight + dim while an eat-plan is active. The match attribute is set
 * by `PdcEatPlan.applyFlourHighlight()` from data-attributes on each row. */
[data-flour-match]{
  outline: 2px solid rgba(75, 248, 254, 0.65);
  outline-offset: -2px;
  border-radius: 10px;
  background: rgba(75, 248, 254, 0.08);
}
[data-flour-dim]{
  opacity: 0.5;
}
[data-flour-dim]:hover{
  opacity: 0.85;
}

/*
 * Total dough row: JumpScott sits in-flow beside the metric when no style image is shown;
 * JS moves it into .heroStyleImgFrame as an overlay when a style thumbnail is visible.
 */
.heroMetricRow{
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: start;
  gap: clamp(6px, 2.8cqi, 16px);
  box-sizing: border-box;
}
.heroJumpScott{
  position: relative;
  z-index: 0;
  flex: 0 1 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-width: 0;
  /* Cap size from hero width — shrinks instead of overlapping the label/value column */
  max-width: min(112px, 30cqi, 33%);
  max-height: min(5.8125rem, 23.25cqi);
  object-fit: contain;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translate(35px, -14px);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Slightly tighter glow so halos don’t read as sitting on copy */
  filter:
    drop-shadow(0 0 4px rgba(228, 49, 115, 0.68))
    drop-shadow(0 0 10px rgba(228, 49, 115, 0.42))
    drop-shadow(0 0 18px rgba(75, 248, 254, 0.34))
    drop-shadow(0 0 28px rgba(111, 53, 215, 0.22));
}
/* Dashboard hero art: double-tap target (JumpScott is otherwise pointer-events: none). */
main.grid.dashboard:not(.knowledgeMain) .heroJumpScott,
main.grid.dashboard:not(.knowledgeMain) .heroStyleImg{
  pointer-events: auto;
  touch-action: manipulation;
}
.heroJumpScott.heroJumpScott--overStyle{
  position: absolute;
  z-index: 2;
  /* % of .heroStyleImgFrame — match Total dough row: anchor bottom-left */
  left: -23.5%;
  right: auto;
  bottom: -13%;
  flex: none;
  align-self: auto;
  max-width: 66%;
  max-height: 52.5%;
  object-fit: contain;
  object-position: left bottom;
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.52))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 14px rgba(228, 49, 115, 0.42))
    drop-shadow(0 0 26px rgba(75, 248, 254, 0.24));
}

@container heroDough (max-width: 360px){
  .heroMetricRow{
    gap: 6px;
  }
  .heroJumpScott:not(.heroJumpScott--overStyle){
    max-width: min(84px, 30%);
    max-height: min(4.6875rem, 20.25cqi);
  }
}

@container heroDough (max-width: 300px){
  .heroJumpScott:not(.heroJumpScott--overStyle){
    max-width: min(73px, 27.5%);
    max-height: min(3.9375rem, 18cqi);
  }
}

.heroPrimaryCol{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 0;
  padding-bottom: 2px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.heroMetricStack{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.heroLabel{
  color: #f34da1;
  font-weight: 400;
  font-size: var(--fs-h-12);
  letter-spacing:.10em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(228, 49, 115, 0.22);
}
.heroValue{
  font-size: var(--fs-h-40);
  font-weight: 400;
  margin-top: 0;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 0 28px rgba(75, 248, 254, 0.12);
}
.heroBody{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 249, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.heroSub{
  margin-top: 0;
  color: var(--muted);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--fs-b-12);
  font-weight: 650;
  line-height: 1.55;
  white-space: pre-line;
}

.heroSub.heroSummary{
  white-space: normal;
  /* Grow with content; page scrolls — avoid nested scroll on narrow viewports. */
  max-height: none;
  overflow: visible;
}

/* Ingredients bars inside the hero (replaces duplicated hero ingredient-weights block). */
/* Ingredients bars injected into hero summary. */
.heroSumBlock.heroSumBlock--ingredientsBars{
  position: relative;
  overflow: hidden;
}
.heroSumBlock.heroSumBlock--ingredientsBars .bars{
  margin-top: 6px;
  gap: 10px;
}
.heroSumBlock.heroSumBlock--ingredientsBars .barsSubHeader{
  margin: 0 0 6px;
}
.heroSumBlock.heroSumBlock--ingredientsBars .barsSubHeader .sectionTitle{
  margin: 0;
  /* Override the global `.sectionTitle` `nowrap` so long headings such as
   * "PREFERMENT INGREDIENTS" or "POOLISH INGREDIENTS" wrap instead of busting the
   * card border on narrow viewports. */
  flex-wrap: wrap;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}
.heroSumBlock.heroSumBlock--ingredientsBars .barsSubHeader .sectionLabel{
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.heroBand.heroSumBlock{
  margin-top: 0;
  padding: 11px 12px 13px;
  border-radius: 12px;
  /* Slightly thicker pink edge so each "think box" reads as a distinct card inside
   * the hero. Bumped from 1px → 2px and the opacity from .22 → .38 so the hairline
   * actually catches the eye against the dark gradient fill. */
  border: 2px solid rgba(228, 49, 115, 0.38);
  background: linear-gradient(180deg, rgba(8, 16, 58, 0.55), rgba(5, 12, 48, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.22);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.heroSub.heroSummary > .heroBand.heroSumBlock + .heroBand.heroSumBlock{
  margin-top: 5px;
}

.heroSumBlock.heroSumBlock--flourYeast{
  position: relative;
  /* Copy should wrap; avoid clipping wrapped lines while fixing overflow. */
  overflow: visible;
}
.heroFlourYeastRow{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px 14px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Allow container queries to reflow text under stamps on narrow hero blocks. */
  container-type: inline-size;
  container-name: heroFlourYeastRow;
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder{
  /* Placeholder mode (no flour picked): stack the recommended-flour chip + follow-up
   * text on a new row beneath the placeholder stamp, full-width. The chip is much
   * more readable as a wide block than squeezed into the right column next to the
   * image, and there's no actual flour metadata to pair with the stamp anyway. */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder .heroFlourStamp.heroFlourStamp--flourYeast{
  /* Placeholder flour stamp: intentionally smaller so copy has room. */
  width: clamp(54px, 19vw, 96px);
  max-width: min(40%, 110px);
  max-height: clamp(52px, 13vw, 80px);
  flex: 0 0 auto;
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder .heroFlourYeastText{
  /* Force the text column onto a new wrapped row: full width, no negative margin. */
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}
.heroFlourYeastRow.heroFlourYeastRow--blend{
  column-gap: 5px;
  row-gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.heroFlourYeastText{
  flex: 1;
  min-width: 0;
  max-width: 100%;
  margin-left: -70px;
}
.heroFlourYeastText .heroSumLine{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
/* Flour & yeast lines must wrap (some WebViews ignore overflow-wrap unless white-space is normal). */
.heroSumBlock.heroSumBlock--flourYeast .heroSumLine{
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}
.heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourYeastText{
  margin-left: 0;
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
  order: 5;
}
.heroFlourStamp.heroFlourStamp--flourYeast{
  display: block;
  float: none;
  flex-shrink: 0;
  align-self: flex-start;
  margin: 0;
  width: clamp(88px, 32vw, 150px);
  max-width: min(52%, 170px);
  height: auto;
  max-height: clamp(86px, 22vw, 132px);
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 10px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.40));
}
.heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp.heroFlourStamp--flourYeast{
  flex: 0 0 auto;
}
.heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp.heroFlourStamp--flourYeastB{
  margin-left: 0;
}
.heroFlourStamp.heroFlourStamp--flourYeastB{
  object-position: right center;
  width: clamp(72px, 24vw, 130px);
  max-width: min(42%, 150px);
  max-height: clamp(74px, 18vw, 118px);
  position: relative;
  left: -110px;
  top: 13px;
}

/* If the Flour & yeast section gets narrow, put the text under the stamps. */
@container heroFlourYeastRow (max-width: 720px){
  .heroFlourYeastRow{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .heroFlourYeastRow .heroFlourStamp{
    flex: 0 1 auto;
    max-width: 52%;
  }
  .heroFlourYeastRow .heroFlourStamp--flourYeastB{
    max-width: 48%;
  }
  .heroFlourYeastRow .heroFlourYeastText{
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    order: 5;
  }
}
/*
 * Viewport fallback: Fold / tablets often hit “wide” overall width but a narrow hero column.
 * Container queries are not always available in WebViews, so pair this with @container rules.
 */
@media (max-width: 1200px){
  .heroFlourYeastRow:not(.heroFlourYeastRow--blend){
    flex-wrap: wrap;
  }
  .heroFlourYeastRow:not(.heroFlourYeastRow--blend) .heroFlourYeastText{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 8px;
    order: 5;
  }
}
@container heroFlourYeastRow (max-width: 420px){
  .heroFlourYeastRow{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .heroFlourYeastRow .heroFlourStamp{
    flex: 1 1 44%;
    max-width: 48%;
  }
  .heroFlourYeastRow .heroFlourStamp--flourYeastB{
    flex: 1 1 44%;
    max-width: 48%;
  }
  .heroFlourYeastRow .heroFlourYeastText{
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    order: 5;
  }
}
.heroBand.heroSumBlock.heroSumBlock--ingWeights{
  border-color: rgba(75, 248, 254, 0.22);
  background: linear-gradient(180deg, rgba(8, 22, 42, 0.55), rgba(5, 14, 40, 0.42));
}
.heroSumH{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(75, 248, 254, 0.9);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.08);
}
.heroSumLine{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--fs-b-12);
  font-weight: 550;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.heroSumLine:first-of-type{
  margin-top: 0;
}
.heroSumSubH{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(75, 248, 254, 0.92);
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.1);
}
.heroSumSubH--preferment{
  color: #fffb80;
}
.heroSumSubH--main{
  color: rgba(255, 255, 255, 0.78);
}
.heroSumSubH:first-child{
  margin-top: 0;
}
.heroSumSubH + .heroSumLine{
  margin-top: 4px;
}
.heroSumLine--warn{
  color: #ffc46b;
  font-weight: 650;
}

.heroSumLine--preferment{
  color: #fffb80;
  font-weight: 600;
}
/* Recommended-flour card inside the hero "Flour & yeast" block.
 * Mirrors the standalone `#eatPlanFlourBanner` (gold accent) so the user reads it as
 * "this is the recommendation, placed where the flour info will land once you pick a
 * bag". The chip is a self-contained card: the "Recommended flour" heading is nested
 * inside the gold pill (see `--inChip` modifier below) so heading + body read as one
 * unit instead of as a sibling label + body that the post-render flour-stamp row swap
 * would otherwise separate. */
.heroSumSubH--flourReco{
  color: rgba(255, 207, 90, 0.92);
  border-bottom-color: rgba(255, 207, 90, 0.28);
}
.heroSumLine--flourReco{
  color: #fff2c4;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 207, 90, 0.35);
  background: rgba(255, 207, 90, 0.08);
  box-shadow: 0 0 0 2px rgba(255, 207, 90, 0.08);
}
/* Heading nested inside the gold pill: keep the standalone heading's font, size,
 * letter-spacing, and uppercase treatment exactly — only the margins/border-bottom
 * are adjusted for in-chip use (no top margin since the chip already has padding,
 * tighter bottom margin, gold underline already inherited from `--flourReco`). */
.heroSumSubH--inChip{
  margin: 0 0 6px;
  padding-bottom: 4px;
}
.heroSumSubH--inChip + .heroSumLine__body,
.heroSumLine--flourReco .heroSumLine__body{
  /* Body line sits flush under the nested heading; inherits chip colour + weight. */
  margin: 0;
}
.heroSumLine--chips{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.heroSumPart{
  white-space: nowrap;
}
.heroSumPartSep{
  flex: 0 0 auto;
  opacity: 0.55;
  font-weight: 600;
  user-select: none;
}

.heroSumBlock.heroSumBlock--ingWeights .heroSumH{
  font-size: var(--fs-b-13);
}

.heroSumBlock.heroSumBlock--ingWeights .heroSumLine{
  font-family: var(--arcade);
  font-size: var(--fs-b-13);
  line-height: 1.5;
}
.heroSumBlock.heroSumBlock--ingWeights .heroSumLine.heroSumLine--chips{
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Ingredient lines: allow wrap inside each segment (global `.heroSumPart` is nowrap for other uses). */
.heroSumBlock.heroSumBlock--ingWeights .heroSumPart{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
.heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
  font-family: var(--arcade);
  font-size: var(--fs-b-13);
  line-height: 1.5;
}
.heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
  font-size: var(--fs-b-12);
  letter-spacing: 0.11em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Total dough box: shrink type as the hero narrows so rows stay inside the card */
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .heroSumBlock.heroSumBlock--ingWeights .heroSumH{
    font-size: clamp(var(--fs-b-10), calc(6px + 4.5cqi), var(--fs-b-13));
  }
  .heroSumBlock.heroSumBlock--ingWeights .heroSumLine,
  .heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
  .heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
    font-size: clamp(var(--fs-b-9), calc(5px + 4cqi), var(--fs-b-13));
  }
  .heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
    font-size: clamp(var(--fs-b-9), calc(5px + 3.6cqi), var(--fs-b-12));
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 520px){
    .heroSumBlock.heroSumBlock--ingWeights .heroSumH{
      font-size: clamp(var(--fs-b-10), calc(8px + 1.8vw), var(--fs-b-13));
    }
    .heroSumBlock.heroSumBlock--ingWeights .heroSumLine,
    .heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
    .heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
      font-size: clamp(var(--fs-b-9), calc(7px + 1.6vw), var(--fs-b-13));
    }
    .heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
      font-size: clamp(var(--fs-b-9), calc(6px + 1.5vw), var(--fs-b-12));
    }
  }
}

/* Hero dough summary: +1pt cyan section titles and body (scoped to #totalDoughPill tree). */
.heroSub.heroSummary .heroSumH{
  font-size: calc(var(--fs-h-9) + 1pt);
}
.heroSub.heroSummary .heroSumSubH:not(.heroSumSubH--preferment):not(.heroSumSubH--main){
  font-size: calc(var(--fs-h-9) + 1pt);
}
.heroSub.heroSummary .heroSumLine{
  font-size: calc(var(--fs-b-12) + 1pt);
}
.heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumH{
  font-size: calc(var(--fs-b-13) + 1pt);
}
.heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumLine,
.heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
.heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
  font-size: calc(var(--fs-b-13) + 1pt);
}
.heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
  font-size: calc(var(--fs-b-12) + 1pt);
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumH{
    font-size: calc(clamp(var(--fs-b-10), calc(6px + 4.5cqi), var(--fs-b-13)) + 1pt);
  }
  .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumLine,
  .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
  .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
    font-size: calc(clamp(var(--fs-b-9), calc(5px + 4cqi), var(--fs-b-13)) + 1pt);
  }
  .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
    font-size: calc(clamp(var(--fs-b-9), calc(5px + 3.6cqi), var(--fs-b-12)) + 1pt);
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 520px){
    .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumH{
      font-size: calc(clamp(var(--fs-b-10), calc(8px + 1.8vw), var(--fs-b-13)) + 1pt);
    }
    .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumLine,
    .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPart,
    .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumPartSep{
      font-size: calc(clamp(var(--fs-b-9), calc(7px + 1.6vw), var(--fs-b-13)) + 1pt);
    }
    .heroSub.heroSummary .heroSumBlock.heroSumBlock--ingWeights .heroSumSubH{
      font-size: calc(clamp(var(--fs-b-9), calc(6px + 1.5vw), var(--fs-b-12)) + 1pt);
    }
  }
}

/* Pizza style block: heading full width (fluid type), image stacked beneath. */
.heroStyle{
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.heroStyleLabel{
  font-family: var(--arcade);
  /* Fallback when container query length units are unavailable. */
  font-size: var(--fs-h-12);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: #fffb80;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
@supports (font-size: 1cqi){
  .heroStyleLabel{
    /* Fluid: shrinks with card width; JS can tighten further for very long one-line names. */
    font-size: clamp(
      calc(6px + var(--type-bump-heading)),
      calc(2px + 2.35cqi + var(--type-bump-heading)),
      calc(22px + var(--type-bump-heading))
    );
  }
}

.heroStyleLabelWrap{
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  /* Horizontal padding keeps glyphs off the neon frame; label still spans full inner width. */
  padding: 12px 12px 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}
@supports (font-size: 1cqi){
  .heroStyleLabelWrap{
    padding: 12px clamp(8px, 3cqi, 18px) 0;
  }
}
.heroStyleLabelIn{
  display: block;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
}

/* Border hugs the image (frame shape = rendered image); never a full-width empty box. */
.heroStyleImgFrame{
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  align-self: center;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  /* Visible so the JumpScott overlay is not clipped at the frame edge */
  overflow: visible;
}
/* Mix now · Eat later — “approval stamp” on the style hero (same art as `#eatPlanPanel` modal). */
.heroEatPlanStamp{
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 2px;
  width: clamp(65px, 32.5%, 120px);
  height: auto;
  max-width: 52.5%;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-sizing: border-box;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(75, 248, 254, 0.35);
  transform: rotate(14deg);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.96;
}
.heroStyleImg{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  /* Round the image's own corners to match the INNER edge of the frame's
   * rounded border (frame `border-radius: 10px` − frame `border: 2px` = ~8px
   * inner radius). Without this, the image's square corners stick out past
   * the frame's rounded corners and look like the picture is sitting on top
   * of the border rather than fitting inside it. We can't just give the frame
   * `overflow: hidden` because the JumpScott overlay character is positioned
   * `bottom: -13%; left: -23.5%;` and is meant to break out beyond the frame
   * edge — see comment on `.heroStyleImgFrame` above. */
  border-radius: 8px;
  border: 0;
  box-sizing: border-box;
}
@supports (font-size: 1cqi){
  .heroStyleImg{
    max-height: min(58cqi, 280px);
  }
}
/* heroActions removed (actions moved to top header) */

/* Fermentation: style-based suggestion (corners match .neonFrame / room temp row) */
.fermentSuggest{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  margin: 0 0 10px;
  border-radius: 14px;
}
.fermentSuggestText{
  grid-column: 1;
  min-width: 0;
  font-family: var(--mono);
  font-weight: 750;
  /* Default suggestion colour is yellow — it's a call-to-action: "your plan doesn't
   * match this suggestion yet, click Apply to use it". The whole stack inherits this
   * so labels + values stay in the same colour family. The applied state overrides
   * to green further down (`.fermentSuggest--applied .fermentSuggestText`). */
  color: #fffb80;
  line-height: 1.45;
  /* Stack the suggestion lines (head / stages / total / placement / notes) instead of
   * letting them flow as one paragraph. Tight gap so the box stays compact, but each
   * fact gets its own row for scannability. */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fermentSuggestRow{
  min-width: 0;
  color: inherit;
}
.fermentSuggestRow--head{
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.fermentSuggestLabel{
  /* Slightly dimmer label so the value reads as the main fact on each row, while
   * still inheriting the yellow / green from the parent so the whole suggestion box
   * reads as a single visual cue. */
  color: inherit;
  opacity: 0.72;
  font-weight: 600;
  margin-right: 2px;
}
.fermentSuggestValue{
  color: inherit;
}
.fermentSuggestStack{
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.fermentSuggestFridgeBlock{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: min(100%, 400px);
}
/* Same ring language as .neonFrame--green (fermentation section) */
.fermentSuggestBtn.btn.ghost{
  padding: 8px 10px;
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  align-self: flex-start;
  position: relative;
  border: 2px solid rgba(30, 181, 130, 0.55);
  border-radius: 12px;
  box-shadow:
    0 0 0 4px rgba(30, 181, 130, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.22);
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease,
    background 0.12s ease,
    filter 0.12s ease;
}
.fermentSuggestBtn.btn.ghost:hover{
  border-color: rgba(52, 210, 160, 0.78);
  box-shadow:
    0 0 0 4px rgba(30, 181, 130, 0.22),
    0 0 22px rgba(30, 181, 130, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.07);
}
.fermentSuggestBtn.btn.ghost:focus-visible{
  outline: none;
  border-color: rgba(72, 220, 160, 0.92);
  box-shadow:
    0 0 0 4px rgba(30, 181, 130, 0.28),
    0 0 24px rgba(72, 220, 160, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.25);
}
/* Fridge placement: custom control (native <select> cannot style closed/open text reliably). */
.fermentSuggestPlacement{
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.fermentSuggestPlacementTrigger{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--fs-b-12);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.fermentSuggestPlacementTrigger:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.09);
}
.fermentSuggestPlacementTrigger:focus-visible{
  outline: 2px solid rgba(120, 220, 255, 0.55);
  outline-offset: 2px;
}
.fermentSuggestPlacementTriggerLabel{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fermentSuggestPlacementTrigger--presetMatch .fermentSuggestPlacementTriggerLabel{
  color: #6fe3a8;
  font-weight: 900;
}
.fermentSuggestPlacementChevron{
  flex-shrink: 0;
  opacity: 0.85;
  font-size: 0.72em;
  display: inline-block;
  transition: transform 0.12s ease;
}
.fermentSuggestPlacement--open .fermentSuggestPlacementChevron{
  transform: rotate(180deg);
}
.fermentSuggestPlacementMenu{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 80;
  background: rgba(18, 26, 42, 0.98);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: min(60vh, 280px);
  overflow-y: auto;
}
.fermentSuggestPlacementMenuItem{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--mono);
  font-weight: 750;
  font-size: var(--fs-b-12);
  text-align: left;
  cursor: pointer;
}
.fermentSuggestPlacementMenuItem:hover{
  background: rgba(255, 255, 255, 0.08);
}
.fermentSuggestPlacementMenuItem:focus-visible{
  outline: 2px solid rgba(120, 220, 255, 0.55);
  outline-offset: 0;
}
.fermentSuggestPlacementMenuItem[aria-selected="true"]{
  background: rgba(255, 255, 255, 0.1);
}
.fermentSuggestPlacementMenuItem--recommended{
  color: #6fe3a8;
  font-weight: 900;
}
.fermentSuggestPlacementHint{
  margin: 6px 0 0;
  max-width: 48ch;
  line-height: 1.35;
  opacity: 0.82;
}
.fermentSuggest--warn .fermentSuggestText{
  color: #fffb80;
}
/* Suggestion matches style profile (bulk / bench / cold + placement) — same green language as neonFrame--green */
.fermentSuggest.fermentSuggest--applied.pill.subtle{
  border-color: rgba(48, 200, 150, 0.88);
  background: rgba(30, 181, 130, 0.08);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.28);
}
.fermentSuggest--applied .fermentSuggestText{
  color: #8bf0c4;
}
.fermentSuggest--applied.fermentSuggest--warn .fermentSuggestText{
  color: #8bf0c4;
}

/* Hero action buttons */
#btnCopyRecipe.btn.ghost{
  background: #f7b624;
  border-color: rgba(255,255,255,.22);
  color: #0b123c;
  font-family: var(--arcade);
}
#btnCopyRecipe.btn.ghost:hover{filter: brightness(1.03)}

/* Save recipe: idle = flat (no outer glow); hover = neon colour + bloom. */
#btnSaveRecipe.btn.ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 11px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  line-height: 1.15;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 247, 252, 0.88);
  background: linear-gradient(180deg, #140a2e 0%, #0a0618 52%, #060512 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 20px rgba(0, 0, 0, 0.48);
  transition:
    transform 0.12s ease,
    filter 0.15s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.15s ease,
    text-shadow 0.18s ease;
}
#btnSaveRecipe.btn.ghost:hover,
#btnSaveRecipe.btn.ghost:focus-visible{
  filter: brightness(1.08);
  color: #fff7fc;
  border-color: rgba(120, 255, 240, 0.92);
  text-shadow:
    0 0 6px rgba(75, 248, 254, 0.95),
    0 0 14px rgba(228, 49, 115, 0.65),
    0 1px 0 rgba(0, 0, 0, 0.95);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.35),
    0 0 14px rgba(228, 49, 115, 0.55),
    0 0 24px rgba(75, 248, 254, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 20px rgba(0, 0, 0, 0.45);
}
#btnSaveRecipe.btn.ghost:active{
  transform: translateY(1px);
}
#btnSaveRecipe.btn.ghost:focus-visible{
  outline: 2px solid rgba(75, 248, 254, 0.75);
  outline-offset: 3px;
}

/* Phantom header slot: match save button metrics across pages. */
.topActionsWidthLock.btn.ghost{
  padding: 10px 16px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  line-height: 1.15;
}

#btnShare.btn.ghost{
  background: #6f35d7;
  border-color: rgba(255,255,255,.22);
  color: #ffffff;
  font-family: var(--arcade);
}
#btnShare.btn.ghost:hover{filter: brightness(1.05)}

.bars{display:flex; flex-direction:column; gap:14px; margin-top: 10px}
.barsSubHeader{margin: 14px 0 2px}
.barsSubHeader .sectionTitle{margin:0}
.barRow{
  display:grid;
  /* Third was `auto` — wide gram counts (e.g. 11002g) forced horizontal overflow on thin screens */
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items:start;
  min-width: 0;
}
.barRow .ingIcon{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self:start;
}
.barMeta{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.barName{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  line-height: 1.35;
  min-width: 0;
}
.barNameMain{
  font-family: var(--arcade);
  font-weight: 400;
  font-size: var(--fs-h-10);
  letter-spacing: .02em;
  color: var(--text);
}
.barNameSep{
  font-family: var(--arcade);
  font-weight: 400;
  font-size: var(--fs-h-10);
  letter-spacing: .02em;
  color: rgba(255,255,255,.45);
}
.barNamePct{
  font-family: var(--arcade);
  font-weight: 400;
  font-size: var(--fs-h-10);
  letter-spacing: .02em;
  color: var(--text);
}
.barValue{
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  line-height: 1.35;
  font-family: var(--arcade);
  text-align: right;
  white-space: nowrap;
  min-width: 0;
}
.barGramsNum{
  font-weight: 700;
  font-size: var(--fs-b-12);
  letter-spacing: .04em;
  color: #fffb80;
}
.barGramsMid{
  font-weight: 700;
  font-size: var(--fs-b-12);
  letter-spacing: .04em;
  color: #fffb80;
}
.barGramsSuf{
  font-weight: 700;
  font-size: var(--fs-b-12);
  letter-spacing: .04em;
  color: #fffb80;
}
.ingIcon{
  width: 36px;
  height: 36px;
  display:block;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.barTrack{
  grid-column: 2 / -1;
  grid-row: 2;
  height: 16px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid rgba(246,249,255,.10);
  overflow:hidden;
}
.barFill{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,37,124,.95), rgba(35,201,241,.95));
  transition: none;
}

/* XP-style fill animation (used by hero ingredients bars). */
.bars--xp .barFill{
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.2, .9, .2, 1);
  transition-delay: var(--xpDelay, 0ms);
  will-change: transform;
}
.bars--xp.bars--xpOn .barFill{
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .bars--xp .barFill{
    transition: none;
    transform: none;
  }
}

.stepper{display:flex; flex-direction:column; gap:10px; margin-top: 8px}

/* Bake setup (dashboard): unified flow — intro, style+oven targets, prep, oven runbook, then post-bake sections */
.bakeSetupUnified{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bakeSetupUnifiedContext{
  font-size: var(--fs-b-12);
  line-height: 1.48;
  opacity: 0.9;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(246,249,255,.14);
  background: rgba(75,248,254,.07);
}
/* §9 Pre-Bake: one neon card, dough / shape / toppings flow (no extra column subheads). */
.bakeSetupPreBake{
  border-radius: 12px;
  border: 2px solid rgba(244, 255, 120, 0.58);
  background: linear-gradient(180deg, rgba(10, 14, 52, 0.96), rgba(5, 8, 36, 0.98));
  box-shadow:
    0 0 6px rgba(255, 245, 100, 0.42),
    0 0 20px rgba(255, 230, 60, 0.16),
    0 0 0 1px rgba(75, 248, 254, 0.12) inset;
  overflow: hidden;
}
.bakeSetupPreBakeHead{
  font-family: var(--arcade);
  font-size: var(--fs-h-14);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fffb80;
  margin: 0;
  padding: 10px 14px;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 0 14px rgba(255, 251, 128, 0.4);
  border-bottom: 1px solid rgba(255, 251, 128, 0.22);
  background: linear-gradient(90deg, rgba(255, 251, 128, 0.14), rgba(75, 248, 254, 0.06), transparent);
}
.bakeSetupPreBakeBody{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bakeSetupPreBakePara{
  margin: 0;
  font-size: var(--fs-b-12);
  line-height: 1.45;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.92);
}
.bakeSetupPreBakeSec{
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bakeSetupPreBakeSec:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.bakeSetupPreBakeSecTitle{
  font-family: var(--mono);
  font-size: calc(10px + 2pt);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.95);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(75, 248, 254, 0.32);
}
.bakeSetupPreBakeLead{
  margin: 0 0 6px;
  font-size: var(--fs-b-12);
  line-height: 1.4;
  opacity: 0.88;
  color: rgba(255, 255, 255, 0.9);
}
.bakeSetupPreBakeSec .bakeSetupPrepList,
.bakeSetupPreBakeSec .bakeSetupPrepList--num{
  margin-top: 2px;
}
.bakeSetupPreBakeSec .bakeSetupPrepList li{
  margin-bottom: 4px;
}
.bakeSetupPreBakeNote{
  margin: 4px 0 0;
  font-size: var(--fs-b-11);
  line-height: 1.35;
  opacity: 0.78;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
}
/* §9 After the bake: same card rhythm as Pre-Bake, pink / magenta neon */
.bakeSetupAfterBake{
  border-radius: 12px;
  border: 2px solid rgba(228, 49, 115, 0.62);
  background: linear-gradient(180deg, rgba(18, 8, 32, 0.96), rgba(8, 5, 28, 0.98));
  box-shadow:
    0 0 6px rgba(255, 120, 180, 0.38),
    0 0 22px rgba(228, 49, 115, 0.2),
    0 0 0 1px rgba(255, 160, 200, 0.1) inset;
  overflow: hidden;
}
.bakeSetupAfterBakeHead{
  font-family: var(--arcade);
  font-size: var(--fs-h-14);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffb8d8;
  margin: 0;
  padding: 10px 14px;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 0 14px rgba(228, 49, 115, 0.55), 0 0 24px rgba(255, 120, 180, 0.25);
  border-bottom: 1px solid rgba(228, 49, 115, 0.35);
  background: linear-gradient(90deg, rgba(228, 49, 115, 0.22), rgba(255, 120, 180, 0.08), transparent);
}
.bakeSetupAfterBakeBody{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bakeSetupAfterBakeSec{
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bakeSetupAfterBakeSec:last-child{
  border-bottom: none;
  padding-bottom: 0;
}
.bakeSetupAfterBakeSecTitle{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 186, 220, 0.98);
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(228, 49, 115, 0.45);
  text-shadow: 0 0 10px rgba(228, 49, 115, 0.35);
}
.bakeSetupAfterBakeLead{
  margin: 0 0 6px;
  font-size: var(--fs-b-12);
  line-height: 1.4;
  opacity: 0.88;
  color: rgba(255, 255, 255, 0.9);
}
.bakeSetupAfterBakeSec .bakeSetupPrepList,
.bakeSetupAfterBakeSec .bakeSetupPrepList--num{
  margin-top: 2px;
}
.bakeSetupAfterBakeSec .bakeSetupPrepList li{
  margin-bottom: 4px;
}
.bakeSetupUnifiedSubHead{
  font-family: var(--arcade);
  font-size: var(--fs-h-13);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fffb80;
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}
/* Extra air above the oven runbook line (“Bake in a …”) */
.bakeSetupUnified > .bakeSetupUnifiedSubHead{
  margin-top: 10px;
}
.bakeSetupUnifiedRunbook{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bakeSetupUnifiedRunbook .bakeSetupRunbookStepTitle{
  margin: 0 0 6px;
  font-size: var(--fs-h-13);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(255, 251, 128, 0.95);
}
.bakeSetupPrep{
  margin-top: 4px;
}
.bakeSetupPrepIntro{
  font-size: var(--fs-h-13);
  line-height: 1.45;
  opacity: 0.88;
  margin-bottom: 12px;
}
.bakeSetupPrepGrid{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.bakeSetupPrepCol{
  border: 1px solid rgba(246,249,255,.12);
  border-radius: 12px;
  padding: 10px 10px 12px;
  background: rgba(255,255,255,.03);
  min-width: 0;
}
.bakeSetupPrepColHead{
  font-family: var(--arcade);
  font-size: var(--fs-h-14);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fffb80;
  margin-bottom: 8px;
  font-weight: 400;
  line-height: 1.1;
}
.bakeSetupPrepContextHint{
  font-size: var(--fs-b-11);
  line-height: 1.4;
  opacity: 0.78;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(75,248,254,.08);
  border: 1px solid rgba(75,248,254,.22);
}
.bakeSetupPrepCalculatorPanWrap{
  margin: 0 0 14px;
}
.bakeSetupPrepCalculatorPanWrap .bakeSetupPrepCalculatorPan{
  margin-bottom: 0;
}
.bakeSetupPrepCalculatorPan{
  position: relative;
  isolation: isolate;
  margin: 0 0 14px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(
    155deg,
    rgba(32, 38, 98, 0.98) 0%,
    rgba(10, 14, 52, 0.99) 42%,
    rgba(22, 18, 72, 0.97) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.18) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 72px rgba(75, 248, 254, 0.1);
}
.bakeSetupPrepCalculatorPan::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 36%,
    rgba(255, 255, 255, 0.12) 44%,
    rgba(255, 251, 128, 0.14) 50%,
    rgba(75, 248, 254, 0.1) 56%,
    transparent 64%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: none;
  pointer-events: none;
  opacity: 0.35;
}
@keyframes pdcPanCardShine{
  0%,
  100%{
    background-position: 120% 0;
    opacity: 0.42;
  }
  50%{
    background-position: -25% 0;
    opacity: 0.92;
  }
}
@media (prefers-reduced-motion: reduce){
  .bakeSetupPrepCalculatorPan::before{
    animation: none;
    opacity: 0.32;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 45%);
  }
}
.bakeSetupPrepCalculatorPan__head,
.bakeSetupPrepCalculatorPan__list,
.bakeSetupPrepCalculatorPan__body,
.bakeSetupPrepCalculatorPan__footer{
  position: relative;
  z-index: 1;
}
.bakeSetupPrepCalculatorPan__head{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 251, 128, 0.08), transparent 70%);
}
.bakeSetupPrepCalculatorPan__icon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: var(--fs-b-15);
  line-height: 1;
  color: rgba(8, 10, 36, 0.95);
  background: linear-gradient(145deg, #ffef6a, var(--accent2));
  box-shadow:
    0 2px 10px rgba(75, 248, 254, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}
.bakeSetupPrepCalculatorPan__headText{
  min-width: 0;
}
.bakeSetupPrepCalculatorPan__title{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0f7ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  margin: 0 0 5px;
  line-height: 1.35;
}
.bakeSetupPrepCalculatorPan__subtitle{
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 800;
  color: #fff6a8;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-shadow: 0 0 22px rgba(255, 251, 128, 0.28);
}
.bakeSetupPrepCalculatorPan__list{
  counter-reset: pdcPanLine;
  margin: 0;
  padding: 12px 12px 6px;
  list-style: none;
}
.bakeSetupPrepCalculatorPan__list li{
  position: relative;
  margin: 0 0 8px;
  padding: 10px 12px 10px 40px;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.02em;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.bakeSetupPrepCalculatorPan__list li:last-child{
  margin-bottom: 0;
}
.bakeSetupPrepCalculatorPan__list li::before{
  counter-increment: pdcPanLine;
  content: counter(pdcPanLine);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font-size: var(--fs-b-10);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: rgba(6, 8, 30, 0.92);
  background: linear-gradient(180deg, rgba(120, 252, 255, 0.95), rgba(75, 248, 254, 0.55));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.bakeSetupPrepCalculatorPan__body{
  margin: 0;
  padding: 12px 14px 14px;
  font-size: var(--fs-b-12);
  line-height: 1.55;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.015em;
}
.bakeSetupPrepCalculatorPan__list + .bakeSetupPrepCalculatorPan__body{
  padding-top: 4px;
}
.bakeSetupPrepCalculatorPan__footer{
  padding: 11px 14px 14px;
  font-size: var(--fs-b-11);
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.76);
  border-top: 1px dashed rgba(75, 248, 254, 0.22);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.12));
}
.bakeSetupPrepColSubHead{
  font-weight: 800;
  font-size: var(--fs-b-12);
  margin: 12px 0 8px;
  opacity: 0.92;
}
.bakeSetupPrepSec{
  margin-bottom: 12px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(13,16,61,.78), rgba(5,16,61,.82));
  box-shadow:
    0 0 0 1px rgba(75,248,254,.10) inset,
    0 18px 40px rgba(0,0,0,.35);
}
.bakeSetupPrepSec:last-child{
  margin-bottom: 0;
}
.bakeSetupPrepCol--dough .bakeSetupPrepSec{
  box-shadow:
    0 0 0 1px rgba(75,248,254,.14) inset,
    0 0 44px rgba(75,248,254,.07),
    0 18px 40px rgba(0,0,0,.35);
}
.bakeSetupPrepCol--toppings .bakeSetupPrepSec{
  box-shadow:
    0 0 0 1px rgba(255,251,128,.14) inset,
    0 0 44px rgba(255,251,128,.06),
    0 18px 40px rgba(0,0,0,.35);
}
.bakeSetupPrepSecTitleRow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.bakeSetupPrepSecIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 900;
  font-size: var(--fs-b-16);
  color: rgba(8, 10, 36, 0.95);
  background: linear-gradient(145deg, #ffef6a, var(--accent2));
  box-shadow:
    0 2px 10px rgba(75,248,254,.35),
    0 0 0 1px rgba(255,255,255,.24) inset;
  flex: 0 0 auto;
}
.bakeSetupPrepCol--dough .bakeSetupPrepSecIcon{
  background: linear-gradient(145deg, rgba(75,248,254,.95), rgba(30,181,130,.85));
  box-shadow:
    0 2px 10px rgba(75,248,254,.45),
    0 0 0 1px rgba(255,255,255,.24) inset;
}
.bakeSetupPrepCol--toppings .bakeSetupPrepSecIcon{
  background: linear-gradient(145deg, rgba(255,251,128,.95), rgba(228,49,115,.78));
  box-shadow:
    0 2px 10px rgba(255,251,128,.35),
    0 0 0 1px rgba(255,255,255,.24) inset;
}
.bakeSetupPrepSecTitle{
  font-family: var(--arcade);
  font-weight: 700;
  font-size: var(--fs-h-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.bakeSetupPrepLead{
  font-size: var(--fs-b-12);
  line-height: 1.4;
  opacity: 0.88;
  margin: 0 0 6px;
}
.bakeSetupPrepPara{
  font-size: var(--fs-b-12);
  line-height: 1.45;
  opacity: 0.88;
  margin: 0 0 8px;
}
.bakeSetupPrepList{
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--fs-b-12);
  line-height: 1.4;
  opacity: 0.9;
}
.bakeSetupPrepList li{
  margin-bottom: 6px;
}
.bakeSetupPrepList li:last-child{margin-bottom: 0}
.bakeSetupPrepList--num{
  list-style: decimal;
  padding-left: 1.35em;
}
.bakeSetupPrepList li{
  margin-bottom: 4px;
}
.bakeSetupPrepNote{
  margin-top: 8px;
  font-size: var(--fs-b-11);
  line-height: 1.35;
  opacity: 0.75;
  font-style: italic;
}
.bakeSetupPrepOven{
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(246,249,255,.14);
}

.stepLineBullet{
  position: relative;
  padding-left: 14px;
}
.stepLineBullet::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255,255,255,.72);
  font-weight: 900;
}

.split{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.fermentTotalPlanField{
  grid-column: 1 / -1;
  padding: 14px 14px 16px;
  box-sizing: border-box;
}

/* Total ferment: title + hours chip grouped on the left. */
.fermentTotalHead{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.1);
}
.fermentTotalHeadGroup{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}
.fermentTotalTitle{
  margin: 0;
}
.fermentTotalPlanField .fermentTotalPill{
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 900;
  font-size: var(--fs-b-12);
  color: #fff;
  background: rgba(255, 207, 90, 0.08);
  border: 1px solid rgba(255, 207, 90, 0.55);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(255, 207, 90, 0.12),
    0 0 14px rgba(255, 207, 90, 0.22),
    inset 0 0 18px rgba(255, 207, 90, 0.07);
}

.fermentTotalBody{
  display: block;
}
.fermentTotalStartLabel{
  margin: 0 0 8px;
}
/* Same type scale as hero dough summary “Round pizzas” (`.heroSub.heroSummary .heroSumSubH` +1pt). */
.fermentTotalPlanField .fermentTotalStartLabel.heroSumSubH{
  font-size: calc(var(--fs-h-9) + 1pt);
}
.fermentTotalReadyRow{
  margin: 12px 0 0;
}
.fermentTotalReadyRow #readyAt{
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
}

/* Room temp row: align chip block with the temp field */
.split.fermentRoomRow{
  align-items: start;
}

.fermentRoomFrame{
  padding: 10px 10px 12px;
}
.fermentRoomFrame .field{
  border: 0;
  padding: 0;
  background: transparent;
}

#tempC{
  min-width: 0;
}

#roomTempSizerField{
  min-width: 0;
  container-type: inline-size;
  container-name: roomSizer;
}

#roomTempSizerField .sizeLabel{
  display:block;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--fs-b-13);
  margin-bottom: 8px;
}

/* Room temp quick presets: neon grid beside the numeric field (narrow column); widen to one flex row below */
#roomTempSizerField #roomTempChips{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 18rem;
  margin-top: 2px;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
}
#roomTempSizerField #roomTempChips .chip{
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  height: 40px;
  padding: 0 4px;
  font-weight: 900;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  line-height: 1.1;
  letter-spacing: .02em;
  display:flex;
  align-items: center;
  border: 2px solid rgba(246, 249, 255, 0.48);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  color: rgba(255,255,255,.96);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(167, 120, 255, 0.24),
    0 0 16px rgba(167, 120, 255, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.3);
  justify-content: center;
}
#roomTempSizerField #roomTempChips .chip:not(.activeGreen):hover{
  border-color: rgba(126, 240, 255, 0.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 5px rgba(75, 248, 254, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.32);
}
#roomTempSizerField #roomTempChips .chip.activeGreen{
  border-color: rgba(255, 176, 42, 0.98);
  background: rgba(255, 251, 128, 0.88);
  color: rgba(0,0,0,.92);
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}

@container roomSizer (min-width: 17rem){
  #roomTempSizerField #roomTempChips{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    max-width: none;
  }
  #roomTempSizerField #roomTempChips .chip{
    flex: 1 1 44px;
    min-width: 44px;
    width: auto;
    max-width: none;
    height: 40px;
  }
}

/* Bulk + bench + cold: one full-width row each. Fridge on inserts cold between bulk and warm (see .fermentStagesFlow--coldOn). */
.fermentStagesFlow{
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "fsBulk"
    "fsBench"
    "fsCold";
}
/* Same-day / Saturday workflow set `hidden` via JS — plain `.fermentStagesFlow{display:grid}` would otherwise win over `[hidden]`. */
.fermentStagesFlow[hidden]{
  display: none !important;
}
.fermentStageBulk{
  grid-area: fsBulk;
  min-width: 0;
}
.fermentStageBench{
  grid-area: fsBench;
  min-width: 0;
}
.fermentStageCold{
  grid-area: fsCold;
  min-width: 0;
}
/* Fridge on: bulk → cold → warm (same single column, different row order). */
.fermentStagesFlow.fermentStagesFlow--coldOn{
  grid-template-areas:
    "fsBulk"
    "fsCold"
    "fsBench";
}

/* Bulk + bench rest balls: each field boxed (same recipe as portion sizing boxes) */
.fermentStagesFlow .fermentStageBulk.field,
.fermentStagesFlow .fermentStageBench.field{
  border: 1px solid rgba(246,249,255,.12);
  border-radius: 14px;
  padding: 10px 10px 12px;
  background: rgba(255,255,255,.02);
}
.fermentStagesFlow .fermentStageBulk.field .row,
.fermentStagesFlow .fermentStageBench.field .row{
  margin-top: 6px;
}

/* Portion sizing UI: add borders around the two boxes for clarity */
.split.splitPortions > .field{
  border: 1px solid rgba(246,249,255,.12);
  border-radius: 14px;
  padding: 10px 10px 12px;
  background: rgba(255,255,255,.02);
}
.split.splitPortions > .field .row,
.split.splitPortions > .field .row{margin-top: 6px}

.sizeField .sizeLabel{
  display:block;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--fs-b-13);
  margin-bottom: 8px;
}

/* Size box: use normal `.field` padding; chips use the same border-alignment recipe as Dough balls */

.splitPortionsGrid{
  grid-auto-flow: row;
  align-items: start;
}
/* Dough balls count + Ball weight stack full-width (beats two-column `.split` and `split.splitPortions`). */
.split.splitPortions.splitPortionsGrid{
  grid-template-columns: minmax(0, 1fr);
}
.splitPortionsGrid .portionsGhost{
  /* legacy grid cell; hidden when optional sizer spans full width */
  display: block;
}
/* Optional pizza sizer spans full portion row width (single chip row); ghost unused */
.split.splitPortions.splitPortionsGrid > #sizeRow.field.sizeField{
  grid-column: 1 / -1;
}
.split.splitPortions.splitPortionsGrid #sizeGhost{
  display: none !important;
}
.split.splitPortions > .field.sizeField{
  padding: 6px 10px 8px;
}
.split.splitPortions > .field.sizeField .sizeLabel{
  margin-bottom: 6px;
}

.field label{
  display:block;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--fs-b-13);
  margin-bottom: 6px;
}

/* Numeric stepper rows (− input +): align label with input; Inter +1pt bold */
.dashboard .sidebar #ballsField > label,
.dashboard .sidebar #portionWeightLabel,
.dashboard .sidebar .fermentRoomRow > .field:first-of-type > label[for="tempC"],
.dashboard .sidebar .fermentStageBulk.field > label[for="bulkHours"],
.dashboard .sidebar #counterBenchLabel{
  padding-left: calc(40px + 10px);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: calc(var(--fs-b-13) + 1pt);
  font-weight: 800;
}

/* Quick room temp: chips only — same typography (label aligns with chip row start) */
.dashboard .sidebar #roomTempSizerField .sizeLabel{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: calc(var(--fs-b-13) + 1pt);
  font-weight: 800;
}

/* Cold ferment: title line above Fridge stage — same typography */
.dashboard .sidebar .coldFermentHead{
  margin: 0 0 6px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: calc(var(--fs-b-13) + 1pt);
  font-weight: 800;
  color: var(--muted);
}
.field input, .field select{
  width:100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246,249,255,.12);
  background: linear-gradient(180deg, rgba(13,16,61,.78), rgba(5,16,61,.78));
  color: var(--text);
  outline: none;
  font-size: calc(12px + var(--type-bump-input));
}
.field input:focus, .field select:focus{border-color: rgba(246,249,255,.20); box-shadow: 0 0 0 4px rgba(90,74,149,.18)}

/* Ball weight source highlighting */
#ballWeight.bwZero{
  border-color: rgba(228,49,115,.85);
  box-shadow: 0 0 0 4px rgba(228,49,115,.18);
}
#ballWeight.bwAuto{
  border-color: rgba(30,181,130,.65);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
#ballWeight.bwManual{
  border-color: rgba(247,182,36,.75);
  box-shadow: 0 0 0 4px rgba(247,182,36,.18);
}

/* Bench rest balls (totalHours) field source highlighting */
#totalHours.cpAuto{
  border-color: rgba(30,181,130,.65);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
#totalHours.cpManual{
  border-color: rgba(247,182,36,.75);
  box-shadow: 0 0 0 4px rgba(247,182,36,.18);
}

/* Dashboard sidebar: clearer frames on portions + Fermentation numeric fields and preset chips.
   Keeps `#ballWeight` / `#totalHours` state hues (narrower selectors so .bw* / .cp* still win). */
.dashboard .sidebar :is(#balls, #ballWeight, #tempC, #bulkHours, #fridgeTempC, #coldHours, #totalHours){
  border-width: 2px;
}
.dashboard .sidebar :is(#balls, #tempC, #bulkHours, #fridgeTempC, #coldHours){
  border-color: rgba(246, 249, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 0 4px rgba(167, 120, 255, 0.12);
}
.dashboard .sidebar #ballWeight:not(.bwZero):not(.bwAuto):not(.bwManual){
  border-color: rgba(246, 249, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 0 4px rgba(167, 120, 255, 0.12);
}
.dashboard .sidebar #totalHours:not(.cpAuto):not(.cpManual){
  border-color: rgba(246, 249, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 0 4px rgba(167, 120, 255, 0.12);
}
.dashboard .sidebar :is(#balls, #tempC, #bulkHours, #fridgeTempC, #coldHours):focus,
.dashboard .sidebar #ballWeight:not(.bwZero):not(.bwAuto):not(.bwManual):focus,
.dashboard .sidebar #totalHours:not(.cpAuto):not(.cpManual):focus{
  border-color: rgba(246, 249, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 4px rgba(90, 74, 149, 0.32);
}
.dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger){
  border-color: rgba(246, 249, 255, 0.48);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 5px rgba(167, 120, 255, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.3);
}
.dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger):hover{
  border-color: rgba(126, 240, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 5px rgba(75, 248, 254, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.32);
}

/* Custom dropdown (needed because native optgroup labels are OS-styled on macOS) */
.menuSelect{
  position: relative;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  /* Lets triggers + panel rows scale type and wrap from actual control width */
  container-type: inline-size;
  container-name: pdcMenu;
}
.menuBtn{
  width:100%;
  max-width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246,249,255,.12);
  background: linear-gradient(180deg, rgba(13,16,61,.82), rgba(5,16,61,.82));
  color: var(--text);
  cursor:pointer;
  text-align:left;
  min-width: 0;
  box-sizing: border-box;
}
.menuBtn > .menuCaret,
.menuBtn > .menuClear{
  align-self: center;
  flex-shrink: 0;
}
/* Trigger head: title (+ optional suffix like par-bake); top-align when the label wraps. */
.menuBtn > .menuSelectTriggerHead{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.menuBtn .menuSelectTitleCol{
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.menuBtn .menuSelectTitle{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.22;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .menuBtn .menuSelectTitle,
  .menuBtn .bakeSetupParBakeStripLabel{
    font-size: clamp(10px, calc(7px + 4.8cqi), 13px);
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 560px){
    .menuBtn .menuSelectTitle,
    .menuBtn .bakeSetupParBakeStripLabel{
      font-size: clamp(10px, calc(9px + 2.1vw), 13px);
    }
  }
}

.menuBtn:hover{border-color: rgba(255,255,255,.22)}
.menuBtn.menuUnset{
  border-color: rgba(228,49,115,.55);
  background: linear-gradient(180deg, rgba(228,49,115,.22), rgba(5,16,61,.82));
  color: #fff;
  box-shadow: 0 0 0 4px rgba(228,49,115,.12);
}
.menuBtn.menuUnset:hover{filter: brightness(1.03)}
.menuBtn.menuUnset .menuCaret{color: rgba(255,255,255,.92)}
.menuBtn.menuChosen{
  border-color: rgba(255,255,255,.22);
  background: var(--good);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
.menuBtn.menuChosen:hover{filter: brightness(1.03)}
.menuBtn.menuChosen .menuCaret{color: rgba(255,255,255,.92)}

/* "Select Pizza Style" hint affordance.
 *
 * The pizza style picker is the entry point of the whole calculator — picking a style
 * unlocks the rest of the hero box and column 2. To nudge the user toward it, we boost
 * the unselected chip's pink with a stronger gradient, give it a halo + soft pulse,
 * and run a slow diagonal sheen sweep across the surface. Once a style is chosen the
 * chip flips to the existing green `.menuChosen` state and all of these effects fall
 * away (the `.menuUnset` rules simply stop applying).
 *
 * Scoped to `#styleSelect` so it doesn't apply to the mixing-method, oven, or flour
 * pickers — those should stay subtle. Honors `prefers-reduced-motion`. */
#styleSelect .menuBtn.menuUnset{
  position: relative;
  overflow: hidden; /* clip the ::after sheen sweep to the chip's rounded corners */
  border-color: rgba(255, 80, 145, 0.85);
  background: linear-gradient(180deg, rgba(255, 80, 145, 0.42), rgba(120, 18, 70, 0.82));
  color: #fff;
  /* Tight halo: the chip below (Mixing Method) sits ~14px away, so we keep the bloom
   * compact (≤ ~10px) and skip the wide drop-shadow. The vibrancy now comes from the
   * background gradient + border colour rather than a big outer glow. */
  box-shadow:
    0 0 0 2px rgba(255, 80, 145, 0.22),
    0 0 8px rgba(255, 80, 145, 0.32);
  animation: pdcStylePickerPulse 2.4s ease-in-out infinite;
}
#styleSelect .menuBtn.menuUnset:hover{
  filter: brightness(1.05);
}
/* Sheen sweep: a translucent white band that slides across left → right with a long
 * pause in between sweeps. Sits above the gradient but below the text/caret because
 * the parent button paints them at the natural stacking order; the ::after layer is
 * pointer-events:none so it never blocks clicks. */
#styleSelect .menuBtn.menuUnset::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.32) 48%,
    rgba(255, 255, 255, 0.05) 56%,
    transparent 72%
  );
  transform: translateX(-110%);
  /* 4.5s — sped up from 6.4s on user request to make the lure read more
   * insistently without becoming jittery. The sweep itself still occupies 0→60%
   * of the cycle (~2.7s of glide), with the remaining ~40% (~1.8s) as a dwell
   * at the right edge before the next sweep. */
  animation: pdcStylePickerShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pdcStylePickerShine{
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
@keyframes pdcStylePickerPulse{
  /* Two-step pulse stays inside the same compact footprint as the static state above
   * (max ~10px of total bloom). The pulse is a brightness/intensity breath rather than
   * a size change, so the chip never visually crowds the picker below it. */
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 80, 145, 0.22),
      0 0 8px rgba(255, 80, 145, 0.32);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 80, 145, 0.34),
      0 0 10px rgba(255, 80, 145, 0.5);
  }
}
@media (prefers-reduced-motion: reduce){
  #styleSelect .menuBtn.menuUnset{
    animation: none;
  }
  #styleSelect .menuBtn.menuUnset::after{
    display: none;
  }
}
/* Chosen state: match unset chip’s ~2px ring + soft bloom footprint so the green box doesn’t read larger. */
#styleSelect .menuBtn.menuChosen{
  box-shadow:
    0 0 0 2px rgba(30, 181, 130, 0.32),
    0 0 8px rgba(30, 181, 130, 0.28);
}

/* Bake setup: par-bake inline on oven chip — no nested “card” so chip height stays near the plain title row. */
.menuBtn .bakeSetupParBakeStrip{
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
.menuBtn .bakeSetupParBakeCheckLab{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.menuBtn .bakeSetupParBakeCheckbox{
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: transparent;
  accent-color: #1eb582;
  cursor: pointer;
  box-sizing: border-box;
}
.menuBtn.menuUnset .bakeSetupParBakeCheckbox{
  border-color: rgba(255, 255, 255, 0.28);
}
.menuBtn .bakeSetupParBakeStripLabel{
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.22;
  color: inherit;
  white-space: nowrap;
}
.menuCaret{color: var(--muted); font-weight: 900}
.menuClear{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: calc(13px + var(--type-bump-body));
  line-height: 1;
  font-weight: 900;
  flex: 0 0 auto;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.menuClear.menuClear--concealed{
  visibility: hidden;
  pointer-events: none;
}
.menuClear:hover{
  background: rgba(228,49,115,.18);
  border-color: rgba(228,49,115,.65);
  box-shadow: 0 0 0 4px rgba(228,49,115,.14), 0 10px 22px rgba(0,0,0,.18);
}
.menuClear:active{transform: translateY(1px)}
.menuBtn.menuUnset .menuClear{
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.14);
}
.menuBtn.menuChosen .menuClear{
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.20);
}
.menuPanel{
  position:absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 520px;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(246,249,255,.16);
  background: linear-gradient(180deg, rgba(16,21,61,.96), rgba(8,16,58,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 8px;
  text-align:left;
}
.menuSelect--panelAbove .menuPanel{
  top: auto;
  bottom: calc(100% + 8px);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.52);
}
/* Select Pizza Style + Flours: cap scroll area ~6 body lines under default 520px so the panel sits a bit higher */
#styleSelect .menuPanel,
#flourSelect .menuPanel{
  max-height: calc(520px - 6 * 1.375rem);
  -webkit-overflow-scrolling: touch;
}
.menuGroup{
  margin-top: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(90,74,149,.55), rgba(13,16,61,.30));
  border: 2px solid rgba(246,249,255,.20);
  color: rgba(246,249,255,.95);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--fs-h-15);
  text-align:left;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  cursor:pointer;
  box-sizing: border-box;
}
.menuGroup > div:first-child{
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.22;
}
.menuGroupCaret{
  color: rgba(246,249,255,.85);
  font-weight: 900;
  flex: 0 0 auto;
  align-self: center;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .menuGroup{
    font-size: clamp(var(--fs-h-11), calc(8px + 3.4cqi), var(--fs-h-15));
  }
}
.menuGroup.open .menuGroupCaret{transform: rotate(90deg)}
.menuGroupBlock{display:block}
.menuGroupBody{padding: 2px 0 2px}
/* Pizza style picker on narrow viewports: category headers stick within the panel while scrolling one long list. */
.menuSelect--multiGroup .menuPanel .menuGroup{
  position: sticky;
  top: 0;
  z-index: 2;
}
.menuSelect--multiGroup .menuPanel .menuGroupBlock:first-child .menuGroup{
  margin-top: 0;
}
/* Sticky headers (desktop too): scroll items under the current group heading. */
.menuSelect--stickyGroups .menuPanel .menuGroup{
  position: sticky;
  top: 0;
  z-index: 2;
}
.menuSelect--stickyGroups .menuPanel{
  /* Let group headers scroll all the way to the top edge. */
  padding-top: 0;
}
.menuSelect--stickyGroups .menuPanel .menuGroupBlock:first-child .menuGroup{
  margin-top: 0;
}
/* Sticky category headers must be opaque (no see-through while scrolling). */
.menuSelect--stickyGroups .menuPanel .menuGroup{
  background: linear-gradient(90deg, #5a4a95, #0d103d);
  border-color: rgba(246,249,255,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.menuItem{
  margin-top: 6px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246,249,255,.10);
  background: linear-gradient(180deg, rgba(13,16,61,.70), rgba(5,16,61,.70));
  color: rgba(246,249,255,.92);
  cursor:pointer;
  font-weight: 650;
  text-align:left;
  /* Dropdown rows only: “Chips” pref bumps list rows, not global `.chip` buttons. */
  font-size: calc(15px + var(--type-bump-chip));
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
  display:block;
  width:100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}
.menuItem .menuItemTitle{
  font-weight: 650;
  line-height: 1.22;
}
.menuItem .menuItemSub{
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-b-11);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.menuItem .menuItemSub:empty{
  display: none;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .menuPanel .menuItem{
    font-size: clamp(
      calc(11px + var(--type-bump-chip)),
      calc(10px + 5.2cqi + var(--type-bump-chip)),
      calc(15px + var(--type-bump-chip))
    );
  }
  .menuPanel .menuItem .menuItemSub{
    font-size: clamp(var(--fs-b-9), calc(8px + 3.4cqi), var(--fs-b-11));
  }
}
/* Bake setup: oven list caps slightly smaller than other pickers */
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  #ovenSelect .menuPanel .menuItem{
    font-size: clamp(
      calc(11px + var(--type-bump-chip)),
      calc(10px + 5.2cqi + var(--type-bump-chip)),
      calc(14px + var(--type-bump-chip))
    );
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 560px){
    .menuPanel .menuItem{
      font-size: clamp(
        calc(11px + var(--type-bump-chip)),
        calc(11px + 1.6vw + var(--type-bump-chip)),
        calc(15px + var(--type-bump-chip))
      );
    }
    .menuPanel .menuItem .menuItemSub{
      font-size: clamp(var(--fs-b-9), calc(9px + 1.2vw), var(--fs-b-11));
    }
    #ovenSelect .menuPanel .menuItem{
      font-size: clamp(
        calc(11px + var(--type-bump-chip)),
        calc(11px + 1.6vw + var(--type-bump-chip)),
        calc(14px + var(--type-bump-chip))
      );
    }
    .menuPanel .menuGroup{
      font-size: clamp(var(--fs-h-10), calc(9px + 1.9vw), var(--fs-h-15));
    }
  }
}
/* Home Oven row: select + steel/stone toggle (avoid nested <button> inside one control). */
.menuItem.menuItemHomeOvenRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  /* Run-in after title: “Home Oven” then Steel/stone + toggle (not pushed to row end). */
  gap: 0.45em;
  padding-right: 8px;
}
.menuItemHomeOvenMain{
  flex: 0 1 auto;
  align-self: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1.15;
}
.menuItemHomeOvenTitle{
  font-weight: 650;
  font-size: calc(14px + var(--type-bump-chip));
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.menuItemHomeOvenToggleCol{
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.menuItemHomeOvenToggleLab{
  font-size: var(--fs-b-11);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #facc15;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  line-height: 1.15;
  transition: color 0.15s ease;
}
.menuItemHomeOvenToggleLab.isSteelStoneOn{
  color: #4ade80;
}
.menuHomeOvenStoneToggle{
  flex: 0 0 auto;
  align-self: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(5,16,61,.85));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.menuHomeOvenStoneToggle:hover{
  border-color: rgba(255,255,255,.4);
}
.menuHomeOvenStoneToggle.isOn{
  border-color: rgba(34,197,94,.9);
  background: radial-gradient(circle at 35% 30%, rgba(74,222,128,.4), rgba(5,40,24,.92));
  box-shadow:
    0 0 0 1px rgba(34,197,94,.35),
    0 0 8px rgba(34,197,94,.45),
    inset 0 0 4px rgba(74,222,128,.2);
}
/* Flour dropdown: grid reserves a fixed “stock” column so ☑ + In stock never overflow the chip. */
.menuItem.menuItemFlourRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 10px;
  overflow: hidden;
}
.menuItem.menuItemFlourRow .menuItemFlourMain{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.menuItem.menuItemFlourRow .menuItemFlourTitle{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  line-height: 1.2;
}
.menuItem.menuItemFlourRow .menuItemFlourSub{
  color: rgba(255,255,255,.86);
  font-size: var(--fs-b-11);
  font-weight: 500;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  line-height: 1.25;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  .menuItem.menuItemFlourRow .menuItemFlourTitle{
    font-size: clamp(
      calc(11px + var(--type-bump-chip)),
      calc(9px + 4.5cqi + var(--type-bump-chip)),
      calc(15px + var(--type-bump-chip))
    );
  }
  .menuItem.menuItemFlourRow .menuItemFlourSub{
    font-size: clamp(var(--fs-b-9), calc(8px + 3.2cqi), var(--fs-b-11));
  }
}
.menuItem.menuItemFlourRow .menuItemFlourSub:empty{display:none}
.menuItem.menuItemFlourRow .menuItemStock{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 500;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  user-select: none;
}
.menuItem.menuItemFlourRow .menuItemStockInner{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.menuItem.menuItemFlourRow .menuItemStock input{
  flex: 0 0 auto;
  margin: 0;
  width: 14px;
  height: 14px;
}
.menuItem:hover{
  border-color: rgba(246,249,255,.18);
  background: linear-gradient(180deg, rgba(90,74,149,.24), rgba(5,16,61,.72));
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.30);
}
.menuItem.active{
  border-color: rgba(75,248,254,.55);
  background: linear-gradient(180deg, rgba(75,248,254,.12), rgba(5,16,61,.72));
  box-shadow: 0 0 0 4px rgba(75,248,254,.14);
}
/* Flour picker: same traffic as dashboard reco (plan strength vs flour tier). */
.menuItem.menuItem--ideal:not(.active){
  border-color: rgba(30,181,130,.65);
  box-shadow: 0 0 0 4px rgba(30,181,130,.10);
}
.menuItem.menuItem--exceed:not(.active){
  border-color: rgba(247,182,36,.75);
  box-shadow: 0 0 0 4px rgba(247,182,36,.10);
}
.menuItem.menuItem--short:not(.active){
  border-color: rgba(255,107,107,.78);
  box-shadow: 0 0 0 4px rgba(255,107,107,.12);
}
.menuItem.menuNone{margin-top: 0}
.menuItem.menuNone + .menuItem{margin-top: 6px}
.menuItem.menuNone.active{
  border-color: rgba(255,255,255,.22);
  background: rgba(30,181,130,.22);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
.hint{margin-top:6px; color: var(--dim); font-size: var(--fs-b-12)}

.row{display:flex; gap:10px; align-items:center; min-width: 0}
.row > input,
.row > select{
  min-width: 0;
  flex: 1 1 auto;
}
.iconBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* Default: same neon recipe as `.chip` (e.g. pan plan × outside a neon frame) */
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0,0,0,.25);
  color: var(--text);
  font-size: var(--fs-b-18);
  font-weight: 700;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding: 0;
  line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
}
.iconBtn:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
.iconBtn:active{transform: translateY(1px)}
/* +6 steppers: two chars — slightly smaller than − / + */
#bulkPlus6.iconBtn,
#coldPlus6.iconBtn{
  font-size: calc(var(--fs-b-16) - 1pt);
}
.iconBtn.activeGreen{
  border-color: rgba(30,181,130,.75);
  background: rgba(30,181,130,.22);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
.iconBtn.activeGreen:hover{
  border-color: rgba(30,181,130,.95);
  background: rgba(30,181,130,.28);
}

/* − / + / × inside a neon frame: match that frame’s ring (see `.neonFrame--*::before`) */
.neonFrame--cyan .iconBtn{
  border: 2px solid rgba(75,248,254,.55);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(75,248,254,.14), 0 10px 22px rgba(0,0,0,.25);
}
.neonFrame--cyan .iconBtn:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.22), rgba(10,17,61,.82));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
.neonFrame--pink .iconBtn{
  border: 2px solid rgba(228,49,115,.55);
  background: linear-gradient(180deg, rgba(228,49,115,.16), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(228,49,115,.14), 0 10px 22px rgba(0,0,0,.25);
}
.neonFrame--pink .iconBtn:hover{
  border-color: rgba(255,251,128,.92);
  background: linear-gradient(180deg, rgba(255,251,128,.12), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(255,251,128,.12), 0 12px 26px rgba(0,0,0,.28);
}
.neonFrame--gold .iconBtn{
  border: 2px solid rgba(255,207,90,.65);
  background: linear-gradient(180deg, rgba(255,207,90,.14), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(255,207,90,.14), 0 10px 22px rgba(0,0,0,.25);
}
.neonFrame--gold .iconBtn:hover{
  border-color: rgba(255,207,90,.95);
  background: linear-gradient(180deg, rgba(255,207,90,.22), rgba(10,17,61,.82));
  box-shadow: 0 0 0 4px rgba(255,207,90,.14), 0 12px 26px rgba(0,0,0,.28);
}
.neonFrame--green .iconBtn{
  border: 2px solid rgba(30,181,130,.55);
  background: linear-gradient(180deg, rgba(30,181,130,.14), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(30,181,130,.14), 0 10px 22px rgba(0,0,0,.25);
}
.neonFrame--green .iconBtn:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
.neonFrame--blue .iconBtn{
  border: 2px solid rgba(120, 190, 255, .60);
  background: linear-gradient(180deg, rgba(120, 190, 255, .14), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(120, 190, 255, .14), 0 10px 22px rgba(0,0,0,.25);
}
.neonFrame--blue .iconBtn:hover{
  border-color: rgba(120, 190, 255, .95);
  background: linear-gradient(180deg, rgba(120, 190, 255, .22), rgba(10,17,61,.82));
  box-shadow: 0 0 0 4px rgba(120, 190, 255, .12), 0 12px 26px rgba(0,0,0,.28);
}

.neonFrame--cyan .iconBtn.activeGreen,
.neonFrame--pink .iconBtn.activeGreen,
.neonFrame--gold .iconBtn.activeGreen,
.neonFrame--green .iconBtn.activeGreen,
.neonFrame--blue .iconBtn.activeGreen{
  border-color: rgba(30,181,130,.75);
  background: rgba(30,181,130,.22);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
.neonFrame--cyan .iconBtn.activeGreen:hover,
.neonFrame--pink .iconBtn.activeGreen:hover,
.neonFrame--gold .iconBtn.activeGreen:hover,
.neonFrame--green .iconBtn.activeGreen:hover,
.neonFrame--blue .iconBtn.activeGreen:hover{
  border-color: rgba(30,181,130,.95);
  background: rgba(30,181,130,.28);
}

/* Portion / pan planner strip: same cyan accent as dough balls */
#panAdd.panAddChip,
#panPlan .iconBtn,
#detroitPanPlan .iconBtn{
  border: 2px solid rgba(75,248,254,.55);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.75));
  box-shadow: 0 0 0 3px rgba(75,248,254,.14), 0 10px 22px rgba(0,0,0,.25);
}
#panAdd.panAddChip:hover,
#panPlan .iconBtn:hover,
#detroitPanPlan .iconBtn:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.22), rgba(10,17,61,.82));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
#panAdd.panAddChip.activeGreen,
#panPlan .iconBtn.activeGreen,
#detroitPanPlan .iconBtn.activeGreen{
  border-color: rgba(30,181,130,.75);
  background: rgba(30,181,130,.22);
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}

/* CUSTOM SIZE: gold ring (pan “best fit” chips); cyan stays on ADD PAN + planner × */
#panCustomOpen.panAddChip{
  border: 2px solid rgba(255, 207, 90, 0.72);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.18), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.12), 0 10px 22px rgba(0, 0, 0, 0.28);
}
#panCustomOpen.panAddChip:hover{
  border-color: rgba(255, 251, 128, 0.95);
  background: linear-gradient(180deg, rgba(255, 251, 128, 0.14), rgba(10, 17, 61, 0.82));
  box-shadow: 0 0 0 4px rgba(255, 207, 90, 0.14), 0 12px 26px rgba(0, 0, 0, 0.3);
}
#panCustomOpen.panAddChip[aria-expanded="true"]{
  border-color: rgba(255, 251, 128, 0.98);
  background: linear-gradient(180deg, rgba(255, 251, 128, 0.2), rgba(10, 17, 61, 0.88));
  box-shadow:
    0 0 0 4px rgba(255, 207, 90, 0.16),
    0 0 18px rgba(255, 207, 90, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.96);
}

/* Pan planner: CUSTOM SIZE + ADD PAN live in #panPlannerRow (hidden in dough-balls mode). */
.panPlannerAddRow{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Pan dough: section 2 title only; CUSTOM SIZE lives in #panPlannerRow with ADD PAN. */
.panPortionHead{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.panPortionHead .sectionTitle{
  margin: 0;
}

/* Custom pan drawer: same neonFrame language as dough balls (gold = pan chip accent) */
.panCustomPanel.neonFrame{
  margin-top: 10px;
  padding: 14px 14px 16px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 21, 61, 0.72), rgba(8, 16, 58, 0.82));
}
.panCustomPanel[hidden]{
  display: none !important;
}
.panCustomPanel:not([hidden]){
  display: block;
}
.panCustomPanelHead{
  font-family: var(--arcade);
  font-size: var(--fs-h-10);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.92);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 249, 255, 0.1);
  text-shadow: 0 0 12px rgba(255, 207, 90, 0.22);
}
.panCustomFormGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}
@media (max-width: 520px){
  .panCustomFormGrid{
    grid-template-columns: 1fr;
  }
}
.panCustomLabel{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-b-12);
  font-weight: 600;
  color: var(--muted);
}
.panCustomLabel > span:first-child{
  letter-spacing: 0.02em;
}
.panCustomLabel--full{
  grid-column: 1 / -1;
}
.panCustomLabel input,
.panCustomLabel select,
.panCustomSelect{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246, 249, 255, 0.12);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.88), rgba(5, 16, 61, 0.88));
  color: var(--text);
  font-size: var(--fs-b-13);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.panCustomLabel input::placeholder{
  color: rgba(255, 255, 255, 0.38);
}
.panCustomLabel input:focus,
.panCustomLabel select:focus,
.panCustomSelect:focus{
  border-color: rgba(255, 207, 90, 0.55);
  box-shadow:
    0 0 0 3px rgba(255, 207, 90, 0.1),
    0 0 0 1px rgba(255, 207, 90, 0.25) inset;
}
.panCustomFormActions{
  margin-top: 14px;
}
.panCustomSaveBtn{
  width: 100%;
  border: 2px solid rgba(255, 207, 90, 0.55);
  background: linear-gradient(180deg, rgba(90, 74, 149, 0.45), rgba(10, 17, 61, 0.82));
  box-shadow:
    0 0 0 3px rgba(255, 207, 90, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.35);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.panCustomSaveBtn:hover{
  border-color: rgba(255, 251, 128, 0.85);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.12), rgba(10, 17, 61, 0.88));
  box-shadow:
    0 0 0 4px rgba(255, 207, 90, 0.1),
    0 14px 32px rgba(0, 0, 0, 0.38);
}
.panCustomSaveBtn:active{
  transform: translateY(1px);
}
.panCustomSavedHead{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 249, 255, 0.1);
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(75, 248, 254, 0.82);
}
.panCustomList{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panCustomListRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(246, 249, 255, 0.12);
  background: linear-gradient(180deg, rgba(5, 16, 61, 0.75), rgba(13, 16, 61, 0.55));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  font-size: var(--fs-b-12);
}
.panCustomListRow .btn.ghost.small{
  border-color: rgba(228, 49, 115, 0.35);
  color: rgba(255, 200, 210, 0.95);
}
.panCustomListRow .btn.ghost.small:hover{
  border-color: rgba(228, 49, 115, 0.65);
  background: rgba(228, 49, 115, 0.12);
  color: #fff;
}
.panCustomListLabel{
  flex: 1 1 160px;
  min-width: 0;
  line-height: 1.4;
  font-family: var(--mono);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.slider{
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(246,249,255,.10);
  background: linear-gradient(180deg, rgba(16,21,61,.66), rgba(8,16,58,.54));
  margin-top: 10px;
  min-width: 0;
}
.slider.compact{margin-top:0}

#flourReco{
  margin-top: 10px;
}
.recoTitle{
  font-weight: 800;
  font-size: var(--fs-h-13);
}
.recoMeta{
  margin-top: 6px;
  color: var(--dim);
  font-size: var(--fs-b-12);
  line-height: 1.45;
  white-space: pre-line;
}
.recoList{
  margin-top: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.recoFoldWrap{margin-top: 10px}
.recoFoldTitle{
  margin-top: 2px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  font-size: var(--fs-b-12);
}
.details.recoFold{margin-top: 10px}
.details.recoFold > summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.82);
}
.details.recoFold > summary::after{
  content: "▸";
  font-family: var(--mono);
  color: rgba(255,255,255,.68);
}
.details.recoFold[open] > summary::after{content:"▾"}
.recoItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(246,249,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  flex-wrap: wrap;
}
.recoItem:hover{border-color: rgba(255,255,255,.22)}
.recoItem:focus{outline: none}
.recoItem:focus-visible{
  border-color: rgba(246,249,255,.28);
  box-shadow: 0 0 0 4px rgba(90,74,149,.18);
}
.recoItem.selected{
  border-color: rgba(255,255,255,.22);
  background: var(--good);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(30,181,130,.14);
}
.recoItem.ideal{
  border-color: rgba(30,181,130,.65);
  box-shadow: 0 0 0 4px rgba(30,181,130,.10);
}
.recoItem.exceed{
  border-color: rgba(247,182,36,.75);
  box-shadow: 0 0 0 4px rgba(247,182,36,.10);
}
.recoItem.short{
  border-color: rgba(255,107,107,.78);
  box-shadow: 0 0 0 4px rgba(255,107,107,.12);
}
.recoItem .nm{font-weight:800; font-size: var(--fs-b-12); flex: 1 1 220px; min-width: 0}
.recoItem .spec{font-family: var(--mono); font-size: var(--fs-b-12); font-weight:800; color:#fff; white-space:nowrap; flex: 0 0 auto}
.recoItem.selected .spec{color:#fff}

/* Narrow / big-font screens (e.g. Flip): let P • W move to a second line instead of overflowing. */
@media (max-width: 460px){
  .recoItem{
    align-items: flex-start;
  }
  .recoItem .spec{
    flex: 1 1 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-top: 2px;
  }
}
.recoItem.selectedB{
  border-color: rgba(255, 207, 90, .55);
  background: linear-gradient(180deg, rgba(255, 207, 90, .08), rgba(5,16,61,.72));
}

/* Sidebar spacing after style info box */
.sidebar #styleInfo + .split{margin-top: 14px}
.sliderTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width: 0;
}
/* Let the label column shrink so % pills stay on-screen on narrow viewports */
.sliderTop > div:first-child{
  min-width: 0;
  flex: 1 1 auto;
}
.sliderTop .val,
.sliderTop .val.valPct{
  flex: 0 1 auto;
  min-width: 0;
}
.label{font-weight:700; font-size: var(--fs-b-13)}
.desc{color: var(--dim); font-size: var(--fs-b-12); margin-top: 2px}
.slider .label,
.slider .desc{
  overflow-wrap: anywhere;
}
.val{
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  white-space:nowrap;
}
/* Editable % next to sliders: type a value or use the range; focus selects all for quick replace */
.val.valPct{
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 6px 4px 10px;
  max-width: min(100%, 9.5rem);
}
.val.valPct .sliderValIn{
  flex: 1 1 auto;
  min-width: 0;
  width: 3.5em;
  max-width: 5.25rem;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  text-align: right;
  padding: 2px 2px 2px 0;
  outline: none;
}
.val.valPct .sliderValIn:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
.val.valPct:focus-within{
  border-color: rgba(246,249,255,.20);
  box-shadow: 0 0 0 4px rgba(90,74,149,.18);
}
.valPctSuffix{
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  opacity: 0.95;
  padding-right: 2px;
}

input[type="range"]{
  width:100%;
  margin: 10px 0 4px;
  accent-color: var(--accent);
}
.scale{
  display:flex;
  justify-content:space-between;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  gap: 6px;
}

.seg{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.segBtn{
  border-radius: 10px;
  box-sizing: border-box;
  min-height: 46px;
  padding: 8px 12px;
  border: 2px solid rgba(167, 120, 255, 0.95);
  background: linear-gradient(180deg, rgba(90,74,149,.55), rgba(10,17,61,.75));
  color: rgba(255,255,255,.96);
  cursor:pointer;
  font-weight: 900;
  font-family: var(--mono);
  /* Segmented controls are not dropdown list chips. */
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .02em;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal; /* allow “Sourdough starter” to wrap */
  box-shadow: 0 0 0 3px rgba(167, 120, 255, 0.14), 0 10px 22px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.segBtn:hover{
  border-color: rgba(75,248,254,.95);
  background: linear-gradient(180deg, rgba(75,248,254,.14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(75,248,254,.12), 0 12px 26px rgba(0,0,0,.28);
}
.segBtn.active{
  border-color: rgba(30, 181, 130, 0.96);
  background: rgba(30, 181, 130, 0.22);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(30, 181, 130, 0.16), 0 14px 30px rgba(0,0,0,.28);
}

/* Yeast type has 4 options */
#yeastModeSeg.seg{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#yeastModeSeg .segBtn[data-value="Sourdough"]{
  grid-column: 1 / -1;
  min-height: 52px;
  letter-spacing: .01em;
}

/* Yeast type: its own neon palette (distinct from other chips) */
#yeastModeSeg .segBtn{
  border-color: rgba(255, 251, 128, 0.95); /* neon lemon */
  background: linear-gradient(180deg, rgba(255, 251, 128, .14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 3px rgba(255, 251, 128, 0.12), 0 10px 22px rgba(0,0,0,.25);
}
#yeastModeSeg .segBtn:hover{
  border-color: rgba(48, 255, 214, 0.95); /* mint neon */
  background: linear-gradient(180deg, rgba(48, 255, 214, .14), rgba(10,17,61,.78));
  box-shadow: 0 0 0 4px rgba(48, 255, 214, 0.12), 0 12px 26px rgba(0,0,0,.28);
}
#yeastModeSeg .segBtn.active{
  border-color: rgba(255, 176, 42, 0.98); /* neon amber */
  background: rgba(255, 176, 42, 0.18);
  color:#fff;
  box-shadow: 0 0 0 4px rgba(255, 176, 42, 0.14), 0 14px 30px rgba(0,0,0,.28);
}

.table{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px 12px;
  align-items:center;
  margin-top: 8px;
}
.th{
  color: var(--dim);
  font-size: var(--fs-b-12);
  font-weight: 700;
  font-family: var(--mono);
}
.tdName{
  font-weight: 700;
}
.tdSub{
  color: var(--dim);
  font-size: var(--fs-b-12);
  margin-top: 2px;
}
.tdRight{
  text-align:right;
  font-family: var(--mono);
  font-weight: 700;
}
.hr{
  grid-column: 1 / -1;
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 2px 0;
}

.timeline{display:none}
.step{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 12px;
}
.badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 900;
}
.badgeIcon{font-size: var(--fs-b-14)}
.step h3{
  margin:0;
  font-size: var(--fs-h-14);
}
.step p{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-b-12);
  line-height: 1.4;
  white-space: pre-line;
}
.stepLine{margin-top: 8px; font-weight: 650; line-height: 1.55}
.stepLine:first-child{margin-top: 0}
.stepLineTitle{font-weight: 850; color: rgba(255,255,255,.92)}
.step .time{
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 650;
  line-height: 1.35;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}
/* Dough timeline: compact summary above step cards (no duplicate hero ferment prose). */
.doughTimelineSummary{
  margin: 2px 2px 10px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120, 252, 255, 0.22);
  background: linear-gradient(180deg, rgba(14, 22, 68, 0.55), rgba(6, 10, 40, 0.72));
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.12) inset,
    0 0 12px rgba(75, 248, 254, 0.12);
}
.doughTimelineSummaryLine{
  font-size: var(--fs-b-13);
  line-height: 1.45;
  color: rgba(255, 251, 248, 0.92);
  font-weight: 650;
}
.doughTimelineSummaryLine + .doughTimelineSummaryLine{
  margin-top: 6px;
  font-weight: 500;
  color: rgba(255, 251, 248, 0.82);
  font-size: var(--fs-b-12);
}

/* §8 Dough timeline: wall-clock / duration chips */
#timeline.stepper .step .time{
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 252, 255, 0.55);
  background: linear-gradient(180deg, rgba(14, 22, 68, 0.92), rgba(6, 10, 40, 0.96));
  color: rgba(255, 251, 128, 0.98);
  font-size: var(--fs-b-12);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-shadow:
    0 0 10px rgba(75, 248, 254, 0.45),
    0 0 20px rgba(255, 251, 128, 0.22);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.18) inset,
    0 0 8px rgba(75, 248, 254, 0.22),
    0 0 22px rgba(255, 251, 128, 0.12);
}

.details{
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(0,0,0,.12);
  padding: 10px 12px;
}
.details > summary{
  cursor:pointer;
  font-weight: 700;
  color: var(--muted);
}
.detailsBody{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Advanced target total + rounding: remain in DOM for state/URL; not shown in main UI. */
.details.detailsAdvancedDoughOverrides{
  display: none !important;
}

.footer{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.fine{color: var(--dim); font-size: var(--fs-b-12)}

.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 700;
  font-size: var(--fs-b-13);
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ---------------------------
   Knowledge page
---------------------------- */

.knowledgeMain .knowledgeSectionTitle{
  white-space: normal;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* Bump the "The Pizza Style Codex" heading 2pt over the default `.sectionLabel`
 * size so the page title reads bigger than other section labels in the app. */
.knowledgeMain .knowledgeSectionTitle .sectionLabel{
  font-size: calc(var(--fs-h-14) + 2pt);
}
.knowledgeMain > .mainCard > .cardHeader{
  margin-bottom: 8px;
}
.knowledgeMain .sectionHead{
  margin-bottom: 12px;
}
.knowledgeMain .sectionHead .knowledgeIntroFine{
  /* Tagline beneath "The Pizza Style Codex" heading.
   * Per-page overrides on top of `.fine`:
   *   - Pulled 5px closer to the heading (18px → 13px) so it reads as one block.
   *   - White (was `--dim`) so it stands out against the dark card.
   *   - 1pt larger than the global fine size for a bit more presence. */
  margin-top: 13px;
  color: #fff;
  font-size: calc(var(--fs-b-12) + 1pt);
}

/* Knowledge: same sticky group headings + solid card as Flours (backdrop-filter breaks sticky in Chromium). */
.knowledgeMain > .mainCard.card{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(16, 21, 61, 0.94), rgba(8, 16, 58, 0.88));
}
/* `transform` on `.card:hover` creates a sticky containing block — section heads would not stick to the viewport. */
.knowledgeMain > .mainCard.card:hover{
  transform: none;
}
.knowledgeMain .knowledgeRoot{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 22px;
  overflow-anchor: none;
}

/* Styles page: quick jump chips — in-flow row sits in the toolbar; `knowledge.js` toggles `.knowledgeQuickChips--dock`
 * (position:fixed) when scrolled, and only then sets `--pdc-sticky-knowledge-quick-chips-slot` so section heads stack under the bar. */
.knowledgeMain:not(.floursPage) .knowledgeQuickChipsTrack{
  margin-top: 10px;
  width: 100%;
  align-self: stretch;
  min-height: 0;
  /* Spacer can sit tall while chips are `position: fixed`; keep the empty band from stealing taps. */
  pointer-events: none;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips{
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips.knowledgeQuickChips--dock{
  position: fixed;
  left: var(--pdc-knowledgeDockLeft, 0px);
  width: var(--pdc-knowledgeDockWidth, 100%);
  max-width: 100vw;
  top: calc(var(--pdc-sticky-nav-offset, 56px) + env(safe-area-inset-top, 0px) + var(--pdc-sticky-heading-gap, 10px));
  z-index: 90;
  margin: 0;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, rgba(32, 22, 62, 0.98), rgba(14, 12, 38, 0.97));
  border-bottom: 1px solid rgba(120, 90, 200, 0.55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  /* Let taps pass through padding / empty flex space to cards scrolling underneath. */
  pointer-events: none;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips.knowledgeQuickChips--dock .chip{
  pointer-events: auto;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip{
  font-family: var(--arcade);
  text-transform: uppercase;
  letter-spacing: .10em;
  /* Don’t let big fonts/labels overflow the card — wrap + shrink a touch if needed */
  white-space: normal;
  line-height: 1.1;
  height: auto;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
  /* Prefer “wider chip” on roomy screens, but allow wrap when tight */
  flex: 1 1 132px;
  min-width: 0;
  font-size: clamp(var(--fs-b-9), calc(6px + 1.15vw), var(--fs-b-12));
}
.knowledgeMain .kSection{
  margin: 0;
  width: 100%;
  min-width: 0;
}
/* Pizza Styles: leave room for sticky nav + optional sticky quick-chips row when scrolling to a section. */
.knowledgeMain:not(.floursPage) .kSection{
  scroll-margin-top: calc(
    env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + var(--pdc-sticky-heading-gap, 10px) +
      var(--pdc-sticky-knowledge-quick-chips-slot, 0px) + 14px
  );
}
.knowledgeMain.floursPage .kSection{
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + var(--pdc-sticky-heading-gap, 10px) + 14px);
}
.knowledgeMain:not(.floursPage) .kSection .kSectionHead{
  position: -webkit-sticky;
  position: sticky;
  top: calc(
    var(--pdc-sticky-nav-offset, 56px) + env(safe-area-inset-top, 0px) + var(--pdc-sticky-heading-gap, 10px) +
      var(--pdc-sticky-knowledge-quick-chips-slot, 0px)
  );
  z-index: 40;
  background: linear-gradient(180deg, rgba(32, 22, 62, 0.98), rgba(14, 12, 38, 0.97));
  border-color: rgba(120, 90, 200, 0.95);
  box-shadow:
    0 0 0 4px rgba(40, 28, 72, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.knowledgeMain .kSection .kGrid{
  margin-top: 2px;
}

.knowledgeStyleToolbar{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 18px;
}
.knowledgeStyleToolbarTop{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  width: 100%;
}
.knowledgeStyleToolbarTop .knowledgeStyleDropdownWrap{
  flex: 1 1 220px;
  min-width: 0;
  width: auto;
}
.knowledgeStyleDropdownWrap{
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
/* Use the toolbar’s flex lane (grow with `.knowledgeStyleToolbarTop`) — avoids a tall, max-content-only strip beside the toggle. */
.knowledgeStyleDropdownWrap .menuSelect{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.knowledgeStyleDropdownWrap .menuBtn{
  width: 100%;
  max-width: 100%;
}
/*
 * Styles page: `.menuSelect` normally establishes its own CQ width (narrower than the page), which made
 * dropdown pizza names a different size than card titles. Drop the inner container so rows resolve `cqi`
 * against `main.knowledgeMain` (see `knowledgeStylesPage` above).
 */
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap .menuSelect{
  container-type: normal;
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap .menuPanel .menuItem{
  font-size: calc(clamp(14px, 5px + 2.2cqi, 20px) + var(--type-bump-chip));
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap .menuPanel .menuItem .menuItemSub{
  /* +1pt over the previous responsive range so the one-line style descriptions
   * read more comfortably under each picker row. Both ends of the clamp are
   * shifted by 1pt to preserve the container-query scaling behaviour. */
  font-size: clamp(calc(var(--fs-b-9) + 1pt), calc(3px + 1.1cqi + 1pt), calc(var(--fs-b-11) + 1pt));
}
/* Anchor like the dashboard: panel spans the picker width (`menuPanel` default left/right). */
.knowledgeStyleSearchField{
  margin-top: 0;
}

/* Search rows: one bordered “in-box” field — text + clear (touch-friendly — search-field-clear.js) */
.field.pdcSearchField{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(246, 249, 255, 0.12);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.78), rgba(5, 16, 61, 0.78));
  overflow: hidden;
}
.field.pdcSearchField:focus-within{
  border-color: rgba(246, 249, 255, 0.2);
  box-shadow: 0 0 0 4px rgba(90, 74, 149, 0.18);
}
.field.pdcSearchField input.pdcSearchClearInput{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 10px 4px 10px 10px;
}
.field.pdcSearchField input[type="search"]::-webkit-search-cancel-button,
.field.pdcSearchField input[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
  appearance: none;
}
.field.pdcSearchField .pdcSearchClear{
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 4px 6px 4px 0;
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--fs-b-18);
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}
.field.pdcSearchField .pdcSearchClear:hover{
  background: rgba(228, 49, 115, 0.3);
  border-color: rgba(228, 49, 115, 0.55);
}
.field.pdcSearchField .pdcSearchClear:active{
  transform: scale(0.96);
}
.field.pdcSearchField .pdcSearchClear[hidden]{
  display: none !important;
}

.kSearchEmpty{
  padding: 16px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
.kSearchEmptyText{
  margin: 0;
  max-width: min(56ch, 100%);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.knowledgeRoot{
  display: grid;
  gap: 22px;
  overflow-anchor: none;
}

.kFlourContextBar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 214, 80, 0.1);
  border: 1px solid rgba(255, 215, 100, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 214, 80, 0.08);
}
.kFlourContextBarText{
  margin: 0;
  font-size: var(--fs-b-13);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  max-width: min(60ch, 100%);
}
.kFlourContextBarText--warn{
  color: rgba(255, 220, 200, 0.95);
}

.kFlourFilterBar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(87, 63, 151, 0.22);
  border: 1px solid rgba(130, 110, 200, 0.45);
  box-shadow: 0 0 0 3px rgba(87, 63, 151, 0.1);
}
.kFlourFilterBarText{
  margin: 0;
  font-size: var(--fs-b-13);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
  max-width: min(56ch, 100%);
}
a.kFlourFilterClear{
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.kFlourFilterEmpty{
  padding: 20px 16px;
  text-align: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
.kFlourFilterEmptyText{
  margin: 0 0 14px;
  font-size: var(--fs-b-14);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.kSectionHead{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  /* Same purple family as .kChip--country */
  background: linear-gradient(180deg, rgba(87,63,151,.52), rgba(87,63,151,.34));
  border: 1px solid rgba(87,63,151,.92);
  box-shadow: 0 0 0 4px rgba(87,63,151,.14);
}

.kSectionHead .h3{
  font-family: var(--arcade);
  font-size: var(--fs-h-16);
  line-height: 1.15;
  color: #fffb80;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}

.kSectionHead .h3 + *{
  font-family: var(--arcade);
}

.kGrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.kCard{
  grid-column: span 12;
  border: 3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* Makes double-tap on the card usable for flip without the browser treating it as page zoom */
  touch-action: manipulation;
}

/* Category (top-left) + BAKE ME (bottom-right) on the shot. Flip stays on .kCard top-right (z-index 6). */
.kShotStack{
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}
.kShotStack > .kShot{
  position: relative;
  z-index: 0;
  pointer-events: auto;
}
.kShotStack > .kShotCountry.kShotCountry--shotFloat{
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: auto;
  right: auto;
  z-index: 4;
  /* Nearly full card width — chip is row 1 left; lets long names stay one line */
  max-width: calc(100% - 24px);
  min-width: 0;
  pointer-events: auto;
}
.kShotStack > .kChooseBtn.kChooseBtnShotFloat{
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  left: auto;
  z-index: 4;
  pointer-events: auto;
  box-sizing: border-box;
  border: 3px solid rgba(228, 49, 115, 0.96);
  box-shadow: 0 0 0 4px rgba(228, 49, 115, 0.14);
}
.kShotStack > .kChooseBtn.kChooseBtnShotFloat:hover{
  border-color: rgba(228, 49, 115, 0.98);
}
.kShotStack > .kChooseBtn.kChooseBtnShotFloat:active{
  border-color: rgba(228, 49, 115, 0.98);
}

/* `.kShotStack` sets `pointer-events: none` so flip/zoom gestures stay predictable; only
 * explicit `auto` layers receive taps. The `>` rules above miss if markup wraps the CTA,
 * which makes clicks fall through to the hero (Pizza Styles: opens the image lightbox
 * instead of `./index.html`). Descendant rule keeps USE ME / BAKE ME / TRY IT tappable. */
.kShotStack .kChooseBtn.kChooseBtnShotFloat{
  pointer-events: auto;
}

/* --- Knowledge card flip (front = shot + body; back = prep guide) --- */
.kFlipBtn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid rgba(120, 252, 255, 0.72);
  background: #070b29;
  color: rgba(255,255,255,.95);
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 251, 128, 0.35) inset,
    0 0 6px rgba(75, 248, 254, 0.42),
    0 0 14px rgba(255, 251, 128, 0.28),
    0 0 22px rgba(75, 248, 254, 0.22);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease,
    filter 0.15s ease;
}

.kFlipBtn:hover{
  border-color: rgba(165, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 253, 160, 0.45) inset,
    0 0 10px rgba(75, 248, 254, 0.55),
    0 0 20px rgba(255, 251, 128, 0.42),
    0 0 34px rgba(75, 248, 254, 0.28);
  filter: brightness(1.06);
}

.kFlipBtn:active{
  transform: translateY(1px);
  border-color: rgba(120, 252, 255, 0.88);
  box-shadow:
    0 0 0 1px rgba(255, 251, 140, 0.38) inset,
    0 0 12px rgba(75, 248, 254, 0.5),
    0 0 24px rgba(255, 251, 128, 0.38);
}

.kFlipBtn:focus-visible{
  outline: 2px solid rgba(255,251,140,.92);
  outline-offset: 3px;
  border-color: rgba(190, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(255, 253, 180, 0.5) inset,
    0 0 12px rgba(75, 248, 254, 0.6),
    0 0 26px rgba(255, 251, 128, 0.45),
    0 0 0 3px rgba(12,14,36,.92);
}

.kFlipBtnIcon{
  position: absolute;
  inset: 0;
  display: flex;
  line-height: 0;
  align-items: stretch;
  justify-content: stretch;
}
.kFlipBtnImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.kCardFlip{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  perspective: 1100px;
}

.kCardFlipInner{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.kCard--flipped .kCardFlipInner{
  transform: rotateY(180deg);
}

/* Category + BAKE ME: front of card only — hide when flipped (no bleed / mirror in 3D). */
.kCard--flipped .kShotStack > .kShotCountry.kShotCountry--shotFloat,
.kCard--flipped .kShotStack > .kChooseBtn.kChooseBtnShotFloat{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.kCardFace--front{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.kCardFace--front .kBody{
  flex: 1 1 auto;
}

.kCardFace--back{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(165deg, rgba(12,10,24,.94), rgba(20,16,40,.88));
  border-top: 1px solid rgba(255,255,255,.08);
}
/* Prep back sits in the stacking tree above the front; don’t swallow BAKE ME / photo taps when the card isn’t flipped. */
.kCard:not(.kCard--flipped) .kCardFace--back{
  pointer-events: none;
  /* Some WebKit builds still hit-test the absolute back layer; tuck it behind the front in 2D order. */
  z-index: -1;
}
.kCard.kCard--flipped .kCardFace--front{
  pointer-events: none;
}

.kPrepOuter{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kPrepScroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 16px;
}

.kPrepBackHead{
  margin-bottom: 12px;
}

.kPrepBackTitle{
  font-family: var(--arcade);
  font-size: var(--fs-h-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fffb80;
  margin-bottom: 4px;
}

.kPrepBackSub{
  font-weight: 800;
  font-size: var(--fs-h-15);
  line-height: 1.25;
  opacity: 0.95;
}

.kPrepIntro{
  font-size: var(--fs-b-13);
  line-height: 1.45;
  opacity: 0.88;
  margin-bottom: 14px;
}

.kPrepPara{
  margin: 0 0 12px;
  font-size: var(--fs-b-13);
  line-height: 1.5;
  opacity: 0.9;
}

.kPrepSecLead{
  margin-top: -4px;
  margin-bottom: 10px;
}

.kPrepList--numbered{
  list-style: decimal;
  padding-left: 1.35em;
}

.kPrepSection--equipment .kPrepList{
  opacity: 0.92;
}

.kPrepSection{
  margin-bottom: 14px;
}

.kPrepSecTitle{
  font-family: var(--arcade);
  font-size: var(--fs-h-10);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(132,255,95,.95);
  margin: 0 0 6px;
  font-weight: 400;
}

.kPrepList{
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-b-13);
  line-height: 1.4;
  opacity: 0.9;
}

.kPrepList li{
  margin-bottom: 6px;
}

.kPrepList li:last-child{
  margin-bottom: 0;
}

.kPrepNote{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-b-12);
  line-height: 1.35;
  opacity: 0.72;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce){
  .kCardFlipInner{
    transition-duration: 0.01ms;
  }
}

/* Per-region 8-bit borders (knowledge cards) — hues align with chip strip colours */
.kCard--region-italian{
  border-color: rgba(87,63,151,.95);
  box-shadow: 0 0 0 3px rgba(87,63,151,.18);
}

.kCard--region-american{
  border-color: rgba(75,248,254,.95);
  box-shadow: 0 0 0 3px rgba(75,248,254,.12);
}

.kCard--region-bake-ready-plans{
  border-color: rgba(242,176,42,.95);
  box-shadow: 0 0 0 3px rgba(242,176,42,.14);
}
.kCard--region-bake-ready-plans .kShotCountry{
  display: none !important;
}

.kCard--region-other{
  border-color: rgba(132,255,95,.92);
  box-shadow: 0 0 0 3px rgba(132,255,95,.12);
}

.kCard--region-flatbreads{
  border-color: rgba(255,148,77,.95);
  box-shadow: 0 0 0 3px rgba(255,148,77,.12);
}

/* Eat-plan spotlight — same gold family as bake-ready plans, without hiding the hero chip */
.kCard--eatPlanPromo{
  border-color: rgba(242,176,42,.95);
  /* Allow outer glow past default .kCard overflow (otherwise shadows clip). */
  overflow: visible;
  z-index: 1;
  isolation: isolate;
  box-shadow:
    0 0 0 3px rgba(242, 176, 42, 0.16),
    0 0 28px rgba(242, 176, 42, 0.35),
    0 0 56px rgba(255, 210, 120, 0.18),
    0 0 80px rgba(75, 248, 254, 0.08);
}
/* Match card radius so hero/body corners stay tidy without .kCard overflow clipping */
.kCard--eatPlanPromo .kShotStack > .kShot{
  border-radius: 13px 13px 0 0;
  overflow: hidden;
}
.kCard--eatPlanPromo .kCardFace--front .kBody{
  border-radius: 0 0 13px 13px;
}
/* Compact row layout: keep card clipping (row face + thumb column); glow may be slightly softer at edges */
.knowledgeMain.knowledgeMain--compactRows .kCard--eatPlanPromo{
  overflow: hidden;
  z-index: auto;
}
.knowledgeMain.knowledgeMain--compactRows .kCard--eatPlanPromo .kShotStack > .kShot{
  border-radius: 0;
  overflow: visible;
}
.knowledgeMain.knowledgeMain--compactRows .kCard--eatPlanPromo .kCardFace--front .kBody{
  border-radius: 0;
}

@media (min-width: 820px){
  .kCard{grid-column: span 6;}
}

@media (min-width: 1100px){
  .kCard{grid-column: span 4;}
}

/* Knowledge Styles: compact horizontal cards — one full-width column at all breakpoints. */
@media (min-width: 820px){
  .knowledgeMain.knowledgeMain--compactRows .kCard{grid-column: span 12;}
}
@media (min-width: 1100px){
  .knowledgeMain.knowledgeMain--compactRows .kCard{grid-column: span 12;}
}

.kShot{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  position: relative;
}

.kShotCountry{
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 24px);
  min-width: 0;
}

/* Purple brand / group chip — one line, grows with content up to wrapper max-width */
.kShotCountry .kChip--country{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero shot: thicker stroke + outer ring (same recipe as body .kChip--*). */
.kShotStack > .kShotCountry .kChip.kChip--country{
  border: 3px solid rgba(87, 63, 151, 0.96);
  box-shadow: 0 0 0 4px rgba(87, 63, 151, 0.14), 0 2px 10px rgba(0, 0, 0, 0.28);
}

.kShotImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.knowledgeMain:not(.floursPage) .kShotImg.kShotImg--enlargeable{
  cursor: zoom-in;
}

/* Pizza Styles: tap style shot → full-width preview overlay */
.knowledgeImageLightbox[hidden]{
  display: none !important;
}
.knowledgeImageLightbox:not([hidden]){
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 12px)
    max(12px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}
.knowledgeImageLightboxBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 35, 0.86);
  cursor: pointer;
}
.knowledgeImageLightboxPanel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.knowledgeImageLightboxStage{
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
}
.knowledgeImageLightboxImg{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(82vh, calc(100vh - 120px));
  max-height: min(82dvh, calc(100dvh - env(safe-area-inset-top, 0px) - var(--pdc-sticky-nav-offset, 56px) - 120px), 920px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(75, 248, 254, 0.18);
  box-sizing: border-box;
}
/* Float the same two hero controls as the card: region chip (top-left) + BAKE ME / TRY IT (bottom-right). */
.knowledgeImageLightboxFloats{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
}
.knowledgeImageLightboxFloats .knowledgeImageLightboxStyleName--onShot{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  /* Sit above the enlarged shot-float BAKE ME / TRY IT (~68px + margin). */
  bottom: 96px;
  box-sizing: border-box;
  padding: 0 12px;
  text-align: center;
  pointer-events: none;
  font-family: var(--arcade);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(20px, 5.2vw, 26px);
  line-height: 1.25;
  color: #fffb80;
  text-shadow:
    0 0 14px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kShotCountry.kShotCountry--shotFloat{
  position: absolute;
  top: 16px;
  left: 16px;
  bottom: auto;
  right: auto;
  z-index: 3;
  max-width: calc(100% - 32px);
  min-width: 0;
  pointer-events: auto;
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kShotCountry .kChip.kChip--country{
  min-height: 64px;
  height: 64px;
  padding: 0 22px;
  border-radius: 20px;
  font-size: calc(2 * var(--fs-h-9));
  letter-spacing: 0.06em;
  border: 6px solid rgba(87, 63, 151, 0.96);
  box-shadow: 0 0 0 8px rgba(87, 63, 151, 0.14), 0 4px 18px rgba(0, 0, 0, 0.32);
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake{
  position: absolute;
  bottom: 16px;
  right: 16px;
  top: auto;
  left: auto;
  z-index: 3;
  pointer-events: auto;
  box-sizing: border-box;
  min-height: 68px;
  height: 68px;
  padding: 0 20px;
  border-radius: 20px;
  border: 6px solid rgba(228, 49, 115, 0.96);
  box-shadow: 0 0 0 8px rgba(228, 49, 115, 0.14);
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake .kChooseBtnText{
  font-size: calc(2 * var(--fs-h-9));
  letter-spacing: 0.09em;
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake:hover{
  border-color: rgba(228, 49, 115, 0.98);
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake:active{
  border-color: rgba(228, 49, 115, 0.98);
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake.kChooseBtn--inStock{
  border-color: rgba(132, 255, 95, 0.96);
  box-shadow: 0 0 0 8px rgba(132, 255, 95, 0.14);
}
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake.kChooseBtn--inStock:hover,
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake.kChooseBtn--inStock:active{
  border-color: rgba(132, 255, 95, 0.98);
}
.knowledgeImageLightboxClose{
  position: fixed;
  z-index: 2;
  top: max(10px, calc(6px + env(safe-area-inset-top, 0px)));
  right: max(10px, calc(6px + env(safe-area-inset-right, 0px)));
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(32, 22, 62, 0.96), rgba(14, 12, 38, 0.98));
  color: rgba(246, 249, 255, 0.96);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.knowledgeImageLightboxClose:hover{
  border-color: rgba(75, 248, 254, 0.75);
  color: #fff;
}
html.pdcKnowledgeImageLightboxOpen,
html.pdcKnowledgeImageLightboxOpen body{
  overflow: hidden;
}

/* Knowledge Styles page — compact rows: small square thumb + text body (see #knowledgeLayoutToggle). */
.knowledgeMain.knowledgeMain--compactRows .kCardFace--front{
  flex-direction: row;
  align-items: stretch;
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  flex: 0 0 auto;
  padding: 10px 8px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05));
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack > .kShot{
  width: 100%;
  aspect-ratio: 1;
  max-height: 76px;
  min-height: 0;
  border-bottom: none;
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack > .kShotCountry.kShotCountry--shotFloat{
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: 100%;
  min-width: 0;
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack > .kChooseBtn.kChooseBtnShotFloat{
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: auto;
  min-height: 32px;
  padding: 6px 4px;
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack > .kChooseBtn .kChooseBtnText{
  font-size: var(--fs-b-12);
  letter-spacing: 0.06em;
}
.knowledgeMain.knowledgeMain--compactRows .kShotStack > .kShotCountry .kChip.kChip--country{
  width: 100%;
  max-width: 100%;
  min-height: 26px;
  height: auto;
  padding: 4px 6px;
  font-size: var(--fs-b-11);
  white-space: normal;
  line-height: 1.15;
}
.knowledgeMain.knowledgeMain--compactRows .kBody{
  padding: 12px 12px 14px;
}
.knowledgeMain.knowledgeMain--compactRows .kTitle{
  min-height: 0;
}
.knowledgeMain.knowledgeMain--compactRows .kHint{
  min-height: 0;
}

.kShotMissing .kShotPh{
  padding: 14px;
  text-align: center;
}

.kShotPhTitle{
  font-weight: 800;
  letter-spacing: .2px;
}

.kShotPhSub{
  margin-top: 6px;
  opacity: .72;
  font-size: var(--fs-b-12);
}

.kBody{
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.kBody > *{min-width:0;}

.kHead{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kHead > .kHint{
  margin-top: -14px;
}

.kTitleRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.kTitleRow > .kTitle{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.kTitle{
  font-family: var(--arcade);
  font-weight: 900;
  letter-spacing: .2px;
  color: #fffb80;
  line-height: 1.25;
  /* Reserve two lines so one-line titles don’t pull the italic hint upward vs two-line titles */
  min-height: calc(2 * 1.25em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  text-wrap: nowrap;
}

/*
 * Styles page: uniform pizza names — `cqi` is resolved from `main.knowledgeMain` (`knowledgeStylesPage`), not
 * per-card width (see `.knowledgeStyleDropdownWrap .menuSelect` reset above for the same source in the picker).
 */
.knowledgeMain:not(.floursPage) .kHead{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.knowledgeMain:not(.floursPage) .kTitleRow{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: var(
    --kTitleRowMinHeight,
    calc(
      (
          clamp(14px, 5px + 2.2cqi, 20px) + var(--type-bump-heading, 0pt)
        ) *
        1.18
    )
  );
  align-items: center;
}
.knowledgeMain:not(.floursPage) .knowledgeMain--titleWrap .kTitleRow{
  align-items: flex-start;
}
.knowledgeMain:not(.floursPage) .kTitle{
  /* JS sets `--kTitleFitFontSize` on `main` (page-wide) so every card matches; slot
   * height is `--kTitleRowMinHeight` on `.kTitleRow`. */
  font-size: var(--kTitleFitFontSize, calc(clamp(14px, 5px + 2.2cqi, 20px) + var(--type-bump-heading, 0pt)));
  line-height: 1.18;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Sizes are shrunk to fit — don’t ellipse (reads as “cut off” inside the chrome). */
  text-overflow: clip;
}
.knowledgeMain:not(.floursPage) .kShotMissing .kShotPhTitle{
  font-size: var(--kTitleFitFontSize, calc(clamp(14px, 5px + 2.2cqi, 20px) + var(--type-bump-heading, 0pt)));
  line-height: 1.18;
  max-width: 100%;
  box-sizing: border-box;
}
/* JS adds `knowledgeMain--titleWrap` when the longest name still won't fit at MIN_PX. */
.knowledgeMain:not(.floursPage) .knowledgeMain--titleWrap .kTitle{
  white-space: normal;
  text-wrap: balance;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.knowledgeMain:not(.floursPage) .kHead > .kHint{
  margin-top: 5px;
}

.kBadge{
  font-size: var(--fs-b-12);
  opacity: .85;
  border: 1px solid rgba(255,255,255,.16);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.kChipRow{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.kChip{
  border-radius: 6px;
  padding: 6px 8px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
  font-weight: 900;
  font-size: var(--fs-b-12);
  line-height: 1.1;
  letter-spacing: .02em;
}

/* Knowledge style cards: 2 chips per row + uniform chip boxes */
.knowledgeMain .kCard .kChipRow{
  margin-top: -18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.knowledgeMain .kCard .kChipRow > .kChip{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 34px;
}

.kChip--country{
  background: rgba(87,63,151,.80);
  border-color: rgba(87,63,151,.95);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.kChip--flour{
  background: rgba(75,248,254,.18);
  border-color: rgba(75,248,254,.95);
  box-shadow: 0 0 0 4px rgba(75,248,254,.12);
}

.kChip--hydr{
  background: rgba(242,176,42,.16);
  border-color: rgba(242,176,42,.92);
  box-shadow: 0 0 0 4px rgba(242,176,42,.12);
}

.kChip--bake{
  background: rgba(228,49,115,.16);
  border-color: rgba(228,49,115,.92);
  box-shadow: 0 0 0 4px rgba(228,49,115,.12);
}

/* Lime / chartreuse — complements magenta bake + cyan flour on the wheel */
.kChip--surface{
  background: rgba(132, 255, 95, .14);
  border-color: rgba(132, 255, 95, .92);
  box-shadow: 0 0 0 4px rgba(132, 255, 95, .10);
  color: rgba(255, 255, 255, .98);
}

.kHint{
  opacity: .85;
  font-size: var(--fs-b-14);
  font-style: italic;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 0;
  /* Two lines so chip rows line up when some hints wrap */
  min-height: calc(2 * 1.35em);
}

.kHint--empty{
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.kBlockTitle{
  font-weight: 800;
  margin-bottom: 6px;
}

.kBlockHist{
  margin-top: -15px;
  border: 2px solid rgba(255,255,255,.90);
  border-radius: 12px;
  padding: 10px 10px 12px;
  background: rgba(255,255,255,.03);
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}

.kBlockTitleHist{
  font-family: var(--arcade);
  color: #fffb80;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--fs-b-12);
  margin-bottom: 8px;
}

.kText{
  opacity: .88;
  line-height: 1.35;
}

.kTextDesc{
  font-size: calc(var(--fs-b-12) - 0.5pt);
  line-height: 1.35;
  /* Exactly 3 lines of layout: short text leaves blank line; long text truncates with ellipsis */
  min-height: calc(1.35em * 3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kTextHist{
  font-size: calc(var(--fs-b-12) - 0.5pt) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kUse{
  margin: 0;
  padding-left: 18px;
  opacity: .88;
  line-height: 1.35;
  font-size: var(--fs-b-13);
}

.kBlock--useCases > .kBlockTitle{
  font-size: calc(1em - 1pt);
}
.kBlock--useCases .kUse{
  font-size: calc(13px - 1pt);
}

.kChooseBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 2px solid rgba(228,49,115,.92);
  background: rgba(228,49,115,.80);
  box-shadow: 0 0 0 4px rgba(228,49,115,.12);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
/* Codex CTAs use `<button>` when not linking — match anchor chrome (Safari/iOS defaults). */
button.kChooseBtn{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  margin: 0;
}

.kChooseBtn:hover{
  background: rgba(228,49,115,.22);
  border-color: rgba(228,49,115,.95);
}

.kChooseBtn:active{
  transform: translateY(1px);
  background: rgba(228,49,115,.92); /* full background = border colour while pressed */
}

.kChooseBtnText{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Legacy: overlays on hero shot (unused on knowledge cards after top bar move) */
.kChooseBtnOverlay{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}

/* Knowledge page should be full-width (no sidebar column). */
main.knowledgeMain.grid{
  grid-template-columns: 1fr;
}
/* Styles page only: `cqi` for card titles + picker — lives on the card, not `main`, so `main` doesn’t establish
 * containment that traps `position: fixed` descendants (docked quick chips) in some engines. */
html.pdcPizzaStylesCodex main.knowledgeMain.grid > section.card.mainCard{
  container-type: inline-size;
  container-name: knowledgeStylesPage;
}

/* ---------------------------
   Flours page
---------------------------- */

.floursToolbar{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}
.floursToolbarBlock{
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px 12px;
  background: rgba(0, 0, 0, 0.12);
}
/* Mobile virtual keyboard: keep “Find” (search + style row) clear of the nav + keyboard overlap. */
.floursPage .floursToolbarBlock--find{
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + var(--pdc-sticky-heading-gap, 10px) + 12px);
}
.floursToolbarBlockHead{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.88);
  margin: 0 0 8px;
  line-height: 1.2;
}
.floursToolbarBlockBody{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floursSortOnlyRow{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px 12px;
}
.floursSortOnlyRow .floursSortLabel{
  flex: 0 0 auto;
  align-self: center;
}
.floursSortOnlyRow .floursSelectField{
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
}
.floursActiveSummary{
  margin: 0 0 18px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(75, 248, 254, 0.06);
  font-size: var(--fs-b-12);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.floursActiveSummary strong{
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
}
.floursActiveSummary .floursActiveSep{
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0.35em;
  font-weight: 400;
}
.floursActiveSummary .floursActiveAction{
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: rgba(120, 200, 255, 0.95);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.floursActiveSummary .floursActiveAction:hover{
  color: rgba(180, 230, 255, 1);
}
.floursActiveSummary .floursActiveActions{
  display: block;
  margin-top: 6px;
  font-size: var(--fs-b-11);
}
.floursActiveSummary .floursActiveActions .floursActiveAction + .floursActiveAction{
  margin-left: 12px;
}
.floursSearchField.pdcSearchField{
  max-width: 520px;
}
.floursSearchField.pdcSearchField input.pdcSearchClearInput{
  width: auto;
}
.floursToolbarRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.floursSelectField{
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  box-sizing: border-box;
}
.floursSelectField:focus-within{
  border-color: rgba(246, 249, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(90, 74, 149, 0.14);
}
.floursSelectField .floursSelect{
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  margin: 0;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.floursSelectField .floursSelectClear{
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-b-16);
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
}
.floursSelectField .floursSelectClear:hover{
  background: rgba(228, 49, 115, 0.28);
  color: rgba(255, 255, 255, 0.98);
}
.floursSelectField .floursSelectClear:active{
  transform: scale(0.96);
}
.floursSelectField .floursSelectClear[hidden]{
  display: none !important;
}
.floursSortLabel{
  font-size: var(--fs-b-12);
  color: rgba(255,255,255,.75);
  margin: 0;
}
.floursSelect{
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--text);
  min-width: min(280px, 100%);
}
.flourFilterChips{ display: flex; flex-wrap: wrap; gap: 8px; }

/* Toolbar chips on Flours: match Knowledge .kChip brightness (2px border + glow) */
.floursPage .flourFilterChips .chip{
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  font-size: var(--fs-b-12);
  line-height: 1.1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.floursPage .flourFilterChips .chip:hover{
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(101, 87, 255, 0.1);
}
.floursPage .flourFilterChips .chip.isActive{
  background: rgba(120, 90, 200, 0.35);
  border-color: rgba(167, 120, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(167, 120, 255, 0.2);
}
.flourListRoot{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Flex + default stretch can prevent descendant `position: sticky` from engaging in some engines. */
.floursPage .flourListRoot{
  align-items: flex-start;
  width: 100%;
}
/* `backdrop-filter` on `.card` creates a containing layer in Chromium and breaks sticky for headings inside the card. */
.floursPage > .mainCard.card{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(16, 21, 61, 0.94), rgba(8, 16, 58, 0.88));
}
.floursPage > .mainCard.card:hover{
  transform: none;
}
.floursPage .flourSection{
  margin: 0;
  width: 100%;
  min-width: 0;
}
/* Sticky brand bar: each heading sticks below the site nav until its section scrolls away, then the next brand’s bar takes over. */
.floursPage .flourSection .kSectionHead{
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--pdc-sticky-nav-offset, 56px) + env(safe-area-inset-top, 0px) + var(--pdc-sticky-heading-gap, 10px));
  z-index: 40;
  /* Darker than default `.kSectionHead` so scrolling cards don’t read through the bar. */
  background: linear-gradient(180deg, rgba(32, 22, 62, 0.98), rgba(14, 12, 38, 0.97));
  border-color: rgba(120, 90, 200, 0.95);
  box-shadow:
    0 0 0 4px rgba(40, 28, 72, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.floursPage .flourSection .kGrid{
  margin-top: 2px;
}
/* Brand headings: collapsible (see `appendBrandSection` in flours.js) */
.floursPage .flourBrandDetails{
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.floursPage .flourBrandDetails > summary.flourBrandSummary{
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.floursPage .flourBrandDetails > summary.flourBrandSummary::-webkit-details-marker{
  display: none;
}
.floursPage .flourBrandDetails > summary.flourBrandSummary::marker{
  content: "";
}
.floursPage .flourBrandDetails > summary.flourBrandSummary::before{
  content: "▾";
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 251, 128, 0.9);
  margin-right: 2px;
  transform: translateY(1px);
  transition: transform 0.15s ease;
}
.floursPage .flourBrandDetails:not([open]) > summary.flourBrandSummary::before{
  transform: translateY(1px) rotate(-90deg);
}
/* Flours: reuse Knowledge `.kCard` + shot stack; Bread flour cards are front-only (see `flours.js`). */
.kCard.fCardFlour{
  min-width: 0;
}
/* In the catalogue grid, stretch cards in each row so `.fCardFlourInfoChips` can share one vertical depth. */
.floursPage .kGrid.flourGrid{
  align-items: stretch;
}
.floursPage .kGrid.flourGrid > .kCard.fCardFlour{
  height: 100%;
  align-self: stretch;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .kCardFlipInner{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .kCardFace--front{
  flex: 1 1 auto;
  min-height: 0;
}
/*
 * Flour hero: fixed 16:10 frame on `.kShot`. Images scale to fit the band height; width follows
 * aspect ratio (horizontal space is not forced narrow).
 */
.floursPage .kCard.fCardFlour .kShotStack{
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot{
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  /* Clip only vertical overflow; width may extend — bag art is limited by height first. */
  overflow-x: visible;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: linear-gradient(155deg, rgba(75, 248, 254, 0.12), rgba(87, 63, 151, 0.14));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot .kShotImg{
  display: block;
  flex: 0 1 auto;
  align-self: center;
  /* Border-box + vertical padding shrinks the content box so `object-fit: contain` sits off the frame edges (10px top/bottom). */
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 10px 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot.kShotMissing{
  padding: 10px 12px;
  box-sizing: border-box;
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot.kShotMissing .kShotPh{
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

/* Flour tile PNG id — footer bottom-right (hero paths in tooltip). */
.floursPage .fCardFlour .fCardFlourTileId{
  margin-left: auto;
  flex: 0 0 auto;
  text-align: right;
  align-self: center;
  font-family: var(--mono);
  font-size: var(--fs-b-10);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  user-select: none;
}

.kCard.fCardFlour .kBody{
  flex: 1 1 auto;
}

/* Fluid type for the flour-card spec line: scale with card width, not just viewport. */
.floursPage .kCard.fCardFlour .kBody{
  container-type: inline-size;
}
.kCard.fCardFlour .kCardFace--front .fCardFlourFooter{
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
}
.flourChipRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: -14px;
  margin-bottom: 2px;
}
/* Match Knowledge `kCard` .kChip look: brighter fills, 2px borders, outer glow (see .kChip--* ) */
.flourChip{
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 6px 8px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  max-width: 100%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.flourChip--protein{
  text-transform: none;
  font-size: var(--fs-b-12);
}
.flourChip--protein-high{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(132, 255, 95, 0.16);
  border: 2px solid rgba(132, 255, 95, 0.9);
  box-shadow: 0 0 0 4px rgba(132, 255, 95, 0.1);
}
.flourChip--protein-normal{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(242, 176, 42, 0.2);
  border: 2px solid rgba(242, 176, 42, 0.95);
  box-shadow: 0 0 0 4px rgba(242, 176, 42, 0.12);
}
.flourChip--protein-low{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 140, 100, 0.16);
  border: 2px solid rgba(255, 160, 120, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 150, 100, 0.1);
}
.flourChip--protein-unknown{
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-size: var(--fs-b-12);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}
/* Timeline — cyan band like .kChip--flour */
.flourChip--time{
  text-transform: none;
  font-size: var(--fs-b-12);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  background: rgba(75, 248, 254, 0.18);
  border: 2px solid rgba(75, 248, 254, 0.95);
  box-shadow: 0 0 0 4px rgba(75, 248, 254, 0.12);
  max-width: 100%;
}
@media (max-width: 520px){
  .flourChip--time{
    font-size: var(--fs-b-11);
  }
}
.flourChipRow--pizza{
  margin-top: -16px;
  margin-bottom: 0;
}
.flourChip--pizza{
  text-transform: none;
  font-size: var(--fs-b-12);
  line-height: 1.15;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.98);
  background: rgba(90, 74, 149, 0.35);
  border: 2px solid rgba(120, 100, 200, 0.92);
  box-shadow: 0 0 0 4px rgba(100, 90, 200, 0.14);
}
.flourChip--pizza-hearth{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(100, 200, 150, 0.18);
  border: 2px solid rgba(120, 220, 170, 0.9);
  box-shadow: 0 0 0 4px rgba(100, 200, 150, 0.1);
}
.flourChip--pizza-pan{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 160, 80, 0.18);
  border: 2px solid rgba(255, 170, 100, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 150, 90, 0.1);
}
.flourChip--pizza-us{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(230, 120, 220, 0.16);
  border: 2px solid rgba(240, 140, 220, 0.88);
  box-shadow: 0 0 0 4px rgba(200, 100, 200, 0.12);
}
.flourChip--pizza-quick{
  color: rgba(255, 255, 255, 0.98);
  background: rgba(230, 200, 80, 0.2);
  border: 2px solid rgba(245, 210, 100, 0.88);
  box-shadow: 0 0 0 4px rgba(230, 200, 80, 0.1);
}
a.flourChip--pizzaLink{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
a.flourChip--pizzaLink:hover{
  border-color: rgba(255, 255, 255, 0.55) !important;
  filter: brightness(1.06);
  box-shadow: 0 0 0 4px rgba(200, 220, 255, 0.22);
  transform: translateY(-1px);
}
a.flourChip--pizzaLink:active{
  transform: translateY(0) scale(0.98);
  filter: brightness(1.1);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
a.flourChip--pizzaLink:focus-visible{
  outline: 2px solid rgba(200, 200, 255, 0.85);
  outline-offset: 2px;
}
@media (max-width: 520px){
  .flourChip--pizza{ font-size: var(--fs-b-11); }
}
.flourChipRow--caution{
  margin-top: -16px;
  margin-bottom: 0;
}
/* Warm warn — in family with .kChip bakes, brighter */
.flourChip--caution{
  text-transform: none;
  font-size: var(--fs-b-12);
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 180, 70, 0.2);
  border: 2px solid rgba(255, 200, 100, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 200, 100, 0.12);
  max-width: 100%;
}
.flourChip--caution-hearth,
.flourChip--caution-pan{
  border: 2px solid rgba(255, 150, 90, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 150, 90, 0.1);
}
.flourChip--caution-unknown{
  color: rgba(255, 255, 255, 0.95);
  background: rgba(150, 130, 200, 0.22);
  border: 2px solid rgba(180, 160, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(150, 120, 220, 0.14);
}
@media (max-width: 520px){
  .flourChip--caution{ font-size: var(--fs-b-11); }
}
/*
 * Flours catalogue: `.fCardFlourInfoChips` wraps hint + all info chips, grows with the card row
 * so every card’s chip block shares the same overall depth; chips are one per line with even height.
 */
.floursPage .kCard.fCardFlour .fCardFlourInfoChips{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow{
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow > .kChip{
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 10px;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChipRow,
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChipRow--pizza,
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChipRow--caution{
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip{
  box-sizing: border-box;
  padding: 8px 10px;
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips a.flourChip--pizzaLink{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Flour cards: product title can be long — allow multi-line wrap inside the card */
.floursPage .kCard.fCardFlour .kTitleRow{
  flex-wrap: wrap;
}
.floursPage .kCard.fCardFlour .kTitle{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: calc(1rem - 1pt);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .kTitle,
.floursPage .kCard.fCardFlour .kShotMissing .kShotPhTitle{
  text-wrap: balance;
}
/* Flour titles: when accessibility fonts are large, size to the card width (shrink) and allow wrap. */
@supports (font-size: 1cqi){
  .floursPage .kCard.fCardFlour .kTitle{
    font-size: clamp(var(--fs-b-12), calc(6px + 3.1cqi), 20px);
  }
  .floursPage .kCard.fCardFlour .kShotMissing .kShotPhTitle{
    font-size: clamp(var(--fs-b-12), calc(6px + 3.1cqi), 20px);
  }
}
.floursPage .kCard.fCardFlour .kShotMissing .kShotPhTitle{
  font-size: calc(1rem - 1pt);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.floursPage .kCard.fCardFlour .kPrepBackSub{
  font-size: calc(15px - 1pt);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* BAKE ME turns green when flour is in stock. `!important` beats later generic `.kChooseBtn` / pink shot-float rules. */
.floursPage .kCard.fCardFlour .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock,
.knowledgeMain .kCard .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock{
  border: 3px solid rgba(30, 181, 130, 0.96) !important;
  background: linear-gradient(180deg, rgba(45, 200, 140, 0.92), rgba(30, 181, 130, 0.82)) !important;
  box-shadow: 0 0 0 4px rgba(30, 181, 130, 0.16) !important;
}
.floursPage .kCard.fCardFlour .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock:hover,
.knowledgeMain .kCard .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock:hover{
  border: 3px solid rgba(52, 211, 153, 0.98) !important;
  box-shadow: 0 0 0 4px rgba(30, 181, 130, 0.22) !important;
  background: linear-gradient(180deg, rgba(56, 214, 155, 0.95), rgba(34, 197, 120, 0.88)) !important;
}
.floursPage .kCard.fCardFlour .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock:active,
.knowledgeMain .kCard .kShotStack > .kChooseBtn.kChooseBtnShotFloat.kChooseBtn--inStock:active{
  border: 3px solid rgba(30, 181, 130, 0.98) !important;
}

/* Flour cards: P/W + brand live in `.kHint` (Knowledge-style body) */
.floursPage .kCard.fCardFlour .kHint{
  font-family: var(--mono);
  font-style: normal;
  font-weight: 800;
  font-size: var(--fs-b-13);
  letter-spacing: 0.02em;
  opacity: 0.95;
  word-break: break-word;
  overflow-wrap: anywhere;
  /* Unlike Knowledge cards, don’t reserve a fixed two-line block — let line count follow width. */
  min-height: 0;
  max-width: 100%;
  min-width: 0;
  line-height: 1.35;
}

/* Size the spec line down as the card column narrows (stays in-bounds; wraps to 2 lines if needed). */
@supports (font-size: clamp(1px, 1cqi + 1px, 20px)){
  .floursPage .kCard.fCardFlour .kHint{
    font-size: clamp(var(--fs-b-9), calc(4px + 3.2cqi), var(--fs-b-13));
  }
}

/* When the card body is very tight, tighten tracking slightly so one-line fits more often. */
@container (max-width: 320px){
  .floursPage .kCard.fCardFlour .kHint{
    letter-spacing: 0.005em;
  }
}

/* Older engines: no `cqi` — still shrink on small viewports so phones don’t clip. */
@supports not (font-size: clamp(1px, 1cqi + 1px, 20px)){
  @media (max-width: 520px){
    .floursPage .kCard.fCardFlour .kHint{
      font-size: clamp(var(--fs-b-9), calc(5px + 2.4vw), var(--fs-b-13));
    }
  }
}
.flourRowActions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
}
.flourRowCheck{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-b-11);
  font-family: var(--mono);
  color: rgba(255,255,255,.82);
  user-select: none;
}
.flourRowActions .btn.ghost{ font-size: var(--fs-h-9); padding: 6px 8px; white-space: nowrap; }

/* Keep hidden catalogue panel visible when shown: `[hidden]` can lose to other `display` rules in some stacks. */
.floursHiddenBlock[hidden]{
  display: none !important;
}
.floursHiddenBlock:not([hidden]){
  display: block;
}
.floursHiddenBlock{
  margin-top: 14px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,.1);
}
.floursHiddenSummary{ cursor: pointer; font-size: var(--fs-b-13); font-weight: 600; }
.floursHiddenList{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.flourHiddenLine{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(13px - 1pt);
}
.flourHiddenText{ flex: 1 1 200px; }

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  /* Single-column layout: full-width cards — drop page zoom so rows don’t clip horizontally */
  .app{
    zoom: 1;
    padding: 24px 14px 38px;
    --appPadX: 14px;
  }
}
/* Fold / small-tablet widths: prefer the two-column dashboard when there’s room (equal columns). */
@media (min-width: 650px) and (max-width: 980px){
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Thin screens: recipe actions above the banner; chips + reset below. */
@media (max-width: 900px){
  .topRight--phantom{display:none}
  .top{
    flex-direction: column;
    align-items: center;
  }
  .top .topRight:not(.topRight--phantom){
    display: contents;
  }
  /* Match Flour / Styles pages: banner graphic first, then header actions (phantom pages hide the right column here). */
  .top .topBrand{
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-inline: auto;
  }
  /* Two-column `main.grid` (≥650px): keep the title PNG exactly column-1 wide and
   * left-aligned; the generic rule above uses full width for non-dashboard pages. */
  @media (min-width: 650px){
    .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand{
      align-self: flex-start;
      margin-inline: 0;
      box-sizing: border-box;
      min-width: 0;
      flex-shrink: 0;
    }
  }
  .top .topActions{
    order: 1;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .top .topBakeReadyPlans{
    order: 2;
    margin-top: 0;
    align-self: center;
    justify-content: center;
    transform: translateY(-20px);
  }
  .top .topQuickStylesStrip{
    order: 3;
    margin-top: 0;
    align-self: center;
    justify-content: center;
  }
}
/* Dashboard title PNG = exactly one `main.grid` track: use `.app` inline-size (`cqi`)
 * so width does not depend on `.top`’s content box / padding (which broke the match). */
@supports (width: 1cqi){
  .app:has(> main.grid.dashboard){
    container-type: inline-size;
    container-name: pdc-app;
  }
  @media (min-width: 650px){
    .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand{
      width: calc((100cqi - var(--pdc-dashboard-grid-gap)) / 2);
      max-width: calc((100cqi - var(--pdc-dashboard-grid-gap)) / 2);
      flex-shrink: 0;
      box-sizing: border-box;
      min-width: 0;
    }
  }
}
@supports not (width: 1cqi){
  @media (min-width: 901px){
    .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top .topBrand{
      width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
      max-width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
      flex-shrink: 0;
      box-sizing: border-box;
      min-width: 0;
    }
  }
  @media (max-width: 900px) and (min-width: 650px){
    .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand{
      width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
      max-width: calc((100% - var(--pdc-dashboard-grid-gap)) / 2);
      flex-shrink: 0;
      box-sizing: border-box;
      min-width: 0;
    }
  }
}

/* Intermediate "chips centred across both columns" state:
 * (max-width: 900) uses flex-stacked header; (min-width: 650) keeps
 * a 2-column dashboard. Full-width brand row (title art is only the tall PNG — thin strip lives in `.pixelNavBarEnd`). */
@media (max-width: 900px) and (min-width: 650px){
  .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand{
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-inline: auto;
  }
}

/* Dashboard: `html.layout-fold` — fold / inner display header (see `pdc-top-brand-scroll.js`).
 * Row header under 900px, main banner + right cluster. */
@media (max-width: 900px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 6px;
    row-gap: 2px;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top > .topBrand {
    order: 0;
    flex: 0 1 auto;
    width: auto !important;
    max-width: min(40vw, 260px, 42%) !important;
    margin-inline: 0 !important;
    align-self: flex-start !important;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topRight:not(.topRight--phantom) {
    display: flex !important;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    order: 1;
    gap: 4px;
    padding-top: 0;
    box-sizing: border-box;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topBakeReadyPlans {
    margin-top: 0 !important;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topActions,
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topBakeReadyPlans,
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topQuickStylesStrip {
    order: 0;
    align-self: center;
    width: 100%;
    max-width: 100% !important;
    transform: none;
    margin-top: 0;
    justify-content: center;
    text-align: center;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topQuickStylesStrip {
    gap: 6px;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topBakeReadyPlansMain,
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .topQuickStylesMain {
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top .chipRow {
    justify-content: center;
    gap: 5px;
  }
  /* One row of quick-style chips; scroll horizontally if the rail is still tight. */
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top #quickStyleChips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
}
@media (max-width: 900px) and (min-width: 650px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) {
    padding-left: 10px;
    padding-right: 10px;
    --appPadX: 10px;
  }
}
@media (max-width: 900px) and (min-width: 650px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand .topBrandCrtHost {
    aspect-ratio: unset !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top > .topBrand .topBrandCrtHost .topBrandImg {
    display: block !important;
    height: auto !important;
    object-fit: unset;
    object-position: unset;
  }
}
@supports (width: 1cqi) {
  @media (max-width: 900px) {
    html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top > .topBrand {
      width: auto !important;
      max-width: min(40cqi, 40vw, 260px, 42%) !important;
    }
  }
}
/* JS overlap guard (`top--brandTight` + `--topBrandMax`) must win over layout-fold caps when chips crowd the PNG. */
@media (max-width: 900px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > header.top.top--brandTight > .topBrand {
    width: min(var(--topBrandMax, 200px), 100%) !important;
    max-width: min(var(--topBrandMax, 200px), 100%) !important;
  }
}
@media (min-width: 901px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.dashboard--hideCol1)) > .top .topBrand {
    flex-shrink: 1;
  }
}
@media (max-width: 640px){
  /* Narrow layout + padding only here — `.app` overflow stays visible (see base `.app`) so sticky headings work. */
  .app{
    padding: 22px 12px 36px;
    --appPadX: 12px;
  }
  .pixelNav{
    overflow: visible;
  }
  .pixelNavInner{
    overflow: visible;
    padding: 0 6px;
    /* Was `12px`; collapsed so the bar hugs the menu-icon image on narrow phones. */
    --pdcNavPadY: 1px;
    --pdcNavPadX: 8px;
  }
  .split{grid-template-columns: 1fr}
  .split.splitPortions{grid-template-columns: 1fr 1fr}
  .detailsBody{grid-template-columns: 1fr}
  .pixelNavLink{flex-direction:column; gap:8px; font-size: var(--fs-b-8)}
  .heroActions{gap:4px}
  .heroActions .btn.ghost{font-size: var(--fs-b-8); padding: 7px 6px}
}
@media (max-width: 520px){
  /* Fold cover & similar: two abutting number fields clip — stack balls / ball weight */
  .split.splitPortions,
  .split.splitPortions.splitPortionsGrid{
    grid-template-columns: 1fr;
  }
}

/* ── Saved recipes page (#recipes hash) ── */
/* `.grid { display: grid }` can override plain `[hidden]` (same specificity, later rule). */
main.grid.dashboard[hidden],
header.top[hidden]{
  display: none !important;
}
#pdcRecipePage[hidden]{
  display: none !important;
}
#pdcRecipePage:not([hidden]){
  display: block;
  /* Pull up into the nav’s bottom margin so the banner sits flush under the menu strip */
  margin-top: -18px;
}
.pdcRecipePage{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.pdcRecipePageInner{
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  box-sizing: border-box;
}
/* Same horizontal bleed recipe as `.pixelNav` — align banner with nav edges inside `.app` */
.pdcRecipePageHeader{
  margin: 0;
  padding: 0;
  width: calc(100% + (var(--appPadX) * 2));
  max-width: calc(100% + (var(--appPadX) * 2));
  margin-left: calc(-1 * var(--appPadX));
  margin-right: calc(-1 * var(--appPadX));
  box-sizing: border-box;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ~40% tile + 50% → 60% of header width, centred on the page */
.pdcRecipePageBanner{
  display: block;
  width: 60%;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  vertical-align: top;
  image-rendering: auto;
  flex-shrink: 0;
}
@media (max-width: 980px){
  .pdcRecipePageHeader{
    width: calc(100% + 28px);
    max-width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
  }
}
@media (max-width: 640px){
  .pdcRecipePageHeader{
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
}
.pdcRecipePageHeadingSr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.pdcRecipePageIntro,
.pdcRecipeEmpty,
.pdcRecipeFoot{
  margin: 0 0 16px;
  color: rgba(255,251,248,.76);
}
.pdcRecipeList{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.pdcRecipeCard{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  padding: 14px;
}
.pdcRecipeCardTitle{
  font-weight: 800;
  font-size: var(--fs-h-16);
  margin-bottom: 4px;
  color: rgba(255,251,248,.94);
}
.pdcRecipeCardSub{
  font-size: calc(var(--fs-b-12) + 1pt);
  color: rgba(255,251,248,.62);
  margin-bottom: 12px;
  font-family: var(--mono);
}
.pdcRecipeCardActions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.pdcRecipeCardActionsRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.pdcRecipeCardActionsRow--recipeLine{
  justify-content: flex-start;
}
.pdcRecipeCardActionsRow--recipeLine .pdcRecipeCardDelete{
  margin-left: auto;
}

/* ── Saved recipes: 80s neon arcade “scene” (scoped to `.pdcRecipePage--retro80`) ── */
.pdcRecipePage--retro80{
  position: relative;
  isolation: isolate;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  color: rgba(255, 251, 248, 0.95);
  background:
    radial-gradient(ellipse 130% 90% at 50% -15%, rgba(124, 92, 255, 0.42), transparent 58%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(228, 49, 115, 0.18), transparent 50%),
    radial-gradient(ellipse 65% 45% at 0% 95%, rgba(75, 248, 254, 0.14), transparent 48%),
    linear-gradient(185deg, #070314 0%, #10082a 38%, #050818 100%);
}
.pdcRecipePage--retro80::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(75, 248, 254, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 49, 115, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 72%);
}
.pdcRecipePage--retro80::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.55) 2px,
    rgba(0, 0, 0, 0.55) 4px
  );
  mix-blend-mode: multiply;
}
.pdcRecipePage--retro80 > *{
  position: relative;
  z-index: 1;
}
.pdcRecipePage--retro80 .pdcRecipePageHeader{
  padding: 10px 0 4px;
}
.pdcRecipePage--retro80 .pdcRecipePageBanner{
  border-radius: 4px;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 10px rgba(75, 248, 254, 0.5)) drop-shadow(0 0 22px rgba(228, 49, 115, 0.28))
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55));
}
.pdcRecipePageMarquee{
  overflow: hidden;
  margin: 10px calc(-1 * var(--appPadX)) 0;
  padding: 0 var(--appPadX);
  border-top: 1px solid rgba(75, 248, 254, 0.35);
  border-bottom: 1px solid rgba(228, 49, 115, 0.32);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(40, 12, 62, 0.45), rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pdcRecipePageMarqueeTrack{
  display: flex;
  width: max-content;
  gap: 0;
  padding: 9px 0;
  font-family: var(--arcade);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff6a8;
  text-shadow:
    0 0 6px rgba(255, 251, 128, 0.95),
    0 0 14px rgba(75, 248, 254, 0.45);
  animation: pdcRecipeMarqueeScroll 24s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipePageMarqueeTrack{
    animation: none;
  }
}
@keyframes pdcRecipeMarqueeScroll{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}
.pdcRecipePage--retro80 .pdcRecipePageInner{
  max-width: 920px;
  margin: 14px auto 0;
  padding: 22px 18px 40px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(18, 8, 42, 0.88), rgba(6, 14, 36, 0.82));
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.22),
    0 0 32px rgba(124, 92, 255, 0.22),
    0 0 48px rgba(228, 49, 115, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.pdcRecipePage--retro80 .pdcRecipePageIntro{
  margin: 0 0 20px;
  padding: 14px 14px 14px 16px;
  border-radius: 0 12px 12px 0;
  border-left: 3px solid rgba(255, 207, 90, 0.9);
  background: linear-gradient(90deg, rgba(75, 248, 254, 0.1), transparent 65%);
  color: rgba(232, 254, 255, 0.92);
  line-height: 1.55;
  text-shadow: 0 0 18px rgba(75, 248, 254, 0.18);
}
.pdcRecipePage--retro80 .pdcRecipeEmpty{
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(75, 248, 254, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 230, 200, 0.78);
  text-align: center;
}
.pdcRecipePage--retro80 .pdcRecipeFoot{
  margin: 8px 0 0;
  display: flex;
  justify-content: center;
}
.pdcRecipePage--retro80 .pdcRecipeList{
  gap: 14px;
}
.pdcRecipePage--retro80 .pdcRecipeCard{
  border: 1px solid rgba(75, 248, 254, 0.38);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(26, 10, 48, 0.92), rgba(8, 18, 44, 0.88));
  padding: 16px 15px;
  box-shadow:
    0 0 0 1px rgba(228, 49, 115, 0.12),
    0 0 20px rgba(75, 248, 254, 0.08),
    inset 0 0 50px rgba(124, 92, 255, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pdcRecipePage--retro80 .pdcRecipeCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 207, 90, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 207, 90, 0.35),
    0 0 28px rgba(75, 248, 254, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 60px rgba(228, 49, 115, 0.06);
}
.pdcRecipePage--retro80 .pdcRecipeCardTitle{
  font-family: var(--arcade);
  font-size: calc(var(--fs-b-11) + 2pt);
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #f2e6d4;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.pdcRecipePage--retro80 .pdcRecipeCardSub{
  color: rgba(180, 240, 255, 0.72);
  text-shadow: 0 0 8px rgba(75, 248, 254, 0.15);
}
/* Card actions: arcade neon frames; green halo on hover / focus */
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn{
  border-radius: 10px;
  font-family: var(--arcade);
  font-size: calc(var(--fs-b-11) - 1pt);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.12s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    filter 0.16s ease,
    text-shadow 0.16s ease;
  text-shadow:
    0 0 8px rgba(75, 248, 254, 0.5),
    0 0 16px rgba(124, 92, 255, 0.32);
  border-color: rgba(75, 248, 254, 0.48);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.16),
    0 0 14px rgba(75, 248, 254, 0.28),
    0 0 24px rgba(228, 49, 115, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.38);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost{
  background: linear-gradient(180deg, rgba(12, 28, 52, 0.96), rgba(6, 14, 38, 0.94));
  color: rgba(214, 252, 255, 0.95);
  text-shadow:
    0 0 8px rgba(75, 248, 254, 0.42),
    0 0 14px rgba(124, 92, 255, 0.28);
  border-color: rgba(110, 230, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.18),
    0 0 14px rgba(75, 248, 254, 0.26),
    inset 0 0 22px rgba(75, 248, 254, 0.05);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:not(.ghost){
  background: linear-gradient(175deg, rgba(96, 52, 168, 0.58), rgba(12, 38, 82, 0.92));
  border-color: rgba(255, 150, 210, 0.48);
  color: #fffefb;
  text-shadow:
    0 0 10px rgba(255, 186, 236, 0.55),
    0 0 18px rgba(75, 248, 254, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 120, 200, 0.22),
    0 0 16px rgba(228, 49, 115, 0.32),
    0 0 26px rgba(75, 248, 254, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.42);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:focus-visible{
  border-color: rgba(130, 255, 200, 0.82);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(72, 220, 160, 0.5),
    0 0 16px rgba(52, 220, 140, 0.58),
    0 0 32px rgba(40, 200, 125, 0.48),
    0 0 48px rgba(30, 190, 115, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.35);
  outline: none;
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost:focus-visible{
  background: linear-gradient(180deg, rgba(16, 44, 34, 0.94), rgba(8, 32, 24, 0.92));
  color: rgba(232, 255, 246, 0.98);
  text-shadow:
    0 0 10px rgba(130, 255, 200, 0.7),
    0 0 20px rgba(72, 220, 160, 0.48);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.pdcRecipeCardDelete:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.pdcRecipeCardDelete:focus-visible{
  border-color: rgba(255, 130, 150, 0.92);
  background: linear-gradient(180deg, rgba(48, 14, 22, 0.96), rgba(26, 6, 12, 0.94));
  color: rgba(255, 236, 240, 0.98);
  filter: brightness(1.07);
  box-shadow:
    0 0 0 1px rgba(255, 90, 110, 0.55),
    0 0 16px rgba(255, 70, 95, 0.48),
    0 0 30px rgba(228, 49, 115, 0.45),
    0 0 46px rgba(200, 40, 70, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.38);
  text-shadow:
    0 0 10px rgba(255, 170, 180, 0.72),
    0 0 22px rgba(228, 49, 115, 0.52);
  outline: none;
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:active{
  transform: translateY(1px);
}
@media (max-width: 640px){
  .pdcRecipePageMarqueeTrack{
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .pdcRecipePage--retro80 .pdcRecipeCardTitle{
    font-size: calc(10px + 2pt);
  }
}

.pdcRecipeDialog{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 12px);
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: rgba(16,14,34,.96);
  color: rgba(255,251,248,.92);
  padding: 0;
  width: min(460px, calc(100vw - 24px));
  max-height: calc(
    100vh - env(safe-area-inset-top, 0px) - var(--pdc-sticky-nav-offset, 56px) - 12px - 20px -
      env(safe-area-inset-bottom, 0px)
  );
  max-height: calc(
    100dvh - env(safe-area-inset-top, 0px) - var(--pdc-sticky-nav-offset, 56px) - 12px - 20px -
      env(safe-area-inset-bottom, 0px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 64px rgba(0,0,0,.65);
}
.pdcRecipeDialog::backdrop{
  background: rgba(0,0,0,.62);
}
.pdcRecipeDialogForm{
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdcRecipeDialogTitle{
  font-family: var(--arcade);
  font-size: calc(var(--fs-b-11) + 2pt);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: #fffb80;
}
.pdcRecipeDialogHint{
  font-size: var(--fs-b-12);
  line-height: 1.45;
  margin: 0 0 6px;
  color: rgba(255,251,248,.74);
}
.pdcRecipeLabel{
  font-size: var(--fs-b-11);
  font-weight: 700;
  margin-top: 4px;
}
.pdcRecipeInput{
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: inherit;
  padding: 10px 11px;
  font-family: inherit;
  font-size: var(--fs-b-14);
}
.pdcRecipeCheck{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-b-13);
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}
.pdcRecipeDialogActions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
/* Save-recipe dialog: neon arcade buttons + green halo on hover (matches recipe cards) */
.pdcRecipeDialogActions .btn{
  border-radius: 10px;
  font-family: var(--arcade);
  font-size: calc(var(--fs-b-11) - 1pt);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 0.12s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    filter 0.16s ease,
    text-shadow 0.16s ease;
  text-shadow:
    0 0 8px rgba(75, 248, 254, 0.45),
    0 0 14px rgba(124, 92, 255, 0.28);
  border-color: rgba(75, 248, 254, 0.42);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.14),
    0 0 12px rgba(75, 248, 254, 0.22),
    0 0 20px rgba(228, 49, 115, 0.1),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.pdcRecipeDialogActions .btn.ghost{
  background: linear-gradient(180deg, rgba(12, 28, 52, 0.96), rgba(6, 14, 38, 0.94));
  color: rgba(214, 252, 255, 0.95);
  text-shadow:
    0 0 8px rgba(75, 248, 254, 0.38),
    0 0 12px rgba(124, 92, 255, 0.25);
  border-color: rgba(110, 230, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.16),
    0 0 12px rgba(75, 248, 254, 0.22),
    inset 0 0 18px rgba(75, 248, 254, 0.04);
}
.pdcRecipeDialogActions .btn:not(.ghost){
  background: linear-gradient(175deg, rgba(96, 52, 168, 0.58), rgba(12, 38, 82, 0.92));
  border-color: rgba(255, 150, 210, 0.45);
  color: #fffefb;
  text-shadow:
    0 0 10px rgba(255, 186, 236, 0.5),
    0 0 16px rgba(75, 248, 254, 0.38);
  box-shadow:
    0 0 0 1px rgba(255, 120, 200, 0.2),
    0 0 14px rgba(228, 49, 115, 0.28),
    0 0 22px rgba(75, 248, 254, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.4);
}
.pdcRecipeDialogActions .btn:hover,
.pdcRecipeDialogActions .btn:focus-visible{
  border-color: rgba(130, 255, 200, 0.82);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(72, 220, 160, 0.48),
    0 0 14px rgba(52, 220, 140, 0.52),
    0 0 28px rgba(40, 200, 125, 0.42),
    0 0 40px rgba(30, 190, 115, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.32);
  outline: none;
}
.pdcRecipeDialogActions .btn.ghost:hover,
.pdcRecipeDialogActions .btn.ghost:focus-visible{
  background: linear-gradient(180deg, rgba(16, 44, 34, 0.94), rgba(8, 32, 24, 0.92));
  color: rgba(232, 255, 246, 0.98);
  text-shadow:
    0 0 10px rgba(130, 255, 200, 0.65),
    0 0 18px rgba(72, 220, 160, 0.42);
}
.pdcRecipeDialogActions .btn:active{
  transform: translateY(1px);
}

/* Off-screen clone for PDF + PNG: banner + saved-at + hero + mixing + timeline + bake + bottom brand. */
.pdcRecipeExportWrap{
  box-sizing: border-box;
  background: #080f35;
  border-radius: 18px;
  /* Visible so hero extras (JumpScott, eat-plan stamp, neon glow) are not clipped in PDF/PNG. */
  overflow: visible;
  border: none;
  box-shadow: none;
}
.pdcRecipeExportBanner{
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.pdcRecipeExportSavedAt{
  box-sizing: border-box;
  width: 100%;
  padding: 8px 14px 10px;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(12, 18, 52, 0.5), rgba(8, 15, 53, 0.35));
}
.pdcRecipeExportWrap > .pdcRecipeSnapshotRoot{
  width: 100%;
  max-width: none;
}
.pdcRecipeSnapshotRoot{
  box-sizing: border-box;
  width: 640px;
  max-width: 100%;
  padding: 14px 14px 18px;
  background: transparent;
  border-radius: 0;
}
.pdcRecipeSnapshotCapture{
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  background: transparent;
}
/*
 * PDF/PNG: the real `section.card.results` is reparented under the capture strip (not a clone).
 */
.pdcRecipeSnapshotCapture--export .pdcRecipeExportPageSegment[data-pdc-export-segment="recipe"] > .card.results{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.pdcRecipeSnapshotCapture--export .card.results #dividerBeforeAdvanced,
.pdcRecipeSnapshotCapture--export .card.results .detailsAdvancedDoughOverrides{
  display: none !important;
}
.pdcRecipeSnapshotCapture--export .card.results .columnBalanceBrand--results{
  display: block !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin-top: 16px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.pdcRecipeSnapshotCapture--export .card.results .columnBalanceBrand--results .columnBalanceBrandImg{
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.pdcRecipeSnapshotCapture--export .hero.neonFrame.neonFrame--pink{
  overflow: visible;
  /* Extra bottom padding so the ::before ring encloses ingredient heading + bars (matches dashboard column frame). */
  padding: 20px 16px 36px;
  /* Raster exports: soften outer neon ring so edges aren’t clipped harshly in PDF/PNG */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pdcRecipeSnapshotCapture--export .hero.neonFrame.neonFrame--pink::before{
  opacity: 0.45;
}
/* PNG/PDF: align Total dough label + main gram readout slightly right vs live dashboard */
.pdcRecipeSnapshotCapture--export .heroMetricStack{
  margin-left: 7px;
}
/* Keep ingredients band inset so its frame doesn’t bleed past the hero neon ring in raster exports */
.pdcRecipeSnapshotCapture--export .heroBand.heroSumBlock.heroSumBlock--ingredientsBars{
  margin-left: 10px;
  margin-right: 10px;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  box-sizing: border-box;
  overflow: visible;
}
/*
 * Off-screen export uses a fixed width, not the viewport: replace vw-based stamp sizing with
 * percentages of the row so flour bags stay proportional and match the dashboard hero.
 */
.pdcRecipeSnapshotCapture--export .heroFlourStamp.heroFlourStamp--flourYeast{
  width: clamp(88px, 36%, 150px);
  max-width: min(52%, 170px);
  max-height: clamp(86px, 28%, 132px);
}
.pdcRecipeSnapshotCapture--export .heroFlourYeastRow.heroFlourYeastRow--placeholder .heroFlourStamp.heroFlourStamp--flourYeast{
  width: clamp(54px, 22%, 96px);
  max-height: clamp(52px, 18%, 80px);
}
.pdcRecipeSnapshotCapture--export .heroFlourStamp.heroFlourStamp--flourYeastB{
  width: clamp(72px, 28%, 130px);
  max-width: min(42%, 150px);
  max-height: clamp(74px, 22%, 118px);
  left: 0;
  top: 0;
}
.pdcRecipeSnapshotCapture--export .heroFlourYeastText{
  margin-left: 0;
}
.pdcRecipeSnapshotSection{
  margin-top: 18px;
}
.pdcRecipeSnapshotRoot .heroSub.heroSummary{
  max-height: none !important;
  overflow: visible !important;
}
.pdcRecipeSnapshotRoot .cardHeader{
  margin-bottom: 0;
}
.pdcRecipeSnapshotRoot .stepper{
  margin-top: 6px;
}
/* Mixing / timeline / bake blocks + enjoypizza footer (dashboard column balance is often display:none). */
.pdcRecipeSnapshotCapture--export .pdcRecipeExportBottomBrand.columnBalanceBrand{
  display: block !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin-top: 16px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.pdcRecipeSnapshotCapture--export .pdcRecipeExportBottomBrand .columnBalanceBrandImg{
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.pdcRecipeSnapshotCapture--export .card.results .divider,
.pdcRecipeSnapshotCapture--export .divider{
  margin-top: 10px;
}
/* Logical blocks for PDF page breaks (banner+date, hero, mixing, …). */
.pdcRecipeExportPageSegment{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.pdcRecipeExportPageSegment--head{
  width: 100%;
}

/* Legacy class from earlier PDF builds — keep rules so old cached HTML still captures. */
.pdcPdfHeroRoot{
  box-sizing: border-box;
  width: 640px;
  max-width: 100%;
  background: transparent;
  border-radius: var(--radius2);
}
.pdcPdfHeroRoot .heroSub.heroSummary{
  max-height: none !important;
  overflow: visible !important;
}

/* Hidden capture for PNG share card (long vertical strip: logo + snapshot) */
.pdcShareCaptureRoot{
  width: 420px;
  padding: 16px;
  border-radius: 14px;
  background: radial-gradient(ellipse at top, rgba(87,63,151,.65), transparent 62%) #12102a;
  border: 1px solid rgba(255,255,255,.1);
  box-sizing: border-box;
}
.pdcShareCaptureRoot--heroCard{
  width: min(720px, 96vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.pdcShareCaptureRoot--heroCard .pdcShareCaptureLogo{
  width: 148px;
  align-self: flex-start;
}
.pdcShareCaptureRoot--heroCard .pdcRecipeSnapshotRoot{
  width: 100%;
}
.pdcShareCaptureRoot--heroCard .pdcPdfHeroRoot{
  width: 100%;
}
.pdcShareCaptureTop{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pdcShareCaptureLogo{
  width: 132px;
  height: auto;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pdcShareCaptureHero{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,143,216,.58);
  background: radial-gradient(circle at 12% -10%, rgba(255,143,216,.52), transparent 72%),
              linear-gradient(120deg, rgba(22,36,71,.94), rgba(16,26,61,.94));
}
.pdcShareCaptureHeroLabel{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,251,128,.94);
}
.pdcShareCaptureHeroValue{
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--fs-b-26);
  margin-top: 4px;
  color: rgba(255,251,248,.94);
}
.pdcShareCaptureHeroSub{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  color: rgba(255,251,248,.72);
}