/*
Theme Name: Friends of Ryan
Theme URI: https://friendsofryan.aftershockfam.org
Author: EventSync
Description: Friends of Ryan Alumni — Storytelling-Driven event platform powered by EventSync.
Version: 2.1
*/

/* Phase A2: Self-hosted Oswald (display) + Roboto (body), latin subset.
   font-display:swap shows fallback first, then swaps in webfont when ready.
   Files in theme/fonts/ are pre-subsetted by Google Fonts CDN (~13KB each
   for Oswald, ~22KB for Roboto). Total payload <175KB across 9 files. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/oswald-300.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/oswald-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/oswald-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/oswald-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/oswald-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/roboto-300.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════
   DESIGN TOKENS
   Generated from UI UX Pro Max v2.0
   ══════════════════════════════════════════════════════ */

:root {
  /* ── Colors: Brand ─────────────────────── */
  --color-primary: #cc0000;
  --color-primary-hover: #a30000;
  --color-primary-light: #fff0f0;
  --color-primary-wash: rgba(204, 0, 0, 0.1);
  --color-secondary: #1a1a2e;
  --color-secondary-light: #2d2d44;

  /* ── Colors: Neutrals ──────────────────── */
  --color-background: #ffffff;
  --color-surface: #f8f9fc;
  --color-surface-alt: #f0f2f5;
  --color-border: #e2e5eb;
  --color-border-light: #eef0f4;
  --color-text: #1a1a2e;
  --color-text-secondary: #4a5568;
  --color-text-muted: #6b7280;
  --color-text-disabled: #9ca3af;

  /* ── Colors: Semantic ──────────────────── */
  --color-success: #059669;
  --color-success-light: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-light: #fffbeb;
  --color-error: #dc2626;
  --color-error-light: #fef2f2;
  --color-info: #0284c7;
  --color-info-light: #f0f9ff;

  /* ── Colors: Accent ────────────────────── */
  --color-accent-gold: #b8860b;
  --color-accent-gold-light: #fdf8ee;

  /* ── Colors: Dark Sections ─────────────── */
  --color-dark-bg: #1a1a2e;
  --color-dark-surface: #252540;
  --color-dark-text: #e8e8f0;
  --color-dark-text-muted: #9898b0;
  --color-dark-border: #3a3a55;

  /* ── Colors: Overlays ──────────────────── */
  --overlay-dark: rgba(26, 26, 46, 0.7);
  --overlay-red: rgba(204, 0, 0, 0.1);

  /* ── Typography (Phase A2: Oswald display + Roboto body) ── */
  --font-display:
    "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:
    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* alias retained for back-compat with 12 existing var(--font-heading) refs */
  --font-heading: var(--font-display);

  --fs-display: clamp(2.5rem, 5vw, 3.5rem);
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-h5: 1rem;
  --fs-h6: 0.875rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-body-sm: 0.875rem;
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Spacing ───────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Layout ────────────────────────────── */
  --content-max: 1200px;
  --content-wide: 1400px;
  --content-narrow: 720px;
  --header-height: 72px;
  --grid-gap: 24px;
  --grid-gap-sm: 16px;

  /* ── Shadows ───────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ── Borders ───────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Transitions ───────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ══════════════════════════════════════════════════════
   RESET + BASE
   ══════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Defense-in-depth: at any viewport, prevent rogue absolutely-positioned
     descendants or wide flex containers (long tab navs, screen-reader
     offscreen labels) from pushing the body into horizontal scroll. The
     container/section rules already clip on mobile-card surfaces; this
     catches anything that escapes there. clip is preferred over hidden
     because it doesn't establish a scrolling context. */
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-text);
}
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}

p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
}
p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  list-style: none;
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  z-index: 9999;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ══════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════ */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--wide {
  max-width: var(--content-wide);
}
.container--narrow {
  max-width: var(--content-narrow);
}

.site-main {
  min-height: calc(100vh - var(--header-height) - 200px);
}

/* Section rhythm */
.section {
  padding: var(--space-10) var(--space-6);
}
.section--surface {
  background: var(--color-surface);
}
.section--dark {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.section--dark h2,
.section--dark h3 {
  color: #fff;
}
.section--dark p {
  color: var(--color-dark-text-muted);
}
.section--dark .overline {
  color: var(--color-primary);
}

.section__header {
  text-align: center;
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-10);
}
.section__header p {
  color: var(--color-text-secondary);
  font-size: var(--fs-body-lg);
  margin-top: var(--space-3);
}

/* Overline label */
.overline {
  font-family: var(--font-heading);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: block;
}

/* ══════════════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════════════ */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-sm);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap-sm);
  text-align: center;
}

/* POS stats tiles — used on /pos/ page. <dl> semantics so SR users
   hear term→value pairs. Two grids: category breakdown (top) and
   money summary (bottom). --money gets larger type for reconciliation. */
.pos-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-6) 0;
}
@media (min-width: 768px) {
  .pos-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .pos-stats-grid--money {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pos-stats-grid__tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.pos-stats-grid__tile dt {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pos-stats-grid__tile dd {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0;
}
.pos-stats-grid--money .pos-stats-grid__tile dd {
  font-size: var(--fs-h2);
}
.pos-stats-grid__tile--cash {
  border-color: var(--color-success, #16a34a);
}
.pos-stats-grid__tile--cash dd {
  color: var(--color-success, #16a34a);
}
.pos-stats-grid__tile--total {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.pos-stats-grid__tile--total dt,
.pos-stats-grid__tile--total dd {
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */

.site-header {
  background: var(--color-secondary);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
}
.header-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.site-logo img {
  height: 44px;
  width: auto;
}
@media (max-width: 767px) {
  .site-logo img {
    height: 36px;
  }
  .site-logo__text {
    display: none;
  }
  /* C6: ensure section labels stay legible on mobile. */
  .overline {
    font-size: 14px;
  }
}

/* Primary Nav */
.primary-nav {
  display: none;
  flex: 1;
  min-width: 0;
}
.primary-nav ul {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
}
.primary-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}
.primary-nav a:hover,
.primary-nav .current-menu-item a {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Header CTA */
.header-cta {
  display: none;
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.header-cta:hover {
  background: var(--color-primary-hover);
}

/* Hamburger */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-secondary);
  padding: var(--space-6);
  z-index: 999;
  overflow-y: auto;
}
.site-header.menu-open .mobile-nav {
  display: block;
}
.mobile-nav ul {
  list-style: none;
}
.mobile-nav a {
  display: block;
  padding: var(--space-4) 0;
  color: var(--color-dark-text);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-dark-border);
  transition: color var(--transition-fast);
}
.mobile-nav a:hover {
  color: #fff;
}
.mobile-donate {
  display: block;
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  text-align: center;
  border-radius: var(--radius-md);
}

/* Header Actions (Donate + Auth) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.header-login {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.header-login:hover {
  color: #fff;
}

/* User Menu Dropdown */
.user-menu {
  position: relative;
  display: none;
}
.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}
.user-menu__trigger:hover {
  color: #fff;
}
.user-menu__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-heading);
  flex-shrink: 0;
}
.user-menu__avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}
.user-menu__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 240px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1001;
  padding: var(--space-2) 0;
}
.user-menu.open .user-menu__dropdown {
  display: block;
}
.user-menu__header {
  padding: var(--space-3) var(--space-4);
}
.user-menu__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}
.user-menu__email {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu__divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}
.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.user-menu__item:hover {
  background: var(--color-surface);
}
.user-menu__item--danger {
  color: var(--color-error, #dc2626);
}
.user-menu__item--danger:hover {
  background: #fef2f2;
}

/* Mobile Nav Auth */
.mobile-nav__divider {
  height: 1px;
  background: var(--color-dark-border);
  margin: var(--space-4) 0;
}
.mobile-nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: #fff;
  font-weight: var(--fw-semibold);
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--color-dark-text);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-dark-border);
  transition: color var(--transition-fast);
}
.mobile-nav__link:hover {
  color: #fff;
}
.mobile-nav__link--danger {
  color: #f87171;
}
.mobile-nav__link--danger:hover {
  color: #fca5a5;
}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: var(--color-secondary);
  color: #fff;
  overflow: hidden;
}
.hero--home {
  padding: var(--space-20) var(--space-6) var(--space-16);
  text-align: center;
  background:
    linear-gradient(
      135deg,
      rgba(26, 26, 46, 0.85) 0%,
      rgba(13, 13, 26, 0.9) 100%
    ),
    var(--hero-bg, none) center/cover no-repeat;
}
/* S94 perf: serve a 2x larger hero on wider viewports only.
   Mobile gets the 1024 variant (~180 KB); desktop upgrades to 2048 (~510 KB). */
