/*
 * Rails World — hand-written design system (Propshaft, no Tailwind).
 * Brand (RW26 guide): near-black surfaces, neon-orange accent, Clash Grotesk
 * display/body + Inter micro-labels, glow-gradient hairlines.
 */

/* ---- Fonts ------------------------------------------------------------ */
@font-face {
  font-family: "Clash Grotesk"; font-weight: 400; font-display: swap;
  src: url("/assets/ClashGrotesk-Regular-c1a3011a.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk"; font-weight: 500; font-display: swap;
  src: url("/assets/ClashGrotesk-Medium-4699cb9f.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk"; font-weight: 600; font-display: swap;
  src: url("/assets/ClashGrotesk-Semibold-9f07b05c.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Grotesk"; font-weight: 700; font-display: swap;
  src: url("/assets/ClashGrotesk-Bold-951457c7.woff2") format("woff2");
}

/* ---- Tokens ----------------------------------------------------------- */
:root {
  /* UI text wears the platform's own face (SF Pro on iOS, Roboto on
     Android) — most of what makes it feel like an app. The brand grotesk
     is reserved for headings and display moments. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Clash Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: var(--font-display); /* legacy alias */
  /* Micro-labels (timing bars, tags, eyebrows) are Inter in the design. */
  --font-label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Legacy brand colors — still scoped to a few pre-redesign screens. */
  --purple: #432463;
  --purple-dark: #361b51;
  --red: #cb0c1c;
  --red-dark: #a80a17;

  /* Dark is the default theme (the design is dark); light is the opt-in. */
  --bg: #0d0d14;           /* brand/surface-01 */
  --bg-raised: #121218;    /* brand/surface-card */
  --bg-ghost: #1e1e27;     /* btn/ghost/bg */
  --border: #292733;       /* brand/stroke */
  --heading: #ffffff;
  --text: #bbbbbb;         /* body */
  --text-mid: #aaa6b0;     /* mid: timing bars, inactive tabs */
  --text-muted: #878196;   /* deactivated */
  --accent: #fd8b00;       /* brand/neon-orange */
  --accent-hover: #ffa02e;
  --eyebrow: #e5c39a;      /* room labels, section eyebrows */
  --live: #ff000b;         /* brand/neon-red */
  --link: #d0a0d6;
  --glow-gradient: linear-gradient(90deg, #cc8733 0%, #995cd6 50%, #5463d4 100%);
  --glow-shadow: 0 0 7px 1px rgba(253,139,0,.19), 0 0 7px 1px rgba(153,63,242,.13);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --radius: 8px;
  --radius-sm: 6px;
  --pill: 999px;
  --maxw: 56rem;
}

[data-theme="light"] {
  --bg: #f3f2f8; --bg-raised: #ffffff; --bg-ghost: #e9e8ef; --border: #e5e7eb;
  --heading: #1d1b25; --text: #3a3744; --text-mid: #6b7280; --text-muted: #6b7280;
  --eyebrow: #8a6234; --link: #8d4f96;
  --shadow: 0 1px 2px rgba(31, 27, 37, 0.04), 0 6px 20px rgba(31, 27, 37, 0.06);
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* Focus rings for keyboards only — not for taps or programmatic focus. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The drawer takes programmatic focus on open (see menu_controller);
   Safari counts that as focus-visible and would ring the panel edge. */
.menu:focus-visible, .sheet:focus-visible, .dialog:focus-visible { outline: none; }
/* Our display rules would otherwise beat the UA's [hidden] style. */
[hidden] { display: none !important; }
body {
  margin: 0;
  /* The app frame: header and tab bar are pinned flex rows, and the main
     pane between them is the one thing that scrolls. The page itself
     never moves — which is what keeps iOS from misbehaving around sticky
     chrome, toolbar collapse, and whole-page rubber-banding. */
  height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Keep pinch-zoom, drop iOS double-tap-to-zoom (stray zooms on the menu). */
  touch-action: manipulation;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Never fake a weight we didn't load — synthesized bold renders smudged. */
  font-synthesis-weight: none;
}

/* Third-party widgets (Feedbucket) append themselves to <body>; the fixed
   app frame would otherwise squash them into a zero-height flex row below
   the tab bar. Lift them out of the column. */
feedbucket-app { position: fixed; flex: none; z-index: 90; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; font-weight: 500; color: var(--heading); }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
ul { padding-left: 0; list-style: none; margin: 0; }

/* Page intro line under an h1 (the design's Title Bar subtitle). */
.page-intro { color: var(--text); font-size: 1rem; line-height: 1.4; letter-spacing: .005em; margin: -0.25rem 0 1.5rem; }

/* Inter micro-label: timing bars, eyebrows, tags — 10px bold, tracked out. */
.label {
  font-family: var(--font-label); font-size: .6875rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-mid);
}

/* ---- Screen transitions ------------------------------------------------ */
/* Turbo crossfades page navigations (View Transitions API). The header and
   tab bar carry their own names so the chrome holds still while content
   fades — the app-shell feel. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.site-header { view-transition-name: site-header; }
.tab-bar { view-transition-name: tab-bar; }
#flash { view-transition-name: toasts; }
[data-motion="reduced"]::view-transition-old(root),
[data-motion="reduced"]::view-transition-new(root),
[data-motion="reduced"]::view-transition-group(*) { animation: none !important; }

/* ---- Brand wordmark --------------------------------------------------- */
.wordmark { font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.wordmark em { font-style: normal; }

/* ---- Top bar: the design's Logo Bar (main layout) ---------------------- */
.site-header { background: var(--bg); flex: none; z-index: 20; padding-top: env(safe-area-inset-top); }
/* Logo bar (design 5275:3): the neon monogram sits dead-center; the bell and
   menu keep the right edge. The brand is absolutely centered so the button
   count can't push it off-axis. */
.site-nav {
  max-width: var(--maxw); margin: 0 auto; position: relative; display: flex;
  align-items: center; justify-content: flex-end; gap: .5rem;
  padding: 10px 1rem; min-height: 82px;
}
.site-nav__brand { position: absolute; left: 50%; transform: translateX(-50%); }
.site-nav__back { margin-right: auto; }
.site-nav__brand img { height: 62px; width: auto; display: block; }
.site-nav__links { display: flex; align-items: center; gap: 1rem; }
.site-nav__links form { margin: 0; }
.site-main {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
}
/* Menu pages have no tab bar to clear. */
.site-main--full { padding-bottom: 3rem; }

/* ---- Toasts (Toast styles in the component library) --------------------- */
/* Fixed stack, bottom center, clear of the logo; the viewport resizes with
   the keyboard (interactive-widget), so toasts ride above it. */
#flash {
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
  z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none;
}
/* Clear the tab bar on screens that have one, and the bottom footer links
   on the auth/welcome screens. */
body:has(.tab-bar) #flash { bottom: calc(86px + env(safe-area-inset-bottom)); }
body:has(.auth) #flash, body:has(.welcome) #flash { bottom: calc(120px + env(safe-area-inset-bottom)); }
.toast {
  pointer-events: auto; cursor: pointer; display: flex; align-items: flex-start; gap: 10px;
  width: fit-content; max-width: min(378px, calc(100vw - 12px));
  min-height: 48px; padding: 13px 18px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(13,13,20,.92); color: var(--heading);
  font-size: .9375rem; font-weight: 500; line-height: 1.3; letter-spacing: .01em;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: toast-in .25s ease; transition: opacity .3s ease, translate .3s ease;
}
.toast span { margin: 0; text-wrap: pretty; }
/* Icon rides the first line so multi-line messages still read anchored. */
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-mid); }
.toast--success {
  border-color: rgba(253,139,0,.5);
  background: linear-gradient(0deg, rgba(253,139,0,.12), rgba(253,139,0,.12)), rgba(13,13,20,.92);
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 12px rgba(253,139,0,.25);
}
.toast--success svg { color: var(--accent); filter: drop-shadow(0 0 8px rgba(253,139,0,.14)); }
.toast--error {
  border-color: rgba(255,0,11,.5);
  background: linear-gradient(0deg, rgba(255,0,14,.12), rgba(255,0,14,.12)), rgba(13,13,20,.92);
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 12px rgba(255,0,11,.25);
}
.toast--error svg { color: var(--live); filter: drop-shadow(0 0 6px rgba(255,0,11,.3)); }
.toast--leaving { opacity: 0; translate: 0 8px; }
@keyframes toast-in { from { opacity: 0; translate: 0 10px; } }

.empty { color: var(--text-muted); }

/* ---- Buttons & forms --------------------------------------------------- */
/* Design button styles: Primary (orange fill, black label), Secondary
   (orange outline + glow), Ghost (raised gray). All 4px radius, capitalized
   Clash Grotesk Medium labels. */
.button, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
  padding: .65rem 1.5rem; border-radius: 4px; border: 1.5px solid transparent;
  background: var(--accent); color: #000; text-decoration: none;
  text-transform: capitalize; letter-spacing: .06em;
  box-shadow: inset 0 0 8px rgba(253,139,0,.06); filter: drop-shadow(0 0 4px rgba(253,139,0,.14));
}
.button:hover, button:hover { background: var(--accent-hover); text-decoration: none; }
.button--secondary {
  background: transparent; color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 8px 0 rgba(253,139,0,.14); filter: none;
}
.button--secondary:hover { background: rgba(253,139,0,.08); }
.button--ghost { background: var(--bg-ghost); color: var(--heading); border-color: var(--border); box-shadow: none; filter: none; }
.button--ghost:hover { background: var(--border); }
.button--small { padding: .3rem .7rem; font-size: .8rem; }
/* 44px square icon button (hamburger, close, back chevron). */
.button--icon { width: 44px; height: 44px; padding: 0; flex: none; }
.button--icon svg { width: 18px; height: 18px; }

.field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 8px; }
/* Design text fields: small tracked-out muted label over a 44px ghost box. */
.field label, label { font-weight: 500; font-size: .9375rem; letter-spacing: .04em; color: var(--text-mid); }
.field small { color: var(--text-muted); font-size: .8125rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="search"], textarea, trix-editor {
  /* 16px minimum: anything smaller makes iOS Safari zoom in on focus,
     leaving the page horizontally scrollable. */
  font: inherit; font-size: 1rem; width: 100%; padding: .55rem 13px; border: 1.5px solid var(--border);
  border-radius: 4px; background: var(--bg-ghost); color: var(--heading);
}
/* Bio and friends: draggable on desktop, autogrown by JS everywhere. */
textarea { min-height: 128px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); font-family: var(--font-label); font-size: .875rem; font-weight: 300; }
/* Rails wraps errored fields: keep the layout, mark the box neon-red. */
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors textarea, .input--error { border-color: rgba(255, 0, 11, .6); }
.field_with_errors input:focus-visible, .field_with_errors textarea:focus-visible { outline-color: rgba(255, 0, 11, .7); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1rem; background: var(--bg-raised); }
.form-errors { border: 1px solid var(--live); color: #ff6b76; padding: .6rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; background: var(--bg-raised); }

/* ---- First-run backdrop (welcome, log in, sign up) ---------------------- */
/* The gradient lives on a fixed layer, not the scrolling body: iOS keyboard
   panning and rubber-band overscroll can never reveal a seam. */
body:has(.auth), body:has(.welcome) { background: var(--bg); }
body:has(.auth)::before, body:has(.welcome)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,13,20,0) 66%, rgba(0,0,0,.2) 100%),
    linear-gradient(169deg, rgba(22,22,31,.1) 40%, rgba(93,19,165,.06) 79%, rgba(187,0,255,.1) 100%),
    var(--bg);
}
/* The welcome screen's sweeping neon line art — the design's own layer,
   exported from Figma as a 22KB WebP with its ~1/3 opacity baked in. */
