/* ==========================================================================
   iOR Style — Independence GUARD Alliance
   Token contract + component vocabulary per the iOR Style Design System.
   Default LIGHT (this project's deviation); dark tokens + toggle retained.
   ========================================================================== */

:root {
    /* Brand gradients — GUARD: forest green → brass gold (from the banner) */
    --cal-appbar-gradient:    linear-gradient(135deg, #2F4A28 0%, #21331C 45%, #354F2C 100%);
    --cal-authority-gradient: linear-gradient(90deg, #1E2F18 0%, #3C5A33 45%, #BE9A44 100%);

    /* Primary palette — forest green */
    --cal-primary: #3A5A30;
    --cal-primary-dark: #2C4625;
    --cal-primary-darker: #1F301A;
    --cal-primary-light: #4C7040;
    --cal-primary-lighter: #5E8550;
    --cal-primary-wash: rgba(58, 90, 48, 0.08);
    --cal-primary-wash-2: rgba(58, 90, 48, 0.12);
    /* Secondary — brass gold */
    --cal-secondary: #B8923C;
    --cal-secondary-light: #D2AE55;
    --cal-secondary-wash: rgba(184, 146, 60, 0.10);

    /* Status — harmonized with the warm/green brand */
    --cal-success: #2E8B57; --cal-success-wash: rgba(46, 139, 87, 0.10);
    --cal-warning: #B9770E; --cal-warning-wash: rgba(185, 119, 14, 0.12);
    --cal-error:   #A6392B; --cal-error-wash:   rgba(166, 57, 43, 0.10);
    --cal-info:    #3C6B8C; --cal-info-wash:    rgba(60, 107, 140, 0.10);

    /* Surfaces — warm cream parchment matching the banner's ivory */
    --cal-canvas:         #ECE5D4;
    --cal-background:     #F1EBDB;
    --cal-surface:        #FAF6EA;
    --cal-surface-bright: #FEFBF1;
    --cal-surface-soft:   #F4EEDF;
    --cal-surface-hover:  #EAE2CD;
    --cal-surface-sunk:   #E2D9C1;
    --cal-stripe-bg:      rgba(58, 90, 48, 0.025);

    /* Ink — warm dark green-charcoal, never pure black */
    --cal-ink: #232C1D;
    --cal-ink-soft: #45503A;
    --cal-ink-muted: #6A7460;
    --cal-ink-faint: #A8AE9C;
    --cal-ink-hint: #C8CCBE;
    --cal-ink-inverse: #FFFFFF;

    /* Borders — warm olive */
    --cal-border-subtle: rgba(60, 50, 24, 0.10);
    --cal-border-medium: rgba(60, 50, 24, 0.16);
    --cal-border-strong: rgba(60, 50, 24, 0.26);
    --cal-border: var(--cal-border-medium);
    --cal-border-soft: var(--cal-border-subtle);
    --cal-hairline: rgba(255, 252, 244, 0.9);

    /* Spacing — 4px base */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-7: 32px;  --s-8: 40px;
    --s-9: 56px; --s-10: 72px; --s-11: 96px;

    /* Radii */
    --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
    --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

    /* Fonts */
    --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Cascadia Code', Menlo, monospace;

    /* Shadows — dimensional two-layer: green bloom + warm sepia contact */
    --shadow-xs: 0 1px 1px rgba(50,44,24,0.06), 0 1px 2px rgba(46,70,40,0.05);
    --shadow-sm: 0 1px 2px rgba(50,44,24,0.07), 0 2px 6px rgba(46,70,40,0.06), 0 1px 1px rgba(50,44,24,0.04);
    --shadow-md: 0 2px 3px rgba(50,44,24,0.08), 0 10px 28px rgba(46,70,40,0.10), 0 4px 10px rgba(46,70,40,0.06);
    --shadow-lg: 0 3px 6px rgba(50,44,24,0.10), 0 24px 56px rgba(46,70,40,0.16), 0 10px 20px rgba(46,70,40,0.08);
    --shadow-focus: 0 0 0 3px rgba(184, 146, 60, 0.30);
    --shadow-inset-top: inset 0 1px 0 0 var(--cal-hairline);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-fast: 150ms; --dur-med: 200ms; --dur-slow: 350ms;
}

[data-theme="dark"] {
    /* Deep "neighborhood at night" green — straight from the banner backdrop */
    --cal-appbar-gradient: linear-gradient(135deg, #243A1E 0%, #18260F 45%, #28401F 100%);
    --cal-canvas: #0F1A0B;
    --cal-background: #142010;
    --cal-surface: #1C2B15;
    --cal-surface-bright: #243620;
    --cal-surface-soft: #16230F;
    --cal-surface-hover: #243A1C;
    --cal-surface-sunk: #0E1808;
    --cal-stripe-bg: rgba(158,192,137,0.04);
    --cal-ink: #ECE6D4;
    --cal-ink-soft: #C2CBB2;
    --cal-ink-muted: #8C9A7C;
    --cal-ink-faint: #5A6650;
    --cal-ink-hint: #3A4632;
    --cal-ink-inverse: #142010;
    --cal-border-subtle: rgba(158,192,137,0.10);
    --cal-border-medium: rgba(158,192,137,0.16);
    --cal-border-strong: rgba(158,192,137,0.30);
    --cal-hairline: transparent;
    --cal-primary: #8FB57E;
    --cal-primary-lighter: #B6D2A6;
    --cal-secondary: #D2AE55;
    --shadow-inset-top: none;
    --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 12px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.5), 0 28px 60px rgba(0,0,0,0.55);
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--cal-ink);
    background: var(--cal-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Body-wide lens-flare bloom — the off-screen light source (light mode). */
body::after {
    content: "";
    position: fixed;
    top: -120px; right: -120px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255,250,232,0.55) 0%, rgba(58,90,48,0.06) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
}
[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(210,174,85,0.08) 0%, transparent 70%);
}

/* The hidden attribute must always win, even over display:flex/inline-flex rules */
[hidden] { display: none !important; }

a { color: var(--cal-primary-lighter); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Focus — keyboard only; kill programmatic ring (§22.3) */
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

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

/* ---- Authority line + disclaimer/tagline strip (§8, §22.1) -------------- */
.cal-authority-line {
    height: 3px;
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--cal-authority-gradient);
    z-index: 1031;
}
.cal-disclaimer {
    position: fixed; top: 3px; left: 0; right: 0;
    height: 28px;
    z-index: 1029;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #18260F 0%, #21331C 60%, #2C4625 100%);
    color: rgba(244, 236, 214, 0.92);
    font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
    padding: 0 var(--s-4); text-align: center;
}
.cal-disclaimer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Typography vocabulary ---------------------------------------------- */
.cal-eyebrow, .cal-page-eyebrow {
    font-size: 11px; font-weight: 700; line-height: 1.2;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--cal-ink-muted);
    display: inline-flex; align-items: center; gap: var(--s-2);
}
.cal-page-eyebrow::before {
    content: ""; width: 20px; height: 2px; background: var(--cal-secondary); border-radius: 2px;
}
.cal-page-title {
    font-family: var(--font-body);
    font-size: clamp(24px, 3vw, 30px); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.025em;
    color: var(--cal-ink); margin: var(--s-2) 0 0;
    text-shadow: 0 1px 0 rgba(255,253,246,0.7);
}
.cal-page-subtitle {
    font-size: 14.5px; line-height: 1.55; color: var(--cal-ink-soft);
    margin: var(--s-2) 0 0; max-width: 70ch;
}
.cal-display-lg { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.022em; text-shadow: 0 1px 0 rgba(255,253,246,0.7); }
.cal-display-md { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.cal-display-sm { font-size: 16px; font-weight: 600; line-height: 1.30; letter-spacing: -0.008em; }
.cal-display-hero {
    font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
    color: var(--cal-ink); margin: 0;
}
.cal-serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.cal-text-mono { font-family: var(--font-mono); letter-spacing: -0.005em; }
.cal-text-small { font-size: 13px; line-height: 1.5; color: var(--cal-ink-soft); }
.cal-muted { color: var(--cal-ink-muted); }

[data-theme="dark"] .cal-page-title,
[data-theme="dark"] .cal-display-lg { text-shadow: none; }

/* ---- App shell (authenticated backend) — §22 ---------------------------- */
.cal-shell { display: flex; flex-direction: column; min-height: 100vh; padding-top: 31px; position: relative; z-index: 1; }

.cal-appbar {
    position: sticky; top: 31px; height: 64px; z-index: 1030;
    display: flex; align-items: center; gap: var(--s-3);
    padding: 0 var(--s-6);
    background: var(--cal-appbar-gradient);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.cal-appbar a, .cal-appbar button { color: #fff; }

.cal-shell-body { display: flex; flex: 1; align-items: flex-start; }

.cal-drawer {
    align-self: flex-start;
    position: sticky; top: 95px;            /* 31 (line+disclaimer) + 64 (bar) */
    height: calc(100vh - 95px);
    width: 264px; flex: 0 0 264px;
    overflow-y: auto;
    background: var(--cal-surface-soft);
    border-right: 1px solid var(--cal-border-subtle);
    padding: var(--s-5) var(--s-3) var(--s-4);
    display: flex; flex-direction: column; gap: var(--s-2);
}
.cal-nav-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--cal-ink-muted); padding: var(--s-4) var(--s-3) var(--s-1); }
.cal-nav-link {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 9px var(--s-3); border-radius: var(--r-sm);
    color: var(--cal-ink-soft); font-size: 14px; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cal-nav-link:hover { background: var(--cal-surface-hover); color: var(--cal-ink); text-decoration: none; }
.cal-nav-link.active { background: var(--cal-primary-wash); color: var(--cal-primary); border-left-color: var(--cal-primary); font-weight: 600; }
.cal-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.cal-nav-footer { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--cal-border-subtle); font-size: 12px; color: var(--cal-ink-muted); }

.cal-main { flex: 1; min-width: 0; }
.cal-content { max-width: 1200px; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9); }

