html, body{
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* No rubber-band / glow when already at scroll top (mobile WebView + iOS). */
  overscroll-behavior-y: none;
}
/* `menu-select.js` — page scroll frozen while a custom menu panel is open. */
html.pdc-menu-scroll-lock{
  overscroll-behavior: none;
}

/* Long-press / selection guard (see pdc-touch-guard.js). Decorative UI only — inputs exempt below. */
html.pdc-touch-guard,
html.pdc-touch-guard body{
  -webkit-touch-callout: none;
}
html.pdc-touch-guard body{
  -webkit-user-select: none;
  user-select: none;
}
html.pdc-touch-guard input:not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
html.pdc-touch-guard textarea,
html.pdc-touch-guard select,
html.pdc-touch-guard [contenteditable]:not([contenteditable="false"]),
html.pdc-touch-guard .pdc-text-selectable,
html.pdc-touch-guard .pdc-text-selectable *,
html.pdc-touch-guard #pdcDungeonFloor .pdcDungeonTale--storybook,
html.pdc-touch-guard #pdcDungeonFloor .pdcDungeonTale--storybook *,
html.pdc-touch-guard #pdcDungeonFloor .pdcDoughJoTale,
html.pdc-touch-guard #pdcDungeonFloor .pdcDoughJoTale *{
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
html.pdc-touch-guard a[href]{
  -webkit-touch-callout: default;
}
html.pdc-touch-guard img,
html.pdc-touch-guard svg,
html.pdc-touch-guard picture{
  -webkit-user-drag: none;
  user-drag: 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;
  /* Recipe-gate attract pulse (~0.65 Hz): slower + softer than legacy 1.15s; stagger + `data-pdc-recipe-gate-pulse` use this. */
  --pdc-recipe-gate-pulse: 1.55s;
}
.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 — period `--pdc-recipe-gate-pulse` (~0.65 Hz); asymmetric rise/decay + dwell.
 * Under ~1.5 Hz avoids alarm/hazard feel; peaks kept softer than legacy for long-session comfort.
 * Stagger: dough balls +⅓ cycle, ball weight +⅔ (`data-pdc-recipe-gate-pulse` can hold non-active fields static).
 * When `data-pdc-recipe-gate-pulse` is set on the dashboard, only `.pdcRecipeGatePulseActive` animates
 * (see chain rules below) so dough balls / ball weight / neighbours do not all flash together. */
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before,
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before{
  animation: pdcFieldNeedNeonPulse var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3);
  will-change: opacity, filter;
}
/* Dough balls / pan dough: fill + border share the cyan accent and breathe with the outer ring. */
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention{
  border-color: rgba(75, 248, 254, 0.52);
  animation: pdcFieldNeedNeonPulseFill var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3);
  will-change: background, border-color, box-shadow;
}
/* Active recipe-gate field: ring opacity + fill breathe (only `.pdcRecipeGatePulseActive`). */
#ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
#panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation-name: pdcRecipeGateRingPulse !important;
  animation-duration: var(--pdc-recipe-gate-pulse) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
#ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive,
#panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulseFill var(--pdc-recipe-gate-pulse) linear infinite !important;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
#portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation-name: pdcRecipeGateRingPulsePink !important;
  animation-duration: var(--pdc-recipe-gate-pulse) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
#portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulsePinkFill var(--pdc-recipe-gate-pulse) linear infinite !important;
  animation-delay: calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
#ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
#panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  box-shadow:
    0 0 0 2px rgba(75, 248, 254, 0.38),
    0 0 12px rgba(75, 248, 254, 0.32),
    0 0 20px rgba(75, 248, 254, 0.14);
}
#portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  box-shadow:
    0 0 0 2px var(--nf-glow),
    0 0 10px rgba(228, 49, 115, 0.28),
    0 0 16px rgba(255, 130, 198, 0.1);
}
/* Opacity-only ring pulse — animated box-shadow repaints neighbours (hero / frozen fields). */
@keyframes pdcRecipeGateRingPulse{
  0%{
    opacity: 0.55;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    opacity: 1;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    opacity: 0.55;
    animation-timing-function: linear;
  }
  100%{
    opacity: 0.55;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@keyframes pdcRecipeGateRingPulsePink{
  0%{
    opacity: 0.52;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    opacity: 0.95;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    opacity: 0.52;
    animation-timing-function: linear;
  }
  100%{
    opacity: 0.52;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@keyframes pdcFieldNeedNeonPulse{
  0%{
    opacity: 0.58;
    filter: brightness(0.96) saturate(1.06);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 6px rgba(75, 248, 254, 0.14);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    opacity: 0.9;
    filter: brightness(1.12) saturate(1.1);
    box-shadow:
      0 0 0 2px rgba(75, 248, 254, 0.28),
      0 0 10px rgba(75, 248, 254, 0.34),
      0 0 16px rgba(75, 248, 254, 0.18),
      0 0 12px rgba(167, 120, 255, 0.14);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    opacity: 0.58;
    filter: brightness(0.96) saturate(1.06);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 6px rgba(75, 248, 254, 0.14);
    animation-timing-function: linear;
  }
  100%{
    opacity: 0.58;
    filter: brightness(0.96) saturate(1.06);
    box-shadow:
      0 0 0 1px var(--nf-glow),
      0 0 6px rgba(75, 248, 254, 0.14);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@keyframes pdcFieldNeedNeonPulseFill{
  0%{
    background: linear-gradient(180deg, rgba(75, 248, 254, 0.14), rgba(8, 16, 44, 0.9));
    border-color: rgba(75, 248, 254, 0.52);
    box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.18);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    background: linear-gradient(180deg, rgba(75, 248, 254, 0.32), rgba(12, 38, 52, 0.92));
    border-color: rgba(75, 248, 254, 0.82);
    box-shadow:
      inset 0 1px 0 rgba(75, 248, 254, 0.34),
      inset 0 0 28px rgba(75, 248, 254, 0.18);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    background: linear-gradient(180deg, rgba(75, 248, 254, 0.14), rgba(8, 16, 44, 0.9));
    border-color: rgba(75, 248, 254, 0.52);
    box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.18);
    animation-timing-function: linear;
  }
  100%{
    background: linear-gradient(180deg, rgba(75, 248, 254, 0.14), rgba(8, 16, 44, 0.9));
    border-color: rgba(75, 248, 254, 0.52);
    box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.18);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
@media (prefers-reduced-motion: reduce){
  #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before,
  #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention::before,
  #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
  #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
    animation: none;
    opacity: 0.85;
    filter: none;
    box-shadow: 0 0 0 2px var(--nf-glow), 0 0 8px rgba(75, 248, 254, 0.22);
    will-change: auto;
  }
  #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
  #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
  #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive,
  #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
    animation: none;
    background: linear-gradient(180deg, rgba(75, 248, 254, 0.24), rgba(8, 18, 42, 0.9));
    border-color: rgba(75, 248, 254, 0.66);
    box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.28);
    will-change: auto;
  }
  #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
  #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
    animation: none;
    filter: none;
    will-change: auto;
  }
}
#ballsField.field.neonFrame.pdcFieldSatisfied::before,
#portionWeightField.field.neonFrame.pdcFieldSatisfied::before,
#panDoughField.field.neonFrame.pdcFieldSatisfied::before{
  animation: none;
}
/* Portion fields resolved: light green fill inside the neon frame (matches menu “chosen” chips). */
#ballsField.field.neonFrame.pdcFieldSatisfied,
#portionWeightField.field.neonFrame.pdcFieldSatisfied,
#panDoughField.field.neonFrame.pdcFieldSatisfied{
  background: linear-gradient(180deg, rgba(30, 181, 130, 0.22), rgba(6, 22, 18, 0.92));
  border-color: rgba(30, 181, 130, 0.58);
  box-shadow: inset 0 1px 0 rgba(30, 181, 130, 0.26);
}

/* Same rhythm + asymmetry as cyan pulse; pink-tinted halos for the weight field.
 * Stagger: +⅔ cycle so pulse follows pizza style (0) → dough balls (⅓) → here. */
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention::before{
  animation: pdcFieldNeedNeonPulsePink var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: calc(2 * var(--pdc-recipe-gate-pulse) / 3);
  will-change: opacity, filter;
}
/* Ball weight field: fill + border share the pink accent and breathe with the outer ring. */
main.grid.dashboard:not([data-pdc-recipe-gate-pulse]) #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention{
  border-color: rgba(228, 49, 115, 0.52);
  animation: pdcFieldNeedNeonPulsePinkFill var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: calc(2 * var(--pdc-recipe-gate-pulse) / 3);
  will-change: background, border-color, box-shadow;
}
@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.76;
    filter: brightness(1.04) saturate(1.07);
    box-shadow:
      0 0 0 2px var(--nf-glow),
      0 0 7px rgba(228, 49, 115, 0.22),
      0 0 11px rgba(255, 130, 198, 0.1);
    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);
  }
}
@keyframes pdcFieldNeedNeonPulsePinkFill{
  0%{
    background: linear-gradient(180deg, rgba(228, 49, 115, 0.12), rgba(36, 8, 22, 0.9));
    border-color: rgba(228, 49, 115, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 130, 198, 0.12);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    background: linear-gradient(180deg, rgba(228, 49, 115, 0.22), rgba(48, 12, 30, 0.91));
    border-color: rgba(228, 49, 115, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 160, 210, 0.22),
      inset 0 0 22px rgba(228, 49, 115, 0.12);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    background: linear-gradient(180deg, rgba(228, 49, 115, 0.12), rgba(36, 8, 22, 0.9));
    border-color: rgba(228, 49, 115, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 130, 198, 0.12);
    animation-timing-function: linear;
  }
  100%{
    background: linear-gradient(180deg, rgba(228, 49, 115, 0.12), rgba(36, 8, 22, 0.9));
    border-color: rgba(228, 49, 115, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 130, 198, 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.neonFrame--pink.pdcFieldNeedAttention{
    animation: none;
    background: linear-gradient(180deg, rgba(228, 49, 115, 0.2), rgba(40, 10, 26, 0.9));
    border-color: rgba(228, 49, 115, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 160, 210, 0.2);
    will-change: auto;
  }
}
/* One moving pulse in the recipe gate: `pdc-app.js` sets `data-pdc-recipe-gate-pulse` on `main.grid.dashboard`
 * (round: `style` → `balls` → `weight`; pan: `style` → `pan`). Lower-priority fields keep static “needs input”. */
main.grid.dashboard[data-pdc-recipe-gate-pulse] :is(
    #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
    #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
    #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention
  ):not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse] :is(
    #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
    #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention,
    #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention
  ):not(.pdcRecipeGatePulseActive){
  animation: none !important;
  will-change: auto;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive),
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive),
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  animation: none;
  will-change: auto;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before{
  opacity: 0.8;
  filter: none;
  box-shadow: 0 0 0 2px var(--nf-glow), 0 0 8px rgba(75, 248, 254, 0.22);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive),
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #panDoughField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.24), rgba(8, 18, 42, 0.9));
  border-color: rgba(75, 248, 254, 0.66);
  box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.28);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention::before{
  opacity: 0.72;
  filter: none;
  box-shadow: 0 0 0 2px var(--nf-glow), 0 0 6px rgba(228, 49, 115, 0.18);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="style"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention{
  background: linear-gradient(180deg, rgba(228, 49, 115, 0.2), rgba(40, 10, 26, 0.9));
  border-color: rgba(228, 49, 115, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 160, 210, 0.2);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  animation: none;
  will-change: auto;
}
/* Active step = dough balls (attribute + class — survives chain “hold” rules above). */
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="balls"] #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation-name: pdcRecipeGateRingPulse !important;
  animation-duration: var(--pdc-recipe-gate-pulse) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="balls"] #ballsField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulseFill var(--pdc-recipe-gate-pulse) linear infinite calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before{
  opacity: 0.72;
  filter: none;
  box-shadow: 0 0 0 2px var(--nf-glow), 0 0 6px rgba(228, 49, 115, 0.18);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="balls"] #portionWeightField.field.neonFrame.neonFrame--pink.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  background: linear-gradient(180deg, rgba(228, 49, 115, 0.2), rgba(40, 10, 26, 0.9));
  border-color: rgba(228, 49, 115, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 160, 210, 0.2);
}
/* Active step = pan dough (pan planner styles). */
main.grid.dashboard[data-pdc-recipe-gate-pulse="pan"] #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="pan"] #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation-name: pdcRecipeGateRingPulse !important;
  animation-duration: var(--pdc-recipe-gate-pulse) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="pan"] #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="pan"] #panDoughField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulseFill var(--pdc-recipe-gate-pulse) linear infinite calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before,
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  animation: none;
  will-change: auto;
}
/* Active step = ball weight. */
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="weight"] #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation-name: pdcRecipeGateRingPulsePink !important;
  animation-duration: var(--pdc-recipe-gate-pulse) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-delay: calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive,
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="weight"] #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulsePinkFill var(--pdc-recipe-gate-pulse) linear infinite calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before{
  opacity: 0.8;
  filter: none;
  box-shadow: 0 0 0 2px var(--nf-glow), 0 0 8px rgba(75, 248, 254, 0.22);
}
main.grid.dashboard[data-pdc-recipe-gate-pulse="weight"] #ballsField.field.neonFrame.neonFrame--cyan.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive){
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.24), rgba(8, 18, 42, 0.9));
  border-color: rgba(75, 248, 254, 0.66);
  box-shadow: inset 0 1px 0 rgba(75, 248, 254, 0.28);
}
/* While one gate step is active: freeze every other sidebar neon box (Android/WebView paint isolation). */
main.grid.dashboard[data-pdc-recipe-gate-pulse] .pdcSidebarColumn{
  isolation: isolate;
}
main.grid.dashboard[data-pdc-recipe-gate-pulse] .pdcSidebarColumn .field.neonFrame:not(.pdcRecipeGatePulseActive),
main.grid.dashboard[data-pdc-recipe-gate-pulse] .pdcSidebarColumn .field.neonFrame:not(.pdcRecipeGatePulseActive)::before{
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Active gate field: compositor layer; ring opacity + fill (see keyframes above). */
main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn :is(
    #ballsField,
    #panDoughField,
    #portionWeightField
  ).field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  isolation: isolate;
  position: relative;
  z-index: 2;
  overflow: visible;
  transform: translateZ(0);
}
main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn :is(
    #ballsField,
    #panDoughField
  ).field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation: pdcRecipeGateRingPulse var(--pdc-recipe-gate-pulse) linear infinite calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive::before{
  animation: pdcRecipeGateRingPulsePink var(--pdc-recipe-gate-pulse) linear infinite calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  filter: none !important;
  will-change: opacity;
}
main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn :is(
    #ballsField,
    #panDoughField
  ).field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulseFill var(--pdc-recipe-gate-pulse) linear infinite calc(var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn #portionWeightField.field.pdcFieldNeedAttention.pdcRecipeGatePulseActive{
  animation: pdcFieldNeedNeonPulsePinkFill var(--pdc-recipe-gate-pulse) linear infinite calc(2 * var(--pdc-recipe-gate-pulse) / 3) !important;
  will-change: background, border-color;
}
/* Results column: no mirrored hero pulse (was repainting flour / ingredient cards). */
main.grid.dashboard[data-pdc-recipe-gate-pulse] .heroSub.heroSummary .heroSumBlock{
  animation: none !important;
  will-change: auto;
}
: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);
}
/* Thumb + typical temp/cook/vessel: stacked on wide dashboard; side-by-side on single column. */
#styleInfo .styleInfoDetailRow{
  margin-top: 10px;
}
#styleInfo .styleInfoDetailRow--afterContext{
  margin-top: 12px;
}
#styleInfo .styleInfoDetailRow .styleInfoFacts{
  margin-top: 0;
}
#styleInfo .styleInfoThumb{
  display: none;
}
@media (max-width: 980px){
  #styleInfo .styleInfoDetailRow:has(.styleInfoThumb){
    display: grid;
    grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
  }
  #styleInfo .styleInfoThumb{
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(0, 132, 255, 0.45);
    background: linear-gradient(180deg, rgba(0, 8, 18, 0.55), rgba(0, 5, 12, 0.72));
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.28),
      0 0 12px rgba(0, 132, 255, 0.1);
  }
  #styleInfo .styleInfoThumbImg{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: 96px;
    object-fit: cover;
    object-position: center;
  }
}
#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{
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px 18px 40px;
  border: 4px solid var(--border);
  border-radius: 22px;
  /* Reduce Android/Blink scroll-anchoring nudges when card content height changes (+/−, auto chips). */
  overflow-anchor: none;
  /* 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;
  min-width: 0;
  box-sizing: border-box;
}

/* `html.pdcPizzaStylesCodex` is still used for card `container-type` (see below); page zoom matches other shells. */

/* 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;
  /* Shared with thin header art + IG logo sizing in burger / forced-burger mode. */
  --pixel-nav-burger-icon-h: clamp(16px, 4vw, 22px);
  /* 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 / DOUGH 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 icon height; heading image uses 2× this in burger / forced-burger mode. */
  --pixel-nav-burger-icon-h: clamp(16px, 4vw, 22px);
}
/* 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;
}
.pixelNavThinBrandVisual{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  line-height: 0;
  vertical-align: bottom;
}
/* CRT shell on nav header art (burger / forced-burger). --pdcThinCrtT: 0 = normal (always on);
 * 1 = very heavy (JS sets 1→0 during pixel reveal, then removes the var). */
.pixelNav.pixelNav--burger .pixelNavThinBrandVisual,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual{
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 5px;
  isolation: isolate;
  --pdcThinCrtT: 0;
  filter: contrast(calc(1.04 + 0.14 * var(--pdcThinCrtT)))
    saturate(calc(1.08 + 0.2 * var(--pdcThinCrtT)))
    brightness(calc(0.985 - 0.09 * var(--pdcThinCrtT)));
}
.pixelNav.pixelNav--burger .pixelNavThinBrandVisual::before,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(0.56 + 0.36 * var(--pdcThinCrtT));
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0 1px,
      rgba(0, 0, 0, calc(0.26 + 0.32 * var(--pdcThinCrtT))) 1px 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0 2px,
      rgba(255, 255, 255, calc(0.018 + 0.045 * var(--pdcThinCrtT))) 2px 3px
    );
}
.pixelNav.pixelNav--burger .pixelNavThinBrandVisual::after,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual::after{
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  opacity: calc(0.72 + 0.16 * var(--pdcThinCrtT));
  background-image:
    radial-gradient(
      ellipse 72% 95% at 50% 48%,
      rgba(0, 255, 160, calc(0.03 + 0.1 * var(--pdcThinCrtT))) 0%,
      transparent 38%,
      rgba(0, 0, 0, 0) 42%,
      rgba(10, 4, 28, calc(0.48 + 0.28 * var(--pdcThinCrtT))) 100%
    ),
    linear-gradient(
      92deg,
      rgba(255, 0, 90, calc(0.03 + 0.06 * var(--pdcThinCrtT))),
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 200, 255, calc(0.03 + 0.05 * var(--pdcThinCrtT)))
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(0.02 + 0.05 * var(--pdcThinCrtT))) 0%,
      rgba(0, 0, 0, 0) 18%,
      rgba(0, 0, 0, calc(0.06 + 0.1 * var(--pdcThinCrtT))) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(75, 248, 254, calc(0.07 + 0.1 * var(--pdcThinCrtT))),
    inset 0 0 calc(16px + 18px * var(--pdcThinCrtT)) rgba(0, 0, 0, calc(0.38 + 0.22 * var(--pdcThinCrtT))),
    inset 0 2px calc(10px + 8px * var(--pdcThinCrtT)) rgba(167, 120, 255, calc(0.1 + 0.12 * var(--pdcThinCrtT)));
  animation: pdcThinBrandCrtFlicker 3.8s ease-in-out infinite;
}
@keyframes pdcThinBrandCrtFlicker{
  0%,
  100%{
    filter: brightness(1);
  }
  12%{
    filter: brightness(1.05);
  }
  24%{
    filter: brightness(0.93);
  }
  41%{
    filter: brightness(1.03);
  }
  58%{
    filter: brightness(0.91);
  }
  73%{
    filter: brightness(1.02);
  }
}
@media (prefers-reduced-motion: reduce){
  .pixelNav.pixelNav--burger .pixelNavThinBrandVisual::after,
  html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual::after{
    animation: none !important;
    filter: none;
  }
  .pixelNav.pixelNav--burger .pixelNavThinBrandVisual,
  html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual{
    filter: contrast(1.05) saturate(1.06) brightness(0.98);
  }
}
.pixelNavThinBrandCanvas{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Fallback if JS never runs: keep the real `<img>` visible (no blank strip). */
.pixelNavThinBrandVisual--reveal .pixelNavThinBrandImg{
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .pixelNavThinBrandCanvas{
    display: none !important;
  }
  .pixelNavThinBrandVisual--reveal .pixelNavThinBrandImg{
    opacity: 1 !important;
  }
}
.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: auto;
  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: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.pixelNav.pixelNav--burger .pixelNavThinBrandImg,
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandImg{
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  height: calc(2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)));
  max-width: 100%;
  max-height: calc(2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)));
  object-fit: contain;
  object-position: center center;
}
/* Main dashboard grid is one column below 650px; shrink nav header art 15% so it fits narrow strips. */
@media (max-width: 649px){
  .pixelNav.pixelNav--burger .pixelNavThinBrandImg,
  html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandImg{
    height: calc(0.85 * 2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)));
    max-height: calc(0.85 * 2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)));
    max-width: 100%;
  }
}
/* 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: var(--pixel-nav-burger-icon-h, 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); /* unused while open (fixed + JS); fallback if align skipped */
  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):not(.pixelNav--overflowMenu) .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;
}
/* Preferences row bumped above nav links while the sheet is in use (pdc-settings-nav.js). */
@keyframes pdcBurgerPrefsBump{
  0%{
    transform: translateY(10px);
    opacity: 0.82;
  }
  55%{
    transform: translateY(-3px);
    opacity: 1;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.pixelNavBurgerPanel--prefsBumped .pixelNavBurgerPrefsDetails--bumped .settingsDockBurger.isActive{
  animation: pdcBurgerPrefsBump 0.38s cubic-bezier(0.34, 1.2, 0.48, 1);
  padding: 0;
}
.pixelNavBurgerPanel--prefsBumped .pixelNavBurgerPrefsDetails--bumped .settingsDockBurger.isActive .settingsPanel{
  border-color: rgba(75, 248, 254, 0.42);
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.12),
    0 0 14px rgba(75, 248, 254, 0.14);
}
/* Focus mode: hide the “Preferences” chooser row; show options only. */
.pixelNavBurgerPanel--prefsBumped .pixelNavBurgerPrefsDetails--bumped > .pixelNavBurgerPrefsSummary{
  display: none !important;
}
/* Preferences focus: hide site links until burger or off-menu dismiss (pdc-settings-nav.js). */
.pixelNavBurgerPanel--prefsBumped .pixelNavBurgerPanelLinks{
  display: none !important;
  visibility: hidden;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.pixelNavBurgerPanel--prefsBumped{
  /* Single-column prefs sheet while focus mode is active. */
  grid-template-columns: 1fr;
}
@media (prefers-reduced-motion: reduce){
  .pixelNavBurgerPanel--prefsBumped .pixelNavBurgerPrefsDetails--bumped .settingsDockBurger.isActive{
    animation: none;
  }
}
.pixelNavBurgerPanel.isOpen{
  display: grid;
  position: fixed;
  z-index: 110;
  left: auto;
  /* `top` / `right` set in JS so the panel top meets the sticky nav bottom border (no gap). */
}
.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 button.pixelNavBurgerLink{
  width: 100%;
  margin: 0;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}
.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);
}
/* Mix now · Eat later — distinct promo chip in the burger drawer. */
.pixelNavBurgerPanel .pixelNavBurgerLink--eatPlan{
  position: relative;
  overflow: hidden;
  margin-top: clamp(6px, 1.6vw, 10px);
  border-color: rgba(255, 196, 72, 0.55);
  background:
    linear-gradient(135deg, rgba(72, 38, 4, 0.42) 0%, rgba(28, 12, 2, 0.28) 55%, rgba(90, 74, 149, 0.12) 100%),
    rgba(18, 10, 4, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 120, 0.12),
    0 0 14px rgba(255, 160, 40, 0.14);
  color: rgba(255, 236, 170, 0.98);
  text-shadow: 0 0 10px rgba(255, 196, 72, 0.35);
}
.pixelNavBurgerPanel .pixelNavBurgerLink--eatPlan::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 8%,
    rgba(255, 214, 96, 0.22) 14%,
    rgba(255, 248, 220, 0.92) 22%,
    rgba(255, 160, 48, 0.38) 30%,
    transparent 40%,
    transparent 54%,
    rgba(255, 200, 120, 0.2) 62%,
    rgba(255, 252, 235, 0.88) 70%,
    rgba(255, 176, 48, 0.34) 78%,
    transparent 88%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(0.5px) saturate(1.35);
  transform: translateX(-110%);
  animation: pdcEatPlanHeadingShimmer 6s ease-in-out 0.8s infinite;
  will-change: transform;
}
@keyframes pdcEatPlanHeadingShimmer{
  0%   { transform: translateX(-110%); }
  18%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce){
  .pixelNavBurgerPanel .pixelNavBurgerLink--eatPlan::after{
    animation: none;
    opacity: 0;
  }
}
.pixelNavBurgerPanel .pixelNavBurgerLink--eatPlan:hover,
.pixelNavBurgerPanel .pixelNavBurgerLink--eatPlan:focus-visible{
  background:
    linear-gradient(135deg, rgba(96, 48, 6, 0.52) 0%, rgba(36, 16, 4, 0.36) 55%, rgba(100, 82, 168, 0.16) 100%),
    rgba(24, 12, 4, 0.42);
  border-color: rgba(255, 214, 96, 0.72);
  filter: brightness(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 140, 0.2),
    0 0 18px rgba(255, 176, 48, 0.22);
}
.pixelNav.pixelNav--burger .pixelNavBurgerBtn{
  display: inline-flex;
}
.pixelNav.pixelNav--burger .pixelNavLink{
  display: none;
  pointer-events: none;
}
html.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavLink:not(.pixelNavBurgerLink){
  pointer-events: none;
}
.pixelNav.pixelNav--burger .pixelNavCap--end{
  display: none;
}

/* Normal (top) menu: four primary tabs visible; overflow (About, IG, eat plan, prefs) in burger. */
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavInstagram,
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavSettings,
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) a.pixelNavLink:not(.pdcNavPrimary),
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrand,
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavCap--end,
.pixelNav.pixelNav--overflowMenu .pixelNavInstagram,
.pixelNav.pixelNav--overflowMenu .pixelNavSettings,
.pixelNav.pixelNav--overflowMenu a.pixelNavLink:not(.pdcNavPrimary),
.pixelNav.pixelNav--overflowMenu .pixelNavThinBrand,
.pixelNav.pixelNav--overflowMenu .pixelNavCap--end{
  display: none !important;
}
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBarEnd,
.pixelNav.pixelNav--overflowMenu .pixelNavBarEnd{
  display: flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-left: auto !important;
  min-width: 0 !important;
}
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerCluster,
.pixelNav.pixelNav--overflowMenu .pixelNavBurgerCluster{
  display: flex !important;
  align-self: center !important;
}
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerBtn,
.pixelNav.pixelNav--overflowMenu .pixelNavBurgerBtn{
  display: inline-flex !important;
}
html.pdcPrefNormalMenu .pixelNav:not(.pixelNav--bottomQuick) a.pixelNavLink.pdcNavPrimary,
.pixelNav.pixelNav--overflowMenu a.pixelNavLink.pdcNavPrimary{
  display: inline-flex !important;
}

/* 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):not(.pdcPrefNormalMenu) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavLink,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger):not(.pdcPrefNormalMenu) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavCap--end{
  visibility: hidden;
}
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger):not(.pdcPrefNormalMenu) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerTitle,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger):not(.pdcPrefNormalMenu) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerBtn,
html:not(.pdcNavLayoutReady):not(.pdcPrefForceBurger):not(.pdcPrefNormalMenu) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBarEnd{
  visibility: hidden;
}
html.pdcPrefNormalMenu:not(.pdcNavLayoutReady) .pixelNav:not(.pixelNav--bottomQuick) a.pixelNavLink.pdcNavPrimary{
  visibility: visible;
}
html.pdcPrefNormalMenu:not(.pdcNavLayoutReady) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerBtn,
html.pdcPrefNormalMenu:not(.pdcNavLayoutReady) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBurgerCluster,
html.pdcPrefNormalMenu:not(.pdcNavLayoutReady) .pixelNav:not(.pixelNav--bottomQuick) .pixelNavBarEnd{
  visibility: visible;
}

.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: 0;
  padding: 5px clamp(6px, 1.8vw, 10px);
  margin: 0 0 0 -10px;
  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;
}
.pixelNavInstagram .pixelNavSocialSvg{
  margin-top: 2px;
}
.pixelNavSocialSvg{
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Match thin header art height minus 5px breathing room top and bottom. */
  max-height: calc(2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)) - 10px);
  aspect-ratio: 1;
  object-fit: contain;
}
@media (max-width: 649px){
  .pixelNavSocialSvg{
    max-height: calc(0.85 * 2 * var(--pixel-nav-burger-icon-h, clamp(16px, 4vw, 22px)) - 10px);
  }
}
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;
}
html.pdcBottomQuickNavOn{
  --pdcBottomQuickBarH: 52px;
}
@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;
  }
}

