/* ===== THEME VARIABLES ===== */
:root, [data-theme="dark"] {
    --bg: #0a0a0a;
    --surface: #0e0e10;
    --surface-2: #1a1a1c;
    --surface-3: #15151a;
    --text: #ffffff;
    --text-muted: #888888;
    --text-faint: #555555;
    --border: #1f1f22;
    --border-faint: #1a1a1c;
    --accent: #cc0000;
    --accent-hover: #990000;
    --shadow: 0 12px 32px rgba(0,0,0,0.6);
    --highlight: #15151a;
}

[data-theme="light"] {
    --bg: #ede8dc;
    --surface: #fefdf9;
    --surface-2: #f5f1ea;
    --surface-3: #f9f5e8;
    --text: #1a1a1a;
    --text-muted: #888888;
    --text-faint: #aaaaaa;
    --border: #e5dfd0;
    --border-faint: #f0ead9;
    --accent: #cc0000;
    --accent-hover: #990000;
    --shadow: 0 12px 32px rgba(0,0,0,0.18);
    --highlight: #f9f5e8;
}

/* ===== READING SIZE (Reading Mode toggle) =====
   --text-scale is a multiplier applied to content-text font-sizes app-wide via
   calc(<base>px * var(--text-scale)). Chrome (topbar, tab-bar, drawer, button
   labels, micro-eyebrows) keeps its own fixed sizes so the layout doesn't move.
   --read-size is the absolute body-text size used by .event-detail .about .body
   (the upstream HTML description) where calc-multiplication doesn't fit. */
:root, [data-text-size="default"] {
    --text-scale: 1.0;
    --read-size: 15px;
    --read-line: 1.6;
}
[data-text-size="comfort"] {
    --text-scale: 1.13;
    --read-size: 17px;
    --read-line: 1.7;
}
[data-text-size="large"] {
    --text-scale: 1.33;
    --read-size: 20px;
    --read-line: 1.75;
}

/* ===== RESET + GLOBALS ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }

/* ===== LAYOUT WRAPPER =====
   padding-bottom reserves space so content scrolls past the fixed mobile
   tab bar without being hidden by it. Reset on desktop where tab bar moves
   to top via order:-1. */
.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    max-width: 480px;
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
@media (min-width: 800px) {
    .app { padding-bottom: 0; }
}
@media (min-width: 800px) {
    .app {
        max-width: 1024px;
        border: none;
    }
}

/* ===== TOP BAR ===== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
}
.topbar .brand-eyebrow {
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}
.topbar .brand-name {
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.3px;
}
.topbar .gear {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    font-size: 18px;
}

/* ===== FEATURED CARD ===== */
.featured {
    margin: 16px 18px;
    background: linear-gradient(135deg, var(--surface-2), var(--bg));
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: inherit;
}
.featured::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at top right, rgba(204,0,0,0.4), transparent 70%);
}
.featured .thumb {
    width: 60px; height: 80px;
    flex-shrink: 0;
    border: 1.5px solid #1a1a1a;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
}
.featured h2 {
    font-size: calc(18px * var(--text-scale));
    font-weight: 300;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.featured .year { font-size: 10px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.featured .meta { font-size: calc(10px * var(--text-scale)); color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }
.featured .cta { font-size: 11px; color: var(--accent); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-top: 10px; display: block; }

/* ===== EVENT LIST (home upcoming) ===== */
.section-label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 18px 8px;
}
.event-list-row {
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-faint);
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}
.event-list-row:last-child { border-bottom: 0; }
.event-list-row .icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-weight: 700;
    font-size: 11px;
}
.event-list-row .body { flex: 1; min-width: 0; }
.event-list-row .body .name { font-size: calc(15px * var(--text-scale)); font-weight: 600; }
.event-list-row .body .meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
.event-list-row .chev { font-size: 16px; color: var(--text-faint); }
.event-list-row.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.event-list-row.locked .icon { filter: grayscale(60%); }
.event-list-row.locked .lock { font-size: 14px; color: var(--text-faint); }

