/* ============================================================================
   PEI Musicals — "Encore" unified design system.
   Dark-first, cinematic: charcoal base, one electric magenta action colour
   supported by violet + electric blue (the stage-lighting gel spectrum).
   Load once per page; style everything through these tokens.
   ============================================================================ */

:root {
    /* Dark theme is the default. */
    --bg:            #08070B;   /* marketing / home background */
    --bg-app:        #0A090E;   /* app content background */
    --surface:       #141319;   /* cards, panels */
    --surface-2:     #1F1E27;   /* inset / hover */
    --surface-glass: rgba(16,15,22,.72);
    --ink:           #F4F3F7;
    --ink-soft:      #A7A3B2;
    --ink-faint:     #6E6A78;
    --line:          rgba(255,255,255,.08);
    --line-soft:     rgba(255,255,255,.06);

    --accent:        #F5327A;   /* magenta — primary action / active */
    --accent-strong: #C7185A;
    --accent-soft:   #F86FA6;
    --accent-tint:   rgba(245,50,122,.14);
    --violet:        #A855F7;
    --blue:          #4C8DFF;
    --blue-soft:     #7FB0FF;
    --blue-tint:     rgba(76,141,255,.16);
    --good:          #35D08A;
    --good-tint:     rgba(53,208,138,.16);
    --warn:          #E0A94C;
    --warn-tint:     rgba(224,169,76,.16);

    --spectrum: linear-gradient(90deg, #F5327A, #A855F7 50%, #4C8DFF);
    --spotlight: radial-gradient(130% 100% at 50% 125%, #4C8DFF 0%, #A855F7 42%, #F5327A 72%, #2A1030 100%);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, monospace;

    --r-input: 11px;
    --r-btn: 11px;
    --r-card: 17px;
    --r-shell: 22px;

    --sh-card:  0 12px 30px -22px rgba(0,0,0,.4);
    --sh-tile:  0 20px 40px -24px rgba(0,0,0,1);
    --sh-panel: 0 44px 100px -40px #000;
    --sh-glow:  0 10px 24px -6px rgba(245,50,122,.6);
}

/* Light theme (explicit or system). Accent is unchanged across themes. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:            #F4F1EC;
        --bg-app:        #F4F1EC;
        --surface:       #FFFFFF;
        --surface-2:     #F3EFF8;
        --surface-glass: rgba(255,255,255,.72);
        --ink:           #171520;
        --ink-soft:      #58525f;
        --ink-faint:     #8a8593;
        --line:          #E4DED4;
        --line-soft:     #ece7e0;
        --accent-tint:   rgba(245,50,122,.10);
        --blue-tint:     rgba(76,141,255,.12);
        --good-tint:     rgba(53,208,138,.12);
        --warn-tint:     rgba(224,169,76,.14);
        --sh-tile:  0 20px 40px -28px rgba(30,20,45,.4);
        --sh-panel: 0 30px 70px -34px rgba(30,20,45,.35);
        --input-bg: #f7f4fb; --input-line: var(--line);
    }
}
:root[data-theme="light"] {
    --bg:#F4F1EC; --bg-app:#F4F1EC; --surface:#FFFFFF; --surface-2:#F3EFF8;
    --surface-glass:rgba(255,255,255,.72);
    --ink:#171520; --ink-soft:#58525f; --ink-faint:#8a8593;
    --line:#E4DED4; --line-soft:#ece7e0;
    --accent-tint:rgba(245,50,122,.10); --blue-tint:rgba(76,141,255,.12);
    --good-tint:rgba(53,208,138,.12); --warn-tint:rgba(224,169,76,.14);
    --sh-tile:0 20px 40px -28px rgba(30,20,45,.4);
    --sh-panel:0 30px 70px -34px rgba(30,20,45,.35);
    --input-bg:#f7f4fb; --input-line:var(--line);
}
:root[data-theme="dark"] {
    --bg:#08070B; --bg-app:#0A090E; --surface:#141319; --surface-2:#1F1E27;
    --surface-glass:rgba(16,15,22,.72);
    --ink:#F4F3F7; --ink-soft:#A7A3B2; --ink-faint:#6E6A78;
    --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.06);
    --accent-tint:rgba(245,50,122,.14); --blue-tint:rgba(76,141,255,.16);
    --good-tint:rgba(53,208,138,.16); --warn-tint:rgba(224,169,76,.16);
    --sh-tile:0 20px 40px -24px rgba(0,0,0,1);
    --sh-panel:0 44px 100px -40px #000;
    --input-bg:rgba(255,255,255,.05); --input-line:rgba(255,255,255,.12);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-soft); }

/* ── type helpers ─────────────────────────────────────────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .16em; color: var(--ink-faint);
}
.eyebrow.accent { color: var(--accent-soft); }
.mono { font-family: var(--mono); }
.display {
    font-size: clamp(34px, 6vw, 52px); font-weight: 800;
    letter-spacing: -.03em; line-height: .98; text-wrap: balance;
}
.h-title { font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.ink-soft { color: var(--ink-soft); }

/* ── brand mark: the "spotlight arch" ─────────────────────────────────────── */
/* Usage: <span class="mark" style="--m:36px"></span>  (bars drawn via ::before
   pseudo isn't enough for 5 bars, so the mark uses inline child bars). */
.brandmark {
    --m: 40px;
    width: var(--m); height: var(--m);
    border-radius: calc(var(--m) * 0.28);
    background: var(--spotlight);
    border: 1px solid #3A2440;
    display: inline-flex; align-items: flex-end; justify-content: center;
    gap: calc(var(--m) * 0.06);
    padding: calc(var(--m) * 0.2) calc(var(--m) * 0.18);
    flex: 0 0 auto;
}
.brandmark i {
    display: block; width: calc(var(--m) * 0.1);
    border-radius: 999px; background: rgba(255,255,255,.85);
}
.brandmark i:nth-child(1) { height: 36%; }
.brandmark i:nth-child(2) { height: 64%; background: rgba(255,255,255,.92); }
.brandmark i:nth-child(3) { height: 100%; background: #fff; }
.brandmark i:nth-child(4) { height: 64%; background: rgba(255,255,255,.92); }
.brandmark i:nth-child(5) { height: 36%; }

.brandlock { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brandlock .wordmark { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }

/* ── glass chrome ─────────────────────────────────────────────────────────── */
.glassbar {
    background: var(--surface-glass);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 40;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    padding: 11px 18px; border-radius: var(--r-btn);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    color: var(--ink);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.primary:hover { background: #ff3e86; box-shadow: var(--sh-glow); }
.btn.ghost {
    background: var(--surface-glass); color: var(--ink);
    border-color: var(--line);
    backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: var(--surface-2); border-color: rgba(255,255,255,.16); }
.btn.good { background: var(--good); color: #05231a; }
.btn.good:hover { filter: brightness(1.06); }
.btn.danger { background: var(--accent-tint); color: var(--accent-soft); border-color: transparent; }
.btn.danger:hover { background: rgba(245,50,122,.24); }
.btn.block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── pills ────────────────────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    padding: 3px 10px; border-radius: 999px;
}
.pill.accent { color: var(--accent-soft); background: var(--accent-tint); }
.pill.good   { color: var(--good);  background: var(--good-tint); }
.pill.warn   { color: var(--warn);  background: var(--warn-tint); }
.pill.info   { color: var(--blue-soft); background: var(--blue-tint); }
.pill.muted  { color: var(--ink-soft); background: var(--surface-2); }
.pill.mono   { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

/* ── cards ────────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--sh-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.hover:hover {
    transform: translateY(-3px); box-shadow: var(--sh-tile);
    border-color: var(--accent-tint);
}

/* ── inputs ───────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 14px; }
.field label {
    display: block; font-family: var(--mono); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
    margin-bottom: 6px;
}
.input {
    width: 100%; height: 44px; border-radius: var(--r-input);
    background: var(--input-bg, rgba(255,255,255,.05));
    border: 1px solid var(--input-line, rgba(255,255,255,.12));
    color: var(--ink); font: inherit; font-size: 15px; padding: 0 14px;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
textarea.input { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; }
select.input { appearance: none; }

/* ── section header ───────────────────────────────────────────────────────── */
.sectionhead { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; }
.sectionhead .rule { flex: 1; height: 1px; background: var(--line); }

/* ── avatar ───────────────────────────────────────────────────────────────── */
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    color: #fff; font-weight: 700; font-size: .95rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: none; flex: 0 0 auto;
}

/* ── equalizer (motion) ───────────────────────────────────────────────────── */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; background: currentColor; border-radius: 2px; transform-origin: bottom;
        animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(1){ animation-delay: 0s; } .eq i:nth-child(2){ animation-delay: .15s; }
.eq i:nth-child(3){ animation-delay: .2s; } .eq i:nth-child(4){ animation-delay: .4s; }
@keyframes eq { 0%,100%{ transform: scaleY(.32);} 50%{ transform: scaleY(1);} }

.empty {
    color: var(--ink-faint); background: var(--surface); border: 1px dashed var(--line);
    border-radius: var(--r-card); padding: 26px; text-align: center; font-size: .95rem;
}
.msg { font-size: .88rem; margin-top: 10px; }
.msg.error { color: var(--accent-soft); }
.msg.ok { color: var(--good); }

/* ── auth card shell (login / signup / forgot / reset / profile / pending) ─── */
.auth-amb { position: relative; overflow-x: hidden; }
.auth-amb::before, .auth-amb::after {
    content: ""; position: fixed; width: 620px; height: 620px; border-radius: 50%;
    filter: blur(30px); opacity: .5; z-index: -1; pointer-events: none;
}
.auth-amb::before { top: -260px; left: -180px; background: radial-gradient(circle, #241a3a, transparent 68%); }
.auth-amb::after  { bottom: -280px; right: -180px; background: radial-gradient(circle, #101f3a, transparent 68%); }
.authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 18px; }
.authcard {
    width: 100%; max-width: 400px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-shell);
    box-shadow: var(--sh-panel); padding: 32px 30px 28px;
}
.authcard.wide { max-width: 440px; }
.authcard .head { text-align: center; margin-bottom: 22px; }
.authcard .head .brandmark { --m: 52px; margin: 0 auto 16px; }
.authcard h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.authcard .sub { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; margin: 0; }
.authlinks { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* segmented control (appearance toggle, range tabs) */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 3px; }
.segmented button { border: none; background: none; color: var(--ink-soft); font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 18px; border-radius: 8px; cursor: pointer; }
.segmented button.on { background: var(--accent); color: #fff; }
.segmented button:not(.on):hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .card, .btn { transition: none; }
    .eq i { animation: none; }
}