body:has(.welcome)::before {
  background:
    url("/assets/onboarding/welcome-lines-2113d26f.webp") center / cover no-repeat,
    linear-gradient(180deg, rgba(13,13,20,0) 66%, rgba(0,0,0,.2) 100%),
    linear-gradient(169deg, rgba(22,22,31,.1) 40%, rgba(93,19,165,.06) 79%, rgba(187,0,255,.1) 100%),
    var(--bg);
}
/* The design's 2px glow hairline, pinned to the bottom screen edge. */
body:has(.auth)::after, body:has(.welcome)::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: #993ff2; box-shadow: 0 0 7px 1px rgba(153, 63, 242, .35); pointer-events: none;
}

/* ---- Log in / sign up (first-run layout) ------------------------------- */
/* The design centers the form vertically and pins the guest/sign-up footer
   to the bottom edge. */
.auth {
  max-width: 26rem; margin: 0 auto; display: flex; flex-direction: column;
  /* Fill the viewport below the layout's logo header so centering has room. */
  min-height: 100%;
}
.auth__body { margin: auto 0; padding-bottom: 2rem; }
.auth h1 { margin-bottom: 24px; }
.auth .field { margin-bottom: 12px; gap: 8px; }
.auth__links { margin-top: 12px; font-size: .9375rem; color: var(--text); padding: .5rem 0; }
.auth__links a { color: var(--heading); text-decoration: underline; }
.auth__submit { margin-top: 24px; }
.auth__footer {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: auto; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  font-size: 1rem; font-weight: 500; letter-spacing: .01em;
}
.auth__footer a { color: var(--heading); text-decoration: underline; }

/* Password fields carry a reveal toggle (the design's dimmed eye icon). */
.field__control { position: relative; }
.field__control input { padding-right: 44px; }
.field__reveal {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0;
  background: none; border: none; box-shadow: none; filter: none;
  display: grid; place-items: center; color: var(--text-mid); opacity: .33;
}
.field__reveal:hover { background: none; opacity: .8; }
.field__reveal svg { width: 15px; height: 15px; }
/* Both icons render; the is-revealed class picks which one shows. */
.field__reveal svg:last-child { display: none; }
.field__reveal.is-revealed svg:first-child { display: none; }
.field__reveal.is-revealed svg:last-child { display: inline; }

/* ---- Agenda / sessions ------------------------------------------------ */
.agenda__filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.filter-pill { background: var(--bg-raised); color: var(--text-mid); border: 1px solid var(--border); border-radius: var(--pill); padding: .3rem .9rem; font-size: .85rem; font-weight: 500; }
.filter-pill.is-active { background: var(--accent); color: #000; border-color: var(--accent); }

.day-group { margin-bottom: 1.5rem; }
.day-group__header { display: flex; align-items: baseline; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.day-group__title { font-weight: 600; font-size: 1rem; }
.day-group__count { color: var(--text-muted); font-size: .8rem; }

.talk-list { display: grid; gap: 1rem; }
.talk-card {
  background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 18px 14px; display: grid; gap: 12px; align-content: start;
}

.talk-card__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.talk-card__room { color: var(--eyebrow); font-feature-settings: "salt" 1; }
.talk-card__status { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .75rem; }
.talk-card__status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-muted); }
/* In-schedule marker (design 5275:3): orange ADDED + bookmark, tags row right. */
.talk-card__footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; }
.talk-card__added {
  display: inline-flex; align-items: center; gap: 4px; flex: none; margin-left: auto;
  font-family: var(--font-label); font-weight: 700; font-size: .6875rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent);
}
.talk-card__added svg { width: 12px; height: 12px; }
.talk-card__heading { display: flex; align-items: baseline; gap: 10px; }
.talk-card__title { font-size: 1.375rem; font-weight: 500; margin: 0; color: var(--heading); }
a.talk-card { color: var(--text); }
a.talk-card:hover { text-decoration: none; border-color: #3a3747; }
a.talk-card--live:hover { border-color: transparent; }
.talk-card__duration { flex: none; font-family: var(--font-label); font-size: .6875rem; color: var(--text-muted); letter-spacing: .02em; }
.talk-card__excerpt {
  color: var(--text); font-size: .9375rem; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.talk-speaker { display: flex; align-items: center; gap: 12px; }
.talk-speaker__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--bg); flex: none; }
.talk-speaker__name { font-weight: 500; font-size: .875rem; letter-spacing: .02em; color: var(--heading); }
.talk-speaker__title { color: var(--text); font-size: .75rem; }
.talk-card__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-label); font-size: .6875rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.8);
  background: var(--border); border-radius: 3px; padding: 5px 8px;
}
[data-theme="light"] .tag { color: var(--text); }
.talk-card__meta { color: var(--text-muted); font-size: .82rem; display: grid; gap: .2rem; }
.badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--pill); }
.badge--live {
  font-family: var(--font-label); font-size: .6875rem; font-weight: 800; letter-spacing: 1px;
  color: var(--live); background: none; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
  filter: drop-shadow(0 0 3px rgba(255,0,11,.38));
}
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.badge--private { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* talk detail + speaker/profile pages */
.talk__eyebrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 12px; }
.talk h1 { font-size: 1.75rem; margin-bottom: .35rem; }
.talk__meta, .speaker__title, .profile__title { color: var(--text-mid); font-size: .8125rem; letter-spacing: .02em; }
.talk__meta { margin-bottom: 1.25rem; }
.talk, .speaker, .profile, .auth__card, .static, .notifications, .search-results { background: transparent; }
.talk__description { color: var(--text); font-size: 1.125rem; line-height: 1.6; letter-spacing: .01em; max-width: 65ch; margin-bottom: 1.5rem; }
.talk__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2rem; }
.talk__section-label { color: var(--eyebrow); display: block; margin-bottom: 12px; text-shadow: 0 4px 4px rgba(0,0,0,.15); }
.speaker-card {
  background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: grid; gap: 12px; margin-bottom: 1rem;
}
/* The whole card is one link to the speaker page, chevroned like the
   related-session cards. */
a.speaker-card { color: inherit; }
a.speaker-card:hover { text-decoration: none; border-color: var(--text-muted); }
.speaker-card__header { display: flex; align-items: center; gap: 16px; }
.speaker-card__avatar {
  display: block; flex: none; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  background: var(--bg-ghost);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .06), 0 0 8px rgba(255, 255, 255, .02);
}
.speaker-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker-card__name { font-size: 1.125rem; font-weight: 500; color: var(--heading); }
.speaker-card__chevron { margin-left: auto; flex: none; color: var(--text); filter: drop-shadow(0 0 3px rgba(253, 139, 0, .38)); }
.speaker-card__chevron svg { width: 18px; height: 18px; }
.speaker-card__role { color: var(--text); font-size: .875rem; line-height: 18px; margin-top: 4px; }
.speaker-card__bio { color: var(--text); font-size: .875rem; line-height: 20px; letter-spacing: .01em; margin: 0; }
.speaker-card .social-row { margin-bottom: 4px; }
.speaker__image, .profile__image { border-radius: 50%; width: 120px; height: 120px; object-fit: cover; }

/* ---- Chat (Campfire look) --------------------------------------------- */
/* Conversation view (design 5388:1613): full-bleed column, messages scroll
   with the page, composer pinned to the bottom edge. */
/* The chat shell's content sits on a charcoal surface, a shade above the
   header, with a hairline seam — subtle depth between chrome and content.
   The charcoal lives on the body so it fills to the bottom edge. */
body:has(.site-main--chat) { background: var(--bg-raised); }
body:has(.site-main--chat) .site-header { border-bottom: 1px solid rgba(255, 255, 255, .05); }
body:has(.chat-room) .site-main { max-width: none; padding: 0; background: none; }
/* The design's purple hue rising from the bottom of the conversation. */
body:has(.chat-room)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,13,20,0) 55%, rgba(93,19,165,.12) 88%, rgba(187,0,255,.1) 100%),
    var(--bg);
}
/* A room is a fixed app frame: the page itself never scrolls (panes do),
   so the header can't be pushed offscreen — and when the phone keyboard
   opens, the visual-viewport controller shrinks the frame via --vvh
   instead of letting iOS scroll the header away. */
body:has(.chat-room) .site-main { overflow: hidden; }
.chat-room {
  display: flex; flex-direction: column;
  /* Fill the pane: the message list scrolls inside its own container (so
     rooms open already at the bottom, pre-paint), and the typing line +
     composer always sit visibly below it. Keyboard shrink comes free —
     the visual-viewport controller resizes <body>, the frame follows. */
  height: 100%;
  min-height: 0;
}
.messages {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 12px 1rem 12px; display: flex; flex-direction: column;
}
.msg { margin-top: 22px; }
/* Slack-style day separators — a muted label between neon hairlines,
   inserted by the messages controller in the viewer's timezone. The lines
   run the brand glow gradient, mirrored so both fade from orange at the
   screen edges into violet beside the label. */
.day-divider { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.day-divider__label { color: var(--text-mid); font-size: .75rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.day-divider::before, .day-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--glow-gradient); opacity: .45; box-shadow: var(--glow-shadow);
}
.day-divider::after { transform: scaleX(-1); }
/* Consecutive messages from the same sender group under one header:
   no repeated avatar/name/time, tight spacing, actions still reachable. */
.msg--continued { margin-top: 6px; }
.msg--continued .avatar { visibility: hidden; height: 0; margin: 0; }
.msg--continued .msg__head { position: absolute; top: 2px; right: 0; }
.msg--continued .msg__name, .msg--continued .msg__head .msg__time { display: none; }
.msg--continued .msg__bubble { margin-top: 0; }
.msg--continued .msg__time--own { display: none; }
.msg--continued { position: relative; }

/* Room header: back | # name | info, with the member count strip below. */
.room-header__title {
  position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.25rem; font-weight: 600; color: var(--heading);
}
.room-header__hash { color: var(--text-muted); margin-right: 2px; }

/* Message anatomy: others get avatar + name/time above a dark bubble with a
   top-left tail; your own ride right in accent orange, time below. */
.msg { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; transition: background .15s ease, box-shadow .15s ease; }
/* Long-press feedback and the sheet's target: the message being acted on
   lifts with a soft ring (shadow spread, so no layout shift). */
.msg--pressed, .msg:has(.msg__actions[open]) {
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .05);
}
.msg .avatar { --avatar-size: 36px; margin-top: 2px; }
.msg__main { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.msg__head { display: flex; align-items: center; gap: 8px; align-self: stretch; }
.msg__name { font-family: var(--font-label); font-size: .875rem; font-weight: 500; color: var(--heading); }
.msg__time { font-family: var(--font-label); font-size: .8125rem; color: var(--text-muted); }
.msg__actions { margin-left: auto; opacity: .6; }
.msg__actions summary { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-mid); }
/* The visual stays 28px; the tappable area meets the 44px floor. */
.msg__actions summary::after { content: ""; position: absolute; inset: -8px; }
.msg__actions summary svg { width: 14px; height: 14px; }
.msg__actions[open] { opacity: 1; }

/* Slack-style message sheet on touch screens: long-press (or the dots)
   raises the menu from the bottom edge — grabber, roomy emoji, full-width
   actions — over a dimmed backdrop. Tapping the backdrop closes it
   (popmenu's outside-click). */