@media (min-width: 1024px) {
  .hero--home {
    background:
      linear-gradient(
        135deg,
        rgba(26, 26, 46, 0.85) 0%,
        rgba(13, 13, 26, 0.9) 100%
      ),
      var(--hero-bg-desktop, var(--hero-bg, none)) center/cover no-repeat;
  }
}
.hero--home::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(204, 0, 0, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  color: #fff;
}
.hero__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--color-dark-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.7;
}

/* Interior hero */
.hero--interior {
  padding: var(--space-16) var(--space-6) var(--space-10);
  text-align: center;
}
.hero--interior h1 {
  color: #fff;
  margin-bottom: var(--space-2);
}
.hero--interior p {
  color: var(--color-dark-text-muted);
  font-size: var(--fs-body-lg);
}

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: var(--content-max);
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
  background: var(--color-dark-surface);
  border-radius: var(--radius-lg);
  text-align: center;
}
.stat__number {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.1;
}
.stat__label {
  font-size: var(--fs-caption);
  color: var(--color-dark-text-muted);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */

/*
 * S93 a11y — UA `[hidden]` is `display: none` but component rules
 * (`.btn` = inline-flex, `.dash-modal` = flex) win the cascade. Force
 * [hidden] to stick on the two components that toggle it dynamically.
 */
.btn[hidden],
.dash-modal[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: 44px;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-light);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn--ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.btn--white {
  background: #fff;
  color: var(--color-secondary);
}
.btn--white:hover {
  background: var(--color-surface);
  transform: translateY(-1px);
}

.btn--donate {
  background: var(--color-accent-gold);
  color: #fff;
}
.btn--donate:hover {
  background: #9a7209;
  transform: translateY(-1px);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-body-lg);
  min-height: 52px;
}
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body-sm);
  min-height: 36px;
}

.btn-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════ */

.card {
  background: var(--color-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}
.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__date-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: 1.2;
}
.card__body {
  padding: var(--space-5);
}
.card__tag {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.card__title a {
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.card__title a:hover {
  color: var(--color-primary);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.card__excerpt {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Profile card */
.card--profile {
  text-align: center;
  padding: var(--space-8) var(--space-5);
}
.card--profile .card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-border-light);
  object-fit: cover;
  margin: 0 auto var(--space-4);
}
.card--profile .card__role {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.card--profile .card__avatar-fallback {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light, #fef2f2);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-heading);
  margin: 0 auto var(--space-4);
}

/* File input */
.form-input--file {
  padding: var(--space-3);
  line-height: 1.5;
  cursor: pointer;
}

/* Dark section cards */
.section--dark .card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}
.section--dark .card__title,
.section--dark .card__title a {
  color: #fff;
}
.section--dark .card__meta {
  color: var(--color-dark-text-muted);
}
.section--dark .card__excerpt {
  color: var(--color-dark-text-muted);
}

/* ══════════════════════════════════════════════════════
   BADGES & TAGS
   ══════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
}
.badge--red {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.badge--green {
  background: var(--color-success-light);
  /* S93 a11y — #059669 on #ecfdf5 was 3.35:1 (fails WCAG AA 4.5:1). */
  color: #046c4e;
}
.badge--gold {
  background: var(--color-accent-gold-light);
  /* S93 a11y — #b8860b on #fdf8ee was 3.43:1 (fails WCAG AA 4.5:1). */
  color: #935d08;
}
.badge--gray {
  background: var(--color-surface-alt);
  /* S93 a11y — #6b7280 on #f0f2f5 was 4.31:1 (fails WCAG AA 4.5:1). */
  color: #4b5563;
}
.badge--blue {
  background: var(--color-info-light, #f0f9ff);
  color: #0c4a6e;
}
[class*="badge--platform-"] {
  font-size: var(--fs-body-sm);
  padding: var(--space-1) var(--space-3);
}
.badge--platform-facebook {
  background: #e7f0ff;
  color: #1877f2;
}
.badge--platform-instagram {
  background: #fce7f3;
  color: #e4405f;
}
.badge--platform-twitter {
  background: #e8f5fd;
  color: #1da1f2;
}
.badge--platform-linkedin {
  background: #e8f2fc;
  color: #0a66c2;
}
.badge--platform-tiktok {
  background: #f0f0f0;
  color: #000;
}
.badge--platform-youtube {
  background: #fee2e2;
  color: #ff0000;
}
.badge--platform-other {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════ */

.form-group {
  margin-bottom: var(--space-5);
}
.form-label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-background);
  min-height: 48px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-wash);
  outline: none;
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
}
.form-error {
  font-size: var(--fs-body-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text-muted);
  padding: var(--space-12) var(--space-6) var(--space-6);
}
.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  gap: var(--space-8);
}
.footer-brand .footer-org-name {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
.footer-brand p {
  font-size: var(--fs-body-sm);
  line-height: 1.7;
}
.footer-links h4 {
  color: #fff;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--fs-body-sm);
  transition: color var(--transition-fast);
}
.footer-links a:hover {
  color: #fff;
}
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.125rem;
  transition: background var(--transition-fast);
}
.footer-social a:hover {
  background: var(--color-primary);
}
.footer-bottom {
  border-top: 1px solid var(--color-dark-border);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-caption);
}

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */

