@charset "UTF-8";
/* ==========================================================================
   Cub Scout Pack 3591 — Design System
   "Built to Explore. Bound to Lead."

   One stylesheet for the whole site. No build step, no framework.
   Everything is driven by custom properties declared in section 1 so that
   dark mode (section 2) only ever has to redefine tokens.

   TABLE OF CONTENTS
     1.  Design tokens (:root)
     2.  Dark colour scheme
     3.  Reset & base
     4.  Typography
     5.  Layout primitives  .container .stack .cluster .grid .card .sidebar-layout
     6.  Utilities          .visually-hidden, text/spacing helpers
     7.  Site header + mobile hamburger nav
     8.  Hero
     9.  Footer
    10.  Buttons
    11.  Form controls
    12.  Tables (collapse to stacked cards < 700px)
    13.  Badges, den pills, status pills
    14.  Modal dialog
    15.  Alerts & toasts
    16.  Tabs
    17.  Empty state
    18.  Skeleton loading
    19.  Avatar
    20.  Event / calendar rows
    21.  Stat tiles (admin dashboard)
    22.  Pipeline / kanban board (CRM leads)
    23.  Misc components (toolbar, divider, breadcrumb, pagination, progress)
    24.  Reduced motion
    25.  Print styles (schedule page)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- Brand palette (raw) ------------------------------------------- */
  --brand-navy:        #10284B;
  --brand-navy-700:    #0B1D38;
  --brand-navy-900:    #071224;
  --brand-navy-400:    #2C4A78;
  --brand-navy-200:    #93A7C4;

  --brand-red:         #A6192E;
  --brand-red-700:     #85101F;
  --brand-red-300:     #E58C99;

  --brand-gold:        #F2A900;
  --brand-gold-700:    #B87F00;
  --brand-gold-200:    #FFE3A3;

  --brand-sand:        #F7F4EF;
  --brand-sand-dark:   #EDE7DD;
  --brand-ink:         #1B1F24;

  /* Supporting outdoors hues (trail green / sky) */
  --hue-forest:        #2E7D4F;
  --hue-forest-700:    #1D5334;
  --hue-sky:           #1F6FB2;
  --hue-sky-700:       #14507F;
  --hue-ember:         #E4610F;

  /* ---- Semantic surface & text --------------------------------------- */
  --color-bg:              var(--brand-sand);
  --color-bg-alt:          #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #FBF9F6;
  --color-surface-3:       var(--brand-sand-dark);
  --color-surface-invert:  var(--brand-navy);

  --color-text:            var(--brand-ink);
  --color-text-strong:     #0D1014;
  --color-text-muted:      #5A6472;
  --color-text-faint:      #79828F;
  --color-text-invert:     #F7F9FC;
  --color-text-on-brand:   #FFFFFF;
  --color-text-on-accent:  #3D2A00;

  --color-border:          #DCD5C9;
  --color-border-strong:   #C3B9A8;
  --color-border-soft:     #EAE4DA;

  --color-link:            #123C74;
  --color-link-hover:      var(--brand-red);

  /* ---- Semantic brand roles ------------------------------------------ */
  --color-brand:           var(--brand-navy);
  --color-brand-hover:     var(--brand-navy-700);
  --color-brand-soft:      #E4EAF3;
  --color-brand-soft-ink:  #10284B;

  --color-accent:          var(--brand-gold);
  --color-accent-hover:    #DD9B00;
  --color-accent-soft:     #FFF3D6;
  --color-accent-soft-ink: #6B4A00;

  --color-danger:          var(--brand-red);
  --color-danger-hover:    var(--brand-red-700);
  --color-danger-soft:     #FBE3E6;
  --color-danger-soft-ink: #7C1122;

  --color-success:         var(--hue-forest);
  --color-success-hover:   var(--hue-forest-700);
  --color-success-soft:    #E2F2E9;
  --color-success-soft-ink:#1D5334;

  --color-info:            var(--hue-sky);
  --color-info-hover:      var(--hue-sky-700);
  --color-info-soft:       #E1EEF9;
  --color-info-soft-ink:   #14507F;

  --color-warn:            #B87F00;
  --color-warn-hover:      #96680A;
  --color-warn-soft:       #FFF0CF;
  --color-warn-soft-ink:   #6B4A00;

  --color-neutral-soft:     #E9E5DD;
  --color-neutral-soft-ink: #4A5260;

  /* ---- Den colours (must mirror CONTRACT §3.2 dens.color) ------------- */
  --den-lion:            #F2A900;
  --den-lion-bg:         #FFF3D6;
  --den-lion-ink:        #6B4A00;

  --den-tiger:           #E4610F;
  --den-tiger-bg:        #FDE7D8;
  --den-tiger-ink:       #8A3400;

  --den-wolf:            #A6192E;
  --den-wolf-bg:         #FBE3E6;
  --den-wolf-ink:        #7C1122;

  --den-bear:            #1F6FB2;
  --den-bear-bg:         #E1EEF9;
  --den-bear-ink:        #14507F;

  --den-webelos:         #2E7D4F;
  --den-webelos-bg:      #E2F2E9;
  --den-webelos-ink:     #1D5334;

  --den-aol:             #10284B;
  --den-aol-bg:          #E3E8F0;
  --den-aol-ink:         #10284B;

  /* ---- Spacing scale (4px base, fluid at the top end) ----------------- */
  --space-3xs: 0.125rem;   /*  2px */
  --space-2xs: 0.25rem;    /*  4px */
  --space-xs:  0.5rem;     /*  8px */
  --space-sm:  0.75rem;    /* 12px */
  --space-md:  1rem;       /* 16px */
  --space-lg:  1.5rem;     /* 24px */
  --space-xl:  2rem;       /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */
  --space-4xl: clamp(4rem, 9vw, 6.5rem);

  /* ---- Type scale ----------------------------------------------------- */
  --font-sans: "Avenir Next", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", "Segoe UI Semibold", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;                       /* 11px — table micro labels */
  --text-xs:  0.75rem;                         /* 12px */
  --text-sm:  0.875rem;                        /* 14px */
  --text-md:  1rem;                            /* 16px — body */
  --text-lg:  1.125rem;                        /* 18px — lead */
  --text-xl:  clamp(1.25rem, 0.6vw + 1.1rem, 1.375rem);
  --text-2xl: clamp(1.5rem,  1.1vw + 1.2rem, 1.875rem);
  --text-3xl: clamp(1.875rem, 2vw + 1.3rem, 2.5rem);
  --text-4xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --tracking-wide:  0.04em;
  --tracking-caps:  0.09em;

  /* ---- Radii ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, not neutral grey) ------------------------ */
  --shadow-xs: 0 1px 2px rgba(27, 31, 36, 0.06);
  --shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.06),
               0 2px 6px rgba(16, 40, 75, 0.06);
  --shadow-md: 0 2px 4px rgba(27, 31, 36, 0.05),
               0 8px 20px rgba(16, 40, 75, 0.10);
  --shadow-lg: 0 4px 10px rgba(27, 31, 36, 0.07),
               0 18px 40px rgba(16, 40, 75, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* ---- Focus ring ------------------------------------------------------ */
  --ring-color: #1F6FB2;
  --ring-offset: var(--color-bg);
  --ring-width: 3px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 340ms;

  /* ---- Layout ---------------------------------------------------------- */
  --container-max:      72rem;   /* 1152px */
  --container-narrow:   46rem;   /*  736px — prose */
  --container-wide:     84rem;
  --container-pad:      clamp(1rem, 4vw, 2rem);
  --header-height:      4.25rem;
  --tap-min:            2.75rem; /* 44px minimum tap target */
  --sidebar-width:      16rem;

  /* ---- Z-index ladder --------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  50;
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;

  /* ---- Decorative -------------------------------------------------------- */
  --texture-topo:
    radial-gradient(circle at 18% 22%, rgba(242, 169, 0, 0.10) 0, transparent 42%),
    radial-gradient(circle at 82% 8%,  rgba(166, 25, 46, 0.12) 0, transparent 46%),
    radial-gradient(circle at 60% 92%, rgba(46, 125, 79, 0.12) 0, transparent 44%);
  --rule-gradient: linear-gradient(
      90deg,
      var(--color-brand) 0 22%,
      var(--color-accent) 22% 46%,
      var(--color-danger) 46% 62%,
      transparent 62%);
}