/* ===== POSTER BANNER (event-internal) ===== */
.poster-banner {
    display: flex;
    justify-content: center;
    padding: 24px 0 16px;
}
.poster-banner img {
    width: 32%;
    max-width: 150px;
    height: auto;
    background: #faf7f0;
    padding: 8px;
    border: 3px solid #1a1a1a;
    border-radius: 2px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

/* ===== EVENT TITLE STRIP (under banner) ===== */
.event-title-strip {
    text-align: center;
    padding: 0 18px 12px;
    border-bottom: 1px solid var(--border);
}
.event-title-strip .year { font-size: 11px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.event-title-strip .name { font-size: calc(20px * var(--text-scale)); font-weight: 500; letter-spacing: -0.3px; }
.event-title-strip .meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }

/* ===== DAY LIST ===== */
.day-list { padding: 12px 18px; }
.day-card {
    background: var(--surface-2);
    padding: 14px 16px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: inherit;
}
.day-card.active { border-left: 3px solid var(--accent); padding-left: 13px; }
.day-card .label .name { font-size: calc(16px * var(--text-scale)); font-weight: 600; }
.day-card .label .meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); letter-spacing: 0.5px; margin-top: 2px; }
.day-card .count { font-size: calc(14px * var(--text-scale)); font-weight: 700; color: var(--text-muted); }
.day-card.active .count { color: var(--accent); }