/* Narrow / single-column viewports: footer bar = icons only; icons scale to bar depth. */
@media (max-width: 980px){
  html.pdcBottomQuickNavOn{
    --pdcBottomQuickBarH: 62px;
  }
  html.pdcBottomQuickNavOn .pixelNav.pixelNav--bottomQuick .pixelNavText{
    display: none;
  }
  html.pdcBottomQuickNavOn .pixelNav.pixelNav--bottomQuick .pixelNavInner--bottomQuick{
    min-height: 56px;
    padding: 5px 4px 6px;
    box-sizing: border-box;
    align-items: stretch;
  }
  html.pdcBottomQuickNavOn .pixelNav.pixelNav--bottomQuick .pixelNavLink{
    flex-direction: row;
    gap: 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 4px 2px;
    font-size: 0;
    line-height: 0;
  }
  html.pdcBottomQuickNavOn .pixelNav.pixelNav--bottomQuick .pixelNavIconImg{
    flex: 0 0 auto;
    width: min(
      48px,
      calc((100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 4 - 6px)
    );
    height: min(48px, calc(100% - 8px));
    max-height: calc(100% - 8px);
    object-fit: contain;
  }
}

/* Extra bottom padding on `.app` when the bottom bar is enabled (matches bar + safe area). */
html.pdcBottomQuickNavOn .app{
  padding-bottom: calc(40px + var(--pdcBottomQuickBarH) + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 980px){
  html.pdcBottomQuickNavOn .app{
    padding-bottom: calc(38px + var(--pdcBottomQuickBarH) + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 640px){
  html.pdcBottomQuickNavOn .app{
    padding-bottom: calc(36px + var(--pdcBottomQuickBarH) + 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;
  overflow-anchor: none;
}
/* Phantom dismiss: real `.topBrand` is `position: fixed` (set inline) and only
 * transforms — `pdc-top-brand-scroll.js` pins `header.top` with a temporary
 * min-height so layout length stays stable until teardown (works in row + column
 * header modes; a flex sibling spacer would break the ≥901px banner row). */
.topBrand.hero-dismiss-sliding{
  z-index: 105;
  pointer-events: none;
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.topBrand.hero-dismiss-sliding.hero-dismiss-sliding--out{
  transform: translate3d(0, calc(-110vh - 24px), 0);
}
@media (prefers-reduced-motion: reduce){
  .topBrand.hero-dismiss-sliding{
    transition: none !important;
  }
}
.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,
.topBrandCrtHost.topBrandCrtHost--crtOn .heroStyleImg{
  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;
}

/* One-way "dismissing hero": once the user has scrolled the dashboard title PNG
 * fully out of the viewport upward, `pdc-top-brand-scroll.js` runs a "phantom"
 * sequence: a temporary `min-height` on `header.top` keeps document length stable
 * while the bitmap is `position: fixed` and translated upward (it scrolls off
 * visually without tugging the layout). Then the pin is cleared, `.hero-dismissed`
 * collapses the brand, and scroll is corrected once so nothing snaps back.
 * Scrolling up does NOT restore the art. Fresh navigation re-shows the brand.
 *
 * `overflow-anchor: none` on `.topBrand` avoids extra anchoring nudges on the
 * final collapsed state.
 * The script ONLY applies this class when the brand is rendered as a
 * full-width banner (single-column dashboard, stacked header that spans both
 * columns, or any narrow viewport where the brand is 100% of the header). In
 * the desktop two-column "left-lane" layout the brand stays put — it shares
 * the header line with the chip rails and dismissing it would leave the chips
 * orphaned mid-page. */
.topBrand.hero-dismissed{
  block-size: 0 !important;
  min-block-size: 0 !important;
  max-block-size: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  border-block-width: 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  /* Instant final state: the visible dismiss is the phantom translate; animating
   * block-size/opacity here made headings + chips pulse or drift for ~360ms. */
  transition: none;
}

/* Dashboard `header.top` is the first row of `main.grid.dashboard` — subgrid aligns the
 * title art with column 1 and `.topPlanStylesGroup` with column 2 (Fold inner, tablets, desktop).
 * Hero fold (`dashboard--hideCol1`) keeps the same two parent columns on `main` so this row
 * is unchanged; only the results card spans both tracks below. */
main.grid.dashboard:not(.knowledgeMain) > header.top{
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 0 18px;
  position: relative;
  align-items: start;
  justify-items: stretch;
  column-gap: var(--pdc-dashboard-grid-gap);
  row-gap: 0;
}
@supports (grid-template-columns: subgrid){
  main.grid.dashboard:not(.knowledgeMain) > header.top{
    display: grid;
    grid-template-columns: subgrid;
  }
}
@supports not (grid-template-columns: subgrid){
  main.grid.dashboard:not(.knowledgeMain) > header.top{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pdc-dashboard-grid-gap);
  }
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topBrand,
main.grid.dashboard:not(.knowledgeMain) > header.top .topRight:not(.topRight--phantom){
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
main.grid.dashboard:not(.knowledgeMain) > header.top > .topBrand{
  grid-column: 1;
  justify-self: start;
  margin-inline: 0;
}
main.grid.dashboard:not(.knowledgeMain) > header.top > .topRight:not(.topRight--phantom){
  grid-column: 2;
  align-items: stretch;
  justify-self: stretch;
  justify-content: flex-start;
}
/* Phantom “Save recipe” slot is layout-only on other pages — don’t push column 2 down. */
main.grid.dashboard:not(.knowledgeMain) > header.top .topActions{
  display: none;
}
/* Mix-now / Press Start art: centre on the column-2 track (matches results below). */
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup,
main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans,
main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlansMain{
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans{
  align-items: flex-start;
  justify-content: flex-start;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .bakeReadyPlansHead > .eatPlanChipTopHome:not(:empty){
  width: max-content;
  max-width: 100%;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .bakeReadyPlansHead{
  align-self: center;
  width: 100%;
  margin-top: 0;
  z-index: 0;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .topQuickStylesStrip,
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .topBakeReadyPlans{
  position: relative;
  z-index: 1;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topBrandImg,
main.grid.dashboard:not(.knowledgeMain) > header.top .topBrandCrtHost,
main.grid.dashboard:not(.knowledgeMain) > header.top .topBrandBtn{
  max-width: 100%;
}
main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup{
  align-self: start;
  align-content: flex-start;
  justify-content: flex-start;
  margin-top: 0;
  transform: none;
  container-type: inline-size;
  container-name: pdcTopPlanStyles;
}
main.grid.dashboard:not(.knowledgeMain) > header.top > .topBrand,
main.grid.dashboard:not(.knowledgeMain) > header.top > .topRight:not(.topRight--phantom){
  align-self: start;
}
/* Column-2 header rails: wrap + shrink (beats generic ≥901px `min-width: min(380px, 30vw)` on `.top .chipRow`). */
main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans .chipRow,
main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip .topQuickStyles .chipRow{
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  overflow: hidden;
}
main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips,
main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips{
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  overflow: visible;
  max-width: 100%;
  min-width: 0;
  transform-origin: center center;
}
main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
  white-space: nowrap;
  flex: 0 0 auto;
}
@supports (width: 1cqi){
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .eatPlanChipArtBase,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .eatPlanChipArtText{
    width: min(100%, clamp(280px, 88cqi, 520px));
    max-width: min(100%, clamp(280px, 88cqi, 520px));
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .quickStylesLabel{
    font-size: clamp(
      calc(var(--fs-h-9) + 3.5pt),
      calc(var(--fs-h-9) + 2pt + 0.42cqi),
      calc(var(--fs-h-9) + 6.5pt)
    );
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup{
    gap: clamp(8px, 1.15cqi, 14px);
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .topQuickStylesStrip{
    margin-top: clamp(-6px, calc(2.4cqi - 11px), 1px);
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
    padding-inline: clamp(8px, 1.15cqi + 4px, 14px);
    min-height: unset;
    font-size: clamp(11px, 0.95cqi + 7px, calc(var(--fs-h-9) + 1pt));
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
    padding-block: clamp(4px, 0.2cqi + 3px, 6px);
    border-radius: 4px;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips,
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips{
    gap: clamp(6px, 1cqi, 12px);
  }
}
@media (min-width: 901px){
  @supports not (width: 1cqi){
    main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .eatPlanChipArtBase,
    main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .eatPlanChipArtText{
      width: min(100%, 92%);
      max-width: min(100%, 520px);
    }
    main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup .quickStylesLabel{
      font-size: calc(var(--fs-h-9) + 4.5pt);
    }
  }
}
@media (min-width: 901px){
  main.grid.dashboard{
    --pdc-top-right-slot: min(
      440px,
      max(
        clamp(200px, 32vw, 420px),
        calc(min(380px, 30vw) + 18px)
      )
    );
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top{
    padding-inline-end: 0;
  }
  main.grid.dashboard > header.top .topBrandBtn{
    text-align: left;
  }
  /* Phantom header lane (Flours / Styles): still a direct child of `.app`. */
  .app > header.top .topRight--phantom{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    left: auto;
    width: auto;
    max-width: none;
  }
}

/*
 * 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`). */
main.grid.dashboard > header.top.top--brandTight > .topBrand{
  width: min(var(--topBrandMax, 200px), 100%) !important;
  max-width: min(var(--topBrandMax, 200px), 100%) !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);
}
/* Phantom + non-dashboard `.top`: match Quick-styles rack footprint to Flour / Styles.
 * Dashboard `main > header.top` uses column-2 wrap rules above — no fixed chip min-width. */
@media (min-width: 901px){
  header.top:not(.dashboardGridHeader) .topRight:not(.topRight--phantom) .topBakeReadyPlans .chipRow,
  header.top:not(.dashboardGridHeader) .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;
}
/* Calculation dungeon — header art opens floor; content overlays dungeonfloor.webp. */
.pdcCalculationDungeon{
  --pdc-dungeon-floor-tuck: clamp(40px, 8.5%, 92px);
  /* dungeonfloor.webp 800×2395 — scroll inset as fractions of art (scales with stage). */
  --pdc-dungeon-art-w: 800;
  --pdc-dungeon-art-h: 2395;
  --pdc-dungeon-throne-bottom: 0.36; /* dough king seat from top (÷ art height) */
  --pdc-dungeon-scroll-top: 0.2556;
  --pdc-dungeon-scroll-left: 0.162;
  --pdc-dungeon-scroll-width: 0.676;
  /* Widen parchment vs art inset: +30px per side (all dungeon scrolls). */
  --pdc-dungeon-scroll-expand-side: 30px;
  /* Parchment bottom sits this far above the floor art bottom (scroll height = remainder). */
  --pdc-dungeon-scroll-bottom-gap: 0.02;
  --pdc-dungeon-scroll-height: calc(
    1 - var(--pdc-dungeon-scroll-top) - var(--pdc-dungeon-scroll-bottom-gap)
  );
  --pdc-dungeon-scroll-offset-y: 0px;
  --pdc-dungeon-scroll-height-extra: 0px;
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 8px);
}
.pdcCalculationDungeonTrigger{
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
}
.pdcCalculationDungeonTrigger:focus-visible{
  outline: 2px solid rgba(255, 107, 203, 0.95);
  outline-offset: 2px;
}
/* Chain hanger bar across the top of calculationdungeon / calc+ header art (not Easy doughjo). */
.pdcCalculationDungeon:not(.pdcCalculationDungeon--easyArt) .pdcCalculationDungeonTrigger::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(72, 62, 52, 0.98) 0%,
    rgba(42, 36, 30, 1) 55%,
    rgba(28, 24, 20, 1) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 200, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.35);
}
/* Shimmer over the “ENTER AT YOUR OWN RISK” sign (baked into header art). */
@keyframes pdcDungeonRiskShimmer{
  0%, 78%, 100%{
    background-position: 130% 0;
    opacity: 0;
  }
  84%{
    opacity: 0.55;
  }
  92%{
    background-position: -30% 0;
    opacity: 0.35;
  }
}
.pdcCalculationDungeonTrigger::after{
  content: "";
  position: absolute;
  /* % only (no px): scales with the image box when width is 100% + height auto. */
  top: var(--pdc-dungeon-risk-shimmer-top, 13.9%);
  left: var(--pdc-dungeon-risk-shimmer-left, 33.4%);
  width: var(--pdc-dungeon-risk-shimmer-width, 30.9%);
  height: var(--pdc-dungeon-risk-shimmer-height, 10.6%);
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
  mix-blend-mode: screen;
  background: linear-gradient(
    100deg,
    transparent 36%,
    rgba(255, 200, 140, 0.35) 44%,
    rgba(255, 255, 245, 0.85) 50%,
    rgba(255, 180, 120, 0.4) 56%,
    transparent 64%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: pdcDungeonRiskShimmer 4.8s ease-in-out infinite;
}
.pdcCalculationDungeon--floorOpen .pdcCalculationDungeonTrigger::after{
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .pdcCalculationDungeonTrigger::after{
    display: none;
  }
}
.pdcCalculationDungeonImg{
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  transform-origin: center 68%;
}
/* Scroll-into-view nudge: the DoughJo (Easy), Calculation Dungeon (Normal) and
 * Dungeon+ (Wizard) header art is a button. When it scrolls into the viewport it
 * does one short wiggle so users realise they can click it to open the floor. */
.pdcCalculationDungeonImg--inviteWiggle{
  animation: pdcDungeonInviteWiggle 1.15s ease-in-out 1;
  will-change: transform;
}
@keyframes pdcDungeonInviteWiggle{
  0%{ transform: rotate(0deg) scale(1); }
  10%{ transform: rotate(-2.6deg) scale(1.02); }
  22%{ transform: rotate(2.2deg) scale(1.02); }
  34%{ transform: rotate(-1.7deg) scale(1.015); }
  46%{ transform: rotate(1.2deg) scale(1.01); }
  58%{ transform: rotate(-0.6deg) scale(1.005); }
  70%, 100%{ transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .pdcCalculationDungeonImg--inviteWiggle{
    animation: none;
    will-change: auto;
  }
}
.pdcDungeonFloorStage{
  position: relative;
  width: 100%;
  max-width: calc(var(--pdc-dungeon-art-w, 800) * 1px);
  margin-inline: auto;
  aspect-ratio: var(--pdc-dungeon-art-w, 800) / var(--pdc-dungeon-art-h, 2395);
  background-image: url("./assets/Branding/dungeonfloor.webp?v=800");
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}
/* Collapsed by default; open shows floor art instantly (no unfurl animation). */
.pdcDungeonFloor{
  display: none;
  margin-top: 0;
  touch-action: pan-y;
}
.pdcCalculationDungeon--floorOpen .pdcDungeonFloor{
  display: block;
  margin-top: calc(-1 * var(--pdc-dungeon-floor-tuck) + 35px);
}
.pdcDungeonFloorCanvas{
  width: 100%;
  min-width: 0;
}
/* Normal: padded overlay on stage; page scrolls (no inner scroll trap). */
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent{
  position: relative;
  z-index: 1;
  overflow: visible;
  padding:
    clamp(32px, 6.5vw, 72px)
    clamp(8px, 2.2vw, 18px)
    clamp(28px, 5.5vw, 64px);
}
/* Tale: scroll stamped with % insets inside fixed-ratio stage. */
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcWizardDungeon--tale) .pdcDungeonFloorContent,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcDoughJoDungeon--tale) .pdcDungeonFloorContent,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonEmpty:not([hidden])) .pdcDungeonFloorContent,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonBlocked:not([hidden])) .pdcDungeonFloorContent{
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: visible;
}
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcWizardDungeon--tale) .pdcDungeonFloorContent > #pdcWizardDungeon,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcDoughJoDungeon--tale) .pdcDungeonFloorContent > #pdcDoughJoDungeon,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonEmpty:not([hidden])) .pdcDungeonFloorContent > #pdcDungeonEmpty,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonBlocked:not([hidden])) .pdcDungeonFloorContent > #pdcDungeonBlocked{
  position: absolute;
  top: calc(var(--pdc-dungeon-scroll-top) * 100% + var(--pdc-dungeon-scroll-offset-y, 0px));
  left: calc(var(--pdc-dungeon-scroll-left) * 100% - var(--pdc-dungeon-scroll-expand-side, 0px));
  width: calc(
    var(--pdc-dungeon-scroll-width) * 100% + var(--pdc-dungeon-scroll-expand-side, 0px) +
      var(--pdc-dungeon-scroll-expand-side, 0px)
  );
  margin: 0;
  max-width: none;
}
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcWizardDungeon--tale) .pdcDungeonFloorContent > #pdcWizardDungeon,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcDoughJoDungeon--tale) .pdcDungeonFloorContent > #pdcDoughJoDungeon{
  height: calc(
    var(--pdc-dungeon-scroll-height) * 100% - var(--pdc-dungeon-scroll-offset-y, 0px) +
      var(--pdc-dungeon-scroll-height-extra, 0px)
  );
}
/* Intro scroll only: parchment ends where the copy ends (chronicle keeps full scroll height). */
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonEmpty:not([hidden])) .pdcDungeonFloorContent > #pdcDungeonEmpty,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonBlocked:not([hidden])) .pdcDungeonFloorContent > #pdcDungeonBlocked{
  height: auto;
  max-height: calc(
    var(--pdc-dungeon-scroll-height) * 100% - var(--pdc-dungeon-scroll-offset-y, 0px) +
      var(--pdc-dungeon-scroll-height-extra, 0px)
  );
}

/* Very narrow: floor + chronicle scroll span the viewport (small side margin); scroll inset fractions unchanged. */
@media (max-width: 649px) {
  .pdcCalculationDungeon--floorOpen {
    --pdc-dungeon-page-gutter: 10px;
    --pdc-dungeon-scroll-left: 0.03;
    --pdc-dungeon-scroll-width: 0.94;
  }

  main.grid.dashboard:not(.knowledgeMain) > .pdcCalculationDungeon.pdcCalculationDungeon--floorOpen {
    box-sizing: border-box;
    width: calc(100vw - (2 * var(--pdc-dungeon-page-gutter, 10px)));
    max-width: none;
    margin-left: calc(50% - 50vw + var(--pdc-dungeon-page-gutter, 10px));
    margin-right: calc(50% - 50vw + var(--pdc-dungeon-page-gutter, 10px));
  }

  .pdcCalculationDungeon--floorOpen .pdcCalculationDungeonTrigger,
  .pdcCalculationDungeon--floorOpen .pdcCalculationDungeonTrigger .pdcCalculationDungeonImg {
    width: 100%;
    max-width: none;
  }

  .pdcCalculationDungeon--floorOpen .pdcDungeonFloorCanvas,
  .pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage {
    width: 100%;
    max-width: none;
  }

  .pdcCalculationDungeon--floorOpen .pdcDungeonTale--storybook {
    padding-left: clamp(10px, 2.8vw, 16px);
    padding-right: clamp(10px, 2.8vw, 16px);
  }
}

.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcWizardDungeon--tale) .pdcDungeonFloorContent::before,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(.pdcDoughJoDungeon--tale) .pdcDungeonFloorContent::before,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonEmpty:not([hidden])) .pdcDungeonFloorContent::before,
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorStage:has(#pdcDungeonBlocked:not([hidden])) .pdcDungeonFloorContent::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(
    ellipse 42% 62% at 50% 58%,
    rgba(8, 6, 18, 0.42) 0%,
    rgba(8, 6, 18, 0.12) 50%,
    transparent 74%
  );
}
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent > #pdcWizardDungeon:not([hidden]),
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent > #pdcDoughJoDungeon:not([hidden]),
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent > #pdcDungeonEmpty:not([hidden]),
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent > #pdcDungeonBlocked:not([hidden]){
  visibility: visible;
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
/* Empty-state panel: slightly more shade for the message card. */
.pdcCalculationDungeon--floorOpen
  .pdcDungeonFloorStage:not(:has(.pdcWizardDungeon--tale)):not(:has(.pdcDoughJoDungeon--tale))
  .pdcDungeonFloorContent::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 50%,
      rgba(10, 8, 24, 0.72) 0%,
      rgba(10, 8, 24, 0.35) 55%,
      transparent 100%
    );
}
.pdcCalculationDungeon--floorOpen .pdcDungeonFloorContent > *{
  position: relative;
  z-index: 1;
}
.pdcDungeonFloorContent{
  width: 100%;
  min-width: 0;
  z-index: 1;
  box-sizing: border-box;
  padding:
    clamp(56px, 11vw, 128px)
    clamp(12px, 4vw, 32px)
    clamp(48px, 10vw, 120px);
  pointer-events: none;
}
.pdcDungeonFloorContent > *{
  pointer-events: auto;
}
.pdcDungeonFloorContent > .pdcWizardDungeon{
  max-width: 920px;
  margin: 0 auto;
}
.pdcDungeonFloorContent > .pdcWizardDungeon[hidden],
.pdcDungeonFloorContent > #pdcDoughJoDungeon[hidden],
.pdcDungeonFloorContent > #pdcDungeonEmpty[hidden],
.pdcDungeonFloorContent > #pdcDungeonBlocked[hidden]{
  display: none !important;
}
/* Non–storybook empty (e.g. wizard page fallback). */
.pdcDungeonEmpty:not(.pdcDungeonTale--storybook){
  max-width: 520px;
  margin: clamp(80px, 16vw, 160px) auto;
  padding: 14px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(12, 10, 28, 0.88);
  border: 2px solid rgba(124, 92, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.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;
}
/* 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;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup > .bakeReadyPlansHead{
    margin-top: 10px;
  }
}
.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;
  overflow: hidden;
  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: center;
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: min(560px, 100%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 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%;
  height: 100%;
  min-height: 0;
  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;
}
/* Eat plan (top) + quick styles + bake-ready chips — column in `.topRight`. */
.topPlanStylesGroup{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 8px;
  margin-top: 0;
  transform: none;
}
.topPlanStylesGroup > .bakeReadyPlansHead{
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  position: relative;
  z-index: 0;
}
.topPlanStylesGroup > .topQuickStylesStrip,
.topPlanStylesGroup > .topBakeReadyPlans{
  position: relative;
  z-index: 1;
}
.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;
}
.topBakeReadyPlansMain{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Mix-now / Press Start chip — first row in `.topPlanStylesGroup`. */
.bakeReadyPlansHead{
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.bakeReadyPlansHead:has(.eatPlanChipTopHome:empty){
  display: none;
}
.eatPlanChipTopHome{
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.eatPlanChipTopHome:empty{
  display: none;
}
.eatPlanChipTopHome #eatPlanChip{
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  justify-content: center;
  font-size: calc(12px + 3pt);
}
.eatPlanChipTopHome #eatPlanChip.eatPlanChip--pressStart{
  font-size: 0;
  line-height: 0;
}
.topBakeReadyPlans .chipRow{
  justify-content: center;
}
/* 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: -6px;
}
/* Reset (left) + Save Recipe (right) 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;
}
/* Header plan/style chips: 4px vertical padding + subtler corners. */
#bakeReadyPlanChips .chip,
#quickStyleChips .chip{
  min-height: unset;
  padding-block: 4px;
  padding-inline: 8px;
  border-radius: 4px;
  touch-action: pan-y;
}
#bakeReadyPlanChips,
#quickStyleChips{
  touch-action: pan-y;
}
.topQuickStyles{
  flex: 1 1 auto;
  min-width: 0;
}
.topQuickStyles[hidden]{
  display: none !important;
}
/* Legacy: workflow presets used to hide quick styles (no longer applied — see syncHeaderQuickStylesWorkflowVisibility). */
.topQuickStylesStrip--workflowHidden .topQuickStyles{
  display: flex !important;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.topQuickStylesStrip--workflowHidden .quickStylesLabel,
.topQuickStylesStrip--workflowHidden #quickStyleChips{
  visibility: hidden;
  pointer-events: none;
}
.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) + 3.5pt);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffff33;
  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 combined plan + quick-styles group (labels + chip rows)
 * 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 plan + quick-styles group 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] .topPlanStylesGroup,
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. The manual
 * Eat date/time block is the field-based equivalent, so it hides for the same reason. */
html[data-eat-plan-active] #fermentManualStartBlock,
html[data-eat-plan-active] #fermentEatTargetBlock{
  display: none !important;
}

/* Manual "Eat date/time" target sits just under the start fields, with a 20px gap above
 * the heading to separate it from the start schedule. */
#fermentEatTargetBlock{
  margin-top: 20px;
}
.fermentEatTargetHint{
  margin-top: 6px;
}
/* Match the single Eat "Clear" chip to one start-date chip's width (the start row splits its
 * width between two `flex: 1 1 0` chips with a 10px gap, so each is calc(50% - 5px)). */
.field .row.fermentStartRow .fermentStartActions #eatTargetResetBtn{
  flex: 0 0 calc(50% - 5px);
  min-width: 0;
  max-width: 100%;
  justify-content: center;
}

.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: 6px !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: 10px;
  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 6px;
  font-weight: 800;
}
.settingsGroup{
  margin: 0 0 8px;
  padding: 8px 8px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.14);
}
.settingsGroup:last-child{
  margin-bottom: 0;
}
.settingsGroupHeading{
  font-family: inherit;
  font-size: var(--fs-b-11);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(122, 238, 255, 0.88);
  margin: 0 0 5px;
}
.settingsGroupBody .settingsRow:first-child{
  border-top: 0;
  padding-top: 0;
}
.settingsRow{
  display:grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items:center;
  justify-content: stretch;
  gap: 8px 10px;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.settingsGroupBody .settingsRow:last-child{
  padding-bottom: 4px;
}
.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: 6px 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: 3px;
  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: 38px;
  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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .row.fermentStartRow .fermentTimeWrap,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatTime,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatDate{
  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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatTime.fermentStartInput--live,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatDate.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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatTime.fermentStartInput--live:focus,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow #easyEatDate.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`): hide sidebar; results spans both `main` tracks
 * so the header row keeps the same two-column subgrid as unfolded (no header reflow).
 * Pizza Quest active: chip + eat sentence move to `#eatPlanQuestFoldHost` in results. */
main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) > .pdcSidebarColumn{
  display: none;
}
main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) > section.card.results{
  grid-column: 1 / -1;
}
.eatPlanQuestFoldHost[hidden]{
  display: none;
}
html[data-eat-plan-active] main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) .eatPlanQuestFoldHost: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);
}
html[data-eat-plan-active] main.grid.dashboard.dashboard--hideCol1:not(.knowledgeMain) .eatPlanQuestFoldHost:not([hidden]) #eatPlanChipActiveHome{
  margin-bottom: 0;
}

.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;
}

/* Results §7–9: slight right inset on main headings + oven runbook title (matches hero metric / export strip rhythm). */
section.card.results #sectionMixingHead .sectionTitle,
section.card.results #sectionTimelineHead .sectionTitle,
section.card.results #sectionBakeHead .sectionTitle,
section.card.results #ovenGuide .bakeSetupUnifiedSubHead{
  margin-left: 5px;
}

/* 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%;
}
.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);
}

/* Touch slide preview on dashboard quick / bake-ready chips (mirrors :hover; keeps activeGreen look). */
main.grid.dashboard:not(.knowledgeMain) #quickStyleChips .chip.pdcChipPreviewHover:not(.activeGreen),
main.grid.dashboard:not(.knowledgeMain) #bakeReadyPlanChips .chip.pdcChipPreviewHover:not(.activeGreen){
  border-color: rgba(75, 248, 254, 0.95);
  background: linear-gradient(180deg, rgba(75, 248, 254, 0.14), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 4px rgba(75, 248, 254, 0.12), 0 12px 26px rgba(0, 0, 0, 0.28);
}
main.grid.dashboard:not(.knowledgeMain) #quickStyleChips .chip.chipVarPink.pdcChipPreviewHover:not(.activeGreen){
  border-color: rgba(255, 251, 128, 0.92);
  background: linear-gradient(180deg, rgba(255, 251, 128, 0.12), rgba(10, 17, 61, 0.78));
  box-shadow: 0 0 0 4px rgba(255, 251, 128, 0.12), 0 12px 26px rgba(0, 0, 0, 0.28);
}
main.grid.dashboard:not(.knowledgeMain) #quickStyleChips .chip.chipVarCyan.pdcChipPreviewHover:not(.activeGreen){
  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);
}
main.grid.dashboard:not(.knowledgeMain) #bakeReadyPlanChips .chip.chipVarGold.pdcChipPreviewHover: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);
}
main.grid.dashboard:not(.knowledgeMain) :is(#quickStyleChips, #bakeReadyPlanChips) .chip.pdcChipPreviewHover--selected{
  transform: translateY(-1px);
}

/* 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);
}

/* Calculator: committed chips / segment “on” / icon toggles — same solid green + neon as Auto (`.eatPlanChip` keeps its own banner look). */
main.grid.dashboard:not(.knowledgeMain) .chip.activeGreen:not(.eatPlanChip),
main.grid.dashboard:not(.knowledgeMain) .chip.activeGreen:not(.eatPlanChip):hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.42),
    0 0 28px rgba(30, 181, 130, 0.18);
  filter: none;
}
main.grid.dashboard:not(.knowledgeMain)
  .chip:is(.chipVarPink, .chipVarCyan, .chipVarGold, .chipVarGreen).activeGreen:not(.eatPlanChip),
main.grid.dashboard:not(.knowledgeMain)
  .chip:is(.chipVarPink, .chipVarCyan, .chipVarGold, .chipVarGreen).activeGreen:not(.eatPlanChip):hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.42),
    0 0 28px rgba(30, 181, 130, 0.18);
}
main.grid.dashboard:not(.knowledgeMain) .segBtn.active{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.4),
    0 0 28px rgba(30, 181, 130, 0.16);
}
main.grid.dashboard:not(.knowledgeMain) #yeastModeSeg .segBtn.active{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.4),
    0 0 28px rgba(30, 181, 130, 0.16);
}
main.grid.dashboard:not(.knowledgeMain) .iconBtn.activeGreen,
main.grid.dashboard:not(.knowledgeMain) .iconBtn.activeGreen:hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.4),
    0 0 28px rgba(30, 181, 130, 0.16);
}
main.grid.dashboard:not(.knowledgeMain) :is(#coldHoursChips, #ballsChips, #ballWeightChips, #bakeReadyPlanChips, #panPlannerRow, #quickStyleChips) .chip.activeGreen:not(.eatPlanChip),
main.grid.dashboard:not(.knowledgeMain) :is(#coldHoursChips, #ballsChips, #ballWeightChips, #bakeReadyPlanChips, #panPlannerRow, #quickStyleChips) .chip.activeGreen:not(.eatPlanChip):hover,
main.grid.dashboard:not(.knowledgeMain) #sizeRow #sizeChips .chip.activeGreen,
main.grid.dashboard:not(.knowledgeMain) #sizeRow #sizeChips .chip.activeGreen:hover,
main.grid.dashboard:not(.knowledgeMain) #roomTempSizerField #roomTempChips .chip.activeGreen,
main.grid.dashboard:not(.knowledgeMain) #roomTempSizerField #roomTempChips .chip.activeGreen:hover,
main.grid.dashboard:not(.knowledgeMain) #prefermentSection #prefermentAutoChips .chip.activeGreen,
main.grid.dashboard:not(.knowledgeMain) #prefermentSection #prefermentAutoChips .chip.activeGreen:hover,
main.grid.dashboard:not(.knowledgeMain) .chip.sizeChip.activeGreen,
main.grid.dashboard:not(.knowledgeMain) .chip.sizeChip.activeGreen:hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.42),
    0 0 28px rgba(30, 181, 130, 0.18);
  filter: none;
}

/* 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; hover lifts + warms; press dips + confirms (green flash). */
#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);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, filter .14s ease;
}
#btnReset.chip:hover{
  border-color: rgba(255, 251, 128, 0.88);
  background: linear-gradient(180deg, rgba(255, 86, 158, 1), rgba(198, 38, 98, 1));
  box-shadow:
    0 0 0 4px rgba(255, 200, 230, 0.18),
    0 14px 32px rgba(228, 49, 115, 0.28),
    0 8px 22px rgba(0, 0, 0, 0.32);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
#btnReset.chip:focus-visible{
  outline: 2px solid rgba(75, 248, 254, 0.92);
  outline-offset: 3px;
}
#btnReset.chip:active{
  transform: translateY(2px) scale(0.985);
  filter: brightness(0.94);
  background: linear-gradient(180deg, rgba(42, 190, 130, 1), rgba(18, 118, 82, 1));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Normal ↔ Wizard: nudge Reset after a mode swap (recipe kept; reset optional). */
@keyframes pdcResetHintWobble{
  0%{ transform: translate3d(0, 0, 0) rotate(0deg); }
  18%{ transform: translate3d(0, -3px, 0) rotate(-2deg); }
  36%{ transform: translate3d(0, 2px, 0) rotate(1.6deg); }
  54%{ transform: translate3d(0, -2px, 0) rotate(-1.1deg); }
  72%{ transform: translate3d(0, 1px, 0) rotate(0.6deg); }
  100%{ transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes pdcResetHintFlash{
  0%, 100%{
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 4px rgba(228, 49, 115, 0.12);
    filter: brightness(1);
  }
  22%{
    border-color: rgba(255, 251, 128, 0.95);
    box-shadow:
      0 0 0 4px rgba(255, 236, 160, 0.42),
      0 0 18px rgba(255, 200, 100, 0.45),
      0 10px 28px rgba(228, 49, 115, 0.32);
    filter: brightness(1.12);
  }
  44%{
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 4px rgba(228, 49, 115, 0.16);
    filter: brightness(1.02);
  }
  66%{
    border-color: rgba(255, 251, 128, 0.92);
    box-shadow:
      0 0 0 4px rgba(255, 236, 160, 0.38),
      0 0 16px rgba(255, 200, 100, 0.4),
      0 8px 24px rgba(228, 49, 115, 0.28);
    filter: brightness(1.1);
  }
}
#btnReset.chip.pdcResetHint{
  animation:
    pdcResetHintWobble 0.95s cubic-bezier(0.34, 1.12, 0.55, 1) 1,
    pdcResetHintFlash 2.4s ease-in-out 1;
  transform-origin: 50% 88%;
}
#btnReset.chip.pdcResetHint--reduced{
  animation: pdcResetHintFlash 2s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce){
  #btnReset.chip.pdcResetHint{
    animation: pdcResetHintFlash 2s ease-in-out 2;
  }
}

/* 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;
}
/* `.hero { display: flex }` beats the UA `[hidden]` rule — keep hidden heroes out of layout. */
.hero[hidden]{
  display: none !important;
}

/* Easy shell nodes live in shared HTML but must not appear on Normal / Wizard. */
html:not(.pdcEasyPage) :is(
  #pdcEasyHero,
  #pdcEasyResultsWrap,
  #pdcEasyColumn,
  #pdcEasyStyleTvCol
){
  display: none !important;
}

/* 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: 1;
}
.card.results .hero.neonFrame.neonFrame--pink::before{
  display: none;
}

/* Two-column dashboard (650px+): keep the results-column neon ring behind hero content. */
@media (min-width: 650px){
  main.grid.dashboard:not(.knowledgeMain) > section.card.results{
    isolation: isolate;
  }
  main.grid.dashboard:not(.knowledgeMain) > section.card.results::before{
    z-index: 0;
  }
  main.grid.dashboard:not(.knowledgeMain) > section.card.results > :not(.pdcColumnBalanceStack){
    position: relative;
    z-index: 1;
  }
}

/* Column 1 on touch (`pdc-touch-guard.js` → `html.pdc-coarse-pointer` / `html.pdc-sidebar-press`):
 * Android keeps `.card:hover` after chip tap → sidebar lifts 1px + stronger shadow on the
 * column’s right edge (toward column 2). Sidebar chip `:hover` also adds a cyan/purple halo. */
html.pdc-coarse-pointer main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .card.sidebar,
html.pdc-coarse-pointer main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .card.sidebar:hover,
html.pdc-sidebar-press main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .card.sidebar{
  transform: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(16, 21, 61, 0.92), rgba(8, 16, 58, 0.82)) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
html.pdc-coarse-pointer main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn :is(.chip, .iconBtn):active,
html.pdc-sidebar-press main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn :is(.chip, .iconBtn):active{
  transform: none !important;
}
html.pdc-coarse-pointer .dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger):hover,
html.pdc-sidebar-press .dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger):hover{
  border-color: rgba(246, 249, 255, 0.48) !important;
  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) !important;
  transform: none !important;
  filter: none !important;
}
html.pdc-coarse-pointer .dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger):active,
html.pdc-sidebar-press .dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip:not(.activeGreen):not(.danger):active{
  filter: brightness(1.06);
}
html.pdc-coarse-pointer .dashboard .sidebar :is(.chip, .iconBtn),
html.pdc-coarse-pointer .dashboard .sidebar :is(#ballsChips, #ballWeightChips, #sizeChips) .chip{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.pdc-sidebar-press main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn .field.neonFrame:not(.pdcRecipeGatePulseActive)::before,
html.pdc-sidebar-press main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn .field.neonFrame.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive),
html.pdc-sidebar-press main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn .field.neonFrame.pdcFieldNeedAttention:not(.pdcRecipeGatePulseActive)::before{
  animation-play-state: paused !important;
}
@media (hover: none){
  html:not(.pdc-coarse-pointer) main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .card.sidebar,
  html:not(.pdc-coarse-pointer) main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .card.sidebar:hover{
    transform: none;
    border-color: var(--border);
    box-shadow: var(--shadow);
  }
}