.cal-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(15,37,48,0.45); z-index: 1019; }

/* App-bar bits */
.cal-brand { display: flex; align-items: center; gap: var(--s-3); }
.cal-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cal-brand-sub { font-size: 11px; opacity: 0.8; display: block; }
.cal-logo { width: 32px; height: 32px; flex: 0 0 32px; }
.cal-spacer { flex: 1; }
.cal-nav-toggle { display: none; background: rgba(255,255,255,0.12); border: 0; width: 38px; height: 38px; border-radius: var(--r-sm); align-items: center; justify-content: center; cursor: pointer; }
.cal-nav-toggle svg { width: 20px; height: 20px; }
.cal-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; font-size: 13px; font-weight: 500; }
.cal-appbar-action { display: inline-flex; align-items: center; gap: var(--s-2); background: rgba(255,255,255,0.14); border: 0; color: #fff; padding: 7px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-body); }
.cal-appbar-action:hover { background: rgba(255,255,255,0.24); text-decoration: none; }
.cal-signout-icon { width: 16px; height: 16px; }

/* ---- Public site shell --------------------------------------------------- */
.cal-public { padding-top: 31px; position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.cal-topbar {
    position: sticky; top: 31px; z-index: 1030;
    background: var(--cal-appbar-gradient); color: #fff;
    box-shadow: var(--shadow-sm);
}
.cal-topbar-inner { max-width: 1200px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-6); }
.cal-topnav { display: flex; align-items: center; gap: var(--s-1); }
.cal-topnav a { color: rgba(255,255,255,0.86); padding: 8px var(--s-3); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; }
.cal-topnav a:hover { background: rgba(255,255,255,0.14); color: #fff; text-decoration: none; }
.cal-topnav a.active { background: rgba(255,255,255,0.18); color: #fff; }
.cal-public-main { flex: 1; }
.cal-container { max-width: 1200px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); }
.cal-container-narrow { max-width: 820px; }

.cal-footer { background: var(--cal-surface-soft); position: relative; }
/* Brand hairline — ties the footer to the green/gold band system */
.cal-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cal-authority-gradient); }
.cal-footer-inner { max-width: 1200px; margin: 0 auto; padding: var(--s-7) var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: space-between; align-items: flex-start; color: var(--cal-ink-muted); font-size: 13px; }

