*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:           #1A2F5C;
  --navy-mid:       #2E4574;
  --text:           #1A2F5C;
  --text-body:      #4A5874;
  --text-muted:     #8A93A6;
  --text-faint:     #B5BAC7;
  --bg:             #FFFFFF;
  --bg-soft:        #F8F8F8;
  --border:         #ECECF2;
  --border-soft:    #F4F4F7;
  --yellow:         #F2B233;
  --yellow-hover:   #E0A21F;
  --sky-soft:       #DCE8F5;
  --sky-pale:       #EEF2FA;
  --sage:           #4F8867;
  --sage-pale:      #E4EFE7;
  --burgundy:       #8E3838;
  --burgundy-pale:  #F4E5E5;
  --elder-gold:     #B5871F;
  --elder-bg:       #FFF4D8;
  --elder-border:   #E8C77A;

  /* Category-tag-only accents (post/thread tags, filter pills) -- the 5
     colors above are the brand palette proper and cover 4 of the 7 post
     categories tolerably (vendors/operations both blue, marketing/compliance
     both burgundy, suppliers/people both sage); these 3 exist only to give
     the remaining categories their own distinct color instead of doubling up. */
  --slate:          #55708A;
  --slate-pale:     #E7EDF2;
  --plum:           #7D4F72;
  --plum-pale:      #F3E7F0;
  --teal:           #3F7A78;
  --teal-pale:      #E2EEED;

  /* Single source of truth for the sidebar's footprint. .page's grid and the
     topnav search bar's centering both read from these so the search bar
     stays aligned with the content column instead of the full viewport. */
  --sidebar-w:      292px;
  --content-gap:    32px;
  /* Gap between the main content column and any secondary rail (thread
     feed's "About/Recommended" rail, elder detail's booking rail, etc.).
     Deliberately kept equal to --content-gap so columns 1-2 and 2-3 read as
     the exact same rhythm, horizontally (confirmed live via Claude-in-Chrome
     getBoundingClientRect, 2026-07-20 -- both measured 32px). Every
     content+rail split on the platform should share this one value rather
     than pick its own gap. */
  --rail-gap:       32px;

}

html {
  /* Always reserve the scrollbar's width, whether or not the page is
     currently tall enough to need one. Layout here (.main's centering,
     .page's grid) reads from the viewport width, so without this, crossing
     the "content is now taller than the viewport" threshold on any page
     shifts every column by the scrollbar's width (~15-17px) the instant the
     bar appears or disappears. */
  scrollbar-gutter: stable;
}
html, body {
  height: 100%;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ═══ TOPNAV ═══ */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.022em;
  color: var(--yellow);
  flex-shrink: 0;
}
.nav-items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  align-items: center;
}
.nav-item {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-body);
  padding: 20px 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.nav-item:hover { color: var(--navy); }
.nav-item.active { color: var(--navy); font-weight: 600; }
.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -8px; right: -8px;
  height: 3px;
  background: var(--yellow);
  border-radius: 3px 3px 0 0;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.bell { width: 22px; height: 22px; color: var(--text-body); }

/* ── Notification bell ─────────────────────────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative;
  background: none; border: none; padding: 0;
  cursor: pointer; display: flex; align-items: center;
  color: var(--text-body);
}
.notif-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.notif-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--coral, #e05c4b); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  border-radius: 999px; text-align: center;
  pointer-events: none;
}
.notif-badge--hidden { display: none; }
.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  width: 300px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500; overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.notif-hd-link { color: var(--text-muted); display: flex; }
.notif-hd-link:hover { color: var(--navy); }
.notif-hd-link svg { width: 15px; height: 15px; }
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  font-size: 14px; color: var(--text-body); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item--read { color: var(--text-muted); }
.notif-item .av { width: 30px; height: 30px; font-size: 11px; margin-top: 1px; }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-time { font-size: 12px; color: var(--text-muted); }
/* Bold/navy and independently clickable to the actor's profile -- industry
   standard (Instagram, Facebook both link the name separately from the row's
   own click target). Stays navy even when the row is read; only the
   surrounding sentence and timestamp mute. */
.notif-actor { font-weight: 700; color: var(--navy); text-decoration: none; }
.notif-actor:hover { text-decoration: underline; }
.notif-item--read .notif-actor { color: var(--navy); }
.notif-empty {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--text-muted);
}
.notif-see-all {
  display: block; padding: 10px 16px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--navy-mid);
  border-top: 1px solid var(--border);
}
.notif-see-all:hover { background: var(--sky-pale); color: var(--navy); }

/* ═══ MENTION AUTOCOMPLETE ═══ */
.mention-dropdown {
  min-width: 180px; max-width: 260px; max-height: 220px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 600;
}
.mention-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13.5px; font-weight: 500; color: var(--navy);
  cursor: pointer;
}
.mention-dropdown-item.active { background: var(--sky-pale); }
.mention-dropdown-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 10px; object-fit: cover;
}
.mention-dropdown-avatar--navy     { background: var(--navy); }
.mention-dropdown-avatar--sage     { background: var(--sage); }
.mention-dropdown-avatar--burgundy { background: var(--burgundy); }

/* Live @handle bolding in the composer -- see platform.js's overlay IIFE.
   Blue+bold matches what a resolved mention actually renders as once
   posted (real links elsewhere already use --navy-mid), so the live
   preview isn't just "highlighted," it's accurate. */
.mention-token { font-weight: 700; color: var(--navy-mid); }
.composer-mention-overlay {
  pointer-events: none; overflow: hidden;
  white-space: pre-wrap; word-wrap: break-word; word-break: break-word;
  color: var(--navy);
}

.avatar-wrap { display: flex; align-items: center; gap: 6px; }
.avatar-circ {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
  overflow: hidden;
}
.avatar-circ img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chev { width: 14px; height: 14px; color: var(--text-body); }

/* ═══ LAYOUT ═══ */
/* Verified against Reddit's actual production markup (2026-07-20): the
   sidebar sits in its own uncapped track, flush at the true edge always --
   .page itself is never capped or centered. .main (content: feed+rail
   together) is what caps and centers, at ~1160px, matching Reddit's own
   content wrapper (#subgrid-container, capped ~1120px + margin:auto) sitting
   next to Reddit's own uncapped left-nav track. Two wrong turns preceded
   this: (1) capping/centering .page as a whole shifted the sidebar off the
   true edge on wide screens; (2) removing the cap from .main entirely (so
   it filled 100% of the leftover column, unbounded) matched Threads' old
   .main:has(.thread-feed-layout) special case but let content stretch
   edge-to-edge on very wide viewports, which Reddit does not do. One rule,
   applied identically on every page regardless of whether it has a rail:
   sidebar flush and uncapped, content capped and centered within whatever
   space is left. */
.page {
  padding-top: 64px;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 64px;
  align-self: start;
  /* No right padding: the grid's own --content-gap is the ONLY space
     between the sidebar and .main. A right-padding here used to stack on
     top of that gap (plus .main's own left padding below), so the visible
     sidebar-to-content gap was 20+14+32=66px even after --content-gap itself
     was set to 14px -- more than double the 32px feed-to-rail gap it was
     supposed to be visibly smaller than. Verified live via Claude-in-Chrome
     getBoundingClientRect, 2026-07-20. */
  padding: 24px 0 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.main {
  min-width: 0;
  width: 100%;
  /* Caps and self-centers within the leftover grid track, matching Reddit's
     own content wrapper -- on viewports wide enough that the leftover track
     exceeds this, extra space appears as equal margin on both sides of
     .main instead of the feed stretching edge-to-edge unbounded. Below that
     width, max-width/margin are no-ops and .main just fills the track, so
     the sidebar-to-content gap stays exactly --content-gap (no left padding
     here, matching .sidebar's no-right-padding above -- see that comment). */
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 32px 96px 0;
}

/* ═══ SIDEBAR COMPONENTS ═══ */
.biz-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.biz-name { display: block; font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 3px; }
.biz-name:hover { color: var(--navy-mid); }
.biz-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.biz-handle { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
/* Same pill language as the Threads card's own points/tier badges
   (.wisdom-badge, .elder-founding-tag) -- same row, same shapes, so the
   sidebar card and a post's author-row read as one consistent system. */
.biz-badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.biz-points {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; color: var(--navy); background: var(--yellow);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}

.side-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }

.discover-list { display: flex; flex-direction: column; gap: 1px; }
.discover-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; color: var(--text-body); font-weight: 500;
}
.discover-item:hover { background: var(--sky-pale); color: var(--navy); }
.discover-item svg { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 14px; }

/* ═══ SIDEBAR SECTION NAV (Threads / Insights / Elders) ═══ */
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--text-body);
  cursor: pointer; user-select: none;
  transition: background 0.12s, color 0.12s;
}
.sidebar-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.sidebar-nav-item:hover { background: var(--sky-pale); color: var(--navy); }
.sidebar-nav-item:hover svg { color: var(--navy); }
.sidebar-nav-item.active { background: var(--sky-soft); color: var(--navy); font-weight: 700; }
.sidebar-nav-item.active svg { color: var(--navy); }

/* Indent + a left rail connecting each item back up to Threads -- the
   standard tree-nav construction (Notion, VS Code, GitHub's own nested
   nav) for "this belongs to the item above it," rather than a floating
   indented pill with no visual link to its parent. */
.sidebar-subnav {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 4px 19px;
  padding-left: 14px;
  border-left: 2px solid var(--border-soft);
}
.sidebar-subnav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; user-select: none;
  transition: background 0.12s, color 0.12s;
}
.sidebar-subnav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-subnav-item:hover { background: var(--sky-pale); color: var(--navy); }
.sidebar-subnav-item.active { background: var(--sky-pale); color: var(--navy); font-weight: 700; }
.sidebar-subnav-badge {
  flex-shrink: 0; min-width: 16px; text-align: center;
  background: var(--yellow); color: var(--navy);
  font-size: 10px; font-weight: 700; line-height: 16px;
  border-radius: 999px; padding: 0 5px;
}

/* insights sidebar */
.filter-stack { display: flex; flex-direction: column; gap: 8px; }
.filter-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: 9px; padding: 10px 32px 10px 12px;
  font-size: 14px; font-weight: 500; color: var(--navy); font-family: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
}
.filter-select:hover { border-color: var(--text-muted); }

/* Insights top toggle bar (Jun 27: filters at top, not sidebar) */
.insights-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.insights-filter-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.insights-filter-controls { display: flex; flex-wrap: wrap; gap: 10px; }
/* Same treatment as .form-field select (auth/profile forms) -- this control
   previously only set width/min-width here, so it rendered as a bare native
   <select> with none of the app's usual border/chevron/focus styling. */
.filter-select {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 34px 9px 14px; font-size: 13.5px; font-family: inherit; color: var(--navy);
  background-color: var(--bg);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.filter-select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(242,178,51,0.15); }
.insights-filter-bar .filter-select { width: auto; min-width: 170px; }
@media (max-width: 768px) {
  .insights-filter-controls { width: 100%; }
  .insights-filter-bar .filter-select { flex: 1 1 140px; min-width: 0; }
}