/* ===== EVENT ROW (in day grid) ===== */
.event-row {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-faint);
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
}
.event-row.highlighted { background: var(--highlight); }
.event-row .logo {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}
.event-row .logo.empty { visibility: hidden; }
[data-theme="dark"] .event-row .logo.framed { background-color: white; padding: 4px; }
.event-row .body { flex: 1; min-width: 0; }
.event-row .top { display: flex; justify-content: space-between; align-items: baseline; }
.event-row .time { font-size: calc(14px * var(--text-scale)); font-weight: 700; color: var(--accent); letter-spacing: 1px; }
.event-row .name { font-size: calc(12px * var(--text-scale)); font-weight: 500; margin-top: 2px; }
.event-row .venue { font-size: calc(10px * var(--text-scale)); color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 1px; }
.event-row .event-poster {
    width: 40px;
    height: auto;
    flex-shrink: 0;
    background: #faf7f0;
    padding: 3px;
    border: 1.5px solid #1a1a1a;
    border-radius: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

/* ===== EVENT DETAIL ===== */
.event-detail h1 {
    padding: 12px 18px 14px;
    border-bottom: 1px solid var(--border);
    font-size: calc(18px * var(--text-scale));
    font-weight: 300;
    letter-spacing: -0.3px;
}
.event-detail .meta-eyebrow { font-size: calc(10px * var(--text-scale)); color: var(--accent); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 12px 18px 0; }
.event-detail .time-venue {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.event-detail .time-venue .label { font-size: 9px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.event-detail .time-venue .value { font-size: calc(14px * var(--text-scale)); font-weight: 700; color: var(--accent); margin-top: 2px; letter-spacing: 1px; }
.event-detail .time-venue .venue-name { font-size: calc(12px * var(--text-scale)); font-weight: 500; color: var(--text); margin-top: 2px; text-align: right; }
.event-detail .subtitle-strip {
    margin: 12px 18px;
    background: rgba(204,0,0,0.08);
    border-left: 3px solid var(--accent);
    padding: 8px 10px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    font-style: italic;
}
.event-detail .about {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.event-detail .about .label { font-size: 10px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
/* The body itself owns Reading Size. !important so an inline style on the body
   tag (rare but possible) can't beat the user's preference. */
.event-detail .about .body {
    font-size: var(--read-size) !important;
    color: var(--text);
    line-height: var(--read-line) !important;
}
/* Descendants inherit. !important is the only stylesheet mechanism that beats
   inline style="font-size: 18pt..." baked into upstream Word-paste markup. */
.event-detail .about .body * {
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
    line-height: inherit !important;
}
.read-body { font-size: var(--read-size); color: var(--text); line-height: var(--read-line); }
.event-detail .actions {
    padding: 14px 18px;
    display: flex;
    gap: 8px;
}
.event-detail .actions a {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
}
.event-detail .actions a.primary { background: var(--accent); color: white; }
.event-detail .actions a.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* ===== TAB BAR (responsive: bottom mobile, top desktop) =====
   Mobile uses position:fixed instead of sticky because iOS Safari (especially
   in PWA standalone mode) has known bugs where position:sticky misbehaves
   inside display:flex containers — Chromium-based browsers handle it fine,
   so the bug is invisible in Playwright but real on iPhone. */
.tab-bar {
    border-top: 1px solid var(--border);
    background: var(--bg);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 50;
}
.tab-bar .tab { text-align: center; color: var(--text-muted); padding: 4px 0; }
.tab-bar .tab.active { color: var(--accent); }
.tab-bar .tab .icon { font-size: 16px; line-height: 1; }
.tab-bar .tab .label { font-size: 9px; letter-spacing: 0.5px; margin-top: 3px; font-weight: 600; text-transform: uppercase; }

@media (min-width: 800px) {
    .tab-bar {
        order: -1;
        position: sticky;
        top: 0;
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
        padding: 8px 0;
        border-top: 0;
        border-bottom: 1px solid var(--border);
    }
}

/* ===== SETTINGS DRAWER ===== */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 100;
}
.drawer-backdrop.open { display: block; }
.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 200ms ease;
    padding: 20px;
}
.drawer.open { transform: translateX(0); }
.drawer h3 { font-size: 11px; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.drawer .theme-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 24px; }
.drawer .theme-options button {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px; padding: 10px 6px;
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.drawer .theme-options button.active { border-color: var(--accent); color: var(--accent); }
.drawer .text-size-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 24px; }
.drawer .text-size-options button {
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px 6px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
}
.drawer .text-size-options button.active { border-color: var(--accent); color: var(--accent); }
.drawer .text-size-options button[data-text-size="default"] { font-size: 14px; }
.drawer .text-size-options button[data-text-size="comfort"] { font-size: 18px; }
.drawer .text-size-options button[data-text-size="large"] { font-size: 22px; }
.drawer .drawer-cms-link {
    display: block;
    padding: 10px 12px;
    margin-bottom: 24px;
    background: var(--surface-2, rgba(255,255,255,0.05));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.drawer .drawer-cms-link:hover { border-color: var(--accent); color: var(--accent); }
/* Stealth admin login link: looks identical to the surrounding version-number text.
   Public users see a version number; admins are told once to tap it for /cms/login.cfm. */
.drawer .drawer-version-link {
    color: inherit;
    text-decoration: none;
    cursor: text;
}

/* ===== UTILITY ===== */
.back-link { font-size: 13px; color: var(--text-muted); padding: 8px 18px 4px; display: block; }

/* ===== PULL-TO-REFRESH INDICATOR ===== */
.pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    width: 42px; height: 42px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.pull-refresh-indicator.armed {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.pull-refresh-indicator.refreshing .arrow {
    display: none;
}
.pull-refresh-indicator.refreshing::after {
    content: '';
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: pull-spin 0.6s linear infinite;
}
@keyframes pull-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   CMS — Phase 1B
   Auth pages (login/2fa/enroll), dashboard, admin management.
   Matches the public viewer's theme variables (light/dark).
   ============================================================ */

.cms-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}
.cms-topbar a { color: var(--text-muted); }
.cms-topbar a:hover { color: var(--text); }
.cms-topbar form button,
.cms-topbar button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 4px;
    transition: border-color 0.15s, color 0.15s;
}
.cms-topbar form button:hover { color: var(--text); border-color: var(--text-muted); }
.cms-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cms-dashboard,
.cms-admins,
.cms-auth {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 18px 80px;
}
.cms-auth { max-width: 420px; }

.cms-dashboard h1,
.cms-admins h1,
.cms-auth h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}
.cms-admins h2,
.cms-enroll h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 28px 0 10px;
}
.cms-dashboard p { color: var(--text-muted); margin: 0 0 18px; }
.cms-auth p.hint { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }
.cms-auth p.hint.warn { color: var(--accent); }

/* Quick-link list on the dashboard */
.cms-quick-links {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}
.cms-quick-links li { margin: 0 0 10px; }
.cms-quick-links a {
    display: block;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s;
}
.cms-quick-links a:hover {
    border-color: var(--accent);
    background: var(--surface-3);
    color: var(--text);
}

/* Form inputs in CMS context */
.cms-auth label,
.cms-enroll label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 14px 0 6px;
}
.cms-auth label.checkbox,
.cms-enroll label.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 14px;
}
.cms-auth input[type="email"],
.cms-auth input[type="password"],
.cms-auth input[type="text"],
.cms-enroll input[type="text"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.cms-auth input:focus,
.cms-enroll input:focus {
    outline: none;
    border-color: var(--accent);
}
.cms-auth button[type="submit"],
.cms-enroll button[type="submit"] {
    margin-top: 18px;
    width: 100%;
    padding: 12px 16px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.15s;
}
.cms-auth button[type="submit"]:hover,
.cms-enroll button[type="submit"]:hover { background: var(--accent-hover); }
.cms-auth p.error {
    background: rgba(204, 0, 0, 0.08);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin: 0 0 14px;
}

/* Enrollment-specific: QR + secret + backup codes */
.cms-enroll ol {
    color: var(--text-muted);
    font-size: 13px;
    padding-left: 20px;
    margin: 0 0 18px;
    line-height: 1.6;
}
.cms-enroll #qrcode {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    margin: 0 0 14px;
}
.cms-enroll #qrcode canvas { display: block; }
.cms-enroll p.secret {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 0 0 24px;
}
.cms-enroll p.secret code {
    display: inline-block;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 1px;
    margin-left: 6px;
}
.backup-codes {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.backup-codes li {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}
.backup-codes code {
    font-family: Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--text);
}

