/* /connect/connect-tokens.css — Bible Connect design system v3
 * "Vibrant Community" — energetic, welcoming, contemporary.
 * Dark-first palette: lifted warm-plum/midnight surfaces, vivid
 * indigo-violet primary, vivid amber accent, teal secondary. Serif
 * display accents (EB Garamond) keep the gathered-body warmth.
 * Scoped to .bcc-app to prevent bleeding into the rest of Bible Parlor.
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   ROOT TOKENS — applied globally so font/motion tokens are shared
=============================================================== */
:root {
  /* Bible Connect palette — vivid indigo-violet primary */
  --bcc-primary:       #7b5cff;   /* vivid indigo-violet */
  --bcc-primary-hover: #6a45f2;
  --bcc-primary-soft:  rgba(123,92,255,.15);
  --bcc-primary-tint:  rgba(123,92,255,.09);
  --bcc-primary-rgb:   123,92,255;  /* views use rgba(var(--bcc-primary-rgb),a) */

  /* Accent — vivid amber (used sparingly) */
  --bcc-accent:        #ffb020;   /* vivid amber */
  --bcc-accent-hover:  #f5a014;
  --bcc-accent-soft:   rgba(255,176,32,.15);
  --bcc-accent-rgb:    255,176,32;

  /* Secondary — energetic teal (community / second accent) */
  --bcc-secondary:      #2dd4bf;
  --bcc-secondary-rgb:  45,212,191;
  --bcc-secondary-soft: rgba(45,212,191,.15);

  /* Status colours */
  --bcc-success:       #22c55e;
  --bcc-success-soft:  rgba(34,197,94,.14);
  --bcc-success-rgb:   34,197,94;
  --bcc-warning:       #f59e0b;
  --bcc-warning-soft:  rgba(245,158,11,.14);
  --bcc-warning-rgb:   245,158,11;
  --bcc-danger:        #ef4444;
  --bcc-danger-soft:   rgba(239,68,68,.14);
  --bcc-danger-rgb:    239,68,68;
  --bcc-info:          #38bdf8;
  --bcc-info-soft:     rgba(56,189,248,.14);
  --bcc-info-rgb:      56,189,248;

  /* ── Dark surfaces (default — Connect is dark-first, lifted & warmed) */
  --bcc-bg:            #0b0a12;   /* deepest background */
  --bcc-surface-1:     #151320;   /* cards, panels */
  --bcc-surface-2:     #1c1929;   /* nested cards */
  --bcc-surface-3:     #262234;   /* hover states, inputs */
  --bcc-surface-4:     #302b41;   /* borders, dividers */

  --bcc-border:        #262032;
  --bcc-border-soft:   #332c44;
  --bcc-border-strong: #453d5c;

  --bcc-ink:           #f5f3fb;   /* primary text */
  --bcc-ink-2:         #b6b0cb;   /* secondary text — AA on surface-1 */
  --bcc-ink-3:         #8a83a0;   /* tertiary / placeholder — AA on surface-1 */
  --bcc-ink-muted:     #544e69;   /* disabled */

  /* Sidebar specific */
  --bcc-sidebar-bg:      #100e1a;
  --bcc-sidebar-w:       224px;
  --bcc-sidebar-w-sm:    64px;
  --bcc-admin-sidebar-w: 240px;
  --bcc-topbar-h:        56px;

  /* Elevation shadows — dark mode (warm, soft, layered) */
  --bcc-shadow-1:      0 1px 2px rgba(10,8,16,.5),  0 1px 3px rgba(10,8,16,.45);
  --bcc-shadow-2:      0 6px 20px rgba(10,8,16,.55), 0 2px 8px rgba(10,8,16,.4);
  --bcc-shadow-3:      0 18px 48px rgba(6,5,10,.7),  0 6px 18px rgba(6,5,10,.5);
  --bcc-shadow-glow:   0 0 28px rgba(123,92,255,.26);

  /* Radii */
  --bcc-r-xs:  4px;
  --bcc-r-sm:  8px;
  --bcc-r-md:  12px;
  --bcc-r-lg:  16px;
  --bcc-r-xl:  22px;
  --bcc-r-pill:999px;

  /* Type */
  --bcc-font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --bcc-font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --bcc-t-xs:  .7rem;      /* 11.2px */
  --bcc-t-sm:  .8125rem;   /* 13px   */
  --bcc-t-md:  .9375rem;   /* 15px   */
  --bcc-t-lg:  1.0625rem;  /* 17px   */
  --bcc-t-xl:  1.25rem;    /* 20px   */
  --bcc-t-2xl: 1.5rem;     /* 24px   */
  --bcc-t-3xl: 1.875rem;   /* 30px   */
  --bcc-t-4xl: 2.25rem;    /* 36px   */

  /* Spacing (4-px grid) */
  --bcc-s1:  4px;  --bcc-s2:  8px;  --bcc-s3: 12px; --bcc-s4: 16px;
  --bcc-s5: 20px;  --bcc-s6: 24px;  --bcc-s8: 32px; --bcc-s10:40px;
  --bcc-s12:48px;  --bcc-s16:64px;  --bcc-s20:80px;

  /* Motion */
  --bcc-ease:        cubic-bezier(.2,.7,.3,1);
  --bcc-ease-out:    cubic-bezier(0,.6,.2,1);
  --bcc-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --bcc-dur-1: 80ms;
  --bcc-dur-2: 160ms;
  --bcc-dur-3: 260ms;
  --bcc-dur-4: 380ms;
  --bcc-dur-5: 500ms;

  /* Focus ring — refined double halo; prefers a soft outer glow */
  --bcc-focus: 0 0 0 2px var(--bcc-bg), 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.28);
}

/* ================================================================
   TOKEN ALIASES — legacy names referenced by views.css / serve.css
   These were previously undefined and relied on per-rule hardcoded
   fallbacks. Defined here so they resolve to the current palette.
   Scoped to .bcc-app to match the Connect design system.
=============================================================== */
.bcc-app {
  --bcc-muted:          var(--bcc-ink-3);
  --bcc-danger-bg:      var(--bcc-danger-soft);
  --bcc-prayer-color:   var(--bcc-primary);
  --bcc-radius:         var(--bcc-r-md);
  --bcc-radius-sm:      var(--bcc-r-sm);
  --bcc-t-base:         var(--bcc-t-md);
  --bcc-border-subtle:  var(--bcc-border-soft);
  --bcc-surface-hover:  var(--bcc-surface-3);
  --bcc-font-body:      var(--bcc-font);
}

/* ================================================================
   LIGHT MODE OVERRIDES
   Activated by: .bcc-app.bcc-light  OR  body.theme-light .bcc-app
================================================================ */
.bcc-app.bcc-light,
body.theme-light .bcc-app {
  --bcc-bg:           #f6f5fb;
  --bcc-surface-1:    #ffffff;
  --bcc-surface-2:    #f1eff8;
  --bcc-surface-3:    #e8e5f2;
  --bcc-surface-4:    #dcd8ea;
  --bcc-border:       #e6e2f0;
  --bcc-border-soft:  #efecf6;
  --bcc-border-strong:#d0c9e4;
  --bcc-ink:          #1a1626;
  --bcc-ink-2:        #4b4460;
  --bcc-ink-3:        #7a7292;
  --bcc-ink-muted:    #b0a9c4;
  --bcc-sidebar-bg:   #100e1a;  /* sidebar stays dark in light mode */
  --bcc-shadow-1:     0 1px 2px rgba(26,22,38,.08), 0 1px 3px rgba(26,22,38,.06);
  --bcc-shadow-2:     0 6px 20px rgba(26,22,38,.10), 0 2px 8px rgba(26,22,38,.07);
  --bcc-shadow-3:     0 18px 48px rgba(26,22,38,.14), 0 6px 18px rgba(26,22,38,.09);
  --bcc-shadow-glow:  0 0 28px rgba(123,92,255,.16);
  --bcc-primary-soft: rgba(123,92,255,.10);
  --bcc-primary-tint: rgba(123,92,255,.06);
  --bcc-focus:        0 0 0 2px #ffffff, 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.22);
}

