/* =====================================================================
   EventCortex — Server-driven UI additions
   Rules that don't exist in the prototype: public shell, toast tray,
   HTMX loading state, htmx-friendly tweaks.
   Loaded AFTER theme.css.
   ===================================================================== */

/* ---------- Public shell (login / auth pages — no sidebar) ----------
   base_auth.html hard-pins data-theme="light" (this shell is never dark),
   so unlike the rest of the admin app, these rules need no light/dark
   forking — one definition each. */
body.public { overflow: auto; }
.public-shell { position: relative; z-index: var(--z-raised); min-height: 100vh; }

/* ---------- Form primitives ---------- */
.form-grid {
    display: grid;
    gap: 14px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row > label {
    font: 500 11px/1 var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-subtle);
}
.input, .select {
    height: 40px;
    padding: 0 12px;
    background: var(--input-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    color: var(--text-display);
    font-size: 13.5px;
    font-family: var(--f-sans);
    outline: none;
    transition: border-color .15s, background .15s;
}
textarea.input {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    resize: vertical;
}
.input::placeholder { color: var(--text-subtle); }

.input:focus, .select:focus {
    border-color: var(--hairline-hot);
    background: var(--input-bg-focus);
}
.select { appearance: none; cursor: pointer; }
.form-error {
    margin-top: 4px;
    font: 500 11.5px/1.3 var(--f-mono);
    color: #FCA5A8;
}
.form-error-block {
    padding: 10px 12px;
    background: rgba(244,63,94,0.10);
    border: 1px solid rgba(244,63,94,0.25);
    border-radius: 8px;
    color: #FCA5A8;
    font: 500 12.5px/1.4 var(--f-mono);
    margin-bottom: 14px;
}
.hr { border: 0; border-top: 1px solid var(--hairline); margin: 18px 0; }
.muted { color: var(--text-muted); }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
.fw-semibold { font-weight: 600; }
.mono { font-family: var(--f-mono); }
.text-paper { color: var(--text-display); }

/* ===================================================================
   Admin auth pages (login + invalid-route gate) — split-panel design.
   Both templates share base_auth.html's <main class="public-shell">
   (data-theme="light" hard-pinned, so no dark-mode variants needed here).
   `.auth-brand` is a deliberately dark decorative panel inside the
   otherwise-light shell (like a hero band) — its own colors are literal
   hex, not var(--indigo)/var(--violet-2), because those tokens resolve to
   the LIGHT-mode values on this page and would be too dark against a
   near-black panel. Everywhere else uses real theme.css tokens.
   =================================================================== */

/* ---- Sign-in split panel (login.html) ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; min-height: auto; } }

.auth-brand {
    position: relative; overflow: hidden;
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(139,92,246,0.16) 0%, transparent 55%),
        radial-gradient(90% 70% at 90% 100%, rgba(79,70,229,0.14) 0%, transparent 55%),
        linear-gradient(160deg, #12162A 0%, #181C34 55%, #1D2242 100%);
    color: #fff;
    padding: 44px 48px;
    display: flex; flex-direction: column;
}
@media (max-width: 900px) {
    .auth-brand { padding: 22px 20px; flex-direction: row; align-items: center; justify-content: center; }
    .auth-brand__body { display: none; }
}
@media (min-width: 901px) {
    .auth-brand__mark { margin-bottom: 38px; }
}

.auth-brand__orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.auth-brand__orb--1 { width: 340px; height: 340px; top: -120px; right: -100px; background: radial-gradient(circle, rgba(167,139,250,0.35), transparent 70%); }
.auth-brand__orb--2 { width: 280px; height: 280px; bottom: -100px; left: -80px; background: radial-gradient(circle, rgba(79,70,229,0.30), transparent 70%); }
.auth-brand__grid {
    position: absolute; inset: 0; opacity: .4; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(80% 60% at 30% 20%, #000 0%, transparent 75%);
}

.auth-brand__mark { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
/* Platform logo — logo_white.png is designed for a dark surface, shown
   unfiltered here since .auth-brand is itself a dark decorative panel. */
.auth-brand__logo { width: 68px; height: 64px; object-fit: contain; flex-shrink: 0; }
.auth-brand__word-group { display: flex; flex-direction: column; gap: 5px; }
.auth-brand__word { font: 700 27px/1.1 var(--f-sans); letter-spacing: -0.02em; }
/* .np — same hook platform_name_html already wraps the 2nd brand word in */
.auth-brand__word .np { font-family: var(--f-display); font-style: italic; font-weight: 400; color: #A78BFA; }
.auth-brand__tagline { font: 600 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: rgba(226,232,240,0.45); }

.auth-brand__body { position: relative; z-index: 2; margin: auto 0; }
.auth-brand__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em;
    color: rgba(167,139,250,0.85); margin-bottom: 18px;
}
.auth-brand__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(16,185,129,0.22); }
.auth-brand__headline { font: 600 34px/1.2 var(--f-sans); letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; max-width: 100%; }
.auth-brand__headline em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: #A78BFA; }
.auth-brand__sub { font: 400 16px/1.6 var(--f-sans); color: rgba(226,232,240,0.62); max-width: 100%; margin: 0 0 32px; }

.auth-brand__features { display: flex; flex-direction: column; gap: 16px; }
.auth-brand__feature { display: flex; align-items: flex-start; gap: 12px; }
.auth-brand__feature-icon {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; margin-top: 1px;
    background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.22);
    display: flex; align-items: center; justify-content: center; color: #A78BFA;
}
.auth-brand__feature-text strong { display: block; font: 600 13.5px/1.35 var(--f-sans); color: #fff; margin-bottom: 2px; letter-spacing: -0.01em; }
.auth-brand__feature-text span { font: 400 12px/1.5 var(--f-sans); color: rgba(226,232,240,0.55); }

@media (max-width: 900px) {
    .auth-brand__headline { font-size: 26px; }
    .auth-brand__sub { margin-bottom: 22px; }
}
@media (max-width: 480px) {
    .auth-brand__headline { font-size: 22px; }
    .auth-brand__eyebrow { margin-bottom: 14px; }
}

/* ---- Right: form panel ---- */
.auth-form-pane { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: var(--bg-secondary); }
@media (max-width: 480px) { .auth-form-pane { padding: 36px 20px 44px; } }
.auth-form { width: 100%; max-width: 380px; }

.auth-form__eyebrow { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--indigo); margin-bottom: 18px; }
.auth-form__eyebrow-bar { width: 16px; height: 2px; border-radius: 1px; background: var(--indigo); }
.auth-form__title { font: 700 26px/1.2 var(--f-sans); letter-spacing: -0.02em; color: var(--text-display); margin: 0 0 8px; }
.auth-form__sub { font: 400 13.5px/1.5 var(--f-sans); color: var(--text-muted); margin: 0 0 30px; }

/* Organization identity chip — shown on the /{slug}/adminlogin variant */
.auth-org { display: flex; align-items: center; gap: 11px; padding: 11px 14px; margin-bottom: 26px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; }
.auth-org__avatar {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--indigo-2), var(--violet));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font: 700 14px/1 var(--f-sans);
}
.auth-org__logo { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; object-fit: contain; background: #fff; border: 1px solid var(--border); }
.auth-org__name { font: 600 13.5px/1.3 var(--f-sans); color: var(--text-display); }
.auth-org__meta { font: 500 10.5px/1 var(--f-mono); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

.field { margin-bottom: 16px; position: relative; }
.field label { display: block; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px; }
.field-input-wrap { position: relative; }
.field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; display: flex; }
.field input {
    width: 100%; height: 46px; padding: 0 14px 0 40px;
    background: var(--bg-primary); border: 1.5px solid var(--border); border-radius: 12px;
    font: 500 14px/1 var(--f-sans); color: var(--text-display);
    outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
/* Password field reserves right-side space for the show/hide toggle */
.field:has(.field-toggle) input { padding-right: 40px; }
.field input::placeholder { color: var(--text-subtle); font-weight: 400; }
.field input:focus { border-color: var(--indigo); background: var(--input-bg-focus); box-shadow: 0 0 0 4px rgba(79,70,229,0.10); }
.field-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--text-subtle); padding: 4px; display: flex; border-radius: 6px; }
.field-toggle:hover { color: var(--indigo); background: var(--bg-tertiary); }

.auth-btn {
    width: 100%; height: 48px; margin-top: 6px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: linear-gradient(180deg, var(--indigo-2), var(--indigo));
    border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
    color: #fff; font: 700 14.5px/1 var(--f-sans); cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(79,70,229,0.55), 0 1px 0 rgba(255,255,255,0.2) inset;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(79,70,229,0.65), 0 1px 0 rgba(255,255,255,0.2) inset; }
.auth-btn:active { transform: scale(.99); }
.auth-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.auth-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 24px; padding: 11px 13px; background: rgba(79,70,229,0.045); border: 1px solid rgba(79,70,229,0.10); border-radius: 8px; font: 400 11.5px/1.5 var(--f-sans); color: var(--text-muted); }
.auth-security svg { flex-shrink: 0; margin-top: 1px; color: var(--indigo); opacity: .75; }

.auth-form__footer { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 12px; font: 500 14.5px/1 var(--f-sans); color: var(--text-muted); }
.auth-form__footer img { height: 28px; width: auto; filter: brightness(0) opacity(.9); }

/* ---- Invalid-route gate (gateway.html) ---- */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: radial-gradient(70% 60% at 50% 0%, rgba(139,92,246,0.06) 0%, transparent 60%), var(--bg-primary); }
@media (max-width: 480px) { .gate { padding: 36px 18px; } }
.gate-card { width: 100%; max-width: 440px; text-align: center; }

.gate-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 34px; }
/* logo_white.png rendered black — .gate's background is light (same trick
   the original .brand-mark--dark used). */
.gate-brand__logo { width: 60px; height: 56px; object-fit: contain; flex-shrink: 0; filter: brightness(0); }
.gate-brand__word { font: 700 24px/1 var(--f-sans); letter-spacing: -0.02em; color: var(--text-display); }
.gate-brand__word .np { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--violet); }

.gate-code { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; margin-bottom: 28px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.gate-code__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.gate-code__text { font: 700 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--text-muted); }

.gate-glyph { width: 76px; height: 76px; margin: 0 auto 26px; border-radius: 22px; background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(139,92,246,0.10)); border: 1px solid rgba(79,70,229,0.14); display: flex; align-items: center; justify-content: center; color: var(--indigo); }

.gate-title { font: 700 26px/1.25 var(--f-sans); letter-spacing: -0.02em; color: var(--text-display); margin: 0 0 12px; }
.gate-title em { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--violet); }
.gate-sub { font: 400 14px/1.6 var(--f-sans); color: var(--text-muted); margin: 0 auto 30px; max-width: 360px; }

.gate-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* Primary action on this screen — the only realistic next step for a
   legitimate visitor is finding their own org's sign-in page, so this
   reads as a real button, not a small afterthought link. */
.gate-alt {
    width: 100%; max-width: 280px; height: 46px;
    font: 700 14px/1 var(--f-sans); color: var(--indigo);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; background: var(--bg-secondary);
    border: 1.5px solid var(--indigo); border-radius: 12px;
}
.gate-alt:hover { background: rgba(79,70,229,0.06); }

.gate-slug-form { display: none; margin-top: 6px; width: 100%; max-width: 280px; align-items: center; gap: 8px; }
.gate-slug-form.is-open { display: flex; }
.gate-slug-form input { flex: 1; height: 42px; padding: 0 12px; background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: 8px; font: 500 13px/1 var(--f-mono); color: var(--text-display); outline: none; }
.gate-slug-form input:focus { border-color: var(--indigo); }
.gate-slug-form button { height: 42px; width: 42px; flex-shrink: 0; background: linear-gradient(180deg, var(--indigo-2), var(--indigo)); border: 0; border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.gate-card .auth-form__footer { margin-top: 40px; }

/* ---------- HTMX loading state ---------- */
.ec-loading { position: relative; }
.ec-loading::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139,92,246,0.06) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: ecShimmer 1.2s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes ecShimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-skeleton, .skeleton-shimmer, [class*="skeleton"] { animation: none; background: var(--surface-2); }
}

/* ---------- Centralised image uploader (components/_uploader.html) ---------- */
.ec-uploader { display: flex; flex-direction: column; gap: 6px; }
.ec-uploader__label {
    font: 500 12px/1.2 var(--f-sans);
    color: var(--text-subtle);
    letter-spacing: .02em;
}
.ec-uploader__zone {
    position: relative;
    min-height: 168px;
    border: 1px dashed var(--hairline-2, rgba(255,255,255,0.14));
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    display: grid; place-items: center;
    cursor: pointer; overflow: hidden;
    transition: border-color .15s, background-color .15s;
    outline: none;
}
.ec-uploader__zone:hover,
.ec-uploader__zone:focus-visible,
.ec-uploader__zone.is-drag {
    border-color: var(--indigo);
    background: var(--indigo-10, color-mix(in srgb, var(--indigo) 10%, transparent));
}
.ec-uploader__preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ec-uploader__cta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 24px; text-align: center; color: var(--text-subtle);
}
.ec-uploader__icn {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(139,92,246,0.18); color: #A78BFA;
}
.ec-uploader__primary {
    font: 500 13px/1.3 var(--f-sans); color: var(--text-main);
}
.ec-uploader__hint {
    font: 400 11.5px/1.4 var(--f-sans); color: var(--text-subtle);
}
.ec-uploader__overlay {
    position: absolute; inset: 0;
    background: rgba(13,17,28,0.78);
    color: #fff; display: grid; place-items: center;
    font: 500 13px/1.2 var(--f-sans); letter-spacing: .02em;
}
/* display:grid above overrides the HTML [hidden] attribute — force none when hidden */
.ec-uploader__overlay[hidden],
.ec-uploader__row[hidden] { display: none !important; }
.ec-uploader__row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font: 400 11.5px/1.3 var(--f-mono, ui-monospace);
}
.ec-uploader__url {
    flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-all;
    color: var(--text-subtle);
}
@media (min-width: 480px) {
    .ec-uploader__url {
        flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; word-break: normal;
    }
}
.ec-uploader__error { margin-top: 4px; }

