/* ============================================================
   BridgeWell PR-D35E — Design polish layer.

   Additive on top of bridgewell.css. NEVER replaces existing
   tokens. The pre-D35E `--bw-blue` / `--bw-navy` / `--bw-slate`
   / `--bw-surface` / `--bw-border` palette stays the source of
   truth — this file maps semantic-role tokens onto them so
   future PRs (and external auditors) can read intent, not
   pigment.

   What this file does:
     1. Semantic token aliases for color / surface / type / shape
        / spacing / elevation / motion.
     2. A11y baseline — universal :focus-visible ring, skip link,
        prefers-reduced-motion override, larger mobile tap target
        on .btn-sm.
     3. Polish layer for navbar / footer / buttons / cards /
        marketing sections / Today Hub / Movement Hub.

   What this file does NOT do:
     - Override layout structure.
     - Change the Today Hub priority logic or Movement Hub IA.
     - Touch PR-D31 LCP image rules.
     - Introduce new colours outside the existing palette.

   Compliance: no new analytics calls, no third-party CDNs,
   no JavaScript, no font additions. CSS only.
   ============================================================ */

/* ── Semantic token aliases ────────────────────────────────── */
:root {
  /* Ink + muted text */
  --bw-color-ink:           var(--bw-navy);
  --bw-color-ink-soft:      var(--bw-navy-mid);
  --bw-color-muted:         var(--bw-slate);
  --bw-color-faint:         var(--bw-muted);

  /* Surfaces */
  --bw-color-surface:       var(--bw-surface);
  --bw-color-surface-soft:  var(--bw-surface-d);
  --bw-color-card:          var(--bw-white);
  --bw-color-border:        var(--bw-border);
  --bw-color-border-strong: #cbd5e1;

  /* Action palette */
  --bw-color-primary:        var(--bw-blue);
  --bw-color-primary-hover:  var(--bw-blue-dark);
  --bw-color-primary-soft:   var(--bw-blue-light);
  --bw-color-accent:         var(--bw-teal);
  --bw-color-accent-soft:    var(--bw-teal-light);

  /* Status (soft tints — use for backgrounds, not text alone) */
  --bw-color-success-soft:   rgba(34, 197, 94, 0.10);
  --bw-color-warning-soft:   rgba(245, 158, 11, 0.10);
  --bw-color-danger-soft:    rgba(239, 68, 68, 0.10);
  --bw-color-info-soft:      rgba(14, 165, 233, 0.08);

  /* Focus ring — WCAG AA contrast against white + surface */
  --bw-color-focus:          #2563eb;
  --bw-focus-ring:           0 0 0 3px rgba(37, 99, 235, 0.35);
  --bw-focus-ring-offset:    2px;

  /* Typography scale */
  --bw-font-display:         var(--bw-font);
  --bw-font-body:            var(--bw-font);
  --bw-text-xs:              0.78rem;
  --bw-text-sm:              0.875rem;
  --bw-text-base:            1rem;
  --bw-text-md:              1.125rem;
  --bw-text-lg:              1.25rem;
  --bw-text-xl:              1.5rem;
  --bw-text-2xl:             1.875rem;
  --bw-text-display:         clamp(2rem, 5vw, 3.25rem);
  --bw-leading-tight:        1.25;
  --bw-leading-snug:         1.45;
  --bw-leading-normal:       1.6;
  --bw-leading-relaxed:      1.75;
  --bw-weight-regular:       400;
  --bw-weight-medium:        500;
  --bw-weight-semi:          600;
  --bw-weight-bold:          700;
  --bw-tracking-tight:       -0.01em;
  --bw-tracking-snug:        0;
  --bw-tracking-wide:        0.05em;

  /* Spacing scale (use these as the canonical scale; legacy
     bare rems in older templates continue to work) */
  --bw-space-1:              0.25rem;
  --bw-space-2:              0.5rem;
  --bw-space-3:              0.75rem;
  --bw-space-4:              1rem;
  --bw-space-5:              1.25rem;
  --bw-space-6:              1.5rem;
  --bw-space-8:              2rem;
  --bw-space-10:             2.5rem;
  --bw-space-12:             3rem;
  --bw-space-16:             4rem;
  --bw-section-pad-y:        clamp(3rem, 6vw, 5rem);
  --bw-card-pad:             1.5rem;
  --bw-card-pad-tight:       1.125rem;
  --bw-grid-gap:             1rem;

  /* Shape */
  --bw-radius-xs:            0.25rem;
  --bw-radius-md:            var(--bw-radius);
  --bw-radius-lg:            1rem;
  --bw-radius-xl:            1.25rem;

  /* Elevation */
  --bw-elev-0:               none;
  --bw-elev-1:               var(--bw-shadow);
  --bw-elev-2:               var(--bw-shadow-md);
  --bw-elev-3:               var(--bw-shadow-lg);

  /* Motion */
  --bw-motion-fast:          120ms;
  --bw-motion-medium:        220ms;
  --bw-motion-slow:          360ms;
  --bw-easing-standard:      cubic-bezier(.2, 0, 0, 1);
  --bw-easing-emphasis:      cubic-bezier(.2, 0, .2, 1);
}

