/* Self-hosted Poppins (latin subset) — replaces the Google Fonts <link> so no
   visitor IP is sent to Google's servers (GDPR). Files in assets/fonts/. Only the
   weights actually referenced download. font-display:swap avoids invisible text. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins-900.woff2') format('woff2');}

/* ============================================================
 * GLOBAL DESIGN TOKENS — single source of truth for the site.
 *
 * Per the "Chat IS the admin UI" principle: any global visual change
 * is done by editing tokens HERE, not by touching individual pages.
 * Page-specific CSS must reference these tokens via var() — never
 * hardcode hex / font names / sizes / radii that we'd want to change
 * globally later.
 * ============================================================ */
:root {
  /* Member area is a light/cream theme — declare it so a browser in OS dark mode
     doesn't paint form-control cursors (the text caret + the mouse I-beam) white
     on our light input/textarea fields, where they'd be invisible. */
  color-scheme: light;

  /* ---- Typography ---- */
  --font-body:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Heading size scale (clamps for fluid type). h1 = page hero; h2 = section. */
  --h1-size:     clamp(28px, 4vw,   38px);
  --h2-size:     clamp(26px, 3.6vw, 34px);
  --h3-size:     clamp(20px, 2.6vw, 26px);
  --h4-size:     clamp(16px, 2vw,   20px);
  --eyebrow-size: 11px;
  --eyebrow-tracking: 0.22em;

  /* ---- Core palette ----
     The seven tokens the admin shell shadows (see admin.css: it re-points
     --text/--muted/--accent/--bronze/--bronze-dk/--line/--bg-alt at its own
     neutral values so member components dropped into /admin/ render neutral)
     carry a --bh-* twin holding the member value. A bare admin column — an
     embedded surface that is meant to stay member-branded, e.g. the coach
     profile editor and the coach session card — restores itself from these.
     Defined once here; admin.css only references them (Rule #9). */
  --bh-text:     #000000;
  --bh-muted:    #555;
  --bh-accent:   #019ae0;
  --bh-bronze:   #a87c50;
  --bh-bronze-dk:#6b4f3a;
  --bh-line:     #e6e2db;
  --bh-bg-alt:   #faf6ef;

  --text:        var(--bh-text);
  --text-dark:   #0f0d12;             /* near-black for compact UI text */
  --muted:       var(--bh-muted);
  --help:        #757575;
  --accent:      var(--bh-accent);    /* cyan from logo */
  --bronze:      var(--bh-bronze);    /* primary brand / CTA */
  --bronze-dk:   var(--bh-bronze-dk); /* hover state of bronze */
  --ink:         #141414;             /* brand 2nd highlight — black (email banners), dark bands, secondary buttons */
  --line:        var(--bh-line);      /* dividers */
  --card:        #ffffff;
  --bg:          #ffffff;             /* page bg */
  --bg-alt:      var(--bh-bg-alt);    /* cream alt section bg */
  --bg-warm:     #f9f6f1;             /* warm canvas — shared logged-in member-page background (dashboard match) */
  --bg-cream:    var(--bg-alt);       /* alias */
  --dark-bg:     #2a1d12;             /* dark leather sections */
  --dark-bg-bold:#1c1410;             /* hero dark */
  --cream:       #F9F2E9;             /* text on dark sections */
  --cream-soft:  #f0e3cd;             /* warm muted on dark */
  --popover-bg:  #23262b;             /* charcoal panel — Pulse + badge info popovers */

  /* ---- Accordion (site standard) ----
     Hover overlay for clickable accordion rows/headers on white surfaces.
     Opaque blue at 7% — same opacity as the join "Why This Works" red
     click-overlay. Apply as: background: linear-gradient(var(--acc-hover),
     var(--acc-hover)), #fff;  (blue tint painted over a white base, so the
     row stays white and just picks up a faint blue wash on hover).
     The dark sales "Voices/Stories" accordion (.join-story) is the documented
     exception and intentionally does NOT use this. */
  --acc-hover:   rgba(1, 154, 224, 0.07);

  /* ---- Status / feedback ---- */
  --ok-bg:       #e6f4ea;
  --ok-border:   #c4dfc4;
  --ok-text:     #1f6a2e;

  --warn-bg:     #faf2e3;
  --warn-border: #efddb1;
  --warn-text:   #6e4a00;

  --err-bg:      #fdecec;
  --err-border:  #f5b3b3;
  --err-text:    #8a1f1f;

  --info-bg:     #e3f2fd;
  --info-border: #b3e5fc;
  --info-text:   #014a7a;

  /* ---- Buttons ---- */
  --btn-hover-bg:    #000000;          /* universal "hover to black" */
  --btn-hover-text:  #ffffff;
  --btn-height-sm:   40px;
  --btn-height-md:   46px;
  --btn-height-lg:   52px;
  --btn-radius:      6px;
  --btn-tracking:    0.06em;

  /* ---- Cards / panels ---- */
  --card-radius:     12px;
  --card-radius-lg:  14px;
  --card-pad:        clamp(24px, 4vw, 36px);

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 10px 28px rgba(0,0,0,.10);
  --shadow-lg:   0 24px 60px rgba(0,0,0,.16);
  --shadow-card: 0 18px 40px -18px rgba(0,0,0,.18), 0 4px 12px -4px rgba(0,0,0,.06);
  --shadow-panel:0 1px 2px rgba(20,20,20,.04), 0 16px 34px -20px rgba(43,30,18,.24);  /* THE working-page card lift: borderless white cards float on the beige canvas (2026-07-04 standard, from dashboard) */

  /* ---- Layout ---- */
  --radius:      8px;
  --nav-h:       72px;
  --max-w:       1140px;   /* THE single site content width. nav, footer, marketing
                              inners + .bh-wrap all resolve to this so every page shares
                              one left/right edge. Narrow reading shells (legal 760,
                              account forms 560) are the only intentional exceptions. */
  --max-w-narrow: 720px;
  --page-gutter:  24px;    /* single side gutter — nav / footer / marketing / .bh-wrap
                              all use this so edges line up exactly, not just widths. */

  /* ---- Motion ---- */
  --transition-fast:    .12s;
  --transition-default: .18s;
  --transition-slow:    .35s;
  --easing:             ease;

  /* ---- Focus / accessibility ---- */
  --focus-ring:       rgba(1,154,224,.35);
  --focus-ring-width: 3px;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* overscroll-behavior-y was `none` here to kill the elastic rubber-band bounce at
   the page ends. It also killed PULL-TO-REFRESH on Android — the browser only
   offers that gesture when the scroll root is `auto`; both `none` and `contain`
   suppress it — so on a phone the site could not be refreshed by pulling down,
   anywhere. Refreshing beats removing a bounce, so this is `auto` (owner's call,
   2026-07-27) and the rubber-band is back at the top and bottom of a page.
   The dark html bg is why that bounce still looks deliberate: any overscroll
   shows ink, matching the nav, never white. body keeps its own light page bg
   painted over this. Inner scrollers (the messenger's rail and transcript) keep
   overscroll-behavior: contain, so scrolling a conversation still cannot bounce
   or refresh the page under it. */
html { background: var(--ink); overscroll-behavior-y: auto; }
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* Typography — orphan control (site-wide). Never strand a single word on its own
   line: headings balance their line lengths and body copy avoids a lone short
   last line, so any wrap leaves at least ~2 words together. Supported in modern
   Chrome/Edge/Safari (and Firefox for `balance`); older browsers just wrap
   normally — no harm. Per-string hard guarantee: join the last two words with
   &nbsp;. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, figcaption, dd, dt { text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; }

/* ========================== NAV ========================== */
.hfm-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  width: 100%;
  background-image: url('/assets/images/hfm-menu-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(15,13,18,.06);
  box-shadow: var(--shadow-sm);
}
.hfm-nav__inner {
  max-width: var(--max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.hfm-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.hfm-nav__logo img {
  height: 64px;
  width: 64px;
  display: block;
}
.hfm-nav__brand-text {
  margin-left: 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
  display: none; /* logo carries the wordmark; toggle on if needed */
}

/* ========================== LINKS ========================== */
.hfm-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.hfm-nav__item { position: relative; }
/* Hover bridge: invisible 12px strip below each nav item that covers the gap
   between the chip/button and the popup during its slide-in transition.
   Without this, fast cursor movement can land in the dead zone, fire
   mouseleave on the wrapper, and close the menu before the popup arrives.
   Pseudo-element is non-interactive at rest (so it doesn't intercept hovers
   on adjacent items) and becomes interactive only when the parent is
   hovered or open. */
.hfm-nav__item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
}
.hfm-nav__item:hover::after,
.hfm-nav__item[data-open="true"]::after { pointer-events: auto; }
.hfm-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .18s ease;
  border-radius: 4px;
}
.hfm-nav__btn:hover,
.hfm-nav__btn[aria-expanded="true"],
.hfm-nav__item--active .hfm-nav__btn { color: var(--accent); }
.hfm-nav__btn .chev {
  width: 10px;
  height: 10px;
  transition: transform .2s ease;
}
.hfm-nav__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Flat link variant — used in the public (non-member) nav.
   No dropdown, just a direct anchor styled to match the dropdown triggers. */
a.hfm-nav__btn--flat {
  text-decoration: none;
  color: var(--text);
}
a.hfm-nav__btn--flat:hover { color: var(--accent); }

/* Admin item inside the My HFM dropdown — visible only to admins. */
.hfm-pop__list .hfm-pop__admin {
  color: var(--bronze-dk);
  font-weight: 700;
}
.hfm-pop__list .hfm-pop__admin::before {
  content: "★";
  margin-right: 8px;
  color: var(--bronze);
  font-size: 10px;
  vertical-align: 1px;
}

/* ========================== AUTH BUTTONS ========================== */
.hfm-nav__auth {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.hfm-btn {
  height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hfm-btn--ghost {
  background: transparent;
  border-color: #000;
  color: #000;
}
.hfm-btn--ghost:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hfm-btn--primary {
  background: #000;
  color: #fff;
  border-color: #000;
}
.hfm-btn--primary:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Account cluster (logged-in state) — notifications bell + the "My HFM" account
   menu, sitting together on the right of the nav bar. My HFM is the last child,
   so it renders to the RIGHT of the bell. */
.hfm-nav__account { display: none; align-items: center; gap: 8px; }
body[data-state~="logged-in"] .hfm-nav__auth { display: none; }
body[data-state~="logged-in"] .hfm-nav__account { display: flex; }

/* Facebook-style right cluster: two 40px circular buttons — the notifications
   bell and the account avatar. The bell is a translucent grey circle with the
   bell glyph; the avatar is the member's photo (or first initial on a brand
   bronze circle) with a small caret badge, exactly like FB's account chip. */
.hfm-nav__account .hfm-notif__btn,
.hfm-nav__account .hfm-msgs,
.hfm-nav__avatar-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
/* Bell + Messages icon = matching translucent circles (theme-aware below) */
.hfm-nav__account .hfm-notif__btn,
.hfm-nav__account .hfm-msgs { background: rgba(0,0,0,.06); }
.hfm-nav__account .hfm-notif__btn:hover,
.hfm-nav__account .hfm-msgs:hover { background: rgba(0,0,0,.12); }
/* Active page → cyan, matching the nav's active-item treatment. The Messages
   icon lights on /messages/, the bell on /notifications/. */
.hfm-nav__account .hfm-msgs.is-active,
.hfm-nav__account .hfm-notif.is-active .hfm-notif__btn { color: var(--accent); }
/* Avatar button is transparent — the chip inside carries the circle */
.hfm-nav__avatar-btn { background: none; }
.hfm-avatar-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bronze);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255,255,255,.55);
  transition: box-shadow .15s ease;
}
.hfm-avatar-chip--img { background: none; }
.hfm-avatar-chip img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 98%; height: 98%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.hfm-avatar-btn:hover .hfm-avatar-chip,
.hfm-avatar-btn[aria-expanded="true"] .hfm-avatar-chip { box-shadow: 0 0 0 2px var(--accent); }
/* Small caret badge overlapping the avatar's bottom-right (FB affordance) */
.hfm-avatar-btn__caret {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card, #fff);
  color: #1c1410;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.hfm-avatar-btn__caret svg { width: 8px; height: 6px; transition: transform .2s ease; }
.hfm-avatar-btn[aria-expanded="true"] .hfm-avatar-btn__caret svg { transform: rotate(180deg); }

/* "My HFM" account dropdown — single column, right-aligned so it never spills
   off the viewport's right edge (the trigger sits at the far right of the bar).
   Inherits the base .hfm-pop card/shadow/animation; only overrides position +
   its own single-column link/label/identity styling. Descendant selector so this
   beats `.hfm-pop { left:0 }` (defined later in the file) without !important. */
.hfm-nav__account .hfm-account-pop { left: auto; right: 0; min-width: 264px; padding: 8px; }
.hfm-account-pop__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.hfm-account-pop__label {
  margin: 10px 0 2px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.hfm-account-pop__label:first-of-type { margin-top: 2px; }
.hfm-account-pop__link {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: background .14s ease, color .14s ease;
}
.hfm-account-pop__link:hover { background: rgba(0,0,0,.04); color: var(--accent); }
.hfm-account-pop__link--accent { color: #019ae0; font-weight: 700; }
.hfm-account-pop__link--logout {
  color: var(--muted);
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
}
.hfm-account-pop__link--logout:hover { color: var(--text); background: none; }
.hfm-account-pop__promo { margin: 8px 2px; }
.hfm-account-pop__promo .hfm-mega__promo { margin: 0; }
/* All logged-in member pages share the one warm beige canvas (request 2026-06-25).
   :not(.adm-scope) mirrors the dashboard's own exclusion so staff/admin surfaces keep
   their own backdrop. Higher specificity than .bh-page--cream/--info, so those variants
   unify to the warm canvas on logged-in pages too. */
body[data-state~="logged-in"] .bh-page:not(.adm-scope) { background: var(--bg-warm); }

/* ===================== DARK / LEATHER NAV VARIANTS =====================
   Optional dark treatments for the top bar, toggled by a class on <header>
   set in shared/header.php (via ?nav= or the BROTHERHOOD_NAV_THEME config
   constant). ADDITIVE overrides only — the default cream nav above is
   untouched when no variant class is present, so reverting is a no-op.
   Recipe follows BRAND.md's dark-section rule: solid black OR the leather
   image + bronze accents + cream (#F9F2E9) text. The v2 coin logo is set in
   the markup for these themes; dropdown/mega panels stay white (they float
   below the bar) and are intentionally not restyled. */

/* Shared dark-bar chrome */
.hfm-nav--dark,
.hfm-nav--leather {
  border-bottom: 1px solid rgba(168, 124, 80, .38);   /* bronze hairline */
  box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
}
/* Solid-black bar (?nav=dark) */
.hfm-nav--dark {
  background-image: none;
  background-color: var(--ink);                        /* #141414 */
}
/* Leather bar (?nav=leather, default) — the leather texture recoloured to a
   cool charcoal/near-black: a neutral charcoal scrim (no warm hue) sits over
   the leather image with background-blend-mode:saturation, which strips the
   brown out of the grain while keeping its luminance detail. Cream (#F9F2E9)
   text clears WCAG AAA (~12:1) on the darker composite. */
.hfm-nav--leather {
  background-image:
    linear-gradient(rgba(11, 11, 12, .82), rgba(11, 11, 12, .82)),
    url('/assets/images/hfm-header-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: saturation, normal;
  background-color: #0b0b0c;   /* matches the site footer bg; texture image kept for grain */
}

/* Link + dropdown-trigger text → cream; hover keeps the cyan accent. */
.hfm-nav--dark .hfm-nav__btn,
.hfm-nav--leather .hfm-nav__btn,
.hfm-nav--dark a.hfm-nav__btn--flat,
.hfm-nav--leather a.hfm-nav__btn--flat { color: var(--cream); }
.hfm-nav--dark .hfm-nav__btn:hover,
.hfm-nav--leather .hfm-nav__btn:hover,
.hfm-nav--dark .hfm-nav__btn[aria-expanded="true"],
.hfm-nav--leather .hfm-nav__btn[aria-expanded="true"],
.hfm-nav--dark a.hfm-nav__btn--flat:hover,
.hfm-nav--leather a.hfm-nav__btn--flat:hover { color: var(--accent); }
/* Active (current-page) item stays cyan on the dark/leather bar too. The generic
   `.hfm-nav__item--active .hfm-nav__btn` rule (0,2,0) ties the cream
   `.hfm-nav--dark .hfm-nav__btn` rule (0,2,0) and loses on source order, so scope
   the active color to the dark/leather bar — (0,3,0) outranks the cream rule. */
.hfm-nav--dark .hfm-nav__item--active .hfm-nav__btn,
.hfm-nav--leather .hfm-nav__item--active .hfm-nav__btn { color: var(--accent); }

/* Notifications bell (color:inherit) + hamburger (currentColor) → cream. */
.hfm-nav--dark .hfm-nav__account,
.hfm-nav--leather .hfm-nav__account { color: var(--cream); }
/* ...but floating panels (notifications + account dropdowns) sit on a WHITE card
   below the bar, so the cream text color above must NOT cascade into them or
   unstyled text (e.g. the notifications panel header) washes out. Re-root panel
   text to the normal dark color. Cream nav is unaffected (no cream to inherit). */
.hfm-nav--dark .hfm-pop,
.hfm-nav--leather .hfm-pop,
.hfm-nav--dark .hfm-mega,
.hfm-nav--leather .hfm-mega { color: var(--text); }
.hfm-nav--dark .hfm-notif__btn:hover,
.hfm-nav--leather .hfm-notif__btn:hover { background: rgba(255, 255, 255, .10); }
/* FB-style circular bell on the dark/leather bar → translucent LIGHT circle
   (the account avatar chip carries its own fill, so it needs no override). */
.hfm-nav--dark .hfm-nav__account .hfm-notif__btn,
.hfm-nav--leather .hfm-nav__account .hfm-notif__btn,
.hfm-nav--dark .hfm-nav__account .hfm-msgs,
.hfm-nav--leather .hfm-nav__account .hfm-msgs { background: rgba(255, 255, 255, .10); color: var(--cream); }
.hfm-nav--dark .hfm-nav__account .hfm-notif__btn:hover,
.hfm-nav--leather .hfm-nav__account .hfm-notif__btn:hover,
.hfm-nav--dark .hfm-nav__account .hfm-msgs:hover,
.hfm-nav--leather .hfm-nav__account .hfm-msgs:hover { background: rgba(255, 255, 255, .18); }
/* Active page stays cyan on the dark/leather bar too (outranks the cream rule). */
.hfm-nav--dark .hfm-nav__account .hfm-msgs.is-active,
.hfm-nav--leather .hfm-nav__account .hfm-msgs.is-active,
.hfm-nav--dark .hfm-nav__account .hfm-notif.is-active .hfm-notif__btn,
.hfm-nav--leather .hfm-nav__account .hfm-notif.is-active .hfm-notif__btn { color: var(--accent); }
.hfm-nav--dark .hfm-nav__hamburger,
.hfm-nav--leather .hfm-nav__hamburger { color: var(--cream); }

/* Logged-out "Member login" button → black fill, cyan (accent) on hover. */
.hfm-nav--dark .hfm-nav__auth .hfm-btn--primary,
.hfm-nav--leather .hfm-nav__auth .hfm-btn--primary {
  background: #000;
  border-color: #000;
  color: #fff;
}
.hfm-nav--dark .hfm-nav__auth .hfm-btn--primary:hover,
.hfm-nav--leather .hfm-nav__auth .hfm-btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ========================== DROPDOWNS ========================== */
.hfm-pop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.hfm-nav__item[data-open="true"] .hfm-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hfm-pop__list { list-style: none; margin: 0; padding: 0; }
.hfm-pop__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .14s ease, color .14s ease;
}
.hfm-pop__list a:hover {
  background: rgba(0,0,0,.04);
  color: var(--accent);
}
.hfm-pop__list a .desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

/* ========================== MEGA MENU ========================== */
.hfm-mega {
  --shift: 0px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% + var(--shift))) translateY(-6px);
  width: min(960px, calc(100vw - 64px));
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 28px;
}
.hfm-nav__item[data-open="true"] .hfm-mega {
  opacity: 1;
  transform: translateX(calc(-50% + var(--shift))) translateY(0);
  pointer-events: auto;
}
.hfm-mega__col h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.hfm-mega__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hfm-mega__col li + li { margin-top: 4px; }
.hfm-mega__col a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background .14s ease, color .14s ease;
}
.hfm-mega__col a:hover {
  background: rgba(0,0,0,.04);
  color: var(--accent);
}
.hfm-mega__col .ttl {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.hfm-mega__col .desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
/* "My sessions" nav count pills — Upcoming (amber) + Completed (green), one source
   for the desktop Coaching mega and the mobile drawer (shared/session_badges.php).
   A zero count renders a muted grey pill so the pattern is always legible. */
.hfm-sess-badges { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hfm-sess-badge { display: inline-flex; align-items: center; gap: 5px; }
.hfm-sess-badge__label { font-size: 11px; font-weight: 600; color: var(--muted); }
.hfm-sess-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1;
}
.hfm-sess-pill--completed { background: #1a7f37; color: #fff; }
.hfm-sess-pill--upcoming { background: #e7a400; color: #3a2a00; }
.hfm-sess-pill--zero     { background: rgba(0,0,0,.09); color: var(--muted); }
.hfm-sess-badges--mobile { gap: 14px; margin-top: 6px; }
.hfm-sess-badges--mobile .hfm-sess-badge__label { font-size: 12.5px; }
.hfm-sess-badges--mobile .hfm-sess-pill { min-width: 20px; height: 20px; font-size: 12px; }
.hfm-mega__feature {
  background: linear-gradient(135deg, #f5ede1 0%, #e6d5bf 100%);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text);
  min-height: 200px;
  overflow: hidden;
  position: relative;
}
.hfm-mega__feature .tag {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-dk);
  font-weight: 700;
}
.hfm-mega__feature h5 {
  margin: 8px 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.hfm-mega__feature p {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.hfm-mega__feature .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bronze-dk);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
  transition: color .14s ease, transform .14s ease;
}
.hfm-mega__feature .cta:hover { color: #000; transform: translateX(2px); }

/* Featured-meeting variant of the mega feature card: a bled head image
   (meeting banner, else host coach photo) above the tag/title/time/CTA. */
.hfm-mega__feature--meeting { justify-content: flex-start; }
.hfm-mega__feature-img {
  display: block;
  width: calc(100% + 40px);
  height: 104px;
  margin: -20px -20px 14px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
  background: #d8c7ae;
}
.hfm-mega__feature--meeting h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hfm-mega__feature--meeting .cta { margin-top: auto; }

/* Brofest mega card — richer body (feature list + where/speakers line). */
.hfm-mega__feature--brofest p { margin-bottom: 10px; }
.hfm-mega__brofest-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.hfm-mega__brofest-list li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.hfm-mega__brofest-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }
.hfm-mega__brofest-where { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.hfm-mega__brofest-where strong { color: var(--bronze-dk); font-weight: 700; }

/* Coaching mega feature: overlapping cluster of visible-coach headshots. */
.hfm-mega__coachrow { display: flex; align-items: center; margin: 14px 0 8px; }
.hfm-mega__coachpic {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  flex: 0 0 auto; margin-left: -10px; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.14); background: var(--bg-alt);
}
.hfm-mega__coachpic:first-child { margin-left: 0; }
.hfm-mega__coachpic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* Coaching mega feature — single random-coach spotlight (one headshot + name). */
.hfm-mega__feature--spotlight { justify-content: flex-start; }
.hfm-mega__spot { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.hfm-mega__spotpic {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  flex: 0 0 auto; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.16); background: var(--bg-alt);
}
.hfm-mega__spotpic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hfm-mega__spotmeta { min-width: 0; }
.hfm-mega__spotmeta h5 { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--text); }
.hfm-mega__spotmeta p { margin: 0; font-size: 13px; color: var(--bronze-dk); font-weight: 700; line-height: 1.4; }
.hfm-mega__spottags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.hfm-mega__spottag { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--bronze-dk); background: rgba(107, 79, 58, .12); border-radius: 999px; padding: 4px 10px; }
.hfm-mega__spotintro { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hfm-mega__feature--spotlight .cta { margin-top: auto; }

/* ── "My HFM" account mega (shared/_nav_account_menu.php) ─────────────────────
   Reuses the .hfm-mega grid + .hfm-mega__col link styling; adds an actions
   rail (promo banner + Admin / Log out) on the right. */
.hfm-mega__col--full {
  grid-column: 1 / -1;
  padding: 2px 12px 6px;
}
.hfm-mega__col--actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.hfm-mega__action {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background .14s ease, color .14s ease;
}
.hfm-mega__action:hover { background: rgba(0,0,0,.04); color: var(--accent); }
.hfm-mega__action--logout { color: var(--muted); margin-top: auto; }
.hfm-mega__action--logout:hover { color: var(--text); }
.hfm-mega__action--admin { color: var(--bronze-dk); font-weight: 700; }
.hfm-mega__action--admin::before {
  content: "★";
  margin-right: 8px;
  color: var(--bronze);
  font-size: 10px;
  vertical-align: 1px;
}
.hfm-mega__action--accent { color: #019ae0; font-weight: 700; }

/* Identity header at the top of the actions rail — brings the avatar (removed
   from the top bar) into the menu and keeps the rail from looking empty. */
.hfm-mega__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.hfm-mega__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bronze);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.hfm-mega__avatar--img { background: none; overflow: hidden; }
.hfm-mega__avatar--img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 98%; height: 98%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.hfm-mega__identity-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hfm-mega__identity-name { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.2; }
.hfm-mega__identity-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Upgrade-to-Lifetime promo card — shared by the mega actions rail and the
   mobile drawer. Deep-blue gradient (darker than the #019ae0 brand accent) so
   solid-white eyebrow/sub text clears WCAG AA 4.5:1 across the whole gradient;
   hover-lifts like the other CTAs. */
.hfm-mega__promo {
  display: block;
  padding: 14px 16px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0277bd 0%, #015b8c 100%);
  color: #fff;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.hfm-mega__promo:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(1,91,140,.36); color: #fff; }
.hfm-mega__promo-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 3px;
}
.hfm-mega__promo-title { display: block; font-weight: 700; font-size: 14px; line-height: 1.25; }
.hfm-mega__promo-sub { display: block; font-size: 11px; color: #fff; margin-top: 2px; }
.hfm-mobile-promo { margin: 8px 0; }
.hfm-mobile-promo .hfm-mega__promo { margin: 0; }

.hfm-pop__divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}

/* ========================== HAMBURGER (mobile) ========================== */
.hfm-nav__hamburger {
  display: none;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--bronze-dk);
}
.hfm-nav__hamburger span,
.hfm-nav__hamburger span::before,
.hfm-nav__hamburger span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease, opacity .15s ease;
}
.hfm-nav__hamburger span { position: relative; }
.hfm-nav__hamburger span::before,
.hfm-nav__hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.hfm-nav__hamburger span::before { top: -7px; }
.hfm-nav__hamburger span::after  { top:  7px; }
body[data-mobile-open="true"] .hfm-nav__hamburger span { background: transparent; }
body[data-mobile-open="true"] .hfm-nav__hamburger span::before { top: 0; transform: rotate(45deg); }
body[data-mobile-open="true"] .hfm-nav__hamburger span::after  { top: 0; transform: rotate(-45deg); }

/* ========================== MOBILE DRAWER ========================== */
.hfm-mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,13,18,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 98;
}
body[data-mobile-open="true"] .hfm-mobile-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.hfm-mobile-drawer {
  display: none;
}

@media (max-width: 1024px) {
  :root { --nav-h: 58px; }
  .hfm-nav {
    border-bottom: none;
    box-shadow: none;
    /* Anchor bg image to left so the logo sits over the same gradient region it was designed against */
    background-position: left center;
  }
  .hfm-nav__inner { padding: 0 16px; gap: 12px; }
  .hfm-nav__logo img { height: 44px; width: 44px; }
  .hfm-nav__links { display: none; }
  /* Mobile = hamburger only. The right-side "My HFM" dropdown is hidden so the
     bar shows just the bell + hamburger; the mobile My HFM lives in the drawer. */
  .hfm-nav__account .hfm-nav__item--account { display: none; }
  .hfm-nav__hamburger { display: inline-flex; }
  .hfm-nav__auth,
  .hfm-nav__account {
    margin-left: auto; /* push the auth/account group + hamburger to the right edge
                          (logged-out uses __auth, logged-in uses __account) */
  }
  .hfm-nav__auth .hfm-btn--ghost { display: none; }
  .hfm-nav__auth .hfm-btn--primary {
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
  }

  .hfm-mobile-backdrop { display: block; }

  .hfm-mobile-drawer {
    display: block;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: min(360px, 88vw);
    bottom: 0;
    background: linear-gradient(180deg, #f7f1e6 0%, #efe6d4 100%);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 32px;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mobile-open="true"] .hfm-mobile-drawer { transform: translateX(0); }
  body[data-mobile-open="true"] { overflow: hidden; }
}

/* When the drawer is hidden via display:none above 1024px, also hide backdrop */
@media (min-width: 1025px) {
  .hfm-mobile-backdrop { display: none !important; }
}

/* === Mobile section === */
.hfm-mobile-section {
  border-bottom: 1px solid rgba(168,124,80,.18);
}
.hfm-mobile-section:last-of-type { border-bottom: none; }

.hfm-mobile-section__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 18px 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
  min-height: 56px;
  cursor: pointer;
}
.hfm-mobile-section__btn:active { color: var(--bronze-dk); }
.hfm-mobile-section__btn .chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform .25s ease;
  color: var(--bronze);
}
.hfm-mobile-section[data-open="true"] .hfm-mobile-section__btn .chev {
  transform: rotate(180deg);
}

/* Smooth expand/collapse via CSS Grid trick (no JS height calc) */
.hfm-mobile-section__inner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.hfm-mobile-section[data-open="true"] .hfm-mobile-section__inner {
  grid-template-rows: 1fr;
}
.hfm-mobile-section__content {
  overflow: hidden;
  min-height: 0;
}
.hfm-mobile-section[data-open="true"] .hfm-mobile-section__content {
  padding-bottom: 16px;
}

/* === Mobile category headers === */
.hfm-mobile-h {
  margin: 14px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
}
.hfm-mobile-h:first-child { margin-top: 4px; }

/* === Mobile link rows === */
.hfm-mobile-link {
  display: block;
  padding: 12px 4px;
  border-radius: 6px;
  min-height: 56px;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hfm-mobile-link:active { background: rgba(168,124,80,.12); }
.hfm-mobile-link .ttl {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.hfm-mobile-link .desc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Top-level standalone drawer links (Journal, plus the public Pricing/About)
   are peers of the section buttons — match their uppercase weight, tracking,
   size and padding so "Journal" reads at the same scale as "Meetings" etc.
   Scoped to direct drawer children so the nested "My HFM" footer flat links
   (Log out, etc.) keep their lighter treatment. */
.hfm-mobile-drawer > .hfm-mobile-link--flat { padding: 18px 4px; }
.hfm-mobile-drawer > .hfm-mobile-link--flat .ttl {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Current-page highlight in the mobile drawer — cyan, matching the desktop
   .hfm-nav__item--active treatment. Placed after the base link/section rules so
   the accent color wins the same-specificity tie. */
.hfm-mobile-link--active .ttl { color: var(--accent); }
.hfm-mobile-section--active > .hfm-mobile-section__btn { color: var(--accent); }

/* === Mobile featured callout (smaller version of desktop mega feature) === */
.hfm-mobile-feature {
  display: block;
  margin: 16px 0 4px;
  padding: 16px;
  background: linear-gradient(135deg, #f5ede1 0%, #e6d5bf 100%);
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.hfm-mobile-feature:active { transform: scale(.985); }
.hfm-mobile-feature .tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-dk);
  font-weight: 700;
  margin-bottom: 6px;
}
.hfm-mobile-feature .h {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 8px;
}
.hfm-mobile-feature .cta {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-dk);
}
.hfm-mobile-feature .desc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 10px;
}
/* Image-topped feature variant (Brofest top-level section). Photo sits flush at
   the top; the text block keeps the card's inner padding. */
.hfm-mobile-feature--img { padding: 0; overflow: hidden; }
.hfm-mobile-feature__img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.hfm-mobile-feature--img .tag { padding: 14px 16px 0; }
.hfm-mobile-feature--img .h,
.hfm-mobile-feature--img .desc { padding-left: 16px; padding-right: 16px; }
.hfm-mobile-feature--img .cta { padding: 0 16px 16px; }

/* Brofest — pinned to the very bottom of the mobile drawer, always open (no
   accordion). A hairline top rule separates it from the "My HFM" section above,
   matching the section dividers. */
.hfm-mobile-brofest { border-top: 1px solid rgba(168,124,80,.18); padding-top: 4px; }

/* Support row in the mobile drawer — the floating widget's replacement on a
   phone. Sits above the auth CTAs, separated the same way they are. */
.hfm-mobile-support {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(168,124,80,.18);
}

/* === Mobile auth CTAs at bottom === */
.hfm-mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(168,124,80,.18);
}
.hfm-mobile-cta .hfm-btn { width: 100%; height: 52px; }


/* ========================== FOOTER ========================== */
.hfm-footer {
  background: #0b0b0c;
  color: #d8c9b0;
  padding: 72px var(--page-gutter) 28px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.hfm-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.hfm-footer__cols {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(4, 1fr);
  gap: 56px 40px;
  align-items: start;
}

/* === Brand column === */
.hfm-footer__logo {
  display: inline-block;
  line-height: 0;
}
.hfm-footer__logo img {
  width: 140px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.hfm-footer__tagline {
  margin: 16px 0 28px;
  color: var(--bronze);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Newsletter */
.hfm-footer__newsletter {
  margin-bottom: 32px;
}
.hfm-footer__newsletter-desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(240, 227, 205, .75);
  line-height: 1.5;
}
.hfm-footer__newsletter-row {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(168,124,80,.4);
  transition: border-color .18s ease;
}
/* White field once focused or filled (matches the Chrome autofill look). */
.hfm-footer__newsletter-row:focus-within,
.hfm-footer__newsletter-row:has(input:not(:placeholder-shown)) {
  border-color: var(--bronze);
  background: #fff;
}
.hfm-footer__newsletter-row:focus-within input,
.hfm-footer__newsletter-row:has(input:not(:placeholder-shown)) input {
  color: #141414;
}
.hfm-footer__newsletter-row:focus-within input::placeholder {
  color: rgba(20, 20, 20, .45);
}
/* Force Chrome autofill to the same white + dark text (not its lavender default). */
.hfm-footer__newsletter input:-webkit-autofill,
.hfm-footer__newsletter input:-webkit-autofill:focus {
  -webkit-text-fill-color: #141414;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.hfm-footer__newsletter input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: #f0e3cd;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.hfm-footer__newsletter input::placeholder {
  color: rgba(240, 227, 205, .35);
}
.hfm-footer__newsletter button {
  background: var(--bronze);
  border: none;
  color: #fff;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease;
}
.hfm-footer__newsletter button:hover {
  background: var(--accent);
}
/* Honeypot field — kept in the DOM for bots, off-screen for humans + AT. */
.hfm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.hfm-footer__newsletter-msg {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.4; min-height: 1em;
  color: var(--muted);
}
.hfm-footer__newsletter-msg.is-ok  { color: #9bd6a6; }
.hfm-footer__newsletter-msg.is-err { color: #f0a8a8; }

/* --- Newsletter success choreography (JS-driven) --- */
/* Confirmation is written into the email field itself, in brand blue. */
.hfm-footer__newsletter input.is-success { color: var(--accent) !important; font-weight: 600; }
/* Then the whole block fades out (opacity 4s) and collapses (max-height/margin)
   so the social icons below rise up under the "No brother stands alone." tagline. */
.hfm-footer__newsletter { overflow: hidden;
  transition: opacity 4s ease, max-height .7s ease, margin .7s ease; }
.hfm-footer__newsletter.is-fading    { opacity: 0; }
.hfm-footer__newsletter.is-collapsed { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; }

/* Section headers */
.hfm-footer__h {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.hfm-footer__subh {
  display: block;
  margin: 18px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 213, 184, .55);
}

/* Link list */
.hfm-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hfm-footer__list a {
  color: #f0e3cd;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: color .15s ease;
  display: inline-block;
}
.hfm-footer__list a:hover {
  color: #fff;
}

/* Social icons */
.hfm-footer__socials {
  margin-top: 4px;
}
.hfm-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hfm-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bronze);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.hfm-footer__social a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

/* Bottom row */
.hfm-footer__bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(168,124,80,.22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hfm-footer__copy,
.hfm-footer__credit {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(232, 213, 184, .55);
}
.hfm-footer__credit {
  font-style: italic;
}

/* Minimal legal-only footer — landing pages (e.g. /join) while their linked
   pages aren't built. Slim dark strip: © + Privacy + Terms, no nav columns. */
.hfm-footer--minimal { padding: 22px 32px; }
.hfm-footer--minimal .hfm-footer__bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.hfm-footer__legal {
  display: flex; gap: 18px; margin: 0; padding: 0; list-style: none;
  font-size: 12.5px; letter-spacing: 0.04em;
}
.hfm-footer__legal a { color: rgba(232, 213, 184, .55); text-decoration: none; }
.hfm-footer__legal a:hover { color: var(--bronze, #a87c50); }

/* ===== Shared legal-page prose (Privacy / Terms / Refund) — one source, used by
   all policy pages (Rule #9). Cream card, readable measure, bronze rules. ===== */
.bh-legal { max-width: 760px; margin: 0 auto; background: #faf6ef; border: 1px solid var(--line); border-radius: 14px; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 52px) clamp(32px, 5vw, 52px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.18); }
/* The legal card always ships with .bh-wrap (page gutters). .bh-wrap's `padding: 0 24px`
   is equal specificity and, sitting later in this file, was cancelling the card's own
   top/bottom padding — leaving the page title flush against the card's top border.
   Re-assert the card's intended padding at higher specificity so it wins. */
.bh-wrap.bh-legal { padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 52px) clamp(32px, 5vw, 52px); }
.bh-legal__lead { color: var(--text); font-size: 16px; line-height: 1.75; }
.bh-legal h2 { font-size: 19px; font-weight: 800; color: var(--text); margin: 32px 0 8px; letter-spacing: -.01em; }
.bh-legal h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 20px 0 6px; }
.bh-legal p, .bh-legal li { color: var(--text); font-size: 15px; line-height: 1.7; }
.bh-legal ul { padding-left: 20px; margin: 8px 0; }
.bh-legal li { margin: 4px 0; }
.bh-legal a.bh-link, .bh-legal__lead a { color: var(--accent); }
.bh-legal__muted { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.bh-legal__note { background: #fffaeb; border: 1px solid #fedf89; color: #b54708; border-radius: 10px; padding: 13px 16px; font-size: 13.5px; margin: 18px 0 4px; }
.bh-legal__updated { color: var(--muted); font-size: 13px; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 14px; }

/* === Tablet === */
@media (max-width: 1024px) {
  .hfm-footer { padding: 56px 24px 24px; }
  /* Tablet: col 1 = brand (logo, newsletter, socials) spanning both rows;
     the 4 link groups flow into cols 2 & 3 (2 per column). */
  .hfm-footer__cols {
    grid-template-columns: minmax(0, 1.2fr) 1fr 1fr;
    gap: 40px 32px;
  }
  .hfm-footer__brand { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
}

/* === Mobile === */
@media (max-width: 600px) {
  .hfm-footer { padding: 48px 20px 24px; }
  .hfm-footer__cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hfm-footer__brand { max-width: none; display: flex; flex-direction: column; min-width: 0; }
  /* Newsletter signup above the logo on mobile (user request). */
  .hfm-footer__newsletter { order: -1; margin-bottom: 28px; min-width: 0; max-width: 100%; }
  .hfm-footer__newsletter-row { max-width: 100%; }
  .hfm-footer__newsletter-desc { overflow-wrap: anywhere; }
  .hfm-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
/* === Upgrade promo popup (rendered by shared/UpgradePopup.php) =========== */
.hfm-upgrade-popup {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
}
.hfm-upgrade-popup[hidden] { display: none; }
.hfm-upgrade-popup__backdrop {
  position: absolute; inset: 0; background: rgba(15, 13, 18, 0.62);
  backdrop-filter: blur(2px);
}
.hfm-upgrade-popup__card {
  position: relative;
  max-width: 480px; width: 100%;
  background: #fff; border-radius: 14px; padding: 28px 28px 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
  animation: hfm-up-pop .25s ease-out both;
}
@keyframes hfm-up-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.hfm-upgrade-popup__close {
  position: absolute; top: 8px; right: 12px;
  width: 32px; height: 32px;
  background: transparent; border: none; cursor: pointer;
  font-size: 26px; color: #6b7280; line-height: 1;
}
.hfm-upgrade-popup__close:hover { color: #111; }
.hfm-upgrade-popup__eyebrow {
  color: #b08540; font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 8px;
}
.hfm-upgrade-popup__title {
  margin: 0 0 12px; font-size: 22px; font-weight: 800;
  color: #111; letter-spacing: -0.01em; line-height: 1.25;
}
.hfm-upgrade-popup__sub {
  margin: 0 0 14px; color: #4b5563; font-size: 14px; line-height: 1.55;
}
.hfm-upgrade-popup__sub strong { color: #111; font-weight: 700; }
.hfm-upgrade-popup__list {
  margin: 0 0 18px; padding-left: 18px;
  color: #1f2937; font-size: 14px; line-height: 1.65;
}
.hfm-upgrade-popup__actions {
  display: flex; gap: 10px; align-items: center; margin-top: 6px;
}
.hfm-upgrade-popup__cta {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #b08540; color: #fff; border: 1px solid #b08540;
  border-radius: 6px; padding: 12px 18px;
  text-decoration: none; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 13px; transition: .18s;
}
.hfm-upgrade-popup__cta:hover { background: #111; border-color: #111; }
.hfm-upgrade-popup__later {
  background: transparent; border: none; cursor: pointer;
  color: #6b7280; font-size: 13px; font-weight: 600; padding: 10px 12px;
}
.hfm-upgrade-popup__later:hover { color: #111; }
.hfm-upgrade-popup__fine {
  margin: 14px 0 0; font-size: 11px; color: #9ca3af; line-height: 1.55;
}

/* ============================================================
 * BH-* MEMBER DESIGN SYSTEM
 * Shared component layer for ALL logged-in member pages.
 * Matches the /join page + welcome-funnel emails: blue (#019ae0)
 * primary CTA WITH a left icon, ghost secondary, bronze eyebrows,
 * alternating cream/black bands, Poppins, card grids.
 *
 * RULE: build member pages from these classes. A visual change is
 * made HERE once and propagates everywhere. Page files add only
 * thin page-scoped tweaks, never re-implement these primitives.
 * Purely ADDITIVE — does not touch .cn-*, .join-* etc.
 * ============================================================ */

/* ---- Layout shells ---- */
.bh-page            { background: var(--bg); color: var(--text); font-family: var(--font-body); }
.bh-page--cream     { background: var(--bg-alt); }
/* Informational pages (policies, static content) — the EMAIL background:
   warm greige canvas; put content on a cream (#faf6ef) card. See BRAND.md
   "Page background system". */
.bh-page--info      { background: #e7e2d9; }
/* Working / tool pages (meetings, dashboard, account, coaching, ...) — warm
   beige canvas so white panels read as distinct cards. THE standard as of
   2026-07-04 (supersedes the old white working-page rule). General panels use
   the shared borderless `.bh-card` (var(--shadow-panel)); meeting cards use the
   shared `.mtg-card/.dash-mtg-card/.mw-card` rule. /meetings/ is the reference. */
.bh-page--work      { background: var(--bg-warm); }
.bh-wrap            { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-gutter); }
.bh-wrap--narrow    { max-width: 820px; }
/* Vertical rhythm only. These are written as padding-block, not the padding
   shorthand: .bh-wrap.bh-section is a common pairing (the coaching directory,
   the programs catalog, every band of a coach profile), and a shorthand here
   out-ran .bh-wrap's side gutter and wiped it — which showed up as content
   running edge to edge on a phone, where the wrap's max-width no longer keeps
   it off the screen edges. */
.bh-section         { padding-block: clamp(40px, 6vw, 72px); }
.bh-section--tight  { padding-block: clamp(28px, 4vw, 44px); }
/* Narrow single-form account shell (change-password / edit-profile / preferences). One source. */
.bh-formpage        { min-height: calc(100vh - var(--nav-h)); padding: clamp(36px, 6vw, 72px) 20px; }
.bh-formpage__inner { width: 100%; max-width: 560px; margin: 0 auto; }
.bh-formpage__head  { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.bh-formpage__head .bh-h2 { margin: 0; }
.bh-band            { background: var(--bg); }
.bh-band--cream     { background: var(--bg-alt); }
.bh-band--dark      { background: var(--dark-bg); color: var(--cream); }
.bh-band--darkbold  { background: var(--dark-bg-bold); color: var(--cream); }
/* Leather-textured dark band — use WITH bh-band--dark (keeps its on-dark text rules)
   instead of leaving a large flat-brown block (brand: no large brown areas). */
.bh-band--leather   { background: linear-gradient(180deg,rgba(20,12,6,.58),rgba(20,12,6,.74)),
                        url('../images/hfm-header-bg.webp') center/cover no-repeat; }
.bh-divider         { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Section heading (eyebrow + headline + lead) ---- */
.bh-shead           { max-width: 760px; margin: 0 0 clamp(22px, 3vw, 34px); }
.bh-shead--center   { margin-left: auto; margin-right: auto; text-align: center; }
.bh-eyebrow         { display: inline-block; margin: 0 0 12px; font-size: var(--eyebrow-size);
                      letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
                      font-weight: 700; color: var(--bronze); }
.bh-band--dark .bh-eyebrow,
.bh-band--darkbold .bh-eyebrow { color: var(--cream-soft); }
.bh-h1              { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 700;
                      font-size: var(--h1-size); line-height: 1.12; letter-spacing: -0.01em; }
.bh-h2              { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700;
                      font-size: var(--h2-size); line-height: 1.16; letter-spacing: -0.01em; }
.bh-h3              { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 700;
                      font-size: var(--h3-size); line-height: 1.22; }
.bh-h4              { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600;
                      font-size: var(--h4-size); line-height: 1.3; }
.bh-lead            { margin: 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--muted); }
.bh-band--dark .bh-lead,
.bh-band--darkbold .bh-lead { color: var(--cream-soft); }
.bh-text            { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.bh-text p          { margin: 0 0 14px; }

/* ---- Buttons (blue primary + left icon = canonical CTA) ---- */
/* THE button size, site-wide (owner, 2026-08-27): 40px tall, 16px sides, 12px
   uppercase — the JOIN / FULL DETAIL pair on the coach's session card, which he
   picked as the standard. It used to be 46/22/13 here and 40/16/12 only where a
   page remembered to add --sm, which is why two buttons in one table row could
   be different sizes. The ONE exception is the /join funnel, whose bigger sales
   CTAs keep the old size through .jn-scope below. */
.bh-btn             { --_bg: var(--bronze); --_fg: #fff; --_bd: var(--bronze);
                      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
                      height: var(--btn-height-sm); padding: 0 16px; box-sizing: border-box;
                      font-family: var(--font-body); font-size: 12px; font-weight: 700;
                      letter-spacing: var(--btn-tracking); text-transform: uppercase;
                      text-decoration: none; line-height: 1; cursor: pointer; white-space: nowrap;
                      border: 2px solid var(--_bd); border-radius: var(--btn-radius);
                      background: var(--_bg); color: var(--_fg);
                      transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.bh-btn:hover       { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg);
                      color: var(--btn-hover-text); transform: translateY(-1px); }
.bh-btn:active      { transform: translateY(0); }
.bh-btn__icon       { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; }
.bh-btn__icon svg   { width: 100%; height: 100%; display: block; fill: currentColor; }
.bh-btn__text       { display: inline-block; }
.bh-btn--primary    { --_bg: var(--accent); --_fg: #fff; --_bd: var(--accent); }
/* Black secondary-CTA button (actions): WHITE text — never bronze/blue. Inverts to white bg + black on hover.
   Nav/back black buttons add .bh-btn--nav for beige text. (User button system 2026-06-25.) */
.bh-btn--ghost      { --_bg: var(--ink); --_fg: #fff; --_bd: var(--ink); }
.bh-btn--ghost.bh-btn--nav { --_fg: var(--bg-warm, #f9f6f1); }
.bh-btn--ghost:hover{ background: #fff; border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.bh-btn--bronze     { --_bg: var(--bronze); --_fg: #fff; --_bd: var(--bronze); }
.bh-btn--ondark     { --_bg: var(--accent); --_fg: #fff; --_bd: var(--accent); }
.bh-btn--danger     { --_bg: transparent; --_fg: var(--err-text); --_bd: var(--err-border); }
.bh-band--dark .bh-btn--ghost,
.bh-band--darkbold .bh-btn--ghost,
.bh-band--leather .bh-btn--ghost { --_fg: var(--cream); --_bd: rgba(249,242,233,.42); }
/* --ondark fills the button blue, so on a dark band it must NOT also take the
   band's cream text: cream #F9F2E9 on #019ae0 is 2.82:1 — under even the 3:1
   large-text floor, and the reason "My Sessions" on /coaching/ read as a smudge.
   White on the same blue is 3.13:1, the same contrast every other primary CTA
   on the site carries. Listed at (0,2,0) after the rules above so it wins. */
.bh-band--dark .bh-btn--ondark,
.bh-band--darkbold .bh-btn--ondark,
.bh-band--leather .bh-btn--ondark { --_fg: #fff; --_bd: var(--accent); }
/* --sm is now what .bh-btn already is. Kept because 38 templates say it, and
   removing it from all of them is churn with no visible result. */
.bh-btn--sm         { height: var(--btn-height-sm); padding: 0 16px; font-size: 12px; }
/* The pre-2026-08-27 default, for the sales funnel only (see .jn-scope). */
.bh-btn--md         { height: var(--btn-height-md); padding: 0 22px; font-size: 13px; }
.bh-btn--lg         { height: var(--btn-height-lg); padding: 0 30px; font-size: 14px; }
/* /join — the sales funnel keeps the bigger CTA. Anything inside a .jn-scope
   wrapper gets the old metrics without each button being relabelled. */
.jn-scope .bh-btn   { height: var(--btn-height-md); padding: 0 22px; font-size: 13px; }
.jn-scope .bh-btn--lg { height: var(--btn-height-lg); padding: 0 30px; font-size: 14px; }
.jn-scope .bh-btn--sm { height: var(--btn-height-sm); padding: 0 16px; font-size: 12px; }
.bh-btn--block      { display: flex; width: 100%; }
.bh-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1,154,224,.45); }
.bh-btn[disabled], .bh-btn.is-disabled,
.bh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.bh-cta-row         { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.bh-cta-row--center { justify-content: center; }

/* ---- Inline links ---- */
.bh-link            { color: var(--accent); font-weight: 600; text-decoration: none;
                      text-underline-offset: 3px; transition: color .15s; }
/* Underline via text-decoration (follows the text glyphs) — NOT border-bottom,
   which spans the element's full box and stretches to full width when the link
   is a flex item (e.g. inside the dashboard's flex-column cards). */
.bh-link:hover      { text-decoration: underline; text-decoration-thickness: 1px; }
.bh-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
                      text-decoration: underline; }
/* Greyed, non-clickable link (e.g. test-drive self-gate — can't book other coaches). */
.bh-link[aria-disabled="true"] { color: var(--muted); opacity: .5; cursor: not-allowed;
                      pointer-events: none; text-decoration: none; }
/* Test-drive self-gate: another coach's program card, rendered inert + greyed. */
.coach-program-link.is-td-locked { opacity: .5; cursor: not-allowed; pointer-events: none; }
.bh-link--back      { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
                      letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bh-link--back:hover{ color: var(--accent); text-decoration: none; }
.bh-link--back:focus-visible { outline: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bh-link--back::before { content: "\2190"; font-size: 14px; }

/* ---- Cards ---- */
.bh-card            { display: flex; flex-direction: column; background: var(--card);
                      border: 0; border-radius: var(--card-radius-lg);
                      padding: 24px; box-shadow: var(--shadow-panel);
                      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }

/* ---- Meeting card (ONE look site-wide, from the /join .mw-card) ----
   White, bronze hairline (--bronze @35%), 8px radius, flat (no shadow), blue
   border on hover/open. Used by /meetings/ (.mtg-card) and the dashboard widget
   (.dash-mtg-card); /join keeps its .mw-card source copy. Change it HERE only. */
.mtg-card, .dash-mtg-card, .mw-card {
  background: var(--card); border: 1px solid rgba(168,124,80,.35);
  border-radius: 8px; overflow: hidden; box-shadow: none;
  transition: border-color .2s ease;
}
.mtg-card:hover, .dash-mtg-card:hover,
.mtg-card.open,  .dash-mtg-card.open { border-color: var(--accent); }
.bh-card--pad-lg    { padding: var(--card-pad); }
.bh-card--flat      { box-shadow: none; }
.bh-card--link      { cursor: pointer; }
.bh-card--link:hover{ border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bh-card--link:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.30); }
.bh-card__tag       { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
                      color: var(--bronze); margin: 0 0 10px; }
.bh-card__h         { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 700;
                      font-size: 18px; line-height: 1.28; color: var(--text); }
.bh-card__sub       { margin: 0 0 12px; font-size: 13px; color: var(--help); }
.bh-card__body      { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1 1 auto; }
.bh-card__foot      { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                      margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bh-card__cta       { margin-top: 18px; }
.bh-card--ondark            { background: rgba(249,242,233,.06); border-color: rgba(249,242,233,.16); }
.bh-card--ondark .bh-card__h    { color: var(--cream); }
.bh-card--ondark .bh-card__sub  { color: var(--cream-soft); }
.bh-card--ondark .bh-card__body { color: var(--cream-soft); }
.bh-card--ondark .bh-card__foot { border-top-color: rgba(249,242,233,.16); }

/* ---- Accordion (.bh-acc) — canonical white working-page accordion (FAQ, expandable
       rows). One open at a time per [data-acc]; data-acc="multi" allows several. JS
       handler lives in site.js. (Shared component — used by /contact/ and the member-area
       redesign as pages migrate. Rule #9.) ---- */
.bh-acc             { display: flex; flex-direction: column; gap: 12px; }
.bh-acc__item       { background: var(--card); border: 1px solid var(--line); border-radius: var(--card-radius);
                      overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s; }
.bh-acc__item:hover { border-color: rgba(168,124,80,.55); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.bh-acc__item.is-open { border-color: var(--bronze); box-shadow: var(--shadow-md); }
.bh-acc__row        { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: none;
                      border: 0; font-family: inherit; text-align: left; cursor: pointer; color: var(--text); }
.bh-acc__row:hover  { background: linear-gradient(var(--acc-hover), var(--acc-hover)), #fff; }
.bh-acc__item.is-open .bh-acc__row { background: linear-gradient(var(--acc-hover), var(--acc-hover)), #fff; }
.bh-acc__ttl        { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.bh-acc__sub        { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px; }
.bh-acc__meta       { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--help); }
@media (max-width: 600px) { .bh-acc__meta { display: none; } }
.bh-acc__chev       { flex: 0 0 auto; width: 18px; height: 18px; color: var(--bronze); transition: transform .25s, color .2s; }
.bh-acc__item.is-open .bh-acc__chev { transform: rotate(180deg); color: var(--bronze-dk); }
.bh-acc__panel      { display: none; }
.bh-acc__item.is-open .bh-acc__panel { display: block; }
.bh-acc__inner      { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.bh-acc__inner p:first-child { margin-top: 14px; }
.bh-acc__inner p    { color: var(--text); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.bh-acc__inner p:last-child { margin-bottom: 0; }

/* ---- Grids ---- */
.bh-grid            { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.bh-grid--tight     { gap: 14px; }
.bh-grid--2         { grid-template-columns: repeat(2, 1fr); }
.bh-grid--3         { grid-template-columns: repeat(3, 1fr); }
.bh-grid--4         { grid-template-columns: repeat(4, 1fr); }

/* ---- Badges / pills ---- */
.bh-badge           { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
                      border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
                      text-transform: uppercase; line-height: 1; background: #eef1f4; color: #374151; }
.bh-badge--accent   { background: rgba(1,154,224,.12); color: var(--info-text); }
.bh-badge--bronze   { background: rgba(168,124,80,.16); color: var(--bronze-dk); }
.bh-badge--ok       { background: var(--ok-bg); color: var(--ok-text); }
.bh-badge--warn     { background: var(--warn-bg); color: var(--warn-text); }
.bh-badge--soon     { background: #ede9fe; color: #5b21b6; }
.bh-badge--reversed { background: var(--err-bg); color: var(--err-text); }
.bh-badge--live     { background: var(--err-bg); color: var(--err-text); }
.bh-badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                      background: currentColor; animation: bh-pulse 1.4s ease-in-out infinite; }
@keyframes bh-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---- Stat blocks ---- */
.bh-stats           { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.bh-stat            { padding: 18px 20px; background: var(--card); border: 1px solid var(--line);
                      border-radius: var(--card-radius); }
.bh-stat__num       { display: block; font-family: var(--font-heading); font-weight: 700;
                      font-size: clamp(24px, 3vw, 32px); line-height: 1; color: var(--text);
                      border-bottom: 3px solid var(--accent); padding-bottom: 6px; width: max-content; }
.bh-stat__lbl       { display: block; margin-top: 10px; font-size: 12.5px; letter-spacing: .04em;
                      text-transform: uppercase; color: var(--muted); }

/* ---- Clickable stat (KPI drill-down) ----
   A dashboard KPI number that links to the exact list of records behind it.
   The whole tile becomes the hit target: zero the tile padding and hand it to
   the inner anchor so the hover wash + focus ring fill the full box. Works in
   both dashboard (cream-tinted .bh-stat) and /admin/ (plain card) contexts,
   since the anchor inherits the tile's border-radius + colour. */
.bh-stat--link      { padding: 0; position: relative; }
.bh-stat__link      { display: block; padding: 18px 20px; color: inherit; text-decoration: none;
                      border-radius: inherit; transition: background .15s ease, box-shadow .15s ease,
                      transform .15s ease; }
.bh-stat__link::after { content: "\2197"; position: absolute; top: 12px; right: 14px; font-size: 13px;
                      line-height: 1; color: var(--bronze); opacity: .32;
                      transition: opacity .15s ease, transform .15s ease; }
.bh-stat__link:hover  { background: rgba(168, 124, 80, .09);
                      box-shadow: 0 10px 22px -14px rgba(43, 30, 18, .38); transform: translateY(-1px); }
.bh-stat__link:hover::after { opacity: 1; transform: translate(1px, -1px); }
.bh-stat__link:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ---- Progress bars ---- */
.bh-progress        { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bh-progress__bar   { height: 100%; border-radius: inherit; background: var(--accent);
                      transition: width .4s ease; }
.bh-progress__bar--bronze { background: var(--bronze); }
.bh-progress__meta  { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
                      font-size: 12px; color: var(--help); }

/* ---- Meta line (dot-separated facts) ---- */
.bh-meta            { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                      font-size: 13px; color: var(--help); margin: 0; padding: 0; list-style: none; }
.bh-meta__item      { display: inline-flex; align-items: center; gap: 6px; }
.bh-dot             { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ---- List rows (continue / archive / sessions) ---- */
.bh-rows            { display: flex; flex-direction: column; border: 1px solid var(--line);
                      border-radius: var(--card-radius); overflow: hidden; background: var(--card); }
.bh-row             { display: flex; align-items: center; gap: 16px; padding: 16px 18px;
                      border-bottom: 1px solid var(--line); }
.bh-row:last-child  { border-bottom: 0; }
.bh-row__thumb      { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
                      background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
                      color: var(--bronze); }
.bh-row__body       { flex: 1 1 auto; min-width: 0; }
.bh-row__title      { margin: 0 0 4px; font-weight: 600; font-size: 15px; color: var(--text);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-row__meta       { margin: 0; font-size: 13px; color: var(--help); }
.bh-row__action     { flex: 0 0 auto; }

/* ---- Separated variant (.bh-rows--cards) ----
   The default list is one bordered block with hairline separators, which reads
   well when every row is a single line. A session row is not: it carries a
   header, an actions line, sometimes a notice — and on the coach console a
   whole notes form — so consecutive rows ran together into one wall with no
   obvious break between one session and the next. This variant drops the outer
   frame and gives each row its own card with air around it, so the eye gets a
   boundary where one session ends. The hairline separator goes with it: the
   gap IS the separator now, and keeping both drew a line across the bottom of
   every card.

   24px, not the 16 this shipped with: a coach card runs 550px tall (header,
   journal line, summary, notes form), and a gutter has to read as a break at
   that height, not as a hairline. The member card is 191px, where 24 is still
   comfortable. One value for both, because they are one component. */
.bh-rows--cards            { border: 0; border-radius: 0; overflow: visible;
                             background: none; gap: 24px; }
.bh-rows--cards > .bh-row  { border: 1px solid var(--line); border-radius: var(--card-radius);
                             background: var(--card); padding: 18px 20px;
                             box-shadow: 0 1px 2px rgba(31, 22, 12, .05); }

/* ---- Tabs ---- */
.bh-tabs            { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line);
                      margin: 0 0 24px; }
.bh-tab             { appearance: none; background: none; border: 0; cursor: pointer;
                      padding: 12px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
                      color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
                      transition: color .15s, border-color .15s; }
.bh-tab:hover       { color: var(--text); }
.bh-tab.is-active   { color: var(--accent); border-bottom-color: var(--accent); }
.bh-tabpanel[hidden]{ display: none; }
/* .bh-card sets display:flex, which overrides the UA [hidden] rule — restore it
   so a server-rendered `hidden` card (e.g. an empty "New this week") disappears. */
.bh-card[hidden]    { display: none; }

/* ---- Toolbar: search + filter chips ---- */
.bh-toolbar         { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
                      justify-content: space-between; margin: 0 0 26px; }
.bh-search          { flex: 1 1 260px; max-width: 420px; position: relative; }
.bh-search input    { width: 100%; box-sizing: border-box; height: var(--btn-height-md);
                      padding: 0 16px 0 42px; border: 1px solid var(--line); border-radius: 999px;
                      font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--card); }
.bh-search input:focus { outline: none; border-color: var(--accent);
                      box-shadow: 0 0 0 3px rgba(1,154,224,.18); }
.bh-search::before  { content: ""; position: absolute; left: 16px; top: 50%; width: 15px; height: 15px;
                      transform: translateY(-50%); background: var(--help);
                      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.47 10.03l4.25 4.24 1.41-1.41-4.24-4.25A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat;
                      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.47 10.03l4.25 4.24 1.41-1.41-4.24-4.25A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.bh-chips           { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-chip            { appearance: none; cursor: pointer; padding: 7px 14px; border-radius: 999px;
                      border: 1px solid var(--line); background: var(--card); color: var(--muted);
                      font-family: var(--font-body); font-size: 13px; font-weight: 600;
                      transition: .15s; }
.bh-chip:hover      { border-color: var(--accent); color: var(--text); }
.bh-chip.is-on      { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Forms (rendered now; wiring deferred to backend phase) ---- */
.bh-form            { display: flex; flex-direction: column; gap: 18px; }
.bh-form-row        { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.bh-field           { display: flex; flex-direction: column; gap: 7px; }
.bh-label           { font-size: 13px; font-weight: 600; color: var(--text-dark); letter-spacing: .01em; }
/* Canonical form fields — solid white fill, cool-neutral border, blue hover/focus.
   The /contact/ form is the reference; full spec documented in BRAND.md › Form fields.
   One rule, whole site (Rule #9) — never write per-page input CSS.
   NOTE: .bh-search input is intentionally EXCLUDED — it's a pill field with a
   left icon gutter (see .bh-search rules above); the generic box style here
   would clobber its border-radius + left padding and collide with the icon. */
.bh-input, .bh-select, .bh-textarea {
                      width: 100%; box-sizing: border-box; padding: 11px 14px; font-family: var(--font-body);
                      font-size: 15px; color: var(--text); background: #fff;
                      border: 1.5px solid #c6ccd3; border-radius: 8px;
                      box-shadow: 0 1px 2px rgba(15,13,18,.04);
                      transition: border-color .15s, box-shadow .15s, background .15s; }
/* Long-text default: eight lines. A short box invites a short answer, and these
   questions want a paragraph. 8 × line-height + the 11px padding pair + the
   1.5px border pair; em resolves against this element's own 15px, so the box
   still holds eight lines if the type scale ever moves. Contexts that genuinely
   need another size (chat composer, notebook editor, journal) override locally. */
.bh-textarea        { line-height: 1.5; min-height: calc(8 * 1.5em + 22px + 3px); resize: vertical; }
.bh-input:hover, .bh-select:hover, .bh-textarea:hover, .bh-search input:hover {
                      border-color: var(--accent); }
.bh-input:focus, .bh-select:focus, .bh-textarea:focus, .bh-search input:focus {
                      outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.20); background-color: #fff; }
.bh-input::placeholder, .bh-textarea::placeholder { color: #9aa3ad; }
.bh-input:disabled, .bh-select:disabled, .bh-textarea:disabled {
                      background: #f3f4f6; border-color: #dfe3e8; color: var(--help); cursor: not-allowed; }
/* Select: drop the generic native OS arrow for an on-brand bronze chevron. One rule, every select. */
.bh-select          { appearance: none; -webkit-appearance: none; -moz-appearance: none;
                      padding-right: 40px; cursor: pointer;
                      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b4f3a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
                      background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.bh-select::-ms-expand { display: none; }
.bh-hint            { font-size: 12.5px; color: var(--help); }
/* Inline result line under a form's submit button ("Sending…", an error). The
   same pattern the footer newsletter and the account save-message hand-rolled;
   shared here so a fourth form doesn't copy it a fourth time (Rule #9).
   min-height keeps the button from jumping when a message appears. */
.bh-formstatus         { margin: 0; font-size: 14px; min-height: 1px; color: var(--muted); }
.bh-formstatus.is-err  { color: var(--err-text, #b42318); }

/* ---- Timezone / searchable picker (.tzpick) — shared dropdown control with a
   blue, full-width hover bar. Used by /book/ (reusable; mirrors the meetings tz dropdown). ---- */
.tzpick               { position: relative; width: 340px; max-width: 100%; }
.tzpick__btn          { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                        width: 100%; min-height: var(--btn-height-md); padding: 10px 14px; background: #fff;
                        border: 1.5px solid #c6ccd3; border-radius: 8px; cursor: pointer;
                        font: inherit; font-size: 15px; color: var(--text); text-align: left;
                        transition: border-color .15s, box-shadow .15s; }
.tzpick__btn:hover    { border-color: var(--accent); }
.tzpick.is-open .tzpick__btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.20); }
.tzpick__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.35); }
.tzpick__btn svg      { width: 14px; height: 9px; flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.tzpick__current      { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzpick.is-open .tzpick__btn svg { transform: rotate(180deg); }
.tzpick__panel        { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
                        background: #fff; border: 1px solid var(--line); border-radius: 10px;
                        box-shadow: var(--shadow-card); overflow: hidden; display: none; }
.tzpick.is-open .tzpick__panel { display: block; }
.tzpick__search       { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 0;
                        border-bottom: 1px solid var(--line); font: inherit; font-size: 14px; outline: none; }
.tzpick__search:focus { border-bottom-color: var(--accent); }
.tzpick__search::placeholder { color: var(--help); }
.tzpick__list         { max-height: 248px; overflow-y: auto; overflow-x: hidden; }
.tzpick__opt          { padding: 11px 16px; font-size: 14px; color: var(--text); cursor: pointer;
                        white-space: nowrap; transition: background .12s, color .12s; }
.tzpick__opt:hover, .tzpick__opt.is-active { background: var(--accent); color: #fff; }
.tzpick__opt.is-selected { background: rgba(1,154,224,.10); color: var(--text); font-weight: 600; }
.tzpick__opt.is-selected:hover { background: var(--accent); color: #fff; }
.tzpick__empty        { padding: 14px 16px; font-size: 13px; color: var(--help); }
/* The dropdown and its "Save as default" button are ONE line (shared/tz-picker.php).
   They must stay next to each other: /meetings/ spaces its toolbar out with
   space-between, which would otherwise fling the button across the page. */
.tzpick-row           { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* "Save as default" — shown by initTzPicker to any logged-in member. It is a
   .bh-btn like every other button on the site (shared/tz-picker.php carries the
   classes), so it matches their height, type and hover; .tzpick-save itself is
   only the JS hook plus the one rule .bh-btn does not cover. */
.tzpick-save[hidden]  { display: none; }

/* ---- Password field with a show/hide toggle (any .bh-pw wrapper) ---- */
.bh-pw              { position: relative; display: block; }
.bh-pw .bh-input    { padding-right: 46px; }
.bh-pw__toggle      { position: absolute; top: 0; right: 0; width: 44px; height: 100%;
                      display: grid; place-items: center; padding: 0; background: none; border: 0;
                      color: var(--help); cursor: pointer; border-radius: 8px; }
.bh-pw__toggle:hover{ color: var(--text); }
.bh-pw__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1,154,224,.35); }
.bh-pw__icon        { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
                      stroke-linecap: round; stroke-linejoin: round; }
.bh-pw__icon--off   { display: none; }
.bh-pw__toggle.is-on .bh-pw__icon--eye { display: none; }
.bh-pw__toggle.is-on .bh-pw__icon--off { display: block; }

/* ---- On/off toggle switch (shared component — see shared/switch.php) ----
   Used on /account/preferences.php and every admin on/off control. The "on"
   colour reads --bh-switch-on, defaulting to --accent (brand blue #019ae0),
   which resolves to blue in both the member :root and the admin .adm-shell
   scope — so every switch is blue site-wide with no per-page restyle. Set
   --bh-switch-on in a scope to override. */
.pref-switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; display: inline-block; vertical-align: middle; }
.pref-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pref-switch__track { position: absolute; inset: 0; background: #cfcfcf; border-radius: 999px; transition: background .18s; }
.pref-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.pref-switch input:checked + .pref-switch__track { background: var(--bh-switch-on, var(--accent)); }
.pref-switch input:checked + .pref-switch__track::after { transform: translateX(22px); }
.pref-switch input:focus-visible + .pref-switch__track { box-shadow: 0 0 0 3px rgba(1,154,224,.30); }
.pref-switch input:disabled { cursor: default; }
.pref-switch input:disabled + .pref-switch__track { opacity: .5; }

/* ---- Custom dropdown (bh-select) — progressive enhancement of <select data-bhselect>.
   site.js builds this branded listbox and keeps the native <select> in the DOM
   (visually hidden) so forms still submit and there's a no-JS fallback. Colours use
   brand tokens, so it reads on-brand on member pages and neutral inside .adm-shell. */
.bh-dd { position: relative; display: inline-block; vertical-align: middle; }
.bh-dd__native { display: none !important; }  /* JS-added class; with no JS the native <select> stays visible (fallback) */
.bh-dd__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 104px; min-height: 44px; padding: 10px 14px; background: #fff; border: 1.5px solid #c6ccd3; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; color: var(--text); text-align: left; transition: border-color .15s, box-shadow .15s; }
.bh-dd__btn:hover { border-color: var(--accent); }
.bh-dd.is-open .bh-dd__btn, .bh-dd__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.20); }
.bh-dd__label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-dd__chev { display: inline-flex; flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.bh-dd.is-open .bh-dd__chev { transform: rotate(180deg); }
.bh-dd__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card, 0 10px 28px rgba(20,20,20,.16)); overflow: hidden; display: none; }
.bh-dd.is-open .bh-dd__panel { display: block; }
.bh-dd__list { max-height: 248px; overflow-y: auto; overflow-x: hidden; }
/* <optgroup> heading inside the branded dropdown. role="presentation", never
   selectable — it exists so a long grouped list (timezones) can be scanned. */
.bh-dd__group { padding: 10px 16px 5px; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted, #6a6157); cursor: default; white-space: nowrap; }
.bh-dd__group:not(:first-child) { border-top: 1px solid rgba(0,0,0,.07); margin-top: 4px; }
.bh-dd__opt { padding: 11px 16px; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.bh-dd__opt:hover, .bh-dd__opt.is-active { background: var(--accent); color: #fff; }
.bh-dd__opt[aria-selected="true"] { background: rgba(1,154,224,.10); color: var(--text); font-weight: 600; }
.bh-dd__opt[aria-selected="true"]:hover, .bh-dd__opt[aria-selected="true"].is-active { background: var(--accent); color: #fff; }

/* ---- Custom date+time picker (bh-dt) — branded calendar replacing the native
   <input type="datetime-local"> popup (which the OS draws and CSS can't theme).
   site.js builds it; the native input stays hidden to carry the submit value. ---- */
.bh-dt { position: relative; display: inline-block; vertical-align: middle; }
.bh-dt__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 104px; min-height: 44px; padding: 10px 14px; background: #fff; border: 1.5px solid #c6ccd3; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; color: var(--text); text-align: left; transition: border-color .15s, box-shadow .15s; }
.bh-dt__btn:hover { border-color: var(--accent); }
.bh-dt.is-open .bh-dt__btn, .bh-dt__btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1,154,224,.20); }
.bh-dt__lbl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-dt__ico { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.bh-dt__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 300px; max-width: 92vw; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card, 0 10px 28px rgba(20,20,20,.16)); padding: 12px; display: none; }
.bh-dt__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bh-dt__moy { font-weight: 700; font-size: 14px; color: var(--text); }
.bh-dt__arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); }
.bh-dt__arrow:hover { background: var(--bg-alt); color: var(--text); }
.bh-dt__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bh-dt__dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.bh-dt__day { aspect-ratio: 1 / 1; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.bh-dt__day:hover { background: rgba(1,154,224,.12); }
.bh-dt__day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.bh-dt__day.is-selected { background: var(--accent); color: #fff; }
.bh-dt__timerow { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bh-dt__timelbl { font-size: 13px; font-weight: 600; color: var(--text); }
.bh-dt__time { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 10px; border: 1.5px solid #c6ccd3; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: #fff; color-scheme: light; }
/* ---- Auth card (shared shell: /login + /password-reset) ---- */
.bh-authshell       { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center;
                      justify-content: center; padding: clamp(40px, 8vh, 96px) 20px;
                      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.03) 100%),
                      url('/assets/images/hfm-cream-bg.webp') center/cover no-repeat, var(--bg-alt); }
.bh-authcard        { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line);
                      border-radius: 14px; padding: clamp(28px, 4vw, 44px); overflow: hidden;
                      box-shadow: 0 18px 40px -18px rgba(0,0,0,.18), 0 4px 12px -4px rgba(0,0,0,.06); }
/* Leather crown band: full-bleed header strip (breaks out of the card padding) with the
   medallion enlarged and overlapping onto the card. Shared by /login + /password-reset. */
.bh-authcard__crown { position: relative; display: flex; justify-content: center; align-items: flex-end;
                      height: 150px; margin: clamp(-44px, -4vw, -28px) clamp(-44px, -4vw, -28px) 64px;
                      border-radius: 14px 14px 0 0;
                      background: linear-gradient(180deg, rgba(20,12,6,.22), rgba(20,12,6,.55)),
                      url('/assets/images/hfm-header-bg.webp') center/cover no-repeat; }
.bh-authcard__crown img { position: absolute; left: 50%; bottom: -52px; transform: translateX(-50%);
                      width: 118px; height: 118px; border-radius: 50%;
                      box-shadow: 0 6px 18px -6px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.92),
                      0 0 34px 6px rgba(255,224,178,.42); }
@media (max-width: 560px) {
  .bh-authcard__crown     { height: 120px; margin-bottom: 54px; }
  .bh-authcard__crown img { width: 100px; height: 100px; bottom: -44px; }
}
.bh-authcard__eyebrow { display: block; text-align: center; color: var(--bronze); font-size: 11px;
                      font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px; }
.bh-authcard__h     { text-align: center; margin: 0 0 6px; font-family: var(--font-heading);
                      font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.bh-authcard__sub   { text-align: center; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.bh-authcard .bh-form { gap: 14px; }
.bh-authcard .bh-field label,
.bh-authcard .bh-label { font-size: 12px; font-weight: 700; letter-spacing: .08em;
                      text-transform: uppercase; color: var(--bronze-dk); }
.bh-authcard__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
                      cursor: pointer; user-select: none; }
.bh-authcard__remember input { width: 16px; height: 16px; accent-color: var(--bronze); }
.bh-authspinner     { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
                      border-radius: 50%; animation: bh-authspin .7s linear infinite; display: none; }
.bh-btn.is-loading .bh-authspinner { display: inline-block; }
.bh-btn.is-loading .bh-btn__icon   { display: none; }
@keyframes bh-authspin { to { transform: rotate(360deg); } }
.bh-authmeta        { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 13px; }
.bh-authmeta--center { justify-content: center; }
.bh-authmeta--end    { justify-content: flex-end; }
.bh-authmeta--col    { flex-direction: column; align-items: center; gap: 6px; }
/* Meta-link color applies to plain links only — a .bh-btn placed here keeps its own CTA color. */
.bh-authmeta a:not(.bh-btn)      { color: var(--bronze-dk); text-decoration: none; font-weight: 600; }
.bh-authmeta a:not(.bh-btn):hover { color: var(--accent); }
/* Visually-hidden but screen-reader-available (labels, status text). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Leather footer band (login only): mirrors the crown header. Full-bleed to the
   card edges with a shallow V-notch top edge; light text for contrast on leather. */
.bh-authjoin        { position: relative; text-align: center;
                      margin: 30px clamp(-44px, -4vw, -28px) clamp(-44px, -4vw, -28px);
                      padding: 42px 24px 22px; border: 0;
                      font-size: 14px; color: rgba(249, 242, 233, .82);
                      background: linear-gradient(180deg, rgba(20,12,6,.32), rgba(20,12,6,.60)),
                      url('/assets/images/hfm-header-bg.webp') center/cover no-repeat;
                      clip-path: polygon(0 0, 50% 22px, 100% 0, 100% 100%, 0 100%); }
.bh-authjoin a      { color: #fff; font-weight: 700; text-decoration: none; }
.bh-authjoin a:hover { color: var(--bronze); }
@media (max-width: 560px) {
  .bh-authjoin { margin-top: 24px; padding-top: 34px;
                 clip-path: polygon(0 0, 50% 16px, 100% 0, 100% 100%, 0 100%); }
}

/* ---- Notes / alerts ---- */
.bh-note            { padding: 14px 16px; border-radius: 10px; background: var(--bg-alt);
                      border: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--muted); }
.bh-alert           { padding: 13px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5;
                      border: 1px solid var(--line); }
.bh-alert--ok       { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.bh-alert--warn     { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.bh-alert--err      { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.bh-alert--info     { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* ---- Mock-data flag (design-first phase ONLY — strip when wiring real data) ---- */
.bh-mock            { position: relative; }
.bh-mockflag        { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
                      border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
                      text-transform: uppercase; color: var(--bronze-dk);
                      background: repeating-linear-gradient(45deg, #f7efe2, #f7efe2 6px, #efe3cd 6px, #efe3cd 12px);
                      border: 1px dashed var(--bronze); }
.bh-mockflag::before{ content: "\25C6"; font-size: 9px; }
.bh-mockbar         { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
                      background: repeating-linear-gradient(45deg, #f7efe2, #f7efe2 8px, #efe3cd 8px, #efe3cd 16px);
                      border: 1px dashed var(--bronze); border-radius: 8px; font-size: 12.5px;
                      color: var(--bronze-dk); margin: 0 0 18px; }

/* ---- Empty state ---- */
.bh-empty           { text-align: center; padding: clamp(36px, 6vw, 64px) 20px; color: var(--muted); }
.bh-empty__icon     { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--bronze); opacity: .55; }
.bh-empty__icon svg { width: 100%; height: 100%; fill: currentColor; }
.bh-empty__h        { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 700;
                      font-size: 18px; color: var(--text); }

/* ---- Rating scale (.bh-scale) — 1–N labeled radio row. One source for the
       check-in / check-up / journal rating rows (was per-page .ci-scale / .cu-scale).
       Markup: <div class="bh-scale"><label><input type="radio"><span>N</span></label>…</div>
       with an optional <div class="bh-scale__ends"><span>lo</span><span>hi</span></div>.
       Radios are visually hidden; the label carries the fill + keyboard focus ring. Rule #9. ---- */
.bh-scale           { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bh-scale label     { flex: 1 1 0; min-width: 32px; text-align: center; border: 1px solid var(--line);
                      border-radius: 10px; padding: 11px 3px; cursor: pointer; font-weight: 800;
                      font-size: 15px; color: var(--text);
                      transition: border-color .12s, background .12s, color .12s; }
.bh-scale label:hover { border-color: var(--bronze); }
.bh-scale input     { position: absolute; opacity: 0; pointer-events: none; }
.bh-scale label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.bh-scale input:checked + span      { color: #fff; }
/* Radios are visually hidden, so surface keyboard focus on the label itself. */
.bh-scale label:has(input:focus-visible) { outline: none; border-color: var(--accent);
                      box-shadow: 0 0 0 3px rgba(1,154,224,.35); }
.bh-scale__ends     { display: flex; justify-content: space-between; font-size: 11.5px;
                      color: var(--muted); margin-top: 6px; }
/* Question block above a scale (was .ci-q / .cu-q). */
.bh-scale-q + .bh-scale-q { margin-top: 24px; }
.bh-scale-q__h      { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 2px; }
.bh-scale-q__sub    { font-size: 13.5px; color: var(--muted); margin: 0; }
@media (max-width: 480px) {
  .bh-scale       { gap: 4px; }
  .bh-scale label { padding: 9px 2px; min-width: 28px; }
}

/* ---- Line rows (.bh-linerows) — ruled label/value list for receipts, payoff
       summaries, order totals (was .bo-row on /account/buyout). Baseline-aligned,
       tabular figures; .bh-linerow--total emphasises the final row. Rule #9. ---- */
.bh-linerows        { margin: 22px 0; border-top: 1px solid var(--line); }
.bh-linerow         { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
                      padding: 13px 0; border-bottom: 1px solid var(--line); }
.bh-linerow__k      { font-size: 14px; color: var(--muted); }
.bh-linerow__v      { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bh-linerow--total .bh-linerow__k { color: var(--text); font-weight: 700; }
.bh-linerow--total .bh-linerow__v { font-size: 20px; color: var(--bronze-dk); }

/* ---- Detail rows (.bh-detailrow) — uppercase-label / value definition list used
       on account + order-detail cards (was .acct-row / .odr-row). Stacks on narrow. Rule #9. ---- */
.bh-detailrow       { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 12px 0;
                      border-bottom: 1px solid var(--line); font-size: 14px; }
.bh-detailrow:last-of-type { border-bottom: none; }
.bh-detailrow__l    { color: var(--bronze-dk); font-weight: 700; letter-spacing: .06em;
                      text-transform: uppercase; font-size: 11px; }
.bh-detailrow__v    { color: var(--text); }
@media (max-width: 560px) { .bh-detailrow { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Responsive collapse ---- */
@media (max-width: 980px) {
  .bh-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bh-stats   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .bh-grid, .bh-grid--2, .bh-grid--3, .bh-grid--4 { grid-template-columns: 1fr; }
  .bh-form-row { grid-template-columns: 1fr; }
  .bh-toolbar  { flex-direction: column; align-items: stretch; }
  .bh-search   { max-width: none; }
  .bh-cta-row  { flex-direction: column; align-items: stretch; }
  .bh-cta-row .bh-btn { width: 100%; }
  .bh-row      { flex-wrap: wrap; }
  .bh-row__action { width: 100%; }
  .bh-row__action .bh-btn { width: 100%; }
}
@media (max-width: 460px) {
  .bh-stats { grid-template-columns: 1fr; }
}

/* ===================== .bh-brand — THE DASHBOARD SKIN =====================
 * The member dashboard (/dashboard/) is the site's default styling template:
 * its element-level look, promoted here (2026-08-27) from that page's local
 * CSS so ANY surface adopts it by carrying one class — warm canvas, weight-800
 * card headings, tracked bronze eyebrows, feature-card depth, cream-tinted
 * stat tiles. Carried today by the member dashboard <main> and by the /admin/
 * console column (admin_layout_open(..., ['brand' => true]) — see the
 * .adm-main.bh-brand token bridge in admin.css). Restyling further admin
 * pages to the brand template = passing that option, nothing else.
 *
 * Declarations that restyle a bh-* element are FULL restatements (size +
 * color + margin), not deltas: at (0,2,0) they must also win over admin.css's
 * neutral ".adm-main h2/h3/p" reset (0,1,1) when the class sits inside the
 * admin shell. Do not trim them back to deltas. */
.bh-brand { background: var(--bg-warm); }
.bh-brand .bh-card__h {
  margin: 0 0 6px; font-family: var(--font-heading); font-weight: 800;
  font-size: 18px; line-height: 1.28; letter-spacing: -0.01em; color: var(--text);
}
.bh-brand .bh-card__tag {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bronze);
}
/* Feature card (e.g. the dashboard's offers card) — emphasised by DEPTH only,
   never an accent border. */
.bh-brand .bh-card--feature {
  box-shadow: 0 2px 6px rgba(20,20,20,.05), 0 26px 50px -24px rgba(43,30,18,.34);
}
/* Stat tiles read as warm nested surfaces on the white cards: cream fill
   (#F9F2E9 lightened via rgba) + bronze-tinted hairline. */
.bh-brand .bh-stat {
  background: rgba(249, 242, 233, 0.72);
  border: 1px solid rgba(168, 124, 80, 0.18);
  border-radius: 10px;
}

/* ---- .bh-table — the dense data table on the brand skin ----
 * The one thing the member side never had, and the reason the table-heavy
 * admin pages (bookings, contacts, reports) could not move onto the dashboard
 * template. Built to the same language as the dashboard's cards: white
 * surface, cream header, tracked bronze labels, hairline rows, cream hover.
 *
 * Structure:
 *   <div class="bh-table__wrap">      // owns the card surface + side-scroll
 *     <table class="bh-table"> … </table>
 *   </div>
 * The wrapper is what scrolls on a narrow screen, so the PAGE never scrolls
 * sideways — a table is the one component that cannot simply reflow.
 *
 * Cell helpers: .bh-table__num (tabular figures, right-aligned),
 * .bh-table__nowrap (a date or a status that must not break),
 * .bh-table__muted (secondary line under a value).
 */
.bh-table__wrap {
  background: var(--card);
  border: 1px solid rgba(168, 124, 80, .18);
  border-radius: var(--card-radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.bh-table th {
  position: sticky; top: 0;
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  background: rgba(249, 242, 233, .92);
  border-bottom: 1px solid rgba(168, 124, 80, .22);
  white-space: nowrap;
}
.bh-table td {
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.bh-table tbody tr:first-child td { border-top: 0; }
.bh-table tbody tr:hover td { background: rgba(249, 242, 233, .55); }
.bh-table a { color: var(--accent); font-weight: 600; text-decoration: none; }
.bh-table a:hover { text-decoration: underline; }
.bh-table__num    { text-align: right; font-variant-numeric: tabular-nums; }
.bh-table__nowrap { white-space: nowrap; }
.bh-table__muted  { display: block; font-size: 12.5px; color: var(--help); }
/* Empty state inside the same surface, so "no rows" is not a bare white box. */
.bh-table__empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ===================== MEMBERS MAP (custom, tile-less) =====================
 * No map tiles, no 3rd-party logo/attribution. The country polygons (drawn
 * from a local TopoJSON by members-map.js) ARE the map. Count-only bubbles. */
.bh-map { position: relative; border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; }
.bh-map .leaflet-container,
.bh-map.leaflet-container { background: #e8eef1; font-family: var(--font-body); }
.bh-map--tall  .leaflet-container,
.bh-map--tall  { min-height: 480px; }

.bh-map-bubble-wrap { background: transparent !important; border: none !important; }
.bh-map-bubble {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%; color: #fff; font-weight: 800; line-height: 1;
  font-family: var(--font-body);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.bh-map-bubble:hover { transform: scale(1.09); box-shadow: 0 6px 16px rgba(0,0,0,0.34); }
.bh-map-bubble--country { background: var(--bronze); }
.bh-map-bubble--city    { background: var(--accent); }

.bh-map-pop__place { font-weight: 800; color: var(--text); font-size: 13px; }
.bh-map-pop__count { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bh-map .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.bh-map .leaflet-popup-content { margin: 10px 12px; }

/* PII-reassurance note shown under every members map */
.bh-map-note { margin: 12px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.bh-map-note strong { color: var(--text); font-weight: 700; }

/* ── Vector-charcoal members map (shared on-brand look) ──────────────────────
   Single source for the bronze-on-charcoal vector map used by /members-map (and
   any future "members near you" page). Mirrors the /join hero map. Wrap the
   Leaflet target el in .bh-vmap; add .bh-vmap--framed for the bronze top/bottom
   rule + lift shadow. Engine: assets/js/members-map.js, basemap:'vector-charcoal'.
   Selectors are scoped (.bh-vmap *) so they override both Leaflet's defaults and
   the legacy .bh-dot/.bh-map-bubble rules above by specificity — load-order-safe.
   NOTE: /join still carries an inline copy of these primitives; fold it into this
   class next time that (locked) page is touched. */
.bh-vmap { position: relative; overflow: hidden; }
.bh-vmap .leaflet-container,
.bh-vmap.leaflet-container { background: #1d1c17; font: inherit; }
/* Gold member dot (pixel size comes from Leaflet's inline iconSize). */
.bh-vmap .bh-dot {
  opacity: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9bf, #e3a94e);
  box-shadow: 0 0 7px 2px rgba(232,185,100,.6), 0 0 2px 1px rgba(255,240,200,.85);
}
/* Member-count cluster bubble — brand bronze, sized by total members. */
.bh-vmap .bh-cluster-wrap { background: transparent; }
.bh-vmap .bh-cluster {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 'Poppins', sans-serif; color: #1a130c;
  background: radial-gradient(circle at 35% 30%, #f4d08a, #d59a3f);
  border: 2px solid rgba(255,233,191,.9);
  box-shadow: 0 0 0 4px rgba(213,154,63,.22), 0 6px 16px rgba(0,0,0,.5);
}
.bh-vmap .bh-cluster--lg { font-size: 15px; }
/* Brand zoom controls — blue accent on charcoal (overrides Leaflet white). */
.bh-vmap .leaflet-control-zoom { border: 0; border-radius: 9px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.45); margin: 14px; }
.bh-vmap .leaflet-control-zoom a {
  width: 34px; height: 34px; line-height: 34px;
  background: var(--accent); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.28);
  font-size: 20px; font-weight: 800; text-decoration: none;
}
.bh-vmap .leaflet-control-zoom a:last-child { border-bottom: 0; }
.bh-vmap .leaflet-control-zoom a:hover { background: #0182bd; color: #fff; }
.bh-vmap .leaflet-control-zoom a.leaflet-disabled { background: #0a6c9c; color: rgba(255,255,255,.5); }
/* Framed variant: bronze rule top+bottom + lift shadow (desktop); flat on phones. */
.bh-vmap--framed { border-top: 2px solid #c79a63; border-bottom: 2px solid #c79a63; box-shadow: 0 20px 48px -14px rgba(0,0,0,.7); }
@media (max-width: 600px) { .bh-vmap--framed { border: 0; box-shadow: none; } }

/* ============ PAGE TITLE (.bh-ptitle) — interior sub-pages only, no hero ============ */
.bh-ptitle{padding:clamp(26px,4vw,40px) 0 6px;}
.bh-ptitle h1{font-size:clamp(24px,3.5vw,34px);font-weight:800;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);}
.bh-ptitle p{margin:0;color:#6b6055;font-size:15.5px;line-height:1.6;max-width:680px;}

/* ============ PROSE BLOCK (.bh-prose) — body-copy container on working pages ============ */
.bh-prose{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  box-shadow:0 1px 3px rgba(20,12,6,.06);padding:clamp(20px,3vw,36px);max-width:760px;}
.bh-prose--plain{border:0;box-shadow:none;background:transparent;padding:0;}
.bh-prose>:first-child{margin-top:0;}
.bh-prose>:last-child{margin-bottom:0;}
.bh-prose p,.bh-prose li{color:var(--ink);font-size:15.5px;line-height:1.75;}
.bh-prose p{margin:0 0 15px;}
.bh-prose h2{font-size:20px;font-weight:800;color:var(--ink);margin:30px 0 10px;letter-spacing:-.01em;}
.bh-prose h3{font-size:16px;font-weight:700;color:var(--ink);margin:22px 0 8px;}
.bh-prose ul,.bh-prose ol{margin:10px 0 16px;padding-left:22px;}
.bh-prose li{margin:5px 0;}
.bh-prose a{color:var(--accent);font-weight:600;}

/* ============ READ-ONLY FIELD (.bh-readfield) — non-editable display ============ */
.bh-readfield{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  box-sizing:border-box;padding:11px 14px;background:#f9f6f1;border:1.5px solid rgba(0,0,0,.1);
  border-radius:8px;font-size:15px;color:var(--ink);}
.bh-readfield>span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bh-readfield a{flex:0 0 auto;font-size:13px;}

/* ============ FILE UPLOAD (.bh-upload) — branded drag-drop + live preview ============ */
.bh-upload{position:relative;}
.bh-upload__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:30px 20px;text-align:center;cursor:pointer;background:#fff;
  border:2px dashed rgba(0,0,0,.15);border-radius:12px;
  transition:border-color .18s,background .18s,box-shadow .18s;color:#7c7264;}
.bh-upload__zone:hover{border-color:var(--bronze);box-shadow:0 2px 8px rgba(20,12,6,.08);}
.bh-upload__zone:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(1,154,224,.18);}
.bh-upload.is-drag .bh-upload__zone{border-color:var(--accent);border-style:solid;
  background:rgba(1,154,224,.05);}
.bh-upload__ico{width:38px;height:38px;color:var(--bronze);}
.bh-upload__ico svg{width:100%;height:100%;display:block;}
.bh-upload__lead{font-weight:700;color:var(--ink);font-size:15px;}
.bh-upload__lead b{color:var(--accent);}
.bh-upload__hint{font-size:12.5px;color:#7c7264;}
.bh-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.bh-upload__preview{display:none;align-items:center;gap:14px;padding:14px;background:#fff;
  border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 1px 3px rgba(20,12,6,.06);}
.bh-upload.has-file .bh-upload__zone{display:none;}
.bh-upload.has-file .bh-upload__preview{display:flex;}
.bh-upload__thumb{width:60px;height:60px;flex:0 0 auto;border-radius:8px;background:#f3ece0;
  display:grid;place-items:center;color:var(--bronze);overflow:hidden;}
.bh-upload__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.bh-upload__meta{flex:1 1 auto;min-width:0;text-align:left;}
.bh-upload__name{display:block;font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bh-upload__size{display:block;font-size:12.5px;color:#7c7264;}
.bh-upload__remove{flex:0 0 auto;background:none;border:0;color:#7c7264;cursor:pointer;font-size:13px;
  font-weight:700;padding:7px 10px;border-radius:7px;font-family:inherit;}
.bh-upload__remove:hover{color:#b91c1c;background:#fef2f2;}
.bh-upload__err{display:none;margin:8px 0 0;font-size:13px;color:#b91c1c;font-weight:600;}
.bh-upload.has-error .bh-upload__err{display:block;}
/* Camera capture trigger — hidden until site.js confirms a usable camera. */
.bh-upload__camera{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:10px 16px;
  background:#fff;border:1.5px solid var(--line,#e5dccb);border-radius:10px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);transition:border-color .15s,box-shadow .15s,color .15s;}
.bh-upload__camera:hover{border-color:var(--bronze);box-shadow:0 2px 8px rgba(20,12,6,.08);}
.bh-upload__camera:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(1,154,224,.18);}
.bh-upload.has-file .bh-upload__camera{display:none;}
.bh-upload__camico{width:20px;height:20px;color:var(--bronze);flex:0 0 auto;}
.bh-upload__camico svg{width:100%;height:100%;display:block;}
/* Busy state — an AJAX upload is in flight (bhImageUpload). */
.bh-upload.is-busy{opacity:.62;pointer-events:none;}
.bh-upload.is-busy .bh-upload__zone{border-style:solid;border-color:var(--accent);}
/* "Paste a link" row — an alternative to uploading a file (link + drag-drop + file). */
.bh-upload__linkrow{margin-top:10px;}
.bh-upload__linktoggle{background:none;border:0;padding:2px 4px;margin:0 -4px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:2px;border-radius:6px;}
.bh-upload__linktoggle:hover{color:var(--bronze);}
.bh-upload__linktoggle:focus-visible{outline:none;color:var(--bronze);box-shadow:0 0 0 3px rgba(1,154,224,.18);}
.bh-upload__linkfield{margin-top:8px;}
.bh-upload__linkfield[hidden]{display:none;}
.bh-upload__linkinput{width:100%;padding:10px 12px;border:1.5px solid var(--line,#e5dccb);border-radius:9px;
  font:inherit;font-size:14px;color:var(--ink);box-sizing:border-box;background:#fff;}
.bh-upload__linkinput:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(1,154,224,.18);}
/* Readability: the coach photo editor renders this dropzone inside the leather hero,
   where .adm-shell *{color:inherit} (equal specificity, loads later) beats every
   .bh-upload__* color rule and forces the labels to inherit the hero's cream text —
   invisible on the white zone. Pin literal dark colors at higher specificity
   (.bh-upload prefix, 0,2,0) so they win in every scope; "browse" + the paste-link
   toggle stay the blue accent. */
.bh-upload .bh-upload__zone{color:#5a5147;}
.bh-upload .bh-upload__lead{color:#141414;}
.bh-upload .bh-upload__lead b{color:#019ae0;}
.bh-upload .bh-upload__hint{color:#5a5147;}
.bh-upload .bh-upload__ico{color:#8f6539;}
.bh-upload .bh-upload__camera{color:#141414;}
.bh-upload .bh-upload__camico{color:#8f6539;}
.bh-upload .bh-upload__linktoggle{color:#019ae0;}

/* ============ CHOICE GROUP (.bh-choices) — radio/checkbox intake controls ============ */
/* Shared by the member booking page + the coach editor preview (Rule #9). */
.bh-choices{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.bh-choice{display:flex;align-items:center;gap:9px;font-weight:400;cursor:pointer;line-height:1.4;}
/* Branded, hit-target-sized control — matches the admin radio/checkbox rule in
   admin.css so a question looks the same to the coach and to the member. */
.bh-choice input{width:18px;height:18px;flex:0 0 auto;margin:0;accent-color:var(--accent);cursor:pointer;}

/* ============ YES / NO (.bh-yesno) — the two-answer intake question ============ */
/* Two buttons splitting the full width. The radio is still the control — it is
   absolutely positioned to fill its label, so the whole button is the hit target
   and native focus/arrow-key/required behaviour is untouched. Same white fill and
   #c6ccd3 border as .bh-input so it reads as one family; checked inverts to the
   accent, matching .bh-chip.is-on. */
.bh-yesno            { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bh-yesno__opt       { position: relative; display: block; cursor: pointer; }
/* The real radio, covering its button. opacity:0 rather than display:none so it
   stays focusable and keeps its place in the tab / arrow-key order. It is the
   FIRST child, so every state below styles the face with a `+` combinator. */
.bh-yesno__opt input { position: absolute; inset: 0; width: 100%; height: 100%;
                       margin: 0; opacity: 0; cursor: pointer; }
/* Same white fill and #c6ccd3 border as .bh-input so it reads as one family;
   checked inverts to the accent, matching .bh-chip.is-on. */
.bh-yesno__face      { display: flex; align-items: center; justify-content: center;
                       min-height: 48px; padding: 12px 16px; border: 1.5px solid #c6ccd3;
                       border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(15,13,18,.04);
                       font-size: 15px; font-weight: 600; color: var(--text);
                       text-align: center; line-height: 1.3;
                       transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.bh-yesno__opt:hover .bh-yesno__face      { border-color: var(--accent); }
.bh-yesno input:focus-visible + .bh-yesno__face { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.bh-yesno input:checked + .bh-yesno__face { background: var(--accent); border-color: var(--accent); color: #fff; }
.bh-yesno input:disabled + .bh-yesno__face { opacity: .65; }
.bh-yesno input:disabled                  { cursor: not-allowed; }

/* ============ RATING SLIDER (.bh-rating) — the 1–10 intake question ============ */
/* Full-bleed inside its field at every width: the track IS the scale, so cramping
   it would cost precision. --_pct is set by initRatingSliders() in site.js and
   paints the filled portion of the WebKit track (Firefox has ::-moz-range-progress).
   Until the member moves it the row reads "Not answered" and the track stays grey —
   see the hidden-input note in shared/intake-question-field.php. */
.bh-rating            { --_pct: 50%; display: block; width: 100%; }
/* The explicit height is the POINTER TARGET, not the track: an 8px track alone
   would leave an 8px-tall thing to hit. The track centres inside it. */
.bh-rating__slider    { -webkit-appearance: none; appearance: none; display: block;
                        width: 100%; height: 30px; margin: 6px 0 0;
                        background: transparent; cursor: pointer; }
.bh-rating__slider:focus { outline: none; }
/* track */
.bh-rating__slider::-webkit-slider-runnable-track {
                        height: 8px; border-radius: 999px;
                        background: linear-gradient(to right, var(--accent) var(--_pct), #dfe3e8 var(--_pct)); }
.bh-rating__slider::-moz-range-track    { height: 8px; border-radius: 999px; background: #dfe3e8; }
.bh-rating__slider::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
/* untouched: no fill, so a mid-track thumb never reads as an answer of 5 */
.bh-rating:not(.is-set) .bh-rating__slider::-webkit-slider-runnable-track { background: #dfe3e8; }
.bh-rating:not(.is-set) .bh-rating__slider::-moz-range-progress           { background: transparent; }
/* thumb — the same white fill + #c6ccd3 border as .bh-input, so it reads as one family */
.bh-rating__slider::-webkit-slider-thumb {
                        -webkit-appearance: none; appearance: none;
                        width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
                        background: #fff; border: 1.5px solid #c6ccd3;
                        box-shadow: 0 1px 3px rgba(15,13,18,.18);
                        transition: border-color .15s, box-shadow .15s; }
.bh-rating__slider::-moz-range-thumb {
                        width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
                        background: #fff; border: 1.5px solid #c6ccd3;
                        box-shadow: 0 1px 3px rgba(15,13,18,.18);
                        transition: border-color .15s, box-shadow .15s; }
.bh-rating__slider:hover::-webkit-slider-thumb { border-color: var(--accent); }
.bh-rating__slider:hover::-moz-range-thumb     { border-color: var(--accent); }
.bh-rating__slider:focus-visible::-webkit-slider-thumb {
                        border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.bh-rating__slider:focus-visible::-moz-range-thumb {
                        border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.bh-rating__slider:disabled { cursor: not-allowed; opacity: .65; }
/* scale ends + live readout */
.bh-rating__foot      { display: flex; align-items: center; justify-content: space-between;
                        gap: 12px; margin-top: 9px; }
.bh-rating__end       { font-size: 12.5px; color: var(--help); font-variant-numeric: tabular-nums; }
.bh-rating__val       { font-size: 13px; font-weight: 600; color: var(--help);
                        font-variant-numeric: tabular-nums; text-align: center; }
.bh-rating.is-set .bh-rating__val { font-size: 17px; font-weight: 700; color: var(--accent); }
/* Touch: a bigger thumb and a taller target. */
@media (pointer: coarse) {
  .bh-rating__slider                       { height: 36px; }
  .bh-rating__slider::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; }
  .bh-rating__slider::-moz-range-thumb     { width: 30px; height: 30px; }
}

/* ============ BOOKING FLOW section label (/book/ picker + confirm) ============ */
/* One rule for the eyebrow above each step's content — both pages had their own. */
.bk-section-label{font-size:12px;font-weight:700;color:var(--bronze-dk);
                  letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;}

/* ============ COACH AVATAR — the round portrait ============ */
/* Markup lives in shared/coach-avatar.php; this is its only styling (Rule #9).
   Bronze disc + white initial is the no-portrait fallback used site-wide.
   object-position: center top keeps a head in frame when a photo is a
   full-body crop — the same trick the nav avatar chip uses. */
.bh-coach-avatar{border-radius:50%;background:var(--bronze);color:#fff;
                 display:flex;align-items:center;justify-content:center;
                 font-weight:700;flex-shrink:0;overflow:hidden;line-height:1;}
.bh-coach-avatar--img{background:none;}
.bh-coach-avatar img{width:100%;height:100%;object-fit:cover;
                     object-position:center top;display:block;}
.bh-coach-avatar--sm{width:44px;height:44px;font-size:18px;}
.bh-coach-avatar--md{width:60px;height:60px;font-size:24px;}
.bh-coach-avatar--lg{width:76px;height:76px;font-size:30px;}

/* ============ BOOKING PICKER (.bk-*) — date column + slot grid ============ */
/* ONE source for the picker chrome (Rule #9). /book/ and /booking/reschedule.php
   are the same control — pick a day on the left, pick a time on the right — and
   each used to carry its own copy, which is how they drifted apart. Pages keep
   their own JS hook ids; only these class names are shared. */
.bk-panel        { background: var(--card); border: 1px solid var(--line);
                   border-radius: var(--card-radius-lg); box-shadow: var(--shadow-sm);
                   padding: clamp(16px, 2.5vw, 24px); }
.bk-tz-row       { display: flex; gap: 10px; align-items: center;
                   margin-bottom: 16px; flex-wrap: wrap; }
.bk-tz-row .bh-label { margin-bottom: 0; white-space: nowrap; }
.bk-slot-grid    { display: grid; grid-template-columns: 248px 1fr; gap: 18px; align-items: start; }
/* Scrollable date column */
.bk-date-col     { background: var(--bg-warm); border: 1px solid var(--line);
                   border-radius: var(--card-radius); padding: 8px;
                   max-height: 460px; overflow-y: auto; }
.bk-date         { display: flex; align-items: center; gap: 10px;
                   min-height: 44px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
                   font-size: 14px; transition: background .12s, color .12s; }
.bk-date:hover   { background: var(--bg-alt); }
.bk-date:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.bk-date.is-active { background: var(--accent); color: #fff; }
.bk-date.is-empty  { color: var(--muted); cursor: not-allowed; opacity: .6; }
/* Slot panel */
.bk-slot-col     { background: var(--card); border: 1px solid var(--line);
                   border-radius: var(--card-radius); padding: 18px; min-height: 300px; }
.bk-slot-tz-note { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.bk-slot-inner   { display: grid;
                   grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.bk-slot         { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line);
                   border-radius: 8px; background: var(--card); cursor: pointer;
                   font: inherit; font-size: 14px; font-weight: 600;
                   display: inline-flex; align-items: center; justify-content: center; text-align: center;
                   transition: border-color .12s, background .12s, color .12s; color: var(--text); }
.bk-slot:hover   { border-color: var(--accent); }
.bk-slot:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.bk-slot.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-empty-note   { color: var(--muted); text-align: center; padding: 40px 20px; margin: 0; }
@media (max-width: 760px) {
  .bk-slot-grid  { grid-template-columns: 1fr; }
  .bk-date-col   { max-height: 220px; }
}
@media (max-width: 460px) {
  .bk-tz-row     { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bk-slot-inner { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ============ CAMERA CAPTURE MODAL (.bh-cam) — live selfie → profile photo ============ */
.bh-cam[hidden]{display:none;}
.bh-cam{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;}
.bh-cam__backdrop{position:absolute;inset:0;background:rgba(15,10,5,.72);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.bh-cam__panel{position:relative;width:100%;max-width:440px;background:var(--cream,#F9F2E9);
  border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 32px);overflow:auto;}
.bh-cam__x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:#7c6a55;font-size:26px;line-height:1;cursor:pointer;}
.bh-cam__x:hover{background:rgba(0,0,0,.06);color:var(--ink);}
.bh-cam__title{margin:2px 0 0;font-size:19px;font-weight:800;color:var(--ink);text-align:center;letter-spacing:-.01em;}
.bh-cam__stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:#100c08;display:flex;align-items:center;justify-content:center;}
/* Legacy Safari <15 / iOS 14 lack aspect-ratio → the stage would collapse to 0
   height and the live preview would vanish. Give it a square-ish min-height. */
@supports not (aspect-ratio: 1 / 1){ .bh-cam__stage{ min-height:min(78vw,360px); } }
.bh-cam__video,.bh-cam__shot{width:100%;height:100%;object-fit:cover;display:block;}
/* [hidden] must always win inside the modal — .bh-btn/.bh-cam__video set display,
   which would otherwise override the UA [hidden]{display:none}. */
.bh-cam [hidden]{display:none!important;}
/* Round guide ring hinting the final circular avatar crop; ignores pointer events. */
.bh-cam__ring{position:absolute;inset:8%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(16,12,8,.28);border:2px solid rgba(249,242,233,.55);}
.bh-cam.is-shot .bh-cam__ring{display:none;}
.bh-cam__msg{position:absolute;left:15%;right:15%;top:50%;transform:translateY(-50%);margin:0;
  text-align:center;color:var(--cream,#F9F2E9);font-size:14px;font-weight:600;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;}
/* Empty = invisible, but the node stays in the a11y tree so it remains a live region
   (hiding an active live region with [hidden]/display:none can suppress announcements). */
.bh-cam__msg:empty{opacity:0;}
/* Screen-reader-only announcements for live↔review transitions. */
.bh-cam__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.bh-cam__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.bh-cam__actions .bh-btn{flex:1 1 auto;min-width:130px;justify-content:center;}
.bh-cam__switch{flex:1 1 100%!important;}
.bh-cam__shootdot{width:12px;height:12px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.35) inset;margin-right:2px;}
@media (max-width:420px){ .bh-cam__panel{padding:18px 16px 16px;} .bh-cam__title{font-size:17px;} }

/* ============ SUSPENDED NAV LOCKOUT ============
 * When body[data-state="suspended"] every nav + footer content link is
 * visually dimmed and unclickable (UX layer — server-side gates already
 * protect every content page). Links to account, billing, logout, and
 * policy pages remain fully functional.
 *
 * Allow-list: /account/ /account/orders/ /account/billing/ /suspended/
 *             /logout.php /privacy-policy/ /terms-of-service/ /refund-policy/
 *
 * Uses CSS Selectors L4 multi-argument :not() — supported by all modern browsers.
 */
body[data-state="suspended"] .hfm-nav__links a:not([href="/account/"],[href="/account/orders/"],[href="/account/billing/"],[href="/suspended/"],[href="/logout.php"],[href="/privacy-policy/"],[href="/terms-of-service/"],[href="/refund-policy/"]),
body[data-state="suspended"] .hfm-account-pop a:not([href="/account/"],[href="/account/orders/"],[href="/account/billing/"],[href="/suspended/"],[href="/logout.php"],[href="/privacy-policy/"],[href="/terms-of-service/"],[href="/refund-policy/"]),
body[data-state="suspended"] .hfm-mobile-drawer a:not([href="/account/"],[href="/account/orders/"],[href="/account/billing/"],[href="/suspended/"],[href="/logout.php"],[href="/privacy-policy/"],[href="/terms-of-service/"],[href="/refund-policy/"]),
body[data-state="suspended"] .hfm-footer a:not([href="/account/"],[href="/account/orders/"],[href="/account/billing/"],[href="/suspended/"],[href="/logout.php"],[href="/privacy-policy/"],[href="/terms-of-service/"],[href="/refund-policy/"]) {
  pointer-events: none;
  filter: blur(2.5px);
  opacity: .6;
  cursor: not-allowed;
  user-select: none;
}

/* Shared audio-favorites star — ghost when unsaved, filled accent when saved.
   Used on dashboard Continue widget and books chapter rows. */
.dash-fav { flex:0 0 auto; width:26px; height:26px; border:0; border-radius:50%;
  background:transparent; color:var(--help); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background .15s ease, color .15s ease; padding:0; }
.dash-fav svg path { fill:none; stroke:currentColor; stroke-width:1.6; transition:fill .15s ease, stroke .15s ease; }
.dash-fav:hover, .dash-fav:focus-visible { background:#efe7d9; color:var(--accent); outline:none; }
.dash-fav:hover svg path, .dash-fav:focus-visible svg path { stroke:var(--accent); }
.dash-fav[data-fav="1"] { color:var(--accent); }
.dash-fav[data-fav="1"] svg path { fill:var(--accent); stroke:var(--accent); }
/* Star promoted to a row's left slot (replaces the old play button), icon +50%. */
.dash-fav--lg { width:40px; height:40px; border-radius:10px; }

/* ============================================================================
   v2 design-system primitives (ported from the v2 redesign — first used by the
   /coaching/ directory). Hero band, coach cards, round avatar, and the coaching
   context bar. All custom properties referenced here are already defined in the
   :root block above. Namespaced bh-* — no other page references these yet.
   ============================================================================ */

/* Page hero — top-level pages (centered, leather background). */
.bh-hero{position:relative;color:var(--cream);text-align:center;padding:clamp(48px,8vw,92px) 24px;
  background:linear-gradient(180deg,rgba(20,12,6,.58),rgba(20,12,6,.74)),
    url('../images/hfm-header-bg.webp') center/cover no-repeat;}
.bh-hero__inner{max-width:780px;margin:0 auto;}
.bh-hero__eyebrow{display:inline-block;margin:0 0 14px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream-soft);}
.bh-hero h1{margin:0 0 14px;font-size:clamp(30px,4.6vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:#fff;}
.bh-hero__lead{margin:0 auto;max-width:620px;font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:var(--cream-soft);}
.bh-hero__cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.bh-hero--short{padding:clamp(36px,5vw,56px) 24px;}
/* Halved top padding — for heroes that open on a portrait, where the full
   clamp(48px,8vw,92px) leaves the photo floating away from the nav bar. */
.bh-hero--snug{padding-top:clamp(24px,4vw,46px);}
/* Centred portrait at the top of a hero. flex (not the .bh-avatar default
   inline-flex) so `margin:0 auto` actually centres the round host. */
.bh-hero__avatar{display:flex;margin:0 auto 20px;}

/* Coach cards (directory grid). */
.bh-coach{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--card-radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s,transform .18s;}
.bh-coach:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px);}
.bh-coach__photo{aspect-ratio:4/3;width:100%;object-fit:cover;object-position:center top;background:var(--bg-alt);display:block;}
.bh-coach__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;}
.bh-coach__name{font-size:18px;font-weight:800;color:var(--text);margin:0;line-height:1.2;}
.bh-coach__role{font-size:13px;color:var(--bronze-dk);font-weight:600;margin:0;}
.bh-coach__tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px;}
.bh-coach__bio{font-size:14px;color:var(--muted);line-height:1.55;margin:0;flex:1 1 auto;}
.bh-coach__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}

/* Round avatar — initials or a cropped headshot (object-fit:cover for <img>). */
.bh-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--bronze);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto;}
.bh-avatar--lg{width:84px;height:84px;font-size:28px;}
/* Hero portrait — double .bh-avatar--lg. The shared ring (::after) is inset:0,
   so it scales with the host automatically; nothing else needs a size. */
.bh-avatar--xl{width:168px;height:168px;font-size:56px;}

/* ============ PROFILE RING (shared) ============================================
   One asset — assets/images/avatar-ring.png — frames every round profile image
   sitewide: nav chip, account-menu avatar, coaching-directory avatars, messenger
   avatars and the account-page photo. Painted as an ::after overlay sitting flush
   to the circle, so the photo reads as fitting inside the ring. The admin sidebar
   mirrors this in admin.css; the coach portrait uses ::before (its ::after is the
   inner hairline). Rule #9: the ring's look lives in the SVG — change stroke-width
   there once and every avatar updates. */
.hfm-avatar-chip, .hfm-mega__avatar, .dm-avatar, .bh-avatar, .acct-photo__current { position: relative; }
.hfm-avatar-chip::after, .hfm-mega__avatar::after, .dm-avatar::after,
.bh-avatar::after, .acct-photo__current::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: url(../images/avatar-ring.png) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* The chip carried its own 2px white ring — the black profile ring replaces it. */
.hfm-avatar-chip { box-shadow: none; }
/* <img> avatars (coaching directory) are wrapped in a .bh-avatar host. Match the
   coach hero portrait: the photo is inset to 98%, absolutely centred, and clipped to
   the circle so its edge tucks just under the shared ring (::after) — the ring is the
   only frame, no colored gap. Initials fallbacks have no <img>, so they keep their
   bronze fill untouched. */
.bh-avatar > img.bh-avatar__img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 98%; height: 98%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.bh-avatar:has(> img.bh-avatar__img) { background: none; }

/* Coaching context bar — credit balance + the right next action. */
.bh-coachbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);padding:15px 20px;}
.bh-coachbar.is-empty{border-color:rgba(1,154,224,.55);box-shadow:0 0 0 1px rgba(1,154,224,.22),var(--shadow-sm);}
.bh-coachbar__credits{display:flex;align-items:center;gap:13px;min-width:0;}
.bh-coachbar__icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(1,154,224,.12);color:var(--info-text);}
.bh-coachbar.is-empty .bh-coachbar__icon{background:rgba(168,124,80,.16);color:var(--bronze-dk);}
.bh-coachbar__icon svg{width:22px;height:22px;}
.bh-coachbar__txt strong{display:block;font-size:15px;color:var(--text);font-weight:700;line-height:1.2;}
.bh-coachbar__sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
.bh-coachbar__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
@media(max-width:600px){.bh-coachbar__actions{width:100%;}.bh-coachbar__actions .bh-btn{flex:1 1 auto;}}
/* Sticky credit bar. The site-wide html,body{overflow-x:hidden} disables native
   position:sticky, so the band is pinned via position:fixed from JS instead
   (initCoachbarPin in site.js). It stays in normal flow until its top reaches the
   viewport top, then pins there; the spacer holds the slot so content below never
   jumps. Releases on scroll back up. */
.bh-coachbar-band.is-pinned{position:fixed;top:0;left:0;right:0;z-index:60;box-shadow:0 8px 20px -14px rgba(20,12,6,.55);}
.bh-coachbar-band__spacer{height:0;}

/* Passive credit-balance readout — one source (Rule #9). Shares the coach-bar
   credit-cluster DNA (icon + count + sub) but carries no actions; used where the
   page itself IS the action, e.g. /coaching/top-up-credits/. Keeps the family's
   credit datum in one visual language. */
.bh-balance{display:flex;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);padding:18px 22px;}
.bh-balance__icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(1,154,224,.12);color:var(--info-text);}
.bh-balance__icon svg{width:26px;height:26px;}
.bh-balance.is-empty .bh-balance__icon{background:rgba(168,124,80,.16);color:var(--bronze-dk);}
.bh-balance__txt{display:flex;flex-direction:column;min-width:0;}
.bh-balance__num{font-family:var(--font-heading);font-weight:800;
  font-size:clamp(30px,4.5vw,40px);line-height:1;color:var(--text);font-variant-numeric:tabular-nums;}
.bh-balance__num small{font-size:14px;font-weight:600;color:var(--muted);margin-left:8px;font-family:var(--font-body);}
.bh-balance__sub{font-size:12.5px;color:var(--muted);margin-top:6px;}

/* Split layout — main column + aside (used by the coach profile header). */
.bh-split{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;}
.bh-split--aside-left{grid-template-columns:340px 1fr;}
@media(max-width:880px){.bh-split,.bh-split--aside-left{grid-template-columns:1fr;}}

/* Quote / testimonial card on light. */
.bh-quote{background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius-lg);
  padding:26px 28px;box-shadow:var(--shadow-sm);}
.bh-quote__stars{display:flex;gap:4px;color:var(--accent);margin-bottom:12px;}
.bh-quote__stars svg{width:18px;height:18px;fill:currentColor;}
.bh-quote__text{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 16px;}
.bh-quote__by{display:flex;align-items:center;gap:12px;}
.bh-quote__name{font-weight:700;color:var(--text);font-size:14.5px;}
.bh-quote__role{font-size:12.5px;color:var(--muted);font-style:italic;}

/* Rounded icon badge (e.g. "What I help with" cards). */
.bh-icon-badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(168,124,80,.14);color:var(--bronze-dk);}
.bh-icon-badge svg{width:24px;height:24px;}

/* === ERROR-PAGE SHELL (single source for 404 / 500) ===
   Centred leather-band card. Buttons use the shared .bh-btn system;
   put class="bh-band--leather" on the <main> so ghost buttons pick up
   the on-leather cream treatment. */
.err-shell{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,8vh,96px) 20px;
  background:linear-gradient(180deg,rgba(42,29,18,.92) 0%,rgba(42,29,18,.92) 100%),
    url('/assets/images/hfm-header-bg.webp') center/cover no-repeat,var(--dark-bg);
  color:var(--cream);}
.err-card{width:100%;max-width:560px;text-align:center;}
.err-code{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;margin-bottom:12px;}
.err-h{margin:0 0 14px;font-size:clamp(28px,4vw,38px);font-weight:800;letter-spacing:-0.02em;
  line-height:1.15;color:var(--cream);}
.err-sub{margin:0 auto 32px;max-width:460px;font-size:16px;line-height:1.6;font-weight:300;
  color:rgba(249,242,233,.82);}
.err-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.err-meta{margin-top:24px;font-size:13px;color:rgba(249,242,233,.6);}
.err-meta a{color:var(--accent);text-decoration:none;font-weight:600;}
.err-meta a:hover{color:var(--cream);}

/* === 404 NOT-FOUND (full-bleed leather, brotherhood voice) ===
   Own classes (nf-*) so the shared .err-shell above stays the 500 fallback.
   Dark-section recipe (BRAND.md): leather image + black wash + bronze accents
   + cream text. Emblem = the glow-baked v4 coin (reads on leather in-client).
   Depth comes from shadow, never a single-side border. */
.nf{position:relative;min-height:calc(100vh - 80px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(48px,10vh,110px) 20px;overflow:hidden;color:var(--cream);
  background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(20,20,20,.9)),
    url('/assets/images/hfm-header-bg.webp') center/cover no-repeat,var(--dark-bg);}
.nf__inner{position:relative;width:100%;max-width:600px;}
.nf__medal{width:clamp(128px,24vw,164px);height:auto;margin:0 auto 4px;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));}
.nf__code{font-size:clamp(96px,24vw,190px);font-weight:800;letter-spacing:-.04em;
  line-height:.92;color:var(--cream);margin:0 0 6px;
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 20px 44px rgba(0,0,0,.55);}
.nf__code b{color:var(--bronze);font-weight:800;} /* centre digit picks up bronze */
.nf__h{margin:10px 0 14px;font-size:clamp(26px,4.2vw,40px);font-weight:800;
  letter-spacing:-.02em;line-height:1.12;color:var(--cream);}
.nf__sub{margin:0 auto 12px;max-width:50ch;font-size:clamp(15px,1.4vw,17px);
  font-weight:300;line-height:1.65;color:rgba(249,242,233,.82);}
.nf__slogan{margin:0 auto 30px;font-size:14px;font-weight:600;letter-spacing:.01em;
  color:var(--bronze);}
.nf__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:36px;}
/* Useful destinations — a spaced pill-link row, not a card grid. */
.nf__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  padding-top:26px;border-top:1px solid rgba(249,242,233,.14);}
.nf__links-label{flex-basis:100%;margin:0 0 4px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(249,242,233,.5);}
.nf__link{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;
  border-radius:999px;font-size:14px;font-weight:600;color:var(--cream);
  text-decoration:none;background:rgba(249,242,233,.06);
  border:1px solid rgba(249,242,233,.16);
  transition:background .28s cubic-bezier(.22,1,.36,1),border-color .28s,color .28s;}
.nf__link:hover{background:var(--bronze);border-color:var(--bronze);color:#141414;}
@media (prefers-reduced-motion:no-preference){
  .nf__inner{animation:nfRise .6s cubic-bezier(.16,1,.3,1) both;}
  @keyframes nfRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .nf__code{font-size:clamp(74px,26vw,120px);}
}

/* === BOOKING STEP INDICATOR (single source for /book/ + /book/confirm) ===
   Bronze = done/active (icon-scale accent, brand-permitted), grey = ahead. */
.bk-steps{display:flex;align-items:center;gap:0;list-style:none;margin:0 0 26px;padding:0;flex-wrap:wrap;}
.bk-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:600;}
.bk-step__num{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:700;background:var(--line);color:var(--muted);}
.bk-step.is-active{color:var(--text);}
.bk-step.is-active .bk-step__num{background:var(--bronze);color:#fff;}
.bk-step.is-done{color:var(--bronze-dk);}
.bk-step.is-done .bk-step__num{background:var(--bronze);color:#fff;}
.bk-step__bar{width:36px;height:2px;background:var(--line);margin:0 12px;flex:0 0 auto;}
.bk-step.is-done + .bk-step__bar{background:var(--bronze);}
@media(max-width:540px){
  .bk-step__bar{width:14px;margin:0 7px;}
  .bk-step:not(.is-active) .bk-step__lbl{display:none;}
}

/* ── Timezone save prompt (.hfm-tzask) ───────────────────────────────────────
 * Shown by window.hfmTzOfferSave() in site.js when a member changes the zone on
 * a page that isn't his profile (/meetings/, /book/). The page zone applies at
 * once for viewing; this asks before it becomes his saved zone, because the
 * change might be a traveller checking a time, not a move. Mobile-first: a
 * full-width bar at the bottom on phones, a floating card from ~600px up.
 * ─────────────────────────────────────────────────────────────────────────── */
.hfm-tzask{
  position:fixed; z-index:120; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--card,#fff); color:var(--text,#141414);
  border-top:1px solid var(--line,#e6e2db);
  box-shadow:0 -10px 30px -18px rgba(20,12,6,.55);
  transform:translateY(110%); opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.hfm-tzask.is-in{ transform:translateY(0); opacity:1; }
.hfm-tzask__t{ font-size:14px; line-height:1.45; }
.hfm-tzask__t b{ font-weight:700; }
.hfm-tzask__a{ display:flex; align-items:center; gap:10px; }
/* .bh-btn--sm is 40px; the brand floor for a tap target is 44px and this bar is
   thumb-reachable on a phone, so lift it back. */
.hfm-tzask__a .bh-btn{ flex:0 0 auto; min-height:44px; }
.hfm-tzask__no{
  min-height:44px; padding:0 12px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted,#555);
  text-decoration:underline; text-underline-offset:3px;
}
.hfm-tzask__no:hover{ color:#000; }

@media (min-width:600px){
  .hfm-tzask{
    left:auto; right:20px; bottom:20px; width:min(420px, calc(100vw - 40px));
    flex-direction:row; align-items:center; justify-content:space-between; gap:14px;
    padding:14px 16px; border:1px solid var(--line,#e6e2db);
    border-radius:var(--card-radius,12px);
    box-shadow:0 18px 40px -22px rgba(20,12,6,.6);
    transform:translateY(16px);
  }
  .hfm-tzask.is-in{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .hfm-tzask{ transition:none; }
}

/* ── Preference / setting rows (.pref-row) ───────────────────────────────────
 * A label + description on the left, a control on the right. Used by
 * /account/preferences.php and by shared/tz-setting.php wherever it is
 * included (Rule #9 — was page-local until the timezone setting needed it on
 * /account/edit-profile.php too). Stacks on phones so the control never gets
 * squeezed against a long description.
 * ─────────────────────────────────────────────────────────────────────────── */
.pref-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.pref-row:last-of-type{ border-bottom:none; }
.pref-row__text{ flex:1 1 auto; }
.pref-row__label{ display:block; font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; }
.pref-row__desc{ display:block; font-size:13px; color:var(--muted,#6b6b6b); line-height:1.45; }

.acct-savemsg{ font-size:13px; font-weight:700; }
.acct-savemsg.is-ok { color:var(--ok-text,#1a7f37); }
.acct-savemsg.is-err{ color:var(--err-text,#b42318); }

@media (max-width:560px){
  .pref-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .pref-row .tzpick{ width:100%; max-width:none; }
}

/* ── /get-the-app/ — install walkthrough (.gta-) ─────────────────────────────
 * Only ever one device variant is visible; the page JS un-hides it. Deliberately
 * plain class names on a plain page: no fixed overlay, nothing named "popup",
 * "promo" or "banner", because those are exactly what ad-blocker cosmetic filter
 * lists match on. Mobile-first — this page is read on a phone far more than on a
 * desktop (BRAND.md: mobile is not optional).
 * ─────────────────────────────────────────────────────────────────────────── */
.gta-lead{ margin-bottom:26px; }
.gta-card{ margin-bottom:22px; }
.gta-card__tag{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bronze);
}
.gta-card__h{ margin:0 0 10px; font-size:var(--h3-size); font-weight:800; line-height:1.15; color:var(--text); }
.gta-card__body{ margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--muted); }

/* Steps — art on the left, words on the right; stacked and centred on a phone. */
.gta-steps{ list-style:none; margin:0; padding:0; counter-reset:gta; }
.gta-step{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-top:1px solid var(--line);
}
.gta-step:first-child{ border-top:none; padding-top:0; }
.gta-step__art{
  flex:0 0 auto; width:64px; height:64px; border-radius:12px;
  background:var(--bg-warm); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.gta-step__txt{ flex:1 1 auto; min-width:0; }
.gta-step__h{
  counter-increment:gta; margin:0 0 5px; font-size:16px; font-weight:700;
  line-height:1.3; color:var(--text);
}
.gta-step__h::before{
  content:counter(gta); display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-right:9px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700; vertical-align:1px;
}
.gta-step__txt p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
/* Demoted to a fallback once the browser offers its own one-tap install. */
.gta-steps.is-secondary{ opacity:.72; }
.gta-steps.is-secondary .gta-step__art{ display:none; }

/* Step artwork. Line drawings of what each OS shows — chrome in grey, the bit
   to actually tap picked out in the accent colour. */
.gta-svg{ width:40px; height:40px; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.gta-svg__chrome{ stroke:currentColor; stroke-width:2; opacity:.45; }
.gta-svg__hit{ stroke:var(--accent); stroke-width:2.4; fill:rgba(1,154,224,.10); }
.gta-svg__mark{ stroke:var(--accent); stroke-width:2.4; }
.gta-svg__dot{ fill:currentColor; stroke:none; opacity:.5; }

.gta-note{ margin:18px 0 0; font-size:13px; line-height:1.6; color:var(--help); }

/* One-tap install CTA (only shown when the browser actually offers it). */
.gta-cta{ margin:0 0 22px; }
.gta-cta__sub{ margin:10px 0 0; font-size:13px; color:var(--help); }
.gta-cta__done{ margin:0; font-size:15px; font-weight:700; color:var(--ok-text,#1a7f37); }

/* Copy-the-link row, for an iPhone in the wrong browser. */
.gta-copy{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-warm);
}
.gta-copy__url{
  flex:1 1 220px; min-width:0; font-family:var(--font-mono); font-size:13px;
  color:var(--text); word-break:break-all; user-select:all;
}

/* Alerts control. */
.gta-alerts{ margin-top:24px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--bg-warm); }
.gta-alerts__row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.gta-alerts__icon{ width:22px; height:22px; color:var(--bronze); flex:0 0 auto; }
.gta-alerts__icon svg{ width:100%; height:100%; }
.gta-alerts__name{ flex:1 1 auto; font-size:15px; font-weight:700; color:var(--text); }
.gta-alerts__state{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.gta-alerts__state.is-on { background:rgba(26,127,55,.12); color:var(--ok-text,#1a7f37); }
.gta-alerts__state.is-off{ background:rgba(0,0,0,.06); color:var(--help); }
.gta-alerts__msg{ margin:0 0 14px; font-size:13px; line-height:1.6; color:var(--muted); }

/* Footer actions. */
.gta-actions{ margin:6px 0 30px; text-align:center; }
.gta-actions__go{ margin-bottom:16px; }
.gta-actions__minor{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.gta-actions__sep{ color:var(--line); }
.gta-actions__msg{ margin:14px 0 0; font-size:13px; color:var(--err-text,#b42318); }
/* min-height 44px: these are the two smallest tap targets on the page and they
   are read on a phone (BRAND.md — tap targets >= 44px). */
.gta-linkbtn{
  appearance:none; background:none; border:none; padding:12px 6px; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center;
  font-family:inherit; font-size:13px; color:var(--muted); text-decoration:underline;
  text-underline-offset:3px;
}
.gta-linkbtn:hover{ color:var(--text); }
.gta-actions__never{ color:var(--help); }

/* "Different device?" and the no-JS fallback. */
.gta-other{ margin:0 0 40px; border-top:1px solid var(--line); padding-top:16px; }
.gta-other > summary{ cursor:pointer; font-size:14px; font-weight:600; color:var(--muted); }
.gta-other > summary:hover{ color:var(--text); }
.gta-alldev{ margin:16px 0 0; padding-left:20px; }
.gta-alldev li{ margin-bottom:12px; font-size:14px; line-height:1.6; color:var(--muted); }

@media (max-width:560px){
  .gta-step{ gap:13px; }
  .gta-step__art{ width:54px; height:54px; border-radius:10px; }
  .gta-svg{ width:34px; height:34px; }
  .gta-actions__go{ display:flex; width:100%; }
}

/* ── /add-your-photo/ — profile-photo prompt (.apx-) ─────────────────────────
 * Reuses the shared .bh-upload control (camera + drag-drop) and the .gta-linkbtn
 * footer buttons; only the framing around them lives here. Same naming discipline
 * as .gta-: a plain page, no overlay, no ad-blocker bait in the class names.
 * ─────────────────────────────────────────────────────────────────────────── */
.apx-lead{ margin-bottom:26px; }
.apx-card{ margin-bottom:18px; }
.apx-card__body{ font-size:15px; line-height:1.6; color:var(--muted); }
.apx-card__body--center{ text-align:center; }
.apx-done{ margin-bottom:18px; }

/* The "here's you right now" face — the reason the ask lands. */
.apx-face{ text-align:center; margin:0 0 22px; }
.apx-face__img,
.apx-face__initials{
  width:132px; height:132px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; object-fit:cover;
  border:3px solid var(--line); background:var(--bg-warm);
}
.apx-face__initials{
  font-size:44px; font-weight:800; color:var(--bronze); letter-spacing:.02em;
}
.apx-face__cap{ margin:12px 0 0; font-size:13px; color:var(--help); }

.apx-form{ margin:0; }
.apx-save{ margin-top:18px; }

.apx-actions{ margin:0 0 40px; text-align:center; }
.apx-actions__sep{ color:var(--line); }
.apx-actions__msg{ margin:12px 0 0; font-size:13px; color:var(--err-text,#b42318); }
.apx-actions__never{ color:var(--help); }
.apx-noscript{ margin:0 0 40px; font-size:14px; color:var(--muted); text-align:center; }

@media (max-width:560px){
  .apx-face__img,
  .apx-face__initials{ width:112px; height:112px; }
  .apx-face__initials{ font-size:38px; }
}

/* ============ FEATURE HELD — the "coming soon" treatment (.bh-soon*) ============
 * ONE visual language for a feature that is switched off but not deleted: the
 * real UI stays where the member expects it, blurred and inert, under a
 * "Coming soon" stamp. First used by the Gift a Brother hold
 * (shared/GiftsHold.php) across the Community nav, the dashboard "Pay it
 * forward" card, and /gift/ itself.
 *
 * The blur is a UX layer ONLY. Every held surface is also gated server-side, so
 * a visitor who strips the CSS in devtools still cannot reach a payment page.
 * Held entry points are rendered as <span>, never a disabled <a>: an element
 * with no href cannot be clicked, tabbed to, or opened in a new tab.
 */
.bh-soon        { position: relative; isolation: isolate; }
.bh-soon__veil  { filter: blur(3.5px); opacity: .55; pointer-events: none; user-select: none; }
.bh-soon__stamp {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.bh-soon__stamp > span {
  transform: rotate(-7deg);
  padding: 9px 20px;
  border: 2px solid rgba(168, 124, 80, .55);
  border-radius: 999px;
  background: rgba(249, 242, 233, .92);
  color: var(--bronze-dk);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(20, 20, 20, .14);
}
/* Nav entry for a held feature: title + description blurred, but the tag stays
   crisp — a member must be able to read WHY the row is smudged. */
.bh-soon-link { display: block; cursor: not-allowed; }
.hfm-mega__col .bh-soon-link { padding: 10px 12px; border-radius: 6px; }
.bh-soon-link .ttl,
.bh-soon-link .desc { filter: blur(2.4px); opacity: .6; user-select: none; }
.bh-soon-tag {
  display: inline-block; margin-top: 5px; padding: 2px 9px;
  border-radius: 999px;
  background: rgba(168, 124, 80, .14); color: var(--bronze-dk);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

/* ── Button colour, last word ────────────────────────────────────────────────
 * Every .bh-btn variant expresses its text colour as --_fg, and .bh-btn reads it
 * with `color: var(--_fg)` — but that rule is only (0,1,0), so ANY container rule
 * that colours descendant links or elements outranks it and silently repaints a
 * button. That has now bitten three times:
 *   .bh-prose a          (0,1,1) → blue text on the blue primary fill, i.e. an
 *                        invisible button ("Contact us" on /account/orders/)
 *   .adm-shell *         (0,1,1) → admin brown on the ghost button's near-black
 *                        ("Mark all as read" on /notifications/, reported by the
 *                        owner 2026-07-29)
 *   .bh-band--dark ...   → cream on blue, 2.82:1, for --ondark on a dark band
 *
 * So re-assert it once, here at the end of the sheet, at (0,1,1) — enough to beat
 * any single-class container rule, and last in source order to beat the ties.
 * This is deliberately NOT a colour decision: it just hands the button back its
 * own --_fg, whatever the variant set. Any legitimate override must therefore
 * change --_fg (as every variant does) rather than `color`.
 * ─────────────────────────────────────────────────────────────────────────── */
a.bh-btn, button.bh-btn { color: var(--_fg); }
/* ============================== MODAL (.hfm-modal) ===========================
   THE shared dark modal. Two surfaces use it and there is exactly one copy:

     - /join/                    the exit-intent trial modal (and its gift mode)
     - shared/GiftPopup.php      "someone sent you a gift", members area

   It was briefly duplicated when the gift popup was built, because /join/ was
   being rewritten at the time and editing the same file would have collided.
   This is that convergence: the chrome, the form, the CTA, the error and
   success states and every responsive pass now live here only.

   Chrome mirrors modules/Automations/EmailShell.php deliberately - the #141414
   band, the collage hero, the sand Georgia headline - so the modals and the
   mail stream read as the same company.

   NEVER put an <img> logo inside the panel: the hero collage ALREADY contains
   the HFM coin, and overlaying another one draws two.

   The responsive passes are keyed on HEIGHT as well as width, because the hero
   band is proportional (it has to be, or the coin clips) and is therefore the
   tallest thing on the panel. Read the note at each breakpoint before tuning.

   Per-surface trimmings that are NOT chrome (the join page trial timing, the
   gift note blockquote) stay with their own surface. */

.hfm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.hfm-modal[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.hfm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 18, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hfm-modal__panel {
  position: relative;
  max-width: 540px;
  width: 100%;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px); /* dynamic viewport height — accounts for mobile browser chrome */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 100%),
    url('/assets/images/hfm-testimonial-bg.webp') center/cover no-repeat,
    var(--dark-bg);
  border-radius: 14px;
  /* A real border, not an inset shadow: the hero is full-bleed via negative
     margins and paints over an inset shadow, so the blue line stopped at the
     header. A border sits outside the padding box and runs unbroken around the
     whole panel; overflow-y:auto already clips the hero to the radius. */
  border: 1px solid rgba(1, 154, 224, .55);
  padding: 22px 34px 18px;
  color: var(--cream);
  text-align: center;
  box-shadow:
    /* The blue outline is a real border on the panel now. An inset shadow is
       painted UNDER the full-bleed hero band, which is why the line broke
       across the top. */
    0 0 28px rgba(1, 154, 224, .15) inset,
    0 28px 70px rgba(0, 0, 0, .6);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hfm-modal[data-state="open"] .hfm-modal__panel {
  transform: translateY(0) scale(1);
}
.hfm-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, .08);
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  z-index: 2;
}
.hfm-modal__close:hover {
  background: var(--accent);
  color: #fff;
  transform: rotate(90deg);
}
/* ── Header band — the email chrome, adapted for a modal ─────────────────────
   Mirrors modules/Automations/EmailShell.php: the #141414 band, the leather
   header texture, the glow coin, and the Georgia-italic sand headline. Tokens
   are copied from that file deliberately rather than approximated, so the modal
   and the mail stream read as the same company.

   Full-bleed via negative margins that cancel the panel's own padding — the
   panel keeps one padding value for its body and the band cancels it, rather
   than the panel being re-plumbed into header/body wrappers.

   The emails' middle band (the collage hero) is NOT here: it is a tall sales
   image and this panel only just stopped needing a scrollbar. */
/* ── Header: the email's two bands, in the email's order ─────────────────────
   EmailShell stacks a collage hero and then a flat #141414 headline band. This
   is that, and the two fixes it brings are why it is structured this way rather
   than as one combined band:

     • No overlaid coin. The collage ALREADY contains the HFM coin, so drawing
       another one on top produced two logos stacked on each other.
     • No scrim. Nothing sits on the collage now, so it runs bright and
       unscrimmed exactly as it does in the emails, instead of being dimmed to
       keep text on top of it readable.

   The collage is cropped to a strip. Its natural 2.2:1 at this panel width is
   ~235px tall, which would put the panel back to scrolling; a centre crop keeps
   the coin, which sits centred in the artwork. */
.hfm-modal__hero {
  margin: -22px -34px 0;
  /* Height as a RATIO of its own width, so the coin fits at every panel size
     instead of at one hardcoded height. The artwork is 1200x545 and the coin
     occupies 86% of that height (measured: y=76..544), so at cover the band
     needs width / 2.2 * 0.86 = width / 2.56 to contain the ring. A fixed pixel
     height was what clipped it on a narrower panel. */
  aspect-ratio: 2.56;
  border-radius: 14px 14px 0 0;
  background-color: #141414;   /* a failed image request degrades to the email band */
  background-image: url('/assets/images/email-welcome-hero-v7.jpg');
  /* Anchored BOTTOM, not centre. The coin fills 86% of this artwork (y=76..544
     of 545) and touches its bottom edge, so a centred crop clips the ring at both
     ends — which is what cut the logo. Bottom-anchored at the height above, the
     whole coin sits inside the band. */
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
/* EmailShell's headline band: flat BAND (#141414), Georgia italic on sand. */
.hfm-modal__hdr {
  margin: 0 -34px 22px;
  padding: 14px 24px 15px;
  background: #141414;
  border-top: 1px solid rgba(214, 184, 150, .18);
  border-bottom: 1px solid rgba(214, 184, 150, .18);
}
.hfm-modal__eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d6b896;               /* EmailShell::SAND */
  margin-bottom: 10px;
}
/* EmailShell's headline band: Georgia italic, sand, with its text-shadow. The
   day count keeps the brand blue so the offer still carries. */
.hfm-modal__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(21px, 3.2vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #e2c39c;               /* EmailShell::BAND_TEXT */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  margin: 0;
}
.hfm-modal__title em {
  /* Stays italic with the rest of the headline — flipping it upright fought the
     Georgia line. Blue + bold is enough to make the offer carry. */
  font-weight: 700;
  color: var(--accent);
}
/* Gift arrival: the gift itself gets its own line under "You've been gifted",
   always. Left inline it broke wherever the name happened to run out of room —
   "You've been gifted 3" / "Coaching Credits." — which reads like a layout bug
   and splits the one thing he is here to read. Scoped to the gift headline: the
   trial one ("Try the Brotherhood for 30 days. Free.") is short enough to sit on
   one line and looks worse forced onto two. */
.hfm-modal__title--gift em {
  display: block;
  margin-top: 2px;
}
/* ── The same band, OUTSIDE a modal ──────────────────────────────────────────
   /gift/claim/ is a page, not a modal, but it is the page people open FROM the
   claim email — which TransactionalMailer wraps in this very header. Landing
   on a plain cream page there was the one hop where the site stopped looking
   like the mail that sent them.

   Reusing the modal's band rather than writing a third copy of it costs three
   rules. All that has to go is the full bleed: those negative margins cancel a
   PANEL's padding, which a card sitting in a page does not have. */
.hfm-band                   { border-radius: 14px 14px 0 0; overflow: hidden; }
.hfm-band .hfm-modal__hero  { margin: 0; border-radius: 0; }
.hfm-band .hfm-modal__hdr   { margin: 0; }
/* In a modal the eyebrow sits inside the headline band. Here it is EmailShell's
   own first band, above the collage — a page has the room the panel does not. */
.hfm-band .hfm-modal__eyebrow { display: block; margin: 0; text-align: center;
                                background: #141414; padding: 11px 24px 10px; }
.hfm-modal__lede {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(249, 242, 233, .88);
  margin: 0 0 9px;
}
.hfm-modal__list {
  list-style: none;
  margin: 0 0 22px;   /* breathing room between the feature list and the fields */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;           /* the bullets themselves, a touch looser */
  text-align: left;
}
.hfm-modal__list li {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: var(--cream);
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}
.hfm-modal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
}
.hfm-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;          /* between fields — was 8, too tight to scan */
  margin-bottom: 12px;
}
.hfm-modal__names {
  display: grid;
  /* minmax(0, 1fr), never plain 1fr: a text input's min-content width is wider
     than half this panel on a phone, and plain 1fr floors each track at that,
     so the pair overflowed the panel instead of sharing it. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hfm-modal__names input { min-width: 0; }
@media (max-width: 359px) {
  /* Below this the two name fields genuinely stop being readable side by side.
     Above it they stay paired even on a phone: vertical room is the scarcer
     resource there, and stacking them pushed the panel back into scrolling. */
  .hfm-modal__names { grid-template-columns: 1fr; }
}
.hfm-modal__form input {
  height: 46px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid rgba(168, 124, 80, .55);
  background: rgba(0, 0, 0, .28);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
}
.hfm-modal__form input::placeholder {
  color: rgba(249, 242, 233, .42);
}
.hfm-modal__form input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 0, 0, .38);
  box-shadow: 0 0 0 3px rgba(1, 154, 224, .18);
}
.hfm-modal__cta {
  height: 50px;
  padding: 0 28px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  margin-top: 2px;
}
.hfm-modal__cta:hover {
  background: #0182bd;
  border-color: #0182bd;
  transform: translateY(-1px);
}
.hfm-modal__fine {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(249, 242, 233, .55);
  margin: 0;
}
.hfm-modal__error {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #f3a39a;
  background: rgba(180, 60, 50, .14);
  border: 1px solid rgba(180, 60, 50, .35);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
  text-align: left;
}
.hfm-modal__error[hidden] { display: none; }
.hfm-modal__success {
  padding: 30px 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
}
.hfm-modal__success strong {
  display: block;
  font-size: 19px;
  margin-bottom: 12px;
  color: var(--accent);
}

@media (max-width: 600px) {
  .hfm-modal { padding: 8px; }
  .hfm-modal__panel {
    padding: 24px 20px 20px;
    border-radius: 12px;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .hfm-modal__hero { margin: -24px -20px 0; border-radius: 12px 12px 0 0; }   /* height stays proportional */
  .hfm-modal__hdr { margin: 0 -20px 18px; padding: 12px 18px 13px; }
  .hfm-modal__list { margin-bottom: 18px; gap: 7px; }
  .hfm-modal__eyebrow { margin-bottom: 10px; font-size: 10px; letter-spacing: 0.2em; }
  .hfm-modal__title { font-size: clamp(20px, 5.5vw, 26px); margin-bottom: 12px; }
  .hfm-modal__lede { font-size: 14px; margin-bottom: 12px; line-height: 1.5; }
  .hfm-modal__list { margin-bottom: 13px; gap: 5px; }
  .hfm-modal__list li { font-size: 13.5px; padding-left: 22px; line-height: 1.45; }
  .hfm-modal__list li::before { width: 13px; height: 13px; top: 5px; background-size: 13px; }
  .hfm-modal__form { gap: 8px; margin-bottom: 10px; }
  .hfm-modal__form input { height: 46px; font-size: 14.5px; }
  .hfm-modal__cta { height: 50px; font-size: 14px; }
  .hfm-modal__fine { font-size: 12px; }
  .hfm-modal__close { width: 40px; height: 40px; top: 6px; right: 6px; font-size: 20px; }
}
/* ── Vertical room, in two steps ─────────────────────────────────────────────
   The header band is proportional now (it has to be, or the coin gets clipped),
   which makes it the tallest thing on the panel. So the trimming is split:

     <= 860px tall  tighten everything EXCEPT the band. A 1280x800 window leaves
                    about 776px and needs ~60px back; taking it from padding and
                    rhythm keeps the logo whole, which is the point of the band.
     <= 768px tall  also cap the band. On a 1366x768 laptop (~660px of viewport)
                    even a proportional band is too much, and a scrollbar across
                    the whole form is worse than a trimmed ring.

   Keyed on HEIGHT, not width, so a wide-but-short laptop is treated as what it
   is. Placed after the max-width block so both also apply to a short phone. */
@media (max-height: 860px) {
  .hfm-modal__panel { padding: 16px 30px 14px; }
  /* Hero margin must cancel THIS block's panel padding or the band stops being flush. */
  .hfm-modal__hero { margin: -16px -30px 0; }
  .hfm-modal__hdr { margin: 0 -30px 12px; padding: 9px 18px 10px; }
  .hfm-modal__title { font-size: clamp(19px, 2.6vw, 23px); margin-bottom: 6px; }
  .hfm-modal__list { margin-bottom: 16px; gap: 6px; }
  .hfm-modal__form { gap: 10px; margin-bottom: 9px; }
  .hfm-modal__form input { height: 42px; }
  .hfm-modal__cta { height: 46px; }
}
@media (max-height: 768px) {
  /* The form panel is the tall one and something has to give here. It used to
     be the band's height — capped at 100px — but that CROPS THE COIN, and a
     logo cut in half reads as a broken page, which is worse than either a
     scrollbar or no artwork at all. So the collage is DROPPED rather than
     sliced: the flat #141414 band, the sand Georgia headline and the eyebrow
     are what carry the email's identity anyway, and they all stay.

     Only .hfm-modal--form. The gift popup has no form, is roughly 120px
     shorter, and keeps its whole collage at this height. */
  .hfm-modal--form .hfm-modal__hero { display: none; }
  /* With the collage gone the headline band is the top of the panel, and the
     panel's close button sits on it. Clear it on BOTH sides so the headline
     stays centred instead of running under the ×. */
  .hfm-modal--form .hfm-modal__hdr { padding-left: 58px; padding-right: 58px; }
  .hfm-modal__list { margin-bottom: 12px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hfm-modal,
  .hfm-modal__panel,
  .hfm-modal__close { transition: none !important; }
}

/* ── Pieces the gift popup adds to the same component ───────────────────────
   Named on .hfm-modal, not on a gift-only prefix: a modal that states what the
   thing IS, quotes a note and offers a full-width CTA is generic, and the next
   modal to need one should find it here rather than write a third copy. */

/* The CTA is an <a> on /join/ and a <button> in the gift popup (which accepts
   the gift in place rather than navigating), so the height rule above needs
   flex centring to hold text in either one. */
.hfm-modal__cta        { display: inline-flex; align-items: center; justify-content: center;
                         text-decoration: none; }
.hfm-modal__cta--block { display: flex; width: 100%; }
/* In flight. The press already worked; a button that still lifts under the
   cursor invites a second one. */
.hfm-modal__cta:disabled { opacity: .65; cursor: default; transform: none; }
.hfm-modal__cta:disabled:hover { background: var(--accent); border-color: var(--accent);
                                 transform: none; }

/* One line naming the thing on offer, directly under the headline and INSIDE
   the band. "Marcus sent you a gift." and "3 Coaching Credits" are one sentence
   broken in two; when this sat below the band the second half read as body copy
   about something else. */
.hfm-modal__hdr .hfm-modal__what { margin: 7px 0 0; }
.hfm-modal__what { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700;
                   color: var(--accent); margin: 0 0 8px; }

/* A quoted note from another member. Sand rule + warm wash, matching the
   dashboard's gift card so the same words look the same in both places. */
.hfm-modal__note { margin: 0 0 18px; padding: 13px 16px; text-align: left;
                   background: rgba(255, 255, 255, .05); border-left: 3px solid #d6b896;
                   border-radius: 0 8px 8px 0; font-family: Georgia, 'Times New Roman', serif;
                   font-style: italic; font-size: 14.5px; line-height: 1.6; color: var(--cream); }
.hfm-modal__note cite { display: block; margin-top: 9px; font-family: 'Poppins', sans-serif;
                        font-style: normal; font-size: 12.5px; color: #d6b896; }

/* There is no "Maybe later" button any more. The gift popup carries ONE button
   ("Thank you!", which accepts the gift in place) and the quiet way out is the
   ×, Esc or the backdrop — all of which still record a dismissal. The old
   .hfm-modal__later rule was removed with it rather than left behind styling
   nothing. */

/* Why the one button did not work, said in the panel rather than swallowed.
   Only ever shown after /api/gifts/accept.php fails, at which point the button
   itself becomes the route to the claim page. */
.hfm-modal__err { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: 13px;
                  line-height: 1.5; color: #f0b8b8; }

/* ── Coaching scope-of-practice consent (Modules\Coaching\ScopeAck) ─────────
   ONE spec for the block that says coaching is not therapy or medical care,
   because it renders on three pages in two different states (a required tick
   for someone who has not accepted this version, a plain notice for someone
   who has) and three private copies would drift on the first edit. The markup
   comes from ScopeAck::renderConsent(); only geometry and colour live here.

   The two states share a box on purpose. A member who ticked it last month
   should recognise the same panel when he sees it again — a disclaimer that
   changes shape reads as a different disclaimer. */
.scope-ack { margin-top: 18px; padding: 14px 16px; border-radius: 6px;
             font-size: 13px; line-height: 1.55; }
/* Asking: the warm panel the booking page already used for its cancellation
   consent, so the two ticks sit as equals rather than one looking optional. */
.scope-ack--ask   { background: #fdf6ed; border: 1px solid #f0e3c7; color: #6b4f3a; }
/* Noting: the same words with the border dropped to a rule — present, readable,
   and visibly not a control, so nobody hunts for a checkbox that is not there. */
.scope-ack--noted { background: transparent; border: 0; border-left: 3px solid #f0e3c7;
                    border-radius: 0; padding: 4px 0 4px 14px; color: var(--muted); }
.scope-ack strong { color: #2a1d12; }
.scope-ack--noted strong { color: var(--text); }
.scope-ack__row  { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.scope-ack__row input { margin-top: 2px; flex: 0 0 auto; width: 17px; height: 17px;
                        accent-color: var(--accent); cursor: pointer; }
.scope-ack__body { margin: 0; }
/* Links sit below the label, never inside it — an anchor inside a <label>
   toggles that label's checkbox, so reading the terms would un-tick the
   consent. The indent lines them up with the label text, not the box. */
.scope-ack__links { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.scope-ack--ask .scope-ack__links { margin-left: 29px; color: #6b4f3a; }
.scope-ack__links a { color: inherit; text-decoration: underline; }
/* Turns red where the member tried to act without ticking, so the reason the
   button did nothing is where he is already looking. */
.scope-ack--ask.is-missing { border-color: var(--err-border); background: var(--err-bg); color: var(--err-text); }
.scope-ack--ask.is-missing strong { color: var(--err-text); }

/* ---- Session row (.ms-row) — ONE card for one coaching session ----
   Used by the member's /coaching/my-sessions/ and by the coach's console at
   /admin/coaching/me/sessions.php, which renders in the admin shell's `bare`
   content column so it wears this member styling rather than the neutral admin
   palette. The two pages show the same hour from two sides and must look like
   the same object, so this lives here once instead of in a <style> block on
   either page (Rule #9).

   Avatar + one header line (title, then when, with the status pill held hard
   right), and the action buttons on their own line underneath. The head is a
   2-column grid, not a single wrapping flex line, so a long name pushes the
   date onto a second line while the pill stays pinned to the card's top-right
   instead of being wrapped below it. */
.ms-tabcount{margin-left:7px;padding:1px 7px;font-size:11px;font-weight:800;vertical-align:middle;}
.bh-tabpanel{padding-top:20px;}
.ms-row{align-items:flex-start;flex-wrap:wrap;}
/* basis 0, not auto: the row wraps (the actions take a line of their own), so a
   long name must shrink the body rather than push it below the avatar onto its
   own line. */
.ms-row__body{flex:1 1 0;min-width:0;}
.ms-row__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 12px;}
.ms-row__headmain{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0;}
.ms-row .bh-row__title{margin:0;white-space:normal;overflow:visible;text-overflow:clip;flex:0 1 auto;}
.ms-row__with{font-weight:400;color:var(--muted);}
.ms-row__when{flex:0 1 auto;font-size:13px;color:var(--help);}
.ms-row__meta{margin:5px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--help);}
.ms-row__badge{flex:0 0 auto;margin-left:auto;}
.ms-row__actions{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:flex-end;margin-top:12px;}
/* Notice-window line under the actions. Muted while it is only a reminder;
   amber once it is the reason two buttons are greyed out. */
.ms-row__notice{flex:1 1 100%;min-width:0;margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--help);
  text-align:right;}
.ms-row__notice.is-locked{color:var(--warn-text);}

/* ---- The card as an accordion (coach console) ----
   Closed, a session is one line: face, who and when, state. Everything the
   coach acts on is behind the click, so a month of sessions is scannable
   instead of being a wall of open note fields. The <details> IS the row, so
   every existing .ms-row rule still applies; the summary carries the header
   layout the row used to carry directly. */
/* The coach console's session list. The cards are .bh-card on the dashboard
   brand skin (owner, 2026-08-27: the member dashboard is the styling template
   for admin pages), so this only owns the spacing between them. */
.ms-rows{display:flex;flex-direction:column;gap:16px;}

/* The row stops being a flex container here and becomes a plain block: a
   <details> lays its open content out in normal flow, and as a wrapping flex
   row the children were sized against the wrong box and ran straight out of
   the card. The SUMMARY is the flex row now — avatar, body, caret — and
   everything below it is a full-width block, which is what those children
   (flex:1 1 100%) were asking to be anyway. */
.ms-row--acc{display:block;cursor:pointer;}
.ms-row--acc > summary{display:flex;align-items:flex-start;gap:16px;min-width:0;
  list-style:none;cursor:pointer;}
.ms-row--acc > *:not(summary){min-width:0;}
.ms-row--acc > summary::-webkit-details-marker{display:none;}
.ms-row--acc > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;}
/* Anything inside the open card is worked on, not toggled — the pointer says so. */
.ms-row--acc[open] > *:not(summary){cursor:auto;}
.ms-row__caret{flex:0 0 auto;width:18px;height:18px;margin-top:4px;color:var(--muted);
  transition:transform .15s;}
.ms-row__caret svg{width:100%;height:100%;display:block;}
.ms-row--acc[open] .ms-row__caret{transform:rotate(180deg);}

/* ---- Month view ----
   A calendar, not a second list. Every cell holds its date and, when something
   is booked that day, one dot — no titles, no names, nothing that can wrap. */
.ms-cal{border:1px solid var(--line);border-radius:var(--card-radius);background:var(--card);
  padding:14px 16px;margin:0 0 18px;}
.ms-cal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ms-cal__heading{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.ms-cal__title{font-weight:700;font-size:14px;color:var(--text);}
.ms-cal__today{font-size:11.5px;font-weight:600;color:var(--accent);text-decoration:none;}
.ms-cal__today:hover{text-decoration:underline;}
/* Bordered controls, not punctuation: as ‹ › in muted grey these read as text
   and nobody found them. */
.ms-cal__nav{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);
  text-decoration:none;transition:background .13s,border-color .13s,color .13s;}
.ms-cal__nav svg{width:16px;height:16px;display:block;}
.ms-cal__nav:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.ms-cal__nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ms-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.ms-cal__dow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--help);text-align:center;padding:2px 0 4px;}
.ms-cal__day{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;border-radius:8px;
  font-size:13px;color:var(--muted);}
.ms-cal__day--pad{visibility:hidden;}
.ms-cal__day--today{box-shadow:inset 0 0 0 1px var(--line);font-weight:600;color:var(--text);}
a.ms-cal__day{color:var(--text);font-weight:700;background:var(--bg-alt);text-decoration:none;
  transition:background .13s,color .13s;}
a.ms-cal__day:hover{background:var(--accent);color:#fff;}
a.ms-cal__day:hover .ms-cal__dot{background:#fff;}
.ms-cal__dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}

@media (max-width:520px){
  /* Phone: the squares would be ~40px, which is fine, but the padding either
     side of the card is what makes them cramped. */
  .ms-cal{padding:12px;}
  .ms-cal__day{font-size:12px;}
}

/* Half-width band: full-width the calendar dominated the page (owner,
   2026-08-27), so it keeps to the left half and the right half is RESERVED for
   a companion panel — content not yet decided, so the cell is empty on
   purpose. Collapses to one column on a narrow screen. */
.ms-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:0 0 18px;}
.ms-split .ms-cal{margin:0;}
@media (max-width:760px){
  .ms-split{grid-template-columns:1fr;}
}

/* ---- Coach-only additions to the same row ----
   The coach's console shows everything the member's card shows PLUS his working
   material: the one-line journal read, the Zoom AI summary, and the two notes
   fields. They are full-width children of the row, so they break out of the
   avatar indent — they are about the session, not about the person in the
   header. min-width:0 on each is load-bearing: a flex item defaults to
   min-width:auto and a block holding one nowrap line (the journal read) would
   otherwise push straight through the card's right edge. */
.ms-row__coach{flex:1 1 100%;min-width:0;margin-top:14px;}
.ms-row__sum{border:1px solid var(--line);border-radius:10px;background:var(--bg-alt);padding:12px 14px;}
.ms-row__sum > summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--text);}
.ms-row__sumbody{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--muted);}
.ms-row__form{flex:1 1 100%;min-width:0;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
/* One column at every width: the two note boxes stack, internal notes first.
   Side by side halved the writing width of each and read as one wide field
   split in two. */
.ms-row__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;}
.ms-row__fields label{display:block;font-size:13px;font-weight:700;color:var(--text);}
.ms-row__fields textarea{width:100%;margin-top:6px;font:inherit;font-size:14px;line-height:1.5;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--text);resize:vertical;}
.ms-row__fields textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(1,154,224,.18);}
.ms-row__hint{font-weight:400;color:var(--muted);}
.ms-row__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;font-size:13px;color:var(--help);}
.ms-row__rec{min-width:0;}
.ms-row__rec audio{max-width:320px;vertical-align:middle;}

@media (max-width:760px){
  /* Narrow: the date/timezone always takes its own line under the title; the
     pill keeps its own grid column, so it stays top-right. */
  .ms-row__when{flex:1 1 100%;}
  .ms-row__actions{justify-content:flex-start;}
  .ms-row__actions .bh-btn{flex:1 1 auto;justify-content:center;}
  .ms-row__notice{text-align:left;}
}