/* Mobile nav menu for public top bar */
.cal-mobile-menu { display: none; }

/* ---- Page header --------------------------------------------------------- */
.cal-page-head { margin-bottom: var(--s-6); }
.cal-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }

/* ---- Cards (signature) --------------------------------------------------- */
.cal-card {
    border-radius: var(--r-md);
    border: 1px solid var(--cal-border-subtle);
    background:
        radial-gradient(ellipse 260px 170px at 0% 0%, rgba(58,90,48,0.09) 0%, transparent 70%),
        radial-gradient(ellipse 240px 160px at 100% 100%, rgba(184,146,60,0.07) 0%, transparent 72%),
        linear-gradient(180deg, var(--cal-surface-bright) 0%, var(--cal-surface) 60%);
    box-shadow: var(--shadow-inset-top), var(--shadow-sm);
    transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
    position: relative;
    padding: var(--s-7);
}
.cal-card:hover { box-shadow: var(--shadow-inset-top), var(--shadow-md); border-color: var(--cal-border-medium); }
.cal-card.is-flat:hover { transform: none; box-shadow: var(--shadow-inset-top), var(--shadow-sm); }
.cal-card-pad-tight { padding: var(--s-5); }

.cal-card-accent { position: relative; overflow: hidden; }
.cal-card-accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.cal-card-accent-primary::before { background: var(--cal-primary); }
.cal-card-accent-high::before    { background: var(--cal-success); }
.cal-card-accent-medium::before  { background: var(--cal-warning); }
.cal-card-accent-low::before     { background: var(--cal-error); }
.cal-card-accent-accent::before  { background: linear-gradient(180deg, var(--cal-secondary), var(--cal-primary)); }

/* Hero mesh (simplified, animated drift) */
.cal-hero {
    border-radius: var(--r-lg);
    border: 1px solid var(--cal-border-subtle);
    box-shadow: var(--shadow-inset-top), var(--shadow-md);
    padding: clamp(var(--s-6), 5vw, var(--s-10));
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(58,90,48,0.16), transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 22%, rgba(31,48,26,0.14), transparent 60%),
        radial-gradient(ellipse 60% 60% at 70% 95%, rgba(184,146,60,0.13), transparent 60%),
        linear-gradient(180deg, var(--cal-surface-bright), var(--cal-surface));
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    animation: cal-mesh-drift 42s ease-in-out infinite;
}
.cal-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cal-authority-gradient); }
@keyframes cal-mesh-drift {
    0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%, 0 0; }
    50%      { background-position: 30% 60%, 70% 40%, 40% 80%, 0 0; }
}
.cal-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Org banner showcase (their real logo/banner image) */
.cal-banner-showcase {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-inset-top), var(--shadow-md);
    border: 1px solid var(--cal-border-subtle);
    background: #21331C; /* matches the banner's deep green so any letterboxing blends in */
    line-height: 0;
}
.cal-banner-showcase img { width: 100%; height: auto; display: block; }

/* Full-bleed edge-to-edge banner (spans the whole viewport, under the top bar) */
.cal-banner-full {
    width: 100%;
    background: #21331C;
    line-height: 0;
    box-shadow: var(--shadow-sm);
}
.cal-banner-full img { width: 100%; height: auto; display: block; }
/* The tagline+CTA block sits closer under a full-bleed banner */
.cal-banner-full + .cal-container { padding-top: var(--s-7); }

/* ==========================================================================
   Landing page — full-width section bands for rhythm & contrast
   ========================================================================== */
.cal-band { width: 100%; position: relative; }
.cal-band-inner { max-width: 1180px; margin: 0 auto; padding: var(--s-10) var(--s-6); }
.cal-band-narrow .cal-band-inner { max-width: 880px; }

/* Deep "neighborhood at night" green band — cream text, gold accents, starfield */
.cal-band-green {
    overflow: hidden;
    color: #F4ECD6;
    background:
        radial-gradient(ellipse 70% 90% at 12% 0%, rgba(126,166,104,0.18), transparent 60%),
        radial-gradient(ellipse 60% 80% at 92% 12%, rgba(184,146,60,0.16), transparent 62%),
        linear-gradient(165deg, #2E4827 0%, #213320 52%, #18260F 100%);
}
.cal-band-green::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
    background-image:
        radial-gradient(1.6px 1.6px at 18% 24%, rgba(244,236,214,0.55), transparent),
        radial-gradient(1.4px 1.4px at 68% 16%, rgba(244,236,214,0.4), transparent),
        radial-gradient(1px 1px at 42% 58%, rgba(244,236,214,0.45), transparent),
        radial-gradient(1.2px 1.2px at 86% 66%, rgba(244,236,214,0.35), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(244,236,214,0.3), transparent);
}
.cal-band-green > .cal-band-inner { position: relative; z-index: 1; }
.cal-band-green .cal-eyebrow,
.cal-band-green .cal-page-eyebrow { color: var(--cal-secondary-light); }
.cal-band-green a:not(.cal-btn) { color: var(--cal-secondary-light); }

/* A 3px brand-gradient rule that can cap a band */
.cal-band-rule { height: 3px; background: var(--cal-authority-gradient); width: 100%; }

