/* ==========================================================================
   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-hover: #D6A82C;
  --gold-soft: #F4D580;
  --gold-tint: rgba(230, 184, 66, 0.14);
  --white: #FFFFFF;
  --mist: #D6DEEC;
  --graphite: #3A4A66;
  --paper: #F6F8FB;

  /* Surfaces */
  --bg: var(--navy);
  --surface: var(--navy-soft);
  --surface-raised: var(--navy-up);
  --text: var(--white);
  --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);

  /* 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: 248px;
  --rail-w-compact: 76px;
  --main-w: 624px;
  --right-w: 320px;
}

* { 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;
}
/* 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: 40px; height: 40px; }
  /* 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: 1.5rem 0.5rem 1rem 0;
  border-right: 1px solid var(--rule);
  overflow: hidden; /* the sidebar itself never spills past the viewport */
}
.app-brand {
  display: flex; align-items: center;
  padding: 0.4rem 0.85rem 1.5rem;
  text-decoration: none;
  line-height: 0;
}
.app-brand img { width: 44px; height: 44px; border-radius: 11px; display: block; }

.sidebar-nav {
  display: flex; flex-direction: column; gap: 4px; list-style: none;
  /* 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(--rule); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.sidebar-nav .item {
  display: flex; align-items: center; gap: 0.95rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
  font-size: 0.96rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  position: relative;
}
.sidebar-nav .item:hover { background: var(--hover-tint); }
.sidebar-nav .item.active { background: var(--gold-tint); color: var(--gold); }
.sidebar-nav .icon { width: 26px; height: 26px; flex-shrink: 0; }
.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.35rem; }
.sidebar-nav .badge {
  margin-left: auto;
  background: var(--gold); color: var(--navy-deep);
  font-size: 0.7rem; font-weight: 800;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
  min-width: 1.25rem; text-align: center;
}

.sidebar-account {
  margin-top: auto;
  padding: 1rem 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.sidebar-account .me {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-account .me:hover { background: var(--hover-tint); }
.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); 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: 1rem 0.5rem 0.75rem 0; }
  .app-brand { padding: 0.25rem 0.85rem 1rem; }
  .app-brand img { width: 38px; height: 38px; border-radius: 10px; }
  .sidebar-nav .item { padding: 0.6rem 0.9rem; font-size: 0.92rem; }
  .sidebar-nav .icon { width: 24px; height: 24px; }
  .sidebar-nav .icon.icon-emoji { font-size: 1.25rem; }
  .sidebar-account { padding: 0.75rem 0.5rem 0; }
  .sidebar-account .me { padding: 0.5rem 0.65rem; }
}
@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: 32px; height: 32px; border-radius: 9px; }
  .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 reuses .sidebar-nav but stacks horizontally
   IG-style: 5 flat icons evenly spaced, no labels, no raised create.
   This block also re-asserts position:fixed on .app-sidebar because the
   desktop "position: sticky" rule above comes later in source order than
   the first mobile block and was winning the cascade. */
@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.3rem 0.4rem env(safe-area-inset-bottom, 0.4rem);
    border-right: 0;
    border-top: 1px solid var(--rule);
    background: var(--surface);
    z-index: 50;
  }
  .sidebar-nav { flex-direction: row; justify-content: space-around; align-items: center; padding: 0; }
  .sidebar-nav .item { padding: 0.55rem 0.4rem; flex-direction: column; gap: 0; font-size: 0; border-radius: var(--radius-md); flex: 1; }
  .sidebar-nav .item:hover, .sidebar-nav .item.active { background: transparent; }
  .sidebar-nav .item.active .icon { color: var(--gold); }
  .sidebar-nav .icon { width: 28px; height: 28px; }
  .sidebar-nav .label { display: none; }
  .sidebar-nav .badge { position: absolute; top: 4px; right: 4px; margin: 0; }
  .sidebar-nav .item.create .icon { color: var(--gold); }
}

/* --------------------------------------------------------------------------
   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 img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: block;
  }
  .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); 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;
}
.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; }
@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;
}

/* --------------------------------------------------------------------------
   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(--surface) 0%, var(--navy-deep) 100%);
  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);
  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: var(--text-muted); 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) and any other
     modal layer in the app — bumped to 1500 so the picker is always on
     top of whatever it's triggered from. */
  position: absolute; 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); 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); 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);
  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(--hover-tint); }
.sidebar-account .role-chip {
  margin-left: auto;
  background: rgba(230,184,66,0.18);
  color: var(--gold);
  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;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
  padding: 0.5rem; min-width: 220px;
}
.helm-account-menu .ham-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-md);
  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-ic {
  width: 24px; text-align: center;
}
.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;
}