/* ==========================================================================
   HELM — single design-system stylesheet.
   Replaces the Promura-era app.css + marketing.css + mobile.css + viral-hero.
   Built from scratch for an Instagram + TikTok + Facebook unified social feel.
   Brand: navy background, warm gold accent, white wheel. Spec: app/specs/brand.md
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #1A2C4D;
  --navy-deep: #0F1A2E;
  --navy-soft: #233755;
  --navy-up: #2D456E;
  --gold: #E6B842;
  --gold-ink: #8A6D00;   /* darker gold for TEXT on light surfaces (WCAG AA) */
  --gold-hover: #D6A82C;
  --gold-soft: #F4D580;
  --gold-tint: rgba(230, 184, 66, 0.14);
  --white: #FFFFFF;
  --mist: #D6DEEC;
  --graphite: #3A4A66;
  --paper: #F6F8FB;

  --pink: #FF3D8E;
  --coral: #EF6C72;

  /* Surfaces — LIGHT "Option C · Structured" is the DEFAULT site-wide:
     white feed canvas, navy-tinted rails, navy ink, gold accents. The old
     navy look is available as an opt-in [data-theme="dark"] for a future
     toggle. */
  --bg: #FFFFFF;               /* feed / page canvas */
  --surface: #FFFFFF;          /* cards / panels */
  --surface-raised: #FFFFFF;
  --text: #14203A;             /* navy ink */
  --text-soft: #3A4A66;        /* between ink and muted — body copy on cards */
  --text-muted: #61708A;
  --text-faint: #5E6A7D;
  --rule: #ECEEF2;
  --rule-strong: #DCE1EA;
  --hover-tint: rgba(15, 26, 46, 0.05);

  /* Rails (left sidebar + right rail) — soft navy tint */
  --rail-bg: #EDF1F8;
  --rail-text: #25314A;
  --rail-muted: #61708A;
  --rail-rule: #DCE4F0;
  --rail-active-bg: #FFFFFF;
  --rail-active-text: var(--navy-deep);
  --rail-active-shadow: 0 1px 2px rgba(20, 40, 80, 0.08);
  --rail-hover: rgba(15, 26, 46, 0.05);

  /* Semantic */
  --success: #6CCB78;
  --warning: #F4B65E;
  --danger:  #EF6C72;

  /* Geometry */
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.3);
  --shadow-lg: 0 22px 48px rgba(0,0,0,0.4);

  /* Layout */
  --rail-w: 208px;
  --rail-w-compact: 76px;
  --main-w: 624px;
  --right-w: 320px;
}

/* DARK theme — the original Helm navy look, available as an opt-in for a future
   light/dark toggle. Default (no attribute) is the light "Structured" theme. */
.sidebar, .sidebar-nav, #helm-mobile-menu, .auth-hero { --gold-ink: var(--gold); }  /* bright gold stays on dark chrome */

[data-theme="dark"] {
  --gold-ink: var(--gold);
  --bg: var(--navy);
  --surface: var(--navy-soft);
  --surface-raised: var(--navy-up);
  --text: var(--white);
  --text-soft: rgba(214, 222, 236, 0.85);
  --text-muted: rgba(214, 222, 236, 0.72);
  --text-faint: rgba(214, 222, 236, 0.48);
  --rule: rgba(214, 222, 236, 0.12);
  --rule-strong: rgba(214, 222, 236, 0.22);
  --hover-tint: rgba(255, 255, 255, 0.04);

  --rail-bg: var(--navy-deep);
  --rail-text: var(--white);
  --rail-muted: rgba(214, 222, 236, 0.72);
  --rail-rule: rgba(214, 222, 236, 0.12);
  --rail-active-bg: var(--gold-tint);
  --rail-active-text: var(--gold);
  --rail-active-shadow: none;
  --rail-hover: rgba(255, 255, 255, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 'Inter', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }

/* --------------------------------------------------------------------------
   3-column app layout (Instagram / Facebook pattern)
   --------------------------------------------------------------------------*/
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, var(--main-w)) var(--right-w);
  gap: 2rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 100vh;
}
/* Pages that don't render a right rail (profile, insights, messages thread)
   opt into a wide 2-column grid so the main column fills the remaining space
   instead of leaving a 320px empty strip on the right.
   No max-width — the page extends to the full viewport edge. */
body.app-page.wide .app {
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  max-width: none;
  /* Sidebar sits flush against the screen's left edge (Option C). Without this
     the base .app's 24px left padding exposes a white strip to the left of the
     tinted rail. Right padding is kept so page content doesn't touch the edge. */
  padding-left: 0;
}
/* Wide-mode mobile override — desktop sidebar collapses to bottom nav, so the
   main column gets the full viewport width. Without this, the body.wide rule
   above (higher specificity) was beating the mobile media query and the
   sidebar kept claiming a 248px column on 500px-wide phones. */
@media (max-width: 760px) {
  body.app-page.wide .app { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .app { grid-template-columns: var(--rail-w-compact) minmax(0, 1fr); gap: 1.5rem; }
  .app-rail { display: none; }
  .app-sidebar { padding: 1.5rem 0.4rem 1rem; }
  .app-sidebar .label { display: none; }
  .app-brand { justify-content: center; padding: 0.4rem 0 1.5rem; }
  .app-brand img { width: auto; height: 36px; }
  /* Nav items: icon only, centered. */
  .sidebar-nav .item { justify-content: center; padding: 0.7rem 0.5rem; }
  .sidebar-nav .badge { position: absolute; top: 2px; right: 2px; margin: 0; }
  /* Account chip: avatar only, centered, no name/handle */
  .sidebar-account { padding: 1rem 0 0; border-top: 1px solid var(--rule); }
  .sidebar-account .me { justify-content: center; padding: 0.5rem; gap: 0; }
  .sidebar-account .who { display: none; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 0 0 5rem; gap: 0; }
  .app-sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; padding: 0; border-right: 0; border-top: 1px solid var(--rule); background: var(--surface); z-index: 50; }
}

/* --------------------------------------------------------------------------
   Sidebar (left rail) — Instagram-style with Helm wordmark + nav + create
   --------------------------------------------------------------------------*/
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 0.8rem 0.7rem 0.95rem;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-rule);
  overflow: hidden; /* the sidebar itself never spills past the viewport */
}
/* App left rail — Helm-navy background with white icons + text (desktop only;
   the mobile bottom-nav and hamburger keep their default light tokens). The
   'helm' wordmark sits on the same #1A2C4D so it reads seamlessly. */