[data-theme="light"] .ec-uploader__zone {
    border-color: rgba(15,23,42,0.16);
    background: rgba(15,23,42,0.02);
}
[data-theme="light"] .ec-uploader__zone:hover,
[data-theme="light"] .ec-uploader__zone:focus-visible,
[data-theme="light"] .ec-uploader__zone.is-drag {
    border-color: var(--indigo);
    background: var(--indigo-10, color-mix(in srgb, var(--indigo) 10%, transparent));
}
[data-theme="light"] .ec-uploader__icn { color: #7C3AED; }
[data-theme="light"] .ec-uploader__overlay { background: rgba(255,255,255,0.85); color: #0F172A; }

/* ---------- Public event page (anonymous detail view) ---------- */
.ec-pub-event { background: var(--bg, #0B0E16); color: var(--text-display, #F4F4F5); min-height: 100vh; }
.ec-pub-event__hero {
    position: relative; height: 360px;
    background-size: cover; background-position: center;
}
.ec-pub-event__hero-mask {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(11,14,22,0.85) 75%, var(--bg) 100%);
}
.ec-pub-event__shell { max-width: 880px; margin: -90px auto 0; padding: 0 24px 80px; position: relative; z-index: var(--z-raised); }
.ec-pub-event__crumb {
    display: flex; gap: 6px; align-items: center;
    font: 500 12.5px/1.2 var(--f-mono, ui-monospace);
    color: var(--text-subtle); margin-bottom: 12px;
}
.ec-pub-event__crumb a { color: var(--text-subtle); text-decoration: none; }
.ec-pub-event__crumb a:hover { color: var(--text-display); }
.ec-pub-event__title { font: 700 40px/1.1 var(--f-sans); letter-spacing: -0.02em; margin: 0 0 24px; }
.ec-pub-event__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin-bottom: 32px;
    padding: 18px; border-radius: 14px;
    background: var(--glass-strong, rgba(13,17,28,0.78));
    border: 1px solid var(--hairline-2, rgba(255,255,255,0.08));
    backdrop-filter: blur(20px) saturate(160%);
}
.ec-pub-event__meta-item { display: flex; flex-direction: column; gap: 2px; }
.ec-pub-event__meta-k {
    font: 500 11px/1.2 var(--f-mono, ui-monospace);
    text-transform: uppercase; letter-spacing: .12em; color: var(--text-subtle);
}
.ec-pub-event__meta-v { font: 500 14px/1.4 var(--f-sans); color: var(--text-display); }
.ec-pub-event__section { margin: 28px 0; }
.ec-pub-event__section h2 {
    font: 600 20px/1.2 var(--f-sans); letter-spacing: -0.01em;
    margin: 0 0 10px; color: var(--text-display);
}
.ec-pub-event__section p { font: 400 15px/1.55 var(--f-sans); color: var(--text-main); margin: 0; }
.ec-pub-event__footer-note {
    margin-top: 48px; padding-top: 18px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
    font: 400 12.5px/1.5 var(--f-sans); color: var(--text-subtle);
}

[data-theme="light"] .ec-pub-event { background: #FFFFFF; color: #0F172A; }
[data-theme="light"] .ec-pub-event__hero-mask {
    background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.85) 75%, #FFFFFF 100%);
}
[data-theme="light"] .ec-pub-event__title { color: #0F172A; }
[data-theme="light"] .ec-pub-event__meta { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .ec-pub-event__meta-v { color: #0F172A; }
[data-theme="light"] .ec-pub-event__section h2 { color: #0F172A; }
[data-theme="light"] .ec-pub-event__section p { color: #1F2937; }

/* ====================================================================
   Premium public event page (.ev-pub*) — editorial / Humanitix-style.
   ==================================================================== */

/* Escape base_public.html's centred `.public-shell` so the hero can
   paint edge-to-edge. Also drop the platform atmosphere overlay. */
.public-shell:has(.ev-pub) { max-width: none; padding: 0; margin: 0; }
body.public:has(.ev-pub) .atmosphere { display: none; }

:root {
    /* Inkblot palette (cream + deep navy + indigo accent) so the detail
       page shares the public portal framework. Hero overlay stays dark
       via .ev-pub__hero-mask so the white hero text remains legible. */
    --pub-bg:        #F0EEEA;
    --pub-surface:   #F8F6F1;
    --pub-elev:      #FFFFFF;
    --pub-text:      #161B2D;
    --pub-ink-soft:  #363D55;
    --pub-muted:     #7A8090;
    --pub-faint:     #A6AAB6;
    --pub-rule:      #CFCCBF;
    --pub-accent:    #3F4FB8;
    --pub-accent-ink:#F1F2FB;
    --pub-accent-2:  #D97757;
    --pub-serif:     "DM Serif Display", "Instrument Serif", Georgia, serif;
    --pub-sans:      "DM Sans", "Manrope", "Geist", system-ui, sans-serif;
}

.ev-pub {
    background: var(--pub-bg);
    color: var(--pub-text);
    min-height: 100vh;
    font-family: var(--pub-sans);
    font-feature-settings: "ss01", "cv11";
}

/* ---- Hero (now a clean unobstructed banner — title moved into the
       left content column via .ev-pub__heading below) ---- */
.ev-pub__hero {
    position: relative;
    min-height: 320px;
    max-height: 420px;
    padding: 0;
    background-color: #1a1d29;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Centered hero image with constrained width to avoid extreme breadth stretch */
.ev-pub__hero--flat {
    background: linear-gradient(135deg, var(--pub-accent) 0%, #1a1d29 100%);
    min-height: 170px;
    max-height: 210px;
}

/* ---- Event intro card over the hero banner ---- */
.ev-pub__shell {
    max-width: 1200px;
    margin: -120px auto 0;
    padding: 0 24px 56px;
    position: relative;
    z-index: var(--z-raised);
}
@media (max-width: 1100px) {
    .ev-pub__shell {
        margin-top: -90px;
    }
}
.ev-pub__intro-card {
    background: #fbf6ec;
    border: 1px solid rgba(15,17,21,0.08);
    border-radius: 28px;
    box-shadow: 0 34px 90px -46px rgba(22,27,45,.24);
    padding: 34px;
    margin-bottom: 34px;
}
@media (max-width: 1100px) {
    .ev-pub__intro-card {
        padding: 26px;
    }
}
.ev-pub__intro-card .ev-pub__heading {
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(15,17,21,0.08);
}
.ev-pub__intro-card .ev-pub__title {
    color: var(--pub-text);
    font-size: clamp(42px, 4.5vw, 52px);
    max-width: 24ch;
}
.ev-pub__intro-card .ev-pub__blurb {
    color: var(--pub-muted);
    max-width: 54ch;
    font-size: 16px;
    line-height: 1.75;
}
.ev-pub__hero-mask {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(11,13,20,0.20) 0%,
        rgba(11,13,20,0.55) 55%,
        rgba(11,13,20,0.95) 100%);
}
.ev-pub__hero-inner {
    position: relative; z-index: var(--z-raised);
    max-width: 1080px; margin: 0 auto;
    padding: clamp(60px, 12vw, 140px) 28px 56px;
    display: flex; flex-direction: column; gap: 14px;
}
.ev-pub__chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px;
    background: var(--pub-accent);
    border: 1px solid var(--pub-accent);
    color: var(--pub-accent-ink);
    border-radius: 999px;
    font: 600 11.5px/1 var(--pub-sans);
    text-transform: uppercase; letter-spacing: .14em;
}
.ev-pub__chip-dot { background: var(--pub-accent-ink) !important; }
.ev-pub__chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pub-accent); }
.ev-pub__title {
    font-family: var(--pub-serif);
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.04; letter-spacing: -0.02em;
    margin: 4px 0 0; color: #FBFAF6;
    max-width: 18ch;
}
.ev-pub__blurb {
    font: 400 17px/1.55 var(--pub-sans);
    color: rgba(255,255,255,0.78);
    max-width: 60ch; margin: 8px 0 0;
}

/* ---- Shell + crumb ---- */
.ev-pub__crumb {
    display: flex; gap: 8px; align-items: center;
    font: 500 12.5px/1 var(--pub-sans);
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--pub-faint);
    margin-bottom: 22px;
    padding: 10px 14px;
    background: rgb(243 227 227 / 28%);
    border: 1px solid rgba(15,17,21,0.08);
    border-radius: 999px;
}
.ev-pub__crumb a { color: var(--pub-accent); text-decoration: none; }
.ev-pub__crumb a:hover { color: var(--pub-text); }
.ev-pub__crumb span:not(.ev-pub__chip-dot) { color: var(--pub-faint); }

/* ---- Two-column layout ---- */
.ev-pub__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 42px;
    align-items: start;
}
@media (max-width: 1100px) {
    .ev-pub__layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Meta card ---- */
.ev-pub__meta-card {
    background: var(--pub-elev);
    border: 1px solid rgba(15,17,21,0.08);
    border-radius: 22px;
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 32px;
    box-shadow: 0 18px 50px -30px rgba(22,27,45,.24);
}
.ev-pub__meta-row { display: flex; gap: 14px; align-items: flex-start; }
.ev-pub__meta-ico {
    flex: none; width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in oklab, var(--pub-accent) 12%, transparent);
    color: var(--pub-accent);
}
.ev-pub__meta-ico svg { width: 18px; height: 18px; }
.ev-pub__meta-k {
    font: 600 11px/1 var(--pub-sans);
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--pub-faint); margin-bottom: 4px;
}
.ev-pub__meta-v { font: 500 15.5px/1.45 var(--pub-sans); color: var(--pub-text); }
.ev-pub__meta-sub { display: block; font: 400 13.5px/1.55 var(--pub-sans); color: var(--pub-muted); margin-top: 2px; }
.ev-pub__meta-link {
    display: inline-block; margin-top: 6px;
    font: 500 12.5px/1 var(--pub-sans);
    color: var(--pub-accent); text-decoration: none;
}
.ev-pub__meta-link:hover { text-decoration: underline; }

/* ---- Sections + prose ---- */
.ev-pub__section { margin: 28px 0; }
.ev-pub__h2 {
    font-family: var(--pub-serif);
    font-size: 26px; line-height: 1.15; letter-spacing: -0.015em;
    margin: 0 0 12px; color: var(--pub-text);
}
.ev-pub__prose {
    font: 400 15.5px/1.75 var(--pub-sans);
    color: var(--pub-ink-soft);
    max-width: 68ch;
}
.ev-pub__prose p,
.ev-pub__prose li,
.ev-pub__prose td,
.ev-pub__prose th { color: var(--pub-ink-soft); }
.ev-pub__prose p { margin: 0 0 12px; }
.ev-pub__prose strong,
.ev-pub__prose b { color: var(--pub-text); font-weight: 600; }
.ev-pub__prose h2,
.ev-pub__prose h3,
.ev-pub__prose h4 {
    font-family: var(--pub-serif);
    color: var(--pub-text);
    margin: 20px 0 8px; letter-spacing: -0.01em;
}
.ev-pub__prose h2 { font-size: 24px; }
.ev-pub__prose h3 { font-size: 19px; }
.ev-pub__prose ul, .ev-pub__prose ol { padding-left: 1.3em; margin: 6px 0 14px; }
.ev-pub__prose li { margin: 4px 0; }
.ev-pub__prose a { color: var(--pub-accent); text-decoration: underline; text-underline-offset: 3px; }
.ev-pub__prose blockquote {
    border-left: 3px solid var(--pub-accent);
    padding: 10px 16px; margin: 16px 0;
    color: var(--pub-muted); font-style: italic;
}
.ev-pub__prose code {
    background: var(--pub-surface);
    border: 1px solid var(--pub-rule);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: "JetBrains Mono", ui-monospace;
    font-size: 13px;
    color: var(--pub-text);
}
.ev-pub__prose--muted { color: var(--pub-muted); font-size: 14.5px; }

/* ---- Tags ---- */
.ev-pub__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-pub__tag {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    background: var(--pub-surface);
    border: 1px solid var(--pub-rule);
    color: var(--pub-text);
    border-radius: 999px;
    font: 500 12.5px/1 var(--pub-sans);
}

/* ---- Side / reserve + host card ---- */
.ev-pub__side {
    position: sticky;
    top: 96px;
    display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 1100px) { .ev-pub__side { position: static; } }

.ev-pub__reserve-card {
    background: var(--pub-elev);
    border: 1px solid rgba(15,17,21,0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 28px 80px -42px rgba(22,27,45,.28);
}
.ev-pub__reserve-strip {
    background: var(--pub-accent);
    color: var(--pub-accent-ink);
    padding: 12px 22px;
    font: 600 11.5px/1 var(--pub-sans);
    text-transform: uppercase;
    letter-spacing: .15em;
}
.ev-pub__reserve-body {
    background-color: #fbf6ec;
    padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.ev-pub__reserve-price {
    font-family: var(--pub-serif);
    font-size: 28px; line-height: 1;
    color: var(--pub-text);
}
.ev-pub__reserve-price small {
    display: block;
    font: 500 11.5px/1.4 var(--pub-sans);
    color: var(--pub-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ev-pub__reserve-meta {
    border-top: 1px solid var(--pub-rule);
    padding-top: 16px;
    display: flex; flex-direction: column; gap: 14px;
}
.ev-pub__reserve-cta {
    display: inline-flex;
    width: 100%;
    align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgb(63 79 184) !important;
    background-image: none !important;
    color: #F1F2FB !important;
    border-radius: 999px;
    font: 600 15px/1 var(--pub-sans);
    border: 0;
    cursor: pointer;
    box-shadow: 0 18px 34px -18px rgba(63,79,184,0.35);
    transition: background .25s var(--pub-ease, ease), transform .25s var(--pub-ease, ease), box-shadow .25s var(--pub-ease, ease);
}
.ev-pub__reserve-cta:disabled,
.ev-pub__reserve-cta[disabled] {
    background: var(--pub-rule);
    color: var(--pub-muted);
    cursor: not-allowed;
}
.ev-pub__reserve-cta:not([disabled]):hover {
    background: linear-gradient(135deg, color-mix(in oklab, var(--pub-accent) 95%, var(--pub-accent-2) 5%), var(--pub-accent-2));
    color: var(--pub-accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 20px 42px -20px rgba(63,79,184,0.35);
}
.ev-pub__reserve-note {
    text-align: center;
    font-size: 12.5px;
    color: var(--pub-muted);
}

.ev-pub__host-card {
    background: #fbf6ec;
    border: 1px solid rgba(15,17,21,0.08);
    border-radius: 28px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 24px 60px -32px rgba(22,27,45,.22);
}
.ev-pub__host-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pub-accent), #6B7EEA);
    color: var(--pub-accent-ink);
    display: grid; place-items: center;
    font: 700 20px/1 var(--pub-serif);
}
.ev-pub__host-meta { display: flex; flex-direction: column; gap: 2px; }
.ev-pub__host-label {
    font: 500 10.5px/1 var(--pub-sans);
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--pub-faint);
}
.ev-pub__host-name { font: 600 18px/1.3 var(--pub-sans); color: var(--pub-text); }
.ev-pub__cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 20px;
    background: var(--pub-accent);
    color: var(--pub-accent-ink);
    border: none; border-radius: 999px;
    font: 600 14px/1 var(--pub-sans);
    cursor: pointer;
    transition: transform .15s, box-shadow .18s, opacity .15s;
}
.ev-pub__cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -18px rgba(63,79,184,0.28);
}
.ev-pub__cta:disabled { opacity: .55; cursor: not-allowed; }
.ev-pub__cta--ghost {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    background: rgb(63 79 184) !important;
    color: #F1F2FB !important;
    border: 1px solid rgba(63,79,184,0.34) !important;
    border-radius: 999px;
    text-decoration: none;
    font: 600 14px/1 var(--pub-sans);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.ev-pub__cta--ghost:hover {
    background: var(--pub-accent) !important;
    border-color: var(--pub-accent) !important;
    color: var(--pub-accent-ink) !important;
    transform: translateY(-1px);
}

.ev-pub__footer-note {
    margin-top: 48px; padding-top: 20px;
    border-top: 1px solid var(--pub-rule);
    font: 400 13px/1.5 var(--pub-sans);
    color: var(--pub-muted);
}

/* ---- Light theme ---- */
[data-theme="light"] .ev-pub {
    --pub-bg: #F0EEEA;
    --pub-surface: #FFFFFF;
    --pub-elev: #FFFFFF;
    --pub-text: #161B2D;
    --pub-muted: rgba(55,63,90,0.74);
    --pub-faint: rgba(87,94,120,0.45);
    --pub-rule: rgba(15,17,21,0.10);
    --pub-accent: #3F4FB8;
    --pub-accent-ink: #F1F2FB;
}
[data-theme="light"] .ev-pub__hero-mask {
    background: linear-gradient(180deg,
        rgba(250,248,242,0.10) 0%,
        rgba(250,248,242,0.65) 60%,
        var(--pub-bg) 100%);
}
[data-theme="light"] .ev-pub__title { color: #14131C; }
[data-theme="light"] .ev-pub__blurb { color: rgba(15,17,21,0.78); }
[data-theme="light"] .ev-pub__cta { color: #FFFCF2; }

/* ---------- Premium full-page forms (events new / edit, etc.) ---------- */
.ec-form { display: flex; flex-direction: column; gap: 18px; }
.ec-form__card { padding: 0; overflow: hidden; }
.ec-form__card > .form-grid { padding: 22px 26px 26px; gap: 18px 20px; }
.ec-form__section-head {
    display: flex; flex-direction: column; gap: 4px;
    padding: 18px 26px 16px;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(139,92,246,0.04) 0%, transparent 100%);
}
.ec-form__step-pill {
    align-self: flex-start;
    font: 600 10.5px/1.2 var(--f-mono, ui-monospace);
    text-transform: uppercase; letter-spacing: .14em;
    padding: 4px 10px; border-radius: 999px;
    color: #C4B5FD; background: rgba(139,92,246,0.16);
    border: 1px solid rgba(167,139,250,0.30);
}
.ec-form__section-title {
    margin: 6px 0 0;
    font: 600 18px/1.25 var(--f-sans);
    letter-spacing: -0.01em;
    color: var(--text-display, #F4F4F5);
}
.ec-form__section-sub {
    margin: 2px 0 0;
    font: 400 12.5px/1.45 var(--f-sans);
    color: var(--text-subtle);
}
.ec-form__footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 14px 22px;
    background: var(--glass-strong, rgba(13,17,28,0.78));
    border: 1px solid var(--hairline-2, rgba(255,255,255,0.08));
    border-radius: 14px;
    backdrop-filter: blur(20px) saturate(160%);
    position: sticky; bottom: 16px;
    box-shadow: 0 12px 32px -16px rgba(0,0,0,0.50);
    z-index: var(--z-raised);
}
.ec-form__actions { display: flex; gap: 10px; }
.ec-form__card .form-row > label {
    font: 500 11.5px/1.2 var(--f-mono, ui-monospace);
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--text-subtle);
    margin-bottom: 6px; display: block;
}

[data-theme="light"] .ec-form__section-head {
    background: linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 100%);
    border-bottom-color: rgba(15,23,42,0.08);
}
[data-theme="light"] .ec-form__step-pill {
    color: #6D28D9; background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.30);
}
[data-theme="light"] .ec-form__footer {
    background: rgba(255,255,255,0.95);
    border-color: rgba(15,23,42,0.10);
}


/* ---------- Toast tray (top-right, premium pill) ---------- */
.ec-toast-tray {
    position: fixed;
    top: 18px; right: 18px;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 36px);
}
.ec-toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    width: 360px;
    padding: 14px 14px 12px 16px;
    background: #15171C;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    color: var(--text-display, #F4F4F5);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.ec-toast.show { opacity: 1; transform: translateX(0); }
.ec-toast.hide { opacity: 0; transform: translateX(6px); }

/* Icon tile on the left — soft tinted rounded square, colored by kind
   (matches the "Admin Design" feedback toast). Top-aligned so it anchors
   to the title row when the message wraps to multiple lines. */
.ec-toast__icon {
    width: 30px; height: 30px;
    flex: none;
    align-self: start;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ec-toast__icon svg { width: 18px; height: 18px; }

/* Header row: title + close button. */
.ec-toast__head {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    align-items: center;
}
.ec-toast__title {
    font: 600 13.5px/1.25 var(--f-sans);
    color: var(--text-display, #F4F4F5);
    letter-spacing: -0.005em;
}
.ec-toast__text {
    margin-top: 4px;
    font: 400 12.5px/1.45 var(--f-sans);
    color: rgba(255,255,255,0.58);
}
.ec-toast__actions {
    margin-top: 10px;
    display: flex;
    gap: 14px;
}
.ec-toast__action {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-display);
    font: 600 12.5px/1.2 var(--f-sans);
    cursor: pointer;
}
.ec-toast__action:hover { text-decoration: underline; text-underline-offset: 3px; }

.ec-toast__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .14s, color .14s;
}
.ec-toast__close:hover { background: rgba(255,255,255,0.08); color: var(--text-display); }
.ec-toast__close svg { width: 12px; height: 12px; }

/* Kind variants — tinted icon tile (soft bg + glyph color). Rest stays neutral. */
.ec-toast--good    .ec-toast__icon { background: rgba(16,185,129,0.16); color: #10B981; }
.ec-toast--danger  .ec-toast__icon { background: rgba(244,63,94,0.16);  color: #FB7185; }
.ec-toast--warn    .ec-toast__icon { background: rgba(245,158,11,0.16); color: #F59E0B; }
.ec-toast--info    .ec-toast__icon { background: rgba(139,92,246,0.16); color: var(--violet-2, #A78BFA); }
.ec-toast--loading .ec-toast__icon { background: rgba(6,182,212,0.16);  color: var(--cyan-2, #06B6D4); }

/* Loading variant — conic mini-ring in place of a static glyph.
   Reuses the @keyframes ecSpin defined in components/theme.css. */
.ec-toast__spin {
    width: 18px; height: 18px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 10%, var(--cyan-2, #06B6D4) 80%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: ecSpin .8s linear infinite;
}

/* Auto-dismiss progress meter — visualizes the strict TOAST_TTL_MS countdown.
   Duration is fed from JS via --ec-toast-ttl so CSS and the JS timer agree. */
.ec-toast__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 0 0 10px 10px; }
.ec-toast__progress > i {
    position: absolute; inset: 0; transform-origin: left center;
    background: currentColor; opacity: .85;
    animation: ecToastProgress var(--ec-toast-ttl, 5000ms) linear forwards;
}
@keyframes ecToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ec-toast--good    .ec-toast__progress { color: #22C55E; }
.ec-toast--danger  .ec-toast__progress { color: #F43F5E; }
.ec-toast--warn    .ec-toast__progress { color: #F59E0B; }
.ec-toast--info    .ec-toast__progress { color: #38BDF8; }
.ec-toast--loading .ec-toast__progress { color: var(--cyan-2, #06B6D4); }

/* Light theme — single consolidated block (deduped). */
[data-theme="light"] .ec-toast {
    background: #FFFFFF;
    border-color: rgba(15,23,42,0.10);
    color: #0F172A;
    box-shadow: 0 18px 40px -16px rgba(15,23,42,0.18),
                0 0 0 1px rgba(15,23,42,0.04) inset;
}
[data-theme="light"] .ec-toast__title { color: #0F172A; }
[data-theme="light"] .ec-toast__text  { color: rgba(15,23,42,0.62); }
[data-theme="light"] .ec-toast__close { color: rgba(15,23,42,0.50); }
[data-theme="light"] .ec-toast__close:hover { background: rgba(15,23,42,0.06); color: #0F172A; }
[data-theme="light"] .ec-toast__action { color: #0F172A; }
[data-theme="light"] .ec-toast--good   { border-color: rgba(34,197,94,0.35); }
[data-theme="light"] .ec-toast--danger { border-color: rgba(244,63,94,0.40); }
[data-theme="light"] .ec-toast--warn   { border-color: rgba(245,158,11,0.40); }
[data-theme="light"] .ec-toast--info   { border-color: rgba(124,58,237,0.40); }

@media (prefers-reduced-motion: reduce) {
    .ec-toast__progress > i, .ec-toast__spin { animation: none; }
}

/* ---------- Bootstrap modal — brand reskin ---------- */
.modal-content {
    background: var(--surface-2);
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius);
    color: var(--text-main);
    backdrop-filter: blur(20px);
}
.modal-header, .modal-footer {
    border-color: var(--hairline);
}
.modal-header {
    align-items: flex-start;
    padding: 22px 24px 16px;
}
.modal-body  { padding: 18px 24px; }
.modal-footer { padding: 16px 24px 20px; gap: 8px; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(2); }
[data-theme="light"] .btn-close-white { filter: none; }
.cms-modal-overlay {
  background: rgba(0, 0, 0, .55);
}


/* =====================================================================
   EMERGENCY: pointer-events on all decorative / blur overlays.
   The premium redesign introduced absolute-positioned halos / gradient
   layers that were swallowing clicks on form inputs and table buttons.
   Every one of these is presentational only — never interactive.
   ===================================================================== */
.ops-hero::before,
.ops-kpi::before,
.ops-tile__halo,
.ops-empty__halo,
.atmosphere,
.atmosphere::before,
.atmosphere::after {
    pointer-events: none !important;
}

/* Ensure inputs / textareas / selects always sit above sibling decoration. */
.modal-content .input,
.modal-content .select,
.modal-content textarea,
.modal-content input,
.modal-content select,
.modal-content button {
    position: relative;
    z-index: var(--z-raised);
    pointer-events: auto;
}
.modal-content .form-row,
.modal-content .form-grid,
.modal-content .modal-body,
.modal-content form { position: relative; z-index: var(--z-raised); }

/* Modal must reliably beat the .app stacking context backdrop traps. */
.modal { z-index: var(--z-modal) !important; }
.modal-backdrop { z-index: calc(var(--z-modal) - 1) !important; }

/* Premium icon system ----------------------------------------------- */
.ec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: currentColor;
    transition: filter .18s ease, color .18s ease, transform .18s ease;
}
.ec-ico svg { display: block; width: 1em; height: 1em; }
.ec-ico--14 { width: 14px; height: 14px; font-size: 14px; }
.ec-ico--16 { width: 16px; height: 16px; font-size: 16px; }
.ec-ico--18 { width: 18px; height: 18px; font-size: 18px; }
.ec-ico--20 { width: 20px; height: 20px; font-size: 20px; }

/* Glow accents — subtle by default, brighter on hover. */
.ec-ico--glow-blue { color: #67E8F9; filter: drop-shadow(0 0 4px rgba(34,211,238,0.45)); }
.ec-ico--glow-blue:hover,
*:hover > .ec-ico--glow-blue { filter: drop-shadow(0 0 7px rgba(34,211,238,0.85)); }

.ec-ico--glow-violet { color: #C4B5FD; filter: drop-shadow(0 0 4px rgba(167,139,250,0.45)); }
.ec-ico--glow-violet:hover,
*:hover > .ec-ico--glow-violet { filter: drop-shadow(0 0 7px rgba(167,139,250,0.85)); }

.ec-ico--glow-lime { color: var(--text-subtle); transition: color .18s, filter .18s; }
.ec-ico--glow-lime:hover,
*:hover > .ec-ico--glow-lime {
    color: #BEF264;
    filter: drop-shadow(0 0 6px rgba(190,242,100,0.7));
}

.ec-ico--glow-rose { color: var(--text-subtle); }
.ec-ico--glow-rose:hover,
*:hover > .ec-ico--glow-rose {
    color: #FCA5A8;
    filter: drop-shadow(0 0 6px rgba(244,63,94,0.7));
}

/* =====================================================================
   NEURAL OPS — Tenant Management Console
   Premium dark/atmospheric system. Glassmorphic surfaces, gradient
   accent lines, pulse indicators, hover-lift cards with brand halo.
   ===================================================================== */

/* Hero --------------------------------------------------------------- */
.ops-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 28px 28px;
    margin-bottom: 18px;
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,0.10), transparent 50%),
        radial-gradient(120% 140% at 100% 0%, rgba(6,182,212,0.08), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--hairline);
    backdrop-filter: blur(24px) saturate(140%);
    overflow: hidden;
}
.ops-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,0.04) 50%, transparent 50.5%) 0 0 / 16px 16px,
        radial-gradient(circle at 80% -10%, rgba(139,92,246,0.18), transparent 50%);
    pointer-events: none;
    opacity: 0.55;
}
.ops-hero__left { flex: 1; min-width: 0; position: relative; }
.ops-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(139,92,246,0.10);
    border: 1px solid rgba(139,92,246,0.30);
    font: 500 10.5px/1 var(--f-mono);
    color: var(--text-display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
.ops-hero__divider { width: 1px; height: 11px; background: rgba(255,255,255,0.16); }
.ops-hero__title {
    margin: 0 0 8px;
    font: 600 36px/1.05 var(--f-display, var(--f-sans));
    letter-spacing: -0.025em;
    color: var(--text-display);
    position: relative;
}
.ops-hero__title em {
    font-style: italic;
    color: var(--text-display);
}
.ops-hero__sub {
    margin: 6px 0 0;
    max-width: 760px;
    font: 400 14px/1.55 var(--f-sans);
    color: var(--text-subtle);
}
.ops-hero__sub code {
    font-family: var(--f-mono);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--hairline);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--text-paper, var(--text-display));
    font-size: 12px;
}
.ops-hero__actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; }

/* Pulse dot --------------------------------------------------------- */
.pulse-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.pulse-dot--lime   { background: #BEF264; box-shadow: 0 0 0 0 rgba(190,242,100,0.6); animation: ops-pulse 2.2s infinite; }
.pulse-dot--violet { background: #A78BFA; box-shadow: 0 0 0 0 rgba(167,139,250,0.6); animation: ops-pulse 2.4s infinite; }
.pulse-dot--amber  { background: #F59E0B; box-shadow: 0 0 0 0 rgba(245,158,11,0.6);  animation: ops-pulse 2.0s infinite; }
@keyframes ops-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Button glow ------------------------------------------------------- */
.btn--glow {
    position: relative;
    box-shadow:
        0 0 0 1px rgba(139,92,246,0.45),
        0 8px 24px -8px rgba(139,92,246,0.55),
        inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn--glow::after {
    content: ""; position: absolute; inset: -1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(196,181,253,0.0), rgba(196,181,253,0.35), rgba(6,182,212,0.0));
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none; z-index: -1;
}
.btn--glow:hover::after { opacity: 1; }

/* KPI strip --------------------------------------------------------- */
.ops-kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.ops-kpi {
    position: relative;
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    border: 1px solid var(--hairline);
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.ops-kpi:hover { transform: translateY(-2px); border-color: var(--hairline-2); }
.ops-kpi::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.45), transparent);
    opacity: 0.55;
}
.ops-kpi__k {
    font: 500 10px/1 var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-subtle);
    margin-bottom: 10px;
}
.ops-kpi__v {
    font: 600 30px/1 var(--f-display, var(--f-sans));
    letter-spacing: -0.02em;
    color: var(--text-display);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.ops-kpi__sub {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px/1.3 var(--f-sans);
    color: var(--text-subtle);
}
.ops-kpi--alert::before {
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.55), transparent);
}

/* =======================================================================
   Single-page event create/edit form (.ec-event-form)
   Edit mode: full-height anchored sidebar (no card) on the left + 3
   scrollable sections on the right. Create mode: single section only.
   ======================================================================= */
[x-cloak] { display: none !important; }

.ec-event-form__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .ec-event-form__layout { grid-template-columns: 1fr; }
}

.ec-event-form__nav {
    /* Full-screen rail anchored to the left, NO card chrome. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 22px 24px 4px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--hairline);
    border-radius: 0;
    margin-left: -8px;
}
.ec-event-form__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: var(--text-main);
    text-decoration: none;
    font: 500 13.5px/1 var(--f-sans);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ec-event-form__nav a:hover { background: var(--btn-bg); color: var(--text-display); }
.ec-event-form__nav a.is-active {
    background: var(--btn-bg-hover);
    border-color: var(--hairline);
    color: var(--text-display);
}
.ec-event-form__nav-n {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--btn-bg);
    color: var(--text-subtle);
    font: 600 12px/1 var(--f-mono);
}
.ec-event-form__nav a.is-active .ec-event-form__nav-n {
    background: var(--violet);
    color: white;
}

.ec-event-form__main,
.ec-event-form__create-stack {
    display: flex; flex-direction: column; gap: 22px;
    min-width: 0;
}
.ec-event-form__section {
    scroll-margin-top: 96px;
    padding: 0;          /* override .card-pad — section-head owns padding */
    overflow: visible;   /* allow absolutely-positioned dropdowns to escape */
}

/* Section-head: clip gradient background to card's rounded top corners.
   overflow:hidden moved here from the section so dropdowns can escape. */
.ec-event-form__section-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 28px 18px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(139,92,246,0.04) 0%, transparent 100%);
    position: relative;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.ec-event-form__pill { display: none; }
.ec-event-form__pill {
    align-self: flex-start;
    font: 600 10.5px/1.2 var(--f-mono);
    text-transform: uppercase; letter-spacing: .14em;
    padding: 4px 10px; border-radius: 999px;
    color: #C4B5FD; background: rgba(139,92,246,0.16);
    border: 1px solid rgba(167,139,250,0.30);
    margin-bottom: 4px;
}
.ec-event-form__h2 {
    margin: 4px 0 0;
    font: 600 18px/1.25 var(--f-sans);
    letter-spacing: -0.01em;
    color: var(--text-display);
}
.ec-event-form__sub {
    margin: 2px 0 0;
    font: 400 13px/1.45 var(--f-sans);
    color: var(--text-subtle);
}
.ec-event-form__section > .form-grid {
    padding: 22px 28px 28px;
}
/* Interest-collection (Waitlist demand mode): opens/closes/button-name in one
   row instead of a 2-col date grid + a separate full-width row below —
   collapses to 1 column under 700px, per ADMIN_DESIGN.md §10.3's own
   two-column-grid convention (extended here to three). */
.ef-interest-grid { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
    .ef-interest-grid { grid-template-columns: 1fr; }
}

.ec-event-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 4px 4px;
}

/* ── Description & media — field sizing ────────────────────────────────
   Blurb is a short multi-line summary (textarea, user-resizable); the two
   Quill rich-text editors get generous min-heights — Description tallest,
   Highlights a step shorter — and grow with content. */
.ec-blurb { min-height: 64px; line-height: 1.5; resize: vertical; }
#ef-desc-editor  .ql-editor { min-height: 340px; }
#ef-highs-editor .ql-editor { min-height: 200px; }
.ec-quill .ql-editor { font-size: 14px; line-height: 1.6; }

[data-theme="light"] .ec-event-form__section-head {
    background: linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 100%);
    border-bottom-color: rgba(15,23,42,0.10);
}
[data-theme="light"] .ec-event-form__pill {
    color: #6D28D9; background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.30);
}
[data-theme="light"] .ec-event-form__nav { border-right-color: rgba(15,23,42,0.10); }

/* ══ Phase 30 — sidebar-tabbed event editor ════════════════════════════ */
.efx { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start; }
.efx__nav {
    position: sticky; top: 88px; display: flex; flex-direction: column; gap: 4px;
    padding: 8px; background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.efx__navbtn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-subtle);
    font: 500 14px/1.2 var(--f-sans); text-align: left; cursor: pointer;
    transition: background .12s, color .12s;
}
.efx__navbtn:hover { background: var(--surface-2); color: var(--text-main); }
.efx__navbtn.is-active {
    background: var(--indigo-15, color-mix(in srgb, var(--indigo) 15%, transparent)); border-color: var(--indigo-30, color-mix(in srgb, var(--indigo) 30%, transparent));
    color: var(--indigo); font-weight: 600;
}
.efx__navnum {
    flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--surface-2); color: var(--text-subtle);
    font: 600 11.5px/1 var(--f-mono);
}
.efx__navbtn.is-active .efx__navnum { background: var(--indigo); color: #fff; }
.efx__navlbl { flex: 1 1 auto; }
.efx__navtick {
    flex: 0 0 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--border);
    position: relative;
}
.efx__navtick.is-done { background: var(--emerald, #22C55E); border-color: var(--emerald, #22C55E); }
.efx__navtick.is-done::after {
    content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.efx__panels { min-width: 0; }
.efx-panel { scroll-margin-top: 96px; }
.efx__bar {
    /* In-flow footer — NOT sticky. The .content shell is the scroll container
       (overflow:auto), so a sticky bottom bar permanently covered the last
       form fields with no clearance to scroll them clear. An in-flow footer
       sits cleanly after the panels and can never overlap the form (mirrors
       the create-screen .ec-event-form__footer). */
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    margin-top: 22px; padding: 18px 0 4px;
    border-top: 1px solid var(--hairline);
}
.efx-check { list-style: none; margin: 0; padding: 18px 28px 26px; display: flex; flex-direction: column; gap: 11px; }
.efx-check li { display: flex; align-items: center; gap: 12px; font: 400 14px/1.4 var(--f-sans); color: var(--text-subtle); }
.efx-check__dot { flex: 0 0 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border); position: relative; }
.efx-check li.is-ok .efx-check__dot { background: var(--emerald, #22C55E); border-color: var(--emerald, #22C55E); }
.efx-check li.is-ok .efx-check__dot::after {
    content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.efx-check li.is-ok .efx-check__lbl { color: var(--text-main); }
.efx-check__lbl { flex: 1 1 auto; }
.efx-check__edit { background: none; border: none; color: var(--violet); font: 600 12.5px/1 var(--f-sans); cursor: pointer; }
@media (max-width: 900px) {
    .efx { grid-template-columns: 1fr; }
    .efx__nav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
    .efx__navbtn { white-space: nowrap; }
    .efx__navlbl { display: none; }
    .efx__navbtn.is-active .efx__navlbl { display: inline; }
}
[data-theme="light"] .efx__navbtn.is-active { background: var(--indigo-15, color-mix(in srgb, var(--indigo) 15%, transparent)); border-color: var(--indigo-30, color-mix(in srgb, var(--indigo) 30%, transparent)); }

/* ── Chip / tag input — category multi-entry fields (ecChips) ──────────── */
.ec-chips {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 7px 8px; min-height: 42px;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .12s;
}
.ec-chips:focus-within { border-color: var(--indigo); }
/* renamed from the bare .ec-chip/.ec-chip__x this shared with (and lost to,
   by CSS load order) ec_combo.css's unified filter-chip component
   (Task 5.1) — this is a narrower, single-purpose tag-input pill, not the
   canonical chip; disambiguated to avoid ec_combo.css silently reskinning
   these tag pills */
.ec-tag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 4px 3px 10px; border-radius: 999px;
    background: rgba(139,92,246,0.14); border: 1px solid rgba(167,139,250,0.30);
    color: var(--text-main); font: 500 12.5px/1.5 var(--f-sans);
}
.ec-tag-chip__x {
    background: none; border: none; color: var(--text-subtle);
    font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 999px;
}
.ec-tag-chip__x:hover { color: var(--rose); }
.ec-chips__input {
    flex: 1 1 90px; min-width: 90px; border: none; background: transparent;
    color: var(--text-main); font: 400 14px/1.4 var(--f-sans); outline: none; padding: 4px 2px;
}
.ec-chips__input::placeholder { color: var(--text-subtle); }
[data-theme="light"] .ec-tag-chip { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.25); }

/* Mandatory-field marker — used inline next to labels. */
.ec-req {
    color: var(--rose);
    margin-left: 2px;
    font-weight: 700;
    font-size: 0.95em;
}

/* =======================================================================
   Alpine form-builder + repeater pattern (waitlist / checkout / tiers /
   promos). Shared chrome for every nested list editor.
   ======================================================================= */
.ec-builder {
    border-top: 1px solid var(--hairline);
    margin-top: 8px;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ec-builder__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ec-builder__title {
    margin: 0;
    font: 600 16px/1.2 var(--f-sans);
    color: var(--text-display);
}
.ec-builder__sub {
    margin: 4px 0 0;
    font: 400 13px/1.55 var(--f-sans);
    color: var(--text-subtle);
    max-width: 60ch;
}
.ec-builder__locked {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px;
    background: var(--btn-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
}
.ec-builder__locked-row {
    display: grid;
    grid-template-columns: 24px 1fr 80px 100px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font: 500 13px/1.2 var(--f-sans);
}
.ec-builder__locked-ico { font-size: 13px; opacity: .75; }
.ec-builder__locked-label { color: var(--text-display); }
.ec-builder__locked-type {
    font: 500 11px/1 var(--f-mono);
    color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: .1em;
}
.ec-builder__locked-req {
    font: 600 10.5px/1 var(--f-mono);
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--rose);
    text-align: right;
}
.ec-builder__list { display: flex; flex-direction: column; gap: 12px; }
.ec-builder__row {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s;
}
.ec-builder__row:hover { border-color: var(--hairline-2); }
.ec-builder__row-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--hairline);
}
.ec-builder__row-n {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--violet);
    color: white;
    font: 600 11.5px/1 var(--f-mono);
}
.ec-builder__row-grip {
    margin-left: auto;
    color: var(--text-subtle);
    font-size: 14px;
    cursor: grab;
    user-select: none;
}
.ec-builder__row-del {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--hairline);
    background: var(--btn-bg);
    color: var(--rose);
    font: 600 16px/1 var(--f-sans);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.ec-builder__row-del:hover { background: rgba(244,63,94,0.10); border-color: var(--rose); }
.ec-builder__row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
}
.ec-builder__field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
    font: 500 12px/1.2 var(--f-mono);
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-subtle);
}
.ec-builder__field > span:first-child { display: block; }
.ec-builder__field .input { text-transform: none; letter-spacing: 0; }
.ec-builder__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--input-bg);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font: 500 13px/1 var(--f-sans);
    color: var(--text-main);
    text-transform: none; letter-spacing: 0;
    cursor: pointer;
}
.ec-builder__empty {
    padding: 28px;
    text-align: center;
    color: var(--text-subtle);
    font-style: italic;
    border: 1px dashed var(--hairline);
    border-radius: 10px;
    background: var(--btn-bg);
}
.ec-builder__actions { display: flex; gap: 10px; }

