/* ============================================================================
   anc-style.css — ANC Splash-Page Style System (v2.13.6)
   ============================================================================
   Brand-system stylesheet for the AngelaNaethCoaching Race Fueling Planner.
   Loaded after each page's inline <style>, so its rules win on specificity ties.

   Design tokens, gradients, typography, and card patterns are imported from
   the user-provided ANC Nutrition Planner Splash Page Style Guide.

   Pages that import this stylesheet:
     - /intake.html   (intake form)
     - /output.html   (plan view)
     - /race-card     (worker-rendered, inlines a copy of the relevant rules)
     - /pdf           (worker-rendered, inlines a copy of the relevant rules)

   The file is intentionally small (no resets, no layout grids — those are
   already defined in each page's inline CSS). It augments existing styles
   to give the planner a consistent ANC look.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BRAND TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* v2.28.41 Cosmetic Fix #3 (2026-06-10) — Inter font + teal retheme.
     Re-aligned to ask.angelanaethcoaching.com brand vocabulary (Inter +
     Tailwind teal accent family) WHILE staying a light theme — race-fueling
     is light, ask-ANC is dark, so the retheme adopts the FAMILY (teal hues
     + Inter) but keeps the light backgrounds and gold/red/cream warmth so
     PDFs and athlete printouts stay flat/readable.

     Contrast audit against #FFFFFF (WCAG AA-body threshold = 4.5):
       #0B5E5D → 7.57  PASS  → --anc-dark-teal  (was #0B5E5D 8.43)
       #0E7C7B → 5.01  PASS  → --anc-mid-teal   (was #0E7C7B 5.43)
       #14B8A6 → 2.49  FAIL  → DECORATIVE-ONLY  (--anc-accent — chip bgs)
       #2DD4BF → 1.86  FAIL  → DECORATIVE-ONLY  (--anc-accent-hi)
     Legacy --anc-dark-teal / --anc-mid-teal var NAMES are preserved so all
     downstream call-sites resolve unchanged; only the values change.
     #14B8A6 / #2DD4BF (ask-ANC's primary accent) enter the vocabulary as
     --anc-accent / --anc-accent-hi but are NOT used for body text anywhere
     in this swap — they exist for future decorative use only. */
  /* Primary palette */
  --anc-dark-teal:   #0B5E5D;     /* deep teal — primary brand, headers, body text (was #0B5E5D brand blue) */
  --anc-mid-teal:    #0E7C7B;     /* mid teal — CTAs, accent rules, secondary headers (was #0E7C7B) */
  --anc-brand-ink:   #141414;     /* brand near-black — sampled from logo "Planner" wordmark */
  --anc-gold:        #D4A537;     /* gold highlights, badges */
  --anc-red:         #C8362D;     /* warnings, urgent CTAs */
  --anc-cream:       #F8F4ED;     /* warm body background */
  --anc-paper:       #FFFFFF;
  --anc-ink:         #1A2226;     /* body text */
  --anc-ink-soft:    #4A5A66;     /* secondary text */
  --anc-line:        #D8DDE3;     /* hairlines */
  --anc-line-soft:   #EBEEF2;

  /* v2.28.41 — Ask-ANC accent family (Tailwind teal-500 / teal-400).
     DECORATIVE-ONLY: contrast on white is 2.49 / 1.86 respectively, so
     these MUST NOT be used as text color. Use for chip backgrounds (with
     dark text), focus rings, soft fill states. */
  --anc-accent:      #14B8A6;
  --anc-accent-hi:   #2DD4BF;

  /* Gradients — repainted in teal */
  --anc-grad-dark:   linear-gradient(135deg, #0B5E5D 0%, #0E7C7B 100%);
  --anc-grad-soft:   linear-gradient(135deg, #EEFAF8 0%, #FFF8EE 100%);
  --anc-grad-hero:   linear-gradient(135deg, #063F3E 0%, #0B5E5D 50%, #0E7C7B 100%);

  /* Shadows — re-tinted teal */
  --anc-shadow-sm:   0 1px 3px rgba(11, 94, 93, 0.08);
  --anc-shadow:      0 2px 12px rgba(11, 94, 93, 0.10);
  --anc-shadow-lg:   0 8px 32px rgba(11, 94, 93, 0.14);
  --anc-shadow-gold: 0 4px 16px rgba(212, 165, 55, 0.30);

  /* Radius scale */
  --anc-r-sm: 6px;
  --anc-r:    12px;
  --anc-r-lg: 20px;

  /* Typography — v2.28.41 Cosmetic #3: Inter loaded via Google Fonts CSS2
     in output.html + intake.html <head>. System-font chain retained as
     fallback so the page stays legible if the font request fails. */
  --anc-font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --anc-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
                      "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   2. ANC PAGE HEADER (centered large logo)
   ----------------------------------------------------------------------------
   New <header class="anc-header"> wraps the existing site-header markup.
   Pages emit:
     <header class="anc-header">
       <a class="anc-header-logo" href="/" aria-label="AngelaNaethCoaching">
         <img src="/teal.png" alt="AngelaNaethCoaching" />
       </a>
       <p class="anc-header-tag">Race Fueling Planner</p>
     </header>

   The legacy .site-header inside intake.html / output.html is overridden to
   use the same dark teal background + centered logo treatment.
   ---------------------------------------------------------------------------- */
/* v2.13.6 audit fix (2026-05-10): Header is now ALL WHITE.
   Previous design used a dark-teal gradient header with a white logo "tile"
   sitting on top of it. That created an awkward visible rectangle/frame
   around the wordmark (because the PNG had a white background of its own).
   The user (correctly) called it ugly.

   New design:
     - White header background — clean, professional, splash-page calm
     - Transparent-background logo PNG sits directly on the white surface
       with no plate, no border, no shadow
     - Subtle dark-teal tagline below, italic display font
     - Bold gold gradient border-bottom keeps the brand accent line
     - Soft drop shadow gives separation from form body */
/* v2.13.6 Commit G9 — Header rewrite to match the splash-page treatment:
   - Teal logo lock-up on the LEFT (not centered)
   - Page title (h1) + subtag stacked to the RIGHT of the logo
   - Thin dark-teal accent line at the bottom (no gold strip — that lived on
     the old centered hero treatment and made the page feel "form-y")
   - Stacks vertically on mobile so the logo stays prominent */
.anc-header {
  background: #FFFFFF;
  color: var(--anc-dark-teal);
  padding: 18px 28px 16px;
  display: flex;
  align-items: center;
  /* v2.13.61 LOGO-ONLY HEADER (Angela 2026-05-17, "I want the logo to be in
     the center and we don't need the other wording in the header. The logo
     does it all!"): center the logo and hide the title/tag block. The
     racefuelplanner-logo.png image already contains the wordmark + tagline +
     "Built by AngelaNaeth" subtext baked in, so any text rendered alongside
     it is redundant. justify-content: center centers the lone logo;
     .anc-header-text below is display:none so any legacy markup that still
     ships the title block (cached browser, older intake snapshot) renders
     cleanly with just the logo. */
  justify-content: center;
  gap: 0;
  border-bottom: 2px solid var(--anc-dark-teal);
  box-shadow: 0 2px 10px rgba(6, 54, 58, 0.06);
  position: relative;
}
/* v2.13.61: hide title/tag text block. Logo carries everything. */
.anc-header .anc-header-text { display: none !important; }
.anc-header .anc-header-eyebrow { display: none !important; }
.anc-header .anc-header-logo {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-decoration: none;
  transition: transform .18s ease;
  flex-shrink: 0;
}
.anc-header .anc-header-logo:hover { transform: translateY(-1px); }
.anc-header .anc-header-logo img {
  display: block;
  /* v2.13.61: logo is now the sole header element \u2014 bump from 56px to 72px
     so it carries the header on its own. Width capped at 360px so it still
     wraps cleanly on mobile (mobile rule overrides below). */
  height: 72px;
  width: auto;
  max-width: 360px;
  /* Subtle saturation lift on the brand-teal A icon so it pops on white */
  filter: drop-shadow(0 1px 2px rgba(6, 54, 58, 0.08));
}
.anc-header .anc-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* let title truncate gracefully on narrow screens */
  border-left: 1px solid rgba(6, 54, 58, 0.18);
  padding-left: 22px;
}
.anc-header .anc-header-title {
  margin: 0;
  font-family: var(--anc-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--anc-dark-teal);
  line-height: 1.15;
}
.anc-header .anc-header-tag {
  margin: 0;
  font-family: var(--anc-font-body, inherit);
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: var(--anc-dark-teal);
  opacity: 0.70;
  line-height: 1.35;
}
.anc-header .anc-header-eyebrow {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(212, 165, 55, 0.18);
  color: #8C6B14;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

@media (max-width: 540px) {
  .anc-header {
    padding: 14px 16px 12px;
    gap: 14px;
  }
  /* v2.13.61: mobile logo size also bumped (sole header element). */
  .anc-header .anc-header-logo img { height: 56px; max-width: 80vw; }
}

/* Hide the legacy site-header inside pages that opt-in to .anc-header by
   adding the attribute  data-anc-header="on"  to <body>. */
body[data-anc-header="on"] > header.site-header,
body[data-anc-header="on"] > .site-header { display: none !important; }

/* ----------------------------------------------------------------------------
   3. ANC CARD PATTERNS
   ----------------------------------------------------------------------------
   Six card archetypes from the splash-page guide. Pages can opt-in by adding
   the appropriate class to a wrapper div. They DO NOT auto-restyle existing
   .card / .intro-card markup — that's intentional, to avoid layout regressions.
   ---------------------------------------------------------------------------- */

/* 3.1 Hero card — large-format dark gradient with gold accent rule */
.anc-hero {
  background: var(--anc-grad-hero);
  color: #fff;
  border-radius: var(--anc-r-lg);
  padding: 36px 32px;
  margin: 0 auto 24px;
  position: relative;
  box-shadow: var(--anc-shadow-lg);
  overflow: hidden;
}
.anc-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--anc-gold) 30%,
                                     var(--anc-gold) 70%, transparent 100%);
}
.anc-hero h1, .anc-hero h2 {
  font-family: var(--anc-font-display);
  margin: 0 0 12px;
  color: #fff;
  letter-spacing: 0.2px;
}
.anc-hero p { color: rgba(255,255,255,0.92); margin: 0 0 8px; line-height: 1.55; }