@media (max-width: 640px) {
  .msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* The dim layer lives inside the elevated message's stacking context:
     negative z keeps the acted-on message bright while the fixed overlay
     dims the rest of the screen. */
  .msg__actions[open]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(13, 13, 20, .6);
  }
  .msg__actions .popmenu__panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    min-width: 0; border: none; border-radius: 16px 16px 0 0;
    background: #16161f; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
    padding: 6px 16px calc(10px + env(safe-area-inset-bottom)); gap: 0;
    touch-action: none; /* the sheet is drag-to-dismiss, not a scroller */
  }
  .msg__actions[open] .popmenu__panel { animation: sheet-rise .3s cubic-bezier(.32, .72, .33, 1); }
  .msg__actions[open]::before { animation: sheet-dim .3s ease; }
  @media (prefers-reduced-motion: reduce) {
    .msg__actions[open] .popmenu__panel, .msg__actions[open]::before { animation: none; }
  }
  .msg:has(.msg__actions[open]) { position: relative; z-index: 59; }
  /* WebKit composites the scroller into its own layer, trapping the sheet's
     z-index beneath the later-painted composer — lift the whole scroller
     while a sheet is open so the menu and backdrop win. */
  .messages:has(.msg__actions[open]) { position: relative; z-index: 61; }
  .msg__actions .popmenu__panel::before {
    content: ""; justify-self: center; width: 36px; height: 4px; margin-bottom: 8px;
    border-radius: 2px; background: var(--border);
  }
  .msg__actions .msg__quick-reactions { justify-content: space-around; padding: 0 0 8px; margin-bottom: 4px; }
  .msg__actions .msg__react { font-size: 1.625rem; padding: 6px 9px; }
  .msg__actions .popmenu__item { padding: 10px; font-size: 1rem; }
  .msg__actions .popmenu__item svg { width: 18px; height: 18px; }
}
@keyframes sheet-rise { from { transform: translateY(100%); } }
@keyframes sheet-dim { from { opacity: 0; } }
.msg__bubble {
  margin-top: 4px; padding: 8px 12px; width: fit-content; max-width: 100%;
  background: rgba(0, 0, 0, .5); border: 1px solid #292733;
  border-radius: 12px; border-top-left-radius: 2px;
  font-size: .9375rem; line-height: 1.4; color: #fff; overflow-wrap: anywhere;
}
.msg__bubble a { color: #6ea8ff; }
.msg__bubble .trix-content > :last-child, .msg__bubble .trix-content > :first-child { margin: 0; }
/* Broadcast HTML is viewer-neutral: everything renders, these decide what
   each viewer sees. Ownership (msg--own) is synced client-side from
   data-creator-id; author/room-admin menu items follow .chat-room attrs. */
.msg--own .avatar, .msg--own .msg__name, .msg--own .msg__head > .msg__time { display: none; }
.msg:not(.msg--own) .msg__time--own { display: none; }
.msg:not(.msg--own) .popmenu__item--author { display: none; }
.chat-room[data-message-admin] .popmenu__item--author { display: flex; }
.chat-room:not([data-room-admin]) .popmenu__item--room-admin { display: none; }
.msg--own { justify-content: flex-end; }
.msg--own .msg__main { align-items: flex-end; padding-left: 24px; }
.msg--own .msg__bubble {
  background: var(--accent); border-color: var(--accent);
  border-radius: 12px; border-top-right-radius: 2px; color: #000;
}
.msg--own .msg__bubble a { color: #000; text-decoration: underline; }
.msg__time--own { margin-top: 4px; }

.msg__quick-reactions { display: flex; justify-content: space-between; gap: 2px; padding: 0 4px; }
.msg__react { background: none; border: none; box-shadow: none; filter: none; padding: 6px 7px; font-size: 1.125rem; line-height: 1; border-radius: 6px; }
.msg__react:hover { background: rgba(255, 255, 255, .06); }
/* Inside the message action menu, the emoji strip sits above a hairline. */
.msg__actions .msg__quick-reactions { padding: 0 4px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.msg__actions .popmenu__panel { min-width: 216px; }

/* The composer (design frame 05): one rounded field holding the paperclip,
   the editor and the emoji menu, with a squared orange send beside it and
   the glow-gradient hairline above. */
.composer {
  position: relative;
  background: rgba(13, 13, 20, .72);
  padding: 8px 1rem calc(12px + env(safe-area-inset-bottom));
  width: 100%; max-width: var(--maxw); margin: 0 auto;
}
/* The grid lives on the form (the composer's only child) so the reply/edit
   banner actually gets its gap from the input bar. */
.composer form { display: grid; gap: 10px; }
.composer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: var(--glow-gradient);
}
/* Slack anatomy: the editor gets the full field width up top, the action
   row (attach, emoji — send at the right) runs beneath it. Long edits
   keep a sane, full-width text box. */
.composer__field {
  min-width: 0; padding: 2px 8px 8px;
  border: 1px solid #292733; border-radius: 14px; background: rgba(0, 0, 0, .4);
}
.composer__field:focus-within { border-color: var(--text-muted); }
.composer__toolbar { display: flex; align-items: center; gap: 2px; }
.composer__attach {
  display: grid; place-items: center; width: 38px; height: 36px; flex: none;
  border: none; background: none; color: var(--text-mid); cursor: pointer; border-radius: 8px;
}
.composer__attach:hover { background: rgba(255, 255, 255, .05); }
.composer__attach svg { width: 16px; height: 16px; }
.composer__attachment { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* The optimistic photo bubble: local preview dimmed while uploading, a
   thin progress bar underneath, and a tap-to-dismiss error state. The
   real broadcast message replaces it (matched by client_message_id). */
.msg--pending .msg__image img { opacity: .55; }
.msg__upload { height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.msg__upload-bar { display: block; height: 100%; width: 0%; border-radius: 2px; background: var(--accent); transition: width .2s ease; }
.msg--failed .msg__image img { opacity: .3; }
.msg--failed { cursor: pointer; }
.msg__upload-error { display: block; margin-top: 6px; font-size: .72rem; color: var(--live); }
.msg--failed .msg__upload { height: auto; background: none; }
.composer trix-toolbar { display: none; }
trix-editor.composer__input {
  min-width: 0; min-height: 38px; max-height: 160px; overflow-y: auto;
  padding: 9px 4px 4px; border: none; border-radius: 0;
  background: none; color: var(--heading); font-size: 1rem;
}
trix-editor.composer__input:focus-visible { outline: none; }
trix-editor.composer__input:empty::before { color: var(--text-muted); }
/* Mention/tag chips ride inline in the editor — without this they render
   as block <figure>s with browser-default margins and a caption slot. */
trix-editor.composer__input figure.attachment,
trix-editor.composer__input action-text-attachment {
  display: inline-block; margin: 0 2px; padding: 0; width: auto; max-width: none;
}
trix-editor.composer__input .attachment__caption,
trix-editor.composer__input .attachment__toolbar { display: none; }
.composer__emoji {
  display: grid; place-items: center; width: 38px; height: 36px;
  color: var(--text-mid); cursor: pointer; border-radius: 8px;
}
.composer__emoji:hover { background: rgba(255, 255, 255, .05); }
.composer__emoji svg { width: 17px; height: 17px; }
.composer__emoji-menu { flex: none; }
.composer__emoji-menu .popmenu__panel { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
/* Emoji strips double as popmenu panels (composer smiley, reaction add):
   they lay out as a row, not the panel's default stacked grid. */
.popmenu__panel.msg__quick-reactions { display: flex; padding: 6px; min-width: 0; }
/* Edit mode's red cancel: left of send, with a deliberate 20px gulf so a
   thumb can't hit the wrong one. */
.composer__cancel-edit {
  display: grid; place-items: center; width: 38px; height: 34px; flex: none;
  margin-left: auto; padding: 0; border: none; border-radius: 8px;
  background: var(--red); color: #fff; box-shadow: none; filter: none;
}
.composer__cancel-edit svg { width: 14px; height: 14px; }
.composer__cancel-edit:hover { background: #d40009; }
.composer__cancel-edit[hidden] { display: none; }
.composer__cancel-edit:not([hidden]) + .composer__send { margin-left: 10px; }
.composer__send {
  display: grid; place-items: center; width: 38px; height: 34px; flex: none;
  margin-left: auto; padding: 0; border: none; border-radius: 8px;
  background: var(--accent); color: #000;
}
.composer__send svg { width: 15px; height: 15px; }
.composer__send:hover { background: var(--accent-hover); }
.typing-indicator { min-height: 1.2em; padding: 10px 1rem 8px; max-width: var(--maxw); width: 100%; margin: 0 auto; font-size: .8125rem; font-style: italic; color: var(--text-muted); }

/* Join bar: channels are previewable before joining — the composer's spot
   holds one button instead. */
.join-bar form { margin: 0; }
.join-bar__button { width: 100%; text-transform: none; }

/* Discover rows (Channels tab): name links through to the preview, the
   Join button subscribes in place. */
.chat-row > form { display: contents; }
.channel-info__leave { margin-top: 16px; }

/* ---- Admin ------------------------------------------------------------ */
.admin-nav li, .admin-list li { padding: .4rem 0; display: flex; gap: .75rem; align-items: center; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--bg-raised); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--text-muted); font-size: .8rem; }

.notifications .notification--unread { font-weight: 700; }
.search-results li { padding: .75rem 0; border-bottom: 1px solid var(--border); display: grid; gap: 2px; }
.search-results li a { color: var(--heading); }
.search-results__meta { color: var(--text-muted); font-size: .8125rem; }

@media (max-width: 48rem) {
  .site-nav { flex-wrap: wrap; }
}

/* ---- Bottom tab bar (primary mobile navigation) ------------------------ */
/* Constrained to the same content column as .site-main, centered on wide
   screens. Topped by the design's glow-gradient hairline. */
.tab-bar {
  position: relative; flex: none; z-index: 20;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; background: var(--bg);
  padding: 8px 1px calc(13px + env(safe-area-inset-bottom));
}
/* Neon-purple rail across the top; the active tab's stretch glows orange. */
.tab-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
  background: #993ff2; box-shadow: 0 0 7px 1px rgba(153, 63, 242, .35);
}
/* The segment's ends fade out over the purple rail so the two read as one
   bar; drop-shadow (not box-shadow) makes the glow follow the fade. The
   first and last tabs run solid to the screen edge, fading inward only. */
.tab-bar__tab--active::before {
  content: ""; position: absolute; top: -8px; left: -14px; right: -14px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent) 32%, var(--accent) 68%, transparent);
  filter: drop-shadow(0 0 3px rgba(253, 139, 0, .7)) drop-shadow(0 2px 8px rgba(253, 139, 0, .35));
}
.tab-bar__tab--active:first-child::before {
  left: -1px;
  background: linear-gradient(90deg, var(--accent), var(--accent) 68%, transparent);
}
.tab-bar__tab--active:last-child::before {
  right: -1px;
  background: linear-gradient(90deg, transparent, var(--accent) 32%, var(--accent));
}
.tab-bar__tab {
  position: relative;
  flex: 1; display: grid; gap: 9px; justify-items: center; padding: 5px .25rem 0;
  font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid);
}
.tab-bar__tab svg { width: 20px; height: 20px; }
.tab-bar__tab:hover { text-decoration: none; }
/* Hover colors only where hover exists: on touch, iOS "sticks" :hover to the
   tapped spot, which would repaint the newly-active tab in the hover color. */
@media (hover: hover) {
  .tab-bar__tab:not(.tab-bar__tab--active):hover { color: var(--heading); }
}
.tab-bar__tab--active { color: var(--accent); }

