/* ============================================================
Mastermind Portal — design system
Light: warm canvas, white cards, indigo accent (current look,
with tighter component polish).
Dark: V3 "premium consumer" — off-black, violet, pill CTAs.
============================================================ */
:root{
/* Light (default). Palette is intentionally warm to feel editorial, not
"cold SaaS". Dark palette lives in [data-theme="dark"] below and only
redefines the neutrals — the accent + status colors stay identical so
brand feels the same in both modes. */
--bg:#f6f6f4; /* warm canvas */
--surface:#ffffff;
--surface-2:#fafaf9;
--surface-3:#f2f2ef; /* subtler than surface-2, for nested chrome */
--ink:#18181d;
--ink-2:#3f3f49;
--muted:#6e6e7a;
--muted-2:#9d9da8;
--line:#e8e8e6;
--line-2:#efefed;
--hairline:rgba(24,24,29,.07);
--scrim:rgba(24,24,29,.32);
--accent:#2f6df6;
--accent-hi:#4d84f8;
--accent-lo:#1e56d6;
--accent-soft:#e9f0ff;
--accent-ink:#1a44a8;
--success:#059669;
--success-soft:#e7f6ef;
--danger:#dc2626;
--danger-soft:#fdeeee;
--gold:#f5b642;
--gold-soft:#fff3d6;
--radius:16px;
--radius-sm:10px;
--radius-lg:22px;
--shadow-sm:0 1px 2px rgba(24,24,29,.05);
--shadow-card:0 1px 2px rgba(24,24,29,.04),0 8px 24px -12px rgba(24,24,29,.10);
--shadow-lift:0 2px 4px rgba(24,24,29,.05),0 16px 32px -12px rgba(24,24,29,.14);
--shadow-pop:0 24px 56px -16px rgba(24,24,29,.22);
--maxw:1240px;
--font:"Inter",-apple-system,"SF Pro Text",Segoe UI,Helvetica,Arial,sans-serif;
--head:var(--font);
--ease:cubic-bezier(.2,.7,.2,1);
}
/* Dark mode = "Premium consumer" theme: off-black canvas, saturated violet
primary, emerald accents, pill buttons, gradient welcome headline. Set
as the sole dark treatment (no separate variant needed). */
:root[data-theme="dark"]{
--bg:#0b0a12;
--surface:#15141c;
--surface-2:#1b1a24;
--surface-3:#23222f;
--ink:#f7f6fb;
--ink-2:#d3d1e0;
--muted:#8b8798;
--muted-2:#5a5764;
--line:#26243a;
--line-2:#1c1b28;
--hairline:rgba(255,255,255,.08);
--scrim:rgba(0,0,0,.6);
--accent:#8b5cf6;
--accent-hi:#a78bfa;
--accent-lo:#6d28d9;
--accent-soft:rgba(139,92,246,.15);
--accent-ink:#c4b5fd;
--success:#22d18c;
--success-soft:rgba(34,209,140,.14);
--danger:#ef4d4d;
--danger-soft:rgba(239,77,77,.14);
--gold:#facc15;
--gold-soft:rgba(250,204,21,.14);
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-card:0 1px 2px rgba(0,0,0,.4),0 10px 32px -12px rgba(0,0,0,.55);
--shadow-lift:0 2px 4px rgba(0,0,0,.45),0 20px 40px -12px rgba(0,0,0,.65);
--shadow-pop:0 30px 60px -16px rgba(0,0,0,.75);
}
/* Ambient violet glow at the top of the canvas — signature "premium" feel. */
:root[data-theme="dark"] body{background:
radial-gradient(ellipse 900px 500px at 50% -10%,rgba(58,29,112,.35) 0%,transparent 60%),
var(--bg) fixed}
/* Gradient wordmark on the welcome headline. */
:root[data-theme="dark"] .dash-greet h1{
background:linear-gradient(90deg,#fff 0%,#c4b5fd 90%);-webkit-background-clip:text;background-clip:text;
color:transparent;padding-bottom:6px}
/* Cards feel lit-from-above with a subtle top-inset highlight. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .plan-strip,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .tool-card{background:linear-gradient(180deg,var(--surface),var(--surface-2));
box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.03)}
/* Rounded pill buttons in dark. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-white,
:root[data-theme="dark"] .btn-primary{border-radius:999px;padding:12px 22px;font-weight:640}
:root[data-theme="dark"] .btn-primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));
box-shadow:0 6px 16px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.18)}
:root[data-theme="dark"] .btn-primary:hover{box-shadow:0 8px 22px rgba(139,92,246,.55);transform:translateY(-1px)}
:root[data-theme="dark"] .btn-white{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
:root[data-theme="dark"] .btn-white:hover{background:var(--surface-3);border-color:var(--accent)}
/* Cornerstone hero: violet-shot gradient overlay + violet pips. */
:root[data-theme="dark"] .corner-editorial{background:
linear-gradient(135deg,rgba(11,10,18,.96),rgba(58,29,112,.72) 55%,rgba(139,92,246,.35)),
var(--art,linear-gradient(135deg,#1a1c2e,#0f1120)) center/cover no-repeat}
:root[data-theme="dark"] .corner-e-eyebrow{color:var(--accent-hi)}
:root[data-theme="dark"] .corner-e-eyebrow .dot{background:var(--accent-hi);box-shadow:0 0 0 3px rgba(139,92,246,.28)}
:root[data-theme="dark"] .corner-e-progress .pip.done{background:linear-gradient(90deg,var(--accent-hi),var(--accent))}
:root[data-theme="dark"] .corner-e-progress .pip.next{background:var(--accent-hi);
box-shadow:0 0 0 3px rgba(139,92,246,.35)}
:root[data-theme="dark"] .corner-e-glow{background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent 70%)}
/* Sidebar active state gets a violet inset rail. */
:root[data-theme="dark"] .sb-link.active{background:var(--surface-2);border-color:var(--line);
box-shadow:inset 3px 0 0 var(--accent)}
:root[data-theme="dark"] .sb-link.active svg{stroke:var(--accent-hi)}
/* Rookie/rank pill takes on the emerald accent in dark. */
:root[data-theme="dark"] .rank-pill{background:linear-gradient(180deg,rgba(34,209,140,.24),rgba(34,209,140,.12)) !important;
border-color:rgba(34,209,140,.35) !important;color:#22d18c !important}
:root[data-theme="dark"] .appbar-avatar{background:var(--surface-2);border-color:var(--line)}
:root[data-theme="dark"] .appbar-search{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
:root[data-theme="dark"] .stat-card::before{height:3px;opacity:.85}
:root[data-theme="dark"] .tool-card::before{width:4px;opacity:.85}
/* Plan hero in dark: violet gradient. */
:root[data-theme="dark"] .plan-hero{background:linear-gradient(120deg,#3a1d70 0%,#5a1fa8 45%,#8b5cf6 100%);
box-shadow:0 20px 60px -16px rgba(109,40,217,.55)}
:root[data-theme="dark"] .plan-hero .btn-primary{background:#fff;color:#3a1d70}
:root[data-theme="dark"] .plan-hero .btn-primary:hover{background:#f3eeff;color:#3a1d70}
:root[data-theme="dark"] .dash{background:radial-gradient(900px 420px at 50% -160px,rgba(139,92,246,.18),transparent 70%)}
:root[data-theme="dark"] .appbar{background:color-mix(in srgb,var(--bg) 72%,transparent)}
:root[data-theme="dark"] .sidebar{background:transparent}
:root[data-theme="dark"] .course-card,
:root[data-theme="dark"] .member-card,
:root[data-theme="dark"] .credit-card,
:root[data-theme="dark"] .rank-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .profile-bio,
:root[data-theme="dark"] .palette,
:root[data-theme="dark"] .notif-panel{
background:linear-gradient(180deg,var(--surface),var(--surface-2));
box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.03)
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea{
background:var(--surface-2);border-color:var(--line);color:var(--ink)
}
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field textarea:focus{
border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(139,92,246,.22)
}
:root[data-theme="dark"] .soon-pill{background:var(--surface-3);border-color:var(--line);color:var(--muted)}
:root[data-theme="dark"] .pulse{background:var(--surface-2);border-color:var(--line)}
:root[data-theme="dark"] .live-day{background:var(--surface-3);border-color:var(--line)}
:root[data-theme="dark"] .rank-track{background:var(--surface-3)}
:root[data-theme="dark"] .credit-track{background:var(--surface-3)}
:root[data-theme="dark"] .appbar-ico:hover{background:var(--surface-2);border-color:var(--line)}
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible{
outline:none;box-shadow:0 0 0 3px rgba(139,92,246,.28)
}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
/* The hidden attribute only gets display:none from the browser's own
stylesheet, which any author rule outranks. So a component that sets
its own display (a modal grid, a card block) stays on screen after
JS sets .hidden = true, and the close button appears to do nothing.
Stating it here means a component can set display without also having
to remember to opt back out of it. */
[hidden]{display:none !important}
html,body{margin:0;padding:0;overflow-x:hidden}
/* Reserve the scrollbar gutter on every page so centered layouts don't
shift sideways between pages that scroll and pages that don't
(classic scrollbars only; overlay scrollbars are unaffected). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
button,a{-webkit-tap-highlight-color:transparent}
body{
font-family:var(--font);
font-feature-settings:"cv11","ss01","tnum" 0;
color:var(--ink);
background:var(--bg);
min-height:100vh;
line-height:1.55;
font-size:15px;
-webkit-font-smoothing:antialiased;
transition:background .18s ease,color .18s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:660;margin:0 0 .4em;letter-spacing:-.032em;color:var(--ink);
overflow-wrap:break-word;word-break:break-word}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.muted{color:var(--muted)}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:1px solid transparent;
border-radius:var(--radius-sm);padding:10px 18px;font-family:var(--font);font-weight:590;font-size:14px;
cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
line-height:1.25;letter-spacing:-.01em}
.btn:active{transform:translateY(0) scale(.985)}
.btn-orange,.btn-blue,.btn-primary{color:#fff;
background:linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 100%);
box-shadow:0 1px 2px rgba(47,109,246,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-orange:hover,.btn-blue:hover,.btn-primary:hover{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-lo) 100%);
box-shadow:0 3px 10px rgba(47,109,246,.5),inset 0 1px 0 rgba(255,255,255,.16);transform:translateY(-1px)}
.btn-white{background:var(--surface);color:var(--ink);border-color:var(--hairline);box-shadow:var(--shadow-sm)}
.btn-white:hover{box-shadow:var(--shadow-card);transform:translateY(-1px);border-color:var(--line)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface);box-shadow:var(--shadow-sm)}
.btn-accent{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:620}
.btn-accent:hover{background:var(--accent-lo)}
/* ============================================================
App shell — quiet sidebar on canvas, content on canvas,
white cards elevate. (Notion/Linear pattern.)
============================================================ */
.shell{display:flex;min-height:100vh}
.sidebar{width:228px;flex:none;background:transparent;border-right:1px solid var(--line-2);
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.sb-brand{display:flex;align-items:center;padding:24px 22px 16px}
.sb-brand img{height:18px}
/* Ecosystem switcher — sits between the brand and the nav. Only rendered
when the user has more than one membership program. */
.sb-eco{position:relative;padding:0 14px 14px}
.sb-eco-btn{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);
border:1px solid var(--hairline);border-radius:10px;padding:8px 10px;cursor:pointer;
color:inherit;font:inherit;text-align:left;transition:.14s var(--ease)}
.sb-eco-btn:hover{background:var(--surface-2);border-color:var(--line)}
.sb-eco-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--bg)}
.sb-eco-name{flex:1;font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
overflow-wrap:anywhere}
.sb-eco-caret{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;transition:transform .14s var(--ease)}
.sb-eco-btn[aria-expanded="true"] .sb-eco-caret{transform:rotate(180deg)}
.sb-eco-menu{position:absolute;top:calc(100% - 6px);left:14px;right:14px;z-index:5;
background:var(--surface);border:1px solid var(--hairline);border-radius:10px;
box-shadow:var(--shadow-pop);padding:4px;display:flex;flex-direction:column;gap:2px}
.sb-eco-menu form{margin:0}
.sb-eco-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
border-radius:8px;background:none;border:0;cursor:pointer;color:inherit;text-align:left;transition:background .12s}
.sb-eco-item:hover{background:var(--surface-2)}
.sb-eco-item.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sb-eco-item-body{display:flex;flex-direction:column;min-width:0;flex:1}
.sb-eco-item-body b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.sb-eco-item-body em{font-style:normal;font-size:11px;color:var(--muted);line-height:1.35;
overflow-wrap:anywhere}
.sb-nav{flex:1;padding:6px 14px;overflow-y:auto}
.sb-label{display:block;font-size:10.5px;font-weight:640;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted-2);padding:18px 10px 6px}
.sb-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
color:var(--ink-2);font-weight:520;font-size:13.5px;margin:1px 0;transition:all .12s;border:1px solid transparent}
.sb-link svg{width:16.5px;height:16.5px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .12s}
.sb-link:hover{background:var(--surface-2);color:var(--ink)}
:root[data-theme="dark"] .sb-link:hover{background:rgba(255,255,255,.05)}
.sb-link.active{background:var(--surface);color:var(--ink);font-weight:600;
border-color:var(--hairline);box-shadow:var(--shadow-sm)}
.sb-link.active svg{stroke:var(--accent)}
.sb-badge{background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;
padding:1px 6px;border-radius:10px;margin-left:auto;line-height:1.4}
:root[data-theme="dark"] .sb-link.active{background:var(--surface-2);border-color:var(--line);
box-shadow:inset 3px 0 0 var(--accent)}
.sb-link.active svg{stroke:var(--accent)}
/* The Room sidebar link: live-presence badge appears when >0 members
are inside. Pulsing green dot borrows the community bell rhythm so
it feels like a matching family of signals rather than a new pattern. */
.sb-room{position:relative}
.sb-room-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
background:color-mix(in srgb,#10b981 18%,transparent);color:#059669;
border:1px solid color-mix(in srgb,#10b981 32%,transparent);border-radius:999px;
padding:1px 8px 1px 6px;font-size:11px;font-weight:640;letter-spacing:.02em}
.sb-room-pulse{width:6px;height:6px;border-radius:50%;background:#10b981;
box-shadow:0 0 0 0 rgba(16,185,129,.55);animation:sb-room-pulse 1.8s var(--ease) infinite}
@keyframes sb-room-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}
}
@media (prefers-reduced-motion: reduce){.sb-room-pulse{animation:none}}
/* Amber "opens soon" variant of the sidebar badge — same shape,
different palette so the pulse reads as "get ready" not "join now". */
.sb-room.sb-room-soon .sb-room-badge{
background:color-mix(in srgb,#f5b642 18%,transparent);color:#c88f22;
border-color:color-mix(in srgb,#f5b642 32%,transparent)
}
.sb-room.sb-room-soon .sb-room-pulse{
background:#f5b642;box-shadow:0 0 0 0 rgba(245,182,66,.55);
animation-name:sb-room-soon-pulse
}
@keyframes sb-room-soon-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(245,182,66,.55)}
50%{box-shadow:0 0 0 5px rgba(245,182,66,0)}
}
.sb-foot{border-top:1px solid var(--line-2);padding:10px;margin:0;display:flex;flex-direction:column;gap:2px}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;color:inherit;transition:.14s var(--ease)}
.sb-user:hover{background:var(--surface-2)}
.sb-user .avatar{width:30px;height:30px;font-size:12px}
.sb-user-meta{flex:1;min-width:0}
.sb-user-meta b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.sb-user-meta span{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.sb-out{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;
color:var(--muted);font-size:13px;font-weight:520;transition:.14s var(--ease)}
.sb-out:hover{background:var(--danger-soft);color:var(--danger)}
.sb-out svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;min-width:0;display:flex;flex-direction:column;container-type:inline-size}
.main > .wrap{width:100%}
/* ---- embedded in the phone app ----
The app renders these pages inside a web view that already has its
own header and tab bar, so the portal's own navigation would be a
second set of controls stacked on the first: two logos, two ways
back, a footer nobody can reach. Strip it and leave the page.
Set by the server from the web view's User-Agent (embeddedInApp). */
body.is-embedded .mobilebar,
body.is-embedded .sidebar,
body.is-embedded .sb-backdrop,
body.is-embedded .pbanner,
body.is-embedded .footer{display:none}
/* The banner used to supply the gap under the app's header. */
body.is-embedded .main{padding-top:14px}
/* Mobile top bar + drawer */
.mobilebar{display:none;position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2);
align-items:center;justify-content:space-between;
padding:0 10px 0 16px;height:56px;
padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
.mobilebar img{height:16px;filter:var(--logo-filter,none)}
:root[data-theme="dark"] .mobilebar img,:root[data-theme="dark"] .sb-brand img{filter:invert(1) brightness(1.4)}
.mobilebar-right{display:flex;align-items:center;gap:2px}
.mobilebar-right .appbar-ico{width:42px;height:42px}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;
padding:0;width:42px;height:42px;align-items:center}
.nav-toggle span{display:block;width:18px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.sb-backdrop{display:none;position:fixed;inset:0;background:var(--scrim);z-index:45;backdrop-filter:blur(2px)}
body.drawer-open{overflow:hidden}
@media(max-width:960px){
.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(300px,86vw);transform:translateX(-104%);
transition:transform .24s var(--ease);box-shadow:var(--shadow-pop);background:var(--bg);z-index:60;
padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.sidebar.open{transform:none}
.sb-backdrop.show{display:block}
.mobilebar{display:flex}
.sb-link{padding:11px 12px;font-size:15px;min-height:44px}
.sb-link svg{width:18px;height:18px}
}
/* ============================================================
App top bar — sticky above main content on desktop. Replaces
the previous "bell in the sidebar footer" placement and adds
the global search (Cmd+K) + theme toggle + avatar chip.
============================================================ */
/* ============================================================
Program banner (editorial hero style)
------------------------------------------------------------
Top-of-page banner that identifies the ecosystem on every
portal page. Same visual language as the .corner-editorial
Cornerstone card on the dashboard: dark magazine-cover, subtle
noise grain, gold-tinted radial glow, big headline, gold
eyebrow.
Colors come from two custom properties injected inline on the
.pbanner element itself:
--pb-primary the ecosystem's primary brand color
--pb-accent the accent (usually gold-ish)
Every gradient / accent below derives from these, so a new
ecosystem drops in with zero CSS edits.
Deliberately NOT sticky — this is a page opener, not a nav
bar. Persistent identity lives in the sidebar's ecosystem
switcher.
============================================================ */
.pbanner{position:relative;isolation:isolate;overflow:hidden;
padding:38px 40px 34px;margin:0 0 28px;min-height:200px;
display:flex;flex-direction:column;justify-content:flex-end;
border-radius:0 0 var(--radius-lg) var(--radius-lg);
--pb-primary:var(--accent);
--pb-accent:#f5b642;
/* Default background — CSS-only gradient using the ecosystem's
brand colors. Overridden by .pbanner-hero (below) when an
ecosystem has uploaded a real banner image. */
background:
linear-gradient(135deg,
color-mix(in srgb, var(--pb-primary) 88%, #05060d) 0%,
color-mix(in srgb, var(--pb-primary) 55%, #0a0b18) 40%,
color-mix(in srgb, #0d0f1c 90%, var(--pb-accent)) 75%,
color-mix(in srgb, var(--pb-accent) 35%, #12101d) 100%);
color:#f4f4f6;
box-shadow:var(--shadow-card)}
/* Hero variant — layers a real ecosystem image behind a legible
darkening gradient. Same recipe as .corner-editorial's --art
pattern: the image sits underneath a 135deg dark wash so white
headline type still passes contrast, and the image's own
composition (usually dark tech / abstract) reads through. */
.pbanner-hero{background:
linear-gradient(115deg,
color-mix(in srgb, var(--pb-primary) 55%, rgba(10,11,20,.85)) 0%,
color-mix(in srgb, var(--pb-primary) 20%, rgba(14,16,32,.68)) 45%,
rgba(20,15,10,.35) 100%),
var(--pb-art,none) center/cover no-repeat,
#0a0b18}
/* Layer 1 — blueprint mesh. Faint dotted grid + diagonal
crosshatch, drawn as an SVG data URI so it scales cleanly. Gives
the banner the same "there's texture behind the color" feel that
the circuit-board photo gives the Cornerstone card. */
.pbanner-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;
background-image:
/* dot mesh */
radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.4px),
/* diagonal accent lines */
repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
background-size:22px 22px, auto;
mask-image:linear-gradient(105deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 45%, transparent 85%)}
/* Layer 2 — the ecosystem's LOGO enlarged as a background
watermark on the right side. Semi-transparent, tinted white,
partly clipped by overflow. This is what gives the banner its
"brand identity fill" without needing a per-ecosystem photo. */
.pbanner-mark{position:absolute;z-index:0;pointer-events:none;
right:-40px;top:50%;transform:translateY(-50%) rotate(-8deg);
height:280px;width:auto;max-width:none;
opacity:.14;filter:brightness(0) invert(1);
/* Fade the mark into the accent glow rather than a hard edge. */
mask-image:radial-gradient(closest-side at 40% 50%, rgba(0,0,0,.95), transparent 80%)}
/* Layer 3 — noise grain (identical recipe to .corner-editorial). */
.pbanner-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
/* Layer 4 — warm accent-color spotlight from top-right, same
"stage lighting" effect the Cornerstone card uses. */
.pbanner-glow{position:absolute;top:-70%;right:-15%;width:65%;height:220%;
z-index:0;pointer-events:none;filter:blur(8px);
background:radial-gradient(closest-side,
color-mix(in srgb, var(--pb-accent) 60%, transparent) 0%,
transparent 70%)}
/* When a real hero image is present, back the decorative layers
right off — the image already has its own texture. Keep just the
noise grain (barely visible) so highlights don't look plasticky
and a faint accent glow for warmth. */
.pbanner-hero .pbanner-mesh{display:none}
.pbanner-hero .pbanner-mark{opacity:.07}
.pbanner-hero .pbanner-grain{opacity:.14}
.pbanner-hero .pbanner-glow{opacity:.55}
/* Content wrapper sits above all decorative layers. */
.pbanner-body{position:relative;z-index:2;max-width:680px;overflow-wrap:anywhere}
/* Utility cluster — search, bell, theme, avatar. Floats top-right
over the banner, translucent so it doesn't compete with the
headline. All child styles below (.pbanner-search, .appbar-ico,
.appbar-avatar) are keyed to sit on dark. */
.pbanner-util{position:absolute;top:16px;right:20px;z-index:3;
display:flex;align-items:center;gap:6px}
/* Eyebrow — small uppercase caption with a gold dot, matching the
"CORNERSTONE PROGRAM" tag on the Cornerstone card. Doubles as the
breadcrumb (membership title · current section). */
.pbanner-eyebrow{display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--pb-accent);margin-bottom:18px}
.pbanner-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pb-accent);
box-shadow:0 0 0 3px color-mix(in srgb, var(--pb-accent) 20%, transparent)}
/* The name — huge, tight, magazine-headline energy. Matches the
Cornerstone card's h2 scale then some. */
.pbanner-name{margin:0;color:#fff;font-weight:680;
font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.04em;
max-width:22ch;overflow-wrap:break-word}
/* Tagline underneath — muted white, generous line-height. */
.pbanner-tag{margin:14px 0 0;color:rgba(240,240,246,.8);
font-size:15.5px;line-height:1.55;max-width:56ch;overflow-wrap:anywhere}
/* -------- utility cluster styling on dark -------- */
/* min-width:0 lets this flex item actually shrink under 300px when
the util cluster runs out of horizontal room. Without it, flex's
default min-width:auto (= content-width) keeps the search from
shrinking and instead pushes the pressure onto the avatar pill,
which is what caused the top-right name overflow. */
.pbanner-search{flex:0 1 300px;min-width:0;display:flex;align-items:center;gap:8px;
padding:6px 10px 6px 12px;border-radius:10px;font-size:13px;font-weight:500;
color:rgba(240,240,246,.72);cursor:pointer;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(6px);transition:.15s var(--ease)}
.pbanner-search:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
.pbanner-search svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pbanner-search .kbd{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;
background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.15);
color:rgba(240,240,246,.85);border-radius:6px;padding:2px 6px;font-family:var(--font)}
/* Icon + avatar chips get a dark-mode variant so they read on the
colored banner. The base .appbar-ico / .appbar-avatar rules
remain for the mobilebar (which is still on light surface). */
.appbar-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;background:transparent;border:1px solid transparent;
cursor:pointer;color:var(--ink-2);padding:0;transition:.15s var(--ease)}
.appbar-ico:hover{background:var(--surface);border-color:var(--hairline);color:var(--ink)}
a.appbar-ico{text-decoration:none}
.appbar-ico.is-active{background:var(--surface);border-color:var(--hairline);color:var(--ink)}
.appbar-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.appbar-ico .bell-badge{position:absolute;top:4px;right:4px}
.appbar-ico .sun,.appbar-ico .moon{display:none}
:root[data-theme="dark"] .appbar-ico .sun{display:block}
:root:not([data-theme="dark"]) .appbar-ico .moon{display:block}
.appbar-ico-dark{color:rgba(240,240,246,.78);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(6px)}
.appbar-ico-dark:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
/* flex-shrink:0 is load-bearing: without it, a browser (Safari with
its wider default font metrics is the usual culprit) can squeeze
this pill when the util cluster runs out of room, and the
nowrapped name renders on top of / past the rounded border rather
than pushing the pill wider. The template already trims to first
name, so keeping the pill at its natural width is safe. */
.appbar-avatar{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;margin-left:4px;
border-radius:999px;border:1px solid var(--hairline);background:var(--surface);
color:var(--ink);font-size:13px;font-weight:600;transition:.15s var(--ease);
flex:none;max-width:100%}
.appbar-avatar:hover{border-color:var(--line);box-shadow:var(--shadow-sm)}
.appbar-avatar .avatar{width:26px;height:26px;font-size:11px;flex:none}
/* overflow-wrap:anywhere is the safety net for the rare first name
long enough to still push out (Constantinople-tier). Per UI copy
rules we let the pill wrap rather than clip with an ellipsis. */
.appbar-avatar .name{white-space:nowrap;overflow-wrap:anywhere;min-width:0}
.appbar-avatar-dark{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);
backdrop-filter:blur(6px)}
.appbar-avatar-dark:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.appbar-avatar-dark .avatar{background:rgba(255,255,255,.18);color:#fff}
/* -------- responsive compression --------
The hero shape is preserved at every viewport — it just packs
tighter. Utility cluster hides on mobile because the mobilebar
already carries search / bell / theme / avatar. */
@media(max-width:960px){
.pbanner{padding:26px 22px 24px;margin:0 0 20px;min-height:150px;
border-radius:0 0 var(--radius) var(--radius)}
.pbanner-util{display:none}
.pbanner-mark{height:210px;right:-30px;opacity:.11}
.pbanner-eyebrow{font-size:10px;margin-bottom:12px}
.pbanner-name{font-size:clamp(24px,7.5vw,34px)}
.pbanner-tag{font-size:14px;margin-top:10px}
}
@media(max-width:520px){
.pbanner{padding:22px 18px;min-height:130px}
.pbanner-mark{height:170px;right:-40px}
}
/* ============================================================
Cmd+K palette — modal overlay over dashboard. Fires on Cmd/Ctrl+K,
clicking the appbar search field, or the mobile bar's search icon.
============================================================ */
.palette-backdrop{position:fixed;inset:0;z-index:120;background:var(--scrim);
backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;
opacity:0;pointer-events:none;transition:opacity .18s ease}
.palette-backdrop.open{opacity:1;pointer-events:auto}
.palette{width:min(560px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--hairline);
border-radius:var(--radius);box-shadow:var(--shadow-pop);overflow:hidden;
transform:translateY(-6px) scale(.985);transition:transform .2s var(--ease)}
.palette-backdrop.open .palette{transform:none}
.palette-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--hairline)}
.palette-head svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.palette-head input{flex:1;border:none;outline:none;background:transparent;color:var(--ink);
font-family:var(--font);font-size:15.5px;letter-spacing:-.01em}
.palette-head input::placeholder{color:var(--muted)}
.palette-head .kbd{font-size:11px;color:var(--muted);background:var(--surface-2);
border:1px solid var(--hairline);border-radius:6px;padding:2px 6px;font-weight:600}
.palette-body{max-height:min(60vh,440px);overflow-y:auto;padding:6px 0}
.palette-group{padding:8px 0}
.palette-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--muted-2);
text-transform:uppercase;padding:6px 18px 4px}
.palette-item{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;
color:var(--ink);font-size:14px;text-decoration:none;border-left:2px solid transparent}
.palette-item:hover,.palette-item.selected{background:var(--surface-2);border-left-color:var(--accent)}
.palette-item .pi-icon{width:24px;height:24px;flex:none;border-radius:7px;background:var(--surface-2);
display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:700}
.palette-item .pi-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.palette-item .pi-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.palette-item .pi-title{display:block;font-weight:600;letter-spacing:-.01em}
.palette-item .pi-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.palette-item .pi-kind{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted-2);flex:none}
.palette-empty{padding:26px;text-align:center;color:var(--muted);font-size:13.5px}
.palette-hint{border-top:1px solid var(--hairline);padding:9px 18px;display:flex;gap:16px;align-items:center;
font-size:11.5px;color:var(--muted);background:var(--surface-2)}
.palette-hint b{color:var(--ink-2);font-weight:600}
/* ---------- Footer ---------- */
.footer{margin-top:auto;padding:34px 0 26px;text-align:center;color:var(--muted-2);font-size:12.5px}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--ink)}
/* ============================================================
Login / landing
============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.split .hero{position:relative;overflow:hidden;background:#101015}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;display:flex;align-items:flex-end}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,16,.08) 0%,rgba(10,10,16,.28) 55%,rgba(10,10,16,.84) 100%)}
.slide.is-active{opacity:1}
.slide .cap{position:relative;z-index:2;padding:48px 54px 60px;max-width:80%;color:#fff}
.slide .cap-logo img{height:28px;margin-bottom:14px}
.slide .cap h3{font-size:27px;margin:0 0 8px;color:#fff;letter-spacing:-.03em}
.slide .cap p{color:#d3d5df;font-size:15px;margin:0}
.split .dots{position:absolute;left:54px;bottom:34px;z-index:3;display:flex;gap:9px}
.split .dots .dot{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.38);cursor:pointer;padding:0;transition:.2s}
.split .dots .dot.on{background:#fff;width:20px;border-radius:5px}
.split .panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;background:var(--bg);position:relative}
.split .panel::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(640px 320px at 50% -8%,rgba(47,109,246,.07),transparent 65%)}
.split .panel-inner{width:100%;max-width:400px;text-align:center;position:relative}
.logo-lg{height:30px;margin:0 auto 34px}
.login-title{font-size:clamp(25px,4.6vw,31px);line-height:1.15;font-weight:640;letter-spacing:-.035em}
.login-title b{color:var(--ink);font-weight:640}
.login-title .grey{color:var(--muted-2);font-weight:520}
.login-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:28px;margin-top:26px;text-align:left;box-shadow:var(--shadow-lift)}
.login-card h2{text-align:center;font-size:17px;letter-spacing:-.02em}
.field{margin:14px 0}
.field label{display:block;font-size:12.5px;font-weight:560;color:var(--ink-2);margin-bottom:6px}
.field input{width:100%;padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
background:var(--surface);color:var(--ink);font-size:14.5px;font-family:var(--font);transition:.12s;box-shadow:inset 0 1px 2px rgba(24,24,29,.03)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)}
.error{background:var(--danger-soft);border:1px solid #f6c9c9;color:var(--danger);
padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:8px;font-size:13.5px}
.join{margin-top:26px;color:var(--muted);font-size:13.5px}
.forgot{margin:12px 0 0;text-align:center;font-size:13.5px}
.forgot a{color:var(--muted);text-decoration:underline}
.notice{background:var(--success-soft);border:1px solid #b1e3cd;color:#047857;
padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:8px;font-size:13.5px}
/* "or" divider between the password form and the magic-link form on
the login card. A hairline rule with the word centred over it, so
the two paths read as parallel choices rather than one buried under
the other. */
.or-sep{display:flex;align-items:center;gap:12px;margin:20px 0 8px;color:var(--muted);
font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--hairline)}
.or-sep span{padding:0 2px}
.auth-solo{min-height:100dvh;display:flex;align-items:center;justify-content:center;
padding:32px 16px;background:var(--bg)}
.auth-solo .panel-inner{width:100%;max-width:400px;text-align:center}
@media(max-width:880px){.split{grid-template-columns:1fr}.split .hero{min-height:200px;order:2}.split .panel{min-height:calc(100dvh - 200px)}}
/* ============================================================
Dashboard hub
============================================================ */
.dash{padding:40px 0 0;background:radial-gradient(1000px 360px at 55% -140px,rgba(61,129,240,.10),transparent 70%)}
.dash .wrap{max-width:1240px}
.dash-greet h1{font-size:clamp(28px,3.8vw,38px);margin:0;font-weight:700;letter-spacing:-.045em}
.dash-date{color:var(--muted);font-size:13.5px;margin-top:4px}
.dash-motto{margin:6px 0 0;font-size:13.5px;font-style:italic;color:var(--muted);line-height:1.5;max-width:640px}
.dash-motto span{font-style:normal;color:var(--muted-2);font-weight:600}
.rank-card .rank-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rank-tier{background:color-mix(in srgb,var(--rc) 16%,transparent);color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.rank-pts{font-weight:700;color:var(--ink);font-size:13.5px}
.rank-track{height:6px;background:var(--line-2);border-radius:10px;overflow:hidden}
.rank-track>span{display:block;height:100%;background:var(--rc);border-radius:10px;transition:width .4s ease}
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:20px;margin-top:26px;align-items:start}
.hub-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.rail{display:flex;flex-direction:column;gap:20px;min-width:0}
@container (max-width:860px){.hub-grid{grid-template-columns:1fr}}
/* Cards (shared) */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-card);
transition:box-shadow .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.rail .card:hover{border-color:var(--line)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px 0}
.card-head h3{font-size:13.5px;font-weight:620;margin:0;letter-spacing:-.01em}
.card-head .more{font-size:12.5px;font-weight:590;color:var(--accent)}
.card-body{padding:14px 20px 18px;overflow-wrap:anywhere}
/* Current Plan hero — gradient statement card (kept from original design). */
.plan-hero{position:relative;overflow:hidden;color:#fff;
background:linear-gradient(118deg,#081a45 0%,#0f2f7e 40%,#1e56d6 78%,#3d81f0 100%);
border:none;border-radius:20px;padding:24px 26px;
box-shadow:0 2px 4px rgba(8,26,69,.3),0 20px 44px -14px rgba(15,47,126,.55)}
.plan-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(520px 280px at 90% -30%,rgba(93,158,255,.35),transparent 62%),
radial-gradient(400px 240px at -6% 115%,rgba(61,129,240,.18),transparent 55%)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;position:relative}
.plan-top h2{font-size:16px;margin:0;font-weight:640;letter-spacing:-.02em;color:#fff}
.plan-hero .soon-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(4px)}
.plan-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;position:relative}
.plan-item{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.11);
border:1px solid rgba(255,255,255,.17);border-radius:14px;padding:12px 14px;backdrop-filter:blur(6px)}
.plan-ico{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.plan-ico svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plan-label{display:block;font-size:10px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.plan-value{display:block;font-size:14px;font-weight:600;color:#fff;margin-top:2px;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.plan-value.empty{color:rgba(255,255,255,.6);font-weight:520}
.plan-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative}
.plan-cta p{margin:0;color:rgba(255,255,255,.78);font-size:13.5px;max-width:56ch}
.plan-hero .btn-primary{background:#fff;color:#0f2f7e;box-shadow:0 2px 10px rgba(4,12,35,.35)}
.plan-hero .btn-primary:hover{background:#eef4ff;box-shadow:0 4px 14px rgba(4,12,35,.4)}
.plan-progress-ring{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.plan-week{font-size:14px;font-weight:700;color:#fff}
.plan-week i{font-weight:500;color:rgba(255,255,255,.6);font-style:normal}
.plan-days{font-size:11px;color:rgba(255,255,255,.6);font-weight:560}
.plan-bar{position:relative;margin-bottom:14px}
.plan-track{height:6px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.plan-fill{height:100%;background:#fff;border-radius:3px;transition:width .4s ease}
.plan-foot{display:flex;gap:10px;position:relative}
.plan-foot .btn{border-color:rgba(255,255,255,.25);color:#fff}
.plan-foot .btn:hover{background:rgba(255,255,255,.12)}
@container (max-width:560px){.plan-cols{grid-template-columns:1fr}}
/* ============================================================
Stat cards — three "unlit tool" cards. Big em-dash where the
metric would be, a subtle "Connect →" link instead of a
"Coming soon" pill, and a muted skeleton spark. When the
API lights up JS will swap in a real value + colored spark.
============================================================ */
/* Quick actions — three launcher cards under the cornerstone hero.
Same three-across grid the retired stat row used, but content-first:
icon in a soft accent-tinted tile, title, one-line hook, and a
subtle CTA that brightens on hover. */
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@container (max-width:800px){.quick-row{grid-template-columns:1fr}}
.quick-card{position:relative;display:flex;align-items:flex-start;gap:14px;
background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
box-shadow:var(--shadow-sm);padding:16px 18px;min-width:0;color:inherit;text-decoration:none;
overflow:hidden;--tone:var(--muted);--tone-soft:var(--surface-2);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
/* Match the tool-tile palette so these cards feel like a natural
extension of the Tools grid below, not a foreign object. */
.quick-card[data-h="spark"]{--tone:#f5b642;--tone-soft:#fff5df}
.quick-card[data-h="pen"] {--tone:#a855f7;--tone-soft:#f4ebff}
.quick-card[data-h="chat"] {--tone:#2f6df6;--tone-soft:#e9f0ff}
:root[data-theme="dark"] .quick-card[data-h="spark"]{--tone-soft:rgba(245,182,66,.14)}
:root[data-theme="dark"] .quick-card[data-h="pen"] {--tone-soft:rgba(168,85,247,.14)}
:root[data-theme="dark"] .quick-card[data-h="chat"] {--tone-soft:rgba(47,109,246,.14)}
.quick-card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;
background:var(--tone);opacity:.55}
.quick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.quick-card:hover::before{opacity:1}
.quick-ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--tone-soft);
display:flex;align-items:center;justify-content:center;color:var(--tone)}
.quick-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.quick-body{flex:1;min-width:0}
.quick-title{font-size:14px;font-weight:640;color:var(--ink);letter-spacing:-.01em}
.quick-sub{margin-top:3px;font-size:12px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.quick-cta{flex:none;align-self:center;font-size:11.5px;font-weight:600;color:var(--tone);
opacity:.75;letter-spacing:-.005em;transition:opacity .18s var(--ease)}
.quick-card:hover .quick-cta{opacity:1}
@media(max-width:520px){
/* On narrow screens each card gets its own row — keep the icon inline
so the tap target stays big but the layout doesn't wrap awkwardly. */
.quick-card{padding:14px 16px}
.quick-cta{display:none}
}
/* Continue learning — media banner */
.cont-cine{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
min-height:185px;border-radius:var(--radius);overflow:hidden;background:#101015 center/cover no-repeat;
box-shadow:var(--shadow-card);transition:all .2s ease}
.cont-cine:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.cont-scrim{position:absolute;inset:0;
background:linear-gradient(100deg,rgba(10,10,16,.88) 24%,rgba(10,10,16,.46) 60%,rgba(10,10,16,.12))}
.cont-body{position:relative;z-index:2;padding:24px 26px;color:#fff}
.cont-body .eyebrow{color:#aab8ff;margin-bottom:8px}
.cont-body h2{font-size:clamp(19px,2.4vw,24px);margin:0 0 5px;color:#fff;letter-spacing:-.03em}
.cont-body p{color:#c2c6d4;margin:0;font-size:13.5px}
.cont-meter{position:relative;z-index:2;padding:24px 26px;text-align:right;min-width:180px;color:#fff}
.cont-pct{display:block;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cont-pct i{font-style:normal;font-size:17px;color:#aab8ff}
.cont-count{display:block;color:#c2c6d4;font-size:12px;margin:4px 0 12px}
.cont-meter .bar{height:4px;background:rgba(255,255,255,.22);border-radius:4px;overflow:hidden}
.cont-meter .bar span{display:block;height:100%;background:#fff;border-radius:4px}
@container (max-width:560px){
.cont-cine{flex-direction:column;align-items:stretch;gap:0}
.cont-body{padding:22px 20px 0}
.cont-meter{padding:14px 20px 20px;text-align:left}
}
/* ============================================================
Cornerstone program — editorial "spec-card" layout.
Feels like a chapter header, not a generic hero. Uses grain
over the course art, a numbered index in the top-right, a
segmented module bar (pips), and a gold-accented eyebrow.
============================================================ */
.corner-editorial{position:relative;overflow:hidden;border-radius:var(--radius-lg);
padding:26px 28px 22px;color:#f4f4f6;background:
linear-gradient(135deg,rgba(10,10,18,.94),rgba(18,20,32,.78) 55%,rgba(30,26,52,.55)),
var(--art,linear-gradient(135deg,#1a1c2e,#0f1120)) center/cover no-repeat;
box-shadow:var(--shadow-card);isolation:isolate;
transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.corner-editorial:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.corner-e-grain{position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
.corner-e-glow{position:absolute;top:-40%;right:-15%;width:60%;height:180%;pointer-events:none;
background:radial-gradient(closest-side,rgba(245,182,66,.18),transparent 70%);filter:blur(6px)}
.corner-e-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.corner-e-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.corner-e-eyebrow .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 3px rgba(245,182,66,.2)}
.corner-e-index{font-family:var(--font);font-variant-numeric:tabular-nums;font-size:14px;
font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.corner-e-index i{font-style:normal;color:rgba(255,255,255,.4);margin:0 3px}
.corner-e-body{position:relative;z-index:2;max-width:640px;margin-bottom:20px;overflow-wrap:anywhere}
.corner-e-body h2{font-size:clamp(24px,3vw,32px);line-height:1.1;color:#fff;
letter-spacing:-.035em;margin:0 0 8px;font-weight:680}
.corner-e-body p{margin:0;color:rgba(240,240,246,.78);font-size:14.5px;line-height:1.55;max-width:56ch}
/* Segmented progress. Bars are visible even at 0% (thick outline) so the
card doesn't look like it's missing data; the current-position pip
glows gold; done pips fill with the gold gradient. */
.corner-e-progress{position:relative;z-index:2;display:flex;gap:4px;margin:0 0 18px;flex-wrap:wrap}
.corner-e-progress .pip{flex:1 1 6px;min-width:6px;height:6px;border-radius:3px;
background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.corner-e-progress .pip.done{background:linear-gradient(90deg,var(--gold),#ffd376);box-shadow:none}
.corner-e-progress .pip.next{background:var(--gold);box-shadow:0 0 0 3px rgba(245,182,66,.25);
animation:pipPulse 2.2s ease-in-out infinite}
@keyframes pipPulse{0%,100%{box-shadow:0 0 0 3px rgba(245,182,66,.15)}50%{box-shadow:0 0 0 5px rgba(245,182,66,.35)}}
.corner-e-foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.corner-e-meta{color:rgba(240,240,246,.72);font-size:12.5px;letter-spacing:-.005em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.corner-e-meta .pct{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.corner-e-meta .sep{opacity:.4}
.corner-e-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.corner-alt{color:rgba(240,240,246,.75);font-size:13px;font-weight:600;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1px;transition:.15s var(--ease)}
.corner-alt:hover{color:#fff;border-color:#fff}
@media(max-width:640px){
.corner-editorial{padding:22px 20px 20px;border-radius:var(--radius)}
.corner-e-body h2{font-size:22px}
.corner-e-foot{flex-direction:column;align-items:stretch}
.corner-e-actions{flex-direction:column;align-items:stretch}
.corner-e-actions .btn{width:100%;justify-content:center}
}
/* Dashboard program grid (AI First and similar ecosystems). Same
photographic language as the cornerstone card: dark still, name
over the art, no SVG title baked into the image. */
.prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 8px}
.prog-card{position:relative;min-height:210px;padding:18px 18px 16px;border-radius:var(--radius);
display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;
color:#fff;text-decoration:none;isolation:isolate;
background:
linear-gradient(180deg,rgba(8,10,18,.12) 0%,rgba(8,10,18,.78) 72%,rgba(8,10,18,.9) 100%),
var(--art,linear-gradient(135deg,#1c1a28,#0e1018)) center/cover no-repeat;
box-shadow:var(--shadow-card);
transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.prog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);color:#fff}
.prog-kind{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.78)}
.prog-card h3{margin:0;color:#fff;font-size:18px;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.prog-card p{margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82)}
@media(max-width:640px){
.prog-grid{grid-template-columns:1fr}
.prog-card{min-height:180px}
}
/* Sidebar cornerstone flag */
.sb-flag{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#1c1204;border-radius:999px;padding:2px 7px}
/* ============================================================
In-person workshops — hero card + upcoming grid.
Same media-banner language as .cont-cine / .corner-cine so
this feels like a first-class section, not a widget.
============================================================ */
.hub-sec-note{font-size:11.5px;font-weight:590;color:var(--muted);letter-spacing:-.005em}
.ev-hero{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
background:#101015 center/cover no-repeat;box-shadow:var(--shadow-card);color:#fff;
transition:box-shadow .2s ease,transform .2s ease;text-decoration:none;cursor:default}
.ev-hero[role="link"]{cursor:pointer}
.ev-hero:hover{box-shadow:var(--shadow-lift)}
.ev-hero[role="link"]:hover{transform:translateY(-1px)}
.ev-hero-scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,rgba(6,10,22,.92) 0%,rgba(6,10,22,.72) 45%,rgba(6,10,22,.30) 78%,rgba(6,10,22,.10))}
.ev-hero-inner{position:relative;z-index:2;display:flex;align-items:stretch;justify-content:space-between;
gap:24px;min-height:230px;padding:26px 28px}
.ev-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.ev-hero-badge{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
padding:4px 11px;border-radius:999px;margin-bottom:12px;backdrop-filter:blur(6px)}
.ev-hero h2{font-size:clamp(20px,2.6vw,26px);margin:0 0 6px;color:#fff;letter-spacing:-.03em;line-height:1.15}
.ev-hero-blurb{color:#d9dde8;margin:0 0 14px;font-size:13.5px;line-height:1.5;max-width:52ch}
.ev-hero-meta{display:flex;flex-wrap:wrap;gap:8px}
.ev-hero-chip{display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
color:#eef1f8;font-size:12px;font-weight:540;letter-spacing:-.005em;
padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.ev-hero-chip svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ev-hero-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.ev-hero .btn-white{background:#fff;color:#0f2f7e;box-shadow:0 2px 10px rgba(4,12,35,.35)}
.ev-hero .btn-white:hover{background:#eef4ff;box-shadow:0 4px 14px rgba(4,12,35,.4)}
.btn-ghost-white{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost-white:hover{background:rgba(255,255,255,.1)}
/* RSVP button — swaps label between off and on states. */
.js-rsvp .rsvp-on{display:none}
.js-rsvp.is-going .rsvp-off{display:none}
.js-rsvp.is-going .rsvp-on{display:inline}
.ev-hero .js-rsvp.is-going{background:#0f2f7e;color:#fff;box-shadow:0 2px 10px rgba(4,12,35,.35)}
.ev-hero .js-rsvp.is-going:hover{background:#132f6e}
/* RSVP chip on event cards. Hidden at rest, slides in on card hover.
Shows persistently once you're going. */
.ev-card-rsvp{flex:none;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.94);color:#0f2f7e;border:none;font-family:var(--font);
font-size:12px;font-weight:660;letter-spacing:-.005em;padding:7px 14px;border-radius:999px;
cursor:pointer;opacity:0;transform:translateY(4px);
transition:opacity .22s var(--ease),transform .22s var(--ease),background .15s ease}
.ev-card:hover .ev-card-rsvp{opacity:1;transform:translateY(0)}
.ev-card-rsvp:hover{background:#fff}
.ev-card-rsvp.is-going{background:#0f2f7e;color:#fff;opacity:1;transform:none;
box-shadow:0 2px 8px rgba(4,12,35,.35)}
.ev-card-rsvp.is-going:hover{background:#132f6e}
.ev-hero-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:112px;padding:14px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
border-radius:14px;backdrop-filter:blur(6px);align-self:flex-start;text-align:center;line-height:1}
.ev-hero-day{font-size:38px;font-weight:720;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.ev-hero-month{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ev-hero-year{margin-top:2px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.06em}
@media(max-width:760px){
.ev-hero-inner{flex-direction:column-reverse;align-items:stretch;padding:20px 20px 22px;min-height:280px;gap:16px}
.ev-hero-date{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;min-width:0;padding:8px 12px;align-self:flex-start}
.ev-hero-day{font-size:24px}
.ev-hero-month{margin-top:0}
.ev-hero-year{margin-top:0}
.ev-hero-scrim{background:linear-gradient(180deg,rgba(6,10,22,.55) 0%,rgba(6,10,22,.82) 55%,rgba(6,10,22,.94))}
}
/* ============================================================
Event cards under the workshop hero. Photo-forward, editorial:
the city becomes a big display headline; date and countdown
flow beneath; the "I'm going" button lives bottom-right and
only appears on hover (or when already going).
============================================================ */
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@container (max-width:800px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:420px){.ev-grid{grid-template-columns:1fr}}
.ev-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;
min-height:220px;padding:18px 20px 16px;border-radius:16px;overflow:hidden;
background:#101015 center/cover no-repeat;color:#fff;text-decoration:none;
box-shadow:var(--shadow-sm);isolation:isolate;
transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
a.ev-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.ev-card::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(6,10,22,.15) 0%,rgba(6,10,22,.45) 55%,rgba(6,10,22,.9));
transition:opacity .3s var(--ease)}
.ev-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:inherit;
transform:scale(1);transition:transform .8s var(--ease);z-index:-1}
.ev-card:hover::after{transform:scale(1.05)}
.ev-card-scrim{display:none}
.ev-card-date{position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:baseline;gap:6px;
padding:5px 10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
border-radius:999px;backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:640;letter-spacing:.02em}
.ev-card-date b{font-size:12px;font-weight:720;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ev-card-date span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ev-card-body{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ev-card-title{flex:1;min-width:0}
.ev-card-title b{display:block;font-size:24px;font-weight:660;letter-spacing:-.035em;line-height:1.05;
color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.ev-card-title span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);letter-spacing:-.005em;margin-top:6px;font-weight:520}
/* Tools grid — colored icon chips + accent stripe per tool.
Each tile picks up its icon color via CSS variables set by data-h. */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@container (max-width:800px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:420px){.tools-grid{grid-template-columns:1fr}}
.tool-card{position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);
border:1px solid var(--hairline);border-radius:14px;padding:13px 15px 13px 17px;box-shadow:var(--shadow-sm);
transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
min-width:0;overflow:hidden;--tone:var(--accent);--tone-soft:var(--accent-soft)}
/* Colored left rail — visible at rest (subtle), pops on hover.
Gives each tile a color identity without being loud. */
.tool-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone);
opacity:.55;transition:opacity .22s var(--ease),width .22s var(--ease)}
.tool-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,var(--tone-soft),transparent 55%);
opacity:0;transition:opacity .22s var(--ease);pointer-events:none}
.tool-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);border-color:var(--line)}
.tool-card:hover::before{opacity:1;width:4px}
.tool-card:hover::after{opacity:1}
.tool-card>*{position:relative;z-index:1}
.tool-ico{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:var(--tone-soft);color:var(--tone);transition:transform .22s var(--ease)}
.tool-card:hover .tool-ico{transform:scale(1.06)}
.tool-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool-card[data-h="pen"]{--tone:#7c3aed;--tone-soft:#f3eeff}
.tool-card[data-h="target"]{--tone:#e11d48;--tone-soft:#ffeef0}
.tool-card[data-h="map"]{--tone:#d97706;--tone-soft:#fdf3e1}
.tool-card[data-h="chart"]{--tone:#2f6df6;--tone-soft:#e9f0ff}
.tool-card[data-h="phone"]{--tone:#0284c7;--tone-soft:#e8f4fd}
.tool-card[data-h="fish"]{--tone:#0d9488;--tone-soft:#e4f7f5}
.tool-card[data-h="spark"]{--tone:#c026d3;--tone-soft:#fbeafc}
.tool-card[data-h="cap"]{--tone:#059669;--tone-soft:#e6f7f0}
.tool-card[data-h="layout"]{--tone:#475569;--tone-soft:#eef1f5}
.tool-card[data-h="clock"]{--tone:#ea580c;--tone-soft:#fef0e6}
.tool-card[data-h="kanban"]{--tone:#2563eb;--tone-soft:#e7f0fe}
.tool-card[data-h="flag"]{--tone:#dc2626;--tone-soft:#feecec}
:root[data-theme="dark"] .tool-card[data-h="pen"]{--tone-soft:rgba(124,58,237,.14)}
:root[data-theme="dark"] .tool-card[data-h="target"]{--tone-soft:rgba(225,29,72,.14)}
:root[data-theme="dark"] .tool-card[data-h="map"]{--tone-soft:rgba(217,119,6,.14)}
:root[data-theme="dark"] .tool-card[data-h="chart"]{--tone-soft:rgba(47,109,246,.14)}
:root[data-theme="dark"] .tool-card[data-h="phone"]{--tone-soft:rgba(2,132,199,.14)}
:root[data-theme="dark"] .tool-card[data-h="fish"]{--tone-soft:rgba(13,148,136,.14)}
:root[data-theme="dark"] .tool-card[data-h="spark"]{--tone-soft:rgba(192,38,211,.14)}
:root[data-theme="dark"] .tool-card[data-h="cap"]{--tone-soft:rgba(5,150,105,.14)}
:root[data-theme="dark"] .tool-card[data-h="layout"]{--tone-soft:rgba(148,163,184,.14);--tone:#94a3b8}
:root[data-theme="dark"] .tool-card[data-h="clock"]{--tone-soft:rgba(234,88,12,.14)}
:root[data-theme="dark"] .tool-card[data-h="kanban"]{--tone-soft:rgba(37,99,235,.14)}
:root[data-theme="dark"] .tool-card[data-h="flag"]{--tone-soft:rgba(220,38,38,.14)}
.tool-meta{flex:1;min-width:0;overflow-wrap:anywhere}
.tool-meta b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tool-meta span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}
.tool-arrow{color:var(--muted-2);font-size:14px;transition:all .22s var(--ease)}
.tool-card:hover .tool-arrow{transform:translateX(3px);color:var(--tone)}
.tool-card.soon{opacity:.55;filter:saturate(.4)}
.tool-card.soon:hover{transform:none;box-shadow:var(--shadow-sm)}
.tool-card.soon::before,.tool-card.soon::after{display:none}
.soon-pill{font-size:10px;font-weight:640;color:var(--muted);background:var(--surface-2);
border:1px solid var(--line);border-radius:20px;padding:2px 8px;white-space:nowrap;letter-spacing:.02em}
/* Rail cards */
.week-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}
.week-item:first-child{border-top:none;padding-top:2px}
.week-date{flex:none;width:44px;text-align:center;background:var(--surface);border:1px solid var(--line);
border-radius:10px;padding:5px 0;line-height:1.15;box-shadow:var(--shadow-sm)}
.week-date b{display:block;font-size:13.5px;font-weight:680;letter-spacing:-.01em}
.week-date span{display:block;font-size:9.5px;font-weight:620;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.week-meta{flex:1;min-width:0}
.week-meta b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.week-meta span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.event-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}
.event-item:first-child{border-top:none;padding-top:2px}
.event-date{flex:none;min-width:44px;padding:5px 6px;text-align:center;background:var(--surface);
border:1px solid var(--line);border-radius:10px;line-height:1.15;box-shadow:var(--shadow-sm)}
.event-date b{display:block;font-size:13.5px;font-weight:680;letter-spacing:-.01em;color:var(--ink)}
.event-date span{display:block;font-size:9.5px;font-weight:620;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.event-meta{flex:1;min-width:0}
.event-meta b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.event-loc{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}
.event-pin{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.event-next{font-size:9.5px;font-weight:640;color:var(--accent);background:rgba(47,109,246,.10);
border:1px solid rgba(47,109,246,.28);border-radius:20px;padding:1px 7px;letter-spacing:.03em;text-transform:uppercase}
.mini-post{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line-2)}
.mini-post:first-child{border-top:none;padding-top:2px}
.mini-post .avatar{width:28px;height:28px;font-size:11px;flex:none}
.mini-post-body{flex:1;min-width:0}
.mini-post-body b{font-size:12.5px;font-weight:600}
.mini-post-body p{margin:1px 0 0;font-size:12px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.mini-post-eco{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:650;
color:var(--accent);background:color-mix(in oklab, var(--accent) 10%, transparent);
border:1px solid color-mix(in oklab, var(--accent) 22%, transparent);
border-radius:999px;padding:1px 8px;letter-spacing:.02em;vertical-align:1px}
.credits-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.credits-line .stat-value{margin-top:0}
.rail-note{font-size:12px;color:var(--muted-2);margin:8px 0 0;line-height:1.55}
.rail-cta{display:block;margin-top:6px;font-weight:650;font-size:12px;
color:var(--accent);text-decoration:none}
.rail-cta:hover{text-decoration:underline}
/* ============================================================
Live session rows in the "This week" rail card. Each row has
a colored weekday chip on the left, session title + host in
the middle, and a subtle chevron on the right. .is-live turns
the chip red and the chevron into a pulsing "Join" pill.
============================================================ */
.live-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line-2);position:relative}
.live-row:first-child{border-top:none;padding-top:2px}
.live-day{flex:none;width:46px;text-align:center;padding:6px 0;border-radius:10px;
background:var(--surface-2);border:1px solid var(--hairline);line-height:1.1}
.live-day b{display:block;font-size:11.5px;font-weight:720;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.live-day span{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.live-meta{flex:1;min-width:0;overflow-wrap:anywhere}
.live-meta b{display:block;font-size:13.5px;font-weight:640;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.live-meta span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
/* Details link is subtle and always shown so the row doesn't shift on hover. */
.live-cta{flex:none;font-size:11.5px;font-weight:600;color:var(--muted-2);letter-spacing:-.005em;
align-self:flex-start;margin-top:2px;transition:color .15s var(--ease)}
.live-row:hover .live-cta{color:var(--accent)}
.live-row.is-live .live-day{background:linear-gradient(180deg,#ef4444,#dc2626);border-color:transparent;color:#fff;
box-shadow:0 4px 12px rgba(220,38,38,.28)}
.live-row.is-live .live-day b,.live-row.is-live .live-day span{color:#fff}
.live-row.is-live .live-cta{opacity:1;transform:none;color:#fff;background:#dc2626;padding:5px 12px;border-radius:999px;
font-weight:700;letter-spacing:.02em;box-shadow:0 4px 12px rgba(220,38,38,.35)}
.live-row.is-live .live-cta::before{content:"● ";animation:pipPulse 1.6s ease-in-out infinite}
/* ============================================================
Credits rail card — big tabular zero + subtle "0%" bar. Reads
as an intentional metric, not a "Connects soon" placeholder.
============================================================ */
.credit-card .credit-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.credit-big{font-size:32px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);
line-height:1;display:inline-block;margin-right:6px}
.credit-unit{font-size:12px;color:var(--muted);letter-spacing:-.005em}
.credit-badge{font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-2);
background:var(--surface-2);border:1px solid var(--hairline);border-radius:999px;padding:3px 8px;white-space:nowrap}
.credit-track{margin-top:10px;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.credit-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));border-radius:4px;
transition:width .5s var(--ease)}
/* ============================================================
Live activity ribbon — sits under the welcome greeting. A
pulsing green dot and one line of "Sarah joined a channel · 2m".
============================================================ */
.pulse{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;padding:8px 14px;
background:var(--surface);border:1px solid var(--hairline);border-radius:999px;box-shadow:var(--shadow-sm);
font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em;max-width:100%}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);position:relative;flex:none}
.pulse-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--success);opacity:.4;
animation:pulseHalo 1.8s ease-out infinite}
@keyframes pulseHalo{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.3);opacity:0}}
.pulse-body b{color:var(--ink);font-weight:640}
.pulse-body em{font-style:normal;color:var(--muted)}
/* Eyebrow */
.eyebrow{display:block;color:var(--accent);font-size:10.5px;font-weight:680;letter-spacing:.14em;
text-transform:uppercase;margin-bottom:8px}
/* Section titles inside hub */
.hub-sec{display:flex;align-items:center;justify-content:space-between;margin:6px 0 -6px}
.hub-sec h2{font-size:15px;margin:0;font-weight:640;letter-spacing:-.02em}
.hub-sec a{font-size:12.5px;font-weight:590;color:var(--accent)}
/* ============================================================
Courses hub / course pages
============================================================ */
.page-head{padding:40px 0 6px;text-align:center}
.crumb{color:var(--muted);font-size:13px;margin-bottom:10px}
.crumb a{color:var(--accent);font-weight:520}
.page-head h1{font-size:clamp(25px,4.4vw,34px);letter-spacing:-.035em}
.progress{max-width:var(--maxw);margin:18px auto;background:var(--surface);border:1px solid var(--hairline);border-radius:40px;
padding:9px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm)}
.progress .bar{flex:1;height:6px;background:var(--line-2);border-radius:20px;overflow:hidden}
.progress .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-hi),var(--accent));border-radius:20px}
.progress .lbl{color:var(--accent);font-weight:620;white-space:nowrap;font-size:13px}
.cat-section{margin-bottom:12px}
.section-title{font-size:18px;margin:36px 0 14px;font-weight:640;letter-spacing:-.025em}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:8px 0 20px}
.course-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.course-card:hover .thumb{transform:scale(1.03)}
.course-card .thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--surface-2);transition:transform .5s var(--ease)}
.placeholder-bg{background:linear-gradient(135deg,#e9ecf4,#f5f6f9)}
.thumb-named{
display:flex;flex-direction:column;justify-content:flex-end;padding:16px 14px 14px;gap:6px;
/* Mirrors the designed SVG course cards: saturated diagonal gradient,
soft overlapping circles, and a light sweep across the top. */
background:
radial-gradient(circle 120px at 90% 6%, rgba(255,255,255,.09) 0 99.5%, transparent 100%),
radial-gradient(circle 80px at 97% 94%, rgba(255,255,255,.11) 0 99.5%, transparent 100%),
radial-gradient(circle 100px at 7% 95%, rgba(0,0,0,.13) 0 99.5%, transparent 100%),
linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 45%),
linear-gradient(135deg, hsl(var(--hue),74%,50%), hsl(calc(var(--hue) + 26),72%,27%))}
.thumb-kind{position:absolute;top:10px;left:10px;z-index:2;
font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.22);
border-radius:999px;padding:3px 9px;backdrop-filter:blur(6px)}
.thumb-name{position:relative;z-index:2;color:#fff;font-size:16px;font-weight:750;
letter-spacing:-.03em;line-height:1.25;overflow-wrap:anywhere}
.card-badge{position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink-2);
font-size:11px;font-weight:620;padding:3.5px 10px;border-radius:20px;box-shadow:var(--shadow-sm);backdrop-filter:blur(4px)}
.see-done{color:var(--success) !important}
.course-card .body{padding:14px 16px 16px}
.course-card h3{font-size:14.5px;margin-bottom:7px;font-weight:620;letter-spacing:-.015em;line-height:1.35}
.see{color:var(--accent);font-weight:590;font-size:12.5px}
/* ---------- Lesson / player ---------- */
.badge{background:var(--accent-soft);color:var(--accent-ink);padding:3.5px 11px;border-radius:20px;font-size:11px;font-weight:620;letter-spacing:.03em}
.rank-pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid;vertical-align:middle;line-height:1.35}
.rank-pill .rank-icon{font-size:12px;line-height:1}
.rank-progress{margin:14px 0}
.rank-progress-bar{height:8px;background:#eef1f6;border-radius:10px;overflow:hidden}
.rank-progress-bar>span{display:block;height:100%;border-radius:10px}
.rank-progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px;color:var(--ink-2);gap:8px}
.video{position:relative;aspect-ratio:16/9;background:#101015;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift)}
.video iframe,.video video{width:100%;height:100%;border:0;position:absolute;inset:0;object-fit:contain;background:#000}
.play{width:84px;height:60px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.play::after{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:5px}
.back-link{color:var(--accent);font-size:13.5px;font-weight:520}
@container (max-width:620px){.course-grid{grid-template-columns:1fr}}
@container (max-width:820px) and (min-width:621px){.course-grid{grid-template-columns:1fr 1fr}}
/* Multi-video playlist */
.playlist{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.playlist .video{margin:0}
.pl-panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;max-height:520px;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.pl-head{padding:13px 16px;font-weight:620;font-size:13.5px;color:var(--ink);border-bottom:1px solid var(--line-2);flex:none}
.pl-list{list-style:none;margin:0;padding:6px 0;overflow-y:auto}
.pl-list li button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--ink-2);padding:10px 16px;cursor:pointer;font-family:var(--font);font-size:13.5px;line-height:1.35;border-top:1px solid var(--line-2)}
.pl-list li:first-child button{border-top:none}
.pl-list li button:hover{background:var(--surface-2);color:var(--ink)}
.pl-list li.active button{background:var(--accent-soft);color:var(--accent-ink)}
.pl-list li.active .pl-num{background:var(--accent);border-color:var(--accent);color:#fff}
.pl-num{flex:none;width:21px;height:21px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--muted)}
@container (max-width:560px){.playlist{grid-template-columns:1fr}.pl-panel{max-height:340px}}
/* Lesson player (linear, focused) */
.lesson-wrap{max-width:920px;padding-top:28px}
.lesson-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.lesson-back{color:var(--muted);font-weight:520;font-size:13.5px}
.lesson-back:hover{color:var(--ink)}
.lesson-prog{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.lesson-prog .bar{width:160px;height:5px;background:var(--line-2);border-radius:20px;overflow:hidden}
.lesson-prog .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-hi),var(--accent));border-radius:20px}
.lesson-prog .pct{color:var(--ink);font-weight:620}
.lesson-titlebar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.lesson-titlebar h1{font-size:24px;margin:0;line-height:1.25;letter-spacing:-.03em}
.chip{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);border-radius:22px;padding:7px 14px;font-weight:540;cursor:pointer;white-space:nowrap;font-family:var(--font);font-size:13px;transition:.12s;box-shadow:var(--shadow-sm)}
.chip:hover{color:var(--ink);box-shadow:var(--shadow-card)}
.chip.chip-done{background:var(--success-soft);border-color:#b1e3cd;color:#047857}
.lesson-copy{margin-top:22px;color:var(--ink-2);line-height:1.7;font-size:15px}
/* self-hosted video player: speed sits as a small chip over the
top-right of the frame so it never shares the 16:9 box with the
video (the old flex-row bar sat beside the picture). */
.lesson-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.video-speed{position:absolute;top:10px;right:10px;z-index:3;
display:flex;flex-direction:column;align-items:flex-end;gap:6px;
pointer-events:none}
.video-speed-toggle,.video-speed-menu button{pointer-events:auto;font-family:var(--font)}
.video-speed-toggle{background:rgba(10,10,16,.72);color:#fff;border:1px solid rgba(255,255,255,.18);
border-radius:8px;padding:6px 11px;font-size:13px;font-weight:700;letter-spacing:.02em;
cursor:pointer;min-width:46px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.video-speed-toggle:hover{background:rgba(10,10,16,.88)}
.video-speed-menu{background:rgba(10,10,16,.92);border:1px solid rgba(255,255,255,.14);
border-radius:10px;padding:4px;display:flex;flex-direction:column;min-width:84px;
box-shadow:0 8px 24px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(8px)}
.video-speed-menu button{background:none;border:0;border-radius:7px;padding:7px 12px;
font-size:13px;font-weight:640;color:rgba(255,255,255,.82);cursor:pointer;text-align:left}
.video-speed-menu button:hover{background:rgba(255,255,255,.1);color:#fff}
.video-speed-menu button.on{background:var(--accent);color:#fff}
/* Playback watermark. The viewer's own identity sits over the picture so a
screen recording carries an attribution out with it. app.js drifts it
between corners; the transition here is what makes that a slide rather
than a jump. Deliberately not a download control: this is DOM, so it is
removable in devtools and a saved file carries none of it. */
.video-wm{position:absolute;z-index:2;pointer-events:none;user-select:none;-webkit-user-select:none;
font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.3;
color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);
padding:4px 8px;max-width:60%;overflow-wrap:anywhere;
transition:top .9s ease,left .9s ease,right .9s ease,bottom .9s ease}
/* Members with no name set still fall back to an email, which Cloudflare
rewrites into an anchor. Keep it looking like the surrounding text. */
.video-wm a{color:inherit;text-decoration:none;pointer-events:none}
@media (prefers-reduced-motion:reduce){.video-wm{transition:none}}
/* admin video upload (inline, collapsed by default) */
.admin-video-upload{margin-top:14px;border:1px dashed var(--line);border-radius:10px;padding:0}
.admin-video-upload summary{cursor:pointer;padding:12px 16px;color:var(--muted);font-size:13px;font-weight:520}
.admin-video-upload[open] summary{border-bottom:1px solid var(--line)}
.admin-video-form{padding:16px;display:flex;flex-direction:column;gap:12px}
.admin-video-label{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.admin-video-label input[type=file]{max-width:300px}
.admin-video-note{color:var(--muted);font-size:12px;margin:0}
/* lesson downloads */
.lesson-files{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.lesson-files-head{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:640;color:var(--ink);margin-bottom:14px}
.lesson-files-head svg{color:var(--accent)}
.lesson-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.lesson-file{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.lesson-file:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.lesson-file-icon{flex-shrink:0;width:28px;height:28px;color:var(--accent)}
.lesson-file-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lesson-file-title{font-size:14px;font-weight:560;color:var(--ink);overflow-wrap:anywhere}
.lesson-file-size{font-size:12px;color:var(--muted)}
.lesson-file-dl{flex-shrink:0;width:20px;height:20px;color:var(--muted);transition:color .15s}
.lesson-file:hover .lesson-file-dl{color:var(--accent)}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px}
.next-preview{text-align:right;color:var(--muted);margin-top:10px;font-size:13px}
.next-preview a{color:var(--accent);font-weight:590}
/* persistent, nested module list */
.module-list{margin-top:34px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.ml-head{padding:14px 20px;font-weight:620;color:var(--ink);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-2);font-size:14px}
.ml-count{color:var(--muted);font-weight:500;font-size:12.5px}
.module-list ol{list-style:none;margin:0;padding:4px 0;counter-reset:m}
.module-list > ol > li.mod{counter-increment:m}
.mod-row{display:flex;align-items:center;gap:12px;padding:10px 20px;color:var(--ink-2);font-size:14px}
.mod-row:hover{background:var(--surface-2);color:var(--ink)}
.mod.current > .mod-row{color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.mtitle{flex:1}
.mtitle::before{content:counter(m) ". ";color:var(--muted-2)}
.sub-badge{font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:2px 9px;white-space:nowrap}
.check{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);flex:none;background:var(--surface)}
.mod.done > .mod-row > .check,.sub.done .check{background:var(--success);border-color:var(--success)}
.check.sm{width:13px;height:13px}
.submodules{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .2s ease;background:var(--surface-2)}
.mod.open .submodules{max-height:1500px}
.submodules li a{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 42px;color:var(--muted);font-size:13px;border-top:1px solid var(--line-2)}
.submodules li a:hover{background:var(--line-2);color:var(--ink)}
.submodules li.current a{color:var(--accent-ink);background:var(--accent-soft)}
@container (max-width:480px){.lesson-titlebar{flex-direction:column}.lesson-nav{flex-direction:column-reverse;align-items:stretch}.lesson-nav form,.lesson-nav .btn{width:100%}.lesson-nav .btn{justify-content:center}.next-preview{text-align:center}}
/* ============================================================
Search
============================================================ */
.search-box{position:relative;max-width:520px;margin:18px auto 0}
.search-box input{width:100%;padding:11px 18px;border-radius:30px;border:1px solid var(--line);
background:var(--surface);color:var(--ink);font-size:14.5px;font-family:var(--font);box-shadow:var(--shadow-sm)}
.search-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:var(--surface);
border:1px solid var(--hairline);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-pop);
max-height:380px;overflow-y:auto;text-align:left}
.search-results a{display:block;padding:10px 16px;font-size:13.5px;border-bottom:1px solid var(--line-2)}
.search-results a:hover{background:var(--surface-2)}
.sr-kind{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);font-size:10px;font-weight:700;
border-radius:12px;padding:2px 8px;margin-right:6px;text-transform:uppercase;letter-spacing:.03em}
.sr-course{color:var(--muted-2);font-size:11.5px}
.sr-empty{padding:14px 16px;color:var(--muted)}
/* ============================================================
Community feed
============================================================ */
.feed-wrap{max-width:640px}
.feed-head{padding:36px 0 16px}
.feed-head .eyebrow{margin-bottom:6px}
/* Composer: one unified well (Circle/Skool pattern). Collapsed it is a
quiet one-line prompt; expanded, the title, body, image preview and
toolbar all live inside a single bordered container that lights up
as one control via :focus-within. */
.composer{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:16px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.composer-row{display:flex;gap:12px;align-items:flex-start}
.composer-row>.avatar{margin-top:2px}
.composer-well{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-2);
border-radius:12px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.composer-well:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.composer-prompt{display:block;width:100%;text-align:left;background:none;border:none;cursor:text;
font-family:var(--font);font-size:14.5px;color:var(--muted-2);padding:13px 16px;border-radius:12px}
.composer-prompt:hover{color:var(--muted)}
.composer-title{display:block;width:100%;background:transparent;border:none;
border-bottom:1px solid var(--line-2);border-radius:12px 12px 0 0;
font-family:var(--font);font-size:15.5px;font-weight:620;color:var(--ink);
padding:12px 16px 10px;letter-spacing:-.01em}
.composer-title:focus{outline:none}
.composer-title::placeholder{color:var(--muted-2);font-weight:500}
.composer textarea{display:block;width:100%;background:transparent;border:none;resize:vertical;
min-height:76px;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink);
padding:11px 16px 8px}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--muted-2)}
.composer-img{position:relative;display:inline-block;margin:2px 16px 10px}
.composer-img img{display:block;max-height:120px;border-radius:10px;border:1px solid var(--hairline)}
.composer-img button{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
border:none;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.composer-img button:hover{background:var(--danger)}
/* Multi-image preview strip. Wraps to a 4-column grid on mobile so
8 photos fit without a horizontal scroll. Tiles are square with a
drag-to-reorder cursor; the JS handles the reorder via native HTML5
drag events. */
.composer-media{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 16px 10px}
.composer-tile{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
background:var(--surface-3,var(--surface-2));border:1px solid var(--hairline);cursor:grab}
.composer-tile.dragging{opacity:.5;cursor:grabbing}
.composer-tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.composer-tile-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
border:none;background:rgba(0,0,0,.65);color:#fff;font-size:14px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.composer-tile-remove:hover{background:var(--danger,#dc2626)}
.composer-tile-spinner,.composer-tile-err{position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;text-align:center}
.composer-tile-err{background:rgba(220,38,38,.75)}
.composer-video{position:relative;margin:6px 16px 10px;border-radius:10px;overflow:hidden;
background:#000;border:1px solid var(--hairline)}
.composer-video video{display:block;width:100%;max-height:280px;background:#000}
.composer-video-status{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.7);
color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px}
.composer-media-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
border:none;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.composer-media-remove:hover{background:var(--danger,#dc2626)}
.composer-attach.disabled{opacity:.35;pointer-events:none}
/* Multi-image carousel on post cards. Scroll-snap gives native paging
feel without a library; the dots below are painted by JS. */
.pcard-carousel{position:relative;margin-top:10px}
.pcard-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pcard-carousel-track::-webkit-scrollbar{display:none}
.pcard-carousel-slide{flex:0 0 100%;scroll-snap-align:start;position:relative}
.pcard-carousel-slide img{width:100%;display:block;max-height:640px;object-fit:contain;background:#000}
.pcard-carousel-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}
.pcard-carousel-dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);border:none;padding:0;cursor:pointer}
.pcard-carousel-dot.on{background:var(--accent)}
.pcard-carousel-count{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.55);
color:#fff;font-size:11px;font-weight:600;padding:3px 7px;border-radius:10px;pointer-events:none}
.pcard-video{margin-top:10px;position:relative;background:#000;border-radius:6px;overflow:hidden}
.pcard-video video{display:block;width:100%;max-height:640px;background:#000}
.composer-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;
border-top:1px solid var(--line-2);padding:8px 10px}
.composer-tools{display:flex;align-items:center;gap:4px}
.composer-attach{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
border-radius:8px;cursor:pointer;color:var(--muted);transition:.12s}
.composer-attach:hover{color:var(--accent);background:var(--accent-soft)}
.composer-attach svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.composer-chan{border:none;border-radius:8px;background:transparent;color:var(--ink-2);
font-family:var(--font);font-size:12.5px;font-weight:590;padding:7px 8px;cursor:pointer;max-width:180px}
.composer-chan:hover{background:var(--wash)}
.composer-chan:focus{outline:none}
.composer .btn{padding:7px 20px}
.post{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.post:hover{box-shadow:var(--shadow-card)}
.post-head{display:flex;align-items:center;gap:11px}
.post-who{flex:1;display:flex;flex-direction:column;gap:0}
.post-who b{font-size:14px;font-weight:620;letter-spacing:-.01em}
.post-when{color:var(--muted-2);font-size:11.5px}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;color:#fff;
background:linear-gradient(135deg,#4d84f8,#2f6df6);
display:inline-flex;align-items:center;justify-content:center;
font-weight:640;font-size:15px;box-shadow:0 1px 2px rgba(47,109,246,.3)}
.avatar.md{width:36px;height:36px;font-size:14px}
.avatar.sm{width:28px;height:28px;font-size:11.5px}
.avatar.xs{width:20px;height:20px;font-size:9px}
.post-body{margin:13px 0 11px;white-space:pre-wrap;line-height:1.62;font-size:14.5px;color:var(--ink-2)}
.post-actions{display:flex;gap:18px}
.act{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
color:var(--muted);font-family:var(--font);font-size:13px;font-weight:590;
padding:5px 8px;border-radius:8px;transition:background .15s,color .15s}
.act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.act:hover{background:var(--wash);color:var(--ink)}
.act-on{color:var(--danger)}
.act-on svg{fill:var(--danger);stroke:var(--danger)}
.act .n{font-weight:620}
.post-del-btn{background:none;border:none;cursor:pointer;color:var(--muted-2);padding:6px;transition:color .15s}
.post-del-btn:hover{color:var(--danger)}
.post-del-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.comments{display:none;margin-top:11px;border-top:1px solid var(--line-2);padding-top:13px}
.comments.open{display:block}
.comment{display:flex;gap:10px;margin-bottom:12px;font-size:13.5px}
.comment-body b{font-size:13px;font-weight:620;margin-right:8px}
.comment-body div{color:var(--ink-2);margin-top:2px;line-height:1.55}
/* Reply composer.
Was a single flex row when the composer was only "input + Send".
With the GIF picker attached, the form now hosts optional
sub-rows above the input row (a reply-target chip, a chosen-gif
preview strip), so the form itself is block and the input row
is its own flex container. */
.comment-form{display:block;padding-left:38px}
.cmt-input-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.cmt-input-row input{flex:1;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);
border-radius:var(--radius-sm);padding:8px 12px;font-size:13.5px;font-family:var(--font);min-width:0}
.cmt-input-row input:focus{outline:none;border-color:var(--accent)}
.cmt-input-row .btn{padding:7px 14px;font-size:13px}
.cmt-gif-btn{background:var(--surface-2);color:var(--muted-2);border:1px solid var(--line-2);
border-radius:var(--radius-sm);padding:7px 10px;font-size:11.5px;font-weight:700;letter-spacing:.5px;
cursor:pointer;font-family:var(--font);line-height:1}
.cmt-gif-btn:hover{color:var(--ink);border-color:var(--accent)}
.cmt-gif-preview{position:relative;display:inline-block;margin-top:8px;max-width:220px}
.cmt-gif-preview img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--line-2)}
.js-cmt-gif-remove{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
background:var(--surface-1);color:var(--ink);border:1px solid var(--line-2);cursor:pointer;
font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.js-cmt-gif-remove:hover{background:#3a1f22;color:#ff8080;border-color:#ff8080}
/* Rendered GIF inside a posted comment. Kept modest (240px cap)
so a wall of animation doesn't dominate the thread; clicking
opens the full-size in a new tab if a member wants it bigger. */
.cmt-gif{display:inline-block;margin-top:6px;max-width:240px}
.cmt-gif img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--line-2)}
/* ============================================================
GIF picker (Tenor)
Shared floating popover positioned above whichever reply's GIF
button opened it. Sized to fit iPhone-SE width (375px) with room
for the page padding.
============================================================ */
.gif-picker{position:absolute;z-index:60;width:340px;max-width:calc(100vw - 16px);height:380px;
background:var(--surface-1);border:1px solid var(--line-2);border-radius:var(--radius);
box-shadow:0 20px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden}
.gif-picker-head{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);align-items:center}
.gif-picker-search{flex:1;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);
border-radius:var(--radius-sm);padding:7px 10px;font-size:13.5px;font-family:var(--font);min-width:0}
.gif-picker-search:focus{outline:none;border-color:var(--accent)}
.gif-picker-close{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:22px;
line-height:1;padding:0 6px;font-family:var(--font)}
.gif-picker-close:hover{color:var(--ink)}
.gif-picker-body{flex:1;overflow-y:auto;padding:10px}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gif-tile{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
padding:0;overflow:hidden;cursor:pointer;aspect-ratio:1/1;transition:border-color .12s}
.gif-tile:hover{border-color:var(--accent)}
.gif-tile img{display:block;width:100%;height:100%;object-fit:cover}
.gif-picker-msg{color:var(--muted-2);text-align:center;padding:24px 10px;font-size:13px}
.gif-picker-foot{padding:6px 10px;border-top:1px solid var(--line);color:var(--muted-2);
font-size:11px;text-align:right;letter-spacing:.3px}
.feed-empty{text-align:center;padding:60px 24px;color:var(--muted);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--radius)}
/* ============================================================
AI Mentor chat
============================================================ */
.chat-wrap{max-width:760px;display:flex;flex-direction:column;min-height:calc(100vh - 80px)}
.chat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
padding:34px 0 16px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:8px}
.chat-head .eyebrow{margin-bottom:6px}
.chat-head h1{margin-bottom:4px;font-size:clamp(22px,3.4vw,27px)}
.chat-head-actions{display:flex;gap:10px;align-items:center;padding-bottom:6px}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:20px 2px}
.msg{display:flex}
.msg.user{justify-content:flex-end}
.msg .bubble{max-width:84%;line-height:1.62;font-size:14.5px}
.msg.user .bubble{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;
padding:11px 16px;border-radius:16px 16px 5px 16px;box-shadow:0 2px 6px rgba(47,109,246,.3)}
.msg.assistant .bubble{background:var(--surface);border:1px solid var(--hairline);color:var(--ink-2);
padding:13px 17px;border-radius:16px 16px 16px 5px;box-shadow:var(--shadow-sm)}
.msg .bubble p{margin:.5em 0}
.msg .bubble p:first-child{margin-top:0}
.msg .bubble p:last-child{margin-bottom:0}
.msg .bubble a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.msg.user .bubble a{color:#fff}
.msg .bubble ul{margin:.4em 0;padding-left:20px}
.msg.typing .bubble{color:var(--muted);font-style:italic}
.chat-input{display:flex;gap:10px;padding:16px 0 28px;position:sticky;bottom:0;align-items:flex-end;
background:linear-gradient(180deg,transparent,var(--bg) 30%)}
.chat-input textarea{flex:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;
padding:12px 16px;font-family:var(--font);font-size:14.5px;resize:none;box-shadow:var(--shadow-card)}
.chat-input textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)}
/* ---- AI Advisor page ---- */
.ai-wrap{max-width:880px;padding-top:20px;padding-bottom:24px}
/* Framed chat panel: header / scrollable log / docked input.
Fixed height pinned to the viewport so the log scrolls INSIDE the
panel; the page itself never grows with the conversation. */
.ai-panel{display:flex;flex-direction:column;background:var(--surface);
height:calc(100vh - 235px);height:calc(100dvh - 235px);min-height:480px;
border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
/* The chat page is a fixed viewport app: no footer below the panel,
so the page itself never needs to scroll. */
.ai-wrap ~ .footer{display:none}
.ai-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 20px;border-bottom:1px solid var(--line-2);flex:none;background:var(--surface)}
.ai-panel-id{display:flex;align-items:center;gap:12px;min-width:0}
.ai-panel-icon{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--m-primary,#7c3aed),var(--m-accent,#22d3ee))}
.ai-panel-icon svg{width:20px;height:20px;fill:#fff}
.ai-panel-meta h2{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0}
.ai-panel-meta p{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.3}
.ai-clear-form{flex:none}
.ai-clear-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;
border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
font-family:var(--font);font-size:12.5px;font-weight:600;transition:all .15s}
.ai-clear-btn:hover{border-color:var(--red,#ef4444);color:var(--red,#ef4444)}
.ai-clear-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
/* Message log */
.ai-chat{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:24px;
scroll-behavior:smooth;background:var(--surface)}
.ai-msg{display:flex;gap:12px;align-items:flex-start;animation:ai-in .3s ease}
@keyframes ai-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg.ai-user{flex-direction:row-reverse}
.ai-avatar{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;
justify-content:center;font-size:12.5px;font-weight:700;line-height:1;margin-top:2px}
.ai-user .ai-avatar{background:var(--accent);color:#fff}
.ai-assistant .ai-avatar{background:linear-gradient(135deg,var(--m-primary,#7c3aed),var(--m-accent,#22d3ee));color:#fff}
.ai-avatar svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.ai-bubble{max-width:78%;line-height:1.65;font-size:13.5px;overflow-wrap:anywhere}
.ai-user .ai-bubble{background:var(--accent);color:#fff;
padding:10px 15px;border-radius:16px 16px 4px 16px}
.ai-assistant .ai-bubble{background:var(--bg);color:var(--ink-2);
padding:12px 16px;border-radius:16px 16px 16px 4px}
.ai-bubble p{margin:.5em 0}.ai-bubble p:first-child{margin-top:0}.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ai-user .ai-bubble a{color:#fff}
.ai-bubble ul{margin:.4em 0;padding-left:20px}
.ai-dots{display:inline-flex;gap:5px;padding:4px 0}
.ai-dots span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ai-dot 1.4s ease infinite}
.ai-dots span:nth-child(2){animation-delay:.2s}
.ai-dots span:nth-child(3){animation-delay:.4s}
@keyframes ai-dot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
/* Empty state */
.ai-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:8px;padding:40px 20px}
.ai-empty-icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--m-primary,#7c3aed),var(--m-accent,#22d3ee))}
.ai-empty-icon svg{width:26px;height:26px;fill:#fff}
.ai-empty-title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.ai-empty-sub{color:var(--muted);font-size:13.5px;max-width:360px}
.ai-prompts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:520px}
.ai-prompt{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 15px;
font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:all .15s ease;
font-family:var(--font)}
.ai-prompt:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg,rgba(47,109,246,.06))}
/* Docked input bar */
.ai-bar{flex:none;padding:14px 16px 10px;border-top:1px solid var(--line-2);background:var(--surface)}
.ai-input{display:flex;align-items:flex-end;background:var(--bg);border:1.5px solid var(--line);
border-radius:14px;transition:border-color .15s,box-shadow .15s}
.ai-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,109,246,.1);background:var(--surface)}
.ai-input textarea{flex:1;background:none;color:var(--ink);border:none;padding:11px 4px 11px 16px;
font-family:var(--font);font-size:13.5px;resize:none;line-height:1.5;max-height:160px}
.ai-input textarea:focus{outline:none}
.ai-send{width:34px;height:34px;border-radius:10px;background:var(--accent);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;margin:4px 5px;flex:none;
transition:background .15s,opacity .15s}
.ai-send:hover{opacity:.85}
.ai-send:disabled{opacity:.35;cursor:default}
.ai-send svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.ai-hint{text-align:center;font-size:11.5px;color:var(--muted);margin:8px 0 0;line-height:1.3}
/* Admin: AI Advisor logs */
.ailog-filters{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 6px}
.ailog-thread{margin:16px 0;padding:18px 20px}
.ailog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.ailog-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ailog-msgs{display:flex;flex-direction:column;gap:12px}
.ailog-msg{max-width:88%}
.ailog-user{align-self:flex-end}
.ailog-role{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:3px;
letter-spacing:.02em}
.ailog-user .ailog-role{text-align:right}
.ailog-body{font-size:13.5px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;
background:var(--bg);border-radius:12px;padding:10px 14px}
.ailog-user .ailog-body{background:rgba(47,109,246,.08)}
.ailog-cleared{opacity:.55}
@media(max-width:640px){
.ai-wrap{padding-top:12px;padding-bottom:12px}
.ai-chat{padding:16px}
.ai-bubble{max-width:86%}
.ai-hint{display:none}
}
.ai-off{text-align:center;margin:26px 0 6px;border:1px solid #f5e0b0;border-radius:var(--radius);
background:#fffaf0;padding:24px;color:var(--ink-2);font-size:13.5px}
.ai-off code{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:2px 8px}
.ask-ai{display:flex;align-items:center;gap:12px;margin-top:30px;padding:15px 18px;font-size:14px;
background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm);
color:var(--muted);transition:all .15s}
.ask-ai:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.ask-ai svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.ask-ai b{color:var(--ink);font-weight:600}
.ask-ai .ask-arrow{margin-left:auto;color:var(--accent);font-size:16px;transition:transform .2s}
.ask-ai:hover .ask-arrow{transform:translateX(4px)}
/* ============================================================
AI Copywriter
============================================================ */
.copy-wrap{max-width:860px}
.copy-form{margin:24px 0 26px;background:var(--surface);border:1px solid var(--hairline);
border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card)}
.copy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-bottom:22px}
.copy-grid .field{margin:0;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:620}
.copy-grid input,.copy-grid select{width:100%;margin-top:7px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
background:var(--surface);color:var(--ink);font-size:14.5px;
font-family:var(--font);letter-spacing:normal;text-transform:none;font-weight:400;box-shadow:inset 0 1px 2px rgba(24,24,29,.03)}
.copy-grid select option{background:var(--surface)}
.copy-grid input:focus,.copy-grid select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)}
.copy-out{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:24px;box-shadow:var(--shadow-card)}
.copy-out-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.copy-out-head h2{font-size:18px;margin:0}
.copy-out pre{white-space:pre-wrap;font-family:var(--font);font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:16px 0 0}
@container (max-width:520px){.copy-grid{grid-template-columns:1fr}}
/* ============================================================
Panels (account, sessions, generic)
============================================================ */
.panel-card,.wrap .panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:24px;box-shadow:var(--shadow-card)}
.wrap .panel h2{font-size:18px;margin:0 0 16px}
.wrap .panel h4{font-weight:620;font-size:13.5px;margin:18px 0 12px}
.panel-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.panel-row.hr{padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.hosts{display:flex;gap:22px;flex-wrap:wrap}
.host{display:inline-flex;align-items:center;gap:9px;font-size:13.5px}
.host img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.subcard{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px 16px;margin-top:14px}
.subcard .muted{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);font-size:13px}
.more{color:var(--accent);font-weight:590;white-space:nowrap;font-size:13px}
.event-row{display:flex;justify-content:space-between;gap:14px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 14px;margin-top:10px;font-size:13.5px}
/* ============================================================
Admin
============================================================ */
.admin-wrap{max-width:980px;padding-top:12px}
.admin-msg{background:var(--success-soft);border:1px solid #b1e3cd;color:#047857;padding:7px 14px;border-radius:var(--radius-sm);display:inline-block;font-size:13px;font-weight:520}
.admin-create .ac-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.admin-create input[type=email],.admin-create input[type=text]{padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14.5px;width:100%;font-family:var(--font)}
.admin-create input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)}
.ac-programs{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px}
.prog-check{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;cursor:pointer}
.user-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:15px 18px;margin:12px 0;box-shadow:var(--shadow-sm)}
/* The user list is a list again. Everything editable moved to the per-user
page, because rendering all 21 program toggles per card meant ~17KB and
~190 elements each: fine at three users, a 3.4MB page at two hundred. */
.user-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 10px}
.user-search input[type=search]{flex:1;min-width:220px;background:var(--surface);
border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 13px;
font-family:var(--font);font-size:14px}
.user-search select{background:var(--surface);border:1px solid var(--line);color:var(--ink);
border-radius:10px;padding:10px 12px;font-family:var(--font);font-size:14px}
.user-search input:focus-visible,.user-search select:focus-visible{outline:none;
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.user-count{font-size:13px;margin:0 0 10px}
.user-rows{display:flex;flex-direction:column;gap:6px}
.user-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) auto auto;
align-items:center;gap:14px;padding:11px 14px;text-decoration:none;
background:var(--surface);border:1px solid var(--hairline);border-radius:11px;
box-shadow:var(--shadow-sm);transition:.12s}
.user-row:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ur-who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.ur-who b{color:var(--ink);font-size:14.5px}
.ur-email{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.ur-ecos{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ur-eco{background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink-2);
border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:590}
.ur-eco b{color:var(--ink);font-weight:800}
/* Lesson AI summary and chapter markers. Sits directly under the player
because on a multi-hour session it is navigation, not an afterthought. */
.lesson-ai{margin:18px 0 6px;padding:20px 22px;background:var(--surface);
border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-sm)}
.lesson-ai-head{margin:0 0 10px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
color:var(--muted);font-weight:700}
.lesson-ai-summary{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.lesson-ai-chapters{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.lesson-ai-chapters h3{margin:0 0 10px;font-size:14.5px;color:var(--ink)}
.lai-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px}
.lai-item{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border:none;
background:none;border-radius:9px;cursor:pointer;text-align:left;font:inherit;
color:var(--ink-2);transition:.12s}
.lai-item:hover{background:var(--wash);color:var(--ink)}
.lai-time{flex:none;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;
color:var(--accent-ink);background:var(--accent-soft);border-radius:6px;padding:2px 7px}
.lai-title{font-size:14px;line-height:1.4}
.lesson-ai-pending{display:flex;align-items:center;gap:9px;margin:18px 0 6px;
font-size:14px;color:var(--muted)}
.lesson-ai-admin{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.lesson-ai-err{font-size:12.5px;color:#b91c1c;overflow-wrap:anywhere}
/* Collapsible transcript below the chapters. Kept closed by default
because the summary and chapter list are the primary navigation;
the transcript is there for members who want to skim, search
(browser Cmd-F still works inside a ), or read what was
said. Each paragraph opens with a clickable [m:ss] stamp that
reuses the .js-lesson-chapter handler, so a stamp click seeks the
video the same way a chapter click does. */
.lesson-ai-transcript{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)}
.lesson-ai-transcript summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink);
padding:6px 0;list-style:none;display:flex;align-items:center;gap:8px}
.lesson-ai-transcript summary::-webkit-details-marker{display:none}
.lesson-ai-transcript summary::before{content:"›";color:var(--muted);font-weight:400;
transition:transform .15s var(--ease);display:inline-block;font-size:18px;line-height:1}
.lesson-ai-transcript[open] summary::before{transform:rotate(90deg)}
.lai-tx-body{margin-top:10px;max-height:70vh;overflow-y:auto;padding:4px 4px 12px 2px;
background:var(--wash);border-radius:8px}
.lai-tx-para{margin:0;padding:8px 12px;line-height:1.55;font-size:13.5px;color:var(--ink-2)}
.lai-tx-para + .lai-tx-para{border-top:1px solid var(--line-2)}
.lai-tx-stamp{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;
color:var(--accent-ink);background:var(--accent-soft);border:none;border-radius:5px;
padding:1px 6px;margin-right:6px;cursor:pointer;font-family:inherit;vertical-align:1px;
transition:.12s}
.lai-tx-stamp:hover{background:var(--accent);color:#fff}
/* Mail status. A failing provider should be the loudest thing on the
page, because the alternative is nobody noticing for a day. */
.mail-health.mail-bad{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.mail-health.mail-unknown{border-color:#d97706}
.mh-line{margin:6px 0 4px;font-size:14.5px;font-weight:650}
.mh-ok{color:#15803d}
.mh-bad{color:#b91c1c}
.mh-unknown{color:#b45309}
.mh-err{margin:0 0 6px;font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
color:#b91c1c;background:rgba(220,38,38,.07);border-radius:8px;padding:8px 11px;overflow-wrap:anywhere}
.mh-meta{font-size:13px;margin:0 0 12px}
.mh-recent{margin-top:14px}
.mh-recent summary{cursor:pointer;font-size:13px;color:var(--muted)}
.mh-rows{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.mh-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) minmax(0,1.4fr);
gap:12px;font-size:12.5px;padding:7px 10px;border-radius:8px;background:var(--surface-2);
color:var(--ink-2);overflow-wrap:anywhere}
.mh-row-bad{background:rgba(220,38,38,.07);color:#b91c1c}
.mh-to{font-weight:600}
.mh-subj{color:var(--muted)}
@media(max-width:760px){.mh-row{grid-template-columns:1fr}}
.ucm-courses{color:var(--muted);font-size:12px}
.ur-none{color:var(--muted-2);font-size:11.5px;font-style:italic}
.ur-stats{display:flex;gap:12px;color:var(--muted);font-size:12px;white-space:nowrap}
.ur-warn{color:#b45309;font-weight:700}
.ur-go{color:var(--muted-2);font-size:15px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px;font-size:13px}
.au-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
@media(max-width:760px){
.user-row{grid-template-columns:1fr auto;gap:8px}
.ur-ecos{grid-column:1/-1}
.ur-stats{grid-column:1;font-size:11.5px}
}
.uc-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.uc-actions{display:flex;gap:8px}
.uc-programs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.prog-toggle{display:inline}
.tag{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:590;cursor:pointer;font-family:var(--font);transition:.12s}
.tag:hover{color:var(--ink);box-shadow:var(--shadow-sm)}
.tag-on{background:var(--success-soft);border-color:#b1e3cd;color:#047857}
/* A category none of this member's ecosystems expose. Granting it is a no-op,
so the toggle is dimmed and dashed rather than looking like every other one.
Held-but-inert keeps the amber warning tone: that combination is a mistake
someone already made, not just an option that would not help. */
.tag-inert{background:var(--surface-2);border-style:dashed;border-color:var(--line-2);color:var(--muted-2);opacity:.75}
.tag-inert:hover{opacity:1}
.tag-on.tag-inert{background:#fff7ed;border-color:#fdba74;color:#b45309;opacity:1}
.uc-inert-note{margin:8px 0 0;font-size:12.5px;color:#b45309;line-height:1.5}
.tag-admin{background:var(--accent-soft);border:1px solid #dcdefc;color:var(--accent-ink);border-radius:20px;padding:2.5px 10px;font-size:11px;font-weight:640;margin-left:6px}
/* Role badges — small neutral pills next to a person's name wherever
their tier matters (admin members table, community feed, member
profile). One calm tone across every tier: the label says who
someone is, the colour doesn't need to shout it. Member has no
badge (a badge on everybody is a badge on nobody). */
.role-badge{display:inline-flex;align-items:center;gap:4px;border-radius:20px;
padding:1px 7px;font-size:10px;font-weight:660;letter-spacing:.03em;
text-transform:uppercase;margin-left:6px;line-height:1.5;
background:var(--surface-2);color:var(--ink-2);border:1px solid var(--hairline)}
.role-badge.role-member{display:none}
:root[data-theme="dark"] .role-badge{background:#1e2634;color:#a8b3c7;border-color:transparent}
/* Compact inline form the members table renders around the role
dropdown — no visible chrome, just enough spacing so the select
sits neatly under the badge column. */
.role-form{gap:0;margin:0}
.role-tbl td select{padding:5px 8px;font-size:12.5px;border-radius:8px;
border:1px solid var(--hairline);background:var(--surface);color:var(--ink);cursor:pointer}
.role-tbl td select:hover{border-color:var(--line)}
.role-tbl td select:disabled{opacity:.55;cursor:not-allowed}
/* Per-user ecosystems block inside each admin user card. Compact
list on the left, controls on the right. Small horizontal rules
between rows so a user with many grants stays scannable. */
.uc-memberships{margin-top:14px;padding-top:12px;border-top:1px dashed var(--hairline)}
.ucm-h{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;margin-bottom:8px}
.ucm-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ucm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:6px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--hairline)}
.ucm-name{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink)}
.ucm-controls{display:flex;align-items:center;gap:6px}
.ucm-controls select{padding:4px 8px;font-size:12px;border-radius:8px;border:1px solid var(--hairline);
background:var(--surface);color:var(--ink);cursor:pointer}
.ucm-grant{gap:6px;flex-wrap:wrap}
.ucm-grant select{padding:6px 10px;font-size:13px;border-radius:8px;border:1px solid var(--hairline);
background:var(--surface);color:var(--ink)}
.chip-danger{border-color:#f6c9c9;color:var(--danger)}
.chip-danger:hover{background:var(--danger-soft);color:var(--danger)}
@container (max-width:520px){.admin-create .ac-fields{grid-template-columns:1fr}}
/* Admin — memberships (ecosystems) */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.eco-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);color:inherit;
transition:.16s var(--ease)}
.eco-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop);border-color:var(--line)}
.eco-swatch{aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;padding:20px}
.eco-swatch img{max-height:36px;filter:brightness(0) invert(1);opacity:.95}
.eco-body{padding:14px 16px 18px}
.eco-title{display:flex;align-items:center;gap:8px;font-size:15px}
.eco-sub{margin:2px 0 0;font-size:13px}
.eco-tagline{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.eco-meta{margin-top:10px;font-size:11.5px;display:flex;gap:6px;flex-wrap:wrap}
.eco-form .ef-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.eco-form .ef{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-weight:520}
.eco-form .ef-wide{grid-column:1 / -1}
.eco-form .ef-check{flex-direction:row;align-items:center;gap:8px}
.eco-form .ef input[type=text],.eco-form .ef input[type=number],.eco-form .ef input[type=date],
.eco-form .ef input[type=email],.eco-form .ef input:not([type]),.eco-form .ef textarea,.eco-form .ef select{
padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
font:inherit;font-size:14px;width:100%}
.eco-form .ef textarea{resize:vertical;min-height:60px;font-family:var(--font)}
.eco-form .ef input:focus,.eco-form .ef textarea:focus,.eco-form .ef select:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,109,246,.15)}
.ef-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ef-inline input,.ef-inline select{padding:9px 12px;border-radius:8px;border:1px solid var(--line);
background:var(--surface);color:var(--ink);font:inherit;font-size:14px;flex:1;min-width:120px}
.admin-tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.admin-tbl th,.admin-tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line-2)}
.admin-tbl th{font-size:11.5px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.admin-tbl tr:hover td{background:var(--surface-2)}
.danger-zone{border-color:#f6c9c9}
.btn-danger{background:var(--danger);color:#fff;border:0;padding:9px 16px;border-radius:8px;
font:inherit;font-weight:600;cursor:pointer}
.btn-danger:hover{filter:brightness(1.05)}
@container (max-width:520px){.eco-form .ef-grid{grid-template-columns:1fr}}
/* ============================================================
The Room — full-bleed video with a slim header + live presence
strip. Designed to feel more like a "place" than a page: the
video takes the whole viewport, header floats above.
============================================================ */
.room-page{display:flex;flex-direction:column;min-height:calc(100vh - 56px);gap:14px;padding:20px 28px 24px}
.room-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.room-head-l h1{font-size:32px;letter-spacing:-.03em;margin:6px 0 4px;font-weight:700}
.room-head-l p{margin:0;max-width:560px;font-size:14px}
/* Small tab-strip shown only when the ecosystem has 2 rooms so a
member can hop between them without leaving the page. Sits under
the header copy; the active tab uses the ecosystem's primary color
so it visually anchors the current room. */
.room-tabs{display:inline-flex;gap:2px;margin-top:14px;padding:3px;
background:var(--surface-2);border:1px solid var(--hairline);border-radius:999px}
.room-tab{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;
color:var(--ink-2);text-decoration:none;letter-spacing:-.01em;
transition:background .18s var(--ease),color .18s var(--ease)}
.room-tab:hover{color:var(--ink);background:var(--surface)}
.room-tab.on{background:var(--m-primary,var(--accent));color:#fff;box-shadow:var(--shadow-sm)}
/* Private-room note under the room title. Deliberately calm rather than
a warning colour: the people reading it are the ones who are meant to
be there, and it exists so they know who else can hear them. Wraps
freely, since the audience description is written by an admin and can
be any length. */
.room-private{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;
font-size:13.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.room-private-dot{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;
background:var(--m-accent,var(--accent))}
.room-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:640;
letter-spacing:.14em;text-transform:uppercase;color:#059669;
background:color-mix(in srgb,#10b981 12%,transparent);border-radius:999px;padding:4px 10px}
.room-live-dot{width:7px;height:7px;border-radius:50%;background:#10b981;
box-shadow:0 0 0 0 rgba(16,185,129,.55);animation:sb-room-pulse 1.8s var(--ease) infinite}
/* Host-only countdown to the scheduled end, next to the Live badge.
Neutral for most of the last stretch, amber under five minutes, and
a calm grey once the session is over its time: the room stays open
through the grace period, so "over" is information, not an alarm. */
.room-timer{display:inline-flex;align-items:center;font-size:11px;font-weight:640;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
background:rgba(255,255,255,.05);border-radius:999px;padding:4px 10px;
font-variant-numeric:tabular-nums}
.room-timer.low{color:#f5b642;background:rgba(245,182,66,.14)}
.room-timer.over{color:var(--muted);background:rgba(255,255,255,.05)}
.room-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Host-only session recorder. Idle: quiet outline button. Recording:
red fill with a pulsing dot and a live elapsed-time label. */
.btn-rec{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
padding:8px 14px;border-radius:999px;cursor:pointer;font-family:var(--font);
background:var(--surface);border:1px solid var(--hairline);color:var(--ink);
transition:background .15s,border-color .15s}
.btn-rec:hover{border-color:#ef4444;color:#ef4444}
.btn-rec:disabled{opacity:.6;cursor:default}
.btn-rec .rec-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;flex:none}
.btn-rec.on{background:#ef4444;border-color:#ef4444;color:#fff}
.btn-rec.on:hover{color:#fff}
.btn-rec.rec-err{border-color:#f59e0b;color:#f59e0b}
.btn-rec.rec-err .rec-dot{background:#f59e0b}
.btn-rec.on .rec-dot{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);
animation:sb-room-pulse 1.6s var(--ease) infinite}
.room-present{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:520px}
.room-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
border:1px solid var(--hairline);border-radius:999px;padding:3px 12px 3px 3px;font-size:12.5px;
font-weight:520;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.room-chip .avatar{width:22px;height:22px;font-size:10.5px}
.room-stage{flex:1;position:relative;border-radius:18px;overflow:hidden;background:#0b0a12;
box-shadow:var(--shadow-pop);min-height:520px}
.jitsi-frame{position:absolute;inset:0}
.jitsi-frame iframe{width:100% !important;height:100% !important;border:0}
/* Two-layer branding cover over the top-left of the video stage.
.room-jitsi-mask is a fully-opaque dark shim shaped to blot out the
region where Jitsi paints its wordmark (both on the "asking to join"
pre-call screen AND once in-call). .room-brand-plate then sits on
top and shows OUR mark instead. Both ignore pointer events so
Jitsi's own toolbar/controls under them still receive clicks.
Self-hosted Jitsi (custom-config.js) hides the watermark server-side
so this mask becomes a no-op decoration; on meet.jit.si (dev) it's
what actually hides the mark, since their SPA now ignores the
SHOW_JITSI_WATERMARK override. */
.room-jitsi-mask{position:absolute;top:0;left:0;z-index:3;pointer-events:none;
width:300px;height:110px;
background:linear-gradient(135deg,#0b0a12 0%,#0b0a12 62%,rgba(11,10,18,.9) 82%,transparent 100%)}
.room-brand-plate{position:absolute;top:14px;left:14px;z-index:4;pointer-events:none;
display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:12px;
background:rgba(20,22,32,.92);backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.10);
color:rgba(255,255,255,.96);font-size:13px;font-weight:700;letter-spacing:.01em;
box-shadow:0 4px 14px rgba(0,0,0,.35);
transition:opacity .25s ease}
.room-brand-plate img{width:22px;height:22px;border-radius:6px;object-fit:cover;display:block}
.room-stage:hover .room-jitsi-mask{opacity:.55}
.room-stage:hover .room-brand-plate{opacity:.55}
.room-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:14px;padding:30px;color:#eee;text-align:center;background:#0b0a12}
.room-fallback p{margin:0;max-width:420px}
/* --- The Room: opening hours states --- */
/* Amber "opens soon" and grey "closed" variants of the header pill. */
.room-live.room-soon{background:rgba(245,182,66,.14);border-color:rgba(245,182,66,.45);color:#f5b642}
.room-live.room-soon .room-live-dot{background:#f5b642}
.room-live.room-closed{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:var(--muted)}
.room-live.room-closed .room-live-dot{background:rgba(255,255,255,.25);animation:none;box-shadow:none}
/* Admin bypass banner when an admin joins outside opening hours — the
room technically shouldn't be open, but they get in for testing. */
/* Sits above .room-stage, on the page background, so it reads on the light
theme too. It cannot live inside the stage: .jitsi-frame is absolutely
positioned across that whole box and paints over anything in flow there. */
.room-admin-banner{
background:rgba(245,182,66,.12);border:1px solid rgba(245,182,66,.45);
color:var(--ink-2);padding:12px 14px;border-radius:12px;margin-bottom:12px;
font-size:13px;line-height:1.55
}
.room-admin-banner b{color:#a15c07;font-weight:800}
:root[data-theme="dark"] .room-admin-banner b{color:#f5b642}
/* The control belongs here rather than in an admin screen: the moment a host
sees the room is shut is the moment they want to open it. */
.room-open-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.room-open-now input[name=title]{flex:1;min-width:170px;background:var(--surface);
border:1px solid rgba(245,182,66,.5);color:var(--ink);border-radius:9px;padding:8px 12px;
font-family:var(--font);font-size:13px}
.room-open-now input[name=title]::placeholder{color:var(--muted)}
.room-open-now input:focus-visible{outline:none;border-color:#f5b642;
box-shadow:0 0 0 3px rgba(245,182,66,.25)}
.ron-mins{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);
font-size:12.5px;white-space:nowrap}
.ron-mins input{width:70px;background:var(--surface);border:1px solid rgba(245,182,66,.5);
color:var(--ink);border-radius:9px;padding:8px;font-family:var(--font);font-size:13px}
.ron-note{display:block;margin-top:9px;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:600px){
.room-open-now{flex-direction:column;align-items:stretch}
.room-open-now .btn{width:100%;justify-content:center}
.ron-mins{justify-content:space-between}
}
/* Shared files panel: sits under the video tile during a live
session. Hosts see an upload button and can drag files onto the
stage; members just see the download list. Kept `flex:none` so
the video keeps its full height and the file list grows the
page rather than squeezing the call. */
.room-attach{flex:none;position:relative;background:var(--surface);border:1px solid var(--line);
border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card)}
.ra-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
margin-bottom:10px}
.ra-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ra-h p{margin:2px 0 0;font-size:12.5px}
.ra-upload-form{flex:none}
.ra-pick{cursor:pointer;display:inline-flex;align-items:center;font-size:13px;
padding:9px 14px;border-radius:10px;font-weight:640}
.ra-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ra-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--line-2)}
.ra-item:hover{border-color:color-mix(in oklab, var(--accent) 30%, var(--line))}
.ra-icon{display:inline-flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:8px;flex:none;
color:var(--accent);
background:color-mix(in oklab, var(--accent) 10%, transparent);
border:1px solid color-mix(in oklab, var(--accent) 20%, transparent)}
.ra-name{flex:1;min-width:0;color:var(--ink);font-weight:640;font-size:13.5px;
text-decoration:none;overflow-wrap:anywhere}
.ra-name:hover{color:var(--accent);text-decoration:underline}
.ra-meta{color:var(--muted);font-size:12px;flex:none;text-align:right;overflow-wrap:anywhere}
.ra-remove{background:transparent;border:1px solid transparent;color:var(--muted);
width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;
justify-content:center;cursor:pointer;flex:none;transition:all .15s var(--ease)}
.ra-remove:hover{border-color:color-mix(in oklab, var(--danger) 40%, transparent);
color:var(--danger);background:color-mix(in oklab, var(--danger) 8%, transparent)}
.ra-empty{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
/* Drag-and-drop overlay: full-panel accent-tinted wash that fades in
when a file is dragged over the section, so hosts get a clear
"drop here" target during the split second between hovering and
releasing. */
.ra-drop{position:absolute;inset:0;border-radius:16px;pointer-events:none;
background:color-mix(in oklab, var(--accent) 12%, transparent);
border:2px dashed color-mix(in oklab, var(--accent) 55%, transparent);
display:flex;align-items:center;justify-content:center;
opacity:0;transition:opacity .15s var(--ease)}
.ra-drop.on{opacity:1}
.ra-drop-inner{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--accent);
font-weight:650;font-size:13px}
@media (max-width:640px){
.ra-item{flex-wrap:wrap}
.ra-meta{width:100%;text-align:left;margin-left:42px}
.ra-remove{margin-left:auto}
}
/* Closed panel: replaces the Jitsi stage with a schedule + countdown. */
.room-closed-panel{
display:grid;gap:22px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
margin-top:8px
}
/* Solo variant: nothing on the schedule. The hero spans the whole
panel and centres its content so the room page doesn't render
with a lonely, half-empty column on the right. */
.room-closed-panel.rcp-solo{grid-template-columns:1fr}
.room-closed-hero{
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border:1px solid var(--line);border-radius:16px;padding:32px 28px;
display:flex;flex-direction:column;gap:10px;min-height:280px;
box-shadow:var(--shadow-card)
}
/* Warmer "on standby" treatment for the empty state: soft accent
wash, centred content, breathing room. Feels like an invitation
rather than a grey "closed" sign. */
.room-closed-hero.rch-standby{
align-items:center;text-align:center;padding:44px 28px;gap:14px;
background:
radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 70%),
linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%)
}
.rc-illust{
display:inline-flex;align-items:center;justify-content:center;
width:80px;height:80px;border-radius:50%;
color:var(--accent);
background:color-mix(in oklab, var(--accent) 12%, transparent);
border:1px solid color-mix(in oklab, var(--accent) 24%, transparent);
margin-bottom:4px
}
.rc-lead{max-width:52ch;line-height:1.55}
.rc-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.rc-tag{
display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:999px;
border:1px solid var(--line);background:var(--surface-3);
font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--muted)
}
.rch-standby .rc-tag{align-self:auto}
.rc-tag.rc-soon{border-color:color-mix(in oklab, var(--gold) 45%, transparent);color:var(--gold);background:color-mix(in oklab, var(--gold) 12%, transparent)}
.rc-tag.rc-standby{border-color:color-mix(in oklab, var(--accent) 30%, transparent);color:var(--accent);background:color-mix(in oklab, var(--accent) 10%, transparent)}
.room-closed-hero h2{margin:6px 0 0 0;font-size:26px;letter-spacing:-.4px;color:var(--ink)}
.rc-countdown{
margin:12px 0 0 0;font-weight:800;font-size:22px;letter-spacing:-.3px;
color:var(--ink)
}
.rc-note{margin-top:auto;font-size:12px}
.room-upcoming{
background:var(--surface);border:1px solid var(--line);border-radius:16px;
padding:22px;display:flex;flex-direction:column;gap:14px;min-height:280px
}
.ru-h{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.ru-tz{font-weight:600;letter-spacing:.3px;text-transform:none;opacity:.75;margin-left:6px}
.ru-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ru-item{display:flex;gap:14px;padding:12px;border-radius:12px;
background:var(--surface-2);border:1px solid var(--line)}
.ru-day{
min-width:148px;color:var(--ink);font-weight:700;font-size:13px;
padding-top:1px
}
.ru-body{flex:1;min-width:0}
.ru-title{color:var(--ink);font-weight:600;font-size:14px}
.ru-host{color:var(--muted);font-size:12px;margin-top:2px}
.ru-badge{
display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;
padding:2px 6px;border-radius:6px;
background:var(--accent-soft);color:var(--accent-ink);margin-left:4px;vertical-align:1px
}
@container (max-width:700px){
.room-closed-panel{grid-template-columns:1fr}
.room-closed-hero{min-height:0;padding:24px 20px}
.room-upcoming{min-height:0}
.ru-day{min-width:0;margin-bottom:2px}
.ru-item{flex-direction:column;gap:2px}
}
@container (max-width:700px){
.room-page{padding:14px 16px 18px}
.room-head{flex-direction:column;align-items:flex-start;gap:14px}
.room-head-r{align-items:flex-start;width:100%}
.room-present{justify-content:flex-start;max-width:none}
.room-stage{min-height:60vh;border-radius:14px}
}
/* ============================================================
Mobile refinements — phone-first layout, 44px tap targets,
safe areas, bottom-sheet palette. Desktop chrome stays as-is.
============================================================ */
@media(max-width:600px){
.wrap{padding:0 16px}
.page-head{padding:20px 0 4px}
.wrap .panel{padding:18px}
.wrap .panel h2{font-size:17px}
.lesson-titlebar h1{font-size:20px}
.section-title{font-size:17px}
.progress{padding:9px 14px}
.dash{padding:18px 0 0;background:none}
.dash-greet h1{font-size:26px;letter-spacing:-.035em}
.dash-motto{font-size:13px;max-width:none}
.hub-grid{gap:14px;margin-top:16px}
.hub-main,.rail{gap:14px}
.card-head{padding:14px 16px 0}
.card-body{padding:12px 16px 16px}
.plan-hero{padding:18px 16px;border-radius:16px}
.plan-cta{flex-direction:column;align-items:stretch}
.plan-cta .btn{width:100%}
.plan-item{padding:10px 12px}
.corner-editorial{padding:20px 16px 18px;border-radius:16px}
.corner-e-body h2{font-size:22px}
.corner-e-foot{flex-direction:column;align-items:stretch;gap:14px}
.corner-e-actions{flex-direction:column;align-items:stretch}
.corner-e-actions .btn{width:100%;justify-content:center}
.pulse{max-width:100%;margin-top:10px}
.ev-hero-actions{flex-direction:column;align-items:stretch}
.ev-hero-actions .btn{width:100%;justify-content:center}
.ev-card{min-height:180px;padding:16px}
.ev-card-title b{font-size:20px}
.ev-card-rsvp{opacity:1;transform:none} /* always show — no hover on phones */
.hub-sec{margin:4px 0 0}
.tools-grid{gap:10px}
.tool-card{padding:14px 14px 14px 16px;min-height:64px}
.stat-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
gap:10px;margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none}
.stat-row::-webkit-scrollbar{display:none}
.stat-card{flex:0 0 min(78%,280px);scroll-snap-align:start}
.live-cta{opacity:1;transform:none;color:var(--accent)}
.footer{font-size:11.5px;padding:22px 16px max(28px,env(safe-area-inset-bottom))}
.member-grid{grid-template-columns:1fr;gap:10px}
.profile-hero{flex-direction:column;align-items:flex-start;gap:12px}
}
.pl-list{-webkit-overflow-scrolling:touch}
@media(hover:none){
.btn:active{filter:brightness(.94)}
.course-card:active,.tool-card:active,.member-card:active,.stat-card:active{transform:scale(.985)}
.mod-row:active,.pl-list li button:active{background:var(--surface-2)}
/* Disable hover-only lifts that look stuck on touch. */
.tool-card:hover,.stat-card:hover,.course-card:hover{transform:none}
}
.footer{padding-bottom:max(26px,env(safe-area-inset-bottom))}
@media(max-width:760px){
.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.chip{min-height:44px}
.pl-list li button{min-height:46px}
.lesson-back{display:inline-block;padding:8px 0;min-height:40px}
.see,.next-preview a,.crumb a{padding:2px 0}
.btn{padding:12px 20px;min-height:44px}
.pl-panel{max-height:60vh}
.appbar-search .kbd,.palette-head .kbd,.palette-hint{display:none}
.palette-backdrop{align-items:flex-end;padding:0;justify-content:stretch}
.palette{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
transform:translateY(12px)}
.palette-backdrop.open .palette{transform:none}
.palette-body{max-height:min(70vh,520px)}
.palette-item{padding:14px 18px;min-height:52px}
.notif-panel{top:calc(56px + env(safe-area-inset-top));right:12px;left:12px;width:auto}
}
/* Dark: drawer uses the same off-black canvas as the page. */
:root[data-theme="dark"] .sidebar{background:var(--bg)}
:root[data-theme="dark"] .mobilebar{border-bottom-color:var(--line)}
/* ============================================================
Community v2: channels, threads, notifications, members
============================================================ */
.comm{display:grid;grid-template-columns:210px minmax(0,1fr) 280px;gap:26px;
max-width:1200px;margin:0 auto;padding:26px 28px 60px}
.comm-left{position:sticky;top:26px;align-self:start}
.comm-left-head{font-size:11px;font-weight:660;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted-2);padding:0 10px 8px;border-bottom:1px solid var(--line-2);padding-bottom:8px;margin-bottom:6px}
.chan-list{display:flex;flex-direction:column;gap:2px}
.chan{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius-sm);
color:var(--muted);font-size:13.5px;font-weight:560;text-decoration:none;transition:.12s;border:1px solid transparent}
.chan svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;
padding:3px;border-radius:6px;background:var(--wash);box-sizing:content-box}
.chan span{flex:1;min-width:0}
.chan em{font-style:normal;font-size:11px;color:var(--muted-2);font-weight:560;
background:var(--wash);padding:1px 7px;border-radius:10px}
.chan:hover{color:var(--ink);background:var(--surface)}
.chan.active{background:var(--surface);color:var(--ink);font-weight:640;border-left:3px solid var(--accent);box-shadow:var(--shadow-sm)}
.chan.active svg{background:var(--accent-soft);stroke:var(--accent)}
.comm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.comm-head h1{font-size:clamp(24px,3.2vw,30px);letter-spacing:-.02em;margin-bottom:3px}
/* min-width must fit the longest placeholder ("Search by name or
location" on /members) in full: clipped placeholders break the
no-truncation rule. */
.comm-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hairline);
border-radius:10px;padding:9px 14px;box-shadow:var(--shadow-sm);min-width:280px}
.comm-search svg{width:15px;height:15px;fill:none;stroke:var(--muted-2);stroke-width:1.8;stroke-linecap:round}
.comm-search input{border:none;background:transparent;font-family:var(--font);font-size:14px;color:var(--ink);width:100%}
.comm-search input:focus{outline:none}
@container (max-width:420px){.comm-search{flex:1 1 100%;min-width:0}}
.chan-chips{display:none;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch}
.chan-chips .chip{text-decoration:none;flex:none;padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;
border:1px solid var(--line);background:var(--surface)}
.chan-chips .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.mention-pop{position:absolute;left:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--hairline);
border-radius:10px;box-shadow:var(--shadow-card);overflow:hidden;min-width:200px}
.mention-pop-float{position:absolute;top:auto;left:auto;z-index:85}
.mention-pop button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;
font-family:var(--font);font-size:13.5px;font-weight:560;color:var(--ink);cursor:pointer}
.mention-pop button:hover{background:var(--wash)}
.pcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:20px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s;position:relative}
.pcard:hover{box-shadow:var(--shadow-lift);border-color:var(--line)}
.pcard.pinned{border-color:rgba(47,109,246,.35);border-left:3px solid var(--accent)}
.pcard.flash{animation:pflash 1.6s ease-out}
@keyframes pflash{0%{box-shadow:0 0 0 3px rgba(47,109,246,.4)}100%{box-shadow:var(--shadow-sm)}}
.pin-flag{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-size:11.5px;font-weight:640;
letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.pin-flag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcard-head{display:flex;align-items:center;gap:12px}
.pcard-who{flex:1;min-width:0;display:flex;flex-direction:column}
.pcard-name-row{display:flex;align-items:center;gap:0}
.pcard-author{font-size:14.5px;font-weight:620;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.pcard-author:hover{color:var(--accent)}
.pcard-meta{color:var(--muted-2);font-size:12px;margin-top:1px}
.chip-link{color:var(--accent);text-decoration:none;font-weight:600}
.pcard-title{font-size:17px;font-weight:660;letter-spacing:-.015em;margin:14px 0 0}
.pcard-body{margin:10px 0 11px;white-space:pre-wrap;line-height:1.65;font-size:15px;color:var(--ink-2);overflow-wrap:break-word}
.pcard-body a{color:var(--accent);text-decoration:none}
.pcard-body a:hover{text-decoration:underline}
.mention{color:var(--accent);font-weight:620;background:rgba(47,109,246,.08);border-radius:5px;padding:1px 4px}
.pcard-img{display:block;margin:0 0 12px}
.pcard-img img{max-width:100%;max-height:380px;border-radius:var(--radius-sm);border:1px solid var(--hairline);box-shadow:var(--shadow-sm)}
.pcard-actions{display:flex;gap:18px}
.pcard-menu{position:relative}
.kebab{background:none;border:none;cursor:pointer;color:var(--muted-2);padding:6px;border-radius:8px;transition:.12s}
.kebab:hover{color:var(--ink);background:var(--wash)}
.kebab svg{width:17px;height:17px;fill:currentColor;stroke:none;display:block}
.menu-pop{display:none;position:absolute;right:0;top:100%;z-index:25;background:var(--surface);
border:1px solid var(--hairline);border-radius:11px;box-shadow:var(--shadow-card);overflow:hidden;min-width:150px}
.menu-pop.open{display:block}
.menu-pop button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 14px;
font-family:var(--font);font-size:13px;font-weight:560;color:var(--ink);cursor:pointer}
.menu-pop button:hover{background:var(--wash)}
.menu-pop button.danger{color:var(--danger)}
.cmt{display:flex;gap:11px;margin-bottom:14px;font-size:14px}
.cmt-main{flex:1;min-width:0}
.cmt-head{display:flex;align-items:baseline;gap:8px}
.cmt-author{font-size:13.5px;font-weight:620;color:var(--ink);text-decoration:none}
.cmt-author:hover{color:var(--accent)}
.cmt-body{color:var(--ink-2);margin-top:2px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
.cmt-body a{color:var(--accent);text-decoration:none}
.cmt-actions{display:flex;gap:14px;margin-top:5px}
.mini-act{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;
color:var(--muted-2);font-family:var(--font);font-size:12px;font-weight:600;
padding:3px 6px;border-radius:6px;transition:background .15s,color .15s}
.mini-act:hover{color:var(--ink);background:var(--wash)}
.mini-act.on{color:var(--accent)}
.mini-act svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini-act.on svg{fill:var(--accent);stroke:var(--accent)}
.cmt-child{margin:12px 0 0;border-left:2px solid var(--line-2);padding-left:14px;margin-left:14px}
.replying-to{background:var(--accent-soft);color:var(--accent-ink);padding:6px 12px;border-radius:var(--radius-sm);
font-size:12.5px;font-weight:560;margin-bottom:6px}
.replying-to button{background:none;border:none;color:var(--accent);font-size:12px;cursor:pointer;font-family:var(--font)}
.edit-box{margin:10px 0}
.edit-box textarea,.edit-box input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;
font-family:var(--font);font-size:14px;color:var(--ink);background:var(--surface);margin-bottom:8px}
.edit-box textarea:focus,.edit-box input:focus{outline:none;border-color:var(--accent)}
.edit-actions{display:flex;gap:8px}
.edit-actions .btn{padding:7px 16px;font-size:13px}
.load-more{display:block;margin:6px auto 0}
/* "3 new posts" from the live poll. Sticks to the top of the viewport
so it stays reachable when the news arrives while you're reading
further down, which is the case it exists for. */
.feed-new-pill{position:sticky;top:14px;z-index:5;display:block;margin:0 auto 12px;
font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;
padding:8px 18px;border-radius:999px;border:1px solid var(--accent);
background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);
transition:transform .15s var(--ease),opacity .15s}
.feed-new-pill:hover{transform:translateY(-1px)}
.pinned-wrap{margin-bottom:4px}
.comm-right{position:sticky;top:26px;align-self:start;display:flex;flex-direction:column;gap:14px}
.rail-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:18px 20px;box-shadow:var(--shadow-sm)}
.rail-card h3{font-size:14px;font-weight:660;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.leaders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.leaders li{display:flex;align-items:center;gap:9px}
.leaders .rank{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:var(--muted-2);background:var(--wash);flex:none}
.leaders li:nth-child(1) .rank{background:var(--gold);color:#fff}
.leaders li:nth-child(2) .rank{background:var(--muted-2);color:#fff}
.leaders li:nth-child(3) .rank{background:#cd7f32;color:#fff}
.leader-link{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.leader-link b{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.leaders em{font-style:normal;font-size:11px;color:var(--muted-2);font-weight:600;flex:none;
background:var(--wash);padding:2px 8px;border-radius:10px}
.newbies{display:flex;flex-direction:column;gap:10px}
.newbie{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.newbie span{display:flex;flex-direction:column;min-width:0}
.newbie b{font-size:13px;font-weight:600}
.newbie i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.rail-more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:640;color:var(--accent);text-decoration:none}
.rail-more:hover{text-decoration:underline}
.rail-tip{background:var(--surface-2);border:1px dashed var(--line)}
.rail-tip p{font-size:12.5px;line-height:1.55}
img.avatar{object-fit:cover;box-shadow:0 1px 2px rgba(24,24,29,.15)}
.avatar.lg{width:64px;height:64px;font-size:24px}
.avatar.xl{width:88px;height:88px;font-size:32px}
/* notifications */
.bell{position:relative;background:none;border:none;cursor:pointer;color:var(--ink-2);padding:0;
width:42px;height:42px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.bell-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:9px;background:var(--danger);
color:#fff;font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.notif-panel{position:fixed;z-index:80;top:60px;right:16px;width:min(380px,calc(100vw - 32px));
background:var(--surface);border:1px solid var(--hairline);border-radius:14px;
box-shadow:var(--shadow-pop);overflow:hidden}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--hairline)}
.notif-head b{font-size:14px}
.notif-push{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 12px;
font-family:var(--font);font-size:12px;font-weight:620;cursor:pointer}
.notif-push:disabled{opacity:.6;cursor:progress}
.notif-push.is-blocked{background:transparent;color:var(--muted);border:1px solid var(--hairline);cursor:default}
.notif-push-note{margin:0;padding:8px 16px 10px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--hairline);line-height:1.4}
.notif-push-note.is-error{color:#a11}
.notif-push-note.is-ok{color:#137a37}
.notif-push-note a{color:inherit;text-decoration:underline}
/* -------- Account notification preferences --------
Stack of switches, one per event and one per channel. Each row
is a label wrapping a checkbox and a two-line title/description
block so the whole row is a click target. Channel groups get a
quiet ecosystem heading so long lists stay legible on a phone. */
.notif-events{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.notif-channels{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.notif-channel-group{margin-top:14px}
.notif-eco-name{font-size:13px;font-weight:620;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 6px}
.notif-row{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background .12s}
.notif-row:hover{background:var(--surface-2)}
.notif-row input[type="checkbox"]{width:18px;height:18px;margin:2px 0 0;flex:none;cursor:pointer;accent-color:var(--accent)}
.notif-row-locked{cursor:default;opacity:.75}
.notif-row-locked:hover{background:transparent}
.notif-row-locked input[type="checkbox"]{cursor:default}
.notif-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.notif-title{font-size:14px;font-weight:600;line-height:1.35}
.notif-desc{font-size:12px;line-height:1.4}
/* -------- Bug report widget --------
Floating button bottom-right on every logged-in desktop page.
Above notifications (z:80) so it always draws on top; below toasts
(z:90) so a save confirmation still wins. Turns into a compact
panel when opened, keyboard-focus-trapped by the JS, and hides
itself entirely in the phone web view (embeddedInApp gates the
markup). */
/* Pill FAB. The icon-only version launched with the bug widget
proved unnoticed -- one member asked in chat how to report bugs
without ever seeing the button. A visible label ("Report a bug")
costs one line of extra width and lifts discoverability without a
tour. Circular icon-only stays as the fallback below 640px, where
even a modest label would eat too much of a phone's chrome. */
.bugw-fab{position:fixed;right:20px;bottom:20px;z-index:82;
height:44px;padding:0 16px 0 12px;border-radius:22px;border:none;cursor:pointer;
background:var(--accent);color:#fff;box-shadow:var(--shadow-pop);
display:inline-flex;align-items:center;gap:8px;
font:600 13px/1 var(--font);letter-spacing:.005em;
transition:transform .12s ease,box-shadow .12s ease}
.bugw-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.bugw-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bugw-fab svg{width:20px;height:20px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bugw-fab-text{white-space:nowrap}
.bugw-panel{position:fixed;right:20px;bottom:84px;z-index:82;
width:min(360px,calc(100vw - 32px));
background:var(--surface);border:1px solid var(--hairline);border-radius:14px;
box-shadow:var(--shadow-pop);overflow:hidden;display:flex;flex-direction:column}
.bugw-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--hairline)}
.bugw-head b{font-size:14px}
.bugw-close{background:none;border:none;font-size:22px;line-height:1;padding:0 4px;cursor:pointer;color:var(--muted)}
.bugw-close:hover{color:var(--ink)}
.bugw-form{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.bugw-label{font-size:12.5px;font-weight:600;color:var(--ink)}
.bugw-body{font-family:var(--font);font-size:13.5px;padding:10px 12px;border:1px solid var(--hairline);border-radius:8px;
background:var(--surface-2);color:var(--ink);resize:vertical;min-height:110px;line-height:1.4}
.bugw-body:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* Small "attaching this page: /replays/foo" line above the send
button. Filled by app.js at open-time from location.pathname, so
the member can see we already know what page they were on rather
than being asked. Keep it visually low-key: this is a receipt of
what we're capturing, not something they need to interact with. */
.bugw-context{margin:0;font-size:11.5px;line-height:1.4;display:flex;align-items:center;gap:6px;
padding:6px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);
overflow-wrap:anywhere}
.bugw-context svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;fill:none;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.bugw-context b{color:var(--ink);font-weight:620}
.bugw-status{margin:0;padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.4}
.bugw-status.is-ok{background:rgba(19,122,55,.08);color:#137a37}
.bugw-status.is-error{background:rgba(170,17,17,.08);color:#a11}
.bugw-actions{display:flex;justify-content:flex-end}
.bugw-send{min-width:96px}
.bugw-send:disabled{opacity:.6;cursor:progress}
@media (max-width:600px){
/* On phones the pill's label would push against the sidebar
open-tab, so shrink back to the original round icon. Hover
tooltip carries the label on the rare desktop-in-narrow case. */
.bugw-fab{right:14px;bottom:14px;width:44px;height:44px;padding:0;border-radius:50%;justify-content:center}
.bugw-fab-text{display:none}
.bugw-panel{right:14px;left:14px;bottom:66px;width:auto}
}
/* The AI Advisor's composer sits at the bottom of the viewport on
mobile, and the FAB's default 14px bottom offset put it right on
top of the send arrow (a member (Sara) reported it covering the
send button). Measured on iPhone 12 (390x844): the composer bar
spans y=697-766, so the FAB (44px tall) needs its bottom edge at
least ~150px from the viewport floor to clear it with a visible
gap. 160px gives ~10px of air. The opened panel adds another
~52px (fab height plus its own margin) so it too clears the
composer when a member taps to write a report from this page. */
@media (max-width:900px){
body.page-ai .bugw-fab{bottom:160px}
body.page-ai .bugw-panel{bottom:214px}
}
/* Bug widget: screenshot picker + preview.
Sara also asked how to attach a screenshot, so the panel gained
an "attach" button that opens the OS file picker (and paste from
the clipboard also works, handled in app.js). Both put a small
preview here with a remove control so the member can see what
they're about to send. Kept visually secondary to the textarea:
this is optional context, not the main input. */
.bugw-attach-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bugw-attach-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;
background:var(--surface-2);border:1px dashed var(--hairline);border-radius:8px;
color:var(--ink-2);font:600 12px/1 var(--font);cursor:pointer;transition:.12s}
.bugw-attach-btn:hover{border-color:var(--accent);color:var(--accent)}
.bugw-attach-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.bugw-attach-hint{font-size:11.5px;color:var(--muted);line-height:1.3}
.bugw-attach-file{display:none}
.bugw-preview{position:relative;margin:0;padding:6px;border-radius:8px;
background:var(--surface-2);border:1px solid var(--hairline);
display:flex;align-items:flex-start;gap:10px}
.bugw-preview[hidden]{display:none}
.bugw-preview-img{max-width:100%;max-height:160px;border-radius:5px;display:block}
.bugw-preview-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;padding:0;
border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center}
.bugw-preview-remove:hover{background:rgba(0,0,0,.75)}
.bugw-preview-meta{flex:1;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.35;
overflow-wrap:anywhere}
.bugw-preview-name{color:var(--ink);font-weight:600}
/* Bug attachment when rendered inside a DM thread. Keeps the image
modest so a full-page screenshot doesn't dominate the conversation,
but still lets an admin click through to the full-size file. */
.msg-attach{display:block;margin-top:8px;max-width:min(420px,100%)}
.msg-attach img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--hairline);
display:block;background:var(--surface-2)}
.msg-attach:hover img{border-color:var(--accent)}
.notif-list{max-height:min(420px,60vh);overflow-y:auto}
.notif-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 16px;
text-decoration:none;color:var(--ink);font-size:13.5px;border-bottom:1px solid var(--line-2)}
.notif-item:hover{background:var(--surface-2)}
.notif-item.unread{background:var(--accent-soft);font-weight:600}
.notif-item em{font-style:normal;color:var(--muted-2);font-size:11.5px;flex:none}
.notif-empty{padding:22px 16px;font-size:13px}
/* Desktop: hangs under the appbar bell (roughly aligned right). */
@media (min-width:961px){.notif-panel{top:60px;right:32px;bottom:auto;left:auto}}
/* toast */
.toast{position:fixed;z-index:90;left:50%;bottom:28px;transform:translate(-50%,16px);opacity:0;
background:var(--ink);color:#fff;font-size:13.5px;font-weight:560;border-radius:11px;padding:11px 20px;
box-shadow:0 10px 30px rgba(24,24,29,.3);transition:.25s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
/* members directory + profile */
.members-wrap{max-width:1000px;padding-top:26px}
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.member-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:box-shadow .2s;
display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.member-card:hover{box-shadow:var(--shadow-card)}
.member-card b{font-size:15px;font-weight:640;letter-spacing:-.01em;margin-top:6px}
.member-loc{color:var(--muted);font-size:12.5px}
.member-card p{color:var(--muted);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.member-foot{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding-top:10px;font-size:11.5px;color:var(--muted-2)}
.member-foot em{font-style:normal;color:var(--accent);font-weight:640}
.profile-wrap{max-width:680px;padding-top:26px}
.back-link{color:var(--muted);text-decoration:none;font-size:13px;font-weight:560}
.back-link:hover{color:var(--ink)}
.profile-hero{display:flex;gap:20px;align-items:center;margin:18px 0}
/* Staff-only "Message" button. margin-left:auto parks it on the far
side of the hero; on the narrow layout above, the hero turns into a
column and it simply falls under the name. */
.profile-actions{margin-left:auto;display:flex;gap:8px}
.profile-meta h1{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em}
.profile-stats{display:flex;gap:18px;margin-top:8px;font-size:13px;color:var(--muted)}
.profile-stats b{color:var(--ink)}
.profile-bio{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:16px 18px;font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:20px;white-space:pre-wrap}
.profile-sub{font-size:17px;font-weight:660;letter-spacing:-.015em;margin:22px 0 12px;
display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.profile-sub-scope{font-size:13px;font-weight:500;color:var(--muted)}
.profile-sub-count{font-size:12px;font-weight:650;color:var(--muted);
background:var(--surface-3);border-radius:999px;padding:2px 9px;letter-spacing:.02em}
/* admin moderation */
.report-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
padding:12px 0;border-bottom:1px solid var(--line-2)}
.report-row:last-of-type{border-bottom:none}
.report-main{font-size:13.5px;min-width:0}
.report-main a{color:var(--accent)}
.report-excerpt{font-size:12.5px;margin-top:4px;overflow-wrap:break-word}
.report-actions{display:flex;gap:8px;flex:none}
.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 13px;
font-family:var(--font);font-size:14px;color:var(--ink);background:var(--surface);resize:vertical}
.field textarea:focus{outline:none;border-color:var(--accent)}
/* responsive */
@container (max-width:900px){
.comm{grid-template-columns:200px minmax(0,1fr)}
.comm-right{display:none}
}
@container (max-width:640px){
.comm{display:block;padding:16px 16px max(80px,env(safe-area-inset-bottom))}
.comm-left{display:none}
.chan-chips{display:flex;padding-bottom:8px;margin:0 -16px 14px;padding-left:16px;padding-right:16px}
.composer{padding:12px}
.composer-row>.avatar{display:none}
.composer .btn{min-height:44px}
.post{padding:16px}
.pcard{padding:18px 18px}
}
/* ============================================================
LIGHT-MODE COMPONENT POLISH
Same layout and palette — just more tactile: inset highlights,
better hover, clearer hierarchy. Dark mode is a different
visual language (V3 premium) so these stay scoped.
============================================================ */
:root:not([data-theme="dark"]){--focus-ring:0 0 0 3px rgba(47,109,246,.22)}
:root:not([data-theme="dark"]) a:focus-visible,
:root:not([data-theme="dark"]) button:focus-visible,
:root:not([data-theme="dark"]) input:focus-visible,
:root:not([data-theme="dark"]) textarea:focus-visible,
:root:not([data-theme="dark"]) select:focus-visible,
:root:not([data-theme="dark"]) [tabindex]:focus-visible{
outline:none;box-shadow:var(--focus-ring)
}
/* Surfaces — 1px inset highlight so cards read as paper, not flat fills. */
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .stat-card,
:root:not([data-theme="dark"]) .tool-card,
:root:not([data-theme="dark"]) .credit-card,
:root:not([data-theme="dark"]) .rank-card,
:root:not([data-theme="dark"]) .course-card,
:root:not([data-theme="dark"]) .member-card,
:root:not([data-theme="dark"]) .login-card{
box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.92)
}
:root:not([data-theme="dark"]) .card:hover,
:root:not([data-theme="dark"]) .member-card:hover{
border-color:rgba(24,24,29,.10)
}
/* Primary CTAs — layered inset + colored drop shadow. */
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .btn-blue,
:root:not([data-theme="dark"]) .btn-orange{
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
0 1px 2px rgba(47,109,246,.35),
0 6px 16px -6px rgba(47,109,246,.5)
}
:root:not([data-theme="dark"]) .btn-primary:hover,
:root:not([data-theme="dark"]) .btn-blue:hover,
:root:not([data-theme="dark"]) .btn-orange:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
0 4px 12px rgba(47,109,246,.4),
0 12px 28px -8px rgba(47,109,246,.5)
}
:root:not([data-theme="dark"]) .btn-primary:active,
:root:not([data-theme="dark"]) .btn-blue:active,
:root:not([data-theme="dark"]) .btn-orange:active{
box-shadow:inset 0 2px 4px rgba(24,24,29,.2),0 1px 2px rgba(47,109,246,.3)
}
/* Section titles — slim accent tick. */
:root:not([data-theme="dark"]) .section-title,
:root:not([data-theme="dark"]) .hub-sec h2{position:relative;padding-left:14px}
:root:not([data-theme="dark"]) .section-title::before,
:root:not([data-theme="dark"]) .hub-sec h2::before{
content:"";position:absolute;left:0;top:.58em;width:4px;height:.8em;border-radius:2px;
background:linear-gradient(180deg,var(--accent-hi),var(--accent))
}
/* Rail card headings sit on a divider. */
:root:not([data-theme="dark"]) .card-head{
padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:2px
}
:root:not([data-theme="dark"]) .card-body{padding-top:12px}
/* Stat cards: brighter accent bar at rest. */
:root:not([data-theme="dark"]) .stat-card::before{height:3px;opacity:.75}
:root:not([data-theme="dark"]) .stat-card:hover::before{opacity:1;height:4px}
:root:not([data-theme="dark"]) .stat-card:hover{border-color:color-mix(in srgb,var(--tone,var(--line)) 45%,var(--line))}
/* Tool tiles — accent rail always visible. */
:root:not([data-theme="dark"]) .tool-card::before{opacity:.55;width:3px}
/* Quote under welcome — editorial left rule. */
:root:not([data-theme="dark"]) .dash-motto{margin-top:8px;padding-left:14px;border-left:2px solid var(--line)}
/* Plan hero glow. */
:root:not([data-theme="dark"]) .plan-hero{box-shadow:0 20px 48px -20px rgba(47,109,246,.5),0 1px 2px rgba(4,12,35,.15)}
/* Pulse ribbon. */
:root:not([data-theme="dark"]) .pulse{background:linear-gradient(180deg,#fff,var(--surface-2));border-color:var(--line-2)}
/* This-week rows — details link nudges on hover. */
:root:not([data-theme="dark"]) .live-row .live-cta{transition:opacity .15s var(--ease),color .15s var(--ease),transform .18s var(--ease)}
:root:not([data-theme="dark"]) .live-row:hover .live-cta{transform:translateX(2px)}
/* Sidebar active pill — accent rail. */
:root:not([data-theme="dark"]) .sb-link.active{
box-shadow:var(--shadow-sm),inset 3px 0 0 var(--accent)
}
/* Appbar search — slightly more present. */
:root:not([data-theme="dark"]) .appbar-search{
box-shadow:var(--shadow-sm);background:#fff
}
:root:not([data-theme="dark"]) .appbar-search:hover{
box-shadow:var(--shadow-card);border-color:var(--line)
}
/* Course cards — thumb zoom already exists; add a soft lift + inset. */
:root:not([data-theme="dark"]) .course-card:hover{
box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.92)
}
/* Member cards. */
:root:not([data-theme="dark"]) .member-card{
transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)
}
:root:not([data-theme="dark"]) .member-card:hover{
transform:translateY(-2px);box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.92)
}
/* Mini community posts — hover wash. */
:root:not([data-theme="dark"]) .mini-post{border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px}
:root:not([data-theme="dark"]) .mini-post:hover{background:var(--surface-2)}
/* Inputs. */
:root:not([data-theme="dark"]) .field input,
:root:not([data-theme="dark"]) .field textarea{
box-shadow:inset 0 1px 2px rgba(24,24,29,.04)
}
:root:not([data-theme="dark"]) .field input:focus,
:root:not([data-theme="dark"]) .field textarea:focus{
border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(47,109,246,.14)
}
/* Rank / credit tracks a little taller so they read as meters. */
:root:not([data-theme="dark"]) .rank-track,
:root:not([data-theme="dark"]) .credit-track{height:7px}
/* Continue-learning + event heroes: a hair more lift on hover. */
:root:not([data-theme="dark"]) .cont-cine:hover,
:root:not([data-theme="dark"]) .ev-hero:hover,
:root:not([data-theme="dark"]) .corner-editorial:hover{
box-shadow:var(--shadow-lift)
}
/* ============================================================
Direct Messages
============================================================ */
.msg-wrap{width:100%;max-width:1240px;margin:0 auto;padding:26px 28px 60px}
.msg-list-view{max-width:760px;margin:0 auto}
.msg-list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.msg-list-head h1{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin-bottom:3px}
.msg-filter-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line-2);padding-bottom:0}
.msg-tab{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.msg-tab:hover{color:var(--ink)}
.msg-tab.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:660}
.msg-tab-count{background:var(--danger);color:#fff;font-size:11px;font-weight:700;
padding:1px 7px;border-radius:10px;margin-left:4px}
/* Small chip in front of a subject line to mark what kind of thread
it is. Right now only bug reports carry one, so the row can be
scanned as a bug at a glance even from the mixed Open tab. */
.msg-kind-chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;padding:2px 6px;border-radius:4px;vertical-align:1px;margin-right:2px}
.msg-kind-chip.bug{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.msg-thread-list{display:flex;flex-direction:column;gap:2px}
.msg-thread-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:14px 16px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);
border:1px solid var(--hairline);background:var(--surface);transition:box-shadow .15s,border-color .15s}
.msg-thread-row:hover{box-shadow:var(--shadow-card);border-color:var(--line)}
.msg-thread-row.active{background:var(--accent-soft);border-color:var(--accent)}
.msg-thread-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.msg-thread-right{display:flex;align-items:center;gap:10px;flex:none}
.msg-thread-subject{font-size:14px;font-weight:620;letter-spacing:-.01em}
.msg-thread-preview{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4;max-width:520px;overflow-wrap:anywhere}
.msg-thread-date{font-size:12px;color:var(--muted-2);white-space:nowrap}
.msg-thread-meta{font-size:11.5px;color:var(--muted-2)}
.msg-unread-dot,.msg-awaiting-dot{width:8px;height:8px;border-radius:50%;flex:none}
.msg-unread-dot{background:var(--accent)}
.msg-awaiting-dot{background:var(--gold)}
.msg-resolved-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:4px}
.msg-status{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
padding:2px 8px;border-radius:10px}
.msg-status.open{background:var(--accent-soft);color:var(--accent-ink)}
.msg-status.resolved{background:var(--success-soft);color:var(--success)}
.msg-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.msg-badge.awaiting{background:var(--gold-soft);color:#8a5a05}
.msg-badge.replied{background:var(--success-soft);color:var(--success)}
.msg-member-name{font-size:13.5px;font-weight:660}
/* "Support" marker on member-side list rows: quiet, states the
recipient so threads read as conversations with the team. */
.msg-to-mini{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted-2);background:var(--wash);border-radius:8px;padding:2px 8px}
.msg-empty{text-align:center;padding:52px 24px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.msg-empty h3{margin-bottom:6px}
.msg-new-form{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-card)}
/* Fixed recipient row: members always see where the message lands. */
.msg-to-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.msg-to-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.msg-to-chip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-ink);
border:1px solid rgba(47,109,246,.18);border-radius:20px;padding:5px 13px;font-size:13px;font-weight:620}
.msg-to-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.msg-subject-input{width:100%;border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--radius-sm);
padding:10px 14px;font-family:var(--font);font-size:14px;font-weight:620;color:var(--ink);
margin-bottom:10px;letter-spacing:-.01em}
.msg-subject-input:focus{outline:none;border-color:var(--accent)}
.msg-new-form textarea{width:100%;border:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--radius-sm);
padding:10px 14px;font-family:var(--font);font-size:14px;color:var(--ink);resize:vertical;min-height:80px}
.msg-new-form textarea:focus{outline:none;border-color:var(--accent)}
/* Staff typing who to write to. Sits where the member's fixed support
chip goes, so both compose forms read the same down the page. The
wrapper is the positioning context for the suggestion list. */
.msg-to-pick{position:relative;flex:1;min-width:0}
.msg-to-input{width:100%;border:1px solid var(--line-2);background:var(--surface-2);
border-radius:20px;padding:6px 13px;font-family:var(--font);font-size:13px;
font-weight:620;color:var(--ink)}
.msg-to-input:focus{outline:none;border-color:var(--accent)}
/* Floats over the fields below instead of shoving them down the page
as you type. */
.msg-to-pop{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;
max-height:260px;overflow-y:auto;background:var(--surface);
border:1px solid var(--line-2);border-radius:var(--radius-sm);
box-shadow:0 10px 30px rgba(0,0,0,.18)}
.msg-to-opt{display:flex;flex-direction:column;gap:1px;width:100%;
padding:8px 13px;background:none;border:0;text-align:left;cursor:pointer;font-family:var(--font)}
.msg-to-opt:hover,.msg-to-opt.active{background:var(--accent-soft)}
.msg-to-opt-name{font-size:13.5px;font-weight:650;color:var(--ink)}
.msg-to-opt-mail{font-size:11.5px;color:var(--muted-2)}
.msg-to-none{padding:10px 13px;font-size:13px;color:var(--muted-2)}
.msg-new-bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px}
/* Pushed left so it reads as a note about the form, not a button label. */
.msg-new-note{margin-right:auto;font-size:12px;color:var(--muted-2)}
/* Why the picker cannot help you: wrong ecosystem, or an empty one. */
.msg-to-warn{margin:0 0 10px;font-size:13px;color:var(--gold,#f5b642)}
/* ---- Conversation: full-height two-pane inbox (Intercom pattern).
One surface card fills the workspace; thread rail scrolls on the
left, the conversation pane stacks header / scrolling messages /
pinned composer on the right. ---- */
.msgapp{display:grid;grid-template-columns:300px minmax(0,1fr);
background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
box-shadow:var(--shadow-card);overflow:hidden;
height:calc(100vh - 170px);min-height:520px;max-height:900px}
.msgapp-rail{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line-2);background:var(--surface-2)}
.msgapp-rail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--line-2)}
.msgapp-rail-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:680;
letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.msgapp-rail-title svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.msgapp-new{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;transition:.15s}
.msgapp-new:hover{background:var(--accent-ink)}
.msgapp-new svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.msgapp-rail-list{flex:1;overflow-y:auto;padding:8px}
.msgapp-row{position:relative;display:block;padding:11px 12px 11px 14px;border-radius:10px;
text-decoration:none;color:var(--ink);transition:background .12s}
.msgapp-row:hover{background:var(--wash)}
.msgapp-row.active{background:var(--accent-soft)}
.msgapp-row.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
border-radius:2px;background:var(--accent)}
.msgapp-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.msgapp-row-top b{font-size:13.5px;font-weight:640;letter-spacing:-.01em;line-height:1.35;
flex:1;min-width:0;overflow-wrap:anywhere}
.msgapp-row-top time{font-size:11px;color:var(--muted-2);flex:none}
.msgapp-row-who{display:block;font-size:12px;font-weight:600;color:var(--accent-ink);margin-top:1px}
.msgapp-row-preview{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px;overflow-wrap:anywhere}
.msgapp-row-flags{position:absolute;right:12px;bottom:12px;display:flex;gap:5px;align-items:center}
.msgapp-convo{display:flex;flex-direction:column;min-height:0;min-width:0}
.msgapp-head{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line-2)}
.msgapp-back{display:none;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
border-radius:8px;color:var(--ink-2);text-decoration:none}
.msgapp-back:hover{background:var(--wash)}
.msgapp-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.msgapp-head-main{flex:1;min-width:0}
.msgapp-head-main h2{font-size:17px;font-weight:680;letter-spacing:-.015em;line-height:1.3;overflow-wrap:anywhere}
.msgapp-with{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);
margin-top:2px;text-decoration:none}
a.msgapp-with:hover{color:var(--accent-ink)}
.msgapp-head-actions{display:flex;align-items:center;gap:10px;flex:none}
.msgapp-scroll{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.msgrow{display:flex;gap:12px}
.msgrow.grouped{margin-top:-8px}
.msgrow-gutter{flex:none;width:28px}
.msgrow-main{flex:1;min-width:0}
.msgrow-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.msgrow-meta b{font-size:13.5px;font-weight:660;color:var(--ink);letter-spacing:-.01em}
.msgrow-meta time{font-size:11.5px;color:var(--muted-2);white-space:nowrap}
.msgrow-body{font-size:14.5px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;
background:var(--surface-2);border:1px solid var(--line-2);border-radius:4px 12px 12px 12px;
padding:10px 14px;width:fit-content;max-width:100%}
.msgrow.grouped .msgrow-body{border-radius:12px}
.msgrow.mine .msgrow-body{background:var(--accent-soft);border-color:rgba(47,109,246,.15);color:var(--ink)}
.msgapp-composer{padding:14px 22px 18px;border-top:1px solid var(--line-2)}
.msgapp-well{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;
transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.msgapp-well:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.msgapp-well textarea{display:block;width:100%;background:transparent;border:none;resize:none;
min-height:52px;max-height:200px;font-family:var(--font);font-size:14.5px;line-height:1.55;
color:var(--ink);padding:12px 16px 4px}
.msgapp-well textarea:focus{outline:none}
.msgapp-well-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px 8px 16px}
.msgapp-hint{font-size:11.5px;color:var(--muted-2)}
.msgapp-well-bar .btn{padding:7px 20px}
.msgapp-closed{padding:16px 22px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--muted);
background:var(--surface-2)}
@container (max-width:700px){
.msg-wrap{padding:12px 12px 40px}
.msgapp{grid-template-columns:1fr;height:calc(100dvh - 130px);max-height:none;border-radius:12px}
.msgapp-rail{display:none}
.msgapp-back{display:inline-flex}
.msgapp-head{padding:12px 14px}
.msgapp-scroll{padding:16px 14px}
.msgapp-composer{padding:10px 12px 14px}
.msgapp-hint{display:none}
}
/* ============================================================
Call Replays
============================================================ */
.replays-wrap{width:100%;max-width:1240px;margin:0 auto;padding:26px 28px 60px}
.replays-head{margin-bottom:16px}
.replays-head h1{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin-bottom:3px}
.replays-filters{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.replays-filters .chip{text-decoration:none;flex:none;padding:7px 16px;border-radius:20px;font-size:13px;
font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:.15s}
.replays-filters .chip:hover{color:var(--ink);border-color:var(--line)}
.replays-filters .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.replays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.replay-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .2s,border-color .2s}
.replay-card:hover{box-shadow:var(--shadow-lift);border-color:var(--line)}
.replay-thumb{position:relative;background:var(--surface-3);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.replay-play{width:48px;height:48px;fill:var(--accent);opacity:.7;transition:opacity .2s}
.replay-card:hover .replay-play{opacity:1}
.replay-dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;
font-size:11.5px;font-weight:640;padding:2px 8px;border-radius:6px}
.replay-info{padding:14px 16px}
.replay-info h3{font-size:15px;font-weight:640;letter-spacing:-.01em;margin-bottom:6px;line-height:1.35}
.replay-meta{display:flex;gap:8px;font-size:12px;color:var(--muted-2);align-items:center}
.replay-type{text-transform:capitalize;font-weight:620;color:var(--muted)}
/* Marks a replay from a private room. Everyone who can see the card is
already in its audience, so this is a reminder, not a lock. */
.replay-private{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;
border:1px solid var(--line);border-radius:999px;font-weight:620;
color:var(--m-accent,var(--accent))}
.replay-private::before{content:"";width:5px;height:5px;border-radius:50%;
background:currentColor}
.replay-desc{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.replays-empty{text-align:center;padding:52px 24px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.replays-empty h3{margin-bottom:6px}
/* single replay page */
.replay-wrap{width:100%;max-width:1240px;margin:0 auto;padding:26px 28px 60px}
.replay-back{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:620;
color:var(--accent);text-decoration:none;margin-bottom:16px}
.replay-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.replay-player{margin-bottom:24px;position:relative}
.replay-video{width:100%;border-radius:var(--radius);background:#000;display:block}
.replay-no-video{background:var(--surface-3);border-radius:var(--radius);padding:60px 24px;text-align:center;color:var(--muted)}
.replay-detail{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}
.replay-detail-main{max-width:760px}
.replay-detail-main h1{font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin-bottom:8px}
.replay-detail-meta{display:flex;gap:10px;font-size:13px;color:var(--muted-2);margin-bottom:16px;flex-wrap:wrap}
.replay-detail-desc{font-size:15px;line-height:1.65;color:var(--ink-2);margin-bottom:20px}
.replay-summary{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 20px}
.replay-summary h3{font-size:14px;font-weight:660;margin-bottom:10px}
.replay-summary-body{font-size:14px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap}
/* Files shared in the Room during this session, handed to the replay when
the recording finished. */
.replay-files{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);
padding:18px 20px;margin-top:14px}
.replay-files h3{font-size:14px;font-weight:660;margin-bottom:10px}
/* Collapsible full transcript under the AI summary. */
.replay-transcript{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);margin-top:14px}
.replay-transcript summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
padding:14px 20px;font-size:14px;font-weight:660;user-select:none}
.replay-transcript summary::-webkit-details-marker{display:none}
.replay-transcript summary::after{content:"";width:8px;height:8px;flex:none;margin-left:auto;
border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:rotate(45deg);transition:transform .15s}
.replay-transcript[open] summary::after{transform:rotate(-135deg)}
.replay-transcript-body{padding:0 20px 18px;font-size:13.5px;line-height:1.7;color:var(--ink-2);
white-space:pre-wrap;max-height:480px;overflow-y:auto}
.replay-transcript-pending{margin-top:14px;font-size:13px;color:var(--muted);
display:flex;align-items:center;gap:8px}
.replay-transcript-pending .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
box-shadow:0 0 0 0 rgba(59,130,246,.5);animation:sb-room-pulse 1.8s var(--ease) infinite}
.replay-chapters{position:sticky;top:26px;align-self:start}
.replay-chapters h3{font-size:14px;font-weight:660;margin-bottom:10px}
.chapter-list{display:flex;flex-direction:column;gap:4px}
.chapter-item{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border:none;background:none;
cursor:pointer;border-radius:var(--radius-sm);text-align:left;font-family:var(--font);transition:background .15s;width:100%}
.chapter-item:hover{background:var(--wash)}
.chapter-time{font-size:12px;font-weight:640;color:var(--accent);font-variant-numeric:tabular-nums;flex:none;width:42px}
.chapter-title{font-size:13px;color:var(--ink-2)}
@container (max-width:580px){
.replays-grid{grid-template-columns:1fr}
.replay-detail{grid-template-columns:1fr}
.replay-chapters{position:static}
}
/* ============================================================
Button variants
============================================================ */
.btn-accent{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:620;
padding:9px 22px;font-family:var(--font);font-size:13.5px;cursor:pointer;transition:background .15s}
.btn-accent:hover{background:var(--accent-lo)}
.btn-sm{padding:6px 14px;font-size:12.5px}
/* ============================================================
Modal
============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(24,24,29,.5);backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--surface);border-radius:var(--radius);padding:28px 30px;
max-width:480px;width:100%;box-shadow:var(--shadow-lift);max-height:90vh;overflow-y:auto}
.modal-card h2{font-size:20px;font-weight:660;letter-spacing:-.02em;margin-bottom:18px}
.modal-field{margin-bottom:14px}
.modal-field label{display:block;font-size:12px;font-weight:640;color:var(--muted);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.modal-field input,.modal-field textarea{width:100%;border:1px solid var(--line-2);background:var(--surface-2);
border-radius:var(--radius-sm);padding:10px 14px;font-family:var(--font);font-size:14px;color:var(--ink);resize:vertical}
.modal-field input:focus,.modal-field textarea:focus{outline:none;border-color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-actions-inline{display:flex;gap:10px;margin-top:14px}
.modal-feedback{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
/* ---- Solutions Library ---- */
.sol-wrap{max-width:1280px}
.sol-head{padding:28px 0 4px}
.sol-head h1{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.03em}
.sol-sub{color:var(--muted);font-size:14.5px;max-width:520px;margin-top:6px;line-height:1.55}
/* The colored squares ARE the cards: bright gradient tiles sitting
directly on the page. Page headers stay plain; no banner backgrounds
behind the grids. --hue-text drives accents in the detail prose. */
.sol-detail-hero,.sol-detail-body{--hue-text:var(--g2)}
:root[data-theme="dark"] .sol-detail-hero,
:root[data-theme="dark"] .sol-detail-body{--hue-text:var(--g1)}
/* Level 1: family overview, one bright card per family */
.solfam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding:18px 0 60px}
.solfam-card{display:flex;flex-direction:column;gap:12px;border-radius:18px;padding:22px;
color:#fff;text-decoration:none;position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--g1),var(--g2));
box-shadow:0 6px 20px rgba(0,0,0,.16);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.solfam-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.28);
filter:saturate(1.1) brightness(1.05)}
.solfam-top{display:flex;align-items:center;justify-content:space-between}
.solfam-num{font-size:26px;font-weight:900;color:rgba(255,255,255,.45);letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.solfam-count{font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);
padding:5px 12px;border-radius:20px;white-space:nowrap}
.solfam-name{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff;margin:0}
.solfam-preview{list-style:none;margin:0;padding:0;flex:1}
.solfam-preview li{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.88);
padding:7px 0;border-top:1px solid rgba(255,255,255,.2)}
.solfam-preview li.solfam-more{color:rgba(255,255,255,.65);font-weight:700}
.solfam-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.solfam-foot span{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);
text-transform:uppercase;letter-spacing:.05em}
.solfam-foot svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;fill:none;transition:transform .2s var(--ease)}
.solfam-card:hover .solfam-foot svg{transform:translateX(4px)}
/* Level 2: family page header (plain, on the page) */
.sol-famhero{display:flex;align-items:center;gap:16px;padding:6px 0 20px;
margin-bottom:20px;border-bottom:1px solid var(--line)}
.sol-famhero-num{flex:none;width:52px;height:52px;border-radius:14px;display:inline-flex;
align-items:center;justify-content:center;background:var(--g1);color:#fff;
font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.sol-famhero h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.sol-famhero p{font-size:13.5px;color:var(--muted);margin:4px 0 0}
/* Level 2: solution cards, each its own color, on the white page */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sol-grid-page{padding-bottom:60px}
.sol-card{display:flex;flex-direction:column;gap:7px;border-radius:14px;padding:16px 16px 13px;
color:#fff;text-decoration:none;position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--g1),var(--g2));
box-shadow:0 3px 12px rgba(0,0,0,.18);
transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.sol-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28);
filter:saturate(1.12) brightness(1.06)}
.sol-card-num{font-size:11px;font-weight:800;color:rgba(255,255,255,.8);letter-spacing:.07em}
.sol-card-title{font-size:15px;font-weight:800;line-height:1.3;margin:0;letter-spacing:-.01em;color:#fff}
.sol-card-liner{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.88);margin:0;flex:1}
.sol-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.sol-card-go{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.05em}
.sol-card-arrow{width:16px;height:16px;stroke:#fff;stroke-width:2.2;fill:none;transition:transform .2s var(--ease)}
.sol-card:hover .sol-card-arrow{transform:translateX(4px)}
/* ---- Detail page ---- */
.sol-detail{max-width:820px}
.sol-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
color:var(--muted);text-decoration:none;margin:20px 0 16px;transition:color .15s}
.sol-back:hover{color:var(--accent)}
.sol-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
/* Detail header (plain, on the page) */
.sol-detail-hero{padding:4px 0 24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.sol-detail-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sol-detail-pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
padding:5px 12px;border-radius:20px;color:var(--hue-text);
background:color-mix(in srgb,var(--g1) 10%,var(--surface));
border:1px solid color-mix(in srgb,var(--g1) 28%,transparent)}
.sol-detail-num{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.sol-detail-hero h1{font-size:clamp(26px,3.8vw,36px);font-weight:800;
letter-spacing:-.03em;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.sol-detail-liner{color:var(--muted);font-size:15px;line-height:1.6;max-width:640px;margin:0}
/* Diagram panel */
.sol-detail-diagram{background:var(--surface);border:1px solid var(--line);border-radius:14px;
padding:28px;margin-bottom:28px;text-align:center}
.sol-detail-diagram img{max-width:100%;height:auto}
/* Section jump nav */
.sol-toc{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.sol-toc a{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:650;text-decoration:none;
border:1.5px solid var(--line);color:var(--ink-2);background:var(--surface);
transition:border-color .15s,color .15s,background .15s}
.sol-toc a:hover{border-color:var(--g1,var(--accent));color:var(--g1,var(--accent))}
/* Body prose */
.sol-detail-body{font-size:15.5px;line-height:1.75;color:var(--ink-2);padding-bottom:60px}
.sol-detail-body>p:first-of-type{font-size:17px;line-height:1.7;color:var(--ink)}
.sol-detail-body h2{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
line-height:1.3;margin:2.4em 0 .6em;padding-top:1.4em;border-top:1px solid var(--line);
scroll-margin-top:80px}
.sol-detail-body h2::before{content:'';display:block;width:38px;height:4px;border-radius:2px;
background:linear-gradient(90deg,var(--g1),var(--g2));margin-bottom:12px}
.sol-detail-body h3{font-size:16px;font-weight:750;color:var(--ink);letter-spacing:-.01em;
margin:1.8em 0 .4em}
.sol-detail-body p{margin:.8em 0}
.sol-detail-body ul,.sol-detail-body ol{padding-left:24px;margin:.8em 0}
.sol-detail-body li{margin:.55em 0;padding-left:4px}
.sol-detail-body ol li::marker{font-weight:750;color:var(--hue-text,var(--accent))}
.sol-detail-body b{color:var(--ink);font-weight:680}
.sol-detail-body em{font-style:italic}
.sol-detail-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Figure caption */
.sol-fig{font-size:13px;font-style:italic;color:var(--muted);text-align:center;
margin:1.2em auto;max-width:560px;line-height:1.5}
/* "In practice" callout */
.sol-callout{margin:1.6em 0;padding:18px 20px;border-radius:14px;
background:color-mix(in srgb,var(--g1) 7%,var(--surface));
border:1px solid color-mix(in srgb,var(--g1) 30%,transparent);
border-left:4px solid var(--g1,var(--accent))}
.sol-callout p{margin:.5em 0}
.sol-callout p:first-child{margin-top:0}
.sol-callout ul{margin:.5em 0}
/* Bottom nav after article body */
.sol-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:18px 0 8px;margin-top:8px;border-top:1px solid var(--line)}
.sol-bottom-back{display:inline-flex;align-items:center;gap:6px;
font-size:14px;font-weight:650;color:var(--ink-2);text-decoration:none;
padding:10px 16px 10px 12px;border-radius:10px;border:1px solid var(--line);
background:var(--surface);transition:border-color .15s,color .15s}
.sol-bottom-back:hover{border-color:var(--accent);color:var(--accent)}
.sol-bottom-back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.sol-bottom-top{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
font-size:14px;font-weight:650;color:var(--ink-2);
padding:10px 16px 10px 12px;border-radius:10px;border:1px solid var(--line);
background:var(--surface);transition:border-color .15s,color .15s}
.sol-bottom-top:hover{border-color:var(--accent);color:var(--accent)}
.sol-bottom-top svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
@media(max-width:640px){
.sol-grid,.solfam-grid{grid-template-columns:1fr}
.sol-bottom{flex-direction:column;align-items:stretch}
.sol-bottom-back,.sol-bottom-top{justify-content:center}
}
/* ============================================================
Glossary — three vocabularies, one searchable page
============================================================ */
.glo-head{padding:28px 0 4px}
.glo-head h1{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.03em}
.glo-sub{color:var(--muted);font-size:14.5px;max-width:560px;margin-top:6px;line-height:1.55}
/* Sticky search + filter bar */
.glo-bar{position:sticky;top:0;z-index:30;background:var(--bg);
padding:14px 0 12px;margin-bottom:8px;
border-bottom:1px solid var(--line)}
.glo-search{display:flex;align-items:center;gap:10px;background:var(--surface);
border:1px solid var(--line);border-radius:14px;padding:12px 16px;
box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.glo-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.glo-search svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.glo-search input{flex:1;border:0;background:transparent;color:var(--ink);
font:inherit;font-size:15.5px;outline:none;min-width:0}
.glo-search input::placeholder{color:var(--muted-2)}
.glo-count{flex:none;font-size:12.5px;font-weight:650;color:var(--muted);
background:var(--surface-3);border-radius:999px;padding:4px 10px;white-space:nowrap}
.glo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.glo-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
font:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:7px 14px;
cursor:pointer;transition:all .15s var(--ease)}
.glo-chip b{font-weight:750;opacity:.55;margin-left:2px}
.glo-chip:hover{border-color:var(--muted-2)}
.glo-chip.active{background:linear-gradient(135deg,var(--g1,var(--accent)),var(--g2,var(--accent-lo)));
border-color:transparent;color:#fff}
.glo-chip.active b{opacity:.8}
/* Category band */
.glo-cat{margin:26px 0 8px}
.glo-band{display:flex;align-items:center;justify-content:space-between;gap:18px;
border-radius:var(--radius-lg);padding:22px 26px;color:#fff;
background:linear-gradient(120deg,var(--g1),var(--g2));
box-shadow:0 12px 28px -14px color-mix(in srgb,var(--g2) 55%,transparent)}
.glo-band h2{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.glo-band p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);margin-top:4px;max-width:640px}
.glo-band-count{flex:none;display:flex;flex-direction:column;align-items:center;
font-size:26px;font-weight:800;line-height:1;color:#fff;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
border-radius:14px;padding:12px 18px}
.glo-band-count small{font-size:10.5px;font-weight:650;letter-spacing:.08em;
text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:4px}
.glo-sect-title{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin:22px 2px 0}
.glo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:14px;padding:14px 0 8px}
.glo-card{display:block;text-decoration:none;position:relative;
background:var(--surface);border:1px solid var(--line);border-radius:14px;
padding:16px 18px;box-shadow:var(--shadow-sm);
transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease);cursor:pointer}
.glo-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);border-color:var(--line-strong,var(--line))}
.glo-term{font-size:15px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.glo-def{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:6px}
.glo-src{display:inline-block;margin-top:10px;font-size:11px;font-weight:650;
letter-spacing:.04em;color:var(--muted);background:var(--surface-3);
border-radius:999px;padding:3px 9px}
.glo-card mark{background:var(--gold-soft);color:var(--ink);border-radius:3px;padding:0 2px}
:root[data-theme="dark"] .glo-card mark{background:rgba(245,182,66,.28);color:var(--ink)}
.glo-empty{text-align:center;padding:70px 20px 90px;color:var(--muted)}
.glo-empty svg{width:40px;height:40px;stroke:var(--muted-2);fill:none;stroke-width:1.6;margin-bottom:12px}
.glo-empty h3{font-size:17px;font-weight:750;color:var(--ink)}
.glo-empty p{font-size:14px;margin-top:6px}
.glo-empty b{overflow-wrap:anywhere}
.glo-wrap{padding-bottom:60px}
/* Glossary term detail page */
.glo-detail-wrap{max-width:760px;padding-bottom:60px}
.glo-detail-crumb{display:flex;align-items:center;gap:6px;padding:18px 0 14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.glo-detail-crumb a{color:var(--accent);text-decoration:none;font-weight:600}
.glo-detail-crumb a:hover{text-decoration:underline}
.glo-detail-crumb svg{width:14px;height:14px;stroke:var(--muted-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.glo-detail{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.glo-detail-head{background:linear-gradient(135deg,var(--g1),var(--g2));padding:36px 32px 30px;color:#fff}
.glo-detail-cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.glo-detail-head h1{font-size:30px;font-weight:800;margin-top:8px;letter-spacing:-.02em;color:#fff}
.glo-detail-body{padding:30px 32px 36px;background:var(--surface)}
.glo-detail-def{font-size:18px;line-height:1.65;color:var(--ink);font-weight:500}
.glo-detail-extended{margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.glo-detail-extended p{font-size:15px;line-height:1.75;color:var(--ink-2);margin-bottom:14px}
.glo-detail-extended p:last-child{margin-bottom:0}
.glo-detail-extended strong{color:var(--ink);font-weight:700}
.glo-detail-extended code{background:var(--surface-3);padding:2px 6px;border-radius:5px;font-size:13px;font-family:var(--mono)}
.glo-detail-source{margin-top:18px;font-size:13px;color:var(--muted)}
.glo-detail-bottom{display:flex;align-items:center;justify-content:flex-start;padding:18px 0}
.glo-detail-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:650;
color:var(--accent);text-decoration:none;padding:8px 14px;border-radius:10px;
background:var(--surface);border:1px solid var(--line);transition:background .15s}
.glo-detail-back:hover{background:var(--surface-3)}
.glo-detail-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){
.glo-detail-head{padding:28px 20px 24px}
.glo-detail-head h1{font-size:24px}
.glo-detail-body{padding:22px 20px 28px}
.glo-detail-def{font-size:16px}
}
@media(max-width:960px){
.glo-bar{top:calc(56px + env(safe-area-inset-top))}
}
@media(max-width:640px){
.glo-band{flex-direction:column;align-items:flex-start;padding:18px 20px}
.glo-grid{grid-template-columns:1fr}
}
/* ============================================================
Intake popup (first login per ecosystem) + admin review
============================================================ */
body.intake-open{overflow:hidden}
.intake-nudge{display:flex;align-items:center;justify-content:space-between;gap:14px;
margin:14px 0 0;padding:14px 16px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm)}
.intake-nudge-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.intake-nudge-copy strong{font-size:14px;font-weight:750;color:var(--ink)}
.intake-nudge-copy span{font-size:13px;color:var(--muted);line-height:1.4}
@media(max-width:640px){
.intake-nudge{flex-direction:column;align-items:stretch}
.intake-nudge .btn{width:100%}
}
.intake-overlay{position:fixed;inset:0;z-index:110;background:var(--scrim);
backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
padding:24px}
.intake-modal{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);
width:min(720px,100%);max-height:calc(100dvh - 48px);
min-height:min(460px,calc(100dvh - 48px));
display:flex;flex-direction:column;overflow:hidden}
.intake-progress{flex:none;height:4px;background:var(--line-2)}
.intake-progress-fill{height:100%;width:0;background:var(--accent);
transition:width .25s var(--ease)}
.intake-eyebrow{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
color:var(--accent)}
.intake-step{display:none;padding:26px 0 8px}
.intake-step.on{display:block;flex:1;animation:intake-in .22s var(--ease)}
@keyframes intake-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.intake-step h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.intake-intro{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.intake-note{font-size:13px;color:var(--muted);margin-top:8px}
.intake-body{flex:1;min-height:0;overflow-y:auto;padding:0 30px;
display:flex;flex-direction:column}
.intake-secnote{font-size:12.5px;color:var(--muted);margin-top:6px}
.intake-qlabel{font-size:17px;font-weight:750;letter-spacing:-.01em;
color:var(--ink);margin:10px 0 16px;line-height:1.4}
.intake-opts{display:flex;flex-direction:column;gap:6px}
.intake-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;
border:1px solid var(--line);border-radius:10px;cursor:pointer;
font-size:13.5px;line-height:1.45;color:var(--ink-2);
transition:border-color .12s var(--ease),background .12s var(--ease)}
.intake-opt:hover{border-color:var(--muted-2)}
.intake-opt input{margin-top:2px;accent-color:var(--accent);flex:none}
.intake-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.intake-grid-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.intake-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.intake-grid th{font-size:11px;font-weight:650;color:var(--muted);
padding:10px 8px;text-align:center;line-height:1.3;
background:var(--surface-2);border-bottom:1px solid var(--line);max-width:110px}
.intake-grid th:first-child{text-align:left;padding-left:12px}
.intake-grid td{padding:8px;text-align:center;border-bottom:1px solid var(--line-2)}
.intake-grid td:first-child{text-align:left;padding-left:12px;font-weight:650;color:var(--ink);white-space:nowrap}
.intake-grid tr:last-child td{border-bottom:0}
.intake-grid input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.intake-text{width:100%;border:1px solid var(--line);border-radius:10px;
background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;
padding:10px 12px;resize:vertical;outline:none}
.intake-text:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.intake-select{width:100%;border:1px solid var(--line);border-radius:10px;
background:var(--surface);color:var(--ink);font:inherit;font-size:14px;
padding:11px 12px;outline:none;cursor:pointer}
.intake-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.intake-foot{position:sticky;bottom:0;display:flex;justify-content:space-between;
align-items:center;gap:10px;
padding:14px 0 18px;background:var(--surface);border-top:1px solid var(--line);
margin-top:8px}
.intake-nav{display:flex;align-items:center;gap:10px}
.intake-count{font-size:12px;font-weight:650;color:var(--muted)}
.intake-done{padding:56px 40px;text-align:center}
.intake-done svg{width:52px;height:52px;stroke:var(--success);fill:none;stroke-width:1.8;margin-bottom:14px}
.intake-done h2{font-size:21px;font-weight:800}
.intake-done p{font-size:14px;color:var(--muted);margin:10px 0 22px}
/* Admin review */
.intake-admin-table{width:100%;border-collapse:collapse;font-size:13.5px}
.intake-admin-table th{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
background:var(--surface-2)}
.intake-admin-table td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.intake-admin-table tr:last-child td{border-bottom:0}
.intake-admin-email{display:block;font-size:12px}
.intake-admin-section{margin:18px 0;padding:20px 24px}
.intake-admin-section h2{font-size:16px;font-weight:750;display:flex;align-items:center;gap:10px;
margin-bottom:4px}
.intake-admin-q{margin:14px 0}
.intake-admin-label{font-size:12.5px;font-weight:650;color:var(--muted);margin-bottom:4px}
.intake-admin-answer{font-size:14px;color:var(--ink)}
.intake-admin-none{font-size:13px;color:var(--muted-2);font-style:italic}
.intake-admin-list{padding-left:20px;font-size:14px;color:var(--ink)}
.intake-admin-list li{margin:3px 0}
.intake-admin-grid{border-collapse:collapse;font-size:13px;min-width:min(420px,100%)}
.intake-admin-grid td{padding:6px 14px 6px 0;border-bottom:1px solid var(--line-2)}
.intake-admin-grid td:first-child{font-weight:650;color:var(--ink);white-space:nowrap}
.intake-admin-grid td:last-child{color:var(--ink-2)}
.intake-admin-grid tr:last-child td{border-bottom:0}
@media(max-width:640px){
.intake-overlay{padding:0}
.intake-modal{max-height:100dvh;border-radius:0;border:0}
.intake-head{padding:20px 18px 14px}
.intake-body{padding:4px 18px 0}
.intake-foot{flex-direction:column-reverse}
.intake-foot .btn{width:100%}
}
/* ---- first-login tooltip tour ---- */
.tour-ring{position:fixed;z-index:1200;pointer-events:none;border-radius:12px;
border:2px solid var(--accent);
box-shadow:0 0 0 100vmax rgba(10,16,30,.55), 0 0 0 4px rgba(47,109,246,.25);
transition:top .28s ease, left .28s ease, width .28s ease, height .28s ease}
.tour-tip{position:fixed;z-index:1201;background:var(--surface);color:var(--ink);
border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
box-shadow:0 18px 50px rgba(10,16,30,.35);
transition:top .28s ease, left .28s ease}
.tour-tip h4{margin:0 22px 6px 0;font-size:15px;font-weight:750}
.tour-tip p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.tour-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border:none;
background:transparent;color:var(--muted);font-size:18px;line-height:1;
border-radius:8px;cursor:pointer}
.tour-x:hover{background:var(--surface-2);color:var(--ink)}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.tour-count{font-size:12px;font-weight:700;color:var(--muted)}
.tour-btns{display:flex;gap:8px}
.tour-back,.tour-next{border-radius:8px;padding:7px 14px;font-size:13px;font-weight:650;
cursor:pointer;font-family:var(--font)}
.tour-back{background:transparent;border:1px solid var(--line);color:var(--ink)}
.tour-next{background:var(--accent);border:none;color:#fff}
.tour-skip{display:block;margin:10px auto 0;background:none;border:none;cursor:pointer;
font-size:12.5px;color:var(--muted);text-decoration:underline;font-family:var(--font)}
.tour-skip:hover{color:var(--ink)}
/* ============================================================
Client Engine Playbook
------------------------------------------------------------
The playbook is a program, not a tool, so it reuses the portal's
surfaces and spacing rather than inventing a second visual language.
Everything below is scoped under .ce-* to keep it out of the way of
the course pages it sits beside.
============================================================ */
.ce-wrap{padding-top:8px;padding-bottom:64px}
.ce-h2{font-size:14px;font-weight:650;letter-spacing:.01em;color:var(--ink);margin:0 0 12px}
.ce-back{display:inline-block;margin:4px 0 18px;color:var(--muted);font-size:14px;font-weight:550}
.ce-back:hover{color:var(--ink)}
.ce-empty{margin:24px 0;padding:28px;text-align:center;color:var(--muted);
background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.ce-draft{font-style:normal;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
color:var(--gold);background:var(--gold-soft);border-radius:6px;padding:2px 6px;vertical-align:middle}
.ce-req{font-style:normal;font-size:11px;font-weight:600;color:var(--muted-2)}
/* ---- hero ---- */
.ce-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;
padding:28px 32px;margin-bottom:20px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.ce-eyebrow{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
color:var(--m-primary,var(--accent))}
.ce-hero h1{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.02em}
.ce-hero-sub{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.5;max-width:56ch}
.ce-hero-progress{flex:0 0 auto;text-align:center}
.ce-ring{--pct:0;position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
margin:0 auto;background:conic-gradient(var(--m-primary,var(--accent)) calc(var(--pct)*1%),var(--line) 0)}
.ce-ring::before{content:"";position:absolute;width:74px;height:74px;border-radius:50%;background:var(--surface)}
.ce-ring>span{position:relative;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ce-ring>span em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.ce-ring-label{margin:10px 0 0;font-size:12px;color:var(--muted);white-space:nowrap}
/* ---- coach ---- */
.ce-coach{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:24px;
background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius)}
.ce-coach-ico{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
background:var(--m-primary,var(--accent))}
.ce-coach-ico svg{width:19px;height:19px;fill:#fff;stroke:none}
.ce-coach-body{flex:1 1 auto;min-width:0}
.ce-coach-body b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.ce-coach-body p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ce-coach-go{flex:0 0 auto}
:root[data-theme="dark"] .ce-coach{background:var(--surface-2);border-color:var(--line)}
/* ---- section accordion ---- */
.ce-sections{display:flex;flex-direction:column;gap:12px}
.ce-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-sm);overflow:hidden}
.ce-section[open]{box-shadow:var(--shadow-card)}
.ce-section-head{display:flex;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none}
.ce-section-head::-webkit-details-marker{display:none}
.ce-section-head:hover{background:var(--surface-2)}
.ce-section-num{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
font-size:13px;font-weight:700;color:var(--muted);background:var(--surface-3)}
.ce-section.is-done .ce-section-num{color:#fff;background:var(--success)}
.ce-section-title{flex:1 1 auto;min-width:0}
.ce-section-title b{display:block;font-size:16px;font-weight:650;color:var(--ink);line-height:1.3}
.ce-section-title span{display:block;margin-top:3px;font-size:13px;color:var(--muted);line-height:1.45}
.ce-section-meta{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.ce-section-count{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.ce-bar{display:block;width:88px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.ce-bar i{display:block;height:100%;border-radius:99px;background:var(--m-primary,var(--accent));
transition:width .3s var(--ease)}
.ce-section.is-done .ce-bar i{background:var(--success)}
.ce-caret{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:var(--muted-2);stroke-width:2;
transition:transform .2s var(--ease)}
.ce-section[open] .ce-caret{transform:rotate(180deg)}
.ce-modules{list-style:none;margin:0;padding:0 20px 4px;border-top:1px solid var(--line-2)}
.ce-module-row a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);
color:var(--ink-2);font-size:14.5px}
.ce-module-row:last-child a{border-bottom:0}
.ce-module-row a:hover{color:var(--m-primary,var(--accent))}
.ce-module-row.is-done a{color:var(--muted)}
.ce-tick{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);
display:grid;place-items:center;background:var(--surface)}
.ce-module-row.is-done .ce-tick,.ce-side-modules li.is-done .ce-tick{background:var(--success);border-color:var(--success)}
.ce-tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ce-module-title{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ce-module-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.45}
.ce-module-flag{flex:0 0 auto;display:grid;place-items:center}
.ce-module-flag svg{width:15px;height:15px;fill:none;stroke:var(--muted-2);stroke-width:1.8}
.ce-module-none span{display:block;padding:11px 0;color:var(--muted);font-size:14px}
.ce-section-link{display:block;padding:12px 20px 16px;font-size:13px;font-weight:600;
color:var(--m-primary,var(--accent))}
.ce-assets-link{margin:28px 0 0;text-align:center}
.ce-assets-link a{font-size:14px;font-weight:600;color:var(--m-primary,var(--accent))}
/* ---- section page ---- */
.ce-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.ce-sec-head h1{margin:0;font-size:26px;letter-spacing:-.02em}
.ce-sec-prog{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ce-sec-cta{margin:0 0 24px}
.ce-sec-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
.ce-sec-modules,.ce-steps{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.ce-sec-modules .ce-modules{padding:0;border-top:0}
/* ---- work steps ---- */
.ce-steps-intro{margin:-6px 0 16px;font-size:13px;color:var(--muted)}
.ce-step{padding:16px 0;border-top:1px solid var(--line-2)}
.ce-step:first-of-type{border-top:0;padding-top:0}
.ce-step-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.ce-step-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--success);flex:0 0 auto}
.ce-step-title{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.ce-step.is-done .ce-step-title{color:var(--muted)}
.ce-step-desc{margin:6px 0 0 26px;font-size:13px;color:var(--muted);line-height:1.5}
.ce-step-input{display:block;width:100%;margin-top:10px;padding:11px 13px;font:inherit;font-size:14px;
line-height:1.55;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--radius-sm);resize:vertical}
.ce-step-input:focus{outline:0;border-color:var(--m-primary,var(--accent));background:var(--surface)}
.ce-step-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;min-height:16px}
.ce-step-help{font-size:12px;color:var(--muted-2);line-height:1.4}
.ce-step-state{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto}
/* ---- module page ---- */
.ce-mod-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.ce-mod-main{min-width:0;display:flex;flex-direction:column;gap:24px}
.ce-mod-head h1{margin:0;font-size:26px;letter-spacing:-.02em;line-height:1.2}
.ce-mod-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px}
.ce-side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:18px;box-shadow:var(--shadow-sm)}
.ce-side-card .ce-section-count{display:block;margin-top:8px}
.ce-side-modules{list-style:none;margin:14px 0 0;padding:0}
.ce-side-modules a{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.ce-side-modules a:hover{color:var(--m-primary,var(--accent))}
.ce-side-modules li.is-current a{font-weight:650;color:var(--m-primary,var(--accent))}
.ce-side-modules li.is-done a{color:var(--muted)}
.ce-playlist{display:grid;grid-template-columns:1fr 260px;gap:14px;align-items:start}
.ce-pl-list{list-style:none;margin:0;padding:0;max-height:100%;overflow:auto;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ce-pl-list button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;font-size:13.5px;
color:var(--ink-2);text-align:left;cursor:pointer}
.ce-pl-list li.on button{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.ce-pl-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
font-size:11px;font-weight:700;background:var(--surface-3);color:var(--muted)}
.ce-pl-title{flex:1 1 auto;overflow-wrap:anywhere}
.ce-insights{padding:20px 22px;background:var(--gold-soft);border-radius:var(--radius)}
.ce-insights ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.ce-insights li{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
:root[data-theme="dark"] .ce-insights{background:var(--surface-2);border:1px solid var(--line)}
.ce-body{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.ce-body h2,.ce-body h3{color:var(--ink);margin:24px 0 10px}
.ce-body p{margin:0 0 14px}
.ce-body ul,.ce-body ol{margin:0 0 14px;padding-left:22px}
.ce-body li{margin-bottom:6px}
.ce-resources ul,.ce-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ce-resources a,.ce-links a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;
font-weight:550;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius-sm)}
.ce-resources a:hover,.ce-links a:hover{border-color:var(--m-primary,var(--accent));color:var(--m-primary,var(--accent))}
.ce-resources svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.ce-buttons{display:flex;flex-wrap:wrap;gap:10px}
/* ---- knowledge check ---- */
.ce-quiz{padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.ce-q{padding:16px 0;border-top:1px solid var(--line-2)}
.ce-q:first-of-type{border-top:0;padding-top:0}
.ce-q-text{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
.ce-q-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ce-q-choices button{display:block;width:100%;padding:11px 14px;font:inherit;font-size:14px;text-align:left;
color:var(--ink-2);background:var(--surface-2);border:1.5px solid var(--line);
border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s var(--ease)}
.ce-q-choices button:hover{border-color:var(--muted-2)}
.ce-q.is-locked .ce-q-choices button{cursor:default}
.ce-q.is-locked .ce-q-choices button:hover{border-color:var(--line)}
.ce-q-choices button.is-right{border-color:var(--success);background:var(--success-soft);color:var(--ink)}
.ce-q-choices button.is-wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--ink)}
.ce-q-result{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
/* ---- module footer ---- */
.ce-mod-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding-top:20px;border-top:1px solid var(--line)}
.ce-btn-done{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.ce-mod-nav{display:flex;align-items:center;gap:18px;margin-left:auto;font-size:13.5px;font-weight:550}
.ce-mod-nav a{color:var(--muted)}
.ce-mod-nav a:hover{color:var(--m-primary,var(--accent))}
.ce-nav-next{color:var(--m-primary,var(--accent))}
/* ---- intro popup ---- */
.ce-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
background:var(--scrim);backdrop-filter:blur(3px)}
.ce-intro-card{position:relative;width:min(760px,100%);padding:24px;background:var(--surface);
border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.ce-intro-card h2{margin:0 0 16px;font-size:20px;letter-spacing:-.01em}
.ce-intro-close{position:absolute;top:12px;right:14px;width:30px;height:30px;font-size:22px;line-height:1;
color:var(--muted);background:none;border:0;cursor:pointer}
.ce-intro-video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.ce-intro-video iframe,.ce-intro-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ce-intro-never{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
/* ---- asset library ---- */
.ce-asset-search{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.ce-asset-search input[type=search]{flex:1 1 auto;padding:11px 14px;font:inherit;font-size:14px;
color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ce-asset-search input[type=search]:focus{outline:0;border-color:var(--m-primary,var(--accent))}
.ce-asset-clear{font-size:13px;color:var(--muted)}
.ce-asset-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ce-asset-cats a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font-size:13px;
font-weight:550;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
border-radius:99px}
.ce-asset-cats a.on{color:#fff;background:var(--m-primary,var(--accent));border-color:transparent}
.ce-asset-cats em{font-style:normal;font-size:11px;font-weight:700;opacity:.65}
.ce-asset-new{margin-bottom:22px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.ce-asset-new>summary{padding:14px 20px;font-size:14px;font-weight:600;color:var(--m-primary,var(--accent));cursor:pointer}
.ce-asset-new form{padding:0 20px 20px;display:flex;flex-direction:column;gap:14px}
.ce-asset-row{display:grid;grid-template-columns:1fr 240px;gap:14px}
.ce-asset-new label,.ce-asset-edit label{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.ce-asset-new input[type=text],.ce-asset-new select,.ce-asset-new textarea,
.ce-asset-edit input[type=text],.ce-asset-edit select,.ce-asset-edit textarea{
display:block;width:100%;margin-top:6px;padding:10px 13px;font:inherit;font-size:14px;line-height:1.55;
color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ce-asset-new textarea,.ce-asset-edit textarea{resize:vertical}
.ce-asset-new :focus,.ce-asset-edit :focus{outline:0;border-color:var(--m-primary,var(--accent))}
.ce-asset-file input{margin-top:6px;font-size:13px;color:var(--muted)}
.ce-asset-new button[type=submit]{align-self:flex-start}
.ce-asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ce-asset{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.ce-asset-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.ce-asset-head b{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.ce-asset-tag{flex:0 0 auto;font-size:11px;font-weight:650;color:var(--accent-ink);background:var(--accent-soft);
border-radius:6px;padding:2px 7px}
.ce-asset-body{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.ce-asset-fileline{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13.5px;
color:var(--ink-2);overflow-wrap:anywhere}
.ce-asset-fileline svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.ce-asset-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:10px;
border-top:1px solid var(--line-2)}
.ce-asset-edit{flex:1 1 auto}
.ce-asset-edit>summary{font-size:13px;font-weight:600;color:var(--m-primary,var(--accent));cursor:pointer}
.ce-asset-edit form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ce-asset-del{font:inherit;font-size:13px;font-weight:600;color:var(--danger);background:none;
border:0;padding:0;cursor:pointer}
/* ---- narrow ---- */
@media (max-width:1080px){
.ce-sec-grid,.ce-mod-grid{grid-template-columns:1fr}
/* Work steps belong beside the video on a desktop and directly under
it on a phone. Ordering them here keeps the module list from
pushing the member's own work below the fold. */
.ce-mod-side{position:static}
.ce-playlist{grid-template-columns:1fr}
.ce-pl-list{max-height:260px}
}
@media (max-width:720px){
.ce-wrap{padding-bottom:40px}
.ce-hero{flex-direction:column;align-items:flex-start;gap:20px;padding:22px 20px}
.ce-hero h1{font-size:24px}
.ce-hero-progress{display:flex;align-items:center;gap:14px;text-align:left}
.ce-ring{width:64px;height:64px}
.ce-ring::before{width:48px;height:48px}
.ce-ring>span{font-size:16px}
.ce-ring-label{margin:0}
.ce-coach{flex-direction:column;align-items:flex-start;gap:12px}
.ce-coach-go{width:100%}
.ce-section-head{gap:12px;padding:14px 16px}
.ce-section-meta .ce-bar{display:none}
.ce-modules{padding:0 16px 4px}
.ce-section-link{padding:12px 16px 14px}
.ce-sec-head{flex-direction:column;align-items:flex-start;gap:12px}
.ce-sec-prog{align-items:flex-start}
.ce-asset-row{grid-template-columns:1fr}
.ce-mod-foot{flex-direction:column;align-items:stretch}
.ce-mod-nav{margin-left:0;justify-content:space-between}
}
/* ---- Client Engine CMS ---- */
.ce-adm .ce-sec-head{align-items:center}
.ce-assets-link a+a{margin-left:20px}
.ce-adm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.ce-adm-card form{display:flex;flex-direction:column;gap:12px}
.ce-adm-hint{margin:-4px 0 12px;font-size:13px;color:var(--muted);line-height:1.5}
.ce-adm-row{display:grid;grid-template-columns:1fr 200px;gap:12px}
.ce-adm-card label{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.ce-adm-card input[type=text],.ce-adm-card input[type=url],.ce-adm-card input[type=number],
.ce-adm-card select,.ce-adm-card textarea{
display:block;width:100%;margin-top:6px;padding:9px 12px;font:inherit;font-size:14px;line-height:1.5;
color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ce-adm-card textarea{resize:vertical;font-family:var(--font)}
.ce-adm-card :focus{outline:0;border-color:var(--m-primary,var(--accent))}
.ce-adm-check{display:flex;align-items:center;gap:8px;font-weight:550;color:var(--ink-2);white-space:nowrap}
.ce-adm-check input{width:16px;height:16px;margin:0;accent-color:var(--m-primary,var(--accent))}
.ce-adm-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ce-adm-card button[type=submit].btn{align-self:flex-start}
.ce-adm-list{list-style:none;margin:0 0 14px;padding:0}
.ce-adm-list>li{border-bottom:1px solid var(--line-2)}
.ce-adm-list>li:last-child{border-bottom:0}
.ce-adm-list a{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--ink-2);font-size:14.5px}
.ce-adm-list a:hover{color:var(--m-primary,var(--accent))}
.ce-adm-line{display:flex;align-items:center;gap:12px;padding:9px 0}
.ce-adm-line form{flex:0 0 auto;margin-left:auto}
.ce-adm-sort{flex:0 0 auto;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-3)}
.ce-adm-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.45}
.ce-adm-meta{flex:0 0 auto;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ce-adm-none span{display:block;padding:11px 0;color:var(--muted);font-size:14px}
.ce-adm-add{flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:10px !important;
padding-top:14px;border-top:1px solid var(--line-2)}
.ce-adm-add input[type=text]{flex:1 1 180px;width:auto !important;margin-top:0 !important}
.ce-adm-add select{width:auto !important;margin-top:0 !important}
.ce-adm-sub{padding:16px;margin-bottom:12px;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--radius-sm)}
.ce-adm-subdel{margin:-6px 0 16px}
.ce-adm-del{font:inherit;font-size:13px;font-weight:600;color:var(--danger);background:none;
border:0;padding:0;cursor:pointer;white-space:nowrap}
.ce-adm-danger{border-color:var(--danger)}
.ce-btn-outline{background:none;border-color:var(--line);color:var(--ink-2)}
@media (max-width:720px){
.ce-adm-row{grid-template-columns:1fr}
.ce-adm-card{padding:18px}
}
/* Section tabs on the ecosystem admin page. Sticky because the panels
underneath are long, and having to scroll back to the top to change
section is the problem this was meant to solve. */
.adm-tabs{position:sticky;top:0;z-index:20;display:flex;gap:4px;flex-wrap:wrap;
margin:16px 0 20px;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line-2)}
.adm-tab{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;
background:transparent;border:1px solid transparent;border-radius:999px;padding:7px 14px}
.adm-tab:hover{color:var(--ink);background:var(--surface-2)}
.adm-tab.is-on{color:var(--ink);background:var(--surface);border-color:var(--line);
box-shadow:0 1px 2px rgba(10,15,30,.06)}
/* Sync bar on the ecosystem admin page. Loud enough to find on a page
this long: the button is the answer to "why has the CRM change not
shown up yet", so it should not read as another paragraph. */
.crm-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
margin:12px 0 16px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
background:var(--surface-2)}
.crm-bar b{font-size:14px}
.crm-bar p{margin:4px 0 0;font-size:13px;max-width:70ch}
.crm-bar form{flex:none}
/* ---------- in-person event page (CRM events) ---------- */
.event-wrap{width:100%;max-width:1100px;margin:0 auto;padding:26px 28px 60px}
.event-back{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:14px}
.event-back:hover{color:var(--ink)}
.event-head{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface-3);
background-size:cover;background-position:center;min-height:230px;display:flex;align-items:flex-end;
padding:28px;margin-bottom:18px}
.event-head::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,15,25,.15) 0%,rgba(11,15,25,.55) 55%,rgba(11,15,25,.88) 100%)}
.event-head-in{position:relative;z-index:1;color:#fff;width:100%;display:flex;align-items:flex-end;gap:20px}
.event-head-body{flex:1;min-width:0}
.event-head-in h1{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.025em;line-height:1.1;color:#fff}
/* The same chip the dashboard card carries, so the page a member lands
on is recognisably the card they clicked. */
.event-head-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:74px;padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.event-head-date b{font-size:26px;font-weight:720;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.event-head-date span{margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.85)}
.event-head-meta{margin-top:9px;display:flex;flex-wrap:wrap;gap:8px 14px;
font-size:13.5px;color:rgba(255,255,255,.86)}
.event-head-meta span{display:inline-flex;align-items:center}
.event-head-meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;
background:rgba(255,255,255,.5);margin-right:14px}
.event-chip-going{margin-top:12px;display:inline-block;background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.4);color:#fff}
.event-note{border-radius:var(--radius);padding:12px 16px;font-size:14px;margin-bottom:16px;border:1px solid}
.event-note-ok{background:rgba(34,153,84,.1);border-color:rgba(34,153,84,.35);color:var(--ink)}
.event-note-bad{background:rgba(200,60,60,.09);border-color:rgba(200,60,60,.35);color:var(--ink)}
.event-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.event-main{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 24px}
.event-lede{font-size:15px;line-height:1.6;color:var(--ink-2)}
.event-main h2{font-size:17px;margin:20px 0 8px;letter-spacing:-.01em}
.event-guide{font-size:14.5px;line-height:1.6;color:var(--ink-2);white-space:pre-wrap}
.event-facts{margin-top:18px;display:grid;gap:10px}
.event-facts>div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:14px;
padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.event-facts>div:last-child{border-bottom:0;padding-bottom:0}
.event-facts dt{color:var(--muted);font-weight:600}
.event-facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.event-rsvp{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
padding:20px 22px;position:sticky;top:84px}
.event-rsvp h2{font-size:17px;margin-bottom:14px;letter-spacing:-.01em}
.event-form{display:grid;gap:13px}
.event-choice{display:grid;gap:8px}
.event-choice label,.event-check{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.event-field{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.event-field input,.event-field select,.event-field textarea{font:inherit;font-weight:400;color:var(--ink);
background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%}
.event-field textarea{resize:vertical}
.event-fineprint{font-size:12px;margin:0}
@media (max-width:900px){
.event-grid{grid-template-columns:1fr}
.event-rsvp{position:static}
.event-head{min-height:190px;padding:20px}
.event-head-in{gap:14px}
.event-facts>div{grid-template-columns:100px 1fr}
}
@media (max-width:520px){
.event-wrap{padding:18px 16px 46px}
.event-head-in{display:block}
.event-head-date{display:inline-flex;flex-direction:row;align-items:baseline;gap:7px;
min-width:0;padding:6px 11px;border-radius:999px;margin-bottom:12px}
.event-head-date b{font-size:15px}
.event-head-date span{margin-top:0}
.event-facts>div{grid-template-columns:1fr;gap:3px}
}
/* ---- Public policy pages (privacy, terms, support) ----
These render with no sidebar and no member chrome, because a visitor
with no account has to be able to read them. A single measured column
of prose, sized so a line lands near 70 characters at full width. */
.legal-wrap{max-width:760px;margin:0 auto;padding:40px 24px 72px}
.legal-brand{display:inline-block;margin-bottom:36px}
.legal-brand img{height:30px;display:block}
.legal h1{font-size:38px;line-height:1.15;letter-spacing:-.02em;margin:0 0 6px}
.legal h2{font-size:21px;line-height:1.3;margin:38px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--ink-2);font-size:16px;line-height:1.65}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal b{color:var(--ink);font-weight:650}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-date{color:var(--muted);font-size:14px;margin-bottom:26px}
.legal-lead{font-size:19px;font-weight:650}
.legal-lead a{color:var(--accent)}
.legal-foot{
display:flex;flex-wrap:wrap;gap:20px;margin-top:52px;padding-top:22px;
border-top:1px solid var(--line);
}
.legal-foot a{color:var(--muted);font-size:14px;text-decoration:none}
.legal-foot a:hover{color:var(--ink)}
@media (max-width:560px){
.legal-wrap{padding:28px 18px 56px}
.legal h1{font-size:30px}
.legal h2{font-size:19px}
}
/* ---- Playbooks ----
Portrait card grid (target 232x300 covers) for a per-ecosystem library
of files and videos. Distinct from .course-card so a Course grid and a
Playbook grid can sit on the same site without conflating shapes: a
course is a landscape thumbnail (16:9) tied to a curriculum, a playbook
is a portrait cover tied to a document library. */
.pb-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
gap:20px;padding:8px 0 20px;
}
.pb-card{
display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
overflow:hidden;box-shadow:var(--shadow-sm);
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.pb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--line)}
.pb-card .pb-cover{
aspect-ratio:232/300;
background-size:cover;background-position:center;
background-color:var(--surface-2);
}
.pb-card .pb-cover-placeholder{
background:linear-gradient(160deg,hsl(var(--hue,220) 60% 42%),hsl(var(--hue,220) 60% 22%));
display:flex;align-items:flex-end;padding:16px;
}
.pb-cover-name{
color:#fff;font-weight:660;font-size:17px;line-height:1.25;letter-spacing:-.01em;
text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.pb-card .pb-body{padding:12px 14px 14px}
.pb-card h3{
font-size:14.5px;font-weight:620;letter-spacing:-.015em;line-height:1.35;margin:0 0 6px;
}
.pb-meta{color:var(--muted);font-size:12.5px;font-weight:520}
/* ---- Playbook detail: file/video item rows ----
Full-width rows rather than a grid; the icon, title, kind, and CTA all
read in a scannable line, and a mobile column stays legible without a
fussy responsive rewrite. */
.pb-items{display:flex;flex-direction:column;gap:10px;padding:8px 0 20px}
.pb-item{
display:flex;align-items:center;gap:14px;
padding:14px 16px;border:1px solid var(--hairline);border-radius:12px;
background:var(--surface);color:var(--ink);text-decoration:none;
transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.pb-item:hover{border-color:var(--line);background:var(--surface-hover,var(--surface-2))}
.pb-item:active{transform:scale(.995)}
.pb-item-icon{
flex:0 0 40px;width:40px;height:40px;border-radius:10px;
background:var(--surface-2);display:flex;align-items:center;justify-content:center;
color:var(--accent);
}
.pb-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pb-item-title{font-weight:600;font-size:14.5px;line-height:1.3}
.pb-item-kind{color:var(--muted);font-size:12.5px}
.pb-item-cta{
color:var(--accent);font-weight:600;font-size:13px;flex-shrink:0;
}
.pb-item-cta-muted{color:var(--muted)}
.pb-item-pending{opacity:.65;cursor:default}
.pb-item-pending:hover{border-color:var(--hairline);background:var(--surface)}
/* Empty state used across playbook pages */
.empty-state{
padding:32px 20px;border:1px dashed var(--line);border-radius:12px;
color:var(--muted);text-align:center;font-size:14.5px;
}
@container (max-width:620px){.pb-grid{grid-template-columns:1fr 1fr}}
@container (max-width:420px){.pb-grid{grid-template-columns:1fr}}
/* Guest speakers host card. Sits between the video tile and the
shared-files panel; only rendered for Facilitator+ while a session
is live. Matches the tone of .room-attach so hosts don't have to
decode a new visual language for one adjacent panel. */
.guest-card-host{
flex:none;background:var(--surface);border:1px solid var(--line);
border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card);
display:flex;flex-direction:column;gap:12px
}
.gc-head h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.gc-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.gc-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.gc-name{display:flex;flex-direction:column;gap:4px;flex:1;min-width:200px}
.gc-name span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.gc-name input{padding:9px 12px;border-radius:10px;border:1px solid var(--line);
background:var(--surface);color:var(--ink);font-size:14px}
.gc-latest{background:var(--surface-2);border:1px solid var(--line-2);
border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.gc-latest p{margin:0;font-size:13.5px}
.gc-copy{display:flex;gap:8px;align-items:center}
.gc-copy-input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;
border:1px solid var(--line);background:var(--surface);color:var(--ink);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.gc-copy-btn{flex:none}
.gc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gc-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--line-2)}
.gc-name-lbl{flex:1;min-width:0;color:var(--ink);font-weight:640;font-size:13.5px;overflow-wrap:anywhere}
.gc-state{font-size:12px;flex:none}
.gc-revoke{margin:0;flex:none}
.gc-err{margin:0}
/* Guest-side pages: welcome landing, invalid-link, and the stripped
Jitsi tile the guest actually joins from. No sidebar, no ecosystem
chrome, one page one job. Center a single card on the viewport so
the guest sees exactly one thing to do. */
.guest-shell{
min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:40px 20px;background:var(--surface-3)
}
.guest-card{
max-width:520px;width:100%;background:var(--surface);border:1px solid var(--line);
border-radius:20px;padding:36px 32px;box-shadow:var(--shadow-card);
display:flex;flex-direction:column;gap:14px;text-align:center
}
.guest-brand{display:inline-flex;align-items:center;justify-content:center;gap:8px;
color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;margin-bottom:6px}
.guest-brand img{height:22px;width:auto}
.guest-card h1{margin:0;font-size:26px;letter-spacing:-.4px}
.guest-lead{margin:0;line-height:1.5;color:var(--ink-2)}
.guest-fine{margin:0;font-size:12.5px;line-height:1.5}
.guest-form{margin:8px 0 4px}
.guest-hint{margin:0;font-size:12px}
/* Guest room: a full-viewport shell with just a slim bar on top for
the brand mark, the guest's name, and a Leave link. The Jitsi tile
fills everything below. */
.guest-room{min-height:100vh;display:flex;flex-direction:column;background:#0b0a12}
.guest-bar{
display:flex;align-items:center;gap:16px;padding:10px 20px;
background:#141322;border-bottom:1px solid rgba(255,255,255,0.08);
color:#e6e6f2
}
.guest-bar .guest-brand{margin:0;color:#a8b3c7}
.guest-you{flex:1;text-align:center;font-size:13.5px}
.guest-you b{margin-left:4px}
.guest-stage{position:relative;flex:1;min-height:400px}
.guest-stage .jitsi-frame{position:absolute;inset:0}