/* 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. */
/* Column balance: shorter of `.card.sidebar` / `.card.results` stretches so both boxes share a bottom edge (mode chips sit above the sidebar). */
.columnBalanceBrand{
  display: none;
  width: var(--pdc-column-balance-brand-width, 100%);
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}
.columnBalanceBrand[data-balance-visible="true"]{
  display: block;
}
.pdcColumnBalanceStack .columnBalanceBrand[data-balance-visible="true"]{
  margin: 0;
}
/* Legacy col-1 flex host (balance now sets min-height on `.card.sidebar` / `.card.results`). */
.pdcSidebarColumn.is-column-balance-active{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
.pdcSidebarColumn.is-column-balance-active > .pdcModeChipsBar,
.pdcSidebarColumn.is-column-balance-active > .pdcModeChooserIntro,
.pdcSidebarColumn.is-column-balance-active > .eatPlanSection,
.pdcSidebarColumn.is-column-balance-active > .eatPlanChipActiveHome{
  flex: 0 0 auto;
}
.pdcSidebarColumn.is-column-balance-active > :is(#pdcNormalSidebar, #pdcEasyColumn){
  flex: 1 1 auto;
  min-height: 0;
}
section.card.results.is-column-balance-active,
section.card.sidebar.is-column-balance-active.pdcColumnBalanceHost{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}
/* Recipe column: never clip mixing / timeline / bake sections for filler art. */
section.card.results.is-column-balance-active,
section.card.results.is-column-balance-active.pdcColumnBalanceHost{
  overflow: visible;
}
section.card.results.is-column-balance-active.pdcColumnBalanceHost,
section.card.sidebar.is-column-balance-active.pdcColumnBalanceHost{
  flex: 0 0 auto;
  /* `paint` containment repainted the hero (style img, JumpScott, bars) on every balance pass. */
  contain: layout;
}
/* Never let column-balance host rules fight the reset-placeholder CRT loop. */
section.card.results.results--reset.is-column-balance-active,
section.card.results.results--reset.pdcColumnBalanceHost{
  display: block;
  contain: none;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}
section.card.results.is-column-balance-active > :not(.pdcColumnBalanceStack),
section.card.sidebar.pdcColumnBalanceHost > :not(.pdcColumnBalanceStack){
  flex: 0 0 auto;
}
main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1){
  align-items: start;
}
.pdcColumnBalanceSpacer{
  display: none !important;
}
.pdcColumnBalanceStack{
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: var(--pdc-balance-slack, auto);
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.pdcColumnBalanceStack.is-column-balance-active{
  display: flex;
}
/* Pin filler stack to the bottom of the stretched sidebar / results card. */
section.card.results.is-column-balance-active.pdcColumnBalanceHost > .pdcColumnBalanceStack.is-column-balance-active,
section.card.sidebar.is-column-balance-active.pdcColumnBalanceHost > .pdcColumnBalanceStack.is-column-balance-active{
  margin-top: auto;
  flex-shrink: 0;
}
.columnBalanceBrandImg{
  display: block;
  width: 100%;
  border-radius: inherit;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.pdcColumnBalanceStack > .columnBalanceBrand--fixed[data-balance-visible="true"]{
  flex: 0 0 auto;
  width: 100%;
  height: auto;
}
.pdcColumnBalanceStack > .columnBalanceBrand--fixed .columnBalanceBrandImg{
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}
.pdcColumnBalanceStack > .columnBalanceBrand--flexCrop[data-balance-visible="true"]{
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pdcColumnBalanceStack > .columnBalanceBrand--flexCrop.neonFrame::before{
  display: none !important;
  content: none !important;
}
.pdcColumnBalanceStack > .columnBalanceBrand--flexCrop.neonFrame{
  overflow: hidden !important;
  background: rgba(6, 10, 32, 0.98);
}
.pdcColumnBalanceStack > .columnBalanceBrand--flexCrop > .columnBalanceBrandImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* longdisco floor art — keep the bottom edge visible when slack height crops the image. */
.pdcColumnBalanceStack > .columnBalanceBrand--flexCrop[data-column-balance-crop="bottom"] > .columnBalanceBrandImg{
  object-position: bottom center;
}
@media (max-width: 649px){
  [data-column-balance-brand],
  .pdcColumnBalanceSpacer,
  .pdcColumnBalanceStack{
    display: none !important;
  }
  .pdcSidebarColumn.is-column-balance-active,
  section.card.results.is-column-balance-active,
  section.card.sidebar.pdcColumnBalanceHost{
    display: block;
    flex: unset;
    min-height: unset !important;
  }
}
.pdcHeroEnjoyBrand{
  display: none !important;
}

.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):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) .hero .heroPrimaryCol,
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) .hero .heroBody{
  display: none !important;
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) .hero .heroStyle{
  display: none !important;
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) > #pdcEasyHero,
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) > #pdcEasyResultsWrap{
  display: none !important;
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied) > #pdcNormalResults,
html.pdcWizardPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > #pdcHeroCard{
  display: block !important;
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage):not(.pdcWizardPage) section.card.results:not(.pdcHeroVisApplied) > *:not(#pdcNormalResults){
  display: none !important;
}
/* Normal: `#pdcNormalResults` wraps hero + guides — hide siblings until JS reveals them. */
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage):not(.pdcWizardPage) section.card.results:not(.pdcHeroVisApplied) #pdcNormalResults > *:not(#pdcHeroCard){
  display: none !important;
}
html.pdcWizardPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > *:not(#pdcHeroCard){
  display: none !important;
}
/* Easy: TV-only hero on first paint (class on `<html>` is set in head before body paints). */
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > #pdcNormalResults,
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > .pdcEasyResultsWrap{
  display: none !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > #pdcEasyHero{
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) #pdcEasyHero .heroStyle,
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) #pdcEasyHero .heroPrimaryCol,
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) #pdcEasyHero .heroBody,
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) #pdcEasyHero .heroJumpScott{
  display: none !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied){
  padding: 0 !important;
  overflow: hidden !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied):hover{
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied)::before{
  display: none !important;
  content: none !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > #pdcEasyHero.hero.neonFrame.neonFrame--pink{
  padding: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results:not(.pdcHeroVisApplied) > #pdcEasyHero.hero.neonFrame.neonFrame--pink::before{
  display: none !important;
}

/* Skill-mode swap (Normal ↔ Wizard ↔ Easy): same reset TV in the same place — land settled,
 * no first-paint shell churn, no CRT / mosaic replay (`pdc-skill-mode-swap-head.js`). */
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results{
  padding: 0 !important;
  overflow: hidden !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results:hover{
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results::before{
  display: none !important;
  content: none !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results .hero .heroPrimaryCol,
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results .hero .heroBody,
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) section.card.results .hero .heroStyle{
  display: none !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage):not(.pdcWizardPage) #pdcNormalResults > *:not(#pdcHeroCard){
  display: none !important;
}
html.pdcSkillModeSwap.pdcWizardPage:not(.pdcUrlRecipeIntent) section.card.results > *:not(#pdcHeroCard){
  display: none !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) #heroResetPlaceholder[hidden]{
  display: block !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) .heroResetPlaceholder--crtOn .heroResetPlaceholderImg,
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) .heroResetPlaceholder--crtOff .heroResetPlaceholderImg,
html.pdcSkillModeSwap .heroResetPlaceholderImg,
html.pdcSkillModeSwap #easyStyleTvImg{
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: brightness(1) !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results > #pdcNormalResults,
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results > .pdcEasyResultsWrap{
  display: none !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results > #pdcEasyHero{
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) #pdcEasyHero .heroStyle,
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) #pdcEasyHero .heroPrimaryCol,
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) #pdcEasyHero .heroBody,
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) #pdcEasyHero .heroJumpScott{
  display: none !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results{
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results::before{
  display: none !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results > #pdcEasyHero.hero.neonFrame.neonFrame--pink{
  padding: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html.pdcSkillModeSwap.pdcEasyPage:not(.pdcUrlRecipeIntent) section.card.results > #pdcEasyHero.hero.neonFrame.neonFrame--pink::before{
  display: none !important;
}
html.pdcSkillModeSwap:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) .hero.neonFrame.neonFrame--pink{
  padding: 0 !important;
  overflow: hidden !important;
}
html.pdcSkillModeSwap .topBrandCrtHost--crtOn .topBrandImg,
html.pdcSkillModeSwap .topBrandImg{
  animation: none !important;
  filter: none !important;
}
/* Same asset on Easy / Normal / Wizard — never hide the title during a skill swap. */
html.pdcSkillModeSwap main.grid.dashboard > header.top .topBrand,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) main.grid.dashboard > header.top .topBrand{
  visibility: visible !important;
  opacity: 1 !important;
}
html.pdcSkillModeSwap .topBrandCrtHost::before,
html.pdcSkillModeSwap .topBrandCrtHost::after,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .topBrandCrtHost::before,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .topBrandCrtHost::after{
  opacity: 1;
}
html.pdcSkillModeSkipBrandCrt .topBrandCrtHost .heroResetCrtOverlay,
html.pdcSkillModeSkipBrandCrt .topBrandCrtHost.topBrandCrtHost--crtOn .topBrandImg{
  animation: none !important;
  filter: none !important;
}

/* Skill-mode swap: keep header title + TV steady through reveal (see finishSkillModeSwapReveal). */
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .topBrandImg,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .heroResetPlaceholderImg,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) #easyStyleTvImg{
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: brightness(1) !important;
}
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .topBrandCrtHost--crtOn .topBrandImg,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .heroResetPlaceholder--crtOn .heroResetPlaceholderImg,
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .heroResetPlaceholder--crtOff .heroResetPlaceholderImg{
  animation: none !important;
  filter: brightness(1) !important;
  transform: none !important;
}
html.pdcDashboardSwapReady:not(.pdcSkillModeSwapSettled) .heroResetCrtOverlay{
  display: none !important;
}

/* Skill-mode swap: keep sidebar + results steady while async init runs; header uses restored HTML. */
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady):not(.pdcEasyPage) #pdcSidebarColumn,
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady):not(.pdcEasyPage) section.card.results{
  visibility: hidden;
}
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady) main.grid.dashboard > header.top{
  visibility: visible;
}
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady) main.grid.dashboard > header.top *,
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady) #pdcSidebarColumn *,
html.pdcSkillModeSwap:not(.pdcDashboardSwapReady) section.card.results *{
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) 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):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied){
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) 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):not(.pdcEasyPage) section.card.results:not(.pdcHeroVisApplied)::before{
  display: none;
}
html:not(.pdcUrlRecipeIntent):not(.pdcEasyPage) 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 style preview — Mode 7 mosaic reveal (`pdc-pixel-mosaic-reveal.js`),
 * same pipeline as the eat-plan modal hero. Persistent vignette + scanlines stay on pseudos. */