/* Light-mode: pill active state needs solid fill so it's readable on white backgrounds */
.bcc-app.bcc-light .bcc-pill.active,
body.theme-light .bcc-app .bcc-pill.active {
  background:   var(--bcc-primary);
  color:        #fff;
  border-color: var(--bcc-primary);
}

/* ================================================================
   GLOBAL OVERFLOW GUARD
   `overflow-x: clip` (not hidden) stops any stray wide child from
   creating a horizontal page scroll while leaving `position: sticky`
   and normal vertical scrolling intact. shared/tokens.css sets
   `overflow-x: hidden` on html/body earlier; this later rule wins.
=============================================================== */
html, body {
  overflow-x: hidden;   /* fallback for engines without `clip` */
  overflow-x: clip;     /* preferred: no scroll container, sticky safe */
}

/* ================================================================
   .bcc-app — Root wrapper; applies Connect design system
=============================================================== */
.bcc-app {
  font-family: var(--bcc-font);
  background:  var(--bcc-bg);
  color:       var(--bcc-ink);
  font-size:   var(--bcc-t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ================================================================
   RESET within .bcc-app
   `:where(.bcc-app)` keeps the scope but contributes zero specificity,
   so single-class component rules (.bcc-btn, .bcc-btn-primary, avatar
   height classes) can override these element resets on classed elements.
=============================================================== */
.bcc-app *, .bcc-app *::before, .bcc-app *::after { box-sizing: border-box; }
:where(.bcc-app) button { cursor: pointer; background: none; border: none; padding: 0; font: inherit; color: inherit; }
.bcc-app a      { color: inherit; text-decoration: none; }
:where(.bcc-app) img, :where(.bcc-app) video { max-width: 100%; height: auto; }
.bcc-app ::selection { background: var(--bcc-primary-tint); }

/* ================================================================
   FOCUS RINGS
================================================================ */
.bcc-app :focus-visible {
  outline:      none;
  box-shadow:   var(--bcc-focus);
  border-radius: var(--bcc-r-md);
}

/* ================================================================
   COMPONENT: BUTTONS
=============================================================== */
.bcc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s2);
  padding:         0 var(--bcc-s5);
  height:          38px;
  border-radius:   var(--bcc-r-md);
  font-size:       var(--bcc-t-sm);
  font-weight:     600;
  font-family:     inherit;
  letter-spacing:  .01em;
  text-decoration: none;
  cursor:          pointer;
  transition:      background    var(--bcc-dur-2) var(--bcc-ease),
                   color         var(--bcc-dur-2) var(--bcc-ease),
                   border-color  var(--bcc-dur-2) var(--bcc-ease),
                   opacity       var(--bcc-dur-2) var(--bcc-ease),
                   box-shadow    var(--bcc-dur-2) var(--bcc-ease),
                   transform     var(--bcc-dur-2) var(--bcc-ease);
  white-space:     nowrap;
  user-select:     none;
  border:          1px solid transparent;
  touch-action:    manipulation;
}
.bcc-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.bcc-btn:active { transform: translateY(1px); }
.bcc-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* Primary */
.bcc-btn-primary {
  background:  linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:       #fff;
  border-color: transparent;
  box-shadow:  0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
}
.bcc-btn-primary:hover  {
  background:  linear-gradient(180deg, var(--bcc-primary-hover), var(--bcc-primary-hover));
  border-color: transparent;
  transform:   translateY(-1px);
  box-shadow:  0 6px 18px rgba(0,0,0,.32), 0 0 22px rgba(var(--bcc-primary-rgb),.45);
}
.bcc-btn-primary:active {
  transform:  translateY(0);
  background: var(--bcc-primary-hover);
  box-shadow: 0 1px 2px rgba(0,0,0,.30), inset 0 2px 4px rgba(0,0,0,.18);
}

/* Secondary */
.bcc-btn-secondary {
  background:  var(--bcc-surface-3);
  color:       var(--bcc-ink);
  border-color:var(--bcc-border-strong);
}
.bcc-btn-secondary:hover  { background: var(--bcc-surface-4); border-color: var(--bcc-primary); }
.bcc-btn-secondary:active { transform: translateY(1px); }

/* Ghost */
.bcc-btn-ghost {
  background:  transparent;
  color:       var(--bcc-ink-2);
  border-color:transparent;
}
.bcc-btn-ghost:hover  { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.bcc-btn-ghost:active { background: var(--bcc-surface-4); }

/* Danger */
.bcc-btn-danger {
  background:  var(--bcc-danger);
  color:       #fff;
  border-color:var(--bcc-danger);
}
.bcc-btn-danger:hover  { filter: brightness(1.1);  transform: translateY(-1px); }
.bcc-btn-danger:active { filter: brightness(.96);  transform: translateY(0); }

/* Success */
.bcc-btn-success {
  background:  var(--bcc-success);
  color:       #fff;
  border-color:var(--bcc-success);
}
.bcc-btn-success:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.bcc-btn-success:active { filter: brightness(.96);  transform: translateY(0); }

/* Icon-only */
.bcc-btn-icon {
  width:  38px;
  height: 38px;
  padding: 0;
  border-radius: var(--bcc-r-md);
  flex-shrink: 0;
}

/* Size variants */
.bcc-btn-xs   { height: 26px; padding: 0 8px; font-size: .68rem; }
.bcc-btn-sm   { height: 32px; padding: 0 var(--bcc-s3); font-size: var(--bcc-t-xs); }
.bcc-btn-lg   { height: 46px; padding: 0 var(--bcc-s8); font-size: var(--bcc-t-md); }
.bcc-btn-block { width: 100%; }

/* Loading state */
.bcc-btn.bcc-loading { pointer-events: none; opacity: .7; }
.bcc-btn.bcc-loading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bcc-spin .7s linear infinite;
  margin-left: var(--bcc-s2);
}

/* ================================================================
   COMPONENT: INPUTS & FORMS
================================================================ */
.bcc-input, .bcc-textarea, .bcc-select {
  display:      block;
  width:        100%;
  background:   var(--bcc-surface-2);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-sm);
  padding:      0 var(--bcc-s4);
  height:       38px;
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-ink);
  outline:      none;
  transition:   border-color var(--bcc-dur-1) var(--bcc-ease),
                box-shadow   var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--bcc-s3) var(--bcc-s4);
  resize: vertical;
  line-height: 1.55;
}
.bcc-input::placeholder, .bcc-textarea::placeholder { color: var(--bcc-ink-3); }
.bcc-input:hover, .bcc-textarea:hover, .bcc-select:hover { border-color: var(--bcc-primary); }
.bcc-input:focus, .bcc-textarea:focus, .bcc-select:focus {
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}
.bcc-input.bcc-invalid { border-color: var(--bcc-danger); }
.bcc-input.bcc-invalid:focus { border-color: var(--bcc-danger); box-shadow: 0 0 0 3px var(--bcc-danger-soft); }

.bcc-label {
  display:     block;
  font-size:   var(--bcc-t-sm);
  font-weight: 500;
  color:       var(--bcc-ink-2);
  margin-bottom: var(--bcc-s2);
}
.bcc-field { margin-bottom: var(--bcc-s4); }
.bcc-field-error { font-size: var(--bcc-t-xs); color: var(--bcc-danger); margin-top: var(--bcc-s1); }
.bcc-field-hint  { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); margin-top: var(--bcc-s1); }