/* ==========================================================================
   2. DARK COLOUR SCHEME  — tokens only, no component rules below this point
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              #12161C;
    --color-bg-alt:          #171C24;
    --color-surface:         #1B212B;
    --color-surface-2:       #212936;
    --color-surface-3:       #2A3342;
    --color-surface-invert:  #0A1220;

    --color-text:            #E8ECF2;
    --color-text-strong:     #FFFFFF;
    --color-text-muted:      #A8B3C2;
    --color-text-faint:      #8B96A6;
    /* NOT flipped in dark mode. "invert" names the text that sits on
       --color-surface-invert (the deep navy header/footer), which stays dark in
       both schemes — so its text must stay light in both. Flipping this to a
       dark value painted #12161C on #0A1220 in the header and footer: a 1.05:1
       contrast ratio that made the brand name and every nav link invisible. */
    --color-text-invert:     #F7F9FC;
    --color-text-on-brand:   #FFFFFF;
    --color-text-on-accent:  #2A1D00;

    --color-border:          #333D4C;
    --color-border-strong:   #475366;
    --color-border-soft:     #29323F;

    --color-link:            #9CC4EE;
    --color-link-hover:      var(--brand-gold);

    --color-brand:           #22467C;
    --color-brand-hover:     #2C5697;
    --color-brand-soft:      #1A2740;
    --color-brand-soft-ink:  #B7CBEA;

    --color-accent:          #F2A900;
    --color-accent-hover:    #FFBB21;
    --color-accent-soft:     #40300A;
    --color-accent-soft-ink: #FFD466;

    --color-danger:          #CF3448;
    --color-danger-hover:    #E2495D;
    --color-danger-soft:     #421220;
    --color-danger-soft-ink: #FF9AA6;

    --color-success:         #3F9E68;
    --color-success-hover:   #4CB278;
    --color-success-soft:    #12301F;
    --color-success-soft-ink:#86D3A6;

    --color-info:            #3287CC;
    --color-info-hover:      #4498DC;
    --color-info-soft:       #0F2A42;
    --color-info-soft-ink:   #8DC4EC;

    --color-warn:            #D79B12;
    --color-warn-hover:      #EAAC22;
    --color-warn-soft:       #3B2C05;
    --color-warn-soft-ink:   #F4CE72;

    --color-neutral-soft:     #2A3342;
    --color-neutral-soft-ink: #B7C1CF;

    /* Den chips: darker tinted beds, light legible ink */
    --den-lion-bg:      #40300A;  --den-lion-ink:    #FFD466;
    --den-tiger-bg:     #42230C;  --den-tiger-ink:   #FFA96B;
    --den-wolf-bg:      #421220;  --den-wolf-ink:    #FF9AA6;
    --den-bear-bg:      #0F2A42;  --den-bear-ink:    #8DC4EC;
    --den-webelos-bg:   #12301F;  --den-webelos-ink: #86D3A6;
    --den-aol-bg:       #1A2740;  --den-aol-ink:     #A9C0E4;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.55);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --ring-color: #7FB4E6;

    --texture-topo:
      radial-gradient(circle at 18% 22%, rgba(242, 169, 0, 0.14) 0, transparent 42%),
      radial-gradient(circle at 82% 8%,  rgba(166, 25, 46, 0.20) 0, transparent 46%),
      radial-gradient(circle at 60% 92%, rgba(46, 125, 79, 0.18) 0, transparent 44%);
  }
}


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Sticky footer scaffold — page agents wrap content in <main class="main">. */
body.page {
  display: flex;
  flex-direction: column;
}
.page > .main { flex: 1 0 auto; }
.page > .site-footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, pre {
  margin: 0;
}

ul[role="list"],
ol[role="list"],
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg { fill: currentColor; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

a {
  color: var(--color-link);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: max(1px, 0.06em);
}
a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }

hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-lg);
}

table { border-collapse: collapse; border-spacing: 0; }

::selection {
  background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-text-strong);
}

[hidden] { display: none !important; }

/* ---- Global focus ring ------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="tab"], [contenteditable="true"]):focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Never leave a mouse user with a stray ring, but never remove it for keys. */
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: calc(var(--z-header) + 10);
  transform: translateY(-200%);
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-weight: var(--weight-semi);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--text-xl);  letter-spacing: -0.01em; line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-lg);  font-weight: var(--weight-semi); line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--text-md);  font-weight: var(--weight-semi); }
h6, .h6 {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}

.display {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-danger);
}

.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: var(--space-md); }
.prose > * + :is(h2, h3, h4) { margin-top: var(--space-xl); }
.prose :is(ul, ol) { padding-left: 1.35em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
}

small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
strong, b { font-weight: var(--weight-semi); color: var(--color-text-strong); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--color-surface-3);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}

/* Decorative brand rule — handy under section titles. */
.rule {
  height: 4px;
  width: 5.5rem;
  border-radius: var(--radius-pill);
  background-image: var(--rule-gradient);
  background-color: var(--color-border);
}


/* ==========================================================================
   5. LAYOUT PRIMITIVES
   ========================================================================== */

/* ---- Container ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--flush  { padding-inline: 0; }

/* ---- Section ------------------------------------------------------------ */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.section--alt   { background: var(--color-bg-alt); }
.section--sand  { background: var(--color-surface-3); }
.section--brand {
  background: var(--color-surface-invert);
  color: var(--color-text-invert);
}
.section--brand :is(h1, h2, h3, h4, .lead) { color: inherit; }
.section--brand .lead { opacity: 0.85; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.section__title { margin: 0; }
.section__lead { margin-top: var(--space-xs); max-width: 56ch; }

/* ---- Stack (vertical rhythm) -------------------------------------------- */
.stack {
  --stack-gap: var(--space-md);
  display: flex;
  flex-direction: column;
}
.stack > * + * { margin-top: var(--stack-gap); }
.stack--2xs { --stack-gap: var(--space-2xs); }
.stack--xs  { --stack-gap: var(--space-xs); }
.stack--sm  { --stack-gap: var(--space-sm); }
.stack--lg  { --stack-gap: var(--space-lg); }
.stack--xl  { --stack-gap: var(--space-xl); }

/* ---- Cluster (horizontal, wraps) ---------------------------------------- */
.cluster {
  --cluster-gap: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap);
}
.cluster--xs      { --cluster-gap: var(--space-2xs); }
.cluster--sm      { --cluster-gap: var(--space-xs); }
.cluster--lg      { --cluster-gap: var(--space-lg); }
.cluster--between { justify-content: space-between; }
.cluster--center  { justify-content: center; }
.cluster--end     { justify-content: flex-end; }
.cluster--top     { align-items: flex-start; }
.cluster--baseline{ align-items: baseline; }
.cluster--nowrap  { flex-wrap: nowrap; }

/* ---- Grid ---------------------------------------------------------------- */
.grid {
  --grid-min: 16rem;
  --grid-gap: var(--space-lg);
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
.grid--sm-gap { --grid-gap: var(--space-sm); }
.grid--tight  { --grid-min: 11rem; }
.grid--wide   { --grid-min: 22rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
.grid__span-2 { grid-column: span 2; }
@media (max-width: 40rem) { .grid__span-2 { grid-column: auto; } }

/* ---- Card ---------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-3);
}
.card__media > img { width: 100%; height: 100%; object-fit: cover; }

.card__header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.card__title { font-size: var(--text-lg); margin: 0; }
.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.card__body {
  padding: var(--space-lg);
  flex: 1 1 auto;
}
.card__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.card--flush .card__body { padding: 0; }
.card--pad-sm .card__body { padding: var(--space-md); }

/* Accent strip on the leading edge — set --card-accent per den if wanted. */
.card--accent::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--card-accent, var(--color-accent));
}
.card--accent { padding-inline-start: 5px; }

