/* ============================================================================
 * sourdoughy.com — v4 mobile density layer
 *
 * Applies LAST (after v3-cro.css). Targets the specific density / alignment
 * problems on 375–414 px viewports. Desktop styles are preserved by media
 * queries; mobile rules are unscoped (mobile-first).
 *
 * Spacing scale (mobile, used throughout):
 *   --gap-xs:  8px   --gap-sm: 12px   --gap-md: 16px   --gap-lg: 24px
 *   --gap-xl:  32px  --gap-2xl: 48px
 *
 * The legacy /assets/css/hero.css <link> is REMOVED from index.php — its
 * rules conflict with v3-cro.css and produced visible amber tints / extra
 * paddings inside the live recipe preview card on mobile.
 * ========================================================================== */

:root {
  --gap-xs:  8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-2xl: 48px;
  --m-page-x: 16px;     /* mobile horizontal page padding */
  --m-card-pad: 20px;   /* mobile card internal padding */
}


/* ===========================================================================
 * 1. KILL LEGACY HERO.CSS REMNANTS (in case it's still cached)
 * ========================================================================= */

/* hero.css used .hero-preview { background: rgba(184,90,52,0.05) } and
   padding: 1.25rem — neutralise both at high specificity so cached visitors
   see the v3 surface immediately. */
section.hero .hero-preview {
  background: var(--surface) !important;
}


/* ===========================================================================
 * 2. HERO BLOCK — tight, edge-to-edge on mobile
 * ========================================================================= */

.hero {
  /* Mobile-first: card area = viewport - 32px (16px each side). */
  max-width: none;
  margin: var(--gap-md) auto var(--gap-lg);
  padding: 0 var(--m-page-x);
}
@media (min-width: 768px) {
  .hero {
    max-width: 760px;
    margin: var(--gap-xl) auto var(--gap-2xl);
    padding: 0 24px;
  }
}

.hero-inner {
  /* Stack copy → preview → CTA with a single rhythm value.
     align-items: stretch is critical: ui.css sets `align-items: start`
     which leaves preview/copy at their natural content width (~451px)
     instead of filling the hero column. */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--gap-md);            /* 16px */
}
@media (min-width: 768px) {
  .hero-inner { gap: var(--gap-lg); }   /* 24px */
}

/* Belt-and-braces: every direct child of .hero-inner spans the full
   column width regardless of legacy max-width / inline-block leftovers. */
.hero-inner > .hero-copy,
.hero-inner > .hero-preview,
.hero-inner > .hero-cta-row,
.hero-inner > .pro-mode-toggle-row,
.hero-inner > .pro-mode-panel {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);            /* headline → subhead = 8px */
}

.hero-headline {
  /* Spec: 28-32px on 375px, line-height 1.15, max 2 lines. */
  font-size: clamp(28px, 7.6vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
}
@media (min-width: 768px) {
  .hero-headline {
    font-size: clamp(36px, 4.6vw, 52px);
    line-height: 1.08;
  }
}

.hero-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted, #6b6660);
  margin: 0;
}
@media (min-width: 768px) {
  .hero-sub { font-size: 17px; }
}


/* ===========================================================================
 * 3. LIVE PREVIEW CARD — single padding source, table goes 100%
 * ========================================================================= */

.hero-preview {
  /* Override v3-cro and ui.css. ONE padding source, ONE radius. */
  padding: var(--m-card-pad) !important;       /* 20px all sides */
  border-radius: 14px;
  margin: 0;                                   /* hero handles outer spacing */
  background: var(--surface);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  /* Reset any min-width / max-width leakage from desktop rules. */
  min-width: 0;
  max-width: none;
  width: auto;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px -10px rgba(0,0,0,0.10);
}
@media (min-width: 768px) {
  .hero-preview { padding: 24px !important; border-radius: 16px; }
}

.hero-preview-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-muted));
  margin: 0 0 var(--gap-sm);
}