/* ── Reduced-motion override ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skip-to-content link ──────────────────────────────────── */
.bw-skip-link {
  position: absolute;
  left: -10000px;
  top: var(--bw-space-2);
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: var(--bw-color-ink);
  color: #fff;
  padding: var(--bw-space-3) var(--bw-space-4);
  border-radius: var(--bw-radius-md);
  font-weight: var(--bw-weight-semi);
  font-size: var(--bw-text-sm);
  z-index: 9999;
  text-decoration: none;
}
.bw-skip-link:focus,
.bw-skip-link:focus-visible {
  left: var(--bw-space-3);
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 3px;
}

/* ── Universal focus-visible baseline ──────────────────────── */
:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
}
.btn:focus-visible,
.bw-btn:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
  box-shadow: var(--bw-focus-ring);
}
a:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: var(--bw-focus-ring-offset);
  border-radius: var(--bw-radius-xs);
}

/* ── Button polish ─────────────────────────────────────────── */
/* Minimum mobile tap target — WCAG 2.5.5 recommendation is 44px;
   .btn-sm was 36px-ish, so we raise its minimum and tighten
   alignment without changing visual weight. */
.btn {
  min-height: 40px;
  transition: background var(--bw-motion-medium) var(--bw-easing-standard),
              border-color var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-emphasis),
              box-shadow var(--bw-motion-medium) var(--bw-easing-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 48px; }

/* Primary button — soft elevation on hover so the click affordance
   stays calm. */
.btn-primary:hover { box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22); }
.btn-outline:hover { box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15); }

/* ── Card polish ───────────────────────────────────────────── */
.card,
.bw-card {
  transition: box-shadow var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-standard),
              border-color var(--bw-motion-medium) var(--bw-easing-standard);
}
.card:hover,
.bw-card:hover { transform: translateY(-1px); }
.card:focus-within,
.bw-card:focus-within {
  border-color: var(--bw-color-primary);
  box-shadow: var(--bw-focus-ring);
}

/* ── Navbar polish ─────────────────────────────────────────── */
.navbar {
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  background: rgba(255, 255, 255, 0.92);
}
.navbar-nav a {
  position: relative;
  font-weight: var(--bw-weight-medium);
}
.navbar-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: -2px;
  height: 2px;
  background: var(--bw-color-primary);
  border-radius: var(--bw-radius-pill);
}
.navbar-actions .btn { min-height: 40px; }
.navbar-toggle:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
  border-radius: var(--bw-radius-sm);
}

/* Mobile drawer — bigger tap targets + clearer dividers. */
.mobile-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ── Footer polish ─────────────────────────────────────────── */
.bw-footer,
.footer,
footer {
  font-size: var(--bw-text-sm);
}
.footer a:focus-visible,
.bw-footer a:focus-visible,
footer a:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
}

/* ── Marketing section polish ──────────────────────────────── */
.section,
.section-sm {
  scroll-margin-top: 80px;
}
.section-header h2 {
  letter-spacing: var(--bw-tracking-tight);
}
.section-header .lead {
  color: var(--bw-color-muted);
}
/* Subtle alternating-tint surface so adjacent sections separate
   visually without harsh divider lines. */