.text-center {
  text-align: center;
}
.text-muted {
  color: var(--color-text-muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Account health + generic status badges. Color is never the sole signal —
   severity is also conveyed by icon (✓ ! ✕) prepended in the label and by
   the human-readable label text itself. WCAG 1.4.1 (Use of Color). */
.status-badge-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.4;
  border: 1px solid transparent;
}
.status-badge--success {
  background: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}
.status-badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.status-badge--danger {
  background: var(--color-error-light);
  color: var(--color-error);
  border-color: var(--color-error);
}
.status-badge__icon {
  font-size: 0.85em;
  line-height: 1;
}

/* Social account card — accessible version with <section aria-labelledby>
   and nested status-badge list (S60). Replaces the ad-hoc inline div cards. */
.social-account-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  transition: border-color 0.15s;
}
.social-account-card:hover,
.social-account-card:focus-within {
  border-color: var(--color-primary);
}
.social-account-card--failed {
  border-color: var(--color-error);
}
.social-account-card--degraded {
  border-color: var(--color-warning);
}
.social-account-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.social-account-card__name {
  margin: 0;
  font-size: var(--fs-body, 1rem);
  font-weight: var(--fw-semibold, 600);
  text-transform: capitalize;
}
.social-account-card__handle {
  margin: 0;
  font-size: var(--fs-caption, 0.75rem);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .section {
    padding: var(--space-12) var(--space-8);
  }
  .hero--home {
    padding: var(--space-24) var(--space-8) var(--space-16);
  }
  .hero--interior {
    padding: var(--space-20) var(--space-8) var(--space-12);
  }

  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .card--business {
    flex-direction: row;
    text-align: left;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .site-logo__text {
    display: none;
  }
  .primary-nav {
    display: block;
  }
  .header-cta {
    display: inline-flex;
  }
  .header-login {
    display: inline-flex;
  }
  .user-menu {
    display: block;
  }
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .header-inner {
    padding: 0 var(--space-10);
  }
  .section {
    padding: var(--space-16) var(--space-10);
  }
}

@media (min-width: 1400px) {
  .site-logo__text {
    display: inline;
  }
}

/* Gutenberg support */
.wp-block-group {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.alignwide {
  max-width: var(--content-wide);
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Gallery lightbox */
.wp-block-gallery img {
  cursor: zoom-in;
  border-radius: var(--radius-md);
}

/* WP admin bar offset */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* ══════════════════════════════════════════════════════
   BUSINESS DIRECTORY
   ══════════════════════════════════════════════════════ */

.card--business {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-5);
  position: relative;
}
.card--business .card__logo {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: #fff;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}
.card--business .card__logo-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--color-primary-light),
    var(--color-surface-alt)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  opacity: 0.5;
}
.card--business .card__info {
  flex: 1;
  min-width: 0;
}
.card--business .card__owner {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.card--business .card__title a {
  text-decoration: none;
  color: inherit;
}
.card--business .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card--business .card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   MERCH CARDS
   ══════════════════════════════════════════════════════ */

.card--merch {
  display: flex;
  flex-direction: column;
}
.card--merch .card__image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card--merch .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.card--merch:hover .card__image img {
  transform: scale(1.05);
}
.card--merch .card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card--merch .card__price {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: var(--space-2) 0;
}
.merch-variants {
  margin-bottom: var(--space-3);
}
.merch-variant-field {
  margin-bottom: var(--space-2);
}
.merch-variant-label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-1);
  text-transform: capitalize;
}
.merch-variants .form-input {
  font-size: var(--fs-body-sm);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
}
.merch-variant-price {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-top: var(--space-1);
  min-height: 20px;
}
.merch-add-to-cart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════
   GALLERY ALBUMS
   ══════════════════════════════════════════════════════ */

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.album-card {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  text-decoration: none;
}
.album-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow);
}
.album-card:hover img {
  transform: scale(1.05);
}
.album-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  pointer-events: none;
}
.album-card__title {
  display: none;
}
.album-card__event {
  display: none;
}

/* ══════════════════════════════════════════════════════
   DONATION AMOUNTS
   ══════════════════════════════════════════════════════ */