.hero-preview-grid {
  /* On mobile: stack the two visible sliders, tight gap. */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);                /* 16px between sliders */
  margin: 0 0 var(--gap-md);
}
@media (min-width: 560px) {
  .hero-preview-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
}

.hero-slider { gap: 6px; }            /* label → track */
.hero-slider-label {
  font-size: 13px;
  text-transform: none;               /* override ui.css uppercase */
  letter-spacing: 0;
  color: var(--ink-muted);
  font-weight: 500;
}
.hero-slider-label output {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
}


/* ----- Result table: 100 % of card content area, edge-to-edge labels ----- */

.hero-recipe-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;                           /* hero-preview-grid + table sit flush */
  table-layout: auto;
}
.hero-recipe-table tr {
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.hero-recipe-table tr:first-child { border-top: none; }

.hero-recipe-table th,
.hero-recipe-table td {
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  font-size: 15px;
  line-height: 1.2;
}
.hero-recipe-table tr:first-child th,
.hero-recipe-table tr:first-child td { border-top: 0; }

.hero-recipe-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-muted, #6b6660);
  text-transform: none;
  letter-spacing: 0;
}
.hero-recipe-table td {
  text-align: right;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  color: var(--ink, #1a1714);
  white-space: nowrap;
}
.hero-recipe-table td span { transition: color 200ms ease; }
.hero-recipe-table td.is-flash { color: var(--accent); }


/* ----- Hero preview footer: simpler on mobile (just the share link) ----- */

.hero-preview-foot {
  margin: var(--gap-md) 0 0;
  padding: 0;
  border-top: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
.hero-preview-foot .hero-preview-deep { display: none; }
@media (min-width: 768px) {
  .hero-preview-foot {
    justify-content: space-between;
    border-top: 1px solid var(--border, rgba(0,0,0,0.06));
    padding-top: 12px;
  }
  .hero-preview-foot .hero-preview-deep { display: inline-flex; }
}


/* ===========================================================================
 * 4. CTA ROW — full-width primary, tight rhythm
 * ========================================================================= */

.hero-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);                   /* 12px between primary and pro link */
  margin: 0;
}
.hero-cta {
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 12px;
}
.hero-cta-link {
  height: 36px;
  min-height: 36px;
  font-size: 14px;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-muted) !important;
  box-shadow: none !important;
}
.hero-cta-link[aria-pressed="true"] {
  color: var(--accent) !important;
  font-weight: 600;
}


/* ===========================================================================
 * 5. PRO MODE PANEL — when shown, match card width / rhythm
 * ========================================================================= */

.pro-mode-panel {
  margin: var(--gap-md) 0 0;
  padding: var(--m-card-pad);
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pro-mode-form { gap: var(--gap-sm); }
.pro-mode-form fieldset {
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
}
.pro-mode-form label { gap: 4px; font-size: 12px; }
.pro-mode-form input[type="number"] {
  height: 44px;
  font-size: 15px;
}


/* ===========================================================================
 * 6. WIZARD — same outer spacing as hero, no double constraint
 * ========================================================================= */

.builder-app {
  /* builder.css clamps to 480 px which leaves dead space on 414 px Pro Max.
     Lift the cap to 760 px so the wizard mirrors the hero card's width. */
  max-width: 760px !important;
  padding: var(--gap-md) var(--m-page-x) var(--gap-2xl) !important;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .builder-app {
    max-width: 760px !important;
    padding: var(--gap-lg) 24px var(--gap-2xl) !important;
  }
}

#wizardStart {
  display: block;
  scroll-margin-top: calc(var(--hdr-h-mobile, 56px) + 8px);
}

.step-pathpicker { padding: 0; }
.step-pathpicker .step-title-compact { margin-bottom: 6px; font-size: 18px; }
.step-pathpicker .step-desc { margin-bottom: var(--gap-sm); }

.wizard-fork { gap: 10px; margin: 0; }
.wizard-fork-card {
  padding: 16px;
  min-height: 76px;
  gap: 14px;
}
.wizard-fork-label { font-size: 16px; }
.wizard-fork-meta  { font-size: 13px; }