@media (max-width: 900px) {
    .ec-builder__row-grid { grid-template-columns: 1fr 1fr; }
    .ec-builder__locked-row { grid-template-columns: 22px 1fr 80px; }
    .ec-builder__locked-req { display: none; }
}

/* =======================================================================
   Phase-2 Registration form — tabbed layout
   ======================================================================= */
.ec-reg-form { display: flex; flex-direction: column; gap: 18px; }
.ec-reg-form__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow-x: auto;
}
.ec-reg-form__tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font: 500 13.5px/1 var(--f-sans);
    cursor: pointer;
    transition: background-color .12s, color .12s;
    white-space: nowrap;
}
.ec-reg-form__tab:hover { background: var(--btn-bg); color: var(--text-display); }
.ec-reg-form__tab.is-active {
    background: var(--violet);
    color: white;
}
.ec-reg-form__tab.is-active .ec-reg-form__tab-n,
.ec-reg-form__tab.is-active .ec-reg-form__tab-c { color: white; }
.ec-reg-form__tab-n {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: rgba(255,255,255,0.10);
    color: var(--text-subtle);
    font: 600 11px/1 var(--f-mono);
}
.ec-reg-form__tab-c {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: var(--text-subtle);
    font: 600 11px/1 var(--f-mono);
    margin-left: auto;
}
.ec-reg-form__panel {
    padding: 18px 24px 22px;
    display: flex; flex-direction: column; gap: 14px;
}
.ec-reg-form__panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}
.ec-reg-form__panel-title {
    margin: 0;
    font: 600 17px/1.25 var(--f-sans);
    color: var(--text-display);
}
.ec-reg-form__panel-sub {
    margin: 4px 0 0;
    font: 400 13px/1.55 var(--f-sans);
    color: var(--text-subtle);
    max-width: 60ch;
}
.ec-reg-form__footer {
    display: flex; justify-content: flex-end; gap: 12px;
    padding-top: 6px;
}