/* ---- Slide-out site menu (native <dialog>) ----------------------------- */
.menu {
  border: none; border-left: 1.5px solid var(--border); padding: 0; margin: 0 0 0 auto; inset: 0;
  height: 100dvh; max-height: 100dvh; width: min(21.5rem, 88vw);
  background:
    linear-gradient(180deg, rgba(13,13,20,0) 66%, rgba(0,0,0,.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(13,13,20,0) 34%),
    var(--bg-raised);
  color: var(--text);
  /* Drawer: slides in from the right edge; allow-discrete keeps the dialog
     displayed while it slides back out on close. */
  transform: translateX(100%);
  /* Exit faster than entry: the base rule times the close, [open] the open. */
  transition: transform .18s ease-in, display .18s allow-discrete, overlay .18s allow-discrete;
}
.menu[open] {
  transform: translateX(0);
  transition: transform .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;
}
/* Navigating from inside: the drawer closes with no exit animation — the
   page crossfade carries the visuals. */
.menu.no-exit, .menu.no-exit::backdrop,
.sheet.no-exit, .sheet.no-exit::backdrop { transition: none; }

/* Freeze the page while the drawer is open; contain keeps the drawer's own
   scroll from chaining back into the page. */
body:has(.menu[open]), body:has(.sheet[open]) { overflow: hidden; }
@starting-style {
  .menu[open] { transform: translateX(100%); }
}
.menu::backdrop {
  background: rgba(13, 13, 20, .66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease-in, display .18s allow-discrete, overlay .18s allow-discrete;
}
.menu[open]::backdrop {
  opacity: 1;
  transition: opacity .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;
}
@starting-style {
  .menu[open]::backdrop { opacity: 0; }
}
.menu__inner { display: flex; flex-direction: column; height: 100%; }
.menu__header {
  display: flex; align-items: center; gap: .75rem;
  padding: 16px 16px 16px 18px; border-bottom: 1.5px solid var(--border);
}
.menu__avatar img, .menu__avatar > span {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); color: #fff; font-weight: 500;
}
.menu__title { color: var(--heading); font-weight: 500; }
.menu__subtitle { color: var(--text-muted); font-size: .8125rem; }
.menu__close { margin-left: auto; }
.menu__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px 0 18px; }
.menu__section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
.menu__section-title::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.15); }
.menu__body .menu__section-title:not(:first-child) { margin-top: 28px; }
.menu__list { display: grid; gap: 12px; }
.menu__list li a { display: flex; align-items: center; gap: 16px; color: var(--heading); font-weight: 500; font-size: 1rem; letter-spacing: .01em; }
.menu__list li a:hover { text-decoration: none; }
@media (hover: hover) {
  .menu__list li a:hover { color: var(--accent); }
}
.menu__icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: rgba(13,13,20,.75); border: 1.5px solid rgba(135,129,150,.35);
  border-radius: 3px; color: var(--text-mid);
}
.menu__icon svg { width: 15px; height: 15px; }
/* The USER section's icon badges run purple (the design's account tint). */
.menu__list--user .menu__icon { color: #993ff2; border-color: rgba(153, 63, 242, .35); }
.menu__footer button svg { width: 15px; height: 15px; }
.menu__chevron { margin-left: auto; color: var(--text); }
.menu__chevron svg { width: 14px; height: 14px; display: block; }
.menu__footer { margin-top: auto; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom)) 18px; display: grid; gap: 12px; }
.menu__signin { text-align: center; font-family: var(--font-label); font-size: .875rem; color: #f5f5f7; margin: 0; }
.menu__signin a { color: #f5f5f7; font-weight: 500; text-decoration: underline; }
.menu__footer-action, .menu__footer form { width: 100%; }
.menu__footer .button, .menu__footer button { width: 100%; text-align: center; }

/* ---- Day switcher (agenda) --------------------------------------------- */
/* The design's DAY_01 / DAY_02 segmented control. */
.day-switcher {
  display: flex; gap: 4px; height: 44px; padding: 3px; margin-bottom: 1.5rem;
  background: var(--bg-ghost); border: 1.5px solid var(--border); border-radius: 6px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.15));
}
.day-switcher__day {
  flex: 1; display: grid; place-items: center; border-radius: 4px;
  font-size: .875rem; font-weight: 500; letter-spacing: .06em; color: var(--text-mid);
  transition: background .18s ease, color .18s ease;
}
.day-switcher__day:hover { text-decoration: none; color: var(--heading); }
.day-switcher__day--selected {
  background: var(--accent); color: #000; filter: drop-shadow(0 4px 2px rgba(0,0,0,.15));
}
.day-switcher__day--selected:hover { color: #000; }

/* ---- Timing bar (time-slot separator) ---------------------------------- */
.time-slot { margin-bottom: 1.5rem; }
.timing-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }
.timing-bar::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.15); order: 2; }
[data-theme="light"] .timing-bar::after { border-top-color: rgba(29,27,37,.2); }
.timing-bar__time, .timing-bar__count {
  font-family: var(--font-label); font-size: .6875rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-mid);
}
.timing-bar__count { order: 3; }

/* ---- Tabs (my schedule) ------------------------------------------------- */
.tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.tabs__tab {
  flex: 1; text-align: center; padding: .55rem .75rem; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted);
  font-weight: 600; text-transform: uppercase; font-size: .8rem;
}
.tabs__tab:hover { text-decoration: none; }
.tabs__tab--active { background: var(--accent); border-color: var(--accent); color: #000; }

/* ---- Coming soon (chat placeholder) -------------------------------------- */
.coming-soon {
  min-height: 60vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 4px; padding: 0 1.5rem;
}
.coming-soon__icon {
  width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  border: 1.5px dashed rgba(253,139,0,.5);
  filter: drop-shadow(0 0 6px rgba(253,139,0,.25));
}
.coming-soon__icon svg { width: 24px; height: 24px; }
.coming-soon h1 { font-size: 1.75rem; margin-bottom: 12px; }
.coming-soon p { color: var(--text); font-size: .9375rem; line-height: 1.5; max-width: 21rem; margin: 0 0 8px; }
.coming-soon__note { color: var(--text-muted); font-size: .75rem; }

/* ---- Empty states -------------------------------------------------------- */
/* Empty states (design 5281:143258): flat and centered — muted icon with a
   faint orange glow, 22px title, quiet body, primary action. */
.empty-state {
  text-align: center; padding: 72px 12px 2rem; color: var(--text);
  display: grid; gap: 12px; justify-items: center;
}
.empty-state__icon { color: var(--text-muted); filter: drop-shadow(0 0 8px rgba(253, 139, 0, .14)); }
.empty-state__icon svg { width: 30px; height: 30px; }
.empty-state__title { margin: 4px 0 0; font-size: 1.375rem; font-weight: 500; color: var(--heading); }
.empty-state p { margin: 0; font-size: .875rem; line-height: 18px; letter-spacing: .01em; color: var(--text); }
.empty-state .button { margin-top: 12px; }

/* ---- Confirmation dialog ------------------------------------------------- */
/* Confirmation sheet (design node 60:10598): grabber, centered copy, Cancel
   against the action, corner sparkle, rising from the bottom edge. */
.dialog {
  border: 1px solid var(--border); border-radius: 12px 12px 6px 6px;
  background: var(--bg-raised); color: var(--text); padding: 0;
  width: min(358px, calc(100vw - 32px));
  margin: auto; /* vertically centered, per the design overlays */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25), 0 1px 16px rgba(0, 0, 0, .2),
              0 0 7px 1px rgba(63, 117, 242, .13), 0 0 7px 1px rgba(41, 39, 51, .2);
  overflow: clip;
  transition: transform .25s ease, opacity .25s ease;
}
.dialog[open] { transform: translateY(0); opacity: 1; }
@starting-style {
  .dialog[open] { transform: translateY(24px); opacity: 0; }
}
.dialog::backdrop {
  background: rgba(13, 13, 20, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 1; transition: opacity .25s ease;
}
@starting-style {
  .dialog[open]::backdrop { opacity: 0; }
}
.dialog__sparkle {
  position: absolute; top: -14px; right: -20px; width: 110px; height: auto;
  mix-blend-mode: lighten; pointer-events: none;
}
.dialog__inner { padding: 5px 13px 17px; display: grid; gap: 24px; justify-items: center; }
.dialog__grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--border); }
.dialog__copy { display: grid; gap: 12px; justify-items: center; }
.dialog__title { margin: 0; font-size: 1.375rem; font-weight: 500; color: var(--heading); text-align: center; }
.dialog__body { margin: 0; font-size: 1rem; line-height: 22px; letter-spacing: .005em; color: var(--text); text-align: center; max-width: 322px; }
.dialog__body:empty { display: none; }
.dialog__actions { display: flex; justify-content: space-between; width: 100%; }

/* ---- Person picker (new DM / group message) ----------------------------- */
.badge--speaker { background: var(--purple); color: #fff; }

/* ---- Chat home (channels + DM list) ------------------------------------- */
.chat-home__actions { display: flex; gap: .6rem; margin-bottom: 1.25rem; }
.chat-home__heading { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-style: normal; margin: 1.25rem 0 .4rem; }
.room-list--home { display: grid; gap: .35rem; }
.room-row__link { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--bg-raised); box-shadow: var(--shadow); color: var(--text); }
.room-row__link:hover { text-decoration: none; }
.room-row__name { font-weight: 700; display: flex; align-items: center; gap: .45rem; }
.room-row__preview { color: var(--text-muted); font-size: .85rem; }
.room-row__time { color: var(--text-muted); font-size: .72rem; }
.room-row--unread .room-row__name { color: var(--accent); }
.room-row__unread-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---- Channel info (design 5388:3205), member lists, directory ----------- */
.channel-info__hero { text-align: center; padding: 16px 0 0; }
.channel-info__tagline { margin: 0 auto; max-width: 36ch; color: var(--text); font-size: 1rem; line-height: 22px; text-wrap: balance; }

.channel-info__actions { display: flex; justify-content: center; gap: 12px; margin: 20px 0; }
.channel-info__actions form { display: contents; }

/* The facts card (design 5388:3219): gold eyebrows over body copy, 12px
   sections, a hairline only under About. */
.channel-info__facts {
  margin: 0 0 16px; padding: 0; overflow: clip;
  background: rgba(13, 13, 20, .75); border: 1px solid var(--border); border-radius: 8px;
}
.channel-info__facts dt {
  padding: 12px 12px 0; margin-bottom: 12px; font-family: var(--font-label);
  font-size: .625rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--eyebrow);
}
.channel-info__facts dd { margin: 0; padding: 0 12px 12px; color: var(--text); font-size: .875rem; line-height: 18px; letter-spacing: .01em; }
.channel-info__facts dd:first-of-type { border-bottom: 1px solid var(--border); }
.channel-info__facts dt.channel-info__facts-minor { text-transform: none; letter-spacing: .02em; font-weight: 500; }
.channel-info__facts a { color: var(--text); }

.pinned-card {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  background: #16161f; border-radius: 4px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, .15);
}
.pinned-card__icon { color: var(--heading); margin-top: 2px; }
.pinned-card__icon svg { width: 11px; height: 11px; }
.pinned-card__label { display: block; margin-bottom: 2px; font-size: .75rem; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: var(--heading); }
.pinned-card__body { margin: 0; color: var(--text); font-size: .75rem; line-height: 16px; letter-spacing: .02em; }

.directory__search { display: flex; gap: .5rem; margin-bottom: 1rem; }
.directory__search input[type="search"] { flex: 1; }