/* ===========================================================================
 * 7. SECTIONS — uniform gap between major mobile blocks
 * ========================================================================= */

.other-calculators-section {
  margin: var(--gap-2xl) auto var(--gap-xl);
  padding: 0 var(--m-page-x);
  border-top: 0;                                  /* drop the divider */
}
.other-calculators-heading-h2 {
  font-size: 22px;
  margin: 0 0 var(--gap-md);
  text-align: left;
}
@media (min-width: 768px) {
  .other-calculators-heading-h2 { text-align: center; font-size: 26px; }
}
.other-calculators-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .other-calculators-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.other-calc-card {
  padding: 14px 14px 16px;
  min-height: 116px;
  border-radius: 12px;
  gap: 4px;
}
.other-calc-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.other-calc-name { font-size: 15px; }
.other-calc-meta { font-size: 12.5px; }

.how-it-works {
  margin: 0 auto var(--gap-2xl);
  padding: 0 var(--m-page-x);
}
.how-it-works summary {
  padding: 14px 16px;
  font-size: 16px;
  min-height: 52px;
}
.how-it-works .hiw-body { padding: 0 16px 16px; font-size: 15px; line-height: 1.6; }


/* ===========================================================================
 * 8. RECENTLY BAKED — match outer spacing
 * ========================================================================= */

.recently-baked {
  margin: var(--gap-md) 0 0;
  padding: 14px 16px;
}


/* ===========================================================================
 * 9. CALCULATOR PAGES (pizza/focaccia/bagel) — tighten step rhythm
 *    (these use the .builder-app shell + .step cards from builder.css)
 * ========================================================================= */

.builder-app .step {
  padding: 0;
  margin: 0;
}
.builder-app .step-title {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .builder-app .step-title { font-size: 26px; }
}
.builder-app .step-desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 var(--gap-md);
}

.builder-app .options { gap: 10px; }
.builder-app .option {
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 12px;
}

/* "Other dough calculators" + "How it works" rendered after each calc page */
main#main > .other-calculators-section { margin-top: var(--gap-2xl); }
main#main > .how-it-works               { margin-top: 0; }


/* ===========================================================================
 * 10. RECIPE CARD on calculator results pages — reduce huge desktop padding
 * ========================================================================= */

.builder-app .recipe-card {
  padding: var(--m-card-pad) !important;
  border-radius: 14px;
}
.builder-app .recipe-stats { gap: 10px; margin-bottom: var(--gap-md); }
.builder-app .ingredients-list { margin: 0; padding: 0; }
.builder-app .ingredients-list li {
  padding: 12px 0;
  font-size: 15px;
  border-top: 1px solid var(--border);
}
.builder-app .ingredients-list li:first-child { border-top: 0; }


/* ===========================================================================
 * 11. AFFILIATE / "What you'll need" row — 2 col mobile, 4 col desktop
 * ========================================================================= */

.affiliate-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 720px) {
  .affiliate-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
.affiliate-card {
  padding: 14px;
  border-radius: 12px;
  min-height: 88px;
}


/* ===========================================================================
 * 12. LANGUAGE-SPECIFIC: longer headlines need a smaller font on mobile
 *    (German, Russian, Bulgarian, Romanian)
 * ========================================================================= */

@media (max-width: 480px) {
  html[lang="de"] .hero-headline,
  html[lang="ru"] .hero-headline,
  html[lang="bg"] .hero-headline,
  html[lang="ro"] .hero-headline { font-size: 26px; line-height: 1.15; }
}


/* ===========================================================================
 * 13. KILL EMPTY-SPACE ARTIFACTS LEFT BY OLD DESKTOP RULES
 * ========================================================================= */

/* Removed wrappers may still be in markup — collapse their spacing. */
.welcome-hero,
.starter-link-wrap.starter-link-landing,
.other-calculators-wrap { display: none !important; }

/* Old `.app-header` wrappers from pre-v3 calculator UIs — neutralise. */
.builder-app .app-header { display: none !important; }

/* The legacy hero.css may inject .pro-mode-panel{margin: 2rem auto 0; max-width: 1080px;}
   — reset to mobile-friendly defaults. */
.pro-mode-panel { max-width: none !important; }


/* ===========================================================================
 * 14. CARD UNIFORMITY — anything inside main shouldn't escape the page padding
 * ========================================================================= */

main#main > section,
main#main > .builder-app {
  box-sizing: border-box;
}