.info-card { background: var(--sky-pale); border-radius: 12px; padding: 16px; }
.info-title { font-weight: 700; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.info-body { font-size: 12.5px; color: var(--text-body); line-height: 1.55; margin-bottom: 12px; }
.info-link { font-size: 13px; font-weight: 600; color: var(--navy-mid); }
.info-link:hover { color: var(--navy); }

/* elders sidebar */
.elder-intro { font-size: 13.5px; color: var(--text-body); line-height: 1.6; }
.elder-intro strong { color: var(--navy); font-weight: 600; }
.elder-side-stat {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
}
.elder-side-stat-row { display: flex; align-items: baseline; gap: 8px; }
.elder-side-stat-num { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.elder-side-stat-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.elder-side-cta {
  display: block; text-align: center;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  color: var(--navy-mid); margin-top: 4px;
}
.elder-side-cta:hover { background: var(--sky-pale); border-color: var(--text-muted); color: var(--navy); }

/* ═══ MAIN HEADER ═══ */
.main-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.main-title {
  font-size: 26px; font-weight: 800; color: var(--navy);
  letter-spacing: -0.022em; display: flex; align-items: center; gap: 8px; line-height: 1.12;
}

.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.btn-yellow {
  background: var(--yellow); color: var(--navy);
  border-radius: 10px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 1px 2px rgba(20,39,78,0.10);
  transition: background 0.15s, box-shadow 0.18s;
}
.btn-yellow:hover { background: var(--yellow-hover); box-shadow: 0 4px 12px rgba(242,178,51,0.30); }
.btn-yellow .plus { font-size: 16px; line-height: 1; margin-top: -1px; }
/* Secondary action button — same shape as .btn-yellow, no fill. Used across
   7 templates (Log in, Edit profile, Back to profile, etc.) but never had a
   matching rule, so it rendered as unstyled default browser text/box. */
.btn-outline {
  background: var(--bg); color: var(--navy);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.btn-outline:hover { border-color: var(--navy-mid); background: var(--sky-pale); }
.icon-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-body);
}
.icon-btn:hover { border-color: var(--text-muted); color: var(--navy); }
.icon-btn svg { width: 16px; height: 16px; }

/* ═══ FILTER / TAG ROWS (Elders tab bar) ═══ */
.tab-row { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.tab {
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 13.5px; font-weight: 500; color: var(--text-body);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tab:hover { border-color: var(--text-muted); color: var(--navy); }
.tab.active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }

/* ═══ TOPNAV SEARCH BAR ═══ */
.topnav-search-wrap {
  position: absolute;
  /* True viewport center, independent of the sidebar -- verified against
     Reddit's own topnav (2026-07-19), which centers its search bar on the
     full window rather than offsetting for its left nav. The previous
     sidebar-aware offset here was never actually matching a real reference,
     just an assumption. */
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, 44%);
}
.topnav-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(242, 178, 51, 0.4);
  border-radius: 999px;
  background: var(--sky-pale);
  padding: 0 5px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.topnav-search:focus-within {
  border-color: rgba(242, 178, 51, 0.85);
  background: var(--bg);
  box-shadow: 0 2px 18px rgba(242, 178, 51, 0.18);
}
.topnav-search-input {
  flex: 1; border: none; background: none;
  font-family: inherit; font-size: 14.5px; color: var(--navy);
  padding: 9px 4px 9px 14px; outline: none; text-align: center;
}
.topnav-search-input::placeholder { color: var(--text-muted); }
.topnav-search-input:focus { text-align: left; }
/* Icon-only now -- pairing an icon with the word "Ask" here duplicated the
   placeholder's own "Ask Main Street…", the actual on-brand moment. One
   "Ask" in the whole control, not two. */
.topnav-ask-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--yellow); color: var(--navy);
  font-family: inherit; cursor: pointer;
  transition: background 0.12s;
}
.topnav-ask-btn:hover { background: var(--yellow-hover); }
.topnav-ask-btn svg { width: 15px; height: 15px; }

/* ═══ VOTE CLUSTER ═══ */
.vote-cluster { display: flex; align-items: center; gap: 2px; }
.vote-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 5px;
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.vote-btn:hover { color: var(--navy); background: var(--sky-pale); }
.vote-btn svg { width: 16px; height: 16px; }
.vote-btn.up.voted   { color: var(--yellow); }
.vote-btn.down.voted { color: var(--burgundy); }
.vote-score { font-size: 13px; font-weight: 700; color: var(--navy); min-width: 22px; text-align: center; }
.stat-btn.react.voted                         { color: var(--navy); }
.stat-btn.react[data-react="funny"].voted     { color: var(--sage); background: var(--sage-pale); }
.stat-btn.react[data-react="lightbulb"].voted { color: var(--elder-gold); background: var(--elder-bg); }
/* Real emoji glyphs ignore CSS `color` entirely, so left alone they sit at
   full saturation while every other icon in this row (vote arrows, comment,
   bookmark) stays var(--text-muted) gray until voted/active -- that
   mismatch is what reads as "crowded"/inconsistent. filter is the one thing
   that *does* apply to an emoji glyph: muted by default, full color only
   once reacted, matching the same gray-until-active idiom as the rest of
   the row instead of fighting it. */
.react-emoji { font-size: 15px; line-height: 1; filter: grayscale(1) opacity(0.5); transition: filter 0.15s; }
.stat-btn.react:hover .react-emoji { filter: grayscale(0.5) opacity(0.8); }
.stat-btn.react.voted .react-emoji { filter: none; }
.reaction-count { font-size: 12px; font-weight: 600; }

/* ═══ SORT DROPDOWN ═══ */
/* Sort dropdown gets its own line; the category strip wraps to however many
   lines it needs (flex-basis:100% forces it onto a new row, then wraps
   freely within that). No horizontal scroll, no fade cue, no JS -- the
   previous scrollable-strip version relied on a fade to signal "more
   content this way," which either didn't fit the column at all (visibly
   cut off, no affordance) or fit poorly depending on the rail's presence.
   Wrapping guarantees every pill is always visible at any viewport width. */
.feed-sort-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.feed-cat-row {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sort-drop-wrap { position: relative; }
.sort-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sort-drop-btn:hover { border-color: var(--text-muted); background: var(--sky-pale); }
.sort-drop-btn svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.15s; }
.sort-drop-btn.open svg { transform: rotate(180deg); }
.sort-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 156px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20,39,78,0.12), 0 2px 6px rgba(20,39,78,0.06);
  overflow: hidden;
  z-index: 100;
}
.sort-drop-menu.open { display: block; }
.sort-drop-header {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sort-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
}
.sort-option:last-child { margin-bottom: 4px; }
.sort-option:hover { background: var(--sky-pale); }
.sort-option.active { font-weight: 700; }