/* Input group (icon + input) */
.bcc-input-wrap { position: relative; }
.bcc-input-wrap .bcc-input { padding-left: 36px; }
.bcc-input-wrap .bcc-input-icon {
  position:    absolute;
  left:        10px;
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--bcc-ink-3);
  pointer-events: none;
  line-height: 1;
}

/* ================================================================
   COMPONENT: CARDS
================================================================ */
.bcc-card {
  background:   var(--bcc-surface-1);
  border:       1px solid var(--bcc-border);
  border-radius:var(--bcc-r-lg);
  padding:      var(--bcc-s5);
  box-shadow:   var(--bcc-shadow-1);
  transition:   border-color var(--bcc-dur-2) var(--bcc-ease),
               box-shadow   var(--bcc-dur-2) var(--bcc-ease),
               transform    var(--bcc-dur-2) var(--bcc-ease);
}
.bcc-card-sm { padding: var(--bcc-s3) var(--bcc-s4); }
.bcc-card-lg { padding: var(--bcc-s6) var(--bcc-s8); }

/* Hoverable card (for clickable list items) */
.bcc-card-hover { cursor: pointer; }
.bcc-card-hover:hover {
  border-color: var(--bcc-primary);
  box-shadow:   var(--bcc-shadow-2), 0 0 0 1px rgba(var(--bcc-primary-rgb),.30);
  transform:    translateY(-3px);
}
.bcc-card-hover:active { transform: translateY(-1px); }

/* Stat card */
.bcc-stat-card {
  background:   var(--bcc-surface-1);
  border:       1px solid var(--bcc-border);
  border-radius:var(--bcc-r-lg);
  padding:      var(--bcc-s5);
  display:      flex;
  flex-direction: column;
  gap:          var(--bcc-s2);
  box-shadow:   var(--bcc-shadow-1);
  transition:   border-color var(--bcc-dur-2) var(--bcc-ease),
               box-shadow   var(--bcc-dur-2) var(--bcc-ease),
               transform    var(--bcc-dur-2) var(--bcc-ease);
}
.bcc-stat-card:hover {
  border-color: var(--bcc-border-strong);
  box-shadow:   var(--bcc-shadow-2);
  transform:    translateY(-2px);
}
.bcc-stat-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--bcc-r-sm);
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-primary);
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    1rem;
  margin-bottom: var(--bcc-s1);
  flex-shrink: 0;
}
.bcc-stat-card__value {
  font-size:   var(--bcc-t-3xl);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color:       var(--bcc-ink);
}
.bcc-stat-card__label {
  font-size:  var(--bcc-t-xs);
  font-weight: 500;
  color:      var(--bcc-ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bcc-stat-card__delta {
  font-size: var(--bcc-t-xs);
  font-weight: 500;
}
.bcc-stat-card__delta.up   { color: var(--bcc-success); }
.bcc-stat-card__delta.down { color: var(--bcc-danger); }

/* ================================================================
   COMPONENT: BADGES
================================================================ */
.bcc-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  padding:       3px 9px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  letter-spacing:.02em;
  line-height:   1.35;
  white-space:   nowrap;
}
/* Size variant */
.bcc-badge-sm { font-size: .6rem; padding: 1px var(--bcc-s2); letter-spacing: .03em; }

.bcc-badge-primary { background: var(--bcc-primary-soft); color: var(--bcc-primary); }
.bcc-badge-success { background: var(--bcc-success-soft); color: var(--bcc-success); }
.bcc-badge-warning { background: var(--bcc-warning-soft); color: var(--bcc-warning); }
.bcc-badge-danger  { background: var(--bcc-danger-soft);  color: var(--bcc-danger);  }
.bcc-badge-info    { background: var(--bcc-info-soft);    color: var(--bcc-info);    }
.bcc-badge-neutral { background: var(--bcc-surface-3);    color: var(--bcc-ink-2);   }
/* Semantic aliases used in member views */
.bcc-badge-blue    { background: var(--bcc-info-soft);              color: var(--bcc-info);    }
.bcc-badge-purple  { background: var(--bcc-accent-soft);            color: var(--bcc-accent);  }
.bcc-badge-yellow  { background: var(--bcc-warning-soft);           color: var(--bcc-warning); }
.bcc-badge-orange  { background: rgba(249,115,22,.14);              color: #f97316;            }
.bcc-badge-pink    { background: rgba(236,72,153,.14);              color: #ec4899;            }
/* Double-hyphen aliases used by admin views (match single-hyphen colours) */
.bcc-badge--green  { background: var(--bcc-success-soft);           color: var(--bcc-success); }
.bcc-badge--red    { background: var(--bcc-danger-soft);            color: var(--bcc-danger);  }
.bcc-badge--yellow { background: var(--bcc-warning-soft);           color: var(--bcc-warning); }
.bcc-badge--orange { background: rgba(249,115,22,.14);              color: #f97316;            }
.bcc-badge--blue   { background: var(--bcc-info-soft);              color: var(--bcc-info);    }
.bcc-badge--gray   { background: var(--bcc-surface-3);              color: var(--bcc-ink-2);   }

/* Dot badge (notification count) */
.bcc-dot-badge {
  position:    absolute;
  top:         -3px;
  right:       -3px;
  width:       16px;
  height:      16px;
  background:  var(--bcc-danger);
  color:       #fff;
  font-size:   .6rem;
  font-weight: 700;
  border-radius: var(--bcc-r-pill);
  display:     flex;
  align-items: center;
  justify-content: center;
  border:      2px solid var(--bcc-sidebar-bg);
  pointer-events: none;
}

/* ================================================================
   COMPONENT: AVATAR
================================================================ */
.bcc-avatar {
  border-radius: var(--bcc-r-pill);
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-primary);
  font-weight:  700;
  font-size:    var(--bcc-t-sm);
  display:      flex;
  align-items:  center;
  justify-content: center;
  overflow:     hidden;
  flex-shrink:  0;
  user-select:  none;
  letter-spacing: .01em;
  box-shadow:   0 0 0 1px var(--bcc-border);
}
.bcc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bcc-avatar-xs { width: 24px; height: 24px; font-size: .6rem; }
.bcc-avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.bcc-avatar-md { width: 40px; height: 40px; }
.bcc-avatar-lg { width: 52px; height: 52px; font-size: var(--bcc-t-lg); }
.bcc-avatar-xl { width: 72px; height: 72px; font-size: var(--bcc-t-2xl); }

/* Online indicator */
.bcc-avatar-wrap { position: relative; display: inline-flex; }
.bcc-avatar-online::after {
  content: '';
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  background: var(--bcc-success);
  border-radius: 50%;
  border: 2px solid var(--bcc-bg);
}

/* ================================================================
   COMPONENT: TABLE
================================================================ */
.bcc-table-wrap { overflow-x: auto; }
.bcc-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  font-size:       var(--bcc-t-sm);
}
.bcc-table th {
  text-align:    left;
  padding:       var(--bcc-s2) var(--bcc-s4);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:         var(--bcc-ink-3);
  border-bottom: 1px solid var(--bcc-border);
  white-space:   nowrap;
  position:      sticky;
  top:           0;
  background:    var(--bcc-surface-1);
  z-index:       1;
}
.bcc-table td {
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-bottom:1px solid var(--bcc-border);
  color:       var(--bcc-ink-2);
  vertical-align: middle;
}
.bcc-table td:first-child { color: var(--bcc-ink); }
.bcc-table tr:last-child td { border-bottom: none; }
.bcc-table tbody tr { transition: background var(--bcc-dur-1); }
.bcc-table tbody tr:hover { background: var(--bcc-surface-2); }
.bcc-table tbody tr.bcc-row-selected { background: var(--bcc-primary-tint); }
.bcc-table tbody tr.bcc-row-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--bcc-primary);
}