main#main img { max-width: 100%; height: auto; }


/* ===========================================================================
 * 15. DARK-MODE PARITY — borders need to be visible against surface
 * ========================================================================= */

[data-theme="dark"] .hero-preview,
[data-theme="dark"] .pro-mode-panel,
[data-theme="dark"] .other-calc-card,
[data-theme="dark"] .how-it-works details,
[data-theme="dark"] .wizard-fork-card,
[data-theme="dark"] .recently-baked {
  border-color: var(--border-strong, rgba(255,255,255,0.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .hero-recipe-table tr,
[data-theme="dark"] .hero-recipe-table th,
[data-theme="dark"] .hero-recipe-table td {
  border-top-color: rgba(255,255,255,0.08);
}


/* ===========================================================================
 * 16. RESPECT prefers-reduced-motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-recipe-table td span,
  .hero-cta,
  .other-calc-card,
  .wizard-fork-card { transition: none !important; }
}


/* ===========================================================================
 * 17. WIDTH / DENSITY PASS — full-width primary actions on mobile,
 *     consistent rhythm in tables, no orphaned wrap rows.
 *
 *     Loaded LAST so these rules win over builder.css / ui.css / v3-cro.css.
 *     Below 600px: stack action buttons vertically (iOS-style primary CTA).
 *     >= 600px:    return to inline rows.
 * ========================================================================= */

/* ----- 17a. Recipe action row (Save / Share / Export PDF) on step 7.
       The previous flex:1 + min-width:120 produced an asymmetric 2-1 wrap
       on every phone width, leaving the third button on a row of its own. */
.builder-app .recipe-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  flex-wrap: nowrap;
}
.builder-app .recipe-action-btn {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: 12px;
}
@media (min-width: 600px) {
  .builder-app .recipe-actions { flex-direction: row; gap: 12px; }
  .builder-app .recipe-action-btn { flex: 1 1 0; }
}


/* ----- 17b. Custom row in wizard steps (Continue + number input).
       Stack the input on row 1 and the button full-width on row 2 so the
       Continue CTA never gets squeezed beside its number field. */
.builder-app .custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
  width: 100%;
}
.builder-app .custom-row > input[type="number"] {
  flex: 1 1 calc(100% - 40px);
  min-width: 0;
  width: auto;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;        /* prevents iOS zoom on focus */
}
.builder-app .custom-row > .unit {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ink-muted);
}
.builder-app .custom-row .btn {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 48px;
}
@media (min-width: 600px) {
  .builder-app .custom-row > input[type="number"] {
    flex: 0 1 8rem;
  }
  .builder-app .custom-row .btn {
    flex: 1 1 auto;
    width: auto;
  }
}


/* ----- 17c. Quick-path form (step 0 quick).
       Left-rail label + right-rail control on phones; Continue full-width.
       Avoids the cramped wrap that happened when the unit + chips + custom
       number input all fought for space. */
.builder-app .quick-inputs { gap: var(--gap-md); }