.card--interactive {
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.card--interactive:focus-within {
  border-color: var(--ring-color);
  box-shadow: var(--shadow-md);
}

/* Whole-card link: put <a class="stretch-link"> inside a .card. */
.stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---- Sidebar layout ------------------------------------------------------ */
.sidebar-layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .sidebar-layout {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .sidebar-layout--right {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  }
  .sidebar-layout--right > .sidebar-layout__aside { order: 2; }
  .sidebar-layout--wide { --sidebar-width: 20rem; }
  .sidebar-layout__aside--sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }
}
.sidebar-layout__aside { min-width: 0; }
.sidebar-layout__main  { min-width: 0; }

/* Side nav list, used inside .sidebar-layout__aside on admin/portal. */
.side-nav { display: flex; flex-direction: column; gap: var(--space-3xs); }
.side-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
  border-left: 3px solid transparent;
  transition: background var(--dur-fast) var(--ease-out);
}
.side-nav__link:hover { background: var(--color-surface-3); color: var(--color-text); }
.side-nav__link.is-active,
.side-nav__link[aria-current="page"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-soft-ink);
  border-left-color: var(--color-accent);
  font-weight: var(--weight-semi);
}
.side-nav__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Split / media object ------------------------------------------------ */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--media-first > :first-child { order: -1; }
}

.media-object {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.media-object__body { min-width: 0; flex: 1 1 auto; }


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Visible again when focused — for skip links built on the utility. */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-center  { text-align: center; }
.text-end     { text-align: end; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.text-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.numeric { font-variant-numeric: tabular-nums; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.full-width { width: 100%; }
.flex-1     { flex: 1 1 auto; min-width: 0; }
.push-right { margin-left: auto; }

.mt-0  { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}


/* ==========================================================================
   7. SITE HEADER + MOBILE HAMBURGER NAV
   Markup contract — the <nav> goes INSIDE .site-header__inner:
     <header class="site-header">
       <div class="site-header__inner container">
         <a class="brand" …>…</a>
         <button class="nav-toggle" aria-expanded="false" aria-controls="siteNav">…</button>
         <nav id="siteNav" class="site-nav"><ul class="site-nav__list">…</ul></nav>
         <div class="site-header__utility">…</div>
       </div>
     </header>
   Below 900px the nav is a full-width drawer on its own wrapped row; at 900px+
   it sits inline between the brand and the utility area.
   JS toggles `.is-open` on .site-nav AND aria-expanded on .nav-toggle.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface-invert);
  color: var(--color-text-invert);
  border-bottom: 3px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.site-header--static { position: static; }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
/* The brand sets row 1's height so the bar keeps a constant 4.25rem. */
.site-header__inner > .brand { min-height: var(--header-height); }

/* ---- Brand lockup -------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: inherit;
  text-decoration: none;
  padding-block: var(--space-xs);
}
.brand:hover { color: inherit; }
.brand__mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  overflow: hidden;
}
.brand__mark > img { width: 100%; height: 100%; object-fit: contain; }
/* The pack logo is a full colour shield with its own navy field, so it must not
   sit on the gold tile the text mark uses. Slightly wider than tall to suit the
   artwork's aspect without shrinking it inside a square. */
/* Short-form pack number, sits under the tagline in the hero. */
.hero__alias {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}

/* Hero crest — the logo at a size where its detail actually reads. Scales down
   on small screens so it never crowds the headline. */
.hero__crest {
  display: block;
  width: auto;
  height: clamp(6rem, 14vw, 10rem);
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
@media (max-width: 30rem) {
  .hero__crest { height: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__crest { filter: none; }
}

.brand__mark--logo {
  background: none;
  border-radius: 0;
  width: 3.1rem;
  height: 3.1rem;
  overflow: visible;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}
.brand__tagline {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}
@media (max-width: 26.25rem) {
  .brand__tagline { display: none; }
}

/* ---- Hamburger ----------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-out),
              opacity var(--dur-fast) linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Nav: mobile drawer (default) ---------------------------------------- */
.site-nav {
  display: none;
  flex: 1 0 100%;               /* own row inside .site-header__inner */
  order: 3;
  /* full-bleed rule across the header, content stays on the container grid */
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--color-surface-invert);
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-nav.is-open { display: block; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.site-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-invert);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.site-nav__link:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
  background: rgba(242, 169, 0, 0.16);
  color: var(--color-accent);
  font-weight: var(--weight-semi);
}
.site-nav__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin-block: var(--space-2xs);
}
/* Highlighted call-to-action inside the nav (Join Us / Donate). */
.site-nav__cta {
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2xs);
}
.site-nav__cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

/* Right-hand utility area (account chip, sign out) */
.site-header__utility { display: none; }

/* ---- Nav: desktop -------------------------------------------------------- */
@media (min-width: 56.25rem) {
  .nav-toggle { display: none; }

  /* One row: brand | nav | utility */
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-lg);
    min-height: var(--header-height);
  }
  .site-nav {
    display: block !important;
    flex: 1 1 auto;
    order: 0;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 0;
    background: transparent;
    overflow: visible;
    max-height: none;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    padding: 0;
    flex-wrap: wrap;
  }
  .site-nav__link { padding-inline: var(--space-sm); }
  .site-nav__cta { margin-top: 0; margin-inline-start: var(--space-2xs); }
  .site-nav__divider {
    width: 1px;
    height: 1.5rem;
    margin-inline: var(--space-2xs);
    margin-block: 0;
  }
  .site-header__utility {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-xs);
  }

}

/* Account block inside the mobile drawer (see .site-header__utility, which is
   hidden below 900px). renderNav() emits this; keep the two in step. */
.site-nav__account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-2xs);
}
.site-nav__account .site-nav__divider {
  flex: 1 0 100%;
  height: 1px;
  width: auto;
  background: rgba(255, 255, 255, 0.14);
  margin-block: var(--space-2xs);
}

/* Hide the drawer's copy on desktop, where .site-header__utility shows the
   real one. This block MUST come after the base rule above: a media query adds
   no specificity, so if it were declared earlier the base `display: flex` would
   win and the account chip would render twice in the header. */
@media (min-width: 56.25rem) {
  .site-nav__account { display: none; }
}

/* Account chip in the header */
.account-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text-invert);
  font-size: var(--text-sm);
  text-decoration: none;
  max-width: 14rem;
}
.account-chip:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.account-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Announcement / status strip directly under the header */
.header-banner {
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-ink);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  padding-block: var(--space-xs);
}


/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--color-surface-invert);
  background-image: var(--texture-topo);
  color: var(--color-text-invert);
  padding-block: clamp(3rem, 9vw, 6rem);
  overflow: hidden;
}
/* Optional photograph: set --hero-image: url(...) on the element. */
.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
}
.hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(7, 18, 36, 0.82) 0%,
    rgba(7, 18, 36, 0.66) 55%,
    rgba(7, 18, 36, 0.88) 100%);
}
.hero__inner { position: relative; z-index: 1; max-width: 44rem; }
.hero--center .hero__inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.hero--center .hero__actions { justify-content: center; }

.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-size: var(--text-4xl);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}
.hero__tagline {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
}
.hero__text {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero--center .hero__text { margin-inline: auto; }
.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero__facts {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-lg);
}
.hero__fact-label {
  display: block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
}
.hero__fact-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: #FFFFFF;
}

/* Compact page banner for interior pages */
.page-head {
  background: var(--color-surface-invert);
  background-image: var(--texture-topo);
  color: var(--color-text-invert);
  padding-block: clamp(1.75rem, 5vw, 3rem);
  border-bottom: 3px solid var(--color-accent);
}
.page-head__title { color: #FFFFFF; margin: 0; font-size: var(--text-3xl); }
.page-head__text {
  margin-top: var(--space-xs);
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-surface-invert);
  color: rgba(255, 255, 255, 0.82);
  border-top: 3px solid var(--color-accent);
  padding-block: var(--space-2xl) var(--space-lg);
  font-size: var(--text-sm);
}
.site-footer a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,0.4); }
.site-footer a:hover { color: var(--color-accent); }

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.site-footer__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li + li { margin-top: var(--space-2xs); }
.site-footer__list a {
  display: inline-block;
  min-height: 1.9rem;
  line-height: 1.9rem;
}
.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.62);
}