/* 3.2 Highlight panel — warm gradient w/ gold left border */
.anc-highlight {
  background: var(--anc-grad-soft);
  border-left: 5px solid var(--anc-gold);
  border-radius: var(--anc-r);
  padding: 22px 24px;
  margin: 0 0 18px;
  box-shadow: var(--anc-shadow-sm);
}
.anc-highlight h3 {
  margin: 0 0 8px;
  color: var(--anc-dark-teal);
  font-family: var(--anc-font-display);
  font-size: 18px;
}
.anc-highlight p { color: var(--anc-ink); margin: 0; line-height: 1.55; }

/* 3.3 Outlined authority card — white with thick teal border */
.anc-authority {
  background: var(--anc-paper);
  border: 2px solid var(--anc-dark-teal);
  border-radius: var(--anc-r);
  padding: 22px 24px;
  margin: 0 0 18px;
  position: relative;
  box-shadow: var(--anc-shadow);
}
.anc-authority::after {
  content: "";
  position: absolute; bottom: -2px; left: 24px; right: 24px; height: 3px;
  background: var(--anc-gold);
}
.anc-authority h3 {
  margin: 0 0 8px;
  color: var(--anc-dark-teal);
  font-family: var(--anc-font-display);
  font-size: 18px;
}

/* 3.4 Step card — numbered circle + body */
.anc-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--anc-paper);
  border-radius: var(--anc-r);
  padding: 18px 22px;
  margin: 0 0 14px;
  box-shadow: var(--anc-shadow-sm);
  border: 1px solid var(--anc-line-soft);
}
.anc-step-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--anc-grad-dark);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--anc-font-display);
  font-size: 20px; font-weight: 700;
  box-shadow: var(--anc-shadow-sm);
}
.anc-step-body h4 {
  margin: 0 0 4px;
  color: var(--anc-dark-teal);
  font-size: 16px; font-weight: 700;
}
.anc-step-body p { margin: 0; color: var(--anc-ink-soft); line-height: 1.5; }