.builder-app .quick-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.builder-app .quick-row > label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.builder-app .quick-row .input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.builder-app .quick-row .input-with-unit > input[type="number"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border-radius: 10px;
}
.builder-app .quick-row .input-with-unit > .unit {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Flour preset row + hydration / salt preset row both wrap pills cleanly. */
.builder-app .quick-flour-options,
.builder-app .quick-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.builder-app .quick-flour-options .option-small,
.builder-app .quick-presets .option-small {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}
.builder-app .quick-flour-options .option-small {
  flex-basis: calc(50% - 4px);     /* 2-up grid on phones */
}
@media (min-width: 420px) {
  .builder-app .quick-flour-options .option-small { flex-basis: calc(33.333% - 6px); }
}
@media (min-width: 600px) {
  .builder-app .quick-flour-options .option-small,
  .builder-app .quick-presets .option-small { flex: 0 1 auto; flex-basis: auto; }
}

/* The custom-number embedded inside .quick-presets gets its own line on
   phones so it doesn't fight the chip pills for width. */
.builder-app .quick-presets .input-with-unit {
  flex: 1 1 100%;
  margin-left: 0 !important;
  margin-top: 4px;
}
.builder-app .quick-presets .input-with-unit > input[type="number"] {
  width: auto !important;
  min-width: 0;
  flex: 1 1 auto;
}
@media (min-width: 600px) {
  .builder-app .quick-presets .input-with-unit { flex: 0 1 auto; margin-top: 0; }
  .builder-app .quick-presets .input-with-unit > input[type="number"] { flex: 0 1 5rem; }
}

.builder-app .quick-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border-radius: 12px;
}


/* ----- 17d. Hero recipe table — first table on the site.
       Already width:100%. Add a touch of internal cell breathing room so
       labels and values don't kiss the card border on the largest viewport
       sizes; keep edge-to-edge feel by not adding outer padding.
       Also normalise borders so the first row never shows a stray top line. */
.hero-preview .hero-recipe-table {
  width: 100%;
  margin: var(--gap-sm) 0 0;
  border-collapse: collapse;
}
.hero-preview .hero-recipe-table tr {
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.hero-preview .hero-recipe-table tr:first-child { border-top: 0; }
.hero-preview .hero-recipe-table th,
.hero-preview .hero-recipe-table td {
  padding: 13px 0;
  border: 0;
  font-size: 15px;
  line-height: 1.2;
}
.hero-preview .hero-recipe-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-muted, #6b6660);
  text-transform: none;
  letter-spacing: 0;
  padding-right: 16px;            /* breathing room between label and value */
}
.hero-preview .hero-recipe-table td {
  text-align: right;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--ink, #1a1714);
  white-space: nowrap;
  padding-left: 0;
}


/* ----- 17e. Pro-mode output table — match the hero rhythm so both tables
       inside the same card feel like one design family. */
.pro-mode-panel .pro-mode-output {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--gap-sm);
}
.pro-mode-panel .pro-mode-output tr {
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
.pro-mode-panel .pro-mode-output tr:first-child { border-top: 0; }
.pro-mode-panel .pro-mode-output th,
.pro-mode-panel .pro-mode-output td {
  padding: 12px 0;
  border-bottom: 0;
  font-size: 14px;
  line-height: 1.2;
}
.pro-mode-panel .pro-mode-output th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-muted, #6b6660);
  padding-right: 16px;
}
.pro-mode-panel .pro-mode-output td {
  text-align: right;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ----- 17f. Cookie-consent buttons — 50/50 stretched on mobile so neither
       Accept nor Reject feels orphaned, never wrapping awkwardly. */
.cookie-consent .cookie-consent-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.cookie-consent .cookie-consent-inner > p { margin: 0; }
.cookie-consent .cookie-consent-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}
.cookie-consent .cookie-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}
@media (min-width: 600px) {
  .cookie-consent .cookie-consent-inner {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cookie-consent .cookie-consent-btns { width: auto; flex: 0 0 auto; }
  .cookie-consent .cookie-btn { flex: 0 0 auto; min-width: 96px; }
}


/* ----- 17g. Timer controls (Pause / Reset on step 7) — 50/50 row that
       always uses the full available width on phones. */
.builder-app .timer-display-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  padding: 12px 0 0;
}
.builder-app .timer-time {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-align: center;
}
.builder-app .timer-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}
.builder-app .timer-controls .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
}
@media (min-width: 600px) {
  .builder-app .timer-display-wrap { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0 0; }
  .builder-app .timer-time { text-align: left; flex: 0 0 auto; }
  .builder-app .timer-controls { width: auto; flex: 0 0 auto; }
  .builder-app .timer-controls .btn { flex: 0 0 auto; min-width: 96px; }
}