.donate-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.donate-amount {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: var(--space-4) var(--space-6);
  border: 2px solid var(--color-accent-gold);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  /* S93 a11y — #b8860b on #fdf8ee resting state was 2.98:1 (fails WCAG AA). */
  color: #7a5908;
  background: var(--color-accent-gold-light);
  transition: all var(--transition-normal);
  cursor: pointer;
  text-decoration: none;
}
.donate-amount:hover {
  background: var(--color-accent-gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.donate-amount--custom {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/* ── Frequency Selector ── */
.donate-frequency {
  display: inline-flex;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto var(--space-6);
}
.donate-frequency__btn {
  padding: var(--space-2) var(--space-5);
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background var(--transition-normal),
    color var(--transition-normal);
}
.donate-frequency__btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
}
.donate-frequency__btn:hover:not([aria-pressed="true"]) {
  background: var(--color-surface);
}
.donate-frequency__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   SEARCH
   ══════════════════════════════════════════════════════ */

.header-search-toggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 200ms;
}
.header-search-toggle:hover {
  opacity: 1;
}

.search-overlay {
  /* S93 a11y — default visible styles so removing `hidden` reveals the overlay without a JS class dance. */
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(26, 26, 46, 0.95);
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}
.search-overlay[hidden] {
  display: none !important;
}
.search-overlay.open {
  display: flex; /* legacy class, retained for back-compat */
}
.search-overlay__inner {
  width: 100%;
  max-width: 600px;
  padding: 0 var(--space-6);
  position: relative;
}
.search-overlay__close {
  position: absolute;
  top: -48px;
  right: var(--space-6);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 200ms;
}
.search-overlay__close:hover {
  color: #fff;
}

.search-form {
  display: flex;
  gap: var(--space-2);
}
.search-form__input {
  flex: 1;
  min-height: 52px;
  font-size: var(--fs-body-lg);
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.search-form__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.search-form__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.3);
}
.search-form__submit {
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Search form on results page (light variant) */
.section .search-form__input {
  border-color: var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
}
.section .search-form__input::placeholder {
  color: var(--color-text-muted);
}
.section .search-form__input:focus {
  border-color: var(--color-primary);
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* Shared listbox dropdown for ForA11y.selectCombobox / combobox.
   Parent gets position:relative only when it contains a listbox, so we
   anchor without changing the stacking context for unrelated form rows.
   Hidden by the [hidden] attribute or by the helper toggling display:none. */
.dash-form-field:has(.for-listbox) {
  position: relative;
}
.for-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.for-listbox[hidden] {
  display: none;
}
.for-listbox > [role="option"] {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.for-listbox > [role="option"].is-active,
.for-listbox > [role="option"][aria-selected="true"] {
  background: var(--color-primary-light);
}

/* WCAG 2.2 — 2.4.11 Focus Not Obscured (Minimum).
   Site-header is position:sticky at ~72-104px. When a focused control
   inside a long table is scrolled into view by the browser, the default
   scroll target is the top of the viewport — which the sticky header
   would cover. scroll-margin-top adds a clear-space buffer so the
   browser scrolls the row down by that much, keeping focus visible. */
.dash-table tbody tr,
.dash-table tbody td button,
.dash-table tbody td a {
  scroll-margin-top: 120px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE GRID UTILITIES
   ══════════════════════════════════════════════════════ */

.photo-strip-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.photo-strip-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.photo-strip-3 img,
.photo-strip-2 img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .photo-strip-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .photo-strip-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-strip-3 img,
  .photo-strip-2 img {
    height: 300px;
  }
  .grid-2-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   AWARD RECIPIENTS
   ══════════════════════════════════════════════════════ */

.award-year {
  margin-bottom: var(--space-8);
}
.award-year__heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent-gold);
  display: inline-block;
}
.award-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.award-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.award-list li:last-child {
  border-bottom: none;
}

/* Gold accent section border */
.section--gold-accent {
  border-top: 4px solid var(--color-accent-gold);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.pagination .page-numbers:hover {
  background: var(--color-surface);
}
.pagination .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pagination .page-numbers.dots {
  border: none;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════ */

.dash-welcome {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.dash-welcome__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.dash-welcome__info {
  min-width: 0;
  flex: 1 1 0;
  overflow-wrap: anywhere;
}
.dash-welcome__info h2 {
  margin-bottom: var(--space-1);
}
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

/* Dashboard Tabs */
.dash-tabs {
  display: flex;
  gap: var(--space-1);
  /* max-width:100% + min-width:0 prevent the inline-flex tab links from
     blowing the container wider than the viewport at <=320 (the page
     scrolled horizontally because the tab labels' nowrap content was
     contributing to the body scroll width even with overflow-x:auto). */
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.dash-tabs::-webkit-scrollbar {
  display: none;
}
.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  min-height: 44px;
}
.dash-tab:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
.dash-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

/* Dashboard Table */
.dash-table-wrap {
  /* `position: relative` establishes a containing block so any
     `position: absolute` descendants (.screen-reader-text inside <th>,
     etc.) are clipped by overflow-x:auto on the wrapper instead of
     escaping into document scroll-width. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  /* Fixed layout prevents content-driven column bloat (the "first column
     too wide" bug). Tables without per-column rules fall back to equal
     distribution across all <th>. Per-table rules below override. */
  table-layout: fixed;
}
.dash-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  white-space: nowrap;
}
/* Row-header cells (scope="row") must wrap — Session 65 D3 converted the
   first data column to <th scope="row"> so SRs announce the row identity,
   but inheriting thead's nowrap caused long donor/business/product titles
   to bleed across column boundaries. `overflow-wrap: anywhere` contributes
   to min-content so other columns get their fair share. */
.dash-table tbody th[scope="row"] {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.dash-table td,
.dash-table tbody th[scope="row"] {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
  /* Handle long unbroken strings (URLs, emails, 40-char names with no
     spaces) that would otherwise escape fixed-layout column boundaries. */
  overflow-wrap: anywhere;
}
.dash-table tr:hover td,
.dash-table tr:hover th[scope="row"] {
  background: var(--color-surface);
}

/* Action button labels stay on one line regardless of column width so
   short labels like "Edit" / "Delete" never character-wrap. Combined with
   flex-wrap on the actions cell wrapper below, the group wraps to a
   second line instead of a single button breaking mid-word. */
.dash-table td .btn,
.dash-table td button,
.dash-table td a.btn {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

/* Scoped clip for the row-actions cell only. dashTable's rowActions
   render into a flex wrapper; if the button row is wider than the
   column, flex-wrap lets it drop to a second row rather than bleeding
   into the Status column. Overflow hidden is a last-resort safety net —
   the widths below should keep buttons inside the cell on typical
   viewports. Focus rings stay visible via outline-offset: -2px. */
.dash-table td > div[style*="justify-content"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
  max-width: 100%;
}
.dash-table td .btn:focus-visible {
  outline-offset: -2px;
}

/* Skip-to-main focus target — the H1 has tabindex="-1" so it's never in
   keyboard tab order. JS focuses it after tab-switch reloads only so a SR
   user hears the new section label. No keyboard user ever reaches it via
   Tab, so suppressing the outline unconditionally is WCAG-safe. */
#dashPageTitle:focus {
  outline: none;
  box-shadow: none;
}

/* Default Actions column width — fixed-layout distributes the remainder
   across other columns. This ensures Edit/Delete buttons have room for
   2 buttons side-by-side without wrapping on typical viewports.
   Per-table rules (below) override for tables with more action buttons. */
.dash-table thead th:last-child {
  width: 180px;
}

/* ══════════════════════════════════════════════════════
   Phase 2A.a — dashTable mobile-card transform (<768px)
   ══════════════════════════════════════════════════════
   Below 768px every .dash-table renders as a vertical stack of
   stacked-card rows. <thead> is visually hidden; each <td>/<th[scope=row]>
   becomes a flex row showing label (from data-label, injected by
   ForA11y.dashTable.renderRows) on the left and value on the right.
   Touch targets >= 44x44 per WCAG 2.5.5 enhanced. No horizontal scroll. */
@media (max-width: 767px) {
  .dash-table-wrap {
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .dash-table {
    table-layout: auto;
    border: 0;
    font-size: var(--fs-body);
    /* Reset the 720px min-width from the @media (max-width: 768px) horizontal
       scroll rule below — mobile-card transform replaces the row layout
       entirely (tr is display:block), so min-width 720px would force a body
       scrollbar at 320px without serving any layout purpose. */
    min-width: 0;
  }
  .dash-table thead,
  .dash-table thead tr,
  .dash-table thead th {
    /* visually hidden but kept for screen readers (column labels are
       redundant with data-label, but the <thead> still anchors the
       table semantics for AT users navigating row-by-row).
       2A.d fix: also clip the descendant <tr>+<th> bounding boxes —
       a 1×1 thead with default-flow children still let the <tr> claim
       its natural column-header width (e.g. 407px for organizers),
       which getBoundingClientRect picked up and triggered horizontal
       page overflow at 320px. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .dash-table tbody tr {
    display: block;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .dash-table tbody tr:hover td,
  .dash-table tbody tr:hover th[scope="row"] {
    background: transparent;
  }
  .dash-table tbody td,
  .dash-table tbody th[scope="row"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .dash-table tbody tr > :first-child {
    padding-top: 0;
  }
  .dash-table tbody td:last-child,
  .dash-table tbody th[scope="row"]:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  /* Show the label on the left of each row via the data-label attribute
     injected by ForA11y.dashTable. Cells without data-label (legacy
     consumers that haven't been re-rendered) silently degrade to
     value-only rows — still readable, just without the row-label affordance. */
  .dash-table tbody td[data-label]::before,
  .dash-table tbody th[scope="row"][data-label]::before {
    content: attr(data-label);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-align: left;
    flex-shrink: 0;
    min-width: 6.5em;
  }
  /* Row-header cell: title-shaped, more prominent. */
  .dash-table tbody th[scope="row"] {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    font-size: var(--fs-h5, 1.125rem);
    font-weight: var(--fw-semibold);
    padding-bottom: var(--space-3);
  }
  .dash-table tbody th[scope="row"][data-label]::before {
    margin-bottom: 2px;
  }
  /* Actions cell: full-width row of buttons that wrap onto new lines as
     needed. 44px tall hit targets satisfy WCAG 2.5.5 AAA. */
  .dash-table__actions-cell,
  .dash-table tbody td[data-label="Actions"] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    text-align: left;
    padding-top: var(--space-3);
  }
  .dash-table__actions-cell::before,
  .dash-table tbody td[data-label="Actions"]::before {
    /* Hide the "Actions" label entirely on mobile — the buttons are
       self-evident and the label adds visual noise. The cell still has
       data-label="Actions" for AT semantics. */
    display: none;
  }
  .dash-table__actions-cell > div,
  .dash-table tbody td[data-label="Actions"] > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: stretch;
    width: 100%;
  }
  .dash-table__actions-cell .btn,
  .dash-table tbody td[data-label="Actions"] .btn,
  .dash-table__actions-cell button,
  .dash-table tbody td[data-label="Actions"] button {
    flex: 1 1 auto;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  /* Select-cell (bulk-action checkbox): pin to top-left of card. */
  .dash-table__select-cell {
    flex-direction: row;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: var(--space-2);
    width: auto !important;
  }
  .dash-table__select-cell::before {
    flex-shrink: 0;
    min-width: auto;
  }
  /* Filter input gets full-width treatment on mobile so search is the
     primary affordance (no horizontal scroll, no cramped 200px input). */
  .dash-table-wrap + #dashEventFilter,
  [id$="Filter"][type="search"] {
    /* selectors are intentionally loose; per-tab filter inputs vary */
    min-height: 44px;
  }
  /* Pager: stack the prev/next + numbered buttons vertically with full-
     width tap targets. Compact compact-ellipsis pages drop to a single
     "Page X of Y" line below the prev/next pair. */
  [id$="Pager"] nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  [id$="Pager"] nav .btn {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }
  /* When dashTable bulk-actions container is visible, give it sticky-
     bottom treatment on mobile so the actions stay in reach as the user
     scrolls a long list of selected cards. */
  [id$="BulkActions"]:not([style*="display: none"]) {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding: var(--space-3);
    margin: var(--space-4) calc(var(--space-4) * -1) 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* Session 74 B3 — shared chip styles used by organizer edit form and
   for-a11y.js chipInput helper. Touch targets are >=32x32 per WCAG 2.5.5
   enhanced target size guidance for the remove button. */
.for-chip-list {
  list-style: none;
}
.for-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 4px 4px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-caption);
  line-height: 1.2;
}
.for-chip-label {
  white-space: nowrap;
  overflow-wrap: normal;
}
.for-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.for-chip-remove:hover,
.for-chip-remove:focus-visible {
  background: var(--color-border);
  color: var(--color-text);
}

/* Per-table column width rules — fixed-layout mode applies these as
   min widths the first row's <th> inherits.
   Scoped to `#dash-main-content` so the same table IDs on event-admin
   (which uses the same `#productsTable` / `#ticketHoldersTable` IDs but
   with different column counts) are NOT affected. Event-admin tables
   fall back to the default :last-child 180px rule + equal-share on
   other columns. */
#dash-main-content #productsTable thead th:nth-child(1) {
  width: 22%;
} /* product title */
#dash-main-content #productsTable thead th:nth-child(2) {
  width: 9%;
} /* type */
#dash-main-content #productsTable thead th:nth-child(3) {
  width: 9%;
} /* price */
#dash-main-content #productsTable thead th:nth-child(4) {
  width: 8%;
} /* stock */
#dash-main-content #productsTable thead th:nth-child(5) {
  width: 16%;
} /* event */
#dash-main-content #productsTable thead th:nth-child(6) {
  width: 10%;
} /* status */
#dash-main-content #productsTable thead th:nth-child(7) {
  width: 26%;
} /* actions (Edit + Fields + Delete) */