/* ---- Pinned announcement banner (design frame 05) -------------------------
   Raised band: pin + label left, Unpin right; the body runs full width
   below, aligned under the label. The band bleeds edge to edge like the
   composer, but its content holds the same centered column as the
   messages beneath it. */
.pinned-banner:not(:empty) { padding: 12px 0; background: #16161f; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.pinned-banner__inner { display: grid; gap: 4px; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.pinned-banner__head { display: flex; align-items: center; gap: 8px; }
.pinned-banner__head form { display: contents; }
.pinned-banner__icon { display: grid; color: var(--heading); }
.pinned-banner__icon svg { width: 13px; height: 13px; }
.pinned-banner__label { font-size: .875rem; font-weight: 500; color: var(--heading); letter-spacing: .01em; }
.pinned-banner__body { margin-left: 21px; color: var(--text); font-size: .9375rem; line-height: 1.45; }
.pinned-banner__unpin { margin-left: auto; background: none; border: none; box-shadow: none; filter: none; color: var(--text-muted); font-size: .75rem; text-transform: none; font-style: normal; padding: 0; }
.pinned-banner__unpin:hover { background: none; color: var(--heading); }

/* ---- Media & link galleries ---------------------------------------------- */
.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.media-gallery__item { margin: 0; }
.media-gallery__item img { border-radius: var(--radius-sm); width: 100%; height: 8rem; object-fit: cover; }
.media-gallery__item figcaption { color: var(--text-muted); font-size: .72rem; margin-top: .25rem; }
.link-gallery { display: grid; gap: .5rem; margin: 1rem 0; }
.link-gallery__item { background: var(--bg-raised); border-radius: var(--radius-sm); padding: .7rem .9rem; box-shadow: var(--shadow); overflow-wrap: anywhere; }
.link-gallery__meta { color: var(--text-muted); font-size: .75rem; }

/* ---- Message interactions ------------------------------------------------ */
.popmenu__item.popmenu__item--danger { color: #ff6b76; }
.popmenu__item.popmenu__item--danger svg { color: #ff6b76; }

.msg__quote { display: grid; gap: 2px; border-left: 3px solid var(--border); padding: 4px 10px; margin: 4px 0 0; font-size: .8125rem; color: var(--text-muted); }
.msg__quote:hover { text-decoration: none; background: rgba(255, 255, 255, .04); }
.msg__quote strong { color: var(--text-mid); }

/* Reaction pills (design: dark pill, thin border, count in muted gray) with
   the dashed circle for adding yours. */
.reactions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.reactions form { margin: 0; }
.reactions__pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0, 0, 0, .5); border: 1px solid #292733; border-radius: 12px;
  padding: 3px 8px; box-shadow: none; filter: none;
  font-size: .8125rem; font-style: normal; color: var(--text-mid); text-transform: none;
}
.reactions__pill--mine { border-color: var(--accent); }
.reactions__count { font-size: .8125rem; color: var(--text-mid); }
.reactions__add {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px dashed rgba(255, 255, 255, .12); border-radius: 50%;
  color: var(--text-mid); cursor: pointer;
}
.reactions__add svg { width: 10px; height: 10px; }
.reactions__add:hover { border-color: var(--text-mid); color: var(--heading); }
.reactions__add-menu .popmenu__panel { right: auto; left: 0; min-width: 0; }

.msg__image img { border-radius: var(--radius-sm); max-height: 20rem; margin-top: 4px; }
.msg__attachment { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: inherit; }
.msg__attachment svg { width: 14px; height: 14px; flex: none; }
.msg__attachment-size { color: var(--text-muted); font-size: .8125rem; }
.msg--own .msg__attachment-size { color: rgba(0, 0, 0, .6); }

.msg__unfurl {
  display: grid; gap: 2px; margin-top: 6px; padding: 10px 12px; max-width: 28rem;
  background: rgba(0, 0, 0, .5); border: 1px solid #292733;
  border-left: 3px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
}
.msg__unfurl:hover { text-decoration: none; }
.msg__unfurl-image { max-height: 10rem; object-fit: cover; border-radius: 6px; }
.msg__unfurl-title { font-weight: 600; font-size: .9375rem; color: var(--heading); }
.msg__unfurl-description { color: var(--text-muted); font-size: .8125rem; }

.mention { background: color-mix(in srgb, var(--purple) 14%, transparent); border-radius: 4px; padding: 0 .2rem; font-weight: 600; }
/* #talk tags read as chips, not blue links, and carry through to the session. */
.msg__bubble a.mention--talk { color: inherit; }
.msg__bubble a.mention--talk:hover { text-decoration: underline; }
/* The autocomplete floats above the composer — it never pushes the input. */
.composer form { position: relative; }
.mentions-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30;
  background: #16161f; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); padding: 6px; display: grid; gap: 2px;
  max-height: 40vh; overflow-y: auto;
}
.mentions-menu button { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; width: 100%; background: none; border: none; box-shadow: none; filter: none; text-align: left; padding: 10px 12px; font: inherit; font-size: .9375rem; color: var(--heading); text-transform: none; font-style: normal; border-radius: 8px; }
.mentions-menu button:hover { background: rgba(255, 255, 255, .05); }
.mentions-menu button small { margin-left: auto; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
/* Colour says what it is: sessions read orange, channels purple. */
.mentions-menu button[data-kind="session"], .mentions-menu button[data-kind="session"] small { color: var(--accent); }
.mentions-menu button[data-kind="channel"], .mentions-menu button[data-kind="channel"] small { color: #b7a5f7; }

/* Reply state: a compact quote block over the composer — who and what
   you're replying to, with the cancel pinned right. */
.composer__reply-banner { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: #16161f; border-left: 3px solid var(--border); border-radius: 8px; }
.composer__reply-banner[hidden] { display: none; }
.composer__reply-quote { flex: 1; min-width: 0; display: grid; gap: 2px; }
.composer__reply-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-label); font-size: .8125rem; color: var(--text-muted); }
.composer__reply-label strong { color: var(--text-mid); font-weight: 600; }
.composer__reply-label svg { width: 11px; height: 11px; margin-right: 2px; vertical-align: -1px; }
.composer__reply-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--text); }
.composer__reply-cancel {
  position: relative; flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; margin: -6px -4px -6px 0; border-radius: 8px;
  background: none; border: none; box-shadow: none; filter: none;
  color: var(--text-muted); font-size: 1.0625rem; line-height: 1; padding: 0;
}
/* Visual 36px; the tappable area meets the 44px floor. */
.composer__reply-cancel::after { content: ""; position: absolute; inset: -4px; }
.composer__reply-cancel svg { width: 16px; height: 16px; }
.composer__reply-cancel:hover { background: rgba(255, 255, 255, .06); color: var(--heading); }

/* ---- First-run layout (welcome, auth, profile setup, email confirmation) - */
.first-run__logo { display: flex; justify-content: center; padding-top: 16px; }
.first-run__logo img { height: 63px; width: auto; }
.first-run__main { max-width: 768px; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* ---- Welcome (First App Slide) ------------------------------------------- */
/* The lockup is the branding; hide the layout's logo header behind it. */
body:has(.welcome) .first-run__logo { display: none; }
.welcome {
  min-height: calc(100svh - 5rem); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px; text-align: center;
  padding-top: 1rem;
}
.welcome__lockup { display: grid; gap: 18px; justify-items: center; margin-bottom: 24px; }
.welcome__eyebrow, .welcome__dates {
  font-family: var(--font-label); font-weight: 700; color: var(--heading);
  font-size: .8rem; letter-spacing: .35em; margin: 0; text-indent: .35em;
}
.welcome__logo { width: min(290px, 76vw); height: auto; }
.welcome__cta { width: 230px; }
.welcome__signin { color: var(--text); font-size: .875rem; margin: 0; }
.welcome__signin a, .welcome__guest a { color: var(--heading); text-decoration: underline; }
.welcome__guest { margin: 2.5rem 0 0; font-size: .875rem; }

/* ---- Onboarding tutorial (full-screen slides from the Figma design) ------ */
.onboarding {
  position: relative; min-height: 100svh; overflow: hidden; color: #fff;
  font-family: "Clash Grotesk", var(--font-sans);
  background:
    linear-gradient(180deg, rgba(13,13,20,0) 66%, rgba(0,0,0,.2) 100%),
    linear-gradient(169deg, rgba(22,22,31,.1) 40%, rgba(93,19,165,.06) 79%, rgba(187,0,255,.1) 100%),
    #0d0d14;
}
.onboarding__logo { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); height: 63px; width: auto; z-index: 2; }
.onboarding__slide { position: absolute; inset: 0; }
/* Art keeps the design's 390px phone composition, centered on any screen. */
.onboarding__scene { position: absolute; left: 50%; transform: translateX(-50%); width: 390px; height: 100%; }
.onboarding__hat { position: absolute; left: -4px; top: 137px; width: 297px; height: auto; }
.onboarding__cactus { position: absolute; left: 171px; top: 299px; width: 160px; height: auto; }
/* Capped to the same content column as the card; rounded like the design's photo card. */
.onboarding__photo { position: absolute; inset: 0; margin: 0 auto; max-width: var(--maxw); width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.onboarding__shade { position: absolute; inset: 0; margin: 0 auto; max-width: var(--maxw); background: linear-gradient(180deg, rgba(13,13,20,0) 55%, rgba(0,0,0,.6) 100%); border-radius: 20px; }
.onboarding__polaroid {
  position: absolute; width: 232px; height: 207px; object-fit: cover; border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,.25), 4px 4px 10px rgba(0,0,0,.25);
}
.onboarding__polaroid--left { left: -60px; top: 153px; transform: rotate(4.8deg); }
.onboarding__polaroid--right { left: 188px; top: 168px; transform: rotate(-4.9deg); }
.onboarding__polaroid--bottom { left: 60px; top: 301px; transform: rotate(-10.4deg); }