/* ==========================================================================
   10. BUTTONS
   .btn + one of --primary --secondary --ghost --danger --accent --link
   sizes: --sm --lg --block --icon ; states: :disabled, [aria-disabled], .is-loading
   ========================================================================== */

.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-surface-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn--primary {
  --btn-bg: var(--color-brand);
  --btn-bg-hover: var(--color-brand-hover);
  --btn-fg: var(--color-text-on-brand);
  --btn-border: transparent;
  box-shadow: var(--shadow-sm);
}
.btn--secondary {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-brand-soft);
  --btn-fg: var(--color-brand-soft-ink);
  --btn-border: currentColor;
  box-shadow: none;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-surface-3);
  --btn-fg: var(--color-text-muted);
  --btn-border: transparent;
  box-shadow: none;
}
.btn--ghost:hover { color: var(--color-text); }
.btn--danger {
  --btn-bg: var(--color-danger);
  --btn-bg-hover: var(--color-danger-hover);
  --btn-fg: #FFFFFF;
  --btn-border: transparent;
}
.btn--accent {
  --btn-bg: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-fg: var(--color-text-on-accent);
  --btn-border: transparent;
  box-shadow: var(--shadow-sm);
}
/* Text-only button that behaves like a link but keeps the 44px target. */
.btn--link {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--color-link);
  --btn-border: transparent;
  box-shadow: none;
  padding-inline: var(--space-2xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.btn--link:hover { color: var(--color-link-hover); }

/* On dark beds (hero, header, footer) */
.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.10);
  --btn-bg-hover: rgba(255, 255, 255, 0.20);
  --btn-fg: #FFFFFF;
  --btn-border: rgba(255, 255, 255, 0.55);
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.btn--lg {
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  font-size: var(--text-lg);
  border-radius: var(--radius-md);
}
.btn--block { display: flex; width: 100%; }
.btn--pill  { border-radius: var(--radius-pill); }
.btn--icon {
  width: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0;
  border-radius: var(--radius-md);
}
.btn--icon.btn--sm { width: 2.25rem; min-width: 2.25rem; }
.btn__icon { flex: none; width: 1.15em; height: 1.15em; }

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  filter: grayscale(0.25);
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { background: var(--btn-bg); }

/* Loading: keep the label for screen readers, hide it visually, spin. */
.btn.is-loading {
  cursor: progress;
  pointer-events: none;
  color: transparent !important;
}
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  color: var(--btn-fg);
  animation: spin 720ms linear infinite;
  visibility: visible;
}
.btn--primary.is-loading::after,
.btn--danger.is-loading::after { color: #FFFFFF; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Button groups */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.btn-row--end { justify-content: flex-end; }
@media (max-width: 30rem) {
  .btn-row--stack-mobile { flex-direction: column; align-items: stretch; }
  .btn-row--stack-mobile > .btn { width: 100%; }
}

.btn-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.btn-group > .btn { box-shadow: none; border-radius: 0; margin-left: -1px; }
.btn-group > .btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  margin-left: 0;
}
.btn-group > .btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.btn-group > .btn.is-active,
.btn-group > .btn[aria-pressed="true"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-soft-ink);
  z-index: 1;
}


/* ==========================================================================
   11. FORM CONTROLS
   Markup contract:
     <div class="field">
       <label class="field__label" for="x">Name <span class="req" aria-hidden="true">*</span></label>
       <input id="x" required aria-describedby="x-hint x-err">
       <p class="field__hint" id="x-hint">…</p>
       <p class="field__error" id="x-err" role="alert">…</p>
     </div>
   ========================================================================== */

.form { max-width: 42rem; }
.form--wide { max-width: none; }

.field { display: block; margin-bottom: var(--space-md); }
.field:last-child { margin-bottom: 0; }

.field__label,
.form label:not(.check__label):not(.field__label) {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text-strong);
  margin-bottom: var(--space-2xs);
}
.req {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
  margin-left: 0.15em;
}
.field__hint {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.field__error {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-danger);
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
}
.field__error::before { content: "▲"; font-size: 0.7em; line-height: 1.7; flex: none; }
.field__error:empty { display: none; }

/* ---- Text-ish controls --------------------------------------------------- */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.6rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-md);        /* 16px: stops iOS zoom-on-focus */
  line-height: 1.35;
  box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
input[type="search"] { -webkit-appearance: none; }

textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: var(--leading-body);
}

::placeholder { color: var(--color-text-faint); opacity: 1; }

:is(.input, input, select, textarea):hover:not(:disabled):not([readonly]) {
  border-color: var(--color-text-faint);
}
:is(.input, input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--ring-color);
  box-shadow: 0 0 0 var(--ring-width)
              color-mix(in srgb, var(--ring-color) 35%, transparent);
}
:is(.input, input, select, textarea):disabled,
:is(.input, input, select, textarea)[readonly] {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
:is(.input, input, select, textarea)[readonly] { cursor: text; }

/* Invalid state — applied by JS via .is-invalid, or natively after submit. */
.is-invalid,
:is(.input, input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger-soft) 55%, var(--color-surface));
}
.is-invalid:focus-visible,
:is(.input, input, select, textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 var(--ring-width)
              color-mix(in srgb, var(--color-danger) 32%, transparent);
}

/* ---- Select -------------------------------------------------------------- */
select {
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 0.1rem),
    calc(100% - 0.75rem) calc(50% + 0.1rem);
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
select[multiple] {
  background-image: none;
  padding-right: 0.75rem;
  min-height: 9rem;
}
select[multiple] option { padding: 0.3rem 0.25rem; }

/* ---- File input ---------------------------------------------------------- */
.file-input {
  display: block;
  width: 100%;
  padding: var(--space-sm);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.file-input:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.file-input::file-selector-button {
  margin-right: var(--space-sm);
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--color-brand-hover); }
.file-drop {
  display: grid;
  place-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-xl);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.file-drop.is-dragover {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-soft-ink);
}

/* ---- Checkbox & radio ---------------------------------------------------- */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding-block: var(--space-2xs);
  cursor: pointer;
}
.check input[type="checkbox"],
.check input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.18rem 0 0;
  padding: 0;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: grid;
  place-content: center;
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  transform: scale(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
  box-shadow: inset 1rem 1rem currentColor;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 39% 66%);
}
input[type="radio"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
  box-shadow: inset 1rem 1rem currentColor;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
input[type="checkbox"]:indeterminate::before {
  transform: scale(1);
  clip-path: polygon(12% 42%, 88% 42%, 88% 58%, 12% 58%);
  color: #FFFFFF;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background: var(--color-surface-3);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.check__label {
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  line-height: 1.45;
  margin: 0;
  cursor: pointer;
}
.check__hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.checklist { display: flex; flex-direction: column; gap: var(--space-2xs); }
.checklist--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-md); }

/* Card-style choice, nice for den pickers and RSVP yes/no/maybe */
.check-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.check-card:hover { border-color: var(--color-brand); }
.check-card:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}
.check-card:has(input:focus-visible) {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
}

/* ---- Switch -------------------------------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; min-height: var(--tap-min); }
.switch input[type="checkbox"] {
  width: 2.75rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface-3);
  position: relative;
  display: block;
  transition: background-color var(--dur-med) var(--ease-out);
}
.switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  clip-path: none;
  transform: translateY(-50%) scale(1);
  transition: left var(--dur-med) var(--ease-out);
}
.switch input[type="checkbox"]:checked {
  background: var(--color-success);
  border-color: var(--color-success);
}
.switch input[type="checkbox"]:checked::before {
  left: calc(100% - 1.2rem);
  transform: translateY(-50%) scale(1);
  box-shadow: var(--shadow-xs);
}

/* ---- Fieldset ------------------------------------------------------------ */
.fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: 0 0 var(--space-lg);
  background: var(--color-surface-2);
  min-width: 0;
}
.fieldset__legend,
.fieldset > legend {
  padding-inline: var(--space-xs);
  margin-inline-start: calc(var(--space-xs) * -1);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
}
.fieldset--plain {
  border: 0;
  padding: 0;
  background: transparent;
}
.fieldset--plain > legend { padding-inline: 0; margin-inline-start: 0; }