/* ═══ POST AUTHOR BLOCK ═══ */
.post-author-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.author-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.username { font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
/* Yellow, not sage -- sage is one of the 3 avatar-palette colors
   (AVATAR_PALETTE), so a sage wisdom pill sits directly next to a same-color
   avatar for ~1/3 of users and reads as one blob instead of two distinct
   elements. Yellow is already the platform's "points" color (.biz-points in
   the sidebar) and isn't in the avatar palette at all. */
/* Sized to match the tier tags (.elder-tag etc.) it sits next to in
   .author-row -- font-size, tracking, case, padding, and radius all need to
   agree or the row reads as several unrelated badge styles instead of one
   consistent inline badge language (color is what should vary between
   them, not the type treatment). */
.wisdom-badge {
  font-size: 10px; font-weight: 700; color: var(--navy);
  background: var(--yellow); border-radius: 4px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; line-height: 1.4; flex-shrink: 0;
}
.author-biz { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }

/* ═══ THREADS POSTS ═══ */
.feed { display: flex; flex-direction: column; gap: 14px; }
.post {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px 16px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.post:hover { border-color: #DCD9E3; box-shadow: 0 4px 14px rgba(20,39,78,0.05); }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0;
  overflow: hidden;
}
/* .av wraps either text initials (no rule needed) or a real <img> avatar
   (profile.html, member_directory.html, search_results.html) -- without
   this, a real image renders at its own intrinsic size instead of filling
   the circle, ignoring whatever width/height the wrapper was given. */
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.navy     { background: var(--navy); }
.av.sage     { background: var(--sage); }
.av.burgundy { background: var(--burgundy); }
.av.amber    { background: #C87E2A; }
.author { font-weight: 600; font-size: 13.5px; color: var(--navy); line-height: 1.2; display: inline-flex; align-items: center; flex-wrap: wrap; }
.author-time { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.author-time-inline { font-size: 12px; color: var(--text-muted); font-weight: 400; flex-shrink: 0; }
.post-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; position: relative; }
.post-actions button { padding: 6px; border-radius: 6px; color: var(--text-muted); }
.post-actions button:hover { background: var(--sky-pale); color: var(--navy); }
.post-actions svg { width: 16px; height: 16px; }
.post-title { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; letter-spacing: -0.012em; line-height: 1.3; }
.post-body { font-size: 15px; color: var(--text-body); line-height: 1.55; margin-bottom: 14px; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.tag.vendors    { background: var(--sky-soft);      color: var(--navy); }
.tag.finance    { background: var(--elder-bg);      color: var(--elder-gold); }
.tag.people     { background: var(--sage-pale);     color: var(--sage); }
.tag.compliance { background: var(--burgundy-pale); color: var(--burgundy); }
.tag.marketing  { background: var(--plum-pale);     color: var(--plum); }
.tag.suppliers  { background: var(--teal-pale);     color: var(--teal); }
.tag.operations { background: var(--slate-pale);    color: var(--slate); }
/* A single, narrow use of blue: a verification checkmark on tags whose own
   tooltip copy is actually a verification claim (Elder, Founding Elder,
   Moderator -- "verified owners", "Mainstep's official account"). Reuses
   --navy-mid, already in the palette for hover states elsewhere, rather
   than introduce a new blue -- and stays off Fellow (community-recognized,
   not identity-verified) and every ordinary avatar/card, matching how
   LinkedIn/Stripe/PayPal actually use blue: reserved for the verification
   signal itself, not spread across the surface as decoration. */
.verify-check { color: var(--navy-mid); margin-right: 3px; vertical-align: -1px; flex-shrink: 0; }
.elder-tag {
  display: inline-flex; align-items: center;
  background: var(--yellow); color: var(--navy);
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.fellow-tag {
  display: inline-flex; align-items: center;
  background: var(--sage-pale); color: var(--sage);
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.moderator-tag {
  display: inline-flex; align-items: center;
  background: var(--navy); color: #fff;
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.member-tag {
  display: inline-flex; align-items: center;
  background: var(--border-soft); color: var(--text-muted);
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.seed-disclosure {
  font-size: 12px; font-style: italic; color: var(--text-muted);
  line-height: 1.5; margin-bottom: 10px;
}

/* Elder setup banner */
.elder-setup-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--sage-pale); border: 1px solid var(--sage);
  border-radius: 8px; font-size: 13.5px; color: var(--text-body);
}
.elder-setup-banner span { flex: 1; }
.elder-setup-link {
  font-weight: 700; color: var(--sage); text-decoration: underline;
}
.elder-setup-link:hover { color: var(--navy); }

/* TIN nudge banner */
.tin-nudge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-left: 3px solid var(--yellow); border-radius: 8px;
  font-size: 13.5px; color: var(--text-body);
}
.tin-nudge span { flex: 1; }
.tin-nudge-link {
  font-size: 13px; font-weight: 700; color: var(--navy);
  white-space: nowrap; text-decoration: none;
  padding: 4px 12px; border: 1.5px solid var(--navy);
  border-radius: 6px; transition: background .12s, color .12s;
}
.tin-nudge-link:hover { background: var(--navy); color: #fff; }

/* Leaderboard */
.lb-header { display: flex; align-items: center; gap: 14px; padding: 24px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.lb-trophy { width: 32px; height: 32px; flex-shrink: 0; color: var(--yellow); stroke-width: 1.6; }
.lb-title { font-size: 20px; font-weight: 700; color: var(--text-main); margin: 0 0 2px; }
.lb-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
/* Three boards visible at once, in their own panels -- not tabs hiding two
   of the three at any moment (Jake, Jul 2026: "cards / rankings in
   different quadrants of the page, not just one list down the middle").
   Combined spans both rows on the left as the featured panel; Funniest and
   Most Insightful stack on the right as smaller companion panels -- three
   distinct zones rather than a forced 2x2 with an invented fourth board. */
.lb-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 20px;
}
.lb-panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px;
}
.lb-panel--featured { grid-row: 1 / 3; }
.lb-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.lb-panel-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.lb-panel-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.lb-list { list-style: none; padding: 0; margin: 0; }
.lb-list--compact .lb-row { padding: 9px 0; gap: 10px; }
.lb-list--compact .lb-av { width: 28px; height: 28px; font-size: 10px; }
.lb-list--compact .lb-handle { font-size: 13px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 24px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lb-row:nth-child(1) .lb-rank { color: var(--yellow); font-size: 15px; }
.lb-row:nth-child(2) .lb-rank { color: var(--text-body); }
.lb-row:nth-child(3) .lb-rank { color: var(--sage); }
.lb-av { width: 36px; height: 36px; font-size: 12px; flex-shrink: 0; }
.lb-info { flex: 1; min-width: 0; }
.lb-name-row { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.lb-handle { font-size: 14px; font-weight: 600; color: var(--text-main); }
.lb-byline { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lb-score-num { font-size: 16px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.lb-score-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.lb-score-icon { width: 15px; height: 15px; color: var(--text-muted); }
.lb-empty { padding: 40px 0; text-align: center; font-size: 14px; color: var(--text-muted); }

/* Comment reactions */
.comment-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.post-foot { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--text-body); }
.stat { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat svg { width: 15px; height: 15px; color: var(--text-muted); }
.stat-btn { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 6px; color: var(--text-muted); cursor: pointer; }
.stat-btn:hover { background: var(--sky-pale); color: var(--navy); }
.stat-btn svg { width: 15px; height: 15px; }
.last-comment { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-weight: 500; font-style: italic; }
.post:not(.post-full) { cursor: pointer; }
.post:not(.post-full) a, .post:not(.post-full) button { cursor: pointer; }

/* ═══ THREAD RAIL ═══ */
.thread-feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--rail-gap); align-items: start; }
.thread-feed-main { min-width: 0; }
.thread-rail { display: flex; flex-direction: column; gap: 16px; }
.rail-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.rail-title { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.rail-stat-row { display: flex; gap: 10px; margin-bottom: 14px; }
.rail-stat { flex: 1; text-align: center; background: var(--sky-pale); border-radius: 8px; padding: 8px 4px; }
.rail-stat b { display: block; font-size: 15px; font-weight: 800; color: var(--navy); }
.rail-stat span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

.icon-chip { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-chip svg { width: 14px; height: 14px; }
.icon-chip.ic-navy { background: var(--sky-soft); color: var(--navy); }
.icon-chip.ic-burgundy { background: var(--burgundy-pale); color: var(--burgundy); }
.icon-chip.ic-sage { background: var(--sage-pale); color: var(--sage); }
.icon-chip.ic-gold { background: var(--elder-bg); color: var(--elder-gold); }

.rule-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.rule-row:last-child { margin-bottom: 0; }
.rule-text b { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.3; }

.rec-card { border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; }
.rec-card:last-child { margin-bottom: 0; }
.rec-card.tint-navy { background: var(--sky-pale); }
.rec-card.tint-gold { background: var(--elder-bg); }
.rec-card.tint-sage { background: var(--sage-pale); }
.rec-card-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }
.rec-card-title { font-size: 12.5px; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: 4px; }
.rec-card-sub { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.rec-card-cta { display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--navy-mid); }

/* ═══ ELLIPSIS MENU ═══ */
.ellipsis-menu { position: relative; }
.ellipsis-drop {
  display: none;
  position: absolute;
  top: calc(100% + 4px); right: 0;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20,39,78,0.10);
  overflow: hidden; z-index: 90;
}
.ellipsis-drop.open { display: block; }
.ellipsis-drop a, .ellipsis-drop button {
  display: block; width: 100%;
  text-align: left; padding: 10px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--navy);
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.ellipsis-drop a:hover, .ellipsis-drop button:hover { background: var(--sky-pale); }
.ellipsis-drop .danger { color: var(--burgundy); }
.ellipsis-drop .danger:hover { background: var(--burgundy-pale); }

/* ═══ BOOKMARK BUTTON ═══ */
.post-foot .bookmark-btn { margin-left: auto; }
.bookmark-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 6px; color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.bookmark-btn:hover { background: var(--sky-pale); color: var(--navy); }
.bookmark-btn.bookmarked { color: var(--yellow); }

/* ═══ INSIGHTS ═══ */
.section { margin-bottom: 36px; }
.section-head { display: flex; align-items: center; margin-bottom: 22px; }
.section-head h2 { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.022em; }
.see-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--navy-mid); }
.see-all:hover { color: var(--navy); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Breadcrumb-in-header pattern: a drill-down page's header keeps the exact
   same shape as its parent's (title left, meta right) instead of adding a
   separate "back" row above the filter bar -- that extra row is what used
   to make the filter bar jump position between the two pages. */
.section-head h2 .crumb { color: var(--text-muted); font-weight: 700; cursor: pointer; }
.section-head h2 .crumb:hover { color: var(--navy-mid); }
.section-head h2 .crumb-sep { color: var(--text-faint); font-weight: 500; margin: 0 6px; }
.n-badge { font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* ═══ DISCOVER CAROUSELS ═══ */
.car-btns { margin-left: auto; display: flex; gap: 6px; }
.car-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.car-btn:hover:not(:disabled) { background: var(--sky-pale); border-color: var(--text-muted); }
.car-btn:disabled { opacity: 0.28; cursor: default; }
.car-btn svg { width: 13px; height: 13px; }
.disc-carousel-wrap { overflow: hidden; }
.disc-carousel {
  display: flex; gap: 14px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.disc-card {
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.disc-card:hover { border-color: #DCD9E3; box-shadow: 0 4px 14px rgba(20,39,78,0.05); }
.disc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.disc-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.disc-sub   { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.disc-body  { font-size: 13px; color: var(--text-body); line-height: 1.5; flex: 1; }
.disc-meta  { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.disc-tag   { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.disc-tag.vendors  { background: var(--sky-soft);      color: var(--navy); }
.disc-tag.ops      { background: var(--sage-pale);     color: var(--sage); }
.disc-tag.re       { background: var(--burgundy-pale); color: var(--burgundy); }
.disc-tag.virtual  { background: var(--slate-pale);    color: var(--slate); }
.disc-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.disc-action {
  align-self: flex-start;
  background: var(--sky-pale); color: var(--navy-mid);
  border: 1px solid var(--sky-soft); border-radius: 8px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; margin-top: auto;
}
.disc-action:hover { background: var(--sky-soft); color: var(--navy); }
.disc-action.outline { background: var(--bg); border-color: var(--border); color: var(--navy); }
.disc-action.outline:hover { background: var(--sky-pale); }
.disc-rating { display: flex; align-items: baseline; gap: 6px; }
.disc-stars  { color: var(--yellow); font-size: 13px; }
.disc-score  { font-size: 16px; font-weight: 700; color: var(--navy); }
.disc-date { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sage); }
.disc-where { font-size: 12px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 4px; }

/* "View all" drill-down pages (Jake, Jul 2026 -- each Discover carousel gets
   a full page instead of only ever showing what fits in the scroll strip).
   .disc-card's own flex sizing is carousel-specific and simply doesn't
   apply inside this grid parent, so the same card styling is reused as-is. */
.section-all-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.section-all-back { font-size: 13px; font-weight: 600; color: var(--navy-mid); flex-shrink: 0; }
.section-all-back:hover { color: var(--navy); }
.section-all-title { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.022em; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.disc-where svg { flex-shrink: 0; }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.18s, box-shadow 0.18s; }
.card:hover { border-color: #DCD9E3; box-shadow: 0 4px 14px rgba(20,39,78,0.05); }

.card.trending { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.t-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.t-icon.blue     { background: var(--sky-soft);      color: var(--navy); }
.t-icon.sage     { background: var(--sage-pale);     color: var(--sage); }
.t-icon.burgundy { background: var(--burgundy-pale); color: var(--burgundy); }
.t-head { display: flex; align-items: flex-start; gap: 12px; }
.t-headline { font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: -0.015em; flex: 1; }
.t-headline a { color: inherit; text-decoration: none; }
.t-headline a:hover { text-decoration: underline; }
.t-dek { font-size: 13.5px; color: var(--text-body); line-height: 1.55; flex: 1; }
.t-meta { padding-top: 4px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.t-tag { display: inline-block; background: var(--sky-soft); color: var(--navy); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; flex-shrink: 0; }
.t-tag.sage { background: var(--sage-pale); color: var(--sage); }
.t-tag.burgundy { background: var(--burgundy-pale); color: var(--burgundy); }
.t-count { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.t-count strong { color: var(--navy); font-weight: 600; }
.t-cta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--sage); text-decoration: none; }
.t-cta:hover { text-decoration: underline; }

.card.metric { padding: 18px 18px 16px; display: flex; flex-direction: column; min-height: 200px; }
.m-label { font-size: 14px; color: var(--navy); font-weight: 600; line-height: 1.3; }
.m-sublabel { font-size: 12.5px; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; }
.m-value { font-size: 34px; font-weight: 700; color: var(--navy); letter-spacing: -0.028em; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; margin: 4px 0 6px; }
.m-value .unit { font-size: 18px; font-weight: 600; color: var(--text-body); }
.m-delta { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.m-delta-num { color: var(--sage); font-weight: 600; }
.m-delta-meta { color: var(--text-muted); font-weight: 500; }
.m-spark { width: 100%; height: 36px; display: block; margin-top: auto; padding-top: 12px; }

/* ═══ BENCHMARK TILES ═══
   Two card shapes, one set of classes: numeric-bucketed (team size, revenue,
   years in business) shows a computed peer-median bucket in .tile-number;
   categorical (vendor picks, signup-question cards) shows the majority
   answer itself via .tile-number.text. Both share .tile-fact (your own
   position, stated once, never restated in the chart) and .dist-row.majority
   (gold marks the peer group's majority bucket -- not "you"). */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Home-page benchmark preview only -- "See all" keeps .grid-2. Scoped
   separately rather than changing .grid-2 itself, which templates/insights/
   benchmarks_all.html still uses. */
.grid-3-preview { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid-3-preview { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3-preview { grid-template-columns: 1fr; } }

.card.tile { padding: 20px 22px 18px; display: flex; flex-direction: column; }
.card.tile.tile-flagged { border-left: 3px solid var(--yellow); }
.tile-flag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8A5A12; background: rgba(242,178,51,0.16); padding: 3px 9px; border-radius: 5px;
  margin-bottom: 12px; align-self: flex-start;
}
.tile-flag::before { content: '\25CF'; font-size: 7px; }
.tile-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.tile-label { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: -0.01em; }
.tile-N { font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }

.tile-value { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tile-number { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -0.028em; line-height: 1; font-variant-numeric: tabular-nums; }
.tile-number.text { font-size: 18px; letter-spacing: -0.01em; font-weight: 700; }
.tile-context { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }

.tile-fact { font-size: 12.5px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.tile-fact .icon { display: inline-flex; }
.tile-fact .icon svg { width: 14px; height: 14px; }
.tile-fact.high { color: var(--burgundy); }
.tile-fact.high .icon svg { color: var(--burgundy); }
.tile-fact.flat { color: var(--text-muted); font-weight: 500; }

.dist { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.dist-row { display: grid; grid-template-columns: 150px 1fr 28px; align-items: center; gap: 10px; padding: 3px 0; font-size: 11.5px; color: var(--text-body); }
.dist-row .lbl { font-weight: 500; }
.dist-row .lbl.majority { color: var(--navy); font-weight: 700; }
.dist-row .bar-wrap { height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.dist-row .bar { height: 100%; background: var(--navy-mid); border-radius: 3px; }
.dist-row .bar.majority { background: var(--yellow); }
.dist-row .n { text-align: right; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 8px; }

/* Donut shape -- HCSO surcharge handling, minimum wage response. No axis,
   no legend to decode beyond the rows themselves: the segments and the
   direct-labeled legend rows are the whole chart. Center stays blank until
   a legend row is hovered (a static number there read as "decoration
   posing as data" in review), then shows that row's share. */
.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; }
.donut { width: 100px; height: 100px; position: relative; flex-shrink: 0; }
.donut svg { transform: rotate(-90deg); filter: drop-shadow(0 6px 14px rgba(20,39,78,0.12)); }
.donut circle { transition: opacity .18s ease; }
.donut-center {
  position: absolute; inset: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--bg) 55%, var(--bg-soft) 100%);
}
.donut-center .v { font-size: 16px; font-weight: 800; color: var(--navy); opacity: 0; transition: opacity .15s ease; }
.donut-center .v.is-shown { opacity: 1; }
.donut-legend { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.donut-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-body); cursor: pointer;
  padding: 5px 7px; margin: 0 -7px; border-radius: 7px; transition: background .15s;
}
.donut-row:hover, .donut-row.is-active { background: var(--bg-soft); }
.donut-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.donut-row .pct { margin-left: auto; font-weight: 700; color: var(--navy); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Ring color assigned by position (0 = majority, since signup_question_card
   already sorts by count descending) -- same fixed sequence for the swatch
   and its matching arc, gold reserved for the majority slot only. */
.donut-seg-0, .donut-swatch-0 { stroke: var(--yellow); background: var(--yellow); }
.donut-seg-1, .donut-swatch-1 { stroke: var(--navy-mid); background: var(--navy-mid); }
.donut-seg-2, .donut-swatch-2 { stroke: var(--sky-soft); background: var(--sky-soft); }
.donut-seg-3, .donut-swatch-3 { stroke: var(--border); background: var(--border); }
.donut-seg-4, .donut-swatch-4 { stroke: var(--sage-pale); background: var(--sage-pale); }
.donut-seg-5, .donut-swatch-5 { stroke: var(--burgundy-pale); background: var(--burgundy-pale); }

.tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 12px; }
.tile-foot .why { color: var(--text-muted); font-style: italic; line-height: 1.4; }

.vendor-list { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.vendor-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.vendor-line:last-of-type { border-bottom: none; }
.vendor-line .v-name { font-weight: 700; color: var(--navy); line-height: 1.3; }
.vendor-line .v-share { font-size: 12px; color: var(--text-body); text-align: right; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.you-pill { background: var(--yellow); color: var(--navy); font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }

.split-row { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; }
.vendor-card { padding: 20px 20px 6px; }
.vendor-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
table.vendors { width: 100%; border-collapse: collapse; }
table.vendors th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 8px 8px; border-bottom: 1px solid var(--border); }
table.vendors td { padding: 13px 8px; font-size: 14px; color: var(--navy); border-bottom: 1px solid var(--border-soft); }
table.vendors tr:last-child td { border-bottom: 0; }
table.vendors .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.star { color: var(--yellow); margin-left: 3px; }
.report-card { padding: 20px; display: flex; flex-direction: row; gap: 16px; }
@media (max-width: 620px) { .report-card { flex-direction: column; } }
.report-body { background: var(--sky-pale); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.report-icon { width: 38px; height: 38px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.report-icon svg { width: 18px; height: 18px; color: var(--navy-mid); }
.report-title { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.22; letter-spacing: -0.018em; }
.report-desc { font-size: 12.5px; color: var(--text-body); line-height: 1.55; }
/* Deliberately its own class, not .report-btn -- that class is the
   content-moderation "Report" trigger (base.html's global click handler
   opens the report-a-post modal for anything matching .report-btn). The
   Insights "sample operator report" preview used to share that class by
   coincidence, so clicking it opened the wrong modal with no data-type/
   data-id (AJ, Jul 2026). Same visual treatment, no shared identity. */
.sample-report-btn { align-self: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer; }
.sample-report-btn:hover { background: var(--sky-soft); border-color: var(--sky-soft); }

.insights-cta { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.cta-text { flex: 1; }
.cta-title { font-weight: 700; font-size: 14.5px; color: var(--navy); margin-bottom: 2px; }
.cta-sub { font-size: 13px; color: var(--text-body); line-height: 1.4; }

/* ═══ ELDERS ═══
   Pixel-matched to the "Illustrative" Elder card in hq's own /join landing
   page (hq/src/components/join/LandingTab.tsx, ElderBand) -- that's the
   design AJ actually built and approved; this ports it faithfully rather
   than approximating. Colors reuse this app's own tokens where they're
   already an exact or near-exact match (--yellow == hq's --gold-primary
   #F2B233 exactly; --navy is close enough to hq's --navy-ink that a second,
   slightly-different navy on the same page would look like a mistake, not
   fidelity) -- structure, spacing, and effects are copied 1:1. */
/* 460px is the demo card's own max-width (hq's ElderBand, width:100%;
   max-width:460px) -- a fixed column width, not a stretched 1fr, so the
   card keeps its designed proportions regardless of how many columns fit
   or how sparse a given Elder's content is. */
/* justify-content: center -- auto-fill computes column count off the 460px
   max (a fixed value, not flexible), so within .main's ~1128px content
   width only 2 columns ever fit (934px), leaving ~194px that the grid's
   default justify-content: start dumped entirely on the right (0px left
   gutter, 226px right, confirmed live). Centering splits that remainder
   evenly instead of reading as flushed-left. */
.elder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 460px)); justify-content: center; gap: 14px; margin-bottom: 36px; }

.elder-card {
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: 24px 26px 22px;
  display: flex; flex-direction: column;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.elder-card:hover { box-shadow: 0 4px 14px rgba(20,39,78,0.06); border-color: #DCD9E3; }

.elder-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.elder-av-wrap { position: relative; flex-shrink: 0; }
.elder-av {
  width: 68px; height: 68px; border-radius: 50%;
  border: 2.5px solid var(--yellow);
  box-shadow: 0 4px 12px rgba(20,39,78,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 19px;
  overflow: hidden;
}
.elder-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elder-av.amber    { background: #C87E2A; }
.elder-av.navy     { background: var(--navy); }
.elder-av.sage     { background: var(--sage); }
.elder-av.burgundy { background: var(--burgundy); }

.elder-badge-pill {
  position: absolute;
  bottom: -5px; right: -5px;
  background: var(--yellow); color: var(--navy);
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; border: 2px solid #fff;
}
/* .elder-founding-tag is shared with several inline, non-overlapping usages
   (thread cards, leaderboard, profile) -- only override its position when
   it's standing in for the badge-pill on an avatar, never globally. */
.elder-av-wrap .elder-founding-tag {
  position: absolute; bottom: -5px; right: -5px;
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; border: 2px solid #fff;
}
/* .demo-tag defaults to normal document flow everywhere else it's used, but
   that expands .elder-av-wrap's height on any demo-seeded account -- which
   then shifts where the Elder badge's bottom:-5px lands, since it's relative
   to the wrapper's now-taller box, not the 68px avatar circle alone. Pin it
   to the avatar's opposite corner instead so demo accounts and real ones
   lay out identically. */
.elder-av-wrap .demo-tag {
  position: absolute; top: -6px; right: -6px;
  font-size: 7.5px; padding: 1px 5px;
}

.elder-name-block { flex: 1; min-width: 0; }
.elder-handle-row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.elder-handle { font-size: 15px; font-weight: 700; color: var(--navy); }
.elder-biz { font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; line-height: 1.4; }

.no-results {
  grid-column: 1 / -1;
  text-align: center; padding: 48px 24px;
  border: 1px dashed var(--border); border-radius: 12px;
  color: var(--text-muted); font-size: 14px;
}

.elders-cta-band {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--sky-pale);
}
.elders-cta-text .cta-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.elders-cta-text .cta-sub { font-size: 13px; color: var(--text-body); }
.elder-apply-btn {
  flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; color: var(--navy);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.elder-apply-btn:hover { background: var(--sky-soft); border-color: var(--text-muted); }

/* ═══ ELDER CARD STATS ═══ */
.elder-yrs-block {
  display: flex; align-items: baseline; gap: 9px;
  padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.elder-yrs-num { font-size: 36px; font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; }
.elder-yrs-unit { font-size: 13.5px; color: var(--text-muted); font-weight: 500; }
.elder-meta-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-bottom: 4px; }
.elder-biz-type-tag {
  display: inline-block; background: var(--sky-pale); color: var(--navy);
  border: 1px solid rgba(55,102,160,0.18); font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
}
.elder-founding-tag {
  display: inline-block; background: var(--elder-bg); color: var(--elder-gold);
  border: 1px solid var(--elder-border); font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
}

/* ═══ ELDER BOOK BUTTON ═══ */
.elder-book-btn {
  display: block; width: 100%;
  background: var(--yellow); color: var(--navy);
  border-radius: 9px; padding: 11px 16px;
  font-size: 13.5px; font-weight: 700; text-align: center;
  margin-top: auto; margin-bottom: 0;
  box-shadow: 0 1px 2px rgba(20,39,78,0.10);
  transition: background 0.15s, box-shadow 0.18s;
}
.elder-book-btn:hover { background: var(--yellow-hover); box-shadow: 0 4px 12px rgba(242,178,51,0.28); }

/* ═══ ELDER MARKETPLACE ═══ */
.elder-marketplace-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.elder-search {
  flex: 1 1 260px; min-width: 0;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 14px; font-size: 14px; font-family: inherit; color: var(--navy);
}
.elder-search:focus { outline: none; border-color: var(--yellow); box-shadow: 0 2px 12px rgba(242,178,51,0.15); }
.elder-marketplace-bar .filter-select { width: auto; min-width: 150px; }
.elder-avail-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-body); font-weight: 500; cursor: pointer; white-space: nowrap; }
.elder-avail-toggle input { accent-color: var(--sage); }

.elder-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 10px; font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; }
.star { color: rgba(20,39,78,0.18); font-size: 15px; }
.star.filled { color: var(--yellow); }
.star.partial {
  background: linear-gradient(to right, var(--yellow) var(--fill, 50%), rgba(20,39,78,0.18) var(--fill, 50%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.elder-rating .elder-rating-meta { color: var(--text-muted); font-weight: 500; }

.elder-strengths { margin-top: 14px; }
.elder-strengths-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.elder-strengths ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.elder-strengths li {
  position: relative; padding-left: 16px; font-size: 13px; color: var(--text-body); line-height: 1.4;
  /* Setup form caps new entries at 60 chars, but this clamp is the real
     guarantee -- older data, pasted text, or a narrower mobile-width card
     can never grow past 2 lines and break the card's fixed proportions. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.elder-strengths li::before { content: "•"; position: absolute; left: 2px; color: var(--yellow); font-weight: 800; }
/* A strength slot the Elder hasn't filled in yet -- still occupies its row
   (card height/rhythm never depends on how much they've filled out) but
   reads as an open slot, not a real claim. */
.elder-strengths li.tbd { color: var(--text-faint); font-style: italic; }
.elder-strengths li.tbd::before { color: var(--text-faint); }

.elder-divider { border-top: 1px solid var(--border); margin-top: 16px; }
.elder-rate-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; margin-top: 0; }
.elder-rate-num { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.elder-rate-num--strike { color: var(--text-faint); text-decoration: line-through; font-weight: 600; font-size: 16px; }
.elder-rate-free-badge { font-size: 20px; font-weight: 800; color: var(--elder-gold); letter-spacing: -0.02em; }
.elder-rate-unit { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.elder-duration { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }

.elder-avail { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--sage); margin-top: 10px; }
.elder-avail.elder-avail--muted { color: var(--text-muted); }
.avail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; }
.avail-dot.avail-dot--muted { background: var(--text-faint); }

.elder-slots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.elder-slot-btn {
  border: 1px solid var(--border); background: var(--bg); border-radius: 9px;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  font-family: inherit; cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.elder-slot-btn strong { font-weight: 800; }
.elder-slot-btn:hover:not(:disabled) { border-color: var(--yellow); background: var(--sky-pale); }
.elder-slot-btn.booked, .elder-slot-btn:disabled { opacity: 0.55; cursor: default; border-color: var(--sage); color: var(--sage); }

/* Marketplace card is now a link → detail page */
a.elder-card { text-decoration: none; color: inherit; }
.elder-slot-chip {
  border: 1px solid #E5E7EB; background: #FFFFFF; border-radius: 10px;
  padding: 12px 6px; font-size: 13.5px; font-weight: 600; color: var(--navy);
  text-align: center; transition: border-color 0.15s, background 0.15s;
}
.elder-slot-chip .slot-day { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
/* No grid-column span here anymore -- with exactly 3 slots always shown
   (real ones plus "By request" padding, never just one lone placeholder),
   a muted chip must occupy a single column like its siblings, not claim
   the full row and force the others onto their own rows underneath it. */
.elder-slot-chip.muted { color: var(--text-muted); font-style: italic; font-weight: 500; text-align: center; border-style: dashed; }
.elder-view-cta {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.elder-view-cta span { transition: transform 0.15s; }
.elder-card:hover .elder-view-cta span { transform: translateX(3px); }

/* ═══ ELDER DETAIL (Intro-style profile) ═══ */
.elder-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; }
.elder-back:hover { color: var(--navy); }

.elder-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--rail-gap); align-items: start; }

/* Avatar panel (initials medallion stands in for a photo — anonymity) */
.ed-avatar {
  position: relative; width: 100%; max-width: 340px; aspect-ratio: 4 / 5;
  border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ed-avatar.navy     { background: linear-gradient(160deg, var(--sky-pale), var(--sky-soft)); }
.ed-avatar.sage     { background: linear-gradient(160deg, #EAF3EC, var(--sage-pale)); }
.ed-avatar.burgundy { background: linear-gradient(160deg, #F7ECEC, var(--burgundy-pale)); }
.ed-avatar-medallion {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 42px; letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(20,39,78,0.18);
  overflow: hidden;
}
.ed-avatar-medallion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-avatar-medallion.navy     { background: var(--navy); }
.ed-avatar-medallion.sage     { background: var(--sage); }
.ed-avatar-medallion.burgundy { background: var(--burgundy); }
.ed-badge {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--elder-gold); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 7px;
}
.ed-verified {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.92); color: var(--sage);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(20,39,78,0.10);
}
.ed-verified svg { width: 12px; height: 12px; }

.ed-identity { margin-top: 20px; }
.ed-name-row { display: flex; align-items: center; gap: 9px; }
.ed-handle { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; word-break: break-word; }
.ed-check { width: 19px; height: 19px; flex-shrink: 0; }
.ed-byline { font-size: 15px; color: var(--text-muted); margin-top: 5px; }
.ed-stars { display: flex; align-items: center; gap: 1px; margin-top: 9px; font-variant-numeric: tabular-nums; }
.ed-star { color: var(--text-faint); font-size: 16px; line-height: 1; }
.ed-star.on { color: var(--yellow); }
.ed-star.partial {
  background: linear-gradient(to right, var(--yellow) var(--fill, 50%), var(--text-faint) var(--fill, 50%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ed-rating-num { color: var(--elder-gold); font-weight: 700; font-size: 15px; margin-left: 7px; }
.ed-rating-cnt { color: var(--text-muted); font-size: 13px; margin-left: 3px; }

.ed-about { margin-top: 26px; }
.ed-h { font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 12px; }
.ed-about-text { font-size: 15px; line-height: 1.65; color: var(--text-body); }
.ed-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ed-tag { background: var(--sky-pale); color: var(--navy); border: 1px solid rgba(55,102,160,0.16); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.ed-wisdom-line { margin-top: 16px; font-size: 13px; color: var(--text-muted); }

/* Booking card (right rail, sticky) */
.ed-book-card {
  position: sticky; top: 84px;
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  background: var(--bg); box-shadow: 0 4px 20px rgba(20,39,78,0.06);
}
.ed-book-eyebrow { display: inline-block; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 7px; }
.ed-book-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-top: 14px; letter-spacing: -0.01em; }
.ed-book-desc { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 8px; }
.ed-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ed-price-block { display: flex; align-items: baseline; gap: 7px; }
.ed-price { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.ed-price--strike { color: var(--text-faint); text-decoration: line-through; font-weight: 600; font-size: 18px; }
.ed-price--free { color: var(--elder-gold); }
.ed-price-unit { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.ed-price-rating { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.ed-book-card .elder-avail { margin-top: 14px; }
.ed-slots-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 18px; margin-bottom: 10px; }
.ed-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-slot-btn {
  border: 1px solid var(--border); background: var(--bg); border-radius: 9px;
  padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  font-family: inherit; cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.ed-slot-btn strong { font-weight: 800; }
.ed-slot-btn:hover:not(:disabled) { border-color: var(--yellow); background: var(--sky-pale); }
.ed-slot-btn.booked, .ed-slot-btn:disabled { opacity: 0.6; cursor: default; border-color: var(--sage); color: var(--sage); }
.ed-request-notes {
  width: 100%; flex-basis: 100%; resize: vertical;
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-size: 13px; font-family: inherit; color: var(--navy); background: var(--bg);
}
.ed-request-notes:focus { outline: none; border-color: var(--yellow); }
.ed-request-btn {
  width: 100%; background: var(--yellow); color: var(--navy);
  border: none; border-radius: 9px; padding: 12px 16px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,39,78,0.10); transition: background 0.15s, box-shadow 0.18s;
}
.ed-request-btn:hover:not(:disabled) { background: var(--yellow-hover); box-shadow: 0 4px 12px rgba(242,178,51,0.28); }
.ed-book-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-top: 14px; }

/* Supporting sections */
.ed-section { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--border); }
.ed-expect-box { background: var(--sky-pale); border-radius: 12px; padding: 22px 24px; }
.ed-expect-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.ed-expect-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ed-expect-box li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--text-body); line-height: 1.5; }
.ed-expect-box li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }

.ed-acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; font-family: inherit; font-size: 20px; font-weight: 700; color: var(--navy); cursor: pointer; }
.ed-acc-head svg { width: 13px; height: 8px; color: var(--text-muted); transition: transform 0.2s; }
.ed-acc-head.open svg { transform: rotate(180deg); }
.ed-acc-body { display: none; list-style: none; margin: 16px 0 0; padding: 0; flex-direction: column; gap: 10px; }
.ed-acc-head.open + .ed-acc-body { display: flex; }
.ed-acc-body li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--text-body); line-height: 1.5; }
.ed-acc-body li::before { content: "•"; position: absolute; left: 2px; color: var(--yellow-hover); font-weight: 800; }

.ed-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ed-how-box { background: var(--border-soft); border-radius: 12px; padding: 24px 20px; text-align: center; }
.ed-how-icon { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--navy); }
.ed-how-icon svg { width: 22px; height: 22px; }
.ed-how-box h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.ed-how-box p { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.ed-faq { border-top: 1px solid var(--border); }
.ed-faq-row { border-bottom: 1px solid var(--border); }
.ed-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--navy); cursor: pointer; }
.ed-faq-pm { font-size: 20px; font-weight: 400; color: var(--text-muted); flex-shrink: 0; line-height: 1; }
.ed-faq-a { display: none; padding: 0 0 18px; }
.ed-faq-q.open + .ed-faq-a { display: block; }
.ed-faq-a p { font-size: 14px; line-height: 1.6; color: var(--text-body); max-width: 640px; }

/* Mobile sticky booking bar */
.ed-sticky-book { display: none; }

/* ═══ BIZ CARD ═══ */
.biz-band {
  height: 52px;
  background: url('../images/biz-band.jpg') center 45% / cover no-repeat,
    linear-gradient(120deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
}
.biz-av {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  border: 3px solid var(--bg);
  position: absolute; left: 18px; top: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  overflow: hidden;
}
.biz-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-card-info { min-width: 0; padding: 32px 18px 15px; }
.biz-founder {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--elder-gold); background: var(--elder-bg); border: 1px solid var(--elder-border);
  padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
}

/* ═══ TOAST ═══ */
.toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px rgba(20,39,78,0.12);
  font-size: 14px; color: var(--navy); font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast-check { width: 18px; height: 18px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; }
/* Error variant -- same shape/position, burgundy instead of sage, matching
   .flash-msg.error's existing palette (platform.css above). */
.toast.error .toast-check { background: var(--burgundy); }

/* A live "new notification just arrived" toast -- distinct from the plain
   checkmark confirmation toast above (that one means "your action
   succeeded"; this one means "something happened without you"), so it
   gets its own bell icon and is clickable through to the notification. */
.notif-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px rgba(20,39,78,0.12);
  max-width: 320px; cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}
.notif-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.notif-toast-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--sky-pale); color: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notif-toast-icon svg { width: 15px; height: 15px; }
.notif-toast-text { font-size: 13.5px; font-weight: 500; color: var(--navy); line-height: 1.4; }
.notif-toast-close {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 15px; line-height: 1; padding: 2px; margin-left: 4px; flex-shrink: 0;
}
.notif-toast-close:hover { color: var(--navy); }

/* ═══ PROFILE POPUP ═══ */
.popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,39,78,0.22);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.popup-overlay.open { display: flex; }
.popup-card {
  background: var(--bg); border-radius: 20px;
  padding: 28px 28px 24px;
  width: 100%; max-width: 500px; max-height: 88vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 20px 60px rgba(20,39,78,0.18);
}
.popup-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border-soft); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer;
}
.popup-close:hover { background: var(--border); color: var(--navy); }
.popup-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.popup-head-info { flex: 1; min-width: 0; }
.popup-name { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 3px; }
.popup-restaurant { font-size: 13.5px; font-weight: 600; color: var(--text-body); margin-bottom: 2px; }
.popup-detail { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.popup-elder-yrs { margin-top: 16px; }
.popup-elder-tags { margin-bottom: 16px; }
.popup-book-btn {
  display: block; width: 100%;
  background: var(--yellow); color: var(--navy);
  border-radius: 10px; padding: 13px 16px;
  font-size: 14.5px; font-weight: 700; text-align: center;
  box-shadow: 0 1px 2px rgba(20,39,78,0.10);
  transition: background 0.15s; margin-bottom: 8px;
}
.popup-book-btn:hover { background: var(--yellow-hover); }

/* ═══ TAB PANELS ═══ */
.panel { display: none; }
.panel.active { display: contents; }

/* ═══ DISCOVER PANELS ═══ */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(20,39,78,0.16);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.panel-backdrop.show { opacity: 1; pointer-events: auto; }

.discover-panel {
  position: fixed;
  top: 64px; right: 0; bottom: 0;
  width: 460px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(20,39,78,0.10);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 500;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.discover-panel.open { transform: translateX(0); }

.dp-header {
  position: sticky; top: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 20px 24px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.dp-title { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; flex: 1; }
.dp-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border-soft); color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.dp-close:hover { background: var(--border); color: var(--navy); }
.dp-body { padding: 22px 24px 48px; flex: 1; }
.dp-intro { font-size: 13.5px; color: var(--text-body); line-height: 1.55; margin-bottom: 22px; }

.dp-group-card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px;
}
.dp-group-card:hover { border-color: #DCD9E3; }
.dp-group-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.dp-group-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.dp-group-count { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.dp-group-desc { font-size: 13px; color: var(--text-body); line-height: 1.5; margin-bottom: 12px; }
.dp-join-btn {
  background: var(--sky-pale); color: var(--navy-mid);
  border: 1px solid var(--sky-soft); border-radius: 8px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.dp-join-btn:hover { background: var(--sky-soft); color: var(--navy); }

.dp-topic-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.dp-topic-row:last-child { border-bottom: 0; }
.dp-topic-rank { font-size: 13px; font-weight: 800; color: var(--text-faint); width: 16px; flex-shrink: 0; padding-top: 1px; }
.dp-topic-body { flex: 1; min-width: 0; }
.dp-topic-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 5px; }
.dp-topic-foot { display: flex; align-items: center; gap: 8px; }
.dp-topic-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }
.dp-topic-tag.vendors   { background: var(--sky-soft); color: var(--navy); }
.dp-topic-tag.ops       { background: var(--sage-pale); color: var(--sage); }
.dp-topic-tag.re        { background: var(--burgundy-pale); color: var(--burgundy); }
.dp-topic-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }

.dp-event-card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px;
}
.dp-event-card:hover { border-color: #DCD9E3; }
.dp-event-date { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sage); margin-bottom: 5px; }
.dp-event-title { font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 4px; }
.dp-event-where { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.dp-event-desc { font-size: 13px; color: var(--text-body); line-height: 1.5; margin-bottom: 12px; }
.dp-event-btn {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--navy); cursor: pointer;
  font-family: inherit;
}
.dp-event-btn:hover { background: var(--sky-pale); border-color: var(--sky-soft); }
.dp-event-badge { display: inline-block; background: var(--elder-bg); color: var(--elder-gold); border: 1px solid var(--elder-border); font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }

.dp-vendor-section { margin-bottom: 26px; }
.dp-vendor-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.dp-vendor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border-soft); margin-bottom: 5px;
}
.dp-vendor-row:hover { border-color: var(--border); background: var(--sky-pale); }
.dp-vendor-name { font-size: 13.5px; font-weight: 600; color: var(--navy); flex: 1; }
.dp-vendor-stars { color: var(--yellow); font-size: 11px; }
.dp-vendor-score { font-size: 12px; font-weight: 600; color: var(--text-body); margin-right: 2px; }
.dp-vendor-mentions { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }

/* ═══ REPORT MODAL ═══ */
.report-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,39,78,0.22);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.report-modal-overlay.open { display: flex; }
.report-modal {
  background: var(--bg); border-radius: 16px;
  padding: 24px 24px 20px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(20,39,78,0.18);
}
.report-modal h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.report-modal .reason-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.report-modal label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); cursor: pointer;
  font-size: 13.5px; color: var(--navy); font-weight: 500;
}
.report-modal label:hover { background: var(--sky-pale); border-color: var(--sky-soft); }
.report-modal label input[type=radio] { accent-color: var(--navy); }
.report-modal textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--navy);
  resize: vertical; min-height: 72px; margin-bottom: 14px; outline: none;
}
.report-modal textarea:focus { border-color: var(--navy-mid); }
.report-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ SAMPLE OPERATOR REPORT MODAL (Insights) ═══ */
.sample-report-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,39,78,0.22);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.sample-report-overlay.open { display: flex; }
.sample-report-modal {
  background: var(--bg); border-radius: 16px;
  padding: 24px 26px 22px;
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(20,39,78,0.18);
}
.sample-report-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sample-report-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-mid); background: var(--sky-pale); padding: 3px 9px; border-radius: 5px; margin-bottom: 8px;
}
.sample-report-hd h3 { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.015em; }
.sample-report-close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
}
.sample-report-close:hover { background: var(--sky-pale); color: var(--navy); }
.sample-report-intro { font-size: 13px; color: var(--text-body); line-height: 1.6; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.sample-report-section { margin-bottom: 16px; }
.sample-report-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.sample-report-stat { background: var(--sky-pale); border-radius: 10px; padding: 12px 14px; }
.sample-report-stat-title { font-size: 12.5px; font-weight: 600; color: var(--navy-mid); margin-bottom: 3px; }
.sample-report-stat-value { font-size: 18px; font-weight: 800; color: var(--navy); }
.sample-report-stat-value span { font-size: 12.5px; font-weight: 500; color: var(--text-body); }
.sample-report-body { font-size: 13px; color: var(--text-body); line-height: 1.6; }
.sample-report-body b { color: var(--navy); }
.sample-report-footer { font-size: 12px; color: var(--text-muted); line-height: 1.6; padding-top: 14px; border-top: 1px solid var(--border); }
.btn-ghost {
  padding: 9px 16px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 13px; font-weight: 600; color: var(--text-body);
  font-family: inherit; cursor: pointer;
}
.btn-ghost:hover { background: var(--sky-pale); color: var(--navy); }

/* ═══ USER MENU ═══ */
.user-menu-wrap { position: relative; }
.user-menu-pop {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 200px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(20,39,78,0.12);
  overflow: hidden; z-index: 300;
}
.user-menu-pop.open { display: block; }
.user-menu-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.user-menu-byline { font-size: 13px; font-weight: 700; color: var(--navy); }
.user-menu-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.user-menu-pop a, .user-menu-pop button {
  display: block; width: 100%;
  text-align: left; padding: 10px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--navy);
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.user-menu-pop a:hover, .user-menu-pop button:hover { background: var(--sky-pale); }
.user-menu-pop .logout { color: var(--burgundy); }
.user-menu-pop .logout:hover { background: var(--burgundy-pale); }
.user-menu-pop hr { border: none; border-top: 1px solid var(--border-soft); margin: 0; }
.nav-scores { display: flex; gap: 4px; padding: 14px 12px 10px; }
.nav-score { flex: 1; text-align: center; }
.nav-score-num { display: block; font-size: 16px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.nav-score-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* ═══ FLASH MESSAGES ═══ */
.messages-bar { padding: 0 32px; }
.flash-msg {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 500;
}
.flash-msg-text { flex: 1; }
.flash-msg-dismiss {
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: inherit; opacity: 0.5;
  padding: 2px 4px; margin: -2px -4px -2px 0; border-radius: 6px;
  transition: opacity .15s, background .15s;
}
.flash-msg-dismiss:hover { opacity: 0.9; background: rgba(0,0,0,0.06); }
.flash-msg-dismiss:focus-visible { outline: none; opacity: 0.9; box-shadow: 0 0 0 2px rgba(0,0,0,0.15); }
.flash-msg.success { background: var(--sage-pale); color: var(--sage); border: 1px solid rgba(79,136,103,0.2); }
.flash-msg.error { background: var(--burgundy-pale); color: var(--burgundy); border: 1px solid rgba(142,56,56,0.2); }
.flash-msg.info { background: var(--sky-pale); color: var(--navy); border: 1px solid var(--sky-soft); }
.flash-msg.warning { background: var(--elder-bg); color: var(--elder-gold); border: 1px solid var(--elder-border); }

.recert-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--elder-bg); border: 1px solid var(--elder-border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.recert-banner-text { font-size: 13.5px; color: var(--elder-gold); }
.recert-banner-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.recert-banner-link { font-size: 12.5px; font-weight: 600; color: var(--elder-gold); text-decoration: underline; }

/* Informational-only variant of .recert-banner (same palette, no action
   row -- verification is ops-reviewed, there's nothing for the member to
   click to speed it up). */
.verify-banner {
  background: var(--elder-bg); border: 1px solid var(--elder-border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px;
}
.verify-banner-text { font-size: 13.5px; color: var(--elder-gold); }

/* ═══ IMPERSONATION BANNER ═══ */
.impersonation-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 24px; font-size: 13px; font-weight: 600;
}
.impersonation-banner a { color: var(--yellow); text-decoration: underline; }
.impersonation-stop-form { display: inline; margin: 0; }

/* ═══ DEMO CONTENT BANNER ═══ */
.demo-content-banner {
  position: sticky; top: 0; z-index: 9997;
  background: #FDF6E3; color: #8A5A00; border-bottom: 1px solid #E8C88A;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 24px; font-size: 13px; font-weight: 600; text-align: center;
}
.demo-tag {
  display: inline-flex; align-items: center;
  background: #FDF6E3; color: #8A5A00; border: 1px dashed #C99A3C;
  font-size: 10px; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; flex-shrink: 0;
}
.impersonation-stop-form button {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--yellow); text-decoration: underline; cursor: pointer;
}

/* ═══ FORMS ═══ */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-input, .form-textarea, .form-select {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 14px; font-family: inherit; font-size: 14px; color: var(--navy);
  background: var(--bg); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 3px rgba(46,69,116,0.08);
}
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.55; }
.form-error { font-size: 12px; color: var(--burgundy); margin-top: 4px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ═══ COMMENT COMPOSER ═══ */
/* Resting: one filled pill, textarea + button on the same line, nothing
   else -- matches the plain "type here" bar of every major comment UI.
   Focus expands it (Reddit's own pattern): icon row (image, formatting)
   and Cancel/Comment appear on their own row below; the inline button
   hides in favor of the one in that row. Collapses back on blur only if
   nothing was typed and no image attached. */
.comments-section { margin-top: 24px; }
.comment-composer {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 22px;
  padding: 6px 6px 6px 16px; margin-bottom: 20px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, border-radius 0.15s, padding 0.15s;
}
.comment-composer:focus-within { border-color: var(--navy-mid); box-shadow: 0 0 0 3px rgba(46,69,116,0.08); background: var(--bg); }
.comment-composer.expanded { border-radius: 16px; padding: 12px 14px; }

.composer-row { display: flex; align-items: center; gap: 8px; }
.comment-composer .form-textarea {
  flex: 1; min-width: 0; border: none; background: none; resize: none;
  padding: 8px 0; min-height: 20px; max-height: 160px;
  box-shadow: none !important; font-size: 14px; line-height: 1.4;
}
.comment-composer .form-textarea:focus { border: none; box-shadow: none; }
.comment-composer.expanded .form-textarea { min-height: 52px; }

.composer-submit-inline { flex-shrink: 0; padding: 8px 18px; font-size: 13px; border-radius: 999px; }
.composer-submit-inline:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.comment-composer.expanded .composer-submit-inline { display: none; }

.composer-toolbar { display: none; gap: 2px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.composer-toolbar.open { display: flex; }
.fmt-btn {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-body); background: none; border: none; cursor: pointer; font-size: 13px;
}
.fmt-btn:hover { background: var(--border); color: var(--navy); }
.fmt-btn svg { width: 15px; height: 15px; }
.fmt-sep { width: 1px; background: var(--border); margin: 4px 4px; flex-shrink: 0; }

.composer-image-preview { display: none; align-items: flex-start; gap: 8px; margin: 8px 0; }
.composer-image-preview.has-image { display: flex; }
.composer-image-preview img { max-height: 120px; max-width: 220px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.composer-image-remove {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); cursor: pointer;
}
.composer-image-remove:hover { color: var(--burgundy); border-color: var(--burgundy); }
.composer-image-remove svg { width: 12px; height: 12px; }

.composer-action-row { display: none; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.comment-composer.expanded .composer-action-row { display: flex; }
.composer-icons { display: flex; align-items: center; gap: 2px; }
.composer-icon-btn {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700;
}
.composer-icon-btn:hover { background: var(--border); color: var(--navy); }
.composer-icon-btn svg { width: 17px; height: 17px; }
.composer-icon-btn.active { color: var(--navy-mid); background: var(--sky-pale); }
.composer-buttons { display: flex; align-items: center; gap: 8px; }
.composer-buttons .btn-outline { padding: 7px 14px; font-size: 12.5px; }
.composer-submit-expanded:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

.comment-composer.compact { padding: 4px 4px 4px 14px; margin-bottom: 0; margin-top: 8px; }
.comment-composer.compact.expanded { padding: 10px 12px; }
.comment-composer.compact .form-textarea { font-size: 13px; }
.comment-composer.compact .composer-submit-inline,
.comment-composer.compact .composer-submit-expanded { padding: 6px 14px; font-size: 12px; }

.comment-image { max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 8px; display: block; }

/* ═══ CREATE POST MODAL ═══ */
.post-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,39,78,0.32);
  display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.post-modal-overlay.open { display: flex; }
.post-modal {
  background: var(--bg); border-radius: 16px;
  width: 100%; max-width: 600px;
  box-shadow: 0 20px 60px rgba(20,39,78,0.25);
}
.post-modal-head {
  display: flex; align-items: center; justify-content: center; position: relative;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.post-modal-head h2 { font-size: 16px; font-weight: 800; color: var(--navy); }
.post-modal-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
}
.post-modal-close:hover { background: var(--sky-pale); color: var(--navy); }
.post-modal-close svg { width: 14px; height: 14px; }
#createPostForm { padding: 16px 20px 20px; }

.community-picker-wrap { position: relative; margin-bottom: 16px; }
.community-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); font-size: 13.5px; font-weight: 600; color: var(--navy);
  cursor: pointer;
}
.community-pill:hover { border-color: var(--navy-mid); }
.community-pill svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.15s; }
.community-picker-wrap.open .community-pill svg { transform: rotate(180deg); }
.community-picker {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  width: 320px; max-width: 90vw; background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(20,39,78,0.14); overflow: hidden;
}
.community-picker-wrap.open .community-picker { display: block; }
.community-picker-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.community-picker-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.community-picker-search input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--navy); }
.community-picker-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.community-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: none; background: none; text-align: left; cursor: pointer;
}
.community-option:hover { background: var(--sky-pale); }
.community-option-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff;
}
.community-option-avatar--group { background: var(--navy-mid); text-transform: uppercase; }
.community-option-text { min-width: 0; }
.community-option-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.community-option-meta { display: block; font-size: 11.5px; color: var(--text-muted); }