/* Admin search results + list */
.admin-search input[type="search"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 12px;
}
.admin-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}
#member-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}
#member-search-results li {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
#member-search-results li strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
#member-search-results li small {
    color: var(--text-muted);
    font-size: 12px;
    flex-basis: 100%;
    margin-top: -2px;
}
#member-search-results li form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
    margin-top: 6px;
}
#member-search-results li form label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
#member-search-results li form input[type="text"] {
    flex: 1;
    min-width: 140px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}
#member-search-results li form button {
    padding: 7px 14px;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#member-search-results li form button:hover { background: var(--accent-hover); }

.admin-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}
.admin-list th {
    text-align: left;
    padding: 10px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.admin-list td {
    padding: 12px;
    border-bottom: 1px solid var(--border-faint);
    color: var(--text);
    vertical-align: middle;
}
.admin-list td.notes {
    color: var(--text-muted);
    font-size: 12px;
}
.admin-list form {
    display: inline-block;
    margin-right: 6px;
}
.admin-list button {
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color 0.15s, color 0.15s;
}
.admin-list button:hover { color: var(--text); border-color: var(--text-muted); }
.admin-list button.danger {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.admin-list button.danger:hover { background: var(--accent); color: #fff; }

/* ── Flash bar (set by handlers via cookie pcaes_flash, rendered once by includes/flash.cfm).
   Translucent backgrounds work on both light and dark themes — the app uses
   [data-theme="dark"]/[data-theme="light"] attribute toggling, not the OS-level
   prefers-color-scheme media query, so we don't gate styles on system dark mode. ── */
.flash-bar {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}
.flash-success { background: rgba(34, 197, 94, 0.15);  color: #4ade80; border-color: rgba(34, 197, 94, 0.4); }
.flash-error   { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
.flash-info    { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
[data-theme="light"] .flash-success { color: #166534; }
[data-theme="light"] .flash-error   { color: #991b1b; }
[data-theme="light"] .flash-info    { color: #1e40af; }

/* ── Edit pencil affordance on public viewer (admins only) ── */
.cms-edit-pencil {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 14px;
    text-decoration: none;
    opacity: 0.55;
    border-radius: 4px;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.cms-edit-pencil:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
    .cms-edit-pencil:hover { background-color: rgba(255,255,255,0.10); }
}

/* ── CMS data tables (venues, announcements lists) ── */
.cms-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 14px;
}
.cms-table th, .cms-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    text-align: left;
}
.cms-table th { font-weight: 600; background: rgba(0,0,0,0.03); }
.cms-table .row-hidden { opacity: 0.55; }
/* Override the body-level a { color: var(--accent) } — accent is red, which
   doesn't read as a clickable link in the CMS context. Match the .link-button
   blue used by the Hide actions for consistency. */
.cms-table a:not(.cms-button):not(.cms-tile) { color: #2563eb; }
.cms-table a:not(.cms-button):not(.cms-tile):hover { color: #1d4ed8; }

.cms-button {
    display: inline-block;
    padding: 6px 12px;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.cms-button:hover { background: #1d4ed8; }
.cms-button.secondary { background: #6b7280; }
.cms-button.secondary:hover { background: #4b5563; }
.cms-button.danger { background: #dc2626; }
.cms-button.danger:hover { background: #b91c1c; }

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    font-family: inherit;
}

/* ── CMS forms ── */
.cms-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
    margin-top: 16px;
}
.cms-form label,
.cms-form .cms-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
}
/* Use .cms-form-field (a <div>) instead of <label> when the field wraps a
   trix-editor. iOS Safari routes taps inside <label> to the label's implicit
   form target, which makes tapping into the contenteditable region fail —
   only the toolbar buttons would respond. <div> + same flex styling keeps
   the layout identical without the focus-trap. */
.cms-form label.cms-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}
.cms-form input[type="text"],
.cms-form input[type="time"],
.cms-form input[type="datetime-local"],
.cms-form select,
.cms-form textarea {
    padding: 8px 10px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
.cms-form textarea { min-height: 120px; resize: vertical; }
.cms-form-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
}
.cms-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* Trix editor (rich-text WYSIWYG) integration with the CMS dark theme. */
.cms-form trix-editor {
    background: var(--surface, #ffffff);
    color: var(--text, inherit);
    min-height: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 0 0 6px 6px;
    border-top: none;
    font-size: 14px;
    line-height: 1.45;
}
.cms-form trix-toolbar {
    background: var(--surface-2, rgba(255,255,255,0.05));
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    padding: 4px;
}
/* Trix's toolbar icons are SVG backgrounds with hardcoded dark fills.
   Invert them so they're visible against the dark CMS theme. */
.cms-form trix-toolbar .trix-button-group .trix-button::before {
    filter: invert(1);
    opacity: 0.85;
}
.cms-form trix-toolbar .trix-button-group .trix-button:hover::before {
    opacity: 1;
}
.cms-form trix-toolbar .trix-button-group .trix-button.trix-active {
    background: rgba(255,255,255,0.12);
}
.cms-form trix-toolbar .trix-button-group {
    border-color: var(--border, #d1d5db);
}
.cms-form trix-toolbar .trix-button {
    border-color: var(--border, #d1d5db);
    color: inherit;
}

/* Drag-and-drop day ordering page (Sortable.js) */
.day-order-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}
.day-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: var(--surface, #1a1a1a);
    border: 1px solid var(--border, #444);
    border-radius: 6px;
    cursor: default;
    user-select: none;
}
.day-order-item .drag-handle {
    cursor: grab;
    font-size: 18px;
    color: var(--muted, #9ca3af);
    padding: 0 6px;
}
.day-order-item .drag-handle:active { cursor: grabbing; }
.day-order-item .time {
    font-weight: 700;
    min-width: 80px;
    color: var(--accent, #dc2626);
    font-size: 13px;
}
.day-order-item .name {
    flex: 1;
    font-size: 14px;
}
.day-order-item .badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.day-order-item .badge-pca_parade { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.day-order-item .badge-cms        { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.day-order-item.sortable-ghost {
    opacity: 0.4;
    background: rgba(37, 99, 235, 0.15);
}
.cms-form trix-editor h1,
.cms-form trix-editor h2,
.cms-form trix-editor h3 { margin: 12px 0 8px; }
.cms-form trix-editor p  { margin: 0 0 8px; }

/* ── Status badges (announcements list) ── */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-live      { background: #d1fae5; color: #065f46; }
.status-scheduled { background: #dbeafe; color: #1e40af; }
.status-expired   { background: #f3f4f6; color: #374151; }
.status-hidden    { background: #fee2e2; color: #991b1b; }

/* ── Event-row pencil + hide-button positioning (admin overlay on public viewer)
   Backdrop pills removed — they read as ugly grey shapes on the cream theme
   and aren't needed for legibility (emoji + bold red ×). Spacing widened so
   the two affordances don't crowd each other. ── */
.event-row-wrap {
    position: relative;
}
.event-row-wrap .cms-edit-pencil {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    margin-left: 0;
}
.event-row-wrap .cms-hide-form {
    position: absolute;
    top: 8px;
    right: 48px;
    z-index: 2;
    margin: 0;
}
.event-row-wrap .cms-hide-btn {
    background: transparent;
    border: none;
    color: #991b1b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.event-row-wrap .cms-hide-btn:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.12);
}
@media (prefers-color-scheme: dark) {
    .event-row-wrap .cms-hide-btn { color: #fca5a5; }
    .event-row-wrap .cms-hide-btn:hover { background: rgba(252, 165, 165, 0.12); }
}

/* ── Dashboard tiles ── */
.cms-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.cms-tile {
    display: block;
    padding: 18px 16px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: transform 120ms ease, border-color 120ms ease;
}
.cms-tile:hover {
    transform: translateY(-2px);
    border-color: #2563eb;
}
.cms-tile h2 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}
.cms-tile p {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #6b7280);
}
.cms-tile-master {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}
@media (prefers-color-scheme: dark) {
    .cms-tile-master {
        background: linear-gradient(135deg, #78350f, #92400e);
    }
}

/* ── Push Notifications: iOS-style toggle (gear-drawer master switch) ── */
.push-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.push-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    background: var(--surface-2, #e5e7eb);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 16px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 200ms ease, border-color 200ms ease;
}
.push-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    background: var(--text, #111);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 200ms ease, background 200ms ease;
}
.push-toggle.on {
    background: var(--accent, #cc0000);
    border-color: var(--accent, #cc0000);
}
.push-toggle.on::after {
    transform: translateX(20px);
    background: #fff;
}
.push-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.push-label {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted, #6b7280);
}

/* ── Per-event push bell (event-detail page) ── */
.event-bell-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 14px;
}
.event-bell {
    background: transparent;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text, #111);
    padding: 0;
    flex-shrink: 0;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.event-bell:hover { background: rgba(0, 0, 0, 0.05); }
.event-bell.on {
    background: var(--accent, #cc0000);
    border-color: var(--accent, #cc0000);
    color: #fff;
}
.event-bell:disabled,
.event-bell.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.event-bell-label {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}
.event-bell-explainer {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted, #6b7280);
    max-width: 280px;
}
@media (prefers-color-scheme: dark) {
    .event-bell:hover { background: rgba(255, 255, 255, 0.08); }
}

/* ── Stats dashboard ─────────────────────────────────── */
.cms-stats { padding: 16px; max-width: 1100px; margin: 0 auto; }
.stats-header h1 { margin: 0; font-size: 22px; }
.stats-meta { font-size: 12px; color: var(--text-muted, #888); margin: 4px 0 16px; }
.link-btn { background: none; border: none; color: var(--accent, #3d5a80); cursor: pointer; padding: 0 4px; font: inherit; }
.link-btn:hover { text-decoration: underline; }

.stats-filterbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px;
    background: var(--surface, #f7f7f7); border-radius: 6px; margin-bottom: 18px; font-size: 13px; }
.stats-filterbar .lbl { color: var(--text-muted, #888); }
.stats-filterbar .pill { padding: 4px 12px; border-radius: 12px;
    background: transparent; border: 1px solid var(--border, #ddd);
    color: var(--text, #333); cursor: pointer; font-size: 12px; }
.stats-filterbar .pill.active { background: var(--accent, #3d5a80); color: #fff; border-color: var(--accent, #3d5a80); }
.stats-filterbar .check { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.stats-section { margin-bottom: 24px; }
.stats-section h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted, #888); margin: 0 0 10px; border-bottom: 1px solid var(--border, #ddd); padding-bottom: 6px; }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .charts-grid { grid-template-columns: 1fr; } }

.chart-card { background: var(--surface, #fff); border: 1px solid var(--border, #e5e5e5);
    border-radius: 6px; padding: 14px; }
.chart-card h3 { font-size: 13px; margin: 0 0 4px; }
.chart-card .sub { font-size: 11px; color: var(--text-muted, #888); margin: 0 0 10px; }
.chart-card .big-num { font-size: 26px; font-weight: 600; margin-bottom: 4px; }
.chart-card-wide { grid-column: 1 / -1; }

.chart-area { position: relative; height: 150px; }
.chart-area-tall { height: 220px; }
.chart-area canvas { width: 100% !important; height: 100% !important; }

.stats-error { background: #fef2f2; color: #991b1b; padding: 10px 14px; border-radius: 6px;
    border: 1px solid #fecaca; font-size: 14px; margin-top: 16px; }
@media (prefers-color-scheme: dark) {
    .stats-error { background: #7f1d1d; color: #fee2e2; border-color: #b91c1c; }
}

/* ── Dashboard overview band ────────────────────────── */
.dashboard-band { background: var(--surface, #f9f9f9); border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px; padding: 14px; margin-bottom: 18px; }
.dashboard-band .band-header { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted, #888); margin-bottom: 10px; }
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .band-grid { grid-template-columns: 1fr; } }
.band-card { display: block; padding: 12px; border-radius: 6px; background: var(--bg, #fff);
    border: 1px solid var(--border, #e5e5e5); text-decoration: none; color: inherit;
    transition: border-color 120ms ease; }
.band-card:hover { border-color: var(--accent, #3d5a80); }
.band-num { font-size: 22px; font-weight: 600; }
.band-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted, #888); margin-top: 2px; }
.band-spark { height: 30px; margin-top: 6px; position: relative; }
.band-spark canvas { width: 100% !important; height: 100% !important; }

/* My Schedule (Phase 1B-F) ========================================== */

.my-schedule-list,
.my-day-detail-list {
    /* No fixed background — inherits from page; same scroll context as day-list */
}

/* Hide the server-rendered empty state by default; JS reveals it only when the
   API confirms zero bells. Prevents a flash of the empty state during the
   ~100ms fetch on the way to the populated day-card view. */
.my-schedule-list .my-schedule-empty { display: none; }
.my-schedule-list[data-my-state="empty"] .my-schedule-empty { display: block; }

.my-schedule-empty {
    padding: 24px 20px;
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

.my-schedule-empty-title {
    font-size: calc(20px * var(--text-scale, 1));
    font-weight: 700;
    margin: 8px 0 28px;
    color: var(--text);
}

.my-schedule-empty-steps {
    list-style: decimal;
    margin: 0 0 24px;
    padding-left: 24px;
    color: var(--text);
    font-size: calc(15px * var(--text-scale, 1));
    line-height: var(--read-line, 1.5);
}

.my-schedule-empty-steps li {
    margin: 12px 0;
}

.my-schedule-empty-steps li small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: calc(13px * var(--text-scale, 1));
}

.my-schedule-empty-cta-wrap {
    margin: 28px 0 8px;
}

.my-schedule-empty-cta {
    display: inline-block;
    background: var(--accent, #cc0000);
    color: #fff;
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.my-schedule-empty-cta:active {
    opacity: 0.85;
}

/* ---- Global Search (Phase 1B-G) ---------------------------------------- */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-icon {
    background: none;
    border: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    line-height: 1;
    font-size: 22px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 200ms ease-out;
}
.search-overlay[data-search-open] {
    transform: translateY(0);
}

.search-overlay-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}
.search-overlay-icon {
    font-size: 18px;
    line-height: 1;
}
.search-overlay-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: calc(16px * var(--text-scale));
    padding: 8px 0;
    appearance: none;
    -webkit-appearance: none;
}
.search-overlay-input::placeholder {
    color: var(--text-muted);
}
.search-overlay-input::-webkit-search-cancel-button {
    display: none;
}
.search-overlay-close {
    background: none;
    border: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-overlay-results {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px; /* Clearance above tab-bar / iOS home indicator */
}

.search-day-group {
    padding: 0;
}
.search-day-eyebrow {
    padding: 16px 16px 6px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Match highlight inside result row names. */
.search-overlay-results mark {
    background: var(--accent-soft, rgba(204, 0, 0, 0.18));
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 700;
}

.search-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
    font-style: italic;
}