/* =======================================================================
   Base-field configurator (Waitlist + Checkout form builders) — replaces
   the old static .ec-builder__locked rows. Each row exposes two iOS-style
   toggles for Visible + Required, with the lock icon shown when a toggle
   is hard-pinned (e.g. Email Required).
   ======================================================================= */
.ec-builder__base {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px;
    background: var(--btn-bg);
    border: 1px solid var(--hairline);
    border-radius: 12px;
}
.ec-builder__base-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 0 4px 6px;
    font: 600 13px/1.2 var(--f-sans);
    color: var(--text-display);
    border-bottom: 1px dashed var(--hairline);
}
.ec-builder__base-row {
    display: grid;
    grid-template-columns: 1fr 140px 140px;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 10px;
}
.ec-builder__base-label {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.ec-builder__base-ico {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: var(--btn-bg);
    color: var(--text-subtle);
    font-size: 12px;
}
.ec-builder__base-name {
    font: 600 13.5px/1.2 var(--f-sans);
    color: var(--text-display);
}
.ec-builder__base-type {
    font: 500 10.5px/1 var(--f-mono);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-subtle);
    margin-top: 3px;
}

/* iOS-style toggle. Uses the native <input type="checkbox"> as the source
   of truth (sr-only) and renders a custom track + thumb. */
.ec-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font: 500 12.5px/1 var(--f-sans);
    color: var(--text-main);
}
.ec-switch input {
    position: absolute;
    opacity: 0; width: 0; height: 0;
    pointer-events: none;
}
.ec-switch__track {
    position: relative;
    width: 28px !important;
    height: 16px !important;
    border-radius: 16px !important;
    background: var(--btn-bg-hover);
    border: 1px solid var(--hairline);
    transition: background-color .18s, border-color .18s;
}
.ec-switch__thumb {
    position: absolute;
    top: 2px !important;
    left: 2px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background: var(--text-display);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform .2s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.ec-switch input:checked + .ec-switch__track {
    background: var(--violet);
    border-color: var(--violet);
}
.ec-switch input:checked + .ec-switch__track .ec-switch__thumb {
    transform: translateX(12px) !important;
    background: white;
}
.ec-switch input:focus-visible + .ec-switch__track {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 30%, transparent);
}
.ec-switch__lbl {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
.ec-switch.is-locked { cursor: not-allowed; opacity: .85; }
.ec-switch.is-locked .ec-switch__lbl::after {
    content: " · locked";
    color: var(--text-subtle);
    font: 400 11px/1 var(--f-mono);
}

@media (max-width: 720px) {
    .ec-builder__base-row { grid-template-columns: 1fr; gap: 8px; }
}

/* =======================================================================
   EasyMDE — theme-aware overrides so the editor reads natively against
   both dark and light admin themes. CDN base CSS leaves things slightly
   "GitHub-y"; we re-skin toolbar + editor + preview surfaces to use our
   own tokens.
   ======================================================================= */
.EasyMDEContainer {
    background: var(--input-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
}
.EasyMDEContainer .editor-toolbar {
    background: var(--surface-2);
    border: 0;
    border-bottom: 1px solid var(--hairline);
    opacity: 1;
    padding: 6px 8px;
}
.EasyMDEContainer .editor-toolbar button {
    color: var(--text-main) !important;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color .12s, border-color .12s, color .12s;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: var(--btn-bg-hover);
    border-color: var(--hairline);
    color: var(--text-display) !important;
}
.EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--hairline);
}