.section.bg-surface,
.section-sm.bg-surface {
  background: var(--bw-color-surface);
}

/* ── Pricing card polish ───────────────────────────────────── */
.bw-plan-card,
.plan-card,
[data-bw-block="plan-card"] {
  border-radius: var(--bw-radius-lg);
}

/* ── Movement pillar (public) polish ───────────────────────── */
[data-bw-block="movement-pillar"] {
  border-top: 1px solid var(--bw-color-border);
  border-bottom: 1px solid var(--bw-color-border);
}
[data-bw-block="movement-pillar-cards"] .card {
  border-radius: var(--bw-radius-lg);
}

/* ── Today Hub polish ──────────────────────────────────────── */
[data-bw-block="today-hub"] {
  margin-bottom: var(--bw-space-8);
}
[data-bw-block="today-hub"] [data-card-type] {
  border-radius: var(--bw-radius-lg);
}
/* Today Hub hero card — first meaningful card on dashboard.
   Use a soft primary tint so it visibly leads without shouting. */
[data-bw-block="today-hub"] > [data-card-type]:first-child,
[data-bw-block="today-hub"] [data-card-type="today_hub_hero"],
[data-bw-block="today-hub"] .bw-today-hub-hero {
  background: linear-gradient(135deg,
              rgba(14, 165, 233, 0.05),
              rgba(20, 184, 166, 0.04));
  border: 1px solid rgba(14, 165, 233, 0.25);
  box-shadow: var(--bw-elev-1);
}
[data-bw-block="today-hub"] [data-card-type="card-secure-portal"] {
  border-left: 3px solid var(--bw-color-primary);
}
[data-bw-block="today-hub"] [data-card-type] h3,
[data-bw-block="today-hub"] [data-card-type] h4 {
  letter-spacing: var(--bw-tracking-tight);
}

/* ── Movement Hub polish ───────────────────────────────────── */
[data-bw-block="movement-hub"] .bw-movement-card {
  border-radius: var(--bw-radius-lg);
}
[data-bw-block="movement-hub"] .bw-movement-card--primary {
  box-shadow: var(--bw-elev-1);
}
[data-bw-block="movement-paths-grid"] .bw-action-card {
  border-radius: var(--bw-radius-lg);
  min-height: 110px;
  transition: border-color var(--bw-motion-medium) var(--bw-easing-standard),
              box-shadow var(--bw-motion-medium) var(--bw-easing-standard),
              transform var(--bw-motion-fast) var(--bw-easing-emphasis);
}
[data-bw-block="movement-paths-grid"] .bw-action-card:hover {
  border-color: var(--bw-color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
}
[data-bw-block="movement-paths-grid"] .bw-action-card:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
}
[data-bw-block="movement-safety"] .bw-card {
  border-radius: var(--bw-radius-lg);
}

/* ── CareValidate boundary card polish ─────────────────────── */
[data-bw-block="carevalidate-boundary"] {
  border-radius: var(--bw-radius-lg);
}
[data-bw-block="carevalidate-boundary"] h2 {
  letter-spacing: var(--bw-tracking-tight);
}

/* ── "What happens after I pay?" component polish ──────────── */
[data-bw-block="what-happens-after-pay"],
.bw-what-happens-after-pay {
  border-radius: var(--bw-radius-lg);
}

/* ── FAQ polish ────────────────────────────────────────────── */
details.bw-faq-item,
.bw-faq-list details,
.faq-item {
  border: 1px solid var(--bw-color-border);
  border-radius: var(--bw-radius-md);
  padding: var(--bw-space-3) var(--bw-space-4);
  margin-bottom: var(--bw-space-3);
  background: var(--bw-color-card);
}
details.bw-faq-item summary,
.bw-faq-list details summary,
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: var(--bw-weight-semi);
  color: var(--bw-color-ink);
  padding: var(--bw-space-2) 0;
}
details.bw-faq-item summary::-webkit-details-marker,
.bw-faq-list details summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }
details.bw-faq-item summary:focus-visible,
.bw-faq-list details summary:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid var(--bw-color-focus);
  outline-offset: 2px;
  border-radius: var(--bw-radius-sm);
}