/* ---- Field arrangements -------------------------------------------------- */
.field-row {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.field-row > .field { margin-bottom: 0; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-soft);
}
.form-actions--plain { border-top: 0; padding-top: 0; }

/* Input with a leading/trailing add-on (e.g. "$" or a search icon) */
.input-group { display: flex; align-items: stretch; }
.input-group > :is(input, select, .input) { border-radius: 0; }
.input-group > :first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}
.input-group > :last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
.input-group > * + * { margin-left: -1px; }
.input-group > :focus-visible { z-index: 1; }
.input-group__addon {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-sm);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Live status line for async form submits (aria-live region). */
.form-status {
  min-height: 1.5rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.form-status--error   { color: var(--color-danger); }
.form-status--success { color: var(--color-success); }

/* Character counter */
.char-count {
  display: block;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.char-count.is-over { color: var(--color-danger); font-weight: var(--weight-semi); }


/* ==========================================================================
   12. TABLES — collapse to stacked cards below 700px
   Markup contract for the responsive variant:
     <div class="table-wrap">
       <table class="table table--stack">
         <thead><tr><th scope="col">Scout</th>…</tr></thead>
         <tbody><tr><td data-label="Scout">…</td>…</tr></tbody>
       </table>
     </div>
   Every <td> in a .table--stack MUST carry data-label.
   ========================================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.table-wrap--plain { border: 0; box-shadow: none; background: transparent; }

.table {
  width: 100%;
  font-size: var(--text-sm);
  text-align: left;
}
.table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-strong);
}
.table th,
.table td {
  padding: var(--space-sm) var(--space-md);
  vertical-align: middle;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-3);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr + tr { border-top: 1px solid var(--color-border-soft); }
.table tbody tr:hover { background: var(--color-surface-2); }
.table tbody th[scope="row"] {
  font-weight: var(--weight-semi);
  color: var(--color-text-strong);
}
.table tfoot td {
  border-top: 2px solid var(--color-border);
  font-weight: var(--weight-semi);
  background: var(--color-surface-2);
}
.table--zebra tbody tr:nth-child(even) { background: var(--color-surface-2); }
.table--compact th,
.table--compact td { padding: var(--space-xs) var(--space-sm); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__actions {
  display: flex;
  gap: var(--space-2xs);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table__sort::after { content: "↕"; opacity: 0.45; }
[aria-sort="ascending"] .table__sort::after  { content: "↑"; opacity: 1; }
[aria-sort="descending"] .table__sort::after { content: "↓"; opacity: 1; }
.table tbody tr.is-selected {
  background: var(--color-brand-soft);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* ---- Stacked-card mode --------------------------------------------------- */
@media (max-width: 43.6875rem) {          /* < 700px */
  .table--stack { display: block; font-size: var(--text-md); }
  .table--stack thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table--stack tbody,
  .table--stack tfoot { display: block; }
  .table--stack tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .table--stack tbody tr + tr { border-top: 1px solid var(--color-border); }
  .table--stack tbody tr:hover { background: var(--color-surface); }
  .table--stack :is(td, th) {
    display: flex;
    gap: var(--space-md);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-2xs) 0;
    text-align: right;
    border: 0;
  }
  .table--stack :is(td, th) + :is(td, th) {
    border-top: 1px dashed var(--color-border-soft);
  }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
  }
  .table--stack th[scope="row"] {
    justify-content: flex-start;
    text-align: left;
    font-size: var(--text-lg);
    font-family: var(--font-display);
    padding-bottom: var(--space-xs);
  }
  .table--stack .table__num { text-align: right; }
  .table--stack .table__actions { justify-content: flex-end; width: 100%; }
  .table-wrap:has(.table--stack) {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .table--stack caption { padding-inline: 0; }
}


/* ==========================================================================
   13. BADGES, DEN PILLS, STATUS PILLS
   ========================================================================== */

.badge,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-soft-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.6;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.pill { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.badge--count {
  min-width: 1.5em;
  justify-content: center;
  padding-inline: 0.45em;
  font-variant-numeric: tabular-nums;
  background: var(--color-danger);
  color: #FFFFFF;
}
.badge--outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}
.pill__dot,
.den-dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.den-dot { width: 0.65rem; height: 0.65rem; background: var(--den-color, currentColor); }

/* ---- Tone variants (generic) --------------------------------------------- */
.pill--neutral, .badge--neutral { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }
.pill--info,    .badge--info    { background: var(--color-info-soft);    color: var(--color-info-soft-ink); }
.pill--success, .badge--success { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--warn,    .badge--warn    { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }
.pill--danger,  .badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }
.pill--brand,   .badge--brand   { background: var(--color-brand-soft);   color: var(--color-brand-soft-ink); }
.pill--accent,  .badge--accent  { background: var(--color-accent-soft);  color: var(--color-accent-soft-ink); }

/* ---- Den pills — one per seeded dens.key (CONTRACT §3.2) ----------------- */
.den-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.2em 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  background: var(--color-neutral-soft);
  color: var(--color-neutral-soft-ink);
  border: 1px solid transparent;
}
.den-pill::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--den-color, currentColor);
  flex: none;
}
.den-pill--lion           { background: var(--den-lion-bg);    color: var(--den-lion-ink);    --den-color: var(--den-lion); }
.den-pill--tiger          { background: var(--den-tiger-bg);   color: var(--den-tiger-ink);   --den-color: var(--den-tiger); }
.den-pill--wolf           { background: var(--den-wolf-bg);    color: var(--den-wolf-ink);    --den-color: var(--den-wolf); }
.den-pill--bear           { background: var(--den-bear-bg);    color: var(--den-bear-ink);    --den-color: var(--den-bear); }
.den-pill--webelos        { background: var(--den-webelos-bg); color: var(--den-webelos-ink); --den-color: var(--den-webelos); }
.den-pill--arrow_of_light { background: var(--den-aol-bg);     color: var(--den-aol-ink);     --den-color: var(--den-aol); }
/* Fallback for an unassigned scout */
.den-pill--none {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
  --den-color: var(--color-border-strong);
}

/* Den accent helpers for cards/headers: <div class="card den-accent--wolf"> */
.den-accent--lion           { --card-accent: var(--den-lion); }
.den-accent--tiger          { --card-accent: var(--den-tiger); }
.den-accent--wolf           { --card-accent: var(--den-wolf); }
.den-accent--bear           { --card-accent: var(--den-bear); }
.den-accent--webelos        { --card-accent: var(--den-webelos); }
.den-accent--arrow_of_light { --card-accent: var(--den-aol); }