.heroResetPlaceholder--stylePreview .heroResetPlaceholderImg{
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.heroResetPreviewCanvas,
.heroStylePreviewCanvas{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.heroResetPlaceholder--mosaicReveal .heroResetPlaceholderImg,
.heroStyleCrtHost--mosaicReveal .heroStyleImg{
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .heroResetPreviewCanvas,
  .heroStylePreviewCanvas{
    display: none !important;
  }
  .heroResetPlaceholder--mosaicReveal .heroResetPlaceholderImg,
  .heroStyleCrtHost--mosaicReveal .heroStyleImg{
    opacity: 1 !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;
}

/* Reset-slot style preview: overlay lives on `.heroResetPlaceholder`, not `.topBrandCrtHost`
 * — mirror the brand-tuned snow / scan / flash keyframes from the header CRT. */
.heroResetPlaceholder--stylePreview .heroResetCrtNoise.topBrandCrtNoise{
  animation:
    pdcCrtNoiseFadeBrand 4s ease-out both,
    pdcCrtNoiseShift 4s ease-in-out both;
}
.heroResetPlaceholder--stylePreview .heroResetCrtHeavyScan.topBrandCrtHeavyScan{
  animation: pdcCrtScanlinesFadeBrand 4s ease-out both;
}
.heroResetPlaceholder--stylePreview .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,
  .topBrandCrtHost.topBrandCrtHost--crtOn .heroStyleImg{ animation: none; }
  .topBrandCrtHost .heroResetCrtOverlay{ display: none !important; }
}

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

/* Skill mode (Easy / Normal / Wizard) — column 1, outside `.card.sidebar`. */
.pdcSidebarColumn {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Recipe column sits below mode chips in DOM; stack it above chips so `.menuPanel` isn’t trapped under them. */
.pdcSidebarColumn > :is(#pdcNormalSidebar, #pdcEasyColumn, .eatPlanChipActiveHome) {
  position: relative;
  z-index: 2;
}
/* Open dashboard pickers: lift the host + panel; keep skill chips underneath (panel-above overlap). */
html.pdc-dashboard-menu-open main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .pdcModeChipsBar,
html.pdc-dashboard-menu-open main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > .pdcModeChooserIntro {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
html.pdc-dashboard-menu-open main.grid.dashboard:not(.knowledgeMain) .pdcSidebarColumn > :is(#pdcNormalSidebar, #pdcEasyColumn) {
  z-index: 10;
}
main.grid.dashboard:not(.knowledgeMain) .menuSelect.menuSelect--panelOpen {
  position: relative;
  z-index: 80;
}
main.grid.dashboard:not(.knowledgeMain) .menuSelect.menuSelect--panelOpen .menuPanel {
  z-index: 100;
}
.pdcSidebarColumn.pdcColumnBalanceCapped {
  box-sizing: border-box;
}
/* Pin results to dashboard column 2 (sidebar wrapper is col 1). Without this,
 * auto-placement can park the results card off the visible track when the
 * full-width calculation dungeon row is added below. */
main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > section.card.results {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > .pdcSidebarColumn {
  grid-row: 2;
}
main.grid.dashboard:not(.knowledgeMain) > .pdcCalculationDungeon {
  grid-row: 3;
}
@media (max-width: 649px) {
  main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > section.card.results {
    grid-column: 1;
    grid-row: auto;
  }
  main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > .pdcSidebarColumn {
    grid-row: auto;
  }
  main.grid.dashboard:not(.knowledgeMain) > .pdcCalculationDungeon {
    grid-row: auto;
  }
}
.pdcModeChipsBar {
  margin: 0 0 10px;
  padding: 0;
}

/* Two-column dashboard: one SKILL MODES baseline for Easy / Normal / Wizard. */
@media (min-width: 650px) {
  main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > .pdcSidebarColumn > .pdcModeChipsBar {
    margin-top: var(--pdc-skill-modes-row-inset, 2px);
  }

  /* Easy header col 2 is shorter (DoughJo art only) — match Normal plan/styles row height. */
  html.pdcEasyPage.pdcEasyDashboard main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1) > header.top {
    min-height: var(--pdc-dashboard-header-row-h, auto);
  }

  /* Easy-only sub-pixel tune (0 on desktop; measured or +2px on Fold — see pdc-top-brand-scroll.js). */
  html.pdcEasyPage.pdcEasyDashboard
    main.grid.dashboard:not(.knowledgeMain):not(.dashboard--hideCol1)
    > .pdcSidebarColumn
    > .pdcModeChipsBar {
    margin-top: calc(var(--pdc-skill-modes-row-inset, 2px) + var(--pdc-easy-skill-modes-extra-inset, 0px));
  }
}

/* One-frame measure hook (see `pdc-top-brand-scroll.js`). */
html.pdcMeasuringHeaderPlan html.pdcEasyPage.pdcEasyDashboard main.grid.dashboard > header.top > .topRight:not(.topRight--phantom) {
  display: block !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  left: -10000px !important;
  top: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  contain: none !important;
}

.pdcModeChipsLabel {
  margin: 0 0 6px;
  font-family: var(--arcade), system-ui, sans-serif;
  font-size: calc(var(--fs-h-10) + 1pt);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.pdcModeChipsRow {
  /* Layout: `pdc-mode-chips.css` (flex row, shrink-to-fit on narrow / fold). */
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.pdcModeChipsRow .pdcModeChip:not(.pdcModeChip--img) {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.eatPlanSection{
  margin: 0 0 14px;
  padding: 0;
}
.eatPlanChipRow{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.eatPlanChipRow > .chip{
  width: 100%;
  min-width: 0;
}
/* 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;
}

/* Inactive: press-start art (`pressstart1.webp` + `pressstarttext.webp` overlay). */
.chip.eatPlanChip:not(.activeGreen){
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  animation: none;
  min-height: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(228, 49, 115, 0.22);
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt,
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt img{
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.chip.eatPlanChip:not(.activeGreen)::after{
  display: none;
}
.chip.eatPlanChip:not(.activeGreen):hover{
  filter: none;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipLabel{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eatPlanChipArt{
  position: relative;
  display: inline-grid;
  place-items: center;
  justify-items: center;
  line-height: 0;
  max-width: 100%;
}
/* Shimmer band only (no clip box, no mask on the image stack). */
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt{
  overflow: visible;
  width: fit-content;
  max-width: 100%;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt[hidden]{
  display: none !important;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(20% + 10px);
  left: 0;
  width: 30%;
  height: calc(60% - 20px);
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 30%,
    rgba(75, 248, 254, 0.06) 38%,
    rgba(167, 120, 255, 0.21) 44%,
    rgba(255, 240, 250, 0.28) 47%,
    rgba(255, 255, 255, 0.49) 50%,
    rgba(255, 200, 230, 0.36) 53%,
    rgba(228, 49, 115, 0.19) 56%,
    rgba(75, 248, 254, 0.07) 62%,
    transparent 70%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(3px) saturate(1.55);
  transform: skewX(-11deg);
  animation: eatPlanPressStartShimmer 4.5s ease-in-out 1.1s infinite alternate;
  will-change: left;
}
@keyframes eatPlanPressStartShimmer{
  from{
    left: 0;
  }
  to{
    left: calc(100% - 60px - 30% + 40px);
  }
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArtBase{
  position: relative;
  z-index: 0;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArtText{
  position: relative;
  z-index: 2;
  transform: translateY(2px);
}
/* Same intrinsic canvas (1331×391); lock both layers to identical rendered size. */
.eatPlanChipArtBase,
.eatPlanChipArtText{
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  display: block;
  width: min(100%, 375px);
  height: auto;
  max-width: min(100%, 375px);
  margin: 0;
  image-rendering: pixelated;
  object-fit: contain;
  object-position: center center;
}
/* Mix-now / Press Start — pulsing hero-pink neon (matches `.neonFrame--pink`). */
@keyframes eatPlanPressStartNeonGlow{
  0%, 100%{
    filter:
      drop-shadow(0 0 2px rgba(255, 180, 220, 0.45))
      drop-shadow(0 0 5px rgba(228, 49, 115, 0.36))
      drop-shadow(0 0 10px rgba(228, 49, 115, 0.24))
      drop-shadow(0 0 18px rgba(255, 130, 198, 0.3))
      drop-shadow(0 0 26px rgba(111, 53, 215, 0.18));
  }
  45%{
    filter:
      drop-shadow(0 0 3px rgba(255, 210, 235, 0.48))
      drop-shadow(0 0 8px rgba(228, 49, 115, 0.44))
      drop-shadow(0 0 16px rgba(228, 49, 115, 0.36))
      drop-shadow(0 0 28px rgba(255, 130, 198, 0.5))
      drop-shadow(0 0 40px rgba(111, 53, 215, 0.32));
  }
}
.eatPlanChipArtBase{
  animation: eatPlanPressStartNeonGlow 2.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  will-change: filter;
}
.chip.eatPlanChip:not(.activeGreen):hover .eatPlanChipArtBase{
  animation-duration: 1.5s;
}
/* Hover/focus wiggle — some users didn't realise the PRESS START art is a button,
 * so on hover it lifts a touch and jiggles to read as an inviting, clickable control. */
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt{
  transform-origin: center 62%;
  transition: transform 160ms ease;
}
/* Attract-mode nudge: a brief wiggle burst every cycle, so touch users (no :hover on
 * Android) still get the "this is a button, tap me" cue. Only in reset mode (no recipe
 * being built yet); once the user starts a recipe it sits still. Hover still wiggles. */
html.pdcResultsReset .chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt{
  animation: eatPlanChipAttractWiggle 5s ease-in-out 2.4s infinite;
  will-change: transform;
}
.chip.eatPlanChip:not(.activeGreen):hover .eatPlanChipArt,
.chip.eatPlanChip:not(.activeGreen):focus-visible .eatPlanChipArt{
  animation: eatPlanChipInviteWiggle 1.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes eatPlanChipInviteWiggle{
  0%{ transform: rotate(0deg) scale(1.05); }
  6%{ transform: rotate(-4.2deg) scale(1.06); }
  12%{ transform: rotate(3.6deg) scale(1.06); }
  18%{ transform: rotate(-2.8deg) scale(1.06); }
  24%{ transform: rotate(2deg) scale(1.06); }
  30%{ transform: rotate(-1deg) scale(1.05); }
  36%, 100%{ transform: rotate(0deg) scale(1.05); }
}
/* Mostly still, then a short jiggle burst near the end of each cycle (works without a pointer). */
@keyframes eatPlanChipAttractWiggle{
  0%, 72%, 100%{ transform: rotate(0deg) scale(1); }
  76%{ transform: rotate(-3.4deg) scale(1.04); }
  80%{ transform: rotate(2.8deg) scale(1.04); }
  84%{ transform: rotate(-2.1deg) scale(1.03); }
  88%{ transform: rotate(1.4deg) scale(1.02); }
  92%{ transform: rotate(-0.7deg) scale(1.01); }
}
@media (prefers-reduced-motion: reduce){
  .chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt,
  html.pdcResultsReset .chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt{
    animation: none;
    will-change: auto;
  }
  .chip.eatPlanChip:not(.activeGreen):hover .eatPlanChipArt,
  .chip.eatPlanChip:not(.activeGreen):focus-visible .eatPlanChipArt{
    animation: none;
    transform: scale(1.04);
  }
  .chip.eatPlanChip:not(.activeGreen) .eatPlanChipArt::after{
    animation: none;
    opacity: 0;
  }
  .eatPlanChipArtBase{
    animation: none;
    will-change: auto;
    filter:
      drop-shadow(0 0 3px rgba(255, 200, 230, 0.5))
      drop-shadow(0 0 8px rgba(228, 49, 115, 0.42))
      drop-shadow(0 0 14px rgba(228, 49, 115, 0.3))
      drop-shadow(0 0 24px rgba(255, 130, 198, 0.42))
      drop-shadow(0 0 32px rgba(111, 53, 215, 0.26));
  }
}
/* Space Invaders attract-mode “PRESS START” — hard 50/50 blink, no fade. */
@keyframes eatPlanPressStartTextBlink{
  0%, 49.999%{
    opacity: 1;
    visibility: visible;
  }
  50%, 99.999%{
    opacity: 0;
    visibility: hidden;
  }
  100%{
    opacity: 1;
    visibility: visible;
  }
}
.eatPlanChipArtText{
  pointer-events: none;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArtText{
  pointer-events: auto;
}
.chip.eatPlanChip:not(.activeGreen) .eatPlanChipArtText{
  animation: eatPlanPressStartTextBlink 1s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .chip.eatPlanChip:not(.activeGreen) .eatPlanChipArtText{
    animation: none;
    opacity: 1;
    visibility: visible;
  }
}
.chip.eatPlanChip.activeGreen .eatPlanChipArt{
  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 scales as one unit to fill the padded
 * viewport (`pdc-eat-plan.js` sets `--eat-plan-modal-scale` from measured size). */
.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) + 8px)
    max(10px, env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    max(10px, 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: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Layout box matches the scaled card footprint (JS sets height + scale vars). */
.eatPlanModalScaleSlot{
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--eat-plan-modal-design-w, 420px) * var(--eat-plan-modal-scale, 1));
  height: calc(var(--eat-plan-modal-card-px-h, 680px) * var(--eat-plan-modal-scale, 1));
  overflow: visible;
  pointer-events: none;
}
.eatPlanModalScaleSlot > .eatPlanModalCard{
  pointer-events: auto;
}
.eatPlanModalCard{
  --eat-plan-modal-design-w: 420px;
  width: var(--eat-plan-modal-design-w);
  max-width: none;
  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);
  transform: scale(var(--eat-plan-modal-scale, 1));
  transform-origin: top center;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: calc(var(--eat-plan-modal-design-w) / -2);
  overflow: visible;
}
/* Hero art for the eat-plan modal (mix now · eat later).
 * Display box is thumb native 192×120 scaled +30% (250×156) for quest preview legibility. */
.eatPlanModalHeroFrame{
  --eat-plan-hero-w: 250px;
  --eat-plan-hero-h: 156px;
  --eat-plan-hero-max-h: min(260px, 42vh);
  position: relative;
  align-self: center;
  width: min(100%, var(--eat-plan-hero-w));
  min-height: var(--eat-plan-hero-h);
  max-width: 100%;
  margin: -2px auto 0;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.eatPlanModalHeroCanvas{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* During mosaic reveal JS drives `<img>` opacity; keep fallback hidden if script stalls. */
.eatPlanModalHeroFrame--mosaicReveal .eatPlanModalHero{
  opacity: 0;
}
@media (prefers-reduced-motion: reduce){
  .eatPlanModalHeroCanvas{
    display: none !important;
  }
  .eatPlanModalHeroFrame--mosaicReveal .eatPlanModalHero{
    opacity: 1 !important;
  }
}
/* While a style preview is showing: vignette + scanlines; art uses the same Mode 7 mosaic
 * reveal as the thin `8bitheader` strip (`pdc-pixel-mosaic-reveal.js`). */
.eatPlanModalHeroFrame--preview{
  isolation: isolate;
  overflow: hidden;
}
.eatPlanModalHeroFrame--preview::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;
}
.eatPlanModalHeroFrame--preview::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;
}
.eatPlanModalHeroFrame--preview .eatPlanModalHero{
  box-shadow: none;
  position: relative;
  z-index: 0;
  vertical-align: top;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}
.eatPlanModalHeroFrame--preview .eatPlanModalHeroCap{
  z-index: 5;
}
.eatPlanModalHero{
  display: block;
  width: var(--eat-plan-hero-w, 250px);
  height: var(--eat-plan-hero-h, 156px);
  max-width: 100%;
  max-height: var(--eat-plan-hero-max-h, min(260px, 42vh));
  margin: 0 auto;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 10px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.eatPlanModalHeroFrame--preview .eatPlanModalHero{
  /* Fixed +30% box (250×156) — thumbs upscale inside; layout stays stable while browsing. */
  width: min(var(--eat-plan-hero-w, 250px), 100%);
  height: auto;
  aspect-ratio: 250 / 156;
  max-height: var(--eat-plan-hero-max-h, min(260px, 42vh));
}
.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: touch drag previews (`.isPeek`); tap commits (`pdc-eat-plan.js`). */
.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),
.eatPlanHoverDay.isPeek: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{
  /* `none` so horizontal “piano” drags aren’t eaten as page/modal scroll. */
  touch-action: none;
}
.eatPlanHoverCalendarGrid--dragging{
  touch-action: none;
}
.eatPlanHoverCalendarGrid--dragging .eatPlanHoverDay:not(.isPeek):not(.isSelected):hover,
.eatPlanHoverCalendarGrid--dragging .eatPlanHoverDay:not(.isPeek):not(.isSelected):active{
  background: rgba(8, 14, 48, 0.58);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(250, 252, 255, 0.9);
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

@media (pointer: coarse){
  .eatPlanHoverDay{
    min-height: 52px;
    padding: 8px 5px 10px;
  }
  /* Touch drag uses `.isPeek` from JS — `:hover` / `:active` stay on the touch-down cell. */
  .eatPlanHoverDay:hover:not(.isSelected):not(.isPeek),
  .eatPlanHoverDay:active:not(.isSelected):not(.isPeek){
    background: rgba(8, 14, 48, 0.58);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(250, 252, 255, 0.9);
    box-shadow: none;
    filter: none;
    text-shadow: none;
  }
}
.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;
}
.pdcNativeInputShell input[type="date"]::-webkit-calendar-picker-indicator,
.pdcNativeInputShell input[type="time"]::-webkit-calendar-picker-indicator,
.eatPlanField input[type="date"]::-webkit-calendar-picker-indicator,
.eatPlanField input[type="time"]::-webkit-calendar-picker-indicator,
.field.fermentTotalPlanField .fermentStartRow input[type="date"]::-webkit-calendar-picker-indicator,
.field.fermentTotalPlanField .fermentStartRow input[type="time"]::-webkit-calendar-picker-indicator,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"]::-webkit-calendar-picker-indicator,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]::-webkit-calendar-picker-indicator{
  filter: brightness(0) invert(1);
  opacity: 0.92;
  cursor: pointer;
  transform: scale(1.5);
  transform-origin: center;
}
.pdcNativeInputShell input[type="date"]::-moz-calendar-picker-indicator,
.pdcNativeInputShell input[type="time"]::-moz-calendar-picker-indicator,
.eatPlanField input[type="date"]::-moz-calendar-picker-indicator,
.eatPlanField input[type="time"]::-moz-calendar-picker-indicator,
.field.fermentTotalPlanField .fermentStartRow input[type="date"]::-moz-calendar-picker-indicator,
.field.fermentTotalPlanField .fermentStartRow input[type="time"]::-moz-calendar-picker-indicator,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"]::-moz-calendar-picker-indicator,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]::-moz-calendar-picker-indicator{
  filter: brightness(0) invert(1);
  opacity: 0.92;
  cursor: pointer;
  transform: scale(1.5);
  transform-origin: center;
}
#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"],
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .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;
}
/* Pizza Quest + ferment start: centre date/time values (WebKit time often stays left without datetime-edit rules). */
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
){
  text-align: center;
}
:is(
  #eatPlanPanel .eatPlanField .pdcNativeInputShell .pdcNativeInputGhost,
  .field.fermentTotalPlanField .fermentStartRow .pdcNativeInputShell .pdcNativeInputGhost,
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow .pdcNativeInputShell .pdcNativeInputGhost
){
  left: 0;
  right: 0;
  text-align: center;
}
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit{
  text-align: center;
}
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-fields-wrapper{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-text,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-month-field,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-day-field,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-year-field,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-hour-field,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-minute-field,
:is(
  #eatPlanPanel .eatPlanField input[type="date"],
  #eatPlanPanel .eatPlanField input[type="time"],
  .field.fermentTotalPlanField .fermentStartRow input[type="date"],
  .field.fermentTotalPlanField .fermentStartRow input[type="time"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"],
  html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="time"]
)::-webkit-datetime-edit-ampm-field{
  text-align: 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,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .fermentStartRow input[type="date"]:focus,
html.pdcEasyPage.pdcEasyDashboard .pdcEasyStage--eat .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%;
  position: relative;
  overflow: visible;
  z-index: 2;
  /* 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”: opens upward from the trigger; panel is out-of-flow. */
#eatPlanModalStyleSelect.menuSelect.eatPlanModalStyleMenu--upward{
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  margin: 10px auto 12px;
  overflow: visible;
}
#eatPlanModalStyleSelect.menuSelect.eatPlanModalStyleMenu--upward.menuSelect--panelOpen{
  z-index: 40;
}
#eatPlanModalStyleSelect.menuSelect .menuBtn{
  touch-action: manipulation;
  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,
#eatPlanModalStyleSelect.menuSelect .menuSelectTrigger:has(.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.eatPlanModalStyleMenu--upward.menuSelect--panelAbove .menuPanel{
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: var(--eat-plan-style-panel-max-h, min(280px, 42vh));
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 120;
  transform: translateZ(0);
  border-radius: 12px;
  border: 2px solid rgba(255, 115, 255, 0.55);
  background: linear-gradient(
    180deg,
    rgba(16, 21, 61, 0.98),
    rgba(8, 16, 58, 0.98)
  );
  box-shadow:
    0 0 0 1px rgba(75, 248, 254, 0.28),
    0 -8px 32px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 115, 255, 0.14);
  padding: 8px;
}
/* Style list open: upward panel is out-of-flow; keep card scale so the modal does not resize. */
.eatPlanModalCard--styleMenuOpen{
  overflow: visible !important;
}
/* Quest style list: no touch-peek dimming; stable rows while scrolling (peek disabled in JS). */
#eatPlanModalStyleSelect .menuPanel .menuItem{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#eatPlanModalStyleSelect.menuSelect--panelOpen .menuPanel{
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  contain: paint;
}

/* "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,
html[data-eat-plan-simplified] .fermentStagePortion,
/* 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 (metrics only). JumpScott stamps `.heroStyleImgComposition` when a style is selected (`pdc-app.js`).
 */
.heroMetricRow{
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto;
  justify-content: start;
  align-items: start;
  gap: clamp(6px, 2.8cqi, 16px);
  box-sizing: border-box;
}
/* Parked hidden on `#pdcHeroCard`. When stamped, node moves into `.heroStyleImgComposition` (tracks hero bitmap box). */
.heroJumpScott{
  display: none;
  position: absolute;
  inset: unset;
  top: auto;
  right: auto;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 5;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(228, 49, 115, 0.42))
    drop-shadow(0 0 22px rgba(75, 248, 254, 0.22));
}
/* %-sized vs composition (same box as the pizza); left/bottom anchor only — rotate is decorative. */
.heroStyleImgComposition > .heroJumpScott.heroJumpScott--stamped{
  display: block;
  width: 42%;
  height: auto;
  left: -4%;
  right: auto;
  top: auto;
  bottom: -2%;
  transform: rotate(-7deg);
  transform-origin: left bottom;
}
/* Dashboard: style bitmap / frame stay double-tap targets; JumpScott is non-interactive. */
main.grid.dashboard:not(.knowledgeMain) .heroStyleImg{
  pointer-events: auto;
  touch-action: manipulation;
}

@container heroDough (max-width: 360px){
  .heroMetricRow{
    gap: 6px;
  }
}

.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%;
}
/* Normal + Wizard: larger ingredient names / % and gram readout in hero bars. */
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barNameMain,
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barNameSep,
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barNamePct{
  font-size: calc(var(--fs-h-10) + 2pt);
}
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barGramsNum,
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barGramsMid,
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .barGramsSuf{
  font-size: calc(var(--fs-b-12) + 2pt);
}
/* Normal + Wizard: space under the ingredients heading and between each row. */
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars > .barsSubHeader{
  margin: 0 0 10px;
}
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .bars .barsSubHeader{
  margin: 0;
}
html:not(.pdcEasyPage) .heroSumBlock.heroSumBlock--ingredientsBars .bars{
  margin-top: 0;
  gap: 10px;
}
.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;
  overflow-x: clip;
  overflow-y: visible;
}
.heroFlourYeastRow{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Size stamps from this row, not the viewport (vw was blowing out at full width). */
  container-type: inline-size;
  container-name: heroFlourYeastRow;
}
/* Single + placeholder: grid keeps stamp and copy inside the card without negative overlap. */
.heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3){
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  row-gap: 8px;
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder{
  /* Placeholder mode (no flour picked): stamp on one row, chip + copy full width below. */
  grid-template-columns: minmax(0, 1fr);
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder .heroFlourStamp.heroFlourStamp--flourYeast{
  /* Placeholder flour stamp: intentionally smaller so copy has room. */
  width: clamp(52px, 20cqi, 88px);
  max-width: min(36cqi, 96px);
  max-height: clamp(48px, 14cqi, 72px);
  grid-column: 1;
  grid-row: 1;
}
.heroFlourYeastRow.heroFlourYeastRow--placeholder .heroFlourYeastText{
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  min-width: 0;
}
.heroFlourYeastRow.heroFlourYeastRow--blend{
  column-gap: 5px;
  row-gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3) .heroFlourStamp.heroFlourStamp--flourYeast{
  grid-column: 1;
  grid-row: 1;
}
.heroFlourYeastText{
  flex: 1;
  min-width: 0;
  max-width: 100%;
  margin-left: 0;
}
.heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3) .heroFlourYeastText{
  grid-column: 2;
  grid-row: 1;
}
.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(72px, 24cqi, 118px);
  max-width: min(44cqi, 118px);
  height: auto;
  max-height: clamp(70px, 20cqi, 108px);
  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,
.heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp.heroFlourStamp--flourYeast{
  flex: 0 0 auto;
  order: 1;
  width: clamp(64px, 20cqi, 108px);
  max-width: min(32cqi, 108px);
  max-height: clamp(64px, 18cqi, 100px);
}
.heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp.heroFlourStamp--flourYeastB,
.heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp.heroFlourStamp--flourYeastB{
  order: 2;
  margin-left: clamp(-52px, -14cqi, -28px);
}
.heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp.heroFlourStamp--flourYeastC{
  order: 3;
}
.heroFlourStamp.heroFlourStamp--flourYeastB{
  object-position: right center;
  width: clamp(60px, 18cqi, 104px);
  max-width: min(30cqi, 104px);
  max-height: clamp(60px, 16cqi, 96px);
  position: relative;
  left: auto;
  top: 10px;
}
.heroFlourStamp.heroFlourStamp--flourYeastC{
  object-position: right center;
  width: clamp(54px, 16cqi, 92px);
  max-width: min(28cqi, 92px);
  max-height: clamp(54px, 14cqi, 88px);
  position: relative;
  left: auto;
  top: 10px;
  margin-left: clamp(-44px, -12cqi, -24px);
}
.heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp,
.heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp{
  max-width: min(34cqi, 112px);
}

/* Wizard third-flour blend: keep visible when JS clears [hidden] (some stacks override UA [hidden]). */
html:not(.pdcWizardPage) #flourBlendTriple{
  display: none !important;
}
html.pdcWizardPage #flourBlendTriple.flourBlendTriple--visible{
  display: block !important;
}

/* If the Flour & yeast section gets narrow, put the text under the stamps. */
@container heroFlourYeastRow (max-width: 720px){
  .heroFlourYeastRow.heroFlourYeastRow--blend,
  .heroFlourYeastRow.heroFlourYeastRow--blend3{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp{
    flex: 0 1 auto;
    max-width: min(40cqi, 108px);
  }
  .heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp--flourYeastB,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp--flourYeastB,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp--flourYeastC{
    margin-left: clamp(-40px, -10cqi, -20px);
  }
  .heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourYeastText,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourYeastText{
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    order: 5;
  }
}
/*
 * Viewport fallback: stack copy under stamp when the hero column is narrow (container queries
 * missing in some WebViews).
 */
@media (max-width: 1200px){
  .heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3){
    grid-template-columns: minmax(0, 1fr);
  }
  .heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3) .heroFlourStamp.heroFlourStamp--flourYeast{
    grid-column: 1;
    grid-row: 1;
  }
  .heroFlourYeastRow:not(.heroFlourYeastRow--blend):not(.heroFlourYeastRow--blend3) .heroFlourYeastText{
    grid-column: 1;
    grid-row: 2;
    margin-top: 8px;
  }
}
@container heroFlourYeastRow (max-width: 420px){
  .heroFlourYeastRow.heroFlourYeastRow--blend,
  .heroFlourYeastRow.heroFlourYeastRow--blend3{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourStamp,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .heroFlourStamp{
    flex: 1 1 auto;
    max-width: min(42cqi, 100px);
  }
  .heroFlourYeastRow.heroFlourYeastRow--blend .heroFlourYeastText,
  .heroFlourYeastRow.heroFlourYeastRow--blend3 .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 corner stamps on the style bitmap are not clipped at the frame edge */
  overflow: visible;
}
/* Positioning context for %-sized JumpScott: shrink-wraps CRT + hero image only (not the neon frame). */
.heroStyleImgComposition{
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}
/* Small, unobtrusive photo credit centred along the bottom edge of the main style photo. */
.heroStyleCredit{
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 7;
  max-width: 92%;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}
.heroStyleCredit[hidden]{
  display: none;
}
/* Hint under the hero photo about the (otherwise hidden) double-tap/double-click to expand column 2.
 * Hidden by default; only shown on two-column screens (>=650px), outside easy mode, and once JS has
 * set the pointer-aware wording (`heroExpandHint--ready`). */
.heroExpandHint{
  display: none;
  margin-top: 7px;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(246, 249, 255, 0.55);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 650px){
  html:not([data-pdc-skill-mode="easy"]) .heroExpandHint.heroExpandHint--ready{
    display: block;
  }
}

/* Same photo credit on the pizza styles page card photo (bottom-centre of the shot). */
.kShotCredit{
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 90%;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}
/* Mix now · Eat later — “approval stamp” on the style hero (same art as `#eatPlanPanel` modal). */
.heroEatPlanStamp{
  position: absolute;
  z-index: 6;
  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;
}
.heroStyleImgComposition > .heroStyleCrtHost.topBrandCrtHost{
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: top;
  border-radius: 8px;
}
.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. Eat-plan / workflow stamps stay in
   * `.heroStyleImgFrame`. JumpScott mounts in `.heroStyleImgComposition` when visible (see `pdc-app.js`). */
  border-radius: 8px;
  border: 0;
  box-sizing: border-box;
}
@supports (width: 1cqi){
  /* `58cqi` tracks `.hero` width — folding column 1 widens the card and can rescale the bitmap. */
  .heroStyleImg{
    max-height: min(280px, 58cqi, 32vw);
  }
}
/* Dashboard only: cap by viewport so column-1 fold does not change max-height with `.hero` width. */
main.grid.dashboard:not(.knowledgeMain) .hero .heroStyleImg{
  max-height: min(280px, 44vmin, 34vw);
}
/* heroActions removed (actions moved to top header) */

/* Fermentation tip card (style suggestion) */
.fermentSuggest{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 12px;
  border-radius: 16px;
  padding: 12px 12px 14px;
}
.fermentSuggest.pill.subtle{
  position: relative;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(228, 49, 115, 0.45);
  background: linear-gradient(165deg, rgba(18, 12, 52, 0.92), rgba(8, 10, 38, 0.96));
  box-shadow:
    0 0 0 1px rgba(120, 80, 200, 0.2) inset,
    0 12px 28px rgba(0, 0, 0, 0.28);
}
.fermentSuggestHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.fermentSuggestHeaderMain{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.fermentSuggestHeaderIcon{
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 220, 80, 0.45));
}
.fermentSuggestHeaderTitles{
  min-width: 0;
}
.fermentSuggestHeaderTitle{
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  line-height: 1.35;
  color: #f34da1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fermentSuggestHeaderSub{
  margin-top: 4px;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 700;
  color: rgba(180, 160, 255, 0.92);
  line-height: 1.35;
}
.fermentSuggestBadge{
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 251, 128, 0.55);
  background: rgba(255, 251, 128, 0.1);
  color: #fffb80;
  font-family: var(--arcade);
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  box-shadow: 0 0 12px rgba(255, 251, 128, 0.2);
}
.fermentSuggestIntroRow{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.fermentSuggestIntro{
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-b-12);
  line-height: 1.45;
  color: rgba(255, 251, 248, 0.88);
}
.fermentSuggestArt{
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
/* Lift entire suggestion above following sidebar rows while fridge placement menu is open. */
.fermentSuggest.pill.subtle.fermentSuggest--fridgeMenuOpen{
  z-index: 120;
}
.fermentSuggest.pill.subtle > *{
  position: relative;
  z-index: 1;
}
.fermentSuggestText{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Gradient rim on the stage comparison box (mockup inner card). */
.fermentSuggestInner{
  padding: 10px 12px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, rgba(12, 16, 48, 0.95), rgba(6, 8, 32, 0.98)) padding-box,
    linear-gradient(135deg, rgba(243, 77, 161, 0.75), rgba(120, 100, 255, 0.55)) border-box;
  box-shadow: 0 0 18px rgba(180, 80, 220, 0.12);
}
.fermentSuggest--applied .fermentSuggestInner{
  border-color: rgba(48, 200, 150, 0.38);
  background: linear-gradient(180deg, rgba(10, 40, 32, 0.45), rgba(6, 10, 40, 0.65));
  box-shadow:
    0 0 0 1px rgba(48, 200, 150, 0.12) inset,
    0 0 14px rgba(48, 200, 150, 0.1);
}
.fermentSuggestMatchPill{
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(48, 200, 150, 0.55);
  background: rgba(30, 181, 130, 0.14);
  color: #8bf0c4;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fermentSuggestPresetPill{
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 100, 0.55);
  background: rgba(255, 200, 60, 0.12);
  color: #ffe9a8;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Auto-loaded style ferment (matches catalog, user has not tapped “I'll do this”). */
.fermentSuggest.fermentSuggest--atPreset.pill.subtle{
  border: 2px solid rgba(255, 220, 100, 0.55);
  background: linear-gradient(165deg, rgba(28, 22, 12, 0.88), rgba(8, 10, 38, 0.96));
  box-shadow:
    0 0 0 2px rgba(255, 200, 60, 0.14),
    0 0 18px rgba(255, 200, 60, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.28);
}
.fermentSuggest--atPreset .fermentSuggestBadge{
  border-color: rgba(255, 220, 100, 0.55);
  color: #ffe9a8;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.2);
}
.fermentSuggest--atPreset .fermentSuggestInner{
  border-color: rgba(255, 220, 100, 0.32);
  background: linear-gradient(180deg, rgba(32, 26, 12, 0.5), rgba(6, 10, 40, 0.65));
  box-shadow:
    0 0 0 1px rgba(255, 200, 60, 0.1) inset,
    0 0 12px rgba(255, 200, 60, 0.08);
}
.fermentSuggest--atPreset .fermentSuggestBtn--primary{
  border: 2px solid rgba(255, 220, 100, 0.65);
  background: rgba(255, 200, 60, 0.12);
  color: #ffe9a8;
  box-shadow:
    0 0 0 3px rgba(255, 200, 60, 0.12),
    0 0 16px rgba(255, 200, 60, 0.2);
}
.fermentSuggest--atPreset .fermentSuggestBtn--primary:hover{
  border-color: rgba(255, 235, 140, 0.85);
  background: rgba(255, 200, 60, 0.2);
  box-shadow:
    0 0 0 3px rgba(255, 200, 60, 0.18),
    0 0 22px rgba(255, 200, 60, 0.28);
}
.fermentSuggestPlans{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 520px){
  .fermentSuggestPlans{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
.fermentSuggestPlan{
  padding: 8px 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
}
.fermentSuggestPlan--preset{
  border-color: rgba(48, 200, 150, 0.42);
  background: rgba(30, 181, 130, 0.1);
}
.fermentSuggestPlan--current{
  border-color: rgba(255, 251, 128, 0.28);
}
.fermentSuggestPlanTitle{
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.72);
}
.fermentSuggestPlan--preset .fermentSuggestPlanTitle{
  color: #8bf0c4;
}
.fermentSuggestPlan--current .fermentSuggestPlanTitle{
  color: #fffb80;
}
.fermentSuggestPlanTotal{
  margin-top: 8px;
  font-family: var(--mono);
  font-size: var(--fs-b-11);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}
.fermentSuggestChips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fermentSuggestChip{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px 7px;
  border-radius: 10px;
  border: 1px solid rgba(120, 252, 255, 0.45);
  background: linear-gradient(180deg, rgba(14, 22, 68, 0.92), rgba(6, 10, 40, 0.96));
  box-shadow: 0 0 10px rgba(75, 248, 254, 0.1);
}
.fermentSuggestChip--cold{
  border-color: rgba(120, 180, 255, 0.5);
}
.fermentSuggestChip--bench{
  border-color: rgba(255, 207, 90, 0.4);
}
.fermentSuggestChipLabel{
  font-size: var(--fs-b-10);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
}
.fermentSuggestChipHours{
  font-family: var(--mono);
  font-size: var(--fs-b-13);
  font-weight: 900;
  color: rgba(255, 251, 128, 0.98);
  line-height: 1.1;
}
.fermentSuggestPlan--preset .fermentSuggestChipHours{
  color: #8bf0c4;
}
.fermentSuggestFacts{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.fermentSuggestFact{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  min-width: 0;
}
.fermentSuggestFactIcon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(120, 252, 255, 0.45);
  background: rgba(14, 22, 68, 0.85);
  font-size: var(--fs-b-14);
  line-height: 1;
  box-shadow: 0 0 10px rgba(75, 248, 254, 0.12);
}
.fermentSuggestFact--preset .fermentSuggestFactIcon{
  border-color: rgba(48, 200, 150, 0.5);
  color: #8bf0c4;
}
.fermentSuggestFact--warn .fermentSuggestFactBody{
  color: rgba(255, 190, 130, 0.95);
}
.fermentSuggestFactCopy{
  min-width: 0;
}
.fermentSuggestFactTitle{
  margin: 0 0 3px;
  font-family: var(--arcade);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(120, 252, 255, 0.95);
}
.fermentSuggestFact--preset .fermentSuggestFactTitle{
  color: #8bf0c4;
}
.fermentSuggestFactBody{
  margin: 0;
  font-size: var(--fs-b-12);
  line-height: 1.4;
  color: rgba(255, 251, 248, 0.9);
  font-weight: 550;
}
.fermentSuggestApplyBlock{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 251, 128, 0.22);
  background: rgba(8, 10, 38, 0.55);
  box-sizing: border-box;
}
.fermentSuggestPlacementSection{
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-sizing: border-box;
}
.fermentSuggestPlacementSectionHead{
  margin-bottom: 8px;
}
.fermentSuggestPlacementSectionLabel{
  font-family: var(--arcade);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.82);
  margin: 0 0 4px;
}
.fermentSuggestPlacementLead{
  margin: 0;
  font-size: var(--fs-b-11);
  line-height: 1.4;
  color: rgba(255, 251, 248, 0.82);
  font-weight: 500;
}
.fermentSuggestIntro strong{
  color: rgba(255, 251, 128, 0.95);
  font-weight: 700;
}
.fermentSuggestPlacementSection .fermentSuggestFridgeBlock{
  width: 100%;
  max-width: none;
}
.fermentSuggestPlacementSection .fermentSuggestPlacement{
  width: 100%;
}
.fermentSuggestPlacementSection .fermentSuggestPlacementHint{
  margin-top: 8px;
  max-width: none;
}
.fermentSuggestActions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.fermentSuggestApplyBlock .fermentSuggestActions{
  margin: 0;
}
.fermentSuggestActions--solo{
  grid-template-columns: minmax(0, 1fr);
}
.fermentSuggestBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--arcade);
  font-size: var(--fs-h-9);
  line-height: 1.25;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease,
    transform 0.12s ease;
}
.fermentSuggestBtn--primary{
  border: 2px solid rgba(255, 251, 128, 0.85);
  background: rgba(255, 251, 128, 0.08);
  color: #fffb80;
  box-shadow:
    0 0 0 3px rgba(255, 251, 128, 0.14),
    0 0 22px rgba(255, 251, 128, 0.28);
}
.fermentSuggestBtn--primary:hover{
  background: rgba(255, 251, 128, 0.14);
  box-shadow:
    0 0 0 4px rgba(255, 251, 128, 0.2),
    0 0 28px rgba(255, 251, 128, 0.35);
}
.fermentSuggestBtn--secondary{
  border: 2px solid rgba(160, 120, 255, 0.55);
  background: rgba(80, 40, 140, 0.2);
  color: rgba(210, 180, 255, 0.95);
}
.fermentSuggestBtn--secondary:hover{
  border-color: rgba(190, 150, 255, 0.75);
  background: rgba(100, 50, 160, 0.28);
}
.fermentSuggestBtnIcon{
  font-size: 0.95em;
  line-height: 1;
}
.fermentSuggestFootnote{
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: var(--fs-b-11);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}
/* Legacy row layout (unused; kept for export snapshots if any). */
.fermentSuggestRow{
  min-width: 0;
  color: inherit;
}
.fermentSuggestRow--head{
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.fermentSuggestLabel{
  color: inherit;
  opacity: 0.72;
  font-weight: 600;
  margin-right: 2px;
}
.fermentSuggestValue{
  color: inherit;
}
.fermentSuggestStack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.fermentSuggestFridgeBlock{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
/* 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-color: #0d103d;
  background-image: linear-gradient(180deg, #111643 0%, #0d103d 100%);
  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-color: #10153d;
  background-image: linear-gradient(180deg, #141a4a 0%, #10153d 100%);
}
.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: 90;
  /* Fully opaque — no rgba stops so list choices never show content behind the panel. */
  background-color: #0d103d;
  background-image: linear-gradient(180deg, #10153d 0%, #0d103d 45%, #0a0e34 100%);
  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;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.fermentSuggestPlacementMenuItem{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: #0d103d;
  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: #12194a;
}
.fermentSuggestPlacementMenuItem:focus-visible{
  outline: 2px solid rgba(120, 220, 255, 0.55);
  outline-offset: 0;
}
.fermentSuggestPlacementMenuItem[aria-selected="true"]{
  background: #152052;
}
.fermentSuggestPlacementMenuItem--recommended{
  color: #6fe3a8;
  font-weight: 900;
}
.fermentSuggestPlacementHintReco{
  color: rgba(120, 255, 160, 0.95);
  font-weight: 700;
}
.fermentSuggestPlacementHint{
  margin: 6px 0 0;
  max-width: 48ch;
  line-height: 1.35;
  opacity: 0.82;
}
/* “On” = whole tip card matches style preset (green neon rim, same family as `.neonFrame--green`). */
.fermentSuggest.fermentSuggest--applied.pill.subtle{
  border: 4px solid rgba(48, 200, 150, 0.88);
  background: linear-gradient(165deg, rgba(10, 36, 30, 0.72), rgba(8, 10, 38, 0.96));
  box-shadow:
    0 0 0 4px rgba(30, 181, 130, 0.2),
    0 0 22px rgba(48, 200, 150, 0.38),
    0 0 36px rgba(30, 181, 130, 0.26),
    0 12px 28px rgba(0, 0, 0, 0.28);
}
.fermentSuggest--applied .fermentSuggestBadge{
  border-color: rgba(48, 200, 150, 0.6);
  color: #8bf0c4;
  box-shadow: 0 0 12px rgba(48, 200, 150, 0.22);
}
.fermentSuggest--applied .fermentSuggestBtn--primary{
  border: 2px solid rgba(48, 200, 150, 0.8);
  background: rgba(30, 181, 130, 0.14);
  color: #8bf0c4;
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.16),
    0 0 18px rgba(48, 200, 150, 0.28);
}
.fermentSuggest--applied .fermentSuggestBtn--primary:hover{
  border-color: rgba(72, 220, 160, 0.92);
  background: rgba(30, 181, 130, 0.22);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.22),
    0 0 24px rgba(48, 200, 150, 0.38);
}
/* Applied then edited (hours/placement no longer match style preset) — amber, Undo still available */
.fermentSuggest.fermentSuggest--customised.pill.subtle{
  border-color: rgba(255, 196, 72, 0.5);
}
.fermentSuggest--customised .fermentSuggestBadge{
  border-color: rgba(255, 196, 72, 0.55);
  color: #ffe08a;
}
.fermentSuggestRow--preset .fermentSuggestValue{
  opacity: 0.88;
}

/* 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, cold bulk: bulk → cold → warm (matches dough timeline). */
.fermentStagesFlow.fermentStagesFlow--coldOn{
  grid-template-areas:
    "fsBulk"
    "fsCold"
    "fsBench";
}
/* Fridge on, cold after balling or in pan: bulk → portion → cold → warm. */
.fermentStagesFlow.fermentStagesFlow--coldOn.fermentStagesFlow--hasPortion{
  grid-template-areas:
    "fsBulk"
    "fsPortion"
    "fsCold"
    "fsBench";
}
.fermentStagePortion{
  grid-area: fsPortion;
  min-width: 0;
  border: 1px solid rgba(246, 249, 255, 0.12);
  border-radius: 14px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.02);
}
.fermentStagePortion[hidden]{
  display: none !important;
}
.fermentStagePortionLabel{
  font-size: var(--fs-b-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 249, 255, 0.88);
}
.fermentStagePortion .fermentStagePortionHint{
  margin: 6px 0 0;
}

/* 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 .fermentRoomFrame .fermentTempRow .field > label,
.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)}
/* Calculator native selects (e.g. rounding): match `.pill.autoOn` green + glow */
.dashboard:not(.knowledgeMain) .field select{
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.35),
    0 0 14px rgba(30, 181, 130, 0.32),
    0 0 26px rgba(30, 181, 130, 0.12);
}
.dashboard:not(.knowledgeMain) .field select:focus{
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.5),
    0 0 20px rgba(30, 181, 130, 0.42),
    0 0 34px rgba(30, 181, 130, 0.16);
}

/* 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, #advBulkTempC, #advBenchTempC, #bulkHours, #fridgeTempC, #coldHours, #totalHours){
  border-width: 2px;
}
.dashboard .sidebar :is(#balls, #tempC, #advBulkTempC, #advBenchTempC, #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, #advBulkTempC, #advBenchTempC, #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%;
  /* Grow in horizontal rows only — in a flex column (sidebar) flex-grow stretches triggers vertically. */
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  /* Lets triggers + panel rows scale type and wrap from actual control width */
  container-type: inline-size;
  container-name: pdcMenu;
}
.mixRow .menuSelect,
.mixRow.mixRowLeft .menuSelect,
.cardHeader.seamlessHeader .right .menuSelect{
  flex: 1 1 auto;
}
.menuSelectTrigger{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.menuSelectTrigger > .menuBtn{
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.menuSelectTrigger > .menuClear{
  flex: 0 0 auto;
}
.menuBtn{
  width:100%;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  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,
.menuSelectTrigger > .menuClear,
.menuBtn > .menuClear{
  align-self: center;
  flex-shrink: 0;
}
/* Trigger head: title (+ optional suffix); 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{
    font-size: clamp(10px, calc(7px + 4.8cqi), 13px);
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 560px){
    .menuBtn .menuSelectTitle{
      font-size: clamp(10px, calc(9px + 2.1vw), 13px);
    }
  }
}

.menuBtn:hover{border-color: rgba(255,255,255,.22)}

/* Dashboard menu triggers: landing nod + twin shimmers + neon green glow (USE ME, etc.). */
@keyframes pdcFlourUseMeNod{
  0%{ transform: translate3d(0, 0, 0) rotate(0deg); }
  20%{ transform: translate3d(0, -2px, 0) rotate(-1deg); }
  40%{ transform: translate3d(0, 1px, 0) rotate(0.75deg); }
  58%{ transform: translate3d(0, -1px, 0) rotate(-0.45deg); }
  76%{ transform: translate3d(0, 0.5px, 0) rotate(0.25deg); }
  100%{ transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes pdcFlourUseMeShine{
  0%, 6%{ left: -52%; opacity: 0; }
  14%{ opacity: 1; }
  44%{ left: 108%; opacity: 0.9; }
  52%, 100%{ left: 108%; opacity: 0; }
}
@keyframes pdcFlourUseMeGlow{
  0%, 100%{
    border-color: rgba(246, 249, 255, 0.12);
    box-shadow: none;
  }
  16%{
    border-color: rgba(80, 255, 175, 0.92);
    box-shadow:
      0 0 0 2px rgba(30, 255, 140, 0.42),
      0 0 10px rgba(30, 255, 140, 0.62),
      0 0 22px rgba(30, 181, 130, 0.45),
      inset 0 0 14px rgba(30, 255, 140, 0.14);
  }
  38%{
    border-color: rgba(30, 181, 130, 0.55);
    box-shadow:
      0 0 0 1px rgba(30, 255, 140, 0.22),
      0 0 6px rgba(30, 255, 140, 0.32),
      inset 0 0 6px rgba(30, 255, 140, 0.06);
  }
  54%{
    border-color: rgba(90, 255, 185, 0.95);
    box-shadow:
      0 0 0 2px rgba(30, 255, 140, 0.48),
      0 0 12px rgba(30, 255, 140, 0.68),
      0 0 26px rgba(30, 181, 130, 0.5),
      inset 0 0 16px rgba(30, 255, 140, 0.16);
  }
  72%{
    border-color: rgba(30, 181, 130, 0.4);
    box-shadow:
      0 0 0 1px rgba(30, 255, 140, 0.16),
      0 0 5px rgba(30, 255, 140, 0.22);
  }
}
@keyframes pdcFlourUseMeNodRing{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(30, 255, 140, 0); }
  45%{
    box-shadow:
      0 0 0 3px rgba(30, 255, 140, 0.4),
      0 0 12px rgba(30, 181, 130, 0.35);
  }
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNod{
  position: relative;
  animation:
    pdcFlourUseMeNod 0.82s cubic-bezier(0.34, 1.15, 0.55, 1) 1,
    pdcFlourUseMeGlow 0.82s ease-out 1;
  transform-origin: 50% 92%;
}
/* Clipped overlay (not ::pseudo) — parent transform during nod breaks overflow clip on pseudos. */
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNod .pdcMenuLandingShimmerTrack{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNod .pdcMenuLandingShimmer{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -52%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 22%,
    rgba(255, 243, 166, 0.52) 40%,
    rgba(80, 255, 175, 0.45) 50%,
    rgba(75, 248, 254, 0.18) 58%,
    transparent 72%
  );
  transform: skewX(-12deg);
  animation: pdcFlourUseMeShine 0.82s ease-in-out 1;
  will-change: left, opacity;
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNod .pdcMenuLandingShimmer--b{
  animation-delay: 0.34s;
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNod > :not(.pdcMenuLandingShimmerTrack){
  position: relative;
  z-index: 2;
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #mixSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) > .menuBtn.pdcMenuBtn--landingNodReduced{
  animation: pdcFlourUseMeNodRing 0.58s ease-out 1;
}
@media (prefers-reduced-motion: reduce){
  .dashboard:not(.knowledgeMain) :is(
    #styleSelect,
    #ovenSelect,
    #mixSelect,
    #flourSelect,
    #flourBlendASelect,
    #flourBlendBSelect
  ) > .menuBtn.pdcMenuBtn--landingNod{
    animation: pdcFlourUseMeNodRing 0.58s ease-out 1;
  }
}
.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)}

/* Dashboard + Codex menus: unset/hover/chrome (#0084FF / #FF008C / cyan). Calculator selected trigger uses auto green (`:not(.knowledgeMain)` rules above cascade). Codex `#knowledgeStyleSelect` inherits global `.menuBtn.menuChosen` (same green). Shimmer applies only to `#styleSelect`. */
.dashboard #styleSelect .menuBtn,
.dashboard #knowledgeStyleSelect .menuBtn,
.dashboard #mixSelect .menuBtn,
.dashboard #ovenSelect .menuBtn,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.dashboard #styleSelect .menuBtn::before,
.dashboard #knowledgeStyleSelect .menuBtn::before,
.dashboard #mixSelect .menuBtn::before,
.dashboard #ovenSelect .menuBtn::before,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.dashboard #styleSelect .menuBtn > *,
.dashboard #knowledgeStyleSelect .menuBtn > *,
.dashboard #mixSelect .menuBtn > *,
.dashboard #ovenSelect .menuBtn > *,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn > *{
  position: relative;
  z-index: 1;
}
.dashboard #styleSelect .menuBtn .menuCaret,
.dashboard #knowledgeStyleSelect .menuBtn .menuCaret,
.dashboard #mixSelect .menuBtn .menuCaret,
.dashboard #ovenSelect .menuBtn .menuCaret,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn .menuCaret{
  color: rgba(255, 255, 255, 0.92);
}
/* Default (unset): blue frame + deep blue fill */
.dashboard #styleSelect .menuBtn.menuUnset,
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset,
.dashboard #mixSelect .menuBtn.menuUnset,
.dashboard #ovenSelect .menuBtn.menuUnset,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn.menuUnset{
  border: 1px solid #0084ff;
  background: linear-gradient(180deg, rgba(0, 132, 255, 0.16), rgba(0, 5, 14, 0.9));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, 0.22),
    0 0 14px rgba(0, 132, 255, 0.22);
  filter: none;
}
/* Pizza style unset: fill + border + halo — shares `--pdc-recipe-gate-pulse` with dough balls / weight.
 * Softer peak than legacy; leads stagger (balls +⅓, weight +⅔). `data-pdc-recipe-gate-pulse` holds lower fields static until prior step resolves. */
@keyframes pdcStyleSelectUnsetNeonPulse{
  0%{
    background: linear-gradient(180deg, rgba(0, 132, 255, 0.14), rgba(0, 5, 16, 0.92));
    border-color: rgba(0, 132, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(0, 132, 255, 0.24),
      0 0 8px rgba(0, 132, 255, 0.22),
      0 0 14px rgba(0, 132, 255, 0.18);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  18%{
    background: linear-gradient(180deg, rgba(0, 132, 255, 0.22), rgba(0, 22, 36, 0.93));
    border-color: rgba(0, 220, 245, 0.72);
    box-shadow:
      0 0 0 2px rgba(0, 132, 255, 0.3),
      0 0 10px rgba(0, 132, 255, 0.3),
      0 0 15px rgba(75, 248, 254, 0.22),
      0 0 20px rgba(167, 120, 255, 0.11);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  62%{
    background: linear-gradient(180deg, rgba(0, 132, 255, 0.14), rgba(0, 5, 16, 0.92));
    border-color: rgba(0, 132, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(0, 132, 255, 0.24),
      0 0 8px rgba(0, 132, 255, 0.22),
      0 0 14px rgba(0, 132, 255, 0.18);
    animation-timing-function: linear;
  }
  100%{
    background: linear-gradient(180deg, rgba(0, 132, 255, 0.14), rgba(0, 5, 16, 0.92));
    border-color: rgba(0, 132, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(0, 132, 255, 0.24),
      0 0 8px rgba(0, 132, 255, 0.22),
      0 0 14px rgba(0, 132, 255, 0.18);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
}
.dashboard #styleSelect .menuBtn.menuUnset{
  animation: pdcStyleSelectUnsetNeonPulse var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: 0s;
  will-change: background, border-color, box-shadow;
}
/* Codex picker: same blues as dashboard unset chip, no attract loop. */
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset{
  animation: none;
  will-change: auto;
}
.dashboard #styleSelect .menuBtn.menuUnset::before,
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset::before,
.dashboard #mixSelect .menuBtn.menuUnset::before,
.dashboard #ovenSelect .menuBtn.menuUnset::before,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn.menuUnset::before{
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(0, 132, 255, 0.07) 48%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 58%,
    transparent 100%
  );
  opacity: 0.55;
}
/* Select Pizza Style only: slow diagonal sheen over the blue default chip. */
@keyframes pdcStylePickerShine{
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
.dashboard #styleSelect .menuBtn.menuUnset::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  /* Clip sheen to chip even if a parent sets overflow:visible (neon pulse box-shadow). */
  clip-path: inset(0 round 12px);
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(255, 255, 255, 0.05) 56%,
    transparent 72%
  );
  transform: translateX(-110%);
  animation: pdcStylePickerShine 4.5s ease-in-out infinite;
  transition: opacity 0.2s ease;
}
.dashboard #styleSelect .menuBtn.menuUnset > *{
  z-index: 2;
}
.dashboard #styleSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::after{
  opacity: 0;
}
/* Hover / focus: pink frame + scanline overlay */
.dashboard #styleSelect .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard #mixSelect .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard #ovenSelect .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn.menuUnset:is(:hover, :focus-visible){
  border-color: #ff008c;
  background: linear-gradient(180deg, rgba(255, 0, 140, 0.22), rgba(40, 0, 28, 0.92));
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.35),
    0 0 18px rgba(255, 0, 140, 0.35);
  filter: none;
}
.dashboard #styleSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::before,
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::before,
.dashboard #mixSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::before,
.dashboard #ovenSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::before,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn.menuUnset:is(:hover, :focus-visible)::before{
  opacity: 1;
  background: repeating-linear-gradient(
    -8deg,
    transparent 0,
    transparent 5px,
    rgba(255, 0, 140, 0.11) 5px,
    rgba(255, 0, 140, 0.11) 6px
  );
}
.dashboard #styleSelect .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset:is(:hover, :focus-visible){
  animation: none;
  will-change: auto;
}
/* Open panel (still unset): read as “active interaction” toward pink */
.dashboard #styleSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible),
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible),
.dashboard #mixSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible),
.dashboard #ovenSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible),
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  border-color: rgba(255, 0, 140, 0.88);
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.28),
    0 0 16px rgba(255, 0, 140, 0.28);
}
.dashboard #styleSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible),
.dashboard #knowledgeStyleSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  animation: none;
  will-change: auto;
}
/* Selected trigger: same green fill + halo as `.pill.autoOn`; calculator only (`:not(.knowledgeMain)`). */
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn.menuChosen{
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 18px rgba(30, 181, 130, 0.45),
    0 0 32px rgba(30, 181, 130, 0.2);
  filter: none;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn.menuChosen::before{
  display: none;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn.menuChosen:is(:hover, :focus-visible){
  filter: none;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.55),
    0 0 24px rgba(30, 181, 130, 0.52),
    0 0 40px rgba(30, 181, 130, 0.22);
}
/* Calculator menus: no sheen / scanlines / lift / brightness — only fills + neon glows.
 * Other triggers may use overflow:visible so panel glow isn’t clipped; #styleSelect keeps hidden
 * so the unset-chip diagonal sheen (`::after`, pdcStylePickerShine) stays inside the chip. */
.dashboard:not(.knowledgeMain) :is(#mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn{
  overflow: visible;
}
.dashboard:not(.knowledgeMain) #styleSelect .menuBtn{
  overflow: hidden;
}
.dashboard:not(.knowledgeMain) #styleSelect .menuBtn.menuUnset{
  animation: none;
  will-change: auto;
}
/* Recipe gate: only the active step pulses (style chip when pulse=style). */
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="style"] #styleSelect .menuBtn.menuUnset{
  animation: pdcStyleSelectUnsetNeonPulse var(--pdc-recipe-gate-pulse) linear infinite;
  animation-delay: 0s;
  will-change: background, border-color, box-shadow;
}
main.grid.dashboard:not(.knowledgeMain)[data-pdc-recipe-gate-pulse="style"] #styleSelect .menuBtn.menuUnset::after{
  display: block;
  animation: pdcStylePickerShine 4.5s ease-in-out infinite;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn.menuUnset::before,
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuBtn.menuUnset:is(:hover, :focus-visible)::before{
  opacity: 0 !important;
  background: none !important;
}
.dashboard:not(.knowledgeMain) #styleSelect .menuBtn.menuUnset::after{
  display: none;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem{
  box-shadow: none;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem:hover{
  transform: none;
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.42),
    0 0 20px rgba(255, 0, 140, 0.28);
}
.dashboard:not(.knowledgeMain) :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--ideal:not(.active):hover,
.dashboard:not(.knowledgeMain) :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--exceed:not(.active):hover,
.dashboard:not(.knowledgeMain) :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--short:not(.active):hover{
  transform: none;
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.42),
    0 0 20px rgba(255, 0, 140, 0.28);
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel{
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, 0.28),
    0 0 22px rgba(0, 132, 255, 0.22);
}
.dashboard:not(.knowledgeMain) #mixSelect .menuPanel .menuGroup{
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, 0.32),
    0 0 12px rgba(0, 132, 255, 0.2),
    0 0 16px rgba(0, 242, 255, 0.08);
}
.dashboard:not(.knowledgeMain) :is(
  #styleSelect,
  #ovenSelect,
  #flourSelect,
  #flourBlendASelect,
  #flourBlendBSelect,
  #flourBlendCSelect
) .menuPanel .menuGroup{
  box-shadow:
    0 0 0 1px rgba(255, 207, 90, 0.38),
    0 0 10px rgba(255, 207, 90, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.32);
}
@media (prefers-reduced-motion: reduce){
  .dashboard #styleSelect .menuBtn::before,
  .dashboard #knowledgeStyleSelect .menuBtn::before,
  .dashboard #mixSelect .menuBtn::before,
  .dashboard #ovenSelect .menuBtn::before,
  .dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuBtn::before{
    transition: none;
  }
  .dashboard #styleSelect .menuBtn.menuUnset::after{
    animation: none;
    transform: none;
    opacity: 0;
  }
  .dashboard #styleSelect .menuBtn.menuUnset{
    animation: none;
    will-change: auto;
    background: linear-gradient(180deg, rgba(0, 132, 255, 0.2), rgba(0, 8, 22, 0.92));
    border-color: rgba(0, 132, 255, 0.95);
    box-shadow:
      0 0 0 1px rgba(0, 132, 255, 0.3),
      0 0 12px rgba(0, 132, 255, 0.28),
      0 0 16px rgba(75, 248, 254, 0.18);
  }
}