.EasyMDEContainer .CodeMirror {
    background: var(--input-bg);
    color: var(--text-main);
    border: 0;
    font-family: var(--f-sans);
    font-size: 14.5px;
    line-height: 1.55;
    padding: 4px 2px;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--text-display); }
.EasyMDEContainer .CodeMirror-selected { background: var(--btn-bg-hover) !important; }
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: var(--btn-bg-hover) !important; }
.EasyMDEContainer .CodeMirror-placeholder { color: var(--text-subtle) !important; }
.EasyMDEContainer .cm-s-easymde .cm-header,
.EasyMDEContainer .cm-s-easymde .cm-strong { color: var(--text-display); }
.EasyMDEContainer .cm-s-easymde .cm-em       { color: var(--violet-2); font-style: italic; }
.EasyMDEContainer .cm-s-easymde .cm-link,
.EasyMDEContainer .cm-s-easymde .cm-url      { color: var(--violet-2); }
.EasyMDEContainer .cm-s-easymde .cm-comment  { color: var(--text-subtle); }
.EasyMDEContainer .cm-s-easymde .cm-quote    { color: var(--text-subtle); font-style: italic; }

.EasyMDEContainer .editor-statusbar {
    background: var(--surface-2);
    color: var(--text-subtle);
    border-top: 1px solid var(--hairline);
}
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    background: var(--surface-2);
    color: var(--text-main);
    border-left: 1px solid var(--hairline);
}
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3 { color: var(--text-display); }
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview pre {
    background: var(--btn-bg);
    color: var(--text-display);
    border-radius: 6px;
}
.EasyMDEContainer .editor-preview blockquote {
    border-left: 3px solid var(--violet);
    color: var(--text-subtle);
}
.EasyMDEContainer .editor-toolbar.fullscreen,
.EasyMDEContainer .CodeMirror-fullscreen {
    background: var(--bg, #0F1320);
}

/* ───── EasyMDE — LIGHT THEME FORCING ─────────────────────────────────
   Force every text node inside CodeMirror to a dark colour against the
   white background. CodeMirror's per-token spans (cm-header, cm-variable,
   cm-em, etc.) ship with hard-coded colours we have to overpower with
   !important + a high-specificity selector list. */
[data-theme="light"] .EasyMDEContainer { background: #FFFFFF; border-color: rgba(15,23,42,0.12); }
[data-theme="light"] .EasyMDEContainer .editor-toolbar {
    background: #F8F9FC;
    border-bottom-color: rgba(15,23,42,0.10);
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar button { color: #14110C !important; }
[data-theme="light"] .EasyMDEContainer .editor-toolbar button:hover,
[data-theme="light"] .EasyMDEContainer .editor-toolbar button.active {
    background: rgba(15,23,42,0.06);
    border-color: rgba(15,23,42,0.10);
    color: #14110C !important;
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: rgba(15,23,42,0.10);
}
[data-theme="light"] .EasyMDEContainer .CodeMirror,
[data-theme="light"] .EasyMDEContainer .CodeMirror-scroll,
[data-theme="light"] .EasyMDEContainer .CodeMirror-sizer,
[data-theme="light"] .EasyMDEContainer .CodeMirror-gutter-wrapper,
[data-theme="light"] .EasyMDEContainer .CodeMirror-lines {
    background: #FFFFFF !important;
}
[data-theme="light"] .EasyMDEContainer .CodeMirror,
[data-theme="light"] .EasyMDEContainer .CodeMirror-code,
[data-theme="light"] .EasyMDEContainer .CodeMirror pre,
[data-theme="light"] .EasyMDEContainer .CodeMirror pre.CodeMirror-line,
[data-theme="light"] .EasyMDEContainer .CodeMirror pre.CodeMirror-line-like,
[data-theme="light"] .EasyMDEContainer .CodeMirror span,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-formatting,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-variable,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-keyword,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-string,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-comment {
    color: #14110C !important;
}
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-header,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-strong { color: #0F0B05 !important; }
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-em     { color: #6D28D9 !important; font-style: italic; }
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-link,
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-url    { color: #6D28D9 !important; }
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-quote  { color: #4B4136 !important; font-style: italic; }
[data-theme="light"] .EasyMDEContainer .CodeMirror-placeholder  { color: #877E62 !important; }
[data-theme="light"] .EasyMDEContainer .CodeMirror-cursor       { border-left-color: #14110C !important; }
[data-theme="light"] .EasyMDEContainer .CodeMirror-selected     { background: rgba(124,58,237,0.18) !important; }
[data-theme="light"] .EasyMDEContainer .editor-statusbar        { background: #F8F9FC; color: #4B4136; border-top-color: rgba(15,23,42,0.10); }
[data-theme="light"] .EasyMDEContainer .editor-preview,
[data-theme="light"] .EasyMDEContainer .editor-preview-side     { background: #FFFFFF; color: #14110C; border-left-color: rgba(15,23,42,0.10); }
[data-theme="light"] .EasyMDEContainer .editor-preview h1,
[data-theme="light"] .EasyMDEContainer .editor-preview h2,
[data-theme="light"] .EasyMDEContainer .editor-preview h3,
[data-theme="light"] .EasyMDEContainer .editor-preview p,
[data-theme="light"] .EasyMDEContainer .editor-preview li,
[data-theme="light"] .EasyMDEContainer .editor-preview blockquote { color: #14110C !important; }
[data-theme="light"] .EasyMDEContainer .editor-preview code,
[data-theme="light"] .EasyMDEContainer .editor-preview pre {
    background: rgba(15,23,42,0.06);
    color: #14110C;
}

/* =======================================================================
   Public Events Index (.evx-*) — LIGHT THEME ONLY.
   Editorial layout adapted from the Sangam Collective reference.
   Self-contained; does not consume any admin / theme tokens.
   ======================================================================= */
.evx-page {
    /* Inkblot palette + Modern type pairing (from the Single Page Portal
       reference). Light-only public portal. */
    --evx-bg:        #F0EEEA;
    --evx-bg-alt:    #E5E2DB;
    --evx-ink:       #161B2D;
    --evx-ink-soft:  #363D55;
    --evx-muted:     #7A8090;
    --evx-line:      #CFCCBF;
    --evx-accent:    #3F4FB8;
    --evx-accent-ink:#F1F2FB;
    --evx-secondary: #D97757;
    --evx-card:      #F8F6F1;
    --evx-card-2:    #FFFFFF;
    --evx-radius:    12px;
    --evx-radius-lg: 24px;
    --evx-maxw:      1400px;
    --evx-shadow:    0 1px 0 rgba(0,0,0,.02), 0 24px 60px -32px rgba(22,27,45,.22);
    --evx-shadow-hv: 0 1px 0 rgba(0,0,0,.02), 0 30px 70px -30px rgba(22,27,45,.28);
    --evx-ease:      cubic-bezier(.2,.7,.2,1);
    --evx-display:   'DM Serif Display','Instrument Serif',Georgia,serif;
    --evx-body:      'DM Sans','Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;

    background: var(--evx-bg);
    color: var(--evx-ink);
    font-family: var(--evx-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Free the public shell from its centred admin-area constraints so the
   header + footer paint edge-to-edge. .public-shell defaults to
   `display: grid; place-items: center;` which shrinks the .evx-page
   child to its max-content width — that's what was bunching the events
   index into a narrow column. Switch to plain block flow + full-width. */
.public-shell:has(.evx-page) {
    display: block !important;
    place-items: initial !important;
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
}
.evx-page { width: 100%; display: flex; flex-direction: column; min-height: 100vh; }
.evx-main-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.evx-ftr { flex-shrink: 0; }
body.public:has(.evx-page) .atmosphere { display: none; }

/* Use :where() so this anchor reset has 0 specificity — explicit button /
   nav rules (.evx-btn--primary, .evx-tab.is-active, .evx-hdr__cta, ...)
   need to win color WITHOUT having to be re-specified for every <a>. */
.evx-page :where(a) { color: inherit; text-decoration: none; }
.evx-page img { max-width: 100%; display: block; }
.evx-page button { font: inherit; color: inherit; }

/* ─── Header ──────────────────────────────────────────────────────── */
.evx-hdr {
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    padding: 18px 0;
    background: rgba(240, 238, 234, 0.94); /* solid Inkblot cream — no color-mix fallback gap */
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--evx-line);
}
.evx-hdr__inner {
    max-width: var(--evx-maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.evx-hdr__logo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--evx-ink);
}
.evx-hdr__mark { color: var(--evx-accent); align-self: center; display: inline-flex; }
.evx-hdr__name {
    font-family: var(--evx-display);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -.01em;
}
.evx-hdr__sub {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--evx-muted);
    align-self: center;
}
.evx-hdr__nav { display: flex; gap: 26px; margin-left: auto; }
.evx-hdr__nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--evx-ink-soft);
    padding: 6px 2px;
    position: relative;
    transition: color .2s var(--evx-ease);
}
.evx-hdr__nav a::after {
    content: "";
    position: absolute; left: 50%; bottom: -2px;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: var(--evx-accent);
    transition: width .25s var(--evx-ease);
}
.evx-hdr__nav a:hover,
.evx-hdr__nav a.is-active { color: var(--evx-ink); }
.evx-hdr__nav a.is-active::after { width: 22px; }
.evx-hdr__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #161B2D !important;        /* explicit navy — defeats overrides */
    color: #F1F2FB !important;             /* explicit cream — visible icon stroke */
    border: 1px solid #161B2D;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 20px -10px rgba(22,27,45,0.4);
    transition: background-color .25s var(--evx-ease),
                color .25s var(--evx-ease),
                transform .25s var(--evx-ease),
                box-shadow .25s var(--evx-ease);
}
.evx-hdr__cta:hover {
    background: var(--evx-accent) !important;
    color: var(--evx-accent-ink) !important;
    border-color: var(--evx-accent);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(63,79,184,0.45);
}
.evx-hdr__cta svg { color: inherit; }
.evx-hdr__nav a { text-decoration: none; }

/* ─── Section scaffold ────────────────────────────────────────────── */
.evx-section { padding: 40px 0 52px; }
.evx-section__inner {
    max-width: var(--evx-maxw);
    margin: 0 auto;
    padding: 0 24px;
}
.evx-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.evx-section__title {
    font-family: var(--evx-display);
    font-size: clamp(34px, 5vw, 44px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 12px 0 0;
    color: var(--evx-ink);
}
.evx-section__aside {
    max-width: 300px;
    color: var(--evx-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    text-align: right;
}
.evx-section__aside > p { margin: 0; }
.evx-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--evx-accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.evx-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--evx-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--evx-accent) 22%, transparent);
}

/* ─── Tabs ────────────────────────────────────────────────────────── */
.evx-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--evx-line);
    padding-bottom: 6px;
}
.evx-tab {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--evx-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color .2s var(--evx-ease), color .2s var(--evx-ease);
}
.evx-tab:hover { color: var(--evx-ink); background: var(--evx-bg-alt); }
.evx-tab.is-active {
    background: var(--evx-ink);
    color: var(--evx-bg);
}
.evx-tab__n {
    font-size: 11px;
    color: var(--evx-muted);
    font-variant-numeric: tabular-nums;
}
.evx-tab.is-active .evx-tab__n { color: var(--evx-bg); opacity: .7; }

/* ─── Card grid ──────────────────────────────────────────────────── */
.evx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}
@media (max-width: 640px) {
    .evx-grid { grid-template-columns: 1fr; }
}
.evx-empty {
    padding: 60px 28px;
    text-align: center;
    color: var(--evx-muted);
    border: 1px dashed var(--evx-line);
    border-radius: var(--evx-radius-lg);
    background: var(--evx-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.evx-empty .evx-eyebrow { color: var(--evx-muted); }
.evx-empty__title {
    font-family: var(--evx-display);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.005em;
    color: var(--evx-ink);
    margin: 4px 0 0;
}
.evx-empty__sub { margin: 0; font-size: 15px; }
.evx-empty .evx-btn { margin-top: 12px; }

.evx-card {
    background: var(--evx-card);
    border-radius: var(--evx-radius-lg);
    overflow: hidden;
    box-shadow: var(--evx-shadow);
    transition: transform .26s var(--evx-ease), box-shadow .26s var(--evx-ease);
}
.evx-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--evx-shadow-hv);
}
.evx-card__link { display: block; color: inherit; }
.evx-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--evx-bg-alt);
}
.evx-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--evx-ease);
}
.evx-card:hover .evx-card__media img { transform: scale(1.06); }
.evx-card__media-fallback {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--evx-display);
    font-size: 80px;
    color: color-mix(in oklab, var(--evx-accent) 60%, var(--evx-bg) 40%);
    background:
        radial-gradient(circle at 30% 30%,
                        color-mix(in oklab, var(--evx-accent) 14%, var(--evx-bg-alt)),
                        var(--evx-bg-alt));
}
.evx-card__cat {
    position: absolute;
    top: 14px; left: 14px;
    background: color-mix(in oklab, var(--evx-card) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--evx-ink);
}
.evx-card__date {
    position: absolute;
    bottom: 14px; left: 14px;
    background: var(--evx-accent);
    color: var(--evx-accent-ink);
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 82px;
}
.evx-card__date .d1 {
    font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; opacity: .95;
}
.evx-card__date .d2 {
    font-family: var(--evx-display);
    font-size: 16px; line-height: 1.1;
}
.evx-card__body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.evx-card__title {
    font-family: var(--evx-display);
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.005em;
    font-weight: 400;
    margin: 0;
    color: var(--evx-ink);
}
.evx-card__blurb {
    font-size: 14px;
    color: var(--evx-ink-soft);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.evx-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    color: var(--evx-muted);
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--evx-line);
}
.evx-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.evx-card__cap { font-weight: 500; color: var(--evx-ink-soft); }
.evx-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--evx-accent);
    margin-top: 2px;
}
.evx-card__cta svg { transition: transform .25s var(--evx-ease); }
.evx-card:hover .evx-card__cta svg { transform: translateX(4px); }

/* ─── Footer ─────────────────────────────────────────────────────── */
.evx-ftr {
    background: var(--evx-ink);
    color: rgba(240, 238, 234, 0.90);
    padding: 22px 0 18px;
}
.evx-ftr__inner {
    max-width: var(--evx-maxw);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
}
@media (max-width: 640px) {
    .evx-ftr__inner { flex-direction: column; gap: 10px; text-align: center; }
}
.evx-ftr__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--evx-display);
    font-size: 18px;
    color: var(--evx-bg);
}
.evx-ftr__brand .evx-hdr__mark { color: var(--evx-accent); }
.evx-ftr__copy {
    font-size: 12.5px;
    color: rgba(240, 238, 234, 0.55);
    letter-spacing: .02em;
}

/* ─── Section variant ────────────────────────────────────────────── */
.evx-section--alt { background: var(--evx-bg-alt); }