/* Sortable columns */
.bcc-table th[data-sort] { cursor: pointer; user-select: none; }
.bcc-table th[data-sort]:hover { color: var(--bcc-ink-2); }
.bcc-table th[data-sort]::after { content: ' ↕'; opacity: .4; font-size: .6em; }
.bcc-table th[data-sort="asc"]::after  { content: ' ↑'; opacity: 1; color: var(--bcc-primary); }
.bcc-table th[data-sort="desc"]::after { content: ' ↓'; opacity: 1; color: var(--bcc-primary); }

/* ================================================================
   COMPONENT: MODAL
================================================================ */
.bcc-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  z-index:    900;
  display:    flex;
  align-items:center;
  justify-content:center;
  padding:    var(--bcc-s4);
  animation:  bcc-fade-in var(--bcc-dur-2) var(--bcc-ease);
}
.bcc-modal {
  background:   var(--bcc-surface-1);
  border:       1px solid var(--bcc-border-soft);
  border-radius:var(--bcc-r-lg);
  box-shadow:   var(--bcc-shadow-3);
  width:        100%;
  max-width:    520px;
  max-height:   90dvh;
  display:      flex;
  flex-direction: column;
  animation:    bcc-slide-up var(--bcc-dur-3) var(--bcc-ease-spring);
  overflow:     hidden;
  padding-bottom: max(var(--bcc-s5), env(safe-area-inset-bottom, 0px));
}
.bcc-modal-wide  { max-width: 720px; }
.bcc-modal-xl    { max-width: 960px; }
.bcc-modal-title { font-family: var(--bcc-font-display); font-size: var(--bcc-t-xl); font-weight: 600; letter-spacing: .005em; color: var(--bcc-ink); }
.bcc-modal-body  { padding: var(--bcc-s5); overflow-y: auto; flex: 1; }
.bcc-modal-foot  {
  padding:     var(--bcc-s4) var(--bcc-s5);
  padding-bottom: max(var(--bcc-s4), env(safe-area-inset-bottom, 0px));
  border-top:  1px solid var(--bcc-border);
  display:     flex;
  gap:         var(--bcc-s2);
  justify-content: flex-end;
  flex-shrink: 0;
}
.bcc-modal-close {
  width: 28px; height: 28px;
  border-radius: var(--bcc-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bcc-ink-3);
  transition: background var(--bcc-dur-1), color var(--bcc-dur-1);
  flex-shrink: 0;
}
.bcc-modal-close:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }

/* ================================================================
   COMPONENT: TOAST
================================================================ */
.bcc-toast-stack {
  position:   fixed;
  bottom:     calc(var(--bcc-s5) + env(safe-area-inset-bottom, 0px));
  right:      var(--bcc-s5);
  z-index:    9999;
  display:    flex;
  flex-direction: column-reverse;
  gap:        var(--bcc-s2);
  pointer-events: none;
  max-width:  360px;
  width:      calc(100vw - var(--bcc-s10));
}
.bcc-toast {
  background:   var(--bcc-surface-2);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-md);
  padding:      var(--bcc-s3) var(--bcc-s4);
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-ink);
  box-shadow:   var(--bcc-shadow-2);
  display:      flex;
  align-items:  center;
  gap:          var(--bcc-s2);
  pointer-events: auto;
  animation:    bcc-toast-in var(--bcc-dur-3) var(--bcc-ease-spring);
  border-left:  3px solid var(--bcc-border-strong);
}
.bcc-toast.success { border-left-color: var(--bcc-success); }
.bcc-toast.error   { border-left-color: var(--bcc-danger);  }
.bcc-toast.warning { border-left-color: var(--bcc-warning); }
.bcc-toast.info    { border-left-color: var(--bcc-primary); }
/* Hyphenated aliases — BCC.toast() emits `bcc-toast-<type>` */
.bcc-toast-success { border-left-color: var(--bcc-success); }
.bcc-toast-error   { border-left-color: var(--bcc-danger);  }
.bcc-toast-warning { border-left-color: var(--bcc-warning); }
.bcc-toast-info    { border-left-color: var(--bcc-primary); }
.bcc-toast-in      { opacity: 1; transform: translateX(0); }
.bcc-toast-out     { animation: bcc-toast-out var(--bcc-dur-2) var(--bcc-ease) forwards; }

/* ================================================================
   COMPONENT: SKELETON
================================================================ */
.bcc-skeleton {
  background: linear-gradient(
    90deg,
    var(--bcc-surface-2) 25%,
    var(--bcc-surface-3) 50%,
    var(--bcc-surface-2) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--bcc-r-sm);
  animation: bcc-shimmer 1.4s infinite;
  display: block;
}
.bcc-skeleton-text  { height: 14px; border-radius: var(--bcc-r-xs); margin-bottom: var(--bcc-s2); }
.bcc-skeleton-title { height: 20px; }
.bcc-skeleton-avatar{ border-radius: 50%; }
.bcc-skeleton-w25 { width: 25%; }
.bcc-skeleton-w50 { width: 50%; }
.bcc-skeleton-w75 { width: 75%; }
.bcc-skeleton-w100{ width: 100%; }

/* ================================================================
   COMPONENT: TABS
================================================================ */
.bcc-tabs {
  display:     flex;
  gap:         var(--bcc-s1);
  border-bottom: 1px solid var(--bcc-border);
  margin-bottom: var(--bcc-s5);
  padding-bottom: 0;
}
.bcc-tab {
  display:     inline-flex;
  align-items: center;
  padding:     var(--bcc-s3) var(--bcc-s4);
  height:      40px;
  font-size:   var(--bcc-t-sm);
  font-weight: 500;
  color:       var(--bcc-ink-3);
  cursor:      pointer;
  border-bottom: 2px solid transparent;
  border-radius: var(--bcc-r-sm) var(--bcc-r-sm) 0 0;
  transition:  color var(--bcc-dur-1), border-color var(--bcc-dur-1),
               background var(--bcc-dur-1);
  margin-bottom: -1px;
  white-space: nowrap;
  user-select: none;
}
.bcc-tab:hover   { color: var(--bcc-ink); background: var(--bcc-surface-2); }
.bcc-tab.active  { color: var(--bcc-primary); border-bottom-color: var(--bcc-primary); background: var(--bcc-primary-tint); font-weight: 600; }

/* ================================================================
   COMPONENT: SECTION HEADER
================================================================ */
.bcc-section-head {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bcc-s4);
}
.bcc-section-title {
  font-size:   var(--bcc-t-md);
  font-weight: 600;
  color:       var(--bcc-ink);
  letter-spacing: -.01em;
}
.bcc-section-sub {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-3);
  margin-top: 2px;
}

/* ================================================================
   COMPONENT: EMPTY STATE
================================================================ */
.bcc-empty {
  text-align:  center;
  padding:     var(--bcc-s16) var(--bcc-s8);
  color:       var(--bcc-ink-3);
}
.bcc-empty-icon {
  font-size:    2.5rem;
  margin-bottom:var(--bcc-s4);
  opacity:      .4;
}
.bcc-empty-title {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink-2);
  margin-bottom: var(--bcc-s2);
}
.bcc-empty-sub {
  font-size:   var(--bcc-t-sm);
  max-width:   320px;
  margin:      0 auto var(--bcc-s5);
}

/* ================================================================
   COMPONENT: DIVIDER
================================================================ */
.bcc-divider {
  height:     1px;
  background: var(--bcc-border);
  margin:     var(--bcc-s5) 0;
}
.bcc-divider-label {
  display:    flex;
  align-items:center;
  gap:        var(--bcc-s3);
  color:      var(--bcc-ink-3);
  font-size:  var(--bcc-t-xs);
  font-weight:500;
  margin:     var(--bcc-s5) 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bcc-divider-label::before, .bcc-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bcc-border);
}