.post-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.post-tab {
  padding: 10px 4px; margin-right: 18px; font-size: 13.5px; font-weight: 700; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.post-tab:hover { color: var(--navy); }
.post-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.post-tab--disabled { color: var(--text-faint); cursor: default; }
.post-tab--disabled:hover { color: var(--text-faint); }

.post-title-group { position: relative; margin-bottom: 8px; }
.post-title-input {
  width: 100%; border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 60px 14px 16px; font-family: inherit; font-size: 16px; color: var(--navy);
  outline: none; transition: border-color 0.15s;
}
.post-title-input:focus { border-color: var(--navy-mid); }
.post-title-input::placeholder { color: var(--text-faint); }
.post-title-counter { position: absolute; right: 14px; bottom: -18px; font-size: 11px; color: var(--text-faint); }

.post-tags-row { position: relative; display: flex; align-items: center; gap: 8px; margin: 20px 0 14px; }
.tag-pill-btn {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); font-size: 12.5px; font-weight: 700; color: var(--text-body); cursor: pointer;
}
.tag-pill-btn:hover { border-color: var(--navy-mid); color: var(--navy); }
.post-tags-selected { font-size: 12.5px; font-weight: 700; color: var(--navy-mid); }
.tags-picker {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  flex-wrap: wrap; gap: 6px; width: 280px; padding: 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,39,78,0.14);
}
.tags-picker.open { display: flex; }
.tags-picker-option {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg); font-size: 12px; font-weight: 600; color: var(--text-body); cursor: pointer;
}
.tags-picker-option:hover { border-color: var(--navy-mid); color: var(--navy); }
.tags-picker-option.selected { background: var(--navy); color: #fff; border-color: var(--navy); }

.post-tab-panel { margin-bottom: 8px; }
.composer-toolbar--post {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 0;
  padding: 6px 8px; border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--bg-soft);
}
.post-body-input {
  width: 100%; border: 1px solid var(--border); border-radius: 0 0 10px 10px;
  padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--navy);
  resize: vertical; min-height: 140px; outline: none;
}
.post-body-input:focus { border-color: var(--navy-mid); }
.inline-image-uploading { font-size: 12px; color: var(--text-muted); padding: 6px 2px; }