/* 3.5 Feature card — light card with icon area + heading + small text */
.anc-feature {
  background: var(--anc-paper);
  border-radius: var(--anc-r);
  padding: 22px;
  border: 1px solid var(--anc-line-soft);
  box-shadow: var(--anc-shadow-sm);
}
.anc-feature h4 {
  margin: 0 0 6px;
  color: var(--anc-dark-teal);
  font-size: 15px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.anc-feature p { margin: 0; color: var(--anc-ink-soft); line-height: 1.55; }

/* 3.6 Founder note — italic warm-tone aside */
.anc-founder {
  background: var(--anc-grad-soft);
  border-radius: var(--anc-r);
  padding: 20px 24px;
  margin: 18px 0;
  font-style: italic;
  color: var(--anc-ink);
  border-top: 1px solid var(--anc-line-soft);
  border-bottom: 1px solid var(--anc-line-soft);
}
.anc-founder b { font-style: normal; color: var(--anc-dark-teal); }

/* ----------------------------------------------------------------------------
   4. REUSABLE VISUAL ELEMENTS
   ---------------------------------------------------------------------------- */

/* 4.1 Eyebrow / kicker */
.anc-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--anc-gold);
  margin: 0 0 6px;
}

/* 4.2 Inline numbered circle */
.anc-num {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--anc-grad-dark);
  color: #fff;
  font-size: 12px; font-weight: 700;
  margin-right: 6px;
  vertical-align: -3px;
}