#dash-main-content #ticketHoldersTable thead th:nth-child(1) {
  width: 40px;
} /* select checkbox */
#dash-main-content #ticketHoldersTable thead th:nth-child(2) {
  width: 18%;
} /* attendee */
#dash-main-content #ticketHoldersTable thead th:nth-child(3) {
  width: 22%;
} /* email */
#dash-main-content #ticketHoldersTable thead th:nth-child(4) {
  width: 18%;
} /* event */
#dash-main-content #ticketHoldersTable thead th:nth-child(5) {
  width: 11%;
} /* type */
#dash-main-content #ticketHoldersTable thead th:nth-child(6) {
  width: 12%;
} /* check-in */
#dash-main-content #ticketHoldersTable thead th:nth-child(7) {
  width: 19%;
} /* actions */

/* Events tab uses a static PHP-rendered table (not dashTable) — needs its
   own column widths so the Actions column doesn't collapse under fixed
   layout. Columns: Event, Date, Location, Capacity, Status, Actions. */
#eventsTable thead th:nth-child(1) {
  width: 24%;
}
#eventsTable thead th:nth-child(2) {
  width: 14%;
}
#eventsTable thead th:nth-child(3) {
  width: 24%;
}
#eventsTable thead th:nth-child(4) {
  width: 10%;
}
#eventsTable thead th:nth-child(5) {
  width: 12%;
}
#eventsTable thead th:nth-child(6) {
  width: 16%;
}

/* Global event filter bar (Session 65 follow-up) */
.dash-global-filter {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.dash-global-filter__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.dash-global-filter__field {
  flex: 1;
  min-width: 280px;
  position: relative;
}
.dash-global-filter__field .form-label {
  display: block;
  margin-bottom: var(--space-1);
}

/* 2A.d follow-up: drop the 280px min-width on small screens so the field
   can shrink inside the .container padding stack (24px section + 24px
   container + 16px filter section = 128px of side padding total at 320,
   leaving the field room to breathe at 100% of parent width). Without
   this override the field stays at 280px wide and pushes 25px past the
   320px viewport. */
@media (max-width: 480px) {
  .dash-global-filter__field {
    min-width: 0;
    width: 100%;
  }
  .dash-global-filter__field input.form-input {
    min-width: 0;
    width: 100%;
  }
}

/* "Event filter not applicable" note — styled via inline style on the <p> so
   no class is required but we add a hook for future overrides. */
.dash-filter-inapplicable {
  /* inline styles win; this rule is a no-op placeholder for future theming. */
}

/* Dashboard Entity Card (requests, business) */
.dash-entity-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.dash-entity-card__info {
  flex: 1;
  min-width: 200px;
}
.dash-entity-card__title {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}
.dash-entity-card__meta {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
}
.dash-entity-card__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Empty state */
.dash-empty {
  text-align: center;
  padding: var(--space-12) 0;
}
.dash-empty__title {
  font-size: var(--fs-h3);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.dash-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Stat tile grid (dashboard overview) */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.dash-stat-grid__tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-1);
}
.dash-stat-grid__tile-label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.dash-stat-grid__tile-value {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0;
}
.dash-stat-grid__tile-value--primary {
  color: var(--color-primary);
}

/* Admin Tab Divider */
.dash-tab-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 var(--space-2);
  flex-shrink: 0;
  align-self: center;
}
.dash-tab--admin {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sub-tabs (within a tab) */
.dash-sub-tabs {
  display: flex;
  gap: var(--space-1);
  /* Same treatment as .dash-tabs — contain the inline-flex sub-tab links so
     long sub-tab rows don't push the body wider than the viewport at 320. */
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}
.dash-sub-tabs::-webkit-scrollbar {
  display: none;
}
.dash-sub-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: var(--transition-fast);
}
.dash-sub-tab:hover {
  color: var(--color-text);
  background: var(--color-surface);
}
.dash-sub-tab--active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid var(--color-primary);
}