/* ================================================================
   COMPONENT: DROPDOWN MENU
================================================================ */
.bcc-menu {
  background:   var(--bcc-surface-2);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-md);
  box-shadow:   var(--bcc-shadow-2);
  padding:      var(--bcc-s1);
  min-width:    180px;
  /* Never exceed the viewport on narrow phones (FIX 5) */
  max-width:    calc(100vw - 2 * var(--bcc-s4));
  z-index:      500;
  animation:    bcc-slide-up var(--bcc-dur-2) var(--bcc-ease-out);
}
.bcc-menu-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s2) var(--bcc-s3);
  border-radius:var(--bcc-r-sm);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  cursor:      pointer;
  transition:  background var(--bcc-dur-1), color var(--bcc-dur-1);
  user-select: none;
}
.bcc-menu-item:hover         { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.bcc-menu-item.bcc-danger    { color: var(--bcc-danger); }
.bcc-menu-item.bcc-danger:hover { background: var(--bcc-danger-soft); }
.bcc-menu-divider { height: 1px; background: var(--bcc-border); margin: var(--bcc-s1) 0; }

/* ================================================================
   COMPONENT: CHECKBOX & RADIO
================================================================ */
.bcc-check-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  cursor:      pointer;
  user-select: none;
  padding:     var(--bcc-s1) 0;
}
.bcc-check-row input[type="checkbox"],
.bcc-check-row input[type="radio"] {
  width:  16px;
  height: 16px;
  accent-color: var(--bcc-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.bcc-check-label {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-2);
}

/* ================================================================
   COMPONENT: PROGRESS BAR
================================================================ */
.bcc-progress {
  height:       6px;
  background:   var(--bcc-surface-3);
  border-radius:var(--bcc-r-pill);
  overflow:     hidden;
}
.bcc-progress-bar {
  height:       100%;
  background:   var(--bcc-primary);
  border-radius:var(--bcc-r-pill);
  transition:   width var(--bcc-dur-4) var(--bcc-ease);
}
.bcc-progress-bar.success { background: var(--bcc-success); }
.bcc-progress-bar.warning { background: var(--bcc-warning); }
.bcc-progress-bar.danger  { background: var(--bcc-danger); }

/* ================================================================
   COMPONENT: PILL FILTER BAR
================================================================ */
.bcc-filter-bar {
  display:  flex;
  gap:      var(--bcc-s2);
  flex-wrap:wrap;
  padding:  var(--bcc-s3) 0;
  margin-bottom: var(--bcc-s4);
}
.bcc-pill {
  display:     inline-flex;
  align-items: center;
  height:      30px;
  padding:     var(--bcc-s1) var(--bcc-s3);
  border-radius:var(--bcc-r-pill);
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  border:      1px solid var(--bcc-border-strong);
  color:       var(--bcc-ink-3);
  cursor:      pointer;
  transition:  background var(--bcc-dur-1) var(--bcc-ease),
               border-color var(--bcc-dur-1) var(--bcc-ease),
               color var(--bcc-dur-1) var(--bcc-ease);
  user-select: none;
  white-space: nowrap;
}
.bcc-pill:hover  { background: var(--bcc-primary-tint); border-color: var(--bcc-primary); color: var(--bcc-primary); }
.bcc-pill.active { background: var(--bcc-primary-soft); border-color: var(--bcc-primary); color: var(--bcc-primary); box-shadow: 0 0 0 2px var(--bcc-primary-tint); }

/* ================================================================
   COMPONENT: SEARCH BAR
================================================================ */
.bcc-searchbar {
  position:    relative;
  max-width:   320px;
}
.bcc-searchbar input {
  width:        100%;
  background:   var(--bcc-surface-2);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-pill);
  padding:      0 var(--bcc-s3) 0 36px;
  height:       34px;
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-ink);
  outline:      none;
  transition:   border-color var(--bcc-dur-1), box-shadow var(--bcc-dur-1);
}
.bcc-searchbar input::placeholder { color: var(--bcc-ink-3); }
.bcc-searchbar input:focus {
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}
.bcc-searchbar__icon {
  position:  absolute;
  left:      10px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--bcc-ink-3);
  pointer-events: none;
  font-size: 14px;
}

/* ================================================================
   LAYOUT UTILITIES
================================================================ */
.bcc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bcc-s4); }
.bcc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bcc-s4); }
.bcc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bcc-s4); }
.bcc-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: var(--bcc-s4); }

/* 3- and 4-column utility grids collapse to 2 columns at tablet /
   small-laptop widths, then to a single column on phones. */
@media (max-width: 1024px) {
  .bcc-grid-4,
  .bcc-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bcc-grid-4, .bcc-grid-3, .bcc-grid-2 { grid-template-columns: 1fr; }
}

.bcc-flex    { display: flex; }
.bcc-flex-col{ display: flex; flex-direction: column; }
.bcc-flex-center { display: flex; align-items: center; justify-content: center; }
.bcc-gap-1   { gap: var(--bcc-s1); }
.bcc-gap-2   { gap: var(--bcc-s2); }
.bcc-gap-3   { gap: var(--bcc-s3); }
.bcc-gap-4   { gap: var(--bcc-s4); }
.bcc-items-center { align-items: center; }
.bcc-justify-between { justify-content: space-between; }
.bcc-ml-auto { margin-left: auto; }
.bcc-mt-4    { margin-top: var(--bcc-s4); }
.bcc-mt-5    { margin-top: var(--bcc-s5); }
.bcc-mt-6    { margin-top: var(--bcc-s6); }

/* Typography utilities */
.bcc-text-xs   { font-size: var(--bcc-t-xs); }
.bcc-text-sm   { font-size: var(--bcc-t-sm); }
.bcc-text-md   { font-size: var(--bcc-t-md); }
.bcc-text-lg   { font-size: var(--bcc-t-lg); }
.bcc-text-xl   { font-size: var(--bcc-t-xl); }
.bcc-fw-500    { font-weight: 500; }
.bcc-fw-600    { font-weight: 600; }
.bcc-fw-700    { font-weight: 700; }
.bcc-ink       { color: var(--bcc-ink); }
.bcc-ink-2     { color: var(--bcc-ink-2); }
.bcc-ink-3     { color: var(--bcc-ink-3); }
.bcc-primary-color { color: var(--bcc-primary); }
.bcc-success-color { color: var(--bcc-success); }
.bcc-danger-color  { color: var(--bcc-danger); }
.bcc-warning-color { color: var(--bcc-warning); }
.bcc-truncate  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Long unbroken strings (names, emails, check-in codes) must wrap instead
   of forcing horizontal overflow on narrow screens. */
.bcc-app { overflow-wrap: break-word; }
.bcc-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* Spacing utilities */
.bcc-p-4  { padding: var(--bcc-s4); }
.bcc-p-5  { padding: var(--bcc-s5); }
.bcc-p-6  { padding: var(--bcc-s6); }
.bcc-px-4 { padding-left: var(--bcc-s4); padding-right: var(--bcc-s4); }
.bcc-py-3 { padding-top: var(--bcc-s3); padding-bottom: var(--bcc-s3); }
.bcc-hidden  { display: none !important; }
.bcc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ================================================================
   COMPONENT: PANEL / DRAWER (right-side)