/* 4.3 Checkmark bullet */
.anc-check::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  width: 18px; height: 18px;
  line-height: 18px;
  text-align: center;
  background: var(--anc-mid-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 0;
}

/* 4.4 Arrow bullet */
.anc-arrow::before {
  content: "→";
  display: inline-block;
  margin-right: 8px;
  color: var(--anc-gold);
  font-weight: 700;
}

/* 4.5 Section divider */
.anc-divider {
  width: 64px;
  height: 3px;
  background: var(--anc-gold);
  border: 0;
  margin: 18px auto;
}

/* 4.6 Pill badge */
.anc-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--anc-grad-soft);
  color: var(--anc-dark-teal);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(6, 54, 58, 0.15);
}

/* 4.7 CTA button (gold) */
.anc-btn-gold {
  display: inline-block;
  padding: 12px 26px;
  background: var(--anc-gold);
  color: var(--anc-dark-teal);
  border: 0;
  border-radius: var(--anc-r-sm);
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--anc-shadow-gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.anc-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,165,55,0.40); }
.anc-btn-gold:active { transform: translateY(0); }

/* 4.8 CTA button (dark teal) */
.anc-btn-teal {
  display: inline-block;
  padding: 12px 26px;
  background: var(--anc-grad-dark);
  color: #fff;
  border: 0;
  border-radius: var(--anc-r-sm);
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--anc-shadow);
  transition: transform .15s ease;
}
.anc-btn-teal:hover { transform: translateY(-1px); }

/* ----------------------------------------------------------------------------
   5. PAGE-LEVEL TWEAKS (when body[data-anc-header="on"])
   ---------------------------------------------------------------------------- */
body[data-anc-header="on"] {
  background: var(--anc-cream);
}

/* Re-color page-level h1/h2 to dark teal where they appear in plain card flow */
body[data-anc-header="on"] h1,
body[data-anc-header="on"] .intro-card h2,
body[data-anc-header="on"] fieldset > legend {
  color: var(--anc-dark-teal);
}