/* ---- Status pills — exact enum values from CONTRACT §2 ------------------- */
/* join_request_status */
.pill--new       { background: var(--color-info-soft);    color: var(--color-info-soft-ink); }
.pill--contacted { background: var(--color-accent-soft);  color: var(--color-accent-soft-ink); }
.pill--visited   { background: var(--color-brand-soft);   color: var(--color-brand-soft-ink); }
.pill--enrolled  { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--declined  { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }

/* dues_status */
.pill--unpaid    { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }
.pill--partial   { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }
.pill--paid      { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--waived    { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }

/* user_status */
.pill--pending   { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }
.pill--approved  { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--suspended { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }

/* user_role */
.pill--parent    { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }
.pill--leader    { background: var(--color-brand-soft);   color: var(--color-brand-soft-ink); }
.pill--admin     { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }

/* broadcast_status + broadcast_recipient_status + reminder_job_status */
.pill--draft          { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }
.pill--scheduled      { background: var(--color-info-soft);    color: var(--color-info-soft-ink); }
.pill--sending        { background: var(--color-accent-soft);  color: var(--color-accent-soft-ink); }
.pill--sent           { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--delivered      { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--queued         { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }
.pill--failed         { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }
.pill--cancelled      { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }
.pill--skipped_optout { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }

/* rsvp_status */
.pill--yes   { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--no    { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }
.pill--maybe { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }

/* event_kind chips */
.pill--pack_meeting { background: var(--color-brand-soft);   color: var(--color-brand-soft-ink); }
.pill--den_meeting  { background: var(--color-info-soft);    color: var(--color-info-soft-ink); }
.pill--campout      { background: var(--color-success-soft); color: var(--color-success-soft-ink); }
.pill--service      { background: var(--color-accent-soft);  color: var(--color-accent-soft-ink); }
.pill--fundraiser   { background: var(--color-danger-soft);  color: var(--color-danger-soft-ink); }
.pill--outing       { background: var(--color-warn-soft);    color: var(--color-warn-soft-ink); }
.pill--other        { background: var(--color-neutral-soft); color: var(--color-neutral-soft-ink); }

/* A row of pills / tags */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


/* ==========================================================================
   14. MODAL DIALOG
   Works with native <dialog class="modal"> (preferred) or
   <div class="modal is-open" role="dialog" aria-modal="true">.
   ========================================================================== */

dialog.modal {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}
dialog.modal::backdrop {
  background: rgba(7, 18, 36, 0.62);
  backdrop-filter: blur(2px);
}
dialog.modal[open] {
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

/* Non-dialog fallback */
div.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  place-items: center;
  padding: var(--space-md);
  background: rgba(7, 18, 36, 0.62);
  overflow-y: auto;
}
div.modal.is-open { display: grid; }

.modal__panel {
  width: min(38rem, 100%);
  max-height: min(85dvh, 52rem);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modal-in var(--dur-med) var(--ease-out);
}
.modal--sm   .modal__panel { width: min(26rem, 100%); }
.modal--wide .modal__panel { width: min(58rem, 100%); }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-surface-2);
}
.modal__title { font-size: var(--text-xl); margin: 0; }
.modal__close {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: calc(var(--space-2xs) * -1) calc(var(--space-xs) * -1) 0 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: var(--color-surface-3); color: var(--color-text); }
.modal__body {
  padding: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-surface-2);
}
@media (max-width: 30rem) {
  .modal__footer { flex-direction: column-reverse; }
  .modal__footer > .btn { width: 100%; }
}
/* Stops the page behind a modal from scrolling; JS adds it to <body>. */
.is-modal-open { overflow: hidden; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Slide-over drawer variant (filters, quick edit) */
.drawer { z-index: var(--z-drawer); }
.drawer .modal__panel {
  width: min(26rem, 100%);
  max-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
  animation: drawer-in var(--dur-med) var(--ease-out);
}
.drawer[open],
.drawer.is-open { place-items: stretch; justify-items: end; padding: 0; }
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}


/* ==========================================================================
   15. ALERTS & TOASTS
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-muted);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.alert__icon {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  background: currentColor;
  margin-top: 0.1rem;
}
.alert__icon::before { color: var(--color-surface); }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__title {
  display: block;
  font-weight: var(--weight-bold);
  color: inherit;
  margin-bottom: 0.15em;
}
.alert__close {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.alert__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.alert:empty { display: none; }

.alert--success {
  background: var(--color-success-soft);
  color: var(--color-success-soft-ink);
  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
  border-left-color: var(--color-success);
}
.alert--error,
.alert--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-ink);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
  border-left-color: var(--color-danger);
}
.alert--info {
  background: var(--color-info-soft);
  color: var(--color-info-soft-ink);
  border-color: color-mix(in srgb, var(--color-info) 40%, transparent);
  border-left-color: var(--color-info);
}
.alert--warn {
  background: var(--color-warn-soft);
  color: var(--color-warn-soft-ink);
  border-color: color-mix(in srgb, var(--color-warn) 40%, transparent);
  border-left-color: var(--color-warn);
}
.alert--lg { font-size: var(--text-md); padding: var(--space-md) var(--space-lg); }

/* ---- Toasts -------------------------------------------------------------- */
/* One <div class="toast-region" aria-live="polite" role="status"> per page. */
.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  inset-block-end: max(var(--space-md), env(safe-area-inset-bottom));
  inset-inline: var(--space-md);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-xs);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 40rem) {
  .toast-region {
    inset-inline: auto var(--space-lg);
    align-items: flex-end;
    max-width: 26rem;
  }
}
.toast {
  pointer-events: auto;
  width: min(26rem, 100%);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--dur-med) var(--ease-out);
}
.toast--success { border-left-color: var(--color-success); }
.toast--error   { border-left-color: var(--color-danger); }
.toast--info    { border-left-color: var(--color-info); }
.toast--warn    { border-left-color: var(--color-warn); }
.toast__body  { flex: 1 1 auto; min-width: 0; }
.toast__title { display: block; font-weight: var(--weight-bold); }
.toast__close {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.toast__close:hover { background: var(--color-surface-3); color: var(--color-text); }
.toast.is-leaving { animation: toast-out var(--dur-med) var(--ease-in-out) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

/* Full-width inline notice used on portal.html for pending accounts */
.notice {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  padding: var(--space-lg);
  text-align: center;
}


/* ==========================================================================
   16. TABS
   Markup: <div class="tabs"><div class="tabs__list" role="tablist">
             <button class="tabs__tab" role="tab" aria-selected="true">…</button>
           </div><div class="tabs__panel" role="tabpanel">…</div></div>
   ========================================================================== */

.tabs__list {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.tabs__tab {
  flex: none;
  position: relative;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.tabs__tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.tabs__tab[aria-selected="true"],
.tabs__tab.is-active {
  color: var(--color-brand-soft-ink);
  border-bottom-color: var(--color-accent);
  background: var(--color-surface);
}
.tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
.tabs__count {
  margin-left: 0.45em;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}
.tabs__panel:focus { outline: none; }

/* Pill-style segmented control (filter switches) */
.segmented {
  display: inline-flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: var(--color-surface-3);
  border-radius: var(--radius-pill);
  overflow-x: auto;
  max-width: 100%;
}
.segmented__item {
  flex: none;
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  white-space: nowrap;
  cursor: pointer;
}
.segmented__item[aria-selected="true"],
.segmented__item[aria-pressed="true"],
.segmented__item.is-active {
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-xs);
}


/* ==========================================================================
   17. EMPTY STATE
   ========================================================================== */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.empty--plain { border: 0; background: transparent; padding-block: var(--space-xl); }
.empty__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-text-faint);
  font-size: 1.5rem;
}
.empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  margin: 0;
}
.empty__text { max-width: 44ch; margin: 0; text-wrap: pretty; }
.empty__actions { margin-top: var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }


/* ==========================================================================
   18. SKELETON LOADING
   ========================================================================== */

.skeleton {
  --skeleton-base: var(--color-surface-3);
  --skeleton-sheen: color-mix(in srgb, var(--color-surface) 70%, var(--color-surface-3));
  display: block;
  border-radius: var(--radius-sm);
  background-color: var(--skeleton-base);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-sheen) 45%,
    var(--skeleton-sheen) 55%,
    transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.35s var(--ease-in-out) infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton--text   { height: 0.85rem; margin-block: 0.32rem; }