/* Centered section heading */
.cal-band-head { text-align: center; max-width: 62ch; margin: 0 auto var(--s-8); }
.cal-band-head .cal-page-eyebrow::before { display: none; }
.cal-band-head h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: var(--s-3) 0 var(--s-3); }
.cal-band-head p { font-size: 16px; color: var(--cal-ink-soft); margin: 0 auto; max-width: 60ch; }
.cal-band-green .cal-band-head h2 { color: #F7F1DE; text-shadow: none; }
.cal-band-green .cal-band-head p { color: rgba(244,236,214,0.82); }

/* ---- Slim green page hero — unified header for interior pages ---- */
.cal-page-hero .cal-band-inner { padding-top: var(--s-8); padding-bottom: var(--s-8); text-align: center; }
.cal-page-hero h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: #F7F1DE; margin: var(--s-3) 0 0; }
.cal-page-hero p { max-width: 62ch; margin: var(--s-3) auto 0; color: rgba(244, 236, 214, 0.85); font-size: 15.5px; line-height: 1.55; }

/* Content band that follows a page hero — tighter top rhythm than a full band */
.cal-band-tight .cal-band-inner { padding-top: var(--s-7); padding-bottom: var(--s-9); }

/* ---- Hero (green) ---- */
.cal-hero-green { text-align: center; }
.cal-banner-embed { max-width: 720px; margin: 0 auto var(--s-6); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(184,146,60,0.35); line-height: 0; }
.cal-banner-embed img { width: 100%; display: block; }
.cal-hero-title { font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; color: #F7F1DE; margin: 0; }
.cal-hero-title .cal-gold { color: var(--cal-secondary-light); }
.cal-hero-lede { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2.5vw, 27px); color: var(--cal-secondary-light); margin: var(--s-4) 0 0; }
.cal-hero-sub { max-width: 60ch; margin: var(--s-4) auto 0; color: rgba(244,236,214,0.85); font-size: 16px; }

/* Buttons tuned for dark bands */
.cal-btn-gold { background: var(--cal-secondary); color: #20311A; box-shadow: var(--shadow-xs); }
.cal-btn-gold:hover { background: var(--cal-secondary-light); transform: translateY(-1px); }
.cal-btn-on-dark { background: transparent; color: #F4ECD6; border-color: rgba(244,236,214,0.45); }
.cal-btn-on-dark:hover { background: rgba(244,236,214,0.12); }

/* ---- Feature trio ---- */
.cal-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cal-feature-icon { width: 50px; height: 50px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-4);
    background: radial-gradient(circle at 30% 25%, rgba(184,146,60,0.20), transparent 70%), var(--cal-primary-wash);
    color: var(--cal-primary); border: 1px solid var(--cal-border-subtle); }
.cal-feature-icon svg { width: 24px; height: 24px; }
.cal-feature h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.012em; margin: 0 0 var(--s-2); }
.cal-feature p { font-size: 14px; line-height: 1.6; color: var(--cal-ink-soft); margin: 0; }

/* ---- Stat figures (on green) ---- */
.cal-stat-row { display: flex; flex-wrap: wrap; gap: var(--s-9); justify-content: center; }
.cal-stat { text-align: center; }
.cal-stat-num { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--cal-secondary-light); font-variant-numeric: tabular-nums; }
.cal-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; margin-top: var(--s-2); color: rgba(244,236,214,0.82); font-weight: 600; }