/* Make the existing intake .intro-card use the highlight pattern look-and-feel */
body[data-anc-header="on"] .intro-card {
  border-left-color: var(--anc-gold);
  background: var(--anc-grad-soft);
  box-shadow: var(--anc-shadow-sm);
}

/* Make output.html .athlete-strip use the highlight palette */
body[data-anc-header="on"] .athlete-strip {
  background: var(--anc-grad-soft);
  border-left: 4px solid var(--anc-gold);
}

/* Give output.html totals tiles the dark-teal accent */
body[data-anc-header="on"] .total-tile { background: var(--anc-grad-soft); }
body[data-anc-header="on"] .total-tile .label { color: var(--anc-dark-teal); }
body[data-anc-header="on"] .total-tile .value { color: var(--anc-dark-teal); }

/* fieldset legends in intake — italic display font */
body[data-anc-header="on"] fieldset legend {
  font-family: var(--anc-font-display);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ----------------------------------------------------------------------------
   6. PRINT
   ---------------------------------------------------------------------------- */
@media print {
  /* v2.13.6 audit fix: header is now white-on-white for screen. For print we
     keep it white too (saves ink, looks clean). The gold border-bottom prints
     so the page still feels branded. */
  .anc-header { background: #FFFFFF !important;
                color: var(--anc-dark-teal) !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact; }
  .anc-header .anc-header-tag { color: var(--anc-dark-teal) !important; }
  .anc-hero  { background: var(--anc-dark-teal) !important; }
  .anc-btn-gold, .anc-btn-teal { display: none !important; }
}

/* ----------------------------------------------------------------------------
   7. INTAKE FORM POLISH (v2.13.6 audit fixes — 2026-05-10)

   Problems found during production audit:
     - "Smart-fill from notes" button (.btn.ghost) had NO CSS — fell back to
       browser default chrome (ugly rectangular outline).
     - "Build my plan" submit button was below the fold and visually subtle;
       users reported "there is no submit button".
     - No visual cue from the textarea down to the submit.
     - Chat FAB on /output is hidden until plan loads — leaves users stranded
       on error/loading states with no way to ask for help.

   Fix: brand-aligned button styles + a much more prominent submit CTA + a
   "Plan Assistant" rescue button that's always visible on /output.
   ---------------------------------------------------------------------------- */

/* 7.1 Smart-fill button (.btn.ghost on intake) — gold-outline ANC pill
       v2.13.6 G10 BUGFIX (2026-05-10): scope to intake-only via [data-mode="full"]
       so this rule does NOT bleed onto output.html, where .btn.ghost is reused
       for "Print this plan", "Email this plan", "Edit intake", "Reload", etc.
       Without scoping, the sparkle pseudo + gold-pill chrome wrecked those
       buttons (and the "Edit intake" text became invisible because §7.2 below
       was forcing color:#fff !important on every .actions .btn). */
body[data-anc-header="on"][data-mode="full"] .btn.ghost,
body[data-anc-header="on"][data-mode="full"] button.ghost {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E7 100%);
  color: var(--anc-dark-teal);
  border: 2px solid var(--anc-gold);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(212, 165, 55, 0.20);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
/* Sparkle pseudo only on the intake smart-fill button itself, never elsewhere. */
body[data-anc-header="on"][data-mode="full"] #btn-smart-fill::before,
body[data-anc-header="on"][data-mode="full"] button.ghost.smart-fill::before {
  content: "✨";
  font-size: 14px;
  margin-right: 2px;
}
body[data-anc-header="on"][data-mode="full"] .btn.ghost:hover,
body[data-anc-header="on"][data-mode="full"] button.ghost:hover {
  background: linear-gradient(135deg, var(--anc-gold) 0%, #E5B84A 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 165, 55, 0.40);
}
body[data-anc-header="on"][data-mode="full"] .btn.ghost:active,
body[data-anc-header="on"][data-mode="full"] button.ghost:active { transform: translateY(0); }
body[data-anc-header="on"][data-mode="full"] .btn.ghost:disabled,
body[data-anc-header="on"][data-mode="full"] button.ghost:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none;
}

/* 7.2 Submit "Build my plan" — make it unmissable.
       Inline styles in intake.html already make it sticky-bottom; here we
       give it the gold gradient + bigger pad + arrow so users can't miss it.

       v2.13.6 G10 BUGFIX (2026-05-10): scoped to intake-page only via
       [data-mode="full"] AND the actions bar's actual id (#actions-bar).
       Previously these rules bled onto /output.html's <div class="actions">
       inside .refine-callout, force-coloring the "Edit intake" link white
       on a white-pill background — invisible. The :first-of-type / id-match
       prevents bleed even if a future intake re-uses generic .actions
       elsewhere on the page. */
body[data-anc-header="on"][data-mode="full"] #actions-bar,
body[data-anc-header="on"][data-mode="full"] .actions#actions-bar {
  background: linear-gradient(135deg, #FFFFFF 0%, #FBF6E8 100%);
  border: 2px solid var(--anc-gold);
  box-shadow: 0 -4px 24px rgba(6, 54, 58, 0.18), 0 6px 24px rgba(212, 165, 55, 0.20);
  position: sticky;
  bottom: 12px;
  z-index: 50;
}
body[data-anc-header="on"][data-mode="full"] #actions-bar .left {
  color: var(--anc-dark-teal);
  font-weight: 600;
}
body[data-anc-header="on"][data-mode="full"] #actions-bar .btn,
body[data-anc-header="on"][data-mode="full"] #submit-btn {
  background: linear-gradient(135deg, var(--anc-gold) 0%, #C8941E 100%);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: 16px 36px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(212, 165, 55, 0.45);
  transition: transform 0.12s, box-shadow 0.12s;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body[data-anc-header="on"][data-mode="full"] #actions-bar .btn::after,
body[data-anc-header="on"][data-mode="full"] #submit-btn::after {
  content: "→";
  font-size: 20px;
  font-weight: 800;
  transition: transform 0.18s;
}
body[data-anc-header="on"][data-mode="full"] #actions-bar .btn:hover,
body[data-anc-header="on"][data-mode="full"] #submit-btn:hover {
  background: linear-gradient(135deg, #E5B84A 0%, #B0820F 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212, 165, 55, 0.55);
}
body[data-anc-header="on"][data-mode="full"] #actions-bar .btn:hover::after,
body[data-anc-header="on"][data-mode="full"] #submit-btn:hover::after { transform: translateX(4px); }
body[data-anc-header="on"][data-mode="full"] #actions-bar .btn:disabled,
body[data-anc-header="on"][data-mode="full"] #submit-btn:disabled {
  background: #B6BFC2 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 7.2b Output-page Edit-intake button — defensive override.
       The "Edit intake" link sits on the teal-gradient .refine-callout.
       output.html's inline rule (.refine-callout button, .refine-callout a.btn)
       already styles it as a small white pill with teal text. We just block
       any rogue ::before pseudo from §7.1 so no accent character hides
       behind the text. */