@media (min-width: 761px) {
  .app-sidebar {
    background: #242858;
    border-right-color: rgba(255,255,255,0.10);
    --rail-text: #FFFFFF;
    --rail-muted: rgba(255,255,255,0.80);
    --rail-rule: rgba(255,255,255,0.14);
    --rail-hover: rgba(255,255,255,0.08);
    --rail-active-bg: rgba(255,255,255,0.14);
    --rail-active-text: #FFFFFF;
    --rail-active-shadow: none;
  }
  .app-sidebar .sidebar-nav .item.active .icon { color: #FFFFFF; }
  .app-sidebar .sidebar-account { border-top-color: rgba(255,255,255,0.12); color: #fff; }
  .app-sidebar .sidebar-account .who .name { color: #FFFFFF; }
  .app-sidebar .sidebar-account .who .handle { color: rgba(255,255,255,0.62); }
}
.app-brand {
  display: flex; align-items: center;
  padding: 0.25rem 0.85rem 0.8rem;
  text-decoration: none;
  line-height: 0;
}
/* Wordmark logo: the transparent "hi" PNG, no background box, sized large. */
.app-brand .chip { display: inline-flex; align-items: center; }
/* Negative left margin cancels the transparent whitespace baked into the "hi"
   wordmark PNG so the visible glyph left-aligns with the nav pill icons. */
.app-brand img { height: 64px; width: auto; max-width: 100%; display: block; border-radius: 0; margin-left: 0; }
/* Mascot variant (kids/teen area): square mascot, no wordmark offset. */
.app-brand.mascot img { width: 62px; height: 62px; border-radius: 15px; margin-left: 0; }

.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px; list-style: none;
  /* Vertically center the tab group in the rail (IG pattern) with a gap
     below the logo. Safe because the tabs are compressed to always fit. */
  justify-content: center;
  /* Take the middle space + scroll internally when items don't fit.
     Brand stays pinned at top, .sidebar-account stays pinned at bottom
     (it uses margin-top:auto). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--rail-rule); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--rail-muted); }
.sidebar-nav .item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--rail-text);
  font-weight: 600;
  font-size: 0.93rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  position: relative;
}
.sidebar-nav .item:hover { background: var(--rail-hover); }
.sidebar-nav .item.active { background: var(--rail-active-bg); color: var(--rail-active-text); font-weight: 800; box-shadow: var(--rail-active-shadow, none); }
.sidebar-nav .item.active .icon { color: var(--gold-ink); }
/* Create = prominent gold CTA (desktop). Scoped above the mobile breakpoint so
   the bottom-nav Create cell stays a plain icon. */
@media (min-width: 761px) {
  .sidebar-nav .item.create { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy-deep); font-weight: 800; margin-bottom: 4px; }
  .sidebar-nav .item.create .icon { color: var(--navy-deep); }
  .sidebar-nav .item.create:hover { background: linear-gradient(135deg, var(--gold), var(--gold-hover)); }
}
.sidebar-nav .icon { width: 23px; height: 23px; flex-shrink: 0; }
/* Profile tab avatar (IG-style): round photo in place of the person icon. */
.sidebar-nav .icon.nav-avatar { border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: var(--rule); }
.sidebar-nav .item.active .icon.nav-avatar { border-color: var(--navy-deep); }
.icon-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla","Segoe UI Symbol",system-ui,sans-serif; font-style: normal; }
.sidebar-nav .icon.icon-emoji { font-size: 1.2rem; }
.sidebar-nav .badge {
  margin-left: auto;
  background: var(--coral); color: #fff;
  font-size: 0.7rem; font-weight: 800;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
  min-width: 1.25rem; text-align: center;
}
/* Muted line icons (Option C reference); active item's icon turns gold. */
.sidebar-nav .item .icon { color: var(--rail-muted); }
.sidebar-nav .item.active .icon { color: var(--gold-ink); }
.sidebar-nav .item.create .icon { color: var(--navy-deep); }

.sidebar-account {
  margin-top: auto;
  padding: 0.6rem 0.5rem 0;
  border-top: 1px solid var(--rail-rule);
}
.sidebar-account .me {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-account .me:hover { background: var(--rail-hover); }
.sidebar-account .avatar {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-tint) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-ink); font-weight: 800; font-size: 0.85rem;
}
.sidebar-account .who { display: flex; flex-direction: column; min-width: 0; }
.sidebar-account .who .name { font-weight: 700; font-size: 0.9rem; }
.sidebar-account .who .handle { color: var(--text-muted); font-size: 0.78rem; }

/* Short-viewport sidebar condensation. Tightens spacing/icons/font on shorter
   desktop windows so the full menu fits without needing the inner scrollbar.
   The 761px floor keeps these rules off the mobile bottom-nav. */
@media (min-width: 761px) and (max-height: 900px) {
  .app-sidebar { padding: 0.75rem 0.6rem 0.6rem 0.85rem; }
  .app-brand { padding: 0.2rem 0.85rem 0.7rem; }
  .app-brand img { width: auto; height: 60px; border-radius: 0; margin-left: 0; }
  .sidebar-nav .item { padding: 0.42rem 0.8rem; font-size: 0.9rem; }
  .sidebar-nav .icon { width: 22px; height: 22px; }
  .sidebar-nav .icon.icon-emoji { font-size: 1.15rem; }
  .sidebar-account { padding: 0.55rem 0.5rem 0; }
  .sidebar-account .me { padding: 0.4rem 0.6rem; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .app-sidebar { padding: 0.6rem 0.5rem 0.5rem 0; }
  .app-brand { padding: 0.15rem 0.85rem 0.65rem; }
  .app-brand img { width: auto; height: 56px; border-radius: 0; margin-left: 0; }
  .sidebar-nav { gap: 2px; }
  .sidebar-nav .item { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
  .sidebar-nav .icon { width: 22px; height: 22px; }
  .sidebar-nav .icon.icon-emoji { font-size: 1.15rem; }
  .sidebar-account { padding-top: 0.5rem; }
  .sidebar-account .me { padding: 0.4rem 0.6rem; gap: 0.55rem; }
  .sidebar-account .avatar { width: 30px; height: 30px; }
  .sidebar-account .who .name { font-size: 0.82rem; }
  .sidebar-account .who .handle { font-size: 0.7rem; }
}

/* Mobile bottom nav — Instagram-style FLOATING CAPSULE: a rounded white pill
   that floats above the content with a soft shadow, holding 5 icon-only items
   with Create centered as a gold circle. The .app-sidebar becomes a transparent
   full-width fixed container (pointer-events pass through the side gaps); only
   the pill (.sidebar-nav) is interactive. Re-asserts position:fixed because the
   desktop "position: sticky" rule comes later in source order. */
@media (max-width: 760px) {
  .app-brand, .sidebar-create, .sidebar-account { display: none; }
  .app-sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    height: auto;
    padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    border-right: 0; border-top: 0;
    background: transparent;
    z-index: 50;
    pointer-events: none;
  }
  /* The floating pill */
  .sidebar-nav {
    pointer-events: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0.4rem 0.6rem;
    background: rgba(36, 40, 88, 0.85);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(10, 14, 34, 0.4), 0 2px 6px rgba(10, 14, 34, 0.25);
    overflow: visible;
  }
  .sidebar-nav .item {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 0;
    padding: 0.5rem 0.3rem;
    font-size: 0;
    border-radius: 999px;
    background: transparent;
  }
  .sidebar-nav .item:hover { background: transparent; }
  .sidebar-nav .item.active:not(.create) { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
  .sidebar-nav .item .icon { color: rgba(255, 255, 255, 0.82); width: 27px; height: 27px; }
  .sidebar-nav .item.active:not(.create) .icon { color: #FFFFFF; }
  .sidebar-nav .label { display: none; }
  .sidebar-nav .badge { position: absolute; top: 2px; right: 6px; margin: 0; }
  /* Explicit order so Create sits dead-center (3rd of 5), IG/TikTok-style */
  .sidebar-nav .item[data-nav="home"]    { order: 1; }
  .sidebar-nav .item[data-nav="explore"] { order: 2; }
  .sidebar-nav .item[data-nav="create"]  { order: 3; flex: 0 0 auto; }
  .sidebar-nav .item[data-nav="live"]    { order: 4; }
  .sidebar-nav .item[data-nav="profile"] { order: 5; }
  /* Create = gold circle that pops out of the pill */
  .sidebar-nav .item.create {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    width: 46px; height: 46px; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(230, 184, 66, 0.45);
    padding: 0;
    margin: 0 0.15rem;
  }
  .sidebar-nav .item.create .icon { color: var(--navy-deep); width: 25px; height: 25px; }
  /* Frosted translucency (Instagram-style): the pill lets a hint of the
     feed show through behind it. Falls back to opaque --surface where
     backdrop-filter isn't supported. */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar-nav {
      background: rgba(36, 40, 88, 0.85);
      -webkit-backdrop-filter: saturate(160%) blur(18px);
      backdrop-filter: saturate(160%) blur(18px);
    }
  }
}

/* --------------------------------------------------------------------------
   MOBILE MENU DRAWER (hamburger → slide-in panel). Styled here rather than
   inline so the nav icons are sized correctly and the panel matches the skin.
   -------------------------------------------------------------------------- */
#helm-mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  display: flex; justify-content: flex-end;
  background: rgba(15, 26, 46, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: mm-fade 0.16s ease;
}
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
/* Mobile drawer mirrors the desktop left rail: deep-indigo (#242858) panel,
   white text, muted-white icons, gold active icon, and the gold Create CTA -
   so the menu looks and behaves identically on phone and desktop. */
#helm-mobile-menu .mm-panel {
  background: #242858;
  width: min(320px, 86vw);
  height: 100%;
  overflow-y: auto;
  padding: 0 0 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: -10px 0 40px rgba(15, 26, 46, 0.45);
  animation: mm-slide 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes mm-slide { from { transform: translateX(20px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
#helm-mobile-menu .mm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  position: sticky; top: 0; background: #242858; z-index: 1;
}
#helm-mobile-menu .mm-head strong { font-family: 'Sora', system-ui, sans-serif; font-size: 1.15rem; color: #FFFFFF; }
#helm-mobile-menu .mm-close {
  background: transparent; border: 0; color: rgba(255, 255, 255, 0.80);
  font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 0.2rem;
  border-radius: 8px; transition: color 0.15s, background 0.15s;
}
#helm-mobile-menu .mm-close:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
#helm-mobile-menu .mm-list { padding: 0.5rem 0.6rem; }
#helm-mobile-menu .mm-item {
  width: 100%; display: flex; align-items: center; gap: 0.9rem;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #FFFFFF; font: inherit; font-size: 0.98rem; font-weight: 600;
  padding: 0.8rem 0.9rem; border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}
#helm-mobile-menu .mm-item .icon { width: 22px; height: 22px; flex-shrink: 0; color: rgba(255, 255, 255, 0.80); }
#helm-mobile-menu .mm-item:hover { background: rgba(255, 255, 255, 0.08); }
#helm-mobile-menu .mm-item.active { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; font-weight: 800; }
#helm-mobile-menu .mm-item.active .icon { color: var(--gold-ink); }
#helm-mobile-menu .mm-item.create { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy-deep); font-weight: 800; margin-bottom: 4px; }
#helm-mobile-menu .mm-item.create .icon { color: var(--navy-deep); }
#helm-mobile-menu .mm-item.create:hover { background: linear-gradient(135deg, var(--gold), var(--gold-hover)); }
#helm-mobile-menu .mm-badge {
  margin-left: auto; background: var(--coral); color: #fff;
  font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill); min-width: 1.25rem; text-align: center;
}
#helm-mobile-menu .mm-badge[hidden] { display: none; }

/* --------------------------------------------------------------------------
   SEARCH OVERLAY (inline search, opened from the search pill / nav item).
   Desktop: a centered card over a dimmed backdrop. Mobile: full-screen.
   -------------------------------------------------------------------------- */
#helm-search-ov {
  position: fixed; inset: 0; z-index: 320;
  display: flex; flex-direction: column; align-items: center;
  padding: 8vh 1rem 1rem;
  background: rgba(15, 26, 46, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: mm-fade 0.16s ease;
}
#helm-search-ov .hs-panel {
  width: 100%; max-width: 640px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(15, 26, 46, 0.3);
  display: flex; flex-direction: column;
  max-height: 80vh; overflow: hidden;
}
#helm-search-ov .hs-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); }
#helm-search-ov #hs-results { flex: 1; overflow-y: auto; padding: 0.4rem; }
#helm-search-ov #hs-results a:hover { background: var(--hover-tint); }
@media (max-width: 760px) {
  #helm-search-ov { padding: 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #helm-search-ov .hs-panel { max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   MOBILE TOP BAR (Instagram-style: wordmark + search + heart)
   Injected by helm-shell.js. Sticky. Hidden on desktop.
   --------------------------------------------------------------------------*/
.mobile-topbar { display: none; }
@media (max-width: 760px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 0.65rem 0.85rem;
    z-index: 30;
    border-bottom: 1px solid var(--rule);
  }
  .mobile-topbar .brand {
    display: flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
  }
  .mobile-topbar .brand .chip { display: inline-flex; align-items: center; }
  .mobile-topbar .brand img {
    height: 32px;
    width: auto;
    border-radius: 0;
    display: block;
  }
  .mobile-topbar .brand.mascot img { width: 36px; height: 36px; border-radius: 9px; }
  .mobile-topbar .search-pill {
    flex: 1;
    background: var(--surface);
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.92rem;
    min-width: 0;
  }
  .mobile-topbar .search-pill svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
  .mobile-topbar .activity {
    background: transparent;
    border: 0;
    color: var(--text);
    padding: 0.4rem;
    cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
  }
  .mobile-topbar .activity svg { width: 24px; height: 24px; }
  /* Pages that have a .main-header h1 hide it on mobile — the top bar takes
     its place. */
  .app-page .main-header { display: none; }
}