.onboarding__card {
  position: absolute; left: 16px; right: 16px; bottom: 60px; margin: 0 auto; max-width: var(--maxw);
  display: grid; gap: 24px; justify-items: center; text-align: center;
  padding: 30px 14px 18px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.06); background: rgba(13,13,20,.75);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.onboarding__card h1 { margin: 0; font-size: 28px; font-weight: 500; font-style: normal; color: #fff; }
.onboarding__card p { margin: 0; font-size: 16px; line-height: 22px; letter-spacing: .005em; color: #bbb; }
.onboarding__icon { width: 30px; height: 30px; }
.onboarding__icon--info { color: #3c51ed; filter: drop-shadow(0 0 4px rgba(93,19,165,.35)); }
.onboarding__icon--purple { color: #993ff2; filter: drop-shadow(0 0 4px rgba(93,19,165,.35)); }
.onboarding__icon--orange { color: #fd8b00; filter: drop-shadow(0 0 4px rgba(253,139,0,.35)); }

.onboarding__actions { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.onboarding__actions--center { justify-content: center; }
.onboarding__actions form { display: contents; } /* button_to (Get Started) sits in the flex row */
.onboarding__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 24px;
  border: none; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; font-style: normal;
  letter-spacing: .06em; text-transform: capitalize; text-decoration: none;
}
.onboarding__btn--primary {
  background: #fd8b00; color: #000;
  box-shadow: inset 0 0 8px rgba(253,139,0,.06); filter: drop-shadow(0 0 4px rgba(253,139,0,.14));
}
.onboarding__btn--primary:hover { background: #ffa02e; text-decoration: none; }
.onboarding__btn--ghost { background: rgba(255,255,255,.08); color: #fff; }
.onboarding__btn--ghost:hover { background: rgba(255,255,255,.14); }

.onboarding__progress { position: absolute; bottom: 24px; left: 16px; right: 16px; margin: 0 auto; max-width: var(--maxw); display: flex; gap: 8px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.15)); }
.onboarding__progress span { flex: 1; height: 4px; border-radius: 100px; background: #878196; }
.onboarding__progress .onboarding__segment--active {
  background: linear-gradient(90deg, #cc8733 0%, #995cd6 50%, #5463d4 100%);
  box-shadow: 0 0 7px 1px rgba(253,139,0,.19), 0 0 7px 1px rgba(153,63,242,.13);
}

@keyframes onboarding-float { from { translate: 0 0; } to { translate: 0 -8px; } }
.onboarding__hat, .onboarding__cactus { animation: onboarding-float 3s ease-in-out infinite alternate; }
.onboarding__cactus { animation-delay: 1.5s; }
html[data-motion="reduced"] .onboarding__hat,
html[data-motion="reduced"] .onboarding__cactus { animation: none; }

/* ---- Danger button + page dialogs ---------------------------------------- */
.button--danger { background: var(--red); color: #fff; }
.dialog--page { position: static; margin: 3rem auto; display: block; }

/* ---- Toggle switches (settings screens) ----------------------------------- */
.toggle-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-raised); border-radius: var(--radius-sm); padding: .9rem 1rem; box-shadow: var(--shadow); margin-bottom: .6rem; }
.toggle-card__text { display: grid; gap: .1rem; }
.toggle-card__hint { color: var(--text-muted); font-size: .82rem; }
.toggle-card__note { margin-top: .35rem; }
.toggle-card__note--alert { color: var(--live); }
.toggle-card__device { margin-top: .5rem; justify-self: start; font-size: .82rem; padding: .4rem .8rem; }
.toggle { position: relative; display: inline-block; flex: none; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track { display: block; width: 2.6rem; height: 1.45rem; border-radius: var(--pill); background: var(--border); transition: background .15s; position: relative; }
.toggle__track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(1.15rem); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Accessibility preferences (html[data-*] set from user/cookie) ------- */
[data-text-size="large"] { font-size: 112.5%; }
[data-text-size="x_large"] { font-size: 125%; }
[data-contrast="increased"] {
  --border: #6f6a85; --text-muted: #cfc9e0; --shadow: none;
}
[data-contrast="increased"][data-theme="light"], [data-theme="light"][data-contrast="increased"] {
  --border: #9aa0ab; --text-muted: #3f4653;
}
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation: none !important; transition: none !important;
}

.segmented { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-width: 24rem; }
.segmented__option { flex: 1; }
.segmented__option input { position: absolute; opacity: 0; }
.segmented__option span { display: block; text-align: center; padding: .55rem .5rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; cursor: pointer; background: var(--bg-raised); color: var(--text-muted); }
.segmented__option input:checked + span { background: var(--accent); color: #000; }
.segmented__option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- Credits (Baytek page) --------------------------------------------- */
.credits {
  position: relative; display: grid; gap: 24px; justify-items: center;
  text-align: center; padding: 1.5rem 0 2rem;
}
/* The design's "Lines Rounded" backdrop: a 25px rounded-square tile masking
   a diagonal color sweep (10% opacity) behind the intro, fading out before
   the attribution cards. */
.credits { isolation: isolate; }
.credits::before {
  content: ""; position: absolute; top: -1.5rem; left: 50%; height: 700px;
  width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: linear-gradient(133deg, #667a9c 0%, #8a6d91 26%, #423a49 49%, #e76547 70%, #423a49 100%);
  opacity: .1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Crect x='1' y='1' width='23' height='23' rx='4' fill='none' stroke='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Crect x='1' y='1' width='23' height='23' rx='4' fill='none' stroke='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 25px 25px; mask-size: 25px 25px;
}
/* The design's grid fade-out band. */
.credits::after {
  content: ""; position: absolute; top: calc(700px - 1.5rem - 120px); left: 50%; height: 120px;
  width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,13,20,0), var(--bg));
}
.credits__logo { width: 135px; height: auto; }
.credits__tagline {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .875rem; color: #423a49; background: #fff;
  border-radius: 8px; padding: .45rem 1rem; margin: 0; max-width: 100%;
}
.credits__copy {
  font-family: var(--font-label); font-size: .875rem; line-height: 20px;
  color: var(--text); width: min(358px, 100%); text-align: left;
}
.credits__copy p { margin-bottom: 10px; }
.credits__copy a { color: var(--link); font-weight: 600; text-decoration: underline; }
.credits__socials { display: flex; gap: 12px; }
.credits__socials a {
  width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center;
  background: var(--accent); color: #000;
  box-shadow: inset 0 0 8px rgba(253,139,0,.06); filter: drop-shadow(0 0 4px rgba(253,139,0,.14));
}
.credits__socials a:hover { background: var(--accent-hover); }
.credits__socials svg { width: 18px; height: 18px; }

/* Hand-written detour into the attribution cards. */
.credits__more { display: grid; justify-items: center; gap: 10px; margin-top: 16px; }
.credits__script {
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 1rem; line-height: 1.1; color: var(--accent); margin: 0;
  transform: rotate(-5deg);
}
.credits__arrow { width: 24px; height: 60px; }

.credit-card {
  width: min(358px, calc(100vw - 32px)); text-align: left;
  background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 14.5px; display: grid; gap: 8px; justify-items: start;
}
.credit-card__eyebrow {
  font-family: var(--font-label); font-size: .6875rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin: 0;
}
.credit-card__title { font-family: var(--font-label); font-size: 1.125rem; font-weight: 500; margin: 0; }
.credit-card__body { font-family: var(--font-label); font-size: .875rem; line-height: 20px; color: var(--text); margin: 0 0 8px; }
.credit-card__link { font-family: var(--font-label); font-size: .875rem; font-weight: 500; color: var(--heading); text-decoration: underline; }

.credits__footnote {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .75rem; color: var(--text-muted); margin: 4px 0 0;
}

/* ---- Related sessions on talk detail -------------------------------------- */
.talk__related { margin-top: 2rem; }
.talk-card--related { padding: .9rem 1.1rem; }

/* ---- Chat entry screen (welcome card, channels, M&G/Directory rows) ------ */
.chat-entry { display: grid; gap: .75rem; }
.chat-entry__card { background: var(--bg-raised); border-radius: var(--radius); padding: 1.5rem 1.25rem; box-shadow: var(--shadow); text-align: center; }
.chat-entry__card h1 { margin-bottom: .35rem; }
.chat-entry__intro { color: var(--text-muted); }
.chat-entry__heading { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mid); font-style: normal; text-align: left; margin: 1.25rem 0 .25rem; }
.chat-entry__list { text-align: left; }
.chat-entry__row { display: flex; align-items: center; gap: .6rem; padding: .65rem .35rem; color: var(--text); font-weight: 700; border-bottom: 1px solid var(--border); }
.chat-entry__list li:last-child .chat-entry__row { border-bottom: none; }
.chat-entry__row:hover { text-decoration: none; background: var(--bg); }
.chat-entry__row--card { background: var(--bg-raised); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); border-bottom: none; }
.chat-entry__name { flex: 1; }
.chat-entry__count { background: var(--accent); color: #000; border-radius: var(--pill); font-size: .72rem; padding: .05rem .5rem; font-weight: 700; }
.chat-entry__chevron { color: var(--text-muted); font-size: 1.1rem; }
.chat-entry__new-room { text-align: left; margin: .5rem 0 0; font-size: .85rem; }


/* ---- Card chrome: the design's "Card style 1" ---------------------------- */
/* Live sessions only (design 137:33516): the gradient stroke (orange →
   purple → blue) with the dual neon glow marks a session that's on right
   now; every other card keeps the plain frame. The gradient lives in
   border-box behind a padding-box surface fill so corners stay clean. */
.talk-card--live {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    linear-gradient(135deg, #cc8733, #995cd6 52%, #5463d4) border-box;
  box-shadow: 0 0 7px 1px rgba(253, 139, 0, .19), 0 0 7px 1px rgba(153, 63, 242, .125);
}

/* ---- Notifications sheet (slides down from the bell) -------------------- */
.sheet {
  border: none; padding: 0; margin: 0; inset: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
  background: linear-gradient(180deg, #0d0d14 0%, #080911 100%);
  color: var(--text);
  transform: translateY(-100%);
  /* Exit faster than entry, matching the menu drawer. */
  transition: transform .18s ease-in, display .18s allow-discrete, overlay .18s allow-discrete;
}
.sheet[open] {
  transform: translateY(0);
  transition: transform .3s ease, display .3s allow-discrete, overlay .3s allow-discrete;
}
@starting-style {
  .sheet[open] { transform: translateY(-100%); }
}
/* The design's 2px glow hairline at the sheet's bottom edge. */
.sheet::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 2px;
  background: #993ff2; box-shadow: 0 0 7px 1px rgba(153, 63, 242, .35);
}
.sheet__inner { display: flex; flex-direction: column; height: 100%; max-width: var(--maxw); margin: 0 auto; }
.sheet__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(12px + env(safe-area-inset-top)) 1rem 4px;
}
.sheet__header h1 { margin: 0; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 1rem calc(24px + env(safe-area-inset-bottom)); }

/* ---- Notification rows (the toast components, stacked) ------------------- */
.noti-group { margin-bottom: 24px; }
.noti-group__label--new { color: var(--eyebrow); }
.noti-group__list { display: grid; gap: 12px; }
.noti {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px;
  padding: 10px 14px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(13,13,20,.75); color: var(--heading);
  font-size: .875rem; line-height: 18px; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.noti > svg { width: 15px; height: 15px; flex: none; color: var(--text-mid); }
/* Rows with a destination read as rows, not blue links. */
a.noti { color: var(--text); }
a.noti:hover { text-decoration: none; background: rgba(255, 255, 255, .03); }
.noti__text {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.noti__text strong { font-weight: 500; }
/* Starting soon — purple. */
.noti--reminder {
  border-color: rgba(153, 63, 242, .35);
  background: linear-gradient(0deg, rgba(153,63,242,.1), rgba(153,63,242,.1)), rgba(0,0,0,.4);
}
.noti--reminder > svg { color: #993ff2; }
/* Chat — orange. */
.noti--chat {
  border-color: rgba(253, 139, 0, .35);
  background: linear-gradient(0deg, rgba(253,139,0,.1), rgba(253,139,0,.1)), rgba(0,0,0,.4);
}
.noti--chat > svg { color: var(--accent); }

.noti-empty { text-align: center; display: grid; gap: 4px; justify-items: center; padding-top: 18vh; }
.noti-empty svg { width: 28px; height: 28px; color: var(--text-mid); margin-bottom: 12px; }
.noti-empty h2 { font-size: 1.25rem; margin: 0; }
.noti-empty p { color: var(--text-muted); font-size: .875rem; margin: 0 0 16px; }

/* Skeleton rows while the notifications frame loads. */
.noti-skeleton {
  height: 52px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Email confirmation gate --------------------------------------------- */
.confirm {
  position: relative; display: grid; gap: 32px; justify-items: center;
  text-align: center; padding: 158px 16px 0; max-width: 390px; margin: 0 auto;
}
.confirm__icon { width: 56px; height: auto; overflow: visible; }
.confirm__copy { display: grid; gap: 12px; justify-items: center; }
.confirm__copy h1 { margin: 0; }
.confirm__copy p { margin: 0; font-size: 1rem; line-height: 22px; color: var(--text); max-width: 326px; }
.confirm__copy .confirm__caption { font-size: .75rem; line-height: normal; color: var(--text-muted); }
.confirm__actions { display: grid; gap: 12px; justify-items: center; }
.confirm__logout { margin: 0; font-size: 1rem; line-height: 22px; color: var(--text); display: flex; gap: .35ch; align-items: baseline; }
/* The log out is a DELETE, so it's a button dressed as the design's link. */
.confirm__logout form { display: contents; }
.confirm__logout button {
  background: none; border: none; padding: 0; box-shadow: none; filter: none;
  color: var(--heading); font-size: 1rem; font-weight: 500; text-decoration: underline;
  letter-spacing: normal; text-transform: none;
}
.confirm__logout button:hover { background: none; color: var(--accent); }

/* ---- Profile setup form (design node 5305:984954) ------------------------ */
.profile-setup__title { font-size: 1.75rem; }
.form-section { display: grid; gap: 15px; margin-bottom: 32px; }
.form-section h2 { font-size: 1rem; font-weight: 500; margin: 0 0 4px; }
.form-section .field { margin-bottom: 0; }
.avatar-upload { display: flex; align-items: center; gap: 24px; margin: 24px 0 32px; }
.avatar-upload__preview {
  width: 60px; height: 60px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-ghost); color: var(--text-mid);
  box-shadow: inset 0 0 8px rgba(255,255,255,.06), 0 0 8px rgba(255,255,255,.02);
}
.avatar-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload__preview svg { width: 22px; height: 22px; }
/* The email field is the account's — locked, with the design's blue check. */
.field__control--approved input:disabled { color: var(--text-mid); }
.field__control--approved > svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #3c51ed; filter: drop-shadow(0 2px 5px rgba(0,0,0,.15));
}
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 4px 0; }
.form-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 8px; }

/* Inline field errors (sign-up error frames): red caption under the field. */
.field .field__error, .field__error { color: #ff6b76; font-size: .8125rem; }

/* ---- My Profile (design node 5240:144443) --------------------------------- */
.profile-card--page { margin-top: 26px; padding: 24px 16px 20px; gap: 20px; }
.profile-card__portrait { position: relative; flex: none; }
/* The hat perches on the avatar's rim, brim forward. */
.profile-card__hat {
  position: absolute; top: -24px; left: -14px; width: 66px; height: auto;
  transform: rotate(-9deg); pointer-events: none; z-index: 1;
}
.profile-card__header { display: flex; align-items: center; gap: 24px; }
.profile-card__avatar {
  width: 88px; height: 88px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--purple); color: #fff;
  font-size: 20px; font-weight: 500; letter-spacing: 2px;
  filter: drop-shadow(0 4px 2px rgba(0,0,0,.15));
}
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card__name { font-size: 1.75rem; font-weight: 500; line-height: 1.1; margin: 0 0 8px; }
.profile-card__role { color: var(--text); font-size: 1rem; line-height: 22px; margin: 0; }
.profile-card__about { display: grid; gap: 12px; padding-top: 12px; }
.profile-card__bio p { color: var(--text); font-size: 1.125rem; line-height: 1.6; letter-spacing: .01em; max-width: 65ch; margin: 0 0 14px; }
.profile-card__bio p:last-child { margin-bottom: 0; }
.profile-card--page .social-row { padding-top: 20px; margin-bottom: 0; flex-wrap: wrap; align-items: center; }
.profile-card__actions { margin-top: 24px; }

/* Neutral outline button (the design's cancel style). */
.button--cancel {
  background: transparent; color: var(--text-muted); border: 1.5px solid var(--border);
  box-shadow: none; filter: none;
}
.button--cancel:hover { background: var(--bg-ghost); }

.profile-card__bio--empty p { color: var(--text-muted); font-style: normal; }

/* Character counter under limited fields. */
.field__count { font-family: var(--font-label); font-size: .75rem; color: var(--text-muted); justify-self: end; }
.field__count--limit { color: var(--live); }

/* ---- Account settings ---------------------------------------------------- */
.form-actions--single { justify-content: flex-start; }
.danger-zone { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); display: grid; gap: 4px; justify-items: start; }
.danger-zone h2 { font-size: 1.125rem; margin: 0 0 4px; }
.danger-zone p { color: var(--text-muted); font-size: .875rem; line-height: 1.5; margin: 0 0 16px; }

/* ---- App Information (design node 5294:12256) ----------------------------- */
.about-block { display: grid; gap: 12px; margin: 8px 0 28px; }
.about-block h2 { font-size: 1.375rem; margin: 0; }
.about-block p { color: var(--text); font-size: 1.125rem; line-height: 1.6; letter-spacing: .01em; max-width: 65ch; margin: 0; }

/* Sponsor card: blue glow bar on the left edge. */
.sponsor {
  position: relative; overflow: hidden; margin-bottom: 28px;
  background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 18px 16px 18px 20px; display: grid; gap: 12px;
}
.sponsor::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: #3c51ed; box-shadow: 0 0 6px 1px rgba(60, 81, 237, .35);
}
.sponsor__eyebrow { color: #7785f2; }
.sponsor__name-row { display: flex; align-items: baseline; gap: 8px; }
.sponsor__name { font-size: 1.375rem; margin: 0; }
.sponsor__detail { color: var(--text); font-size: .875rem; letter-spacing: .01em; }
.about-version {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .75rem; color: var(--text-muted); margin: 28px 0 0;
}

/* Offline fallback ---------------------------------------------------- */

.offline {
  min-height: 70svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  text-align: center;
  padding: 32px 16px;
}
.offline__ruby { width: 190px; height: auto; animation: offline-float 3.2s ease-in-out infinite; }
.offline__title {
  font-family: var(--font-label);
  font-size: clamp(1.4rem, 6.9vw, 1.75rem); font-weight: 500; color: var(--heading); margin: 0;
  white-space: nowrap;
}
.offline p { margin: 0; }
.offline__lead { font-family: var(--font-label); font-size: 1rem; line-height: 22px; color: var(--text); }
.offline__hint {
  font-family: var(--font-label);
  font-size: .75rem; line-height: 18px; color: var(--text-muted); max-width: 320px;
  margin-top: -16px;
}
.offline__retry { min-width: 140px; }
.offline__tagline {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .6875rem; letter-spacing: 2px; text-transform: uppercase; color: #6b6675;
}

@keyframes offline-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .offline__ruby { animation: none; }
}

/* Pull-to-refresh (design node 5534:40835) ------------------------------ */

/* Chrome Android's native gesture full-reloads; ours takes over in the app. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: contain; }
}

.ptr {
  position: fixed; top: calc(env(safe-area-inset-top) + 92px); left: 50%; z-index: 60;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  opacity: 0; pointer-events: none;
}
.ptr[data-state] { opacity: 1; }
.ptr[data-state="done"] { animation: ptr-fade .8s ease forwards; }

.ptr__gem { position: relative; width: 42px; height: 44px; }
.ptr[data-state="pulling"] .ptr__gem {
  transform: scale(calc(.45 + .55 * var(--progress, 0)));
  opacity: calc(.3 + .7 * var(--progress, 0));
}
.ptr[data-state="done"] .ptr__gem { display: none; }
.ptr__ruby { display: block; width: 100%; height: 100%; }
.ptr[data-state="refreshing"] .ptr__ruby { animation: ptr-spin 1s linear infinite; }

/* Refreshing echoes: ghost copies pulse outward at 70% and 35%. */
.ptr__ghost {
  position: absolute; inset: 0; opacity: 0;
  background: url("/assets/refresh-ruby-014950dc.png") center / contain no-repeat;
}
.ptr[data-state="refreshing"] .ptr__ghost--near { animation: ptr-echo 1s ease-out infinite; }
.ptr[data-state="refreshing"] .ptr__ghost--far { animation: ptr-echo 1s ease-out infinite .35s; }

.ptr__label {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .6875rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.ptr[data-state="refreshing"] .ptr__label { color: var(--text-muted); }
.ptr[data-state="done"] .ptr__label { color: var(--eyebrow); }

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}
@keyframes ptr-echo {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes ptr-fade {
  to { opacity: 0; }
}

/* The design's reduced-motion call: fade instead of spinning. */
@media (prefers-reduced-motion: reduce) {
  .ptr[data-state="refreshing"] .ptr__ruby { animation: ptr-breathe 1.2s ease-in-out infinite; }
  .ptr[data-state="refreshing"] .ptr__ghost { animation: none; }
}
@keyframes ptr-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Speaker profile (design node 5240:144321) ----------------------------- */

.speaker-hero { display: flex; align-items: center; gap: 24px; margin: 20px 0 4px; }
.speaker-hero__avatar-wrap { position: relative; flex: none; }
.speaker-hero__avatar {
  display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: var(--bg-ghost);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .06), 0 0 8px rgba(255, 255, 255, .02);
}
.speaker-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker-hero__name { font-size: 1.75rem; margin: 0 0 6px; }
.speaker-hero__role { margin: 0; font-size: 1rem; line-height: 22px; color: var(--text); display: flex; gap: 8px; }

.speaker-about { display: grid; gap: 10px; padding-top: 16px; margin-bottom: 20px; }
.speaker-about__bio p { margin: 0 0 .6em; font-size: 1.125rem; line-height: 1.6; color: var(--text); letter-spacing: .01em; max-width: 65ch; }
.speaker-about__bio p:last-child { margin-bottom: 0; }

/* Square social buttons (design Social_Btn): ghost squares, and the
   paper-plane message variant with the secondary orange border. */
.social-row { display: flex; gap: 12px; margin: 0 0 28px; }
.social-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: var(--bg-ghost); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); box-shadow: none; filter: none;
  position: relative;
}
/* Visual stays the design's 40px; the tappable area meets Apple's 44pt+. */
.social-btn::after { content: ""; position: absolute; inset: -4px; }
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { text-decoration: none; color: var(--heading); }
.social-btn--message {
  background: var(--bg-raised); border: 1px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 4px rgba(253, 139, 0, .14);
}
.social-row form { display: contents; }

/* Gradient-stroke button (design 40:1497): transparent body, glow-gradient
   border, white label, twin orange/purple glow. */
.button--gradient {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--glow-gradient) border-box;
  color: #fff;
  box-shadow: 0 0 7px 1px rgba(253, 139, 0, .19), 0 0 7px 1px rgba(153, 63, 242, .13);
  filter: none;
}
.button--gradient:hover { background: linear-gradient(var(--bg-ghost), var(--bg-ghost)) padding-box, var(--glow-gradient) border-box; }
.button--gradient svg { width: 13px; height: 13px; color: var(--accent); }
/* Labeled buttons riding the social row match its 40px squares. */
.social-row .button { height: 40px; padding: 0 16px; font-size: .875rem; }
.social-row .button svg { width: 13px; height: 13px; }
/* Rows wrap on narrow screens without breaking alignment. */
.social-row { flex-wrap: wrap; align-items: center; }