/* Modal Overlay */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.dash-modal__content {
  background: var(--color-background);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

/* Form Grid (two-column in modals) */
.dash-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.dash-form-field label.form-label {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
  font-size: var(--fs-body-sm);
}
@media (max-width: 600px) {
  .dash-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Ticket Card */
.ticket-card {
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
}
.ticket-checked-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: #f0fdf4;
  color: #16a34a;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}
.ticket-qr {
  padding: var(--space-6) var(--space-4);
}
.ticket-qr img {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 280px;
  max-width: 100%;
  border-radius: var(--radius-md);
}
.ticket-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 var(--space-6);
  position: relative;
}
.ticket-divider::before,
.ticket-divider::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt, #f3f4f6);
}
.ticket-divider::before {
  left: -30px;
}
.ticket-divider::after {
  right: -30px;
}
.ticket-info {
  padding: var(--space-4) var(--space-6);
  text-align: left;
}
.ticket-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
}
.ticket-field__label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.ticket-field__value {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
}
.ticket-footer {
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* Assign Tickets */
.assign-tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.assign-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  overflow: hidden;
}
.assign-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.assign-card__badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}
.assign-card__type {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.assign-card__fields {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.assign-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.assign-card__row label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.assign-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: inherit;
  background: var(--color-background);
  transition: border-color 0.15s;
}
.assign-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}
.assign-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.assign-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-body-sm);
  color: var(--color-primary);
  text-decoration: none;
}
.assign-card__link:hover {
  text-decoration: underline;
}
.assign-card--saved {
  border-color: #16a34a;
}
.assign-card--saving .assign-save-btn {
  opacity: 0.6;
  pointer-events: none;
}

/* Outreach detail expand */
.outreach-body {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  white-space: pre-line;
}

/* ══════════════════════════════════════════════════════
   REGISTRATION FORM
   ══════════════════════════════════════════════════════ */

.register-layout {
  display: grid;
  gap: var(--grid-gap);
}
.register-sidebar {
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  order: -1;
}
.register-sidebar__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.register-success {
  text-align: center;
  padding: var(--space-10) 0;
}
.register-success__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-success-light);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
@media (min-width: 768px) {
  .register-layout {
    grid-template-columns: 1fr 320px;
  }
  .register-sidebar {
    order: 0;
  }
}

/* ══════════════════════════════════════════════════════
   TICKET CHECKOUT
   ══════════════════════════════════════════════════════ */

.ticket-list {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.ticket-list .ticket-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.ticket-card__info {
  flex: 1;
  min-width: 0;
}
.ticket-card__name {
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}
.ticket-card__price {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.ticket-card__desc {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.qty-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.qty-picker button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.qty-picker button:hover {
  background: var(--color-surface);
}
.qty-picker__val {
  min-width: 32px;
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  /* S93 a11y — role=spinbutton + tabindex=0 gets a visible focus ring. */
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.qty-picker__val:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.cart-summary {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--fs-body-sm);
}
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 2px solid var(--color-border);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
}

/* ══════════════════════════════════════════════════════
   QR SCANNER
   ══════════════════════════════════════════════════════ */

.scanner-container {
  max-width: 480px;
  margin: 0 auto;
}
.scanner-video {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: #000;
  object-fit: cover;
}
.scanner-result {
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}
.scanner-result--success {
  background: var(--color-success-light);
  color: var(--color-success);
}
.scanner-result--error {
  background: var(--color-error-light);
  color: var(--color-error);
}
.scanner-result--warn {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.scanner-result__icon {
  margin-bottom: var(--space-2);
}
.scanner-manual {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.scanner-manual .form-input {
  flex: 1;
}

/* Group check-in panel */
.scanner-group {
  margin-top: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
}
.scanner-group__header {
  padding: var(--space-4);
  font-weight: var(--fw-semibold);
  background: var(--color-dark-bg);
  color: #fff;
  font-size: var(--fs-body-sm);
}
.scanner-group__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.scanner-group__row--checked {
  opacity: 0.6;
}
.scanner-group__name {
  flex: 1;
  font-weight: var(--fw-medium);
}
.scanner-group__type {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}
.scanner-group__actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  justify-content: center;
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: #fff;
  z-index: 9999;
  animation: fadeInUp 0.3s ease;
}
.toast--success {
  background: var(--color-success);
}
.toast--error {
  background: var(--color-error);
}

/* ── POS Dashboard ────────────────────────────────────────────────── */

.pos-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  min-height: 60vh;
}
@media (max-width: 768px) {
  .pos-layout {
    grid-template-columns: 1fr;
  }
}

.pos-products {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pos-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.pos-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  min-height: 100px;
  text-align: center;
}
.pos-tile:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pos-tile:active {
  transform: scale(0.97);
}
.pos-tile__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--space-2);
}
.pos-tile__price {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.pos-cart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-8));
}

.pos-pay-btn--active {
  /* S93 a11y — non-color state affordance. The box-shadow ring already
     works for color-vision-deficient users (luminance edge), but add an
     explicit ✓ prefix so the active state is unambiguous beyond hue. */
  box-shadow: 0 0 0 2px var(--color-primary);
  position: relative;
}
.pos-pay-btn--active::before {
  content: "\2713\00A0"; /* ✓ + non-breaking space */
  font-weight: var(--fw-bold);
}

/* S93 a11y — Kiosk idle-warning (WCAG 2.2.1 Timing Adjustable) */
.kiosk-idle-warning {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.kiosk-idle-warning[hidden] {
  display: none !important;
}
.kiosk-idle-warning__inner {
  background: var(--color-background);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  max-width: 520px;
  text-align: center;
  box-shadow: var(--shadow-xl);
}

/* ─── Mobile: POS, Event Sales, Day-of ─────────────────────────────────── */

@media (max-width: 480px) {
  .pos-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
  }
  .pos-tile {
    min-height: 80px;
    padding: var(--space-3);
  }
  .pos-tile__name {
    font-size: var(--fs-caption);
  }
  .pos-tile__price {
    font-size: var(--fs-body);
  }
  .pos-cart {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .pos-tabs .btn {
    min-height: 44px;
    font-size: var(--fs-body-sm);
  }
}

/* Event sales: sticky cart mobile fix */
@media (max-width: 640px) {
  .event-sales-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 40vh;
    overflow-y: auto;
  }
}

/* Touch targets: ensure 44px minimum on all interactive elements at mobile */
@media (max-width: 768px) {
  .dash-table td .btn--sm,
  .vol-checkin-btn,
  .vol-assign-btn {
    min-height: 44px;
    min-width: 44px;
  }
  /* On narrow viewports, `table-layout: fixed` + `width: 100%` clamped
     every column to ~7px on a 320-375px screen and made data unreadable.
     Switch to auto-layout so columns size to content. The 720px min-width
     that used to live here was superseded by the Phase 2A.a mobile-card
     transform at <=767px (which makes <tr> display:block and stacks
     label/value pairs as cards), so a 720px floor on the table here only
     served to push the body horizontally at 320 — removed. */
  .dash-table {
    table-layout: auto;
  }
}

/* ─── Registration: Capacity Bar ─────────────────────────────────────── */
.capacity-bar__track {
  height: 10px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.capacity-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}