/* ---- "Please contribute" gold band + scan-to-Venmo card ---- */
.cal-band-gold { background: linear-gradient(135deg, #CDA851 0%, #B8923C 55%, #A6802C 100%); color: #20311A; }
.cal-band-gold .cal-eyebrow { color: #4A3A10; }
.cal-contribute { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--s-8); align-items: center; }
.cal-contribute-title { font-size: clamp(30px, 4.4vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: var(--s-3) 0; color: #1B2912; }
.cal-contribute-intro { font-size: 17px; line-height: 1.6; color: #2C3B1F; max-width: 54ch; }
.cal-contribute-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.cal-btn-venmo { background: #3D95CE; color: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }
.cal-btn-venmo:hover { background: #2F7FB3; transform: translateY(-1px); }
.cal-btn-ghost-dark { background: transparent; color: #20311A; border-color: rgba(32,49,26,0.45); }
.cal-btn-ghost-dark:hover { background: rgba(32,49,26,0.10); }

.cal-venmo-card { background: #FEFBF1; border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-lg); text-align: center; border: 1px solid rgba(0,0,0,0.06); justify-self: center; width: 100%; max-width: 280px; }
.cal-venmo-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cal-ink-muted); }
.cal-venmo-qr { margin: var(--s-3) auto; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.cal-venmo-qr img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: var(--r-xs); }
.cal-venmo-qr-empty { border: 2px dashed var(--cal-border-strong); border-radius: var(--r-md); color: var(--cal-ink-faint); }
.cal-venmo-qr-empty svg { width: 64px; height: 64px; }
.cal-venmo-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; color: #2C3E50; font-size: 15px; }

@media (max-width: 820px) {
    .cal-contribute { grid-template-columns: 1fr; text-align: center; }
    .cal-contribute-intro { margin-left: auto; margin-right: auto; }
    .cal-contribute-actions { justify-content: center; }
}

@media (max-width: 820px) { .cal-feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .cal-band-inner { padding: var(--s-8) var(--s-4); }
    .cal-stat-row { gap: var(--s-6); }
    .cal-banner-embed { margin-bottom: var(--s-5); }
}

/* Metric / KPI cards */
.cal-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.cal-metric {
    padding: var(--s-6); border: 1px solid var(--cal-border-subtle); border-radius: var(--r-md);
    background:
        radial-gradient(ellipse 220px 170px at 100% 0%, rgba(58,90,48,0.10) 0%, transparent 70%),
        linear-gradient(180deg, var(--cal-surface-bright) 0%, var(--cal-surface) 70%);
    box-shadow: var(--shadow-inset-top), var(--shadow-xs);
    position: relative; overflow: hidden;
}
.cal-metric-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cal-ink-muted); }
.cal-metric-value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: var(--s-2);
    background: linear-gradient(180deg, var(--cal-primary-lighter), var(--cal-primary), var(--cal-primary-dark));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .cal-metric-value { background: none; -webkit-text-fill-color: var(--cal-primary); color: var(--cal-primary); }

/* ---- Buttons ------------------------------------------------------------- */
.cal-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
    padding: 10px 24px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.cal-btn:hover { text-decoration: none; }
.cal-btn svg { width: 16px; height: 16px; }
.cal-btn-primary { background: var(--cal-primary); color: var(--cal-ink-inverse); box-shadow: var(--shadow-xs); }
.cal-btn-primary:hover { background: var(--cal-primary-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cal-btn-secondary { background: transparent; color: var(--cal-primary); border-color: var(--cal-primary); }
.cal-btn-secondary:hover { background: var(--cal-primary-wash); }
.cal-btn-ghost { background: transparent; color: var(--cal-ink); }
.cal-btn-ghost:hover { background: var(--cal-surface-hover); }
.cal-btn-danger { background: var(--cal-error); color: #fff; }
.cal-btn-danger:hover { filter: brightness(0.93); }
.cal-btn-sm { padding: 6px 16px; font-size: 13px; }
.cal-btn-block { width: 100%; }
.cal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cal-btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--cal-border-subtle); color: var(--cal-ink-soft); cursor: pointer; }
.cal-btn-icon:hover { background: var(--cal-surface-hover); color: var(--cal-ink); }
.cal-btn-icon svg { width: 18px; height: 18px; }

/* Theme toggle: sun in light mode, moon in dark mode */
.cal-theme-moon { display: none; }
[data-theme="dark"] .cal-theme-sun { display: none; }
[data-theme="dark"] .cal-theme-moon { display: inline; }

/* ---- Forms --------------------------------------------------------------- */
.cal-field { margin-bottom: var(--s-4); }
.cal-label { display: block; font-size: 13px; font-weight: 600; color: var(--cal-ink-soft); margin-bottom: var(--s-2); }
.cal-input, .cal-select, .cal-textarea {
    width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--cal-ink);
    background: var(--cal-surface-bright); border: 1px solid var(--cal-border); border-radius: var(--r-sm);
    padding: 10px 12px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cal-input:focus, .cal-select:focus, .cal-textarea:focus { outline: none; border-color: var(--cal-primary); box-shadow: var(--shadow-focus); }
.cal-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.cal-textarea-tall { min-height: 280px; font-family: var(--font-mono); font-size: 13px; }
.cal-input::placeholder, .cal-textarea::placeholder { color: var(--cal-ink-hint); }
.cal-help { font-size: 12px; color: var(--cal-ink-muted); margin-top: var(--s-1); }
.cal-checkbox { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; cursor: pointer; }
.cal-checkbox input { width: 17px; height: 17px; accent-color: var(--cal-primary); }
.field-validation-error, .cal-validation { color: var(--cal-error); font-size: 12.5px; margin-top: var(--s-1); display: block; }
.cal-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.cal-form-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; align-items: center; }

/* ---- Compact uploader bar (admin "Add a file") --------------------------- */
.cal-upload-card { padding: var(--s-4) var(--s-5); }
.cal-upload-bar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-3); }
.cal-upload-bar .cal-input { flex: 1 1 220px; width: auto; }
.cal-upload-bar .cal-select { flex: 0 1 190px; width: auto; }
.cal-upload-bar .cal-checkbox { white-space: nowrap; font-size: 13px; }
.cal-file-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px dashed var(--cal-border-strong); border-radius: var(--r-sm); background: var(--cal-surface-soft); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--cal-ink-soft); white-space: nowrap; max-width: 250px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cal-file-btn:hover { border-color: var(--cal-primary); color: var(--cal-ink); }
.cal-file-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.cal-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cal-file-btn .cal-file-btn-label { overflow: hidden; text-overflow: ellipsis; }
.cal-file-btn.has-file { border-style: solid; border-color: var(--cal-primary); background: var(--cal-primary-wash); color: var(--cal-primary); font-weight: 600; }
.cal-upload-more { margin-top: var(--s-3); }
.cal-upload-more summary { font-size: 12.5px; color: var(--cal-ink-muted); cursor: pointer; user-select: none; list-style: none; }
.cal-upload-more summary::-webkit-details-marker { display: none; }
.cal-upload-more summary:hover { color: var(--cal-ink); }
.cal-upload-more textarea { margin-top: var(--s-2); }
@media (max-width: 700px) {
    .cal-upload-bar .cal-select, .cal-upload-bar .cal-input, .cal-file-btn { flex: 1 1 100%; max-width: none; }
    .cal-upload-bar .cal-btn { flex: 1 1 100%; }
}

/* ---- Rich text editor (progressive enhancement of textareas) ------------ */
.cal-rte { border: 1px solid var(--cal-border); border-radius: var(--r-sm); background: var(--cal-surface-bright); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cal-rte:focus-within { border-color: var(--cal-primary); box-shadow: var(--shadow-focus); }
.cal-rte-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 8px; background: var(--cal-surface-soft); border-bottom: 1px solid var(--cal-border-subtle); }
.cal-rte-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: none; border-radius: 5px; background: transparent; color: var(--cal-ink-soft); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cal-rte-btn:hover { background: var(--cal-surface-hover); color: var(--cal-ink); }
.cal-rte-btn.is-active { background: var(--cal-primary-wash); color: var(--cal-primary); }
.cal-rte-btn svg { width: 16px; height: 16px; }
.cal-rte-btn span { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; font-family: var(--font-body); }
.cal-rte-sep { width: 1px; height: 18px; background: var(--cal-border); margin: 0 5px; flex: 0 0 1px; }
.cal-rte-spring { flex: 1 1 auto; }
.cal-rte .cal-rte-area { min-height: 260px; max-height: 65vh; overflow-y: auto; padding: 14px 16px; outline: none; max-width: none; font-size: 15px; cursor: text; }
.cal-rte-area h2:first-child, .cal-rte-area h3:first-child { margin-top: 0; }
.cal-rte-area img { cursor: default; max-width: 100%; }
.cal-rte-area.is-empty { position: relative; }
.cal-rte-area.is-empty::before { content: attr(data-placeholder); color: var(--cal-ink-hint); position: absolute; pointer-events: none; max-width: 90%; }
.cal-rte .cal-rte-src { display: none; border: none; border-radius: 0; box-shadow: none; }
.cal-rte.cal-rte-source .cal-rte-area { display: none; }
.cal-rte.cal-rte-source .cal-rte-src { display: block; min-height: 260px; }
.cal-rte.cal-rte-source .cal-rte-src:focus { border: none; box-shadow: none; }
.cal-admin .cal-rte-area { font-size: 14px; }

/* Collapsible admin settings sections */
.cal-settings-fold { border: 1px solid var(--cal-border-subtle); border-radius: var(--r-sm); background: var(--cal-surface-soft); padding: var(--s-3) var(--s-4); }
.cal-settings-fold + .cal-settings-fold { margin-top: var(--s-3); }
.cal-settings-fold summary { font-size: 13.5px; font-weight: 600; color: var(--cal-ink-soft); cursor: pointer; user-select: none; }
.cal-settings-fold[open] summary { margin-bottom: var(--s-3); }

/* ---- Chips / badges ------------------------------------------------------ */
.cal-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cal-border); background: transparent; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--cal-ink-soft); cursor: default; }
a.cal-chip, button.cal-chip { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
a.cal-chip:hover, button.cal-chip:hover { background: var(--cal-surface-hover); text-decoration: none; }
.cal-chip-active { background: var(--cal-primary); color: var(--cal-ink-inverse); border-color: var(--cal-primary); }
.cal-chip-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; display: inline-block; }
.cal-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.cal-badge-public  { background: var(--cal-success-wash); color: var(--cal-success); }
.cal-badge-private { background: var(--cal-warning-wash); color: var(--cal-warning); }
.cal-badge-draft   { background: var(--cal-surface-sunk); color: var(--cal-ink-muted); }
.cal-badge-pub     { background: var(--cal-primary-wash); color: var(--cal-primary); }
.cal-role-badge { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--r-xs); background: rgba(255,255,255,0.16); color: #fff; }