/* ── Mobile spacing tweaks ─────────────────────────────────── */
@media (max-width: 720px) {
  .section,
  .section-sm {
    padding-top: var(--bw-section-pad-y);
    padding-bottom: var(--bw-section-pad-y);
  }
  .container,
  .container-sm {
    padding-left: var(--bw-space-4);
    padding-right: var(--bw-space-4);
  }
  /* Make stacked CTAs full-width on small screens so taps don't
     miss. The pre-D35E `.flex.gap-2` rows kept inline-flex which
     made buttons too narrow on 360-class viewports. */
  .hero-cta .btn,
  [data-bw-block="hero-cta"] .btn,
  .text-center .btn.btn-lg {
    width: 100%;
    max-width: 360px;
  }
}

/* ── Print polish (so save-to-PDF receipts stay clean) ─────── */
@media print {
  .bw-skip-link,
  .navbar,
  .navbar-toggle,
  .mobile-menu,
  .bw-cookie-banner,
  .cookie-banner,
  [data-bw-block="hero-cta"],
  [data-bw-block="member-bottom-nav"] { display: none !important; }
  body { background: #fff !important; color: #000; }
}

/* ============================================================
   PR-D35F — Mobile member bottom navigation.

   Fixed to the bottom of the viewport on small screens
   (≤720px), hidden on desktop. Rendered only when base.html
   sees an authenticated non-staff user.

   The five slots (Today / Movement / Progress / Support /
   Account) are equal-width grid cells with a 44px+ min tap
   height per WCAG 2.5.5. Active slot is signalled by
   color + a 2px underline (NOT color alone). All transitions
   collapse under the reduced-motion override defined above.
   ============================================================ */
[data-bw-block="member-bottom-nav"] {
  display: none;
}
@media (max-width: 720px) {
  [data-bw-block="member-bottom-nav"] {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-top: 1px solid var(--bw-color-border);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.05);
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS PWAs and Safari respect env() — pads above the home bar. */
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__item {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px 8px;
    color: var(--bw-color-muted);
    text-decoration: none;
    font-size: var(--bw-text-xs);
    font-weight: var(--bw-weight-medium);
    line-height: 1.2;
    transition: color var(--bw-motion-medium) var(--bw-easing-standard);
    border-top: 2px solid transparent;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__icon {
    font-size: 18px;
    line-height: 1;
    color: var(--bw-color-muted);
    transition: color var(--bw-motion-medium) var(--bw-easing-standard);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:hover {
    color: var(--bw-color-primary);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:hover .bw-bottom-nav__icon {
    color: var(--bw-color-primary);
  }
  /* Active state — color + a top-border underline (non-color cue). */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link[aria-current="page"] {
    color: var(--bw-color-primary);
    border-top-color: var(--bw-color-primary);
    font-weight: var(--bw-weight-semi);
  }
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link[aria-current="page"] .bw-bottom-nav__icon {
    color: var(--bw-color-primary);
  }
  /* Focus ring matches the global a11y baseline. */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link:focus-visible {
    outline: 3px solid var(--bw-color-focus);
    outline-offset: -2px;
    border-radius: var(--bw-radius-xs);
  }
  /* CareValidate clarifier — present but quiet. Hidden visually
     on very small screens but kept in the DOM so screen readers
     announce it. */
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__note {
    margin: 0;
    padding: 6px 12px env(safe-area-inset-bottom);
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--bw-color-faint);
    background: var(--bw-color-surface-soft);
    border-top: 1px solid var(--bw-color-border);
    text-align: center;
  }
  /* Push main content up so the fixed nav (~56px + safe-area)
     never hides CTAs at the bottom of the page. */
  #bw-main-content,
  .bw-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  /* The cookie banner stacks ABOVE the bottom nav so it never
     traps the consent flow. */
  .bw-cookie-banner,
  .cookie-banner {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* Reduced-motion safety — the existing global rule already
   collapses transitions, but make the intent explicit here. */
@media (prefers-reduced-motion: reduce) {
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__link,
  [data-bw-block="member-bottom-nav"] .bw-bottom-nav__icon {
    transition: none !important;
  }
}