.capacity-bar__label {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ─── Registration: Success Ticket Card ──────────────────────────────── */
.register-success__ticket {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.register-success__ticket-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.register-success__ticket-body {
  flex: 1;
  min-width: 0;
}
.register-success__qr {
  text-align: center;
  flex-shrink: 0;
}
.register-success__qr img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .register-success__ticket {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .register-success__ticket-img {
    width: 80px;
    height: 80px;
  }
}

/* ─── Photo Submission: Drop Zone ────────────────────────────────────── */
.photo-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  color: var(--color-text-muted);
}
.photo-drop-zone:hover,
.photo-drop-zone:focus-visible {
  border-color: var(--color-primary);
  background: rgba(204, 0, 0, 0.03);
}
.photo-drop-zone--active {
  border-color: var(--color-primary);
  background: rgba(204, 0, 0, 0.06);
}
.photo-drop-zone__content {
  pointer-events: none;
}

/* ─── Photo Submission: Preview Grid ─────────────────────────────────── */
.photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.photo-thumb {
  position: relative;
  width: 100px;
  flex-shrink: 0;
}
.photo-thumb__img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
}
.photo-thumb__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.photo-thumb__info {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Photo Submission: Upload Progress ──────────────────────────────── */
.upload-progress {
  margin-top: var(--space-4);
}
.upload-progress__track {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.upload-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.3s ease;
}
.upload-progress__label {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* Google Places autocomplete dropdown — ensure it appears above modals */
.pac-container {
  z-index: 999999 !important;
}

/* ── POS tap-to-pay ──────────────────────────────────────────────────── */

/* The theme's .btn class sets display:inline-flex which overrides the UA
   [hidden] { display:none } rule — any .btn with hidden attribute would
   still render. Force hide for POS tap-to-pay controls so the retry +
   cancel affordances stay out of the tab order until JS reveals them. */
#posRetryBtn[hidden],
#posCardCancel[hidden] {
  display: none !important;
}

/* Express checkout region — wraps the Stripe PaymentRequest button
   (Apple Pay / Google Pay / Link). Hidden by default; JS reveals it only
   when paymentRequest.canMakePayment() resolves positively. */
.pos-express {
  margin-bottom: var(--space-4);
}

.pos-express #posPaymentRequestButton {
  min-height: 48px;
}

/* Focus ring on the PR button wrapper — outline, NOT box-shadow, because
   Stripe's iframe can clip box-shadow against its bounds. Outline offset
   keeps the ring visible outside the iframe edge. 2563eb on #fff = 4.66:1
   (passes WCAG 2.4.11 / 2.4.13 3:1 UI component contrast). */
.pos-express #posPaymentRequestButton:focus-within {
  outline: 2px solid var(--dash-focus-ring, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Visual "or" divider between the PR button and the Cash/Card row. */
.pos-express__divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pos-express__divider::before,
.pos-express__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border, #e5e7eb);
}

/* Manual card-entry form (Stripe Elements). Revealed inline when the
   operator taps "Card" or when PaymentRequest is unavailable. */
.pos-card-form {
  padding: var(--space-3);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  margin-bottom: var(--space-4);
  background: #fafbfc;
}

.pos-card-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pos-card-form__label {
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-body-sm);
  color: #111827;
}

.pos-card-form__element {
  padding: 12px 14px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  background: #ffffff;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.pos-card-form__element.StripeElement--focus {
  outline: 2px solid var(--dash-focus-ring, #2563eb);
  outline-offset: 2px;
  border-color: #2563eb;
}

.pos-card-form__element.StripeElement--invalid {
  border-color: #b91c1c;
}

.pos-card-form__help {
  margin: 0;
  font-size: var(--fs-body-xs, 12px);
  color: var(--color-text-muted);
}

/* Decline / validation error text. #b91c1c on #fafbfc = 6.28:1 (passes
   WCAG AA 4.5:1; #ef4444 at 3.76:1 fails). Min-height keeps layout
   stable when the error clears. */
.pos-card-form__error {
  margin: 0;
  min-height: 1.25em;
  font-size: var(--fs-body-sm);
  color: #b91c1c;
  font-weight: var(--fw-medium, 500);
}

/* Tap to Pay panel — same visual treatment as card form */
.pos-tap-panel {
  background: var(--color-surface-alt, #f9fafb);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.pos-tap-panel[hidden] {
  display: none;
}
.pos-tap-panel__status {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Honor the OS "reduce motion" preference. Stripe's own spinner already
   respects prefers-reduced-motion since v10, but any transitions we
   added above need to opt out too. */
@media (prefers-reduced-motion: reduce) {
  .pos-card-form__element {
    transition: none;
  }
}

/* ── Kiosk Mode ──────────────────────────────────────────────────────── */

/* Hide site chrome in kiosk mode for immersive fullscreen experience */
.kiosk-mode .site-header,
.kiosk-mode .site-footer,
.kiosk-mode #cookieConsent {
  display: none;
}
.kiosk-mode .site-main {
  margin-top: 0;
  padding: 0;
}

/* All kiosk screens are full-viewport overlays */
.kiosk-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.kiosk-screen[hidden] {
  display: none;
}

/* Override .btn[hidden] — theme display:inline-flex beats UA [hidden] */
.kiosk-screen .btn[hidden] {
  display: none !important;
}

/* ── Attract Screen ──────────────────────────────────────────────── */
.kiosk-attract {
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dark, #1a1a2e);
  color: #fff;
  overflow: hidden;
}
.kiosk-attract__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
}
.kiosk-attract__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-8);
}
.kiosk-attract__title {
  font-size: clamp(2rem, 6vw, 4rem);
  margin-bottom: var(--space-8);
  line-height: 1.1;
}
.kiosk-attract__cta {
  font-size: var(--fs-h2, 1.75rem);
  padding: var(--space-6) var(--space-10);
  min-height: 64px;
  animation: kiosk-pulse 2s ease-in-out infinite;
}
@keyframes kiosk-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* ── Shop Screen ─────────────────────────────────────────────────── */
.kiosk-shop {
  padding-bottom: 88px; /* space for sticky cart bar */
}
.kiosk-shop__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
}
.kiosk-shop__event-name {
  font-size: var(--fs-h3);
  margin: 0;
}