.refine-callout .btn.ghost::before,
.refine-callout a.btn::before { content: none !important; }
.refine-callout .btn.ghost,
.refine-callout a.btn {
  /* Re-assert legible defaults so any stray cascade can't break this button. */
  color: var(--teal, #0a7d7d) !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  font-weight: 600;
}
.refine-callout .btn.ghost:hover,
.refine-callout a.btn:hover {
  background: var(--teal-light, #d8efef) !important;
}

/* 7.3 Confirm fieldset — make it visually pop so the checkbox + button feel
       like one continuous "ready to launch" affordance. */
body[data-anc-header="on"] #confirm-fieldset {
  background: linear-gradient(135deg, #FFFFFF 0%, #F4FBFB 100%);
  border: 2px solid var(--anc-mid-teal);
  border-radius: 12px;
  padding: 18px 22px !important;
  margin-top: 24px;
  box-shadow: 0 2px 12px rgba(10, 77, 78, 0.10);
}
body[data-anc-header="on"] #confirm-fieldset legend {
  color: var(--anc-dark-teal);
  background: #fff;
  padding: 4px 12px;
  border: 2px solid var(--anc-mid-teal);
  border-radius: 999px;
  font-size: 14px;
}

/* 7.4 Floating "Jump to submit" pill — appears on intake when the sticky
       actions bar is off-screen. Pure CSS would need :has() + scroll, so the
       class is toggled by JS in intake.html (see bottom of body init script).
       Style here so it's brand-aligned. */
.anc-jump-submit {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 60;
  background: linear-gradient(135deg, var(--anc-gold) 0%, #C8941E 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(212, 165, 55, 0.50);
  display: none;
  align-items: center;
  gap: 8px;
  animation: ancFadeIn 0.25s ease-out;
}
.anc-jump-submit.visible { display: inline-flex; }
.anc-jump-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(212, 165, 55, 0.60); }
.anc-jump-submit::after { content: "↓"; font-weight: 800; }
@keyframes ancFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 7.5 Output: chat FAB visibility upgrade. Worker spec: only shown after a
       plan loads. We don't override that; we just brand-align the FAB so it
       reads as "Plan Assistant — chat with us" not as a generic blue blob. */
body[data-anc-header="on"] .chat-fab {
  background: linear-gradient(135deg, var(--anc-gold) 0%, #C8941E 100%) !important;
  color: #fff !important;
  border: 2px solid #fff;
  box-shadow: 0 8px 28px rgba(212, 165, 55, 0.55), 0 2px 6px rgba(6, 54, 58, 0.25);
  font-weight: 800;
  letter-spacing: 0.3px;
}
body[data-anc-header="on"] .chat-fab:hover {
  background: linear-gradient(135deg, #E5B84A 0%, #B0820F 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 165, 55, 0.65), 0 2px 6px rgba(6, 54, 58, 0.30);
}
body[data-anc-header="on"] .chat-fab .chat-fab-badge {
  background: var(--anc-red);
  color: #fff;
  border: 2px solid #fff;
}
body[data-anc-header="on"] .chat-fab-hint {
  border-left: 4px solid var(--anc-gold);
  box-shadow: 0 8px 28px rgba(6, 54, 58, 0.18);
}
body[data-anc-header="on"] .chat-fab-hint b { color: var(--anc-red); }

/* 7.6 Output: chat send button + drawer header — brand it. */
body[data-anc-header="on"] #chat-send {
  background: linear-gradient(135deg, var(--anc-gold) 0%, #C8941E 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(212, 165, 55, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
body[data-anc-header="on"] #chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212, 165, 55, 0.50);
}
body[data-anc-header="on"] .chat-drawer .chat-head {
  background: linear-gradient(135deg, var(--anc-dark-teal) 0%, var(--anc-mid-teal) 100%);
  color: #fff;
  border-bottom: 3px solid var(--anc-gold);
}

/* 7.7 Mobile: stack the actions bar so the gold submit gets full width. */
@media (max-width: 640px) {
  body[data-anc-header="on"] .actions {
    flex-direction: column;
    align-items: stretch;
  }
  body[data-anc-header="on"] .actions .left {
    text-align: center;
    margin-bottom: 4px;
  }
  body[data-anc-header="on"] .actions .btn,
  body[data-anc-header="on"] #submit-btn {
    width: 100%;
    justify-content: center;
  }
  .anc-jump-submit { right: 12px; bottom: 12px; }
}

/* ----------------------------------------------------------------------------
   8. SOFT-WARNING BANNER for missing required fields (v2.13.6 audit fix)

   When the user taps Build my plan with required fields empty, intake.html's
   validateForm() builds a list of every missing item and calls
   renderSoftWarning(). This is the brand-aligned visual treatment.

   Tone: coachy nudge, NOT a browser error popup. Soft red accent on the
   left edge (the brand "alert" color), cream-tint background so it doesn't
   feel hostile, gold-accent on hover for the jump links.
   ---------------------------------------------------------------------------- */

.anc-soft-warning {
  margin: 20px 0 26px;
  padding: 18px 22px 16px;
  background: linear-gradient(135deg, #FFF8F2 0%, #FBF1E8 100%);
  border-radius: 14px;
  border: 1px solid rgba(200, 54, 45, 0.20);
  border-left: 6px solid var(--anc-red, #C8362D);
  box-shadow: 0 6px 24px rgba(200, 54, 45, 0.10), 0 2px 6px rgba(6, 54, 58, 0.06);
  animation: ancSoftWarningSlide 0.32s ease-out;
}
@keyframes ancSoftWarningSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anc-soft-warning .anc-sw-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.anc-soft-warning .anc-sw-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--anc-red, #C8362D);
  color: #fff;
  font-family: var(--anc-font-display, "Playfair Display", Georgia, serif);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(200, 54, 45, 0.30);
}
.anc-soft-warning .anc-sw-title {
  font-family: var(--anc-font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--anc-dark-teal, #0B5E5D);
  margin-bottom: 2px;
  line-height: 1.25;
}
.anc-soft-warning .anc-sw-sub {
  font-size: 13.5px;
  color: var(--anc-dark-teal, #0B5E5D);
  opacity: 0.80;
  line-height: 1.45;
}
.anc-soft-warning .anc-sw-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--anc-dark-teal, #0B5E5D);
  opacity: 0.55;
  cursor: pointer;
  padding: 0 4px;
  transition: opacity .12s;
}
.anc-soft-warning .anc-sw-close:hover { opacity: 1; }
.anc-soft-warning .anc-sw-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.anc-soft-warning .anc-sw-list li { margin: 0; padding: 0; }
.anc-soft-warning .anc-sw-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(6, 54, 58, 0.12);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--anc-dark-teal, #0B5E5D);
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.anc-soft-warning .anc-sw-list a::after {
  content: "→";
  font-weight: 800;
  color: var(--anc-gold, #D4A537);
  transition: transform .18s;
}
.anc-soft-warning .anc-sw-list a:hover {
  border-color: var(--anc-gold, #D4A537);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E7 100%);
  box-shadow: 0 4px 14px rgba(212, 165, 55, 0.25);
  transform: translateY(-1px);
}
.anc-soft-warning .anc-sw-list a:hover::after { transform: translateX(4px); }
.anc-soft-warning .anc-sw-label { flex: 1; min-width: 0; }
.anc-soft-warning .anc-sw-reason {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--anc-red, #C8362D);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(200, 54, 45, 0.08);
  white-space: nowrap;
}

/* 8.1 Field-level red glow when has-err class is applied. Existing intake CSS
       sets a subtle red border; we add a soft outer glow so the eye is drawn
       to it after the user jumps from the banner. */
body[data-anc-header="on"] .field.has-err input,
body[data-anc-header="on"] .field.has-err select,
body[data-anc-header="on"] .field.has-err textarea {
  border-color: var(--anc-red, #C8362D) !important;
  box-shadow: 0 0 0 3px rgba(200, 54, 45, 0.15);
  animation: ancFieldFlash 0.6s ease-out;
}
@keyframes ancFieldFlash {
  0%   { box-shadow: 0 0 0 0   rgba(200, 54, 45, 0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(200, 54, 45, 0.00); }
  100% { box-shadow: 0 0 0 3px rgba(200, 54, 45, 0.15); }
}
body[data-anc-header="on"] fieldset.has-err {
  border-color: var(--anc-red, #C8362D) !important;
  box-shadow: 0 0 0 2px rgba(200, 54, 45, 0.10);
}

@media (max-width: 540px) {
  .anc-soft-warning { padding: 14px 16px 14px; border-radius: 12px; }
  .anc-soft-warning .anc-sw-list { grid-template-columns: 1fr; }
  .anc-soft-warning .anc-sw-title { font-size: 15.5px; }
  .anc-soft-warning .anc-sw-sub { font-size: 12.5px; }
}