/* Related/upcoming session cards (Schedule-detail Related event). */
.talk__subheading { font-size: 1.125rem; font-weight: 500; color: var(--heading); margin: 0 0 12px; }
.related-list { display: grid; gap: 12px; }
.related-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-raised); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 17px 14px; color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.related-card:hover { text-decoration: none; border-color: #3a3747; }
.related-card__body { display: grid; gap: 8px; min-width: 0; flex: 1; }
.related-card__title { margin: 0; font-size: 1.125rem; font-weight: 500; color: var(--heading); }
.related-card__meta { margin: 0; font-size: .8125rem; line-height: 18px; letter-spacing: .02em; color: var(--text); display: flex; gap: 4px; flex-wrap: wrap; }
.related-card__dot { color: var(--text-muted); opacity: .66; }
.related-card__chevron { color: var(--text); filter: drop-shadow(0 0 3px rgba(253, 139, 0, .38)); flex: none; }
.related-card__chevron svg { width: 18px; height: 18px; }

.speaker-sessions { margin-top: 4px; }

/* Attendance control, in-schedule state (design 5281:143423): inert Added
   chip beside the red trash button. */
.attendance { display: inline-flex; gap: 12px; align-items: center; }
.talk > .attendance { margin: 8px 0 32px; }
.attendance form { display: contents; }
.attendance__state { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.attendance__state svg { width: 11px; height: 11px; }

/* My Schedule variants of the compact card (design 5281:143340). */
.related-card__eyebrow { display: flex; align-items: center; gap: 10px; }
.related-card--muted .talk-card__room { color: var(--text-muted); }
.related-card--muted { border-color: rgba(255, 255, 255, .06); }
.related-card--live {
  border-color: #7a55d4;
  box-shadow: 0 0 7px 1px rgba(153, 63, 242, .22), 0 2px 10px rgba(0, 0, 0, .15);
}

/* Turbo's progress bar (shows after 500ms on slow connections): neon orange
   with a glow so it reads on the dark theme — the default blue vanishes. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #995cd6);
  box-shadow: 0 0 8px 1px rgba(253, 139, 0, .45);
}

/* Chat shell (design 5334:154192) --------------------------------------- */

/* Full-bleed rows: avatar/channel dot, name, unread badge or quiet glyph. */
.chat-rows { margin: 8px -1rem 0; }
.chat-row {
  display: flex; align-items: center; gap: 16px; min-height: 62px;
  padding: 12px 1rem; color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.chat-row:hover { text-decoration: none; background: rgba(255, 255, 255, .02); }
.chat-row__name { flex: 1; min-width: 0; font-size: 1rem; font-weight: 500; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row__glyph { color: var(--text-mid); }
.chat-row__glyph svg { width: 20px; height: 20px; }
.chat-row__avatars { display: flex; flex: none; }
.chat-row__avatars .avatar + .avatar { margin-left: -10px; }

.avatar {
  --avatar-size: 30px;
  width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%;
  overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--bg-ghost);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, .06), 0 0 0 2px var(--bg);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--initials span { font-size: calc(var(--avatar-size) * .38); font-weight: 600; color: #fff; }
.avatar--initials { background: var(--blue, #3c51ed); }
.avatar--default { color: var(--text-mid); }
.avatar--default svg { width: 55%; height: 55%; }

/* Channel dots: the design's colored circles cycling a small palette. */
.channel-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
}
.channel-dot svg { width: 15px; height: 15px; }
.channel-dot--0 { background: rgba(84, 99, 212, .35); color: #93a2f5; }
.channel-dot--1 { background: rgba(253, 139, 0, .3); color: #ffb45e; }
.channel-dot--2 { background: rgba(31, 168, 118, .3); color: #52d6a5; }
.channel-dot--3 { background: rgba(204, 0, 90, .28); color: #f27daa; }

.unread-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #000;
  font-family: var(--font-label); font-size: .6875rem; font-weight: 700; line-height: 1;
}

/* New channel/message: the glow-gradient plus, up beside the page title
   where it can't overlap list actions. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: .5em; }
.page-head h1 { margin: 0; }
.page-head__new {
  width: 52px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1.5px solid transparent; border-radius: 8px;
  background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, var(--glow-gradient) border-box;
  color: #fff; box-shadow: 0 4px 14px rgba(148, 92, 214, .25);
}
.page-head__new:hover { text-decoration: none; background: linear-gradient(var(--bg-ghost), var(--bg-ghost)) padding-box, var(--glow-gradient) border-box; }
.page-head__new svg { width: 18px; height: 18px; }

/* Directory tab (design 5354:162271). */
.directory-head { display: flex; align-items: baseline; gap: 12px; }
.directory-head__count { color: var(--heading); }
/* Member lists carry the room name in the header, so their in-page heading
   still reads at directory scale. */
.directory-head__label { font-size: 2.5rem; }
.directory__eyebrow { display: block; margin: 12px 0 4px; }
/* Row anatomy: avatar, badges and the menu keep their natural width; the
   name takes what's left and truncates (the profile holds full details). */
.directory-row__id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.directory-row__name { min-width: 0; font-size: 1.125rem; font-weight: 500; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-row__byline { min-width: 0; font-size: .72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-row .badge { flex: none; }
.directory-row form { display: contents; }

/* Directory interactions (design 5240:167520): rows are not tappable —
   the ellipsis menu holds View Profile / Direct Message. */
.search-box { position: relative; margin-bottom: 4px; }
.search-box__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-box__icon svg { width: 16px; height: 16px; display: block; }
.search-box input[type="search"] { width: 100%; padding-left: 42px; }

.popmenu { position: relative; flex: none; }
.popmenu summary { list-style: none; cursor: pointer; }
.popmenu summary::-webkit-details-marker { display: none; }
.popmenu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 185px;
  background: var(--bg-ghost); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 6px 6px; display: grid; gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 7px 1px rgba(41, 39, 51, .3);
}
.popmenu__label { color: var(--text-muted); padding: 0 10px 6px; }
.popmenu__item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 6px; border: none; background: none;
  font-size: .9375rem; font-weight: 500; color: var(--heading); text-align: left;
  text-transform: none; letter-spacing: 0; box-shadow: none; filter: none;
}
.popmenu__item:hover { background: rgba(255, 255, 255, .05); text-decoration: none; }
.popmenu__item svg { width: 16px; height: 16px; color: var(--text-mid); }
.popmenu form { display: contents; }
/* Rows with an open menu float above their neighbors. */
.chat-row:has(.popmenu[open]) { z-index: 31; position: relative; }

/* First-run welcome cap over Channels (frame 00, spec 5334:154192). */
.welcome-cap {
  position: relative; background: var(--bg-raised); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 18px; margin: 8px 0 24px; overflow: clip;
}
.welcome-cap__title { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--heading); }
.welcome-cap__body { margin: 0 0 16px; font-family: var(--font-label); font-size: .875rem; line-height: 19px; color: var(--text); max-width: 320px; }
.welcome-cap__credit {
  margin: 0; font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: .6875rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted);
}
.welcome-cap__dismiss {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; background: none; border: none; box-shadow: none; filter: none;
  color: var(--text-muted);
}
.welcome-cap__dismiss svg { width: 14px; height: 14px; }
.welcome-cap__dismiss:hover { color: var(--heading); }
.welcome-cap form { display: contents; }

/* Activity filter chips (spec: pages, not panels). */
.filter-chips { display: flex; gap: 8px; margin: 4px 0 20px; flex-wrap: wrap; }
.filter-chip {
  padding: 6px 12px; border-radius: 15px; border: 1px solid var(--border);
  background: var(--bg-ghost); color: var(--text-mid);
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
}
.filter-chip:hover { text-decoration: none; color: var(--heading); }
.filter-chip--selected { background: var(--accent); border-color: var(--accent); color: #000; }
.filter-chip--selected:hover { color: #000; }

/* Unread count on the Activity footer tab. */
.tab-bar__tab { position: relative; }
.tab-bar__badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: #000;
  font-family: var(--font-label); font-size: .625rem; font-weight: 700; line-height: 1;
}
/* System lines in the stream: someone joined or left. */
.msg-event { text-align: center; color: var(--text-muted); font-size: .78rem; margin: 12px 0; }

/* Per-room notification level on the info screen. */
.channel-info__notify { margin: 28px 0 24px; }
.channel-info__notify-title { display: flex; align-items: center; gap: .45rem; font-size: .9rem; margin: 0 0 12px; }
.channel-info__notify-title svg { width: 1.05rem; height: 1.05rem; }
.channel-info__notify .filter-chips { margin: 0 0 10px; }
.channel-info__notify .filter-chips form { display: contents; }
.channel-info__notify-hint { color: var(--text-muted); font-size: .8rem; line-height: 1.45; margin: 0; }

/* Grouped notification preferences. */
.settings-section { margin-top: 1.5rem; }
.settings-section__title { font-family: var(--font-label); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 .6rem; }
.settings-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .6rem; font-size: .85rem; flex: none; }
.settings-note { color: var(--text-muted); font-size: .78rem; margin: .1rem .2rem 0; }

/* Ambient "something's waiting" marker — a dot, deliberately not a count. */
.tab-bar__dot {
  position: absolute; top: 4px; left: calc(50% + 8px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* Directory admin badge: the track-badge treatment in orange. */
.badge--admin { background: rgba(253, 139, 0, .14); color: var(--accent); }

/* Lazy directory pages: shimmer while the next 50 rows load. */
.directory-skeleton { display: grid; gap: 10px; padding: 12px 1rem; }

/* Session state badges on speaker profiles (design 5240:144321). */
.badge--upcoming { background: rgba(253, 139, 0, .14); color: var(--accent); }
.badge--past { background: rgba(255, 255, 255, .06); color: var(--text-muted); }

/* Slack-style "(edited)": muted, inline right after the message text. The
   trix wrappers go inline so the tag shares the last line (<br> breaks
   survive; rare block content falls back to its own line). */
.msg__bubble .trix-content, .msg__bubble .trix-content > div { display: inline; }
.msg__edited { font-family: var(--font-label); font-size: .75rem; color: var(--text-muted); }
.msg--own .msg__edited { color: rgba(0, 0, 0, .55); }

/* The DM recipient picker: To: chips and results scroll; the start button
   pins to the bottom edge like a composer. */
body:has(.person-picker) .site-main { max-width: none; padding: 0; }
.person-picker {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 82px - env(safe-area-inset-top));
}
.person-picker__body { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 16px 1rem 8px; }
.picker-submit {
  position: sticky; bottom: 0; z-index: 10;
  background: rgba(13, 13, 20, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 10px 1rem calc(12px + env(safe-area-inset-bottom));
  width: 100%; max-width: var(--maxw); margin: 0 auto;
}
.picker-submit__button { width: 100%; }
.picker-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }
.picker-bar__label { flex: none; }
.picker-bar__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.picker-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px;
  background: var(--bg-ghost); border: 1px solid var(--border); border-radius: 15px;
  font-size: .875rem; color: var(--heading);
}
.picker-chip button {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  background: none; border: none; box-shadow: none; filter: none;
  color: var(--text-muted); font-size: .75rem; line-height: 1;
}
.picker-chip button:hover { background: rgba(255, 255, 255, .08); color: var(--heading); }
.person-picker__hint { margin: 20px 4px; color: var(--text-muted); font-size: .9375rem; }
.person-picker__list { display: grid; gap: 2px; margin: 12px 0; }
.person-picker__person label { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; font-weight: 400; }
.person-picker__person label:hover { background: rgba(255, 255, 255, .04); }
.person-picker__id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.person-picker__name { color: var(--heading); font-size: 1rem; }
.person-picker__byline { min-width: 0; font-size: .72rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The say-hello nudge under other people's profiles. */
.profile-invite { margin-top: 28px; }
.profile-invite__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-invite__actions form { display: contents; }

/* Channel create/edit forms (design 5392:170282 / 5392:173358). */
.channel-form { max-width: 420px; }
.channel-form h1 { margin-bottom: 8px; }
.channel-form__lede { margin: 0 0 24px; color: var(--text-mid); font-size: .9375rem; }
.channel-form .field { margin-bottom: 20px; }
.channel-form__submit { margin-top: 4px; }
.field--invalid input { border-color: var(--live); }