================================================================ */
.bcc-drawer-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    800;
  animation:  bcc-fade-in var(--bcc-dur-2) var(--bcc-ease);
}
.bcc-drawer {
  position:   fixed;
  top:        0;
  right:      0;
  bottom:     0;
  width:      440px;
  max-width:  calc(100vw - var(--bcc-s8));
  background: var(--bcc-surface-1);
  border-left:1px solid var(--bcc-border);
  z-index:    801;
  display:    flex;
  flex-direction: column;
  box-shadow: var(--bcc-shadow-3);
  border-radius: var(--bcc-r-xl) 0 0 var(--bcc-r-xl);
  animation:  bcc-drawer-in var(--bcc-dur-3) var(--bcc-ease-out);
  padding-top:    env(safe-area-inset-top, 0px);
  padding-right:  env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left, 0px);
}
.bcc-drawer-wide { width: 640px; }
@media (max-width: 480px) {
  .bcc-drawer { width: 100vw; max-width: none; }
}
.bcc-drawer-title { font-size: var(--bcc-t-md); font-weight: 600; color: var(--bcc-ink); }
.bcc-drawer-body  { flex: 1; overflow-y: auto; padding: var(--bcc-s5); }
.bcc-drawer-foot  {
  padding:     var(--bcc-s4) var(--bcc-s5);
  border-top:  1px solid var(--bcc-border);
  display:     flex;
  gap:         var(--bcc-s2);
  flex-shrink: 0;
}

/* ================================================================
   COMPONENT: COMMAND PALETTE (⌘K)
================================================================ */
.bcc-palette-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index:    9000;
  display:    flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12vh;
  animation:  bcc-fade-in var(--bcc-dur-1) var(--bcc-ease);
}
.bcc-palette {
  background:   var(--bcc-surface-2);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-xl);
  box-shadow:   var(--bcc-shadow-3), var(--bcc-shadow-glow);
  width:        min(600px, calc(100vw - 2rem));
  overflow:     hidden;
  animation:    bcc-slide-up var(--bcc-dur-2) var(--bcc-ease-spring);
}
.bcc-palette-input {
  display:     block;
  width:       100%;
  background:  transparent;
  border:      none;
  border-bottom:1px solid var(--bcc-border);
  padding:     var(--bcc-s4) var(--bcc-s5);
  font-size:   var(--bcc-t-lg);
  color:       var(--bcc-ink);
  outline:     none;
}
.bcc-palette-input::placeholder { color: var(--bcc-ink-3); }
.bcc-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding:    var(--bcc-s2);
}
.bcc-palette-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s2) var(--bcc-s3);
  border-radius:var(--bcc-r-sm);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  cursor:      pointer;
  transition:  background var(--bcc-dur-1), color var(--bcc-dur-1);
}
.bcc-palette-item:hover,
.bcc-palette-item.bcc-active {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink);
}
.bcc-palette-item-icon {
  width: 28px; height: 28px;
  border-radius: var(--bcc-r-xs);
  background: var(--bcc-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.bcc-palette-hint {
  padding:     var(--bcc-s2) var(--bcc-s4) var(--bcc-s3);
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-muted);
  border-top:  1px solid var(--bcc-border);
  display:     flex;
  gap:         var(--bcc-s4);
}
.bcc-palette-hint kbd {
  background:   var(--bcc-surface-3);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-xs);
  padding:      1px 5px;
  font-size:    .65rem;
  font-family:  var(--bcc-font);
  color:        var(--bcc-ink-2);
}

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes bcc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bcc-slide-up {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bcc-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes bcc-spin {
  to { transform: rotate(360deg); }
}
@keyframes bcc-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
@keyframes bcc-toast-in {
  from { opacity: 0; transform: translateX(16px) scale(.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes bcc-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}
@keyframes bcc-count-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bcc-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.4); }
}

/* ================================================================
   REDUCED MOTION — neutralize transitions/animations inside .bcc-app
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .bcc-app *,
  .bcc-app *::before,
  .bcc-app *::after {
    animation-duration:        .001ms !important;
    animation-delay:           0ms    !important;
    animation-iteration-count: 1      !important;
    transition-duration:       .001ms !important;
    transition-delay:          0ms    !important;
    scroll-behavior:           auto   !important;
  }
}

/* ================================================================
   COMPONENT: LIVE INDICATOR
================================================================ */
.bcc-live-dot {
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  font-size:    var(--bcc-t-xs);
  font-weight:  600;
  color:        var(--bcc-success);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.bcc-live-dot::before {
  content:      '';
  width:        7px;
  height:       7px;
  background:   var(--bcc-success);
  border-radius:50%;
  animation:    bcc-pulse-dot 1.4s ease-in-out infinite;
  flex-shrink:  0;
}

/* ================================================================
   COMPONENT: STEP INDICATOR (onboarding / wizards)
================================================================ */
.bcc-steps {
  display:     flex;
  align-items: center;
  gap:         0;
  margin-bottom: var(--bcc-s6);
}
.bcc-step-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex:        1;
}
.bcc-step-item:last-child { flex: none; }
.bcc-step-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bcc-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  color: var(--bcc-ink-3);
  flex-shrink: 0;
  transition: all var(--bcc-dur-2);
}
.bcc-step-circle.done   { background: var(--bcc-success); border-color: var(--bcc-success); color: #fff; }
.bcc-step-circle.active { background: var(--bcc-primary); border-color: var(--bcc-primary); color: #fff; }
.bcc-step-label {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  font-weight:500;
  white-space:nowrap;
}
.bcc-step-label.active { color: var(--bcc-ink); }
.bcc-step-line {
  flex:       1;
  height:     1px;
  background: var(--bcc-border-strong);
  margin:     0 var(--bcc-s2);
}
.bcc-step-line.done { background: var(--bcc-success); }

/* ================================================================
   COMPONENT: NOTIFICATION PANEL
================================================================ */
.bcc-notif-panel {
  position:     absolute;
  top:          calc(100% + 8px);
  right:        0;
  width:        360px;
  /* Never exceed the viewport on narrow phones (FIX 5) */
  max-width:    calc(100vw - 2 * var(--bcc-s4));
  max-height:   480px;
  background:   var(--bcc-surface-1);
  border:       1px solid var(--bcc-border-strong);
  border-radius:var(--bcc-r-lg);
  box-shadow:   var(--bcc-shadow-3);
  display:      flex;
  flex-direction:column;
  overflow:     hidden;
  z-index:      600;
  animation:    bcc-slide-up var(--bcc-dur-2) var(--bcc-ease-out);
}
.bcc-notif-head {
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-bottom:1px solid var(--bcc-border);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.bcc-notif-head-title { font-size: var(--bcc-t-sm); font-weight: 600; }
.bcc-notif-list { flex: 1; overflow-y: auto; }
.bcc-notif-item {
  display:     flex;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s3) var(--bcc-s4);
  border-bottom:1px solid var(--bcc-border);
  cursor:      pointer;
  transition:  background var(--bcc-dur-1);
}
.bcc-notif-item:hover { background: var(--bcc-surface-2); }
.bcc-notif-item.unread { background: var(--bcc-primary-tint); }
.bcc-notif-item.unread:hover { background: var(--bcc-primary-soft); }
.bcc-notif-text { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); flex: 1; line-height: 1.45; }
.bcc-notif-time { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); white-space: nowrap; flex-shrink: 0; }

/* ================================================================
   THEME: MIDNIGHT (default — mirrors :root "Vibrant Community" values)
   Explicit rgb tokens keep rgba(var(--bcc-primary-rgb),a) valid here.
=============================================================== */
.bcc-app.bcc-theme-midnight {
  --bcc-primary-rgb:   123,92,255;
  --bcc-accent-rgb:    255,176,32;
  --bcc-secondary:      #2dd4bf;
  --bcc-secondary-rgb:  45,212,191;
  --bcc-secondary-soft: rgba(45,212,191,.15);
}