.skeleton--title  { height: 1.4rem; width: 55%; margin-block: 0.4rem; }
.skeleton--line-70 { width: 70%; }
.skeleton--line-50 { width: 50%; }
.skeleton--line-30 { width: 30%; }
.skeleton--block  { height: 7rem; border-radius: var(--radius-md); }
.skeleton--avatar { width: 3rem; height: 3rem; border-radius: 50%; }
.skeleton--pill   { height: 1.4rem; width: 5rem; border-radius: var(--radius-pill); }
.skeleton--card {
  height: 10rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.skeleton-list { display: flex; flex-direction: column; gap: var(--space-sm); }

@keyframes shimmer {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}

/* Generic inline spinner */
.spinner {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  animation: spin 720ms linear infinite;
  vertical-align: -0.15em;
}
.spinner--lg { width: 2.25rem; height: 2.25rem; border-width: 3px; }

/* A whole-region busy state */
[aria-busy="true"] { cursor: progress; }


/* ==========================================================================
   19. AVATAR (scout photo, circular, initials fallback)
   Markup: <span class="avatar"><img class="avatar__img" …>
             <span class="avatar__initials" aria-hidden="true">TW</span></span>
   Hide/remove the <img> when there is no signed URL and the initials show.
   ========================================================================== */

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size, 3rem);
  height: var(--avatar-size, 3rem);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-brand-soft);
  color: var(--color-brand-soft-ink);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: calc(var(--avatar-size, 3rem) * 0.36);
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}
.avatar__initials { grid-area: 1 / 1; text-transform: uppercase; }
.avatar__img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-surface-3);
}
.avatar--xs { --avatar-size: 1.75rem; }
.avatar--sm { --avatar-size: 2.25rem; }
.avatar--lg { --avatar-size: 4rem; }
.avatar--xl { --avatar-size: 6rem; }
.avatar--2xl { --avatar-size: 9rem; }
.avatar--square { border-radius: var(--radius-md); }

/* Tint the fallback by den: <span class="avatar avatar--wolf"> */
.avatar--lion    { background: var(--den-lion-bg);    color: var(--den-lion-ink); }
.avatar--tiger   { background: var(--den-tiger-bg);   color: var(--den-tiger-ink); }
.avatar--wolf    { background: var(--den-wolf-bg);    color: var(--den-wolf-ink); }
.avatar--bear    { background: var(--den-bear-bg);    color: var(--den-bear-ink); }
.avatar--webelos { background: var(--den-webelos-bg); color: var(--den-webelos-ink); }
.avatar--arrow_of_light { background: var(--den-aol-bg); color: var(--den-aol-ink); }

.avatar-stack { display: flex; align-items: center; }
.avatar-stack > .avatar + .avatar { margin-left: -0.6rem; }
.avatar-stack > .avatar { box-shadow: 0 0 0 1px var(--color-border); }

/* Person row: avatar + name + meta, used all over the portal and CRM */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.person__body { min-width: 0; }
.person__name {
  display: block;
  font-weight: var(--weight-semi);
  color: var(--color-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person__meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   20. EVENT / CALENDAR ROWS
   ========================================================================== */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.event-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.event-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.event-row--past { opacity: 0.68; }
.event-row--next {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-sm);
}
.event-row--unpublished {
  border-style: dashed;
  background: var(--color-surface-2);
}

/* The tear-off date block */
.event-row__date {
  flex: none;
  width: 3.75rem;
  padding: var(--space-2xs) 0 var(--space-xs);
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  color: var(--color-text-strong);
  overflow: hidden;
  line-height: 1.1;
}
.event-row__month {
  display: block;
  padding-block: 0.2rem;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.event-row__day {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.event-row__weekday {
  display: block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.event-row__body { flex: 1 1 auto; min-width: 0; }
.event-row__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  margin: 0;
  text-wrap: pretty;
}
.event-row__title a { color: inherit; text-decoration: none; }
.event-row__title a:hover { color: var(--color-link-hover); }
.event-row__meta {
  margin-top: var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.event-row__meta-item { display: inline-flex; align-items: center; gap: 0.35em; }
.event-row__desc {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.event-row__tags { margin-top: var(--space-xs); }
.event-row__actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: stretch;
}
@media (max-width: 40rem) {
  .event-row { flex-wrap: wrap; }
  .event-row__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--color-border-soft);
  }
}

/* Month group heading inside a long schedule */
.event-group__heading {
  position: sticky;
  top: calc(var(--header-height) + 0.25rem);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-sm);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.event-group__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

/* Compact "up next" strip for the portal dashboard */
.event-mini {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  min-width: 0;
}
.event-mini + .event-mini { border-top: 1px solid var(--color-border-soft); }
.event-mini__when {
  flex: none;
  width: 4.5rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Definition-style detail list for an event / scout page */
.detail-list {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
  font-size: var(--text-sm);
}
.detail-list dt {
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  padding-top: 0.15em;
}
.detail-list dd { margin: 0; color: var(--color-text); min-width: 0; }
@media (max-width: 26.25rem) {
  .detail-list { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .detail-list dd + dt { margin-top: var(--space-xs); }
}


/* ==========================================================================
   21. STAT TILES (admin dashboard)
   ========================================================================== */

.stat-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--stat-accent, var(--color-brand));
}
.stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}
.stat__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
}
.stat__delta--up   { color: var(--color-success); }
.stat__delta--down { color: var(--color-danger); }
.stat__delta--flat { color: var(--color-text-muted); }

.stat--accent  { --stat-accent: var(--color-accent); }
.stat--danger  { --stat-accent: var(--color-danger); }
.stat--success { --stat-accent: var(--color-success); }
.stat--info    { --stat-accent: var(--color-info); }

/* Whole tile is a link to a filtered list */
.stat--link { transition: transform var(--dur-fast) var(--ease-out),
                          box-shadow var(--dur-fast) var(--ease-out); }
.stat--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }


/* ==========================================================================
   22. PIPELINE / KANBAN BOARD (CRM leads — join_requests)
   Column per join_request_status: new · contacted · visited · enrolled · declined
   ========================================================================== */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x proximity;
}
/* Below 700px one column fills the viewport and snaps. */
@media (max-width: 43.6875rem) {
  .board { grid-auto-columns: minmax(min(19rem, 84vw), 1fr); }
  .board__col { scroll-snap-align: start; }
}

.board__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--col-accent, var(--color-border-strong));
  border-radius: var(--radius-lg);
  max-height: 100%;
}
.board__col--new       { --col-accent: var(--color-info); }
.board__col--contacted { --col-accent: var(--color-accent); }
.board__col--visited   { --col-accent: var(--color-brand); }
.board__col--enrolled  { --col-accent: var(--color-success); }
.board__col--declined  { --col-accent: var(--color-text-faint); }

.board__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-soft);
  position: sticky;
  top: 0;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}
.board__col-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-strong);
  margin: 0;
}
.board__count {
  min-width: 1.6rem;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.board__list {
  list-style: none;
  margin: 0;
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  min-height: 6rem;
  flex: 1 1 auto;
}
.board__list.is-dropzone {
  background: var(--color-brand-soft);
  outline: 2px dashed var(--color-brand);
  outline-offset: -4px;
  border-radius: var(--radius-md);
}

.lead-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lead-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.lead-card:active { cursor: grabbing; }
.lead-card.is-dragging {
  opacity: 0.55;
  transform: rotate(1.2deg) scale(0.99);
  box-shadow: var(--shadow-lg);
}
.lead-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  line-height: var(--leading-snug);
}
.lead-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.lead-card__foot {
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.lead-card__age { font-variant-numeric: tabular-nums; }

/* Note thread (crm_notes) */
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.note {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}
.note__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}
.note__author { font-weight: var(--weight-bold); color: var(--color-text); }
.note__body { font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }


/* ==========================================================================
   23. MISC COMPONENTS
   ========================================================================== */

/* Toolbar above a table / board: title, search, filters, primary action */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.toolbar__grow { flex: 1 1 14rem; min-width: 0; }
.toolbar__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 30rem) {
  .toolbar__end { margin-left: 0; width: 100%; }
  .toolbar__end > .btn { flex: 1 1 auto; }
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--color-text-faint);
}
.breadcrumb a { color: inherit; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semi); }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-lg);
  list-style: none;
  padding: 0;
}
.pagination__link {
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.pagination__link:hover { background: var(--color-surface-2); color: var(--color-text); }
.pagination__link[aria-current="page"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-bold);
}

/* Progress meter (dues paid, broadcast delivery) */
.progress {
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--color-success);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress--warn .progress__bar { background: var(--color-warn); }
.progress--danger .progress__bar { background: var(--color-danger); }

/* Divider with a centred label */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-block: var(--space-lg);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