/* ---- Banners ------------------------------------------------------------- */
.cal-banner { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border: 1px solid var(--cal-border-subtle); font-size: 13.5px; margin-bottom: var(--s-4); }
.cal-banner svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.cal-banner-info { background: var(--cal-info-wash); color: var(--cal-primary-dark); border-color: rgba(36,113,163,0.2); }
.cal-banner-success { background: var(--cal-success-wash); color: var(--cal-success); border-color: rgba(30,130,76,0.2); }
.cal-banner-warning { background: var(--cal-warning-wash); color: var(--cal-warning); border-color: rgba(211,84,0,0.2); }
.cal-banner-error { background: var(--cal-error-wash); color: var(--cal-error); border-color: rgba(176,58,46,0.2); }
[data-theme="dark"] .cal-banner-info { color: var(--cal-primary); }

/* ---- Data table + pager (§7) -------------------------------------------- */
.cal-data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cal-data-table th { text-align: left; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cal-ink-muted); font-weight: 700; padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--cal-border-medium); background: var(--cal-surface-soft); }
.cal-data-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--cal-border-subtle); color: var(--cal-ink); vertical-align: middle; }
.cal-data-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.cal-data-table tbody tr:nth-child(even) td { background: var(--cal-stripe-bg); }
.cal-data-table tbody tr:hover td { background: var(--cal-surface-hover); }
.cal-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.cal-cell-actions { text-align: right; white-space: nowrap; }
.cal-cell-actions > * { margin-left: var(--s-2); vertical-align: middle; }

.cal-pager { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-4); border-top: 1px solid var(--cal-border-soft); background: var(--cal-surface-soft); flex-wrap: wrap; }

/* ---- Empty state --------------------------------------------------------- */
.cal-empty { text-align: center; padding: var(--s-9) var(--s-6); color: var(--cal-ink-muted); }
.cal-empty-icon { width: 56px; height: 56px; margin: 0 auto var(--s-4); color: var(--cal-ink-faint); }
.cal-empty-title { font-size: 16px; font-weight: 600; color: var(--cal-ink-soft); }
.cal-empty-text { font-size: 13.5px; margin-top: var(--s-2); }
.cal-empty-actions { margin-top: var(--s-5); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ---- Flyer / image gallery ---------------------------------------------- */
.cal-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-5); }
.cal-flyer { border-radius: var(--r-md); border: 1px solid var(--cal-border-subtle); background: var(--cal-surface); box-shadow: var(--shadow-inset-top), var(--shadow-sm); overflow: hidden; transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); display: flex; flex-direction: column; }
.cal-flyer:hover { box-shadow: var(--shadow-inset-top), var(--shadow-md); transform: translateY(-2px); }
.cal-flyer-img { aspect-ratio: 4 / 5; background: var(--cal-surface-sunk); overflow: hidden; }
.cal-flyer-img img { width: 100%; height: 100%; object-fit: cover; }
.cal-flyer-body { padding: var(--s-4); }
.cal-flyer-title { font-weight: 600; font-size: 14.5px; }
.cal-flyer-meta { font-size: 12px; color: var(--cal-ink-muted); margin-top: 2px; }

/* ---- Article / post cards + prose --------------------------------------- */
.cal-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }
.cal-post-card { border-radius: var(--r-md); border: 1px solid var(--cal-border-subtle); background: var(--cal-surface); box-shadow: var(--shadow-inset-top), var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.cal-post-card:hover { box-shadow: var(--shadow-inset-top), var(--shadow-md); transform: translateY(-2px); }
.cal-post-thumb { aspect-ratio: 16 / 9; background: var(--cal-surface-sunk); overflow: hidden; }
.cal-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cal-post-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.cal-post-card .cal-post-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--cal-ink); }
.cal-post-excerpt { font-size: 13.5px; color: var(--cal-ink-soft); flex: 1; }