.menuBtn .bakeSetupHomeOvenStrip{
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.menuBtn .bakeSetupHomeOvenStrip .menuItemHomeOvenToggleCol{
  gap: 5px;
}
.menuBtn .bakeSetupHomeOvenStrip .menuItemHomeOvenToggleLab{
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.22;
}
.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,
.menuSelectTrigger:has(.menuBtn.menuUnset) > .menuClear{
  background: rgba(0,0,0,.10);
  border-color: rgba(255,255,255,.14);
}
.menuBtn.menuChosen .menuClear,
.menuSelectTrigger:has(.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;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: paint;
  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;
}
/* Sticky in-panel search (blend Flour A / Flour B pickers). Sits above the rows and stays put while
   the list scrolls; opaque background matches the panel so rows don't show through. */
.menuPanelSearch{
  position: sticky;
  top: -8px;
  z-index: 6;
  margin: -8px -8px 6px;
  padding: 8px;
  background: rgba(12,18,58,.99);
  border-bottom: 1px solid rgba(246,249,255,.12);
  border-radius: 12px 12px 0 0;
}
.menuPanelSearchInput{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(246,249,255,.18);
  background: rgba(5,10,40,.85);
  color: rgba(246,249,255,.95);
  font-size: calc(15px + var(--type-bump-chip));
  font-weight: 600;
}
.menuPanelSearchInput:focus{
  outline: none;
  border-color: rgba(246,249,255,.4);
  box-shadow: 0 0 0 3px rgba(90,74,149,.28);
}
.menuPanelSearchInput::-webkit-search-cancel-button,
.menuPanelSearchInput::-webkit-search-decoration{
  -webkit-appearance: none;
  appearance: none;
}
.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,
#knowledgeStyleSelect .menuPanel,
:is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .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;
}
.menuGroupHeaderExtra{
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.menuGroupHeaderExtrasCluster{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  margin: 0;
}
.menuGroupSteelStoneHead,
.menuGroupParBakeHead{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
.menuGroupSteelStoneHeadLab,
.menuGroupParBakeHeadLab{
  font-size: calc(var(--fs-b-12) + 1pt);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ef4444;
  text-shadow: none;
  white-space: nowrap;
  user-select: none;
  line-height: 1.15;
}
.menuGroupSteelStoneHeadLab.isSteelStoneOff,
.menuGroupSteelStoneHead:has(.menuGroupSteelStoneToggle:not(:checked)) .menuGroupSteelStoneHeadLab,
.menuGroupParBakeHeadLab.isParBakeOff,
.menuGroupParBakeHead:has(.menuGroupParBakeToggle:not(:checked)) .menuGroupParBakeHeadLab{
  color: #ef4444 !important;
  text-shadow: none !important;
}
.menuGroupSteelStoneHeadLab.isSteelStoneOn,
.menuGroupSteelStoneHead:has(.menuGroupSteelStoneToggle:checked) .menuGroupSteelStoneHeadLab,
.menuGroupParBakeHeadLab.isParBakeOn,
.menuGroupParBakeHead:has(.menuGroupParBakeToggle:checked) .menuGroupParBakeHeadLab{
  color: #4ade80 !important;
  text-shadow: none !important;
}
.menuGroupSteelStoneToggle,
.menuGroupParBakeToggle{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(5,16,61,.88));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.menuGroupSteelStoneToggle:hover,
.menuGroupParBakeToggle:hover{
  border-color: rgba(255,255,255,.5);
}
.menuGroupSteelStoneToggle:checked,
.menuGroupParBakeToggle:checked{
  border-color: rgba(34,197,94,.92);
  background:
    linear-gradient(180deg, rgba(74,222,128,.45), rgba(5,40,24,.95)),
    center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbf7d0' d='M4.2 9.2 1.4 6.4l1-1 1.8 1.8 4.4-4.4 1 1z'/%3E%3C/svg%3E");
  box-shadow:
    0 0 0 1px rgba(34,197,94,.35),
    0 0 10px rgba(34,197,94,.42),
    inset 0 0 4px rgba(74,222,128,.18);
}
.menuGroupSteelStoneToggle:focus-visible,
.menuGroupParBakeToggle:focus-visible{
  outline: 2px solid rgba(75,248,254,.65);
  outline-offset: 2px;
}
/* Par-bake: compact framed box under the oven chip (not on dropdown category headers). */
.dashboard .sidebar .ovenParBakeRow{
  box-sizing: border-box;
  margin: 10px 0 12px;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.dashboard .sidebar .ovenParBakeRow > *{
  position: relative;
  z-index: 1;
}
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeHead{
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeToggle{
  border-width: calc(1px + 2pt);
}
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeToggle:checked{
  box-shadow:
    0 0 0 calc(1px + 2pt) rgba(34,197,94,.35),
    0 0 10px rgba(34,197,94,.42),
    inset 0 0 4px rgba(74,222,128,.18);
}
.dashboard .sidebar .ovenParBakeRow .ovenParBakeHint{
  margin: 8px 0 0;
  padding: 0;
  font-size: calc(var(--fs-b-12) + 0.5pt);
  font-weight: 600;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.72);
}
.dashboard .sidebar .ovenParBakeRow.isParBakeActive{
  --nf-border: rgba(34, 197, 94, 0.58);
  --nf-glow: rgba(34, 197, 94, 0.16);
}
.dashboard .sidebar .ovenParBakeRow.isParBakeActive .ovenParBakeHint{
  color: rgba(255, 255, 255, 0.82);
}
.dashboard .sidebar .ovenParBakeRow.isParBakeActive .ovenParBakeHint::first-line{
  color: #4ade80;
}
@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);
}
.menuPanel .menuItem{
  box-shadow: none;
}
.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: border-color .12s ease, background .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;
}
/* Single-column dashboard (≤649px): pizza style menu rows show a knowledge shot on the right. */
@media (max-width: 649px){
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItem.menuItemStyleRow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleBody{
    flex: 1 1 auto;
    min-width: 0;
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumb{
    flex: 0 0 90px;
    width: 90px;
    height: 56px;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 132, 255, 0.45);
    background: rgba(5, 16, 61, 0.65);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumb--missing{
    display: none;
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumbImg{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.1s ease;
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumbImg.menuItemStyleThumbImg--ready{
    opacity: 1;
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumb:not(:has(.menuItemStyleThumbImg--ready)){
    background: linear-gradient(135deg, rgba(0, 132, 255, 0.12), rgba(5, 16, 61, 0.5));
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItem.menuItemStyleRow:is(:hover, :focus-visible, .isPeek) .menuItemStyleThumb{
    border-color: rgba(255, 0, 140, 0.55);
    box-shadow:
      0 0 0 1px rgba(255, 0, 140, 0.22),
      0 8px 18px rgba(0, 0, 0, 0.32);
  }
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItem.menuItemStyleRow.active .menuItemStyleThumb{
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  }
}
@media (min-width: 650px){
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumb{
    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));
  }
  /* Pizza style / flour dropdown: category labels 2pt above row type (same cqi scale). */
  .dashboard #styleSelect .menuPanel .menuGroup,
  .dashboard #knowledgeStyleSelect .menuPanel .menuGroup,
  .dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect .menuPanel .menuGroup,
  .dashboard.knowledgeMain.floursPage #floursFlourSelect .menuPanel .menuGroup{
    font-size: clamp(
      calc(11px + var(--type-bump-chip) + 2pt),
      calc(10px + 5.2cqi + var(--type-bump-chip) + 2pt),
      calc(15px + var(--type-bump-chip) + 2pt)
    );
  }
}
/* 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));
    }
    .dashboard #styleSelect .menuPanel .menuGroup,
    .dashboard #knowledgeStyleSelect .menuPanel .menuGroup,
    .dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect .menuPanel .menuGroup,
    .dashboard.knowledgeMain.floursPage #floursFlourSelect .menuPanel .menuGroup{
      font-size: clamp(
        calc(11px + var(--type-bump-chip) + 2pt),
        calc(11px + 1.6vw + var(--type-bump-chip) + 2pt),
        calc(15px + var(--type-bump-chip) + 2pt)
      );
    }
  }
}
/* 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;
  margin: 0;
  cursor: pointer;
}
.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;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(5,16,61,.88));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.menuHomeOvenStoneToggle:hover{
  border-color: rgba(255,255,255,.45);
}
.menuHomeOvenStoneToggle:checked{
  border-color: rgba(34,197,94,.92);
  background:
    linear-gradient(180deg, rgba(74,222,128,.45), rgba(5,40,24,.95)),
    center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbf7d0' d='M4.2 9.2 1.4 6.4l1-1 1.8 1.8 4.4-4.4 1 1z'/%3E%3C/svg%3E");
  box-shadow:
    0 0 0 1px rgba(34,197,94,.35),
    0 0 8px rgba(34,197,94,.4),
    inset 0 0 4px rgba(74,222,128,.18);
}
.menuHomeOvenStoneToggle:focus-visible{
  outline: 2px solid rgba(75,248,254,.65);
  outline-offset: 2px;
}
/* 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);
}

/* Dashboard dropdown panels + rows: unset/hover pink/cyan chrome; selected trigger + row use auto green on calculator (`:not(.knowledgeMain)`). */
.dashboard #styleSelect .menuPanel,
.dashboard #knowledgeStyleSelect .menuPanel,
.dashboard #mixSelect .menuPanel,
.dashboard #ovenSelect .menuPanel,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel{
  border: 1px solid rgba(0, 132, 255, 0.45);
  background: linear-gradient(180deg, rgba(0, 8, 18, 0.97), rgba(0, 5, 12, 0.97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 132, 255, 0.08);
}
.dashboard #knowledgeStyleSelect .menuPanel .menuGroup,
.dashboard #mixSelect .menuPanel .menuGroup{
  border-color: rgba(0, 132, 255, 0.52);
  /* Opaque stops so sticky category rows never show list content through the header. */
  background: linear-gradient(90deg, #0b2742, #040f1a);
  box-shadow:
    inset 0 1px 0 rgba(0, 190, 255, 0.14),
    0 0 0 1px rgba(0, 132, 255, 0.32),
    0 0 10px rgba(0, 132, 255, 0.22),
    0 0 16px rgba(0, 242, 255, 0.1),
    0 6px 16px rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.95);
}
/* Pizza style, oven, flour: warm gold band — complementary to cyan panel rows. */
.dashboard #styleSelect .menuPanel .menuGroup,
.dashboard #ovenSelect .menuPanel .menuGroup,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuGroup{
  border-color: rgba(255, 207, 90, 0.62);
  background: linear-gradient(
    105deg,
    #4a3d18 0%,
    #2a3458 42%,
    #121a42 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 166, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 207, 90, 0.4),
    0 0 12px rgba(255, 207, 90, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.38);
  color: #fff6d0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.dashboard #ovenSelect .menuPanel .menuGroupSteelStoneHead:has(.menuGroupSteelStoneToggle:not(:checked)) .menuGroupSteelStoneHeadLab,
.dashboard #ovenSelect .menuPanel .menuGroupSteelStoneHeadLab.isSteelStoneOff,
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeHead:has(.menuGroupParBakeToggle:not(:checked)) .menuGroupParBakeHeadLab,
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeHeadLab.isParBakeOff{
  color: #ef4444 !important;
  text-shadow: none !important;
}
.dashboard #ovenSelect .menuPanel .menuGroupSteelStoneHead:has(.menuGroupSteelStoneToggle:checked) .menuGroupSteelStoneHeadLab,
.dashboard #ovenSelect .menuPanel .menuGroupSteelStoneHeadLab.isSteelStoneOn,
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeHead:has(.menuGroupParBakeToggle:checked) .menuGroupParBakeHeadLab,
.dashboard .sidebar .ovenParBakeRow .menuGroupParBakeHeadLab.isParBakeOn{
  color: #4ade80 !important;
  text-shadow: none !important;
}
.dashboard #knowledgeStyleSelect .menuPanel .menuGroupCaret,
.dashboard #mixSelect .menuPanel .menuGroupCaret{
  color: rgba(200, 230, 255, 0.88);
}
.dashboard #styleSelect .menuPanel .menuGroupCaret,
.dashboard #ovenSelect .menuPanel .menuGroupCaret,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuGroupCaret{
  color: rgba(255, 232, 165, 0.92);
}
.dashboard #styleSelect .menuPanel .menuItem,
.dashboard #knowledgeStyleSelect .menuPanel .menuItem,
.dashboard #mixSelect .menuPanel .menuItem,
.dashboard #ovenSelect .menuPanel .menuItem,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem{
  border: 1px solid rgba(0, 132, 255, 0.55);
  background: linear-gradient(180deg, rgba(0, 132, 255, 0.1), rgba(0, 5, 18, 0.78));
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.dashboard #styleSelect .menuPanel .menuItem .menuItemSub,
.dashboard #knowledgeStyleSelect .menuPanel .menuItem .menuItemSub,
.dashboard #mixSelect .menuPanel .menuItem .menuItemSub,
.dashboard #ovenSelect .menuPanel .menuItem .menuItemSub,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem .menuItemSub{
  color: rgba(165, 205, 235, 0.88);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem .menuItemFlourSub{
  color: rgba(165, 205, 235, 0.88);
}
.dashboard #styleSelect .menuPanel .menuItem:hover,
.dashboard #knowledgeStyleSelect .menuPanel .menuItem:hover,
.dashboard #mixSelect .menuPanel .menuItem:hover,
.dashboard #ovenSelect .menuPanel .menuItem:hover,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem:hover{
  border-color: #ff008c;
  background: linear-gradient(180deg, rgba(255, 0, 140, 0.18), rgba(22, 0, 18, 0.82));
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
  filter: none;
}
.dashboard #styleSelect .menuPanel .menuItem:hover .menuItemSub,
.dashboard #knowledgeStyleSelect .menuPanel .menuItem:hover .menuItemSub,
.dashboard #mixSelect .menuPanel .menuItem:hover .menuItemSub,
.dashboard #ovenSelect .menuPanel .menuItem:hover .menuItemSub,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem:hover .menuItemSub,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem:hover .menuItemFlourSub{
  color: rgba(255, 220, 240, 0.95);
}
/* Selected row in open panel: match auto green (calculator only). */
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem.active{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 18px rgba(30, 181, 130, 0.42),
    0 0 30px rgba(30, 181, 130, 0.18);
  transform: none;
  filter: none;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem.active .menuItemSub,
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem.active .menuItemFlourSub{
  color: rgba(255, 255, 255, 0.95);
}
/* Reset / no style yet: neutral rows (traffic lights only after recipe starts). */
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItemFlourRow.menuItem--plain:not(.active){
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItemFlourRow.menuItem--plain:not(.active):hover{
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.32);
}
/* Ideal tier = recommended strength match — thicker green border when traffic is on. */
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--ideal:not(.active){
  border-width: 2.5px;
  border-color: rgba(30, 181, 130, 0.92);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.22);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--ideal.active{
  border-width: 2.5px;
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--exceed:not(.active){
  border-color: rgba(247, 182, 36, 0.82);
  box-shadow: 0 0 0 4px rgba(247, 182, 36, 0.1);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--short:not(.active){
  border-color: rgba(255, 107, 107, 0.82);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--ideal:not(.active):hover,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--exceed:not(.active):hover,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.menuItem--short:not(.active):hover{
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.32);
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem.menuNone.active{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.38),
    0 0 16px rgba(30, 181, 130, 0.4),
    0 0 26px rgba(30, 181, 130, 0.16);
}

/* Touch drag in popup menus (`menu-select.js`): peek/hover glow only when idle. */
.menuPanel.menuPanel--touchDrag{
  touch-action: pan-y;
}
.menuPanel.menuPanel--touchDrag .menuItem{
  transition: none !important;
  transform: none !important;
  filter: none !important;
}
.menuPanel.menuPanel--touchDrag .menuItem:not(.isPeek):not(.active){
  border-color: rgba(246, 249, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.7), rgba(5, 16, 61, 0.7)) !important;
  box-shadow: none !important;
}
.menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active){
  border-color: rgba(246, 249, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(90, 74, 149, 0.24), rgba(5, 16, 61, 0.72)) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 140, 0.2) !important;
}
.dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel.menuPanel--touchDrag .menuItem:not(.isPeek):not(.active){
  border-color: rgba(246, 249, 255, 0.1) !important;
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.7), rgba(5, 16, 61, 0.7)) !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.dashboard #styleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #knowledgeStyleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #mixSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #ovenSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #styleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #knowledgeStyleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #mixSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active),
.dashboard #ovenSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active){
  border-color: #ff008c !important;
  background: linear-gradient(180deg, rgba(255, 0, 140, 0.18), rgba(22, 0, 18, 0.82)) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 140, 0.25) !important;
  transform: none !important;
  filter: none !important;
}
.dashboard #styleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemSub,
.dashboard #knowledgeStyleSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemSub,
.dashboard #mixSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemSub,
.dashboard #ovenSelect .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemSub,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemSub,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.isPeek:not(.active) .menuItemFlourSub{
  color: rgba(255, 220, 240, 0.95);
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.menuItemFlourRow.menuItem--plain:not(.active).isPeek{
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.32) !important;
}
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.menuItem--ideal:not(.active).isPeek,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.menuItem--exceed:not(.active).isPeek,
.dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel.menuPanel--touchDrag .menuItem.menuItem--short:not(.active).isPeek{
  box-shadow:
    0 0 0 1px rgba(255, 0, 140, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.32) !important;
}

@media (pointer: coarse){
  /* Sticky touch `:hover` on the first row — suppress unless `.isPeek` (drag sets peek in JS). */
  .dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem:not(.isPeek):not(.active):hover,
  .dashboard:not(.knowledgeMain) :is(#styleSelect, #mixSelect, #ovenSelect, #flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect) .menuPanel .menuItem:not(.isPeek):not(.active):active{
    border-color: rgba(246, 249, 255, 0.1) !important;
    background: linear-gradient(180deg, rgba(13, 16, 61, 0.7), rgba(5, 16, 61, 0.7)) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .dashboard #styleSelect .menuPanel .menuItem.isPeek:not(.active),
  .dashboard #knowledgeStyleSelect .menuPanel .menuItem.isPeek:not(.active),
  .dashboard #mixSelect .menuPanel .menuItem.isPeek:not(.active),
  .dashboard #ovenSelect .menuPanel .menuItem.isPeek:not(.active),
  .dashboard :is(#flourSelect, #flourBlendASelect, #flourBlendBSelect, #flourBlendCSelect, .recoFlourPicker) .menuPanel .menuItem.isPeek:not(.active){
    border-color: #ff008c !important;
    background: linear-gradient(180deg, rgba(255, 0, 140, 0.18), rgba(22, 0, 18, 0.82)) !important;
    box-shadow:
      0 0 0 1px rgba(255, 0, 140, 0.25),
      0 14px 30px rgba(0, 0, 0, 0.32) !important;
    transform: translateY(-1px) !important;
    filter: none !important;
  }
}

/* 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);
}

/* Flour Codex: custom flour block between filters and stock chips */
.knowledgeMain.floursPage .floursCustomFlourBlock{
  width: 100%;
  margin: 4px 0 0;
  box-sizing: border-box;
}
.knowledgeMain.floursPage .floursCustomFlourBlock .flourCustomAddRow{
  margin-top: 10px;
}

/* Add custom flour: full-width trigger aligned with #flourSelect menuBtn */
.flourCustomAddRow{
  width: 100%;
  margin: 10px 0 10px;
  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: pdcMenu;
}
#flourCustomOpen.flourAddChip.flourCustomOpenBtn{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 10px 10px;
  border-radius: 12px;
  text-align: left;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: #fff;
  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);
}
#flourCustomOpen.flourAddChip .menuSelectTriggerHead{
  width: 100%;
  min-width: 0;
}
#flourCustomOpen.flourAddChip .menuSelectTitle{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.22;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  #flourCustomOpen.flourAddChip .menuSelectTitle{
    font-size: clamp(10px, calc(7px + 4.8cqi), 13px);
  }
}
@supports not (font-size: clamp(1px, 1cqi + 1px, 24px)){
  @media (max-width: 560px){
    #flourCustomOpen.flourAddChip .menuSelectTitle{
      font-size: clamp(10px, calc(9px + 2.1vw), 13px);
    }
  }
}
#flourCustomOpen.flourAddChip: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);
}
#flourCustomOpen.flourAddChip[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);
}
.flourCustomPanel .flourCustomHint{
  margin: 0 0 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}
.flourCustomFieldHint{
  margin: 0 0 10px;
  font-size: var(--fs-b-12);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.flourCustomFieldHint:last-of-type{
  margin-bottom: 14px;
}

/* 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 planner: same neon gate as dough balls (cyan pulse until a pan is in the lineup). */
#panDoughField.field.neonFrame{
  padding: 10px 10px 12px;
  box-sizing: border-box;
}
#panDoughField.field.neonFrame > *{
  position: relative;
  z-index: 1;
}
#panDoughField.field.neonFrame::before{
  z-index: 0;
}
#panDoughField .sizeRow#panPlannerRow{
  margin-top: 0;
}

/* 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;
}
.dashboard:not(.knowledgeMain) .panCustomLabel select,
.dashboard:not(.knowledgeMain) .panCustomSelect{
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.35),
    0 0 16px rgba(30, 181, 130, 0.32),
    0 0 28px rgba(30, 181, 130, 0.12);
}
.dashboard:not(.knowledgeMain) .panCustomLabel select:focus,
.dashboard:not(.knowledgeMain) .panCustomSelect:focus{
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.5),
    0 0 22px rgba(30, 181, 130, 0.44),
    0 0 38px rgba(30, 181, 130, 0.16);
}
.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;
}
/* Meets / exceeds / doesn't meet: show ~10 rows, scroll the rest inside the fold. */
.recoList.recoList--scrollCap{
  --reco-scroll-row: 2.625rem;
  max-height: calc(10 * (var(--reco-scroll-row) + 6px) - 6px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding-right: 2px;
  border-radius: 10px;
}
.recoFoldWrap{margin-top: 10px}
.recoFlourPicker.menuSelect{
  margin-top: 10px;
}
/* Requirement pickers: trigger border matches list traffic lights (style chosen). */
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuUnset{
  border: 2.5px solid rgba(30, 181, 130, 0.92);
  background: linear-gradient(180deg, rgba(30, 181, 130, 0.12), rgba(0, 5, 14, 0.9));
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.2),
    0 0 14px rgba(30, 181, 130, 0.22);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuUnset{
  border: 1px solid rgba(247, 182, 36, 0.82);
  background: linear-gradient(180deg, rgba(247, 182, 36, 0.14), rgba(0, 5, 14, 0.9));
  box-shadow:
    0 0 0 4px rgba(247, 182, 36, 0.1),
    0 0 14px rgba(247, 182, 36, 0.18);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuUnset{
  border: 1px solid rgba(255, 107, 107, 0.82);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.12), rgba(0, 5, 14, 0.9));
  box-shadow:
    0 0 0 4px rgba(255, 107, 107, 0.1),
    0 0 14px rgba(255, 107, 107, 0.16);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuChosen{
  border: 2.5px solid rgba(30, 181, 130, 0.92);
  background: var(--good);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.2),
    0 0 18px rgba(30, 181, 130, 0.45),
    0 0 32px rgba(30, 181, 130, 0.2);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuChosen{
  border: 1px solid rgba(247, 182, 36, 0.92);
  background: linear-gradient(180deg, rgba(247, 182, 36, 0.32), rgba(28, 18, 0, 0.9));
  box-shadow:
    0 0 0 1px rgba(247, 182, 36, 0.4),
    0 0 18px rgba(247, 182, 36, 0.38),
    0 0 28px rgba(247, 182, 36, 0.14);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuChosen{
  border: 1px solid rgba(255, 107, 107, 0.92);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.28), rgba(28, 0, 8, 0.9));
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.38),
    0 0 18px rgba(255, 107, 107, 0.34),
    0 0 28px rgba(255, 107, 107, 0.12);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuUnset:is(:hover, :focus-visible),
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuUnset:is(:hover, :focus-visible){
  filter: none;
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuUnset:is(:hover, :focus-visible){
  border-color: rgba(30, 181, 130, 1);
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.45),
    0 0 20px rgba(30, 181, 130, 0.42);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuUnset:is(:hover, :focus-visible){
  border-color: rgba(247, 182, 36, 1);
  box-shadow:
    0 0 0 1px rgba(247, 182, 36, 0.45),
    0 0 20px rgba(247, 182, 36, 0.38);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuUnset:is(:hover, :focus-visible){
  border-color: rgba(255, 107, 107, 1);
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.45),
    0 0 20px rgba(255, 107, 107, 0.36);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuChosen:is(:hover, :focus-visible){
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.55),
    0 0 24px rgba(30, 181, 130, 0.52),
    0 0 40px rgba(30, 181, 130, 0.22);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuChosen:is(:hover, :focus-visible){
  box-shadow:
    0 0 0 1px rgba(247, 182, 36, 0.55),
    0 0 24px rgba(247, 182, 36, 0.48),
    0 0 36px rgba(247, 182, 36, 0.2);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuChosen:is(:hover, :focus-visible){
  box-shadow:
    0 0 0 1px rgba(255, 107, 107, 0.55),
    0 0 24px rgba(255, 107, 107, 0.46),
    0 0 36px rgba(255, 107, 107, 0.18);
}
.dashboard:not(.knowledgeMain) #flourReco :is(.recoFlourPicker--ideal, .recoFlourPicker--exceed, .recoFlourPicker--short) > .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  filter: none;
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--ideal > .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  border-color: rgba(30, 181, 130, 0.95);
  box-shadow:
    0 0 0 3px rgba(30, 181, 130, 0.24),
    0 0 16px rgba(30, 181, 130, 0.3);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--exceed > .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  border-color: rgba(247, 182, 36, 0.95);
  box-shadow:
    0 0 0 4px rgba(247, 182, 36, 0.14),
    0 0 16px rgba(247, 182, 36, 0.28);
}
.dashboard:not(.knowledgeMain) #flourReco .recoFlourPicker--short > .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  border-color: rgba(255, 107, 107, 0.95);
  box-shadow:
    0 0 0 4px rgba(255, 107, 107, 0.14),
    0 0 16px rgba(255, 107, 107, 0.26);
}
/* Meets / exceeds / doesn't meet: tighter chips (trigger + list rows). */
#flourReco .recoFlourPicker .menuBtn{
  padding: 7px 10px;
}
#flourReco .recoFlourPicker .menuBtn .menuSelectTitle{
  line-height: 1.15;
}
#flourReco .recoFlourPicker .menuPanel .menuItem{
  margin-top: 4px;
  padding: 6px 8px;
  line-height: 1.15;
}
#flourReco .recoFlourPicker .menuPanel .menuItem:first-child{
  margin-top: 0;
}
#flourReco .recoFlourPicker .menuPanel .menuItem.menuItemFlourRow .menuItemFlourMain{
  gap: 0;
}
/* Closed chip matches #flourSelect type; list rows 1.5pt smaller. */
#flourReco .recoFlourPicker .menuPanel .menuItem.menuItemFlourRow .menuItemFlourTitle{
  line-height: 1.12;
  font-size: calc(11px + var(--type-bump-chip) - 1.5pt);
}
#flourReco .recoFlourPicker .menuPanel .menuItem.menuItemFlourRow .menuItemStock{
  font-size: calc(var(--fs-b-11) - 1.5pt);
}
#flourReco .recoFlourPicker .menuPanel .menuItem.menuItemFlourRow .menuItemStock input{
  width: 13px;
  height: 13px;
}
@supports (font-size: clamp(1px, 1cqi + 1px, 24px)){
  #flourReco .recoFlourPicker .menuPanel .menuItem{
    font-size: clamp(
      calc(11px + var(--type-bump-chip) - 1.5pt),
      calc(10px + 5.2cqi + var(--type-bump-chip) - 1.5pt),
      calc(15px + var(--type-bump-chip) - 1.5pt)
    );
  }
  #flourReco .recoFlourPicker .menuPanel .menuItem.menuItemFlourRow .menuItemFlourTitle{
    font-size: clamp(
      calc(11px + var(--type-bump-chip) - 1.5pt),
      calc(9px + 4.5cqi + var(--type-bump-chip) - 1.5pt),
      calc(15px + var(--type-bump-chip) - 1.5pt)
    );
  }
}
.recoPickerEmpty{
  margin-top: 10px;
  font-size: calc(var(--fs-b-12) - 1.5pt);
}
.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;
}
/* Mixing + dough timeline: icon assets only — no badge frame; +25% icon footprint. */
#mixingGuide .step,
#timeline .step{
  grid-template-columns: 42.5px 1fr;
}
#mixingGuide .step .badge,
#timeline .step .badge{
  width: 42.5px;
  height: 42.5px;
  border: none;
  background: transparent;
  box-shadow: none;
}
#mixingGuide .badgeIconImg,
#timeline .badgeIconImg{
  width: 35px;
  height: 35px;
}
#mixingGuide .step .badgeIcon:not(.badgeIcon--img),
#timeline .step .badgeIcon:not(.badgeIcon--img){
  font-size: calc(var(--fs-b-14) * 1.25);
}
.badgeIcon{font-size: var(--fs-b-14)}
.badgeIcon--img{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
}
.badgeIconImg{
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}
.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%);
  max-width: min(92vw, 460px);
  padding: 11px 16px;
  border-radius: 16px;
  background: rgba(10,12,16,.97);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  text-align: center;
  line-height: 1.3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events:none;
  /* Sit above every overlay (modals/dungeon/consent top out around 13000). */
  z-index: 2147483000;
  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