/* Disclosure */
.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.disclosure + .disclosure { margin-top: var(--space-xs); }
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  list-style: none;
  background: var(--color-surface-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "＋";
  color: var(--color-text-muted);
  font-weight: var(--weight-bold);
}
.disclosure[open] > summary::after { content: "－"; }
.disclosure__body { padding: var(--space-md); }

/* Auth pages: centred narrow card on a textured bed */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--container-pad);
  background-color: var(--color-bg);
  background-image: var(--texture-topo);
}
.auth-card {
  width: min(26rem, 100%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
}
.auth-card__head { text-align: center; margin-bottom: var(--space-lg); }
.auth-card__foot {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Photo grid for the gallery / den pages (public pages: NO scout photos) */
.photo-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
}


/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the loading affordances legible without motion. */
  .skeleton {
    animation: none !important;
    background-image: none;
    opacity: 0.75;
  }
  .btn.is-loading::after,
  .spinner {
    animation: none !important;
    border-block-start-color: currentColor;
    opacity: 0.6;
  }
  .card--interactive:hover,
  .stat--link:hover,
  .lead-card.is-dragging { transform: none; }
}

/* Respect a user's request for more contrast. */
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-text-muted);
    --color-border-soft: var(--color-text-faint);
    --color-text-muted: var(--color-text);
  }
  .btn { border-width: 2px; }
  :is(input, select, textarea) { border-width: 2px; }
}


/* ==========================================================================
   25. PRINT — tuned for the schedule page
   Add .print-only / .no-print to control anything else.
   ========================================================================== */

.print-only { display: none !important; }

@media print {
  @page {
    size: Letter portrait;
    margin: 0.6in 0.55in;
  }

  :root {
    --color-bg: #FFFFFF;
    --color-bg-alt: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-2: #FFFFFF;
    --color-surface-3: #FFFFFF;
    --color-text: #000000;
    --color-text-strong: #000000;
    --color-text-muted: #333333;
    --color-text-faint: #555555;
    --color-border: #999999;
    --color-border-soft: #CCCCCC;
    --color-border-strong: #666666;
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --shadow-inset: none;
  }

  * { background: transparent !important; box-shadow: none !important; }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
    line-height: 1.4;
  }

  .print-only { display: block !important; }

  .no-print,
  .site-header,
  .site-nav,
  .nav-toggle,
  .site-footer,
  .skip-link,
  .toast-region,
  .toolbar,
  .tabs__list,
  .segmented,
  .pagination,
  .btn,
  .btn-row,
  .form-actions,
  .event-row__actions,
  .modal,
  dialog,
  .header-banner,
  .side-nav,
  .breadcrumb { display: none !important; }

  /* Print masthead — page agents put the pack name + season here. */
  .print-header {
    display: block !important;
    border-bottom: 2pt solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }
  .print-header__title {
    font-size: 18pt;
    font-weight: 700;
    margin: 0;
  }
  .print-header__meta { font-size: 10pt; color: #333; }

  .container,
  .container--narrow,
  .container--wide { max-width: none; padding: 0; }

  .section, .section--tight { padding-block: 0; }

  /* Schedule specifics */
  .event-list { gap: 0; }
  .event-row {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 0;
    border-bottom: 0.5pt solid #999 !important;
    border-radius: 0;
    padding: 7pt 0;
    gap: 10pt;
  }
  .event-row--past { opacity: 1; }
  .event-row__date {
    width: 46pt;
    border: 0.5pt solid #666 !important;
    border-radius: 0;
    padding-bottom: 3pt;
  }
  .event-row__month {
    background: #000 !important;
    color: #FFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 7pt;
  }
  .event-row__day { font-size: 16pt; }
  .event-row__title { font-size: 12pt; }
  .event-row__meta, .event-row__desc { font-size: 9.5pt; color: #333 !important; }
  .event-group__heading {
    position: static;
    break-after: avoid;
    page-break-after: avoid;
    margin: 12pt 0 4pt;
    padding: 0;
    font-size: 10pt;
    color: #000 !important;
  }

  /* Keep tables tabular on paper regardless of the 700px stack rule. */
  .table--stack { display: table !important; }
  .table--stack thead {
    position: static !important;
    width: auto !important; height: auto !important;
    clip: auto !important; clip-path: none !important;
    display: table-header-group !important;
  }
  .table--stack tbody { display: table-row-group !important; }
  .table--stack tr { display: table-row !important; border: 0; padding: 0; margin: 0; }
  .table--stack :is(td, th) {
    display: table-cell !important;
    text-align: left;
    border: 0;
    border-bottom: 0.5pt solid #CCC !important;
    padding: 4pt 6pt;
  }
  .table--stack td[data-label]::before { content: none !important; }
  .table-wrap { overflow: visible !important; border: 0 !important; }
  .table thead th {
    position: static;
    border-bottom: 1pt solid #000 !important;
    color: #000 !important;
  }
  .table, .card, .stat { break-inside: avoid; page-break-inside: avoid; }

  /* Pills keep their outline but lose the fill. */
  .pill, .badge, .den-pill {
    border: 0.5pt solid #666 !important;
    color: #000 !important;
    padding: 0 4pt;
  }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: #000 !important; }
  p, li { orphans: 3; widows: 3; }

  /* Show the destination of real links, but not of in-page anchors. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="mailto"]::after,
  .no-print-url a::after { content: ""; }
}

/* ===========================================================================
   PHOTO CAROUSEL
   A CSS scroll-snap track, enhanced by js/carousel.js. Without JS it is still
   a swipeable, scrollable strip — only the buttons go away.
   =========================================================================== */

.carousel { position: relative; }

.carousel__viewport {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No scroll-behavior: smooth here. carousel.js animates scrollLeft frame by
     frame, and a CSS smooth behaviour would queue an animation for every one
     of those writes, fighting the script. Native smooth scrollTo() is also
     unreliable on a snap container — see the note in carousel.js. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-lg);
  /* Room for the focus ring, which would otherwise be clipped by overflow. */
  padding: 3px;
  scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
}

.carousel__slide img {
  display: block;
  width: 100%;
  /* Taller than a typical banner on purpose: these are group photos and the
     faces are small, so an aggressive crop loses the subject. Sources are 4:3;
     this leaves roughly a 30% crop at desktop width. */
  height: clamp(16rem, 50vw, 34rem);
  object-fit: cover;
  background: var(--color-surface-2);
}

.carousel__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  font-size: var(--text-sm);
  color: #FFFFFF;
  /* Gradient rather than a flat bar so the photo stays visible behind it. */
  background: linear-gradient(to top, rgba(4, 10, 20, 0.86), rgba(4, 10, 20, 0));
}

/* ---- prev / next ---------------------------------------------------------- */
.carousel__nav {
  position: absolute;
  top: calc(50% - 1.5rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(10, 18, 32, 0.72);
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.carousel__nav:hover { background: rgba(10, 18, 32, 0.92); }
.carousel__nav--prev { inset-inline-start: var(--space-sm); }
.carousel__nav--next { inset-inline-end: var(--space-sm); }
.carousel__nav svg { width: 1.25rem; height: 1.25rem; }

/* Touch devices get swipe; the arrows only clutter a narrow screen. */
@media (max-width: 40rem) {
  .carousel__nav { display: none; }
}

/* ---- dots + play/pause ---------------------------------------------------- */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.carousel__dots { display: flex; gap: var(--space-2xs); }

.carousel__dot {
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* The visible dot is small, but the button keeps a full 44px tap target. */
.carousel__dot::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.carousel__dot:hover::before { background: var(--color-text-muted); }
.carousel__dot.is-current::before {
  background: var(--color-accent);
  transform: scale(1.4);
}

.carousel__play {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.carousel__play:hover { color: var(--color-text); }
.carousel__play svg { width: 1.1rem; height: 1.1rem; }
.carousel__play .carousel__icon-pause { display: none; }
.carousel__play.is-playing .carousel__icon-pause { display: block; }
.carousel__play.is-playing .carousel__icon-play { display: none; }

/* prefers-reduced-motion never autoplays, so the control is meaningless. */
@media (prefers-reduced-motion: reduce) {
  .carousel__play { display: none; }
}