.post-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--border); border-radius: 12px; padding: 48px 20px;
  color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: center;
}
.post-dropzone:hover, .post-dropzone.drag-over { border-color: var(--navy-mid); background: var(--sky-pale); color: var(--navy); }
.post-dropzone svg { width: 28px; height: 28px; }

.post-modal-error { font-size: 12.5px; color: var(--burgundy); margin: 8px 0 0; }
.post-modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.post-modal-actions .btn-yellow { padding: 10px 24px; border-radius: 999px; }
.post-modal-actions .btn-yellow:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

.post-image, .post-card-image { max-width: 100%; max-height: 420px; border-radius: 12px; margin-bottom: 12px; display: block; }
.post-card-image { max-height: 320px; }
.post-link-card, .post-card-link {
  display: block; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 12px; text-decoration: none; overflow: hidden; background: var(--bg);
}
.post-link-card:hover, .post-card-link:hover { border-color: var(--navy-mid); }
.post-link-image { display: block; width: 100%; max-height: 420px; object-fit: cover; background: var(--border-soft); }
.post-card-link .post-link-image { max-height: 320px; }
.post-link-footer { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.post-link-card:not(.has-image) .post-link-footer, .post-card-link:not(.has-image) .post-link-footer { padding: 9px 12px; }
.post-link-card:hover .post-link-footer, .post-card-link:hover .post-link-footer { background: var(--sky-pale); }
.post-link-footer svg { flex-shrink: 0; color: var(--sage); }
.post-link-domain { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sage); }