.cal-prose { max-width: 740px; font-size: 16px; line-height: 1.7; color: var(--cal-ink); }
.cal-prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: var(--s-7) 0 var(--s-3); }
.cal-prose h3 { font-size: 19px; font-weight: 600; margin: var(--s-6) 0 var(--s-2); }
.cal-prose h4 { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; margin: var(--s-5) 0 var(--s-2); }
.cal-prose hr { border: none; border-top: 1px solid var(--cal-border); margin: var(--s-6) 0; }
.cal-prose p { margin: 0 0 var(--s-4); }
.cal-prose ul, .cal-prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.cal-prose li { margin-bottom: var(--s-2); }
.cal-prose a { color: var(--cal-primary); text-decoration: underline; }
.cal-prose img { border-radius: var(--r-md); margin: var(--s-5) 0; box-shadow: var(--shadow-sm); }
.cal-prose blockquote { border-left: 3px solid var(--cal-secondary); padding-left: var(--s-4); margin: var(--s-5) 0; color: var(--cal-ink-soft); font-family: var(--font-display); font-style: italic; font-size: 18px; }

/* ---- File row icon ------------------------------------------------------- */
.cal-file-icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--cal-primary-wash); color: var(--cal-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.cal-file-icon svg { width: 18px; height: 18px; }

/* ---- Auth (login) shell -------------------------------------------------- */
.cal-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6); padding-top: 60px; position: relative; z-index: 1; }
.cal-auth-card { width: 100%; max-width: 400px; }
.cal-auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.cal-auth-logo .cal-logo { width: 52px; height: 52px; }

/* ---- Utilities ----------------------------------------------------------- */
.cal-stack { display: flex; flex-direction: column; }
.cal-stack-3 > * + * { margin-top: var(--s-3); }
.cal-stack-4 > * + * { margin-top: var(--s-4); }
.cal-stack-5 > * + * { margin-top: var(--s-5); }
.cal-stack-6 > * + * { margin-top: var(--s-6); }
.cal-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cal-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.cal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.cal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cal-section { margin-top: var(--s-8); }
.cal-divider { height: 1px; background: var(--cal-border-subtle); border: 0; margin: var(--s-6) 0; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.cal-hide { display: none !important; }

/* Screen-reader-only — for semantic h1s on pages whose visual title is an image/band */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Modal (event details etc.) ------------------------------------------ */
.cal-modal-overlay { position: fixed; inset: 0; z-index: 1900; display: none; align-items: center; justify-content: center; padding: var(--s-5); background: rgba(18, 28, 14, 0.55); backdrop-filter: blur(3px); }
.cal-modal-overlay.is-open { display: flex; animation: cal-fade-in var(--dur-med) var(--ease); }
.cal-modal { background: linear-gradient(180deg, var(--cal-surface-bright) 0%, var(--cal-surface) 60%); border: 1px solid var(--cal-border-subtle); border-radius: var(--r-md); box-shadow: var(--shadow-inset-top), var(--shadow-lg); max-width: 480px; width: 100%; padding: var(--s-6); position: relative; }
.cal-modal .cal-btn-icon.cal-modal-close { position: absolute; top: var(--s-3); right: var(--s-3); }
.cal-modal-title { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; padding-right: var(--s-8); }
.cal-event-meta { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-4) 0; }
.cal-event-meta-row { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 14px; color: var(--cal-ink-soft); }
.cal-event-meta-row svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--cal-ink-muted); }
.cal-event-desc { font-size: 13.5px; line-height: 1.6; color: var(--cal-ink-soft); white-space: pre-line; border-top: 1px solid var(--cal-border-subtle); padding-top: var(--s-3); margin-top: var(--s-3); }
.cal-modal-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }

/* ---- Lightbox (flyers / gallery / article images) ----------------------- */
html.cal-lb-open { overflow: hidden; }
.cal-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: var(--s-7); background: rgba(12, 20, 10, 0.9); }
.cal-lightbox.is-open { display: flex; animation: cal-fade-in var(--dur-med) var(--ease); }
@keyframes cal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cal-lightbox-img { max-width: min(94vw, 1100px); max-height: 84vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); background: #fff; object-fit: contain; }
.cal-lightbox-cap { position: absolute; left: 0; right: 0; bottom: var(--s-5); text-align: center; color: #F4ECD6; font-size: 14px; padding: 0 var(--s-8); text-shadow: 0 1px 4px rgba(0,0,0,0.7); pointer-events: none; }
.cal-lightbox-btn { position: absolute; background: rgba(255,255,255,0.14); border: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: background var(--dur-fast) var(--ease); }
.cal-lightbox-btn:hover { background: rgba(255,255,255,0.30); }
.cal-lightbox-btn svg { width: 24px; height: 24px; }
.cal-lightbox-close { top: var(--s-4); right: var(--s-4); width: 44px; height: 44px; }
.cal-lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.cal-lightbox-prev { left: var(--s-4); }
.cal-lightbox-next { right: var(--s-4); }
.cal-lightbox-btn[hidden] { display: none; }
/* Affordance: lightbox-enabled images get a zoom cursor */
[data-lightbox], .cal-prose img { cursor: zoom-in; }

/* ---- FullCalendar harmonization ----------------------------------------- */
.fc { --fc-border-color: var(--cal-border-subtle); --fc-page-bg-color: transparent; font-family: var(--font-body); }
.fc .fc-toolbar-title { font-size: 20px !important; font-weight: 700; letter-spacing: -0.015em; color: var(--cal-ink); }
.fc .fc-button { background: var(--cal-surface) !important; border: 1px solid var(--cal-border) !important; color: var(--cal-ink-soft) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; text-transform: none !important; padding: 6px 12px !important; }
.fc .fc-button:hover { background: var(--cal-surface-hover) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--cal-primary) !important; border-color: var(--cal-primary) !important; color: #fff !important; }
.fc .fc-col-header-cell-cushion { color: var(--cal-ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 8px; }
.fc .fc-daygrid-day-number { color: var(--cal-ink-soft); font-size: 13px; }
.fc .fc-day-today { background: var(--cal-primary-wash) !important; }
.fc-event { border: none; border-radius: var(--r-xs); font-size: 12px; padding: 1px 4px; cursor: pointer; }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cal-ink-muted); }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 999px; }