---------------------------- */

/* Pizza Styles page: codex panel chrome (mockup — bordered search/filter box + chips band). */
.knowledgeMain:not(.floursPage){
  --pdc-knowledge-codex-border: rgba(148, 96, 255, 0.72);
  --pdc-knowledge-codex-glow: rgba(120, 60, 255, 0.32);
  --pdc-knowledge-codex-fill-top: rgba(18, 12, 46, 0.94);
  --pdc-knowledge-codex-fill-bot: rgba(8, 14, 48, 0.92);
  --pdc-knowledge-codex-cyan: rgba(0, 210, 255, 0.72);
}
.knowledgeMain:not(.floursPage) > .mainCard > .cardBody{
  padding-top: 14px;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexPanel{
  border: 2px solid var(--pdc-knowledge-codex-border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 16px 14px 14px;
  background: linear-gradient(
    180deg,
    var(--pdc-knowledge-codex-fill-top),
    var(--pdc-knowledge-codex-fill-bot)
  );
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.12),
    0 0 28px var(--pdc-knowledge-codex-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.knowledgeMain:not(.floursPage) .knowledgeCodexPanel--solo{
  border-bottom: 2px solid var(--pdc-knowledge-codex-border);
  border-radius: 16px;
  margin-bottom: 22px;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexHead{
  margin: 0 0 14px;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexTitle{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexTitleIcon{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexTitleText{
  margin: 0;
  font-family: var(--arcade);
  font-size: clamp(var(--fs-h-14), calc(8px + 3.2cqi), calc(var(--fs-h-16) + 2pt));
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fffb80;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexTagline{
  margin: 0;
  color: #fff;
  font-size: calc(var(--fs-b-12) + 1pt);
  line-height: 1.45;
}
.knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow{
  --pdc-codex-picker-width: 23rem;
  display: grid;
  grid-template-columns: minmax(120px, 11.5rem) minmax(120px, var(--pdc-codex-picker-width)) minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
  width: 100%;
}
@media (max-width: 640px){
  .knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow > .field.pdcSearchField.knowledgeStyleSearchField{
  flex: none;
  width: 100%;
  max-width: 11.5rem;
  margin: 0;
  border-color: var(--pdc-knowledge-codex-cyan);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.16);
}
@media (max-width: 420px){
  .knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow > .field.pdcSearchField.knowledgeStyleSearchField{
    max-width: none;
  }
}
.knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow > .field.pdcSearchField.knowledgeStyleSearchField:focus-within{
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
.knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow > .knowledgeStyleDropdownWrap{
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: var(--pdc-codex-picker-width, 23rem);
}
@media (max-width: 420px){
  .knowledgeMain:not(.floursPage) .knowledgeCodexFiltersRow > .knowledgeStyleDropdownWrap{
    max-width: none;
  }
}
.knowledgeMain:not(.floursPage) .knowledgeSortDropdownWrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.knowledgeMain:not(.floursPage) .knowledgeSortFieldLabel{
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.88);
  line-height: 1.2;
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField{
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  min-width: 0;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--pdc-knowledge-codex-cyan);
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.12);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField:focus-within{
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSelect{
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  padding: 10px 10px;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSelectClear{
  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);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSelectClear:hover{
  background: rgba(228, 49, 115, 0.28);
  color: rgba(255, 255, 255, 0.98);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSortDirBtn{
  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, 251, 128, 0.95);
  font-size: var(--fs-b-14);
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSortDirBtn:hover{
  background: rgba(30, 181, 130, 0.22);
  color: #fff;
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSortDirBtn[aria-pressed="true"]{
  background: rgba(30, 181, 130, 0.32);
  color: #fff;
}
.knowledgeMain:not(.floursPage) .knowledgeSelectField .knowledgeSelectClear[hidden]{
  display: none !important;
}

/* 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;
}
.knowledgeMain:not(.floursPage) .knowledgeRoot{
  margin-top: 6px;
  gap: 28px;
}

/* Styles page: quick jump chips — `position: sticky` on the track (no `fixed` clone) so chips keep default size/borders. */
.knowledgeMain:not(.floursPage){
  --pdc-knowledge-quick-chips-sticky-gap: 5px;
}
/* Chips band: direct child of `.cardBody` for sticky; visually closes the codex panel border. */
.knowledgeMain:not(.floursPage) .knowledgeQuickChipsTrack{
  position: sticky;
  top: calc(
    env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + var(--pdc-knowledge-quick-chips-sticky-gap, 5px)
  );
  z-index: 92;
  margin-top: 0;
  margin-bottom: 22px;
  width: 100%;
  align-self: stretch;
  min-height: 0;
  pointer-events: none;
  border: 2px solid var(--pdc-knowledge-codex-border);
  border-top: 1px solid rgba(148, 96, 255, 0.42);
  border-radius: 0 0 16px 16px;
  padding: 12px 10px 14px;
  background: linear-gradient(
    180deg,
    var(--pdc-knowledge-codex-fill-bot),
    rgba(6, 12, 42, 0.96)
  );
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChipsTrack--pinned{
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.28);
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips{
  box-sizing: border-box;
  pointer-events: auto;
  width: 100%;
  margin: 0;
  gap: 8px;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip{
  font-family: var(--arcade);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  line-height: 1.1;
  height: auto;
  min-height: 40px;
  padding: 8px 10px;
  max-width: 100%;
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(var(--fs-b-9), calc(6px + 1.1vw), var(--fs-b-11));
  border: 2px solid rgba(120, 90, 200, 0.88);
  background: rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  font-weight: 800;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip:hover:not(.activeGreen){
  border-color: rgba(160, 120, 230, 1);
  background: rgba(40, 24, 72, 0.45);
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip.activeGreen,
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip.activeGreen:hover,
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip.chipVarGold.activeGreen,
.knowledgeMain:not(.floursPage) .knowledgeQuickChips .chip.chipVarGold.activeGreen:hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.42),
    0 0 28px rgba(30, 181, 130, 0.18);
  filter: none;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChipIcon{
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1;
}
.knowledgeMain:not(.floursPage) .knowledgeQuickChipLabel{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-column style grid (<820px): wrap category jump chips so labels stay readable. */
.knowledgeMain.knowledgeMain--styleGridSingleCol:not(.floursPage) .knowledgeQuickChips {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
}
.knowledgeMain.knowledgeMain--styleGridSingleCol:not(.floursPage) .knowledgeQuickChips .chip {
  flex: 0 1 auto;
  width: auto;
  min-width: min(8.75rem, 100%);
  max-width: 100%;
}
.knowledgeMain.knowledgeMain--styleGridSingleCol:not(.floursPage) .knowledgeQuickChips .knowledgeQuickChipLabel {
  overflow: visible;
  text-overflow: clip;
}

.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) + max(0px, 10px - var(--pdc-sticky-knowledge-quick-chips-slot, 0px)) +
      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(
    env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + max(0px, 10px - var(--pdc-sticky-knowledge-quick-chips-slot, 0px)) +
      var(--pdc-sticky-knowledge-quick-chips-slot, 0px)
  );
  z-index: 85;
  width: 100%;
  margin-inline: 0;
  padding: 2px 8px 12px;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 14px;
  flex-wrap: wrap;
  /* Flat section row (mockup); opaque fill when stuck so cards scroll underneath. */
  background: linear-gradient(180deg, rgba(10, 17, 61, 0.98), rgba(10, 17, 61, 0.94));
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.knowledgeMain:not(.floursPage) .kSection .kSectionHead .h3{
  font-size: clamp(var(--fs-h-14), calc(6px + 2.4cqi), var(--fs-h-16));
  letter-spacing: .08em;
}
.knowledgeMain:not(.floursPage) .kSection .kSectionMeta{
  margin: 0;
  font-family: var(--arcade);
  font-size: clamp(var(--fs-b-9), calc(4px + 1cqi), var(--fs-b-11));
  line-height: 1.2;
  letter-spacing: .06em;
  color: #7ee8ff;
  white-space: nowrap;
}
.knowledgeMain .kSection .kGrid{
  margin-top: 2px;
  position: relative;
  z-index: 0;
}

.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 .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;
}
/* Single-column card grid (<820px): tap hero shot for centered full-screen preview. */
.knowledgeMain.knowledgeMain--styleGridSingleCol:not(.floursPage) .kShotImg.kShotImg--enlargeable{
  cursor: zoom-in;
}

/* Pizza Styles codex: light CRT via `.kShotCrt` (scanlines + glass; no dimming). */
html.pdcPizzaStylesCodex .kShot.kShot--crt{
  display: block;
  overflow: hidden;
  isolation: isolate;
}
html.pdcPizzaStylesCodex .kShot.kShot--crt .kShotImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}
html.pdcPizzaStylesCodex .kShotCrt{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
html.pdcPizzaStylesCodex .kShotCrtLayer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
/* Soft tube curve only — same weight as dashboard title CRT (`.topBrandCrtHost`). */
html.pdcPizzaStylesCodex .kShotCrtLayer--vignette{
  z-index: 1;
  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%
  );
}
html.pdcPizzaStylesCodex .kShotCrtLayer--glass{
  z-index: 2;
  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%
  );
}
/* Scanlines on top of glass so they stay readable (hero TV uses ~0.14; here a step up). */
html.pdcPizzaStylesCodex .kShotCrtLayer--scan{
  z-index: 3;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.26) 1px,
    rgba(0, 0, 0, 0.26) 2px
  );
}
/* Bezel slot kept for DOM structure; no extra dark ring or chroma fringe. */
html.pdcPizzaStylesCodex .kShotCrtLayer--bezel{
  z-index: 4;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14);
}
html.pdcPizzaStylesCodex .knowledgeMain.knowledgeMain--compactRows .kShotCrtLayer--scan{
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 4px
  );
}
html.pdcPizzaStylesCodex .knowledgeImageLightboxStage.kShot--crt .knowledgeImageLightboxFloats{
  z-index: 8;
}
@media (prefers-reduced-motion: reduce){
  html.pdcPizzaStylesCodex .kShotCrtLayer--scan{
    animation: none;
  }
}

/* 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);
}
/* Photo credit on the zoomed (lightbox) image: centred along the bottom, clear of the BAKE ME float. */
.knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kShotCredit.knowledgeImageLightboxCredit{
  bottom: 20px;
  z-index: 4;
  padding: 3px 10px;
  font-size: 12px;
}
.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;
}

/* Single-screen / narrow: center pizza preview in the viewport (not pinned under the nav). */
@media (max-width: 819px){
  .knowledgeImageLightbox:not([hidden]){
    justify-content: center;
    align-items: center;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
  .knowledgeImageLightboxPanel{
    flex: 0 1 auto;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .knowledgeImageLightboxImg{
    max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px), 920px);
  }
}

/* Dashboard style menu (≤649px): tap thumb → full-width preview with name, category, BAKE ME. */
@media (max-width: 649px){
  .dashboard:not(.knowledgeMain) #styleSelect .menuPanel .menuItemStyleThumb[role="button"]{
    cursor: zoom-in;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .knowledgeImageLightbox--dashStyleMenu:not([hidden]){
    z-index: 280;
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxPanel{
    width: 100%;
    max-width: 100%;
    padding: 0 3vw;
    box-sizing: border-box;
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxStage{
    width: 100%;
    max-width: 100%;
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxImg{
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(72dvh, calc(100dvh - env(safe-area-inset-top, 0px) - var(--pdc-sticky-nav-offset, 56px) - 28vw));
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxFloats .knowledgeImageLightboxStyleName--onShot{
    left: 3vw;
    right: 3vw;
    width: auto;
    max-width: none;
    bottom: clamp(48px, 13vw, 64px);
    padding: 0;
    box-sizing: border-box;
    font-size: clamp(7px, 3.1vw, 14px);
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    text-wrap: balance;
    hyphens: none;
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kShotCountry.kShotCountry--shotFloat{
    top: clamp(8px, 2.2vw, 12px);
    left: clamp(8px, 2.2vw, 12px);
    max-width: min(42%, calc(100% - 38vw));
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kShotCountry .kChip.kChip--country{
    min-height: 26px;
    height: 26px;
    padding: 0 clamp(6px, 2.2vw, 10px);
    border-radius: 8px;
    font-size: clamp(7px, 2.1vw, 10px);
    letter-spacing: 0.05em;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(87, 63, 151, 0.14), 0 2px 8px rgba(0, 0, 0, 0.28);
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake{
    bottom: clamp(8px, 2.2vw, 12px);
    right: clamp(8px, 2.2vw, 12px);
    min-height: 30px;
    height: 30px;
    padding: 0 clamp(8px, 2.6vw, 12px);
    border-radius: 8px;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(228, 49, 115, 0.14);
  }
  .knowledgeImageLightbox--dashStyleMenu .knowledgeImageLightboxStage > .knowledgeImageLightboxFloats .kChooseBtn.knowledgeImageLightboxLbBake .kChooseBtnText{
    font-size: clamp(7px, 2.1vw, 10px);
    letter-spacing: 0.06em;
  }
}

/* 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
---------------------------- */

/* Flour Codex panel — same chrome language as Pizza Style Codex (chips live inside the box). */
.knowledgeMain.floursPage{
  --pdc-knowledge-codex-border: rgba(148, 96, 255, 0.72);
  --pdc-knowledge-codex-glow: rgba(120, 60, 255, 0.32);
  --pdc-knowledge-codex-fill-top: rgba(18, 12, 46, 0.94);
  --pdc-knowledge-codex-fill-bot: rgba(8, 14, 48, 0.92);
  --pdc-knowledge-codex-cyan: rgba(0, 210, 255, 0.72);
}
.knowledgeMain.floursPage > .mainCard > .cardBody{
  padding-top: 14px;
}
.knowledgeMain.floursPage .knowledgeCodexPanel{
  border: 2px solid var(--pdc-knowledge-codex-border);
  border-radius: 16px;
  padding: 16px 14px 14px;
  margin-bottom: 14px;
  background: linear-gradient(
    180deg,
    var(--pdc-knowledge-codex-fill-top),
    var(--pdc-knowledge-codex-fill-bot)
  );
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.12),
    0 0 28px var(--pdc-knowledge-codex-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 12px);
}
.knowledgeMain.floursPage .knowledgeCodexHead{
  margin: 0 0 14px;
}
.knowledgeMain.floursPage .knowledgeCodexTitle{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.knowledgeMain.floursPage .knowledgeCodexTitleIcon{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}
.knowledgeMain.floursPage .knowledgeCodexTitleText{
  margin: 0;
  font-family: var(--arcade);
  font-size: clamp(var(--fs-h-14), calc(8px + 3.2cqi), calc(var(--fs-h-16) + 2pt));
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fffb80;
}
.knowledgeMain.floursPage .knowledgeCodexTagline{
  margin: 0;
  color: #fff;
  font-size: calc(var(--fs-b-12) + 1pt);
  line-height: 1.45;
}
.knowledgeMain.floursPage .floursCodexFiltersRow{
  --pdc-codex-picker-width: 23rem;
  display: grid;
  grid-template-columns: minmax(120px, 11.5rem) minmax(120px, var(--pdc-codex-picker-width)) minmax(0, 1fr);
  align-items: end;
  gap: 10px 12px;
  width: 100%;
}
@media (max-width: 640px){
  .knowledgeMain.floursPage .floursCodexFiltersRow{
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.knowledgeMain.floursPage .floursCodexFiltersRow > .floursFlourDropdownWrap{
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: var(--pdc-codex-picker-width, 23rem);
}
@media (max-width: 420px){
  .knowledgeMain.floursPage .floursCodexFiltersRow > .floursFlourDropdownWrap{
    max-width: none;
  }
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelect{
  container-type: normal;
  width: 100%;
  max-width: 100%;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap #floursFlourSelect,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect
):has(.menuBtn[aria-expanded="true"]){
  z-index: 96;
}
/* Codex All Flours / All Styles: closed trigger matches search footprint; mono type like Sort by. */
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelectTrigger{
  width: 100%;
  max-width: 100%;
  gap: 0;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelectTrigger:has(> .menuClear) .menuBtn{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn{
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  padding: 10px 6px 10px 10px;
  gap: 6px;
  min-height: 0;
  box-sizing: border-box;
  border-color: var(--pdc-knowledge-codex-cyan);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.78), rgba(5, 16, 61, 0.78));
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.16);
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn:is(:hover, :focus-visible){
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn .menuSelectTitle{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn .menuCaret,
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelectTrigger > .menuClear,
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn .menuClear{
  font-size: var(--fs-b-12);
  line-height: 1;
  flex-shrink: 0;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelectTrigger > .menuClear,
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn .menuClear{
  width: 36px;
  min-width: 36px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  font-weight: 700;
}
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuSelectTrigger > .menuClear:hover,
:is(
  .knowledgeMain.floursPage .floursFlourDropdownWrap,
  .knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap
) .menuBtn .menuClear:hover{
  background: rgba(228, 49, 115, 0.28);
}
/* All Flours: one rounded frame like search / sort — clear btn sits inside, not square on the right. */
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuSelectTrigger{
  align-items: stretch;
  border-radius: 12px;
  border: 1px solid var(--pdc-knowledge-codex-cyan);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.78), rgba(5, 16, 61, 0.78));
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.16);
  overflow: hidden;
}
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuSelectTrigger:focus-within{
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuSelectTrigger:has(> .menuClear) .menuBtn{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuBtn{
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-self: stretch;
}
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuBtn:is(:hover, :focus-visible){
  border-color: transparent;
  box-shadow: none;
}
.knowledgeMain.floursPage .floursFlourDropdownWrap .menuSelectTrigger > .menuClear{
  align-self: stretch;
  border-radius: 0;
}
/* Pizza Styles codex: override dashboard #knowledgeStyleSelect blue/pink chip chrome. */
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuUnset,
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuUnset[aria-expanded="true"]:not(:hover):not(:focus-visible){
  animation: none;
  border-color: var(--pdc-knowledge-codex-cyan);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.78), rgba(5, 16, 61, 0.78));
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.16);
  filter: none;
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuUnset:is(:hover, :focus-visible){
  border-color: rgba(0, 230, 255, 0.9);
  background: linear-gradient(180deg, rgba(13, 16, 61, 0.78), rgba(5, 16, 61, 0.78));
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
  filter: none;
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuUnset::before,
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuUnset:is(:hover, :focus-visible)::before{
  opacity: 0;
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuChosen{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(30, 181, 130, 0.14);
}
.knowledgeMain:not(.floursPage) .knowledgeStyleDropdownWrap #knowledgeStyleSelect .menuBtn.menuChosen:is(:hover, :focus-visible){
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(30, 181, 130, 0.18);
  filter: brightness(1.03);
}
/* Codex pickers: category headings = dashboard style / flour gold band (not default purple or codex cyan). */
.dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect .menuPanel .menuGroup,
.dashboard.knowledgeMain.floursPage #floursFlourSelect .menuPanel .menuGroup,
.dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect.menuSelect--stickyGroups .menuPanel .menuGroup,
.dashboard.knowledgeMain.floursPage #floursFlourSelect.menuSelect--stickyGroups .menuPanel .menuGroup{
  border-color: rgba(255, 207, 90, 0.62);
  background: linear-gradient(105deg, #4a3d18 0%, #2a3458 42%, #121a42 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 166, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 207, 90, 0.4),
    0 0 12px rgba(255, 207, 90, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.38);
  color: #fff6d0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect.menuSelect--stickyGroups .menuPanel .menuGroup,
.dashboard.knowledgeMain.floursPage #floursFlourSelect.menuSelect--stickyGroups .menuPanel .menuGroup{
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 166, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 207, 90, 0.4),
    0 0 12px rgba(255, 207, 90, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.22);
}
.dashboard.knowledgeMain:not(.floursPage) #knowledgeStyleSelect .menuPanel .menuGroupCaret,
.dashboard.knowledgeMain.floursPage #floursFlourSelect .menuPanel .menuGroupCaret{
  color: rgba(255, 232, 165, 0.92);
}
.knowledgeMain.floursPage .floursCodexFiltersRow > .field.pdcSearchField.floursSearchField{
  flex: none;
  width: 100%;
  max-width: 11.5rem;
  margin: 0;
  border-color: var(--pdc-knowledge-codex-cyan);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.16);
}
@media (max-width: 420px){
  .knowledgeMain.floursPage .floursCodexFiltersRow > .field.pdcSearchField.floursSearchField{
    max-width: none;
  }
}
.knowledgeMain.floursPage .floursCodexFiltersRow > .field.pdcSearchField.floursSearchField:focus-within{
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
.knowledgeMain.floursPage .floursSortDropdownWrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.knowledgeMain.floursPage .floursSortFieldLabel{
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 251, 128, 0.88);
  line-height: 1.2;
}
.knowledgeMain.floursPage .floursCodexFiltersRow .floursSelectField{
  border-color: var(--pdc-knowledge-codex-cyan);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.12);
}
.knowledgeMain.floursPage .floursCodexFiltersRow .floursSelectField:focus-within{
  border-color: rgba(0, 230, 255, 0.9);
  box-shadow:
    0 0 0 3px rgba(0, 200, 255, 0.2),
    0 0 18px rgba(0, 200, 255, 0.22);
}
.knowledgeMain.floursPage .flourFilterChips{
  margin-top: 14px;
  gap: 8px;
  width: 100%;
}
.knowledgeMain.floursPage .flourFilterChips .chip{
  font-family: var(--arcade);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  line-height: 1.1;
  height: auto;
  min-height: 40px;
  padding: 8px 10px;
  flex: 1 1 0;
  min-width: 0;
  font-size: clamp(var(--fs-b-9), calc(6px + 1.1vw), var(--fs-b-11));
  border: 2px solid rgba(120, 90, 200, 0.88);
  background: rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  font-weight: 800;
}
.knowledgeMain.floursPage .flourFilterChips .chip:hover:not(.activeGreen){
  border-color: rgba(160, 120, 230, 1);
  background: rgba(40, 24, 72, 0.45);
}
.knowledgeMain.floursPage .flourFilterChips .chip.activeGreen,
.knowledgeMain.floursPage .flourFilterChips .chip.activeGreen:hover,
.knowledgeMain.floursPage .flourFilterChips .chip.isActive,
.knowledgeMain.floursPage .flourFilterChips .chip.chipVarGold.activeGreen,
.knowledgeMain.floursPage .flourFilterChips .chip.chipVarGold.activeGreen:hover{
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--good);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(30, 181, 130, 0.4),
    0 0 16px rgba(30, 181, 130, 0.42),
    0 0 28px rgba(30, 181, 130, 0.18);
  filter: none;
}
.knowledgeMain.floursPage .flourFilterChips .knowledgeQuickChipIcon{
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1;
}
.knowledgeMain.floursPage .flourFilterChips .knowledgeQuickChipLabel{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-column flours: All / In stock / Wish list — hide emoji, shrink type so labels fit. */
.knowledgeMain.floursPage.knowledgeMain--styleGridSingleCol .flourFilterChips .knowledgeQuickChipIcon {
  display: none;
}
.knowledgeMain.floursPage.knowledgeMain--styleGridSingleCol .flourFilterChips .chip {
  gap: 0;
  padding: 7px 8px;
  min-height: 34px;
  font-size: clamp(8px, 2.35vw, var(--fs-b-10));
  letter-spacing: 0.04em;
}
.knowledgeMain.floursPage.knowledgeMain--styleGridSingleCol .flourFilterChips .knowledgeQuickChipLabel {
  overflow: visible;
  text-overflow: clip;
}

.knowledgeMain.floursPage .floursCodexRegionRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  width: 100%;
}
.knowledgeMain.floursPage .floursCodexRegionLabel{
  font-size: var(--fs-b-12);
  font-weight: 700;
  color: rgba(255, 251, 248, 0.92);
  letter-spacing: 0.03em;
}
.knowledgeMain.floursPage .floursCodexRegionSeg{
  flex: 0 0 auto;
}
.knowledgeMain.floursPage .floursCodexRegionSelect{
  flex: 1 1 10rem;
  min-width: 10rem;
  max-width: 100%;
  font-size: var(--fs-b-12);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 200, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 251, 248, 0.96);
}

.floursActiveSummary{
  margin: 0 0 20px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: rgba(75, 248, 254, 0.08);
  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 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%);
}
.flourListRoot{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Flex + default stretch can prevent descendant `position: sticky` from engaging in some engines. */
.floursPage .flourListRoot{
  align-items: flex-start;
  width: 100%;
  gap: 24px;
}
/* `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. */
.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;
  width: 100%;
  margin-inline: 0;
  padding: 2px 8px 12px;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 14px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(10, 17, 61, 0.98), rgba(10, 17, 61, 0.94));
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.floursPage .flourSection .kSectionHead .h3{
  font-size: clamp(var(--fs-h-14), calc(6px + 2.4cqi), var(--fs-h-16));
  letter-spacing: .08em;
}
.floursPage .flourSection .kSectionMeta{
  margin: 0;
  font-family: var(--arcade);
  font-size: clamp(var(--fs-b-9), calc(4px + 1cqi), var(--fs-b-11));
  line-height: 1.2;
  letter-spacing: .06em;
  color: #7ee8ff;
  white-space: nowrap;
}
.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;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
}
.floursPage .flourBrandDetails > summary.flourBrandSummary .h3{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}
.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;
}
/* Catalogue grid: tighter gap + 2 columns from 820px; stay 2-up at 1100px (global .kCard goes span 4). */
.floursPage .kGrid.flourGrid{
  align-items: stretch;
  gap: 10px;
}
@media (min-width: 1100px){
  .floursPage .kGrid.flourGrid > .kCard.fCardFlour{
    grid-column: span 6;
  }
}
.floursPage .kGrid.flourGrid > .kCard.fCardFlour{
  height: 100%;
  align-self: stretch;
  min-height: 0;
  border-radius: 14px;
  border: 2px solid rgba(72, 255, 120, 0.82);
  box-shadow:
    0 0 0 3px rgba(72, 255, 120, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.26);
}
.floursPage .kCard.fCardFlour .kCardFlipInner{
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .kCardFace--front{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* Catalogue cards: left rail (pack shot + brand chip), right column (copy, chips, footer). */
.floursPage .kCard.fCardFlour .fCardFlourMain{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media{
  flex: 0 0 32%;
  max-width: 118px;
  min-width: 68px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 6px 8px;
  box-sizing: border-box;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--body{
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--body .kBody{
  padding: 8px 10px 6px;
  flex: 1 1 auto;
  gap: 6px;
}
.floursPage .kCard.fCardFlour .fCardFlourCatSub{
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 251, 180, 0.92);
  line-height: 1.25;
  margin-top: -2px;
}
.floursPage .kCard.fCardFlour .fCardFlourGfNote{
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: var(--fs-b-12);
  line-height: 1.45;
  color: rgba(255, 248, 220, 0.95);
  background: rgba(120, 80, 40, 0.22);
  border: 1px solid rgba(255, 200, 120, 0.35);
  border-radius: 6px;
}
#flourHint.flourHint--glutenFree{
  color: rgba(255, 235, 180, 0.95);
  line-height: 1.45;
}
/* Brand chip above product title (in-flow; `.kShotCountry` is absolute by default). */
.floursPage .kCard.fCardFlour .kBody > .fCardFlourBrandChip.kShotCountry{
  position: static;
  bottom: auto;
  left: auto;
  z-index: auto;
  max-width: 100%;
  margin: 0 0 6px;
}
.floursPage .kCard.fCardFlour .fCardFlourBrandChip.kShotCountry .kChip.kChip--country{
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(87, 63, 151, 0.14), 0 2px 10px rgba(0, 0, 0, 0.28);
}
.floursPage .kCard.fCardFlour .kShotStack{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  height: auto;
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot{
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 112px;
  max-height: 188px;
  flex: 1 1 auto;
  aspect-ratio: auto;
  overflow: 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: none;
  pointer-events: auto;
}
.floursPage .kCard.fCardFlour .kShotStack > .kShot.fCardFlourShot .kShotImg{
  display: block;
  flex: 0 1 auto;
  align-self: center;
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 6px 3px;
  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;
}

/* Fluid type for the flour-card spec line: scale with card width, not just viewport. */
.floursPage .kCard.fCardFlour .kBody{
  container-type: inline-size;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .fCardFlourUseBtn{
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 8px 0 0;
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(228, 49, 115, 0.14);
  height: 34px;
  padding: 0 8px;
}
.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: 8px;
  min-width: 0;
  min-height: 0;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow{
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow > .kChip{
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 6px 8px;
}
.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: 8px;
  align-items: stretch;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip{
  box-sizing: border-box;
  padding: 6px 8px;
  width: 100%;
  max-width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips a.flourChip--pizzaLink{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow:
    0 0 0 3px rgba(120, 100, 220, 0.32),
    0 0 16px rgba(120, 100, 220, 0.48),
    0 0 28px rgba(100, 90, 200, 0.28);
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips a.flourChip--pizzaLink:hover{
  box-shadow:
    0 0 0 3px rgba(180, 170, 255, 0.45),
    0 0 22px rgba(140, 120, 255, 0.58),
    0 0 36px rgba(120, 100, 220, 0.35);
}
/* Static info chips: softer glow so linked “Great for” chips read as tappable. */
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow > .kChip.kChip--flour{
  box-shadow: 0 0 0 2px rgba(75, 248, 254, 0.07);
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .kChipRow > .kChip.kChip--hydr{
  box-shadow: 0 0 0 2px rgba(242, 176, 42, 0.07);
}
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip--caution,
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip--caution-hearth,
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip--caution-pan,
.floursPage .kCard.fCardFlour .fCardFlourInfoChips .flourChip--caution-unknown{
  box-shadow: 0 0 0 2px rgba(255, 200, 100, 0.08);
}
/* 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;
}

/* USE ME / BAKE ME turns green when flour is in stock. `!important` beats later generic `.kChooseBtn` / pink rules. */
.floursPage .kCard.fCardFlour .fCardFlourCol--media .fCardFlourUseBtn.kChooseBtn--inStock,
.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 .fCardFlourCol--media .fCardFlourUseBtn.kChooseBtn--inStock:hover,
.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 .fCardFlourCol--media .fCardFlourUseBtn.kChooseBtn--inStock:active,
.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; }

/* Flours page: 10px under USE ME; 10px between In stock ↔ Wish ↔ Hide (= prior 5px + 5px more) */
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowActions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  row-gap: 10px;
  flex-wrap: nowrap;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowCheck{
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowCheck: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 .kCard.fCardFlour .fCardFlourCol--media .flourRowCheck:has(input:checked){
  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);
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowCheck:focus-within{
  outline: 2px solid rgba(75, 248, 254, 0.65);
  outline-offset: 2px;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowCheck input[type="checkbox"]{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  accent-color: rgba(167, 120, 255, 0.95);
  cursor: pointer;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowActions .btn.ghost{
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--mono);
  font-size: var(--fs-b-12);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowActions .btn.ghost: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 .kCard.fCardFlour .fCardFlourCol--media .flourRowActions .btn.ghost:focus-visible{
  outline: 2px solid rgba(75, 248, 254, 0.65);
  outline-offset: 2px;
}
.floursPage .kCard.fCardFlour .fCardFlourCol--media .flourRowActions .btn.ghost:active{
  transform: translateY(1px);
}

/* 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: stack non-dashboard headers (Flours / Styles phantom). Dashboard header
 * uses `dashboardGridHeader` + subgrid inside `main` — excluded here. */
@media (max-width: 900px){
  .topRight--phantom{display:none}
  header.top:not(.dashboardGridHeader){
    flex-direction: column;
    align-items: center;
  }
  header.top:not(.dashboardGridHeader) .topRight:not(.topRight--phantom){
    display: contents;
  }
  /* Match Flour / Styles pages: banner graphic first, then header actions (phantom pages hide the right column here). */
  header.top:not(.dashboardGridHeader) .topBrand{
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-inline: auto;
  }
  header.top:not(.dashboardGridHeader) .topActions{
    order: 1;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  header.top:not(.dashboardGridHeader) .topPlanStylesGroup{
    order: 2;
    margin-top: auto;
    align-self: center;
    justify-content: center;
    transform: translateY(-20px);
  }
}
/* Dashboard title PNG: `100cqi` on `.app` for components that still need container width. */
@supports (width: 1cqi){
  .app:has(> main.grid.dashboard){
    container-type: inline-size;
    container-name: pdc-app;
  }
}
@supports not (width: 1cqi){
  @media (min-width: 901px){
    main.grid.dashboard:not(.knowledgeMain) > header.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 full-width brand rule removed — `dashboardGridHeader` subgrid aligns the title
 * to column 1 for two-column `main.grid` (650–980px). */

/* Dashboard: `html.layout-fold` — very narrow fold / cover width only. Two-column
 * `main.grid` (650–980px) keeps `header.top` as a `subgrid` row (title above col 1,
 * plan/styles above col 2); this flex row would override `display:grid` and break that. */
@media (max-width: 649px) {
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 6px;
    row-gap: 2px;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > 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 main.grid.dashboard:not(.knowledgeMain) > 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;
    overflow-x: clip;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topActions{
    display: none;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup {
    order: 0;
    align-self: flex-start;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    transform: none;
    margin-top: 0 !important;
    justify-content: center;
    text-align: center;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip {
    gap: 6px;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlansMain {
    align-items: stretch;
    text-align: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain {
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup {
    align-items: stretch;
    --pdc-header-chip-rail-gap: 6px;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStyles,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlansMain {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain .quickStylesLabel {
    text-align: center;
    width: 100%;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip .topQuickStyles .chipRow,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain #quickStyleChips {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .chipRow {
    justify-content: flex-start;
    gap: var(--pdc-header-chip-rail-gap, 6px);
    width: 100%;
    max-width: 100%;
  }
  /* Narrow fold: grouped header chip rows (see also max-width: 520px). */
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans .chipRow,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip .topQuickStyles .chipRow{
    flex-wrap: nowrap;
    overflow: visible;
  }
  /* Shared 6-col grid so quick + bake rows share the same left/right edges. */
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--pdc-header-chip-rail-gap, 6px);
    overflow: visible;
    transform: none !important;
    zoom: 1 !important;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip{
    min-width: 0;
    width: 100%;
    max-width: none;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
  /* Quick styles: Neapolitan + Tonda + Focaccia | Detroit + New York */
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="neapolitan"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="romanTonda"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="focacciaGenovese"]{
    grid-column: span 2;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="detroit"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="newyork"]{
    grid-column: span 3;
  }
  /* Bake-ready: 3 Day + Cold 48 | Same day + Sat 5pm */
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartThreeDay"]{
    order: 1;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="cold48"]{
    order: 2;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="sameDay"]{
    order: 3;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartSat5"]{
    order: 4;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartThreeDay"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="cold48"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="sameDay"],
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartSat5"]{
    grid-column: span 3;
  }
  /* Skill modes: one row, equal flex — shrink to sidebar width on fold / cover. */
  html.layout-fold .pdcModeChipsRow {
    --pdc-mode-chip-scale: 0.92;
    --pdc-mode-chip-gap: 4px;
    flex-wrap: nowrap;
    justify-content: space-between;
    max-width: 100%;
    min-width: 0;
  }
  html.layout-fold .pdcModeChipsRow .pdcModeChip--img {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc((100% - 2 * var(--pdc-mode-chip-gap)) / 3);
  }
}

/* Galaxy Flip / narrow phones (~360–412px CSS): grouped header chip rows (not 2×2 scale). */
@media (max-width: 520px){
  main.grid.dashboard:not(.knowledgeMain) > header.top .topPlanStylesGroup {
    align-items: stretch;
    --pdc-header-chip-rail-gap: 6px;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStyles,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlansMain {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain .quickStylesLabel {
    text-align: center;
    width: 100%;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip .topQuickStyles .chipRow,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesMain #quickStyleChips {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top .topBakeReadyPlans .chipRow,
  main.grid.dashboard:not(.knowledgeMain) > header.top .topQuickStylesStrip .topQuickStyles .chipRow{
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: var(--pdc-header-chip-rail-gap, 6px);
    overflow: visible;
  }
  /* Shared 6-col grid so quick + bake rows share the same left/right edges. */
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips,
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--pdc-header-chip-rail-gap, 6px);
    overflow: visible;
    transform: none !important;
    zoom: 1 !important;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip,
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip{
    min-width: 0;
    width: 100%;
    max-width: none;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="neapolitan"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="romanTonda"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="focacciaGenovese"]{
    grid-column: span 2;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="detroit"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips > .chip[data-pdc-style-preview-id="newyork"]{
    grid-column: span 3;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartThreeDay"]{
    order: 1;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="cold48"]{
    order: 2;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="sameDay"]{
    order: 3;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartSat5"]{
    order: 4;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartThreeDay"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="cold48"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="sameDay"],
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips > .chip[data-pdc-style-preview-id="wfStartSat5"]{
    grid-column: span 3;
  }
  main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
  main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
    font-size: calc(12px + var(--type-bump-chip) + 1.5pt);
  }
}
@supports (width: 1cqi){
  @media (max-width: 520px){
    main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
    main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
      font-size: clamp(
        calc(11px + var(--type-bump-chip) + 1.5pt),
        calc(0.95cqi + 7px + var(--type-bump-chip) + 1.5pt),
        calc(var(--fs-h-9) + 1pt + var(--type-bump-chip) + 1.5pt)
      );
    }
  }
}
/* Thin fold cover: same +1.5pt bump as ≤520px stacked chips. */
html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
  font-size: calc(12px + var(--type-bump-chip) + 1.5pt);
}
@supports (width: 1cqi){
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #quickStyleChips .chip,
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top #bakeReadyPlanChips .chip{
    font-size: clamp(
      calc(11px + var(--type-bump-chip) + 1.5pt),
      calc(0.95cqi + 7px + var(--type-bump-chip) + 1.5pt),
      calc(var(--fs-h-9) + 1pt + var(--type-bump-chip) + 1.5pt)
    );
  }
}
@media (max-width: 900px) and (min-width: 650px) {
  html.layout-fold .app:has(> main.grid.dashboard:not(.knowledgeMain)) {
    padding-left: 10px;
    padding-right: 10px;
    --appPadX: 10px;
  }
}
@media (max-width: 900px) and (min-width: 650px) {
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top > .topBrand .topBrandCrtHost {
    aspect-ratio: unset !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > header.top > .topBrand .topBrandCrtHost .topBrandImg {
    display: block !important;
    height: auto !important;
    object-fit: unset;
    object-position: unset;
  }
}
@supports (width: 1cqi) {
  @media (max-width: 649px) {
    html.layout-fold main.grid.dashboard:not(.knowledgeMain) > 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: 649px) {
  html.layout-fold main.grid.dashboard:not(.knowledgeMain) > 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 main.grid.dashboard:not(.knowledgeMain) > header.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;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Saved recipes view: flat black shell (no dashboard purple wash behind the page). */
body:has(#pdcRecipePage:not([hidden])){
  background: #000;
}
body:has(#pdcRecipePage:not([hidden])) .bg,
body:has(#pdcRecipePage:not([hidden])) .bg::after{
  display: none;
}
body:has(#pdcRecipePage:not([hidden])) .app{
  background: #000;
  border-color: #000;
}
/* Saved recipes: black top nav (WarGames chrome). */
body:has(#pdcRecipePage:not([hidden])) .pixelNav,
html.pdcRecipesView .pixelNav{
  background: #000;
  border-top-color: rgba(57, 255, 122, 0.38);
  border-bottom-color: rgba(57, 255, 122, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}
body:has(#pdcRecipePage:not([hidden])) .pixelNavBurgerBtn,
html.pdcRecipesView .pixelNavBurgerBtn{
  color: var(--pdc-logo-green-hi, #9bbc0f);
  border-left-color: rgba(57, 255, 122, 0.28);
  border-right-color: rgba(57, 255, 122, 0.28);
}
body:has(#pdcRecipePage:not([hidden])) .pixelNavBurgerBtn .pixelNavBurgerBar,
html.pdcRecipesView .pixelNavBurgerBtn .pixelNavBurgerBar{
  background: currentColor;
}
body:has(#pdcRecipePage:not([hidden])) .pixelNavBurgerBtn:hover,
html.pdcRecipesView .pixelNavBurgerBtn:hover{
  background: rgba(57, 255, 122, 0.12);
}
body:has(#pdcRecipePage:not([hidden])) .pixelNavBurgerBtn:focus-visible,
html.pdcRecipesView .pixelNavBurgerBtn:focus-visible{
  outline-color: rgba(57, 255, 122, 0.55);
}
/* Saved recipes: burger ☰ — lock terminal green + kill neon lure after header reboot. */
html.pdcRecipesView .pixelNavBurgerBtn.pixelNavBurgerBtn--wargamesGreen{
  color: var(--pdc-logo-green-hi);
  border-left-color: rgba(57, 255, 122, 0.38);
  border-right-color: rgba(57, 255, 122, 0.38);
}
html.pdcRecipesView .pixelNavBurgerBtn.pixelNavBurgerBtn--wargamesGreen .pixelNavBurgerBar{
  background: currentColor;
  box-shadow:
    0 0 6px rgb(139 172 15 / 0.5),
    0 0 2px rgb(155 188 15 / 0.35);
}
html.pdcRecipesView .pixelNavBurgerBtn.pixelNavBurgerBtn--wargamesGreen::after{
  animation: none !important;
  opacity: 0 !important;
}
html.pdcRecipesView .pixelNavBurgerBtn.pixelNavBurgerBtn--wargamesGreen:hover{
  background: rgba(57, 255, 122, 0.14);
  filter: brightness(1.06);
}
html.pdcRecipesView .pixelNavBurgerBtn.pixelNavBurgerBtn--wargamesGreen:focus-visible{
  outline-color: rgba(57, 255, 122, 0.55);
}
body:has(#pdcRecipePage:not([hidden])) .pixelNavBurgerPanel,
html.pdcRecipesView .pixelNavBurgerPanel{
  background: #000;
  border-top-color: rgba(57, 255, 122, 0.38);
  border-bottom-color: rgba(57, 255, 122, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}
body:has(#pdcRecipePage:not([hidden])) .pixelNav.pixelNav--recipesBoot{
  animation: pdcRecipesNavGlitchFade 1.1s ease-out forwards;
}
body:has(#pdcRecipePage:not([hidden])) .pixelNav.pixelNav--recipesBoot::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(57, 255, 122, 0.14) 2px,
    rgba(57, 255, 122, 0.14) 4px
  );
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: pdcRecipesNavScanFade 1.1s ease-out forwards;
}
@keyframes pdcRecipesNavGlitchFade{
  0%{
    background: linear-gradient(180deg, rgba(8, 16, 58, 0.92), rgba(5, 12, 48, 0.96));
    border-top-color: rgba(167, 120, 255, 0.95);
    border-bottom-color: rgba(167, 120, 255, 0.95);
    box-shadow: 0 10px 26px rgba(90, 74, 149, 0.35);
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  6%{
    transform: translate3d(-4px, 0, 0) skewX(-1.2deg);
    filter: brightness(1.35) saturate(1.25);
    background: linear-gradient(180deg, rgba(36, 18, 72, 0.96), rgba(5, 12, 48, 0.98));
  }
  11%{
    transform: translate3d(3px, 0, 0) skewX(0.9deg);
    filter: brightness(0.62) contrast(1.15);
  }
  16%{
    transform: translate3d(0, 0, 0);
    filter: none;
    background: rgba(18, 8, 36, 0.96);
    border-top-color: rgba(140, 90, 220, 0.75);
    border-bottom-color: rgba(140, 90, 220, 0.75);
  }
  24%{
    transform: translate3d(-2px, 0, 0);
    filter: brightness(1.18);
    background: rgba(10, 4, 20, 0.98);
  }
  32%{
    transform: translate3d(2px, 0, 0) skewX(-0.5deg);
    filter: brightness(0.78);
    background: rgba(6, 2, 12, 0.98);
    border-top-color: rgba(57, 255, 122, 0.22);
    border-bottom-color: rgba(57, 255, 122, 0.22);
  }
  48%{
    transform: none;
    filter: none;
    background: #0a0a0a;
  }
  68%{
    background: #030303;
  }
  100%{
    background: #000;
    border-top-color: rgba(57, 255, 122, 0.38);
    border-bottom-color: rgba(57, 255, 122, 0.38);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
    transform: none;
    filter: none;
  }
}
@keyframes pdcRecipesNavScanFade{
  0%,
  35%{
    opacity: 0.52;
  }
  100%{
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce){
  body:has(#pdcRecipePage:not([hidden])) .pixelNav.pixelNav--recipesBoot{
    animation: none;
  }
  body:has(#pdcRecipePage:not([hidden])) .pixelNav.pixelNav--recipesBoot::after{
    display: none;
  }
}
/* Saved recipes: terminal green palette (8bitheader + Instagram). */
html.pdcRecipesView{
  --pdc-logo-green-hi: #9bbc0f;
  --pdc-logo-green-mid: #8bac0f;
  --pdc-logo-green-lo: #306230;
  --pdc-logo-green-deep: #0f380f;
  --pdc-logo-green-filter: grayscale(1) contrast(1.38) brightness(0.86) sepia(1) hue-rotate(53deg) saturate(2.45)
    brightness(1.08) contrast(1.32);
}
html.pdcRecipesView .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot{
  animation: pdcRecipesLogoShellGlitch 0.58s steps(4, end) 1 both;
  will-change: transform, filter;
}
html.pdcRecipesView .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot :is(.pixelNavThinBrandImg, .pixelNavThinBrandCanvas){
  animation: pdcRecipesLogoArtGlitch 0.58s steps(4, end) 1 both;
  will-change: transform, filter, opacity, clip-path;
}
html.pdcRecipesView .pixelNav.pixelNav--burger .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot::before,
html.pdcRecipesView.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot::before{
  opacity: 0.92;
  mix-blend-mode: hard-light;
  animation: pdcRecipesLogoScanGlitch 0.58s steps(3, end) 1 both;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(57, 255, 122, 0) 0 2px,
      rgba(57, 255, 122, 0.45) 2px 3px,
      rgba(0, 0, 0, 0) 3px 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 45, 149, 0.22) 0 3px,
      rgba(75, 248, 254, 0.18) 3px 6px,
      rgba(0, 0, 0, 0) 6px 9px
    );
}
html.pdcRecipesView .pixelNavThinBrandVisual--wargamesGreen :is(.pixelNavThinBrandImg, .pixelNavThinBrandCanvas){
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  clip-path: none !important;
  filter: var(--pdc-logo-green-filter) !important;
  box-shadow:
    0 1px 0 var(--pdc-logo-green-deep),
    0 0 10px rgb(139 172 15 / 0.5),
    0 0 4px rgb(155 188 15 / 0.35);
}
html.pdcRecipesView .pixelNav.pixelNav--burger .pixelNavThinBrandVisual--wargamesGreen,
html.pdcRecipesView.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual--wargamesGreen{
  filter: none !important;
  --pdcThinCrtT: 0 !important;
  animation: none !important;
  transform: none !important;
}
html.pdcRecipesView .pixelNav.pixelNav--burger .pixelNavThinBrandVisual--wargamesGreen::before,
html.pdcRecipesView.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual--wargamesGreen::before{
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0 1px,
      rgb(15 56 15 / 0.42) 1px 2px
    ),
    repeating-linear-gradient(
      90deg,
      rgb(155 188 15 / 0) 0 2px,
      rgb(139 172 15 / 0.08) 2px 3px
    ),
    linear-gradient(
      180deg,
      rgb(155 188 15 / 0.12) 0%,
      rgb(139 172 15 / 0.05) 42%,
      rgb(48 98 48 / 0.14) 100%
    );
}
html.pdcRecipesView .pixelNav.pixelNav--burger .pixelNavThinBrandVisual--wargamesGreen::after,
html.pdcRecipesView.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual--wargamesGreen::after{
  opacity: 0.72;
  animation: pdcRecipesLogoCrtFlicker 3.6s ease-in-out infinite;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(
      ellipse 78% 100% at 50% 42%,
      rgb(155 188 15 / 0.14) 0%,
      rgb(139 172 15 / 0.08) 28%,
      transparent 44%,
      transparent 48%,
      rgb(15 56 15 / 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgb(155 188 15 / 0.05) 0%,
      transparent 22%,
      rgb(15 56 15 / 0.16) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgb(139 172 15 / 0.28),
    inset 0 0 0 2px rgb(15 56 15 / 0.4),
    inset 0 0 18px rgb(15 56 15 / 0.35);
}
@keyframes pdcRecipesLogoShellGlitch{
  0%,
  100%{
    transform: translate3d(0, 0, 0);
    filter: contrast(1.05) saturate(1.06) brightness(1);
  }
  10%{
    transform: translate3d(-7px, 2px, 0) skewX(-4deg);
    filter: brightness(0.15) contrast(2.1) saturate(2.2) hue-rotate(95deg);
  }
  22%{
    transform: translate3d(6px, -3px, 0) skewX(3deg);
    filter: brightness(1.75) contrast(1.45) invert(0.22) saturate(2.5);
  }
  34%{
    transform: translate3d(-4px, 1px, 0) scaleX(1.03);
    filter: brightness(0.35) contrast(1.8) sepia(1) hue-rotate(40deg);
  }
  46%{
    transform: translate3d(5px, 0, 0) skewX(-2deg);
    filter: brightness(1.45) contrast(1.25) hue-rotate(180deg) saturate(3);
  }
  58%{
    transform: translate3d(-6px, -2px, 0);
    filter: brightness(0.25) contrast(2) sepia(1) hue-rotate(55deg) saturate(2.6);
  }
  72%{
    transform: translate3d(3px, 2px, 0) skewX(2deg);
    filter: grayscale(0.9) contrast(1.5) sepia(1) hue-rotate(50deg) saturate(2.3) brightness(1.1);
  }
  86%{
    transform: translate3d(-2px, 0, 0);
    filter: grayscale(1) contrast(1.4) sepia(1) hue-rotate(53deg) saturate(2.4) brightness(0.95);
  }
}
@keyframes pdcRecipesLogoArtGlitch{
  0%,
  100%{
    transform: translate3d(0, 0, 0);
    opacity: 1;
    clip-path: inset(0);
    filter: none;
  }
  12%{
    transform: translate3d(-6px, 0, 0) scaleX(1.06);
    opacity: 0.28;
    clip-path: inset(0 0 58% 0);
    filter: hue-rotate(200deg) saturate(3.2) contrast(1.6);
  }
  26%{
    transform: translate3d(5px, -2px, 0) scaleY(0.94);
    opacity: 0.72;
    clip-path: inset(42% 0 0 0);
    filter: hue-rotate(60deg) saturate(2.8) brightness(1.35);
  }
  40%{
    transform: translate3d(-4px, 2px, 0) skewX(-3deg);
    opacity: 0.38;
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 52%);
    filter: invert(0.18) sepia(1) hue-rotate(48deg) saturate(2.5);
  }
  54%{
    transform: translate3d(6px, 0, 0) scaleX(0.96);
    opacity: 0.55;
    clip-path: inset(12% 8% 12% 8%);
    filter: brightness(0.4) contrast(1.9) sepia(1) hue-rotate(120deg);
  }
  68%{
    transform: translate3d(-3px, -1px, 0);
    opacity: 0.82;
    clip-path: inset(0);
    filter: grayscale(0.95) sepia(1) hue-rotate(52deg) saturate(2.35);
  }
  84%{
    transform: translate3d(2px, 1px, 0) skewX(1deg);
    opacity: 0.96;
    filter: grayscale(1) sepia(1) hue-rotate(53deg) saturate(2.45) brightness(1.05);
  }
}
@keyframes pdcRecipesLogoScanGlitch{
  0%,
  100%{
    opacity: 0.35;
    transform: translate3d(0, 0, 0);
  }
  25%{
    opacity: 0.95;
    transform: translate3d(-3px, 0, 0);
  }
  50%{
    opacity: 0.55;
    transform: translate3d(4px, 0, 0);
  }
  75%{
    opacity: 0.88;
    transform: translate3d(-2px, 1px, 0);
  }
}
@keyframes pdcRecipesLogoCrtFlicker{
  0%,
  100%{
    filter: brightness(1);
  }
  14%{
    filter: brightness(1.06);
  }
  28%{
    filter: brightness(0.9);
  }
  52%{
    filter: brightness(1.04);
  }
  71%{
    filter: brightness(0.92);
  }
}
@media (prefers-reduced-motion: reduce){
  html.pdcRecipesView .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot,
  html.pdcRecipesView .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot :is(.pixelNavThinBrandImg, .pixelNavThinBrandCanvas),
  html.pdcRecipesView .pixelNav.pixelNav--burger .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot::before,
  html.pdcRecipesView.pdcPrefForceBurger .pixelNav:not(.pixelNav--bottomQuick) .pixelNavThinBrandVisual.pixelNavThinBrandVisual--recipesReboot::before{
    animation: none !important;
  }
}
/* Saved recipes: Instagram icon → same terminal green reboot as 8bitheader (fires at 3s). */
html.pdcRecipesView .pixelNavInstagram{
  border-right-color: rgba(57, 255, 122, 0.22);
}
html.pdcRecipesView .pixelNavInstagram:hover{
  background: rgba(57, 255, 122, 0.1);
}
html.pdcRecipesView .pixelNavInstagram:focus-visible{
  outline-color: rgba(57, 255, 122, 0.55);
}
html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--recipesReboot{
  animation: pdcRecipesInstagramShellReboot 0.9s steps(5, end) forwards;
}
html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--recipesReboot .pixelNavSocialSvg{
  animation: pdcRecipesInstagramArtReboot 0.9s steps(5, end) forwards;
}
html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--wargamesGreen .pixelNavSocialSvg{
  filter: var(--pdc-logo-green-filter);
  drop-shadow(0 1px 0 var(--pdc-logo-green-deep))
    drop-shadow(0 0 2px var(--pdc-logo-green-lo))
    drop-shadow(0 0 8px rgb(139 172 15 / 0.4));
}
html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--wargamesGreen{
  border-right-color: rgba(57, 255, 122, 0.38);
}
html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--wargamesGreen:hover{
  background: rgba(57, 255, 122, 0.14);
}
@keyframes pdcRecipesInstagramShellReboot{
  0%{
    filter: contrast(1.05) saturate(1.06) brightness(1);
  }
  18%{
    filter: brightness(0.35) contrast(1.35) saturate(1.1);
  }
  36%{
    filter: brightness(1.3) contrast(1.2) saturate(1.35) hue-rotate(70deg);
  }
  54%{
    filter: grayscale(0.85) contrast(1.3) sepia(1) hue-rotate(48deg) saturate(2) brightness(0.82);
  }
  72%{
    filter: grayscale(1) contrast(1.32) sepia(1) hue-rotate(51deg) saturate(2.2) brightness(1);
  }
  100%{
    filter: contrast(1.06) saturate(1.08) brightness(0.99);
  }
}
@keyframes pdcRecipesInstagramArtReboot{
  0%{
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: none;
  }
  20%{
    transform: translate3d(-3px, 1px, 0) skewX(-2deg);
    opacity: 0.48;
    filter: grayscale(0.55) contrast(1.3) sepia(0.6) hue-rotate(46deg) saturate(1.8) brightness(0.72);
  }
  40%{
    transform: translate3d(2px, -1px, 0) skewX(1.5deg);
    opacity: 0.86;
    filter: grayscale(0.92) contrast(1.38) sepia(0.95) hue-rotate(50deg) saturate(2.2) brightness(1.05);
  }
  60%{
    transform: translate3d(-1px, 0, 0);
    opacity: 0.4;
    filter: grayscale(1) contrast(1.5) brightness(0.55) sepia(1) hue-rotate(52deg) saturate(2.4);
  }
  80%{
    transform: translate3d(1px, 0, 0) skewX(-0.6deg);
    opacity: 0.94;
    filter: grayscale(1) contrast(1.36) sepia(1) hue-rotate(53deg) saturate(2.35) brightness(1.04);
  }
  100%{
    transform: none;
    opacity: 1;
    filter: var(--pdc-logo-green-filter);
  }
}
@media (prefers-reduced-motion: reduce){
  html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--recipesReboot,
  html.pdcRecipesView .pixelNavInstagram.pixelNavInstagram--recipesReboot .pixelNavSocialSvg{
    animation: none !important;
  }
}
.pdcRecipePage{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #000;
}
.pdcRecipePageInner{
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  box-sizing: border-box;
  background: #000;
}
/* Same horizontal bleed recipe as `.pixelNav` — align banner with nav edges inside `.app` */
.pdcRecipePageHeader{
  position: relative;
  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;
}
/* Submarine-sonar blip on pizzawar.webp — % only so it tracks the banner on resize. */
.pdcRecipeRadarBlip{
  --pdc-radar-orbit-pct: 7.8%;
  --pdc-radar-blip-pct: 17%;
  position: absolute;
  left: 50%;
  top: 33.1%;
  width: var(--pdc-radar-orbit-pct);
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}
.pdcRecipeRadarBlip__ring{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(57, 255, 122, 0.12),
    inset 0 0 12px rgba(57, 255, 122, 0.06);
}
.pdcRecipeRadarBlip__orbit{
  position: absolute;
  inset: 0;
  animation: pdcRecipeRadarBlipSpin 3.4s linear infinite;
}
.pdcRecipeRadarBlip__orbit::after{
  content: "";
  position: absolute;
  top: -1%;
  left: 50%;
  width: var(--pdc-radar-blip-pct);
  height: var(--pdc-radar-blip-pct);
  margin-left: calc(var(--pdc-radar-blip-pct) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(57, 255, 122, 0.45);
  animation: pdcRecipeRadarBlipPulse 1.1s ease-in-out infinite;
}
@keyframes pdcRecipeRadarBlipSpin{
  to{
    transform: rotate(360deg);
  }
}
@keyframes pdcRecipeRadarBlipPulse{
  0%,
  100%{
    opacity: 1;
    transform: scale(1);
  }
  50%{
    opacity: 0.72;
    transform: scale(0.88);
  }
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipeRadarBlip__orbit{
    animation: none;
  }
  .pdcRecipeRadarBlip__orbit::after{
    top: 0;
    animation: none;
    opacity: 0.85;
  }
}
.pdcRecipePageBanner{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  vertical-align: top;
  image-rendering: auto;
  object-fit: cover;
  object-position: center;
}
@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;
}
.pdcRecipeEmpty,
.pdcRecipeFoot{
  margin: 0 0 16px;
  color: rgba(255,251,248,.76);
}
/* Saved recipes intro — WarGames / Matrix terminal */
.pdcRecipeIntroBox--wargames{
  --pdc-wargames-green: #39ff7a;
  --pdc-wargames-green-dim: #1bcc55;
  --pdc-wargames-amber: #ffb84a;
  position: relative;
  margin: 0 0 22px;
  box-sizing: border-box;
  border: 2px solid rgba(57, 255, 122, 0.72);
  border-radius: 0;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(57, 255, 122, 0.22),
    0 0 48px rgba(57, 255, 122, 0.08),
    inset 0 0 60px rgba(57, 255, 122, 0.05);
  overflow: hidden;
  animation: pdcWargamesCrtFlicker 5.5s ease-in-out infinite;
}
.pdcRecipeIntroBox__matrixRain{
  position: absolute;
  inset: -20% 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 11px,
      rgba(57, 255, 122, 0.55) 11px,
      rgba(57, 255, 122, 0.55) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(27, 204, 85, 0.08) 18px,
      rgba(27, 204, 85, 0.08) 19px
    );
  background-size: 100% 24px, 38px 100%;
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 92%);
  animation: pdcWargamesMatrixFall 9s linear infinite;
}
.pdcRecipeIntroBox__scan{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.42) 2px,
    rgba(0, 0, 0, 0.42) 4px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
}
.pdcRecipeIntroBox--wargames::after{
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(57, 255, 122, 0.2);
  box-shadow: inset 0 0 30px rgba(57, 255, 122, 0.06);
}
.pdcRecipeIntroBox__head{
  position: relative;
  z-index: 4;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(57, 255, 122, 0.35);
  background: #000;
}
.pdcRecipeIntroBox__sysLine{
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(57, 255, 122, 0.55);
  text-shadow: 0 0 8px rgba(57, 255, 122, 0.25);
}
.pdcRecipeIntroBox__headRow{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.pdcRecipeIntroBox__prompt{
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pdc-wargames-amber);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.55);
}
.pdcRecipeIntroBox__title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: clamp(20px, 5.8vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdc-wargames-green);
  text-shadow:
    0 0 10px rgba(57, 255, 122, 0.95),
    0 0 26px rgba(57, 255, 122, 0.45),
    0 0 42px rgba(27, 204, 85, 0.25);
}
.pdcRecipeIntroBox__sr{
  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;
}
.pdcRecipeIntroBox__typed{
  white-space: pre;
}
.pdcRecipeIntroBox__cursor{
  display: inline-block;
  width: 0.58em;
  margin-left: 2px;
  color: var(--pdc-wargames-green);
  background: var(--pdc-wargames-green);
  box-shadow: 0 0 12px rgba(57, 255, 122, 0.9);
  animation: pdcWargamesCursorBlink 0.95s step-end infinite;
  vertical-align: -0.06em;
}
.pdcRecipeIntroBox--typedDone .pdcRecipeIntroBox__cursor{
  background: var(--pdc-wargames-amber);
  box-shadow: 0 0 14px rgba(255, 184, 74, 0.85);
}
.pdcRecipeIntroBox__armBar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}
.pdcRecipeIntroBox__armLabel{
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 184, 74, 0.88);
  text-shadow: 0 0 8px rgba(255, 184, 74, 0.35);
}
.pdcRecipeIntroBox__armTrack{
  flex: 1 1 auto;
  height: 8px;
  border: 1px solid rgba(57, 255, 122, 0.45);
  background: #000;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.pdcRecipeIntroBox__armFill{
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #1bcc55, #39ff7a 55%, #ffb84a);
  box-shadow: 0 0 12px rgba(57, 255, 122, 0.65);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.28, 1);
}
.pdcRecipeIntroBox__armFill--armed{
  width: 100%;
}
.pdcRecipeIntroBox--typedDone .pdcRecipeIntroBox__head{
  animation: pdcWargamesHeadPulse 2.8s ease-in-out infinite;
}
.pdcRecipeIntroBox__body{
  position: relative;
  z-index: 4;
  padding: 16px 18px 18px;
  font-family: var(--mono);
  background: #000;
}
.pdcRecipeIntroBox__line{
  margin: 0;
  font-size: calc(var(--fs-b-13) + 0.5pt);
  line-height: 1.62;
  color: rgba(170, 255, 196, 0.88);
  text-shadow: 0 0 14px rgba(57, 255, 122, 0.12);
}
.pdcRecipeIntroBox__line + .pdcRecipeIntroBox__line{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(57, 255, 122, 0.22);
}
.pdcRecipeIntroBox__line strong{
  font-family: var(--mono);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdc-wargames-amber);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.45);
}
@keyframes pdcWargamesCursorBlink{
  0%,
  49%{
    opacity: 1;
  }
  50%,
  100%{
    opacity: 0;
  }
}
@keyframes pdcWargamesMatrixFall{
  from{
    background-position: 0 0, 0 0;
  }
  to{
    background-position: 0 240px, 0 0;
  }
}
@keyframes pdcWargamesCrtFlicker{
  0%,
  100%{
    filter: brightness(1) contrast(1);
  }
  48%{
    filter: brightness(1.03) contrast(1.02);
  }
  49%{
    filter: brightness(0.94) contrast(1.05);
  }
  50%{
    filter: brightness(1.02) contrast(1);
  }
}
@keyframes pdcWargamesHeadPulse{
  0%,
  100%{
    box-shadow: inset 0 0 0 rgba(57, 255, 122, 0);
  }
  50%{
    box-shadow: inset 0 0 28px rgba(57, 255, 122, 0.08);
  }
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipeIntroBox--wargames,
  .pdcRecipeIntroBox__matrixRain,
  .pdcRecipeIntroBox__cursor,
  .pdcRecipeIntroBox--typedDone .pdcRecipeIntroBox__head{
    animation: none !important;
  }
  .pdcRecipeIntroBox__armFill{
    transition: none;
    width: 100%;
  }
  .pdcRecipeIntroBox__cursor{
    opacity: 0.85;
  }
}
.pdcRecipeList{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.pdcRecipeCard{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #000;
  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: WarGames vault + 80s leak feed (scoped to `.pdcRecipePage--retro80`) ── */
.pdcRecipePage--retro80{
  --pdc-wargames-green: #39ff7a;
  --pdc-wargames-green-dim: #1bcc55;
  --pdc-wargames-amber: #ffb84a;
  --pdc-wargames-red: #ff4a4a;
  position: relative;
  isolation: isolate;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  color: rgba(255, 251, 248, 0.95);
  background: #000;
}
.pdcRecipePage--retro80::before,
.pdcRecipePage--retro80::after{
  display: none;
}
.pdcRecipePage--retro80 > *{
  position: relative;
  z-index: 1;
}
.pdcRecipePage--retro80 .pdcRecipePageHeader{
  padding: 0;
}
.pdcRecipePage--retro80 .pdcRecipePageBanner{
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  image-rendering: auto;
  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: #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pdcRecipePageMarquee--leak{
  border-top-color: rgba(255, 70, 70, 0.55);
  border-bottom-color: rgba(57, 255, 122, 0.42);
  background: #000;
  box-shadow: inset 0 1px 0 rgba(255, 100, 100, 0.12);
  animation: pdcRecipeLeakBarFlicker 4.2s ease-in-out infinite;
}
.pdcRecipePageMarquee__label{
  padding: 13px 0 6px;
  font-family: var(--mono);
  font-size: clamp(calc(11px + 1pt), calc(2.8vw + 1pt), calc(15px + 1pt));
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 90, 90, 0.95);
  text-shadow:
    0 0 8px rgba(255, 60, 60, 0.75),
    0 0 18px rgba(255, 40, 40, 0.35);
  animation: pdcRecipeLeakLabelPulse 1.4s step-end infinite;
}
.pdcRecipePageMarquee__viewport{
  overflow: hidden;
  position: relative;
  /* Side soft-edge without `mask-image` — Safari can eat animated children inside masks. */
  background:
    linear-gradient(90deg, #000 0%, transparent min(48px, 8%)),
    linear-gradient(270deg, #000 0%, transparent min(48px, 8%));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
}
.pdcRecipePageMarquee__viewport::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );
  opacity: 0.45;
  mix-blend-mode: multiply;
}
.pdcRecipePageMarquee__viewport--safari::after{
  mix-blend-mode: normal;
  opacity: 0.28;
}
.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;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.pdcRecipePageMarqueeTrack.pdcRecipeLeakTicker--jsScroll{
  animation: none !important;
  will-change: transform;
}
.pdcRecipePageMarquee--leak .pdcRecipePageMarqueeTrack{
  padding: 12px 0 14px;
  font-family: var(--mono);
  font-size: clamp(calc(13px + 2pt), calc(3.4vw + 2pt), calc(17px + 2pt));
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: rgba(57, 255, 122, 0.92);
  text-shadow:
    0 0 6px rgba(57, 255, 122, 0.85),
    0 0 16px rgba(27, 204, 85, 0.35);
  animation: pdcRecipeLeakScroll 95s linear infinite;
}
.pdcRecipeLeakItem{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  padding-right: 2.2em;
}
.pdcRecipeLeakItem__tag{
  flex-shrink: 0;
  font-size: 1.05em;
  color: rgba(255, 184, 74, 0.95);
  text-shadow: 0 0 8px rgba(255, 184, 74, 0.55);
  animation: pdcRecipeLeakTagBlink 1.1s step-end infinite;
}
.pdcRecipeLeakItem__text{
  display: inline-block;
}
.pdcRecipeLeakItem__text--glitch{
  color: rgba(255, 120, 120, 0.98);
  text-shadow:
    2px 0 rgba(255, 0, 80, 0.65),
    -2px 0 rgba(57, 255, 122, 0.55),
    0 0 12px rgba(255, 60, 60, 0.5);
  animation: pdcRecipeLeakTextGlitch 0.14s steps(2) 2;
  letter-spacing: 0.14em;
}
.pdcRecipeLeakSep{
  color: rgba(255, 184, 74, 0.45);
  letter-spacing: 0.35em;
  padding: 0 1.2em;
}
@keyframes pdcRecipeLeakScroll{
  from{
    transform: translate3d(0, 0, 0);
  }
  to{
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes pdcRecipeLeakBarFlicker{
  0%,
  100%{
    box-shadow: inset 0 1px 0 rgba(255, 100, 100, 0.12);
  }
  92%{
    box-shadow: inset 0 1px 0 rgba(255, 100, 100, 0.12);
  }
  93%{
    box-shadow:
      inset 0 1px 0 rgba(255, 60, 60, 0.28),
      0 0 10px rgba(57, 255, 122, 0.12);
  }
  94%{
    box-shadow: inset 0 1px 0 rgba(255, 100, 100, 0.16);
  }
}
@keyframes pdcRecipeLeakLabelPulse{
  0%,
  70%{
    opacity: 1;
  }
  71%,
  100%{
    opacity: 0.55;
  }
}
@keyframes pdcRecipeLeakTagBlink{
  0%,
  55%{
    opacity: 1;
  }
  56%,
  100%{
    opacity: 0.35;
  }
}
@keyframes pdcRecipeLeakTextGlitch{
  0%{
    transform: translateX(0);
  }
  25%{
    transform: translateX(-2px) skewX(-2deg);
  }
  50%{
    transform: translateX(3px) skewX(1deg);
  }
  75%{
    transform: translateX(-1px);
  }
  100%{
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipePageMarqueeTrack,
  .pdcRecipePageMarquee--leak .pdcRecipePageMarqueeTrack{
    animation: none;
  }
  .pdcRecipePageMarquee--leak,
  .pdcRecipePageMarquee__label,
  .pdcRecipeLeakItem__tag{
    animation: none !important;
  }
}
@keyframes pdcRecipeMarqueeScroll{
  from{
    transform: translate3d(0, 0, 0);
  }
  to{
    transform: translate3d(-50%, 0, 0);
  }
}
.pdcRecipePage--retro80 .pdcRecipePageInner{
  max-width: 920px;
  margin: 14px auto 0;
  padding: 22px 18px 40px;
  border-radius: 18px;
  border: 1px solid #000;
  background: #000;
  box-shadow: none;
}
.pdcRecipePage--retro80 .pdcRecipeIntroBox--wargames{
  margin-bottom: 24px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 0 3px rgba(57, 255, 122, 0.35),
    0 0 40px rgba(57, 255, 122, 0.28),
    inset 0 0 56px rgba(57, 255, 122, 0.06);
}
.pdcRecipePage--retro80 .pdcRecipeIntroBox__title{
  text-shadow:
    0 0 12px rgba(57, 255, 122, 1),
    0 0 32px rgba(57, 255, 122, 0.55);
}
.pdcRecipePage--retro80 .pdcRecipeIntroBox__body{
  padding: 18px 20px 20px;
}
.pdcRecipePage--retro80 .pdcRecipeEmpty{
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(75, 248, 254, 0.35);
  background: #000;
  color: rgba(255, 230, 200, 0.78);
  text-align: center;
}
.pdcRecipePage--retro80 .pdcRecipeFoot{
  margin: 20px 0 0;
  padding-top: 8px;
  display: flex;
  justify-content: center;
  border-top: 1px dashed rgba(57, 255, 122, 0.22);
}
.pdcRecipePage--retro80 .pdcRecipeFootLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(170, 255, 196, 0.92);
  background: #000;
  border: 1px solid rgba(57, 255, 122, 0.45);
  border-radius: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(57, 255, 122, 0.12),
    inset 0 0 12px rgba(57, 255, 122, 0.06);
  text-shadow: 0 0 8px rgba(57, 255, 122, 0.35);
  transition:
    transform 0.12s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    text-shadow 0.16s ease;
}
.pdcRecipeFootLink__prompt{
  flex-shrink: 0;
  color: var(--pdc-wargames-amber);
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(255, 184, 74, 0.45);
}
.pdcRecipePage--retro80 .pdcRecipeFootLink:hover,
.pdcRecipePage--retro80 .pdcRecipeFootLink:focus-visible{
  border-color: var(--pdc-wargames-amber);
  color: var(--pdc-wargames-amber);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 184, 74, 0.4),
    0 0 16px rgba(255, 184, 74, 0.35),
    inset 0 0 16px rgba(255, 184, 74, 0.08);
  outline: none;
}
.pdcRecipePage--retro80 .pdcRecipeFootLink:active{
  transform: translateY(1px);
}
.pdcRecipePage--retro80 .pdcRecipeList{
  gap: 16px;
}
.pdcRecipePage--retro80 .pdcRecipeCard,
.pdcRecipePage--retro80 .pdcRecipeCard--vault{
  position: relative;
  border: 2px solid rgba(57, 255, 122, 0.55);
  border-radius: 0;
  background: #000;
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(57, 255, 122, 0.18),
    inset 0 0 40px rgba(57, 255, 122, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pdcRecipePage--retro80 .pdcRecipeCard--vault::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.38) 2px,
    rgba(0, 0, 0, 0.38) 4px
  );
  opacity: 0.28;
  z-index: 1;
}
.pdcRecipePage--retro80 .pdcRecipeCard--vault::after{
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(57, 255, 122, 0.18);
  z-index: 1;
}
.pdcRecipePage--retro80 .pdcRecipeCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 184, 74, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 184, 74, 0.35),
    0 0 28px rgba(57, 255, 122, 0.28),
    0 0 48px rgba(255, 74, 74, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 0 50px rgba(57, 255, 122, 0.07);
}
.pdcRecipePage--retro80 .pdcRecipeCard__head{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 9px;
  border-bottom: 1px solid rgba(57, 255, 122, 0.32);
  background: #000;
}
.pdcRecipePage--retro80 .pdcRecipeCard__fileId{
  font-family: var(--mono);
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(57, 255, 122, 0.75);
  text-shadow: 0 0 8px rgba(57, 255, 122, 0.35);
}
.pdcRecipePage--retro80 .pdcRecipeCard__seal{
  font-family: var(--mono);
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pdc-wargames-red);
  text-shadow:
    0 0 8px rgba(255, 74, 74, 0.75),
    0 0 16px rgba(255, 40, 40, 0.35);
  animation: pdcRecipeVaultSealBlink 2.4s step-end infinite;
}
.pdcRecipePage--retro80 .pdcRecipeCardTitle,
.pdcRecipePage--retro80 .pdcRecipeCard__name{
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 14px 14px 6px;
  font-family: var(--mono);
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--pdc-wargames-green);
  text-shadow:
    0 0 10px rgba(57, 255, 122, 0.9),
    0 0 24px rgba(57, 255, 122, 0.35);
}
.pdcRecipePage--retro80 .pdcRecipeCardSub,
.pdcRecipePage--retro80 .pdcRecipeCard__meta{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 0 14px 14px;
  font-family: var(--mono);
  font-size: clamp(9px, 2.2vw, 11px);
  line-height: 1.5;
  color: rgba(170, 255, 196, 0.72);
  text-shadow: 0 0 10px rgba(57, 255, 122, 0.1);
}
.pdcRecipePage--retro80 .pdcRecipeCard__metaPrompt{
  flex-shrink: 0;
  color: var(--pdc-wargames-amber);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pdcRecipePage--retro80 .pdcRecipeCardActions{
  position: relative;
  z-index: 2;
  padding: 12px 14px 14px;
  border-top: 1px dashed rgba(57, 255, 122, 0.22);
  background: #000;
}
@keyframes pdcRecipeVaultSealBlink{
  0%,
  78%{
    opacity: 1;
  }
  79%,
  100%{
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipePage--retro80 .pdcRecipeCard__seal{
    animation: none;
  }
}
/* Vault card actions — terminal command bar */
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn{
  border-radius: 0;
  font-family: var(--mono);
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  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(57, 255, 122, 0.35);
  border-color: rgba(57, 255, 122, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    inset 0 0 12px rgba(57, 255, 122, 0.06);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost{
  background: #000;
  color: rgba(170, 255, 196, 0.92);
  border-color: rgba(57, 255, 122, 0.38);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:not(.ghost){
  background: #000;
  border-color: rgba(57, 255, 122, 0.65);
  color: var(--pdc-wargames-green);
  text-shadow: 0 0 10px rgba(57, 255, 122, 0.65);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:focus-visible{
  border-color: var(--pdc-wargames-amber);
  color: var(--pdc-wargames-amber);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 184, 74, 0.4),
    0 0 16px rgba(255, 184, 74, 0.35),
    inset 0 0 16px rgba(255, 184, 74, 0.08);
  outline: none;
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.ghost:focus-visible{
  background: #000;
  color: var(--pdc-wargames-amber);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.45);
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.pdcRecipeCardDelete:hover,
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn.pdcRecipeCardDelete:focus-visible{
  border-color: var(--pdc-wargames-red);
  background: #000;
  color: rgba(255, 200, 200, 0.98);
  filter: brightness(1.07);
  box-shadow:
    0 0 0 1px rgba(255, 74, 74, 0.45),
    0 0 16px rgba(255, 74, 74, 0.35);
  text-shadow: 0 0 10px rgba(255, 74, 74, 0.55);
  outline: none;
}
.pdcRecipePage--retro80 .pdcRecipeCardActions .btn:active{
  transform: translateY(1px);
}
@media (max-width: 640px){
  .pdcRecipePageMarqueeTrack{
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .pdcRecipePageMarquee__label{
    font-size: clamp(calc(10px + 1pt), calc(3vw + 1pt), calc(13px + 1pt));
  }
  .pdcRecipePageMarquee--leak .pdcRecipePageMarqueeTrack{
    font-size: clamp(calc(12px + 2pt), calc(3.6vw + 2pt), calc(15px + 2pt));
    padding: 10px 0 12px;
  }
  .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 print + 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;
}
/* html2canvas staging — never paint over the recipes UI */
.pdcRecipeExportWrap--capturing{
  position: fixed !important;
  left: -99999px !important;
  top: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
iframe.pdcRecipePrintFrame{
  position: fixed !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.pdcRecipeExportBusy{
  position: fixed;
  inset: 0;
  z-index: 12040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.pdcRecipeExportBusy[hidden]{
  display: none !important;
}
.pdcRecipeExportSaveOverlay{
  position: fixed;
  inset: 0;
  /* Above `.pdcRecipeExportBusy` so Save PDF/image taps reach the dialog. */
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.pdcRecipeExportSaveOverlay[hidden]{
  display: none !important;
}
.pdcRecipeExportSaveOverlay__panel{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(420px, 100%);
  max-height: min(90vh, 720px);
  padding: 16px;
  border: 2px solid rgba(60, 242, 255, 0.55);
  background: #0a0f14;
  box-shadow: 0 0 28px rgba(60, 242, 255, 0.18);
  overflow: auto;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.pdcRecipeExportSaveOverlay__download:disabled{
  opacity: 0.55;
  pointer-events: none;
}
.pdcRecipeExportSaveOverlay__title{
  margin: 0;
  text-align: center;
  font-size: 1rem;
}
.pdcRecipeExportSaveOverlay__hint{
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.9;
}
.pdcRecipeExportSaveOverlay__preview{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-height: 52vh;
  overflow: auto;
}
.pdcRecipeExportSaveOverlay__preview img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(52vh, 520px);
  object-fit: contain;
  align-self: center;
  flex: 0 0 auto;
  border: 1px solid rgba(60, 242, 255, 0.35);
}
.pdcRecipeExportSaveOverlay__pdfNote{
  margin: 0;
  text-align: center;
}
.pdcRecipeExportSaveOverlay__download{
  align-self: center;
  text-decoration: none;
}
.pdcRecipeExportSaveOverlay__close{
  align-self: center;
}
.pdcRecipeExportBusy__panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: min(440px, 100%);
}
.pdcRecipeExportBusy__arena{
  position: relative;
  width: min(400px, calc(100vw - 48px));
  border: 2px solid rgba(60, 242, 255, 0.55);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(60, 242, 255, 0.22),
    0 0 48px rgba(255, 106, 46, 0.08),
    inset 0 0 40px rgba(60, 242, 255, 0.06);
  overflow: hidden;
}
.pdcTronBusyCanvas{
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pdcTronBusyScanlines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.38) 2px,
    rgba(0, 0, 0, 0.38) 4px
  );
  opacity: 0.45;
  mix-blend-mode: multiply;
}
.pdcRecipeExportBusyText{
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgba(60, 242, 255, 0.45);
  border-radius: 0;
  background: #000;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3cf2ff;
  text-shadow:
    0 0 10px rgba(60, 242, 255, 0.65),
    0 0 22px rgba(60, 242, 255, 0.25);
  box-shadow: 0 0 24px rgba(60, 242, 255, 0.12);
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipeExportBusy__arena{
    display: none;
  }
}
/* Save-image export: Matrix rain → ASCII pizza */
.pdcRecipeExportBusy--matrix{
  background: #000;
}
.pdcRecipeExportBusy__arena--matrix{
  border-color: rgba(57, 255, 122, 0.62);
  background: #000;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 32px rgba(57, 255, 122, 0.28),
    inset 0 0 48px rgba(57, 255, 122, 0.08);
}
.pdcMatrixPizzaCanvas{
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pdcMatrixPizzaScanlines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.4) 2px,
    rgba(0, 0, 0, 0.4) 4px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.pdcRecipeExportBusyText--matrix{
  border-color: rgba(57, 255, 122, 0.5);
  color: #39ff7a;
  background: #000;
  text-shadow:
    0 0 10px rgba(57, 255, 122, 0.7),
    0 0 22px rgba(57, 255, 122, 0.28);
  box-shadow: 0 0 28px rgba(57, 255, 122, 0.14);
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipeExportBusy--matrix .pdcRecipeExportBusy__arena--matrix{
    display: none;
  }
}
/* Easy dashboard hides Normal results; export always captures the hydrated calculator column. */
.pdcRecipeExportWrap .card.results > #pdcEasyHero,
.pdcRecipeExportWrap .card.results > .pdcEasyResultsWrap{
  display: none !important;
}
.pdcRecipeExportWrap .card.results > #pdcNormalResults,
.pdcRecipeExportWrap .card.results .pdcNormalResults{
  display: block !important;
  visibility: visible !important;
  width: 100%;
  max-width: 100%;
}
.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;
}
/* One outer pink ring around recipe + enjoy footer (footer sits outside `.card.results`). */
.pdcRecipeSnapshotCapture--export{
  position: relative;
  overflow: visible;
  padding: 4px 2px 6px;
  --nf-border: rgba(255, 130, 198, 0.98);
  --nf-glow: rgba(228, 49, 115, 0.44);
}
.pdcRecipeSnapshotCapture--export::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);
  z-index: 0;
}
.pdcRecipeSnapshotCapture--export > .pdcRecipeExportPageSegment{
  position: relative;
  z-index: 1;
}
.pdcRecipeSnapshotCapture--export .card.results::before{
  display: none !important;
}
.pdcRecipeSnapshotCapture--export .card.results.is-column-balance-active,
.pdcRecipeSnapshotCapture--export .card.results.pdcColumnBalanceHost{
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}
.pdcRecipeSnapshotCapture--export .card.results .pdcColumnBalanceStack{
  display: none !important;
}
/*
 * 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;
}
/* Dashboard column-balance art inside results is hidden; export uses fixed enjoy footer below. */
.pdcRecipeSnapshotCapture--export .card.results .columnBalanceBrand--results{
  display: none !important;
}
.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). */
.pdcRecipeExportPageSegment--footer{
  margin-top: 4px;
  padding-top: 4px;
}
.pdcRecipeSnapshotCapture--export .pdcRecipeExportBottomBrand.columnBalanceBrand{
  display: block !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin-top: 12px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.pdcRecipeSnapshotCapture--export .pdcRecipeExportBottomBrand.neonFrame::before{
  opacity: 0.45;
}
.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);
}

/* Skill-mode switch — compact reset prompt under mode chips. */
.pdcSkillModeResetDialog[hidden]{
  display: none !important;
}
.pdcSkillModeResetDialog--anchored{
  margin: 8px 0 0;
  width: 100%;
  max-width: 100%;
}
.pdcSkillModeResetDialog--anchored .pdcSkillModeResetDialog__card{
  width: 100%;
  padding: 10px 12px;
}
.pdcSkillModeResetDialog__scrim{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.pdcSkillModeResetDialog--floating{
  position: fixed;
  inset: 0;
  z-index: 10050;
  isolation: isolate;
  margin: 0;
  padding:
    calc(env(safe-area-inset-top, 0px) + var(--pdc-sticky-nav-offset, 56px) + 12px)
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
}
.pdcSkillModeResetDialog__card{
  box-sizing: border-box;
  border: 2px solid rgba(75, 248, 254, 0.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 14, 42, 0.94), rgba(8, 6, 22, 0.92));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
  color: var(--text, rgba(255, 251, 248, 0.94));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdcSkillModeResetDialog--floating .pdcSkillModeResetDialog__card{
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  padding: 14px 14px 12px;
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(75, 248, 254, 0.18);
}
.pdcSkillModeResetDialog__title{
  margin: 0;
  font-family: var(--arcade, "Press Start 2P", monospace);
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fffb80;
}
.pdcSkillModeResetDialog--floating .pdcSkillModeResetDialog__title{
  font-size: clamp(10px, 2.8vw, 12px);
  letter-spacing: 0.1em;
}
.pdcSkillModeResetDialog__body{
  margin: 0;
  font-size: var(--fs-b-12);
  line-height: 1.45;
  color: rgba(255, 251, 248, 0.82);
}
.pdcSkillModeResetDialog--floating .pdcSkillModeResetDialog__body{
  font-size: var(--fs-b-13, 0.8125rem);
  line-height: 1.5;
}
.pdcSkillModeResetDialog__actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.pdcSkillModeResetDialog--floating .pdcSkillModeResetDialog__actions{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.pdcSkillModeResetDialog__actions .chip{
  width: 100%;
  justify-content: center;
}
.pdcSkillModeResetDialog--floating .pdcSkillModeResetDialog__actions .chip{
  width: auto;
}
.pdcSkillModeResetDialog__cancel{
  margin: 2px 0 0;
  padding: 4px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-b-11, 0.6875rem);
  line-height: 1.3;
  color: rgba(255, 251, 248, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pdcSkillModeResetDialog__cancel:hover,
.pdcSkillModeResetDialog__cancel:focus-visible{
  color: rgba(75, 248, 254, 0.95);
  outline: none;
}
.pdcSkillModeResetDialog__btn--keep{
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 251, 248, 0.92);
}
.pdcSkillModeResetDialog__btn--keep:hover,
.pdcSkillModeResetDialog__btn--keep:focus-visible{
  border-color: rgba(75, 248, 254, 0.65);
  color: rgba(255, 251, 248, 1);
}
.pdcSkillModeResetDialog__btn--reset{
  font-family: var(--arcade, "Press Start 2P", monospace);
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: rgba(255, 236, 160, 0.92);
  background: linear-gradient(
      158deg,
      rgba(255, 245, 190, 0.38) 0%,
      rgba(255, 175, 95, 0.22) 42%,
      rgba(186, 120, 255, 0.16) 100%
    ),
    linear-gradient(180deg, rgba(76, 42, 120, 0.45), rgba(8, 14, 48, 0.88));
  color: rgba(255, 255, 252, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 210, 120, 0.28),
    0 0 18px rgba(255, 195, 100, 0.28);
}
.pdcSkillModeResetDialog__btn--reset:hover,
.pdcSkillModeResetDialog__btn--reset:focus-visible{
  border-color: rgba(255, 248, 200, 1);
  outline: 2px solid rgba(75, 248, 254, 0.35);
  outline-offset: 2px;
}
html.pdcSkillModeResetDialogOpen .pdcSkillModeResetDialog--floating{
  background: rgba(5, 8, 30, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  html.pdcSkillModeResetDialogOpen .pdcSkillModeResetDialog--floating{
    background: rgba(5, 8, 30, 0.85);
  }
}

/* Saved recipe delete — WarGames defuse / purge terminal */
.pdcRecipeDeleteDialog--wargames{
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  overflow: visible;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.pdcRecipeDeleteDialog--wargames::backdrop{
  background: rgba(0, 0, 0, 0.88);
}
.pdcRecipeDeleteDialog__panel{
  --pdc-wargames-green: #39ff7a;
  --pdc-wargames-green-dim: #1bcc55;
  --pdc-wargames-amber: #ffb84a;
  --pdc-wargames-red: #ff4a4a;
  position: relative;
  box-sizing: border-box;
  border: 2px solid rgba(255, 74, 74, 0.82);
  border-radius: 0;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(255, 74, 74, 0.35),
    0 0 56px rgba(255, 40, 40, 0.12),
    inset 0 0 60px rgba(255, 74, 74, 0.06);
  overflow: hidden;
  animation: pdcWargamesCrtFlicker 4.2s ease-in-out infinite;
}
.pdcRecipeDeleteDialog--armed .pdcRecipeDeleteDialog__panel{
  animation:
    pdcWargamesCrtFlicker 4.2s ease-in-out infinite,
    pdcRecipeDeleteArmedPulse 1.8s ease-in-out infinite;
}
.pdcRecipeDeleteDialog__matrixRain{
  position: absolute;
  inset: -20% 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 11px,
      rgba(255, 74, 74, 0.45) 11px,
      rgba(255, 74, 74, 0.45) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 18px,
      rgba(255, 40, 40, 0.1) 18px,
      rgba(255, 40, 40, 0.1) 19px
    );
  background-size: 100% 24px, 38px 100%;
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 92%);
  animation: pdcWargamesMatrixFall 7s linear infinite;
}
.pdcRecipeDeleteDialog__scan{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.42) 2px,
    rgba(0, 0, 0, 0.42) 4px
  );
  opacity: 0.38;
  mix-blend-mode: multiply;
}
.pdcRecipeDeleteDialog__panel::after{
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(255, 74, 74, 0.22);
  box-shadow: inset 0 0 30px rgba(255, 74, 74, 0.08);
}
.pdcRecipeDeleteDialog__head{
  position: relative;
  z-index: 4;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 74, 74, 0.4);
  background: #000;
}
.pdcRecipeDeleteDialog__sysLine{
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 74, 74, 0.62);
  text-shadow: 0 0 8px rgba(255, 74, 74, 0.35);
}
.pdcRecipeDeleteDialog__headRow{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.pdcRecipeDeleteDialog__prompt{
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 2.8vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pdc-wargames-amber);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.55);
}
.pdcRecipeDeleteDialog__title{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: clamp(18px, 5.2vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdc-wargames-red);
  text-shadow:
    0 0 10px rgba(255, 74, 74, 0.95),
    0 0 26px rgba(255, 40, 40, 0.5),
    0 0 42px rgba(180, 20, 20, 0.3);
}
.pdcRecipeDeleteDialog__sr{
  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;
}
.pdcRecipeDeleteDialog__seal{
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pdc-wargames-red);
  text-shadow:
    0 0 8px rgba(255, 74, 74, 0.75),
    0 0 16px rgba(255, 40, 40, 0.35);
  animation: pdcRecipeVaultSealBlink 1.6s step-end infinite;
}
.pdcRecipeDeleteDialog__armBar{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}
.pdcRecipeDeleteDialog__armLabel{
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: clamp(8px, 2vw, 10px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 74, 74, 0.9);
  text-shadow: 0 0 8px rgba(255, 74, 74, 0.45);
}
.pdcRecipeDeleteDialog__armTrack{
  flex: 1 1 auto;
  height: 8px;
  border: 1px solid rgba(255, 74, 74, 0.55);
  background: #000;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.pdcRecipeDeleteDialog__armFill{
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8b1010, #ff4a4a 45%, #ffb84a);
  box-shadow: 0 0 14px rgba(255, 74, 74, 0.75);
  transition: width 1.35s cubic-bezier(0.22, 1, 0.28, 1);
}
.pdcRecipeDeleteDialog__armFill--armed{
  width: 100%;
}
.pdcRecipeDeleteDialog__body{
  position: relative;
  z-index: 4;
  padding: 16px 18px 14px;
  font-family: var(--mono);
  background: #000;
}
.pdcRecipeDeleteDialog__line{
  margin: 0 0 12px;
  font-size: calc(var(--fs-b-13) + 0.5pt);
  line-height: 1.62;
  color: rgba(255, 200, 200, 0.88);
  text-shadow: 0 0 14px rgba(255, 74, 74, 0.12);
}
.pdcRecipeDeleteDialog__line--warn{
  margin-bottom: 0;
  color: rgba(255, 184, 74, 0.82);
  text-shadow: 0 0 10px rgba(255, 184, 74, 0.2);
}
.pdcRecipeDeleteDialog__target{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(57, 255, 122, 0.45);
  background: rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 20px rgba(57, 255, 122, 0.06);
}
.pdcRecipeDeleteDialog__fileId{
  font-family: var(--mono);
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(57, 255, 122, 0.72);
}
.pdcRecipeDeleteDialog__name{
  font-family: var(--mono);
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--pdc-wargames-green);
  text-shadow:
    0 0 10px rgba(57, 255, 122, 0.85),
    0 0 22px rgba(57, 255, 122, 0.35);
  word-break: break-word;
}
.pdcRecipeDeleteDialog__actions{
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 16px 16px;
  background: #000;
}
.pdcRecipeDeleteDialog__btn{
  border-radius: 0;
  font-family: var(--mono);
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}
.pdcRecipeDeleteDialog__btn--defuse{
  border: 1px solid rgba(57, 255, 122, 0.65);
  background: #000;
  color: var(--pdc-wargames-green);
  text-shadow: 0 0 10px rgba(57, 255, 122, 0.55);
  box-shadow:
    0 0 0 1px rgba(57, 255, 122, 0.12),
    0 0 16px rgba(57, 255, 122, 0.22);
}
.pdcRecipeDeleteDialog__btn--defuse:hover,
.pdcRecipeDeleteDialog__btn--defuse:focus-visible{
  border-color: rgba(57, 255, 122, 0.95);
  box-shadow:
    0 0 0 1px rgba(57, 255, 122, 0.2),
    0 0 22px rgba(57, 255, 122, 0.45);
  outline: 2px solid rgba(57, 255, 122, 0.35);
  outline-offset: 2px;
}
.pdcRecipeDeleteDialog__btn--purge{
  border: 1px solid rgba(255, 74, 74, 0.85);
  background: linear-gradient(180deg, rgba(80, 8, 8, 0.95), rgba(24, 0, 0, 0.98));
  color: #ffd0d0;
  text-shadow: 0 0 12px rgba(255, 74, 74, 0.75);
  box-shadow:
    0 0 0 1px rgba(255, 74, 74, 0.2),
    0 0 20px rgba(255, 40, 40, 0.35);
}
.pdcRecipeDeleteDialog__btn--purge:hover,
.pdcRecipeDeleteDialog__btn--purge:focus-visible{
  border-color: #ff7a7a;
  box-shadow:
    0 0 0 1px rgba(255, 74, 74, 0.35),
    0 0 28px rgba(255, 40, 40, 0.55);
  outline: 2px solid rgba(255, 74, 74, 0.4);
  outline-offset: 2px;
}
@keyframes pdcRecipeDeleteArmedPulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.9),
      0 0 28px rgba(255, 74, 74, 0.35),
      0 0 56px rgba(255, 40, 40, 0.12),
      inset 0 0 60px rgba(255, 74, 74, 0.06);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.9),
      0 0 36px rgba(255, 74, 74, 0.55),
      0 0 72px rgba(255, 40, 40, 0.22),
      inset 0 0 72px rgba(255, 74, 74, 0.1);
  }
}
@media (prefers-reduced-motion: reduce){
  .pdcRecipeDeleteDialog__panel,
  .pdcRecipeDeleteDialog--armed .pdcRecipeDeleteDialog__panel,
  .pdcRecipeDeleteDialog__matrixRain,
  .pdcRecipeDeleteDialog__seal{
    animation: none;
  }
  .pdcRecipeDeleteDialog__armFill{
    transition: none;
    width: 100%;
  }
}