/* Create post / tag picker */
.tag-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.tag-chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 12.5px; font-weight: 600; color: var(--text-body);
  cursor: pointer; transition: all 0.12s;
}
.tag-chip:hover { border-color: var(--navy-mid); color: var(--navy); background: var(--sky-pale); }
.tag-chip.selected { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ═══ COMMENT THREAD ═══ */
.comment-list { display: flex; flex-direction: column; gap: 0; }
.comment {
  padding: 16px 0; border-bottom: 1px solid var(--border-soft);
}
.comment:last-child { border-bottom: 0; }
.comment-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.comment-av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 10px;
}
.comment-body { font-size: 14px; color: var(--text-body); line-height: 1.55; padding-left: 37px; }
.comment-actions { padding-left: 37px; margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.comment-action-btn {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  padding: 3px 6px; border-radius: 5px;
}
.comment-action-btn:hover { background: var(--sky-pale); color: var(--navy); }

.reply-list { padding-left: 37px; border-left: 2px solid var(--border); margin-top: 8px; }

.comment-form-wrap { padding: 20px 0 8px; }
.comment-form-wrap textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--navy);
  resize: none; min-height: 76px; outline: none; margin-bottom: 10px;
  transition: border-color 0.15s;
}
.comment-form-wrap textarea:focus { border-color: var(--navy-mid); }
.comment-form-wrap .btn-submit {
  background: var(--navy); color: #fff;
  border-radius: 9px; padding: 9px 18px;
  font-size: 13px; font-weight: 700; font-family: inherit;
}
.comment-form-wrap .btn-submit:hover { background: var(--navy-mid); }