/* ----- 17h. Start-over button — full-width on mobile (no orphan max-200px),
       comfortably bounded on tablet/desktop. */
.builder-app .start-over { text-align: center; margin-top: var(--gap-lg); }
.builder-app .start-over .btn {
  width: 100%;
  max-width: none;
  min-height: 48px;
  border-radius: 12px;
}
@media (min-width: 600px) {
  .builder-app .start-over .btn { width: auto; max-width: 240px; padding: 12px 28px; }
}


/* ----- 17i. Glossary popover — Read full guide CTA goes full-width inside
       the modal so the tap target is dominant on phones. */
.glossary-popover .glossary-popover-link {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}


/* ----- 17j. Step navigation (back-link + sticky CTA on step 0) — collapse
       any leftover horizontal padding that left a sliver of empty space on
       the right edge of the wizard card on phones. */
.builder-app .nav-row {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.builder-app .nav-row .btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 48px;
}


/* ----- 17k. Flour preset row inside the regular guided flow (.options).
       Already vertical and full-width via builder.css, but we lock the
       option to fill the card width on phones (some translations cause an
       unexpected width contraction). */
.builder-app .options .option {
  width: 100%;
  min-width: 0;
}


/* ----- 17l. Recipe-card padding parity at very narrow widths (320–360px)
       so the inner grid rows always have at least 16px breathing room. */
@media (max-width: 360px) {
  .builder-app .recipe-card { padding: 16px !important; }
  .hero-preview { padding: 16px !important; }
}


/* ===========================================================================
 * 18. HERO RECIPE GRID — 2×2 INGREDIENT-CARD GRID
 *
 *     The hero recipe summary is rendered as a <dl class="hero-recipe-grid">
 *     of 4 .recipe-stat blocks. Pure CSS grid (no <table> quirks).
 *
 *     2-column on every viewport so the card always feels filled instead
 *     of "split half-half with a visual hole in the middle".
 * ========================================================================= */

.hero-preview .hero-recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  margin: var(--gap-sm) 0 0;
  padding: 0;
}

.hero-preview .recipe-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  margin: 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
  min-width: 0;
}
/* Top row (first two stats) sits flush with the title above — no top border. */
.hero-preview .recipe-stat:nth-child(-n+2) { border-top: 0; padding-top: 6px; }

/* Right column has a left padding so the two columns visually separate. */
.hero-preview .recipe-stat:nth-child(2n)   { padding-left: 16px; }
.hero-preview .recipe-stat:nth-child(2n+1) { padding-right: 16px; }

.hero-preview .recipe-stat-label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #6b6660);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-preview .recipe-stat-value {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink, #1a1714);
  white-space: nowrap;
}
.hero-preview .recipe-stat-value.is-flash { color: var(--accent); }
.hero-preview .recipe-stat-value span { transition: color 200ms ease; }

@media (min-width: 768px) {
  .hero-preview .recipe-stat { padding-top: 14px; padding-bottom: 14px; }
  .hero-preview .recipe-stat:nth-child(-n+2) { padding-top: 8px; }
  .hero-preview .recipe-stat-value { font-size: 20px; }
}

/* Hide the OLD .hero-recipe-table rules in case any legacy markup ever shows
   up cached. Belt-and-suspenders. */
.hero-preview table.hero-recipe-table { display: none !important; }


/* ===========================================================================
 * 19. PRO-MODE SCHEDULE INFO BLOCK
 *
 *     The previous Fermentation fieldset had 5 inputs (Temp, Bulk, Cold,
 *     Autolyse, Folds) that did not feed into the calculator math at all.
 *     They've been replaced with a static info card showing the typical
 *     suggested values. This is a read-only reference — not editable.
 * ========================================================================= */

.pro-mode-panel .pro-mode-schedule {
  margin: var(--gap-md) 0 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px;
  background: var(--accent-soft, rgba(200,128,31,0.06));
}
[data-theme="dark"] .pro-mode-panel .pro-mode-schedule {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.pro-mode-panel .pro-mode-schedule-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #6b6660);
  margin: 0 0 12px;
}