/* ─── Eyebrow variant ────────────────────────────────────────────── */
.evx-eyebrow--muted { color: var(--evx-muted); }
.evx-dot-sm {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--evx-muted);
    display: inline-block;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.evx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 0;
    font: 500 14.5px/1 var(--evx-body);
    cursor: pointer;
    transition: transform .25s var(--evx-ease),
                background-color .25s var(--evx-ease),
                color .25s var(--evx-ease);
    white-space: nowrap;
}
.evx-btn--primary {
    background: #161B2D !important;
    color: #F1F2FB !important;
    border: 1px solid #161B2D;
    box-shadow: 0 8px 20px -10px rgba(22,27,45,0.4);
}
.evx-btn--primary:hover {
    background: var(--evx-accent) !important;
    color: var(--evx-accent-ink) !important;
    border-color: var(--evx-accent);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(63,79,184,0.45);
}
.evx-btn--primary svg { color: inherit; }
.evx-btn--ghost {
    background: transparent;
    color: var(--evx-ink);
    border: 1px solid var(--evx-line);
}
.evx-btn--ghost:hover {
    background: var(--evx-card-2);
    border-color: var(--evx-ink);
}
.evx-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 14px/1 var(--evx-body);
    color: var(--evx-ink);
    padding: 4px 0;
    position: relative;
    align-self: flex-start;
}
.evx-link-arrow::after {
    content: "";
    position: absolute; left: 0; right: 24px; bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: .25;
    transition: opacity .25s var(--evx-ease);
}
.evx-link-arrow:hover { color: var(--evx-accent); }
.evx-link-arrow:hover::after { opacity: .8; }
.evx-link-arrow svg { transition: transform .25s var(--evx-ease); }
.evx-link-arrow:hover svg { transform: translateX(3px); }

/* ─── Hero ───────────────────────────────────────────────────────── */
.evx-hero {
    position: relative;
    padding: 56px 0 72px;
    overflow: hidden;
}
.evx-hero::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .24;
    background-image:
        radial-gradient(circle at 12% 14%,
            color-mix(in oklab, var(--evx-accent) 24%, transparent) 0%, transparent 26%),
        radial-gradient(circle at 92% 88%,
            color-mix(in oklab, #2D5043 22%, transparent) 0%, transparent 28%);
}
.evx-hero .evx-section__inner { position: relative; }
.evx-hero__title {
    font-family: var(--evx-display);
    font-weight: 400;
    font-size: clamp(34px, 6vw, 44px);
    line-height: 1.02;
    letter-spacing: -.01em;
    margin: 12px 0 0;
    color: var(--evx-ink);
}
.evx-hero__dot { color: var(--evx-accent); }
.evx-hero__lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--evx-ink-soft);
    max-width: 520px;
    margin: 20px 0 0;
}
.evx-hero__ctas {
    margin-top: 22px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Featured event card */
.evx-featured {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    background: var(--evx-card);
    border-radius: var(--evx-radius-lg);
    overflow: hidden;
    box-shadow: var(--evx-shadow);
}
.evx-featured__media {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    background: var(--evx-bg-alt);
}
.evx-featured__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--evx-ease);
}
.evx-featured:hover .evx-featured__media img { transform: scale(1.04); }
.evx-featured__fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--evx-display);
    font-size: 88px;
    color: color-mix(in oklab, var(--evx-accent) 60%, var(--evx-bg) 40%);
    background:
        radial-gradient(circle at 30% 30%,
            color-mix(in oklab, var(--evx-accent) 14%, var(--evx-bg-alt)),
            var(--evx-bg-alt));
}
.evx-featured__badge {
    position: absolute;
    top: 18px; left: 18px;
    background: color-mix(in oklab, var(--evx-ink) 86%, transparent);
    color: var(--evx-bg);
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.evx-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--evx-accent);
    animation: evx-pulse 1.8s var(--evx-ease) infinite;
}
@keyframes evx-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--evx-accent) 70%, transparent); }
    70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--evx-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--evx-accent) 0%, transparent); }
}
.evx-featured__body {
    padding: 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.evx-featured__title {
    font-family: var(--evx-display);
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0;
    font-weight: 400;
    color: var(--evx-ink);
}
.evx-featured__blurb {
    margin: 0;
    font-size: 15px;
    color: var(--evx-ink-soft);
    max-width: 440px;
    line-height: 1.6;
}
.evx-featured__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--evx-muted);
}

/* Stats strip */
.evx-stats {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--evx-line);
    border-bottom: 1px solid var(--evx-line);
}
.evx-stat {
    padding: 26px 0;
    border-right: 1px solid var(--evx-line);
}
.evx-stat:last-child { border-right: 0; }
.evx-stat:not(:first-child) { padding-left: 28px; }
.evx-stat__v {
    font-family: var(--evx-display);
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--evx-ink);
}
.evx-stat__l {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--evx-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
}

.evx-about__cta { margin-top: 8px; }

/* ─── Logo in header / footer ─────────────────────────────────────── */
.evx-hdr__logo-img {
    width: 36px; height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--evx-line);
    background: var(--evx-card-2);
}
.evx-ftr__logo {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: cover;
}
.evx-hero__accent {
    font-style: italic;
    color: var(--evx-accent);
}

/* ─── About grid ──────────────────────────────────────────────────── */
.evx-about__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: start;
}
.evx-about__lead {
    font-family: var(--evx-display);
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -.005em;
    margin: 0 0 28px;
    color: var(--evx-ink);
}
.evx-pillars { display: grid; gap: 24px; }
.evx-pillar {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 4px 18px;
    align-items: baseline;
    padding-top: 20px;
    border-top: 1px solid var(--evx-line);
}
.evx-pillar__n {
    font-family: var(--evx-display);
    font-size: 22px;
    color: var(--evx-accent);
    grid-row: span 2;
}
.evx-pillar__h {
    font-size: 17px;
    font-weight: 600;
    color: var(--evx-ink);
}
.evx-pillar__b {
    font-size: 14.5px;
    color: var(--evx-muted);
    line-height: 1.5;
}
.evx-about__media {
    position: relative;
    border-radius: var(--evx-radius-lg);
    overflow: hidden;
    background: var(--evx-card);
}
.evx-about__media img {
    width: 100%; height: 560px;
    object-fit: cover;
    display: block;
}
.evx-about__quote {
    position: absolute;
    left: 22px; right: 22px; bottom: 22px;
    background: color-mix(in oklab, var(--evx-card) 92%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: 22px;
    border-radius: var(--evx-radius);
    border: 1px solid color-mix(in oklab, var(--evx-line) 70%, transparent);
}
.evx-about__quote p {
    font-family: var(--evx-display);
    font-size: 19px;
    line-height: 1.35;
    margin: 8px 0 12px;
    color: var(--evx-ink);
}
.evx-about__sig {
    font-size: 13px;
    color: var(--evx-muted);
    font-weight: 500;
}

/* ─── Gallery ─────────────────────────────────────────────────────── */
.evx-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}
.evx-gallery__tile {
    position: relative;
    margin: 0;
    border-radius: var(--evx-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--evx-card);
}
.evx-gallery__tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--evx-ease);
}
.evx-gallery__tile:hover img { transform: scale(1.05); }
.evx-gallery__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    background: linear-gradient(180deg, transparent 0%,
                                color-mix(in oklab, var(--evx-ink) 80%, transparent) 100%);
    color: var(--evx-bg);
    font-size: 13.5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.evx-gallery__cat {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--evx-accent) 60%, white 40%);
}

/* ─── Contact ─────────────────────────────────────────────────────── */
.evx-contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 48px;
    max-width: 760px;
}
.evx-contact__row { display: flex; flex-direction: column; gap: 4px; }
.evx-contact__lbl {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--evx-muted);
}
.evx-contact__val { font-size: 15px; color: var(--evx-ink); line-height: 1.45; }
.evx-contact__val--link { transition: color .2s var(--evx-ease); }
.evx-contact__val--link:hover { color: var(--evx-accent); }
.evx-contact__socials { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.evx-contact__socials a {
    font-size: 14px;
    color: var(--evx-ink);
    border-bottom: 1px solid var(--evx-line);
    padding-bottom: 2px;
    transition: color .2s var(--evx-ease), border-color .2s var(--evx-ease);
}
.evx-contact__socials a:hover { color: var(--evx-accent); border-color: var(--evx-accent); }

/* ─── Section footer (link below grid) ────────────────────────────── */
.evx-section__footer { margin-top: 32px; display: flex; justify-content: flex-end; }
.evx-section--top { padding-top: 64px; }

/* ─── Journal / Blogs ─────────────────────────────────────────────── */
.evx-blogs {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
}
.evx-blogs__sub { display: grid; gap: 26px; }

.evx-blog { border-radius: var(--evx-radius-lg); overflow: visible; }
.evx-blog__media {
    overflow: hidden;
    border-radius: var(--evx-radius-lg);
    aspect-ratio: 5 / 4;
    background: var(--evx-card);
}
.evx-blog__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--evx-ease);
}
.evx-blog:hover .evx-blog__media img { transform: scale(1.04); }
.evx-blog__body { padding: 22px 4px 4px; }
.evx-blog__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--evx-muted);
    margin-bottom: 12px;
}
.evx-blog__cat {
    color: var(--evx-accent);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.evx-blog__title {
    font-family: var(--evx-display);
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.005em;
    font-weight: 400;
    margin: 0 0 10px;
    color: var(--evx-ink);
    transition: color .2s var(--evx-ease);
}
.evx-blog:hover .evx-blog__title { color: var(--evx-accent); }
.evx-blog__excerpt {
    font-size: 14.5px;
    color: var(--evx-ink-soft);
    line-height: 1.55;
    margin: 0 0 14px;
}
.evx-blog__author {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--evx-muted);
    padding-top: 12px;
    border-top: 1px solid var(--evx-line);
}
.evx-blog__read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--evx-ink);
    font-weight: 500;
}
.evx-blog__read svg { transition: transform .25s var(--evx-ease); }
.evx-blog:hover .evx-blog__read svg { transform: translateX(4px); }

.evx-blog--featured .evx-blog__media { aspect-ratio: 4 / 5; }
.evx-blog--featured .evx-blog__title { font-size: 34px; line-height: 1.06; }
.evx-blog--featured .evx-blog__body { padding-top: 26px; }

.evx-blogs__sub .evx-blog {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: center;
}
.evx-blogs__sub .evx-blog__media {
    aspect-ratio: 1 / 1;
    width: 150px;
    height: 150px;
}
.evx-blogs__sub .evx-blog__body { padding: 0; }
.evx-blogs__sub .evx-blog__title { font-size: 18px; }
.evx-blogs__sub .evx-blog__excerpt { display: none; }

@media (max-width: 1000px) {
    .evx-about__grid { grid-template-columns: 1fr; gap: 40px; }
    .evx-about__media img { height: 380px; }
    .evx-gallery { grid-template-columns: repeat(2, 1fr); }
    .evx-contact { grid-template-columns: 1fr; }
    .evx-blogs { grid-template-columns: 1fr; gap: 32px; }
    .evx-blogs__sub .evx-blog { grid-template-columns: 120px 1fr; }
    .evx-blogs__sub .evx-blog__media { width: 120px; height: 120px; }
}
@media (max-width: 640px) {
    .evx-gallery { grid-template-columns: 1fr; }
    .evx-blogs__sub .evx-blog { grid-template-columns: 1fr; gap: 14px; }
    .evx-blogs__sub .evx-blog__media { width: 100%; height: 200px; aspect-ratio: auto; }
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .evx-hdr__inner,
    .evx-section__inner,
    .evx-ftr__inner { padding: 0 20px; }
    .evx-section__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .evx-section__aside { max-width: none; }
    .evx-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .evx-featured { grid-template-columns: 1fr; }
    .evx-stats { grid-template-columns: repeat(2, 1fr); }
    .evx-stat:nth-child(2) { border-right: 0; }
    .evx-stat:nth-child(-n+2) { border-bottom: 1px solid var(--evx-line); }
}
@media (max-width: 640px) {
    .evx-hdr__nav { display: none; }
    .evx-hdr__cta { padding: 8px 14px; font-size: 12.5px; }
    .evx-section { padding: 64px 0 80px; }
    .evx-hero { padding: 56px 0 72px; }
    .evx-featured__body { padding: 28px; }
    .evx-featured__title { font-size: 26px; }
    .evx-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Task 4 — public event detail morph (.evd-*)
   Builds on top of the existing .ev-pub__reserve-card editorial layout.
   Adds: TBA pill, ticket selector (stepper + total), waitlist modal.
   Light theme only — public portal does not toggle.
   ===================================================================== */
.evd-tba {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--pub-line, #ececec);
    color: var(--pub-muted, #6b6b6b);
    font: 500 12.5px/1.5 var(--pub-sans);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* State-B hero strip — minimal "when + where" pills under the title. */
.evd-hero-strip {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
.evd-hero-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(106, 77, 255, .08);
    color: var(--pub-accent, #6a4dff);
    font: 600 12.5px/1.3 var(--pub-sans);
    letter-spacing: .01em;
}
.evd-hero-pill svg { flex: 0 0 auto; }
.evd-hero-pill--muted {
    background: var(--pub-bg-soft, #f4f4f4);
    color: var(--pub-text, #1c1c20);
}

/* =====================================================================
   Interest History dashboard (Task 5 v3 — themed).
   Uses native EventCortex tokens only — `--text-*`, `--bg-*`,
   `--hairline*`, `--violet`, `--row-hover`, `--surface-*`, etc.
   The submission table delegates to the standard `.ec-cgrid` premium
   grid so it matches every other admin surface in light + dark.
   ===================================================================== */
.evd-ih-wrap { padding: 12px 24px 40px; position: relative; }

.evd-ih-head { padding: 8px 0 20px; }
.evd-ih-eyebrow {
    font: 600 10px/1.5 var(--f-mono);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 4px;
}
.evd-ih-head h1 {
    font: 600 24px/1.2 var(--f-display, var(--f-sans));
    color: var(--text-display);
    letter-spacing: -.02em;
    margin: 0;
}
.evd-ih-sub {
    font: 400 13px/1.5 var(--f-sans);
    color: var(--text-muted);
    margin: 4px 0 0;
}
.evd-ih-sub .muted { color: var(--text-subtle); }

/* Autocomplete — mirrors .input / .ops-search styling. */
.evd-ih-search { position: relative; max-width: 620px; width: 100%; margin: 6px 0 12px; box-sizing: border-box; }
.evd-ih-search-box {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--input-bg);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    width: 100%;
}
.evd-ih-search-box.is-open {
    border-color: var(--border-hot);
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
}
.evd-ih-search-ico { color: var(--text-subtle); flex: 0 0 auto; }
.evd-ih-search-input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font: 400 14px/1.4 var(--f-sans);
    color: var(--text-main);
}
.evd-ih-search-input::placeholder { color: var(--text-subtle); }
.evd-ih-search-clear {
    background: none; border: none; cursor: pointer;
    color: var(--text-subtle);
    padding: 4px; display: inline-flex; align-items: center;
}
.evd-ih-search-clear:hover { color: var(--text-display); }
.evd-ih-search-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--glass-strong);
    backdrop-filter: blur(18px);
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-card);
    max-height: 320px; overflow-y: auto;
}
.evd-ih-search-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-subtle);
    transition: background .12s ease;
}
.evd-ih-search-row:last-child { border-bottom: 0; }
.evd-ih-search-row:hover { background: var(--row-hover); color: var(--text-display); }
.evd-ih-search-name {
    font: 500 13.5px/1.3 var(--f-sans);
    color: var(--text-display);
}
.evd-ih-search-meta {
    font: 400 11.5px/1.4 var(--f-mono);
    color: var(--text-subtle);
    margin-top: 2px;
}