/* ═══ EMPTY STATE ═══ */
.empty-state {
  text-align: center; padding: 60px 24px;
  border: 1px dashed var(--border); border-radius: 12px;
}
.empty-state-icon { font-size: 32px; margin-bottom: 12px; }
.empty-state h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.empty-state p { font-size: 14px; color: var(--text-body); line-height: 1.5; max-width: 340px; margin: 0 auto 18px; }

/* Discover-only: a tinted icon badge in the same hand-drawn stroke-SVG
   language as the rest of the app (e.g. .disc-where's location pin),
   replacing raw platform emoji (AJ, 2026-07-22 -- emoji render
   inconsistently across OSes and broke visual consistency with every
   other icon on this exact page). Additive, not a change to
   .empty-state-icon above -- forum/home.html's plain-emoji empty state
   keeps its current look untouched. */
.empty-state-icon-badge {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.empty-state-icon-badge svg { width: 22px; height: 22px; }
.empty-state-icon-badge.sky   { background: var(--sky-pale);   color: var(--navy-mid); }
.empty-state-icon-badge.slate { background: var(--slate-pale); color: var(--slate); }
.empty-state-icon-badge.plum  { background: var(--plum-pale); color: var(--plum); }
.empty-state-icon-badge.teal  { background: var(--teal-pale); color: var(--teal); }

/* ═══ LOGIN PAGE ═══ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sky-pale); padding: 24px;
}
.login-card {
  background: var(--bg); border-radius: 20px;
  padding: 40px 36px 36px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 40px rgba(20,39,78,0.10);
}
.login-brand { font-size: 28px; font-weight: 800; color: var(--yellow); letter-spacing: -0.022em; margin-bottom: 6px; }
.login-sub { font-size: 14px; color: var(--text-body); margin-bottom: 28px; line-height: 1.5; }

/* ═══ RESPONSIVE ═══ */
/* ═══ LANGUAGE TOGGLE ═══ */
.lang-toggle-wrap { position: relative; margin-right: 4px; }
.lang-toggle-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  color: var(--text-body); border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.lang-toggle-btn:hover { background: var(--sky-pale); border-color: var(--navy-mid); }
.lang-code { letter-spacing: .04em; }
.lang-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.1); min-width: 150px; z-index: 400;
  overflow: hidden;
}
.lang-menu.open { display: block; }
.lang-opt {
  display: block; padding: 9px 14px; font-size: 13.5px; color: var(--text-body);
  cursor: pointer; transition: background .12s;
}
.lang-opt:hover { background: var(--sky-pale); }
.lang-opt.active { color: var(--navy); font-weight: 600; background: var(--sky-pale); }

/* ═══ TRANSLATION NOTICE ═══ */
.translation-notice {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted); margin-top: 6px;
}
.translation-notice svg { flex-shrink: 0; opacity: .7; }
.see-original-btn, .see-translation-btn {
  background: none; border: none; padding: 0; margin-left: 2px;
  font-size: 11.5px; color: var(--navy-mid); cursor: pointer;
  text-decoration: underline; font-family: inherit;
}
.see-original-btn:hover, .see-translation-btn:hover { color: var(--navy); }

/* ═══ HAMBURGER ═══ */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 6px; border-radius: 8px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px; transition: .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══ SIDEBAR OVERLAY (mobile) ═══ */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 290;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s;
}
.sidebar-overlay.active { opacity: 1; }

/* ═══ BOTTOM NAV (mobile) ═══ */
.bottom-nav { display: none; }

/* ═══ RESPONSIVE ═══ */
/* Stack any secondary rail below its main column before the sidebar itself
   collapses (which only happens at 768px, below). Previously .thread-feed-
   layout and .elder-detail only dropped their rail at the mobile breakpoint,
   so widths roughly between 800-1100px tried to fit sidebar + feed + rail as
   three fixed-ish columns with nowhere near enough room, and post content
   overflowed its cards instead of wrapping. */
@media (max-width: 1100px) {
  .thread-feed-layout { grid-template-columns: 1fr; }
  .elder-detail { grid-template-columns: 1fr; gap: 28px; }
  .ed-book-card { position: static; }
}
@media (max-width: 768px) {
  .topnav { padding: 0 12px; gap: 8px; }
  .topnav-search-wrap { display: none; }
  .nav-items { display: none; }
  .hamburger { display: flex; }
  .page { grid-template-columns: 1fr; gap: 0; padding-top: 64px; }
  .page-card { padding: 24px 20px; border-radius: 12px; }
  .lb-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lb-panel--featured { grid-row: auto; }

  /* Sidebar becomes a slide-in panel on mobile */
  .sidebar {
    display: block !important;
    position: fixed; top: 64px; left: 0; bottom: 0;
    width: 280px; z-index: 300;
    transform: translateX(-100%); transition: transform .25s ease;
    overflow-y: auto; background: var(--bg); border-right: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: block; pointer-events: none; }
  .sidebar-overlay.active { pointer-events: auto; }

  .main { padding: 20px 16px 80px; max-width: 100%; }
  .main-title { font-size: 21px; }
  .elder-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .elder-yrs-num { font-size: 26px; }
  .elder-yrs-block { padding: 12px 0; }
  .elder-meta-tags { gap: 5px; }
  .elder-biz-type-tag,
  .elder-founding-tag { font-size: 10px; padding: 3px 7px; }
  .elders-cta-band { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }

  /* Elder detail column/booking-card collapse now happens earlier, at 1100px
     (see above) -- this block just adds the remaining mobile-only tweaks. */
  .ed-avatar { max-width: 260px; margin: 0 auto; }
  .ed-handle { font-size: 22px; }
  .ed-how { grid-template-columns: 1fr; gap: 10px; }
  .ed-sticky-book {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0));
    z-index: 150; background: var(--bg); border-top: 1px solid var(--border);
    padding: 12px 16px; box-shadow: 0 -2px 12px rgba(20,39,78,0.08);
  }
  .ed-sticky-price { font-size: 16px; font-weight: 800; color: var(--navy); }
  .ed-sticky-price span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
  .ed-sticky-btn { background: var(--yellow); color: var(--navy); font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: 9px; }
  body:has(.ed-sticky-book) .main { padding-bottom: 150px; }

  .tab-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
             padding-bottom: 4px; scrollbar-width: none; gap: 6px; margin-bottom: 16px; }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab { padding: 7px 14px; font-size: 12.5px; white-space: nowrap; }
  .grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .split-row { grid-template-columns: 1fr; gap: 12px; }
  .feed { gap: 10px; }
  .post { padding: 16px 16px 12px; }
  .post-title { font-size: 15.5px; }
  .discover-panel { width: 100%; left: 0; }
  .popup-overlay { padding: 10px; align-items: flex-end; }
  .popup-card { max-height: 90vh; border-radius: 16px 16px 0 0; padding: 20px 20px 28px; }
  .messages-bar { padding: 0 16px; }

  /* Carousel: 1 card wide on mobile (peeking the next one, to signal it
     scrolls). Overrides flex-basis itself, not just width -- the desktop
     rule sets an explicit flex-basis via the flex shorthand, and a flex
     item's flex-basis wins over a bare width whenever both are set, so a
     width-only override here silently did nothing: cards were still
     rendering at ~1/3 width, crushed to ~110px, on every real phone. */
  .disc-card { flex: 0 0 260px; }

  /* ── Bottom nav ── */
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--bg); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 6px; font-size: 10.5px; font-weight: 500;
    color: var(--text-muted); text-decoration: none; transition: color .15s;
  }
  .bottom-nav-item svg { width: 20px; height: 20px; }
  .bottom-nav-item.active { color: var(--navy); }
  .bottom-nav-item.active svg { stroke: var(--navy); }

  /* Language toggle: compact on mobile */
  .lang-toggle-btn { padding: 5px 7px; }
  .lang-code { display: none; }
}

/* ═══ AUTH / LOGIN (dedicated full-bleed, no app chrome) ═══ */
.auth-body { min-height: 100vh; background: var(--bg); }
.auth-split { display: flex; min-height: 100vh; }

/* Was a plain navy gradient with two decorative radial-glow blobs; replaced
   with the real Main Street storefront illustration (AJ, design review
   2026-07-22 -- "Option B" of three login-page directions) so the brand
   panel shows the thing itself instead of describing it in bullet points.
   Layered background: legibility scrim on top (transparent near the logo,
   dark enough at the bottom for white text), the photo itself, and a plain
   navy fallback color last in case the image ever fails to load. */