/* --------------------------------------------------------------------------
   Main column (feed-style)
   --------------------------------------------------------------------------*/
.app-main { padding: 1.5rem 0; min-width: 0; }
.main-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.main-header h1 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.tabs { display: flex; gap: 1.5rem; list-style: none; }
.tab {
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold-ink); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   Right rail (contextual)
   --------------------------------------------------------------------------*/
.app-rail { padding: 1.5rem 0; }
.rail-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.rail-card h3 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

/* --------------------------------------------------------------------------
   Empty states
   --------------------------------------------------------------------------*/
.empty {
  text-align: center; padding: 3rem 1.25rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty h3 { font-family: 'Sora', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.5rem; }
.empty p { color: var(--text-muted); margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------*/
.btn {
  display: inline-block;
  background: var(--gold); color: var(--navy-deep);
  border: 0; padding: 0.7rem 1.3rem; border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.btn:hover { background: var(--gold-hover); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--rule-strong); }
.btn-ghost:hover { background: var(--hover-tint); }

/* --------------------------------------------------------------------------
   INFLUENCE TIERS — colored ring around any avatar.
   Apply `.tier-ring tier-N` (N=1..7) to any element wrapping an avatar.
   The wrapper's padding becomes the visible ring. Tier 7 (Icon) is animated.
   --------------------------------------------------------------------------*/
.tier-ring {
  display: inline-block;
  padding: 3px;
  border-radius: 50%;
  line-height: 0;
  position: relative;
  /* Default branded ring. Fleet modifiers (.fleet-*) override this on
     surfaces that know the creator's fleet (profile, stories). Elsewhere
     avatars get a clean subtle gold ring, never the retired network tiers. */
  background: rgba(230, 184, 66, 0.55);
}
.tier-ring > * {
  border-radius: 50%;
  display: block;
  overflow: hidden;
}
.tier-ring.tier-1 { background: #778095; }
.tier-ring.tier-2 { background: #CD7F32; }
.tier-ring.tier-3 { background: #C0C0C0; }
.tier-ring.tier-4 { background: #E6B842; }
.tier-ring.tier-5 { background: #FF3D8E; }
.tier-ring.tier-6 { background: #9333EA; }
.tier-ring.tier-7 {
  background: conic-gradient(#FF3D8E, #FAB72A, #6CCB78, #38BCDB, #9333EA, #FF3D8E);
  animation: tier-icon-spin 6s linear infinite;
}
.tier-ring.tier-7 > * { animation: tier-icon-spin 6s linear infinite reverse; }

/* Fleet rings (Leagues). These are the CURRENT system - the profile ring,
   story rings, and avatar rings reflect a creator's weekly fleet. Colors
   map to each fleet's identity: bronze, silver, gold, sapphire blue, and a
   bright diamond gradient for the top fleet. */
.tier-ring.fleet-bronze_anchor  { background: #CD7F32; }
.tier-ring.fleet-silver_compass { background: #C0C0C0; }
.tier-ring.fleet-gold_helm      { background: #E6B842; }
.tier-ring.fleet-sapphire_fleet { background: #2F80ED; }
.tier-ring.fleet-diamond_armada {
  background: conic-gradient(#8FE3FF, #C9F2FF, #6CB8FF, #E7CCFF, #8FE3FF);
  animation: tier-icon-spin 8s linear infinite;
}
.tier-ring.fleet-diamond_armada > * { animation: tier-icon-spin 8s linear infinite reverse; }

/* OFFICIAL accounts (admins + Helm mascots): the prismatic spinning ring.
   This is a reserved "stand out" badge — regular creators never earn it;
   they wear their league (fleet) ring instead. */
.tier-ring.official {
  background: conic-gradient(#FF3D8E, #FAB72A, #6CCB78, #38BCDB, #9333EA, #FF3D8E);
  animation: tier-icon-spin 6s linear infinite;
}
.tier-ring.official > * { animation: tier-icon-spin 6s linear infinite reverse; }
/* Leagues opt-out: a clean neutral ring — no color, no league. */
.tier-ring.league-off { background: var(--rule-strong); }
@keyframes tier-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Inner avatar inside a tier ring — force navy bg + white initials so the
   monogram is always legible against every tier color (especially tier 4
   gold and tier 7 conic-gradient where gold-on-gold-tint was invisible). */
.tier-ring .av, .tier-ring > .av {
  background-color: var(--navy-deep) !important;
  color: var(--white) !important;
}

/* --------------------------------------------------------------------------
   CREW rings — creator-chosen subscriber ring styles ("The Crew").
   Same wrapper mechanics as .tier-ring; wrap an avatar in
   `.crew-ring crew-<style>`. Catalog keys must match RING_STYLES in crew.js.
   --------------------------------------------------------------------------*/
.crew-ring { display: inline-block; padding: 3px; border-radius: 50%; line-height: 0; position: relative; background: #E6B842; }
.crew-ring > * { border-radius: 50%; display: block; overflow: hidden; }
.crew-ring.crew-gold   { background: #E6B842; }
.crew-ring.crew-coral  { background: #EF6C72; }
.crew-ring.crew-sky    { background: #5B8DEF; }
.crew-ring.crew-mint   { background: #56C271; }
.crew-ring.crew-violet { background: #9333EA; }
.crew-ring.crew-teal   { background: #38BCDB; }
.crew-ring.crew-sunset { background: linear-gradient(135deg, #FF8A3D, #FF3D8E); }
.crew-ring.crew-ocean  { background: linear-gradient(135deg, #38BCDB, #2F80ED); }
.crew-ring.crew-candy  { background: linear-gradient(135deg, #FF3D8E, #FAB72A); }
.crew-ring.crew-aurora { background: linear-gradient(135deg, #6CCB78, #38BCDB, #9333EA); }
.crew-ring.crew-rainbow { background: conic-gradient(#FF3D8E, #FAB72A, #6CCB78, #38BCDB, #9333EA, #FF3D8E); animation: tier-icon-spin 6s linear infinite; }
.crew-ring.crew-rainbow > * { animation: tier-icon-spin 6s linear infinite reverse; }
.crew-ring.crew-neon { background: #39FF14; box-shadow: 0 0 9px 1px rgba(57,255,20,0.65); }
.crew-ring .av, .crew-ring > .av { background-color: var(--navy-deep) !important; color: var(--white) !important; }

/* The <=4-char loyalty pill shown under a subscriber in the creator's live. */
.crew-pill { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; padding: 0.05rem 0.4rem; border-radius: 999px; text-transform: uppercase; line-height: 1.5; background: #E6B842; }
/* Gifter Level badge — global spend-tiered chip shown in live chat. A glossy,
   gem-style pill (gradient sheen + diamond glyph + number), not a flat label. */
.gflvl {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 0.62rem; font-weight: 800; color: #fff;
  padding: 1px 5px 1px 4px; border-radius: 6px; margin-right: 0.3rem;
  line-height: 1.25; vertical-align: middle; letter-spacing: 0.01em;
  background-color: #8B98AD;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05) 46%, rgba(0,0,0,0.22));
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 1px 2px rgba(15,26,46,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.gflvl svg { width: 9px; height: 9px; margin-right: 1px; filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.35)); }
.gflvl.glow { border-color: rgba(255,255,255,0.6); box-shadow: 0 0 9px rgba(255,255,255,0.55), 0 1px 2px rgba(15,26,46,0.3), inset 0 1px 0 rgba(255,255,255,0.6); animation: gflvl-shimmer 2.4s ease-in-out infinite; }
@keyframes gflvl-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28) saturate(1.15); } }

/* --------------------------------------------------------------------------
   CELEBRATE MODAL — full-screen overlay with the celebrating mascot.
   Fired by HelmMascot.celebrate(tier, level) from helm-mascot.js whenever
   a user crosses into a new tier or level. Alternates panda girl / red
   panda boy by tier parity so both companions cheer over time.
   --------------------------------------------------------------------------*/
.helm-celebrate {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 26, 46, 0.86);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0; transition: opacity 0.24s ease;
}
.helm-celebrate.open { opacity: 1; }
.helm-celebrate-card {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 1.6rem;
  max-width: 460px; width: 100%;
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 28px 60px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform 0.32s cubic-bezier(0.22, 1.32, 0.6, 1);
}
.helm-celebrate.open .helm-celebrate-card { transform: scale(1); }
.helm-celebrate-card .celebrate-img {
  display: block; margin: 0 auto -1rem; width: 240px; max-width: 60%; height: auto;
  filter: drop-shadow(0 8px 20px rgba(230, 184, 66, 0.35));
  animation: celebrate-bob 1.6s ease-in-out infinite;
}
@keyframes celebrate-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.helm-celebrate-card .eyebrow {
  display: inline-block;
  background: var(--gold-tint); color: var(--gold-ink);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}
.helm-celebrate-card h2 {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.6rem;
  line-height: 1.2; margin-bottom: 0.4rem;
}
.helm-celebrate-card p {
  color: rgba(255,255,255,0.82); font-size: 0.95rem; line-height: 1.5;
  margin-bottom: 1rem;
}
.helm-celebrate-card .tier-chip {
  display: inline-block; padding: 0.4rem 1.05rem;
  border-radius: var(--radius-pill);
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.9rem;
  letter-spacing: 0.06em; margin-bottom: 1.25rem;
}
.helm-celebrate-card .celebrate-close {
  width: 100%;
  background: var(--gold); color: var(--navy-deep); border: 0;
  padding: 0.9rem 1rem; border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: 0.95rem;
  cursor: pointer; transition: background 0.15s;
}
.helm-celebrate-card .celebrate-close:hover { background: var(--gold-hover); }

/* Confetti — simple pure-CSS sparkle effect across the modal background. */
.helm-celebrate-card .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.helm-celebrate-card .confetti span {
  position: absolute; top: -20px;
  width: 8px; height: 8px; border-radius: 2px;
  animation: confetti-fall 2.4s linear infinite;
}
.helm-celebrate-card .confetti span:nth-child(1)  { left:  8%; background: var(--gold);    animation-delay: 0s;    transform: rotate(15deg); }
.helm-celebrate-card .confetti span:nth-child(2)  { left: 18%; background: #FF3D8E;        animation-delay: 0.2s;  }
.helm-celebrate-card .confetti span:nth-child(3)  { left: 28%; background: var(--gold-soft); animation-delay: 0.4s; transform: rotate(40deg); }
.helm-celebrate-card .confetti span:nth-child(4)  { left: 38%; background: #6CCB78;        animation-delay: 0.1s;  }
.helm-celebrate-card .confetti span:nth-child(5)  { left: 48%; background: var(--gold);    animation-delay: 0.6s;  }
.helm-celebrate-card .confetti span:nth-child(6)  { left: 58%; background: #38BCDB;        animation-delay: 0.3s;  }
.helm-celebrate-card .confetti span:nth-child(7)  { left: 68%; background: var(--gold);    animation-delay: 0.5s;  }
.helm-celebrate-card .confetti span:nth-child(8)  { left: 78%; background: #9333EA;        animation-delay: 0.15s; }
.helm-celebrate-card .confetti span:nth-child(9)  { left: 88%; background: var(--gold-soft); animation-delay: 0.7s; }
.helm-celebrate-card .confetti span:nth-child(10) { left: 12%; background: #FF3D8E;        animation-delay: 1.2s;  }
.helm-celebrate-card .confetti span:nth-child(11) { left: 22%; background: var(--gold);    animation-delay: 1.4s;  }
.helm-celebrate-card .confetti span:nth-child(12) { left: 42%; background: #6CCB78;        animation-delay: 1.1s;  }
.helm-celebrate-card .confetti span:nth-child(13) { left: 62%; background: var(--gold);    animation-delay: 1.5s;  }
.helm-celebrate-card .confetti span:nth-child(14) { left: 72%; background: #38BCDB;        animation-delay: 1.3s;  }
.helm-celebrate-card .confetti span:nth-child(15) { left: 92%; background: var(--gold-soft); animation-delay: 1.7s; }
@keyframes confetti-fall {
  to { transform: translateY(620px) rotate(720deg); opacity: 0; }
}

/* --------------------------------------------------------------------------
   KID MODE — bubblier theme applied when body.kid-mode is set (driven by
   helm-shell.js when the user's role is 'kid'). Softer colors, rounder
   shapes, mascot watermark in corner, larger touch targets.
   --------------------------------------------------------------------------*/
body.kid-mode {
  background: linear-gradient(180deg, #1A2C4D 0%, #243857 100%);
}
body.kid-mode .app-sidebar,
body.kid-mode .post,
body.kid-mode .stash-tile,
body.kid-mode .live-card,
body.kid-mode .rail-card {
  border-radius: 24px !important;
}
body.kid-mode .feed-tab,
body.kid-mode .stash-chip,
body.kid-mode .activity-tab {
  border-radius: 999px !important;
  font-size: 1rem !important;
  padding: 0.7rem 1.25rem !important;
}
body.kid-mode .btn,
body.kid-mode button.cta,
body.kid-mode .cta {
  font-size: 1.05rem !important;
  padding: 0.95rem 1.5rem !important;
  border-radius: 999px !important;
}
/* --------------------------------------------------------------------------
   EMOJI PICKER — IG/TikTok-style popover. Used by HelmEmoji.attach() in
   message composers, post comments, and the create-caption input.
   --------------------------------------------------------------------------*/
.helm-emoji-picker {
  /* z-index needs to clear the post-viewer modal (1000), the story viewer
     (1100), and any other modal layer in the app. Picker is position:fixed
     so it stays aligned with the trigger button regardless of body scroll
     position — if it were absolute, scrolling the page after opening would
     leave it stuck at the original document coords. */
  position: fixed; z-index: 1500;
  width: 340px; max-width: calc(100vw - 16px);
  height: 360px;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.helm-emoji-picker.open { display: flex; }
.helm-emoji-picker .ep-tabs {
  display: flex; gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--navy-deep);
}
.helm-emoji-picker .ep-tab {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  font-size: 1.2rem; padding: 0.45rem 0.2rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.helm-emoji-picker .ep-tab:hover { background: var(--hover-tint); }
.helm-emoji-picker .ep-scroll {
  flex: 1; overflow-y: auto;
  padding: 0.4rem 0.5rem 0.8rem;
}
.helm-emoji-picker .ep-section { margin-bottom: 0.6rem; scroll-margin-top: 0.4rem; }
.helm-emoji-picker .ep-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 0.5rem 0.15rem 0.25rem;
}
.helm-emoji-picker .ep-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.1rem;
}
.helm-emoji-picker .ep-emoji {
  background: transparent; border: 0; cursor: pointer;
  font-size: 1.35rem; line-height: 1;
  padding: 0.4rem 0; border-radius: var(--radius-sm);
  transition: background 0.1s, transform 0.1s;
}
.helm-emoji-picker .ep-emoji:hover { background: var(--gold-tint); transform: scale(1.2); }

.emoji-trigger {
  background: transparent; border: 0; color: var(--text-muted);
  cursor: pointer; font-size: 1.2rem; padding: 0.4rem 0.5rem;
  border-radius: var(--radius-md); transition: color 0.15s, background 0.15s;
}
.emoji-trigger:hover { color: var(--gold-ink); background: var(--hover-tint); }

/* Mascot-aware empty states — call them out clearly with the point pose */
.empty-mascot {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2.5rem 1rem;
  gap: 0.6rem;
}
.empty-mascot img { width: 160px; max-width: 50%; height: auto; margin-bottom: 0.5rem; }
.empty-mascot h3 {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.005em;
}
.empty-mascot p { color: var(--text-muted); max-width: 460px; line-height: 1.5; }
.empty-mascot .btn { margin-top: 0.85rem; }

/* Tier chip — small pill next to a display name. Color comes from
   inline style so a single class works for all 7 tiers. */
.tier-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}

/* Progress bar to the next level, used in the network card */
.tier-progress {
  height: 6px; width: 100%;
  background: rgba(214,222,236,0.18);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 0.6rem;
}
.tier-progress .fill {
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}
.tier-progress-meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 0.45rem;
  text-align: center;
}
.tier-progress-meta .level-num { color: var(--gold-ink); font-weight: 800; }
.tier-progress-meta .to-next   { color: var(--text); font-weight: 700; }
.tier-progress-meta .next-tier { font-weight: 700; }

/* --------------------------------------------------------------------------
   Skeleton (loading state)
   --------------------------------------------------------------------------*/
.skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--navy-up) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --------------------------------------------------------------------------
   @-Mention picker (HelmMentions)
   IG/TikTok/Twitter-style dropdown shown when user types "@" in any composer.
   --------------------------------------------------------------------------*/
.helm-mention-picker {
  position: absolute;
  z-index: 9000;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  overflow-y: auto;
  padding: 0.35rem;
}
.helm-mention-picker .mp-empty {
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.helm-mention-picker .mp-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
}
.helm-mention-picker .mp-row.active,
.helm-mention-picker .mp-row:hover {
  background: var(--hover-tint);
}
.helm-mention-picker .mp-av {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0F1A2E; font-weight: 800; font-size: 0.78rem;
  font-family: 'Sora', system-ui, sans-serif;
}
.helm-mention-picker .mp-body { flex: 1; min-width: 0; }
.helm-mention-picker .mp-top {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.92rem;
}
.helm-mention-picker .mp-name {
  font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.helm-mention-picker .mp-verified {
  color: var(--gold-ink);
  font-size: 0.75rem;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(230,184,66,0.18);
}
.helm-mention-picker .mp-pill {
  background: rgba(108,171,239,0.18);
  color: #9EC4F1;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.helm-mention-picker .mp-handle {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Account menu + role chip (sidebar avatar dropdown)
   --------------------------------------------------------------------------*/
.sidebar-account .me {
  position: relative;
  width: 100%; display: flex; align-items: center; gap: 0.7rem;
  background: transparent; border: 0;
  padding: 0.5rem; border-radius: var(--radius-md);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background 0.12s;
}
.sidebar-account .me:hover { background: var(--rail-hover); }
.sidebar-account .role-chip {
  margin-left: auto;
  background: rgba(230,184,66,0.18);
  color: var(--gold-ink);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.helm-account-menu {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(15,26,46,0.6); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1rem;
}
.helm-account-menu .ham-card {
  margin-left: 1rem; margin-bottom: 5rem;
  /* Dark navy treatment (matches the Live + profile popups): redefine the
     color tokens on the card so every child inherits dark-appropriate values. */
  background: linear-gradient(180deg, #1a2640, #0F1A2E);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.64);
  --text-faint: rgba(255,255,255,0.5);
  --rule: rgba(255,255,255,0.12);
  --rule-strong: rgba(255,255,255,0.2);
  --surface: #1a2640;
  --hover-tint: rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
  padding: 0.5rem; min-width: 264px; max-width: 300px;
  max-height: 78vh; overflow-y: auto;
}
.helm-account-menu .ham-item.danger,
.helm-account-menu .ham-item.danger .ham-ic { color: #EF6C72; }
.helm-account-menu .ham-item.danger:hover { background: rgba(239,108,114,0.14); }
/* Header: avatar + name + handle + role */
.helm-account-menu .ham-header {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.6rem 0.7rem;
}
.helm-account-menu .ham-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-tint) center/cover no-repeat;
  color: var(--gold-ink); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.helm-account-menu .ham-who { min-width: 0; }
.helm-account-menu .ham-nm { font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helm-account-menu .ham-hn { color: var(--text-muted); font-size: 0.82rem; }
.helm-account-menu .ham-role { display: inline-block; margin-top: 0.15rem; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-ink); background: var(--gold-tint); border: 1px solid rgba(230,184,66,0.4); border-radius: 999px; padding: 1px 7px; }
.helm-account-menu .ham-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.58rem 0.7rem;
  border-radius: 10px;
  color: var(--text); text-decoration: none;
  background: transparent; border: 0; width: 100%; text-align: left;
  font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
}
.helm-account-menu .ham-item:hover { background: var(--hover-tint); }
.helm-account-menu .ham-item.danger { color: #C0343A; }
.helm-account-menu .ham-ic {
  width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.helm-account-menu .ham-item:hover .ham-ic { color: var(--text); }
.helm-account-menu .ham-item.danger .ham-ic { color: #C0343A; }
.helm-account-menu .ham-ic svg { width: 18px; height: 18px; }
/* Leagues status row */
.helm-account-menu .ham-status {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0.15rem 0.15rem 0.35rem; padding: 0.55rem 0.6rem;
  background: linear-gradient(135deg, var(--gold-tint), var(--surface));
  border: 1px solid var(--rule-strong); border-radius: 12px;
  color: var(--text); text-decoration: none;
}
.helm-account-menu .ham-status .s-txt { display: flex; flex-direction: column; min-width: 0; }
.helm-account-menu .ham-status .s-fleet { font-weight: 800; font-size: 0.88rem; }
.helm-account-menu .ham-status .s-split { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.05rem; }
.helm-account-menu .ham-status .s-pct { margin-left: auto; font-family: 'Sora', system-ui, sans-serif; font-weight: 800; color: var(--gold-ink); font-size: 1.05rem; }
.helm-account-menu .ham-section-label {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); padding: 0.5rem 0.7rem 0.25rem;
}
.helm-account-menu .ham-rule {
  height: 1px; background: var(--rule); margin: 0.4rem 0.2rem;
}

/* --------------------------------------------------------------------------
   Role switcher overlay (dev tool)
   --------------------------------------------------------------------------*/
.helm-role-overlay {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(15,26,46,0.82); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.helm-role-overlay .helm-role-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  padding: 1.5rem 1.5rem 1.25rem;
  width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
}
.helm-role-overlay .role-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.35rem;
}
.helm-role-overlay .role-head h2 {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem;
}
.helm-role-overlay .role-head .close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
}
.helm-role-overlay .role-head .close:hover { background: var(--hover-tint); color: var(--text); }
.helm-role-overlay .role-sub-head {
  color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1rem;
}
.helm-role-overlay .role-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem;
}
@media (max-width: 580px) {
  .helm-role-overlay .role-grid { grid-template-columns: 1fr; }
}
.helm-role-overlay .role-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  color: var(--text); font: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.helm-role-overlay .role-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.helm-role-overlay .role-card.active { border-color: var(--gold); background: rgba(230,184,66,0.08); }
.helm-role-overlay .role-emoji {
  font-size: 1.7rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.helm-role-overlay .role-text { flex: 1; min-width: 0; }
.helm-role-overlay .role-label {
  font-weight: 700; font-size: 0.95rem;
}
.helm-role-overlay .role-sub {
  color: var(--text-muted); font-size: 0.78rem; margin-top: 0.18rem; line-height: 1.35;
}
.helm-role-overlay .role-foot {
  margin-top: 1rem;
  color: var(--text-muted); font-size: 0.78rem;
  border-top: 1px solid var(--rule); padding-top: 0.85rem;
}

/* --------------------------------------------------------------------------
   Kid mode — global hides for monetization / non-kid content surfaces.
   Anything that points to a money-flavored page is suppressed regardless of
   what page rendered it. Targets right-rail "Quick links" entries plus a
   handful of feed tabs that don't exist for kids.
   --------------------------------------------------------------------------*/
body.kid-mode .rail-quick a[href="/proposals.html"],
body.kid-mode .rail-quick a[href="/deals.html"],
body.kid-mode .rail-quick a[href="/insights.html"],
body.kid-mode .rail-quick a[href="/boards.html"],
body.kid-mode .rail-quick a[href="/family.html"],
body.kid-mode .rail-quick a[href="/campaigns.html"],
body.kid-mode .rail-quick a[href="/reporting.html"] {
  display: none !important;
}
/* Hide feed tabs kids shouldn't see — driven by their text-content fallback
   (covers home.html tabs that don't yet have data-attrs) */
body.kid-mode [data-feed-tab="stash"],
body.kid-mode [data-feed-tab="podcasts"],
body.kid-mode [data-feed-tab="long"],
body.kid-mode [data-feed-tab="live"] {
  display: none !important;
}

/* Banner shown at the top of kid-mode pages — gentle reminder that the kid
   sees a filtered version of Helm. Pages add it via .kid-banner; the JS sets
   the body class so we can target both states. */
body.kid-mode .kid-banner {
  display: flex; align-items: center; gap: 0.85rem;
  background: linear-gradient(135deg, rgba(108,203,120,0.14), rgba(108,171,239,0.14));
  border: 1px solid rgba(108,203,120,0.35);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--text);
  font-size: 0.92rem;
  position: relative; z-index: 2;
}
body.kid-mode .kid-banner .kb-emoji { font-size: 1.4rem; }
body.kid-mode .kid-banner strong { font-weight: 700; }
body:not(.kid-mode) .kid-banner { display: none; }

/* Whole right-rail cards that kids never see — Trending Today and Quick Links
   are removed entirely. Suggestions for you is filtered by JS to only show
   creators with the child_creator flag (and hidden if none match). */
body.kid-mode [data-card="trending"],
body.kid-mode [data-card="quicklinks"] {
  display: none !important;
}


@media (max-width:640px){input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=date],input:not([type]),textarea,select{font-size:16px !important;}}


/* a11y-focus-added -- Visible keyboard focus (WCAG 2.4.7 AA). Some resets set
   outline:none; restore a clear ring for keyboard/AT users via :focus-visible
   so mouse clicks stay clean. */
:focus-visible { outline: 3px solid var(--gold-ink) !important; outline-offset: 2px !important; border-radius: 3px; }
[data-theme="dark"] :focus-visible, .sidebar :focus-visible, .sidebar-nav :focus-visible, #helm-mobile-menu :focus-visible { outline-color: var(--gold) !important; }

/* Respect reduced-motion preference (vestibular safety, WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}


/* ===== KID-LIGHT-SHELL: force kid pages onto the light Structured theme (uniformity fix) + hide Coins/Search per kid config ===== */
body.kid-mode{ background:#FFFFFF !important; background-image:none !important; }
body.kid-mode .app-sidebar{ background:var(--rail-bg) !important; color:var(--rail-text) !important; }
body.kid-mode .app-sidebar .item,
body.kid-mode .app-sidebar .item a,
body.kid-mode .app-sidebar a{ color:var(--rail-text) !important; }
body.kid-mode .app-sidebar .item.active,
body.kid-mode .app-sidebar .item.active a{ background:var(--rail-active-bg) !important; color:var(--rail-active-text) !important; }
body.kid-mode .app-sidebar .sidebar-account .name{ color:var(--rail-text) !important; }
body.kid-mode .app-sidebar [data-nav="coins"],
body.kid-mode .app-sidebar [data-nav="search"]{ display:none !important; }
/* ===== end KID-LIGHT-SHELL ===== */


/* ===== KID-LIGHT-SHELL-2: nav label + icon contrast on light kid rail ===== */
body.kid-mode .app-sidebar .item,
body.kid-mode .app-sidebar .item .label,
body.kid-mode .app-sidebar .item svg,
body.kid-mode .app-sidebar .item svg path{ color:var(--rail-text) !important; fill:currentColor !important; }
body.kid-mode .app-sidebar .item.active,
body.kid-mode .app-sidebar .item.active .label,
body.kid-mode .app-sidebar .item.active svg,
body.kid-mode .app-sidebar .item.active svg path{ color:var(--rail-active-text) !important; fill:currentColor !important; }
body.kid-mode .app-sidebar .sidebar-account .name{ color:var(--rail-text) !important; }
body.kid-mode .app-sidebar .sidebar-account .handle{ color:var(--rail-muted) !important; }
/* ===== end KID-LIGHT-SHELL-2 ===== */


/* ===== KID-LIGHT-SHELL-3: beat .sidebar-nav .icon/.label white on light kid rail ===== */
body.kid-mode .app-sidebar .sidebar-nav .item,
body.kid-mode .app-sidebar .sidebar-nav .item .label,
body.kid-mode .app-sidebar .sidebar-nav .item .icon,
body.kid-mode .app-sidebar .sidebar-nav .item .icon svg,
body.kid-mode .app-sidebar .sidebar-nav .item .icon svg path{ color:var(--rail-text) !important; fill:currentColor !important; }
body.kid-mode .app-sidebar .sidebar-nav .item.active,
body.kid-mode .app-sidebar .sidebar-nav .item.active .label,
body.kid-mode .app-sidebar .sidebar-nav .item.active .icon,
body.kid-mode .app-sidebar .sidebar-nav .item.active .icon svg{ color:var(--rail-active-text) !important; fill:currentColor !important; }
/* ===== end KID-LIGHT-SHELL-3 ===== */


/* ===== KID-LIGHT-SHELL-4: kid rail text/icon via HARD hex (tokens are polluted to white in kid ctx) ===== */
body.kid-mode .app-sidebar .sidebar-nav .item,
body.kid-mode .app-sidebar .sidebar-nav .item .label,
body.kid-mode .app-sidebar .sidebar-nav .item .icon,
body.kid-mode .app-sidebar .sidebar-nav .item .icon svg,
body.kid-mode .app-sidebar .sidebar-nav .item .icon svg path{ color:#25314A !important; fill:#25314A !important; }
body.kid-mode .app-sidebar .sidebar-nav .item.active,
body.kid-mode .app-sidebar .sidebar-nav .item.active .label,
body.kid-mode .app-sidebar .sidebar-nav .item.active .icon,
body.kid-mode .app-sidebar .sidebar-nav .item.active .icon svg{ color:#14203A !important; fill:#14203A !important; }
body.kid-mode .app-sidebar .sidebar-account .name{ color:#25314A !important; }
body.kid-mode .app-sidebar .sidebar-account .handle{ color:#61708A !important; }
/* ===== end KID-LIGHT-SHELL-4 ===== */

/* HELM-LIVE-MENU-POLISH */
.helm-emoji-picker{border:1px solid rgba(255,255,255,.06) !important}
.ep-scroll{scrollbar-width:none;-ms-overflow-style:none}
.ep-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.ep-tabs{scrollbar-width:none;-ms-overflow-style:none}
.ep-tabs::-webkit-scrollbar{width:0;height:0;display:none}


/* Account menu: no scrollbar, scroll by touch.
   The menu grew past one screen once Store reviews joined the ADMIN section,
   and a visible scrollbar inside a floating menu reads as a bug rather than an
   affordance. It still scrolls: drag on touch, wheel on a trackpad. */
.helm-account-menu .ham-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.helm-account-menu .ham-card::-webkit-scrollbar { width: 0; height: 0; }

/* On a touch screen, 44px is the smallest target a finger hits reliably. */
@media (hover: none) and (pointer: coarse) {
  .helm-account-menu .ham-item { min-height: 44px; }
}