.pro-mode-panel .pro-mode-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (min-width: 480px) {
  .pro-mode-panel .pro-mode-schedule-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
  .pro-mode-panel .pro-mode-schedule-list { grid-template-columns: repeat(5, 1fr); }
}

.pro-mode-panel .pro-mode-schedule-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pro-mode-panel .pro-mode-schedule-list .schedule-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted, #6b6660);
  line-height: 1.2;
}
.pro-mode-panel .pro-mode-schedule-list .schedule-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1a1714);
  line-height: 1.15;
}

.pro-mode-panel .pro-mode-schedule-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.pro-mode-panel .pro-mode-schedule-note a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.pro-mode-panel .pro-mode-schedule-note a:hover { text-decoration: underline; }


/* ===========================================================================
 * 20. KILL EMPTY SPACE BELOW THE WIZARD
 *
 *     The previous attempt used `.builder-app + .other-calculators-section`
 *     but builder.php emits a <script>BUILDER_T</script> directly after
 *     </div.builder-app>, breaking the adjacent sibling combinator.
 *
 *     New approach (no sibling combinator, no fragile chain):
 *       1. Universally tighten .builder-app bottom padding — the wizard
 *          steps already have generous internal padding from the recipe
 *          card and the .start-over button so 16-24 px outer is enough.
 *       2. Universally pull .other-calculators-section closer to whatever
 *          is above it.
 *       3. EXTRA tightening when step 0 is the active step (path picker)
 *          via `main:has(#step0.active)` (matches in all browsers that
 *          support :has, which is every major engine since 2023).
 *
 *     Result on the homepage at step 0:
 *       wizard-fork bottom → 12 px → builder-app end
 *                        → 16 px (section margin)
 *                        = ~28 px to "Other dough calculators" heading.
 * ========================================================================= */

/* 1. Always tighten the wizard's bottom padding AND kill the legacy
       `min-height: 100vh` from builder.css that was forcing the wizard
       container to fill the entire viewport — pushing every section
       below it (Other dough calculators, How it works, Footer) hundreds
       of pixels down on the home page where the wizard is short. */
.builder-app {
  min-height: 0 !important;
  padding-bottom: var(--gap-md) !important;        /* 16 px */
}
@media (min-width: 768px) {
  .builder-app { padding-bottom: var(--gap-lg) !important; }   /* 24 px */
}

/* 2. Always pull the other-calculators section closer. */
main#main > .other-calculators-section {
  margin-top: var(--gap-lg) !important;            /* 24 px */
  margin-bottom: var(--gap-lg);
}
@media (min-width: 768px) {
  main#main > .other-calculators-section {
    margin-top: var(--gap-xl) !important;          /* 32 px */
  }
}

/* 3. Even tighter when on the path picker (step 0) — pure info screen,
       no input required, so the "next action" should feel close. */
main#main:has(.builder-app .step.step-pathpicker.active) {
  /* belt-and-suspenders: tighten on the parent too */
}
main#main:has(#step0.active) > .other-calculators-section {
  margin-top: var(--gap-md) !important;            /* 16 px */
}
@media (min-width: 768px) {
  main#main:has(#step0.active) > .other-calculators-section {
    margin-top: var(--gap-lg) !important;          /* 24 px */
  }
}

/* Keep the wizard fork itself compact: no surplus margin beneath. */
.builder-app .step.step-pathpicker { padding-bottom: 0; margin-bottom: 0; }
.builder-app .wizard-fork { margin-bottom: 0; }


/* ===========================================================================
 * 21. PAGE-LEVEL RHYTHM — close the gap between the "Other calculators"
 *     section and the "How it works" details, plus tighten the very bottom
 *     of the page on phones so the cookie banner and footer don't sit in
 *     a sea of empty space.
 * ========================================================================= */

main#main > .how-it-works { margin-top: 0; margin-bottom: var(--gap-lg); }