.auth-brand {
  flex: 0 0 52%;
  position: relative; overflow: hidden; color: #fff;
  background:
    linear-gradient(180deg, rgba(19,39,71,0.08) 0%, rgba(19,39,71,0.90) 82%),
    url('../images/auth-storefronts.jpg') center 32% / cover no-repeat,
    var(--navy);
  padding: 44px 56px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.auth-logo { position: relative; z-index: 1; font-size: 19px; font-weight: 800; color: var(--yellow); letter-spacing: -0.02em; }
.auth-brand-body { position: relative; z-index: 1; max-width: 470px; }
.auth-headline {
  font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -0.025em;
  text-wrap: balance; margin-bottom: 30px;
}
.auth-headline em { color: var(--yellow); font-style: normal; }
/* The login page's only brand-panel copy -- one line resting directly on
   the illustration, no separate eyebrow/caption split and no bullets/topic
   pills (both cut in review: "illogical and poorly thought out" re: the
   pills, and the three-bullet list read as AI-wordy). verify_otp.html still
   uses .auth-brand-body/.auth-headline above for its own, different copy. */
.auth-caption {
  position: relative; z-index: 1;
  font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.01em;
  line-height: 1.32; max-width: 360px; text-wrap: balance;
}
.auth-brand-foot { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); }

.auth-action { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-title { font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin-bottom: 8px; }
.auth-sub { font-size: 14.5px; color: var(--text-body); line-height: 1.6; margin-bottom: 26px; }
/* .form-field is the common wrapper for a labeled input, used both inside
   .auth-card (login, OTP) and inside .page-card (handle, TIN, etc.) — one
   input treatment for every text field in the app, not per-page one-offs. */
.form-field { margin-bottom: 14px; }
.form-field-label,
.form-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-field input[type="email"],
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--navy);
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.form-field select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.form-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(242,178,51,0.15); }

/* Checkbox + one-line help text, shared by every plain (non-pill) checkbox
   toggle and every field's caption line -- .form-field previously only
   styled its text inputs, so a checkbox like "I sell products..." or a
   caption like "Shown to you in the sidebar" rendered with zero styling
   next to fields that did have it. */
label.checkbox-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-body); }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--navy); flex-shrink: 0; cursor: pointer; }
.help { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.muted-link { font-size: 14px; font-weight: 600; color: var(--text-muted); }
/* Small inline annotation next to a label or heading -- e.g. "(private)",
   "(optional)". Was two separately hand-tuned inline styles (one missing a
   font-size override the other had), now one consistent treatment. */
.field-note { color: var(--text-muted); font-weight: 500; font-size: 13px; }
.muted-link:hover { color: var(--navy); }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.auth-card img.captcha { border-radius: 10px; border: 1px solid var(--border); display: block; }
.auth-card .btn-yellow { width: 100%; font-size: 15px; padding: 13px; }

/* .page-card — the generic content card used by handle/TIN/profile-edit/
   elder-setup/booking pages. Centered by default (settings/setup forms read
   as a readable-width column in the content pane, not a narrow box shoved
   against the left edge -- the standard treatment on Reddit, Notion, etc.
   for this kind of page). Per-template inline max-width (each of these pages
   already sets its own -- 480-720px depending on how much content it holds)
   overrides the fallback below and still centers correctly, since it's more
   specific than this rule but doesn't touch `margin`. Previously margin
   wasn't set here at all, so centering was opt-in per template via a hand-
   rolled `margin: Npx auto` -- only 2 of the 9 pages using this class ever
   added it, so the other 7 rendered flush-left with a large dead gap on
   wide viewports. profile.html's own usage (`max-width: none`) is the one
   deliberate exception -- a full-width dashboard card, not a form, and
   auto-margins on a full-width box are a no-op anyway. */
.page-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 1px 3px rgba(20,39,78,0.05);
  max-width: 720px;
  margin: 0 auto;
}
/* .page-card's own <h1>/.lead header -- used identically on edit_profile,
   elder_setup, create_group (and likely others) with zero matching CSS
   anywhere, so every one of these pages opened with an unstyled browser-
   default heading before falling into the actually-designed card below it. */
.page-card h1 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.25; }
.page-card .lead { font-size: 14.5px; color: var(--text-body); line-height: 1.6; margin-top: 8px; margin-bottom: 28px; }
/* The global `* { margin: 0; padding: 0; }` reset (top of this file) strips
   a <ul>'s default left padding, so with no rule of its own here a bullet's
   marker sat flush against the card edge and wrapped lines fell back to
   column 0 instead of hanging-indenting under the text (only terms.html
   uses a plain <ul> inside .page-card today, but this is the general fix,
   not a page-specific patch). */
.page-card ul { padding-left: 22px; margin-bottom: 14px; }
.page-card li { color: var(--text-body); line-height: 1.6; margin-bottom: 8px; }
.page-card li:last-child { margin-bottom: 0; }
.auth-alt { font-size: 13.5px; color: var(--text-muted); margin-top: 22px; text-align: center; }
.auth-alt a { color: var(--navy-mid); font-weight: 700; }
.auth-alt a:hover { color: var(--navy); }
.auth-help { font-size: 12.5px; color: var(--text-faint); margin-top: 12px; text-align: center; }
.auth-help a { color: var(--text-muted); font-weight: 600; }
.auth-field-error { font-size: 13px; color: var(--burgundy); margin: -2px 0 8px; font-weight: 600; }
.auth-sent-ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--elder-bg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.auth-sent-ic svg { width: 24px; height: 24px; }

/* Load animations */
@keyframes authFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes authRiseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-logo                   { animation: authFadeIn  0.40s ease          both; }
.auth-headline               { animation: authRiseIn  0.45s ease 0.08s    both; }
.auth-caption                 { animation: authRiseIn  0.40s ease 0.18s    both; }
.auth-brand-foot             { animation: authFadeIn  0.40s ease 0.50s    both; }
.auth-card                   { animation: authRiseIn  0.45s ease 0.05s    both; }

@media (prefers-reduced-motion: reduce) {
  .auth-logo, .auth-headline, .auth-caption,
  .auth-brand-foot, .auth-card { animation: none; }
}

@media (max-width: 860px) {
  .auth-split { flex-direction: column; }
  /* min-height (not flex: 0 0 auto's old content-only sizing) so the
     illustration still reads as a real band on mobile, not a sliver sized
     to whatever the single caption line happens to need. */
  .auth-brand { flex: 0 0 auto; min-height: 190px; padding: 22px 22px 20px; gap: 10px; justify-content: space-between; }
  .auth-brand-body { max-width: none; }
  .auth-headline { font-size: 22px; margin-bottom: 0; }
  .auth-logo { color: var(--yellow); font-size: 16px; }
  .auth-caption { font-size: 17px; max-width: none; }
  .auth-brand-foot { display: none; }
  .auth-action { flex: 1 0 auto; padding: 30px 22px 44px; }
}

/* ── Profile setup widget ── */
.pw {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 180;
  width: 268px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(26,47,92,0.13), 0 1px 4px rgba(26,47,92,0.07);
  overflow: hidden;
}

.pw-hd {
  display: flex;
  align-items: center;
}
.pw-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 10px 13px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.pw-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 13px 0 0 0; }
.pw-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pw-ring {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
}
.pw-ring-denom { font-weight: 400; opacity: 0.55; font-size: 10px; }
.pw-toggle-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.pw-toggle-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.pw-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.pw-dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  border-radius: 8px;
  margin-right: 6px;
  transition: color 0.1s, background 0.1s;
}
.pw-dismiss:hover { color: var(--text-muted); background: var(--border-soft); }
.pw-dismiss:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.pw-dismiss svg { width: 12px; height: 12px; }

.pw-body {
  border-top: 1px solid var(--border);
  padding: 11px 14px 13px;
}
.pw-body--hidden { display: none; }

.pw-bar {
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pw-bar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 99px;
  transition: width 0.3s ease;
  min-width: 0;
}

.pw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pw-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px 5px 2px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.1s;
}
.pw-step:hover { background: var(--border-soft); }
.pw-step--done { color: var(--text-muted); pointer-events: none; }
.pw-step-ic { display: flex; align-items: center; flex-shrink: 0; }
.pw-step-ic svg { width: 16px; height: 16px; }
.pw-step-label { flex: 1; }
.pw-step-arr { width: 10px; height: 10px; flex-shrink: 0; color: var(--text-muted); }

@media (max-width: 860px) {
  .pw { display: none; }
}

/* ── Tier tag tooltips (PLAT-11) ─────────────────────────────────────── */
.tier-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.tier-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: 7px;
  width: 210px;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
  text-transform: none;
  letter-spacing: normal;
}
.tier-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
}
.tier-tip:hover::after,
.tier-tip:hover::before { opacity: 1; }

/* Same tooltip mechanism as .tier-tip, but sized to a 1-2 word label
   (industry standard for a verified badge -- Twitter/LinkedIn's own
   verified-checkmark tooltip is a snug word or two, not a paragraph)
   instead of .tier-tip's fixed 210px explanatory box. */
.verify-tip { position: relative; display: inline-flex; align-items: center; cursor: default; }
.verify-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  width: max-content;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
}
.verify-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--navy);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
}
.verify-tip:hover::after,
.verify-tip:hover::before { opacity: 1; }

/* ── Identity tags (PLAT-15) ─────────────────────────────────────────── */
.profile-identity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
}
.identity-tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--border-soft);
  color: var(--navy-mid);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
/* Sized to sit inline with the other pills in a post card's author-row
   (wisdom pill, tier tag) instead of the profile page's standalone row --
   border-radius:4px overrides the base pill's 999px so the shape matches
   the tier tags too, not just the type treatment. */
.identity-tag-pill--compact { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.identity-tags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.identity-tag-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  padding: 2px 0;
}
.identity-tag-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  flex-shrink: 0;
  cursor: pointer;
}
@media (max-width: 600px) {
  .identity-tags-grid { grid-template-columns: 1fr; }
}

/* Part of the sidebar's own scrolling column -- not a fixed overlay --
   matching Reddit's own left-nav footer (a divider, then a flat list of
   plain link rows in the same panel, not a separate floating widget). */
.sidebar-resources {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sidebar-resources-label {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0 12px 6px;
}
.sidebar-resources-link {
  display: block;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.sidebar-resources-link:hover { background: var(--sky-pale); color: var(--navy); }

/* ═══ PROFILE PAGE ═══
   .profile-card, .profile-name, .profile-meta, .profile-stats, .stat-tile,
   .group-grid, .group-card were used in templates/accounts/profile.html
   (and .section-title/.group-grid/.group-card in a few other templates)
   with no matching rules anywhere -- rendered as unstyled stacked text.
   .label/.value/.delta/.name/.description/.stats are scoped under their
   parent (.stat-tile, .group-card) rather than defined globally, since
   those are generic enough names other components may reuse differently. */
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.profile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.015em;
}
.profile-meta {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-body);
  font-weight: 500;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  text-align: center;
}
.stat-tile .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-tile .value {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-tile .delta {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sage);
}

.trophy-case {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 20px;
  margin-bottom: 28px;
}
.trophy-case-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tier-progress {
  margin-top: 12px;
}
.tier-progress-bar {
  height: 6px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.tier-progress-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: 999px;
  transition: width 0.3s;
}
.tier-progress-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.tier-progress-label strong { color: var(--navy); }
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--sky-pale);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px 12px;
}
.badge-tile.locked {
  background: var(--bg-soft);
  opacity: 0.55;
  filter: grayscale(1);
}
.badge-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.badge-tile.locked .badge-icon-img {
  filter: grayscale(1);
}
.badge-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.badge-earned {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.badge-tile:not(.locked) .badge-earned { color: var(--sage); }

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.group-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.group-card:hover {
  border-color: #DCD9E3;
  box-shadow: 0 4px 14px rgba(20,39,78,0.05);
}
.group-card .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.group-card .description {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 8px;
}
.group-card .stats {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* .member-grid/.member-card: same gap-with-no-CSS bug as .group-card had --
   used on search_results.html since before this pass, never actually styled. */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.member-card:hover {
  border-color: #DCD9E3;
  box-shadow: 0 4px 14px rgba(20,39,78,0.05);
}
.member-card .av { width: 38px; height: 38px; font-size: 13px; flex-shrink: 0; }
.member-card .av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.member-card .name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.member-card .byline { font-size: 12px; color: var(--text-muted); }

@media (max-width: 768px) {
  .profile-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .group-grid { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
}