/* ── TOKENS — locked to SaintStream style guide ───── */
:root {
--gold: #D9A441;
--amber: #E8C56A;
--copper: #CB5A2A;
--slate: #1E2A3A;
--blue: #65B9FF;
--lake: #65B9FF;
--royal: #0A6CF0; /* deeper blue — highlighted tile/chip edge glow */
--purple: #3B256D;
--white: #ffffff;
--cloud: #F2F5FA;
--red: #E5484D; /* error/deny — was only ever a var() fallback until V1.691 */
--red-rgb: 229,72,77;
/* SaintStream v6 spring-glass palette */
--sky-blue:#65B9FF; --lavender:#B68CFF; --soft-green:#7AD59A;
--white-light:#F5F7FB; --warm-gold:#D9A441; --silver-mist:#AEB7C7;
--deep-night:#0A0B0F; --graphite:#161A22;
--grad: linear-gradient(135deg, #D9A441 0%, #65B9FF 58%, #B68CFF 100%);
--surface: #ffffff;
--bg: #F2F5FA;
--border: #dde5f0;
--text: #1E2A3A;
--text2: #5a6a7a;
--ink: #0f1e2e;
--dim: #7a8fa3;
--nav-h: 78px;
--hdr-h: 58px;
/* format identity colors + glows */
--accent-featured: #D9A441;
--accent-playlists:#FFB86B;
--accent-tribes: #E9858F;
--accent-watch: #B68CFF;
--accent-listen: #65B9FF;
--accent-read: #7AD59A;
--accent-light: #F5F7FB;
--accent-learn: #AEB7C7;
/* RGB triplets — used as *light behavior* (edge rim, halo), never as a body fill */
--accent-featured-rgb: 217,164,65;
--accent-playlists-rgb:255,184,107;
--accent-tribes-rgb: 233,133,143;
--accent-watch-rgb: 182,140,255;
--accent-listen-rgb: 101,185,255;
--accent-read-rgb: 122,213,154;
--accent-light-rgb: 245,247,251;
--accent-learn-rgb: 174,183,199;
/* SaintStream wordmark / waveform palette.
Light variant = the vibrant logo used for splash, login, marketing surfaces, light-mode UI.
Dark variant = subdued logo for the persistent dark-mode in-app header so it
integrates with deep-night chrome instead of dominating the screen.
Tokens are wired once the logo asset is delivered as an SVG with per-element
class names (Saint, Stream, waveform, play-icon, tagline); until then the
dark-mode header PNG is approximated via a saturate/brightness/contrast filter
on #hdr-logo img — see the rule near #hdr-logo. */
--logo-light-saint: #F5A800;
--logo-light-stream-start:#146BFF;
--logo-light-stream-mid: #1CB8E8;
--logo-light-stream-end: #00CFA8;
--logo-dark-saint: #D9A441;
--logo-dark-stream-start: #5C91F2;
--logo-dark-stream-mid: #58BFE8;
--logo-dark-stream-end: #5DD6B3;
--logo-dark-tagline: rgba(245,247,251,.72);
--logo-dark-wave-opacity: .86;
--logo-dark-icon-opacity: .9;
--logo-dark-glow-opacity: .18;
}
/* ── DARK THEME (default) ─────────────────────────── */
html[data-theme="dark"]{
--surface:#161A22; /* graphite card / panel surface */
--bg: #0B0B0D; /* deep-night page background — neutral, no blue tint */
--cloud: #1B2030; /* secondary surface, placeholders */
--border: rgba(245,247,251,.10);
--text: #F5F7FB;
--text2: #AEB7C7;
--dim: #6B7486;
--glass: rgba(22,26,34,.55);
--glass-brd: rgba(245,247,251,.14);
/* OPAQUE tile/media fill — the animated wave field must NOT show through
tiles or reading/media surfaces (Robert 2026-07-11). One token so every
tile shares the same solid body; appearance packs can override --tile-solid. */
--tile-solid: #161c26;
}
:root{
--glass: rgba(255,255,255,.72);
--glass-brd: rgba(255,255,255,.6);
--tile-solid: #ffffff;
}
/* dark overrides for elements with hardcoded light colors */
html[data-theme="dark"] #book-reader{background:#10131c !important}
html[data-theme="dark"] .reader-chapter-title{color:var(--text)}
html[data-theme="dark"] .reader-text{color:#c4cedb}
/* ── RESET ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden;background:#0B0B0D}
body{font-family:'Inter','Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100%;overflow:hidden;max-width:480px;margin:0 auto;position:relative;box-shadow:0 0 40px rgba(0,0,0,.35)}
html[data-theme="dark"] body{ background:#0B0B0D; }
/* ═══ Atmospheric layer — deep-night base + animated flowing wave lines ═══
Only the base color and the SVG flowlines render here. Earlier orb + radial-wash
experiments were removed (see project memory). Sits behind all app content (z 0);
glass tiles reveal the wave field softly. */
#atmosphere{
position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
background:#0B0B0D;
}
#atmosphere .flowlines{
position:absolute; inset:0; width:100%; height:100%; opacity:.8;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
#atmosphere .flowlines path{ fill:none; stroke:rgba(176,200,236,.22); stroke-width:1.2; }
/* Auth-screen flowlines — same atmospheric wave field as the rest of the
app, layered behind .auth-glow and .auth-inner. */
#auth .flowlines{
position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.8;
pointer-events:none;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
#auth .flowlines path{ fill:none; stroke:rgba(176,200,236,.22); stroke-width:1.2; }
/* Light theme: pale base + dark wave stroke */
html[data-theme="light"] #atmosphere{ background:#F2F5FA; }
html[data-theme="light"] #atmosphere .flowlines path{ stroke:rgba(40,55,80,.14); }
/* Animated wave field OFF — user preference (Settings › Appearance). Hides the
flowing lines on both the app atmosphere and the auth screen; the flat base
color stays. The rAF loop is also stopped in boot.js (flowSetEnabled). */
html.waves-off .flowlines{ display:none; }
/* ═══ Appearance Packs — seasonal background + color scheme (js/appearance/appearance.js).
The atmosphere base is recolored from validated custom properties only; an image
pack sits under a scrim so glass tiles + text stay readable. Tiles/text unchanged. */
html.has-pack #atmosphere{ background: var(--pack-bg-base, #0B0B0D); }
html.has-pack.pack-grad #atmosphere{ background: var(--pack-bg-grad), var(--pack-bg-base, #0B0B0D); }
html.has-pack.pack-image #atmosphere{
background-image:
linear-gradient(rgba(8,10,14,var(--pack-scrim,.55)), rgba(8,10,14,var(--pack-scrim,.55))),
var(--pack-bg-image);
background-size:cover; background-position:center; background-repeat:no-repeat;
}
html.pack-hide-waves .flowlines{ display:none; }
/* pack picker chips (Settings › Appearance) */
#pack-picker{ display:flex; gap:8px; flex-wrap:wrap; padding:2px 0; }
.pack-chip{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-pill,999px);
background:var(--panel-bg,#151b27); border:1px solid var(--tile-brd,rgba(120,138,160,.22)); color:var(--text2,#c7d2e0);
font-size:.78rem; font-weight:600; cursor:pointer; }
.pack-chip.on{ border-color:var(--pack-accent,#65B9FF); color:var(--white,#fff); box-shadow:0 0 0 1px var(--pack-accent,#65B9FF) inset; }
.pack-chip .pack-swatch{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
background:linear-gradient(135deg,#0B0B0D,#1b2230); }
.pack-chip .pack-swatch[data-pack="christmas"]{ background:linear-gradient(135deg,#0b1a12 40%,#e0553b 100%); }
/* ── Skin Kit v1 theme layers (all values validated in appearance.js) ──
pack-tiles: themed tile glass — the value is alpha-clamped + dark-guarded, so
it routes through the shared --tile-bg token without hurting readability.
pack-heading: display lettering only (h1/h2/section labels), contrast-checked.
pack-cap: decorative strip (e.g. collected snow) painted on header blocks. */
html.pack-tiles{ --tile-bg: var(--pack-tile-bg); }
html.pack-heading :is(h1, h2, .pf-sec-lbl){ color: var(--pack-heading); }
html.pack-cap :is(.browse-hdr, .profile-hdr){ position:relative; }
html.pack-cap :is(.browse-hdr, .profile-hdr)::after{
content:''; position:absolute; left:0; right:0; top:0; height:38px;
background:var(--pack-tile-cap) top center/100% auto no-repeat;
pointer-events:none; opacity:.92;
}
h1,h2,h3,.head{font-family:'Space Grotesk','Montserrat',system-ui,sans-serif}
/* ── reusable tile surface (solid card) ──
The v6 smoked-glass material (backdrop-blur body + edge-light pseudo layers)
was retired 2026-07-11 (Robert: "get rid of the glass tile, it's not
working" — it read muddy over the animated wave field). Tiles are now a clean
SOLID card: opaque --tile-solid body, a thin accent-tinted border for identity,
and a soft drop shadow for depth. No blur, no ::before/::after light layers,
so the moving wave field never shows through and there are no repaint streaks. */
.glass,.glass-tile{
position:relative;overflow:hidden;
box-sizing:border-box;
--accent-rgb:245,247,251; /* neutral fallback if no accent class */
background:var(--tile-solid,#161c26);
border:1px solid rgba(var(--accent-rgb,245,247,251),.14);
box-shadow:0 2px 10px rgba(0,0,0,.22);
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
/* keep tile content above nothing special now, but preserve the stacking rule
other code relies on */
.glass>*,.glass-tile>*{position:relative;z-index:1}
.glass:hover,.glass-tile:hover{transform:translateY(-2px);
box-shadow:0 8px 22px rgba(0,0,0,.30);border-color:rgba(var(--accent-rgb,245,247,251),.30)}
.glass:active,.glass-tile:active{transform:translateY(1px) scale(.99)}
.accent-for-you{--accent-color:#D9A441;--accent-rgb:217,164,65;--accent-glow:rgba(217,164,65,.30)}
.accent-featured{--accent-color:#D9A441;--accent-rgb:217,164,65;--accent-glow:rgba(217,164,65,.30)}
.accent-playlists{--accent-color:#FFB86B;--accent-rgb:255,184,107;--accent-glow:rgba(255,184,107,.30)}
.accent-tribes{--accent-color:#E9858F;--accent-rgb:233,133,143;--accent-glow:rgba(233,133,143,.30)}
.accent-watch{--accent-color:#B68CFF;--accent-rgb:182,140,255;--accent-glow:rgba(182,140,255,.30)}
.accent-listen{--accent-color:#65B9FF;--accent-rgb:101,185,255;--accent-glow:rgba(101,185,255,.30)}
.accent-read{--accent-color:#7AD59A;--accent-rgb:122,213,154;--accent-glow:rgba(122,213,154,.28)}
.accent-learn{--accent-color:#AEB7C7;--accent-rgb:174,183,199;--accent-glow:rgba(174,183,199,.28)}
.accent-light{--accent-color:#F5F7FB;--accent-rgb:245,247,251;--accent-glow:rgba(245,247,251,.26)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea{font-family:inherit;border:none;outline:none}
img{display:block}
input[type=range]{-webkit-appearance:none;appearance:none}
/* ── HIDDEN YT PLAYER ─────────────────────────────── */
#yt{position:fixed;width:1px;height:1px;top:-999px;left:-999px;pointer-events:none;z-index:-1}
/* ═══════════════════════════════════════════
AUTH SCREEN
═══════════════════════════════════════════ */
#auth{
position:fixed;inset:0;
background:#0B0B0D; /* match site's deep-night base (was a bluish gradient) */
display:none;flex-direction:column;
overflow-y:auto;z-index:9999;
max-width:480px;margin:0 auto;
padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
#auth.on{display:flex}
/* ── Face lineup on the auth screen (v98) ─────────────────────────────
Shows cached adults (and, in v99, kids) above the email/password form.
Tap an adult tile to unlock with a 4-digit PIN. */
.face-lineup{
width:100%;max-width:380px;margin:0 auto 14px;
padding:14px 12px 6px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
border-radius:18px;
}
.face-lineup[hidden]{display:none}
.face-lineup-label{
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--dim,#9aa3b4);text-align:center;margin-bottom:10px;
}
.face-lineup-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.face-tile{
display:flex;align-items:center;gap:12px;
padding:10px 12px;border-radius:14px;cursor:pointer;
background:#1A1F2A;
border:1px solid rgba(255,255,255,.06);
transition:background .15s,border-color .15s,transform .1s;
width:100%;text-align:left;color:inherit;font:inherit;
}
.face-tile:hover,.face-tile:focus-visible{
background:#222838;border-color:rgba(217,164,65,.4);outline:none;
}
.face-tile:active{transform:scale(.98)}
.face-tile-av{
width:52px;height:52px;border-radius:50%;
background:linear-gradient(135deg,#65B9FF,#B68CFF);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:1.2rem;
flex-shrink:0;overflow:hidden;
}
.face-tile-av img{width:100%;height:100%;object-fit:cover;}
.face-tile-av.kid{background:linear-gradient(135deg,#D9A441,#FFD78A);font-size:1.6rem;}
.face-tile-body{flex:1;min-width:0;}
.face-tile-name{font-weight:600;line-height:1.2;}
.face-tile-meta{font-size:.76rem;color:var(--dim,#9aa3b4);margin-top:2px;}
.face-tile-arr{color:var(--dim,#9aa3b4);font-size:1.4rem;flex-shrink:0;line-height:1;}
.face-lineup-fallback{
text-align:center;font-size:.78rem;color:var(--dim,#9aa3b4);padding:6px 0 0;
}
/* ── PIN pad overlay ─────────────────────────────────────────────── */
.pinpad-overlay{
position:fixed;inset:0;z-index:10050;
background:rgba(8,12,20,.78);backdrop-filter:blur(10px);
display:none;align-items:center;justify-content:center;padding:20px;
}
.pinpad-overlay.on{display:flex;}
.pinpad-card{
width:100%;max-width:340px;border-radius:22px;
background:linear-gradient(180deg,#1A2030,#0E141E);
border:1px solid rgba(255,255,255,.08);
padding:22px 22px 18px;position:relative;
box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.pinpad-x{
position:absolute;top:8px;right:8px;width:36px;height:36px;
background:transparent;border:none;color:var(--dim,#9aa3b4);
font-size:1.6rem;cursor:pointer;line-height:1;
}
.pinpad-face{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px;}
.pinpad-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,#65B9FF,#B68CFF);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:1.5rem;overflow:hidden;
}
.pinpad-avatar img{width:100%;height:100%;object-fit:cover;}
.pinpad-name{font-weight:600;font-size:1rem;}
.pinpad-prompt{text-align:center;color:var(--dim,#9aa3b4);font-size:.85rem;margin-bottom:14px;}
.pinpad-dots{display:flex;justify-content:center;gap:16px;margin-bottom:18px;}
.pinpad-dots span{
width:14px;height:14px;border-radius:50%;
background:rgba(255,255,255,.12);
transition:background .12s,transform .12s;
}
.pinpad-dots span.on{background:#D9A441;transform:scale(1.15);}
.pinpad-dots.shake{animation:pinpad-shake .4s;}
@keyframes pinpad-shake{
0%,100%{transform:translateX(0);}
20%{transform:translateX(-6px);}
40%{transform:translateX(6px);}
60%{transform:translateX(-4px);}
80%{transform:translateX(4px);}
}
.pinpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pinpad-key{
height:56px;border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
color:#F5F7FB;font-size:1.3rem;font-weight:600;
cursor:pointer;user-select:none;
transition:background .1s,transform .05s;
}
.pinpad-key:not(.empty):hover{background:rgba(255,255,255,.12);}
.pinpad-key:not(.empty):active{background:rgba(255,255,255,.2);transform:scale(.96);}
.pinpad-key.empty{background:transparent;border:none;cursor:default;pointer-events:none;}
.pinpad-key.bs{font-size:1.2rem;}
.pinpad-pw{
display:block;margin:14px auto 0;padding:6px 12px;
background:transparent;border:none;color:var(--dim,#9aa3b4);
font-size:.85rem;cursor:pointer;text-decoration:underline;
}
.pinpad-pw:hover{color:#F5F7FB;}
/* ── iOS Safari auth fixes (V1.536) ───────────────────────────────────
(1) Two quick taps on the same PIN key read as double-tap-to-zoom on
iOS (user-scalable=no is ignored there), eating the second digit AND
zooming the screen. touch-action:manipulation keeps pan/pinch but
kills double-tap zoom across the gate + pad. */
#auth,#auth *,.pinpad-overlay,.pinpad-overlay *{touch-action:manipulation}
/* (2) iOS zooms the page when a focused input is under 16px — keep the
auth fields at 16px so the screen stays put while typing. */
#auth .form-field{font-size:16px}
/* (3) Auth toasts render bottom-center, behind the on-screen keyboard —
on the gate, show them near the top so PIN/sign-in errors are seen. */
body:has(#auth.on) #toast{bottom:auto;top:16vh}
/* (4) While the keyboard is up (an auth field focused), give the gate
scroll room so Continue-with-Google / Enter-as-Guest stay reachable. */
#auth.kb{padding-bottom:48vh}
.auth-glow{
position:absolute;top:-100px;left:50%;transform:translateX(-50%);
width:380px;height:380px;border-radius:50%;
background:radial-gradient(circle,rgba(242,178,51,.18) 0%,rgba(10,108,240,.08) 40%,transparent 70%);
pointer-events:none;filter:blur(20px);
}
.auth-inner{
position:relative;z-index:2;
padding:34px 28px 28px;
flex:1;display:flex;flex-direction:column;
}
.auth-logo-wrap{text-align:center;margin-bottom:8px}
.auth-logo{height:54px;max-width:280px;margin:0 auto;object-fit:contain;display:block}
.auth-logo-fb{font-size:2.1rem;font-weight:900;letter-spacing:-.03em;color:#fff}
.auth-logo-fb .g{color:var(--gold)}
.auth-logo-fb .b{color:var(--lake)}
.auth-tagline{
text-align:center;
font-size:.74rem;font-weight:700;letter-spacing:.18em;
color:rgba(255,255,255,.7);
margin-bottom:30px;text-transform:uppercase;
}
.auth-tagline .dot{color:var(--gold);margin:0 7px}
/* tabs */
.auth-tabs{
display:flex;background:#1A1F2A;
border-radius:99px;padding:4px;margin-bottom:22px;
border:1px solid rgba(255,255,255,.08);
}
.auth-tab{
flex:1;padding:11px;border-radius:99px;
font-size:.8rem;font-weight:700;color:rgba(255,255,255,.4);
transition:all .2s;cursor:pointer;opacity:.55;
}
.auth-tab:hover{opacity:.8}
.auth-tab.on{
background:var(--grad);color:#fff;opacity:1;
box-shadow:0 4px 14px rgba(10,108,240,.35);
}
.auth-tab.on:hover{opacity:1;filter:brightness(1.06)}
/* form */
.auth-form{display:none;flex-direction:column;gap:14px;flex:1}
.auth-form.on{display:flex}
/* Sam's hello on the signup form — Liahona + "Click me" arrow. The pulse is the
whole point: it has to read as tappable, because the tap is what unlocks
audio playback (browsers block sound before a user gesture). */
.su-sam{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.su-sam-orb{flex:0 0 auto;width:62px;height:62px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.16),rgba(255,255,255,.04));
display:grid;place-items:center;animation:suSamPulse 2.4s ease-in-out infinite}
.su-sam-orb img{width:52px;height:52px;object-fit:contain;display:block}
.su-sam-orb:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.su-sam-nudge{display:flex;align-items:center;gap:7px;color:var(--text2);min-width:0;
background:none;border:0;padding:0;text-align:left;cursor:pointer}
.su-sam-arrow{width:34px;height:22px;flex:0 0 auto;color:var(--text2);opacity:.85;
animation:suSamPoint 1.6s ease-in-out infinite}
.su-sam-say{font-family:var(--head);font-size:.9rem;font-weight:600;line-height:1.35}
.su-sam-nudge:hover .su-sam-say{color:var(--text)}
@keyframes suSamPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(242,178,51,.34)}
50%{transform:scale(1.05);box-shadow:0 0 0 12px rgba(242,178,51,0)}}
@keyframes suSamPoint{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@media(prefers-reduced-motion:reduce){.su-sam-orb,.su-sam-arrow{animation:none!important}}
/* Pre-signup Q&A panel — opens under the Liahona on the landing screen. Dark
auth theme; sized to sit alongside the sign-in form without crowding it. */
.su-ask{margin:4px 0 2px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
background:rgba(255,255,255,.04);padding:12px;display:flex;flex-direction:column;gap:10px}
.su-ask-head{display:flex;align-items:center;justify-content:space-between}
.su-ask-title{font-family:var(--head);font-weight:700;font-size:.92rem;color:var(--text)}
.su-ask-close{background:none;border:0;color:var(--text2);font-size:.95rem;cursor:pointer;line-height:1;padding:4px}
.su-ask-close:hover{color:var(--text)}
.su-ask-log{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto;
-webkit-overflow-scrolling:touch}
.su-ask-log:empty{display:none}
.su-ask-msg{font-size:.86rem;line-height:1.45;padding:9px 12px;border-radius:13px;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.su-ask-q{align-self:flex-end;background:linear-gradient(135deg,var(--gold),#e5b91f);color:#0a0b14;font-weight:600;border-bottom-right-radius:5px}
.su-ask-a{align-self:flex-start;background:rgba(255,255,255,.08);color:var(--text);border-bottom-left-radius:5px}
.su-ask-a.err{background:rgba(224,137,74,.16);color:#f0c9a8}
.su-ask-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.08)}
.su-ask-typing span{width:6px;height:6px;border-radius:50%;background:var(--text2);opacity:.6;animation:suAskBlink 1.2s infinite}
.su-ask-typing span:nth-child(2){animation-delay:.2s}
.su-ask-typing span:nth-child(3){animation-delay:.4s}
@keyframes suAskBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
.su-ask-chips{display:flex;flex-wrap:wrap;gap:6px}
.su-ask-chip{font-size:.76rem;font-weight:600;color:var(--text2);cursor:pointer;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 11px}
.su-ask-chip:hover{color:var(--text);border-color:rgba(255,255,255,.24)}
.su-ask-row{display:flex;gap:8px;align-items:center}
.su-ask-input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
border-radius:999px;padding:10px 14px;color:var(--text);font-size:.86rem}
.su-ask-input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09)}
.su-ask-input::placeholder{color:rgba(255,255,255,.4)}
.su-ask-send{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),#e5b91f);color:#0a0b14}
.su-ask-send svg{width:17px;height:17px}
.su-ask-send:disabled{opacity:.5;cursor:default}
.form-field{
background:rgba(255,255,255,.06);
border:1.5px solid rgba(255,255,255,.1);
border-radius:12px;
padding:13px 16px;
font-size:.88rem;font-weight:500;color:#fff;
transition:border-color .15s,background .15s;
}
.form-field:focus{border-color:var(--gold);background:rgba(255,255,255,.09)}
.form-field::placeholder{color:rgba(255,255,255,.4)}
.pw-wrap{position:relative;display:flex}
.pw-wrap .form-field{flex:1;padding-right:64px}
.pw-toggle{
position:absolute;right:7px;top:50%;transform:translateY(-50%);
background:none;border:0;cursor:pointer;
font-size:.72rem;font-weight:700;letter-spacing:.04em;
color:var(--gold);padding:6px 9px;border-radius:8px;
}
.pw-toggle:hover{background:rgba(255,255,255,.08)}
.auth-forgot{margin-top:-6px;text-align:center;font-size:.78rem;font-weight:600;color:var(--gold);cursor:pointer;opacity:.85}
/* Sign-in method pills + segmented PIN boxes (QuickAccess-S1, Robert-directed —
PIN separated from email/password so the OS never autofills a saved password
over PIN entry). Coordinated with Auth-S1 (owns the auth screen). */
.signin-mode{display:flex;gap:8px;margin-bottom:12px}
.signin-pill{flex:1;padding:10px 10px;border-radius:99px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(255,255,255,.66);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}
.signin-pill.on{background:var(--gold);border-color:var(--gold);color:#161007}
#si-pin-fields{display:flex;flex-direction:column}
/* The display:flex above is an ID selector, so it outranks the UA's
[hidden]{display:none} — without this guard setSigninMode('pw') set the
attribute but the PIN boxes stayed on screen next to the password field. */
#si-pin-fields[hidden]{display:none}
.pin-boxes-label{text-align:center;font-size:.9rem;font-weight:700;color:#fff;margin:2px 0 12px}
.pin-boxes{display:flex;gap:10px;justify-content:center}
.pin-box{
width:100%;max-width:62px;height:66px;text-align:center;
font-size:1.7rem;font-weight:800;color:#fff;
background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;
caret-color:var(--gold);transition:border-color .12s,box-shadow .12s,background .12s;
}
.pin-box:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(212,164,65,.22)}
.pin-box.filled{border-color:var(--gold)}
.pin-boxes-hint{text-align:center;font-size:.72rem;color:rgba(255,255,255,.45);margin-top:10px}
/* Which account the typed PIN will unlock. */
.pin-target{margin-bottom:12px}
.pin-target-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:14px;
border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer;text-align:left}
.pin-target-row:hover{background:rgba(255,255,255,.08)}
.pin-target-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;display:flex;align-items:center;
justify-content:center;background:var(--slate);color:#fff;font-weight:800;font-size:.85rem}
.pin-target-av img{width:100%;height:100%;object-fit:cover;display:block}
.pin-target-body{flex:1 1 auto;min-width:0}
.pin-target-name{display:block;font-size:.86rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-target-sub{display:block;font-size:.68rem;color:rgba(255,255,255,.5)}
.pin-target-switch{flex:0 0 auto;font-size:.7rem;font-weight:700;color:var(--gold)}
.pin-target-list{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.pin-target-list[hidden]{display:none}
.pin-target-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:12px;
border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;font-size:.8rem;font-weight:600;
cursor:pointer;text-align:left}
.pin-target-opt:hover{background:rgba(255,255,255,.09)}
.pin-target-opt.on{border-color:var(--gold)}
/* Error state — a red panel BEHIND and AROUND the digit boxes, so a wrong PIN
is impossible to miss (a toast was too small to read at arm's length). */
.pin-shell{border-radius:16px;padding:0;transition:background .18s,border-color .18s,padding .18s;
border:1.5px solid transparent}
.pin-shell.err{background:rgba(var(--red-rgb),.18);border-color:var(--red);padding:14px 12px 12px;
animation:pinShellShake .38s cubic-bezier(.36,.07,.19,.97)}
.pin-shell.err .pin-box{border-color:rgba(var(--red-rgb),.75)}
.pin-error{margin-top:12px;text-align:center}
.pin-error[hidden]{display:none}
.pin-error-title{font-size:.95rem;font-weight:800;color:#fff;letter-spacing:.01em}
.pin-error-sub{margin-top:4px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.82);line-height:1.35}
@keyframes pinShellShake{
10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}
}
@media (prefers-reduced-motion:reduce){ .pin-shell.err{animation:none} }
.auth-forgot:hover{opacity:1}
.auth-reset-note{font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.6)}
.form-row{display:flex;gap:10px}
.form-row .form-field{flex:1}
.form-label{
font-size:.62rem;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.55);
margin:8px 0 -4px 2px;
}
.form-label-hint{font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:none;margin-left:6px;font-size:.72em}
/* chips */
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.fchip{
padding:8px 13px;border-radius:99px;
background:#1A1F2A;
border:1.5px solid rgba(255,255,255,.12);
font-size:.72rem;font-weight:700;color:rgba(255,255,255,.72);
transition:all .15s;
}
.fchip.on{
background:var(--gold);border-color:var(--gold);color:var(--slate);
box-shadow:0 2px 10px rgba(242,178,51,.35);
}
.fchip:disabled{opacity:.35;cursor:not-allowed}
/* role cards */
.role-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.role-grid.two{grid-template-columns:1fr 1fr}
.role-card{
padding:14px 6px;border-radius:13px;
background:#1A1F2A;
border:1.5px solid rgba(255,255,255,.1);
display:flex;flex-direction:column;align-items:center;gap:5px;
font-size:.72rem;font-weight:700;color:rgba(255,255,255,.7);
transition:all .15s;
}
.role-card-ic{display:flex;justify-content:center;line-height:1;color:var(--lake)}
.role-card-ic svg{width:26px;height:26px}
.role-card.on{
background:linear-gradient(135deg,rgba(242,178,51,.22),rgba(10,108,240,.18));
border-color:var(--gold);color:#fff;
box-shadow:0 4px 16px rgba(242,178,51,.18);
}
/* standards */
.standards-check{
display:flex;align-items:flex-start;gap:10px;
padding:12px 14px;
background:rgba(255,255,255,.04);
border:1.5px solid rgba(255,255,255,.08);
border-radius:12px;cursor:pointer;
margin-top:4px;
}
.standards-check input{
margin-top:2px;flex-shrink:0;width:18px;height:18px;
accent-color:var(--gold);cursor:pointer;
}
.standards-check span{
font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.7);font-weight:500;
}
.standards-check strong{color:var(--gold);font-weight:700}
/* submit */
.auth-submit{
margin-top:14px;padding:15px;border-radius:13px;
background:var(--grad);color:#fff;
font-size:.95rem;font-weight:800;letter-spacing:.02em;
box-shadow:0 6px 22px rgba(10,108,240,.4);
transition:transform .12s,opacity .12s;
}
.auth-submit:hover{opacity:.95}
.auth-submit:active{transform:scale(.98)}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-switch{
text-align:center;
font-size:.78rem;font-weight:600;color:rgba(255,255,255,.55);
padding:12px;cursor:pointer;
}
.auth-switch strong{color:var(--gold);font-weight:800}
/* TEMP (v156): guest bypass — testers were getting stuck in account creation.
Always visible under the forms, whatever tab/form is showing. Remove (or
demote) once signup friction is fixed. */
.auth-guest{
display:block;width:100%;margin:14px 0 2px;padding:13px 16px;
font-family:inherit;font-size:.88rem;font-weight:800;cursor:pointer;
color:var(--gold);background:#241B0E;
border:1.5px dashed rgba(217,164,65,.55);border-radius:12px;
transition:background .15s,border-color .15s;
}
.auth-guest:hover{background:#33270F;border-color:var(--gold)}
.auth-guest small{display:block;font-size:.68rem;font-weight:600;color:rgba(255,255,255,.55);margin-top:3px}
/* Founder Supporter onboarding card — set apart from the paid tiers. */
.onb-plan-founder{border-color:rgba(242,178,51,.5);background:linear-gradient(180deg,rgba(242,178,51,.07),rgba(255,255,255,.03))}
.onb-plan-founder .onb-plan-grp{color:var(--gold)}
.auth-disclaim{
font-size:.6rem;color:rgba(255,255,255,.35);
text-align:center;line-height:1.6;margin-top:18px;
padding:0 12px;font-weight:500;
}
.auth-disclaim strong{color:rgba(255,255,255,.5);font-weight:700}
/* ── SHELL ────────────────────────────────────────── */
#app{height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}
/* ── HEADER — large Brand Primary logo, bell + gear floating in corners ─ */
#hdr{
position:relative;
/* The header BAR spans the full window, but its controls (back, menu, bell)
align to the CONTENT column edges instead of the window edges, so they read
as part of the same screen. --hdr-gutter = the side margin outside the
centered --shellW column; max(0px,…) collapses to 0 on phones/narrow windows
so their inset is unchanged. (Robert 2026-07-08) */
--hdr-gutter: max(0px, calc((100vw - var(--shellW)) / 2));
background:var(--glass);
-webkit-backdrop-filter:blur(22px) saturate(1.5);
backdrop-filter:blur(22px) saturate(1.5);
border-bottom:1px solid var(--glass-brd);
flex-shrink:0;
box-shadow:0 4px 24px rgba(0,0,0,.28);
padding:calc(6px + env(safe-area-inset-top,0px)) 6px 4px; /* almost no padding around the logo */
display:flex;justify-content:center;align-items:center;
/* z-index above Now Playing (150) so the menu bar / logo / bell / gear are
never covered by a fixed content panel that drifts over the header (the
"NP covers the menu bar" regression). Stays below Sam/steward (165/170)
and the dropdown menu (209/210), so those still open over the header. */
overflow:hidden;z-index:155;
}
.hdr-btn{
position:absolute;top:50%;transform:translateY(-50%);
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:rgba(190,198,212,.72);font-size:1.05rem;background:transparent;
transition:background .15s,color .15s;z-index:2;
}
.hdr-btn svg{width:20px;height:20px}
.hdr-btn.left{left:calc(var(--hdr-gutter) + 12px)}
.hdr-btn.left2{left:calc(var(--hdr-gutter) + 50px)}
.hdr-btn.right{right:calc(var(--hdr-gutter) + 12px)}
.hdr-btn.right2{right:calc(var(--hdr-gutter) + 50px)}
.hdr-btn.right2 .steward-dot{
position:absolute;top:3px;right:3px;
width:14px;height:14px;border-radius:50%;
background:var(--gold);color:var(--slate);
font-size:.55rem;font-weight:900;
display:flex;align-items:center;justify-content:center;
border:2px solid var(--surface);
}
.hdr-btn:hover{background:var(--bg)}
.bell-wrap{position:absolute}
/* ── MAIN MENU dropdown (hamburger, top-left) ───────── */
#mainmenu-panel{
position:fixed;
top:calc(54px + env(safe-area-inset-top,0px));
/* Dock to the app column's LEFT EDGE, not the window's. The column is
--shellW wide and centered (body max-width:var(--shellW)); on a wide
monitor a plain left:8px flies to the screen edge. Mirrors the FAB
shell-hug idiom (~L5072). max() keeps it at 8px when the column already
fills the viewport (phones), so phone behavior is unchanged. */
left:max(8px, calc(50vw - var(--shellW)/2 + 8px));
min-width:236px;
/* SOLID panel — no glass. The menu can open over any screen (Tribes' busy
art made the old translucent --glass body unreadable). Opaque --tile-solid
body + no backdrop-filter guarantees readable contrast everywhere. */
background:var(--tile-solid,#161c26);
border:1px solid var(--glass-brd);
border-radius:14px;
box-shadow:0 14px 36px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.28);
padding:6px;
/* Top-level nav surface: must sit ABOVE Now Playing (150), the media-player
overlay (120) and the Sam panels (160-170) so the menu is always reachable,
even with a song's Now Playing screen open. (Robert 2026-07-24) */
z-index:210;
/* Cap height to the gap between the header and the bottom nav, then scroll
internally — otherwise a long menu (Owner sees every item) runs off the
bottom and its footer (version stamp) hides behind the fixed nav.
dvh tracks mobile browser chrome; vh line is the fallback for old engines. */
max-height:calc(100vh - 54px - env(safe-area-inset-top,0px) - var(--nav-h) - 24px);
max-height:calc(100dvh - 54px - env(safe-area-inset-top,0px) - var(--nav-h) - 24px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
opacity:0; transform:translateY(-6px) scale(.98);
pointer-events:none;
transition:opacity .14s ease, transform .14s ease;
}
#mainmenu-panel.on{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.mm-item{
display:flex;align-items:center;gap:12px;
width:100%;padding:11px 12px;
background:transparent;border:0;border-radius:9px;
color:var(--text);font-size:.92rem;font-weight:600;text-align:left;
cursor:pointer;transition:background .12s;
}
.mm-item:hover,.mm-item:focus-visible{background:rgba(255,255,255,.06);outline:none}
.mm-item svg{width:18px;height:18px;color:var(--dim);flex-shrink:0}
.mm-item.danger{color:#ff7a7a}
.mm-item.danger svg{color:#ff7a7a}
.mm-sep{height:1px;background:var(--glass-brd);margin:4px 6px}
/* Staff & Admin section — gated items, color-coded by access tier. Each tier
group sets --mm-tier (inline on the label + its items): a small labelled
sub-header with a matching dot, and items carrying a left accent stripe and a
tinted icon. Signals "not a user-facing option" at a glance, by privilege. */
.mm-tier-label{display:flex;align-items:center;gap:7px;padding:9px 12px 3px;margin-top:2px;
font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.mm-tier-label::before{content:"";width:7px;height:7px;border-radius:50%;
background:var(--mm-tier,#8A9AAA);flex:none}
.mm-tier-item{border-left:3px solid var(--mm-tier,#8A9AAA);border-radius:4px 9px 9px 4px;margin-left:6px}
.mm-tier-item svg{color:var(--mm-tier,#8A9AAA)}
/* Creator Studio tab bar — a persistent strip across the upload / album /
manage / spreadsheet screens so they read as one tabbed workspace. Rendered
by csRenderTabs() (js/upload/upload.js) into the [data-cstabs] slot on each. */
.cs-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cs-tabs::-webkit-scrollbar{display:none}
.cs-tab{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);color:var(--text2);
border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:700;cursor:pointer;
transition:background .12s,color .12s,border-color .12s}
.cs-tab:hover{background:rgba(255,255,255,.09);color:var(--text)}
.cs-tab.on{background:var(--accent-listen,#65B9FF);border-color:transparent;color:#08111e}
.cs-tab-ic{font-size:.9em}
/* Hamburger accordion group (Interactive Docs) + its nested items. */
.mm-item.mm-accordion .mm-caret{width:16px;height:16px;margin-left:auto;color:var(--dim);
transition:transform .15s ease}
.mm-item.mm-accordion[aria-expanded="true"] .mm-caret{transform:rotate(90deg)}
/* Children step well in from their parent: the rail drops from under the
parent's ICON column and each child hangs off it on an elbow, so nesting is
readable at a glance. The old 8px margin + 1px hairline was too subtle —
a sub-item read as an odd sibling that had lost its tier stripe rather than
as a child. The submenu is a SIBLING of its button, not a child of it, so
--mm-tier does not cascade; it carries its own inline copy (see index.html)
and falls back to grey if a future group forgets to set one. */
.mm-submenu{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 30px;
padding-left:14px;border-left:2px solid var(--mm-tier-soft,var(--glass-brd))}
/* Same trap as #si-pin-fields above: an author display:flex outranks the UA's
[hidden]{display:none}, so idocsToggle() flipped the attribute and rotated
the caret while the submenu stayed on screen — the accordion looked broken
because only its arrow ever moved. The group has never actually collapsed. */
.mm-submenu[hidden]{display:none}
.mm-item.mm-sub{position:relative;align-items:flex-start;padding:8px 10px;font-weight:600}
/* Elbow joining the rail to each child. top lands on the child icon's centre
(8px padding + 1px nudge + half of the 18px icon). */
.mm-item.mm-sub::before{content:"";position:absolute;left:-14px;top:18px;
width:11px;height:2px;border-radius:1px;background:var(--mm-tier-soft,var(--glass-brd))}
/* Tint child icons to the parent's tier, like .mm-tier-item does for top-level
gated items — a nested dev tool is still a dev tool and should look it. */
.mm-item.mm-sub svg{margin-top:1px;color:var(--mm-tier,#8A9AAA)}
.mm-sub-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.mm-sub-title{font-size:.88rem;color:var(--text)}
.mm-sub-blurb{font-size:.72rem;font-weight:500;color:var(--text2);line-height:1.35;
white-space:normal}
/* Interactive-doc viewer overlay (sandboxed iframe) — mirrors Founder Vault. */
#idocs-overlay .idocs-panel{position:fixed;inset:10px;max-width:1240px;margin:0 auto;
background:#12141a;border:1px solid rgba(255,255,255,.09);border-radius:16px;
display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.55)}
@supports (inset:max(0px)){ #idocs-overlay .idocs-panel{
top:max(10px, env(safe-area-inset-top)); bottom:max(10px, env(safe-area-inset-bottom)) } }
.idocs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 12px 10px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.idocs-title{font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px;min-width:0}
.idocs-title svg{width:17px;height:17px;color:var(--dim);flex:0 0 auto}
.idocs-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idocs-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.idocs-open{font-size:12px;font-weight:600;color:#9aa3b2;text-decoration:none;
padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.idocs-open:hover{color:#fff;background:rgba(255,255,255,.06)}
.idocs-close{background:none;border:0;color:#9aa3b2;font-size:16px;padding:6px 10px;
cursor:pointer;border-radius:8px}
.idocs-close:hover{color:#fff;background:rgba(255,255,255,.06)}
.idocs-body{flex:1;display:flex;min-height:0}
.idocs-frame{flex:1;width:100%;border:0;background:#0f1115}
/* Functionality Mind Map (editable Mind-Elixir editor) — full-screen overlay. */
#fmm-overlay .fmm-panel{position:fixed;inset:10px;max-width:1280px;margin:0 auto;background:#12141a;
border:1px solid rgba(255,255,255,.09);border-radius:16px;display:flex;flex-direction:column;
overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.55)}
@supports (inset:max(0px)){ #fmm-overlay .fmm-panel{ top:max(10px, env(safe-area-inset-top)); bottom:max(10px, env(safe-area-inset-bottom)) } }
.fmm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:9px 12px 9px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.fmm-title{font-weight:700;font-size:15px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.fmm-hint{font-size:11px;font-weight:500;color:#7f8798;letter-spacing:.01em}
.fmm-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fmm-pick{display:flex;gap:4px}
.fmm-st{cursor:pointer;font:inherit;font-size:11px;font-weight:700;color:#c7cdda;padding:4px 9px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);background:transparent;transition:.12s}
.fmm-st:hover:not(:disabled){border-color:var(--c);color:#fff}
.fmm-st.on{background:color-mix(in srgb,var(--c) 26%,transparent);border-color:var(--c);color:#fff}
.fmm-st:disabled{opacity:.35;cursor:default}
.fmm-btn{cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:#c7cdda;padding:6px 12px;border-radius:9px;
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:.12s}
.fmm-btn:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.3)}
.fmm-btn.primary{background:#5a4fcf;border-color:#5a4fcf;color:#fff}
.fmm-btn.primary:disabled{opacity:.4;cursor:default}
.fmm-close{background:none;border:0;color:#9aa3b2;font-size:16px;padding:6px 10px;cursor:pointer;border-radius:8px}
.fmm-close:hover{color:#fff;background:rgba(255,255,255,.06)}
.fmm-map{flex:1;min-height:0;position:relative;background:#0f1115}
.fmm-map .map-container{width:100%;height:100%}
.fmm-foot{flex:0 0 auto;padding:7px 14px;border-top:1px solid rgba(255,255,255,.08);
font-size:11.5px;color:#8791a3;font-variant-numeric:tabular-nums}
.role-choices{display:flex;flex-direction:column;gap:10px}
.role-choice{
text-align:left;width:100%;padding:13px 15px;border-radius:14px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid var(--glass-brd);
transition:background .12s,border-color .12s;
}
.role-choice.on{background:rgba(217,164,65,.14);border-color:var(--gold)}
.role-choice .rc-name{font-size:.98rem;font-weight:800;color:#fff;margin-bottom:2px}
.role-choice .rc-desc{font-size:.82rem;color:var(--text2);line-height:1.4}
.mm-steward-dot{
margin-left:auto;background:var(--gold);color:var(--slate);
font-size:.6rem;font-weight:900;min-width:18px;height:18px;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
position:static;border:0;
}
.mm-version{
text-align:center;
padding:8px 6px 4px;
font-size:.74rem;font-weight:700;letter-spacing:.06em;
color:rgba(190,198,212,.55);
pointer-events:none;
}
/* Volunteer board */
.vp-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;margin-bottom:14px}
.vp-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.vp-badge{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:rgba(217,164,65,.18);color:var(--gold);padding:3px 8px;border-radius:99px;border:1px solid rgba(217,164,65,.4)}
.vp-seats{font-size:.72rem;color:var(--text2);font-weight:700}
.vp-title{color:#fff;font-size:1.05rem;font-weight:800;margin:2px 0 6px;line-height:1.25}
.vp-summary{color:var(--text);font-size:.9rem;line-height:1.5;margin:0 0 10px}
.vp-meta{font-size:.82rem;color:var(--text2);line-height:1.55;margin-bottom:10px}
.vp-meta strong{color:#fff;font-weight:700}
.vp-scope{font-size:.85rem;color:var(--text);line-height:1.55;margin-bottom:14px}
.vp-scope p{margin:0 0 8px}
.vp-scope ul{margin:0 0 8px;padding-left:20px}
.vp-scope li{margin-bottom:3px}
.vp-scope strong{color:#fff}
.vp-actions{display:flex;gap:8px}
.vp-reach{display:inline-block;background:var(--gold);color:var(--slate);font-weight:800;font-size:.85rem;padding:9px 16px;border-radius:10px;text-decoration:none}
.vp-reach:hover{filter:brightness(1.06)}
.vp-admin{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:6px;flex-wrap:wrap}
.vp-mini{appearance:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--text2);font-size:.74rem;font-weight:700;padding:5px 10px;border-radius:8px;cursor:pointer}
.vp-mini:hover{color:#fff;border-color:rgba(255,255,255,.3)}
/* Volunteer form overlay rows */
.vf-row{margin-bottom:11px}
.vf-row label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);margin-bottom:5px}
.vf-row input, .vf-row textarea, .vf-row select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:.9rem;font-family:inherit}
.vf-row select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px}
.vf-row select option{background:#1b2230;color:#fff}
.vf-row textarea{resize:vertical;line-height:1.5}
.vf-hint{font-size:.74rem;color:var(--text2);margin-top:4px}
.vf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vf-delete{width:100%;background:rgba(220,80,80,.12);border:1px solid rgba(220,80,80,.4);color:#ff9a9a;font-weight:700;padding:10px;border-radius:10px;cursor:pointer}
.vf-delete:hover{background:rgba(220,80,80,.2)}
/* Read · E-books toolbar — Sort By dropdown above the grid */
.ebooks-toolbar{display:flex;align-items:center;gap:10px;padding:0 16px 12px;max-width:100%}
.ebooks-toolbar label{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);flex-shrink:0}
.ebooks-toolbar select{flex:1;min-width:0;padding:10px 32px 10px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05) url("data:image/svg+xml;utf8,") no-repeat right 10px center;background-size:14px;color:#fff;font-size:.92rem;font-family:inherit;appearance:none;-webkit-appearance:none}
.ebooks-toolbar select option{background:#1b2230;color:#fff}
/* Manage Genres admin drilldown — labelled cascading