/* ================================================================
   THEME: SANCTUARY — luminous burgundy, parchment, vivid gold
=============================================================== */
.bcc-app.bcc-theme-sanctuary {
  --bcc-primary:        #b0244c;   /* vivid burgundy */
  --bcc-primary-hover:  #971a3e;
  --bcc-primary-soft:   rgba(176,36,76,.15);
  --bcc-primary-tint:   rgba(176,36,76,.09);
  --bcc-primary-rgb:    176,36,76;
  --bcc-accent:         #e0a020;   /* vivid gold */
  --bcc-accent-hover:   #c98a12;
  --bcc-accent-soft:    rgba(224,160,32,.15);
  --bcc-accent-rgb:     224,160,32;

  --bcc-bg:             #f7f0e4;   /* warm parchment */
  --bcc-surface-1:      #fffaf1;   /* cream card */
  --bcc-surface-2:      #f0e7d6;   /* nested card */
  --bcc-surface-3:      #e8dcc8;   /* hover/input */
  --bcc-surface-4:      #dccdb3;   /* dividers */

  --bcc-border:         #e0d3bc;
  --bcc-border-soft:    #efe4d2;
  --bcc-border-strong:  #cbb896;

  --bcc-ink:            #2a1614;   /* warm dark brown text */
  --bcc-ink-2:          #5a3a30;
  --bcc-ink-3:          #8a6a58;
  --bcc-ink-muted:      #b39a86;

  --bcc-sidebar-bg:     #2a1614;   /* dark warm walnut */

  --bcc-shadow-1:       0 1px 3px rgba(42,22,20,.15),  0 1px 2px rgba(42,22,20,.10);
  --bcc-shadow-2:       0 4px 16px rgba(42,22,20,.18), 0 2px 6px rgba(42,22,20,.12);
  --bcc-shadow-3:       0 12px 40px rgba(42,22,20,.22), 0 4px 14px rgba(42,22,20,.15);
  --bcc-shadow-glow:    0 0 26px rgba(176,36,76,.20);

  --bcc-focus:          0 0 0 2px #fffaf1, 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.22);
}

/* ================================================================
   THEME: MORNING LIGHT — bright sky, near-white surfaces, vivid amber
=============================================================== */
.bcc-app.bcc-theme-morning-light {
  --bcc-primary:        #0ea5e9;   /* vivid sky-500 */
  --bcc-primary-hover:  #0284c7;   /* sky-600 */
  --bcc-primary-soft:   rgba(14,165,233,.14);
  --bcc-primary-tint:   rgba(14,165,233,.08);
  --bcc-primary-rgb:    14,165,233;
  --bcc-accent:         #ffb020;   /* vivid amber */
  --bcc-accent-hover:   #f5a014;
  --bcc-accent-soft:    rgba(255,176,32,.14);
  --bcc-accent-rgb:     255,176,32;

  --bcc-bg:             #f5f9fd;   /* near-white with a sky tint */
  --bcc-surface-1:      #ffffff;
  --bcc-surface-2:      #eef4fb;
  --bcc-surface-3:      #e4edf7;
  --bcc-surface-4:      #d7e3f0;

  --bcc-border:         #dbe7f3;
  --bcc-border-soft:    #eaf2fa;
  --bcc-border-strong:  #c2d5e8;

  --bcc-ink:            #0b1727;   /* deep slate */
  --bcc-ink-2:          #2c4058;
  --bcc-ink-3:          #5b7189;
  --bcc-ink-muted:      #90a4ba;

  --bcc-sidebar-bg:     #f5f9fd;   /* matches bg — uses border to delineate */

  --bcc-shadow-1:       0 1px 3px rgba(11,23,39,.08),  0 1px 2px rgba(11,23,39,.05);
  --bcc-shadow-2:       0 4px 16px rgba(11,23,39,.10), 0 2px 6px rgba(11,23,39,.07);
  --bcc-shadow-3:       0 12px 40px rgba(11,23,39,.13), 0 4px 14px rgba(11,23,39,.09);
  --bcc-shadow-glow:    0 0 26px rgba(14,165,233,.18);

  --bcc-focus:          0 0 0 2px #ffffff, 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.22);
}

/* ================================================================
   THEME: REVIVAL — warm charcoal, vivid coral primary, amber accent
=============================================================== */
.bcc-app.bcc-theme-revival {
  --bcc-primary:        #ff6b3d;   /* vivid coral */
  --bcc-primary-hover:  #f0501f;
  --bcc-primary-soft:   rgba(255,107,61,.16);
  --bcc-primary-tint:   rgba(255,107,61,.09);
  --bcc-primary-rgb:    255,107,61;
  --bcc-accent:         #ffb020;   /* vivid amber */
  --bcc-accent-hover:   #f5a014;
  --bcc-accent-soft:    rgba(255,176,32,.15);
  --bcc-accent-rgb:     255,176,32;

  --bcc-bg:             #121110;   /* warm near-black */
  --bcc-surface-1:      #1c1a18;
  --bcc-surface-2:      #262320;
  --bcc-surface-3:      #302c28;
  --bcc-surface-4:      #3b3631;

  --bcc-border:         #2c2823;
  --bcc-border-soft:    #38332c;
  --bcc-border-strong:  #4a443b;

  --bcc-ink:            #f7f5f2;
  --bcc-ink-2:          #b8b1a7;
  --bcc-ink-3:          #8c847a;
  --bcc-ink-muted:      #5c554c;

  --bcc-sidebar-bg:     #1c1a18;   /* matches surface-1 */

  --bcc-shadow-1:       0 1px 3px rgba(12,8,4,.7),  0 1px 2px rgba(12,8,4,.5);
  --bcc-shadow-2:       0 4px 16px rgba(12,8,4,.8),  0 2px 6px rgba(12,8,4,.6);
  --bcc-shadow-3:       0 12px 40px rgba(12,8,4,.9), 0 4px 14px rgba(12,8,4,.7);
  --bcc-shadow-glow:    0 0 26px rgba(255,107,61,.26);

  --bcc-focus:          0 0 0 2px #121110, 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.30);
}

/* ================================================================
   THEME: GARDEN — off-white surfaces, vivid sage, earthy amber-brown
=============================================================== */
.bcc-app.bcc-theme-garden {
  --bcc-primary:        #34a06b;   /* vivid sage-emerald */
  --bcc-primary-hover:  #268557;
  --bcc-primary-soft:   rgba(52,160,107,.15);
  --bcc-primary-tint:   rgba(52,160,107,.09);
  --bcc-primary-rgb:    52,160,107;
  --bcc-accent:         #c07830;   /* earthy amber-brown */
  --bcc-accent-hover:   #a56228;
  --bcc-accent-soft:    rgba(192,120,62,.15);
  --bcc-accent-rgb:     192,120,62;

  --bcc-bg:             #f5f8f1;   /* natural off-white */
  --bcc-surface-1:      #fdfef9;   /* very light green-white */
  --bcc-surface-2:      #edf2e4;
  --bcc-surface-3:      #e3ead8;
  --bcc-surface-4:      #d6dfc7;

  --bcc-border:         #d9e0cc;
  --bcc-border-soft:    #e8eedd;
  --bcc-border-strong:  #c3ccb1;

  --bcc-ink:            #16271a;   /* very dark green-black */
  --bcc-ink-2:          #37503d;
  --bcc-ink-3:          #66856d;
  --bcc-ink-muted:      #9db3a1;

  --bcc-sidebar-bg:     #16271a;   /* deep forest sidebar */

  --bcc-shadow-1:       0 1px 3px rgba(22,39,26,.12),  0 1px 2px rgba(22,39,26,.08);
  --bcc-shadow-2:       0 4px 16px rgba(22,39,26,.15), 0 2px 6px rgba(22,39,26,.10);
  --bcc-shadow-3:       0 12px 40px rgba(22,39,26,.18), 0 4px 14px rgba(22,39,26,.12);
  --bcc-shadow-glow:    0 0 26px rgba(52,160,107,.20);

  --bcc-focus:          0 0 0 2px #fdfef9, 0 0 0 4px var(--bcc-primary), 0 0 0 6px rgba(var(--bcc-primary-rgb),.22);
}

/* Sidebar ink overrides for light-sidebar themes */
.bcc-app.bcc-theme-morning-light #bcc-sidebar,
.bcc-app.bcc-theme-morning-light .adm-sidebar {
  border-right: 1px solid var(--bcc-border);
}