/* ==========================================================================
   Admin compact density scope (body.cal-admin) — members area only.
   Public site keeps the full editorial scale; the backend is a working tool,
   so it runs ~8% tighter across type, controls, and card padding.
   ========================================================================== */
body.cal-admin { font-size: 13.5px; }
.cal-admin .cal-page-title { font-size: clamp(20px, 2.4vw, 24px); }
.cal-admin .cal-page-subtitle { font-size: 13px; }
.cal-admin .cal-display-lg { font-size: 24px; }
.cal-admin .cal-display-md { font-size: 17px; }
.cal-admin .cal-display-sm { font-size: 14.5px; }
.cal-admin .cal-eyebrow, .cal-admin .cal-page-eyebrow { font-size: 10.5px; }
.cal-admin .cal-text-small { font-size: 12.5px; }

.cal-admin .cal-btn { font-size: 13px; padding: 8px 18px; }
.cal-admin .cal-btn-sm { font-size: 12px; padding: 5px 12px; }
.cal-admin .cal-btn-icon { width: 32px; height: 32px; }
.cal-admin .cal-btn-icon svg { width: 16px; height: 16px; }

.cal-admin .cal-input, .cal-admin .cal-select, .cal-admin .cal-textarea { font-size: 13px; padding: 8px 10px; }
.cal-admin .cal-label { font-size: 12.5px; }
.cal-admin .cal-checkbox { font-size: 13px; }
.cal-admin .cal-checkbox input { width: 15px; height: 15px; }
.cal-admin .cal-help { font-size: 11.5px; }

.cal-admin .cal-card { padding: var(--s-6); }
.cal-admin .cal-upload-card { padding: var(--s-4) var(--s-5); }
.cal-admin .cal-data-table { font-size: 12.5px; }
.cal-admin .cal-data-table th { font-size: 10.5px; padding: 10px var(--s-4); }
.cal-admin .cal-data-table td { padding: 10px var(--s-4); }
.cal-admin .cal-chip { font-size: 11px; padding: 3px 9px; }
.cal-admin .cal-badge { font-size: 10.5px; }
.cal-admin .cal-metric { padding: var(--s-5); }
.cal-admin .cal-metric-value { font-size: 28px; }
.cal-admin .cal-nav-link { font-size: 13px; padding: 8px var(--s-3); }
.cal-admin .cal-banner { font-size: 12.5px; }

/* ==========================================================================
   Responsive — §22.4 / §22.5
   ========================================================================== */
@media (max-width: 900px) {
    .cal-appbar, .cal-topbar-inner { padding: 0 var(--s-4); gap: var(--s-2); }
    .cal-nav-toggle { display: inline-flex; }
    .cal-brand-sub { display: none; }

    .cal-drawer {
        position: fixed; top: 95px; left: 0; bottom: 0; width: 264px;
        transform: translateX(-100%);
        transition: transform var(--dur-med) var(--ease);
        z-index: 1020; box-shadow: var(--shadow-lg);
        border-right: 1px solid var(--cal-border-medium);
    }
    html.cal-nav-open .cal-drawer { transform: translateX(0); }
    html.cal-nav-open .cal-nav-overlay { display: block; }

    .cal-user-name { display: none; }
    /* ALL app-bar actions collapse to icon-only squares on small screens */
    .cal-appbar-action .cal-signout-label { display: none; }
    .cal-appbar-action { width: 36px; height: 36px; padding: 0; justify-content: center; gap: 0; }

    /* Public top nav collapses into a toggled menu */
    .cal-topnav { display: none; }
    html.cal-nav-open .cal-topnav {
        display: flex; flex-direction: column; align-items: stretch;
        position: fixed; top: 95px; left: 0; right: 0;
        background: var(--cal-primary-dark); padding: var(--s-3); gap: 2px; z-index: 1020;
        box-shadow: var(--shadow-lg);
    }
    html.cal-nav-open .cal-topnav a { padding: 11px var(--s-4); }
    .cal-content, .cal-container { padding: var(--s-6) var(--s-4) var(--s-8); }
    .cal-grid-2, .cal-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    body { font-size: 14.5px; }
    .cal-disclaimer { font-size: 10px; letter-spacing: 0.06em; }
    .cal-card { padding: var(--s-5); }
    .cal-hero { padding: var(--s-6); }
    .cal-form-grid { grid-template-columns: 1fr; }
    .cal-footer-inner { flex-direction: column; gap: var(--s-4); }
    /* Comfortable touch targets for tappable chips (filters, page-size) */
    a.cal-chip, button.cal-chip { padding: 9px 14px; font-size: 12.5px; }
    /* Hide low-value table columns on phones (mark cells with .cal-hide-phone) */
    .cal-hide-phone { display: none !important; }
}

@media (max-width: 480px) {
    .cal-brand-name { font-size: 14px; }
    .cal-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
    .cal-btn { padding: 10px 18px; }
}

/* ---- Backups: inline restore confirmation popover ---------------------- */
.cal-restore-fold { position: relative; }
.cal-restore-fold > summary { display: inline-flex; align-items: center; }
.cal-restore-fold > summary::-webkit-details-marker { display: none; }
.cal-restore-pop {
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 6px;
    width: 280px;
    padding: var(--s-3);
    background: var(--cal-surface, #fff);
    border: 1px solid var(--cal-border, rgba(0,0,0,.12));
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    text-align: left;
}
.cal-input-sm { padding: 6px 9px; font-size: 13px; }