/* Empty state */
.evd-ih-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--text-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
}
.evd-ih-empty svg { display: block; margin: 0 auto 12px; color: var(--text-subtle); }
.evd-ih-empty p { font: 400 14px/1.5 var(--f-sans); color: var(--text-muted); margin: 0 0 4px; }
.evd-ih-empty .muted { font-size: 12.5px; color: var(--text-subtle); }

/* Event meta strip */
.evd-ih-event {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.evd-ih-event-title {
    font: 600 18px/1.2 var(--f-sans);
    color: var(--text-display);
    letter-spacing: -.01em;
    margin: 0;
}
.evd-ih-event-link {
    font: 500 12.5px/1.3 var(--f-mono);
    color: var(--violet);
    text-decoration: none;
}
.evd-ih-event-link:hover { text-decoration: underline; color: var(--violet-2); }

/* Stat cards — same recipe as .ops-kpi. */
.evd-ih-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.evd-ih-stat {
    position: relative;
    padding: 16px 18px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    backdrop-filter: blur(16px);
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .2s ease, transform .2s ease;
}
.evd-ih-stat:hover { border-color: var(--hairline-2); transform: translateY(-1px); }
.evd-ih-stat-label {
    font: 500 10px/1 var(--f-mono);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-subtle);
}
.evd-ih-stat-value {
    font: 600 28px/1 var(--f-display, var(--f-sans));
    color: var(--text-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.evd-ih-stat-hint {
    font: 400 11.5px/1.4 var(--f-sans);
    color: var(--text-subtle);
}

/* Chart cards */
.evd-ih-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.evd-ih-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 16px 18px;
    backdrop-filter: blur(16px);
}
.evd-ih-card-title {
    font: 600 10px/1.4 var(--f-mono);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 12px;
}
.evd-ih-canvas-wrap { position: relative; height: 220px; }
.evd-ih-canvas-wrap--pie { height: 240px; }

/* Table section header (sits above the ec-cgrid). */
.evd-ih-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 12px;
    gap: 12px;
}
.evd-ih-section-head strong {
    font: 600 13.5px/1.3 var(--f-sans);
    color: var(--text-display);
}
.evd-ih-section-head .muted {
    font: 400 12px/1.3 var(--f-mono);
    color: var(--text-subtle);
    margin-left: 6px;
}
/* Below 640px the title block and the filters/search/export toolbar
   (.crd-filters, checkout_report.css — grid layout there handles the
   toolbar's own mobile arrangement) used to sit side-by-side in a
   shrinking row and got squeezed. Stack title above toolbar so each gets
   the full row's width. Shared by Checkout Report and Interest Collection,
   both portals — same header markup everywhere. */
@media (max-width: 640px) {
    .evd-ih-section-head { flex-direction: column; align-items: stretch; }
}

/* ── Ticket selector (State B) ────────────────────────────────────── */
.evd-state { display: flex; flex-direction: column; gap: 14px; }
.evd-state--live .ev-pub__reserve-cta { margin-top: 4px; }