.bcc-app.bcc-theme-morning-light .bcc-nav-item,
.bcc-app.bcc-theme-morning-light .adm-nav-item,
.bcc-app.bcc-theme-morning-light .bcc-sidebar-church span,
.bcc-app.bcc-theme-morning-light .bcc-nav-label,
.bcc-app.bcc-theme-morning-light .adm-nav-label {
  color: var(--bcc-ink-2);
}

.bcc-app.bcc-theme-morning-light .bcc-nav-item:hover,
.bcc-app.bcc-theme-morning-light .adm-nav-item:hover {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink);
}

/* ================================================================
   NEW BASE CLASSES — referenced by JS, previously unstyled
   (do not rename existing classes; these are additive aliases)
=============================================================== */

/* `.bcc-modal-header` — emitted by core.js (`.bcc-modal-head` removed:
   unreferenced exact duplicate of this rule) */
.bcc-modal-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     var(--bcc-s4) var(--bcc-s5);
  border-bottom:1px solid var(--bcc-border);
  flex-shrink: 0;
}

/* `.bcc-drawer-header` — emitted by core.js (`.bcc-drawer-head` removed:
   unreferenced exact duplicate of this rule) */
.bcc-drawer-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     var(--bcc-s4) var(--bcc-s5);
  border-bottom:1px solid var(--bcc-border);
  flex-shrink: 0;
}

/* `.bcc-form-group` — used by directory.js pray modal */
.bcc-form-group { margin-bottom: var(--bcc-s4); }

/* `.bcc-form-error` — used by giving.js */
.bcc-form-error {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-danger);
  margin-top: var(--bcc-s1);
}

/* `.bcc-modal-primary-btn` — subtle emphasis for a modal primary action
   (used by profile.js); modifier that inherits `.bcc-btn` */
.bcc-modal-primary-btn {
  background:  linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:       #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow:  0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
}
.bcc-modal-primary-btn:hover {
  filter:    brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.32), 0 0 20px rgba(var(--bcc-primary-rgb),.45);
}
.bcc-modal-primary-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.30); }

/* ================================================================
   COMPONENT: ICONS — inline-SVG icon system
   (symbols carry fill:none;stroke:currentColor; wrapper sizes/colors)
=============================================================== */
.bcc-icon { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.16em; flex-shrink:0; color:inherit; }
.bcc-icon-sm { width:.95em; height:.95em; }
.bcc-icon-lg { width:1.5em; height:1.5em; }

/* ================================================================
   MOBILE TOUCH / SIZE FIXES — member content + shared overlays.
   The admin console body is ALSO `.bcc-app`, so content rules are
   scoped to the member `<main id="bcc-main">` (admin uses #adm-main).
   Overlays (drawer/modal) are appended to <body> and shared, so they
   are scoped by component class.
   ================================================================ */
@media (max-width: 767px) {
  /* ── Member content (`.bcc-app` body also hosts #bcc-main) ── */
  #bcc-main .bcc-btn-sm { min-height: 44px; height: auto; padding-inline: var(--bcc-s4); }
  #bcc-main .bcc-btn-icon { min-width: 44px; min-height: 44px; }
  #bcc-main .bcc-input,
  #bcc-main .bcc-textarea,
  #bcc-main .bcc-select { font-size: 16px; }   /* prevent iOS focus zoom */
  #bcc-main .bcc-searchbar input { font-size: 16px; height: 48px; }
  #bcc-main { -webkit-tap-highlight-color: transparent; }

  /* ── Admin console content (#adm-main) — same treatment ── */
  #adm-main .bcc-btn-sm { min-height: 44px; height: auto; padding-inline: var(--bcc-s4); }
  #adm-main .bcc-btn-icon { min-width: 44px; min-height: 44px; }
  /* Regular 38px .bcc-btn also gets a 44px target; leave the
     intentionally-small .bcc-btn-xs and the larger .bcc-btn-lg alone. */
  #adm-main .bcc-btn:not(.bcc-btn-xs):not(.bcc-btn-sm):not(.bcc-btn-lg):not(.bcc-btn-icon) {
    min-height: 44px;
    height: auto;
  }
  #adm-main .bcc-searchbar input { font-size: 16px; height: 48px; }
  #adm-main { -webkit-tap-highlight-color: transparent; }

  /* ── iOS focus-zoom guard for the whole app (member + admin) ──
     Bare-element fallback catches controls that carry no `.bcc-input`
     class (AI composer, bulletin editor, filters, time pickers). */
  .bcc-app input,
  .bcc-app select,
  .bcc-app textarea,
  .bcc-app .bcc-input,
  .bcc-app .bcc-textarea,
  .bcc-app .bcc-select { font-size: 16px; }
  #adm-main .com-editor-area,
  #adm-main .com-bulletin-editor { font-size: 16px; }

  /* ── Shared overlays (appended to <body>): 44px icon targets + 16px inputs ── */
  .bcc-drawer .bcc-btn-icon,
  .bcc-modal .bcc-btn-icon,
  .bcc-notif-pref-modal .bcc-btn-icon { min-width: 44px; min-height: 44px; }

  /* ── Modal footer actions — the overlay is appended to <body>, so the
     #adm-main / #bcc-main 44px rules never reach these buttons; give
     footer actions a 44px tap target and stack them full-width ── */
  .bcc-modal .bcc-modal-foot { flex-wrap: wrap; }
  .bcc-modal .bcc-modal-foot > .bcc-btn {
    flex: 1 1 100%;
    min-height: 44px;
    height: auto;
    padding-inline: var(--bcc-s4);
  }
  .bcc-drawer input,
  .bcc-drawer select,
  .bcc-drawer textarea,
  .bcc-modal input,
  .bcc-modal select,
  .bcc-modal textarea,
  .bcc-notif-pref-modal input,
  .bcc-notif-pref-modal select,
  .bcc-notif-pref-modal textarea { font-size: 16px; }
}

/* ================================================================
   COARSE-POINTER (TOUCH) TARGETS — phones AND tablets.
   The max-width:767px block above only covers phones, so the 44px
   remediation regressed on touch tablets (768-1024). This block
   raises the same controls on ANY coarse pointer. Sizes only —
   no color or layout changes.
   ================================================================ */
@media (pointer: coarse) {
  /* ── Shared interactive controls (were 28-40px) ── */
  .bcc-btn-icon  { min-width: 44px; min-height: 44px; }
  .bcc-modal-close { min-width: 44px; min-height: 44px; }
  .bcc-pill      { min-height: 44px; height: auto; }
  .bcc-tab       { min-height: 44px; height: auto; }
  .bcc-searchbar input { min-height: 44px; height: auto; }

  /* ── Checkbox / radio: the 16px control keeps its size; the row
     and the input's own box reach 44px so the tap target is 44px
     without enlarging (or reflowing) the drawn control. ── */
  .bcc-check-row { min-height: 44px; }
  .bcc-check-row input[type="checkbox"],
  .bcc-check-row input[type="radio"] {
    box-sizing: content-box;
    padding: 14px;
  }

  /* ── iOS focus-zoom guard: 16px controls on coarse pointers.
     Heights stay unchanged. ── */
  .bcc-input,
  .bcc-textarea,
  .bcc-select,
  .bcc-searchbar input { font-size: 16px; }

  /* ── Admin console content buttons — regular 38px .bcc-btn gets a
     44px target; leave the intentionally-small .bcc-btn-xs and the
     larger .bcc-btn-lg untouched. ── */
  #adm-main .bcc-btn:not(.bcc-btn-xs):not(.bcc-btn-sm):not(.bcc-btn-lg):not(.bcc-btn-icon) {
    min-height: 44px;
    height: auto;
  }
}