/* Tabs */
.kiosk-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kiosk-tabs .btn {
  min-height: 48px;
  font-size: var(--fs-body);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Product grid — large tiles for touch */
.kiosk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.kiosk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: var(--space-5);
  background: var(--color-surface, #fff);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.kiosk-tile:hover,
.kiosk-tile:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary);
}
.kiosk-tile:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.kiosk-tile__name {
  font-size: var(--fs-body-lg, 1.125rem);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.kiosk-tile__price {
  font-size: var(--fs-h3, 1.5rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

/* Sticky bottom cart bar */
.kiosk-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface, #fff);
  border-top: 2px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  min-height: 72px;
}
.kiosk-cart-bar__summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kiosk-cart-bar__total {
  font-size: var(--fs-h3, 1.5rem);
  font-weight: var(--fw-bold);
}

/* Expandable cart detail panel */
.kiosk-cart-detail {
  position: fixed;
  bottom: 72px;
  left: 0;
  right: 0;
  z-index: 49;
  max-height: 50dvh;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border-top: 2px solid var(--color-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  padding: var(--space-4);
}
.kiosk-cart-detail[hidden] {
  display: none;
}
.kiosk-cart-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.kiosk-cart-detail__header h3 {
  margin: 0;
}
.kiosk-cart-detail__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kiosk-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.kiosk-cart-item__info {
  flex: 1;
}
.kiosk-cart-item__qty {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kiosk-cart-item__qty button {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 50%);
  border: 2px solid var(--color-border);
  background: var(--color-surface, #fff);
  font-size: var(--fs-body-lg);
  cursor: pointer;
}
.kiosk-cart-detail__footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 2px solid var(--color-border);
}

/* ── Buyer Info Screen ───────────────────────────────────────────── */
.kiosk-buyer {
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.kiosk-buyer__content {
  max-width: 480px;
  width: 100%;
}
.kiosk-buyer__content h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}
.kiosk-buyer__help {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.kiosk-buyer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kiosk-buyer-form__field label {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
  font-size: var(--fs-body-lg, 1.125rem);
}
.kiosk-buyer-form__field input {
  width: 100%;
  font-size: var(--fs-body-lg, 1.125rem);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
}
.kiosk-buyer-form__field input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.kiosk-buyer-form__field input[aria-invalid="true"] {
  border-color: #b91c1c;
}
.kiosk-buyer-form__hint {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.kiosk-buyer-form__error {
  color: #b91c1c;
  font-weight: var(--fw-medium);
  min-height: 1.25em;
}
.kiosk-buyer-form__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.kiosk-buyer-form__actions .btn {
  flex: 1;
}

/* ── Payment Screen ──────────────────────────────────────────────── */
.kiosk-pay {
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.kiosk-pay__content {
  max-width: 480px;
  width: 100%;
}
.kiosk-pay__content h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-6);
}

/* Express checkout */
.kiosk-express {
  margin-bottom: var(--space-4);
}
.kiosk-express[hidden] {
  display: none;
}
.kiosk-express #kioskPaymentRequestButton {
  min-height: 56px;
}
.kiosk-express #kioskPaymentRequestButton:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.kiosk-express__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}
.kiosk-express__divider::before,
.kiosk-express__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Card form */
.kiosk-card-form {
  background: var(--color-surface-alt, #f9fafb);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
}
.kiosk-card-form__label {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  font-size: var(--fs-body-lg, 1.125rem);
}
.kiosk-card-form__element {
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  min-height: 56px;
  transition: border-color 0.15s;
}
.kiosk-card-form__element.StripeElement--focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.kiosk-card-form__element.StripeElement--invalid {
  border-color: #b91c1c;
}
.kiosk-card-form__help {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.kiosk-card-form__error {
  min-height: 1.25em;
  font-size: var(--fs-body-sm);
  color: #b91c1c;
  font-weight: var(--fw-medium);
  margin-top: var(--space-2);
}

/* QR Pay section */
.kiosk-qr-pay {
  margin-top: var(--space-4);
  text-align: center;
}
.kiosk-qr-pay img {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  padding: var(--space-2);
}

/* ── Success Screen ──────────────────────────────────────────────── */
.kiosk-success {
  align-items: center;
  justify-content: center;
  background: var(--color-primary-dark, #1a1a2e);
  color: #fff;
  padding: var(--space-8);
}
.kiosk-success__content {
  text-align: center;
  max-width: 480px;
  width: 100%;
}
.kiosk-success__icon {
  font-size: 4rem;
  width: 96px;
  height: 96px;
  line-height: 96px;
  border-radius: var(--radius-full, 50%);
  background: rgba(255, 255, 255, 0.15);
  margin: 0 auto var(--space-6);
}
.kiosk-success__title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: var(--space-3);
}
.kiosk-success__order {
  font-size: var(--fs-body-lg);
  opacity: 0.8;
  margin-bottom: var(--space-6);
}
.kiosk-success__qr {
  margin: 0 auto var(--space-4);
  max-width: 200px;
}
.kiosk-success__qr img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--space-2);
}
.kiosk-success__receipt {
  font-size: var(--fs-body-sm);
  opacity: 0.7;
  margin-bottom: var(--space-2);
}
.kiosk-success__hint {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-6);
}
.kiosk-success__timer {
  font-size: var(--fs-body-sm);
  opacity: 0.6;
  margin-bottom: var(--space-4);
}

/* ── Error Screen ────────────────────────────────────────────────── */
.kiosk-error-screen {
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.kiosk-error-screen__content {
  text-align: center;
  max-width: 480px;
  width: 100%;
}
.kiosk-error-screen__content h2 {
  font-size: var(--fs-h1);
  color: #b91c1c;
  margin-bottom: var(--space-4);
}
.kiosk-error-screen__msg {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.kiosk-error-screen__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Kiosk XL button variant ─────────────────────────────────────── */
.btn--xl {
  padding: var(--space-5) var(--space-8);
  font-size: var(--fs-body-lg, 1.125rem);
  min-height: 56px;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kiosk-attract__cta {
    animation: none;
  }
  .kiosk-tile {
    transition: none;
  }
  .kiosk-card-form__element {
    transition: none;
  }
}

/* ─── Session 87 — /signup/ Get Involved hub ─────────────────────────── */
/* Phase 4 implementation of the accessibility-lead spec.                */

.signup-tiles {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .signup-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .signup-tiles {
    grid-template-columns: 1fr;
  }
}
.signup-tiles > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.signup-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  min-height: 160px;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    border-color 150ms,
    background-color 150ms,
    transform 100ms;
}
.signup-tile:hover {
  background: var(--color-surface);
}
.signup-tile:active {
  transform: translateY(1px);
}
.signup-tile:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.signup-tile[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.signup-tile__icon {
  color: var(--color-primary);
  display: inline-flex;
}
.signup-tile__label {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.signup-tile__desc {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.signup-form-region {
  margin-top: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.signup-form-region[hidden] {
  display: none !important;
}
.signup-form-region__inner > h2 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--fs-h2);
  line-height: 1.2;
}
.signup-form-region__inner > h2:focus {
  outline: none;
}
.signup-form-region__inner > h2:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}
.signup-form-region__summary,
.signup-form-region__empty,
.signup-form-region__success {
  margin: 0 0 var(--space-5) 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.signup-form-region__empty a,
.signup-form-region__success a {
  color: var(--color-primary);
  text-decoration: underline;
}
.signup-form-region__close {
  margin-top: var(--space-5);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
}
.signup-form-region__close:hover {
  background: var(--color-surface-alt);
}
.signup-form-region__close:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.signup-event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.signup-event-card {
  list-style: none;
  margin: 0;
  padding: 0;
}
.signup-event-card__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition:
    background-color 150ms,
    border-color 150ms;
}
.signup-event-card__link:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.signup-event-card__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.signup-event-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  grid-column: 1;
  grid-row: 1;
}
.signup-event-card__meta {
  grid-column: 1;
  grid-row: 2;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
}
.signup-event-card__cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
}

/* Staff form ---------------------------------------------------------- */
.signup-staff-form .form-group {
  margin-bottom: var(--space-4);
}
.signup-form-help {
  margin: var(--space-1) 0 0 0;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.signup-shifts-list {
  display: grid;
  gap: var(--space-2);
}
.signup-shifts-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.signup-shifts-list__item:has(input:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.signup-shifts-list__item:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.signup-shifts-list__item input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.signup-shifts-list__label {
  font-size: var(--fs-body-sm);
  line-height: 1.4;
}
.signup-form-error {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fef2f2;
  border: 1px solid #dc2626;
  border-radius: var(--radius-md);
  color: #991b1b;
  font-size: var(--fs-body-sm);
}
.signup-form-error[hidden] {
  display: none !important;
}

/* Visually-hidden utility (used by #signup-live) ---------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .signup-tile,
  .signup-event-card__link,
  .signup-form-region__close {
    transition: none;
  }
  .signup-tile:active {
    transform: none;
  }
}