.evd-ticket-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.evd-ticket-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--pub-line, #e6e6e6);
    border-radius: 12px;
    background: var(--pub-bg-soft, #fafafa);
}
.evd-ticket-info { min-width: 0; flex: 1; }
.evd-ticket-name { font: 600 15px/1.3 var(--pub-sans); color: var(--pub-text); }
.evd-ticket-price { font: 500 14px/1.4 var(--pub-sans); color: var(--pub-accent, #6a4dff); margin-top: 2px; }
.evd-ticket-max { font: 400 12px/1.4 var(--pub-sans); color: var(--pub-muted); margin-top: 2px; }

.evd-ticket-stepper {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px;
    border: 1px solid var(--pub-line, #e6e6e6);
    border-radius: 999px;
    background: #fff;
}
.evd-step-btn {
    width: 28px; height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--pub-bg-soft, #f3f3f3);
    color: var(--pub-text);
    font: 600 16px/1 var(--pub-sans);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.evd-step-btn:hover:not(:disabled) { background: var(--pub-accent, #6a4dff); color: #fff; }
.evd-step-btn:active:not(:disabled) { transform: scale(.94); }
.evd-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.evd-ticket-qty {
    min-width: 22px; text-align: center;
    font: 600 14px/1 var(--pub-sans); color: var(--pub-text);
}

.evd-ticket-total {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px dashed var(--pub-line, #e6e6e6);
    margin-top: 4px;
}
.evd-ticket-total__label { font: 500 13px/1.3 var(--pub-sans); color: var(--pub-muted); }
.evd-ticket-total__value { font: 700 18px/1.2 var(--pub-sans); color: var(--pub-text); }

/* ── Waitlist modal (State A) ─────────────────────────────────────── */
.evd-waitlist-modal {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-modal);
    padding: 24px;
}
.evd-waitlist-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 18, 28, .55);
    backdrop-filter: blur(4px);
    animation: evd-fade-in .18s ease both;
}
.evd-waitlist-modal__panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15, 18, 28, .28);
    animation: evd-pop-in .22s cubic-bezier(.2, .9, .25, 1.05) both;
}
@keyframes evd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes evd-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.evd-waitlist-modal__head {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 24px 24px 12px;
}
.evd-waitlist-modal__head > div:first-child { flex: 1; min-width: 0; }
.evd-waitlist-modal__eyebrow {
    font: 600 11px/1.5 var(--pub-sans);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--pub-accent, #6a4dff);
}
.evd-waitlist-modal__title {
    font: 700 22px/1.25 var(--pub-serif, var(--pub-sans));
    color: var(--pub-text); margin: 4px 0 4px;
}
.evd-waitlist-modal__sub {
    font: 400 14px/1.55 var(--pub-sans);
    color: var(--pub-muted); margin: 0;
}
.evd-waitlist-modal__close {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border: none; background: var(--pub-bg-soft, #f3f3f3);
    color: var(--pub-text);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.evd-waitlist-modal__close:hover { background: var(--pub-line, #e6e6e6); }

.evd-waitlist-modal__body {
    padding: 8px 24px 24px;
    display: flex; flex-direction: column; gap: 14px;
}
.evd-form-row { display: flex; flex-direction: column; gap: 6px; }
.evd-label {
    font: 600 12.5px/1.4 var(--pub-sans);
    letter-spacing: .02em; color: var(--pub-text);
}
.evd-required-mark { color: #d6336c; margin-left: 2px; }
.evd-input {
    width: 100%;
    padding: 11px 13px;
    font: 400 14.5px/1.4 var(--pub-sans);
    color: var(--pub-text);
    background: #fff;
    border: 1px solid var(--pub-line, #d9d9d9);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}
.evd-input:focus {
    outline: none;
    border-color: var(--pub-accent, #6a4dff);
    box-shadow: 0 0 0 3px rgba(106, 77, 255, .15);
}
.evd-input:disabled { opacity: .6; background: var(--pub-bg-soft, #f7f7f7); }
.evd-help { font: 400 12px/1.4 var(--pub-sans); color: var(--pub-muted); }

.evd-checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.evd-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font: 400 14px/1.4 var(--pub-sans); color: var(--pub-text);
    cursor: pointer;
}
.evd-checkbox input { width: 16px; height: 16px; accent-color: var(--pub-accent, #6a4dff); }

.evd-form-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 4px;
}
.evd-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 600 13.5px/1.2 var(--pub-sans);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.evd-btn:disabled { opacity: .55; cursor: not-allowed; }
.evd-btn--ghost {
    background: transparent; color: var(--pub-text);
    border-color: var(--pub-line, #d9d9d9);
}
.evd-btn--ghost:hover:not(:disabled) { background: var(--pub-bg-soft, #f5f5f5); }
.evd-btn--primary {
    background: var(--pub-accent, #6a4dff); color: #fff;
    border-color: var(--pub-accent, #6a4dff);
}
.evd-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }

/* The Live "Checkout" CTA also reuses .evd-cta-btn — keep its hover
   behaviour aligned with the existing ev-pub button system. */
.evd-cta-btn { width: 100%; }

@media (max-width: 540px) {
    .evd-waitlist-modal { padding: 0; }
    .evd-waitlist-modal__panel { border-radius: 0; max-height: 100vh; }
    .evd-ticket-row { flex-direction: column; align-items: flex-start; }
    .evd-ticket-stepper { align-self: flex-end; }
}
/* ---- Error Pages Split Screen Layout ---- */
.error-split-layout {
    flex: 1; /* Take up all available space in main content */
    display: flex;
    flex-direction: row;
    width: 100%;
}

.error-split-layout .error-content-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 80px;
    background: var(--evx-bg);
    color: var(--evx-ink);
}

.error-content-side .page-title {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    letter-spacing: -0.03em;
}

.error-content-side .page-eyebrow {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 2rem;
    color: var(--evx-ink);
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-eyebrow-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 8px !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-eyebrow-back svg {
    pointer-events: none; /* Allows click to pass to the anchor */
}

.page-eyebrow-back:hover {
    color: var(--text-main);
}

.error-content-side .page-sub {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 2.5rem;
    opacity: 0.8;
}

.error-split-layout .error-visual-side {
    flex: 1.2; /* slightly larger visual side */
    background: linear-gradient(135deg, #161B2D 0%, #2A314A 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 20px 0 40px -10px rgba(0,0,0,0.1);
}

/* Glassy orb effect in the visual side */
.error-visual-side::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(160, 180, 255, 0.4) 0%, transparent 60%);
    filter: blur(40px);
    border-radius: 50%;
    animation: pulse-orb 8s ease-in-out infinite alternate;
}

.error-visual-side::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
    opacity: 0.5;
}

@keyframes pulse-orb {
    0% { transform: scale(0.8) translate(-10%, -10%); opacity: 0.6; }
    100% { transform: scale(1.2) translate(10%, 10%); opacity: 1; }
}

@media (max-width: 900px) {
    .error-split-layout {
        flex-direction: column;
    }
    .error-split-layout .error-content-side {
        padding: 48px 32px;
        align-items: center;
        text-align: center;
    }
    .error-content-side .page-title {
        font-size: 3.5rem;
    }
    .error-content-side .page-sub {
        max-width: 100%;
    }
    .error-split-layout .error-visual-side {
        min-height: 300px;
        order: -1; /* visual on top in mobile */
    }
}


/* ====================================================================
   Website CMS Module (.ec-cms-*)
   Styles for the Draft/Publish admin forms.
   ==================================================================== */

/* CMS form layout — vertically stacked sections */
.ec-cms-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* CMS section card header */
.ec-cms-section {
    padding: 0;
    overflow: hidden;
}
.ec-cms-section .form-grid {
    padding: 22px 26px 26px;
}
.ec-cms-section__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 26px 16px;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(139,92,246,0.04) 0%, transparent 100%);
}
[data-theme="light"] .ec-cms-section__head {
    background: linear-gradient(180deg, rgba(124,58,237,0.05) 0%, transparent 100%);
    border-bottom-color: rgba(15,23,42,0.08);
}

/* Status badges */
.ec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font: 600 11.5px/1 var(--f-mono, ui-monospace);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.ec-badge--warning {
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    color: #F59E0B;
}
.ec-badge--ok {
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.30);
    color: #22C55E;
}
[data-theme="light"] .ec-badge--warning {
    background: rgba(245,158,11,0.10);
    color: #B45309;
}
[data-theme="light"] .ec-badge--ok {
    background: rgba(34,197,94,0.10);
    color: #16A34A;
}
.ec-badge--info {
    background: rgba(59,130,246,0.14);
    border: 1px solid rgba(59,130,246,0.30);
    color: #3B82F6;
}
[data-theme="light"] .ec-badge--info {
    background: rgba(59,130,246,0.10);
    color: #2563EB;
}

/* ── Allocation batch ledger — state pills + tier lines (AR-08: semantic
   classes, no inline color/size in the template). ───────────────────── */
.alloc-pill {
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.alloc-pill--approved  { color: var(--lime); }
.alloc-pill--pending   { color: var(--amber); }
.alloc-pill--rejected  { color: var(--rose); }
.alloc-pill--cancelled { color: var(--text-subtle); }
.alloc-tier-line { white-space: nowrap; }
.alloc-tier-qty  { color: var(--text-muted); }

/* ── Allocation request — per-tier quantity steppers (multi-tier request). ── */
.alloc-tier-picker { margin-top: 18px; }
.alloc-tier-picker__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.alloc-stepper {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--hairline); border-radius: 10px;
    background: var(--btn-bg);
}
.alloc-stepper__main { flex: 1; min-width: 0; }
.alloc-stepper__name { font: 500 13px/1.3 var(--f-sans); color: var(--text-display); }
.alloc-stepper__ctrl { display: flex; align-items: center; gap: 6px; flex: none; }
.alloc-stepper__btn {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--surface-1);
    color: var(--text-display); font-size: 17px; line-height: 1;
}
.alloc-stepper__btn:hover { border-color: var(--violet-2); color: var(--violet-2); }
.alloc-stepper__qty {
    width: 54px; height: 30px; text-align: center; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--surface-1);
    color: var(--text-display); font: 600 13px/1 var(--f-mono);
}

/* ── Allocation review/detail page — compact, scannable (not a form). ───── */
.alloc-review { max-width: 760px; }
.alloc-avail { font-size: 12px; font-weight: 600; white-space: nowrap; }
.alloc-avail--ok    { color: var(--emerald); }
.alloc-avail--short { color: var(--amber); }

.alloc-card {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface-1); overflow: hidden;
}
.alloc-card__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; padding: 16px 18px 12px;
}
.alloc-card__event {
    font: 600 16px/1.25 var(--f-sans); color: var(--text-display);
}
.alloc-card__meta {
    margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font: 400 12.5px/1.5 var(--f-sans); color: var(--text-muted);
}
.alloc-card__meta strong { color: var(--text-display); font-weight: 600; }
.alloc-sep { color: var(--text-subtle); }
.alloc-k {
    font: 600 10.5px/1 var(--f-mono); text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-subtle); margin-right: 8px;
}
/* tier table sits flush inside the card, separated by a hairline */
.alloc-tbl { width: 100%; border-top: 1px solid var(--hairline); }
.alloc-tbl .ec-cgrid__head { padding: 9px 18px; }
.alloc-tbl .ec-cgrid__cell { padding: 10px 18px; }

/* every block below the table is a hairline-separated section of the SAME card */
.alloc-sec {
    padding: 14px 18px; border-top: 1px solid var(--hairline);
    font-size: 13px; color: var(--text-main);
}
.alloc-sec .ec-pf__label { display: block; margin-bottom: 6px; }
.alloc-sec .ec-pf__input { width: 100%; min-height: 56px; resize: vertical; }
.alloc-decide__note { margin: 8px 0 0; }

.alloc-outcome {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.alloc-outcome__reason { color: var(--text-main); font-style: italic; }

/* action row — grouped, right-aligned, inside the card (its own hairline section) */
.alloc-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 18px; border-top: 1px solid var(--hairline);
}
.alloc-foot .btn { min-width: 108px; justify-content: center; }
.alloc-foot .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── Allocation new-request — HTMX tier picker rows ─────────────────────── */
.alloc-tier-wrapper { margin-top: 4px; }
.alloc-tier-list { display: flex; flex-direction: column; gap: 10px; }
.alloc-tier-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 12px 14px;
    border: 1px solid var(--hairline); border-radius: 12px;
    background: var(--surface-2);
    transition: border-color .15s;
}
.alloc-tier-row:hover { border-color: var(--hairline-2); }
.alloc-tier-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alloc-tier-name { font: 600 13.5px/1.3 var(--f-sans); color: var(--text-display); }
.alloc-tier-avail {
    display: inline-flex; align-items: center;
    font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em;
    color: var(--cyan-2, var(--cyan));
    background: color-mix(in oklch, var(--cyan-2, var(--cyan)) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--cyan-2, var(--cyan)) 24%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
}
.alloc-tier-qty {
    flex: none; display: flex; align-items: center; gap: 8px;
}
.alloc-tier-qty__label {
    font: 600 10.5px/1 var(--f-mono); color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: .08em;
}
.alloc-qty-stepper { display: flex; align-items: center; gap: 6px; }
.alloc-qty-input {
    width: 56px; height: 34px; text-align: center; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--input-bg);
    color: var(--text-display); font: 600 14px/1 var(--f-mono);
    -moz-appearance: textfield;
}
.alloc-qty-input::-webkit-outer-spin-button,
.alloc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alloc-qty-input:focus { border-color: var(--indigo); outline: none; }
.alloc-stepper__btn { width: 30px; height: 30px; }
.alloc-stepper__btn:hover { border-color: var(--indigo); color: var(--indigo); }

/* Pull Out — tier context card (both TA and SA mirrors). Same visual
   language as Direct Allocate's tier row (.alloc-tier-row family) but
   richer: shows Allocated/Distributed/Left instead of just one "available"
   figure, since Pull Out needs the full picture to make sense of the cap. */
.pullout-tier-card {
    border: 1px solid var(--hairline); border-radius: 12px;
    background: var(--surface-2); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.pullout-tier-card__name { font: 600 13.5px/1.3 var(--f-sans); color: var(--text-display); }
.pullout-tier-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pullout-tier-card__stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 8px;
    background: var(--btn-bg); border: 1px solid var(--hairline);
    text-align: center;
}
.pullout-tier-card__stat b { font: 700 15px/1 var(--f-mono); color: var(--text-display); }
.pullout-tier-card__stat span { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.pullout-tier-card__stat--free b { color: var(--cyan-2); }
/* Label ABOVE the stepper (not beside it) — matches every other field on
   this form (Event/Assignee/Reason all put the label above the control);
   the old side-by-side layout with the small mono .alloc-tier-qty__label
   (built for the tight, repeating Direct Allocate tier list) read as an
   inconsistent, undersized afterthought here where it's the form's one
   primary input. */
.pullout-tier-card__qty { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
/* The stepper row here was left-anchored at its natural (small) content
   width, leaving a dead gap on the right instead of spanning the same row
   length as the stat tiles above it (found via live mobile screenshot,
   2026-08-28 — "total row length", not the button size itself). Stretch the
   whole control to the card's full width and let the number field grow to
   fill the space between the two buttons, instead of everything staying
   bunched on the left. Buttons also sized up slightly — the single primary
   input of the whole form reads better a bit larger than Direct Allocate's
   compact tier-list stepper. Scoped override, doesn't touch the shared
   .alloc-stepper__btn/.alloc-qty-input/.alloc-qty-stepper base used elsewhere. */
.pullout-tier-card__qty .alloc-qty-stepper { width: 100%; }
.pullout-tier-card__qty .alloc-stepper__btn { width: 40px; height: 40px; font-size: 20px; flex: none; }
.pullout-tier-card__qty .alloc-qty-input { flex: 1 1 auto; width: auto; height: 40px; font-size: 17px; }
/* Three small numbers — stays one row even on narrow phones instead of
   stacking to 3 full-height rows (found via live mobile screenshot,
   2026-08-28); tighten padding/gap/font at the same breakpoint so it still
   fits comfortably. */
@media (max-width: 480px) {
    .pullout-tier-card__stats { gap: 6px; }
    .pullout-tier-card__stat { padding: 6px 4px; }
    .pullout-tier-card__stat b { font-size: 13px; }
    .pullout-tier-card__stat span { font-size: 8px; }
}

/* ── Allocation detail page ──────────────────────────────────────────────── */
.alloc-detail-card {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface-1); overflow: hidden; margin-bottom: 20px;
}
.alloc-detail-meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.alloc-meta-row { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.alloc-meta-key {
    flex: none; width: 130px; font: 600 11.5px/1.5 var(--f-mono);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle);
    padding-top: 1px;
}
.alloc-tbl__num { text-align: right; font: 600 13px/1 var(--f-mono); white-space: nowrap; }
.alloc-tbl__empty { text-align: center; color: var(--text-muted); padding: 16px; }
.alloc-tbl th {
    padding: 9px 16px; font: 600 11px/1 var(--f-mono); text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-subtle);
    border-bottom: 1px solid var(--hairline); text-align: left;
}
.alloc-tbl th.alloc-tbl__num { text-align: right; }
.alloc-tbl td {
    padding: 10px 16px; font-size: 13px; color: var(--text-main);
    border-bottom: 1px solid var(--hairline);
}
.alloc-tbl tfoot td { border-bottom: none; }

/* action panels below the detail card */
.alloc-actions-panel {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.alloc-action-form { display: flex; align-items: center; gap: 8px; }
.alloc-reason-input {
    padding: 6px 10px; border-radius: 8px; font-size: 13px; width: 220px;
    border: 1px solid var(--border-strong); background: var(--surface-1);
    color: var(--text-display);
}
.alloc-cancel-panel { margin-bottom: 20px; }

/* ── Date-picker icon wrapper (superadmin .input variant) ─────────── */
.ec-datepicker-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.ec-datepicker-wrap .input,
.ec-datepicker-wrap .ec-pf__input {
    flex: 1;
    padding-right: 38px;
}
.ec-datepicker-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-subtle);
    border-radius: 0 6px 6px 0;
    transition: color 0.15s, background 0.15s;
}
.ec-datepicker-icon:hover {
    color: var(--accent);
    background: rgba(139,92,246,0.08);
}

/* ── Venue capacity strip (Tab 1 — Ticket Tiers) ───────────────────── */
.ec-cap-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    border-bottom: 0.5px solid var(--border);
    background: var(--bg-secondary);
}
.ec-cap-strip__field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ec-cap-strip__label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ec-cap-strip__input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ec-cap-strip__input-wrap .input {
    width: 100px;
}
.ec-cap-strip__unit {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.ec-cap-strip__meter {
    flex: 1;
    min-width: 160px;
}
.ec-cap-strip__bar {
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.ec-cap-strip__fill {
    height: 100%;
    background: var(--lime);
    border-radius: 3px;
    transition: width 0.2s;
}
.ec-cap-strip__fill.is-over {
    background: var(--rose);
}
.ec-cap-strip__meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
.ec-cap-strip__ok   { color: var(--lime); }
.ec-cap-strip__over { color: var(--rose); }
.ec-cap-strip__rem  { color: var(--text-muted); }

/* =======================================================================
   Field Distribution Dashboard
   ======================================================================= */

/* ── Channel chips — email (cyan) and manual PDF (amber) ── */
.alloc-channel-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    font: 500 11.5px/1.4 var(--f-sans);
    border: 1px solid transparent;
}
.alloc-channel-chip--email {
    color: var(--cyan-2);
    background: rgba(6,182,212,0.10);
    border-color: rgba(6,182,212,0.22);
}
.alloc-channel-chip--manual {
    color: var(--amber);
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.22);
}

/* ── "Coming soon" stub badge (Direct Allocate "Transferred" column —
   feature not built yet, per plan) ── */
.soon-chip {
    display: inline-block;
    font: 700 9px/1.5 var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
    background: var(--btn-bg);
    border: 1px solid var(--hairline);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ── Distribution hero panel ── */
.distrib-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    padding: 22px 24px;
    margin-bottom: 18px;
    align-items: start;
}
@media (max-width: 767px) { .distrib-hero { grid-template-columns: 1fr; padding: 18px; gap: 22px; } }

.distrib-hero__stat {
    display: flex; align-items: baseline; gap: 7px;
    margin-bottom: 3px;
}
.distrib-hero__num {
    font: 600 42px/1 var(--f-display, var(--f-sans));
    letter-spacing: -0.04em;
    color: var(--text-display);
    font-variant-numeric: tabular-nums;
}
.distrib-hero__denom {
    font: 400 20px/1 var(--f-sans);
    color: var(--text-subtle);
}
.distrib-hero__desc {
    font-size: 12px; margin: 0 0 12px;
}
.distrib-pbar {
    height: 6px; background: var(--border); border-radius: 3px;
    overflow: hidden; margin: 0 0 6px;
    min-width: 200px;
}
.distrib-pbar__fill {
    height: 100%; background: var(--cyan-2); border-radius: 3px;
    transition: width .3s ease;
}
.distrib-pbar__fill--done { background: var(--lime); }
.distrib-pbar__meta {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--text-subtle);
}
.distrib-hero__pct { color: var(--cyan-2); font-weight: 600; font-size: 11px; }
.distrib-hero__pct--done { color: var(--lime); font-weight: 600; font-size: 11px; }

.distrib-hero__channels { flex-shrink: 0; min-width: 150px; }
.distrib-channel-row {
    display: flex; margin-bottom: 7px;
}
.distrib-channel-row .alloc-channel-chip { gap: 6px; padding: 5px 12px 5px 9px; font-size: 12.5px; }
.distrib-hero__pending { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* Channels & Reach — 2-col stat-tile grid (Field Allocation Summary hero,
   both TA and SA mirrors). Per the original approved mockup
   (admin-direct-allocation-proposal.html) — reads better than 4 stacked
   full-width chip rows on both desktop and mobile. Genuinely new "micro"
   component (confirmed absent from the live CSS before this). */
.channel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.channel-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    min-width: 0;
}
.channel-stat__icon {
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--btn-bg); color: var(--text-muted);
}
.channel-stat__icon svg { width: 13px; height: 13px; }
.channel-stat__icon--email  { background: color-mix(in oklch, var(--indigo) 16%, transparent); color: var(--indigo-2); }
.channel-stat__icon--manual { background: color-mix(in oklch, var(--cyan) 16%, transparent);   color: var(--cyan-2); }
.channel-stat__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.channel-stat__body b { font: 600 13px/1.25 var(--f-mono); color: var(--text-display); white-space: normal; word-break: break-word; }
.channel-stat__body span { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 360px) {
    .channel-stats { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .channel-stat__body b { font-size: 11.5px; }
}

/* Tier Pool row — scoped to the Field Allocation card (.pipe-tiers--fa,
   both TA and SA mirrors) rather than the shared base .pipe-tier used by
   Event Pulse / Tenant Dashboard / the retired Field Distribution Report
   (a plain grid there, unrelated pages, left untouched). Matches the
   original approved mockup: flexible row that reflows into 2 lines on
   mobile (name+cap+count on one line, bar on the next) instead of the
   base class's fixed grid, which hides the count entirely below 640px. */
.pipe-tiers--fa { display: flex; flex-direction: column; gap: 14px; }
.pipe-tiers--fa .pipe-tier { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pipe-tiers--fa .pipe-tier__label {
    flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px;
    font: 500 12.5px/1.3 var(--f-sans); color: var(--text-display);
    white-space: normal;
}
.pipe-tiers--fa .pipe-tier__label small { font: 400 10.5px/1 var(--f-mono); color: var(--text-subtle); }
.pipe-tiers--fa .pipe-tier__stack {
    flex: 1 1 160px; min-width: 120px; height: 10px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--hairline);
    display: flex; overflow: hidden;
}
.pipe-tiers--fa .pipe-tier__stack i { display: block; height: 100%; }
.pipe-tiers--fa .pipe-tier__count {
    flex: 0 0 auto; font: 600 12px/1 var(--f-mono); color: var(--text-muted);
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.pipe-tiers--fa .pipe-tier__count b { color: var(--text-display); font-weight: 600; }
/* Sold/capacity — visible always, but the point is mobile: the bar
   segments' title="" tooltips (Sold/Allocated/Available) are useless on
   touch, so this is the one glanceable "how full is this tier" figure that
   works without hover (per explicit request, 2026-08-28). */
.pipe-tiers--fa .pipe-tier__ratio { font: 500 10px/1 var(--f-mono); color: var(--text-subtle); white-space: nowrap; }
@media (max-width: 700px) {
    .pipe-tiers--fa { gap: 10px; }
    .pipe-tiers--fa .pipe-tier { row-gap: 4px; }
    .pipe-tiers--fa .pipe-tier__label { flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: 5px; }
    .pipe-tiers--fa .pipe-tier__label small { order: 2; }
    .pipe-tiers--fa .pipe-tier__label small::before { content: "· "; }
    .pipe-tiers--fa .pipe-tier__count { order: 2; margin-left: auto; }
    .pipe-tiers--fa .pipe-tier__stack { flex: 1 1 100%; order: 3; }
}

/* ── Section bar — filter + batch count ── */
.distrib-section-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 10px 16px; margin-bottom: 12px;
    overflow: visible;
    /* backdrop-filter creates a stacking context; the ec-cgrid below also has one
       and sits later in the DOM, so it would paint over the open dropdown.
       Lift this bar's context above the grid (same fix as .ops-toolbar). */
    position: relative;
    z-index: var(--z-raised);
}
.distrib-section-bar__left {
    display: flex; align-items: center; gap: 12px;
}
.distrib-section-bar__count { font-size: 12px; }
.distrib-section-bar__picker { flex: 0 0 300px; max-width: 300px; }

/* ── Batch grid cell utilities ── */
.distrib-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.distrib-remaining--nonzero { color: var(--amber); font-weight: 600; }

/* ── Requestor x Tier grid: distribution velocity annotation ── */
.distrib-velocity--stuck {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--amber); font: 500 11.5px/1 var(--f-sans);
}

.link-action { color: var(--indigo); text-decoration: none; }
.link-action:hover { color: var(--indigo); text-decoration: underline; }

/* Dashboard utility classes — §15.6 */
.sa-stat-highlight {
  background: var(--surface-2);
  box-shadow: 0 1px 3px var(--shadow-sm, rgba(0,0,0,.06));
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.activity-row:last-child { border-bottom: none; }
.activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--_dot-color, var(--text-subtle)) 100%, transparent);
}
.activity-meta { font-size: 12px; color: var(--text-subtle); }

/* Dynamic-color chip — §9.4 */
.tenant-chip {
  background: color-mix(in srgb, var(--_chip-color, var(--indigo)) 12%, transparent);
  color: var(--_chip-color, var(--indigo));
  border: 1px solid color-mix(in srgb, var(--_chip-color, var(--indigo)) 22%, transparent);
  font-size: 12px; font-weight: 500; padding: 2px 8px;
  border-radius: var(--r-sm); display: inline-flex; align-items: center;
}

/* RBAC matrix table — role detail page */
.rbac-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.rbac-matrix th { padding: 8px 12px; text-align: left; font-weight: 600;
                  color: var(--text-subtle); font-size: 11px; text-transform: uppercase;
                  letter-spacing: .05em; border-bottom: 1px solid var(--hairline); }
.rbac-matrix td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.rbac-matrix tr:last-child td { border-bottom: none; }
.rbac-matrix .fn-name { font-weight: 500; color: var(--text-display); }
.rbac-matrix .fn-key  { font-size: 11px; color: var(--text-subtle); font-family: var(--font-mono, monospace); }
.rbac-matrix .fn-tag  { display: inline-flex; align-items: center; }