/* ═══════════════════════════════════════════════
   FOB COMMUNITY :: INTERFACE LAYER
   Extends the FOB Systems design system. Every custom
   property below is inherited from fob.css, which must
   be loaded first. No new palette is introduced.
   All selectors are namespaced fob-community- / fob-profile-
   to avoid collisions with the marketing site.
   ═══════════════════════════════════════════════ */

:root {
  /* Sticky header height: 10px pad + 40px icon button + 10px pad + 1px rule.
     The tab bar sticks directly beneath it, so this must stay in sync or
     the tabs slide under the header and the feed shows through. */
  --social-top-h: 61px;
  --community-rail: 248px;
  --community-max: 1160px;
  --community-radius: 14px;
}

/* Hide the page until the guard resolves, so a protected page
   never flashes its contents before redirecting. */
body[data-fob-pending] .fob-community-shell { visibility: hidden; }

.fob-community-page {
  background: var(--tone-deep);
  min-height: 100vh;
  min-height: 100dvh;
}

.fob-community-shell {
  max-width: var(--community-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(24px, 4vw, 44px)) clamp(16px, 3vw, 28px) clamp(60px, 9vw, 110px);
}
.fob-community-shell.is-narrow { max-width: 560px; }

/* ---------- setup banner ---------------------------------- */
.fob-community-setup-banner {
  max-width: 620px;
  margin: 0 auto clamp(20px, 3vw, 30px);
  padding: 16px 18px;
  border: 1px dashed var(--gold-line);
  border-radius: var(--community-radius);
  background: rgba(211,190,152,0.06);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.fob-community-setup-banner b {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.fob-community-setup-banner code {
  font-size: 12.5px; color: var(--cream);
  background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px;
}

/* ---------- panels ---------------------------------------- */
.fob-community-panel {
  background: var(--panel);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--community-radius);
  padding: clamp(22px, 3.4vw, 34px);
}
.fob-community-panel + .fob-community-panel { margin-top: clamp(14px, 2vw, 20px); }

.fob-community-eyebrow {
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}
.fob-community-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 3vw, 27px); line-height: 1.2;
  color: var(--cream); margin-bottom: 8px;
}
.fob-community-sub {
  font-size: 14.5px; line-height: 1.65; color: var(--muted);
  margin-bottom: clamp(18px, 2.6vw, 26px);
}

/* ---------- forms ----------------------------------------- */
.fob-community-field { margin-bottom: 16px; }
.fob-community-field label {
  display: block; margin-bottom: 6px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream);
}
.fob-community-field .optional {
  color: var(--muted); letter-spacing: 0.08em; font-weight: 500;
}

.fob-community-input,
.fob-community-textarea,
.fob-community-select {
  width: 100%;
  box-sizing: border-box;   /* padding must sit inside the width, not add to it */
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--body); font-size: 16px;  /* 16px stops iOS zoom on focus */
  color: var(--text);
  background: var(--ink);
  border: 1px solid var(--gold-line-soft);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.fob-community-textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.fob-community-input:focus,
.fob-community-textarea:focus,
.fob-community-select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-warm);
}
.fob-community-input:focus-visible,
.fob-community-textarea:focus-visible,
.fob-community-select:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
}
.fob-community-input::placeholder,
.fob-community-textarea::placeholder { color: #6E757D; }

.fob-community-field-note {
  margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  min-height: 18px;
}
/* A note written as a sibling of the fields (rather than inside one)
   carries no bottom margin of its own, so the next label lands right
   on top of it. Restore the gap the field would have given it. */
.fob-community-field-note + .fob-community-field { margin-top: 18px; }

/* iOS gives date inputs an intrinsic width that ignores the 100% above,
   so this one field pushed past every other box on the form. */
.fob-community-input[type='date'] {
  -webkit-appearance: none; appearance: none;
  max-width: 100%; display: block;
}
/* Status is never carried by colour alone. */
.fob-community-field-note.is-ok { color: var(--gold-bright); }
.fob-community-field-note.is-ok::before { content: '\2713\00a0'; }
.fob-community-field-note.is-error { color: #E4A79B; }
.fob-community-field-note.is-error::before { content: '\26A0\00a0'; }

.fob-community-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 540px) { .fob-community-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- checkboxes ------------------------------------ */
.fob-community-check {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: 12px; cursor: pointer;
}
.fob-community-check input {
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--gold);
}
.fob-community-check span { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.fob-community-check a { color: var(--gold); text-decoration: underline; }

/* ---------- buttons --------------------------------------- */
.fob-community-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.fob-community-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-community-btn[disabled], .fob-community-btn[aria-disabled='true'] {
  opacity: 0.45; cursor: not-allowed;
}
.fob-community-btn-primary { background: var(--gold); color: var(--ink); }
.fob-community-btn-primary:hover:not([disabled]) { background: var(--gold-bright); }
.fob-community-btn-ghost {
  background: transparent; color: var(--cream); border-color: var(--gold-line);
}
.fob-community-btn-ghost:hover:not([disabled]) { border-color: var(--gold); }
.fob-community-btn-auto { width: auto; }

.fob-community-btn-row {
  display: flex; gap: 10px; margin-top: 22px;
}
.fob-community-btn-row .fob-community-btn { flex: 1; }

.fob-community-textlink {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px;
}
.fob-community-textlink:hover { color: var(--gold-bright); }
.fob-community-textlink:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.fob-community-alt {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--gold-line-soft);
  text-align: center; font-size: 13.5px; color: var(--muted);
}

/* ---------- status / toasts -------------------------------- */
.fob-community-status {
  margin: 14px 0 0; padding: 11px 14px;
  border-radius: 9px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--gold-line-soft); color: var(--muted);
}
.fob-community-status.is-error {
  border-color: rgba(228,167,155,0.4); color: #E4A79B;
  background: rgba(228,167,155,0.07);
}
.fob-community-status.is-ok {
  border-color: var(--gold-line); color: var(--gold-bright);
  background: rgba(211,190,152,0.07);
}

#fob-community-toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 400; display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100vw - 32px));
}
.fob-community-toast {
  padding: 12px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--gold-line);
  color: var(--cream); font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  animation: fobToastIn 0.24s ease;
}
.fob-community-toast.is-error { border-color: rgba(228,167,155,0.5); }
.fob-community-toast.is-leaving { opacity: 0; transition: opacity 0.28s; }
@keyframes fobToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- onboarding progress ---------------------------- */
.fob-community-steps {
  display: flex; gap: 6px; margin-bottom: clamp(20px, 3vw, 28px);
  list-style: none; padding: 0;
}
.fob-community-steps li {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--gold-line-soft);
  position: relative;
}
.fob-community-steps li.is-done,
.fob-community-steps li.is-current { background: var(--gold); }
.fob-community-step-label {
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim);
  margin-bottom: 10px;
}

/* ---------- avatar ----------------------------------------- */
.fob-profile-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid var(--gold-line);
  background: var(--panel-2);
}
.fob-profile-avatar-fallback {
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-line); background: var(--panel-2);
  font-family: var(--display); font-size: 28px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--gold);
}
.fob-profile-avatar-row {
  display: flex; align-items: center; gap: 18px; margin-bottom: 18px;
  flex-wrap: wrap;   /* cropper is 260px wide; the actions must be able to drop below it */
}
.fob-profile-avatar-actions { flex: 1 1 190px; min-width: 0; }
/* Once the cropper is open the row always stacks, so the button and its
   hint keep the full column width instead of being squeezed off the edge. */
.fob-profile-avatar-row:has(.fob-crop) { display: block; }
.fob-profile-avatar-row:has(.fob-crop) .fob-profile-avatar-actions { margin-top: 14px; }
@supports not (selector(:has(*))) {
  .fob-profile-avatar-row { display: block; }
  .fob-profile-avatar-actions { margin-top: 14px; }
}
.fob-profile-avatar-actions p {
  font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5;
}

/* ---------- interest group headings ------------------------ */
.fob-chip-group {
  margin-top: 16px; margin-bottom: 8px;
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.fob-chip-group:first-child { margin-top: 0; }

/* ---------- profile rooms ----------------------------------- */
.fob-pv-rooms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fob-pv-room {
  font-size: 12px; color: var(--muted);
  border: 1px solid var(--gold-line-soft); border-radius: 999px; padding: 4px 10px;
}

/* ---------- profile stats + activity ------------------------ */
.fob-pv-stats {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 14px 0; margin-bottom: 4px;
  border-top: 1px solid var(--gold-line-soft);
  border-bottom: 1px solid var(--gold-line-soft);
}
.fob-pv-stat { display: flex; flex-direction: column; gap: 1px; }
.fob-pv-stat b {
  font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--cream);
}
.fob-pv-stat span { font-size: 11.5px; color: var(--muted); }
.fob-pv-post {
  display: block; padding: 10px 0; color: var(--text);
  font-size: 14.5px; line-height: 1.4; text-decoration: none;
  border-bottom: 1px solid var(--gold-line-soft);
}
.fob-pv-post:last-child { border-bottom: none; }
.fob-pv-post:hover { color: var(--gold-bright); }

/* ---------- reaction picker --------------------------------- */
.fob-post-actions { position: relative; }
.fob-react-pop {
  position: absolute; bottom: calc(100% + 6px); left: 4px; z-index: 40;
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--panel-2, #1D2128);
  border: 1px solid var(--gold-line-soft);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.fob-react-opt {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1;
  transform: scale(0.4); opacity: 0;
  animation: fob-react-in 0.22s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes fob-react-in { to { transform: scale(1); opacity: 1; } }
.fob-react-opt:hover, .fob-react-opt:focus-visible { background: rgba(211,190,152,0.16); }
.fob-react-opt:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fob-react-opt[aria-pressed='true'] { background: rgba(211,190,152,0.26); }
.fob-react-tip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.fob-react-mine { font-size: 20px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .fob-react-opt { animation: none; transform: none; opacity: 1; }
}

/* ---------- things to do ------------------------------------ */
.fob-do-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.fob-do-chip {
  padding: 9px 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--c-line-2);
  border-radius: 999px; color: var(--c-text);
  font-family: var(--body); font-size: 13.5px;
}
.fob-do-chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.fob-do-chip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- rooms ------------------------------------------- */
.fob-rooms-group {
  margin: 18px 0 8px;
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.fob-rooms-group:first-child { margin-top: 4px; }
.fob-room {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 13px 15px; margin-bottom: 8px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 14px; color: var(--c-text);
  font-family: var(--body); font-size: 15px;
}
.fob-room:hover { border-color: var(--c-line-2); }
.fob-room:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-room-meta { color: var(--c-text-3); font-size: 12.5px; flex: none; }
.fob-room-all {
  padding: 16px 17px; margin-bottom: 14px;
  font-family: var(--display); font-size: 16px; font-weight: 600;
}

/* ---------- repost header ----------------------------------- */
.fob-repost-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 8px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim);
}
.fob-repost-note {
  padding: 0 4px 10px; font-size: 14.5px; line-height: 1.55; color: var(--c-text);
}

/* ---------- notifications ----------------------------------- */
.fob-notif-btn { position: relative; }
.fob-notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font-family: var(--display); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.fob-notif-badge[hidden] { display: none; }
.fob-notif {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--gold-line-soft);
  color: var(--text); text-decoration: none;
}
.fob-notif:last-of-type { border-bottom: none; }
.fob-notif.is-unread { background: rgba(211,190,152,0.06); border-radius: 10px; padding-inline: 10px; }
.fob-notif-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; }
.fob-notif-text { min-width: 0; font-size: 14px; line-height: 1.45; }
.fob-notif-sub {
  color: var(--muted); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- profile view sheet ------------------------------ */
.fob-pv-backdrop {
  position: fixed; left: 0; right: 0; top: 0; z-index: 95;
  height: 100vh; height: 100dvh;   /* dvh tracks the visible area on iOS */
  background: rgba(6,8,10,0.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 620px) {
  .fob-pv-backdrop { align-items: center; padding: 24px; }
}
.fob-pv-backdrop[hidden] { display: none; }
.fob-pv-card {
  width: 100%; max-width: 460px; overflow-y: auto;
  max-height: 86vh; max-height: 86dvh;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border: 1px solid var(--gold-line-soft);
  border-radius: 20px 20px 0 0; padding: 24px 22px 30px;
}
@media (min-width: 620px) { .fob-pv-card { border-radius: 20px; } }
.fob-pv-top { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.fob-pv-top .fob-profile-avatar,
.fob-pv-top .fob-profile-avatar-fallback { width: 64px; height: 64px; font-size: 22px; }
.fob-pv-name {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--cream); line-height: 1.2;
}
.fob-pv-handle { color: var(--gold-dim); font-size: 13.5px; margin-top: 2px; }
.fob-pv-bio { font-size: 14.5px; line-height: 1.6; color: var(--text); margin-bottom: 14px; }
.fob-pv-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fob-pv-fact {
  font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--gold-line-soft); border-radius: 999px; padding: 5px 11px;
}
.fob-pv-empty { color: var(--muted); font-size: 14px; }

/* ---------- chip pickers ----------------------------------- */
.fob-community-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.fob-community-chip {
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted); background: transparent;
  border: 1px solid var(--gold-line-soft);
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.fob-community-chip:hover { color: var(--cream); border-color: var(--gold-line); }
.fob-community-chip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-community-chip[aria-pressed='true'] {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
}
/* Non-colour indicator for selected state. */
.fob-community-chip[aria-pressed='true']::before { content: '\2713\00a0'; }

.fob-community-count {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.1em;
  color: var(--gold-dim); margin-top: 10px;
}

/* ---------- privacy rows ----------------------------------- */
.fob-community-privacy-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--gold-line-soft);
}
.fob-community-privacy-row:last-of-type { border-bottom: none; }
.fob-community-privacy-row h4 {
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--cream); margin-bottom: 3px;
}
.fob-community-privacy-row p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.fob-community-privacy-row .fob-community-select { width: auto; min-width: 132px; flex: none; }

/* ---------- landing --------------------------------------- */
.fob-community-hero { text-align: center; max-width: 660px; margin: 0 auto; }
.fob-community-hero .fob-community-sub { max-width: 54ch; margin-inline: auto; }
.fob-community-features {
  list-style: none; padding: 0; margin: clamp(26px, 4vw, 38px) 0 0;
  display: grid; gap: 1px; text-align: left;
  background: var(--gold-line-soft);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--community-radius); overflow: hidden;
}
.fob-community-features li {
  background: var(--panel); padding: 15px 18px;
  font-size: 14px; line-height: 1.6; color: #C4C8CD;
}
.fob-community-features b {
  display: block; font-family: var(--display); font-size: 12px;
  letter-spacing: 0.06em; color: var(--gold); margin-bottom: 3px;
}

/* ---------- footnote --------------------------------------- */
.fob-community-footnote {
  margin-top: clamp(26px, 4vw, 38px); text-align: center;
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.fob-community-footnote a { color: var(--gold-dim); }

/* ---------- reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fob-community-toast { animation: none; }
  .fob-community-btn, .fob-community-chip,
  .fob-community-input, .fob-community-textarea { transition: none; }
}

/* ═══════════════════════════════════════════════
   PHASE B :: DISCUSSIONS
   ═══════════════════════════════════════════════ */

.fob-community-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- search ----------------------------------------- */
.fob-community-search-wrap { position: relative; margin-bottom: clamp(16px, 2.4vw, 22px); }
.fob-community-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--panel-2); border: 1px solid var(--gold-line);
  border-radius: var(--community-radius); overflow: hidden;
  max-height: 62vh; overflow-y: auto;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.fob-community-search-group {
  padding: 11px 16px 5px;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim);
}
.fob-community-search-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; text-decoration: none;
  border-top: 1px solid var(--gold-line-soft);
}
.fob-community-search-row:hover { background: rgba(211,190,152,0.06); }
.fob-community-search-row b {
  display: block; font-family: var(--body); font-size: 14px;
  font-weight: 500; color: var(--cream);
}
.fob-community-search-row span { font-size: 12.5px; color: var(--muted); }

/* ---------- research module -------------------------------- */
.fob-thread-research {
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--community-radius);
  background: linear-gradient(150deg, rgba(211,190,152,0.08), rgba(12,14,17,0.6));
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(16px, 2.4vw, 22px);
}
.fob-thread-research-title {
  display: block; margin: 4px 0 10px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 2.6vw, 23px); line-height: 1.3;
  color: var(--cream); text-decoration: none;
}
.fob-thread-research-title:hover { color: var(--gold-bright); }
.fob-thread-research-excerpt {
  font-size: 14px; line-height: 1.65; color: #C4C8CD; margin-bottom: 10px;
}

/* ---------- composer --------------------------------------- */
.fob-thread-composer { margin-bottom: clamp(16px, 2.4vw, 22px); }
.fob-thread-composer-collapsed {
  width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 10px;
  background: var(--ink); border: 1px solid var(--gold-line-soft);
  font-family: var(--body); font-size: 14.5px; color: #6E757D;
}
.fob-thread-composer-collapsed:hover { border-color: var(--gold-line); }
.fob-thread-composer-collapsed:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 2px;
}
.fob-community-preview {
  padding: 14px 16px; border-radius: 10px;
  background: var(--ink); border: 1px solid var(--gold-line-soft);
  min-height: 104px;
}

/* ---------- discussion card -------------------------------- */
.fob-thread-card {
  background: var(--panel);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--community-radius);
  padding: clamp(16px, 2.4vw, 22px);
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.fob-thread-card:hover { border-color: var(--gold-line); }
.fob-thread-card.is-research { border-left: 3px solid var(--gold); }

.fob-thread-card-head { display: flex; align-items: center; gap: 11px; }
.fob-thread-card-meta { flex: 1; min-width: 0; }
.fob-thread-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fob-thread-author {
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--cream);
}
.fob-thread-submeta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.fob-thread-avatar {
  border-radius: 50%; object-fit: cover; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--gold-line-soft);
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--gold);
}

.fob-thread-badge {
  font-family: var(--display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; line-height: 1.4;
  border: 1px solid var(--gold-line); color: var(--gold-dim);
}
.fob-thread-badge.is-founder { color: var(--gold-bright); border-color: var(--gold); }

.fob-thread-flag {
  font-family: var(--display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 4px 10px; flex: none;
}

.fob-thread-card-title {
  display: block; margin: 12px 0 6px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(16px, 2.1vw, 18.5px); line-height: 1.35;
  color: var(--cream); text-decoration: none;
}
.fob-thread-card-title:hover { color: var(--gold-bright); }
.fob-thread-card-excerpt {
  font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-bottom: 12px;
}
.fob-thread-card-foot {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.06em;
  color: var(--gold-dim);
  padding-top: 11px; border-top: 1px solid var(--gold-line-soft);
}

/* ---------- thread body ------------------------------------ */
.fob-thread-body { font-size: 15px; line-height: 1.72; color: #C9CDD2; }
.fob-thread-body p { margin-bottom: 13px; }
.fob-thread-body p:last-child { margin-bottom: 0; }
.fob-thread-body ul, .fob-thread-body ol { margin: 0 0 13px 22px; }
.fob-thread-body li { margin-bottom: 5px; }
.fob-thread-body a { color: var(--gold); text-underline-offset: 3px; }
.fob-thread-body code {
  font-size: 13.5px; background: rgba(0,0,0,0.35);
  padding: 1px 5px; border-radius: 4px; color: var(--cream);
}
.fob-thread-body strong { color: var(--cream); }

/* ---------- reactions -------------------------------------- */
.fob-thread-reactions {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--gold-line-soft);
}
.fob-thread-react {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em;
  background: transparent; border: 1px solid var(--gold-line-soft); color: var(--muted);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.fob-thread-react:hover { color: var(--cream); border-color: var(--gold-line); }
.fob-thread-react:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-thread-react[aria-pressed='true'] {
  color: var(--ink); background: var(--gold); border-color: var(--gold);
}
.fob-thread-react span { font-size: 9px; }

/* ---------- actions ---------------------------------------- */
.fob-thread-actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--gold-line-soft);
}
.fob-thread-action {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.fob-thread-action:hover { color: var(--cream); }
.fob-thread-action:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.fob-thread-action[aria-pressed='true'] { color: var(--gold); }
.fob-thread-action[aria-pressed='true']::before { content: '\2713\00a0'; }

/* ---------- replies ---------------------------------------- */
.fob-thread-replies-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: clamp(22px, 3vw, 30px) 0 12px;
}
.fob-thread-replies-head .fob-community-select { width: auto; padding: 8px 12px; font-size: 13px; }

.fob-thread-reply {
  background: var(--panel);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--community-radius);
  padding: 16px 18px; margin-bottom: 8px;
}
.fob-thread-reply.is-nested {
  margin-left: clamp(16px, 4vw, 34px);
  border-left: 2px solid var(--gold-line);
}
.fob-thread-reply .fob-thread-body { font-size: 14.5px; margin-top: 11px; }
.fob-thread-reply-actions {
  display: flex; gap: 15px; margin-top: 11px;
}

/* ---------- empty + skeleton -------------------------------- */
.fob-community-empty {
  text-align: center; padding: clamp(30px, 5vw, 48px) 22px;
  border: 1px dashed var(--gold-line-soft);
  border-radius: var(--community-radius);
  background: rgba(211,190,152,0.02);
}
.fob-community-empty h3 {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--cream); margin-bottom: 7px;
}
.fob-community-empty p {
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  max-width: 42ch; margin: 0 auto 14px;
}

.fob-community-skeleton {
  height: 128px; margin-bottom: 10px;
  border-radius: var(--community-radius);
  background: linear-gradient(100deg,
    var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
  background-size: 220% 100%;
  animation: fobSkeleton 1.3s ease-in-out infinite;
}
@keyframes fobSkeleton {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fob-community-skeleton { animation: none; }
}

/* ---------- mobile ----------------------------------------- */
@media (max-width: 560px) {
  .fob-thread-reply.is-nested { margin-left: 14px; }
  .fob-thread-actions { gap: 13px; }
  .fob-thread-replies-head { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════
   PHASE 1a :: SOCIAL SHELL
   Brighter surfaces, feed-first layout, bottom nav.
   These tokens are scoped to .fob-community-page so the
   marketing site keeps its exact current appearance.
   ═══════════════════════════════════════════════ */
.fob-community-page {
  /* lifted surfaces: each step is clearly lighter than the last */
  --c-bg:        #14171B;
  --c-surface:   #22272E;   /* post cards sit visibly above the page */
  --c-surface-2: #2A3038;   /* composer, menus, sheets */
  --c-line:      rgba(255,255,255,0.09);
  --c-line-2:    rgba(255,255,255,0.16);
  --c-text:      #F4F6F8;   /* near-white, not cream */
  --c-text-2:    #C3C9D0;
  --c-text-3:    #929AA3;
  --c-nav-h:     62px;
  background: var(--c-bg);
}

/* ---------- sticky header + tabs ----------------------------
   These two bars were previously sticky INDEPENDENTLY: the header
   at top:0 and the tab row at a hand-written offset that had to
   equal the header's exact height. Any padding change broke that
   equality and the bars drifted into each other. They are now one
   sticky block, so their relationship is structural and there is
   no number left to keep in sync. Neither child is sticky itself.
   ------------------------------------------------------------- */
.fob-social-stack {
  position: sticky; top: 0; z-index: 60;
  background: #171A20;
  border-bottom: 1px solid var(--c-line);
}
.fob-social-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 3vw, 20px);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--c-line);
}
.fob-social-top img { height: 26px; width: auto; flex: none; }
.fob-social-top-spacer { flex: 1; }
.fob-social-iconbtn {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-text-2); cursor: pointer;
}
.fob-social-iconbtn:hover { color: var(--c-text); border-color: var(--c-line-2); }
.fob-social-iconbtn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- feed tabs -------------------------------------- */
.fob-social-tabs {
  display: flex; gap: 2px;
  padding: 0 clamp(8px, 2vw, 16px);
}
.fob-social-tab {
  flex: 1; padding: 15px 8px 12px; cursor: pointer;
  background: none; border: none; position: relative;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--c-text-3);
  min-height: 44px;
}
.fob-social-tab:hover { color: var(--c-text-2); }
.fob-social-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fob-social-tab[aria-selected='true'] { color: var(--c-text); }
.fob-social-tab[aria-selected='true']::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--gold);
}

/* ---------- feed column ------------------------------------ */
.fob-social-main {
  max-width: 620px; margin: 0 auto;
  padding: 14px clamp(10px, 2.5vw, 16px) calc(var(--c-nav-h) + 40px + env(safe-area-inset-bottom, 0px));
  scroll-padding-top: 118px;   /* header + tab row, for anchor jumps */
}
@media (min-width: 900px) {
  .fob-social-main { padding-bottom: 60px; }
}

/* ---------- composer --------------------------------------- */
.fob-social-composer {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  cursor: pointer; width: 100%; text-align: left;
  font-family: var(--body); font-size: 15.5px; color: var(--c-text-3);
  min-height: 56px;
}
.fob-social-composer:hover { border-color: var(--c-line-2); }
.fob-social-composer:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-social-composer-cta {
  margin-left: auto; flex: none;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 8px 15px; border-radius: 999px;
}

/* ---------- research strip (compact) ----------------------- */
.fob-social-research {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 12px;
  background: linear-gradient(100deg, rgba(211,190,152,0.13), rgba(34,39,46,0.9));
  border: 1px solid var(--gold-line);
  border-radius: 14px; text-decoration: none;
}
.fob-social-research-tag {
  flex: none; font-family: var(--display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  background: var(--gold); padding: 4px 9px; border-radius: 999px;
}
.fob-social-research-title {
  font-size: 14px; line-height: 1.45; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- post card (brighter) --------------------------- */
.fob-community-page .fob-thread-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 10px;
}
.fob-community-page .fob-thread-card:hover { border-color: var(--c-line-2); }
.fob-community-page .fob-thread-author { color: var(--c-text); font-size: 14.5px; }
.fob-community-page .fob-thread-submeta { color: var(--c-text-3); font-size: 12.5px; }
.fob-community-page .fob-thread-card-title {
  color: var(--c-text); font-size: clamp(16.5px, 2.2vw, 18px); margin: 11px 0 6px;
}
.fob-community-page .fob-thread-card-excerpt { color: var(--c-text-2); font-size: 14.5px; }
.fob-community-page .fob-thread-card-foot {
  color: var(--c-text-3); font-family: var(--body); font-size: 13px;
  letter-spacing: 0; border-top-color: var(--c-line); padding-top: 12px;
}
.fob-community-page .fob-thread-body { color: var(--c-text-2); }
.fob-community-page .fob-community-panel {
  background: var(--c-surface); border-color: var(--c-line); border-radius: 16px;
}
.fob-community-page .fob-thread-reply {
  background: var(--c-surface); border-color: var(--c-line); border-radius: 14px;
}
.fob-community-page .fob-community-title { color: var(--c-text); }
.fob-community-page .fob-community-sub { color: var(--c-text-2); }

/* ---------- bottom navigation ------------------------------ */
.fob-social-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex;
  background: rgba(26,30,35,0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Anchored to the visible viewport, not the layout viewport, so it
     does not float above Safari's toolbar with a dead band beneath. */
  bottom: 0;
}
@supports (height: 100dvh) {
  .fob-social-nav { bottom: calc(100dvh - 100%); bottom: 0; }
}
.fob-social-nav a, .fob-social-nav button {
  flex: 1; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; cursor: pointer;
  background: none; border: none;
  font-family: var(--display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-text-3);
}
.fob-social-nav a:hover, .fob-social-nav button:hover { color: var(--c-text-2); }
.fob-social-nav a:focus-visible, .fob-social-nav button:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: -3px;
}
.fob-social-nav .is-current { color: var(--gold); }
.fob-social-nav svg { width: 21px; height: 21px; }
.fob-social-nav .fob-social-nav-create svg {
  width: 30px; height: 30px; color: var(--gold);
}
@media (min-width: 900px) {
  .fob-social-nav {
    position: sticky; top: 0; bottom: auto;
    max-width: 620px; margin: 0 auto 14px;
    border: 1px solid var(--c-line); border-radius: 16px;
  }
}

/* ---------- explore sheet ---------------------------------- */
.fob-social-sheet {
  position: fixed; left: 0; right: 0; top: 0; z-index: 90;
  height: 100vh; height: 100dvh;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.6);
}
.fob-social-sheet[hidden] { display: none; }
.fob-social-sheet-inner {
  width: 100%; max-width: 620px;
  max-height: 82vh; overflow-y: auto;
  background: var(--c-surface-2);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--c-line-2);
  padding: 8px clamp(14px, 3vw, 22px) calc(28px + env(safe-area-inset-bottom, 0px));
}
.fob-social-sheet-grip {
  width: 38px; height: 4px; border-radius: 3px;
  background: var(--c-line-2); margin: 8px auto 16px;
}
.fob-social-sheet h2 {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  color: var(--c-text); margin-bottom: 4px;
}
.fob-social-sheet-note { font-size: 13px; color: var(--c-text-3); margin-bottom: 16px; }
.fob-social-cat-group {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim);
  margin: 18px 0 8px;
}
.fob-social-cat {
  display: block; width: 100%; text-align: left;
  padding: 13px 14px; margin-bottom: 6px; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 12px; min-height: 44px;
  font-family: var(--body); font-size: 14.5px; color: var(--c-text);
}
.fob-social-cat:hover { border-color: var(--c-line-2); }
.fob-social-cat:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-social-cat[aria-pressed='true'] { border-color: var(--gold); }
.fob-social-cat small { display: block; color: var(--c-text-3); font-size: 12.5px; margin-top: 2px; }

/* ---------- active filter chip ----------------------------- */
.fob-social-active-filter {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; margin-bottom: 10px;
  background: var(--c-surface-2); border: 1px solid var(--gold-line);
  border-radius: 999px; font-size: 13.5px; color: var(--c-text);
}
.fob-social-active-filter button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--c-text-3); font-size: 18px; line-height: 1; padding: 0 4px;
}
.fob-social-active-filter button:hover { color: var(--c-text); }

/* ═══════════════════════════════════════════════
   PHASE 1b :: LIGHT POST SURFACES + SOCIAL CARDS
   Dark premium shell, light readable post cards.
   Each theme sets its own text colours so contrast
   is guaranteed no matter which one a member picks.
   ═══════════════════════════════════════════════ */

.fob-post {
  --card-bg:    #FFFFFF;
  --card-text:  #15181C;
  --card-soft:  #5C6570;
  --card-line:  rgba(0,0,0,0.10);
  --card-hover: rgba(0,0,0,0.045);

  background: var(--card-bg);
  color: var(--card-text);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 6px 18px rgba(0,0,0,0.18);
}

/* curated themes. every pair is contrast-checked. */
.fob-post.theme-paper { --card-bg:#FFFFFF; --card-text:#15181C; --card-soft:#5C6570; --card-line:rgba(0,0,0,0.10); --card-hover:rgba(0,0,0,0.045); }
.fob-post.theme-cream { --card-bg:#FAF6ED; --card-text:#1E1A13; --card-soft:#6B6252; --card-line:rgba(0,0,0,0.10); --card-hover:rgba(0,0,0,0.045); }
.fob-post.theme-sand  { --card-bg:#EFE8DA; --card-text:#211D15; --card-soft:#6A6152; --card-line:rgba(0,0,0,0.11); --card-hover:rgba(0,0,0,0.05); }
.fob-post.theme-mist  { --card-bg:#EDF1F5; --card-text:#161A1F; --card-soft:#5A636E; --card-line:rgba(0,0,0,0.10); --card-hover:rgba(0,0,0,0.045); }
.fob-post.theme-slate { --card-bg:#333A43; --card-text:#F4F6F8; --card-soft:#A6AEB8; --card-line:rgba(255,255,255,0.13); --card-hover:rgba(255,255,255,0.06); }
.fob-post.theme-ink   { --card-bg:#191D22; --card-text:#F4F6F8; --card-soft:#98A0A9; --card-line:rgba(255,255,255,0.11); --card-hover:rgba(255,255,255,0.06); }

/* ---------- header row ------------------------------------- */
.fob-post-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px 0;
}
.fob-post-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--gold-dim));
  color: #15181C; font-family: var(--display); font-size: 15px; font-weight: 600;
}
.fob-post-ident { flex: 1; min-width: 0; }
.fob-post-name {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  color: var(--card-text); line-height: 1.3;
}
.fob-post-meta {
  font-size: 13px; color: var(--card-soft); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fob-post-badge {
  font-family: var(--display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--gold); color: #15181C;
}
.fob-post-more {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--card-soft); font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fob-post-more:hover { background: var(--card-hover); color: var(--card-text); }
.fob-post-more:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- body ------------------------------------------- */
.fob-post-title {
  display: block; padding: 11px 14px 0;
  font-family: var(--display); font-weight: 600;
  font-size: 17.5px; line-height: 1.32;
  color: var(--card-text); text-decoration: none;
}
.fob-post-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.fob-post-body {
  padding: 7px 14px 13px;
  font-size: 15.5px; line-height: 1.6; color: var(--card-text);
}
.fob-post-topic {
  display: inline-block; margin: 0 14px 12px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--card-hover); color: var(--card-soft);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
}
.fob-post-topic:hover { color: var(--card-text); }

/* ---------- count strip ------------------------------------ */
.fob-post-counts {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px 10px;
  font-size: 13px; color: var(--card-soft);
}

/* ---------- action bar ------------------------------------- */
.fob-post-actions {
  display: flex; border-top: 1px solid var(--card-line);
  padding: 2px 6px;
}
.fob-post-action {
  flex: 1; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--card-soft);
  border-radius: 12px;
  transition: background 0.15s, color 0.15s;
}
.fob-post-action:hover { background: var(--card-hover); color: var(--card-text); }
.fob-post-action:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
/* Icons carry the meaning now that the labels are gone, so they get a
   little more presence and the row gets room instead of five words. */
.fob-post-action svg { width: 21px; height: 21px; }
.fob-post-action[aria-pressed='true'] { color: #C8981F; font-weight: 600; }
.fob-post.theme-slate .fob-post-action[aria-pressed='true'],
.fob-post.theme-ink   .fob-post-action[aria-pressed='true'] { color: var(--gold-bright); }
.fob-post-action[aria-pressed='true'] svg { fill: currentColor; }
@media (max-width: 380px) {
  .fob-post-action span { display: none; }
}

/* ---------- theme picker ----------------------------------- */
.fob-theme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 6px;
}
.fob-theme-swatch {
  cursor: pointer; padding: 0; border-radius: 12px; overflow: hidden;
  border: 2px solid transparent; background: none; min-height: 76px;
  display: flex; flex-direction: column;
}
.fob-theme-swatch:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-theme-swatch[aria-pressed='true'] { border-color: var(--gold); }
.fob-theme-preview {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 11px 12px; text-align: left;
}
.fob-theme-preview i {
  display: block; height: 5px; border-radius: 3px; background: currentColor;
  opacity: 0.75;
}
.fob-theme-preview i:nth-child(2) { width: 70%; opacity: 0.45; }
.fob-theme-name {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 0 7px; color: var(--c-text-3);
}
.fob-theme-swatch[aria-pressed='true'] .fob-theme-name { color: var(--gold); }

/* ---------- forum wordmark --------------------------------- */
.fob-social-top img,
.fob-nav .fob-brand img { height: 28px; width: auto; display: block; }

.fob-forum-hero-mark {
  display: block;
  width: min(300px, 68vw); height: auto;
  margin: 0 auto clamp(16px, 2.6vw, 24px);
}

/* ═══════════════════════════════════════════════
   MENUS, INLINE COMMENTS, FOLLOW STRIP
   ═══════════════════════════════════════════════ */

/* ---------- overflow menu ---------------------------------- */
.fob-post-menu-wrap { position: relative; flex: none; }
.fob-post-menu {
  position: absolute; right: 0; top: 38px; z-index: 30;
  min-width: 190px; padding: 6px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.fob-post-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 8px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-size: 14.5px; color: var(--c-text);
}
.fob-post-menu-item:hover { background: rgba(255,255,255,0.07); }
.fob-post-menu-item:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fob-post-menu-item.is-danger { color: #E89185; }

/* ---------- edit in place ---------------------------------- */
.fob-post-edit { padding: 0 14px 14px; }
.fob-post-edit-input, .fob-post-edit-area {
  width: 100%; padding: 11px 13px; margin-bottom: 9px;
  font-family: var(--body); font-size: 15.5px;
  color: var(--card-text);
  background: var(--card-hover);
  border: 1px solid var(--card-line); border-radius: 10px;
}
.fob-post-edit-area { min-height: 110px; line-height: 1.55; resize: vertical; }
.fob-post-edit-input:focus, .fob-post-edit-area:focus {
  outline: 2px solid var(--gold); outline-offset: -1px;
}
.fob-post-edit-row { display: flex; gap: 9px; justify-content: flex-end; }
.fob-post-btn {
  padding: 10px 18px; border-radius: 999px; cursor: pointer; min-height: 40px;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--card-line); color: var(--card-text);
}
.fob-post-btn.is-primary { background: var(--gold); border-color: var(--gold); color: #15181C; }
.fob-post-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- inline comments -------------------------------- */
.fob-post-comments {
  border-top: 1px solid var(--card-line);
  background: var(--card-hover);
  padding: 12px 14px 14px;
}
.fob-post-comment-loading { font-size: 13.5px; color: var(--card-soft); padding: 6px 0; }
.fob-post-comment-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.fob-post-comment { display: flex; align-items: flex-start; gap: 9px; }
.fob-post-comment-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--gold-dim));
  color: #15181C; font-family: var(--display); font-size: 12px; font-weight: 600;
}
.fob-post-comment-avatar.is-silhouette { background: var(--card-line); color: var(--card-soft); padding: 6px; }
.fob-post-comment-avatar svg { width: 100%; height: 100%; }
.fob-post-comment-bubble {
  flex: 1; min-width: 0;
  background: var(--card-bg); border: 1px solid var(--card-line);
  border-radius: 4px 14px 14px 14px; padding: 9px 12px;
}
.fob-post-comment-who {
  font-size: 13px; font-weight: 600; color: var(--card-text); margin-bottom: 2px;
}
.fob-post-comment-text {
  font-size: 14.5px; line-height: 1.5; color: var(--card-text);
  overflow-wrap: anywhere;
}
.fob-post-comment-del {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--card-soft); font-size: 17px; line-height: 1;
}
.fob-post-comment-del:hover { color: #E89185; background: var(--card-line); }

.fob-post-comment-form { display: flex; align-items: flex-end; gap: 9px; }
.fob-post-comment-input {
  flex: 1; min-width: 0; resize: none;
  padding: 10px 13px; min-height: 42px; max-height: 130px;
  font-family: var(--body); font-size: 15.5px; line-height: 1.45;
  color: var(--card-text);
  background: var(--card-bg);
  border: 1px solid var(--card-line); border-radius: 20px;
}
.fob-post-comment-input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.fob-post-comment-send {
  flex: none; padding: 0 17px; min-height: 42px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--gold); border: none; color: #15181C;
}
.fob-post-comment-send:disabled { opacity: 0.5; }
.fob-post-comment-send:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- follow strip ----------------------------------- */
.fob-follow-strip {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 14px 0 10px; margin-bottom: 12px;
}
.fob-follow-strip-head {
  padding: 0 15px 11px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
}
.fob-follow-row {
  display: flex; gap: 14px; overflow-x: auto; padding: 0 15px 6px;
  scrollbar-width: none;
}
.fob-follow-row::-webkit-scrollbar { display: none; }
.fob-follow-cell {
  position: relative; flex: none; width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.fob-follow-avatar {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--gold-dim));
  color: #15181C; font-family: var(--display); font-size: 17px; font-weight: 600;
  border: 2px solid var(--gold-line);
}
.fob-follow-avatar.is-silhouette { background: var(--c-surface-2); color: var(--c-text-3); padding: 10px; }
.fob-follow-avatar svg { width: 100%; height: 100%; }
.fob-follow-name {
  font-size: 11.5px; color: var(--c-text-2); text-align: center;
  max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fob-follow-remove {
  position: absolute; top: -3px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  background: var(--c-surface-2); border: 1px solid var(--c-line-2);
  color: var(--c-text-2); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fob-follow-remove:hover { color: #E89185; border-color: #E89185; }
.fob-follow-note { padding: 8px 15px 0; font-size: 12px; color: var(--c-text-3); }

/* ---------- follow empty state ------------------------------ */
.fob-follow-empty {
  text-align: center; padding: 42px 24px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 16px;
}
.fob-follow-ghosts {
  display: flex; justify-content: center; gap: -10px; margin-bottom: 18px;
}
.fob-follow-ghost {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); border: 2px solid var(--c-bg);
  color: rgba(255,255,255,0.16); padding: 10px;
  margin-left: -12px;
}
.fob-follow-ghost:first-child { margin-left: 0; }
.fob-follow-ghost:nth-child(2) { color: rgba(255,255,255,0.24); }
.fob-follow-ghost svg { width: 100%; height: 100%; }
.fob-follow-empty h3 {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  color: var(--c-text); margin-bottom: 8px;
}
.fob-follow-empty p {
  font-size: 14px; line-height: 1.6; color: var(--c-text-3);
  max-width: 34ch; margin: 0 auto 18px;
}

/* ═══════════════════════════════════════════════
   WARM SOCIAL LAYER
   Softer, friendlier surfaces for the community only.
   The marketing site is untouched.
   ═══════════════════════════════════════════════ */
.fob-community-page {
  --c-bg:        #171A20;
  --c-surface:   #242A32;
  --c-surface-2: #2C333C;
  --c-line:      rgba(233,201,143,0.13);
  --c-line-2:    rgba(233,201,143,0.26);
  --community-radius: 20px;
  position: relative;
}

/* ambient warmth behind everything */
.fob-community-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58vw 42vh at 82% -8%, rgba(233,201,143,0.16), transparent 68%),
    radial-gradient(46vw 38vh at -12% 22%, rgba(150,178,196,0.10), transparent 66%),
    radial-gradient(64vw 46vh at 50% 108%, rgba(211,190,152,0.10), transparent 70%);
}
.fob-community-page > * { position: relative; z-index: 1; }

/* The rule above lifts page content above the ambient gradient, but it
   also lands on every direct child of <body>, and it sits later in this
   file than the components below. That silently demoted the sticky
   header, the fixed bottom bar, the toasts and every overlay to
   position:relative, which is why they rendered as ordinary blocks at
   the end of the document instead of floating. These restore them, with
   higher specificity so ordering can never decide it again. */
.fob-community-page > .fob-social-stack {
  position: sticky; top: 0; z-index: 60;
}
.fob-community-page > .fob-social-nav {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
}
.fob-community-page > .fob-pv-backdrop,
.fob-community-page > .fob-social-sheet {
  position: fixed; left: 0; right: 0; top: 0; bottom: auto; z-index: 95;
}
.fob-community-page > #fob-community-toasts {
  /* Restores position:fixed against the blanket `> *` rule WITHOUT
     flattening the centring above: left:0/right:0 cancelled the
     translateX and dropped these behind the bottom bar. Sits clear of
     the nav so a toast never lands under it. */
  position: fixed;
  left: 50%; right: auto; transform: translateX(-50%);
  top: auto;
  bottom: calc(var(--c-nav-h, 62px) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
}
@media (min-width: 900px) {
  .fob-community-page > .fob-social-nav {
    position: sticky; top: 0; bottom: auto;
  }
}

/* softer, rounder surfaces */
.fob-community-page .fob-community-panel,
.fob-community-page .fob-thread-card,
.fob-community-page .fob-thread-reply,
.fob-follow-strip, .fob-follow-empty {
  border-radius: var(--community-radius);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 46%),
    var(--c-surface);
}
.fob-post { border-radius: var(--community-radius); }
.fob-social-composer {
  border-radius: 999px;
  background: linear-gradient(168deg, rgba(233,201,143,0.09), rgba(44,51,60,0.95));
}
.fob-social-composer-cta { box-shadow: 0 3px 12px rgba(211,190,152,0.32); }

/* friendlier primary buttons */
.fob-community-page .fob-community-btn-primary,
.fob-community-page .fob-btn-solid {
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(211,190,152,0.26);
}
.fob-community-page .fob-community-btn-ghost { border-radius: 999px; }

/* tabs + nav pick up the warmth */
.fob-social-stack { background: #171A20; }
.fob-social-nav { background: rgba(30,34,41,0.96); }

/* ---------- landing: social intro -------------------------- */
.fob-forum-hero-mark {
  filter: drop-shadow(0 8px 26px rgba(233,201,143,0.28));
}
.fob-community-hero .fob-community-title {
  background: linear-gradient(96deg, #FFFFFF 8%, var(--gold-bright) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fob-intro-blobs {
  display: flex; justify-content: center; margin-bottom: 18px;
}
.fob-intro-blobs span {
  width: 46px; height: 46px; margin-left: -13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-bg); padding: 9px;
  background: var(--c-surface-2); color: rgba(233,201,143,0.34);
}
.fob-intro-blobs span:first-child { margin-left: 0; }
.fob-intro-blobs span:nth-child(2) { color: rgba(233,201,143,0.52); }
.fob-intro-blobs span:nth-child(3) { color: rgba(233,201,143,0.7); }
.fob-intro-blobs svg { width: 100%; height: 100%; }

/* feature list becomes soft cards */
.fob-community-features {
  background: transparent; border: none; gap: 10px; border-radius: 0;
}
.fob-community-features li {
  border-radius: 16px; padding: 16px 18px;
  border: 1px solid var(--c-line);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 52%),
    var(--c-surface);
  color: var(--c-text-2);
}
.fob-community-features b { color: var(--gold-bright); font-size: 12.5px; }

/* ---------- password reveal + gmail chip ------------------- */
.fob-pw-wrap { position: relative; }
.fob-pw-wrap .fob-community-input { padding-right: 50px; }
.fob-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: none; border: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.fob-eye svg { width: 21px; height: 21px; }
.fob-eye:hover { color: var(--cream); }
.fob-eye:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-eye[aria-pressed='true'] { color: var(--gold); }
.fob-eye[aria-pressed='true']::after {
  content: ''; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 2px; background: currentColor; transform: rotate(-45deg);
}
.fob-gmail-chip {
  margin-top: 8px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px dashed var(--gold-line);
  font-family: var(--body); font-size: 12.5px; color: var(--gold-dim);
  min-height: 36px;
}
.fob-gmail-chip:hover { color: var(--gold-bright); border-color: var(--gold); }
.fob-gmail-chip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- avatar cropper --------------------------------- */
.fob-crop { margin-bottom: 14px; }
.fob-crop-stage {
  position: relative; width: 100%; max-width: 260px; aspect-ratio: 1;
  margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--gold-line);
  touch-action: none; cursor: grab;
}
.fob-crop-stage:active { cursor: grabbing; }
.fob-crop-stage canvas { width: 100%; height: 100%; display: block; }
.fob-crop-zoom {
  display: flex; align-items: center; gap: 11px;
  max-width: 260px; margin: 0 auto 10px;
}
.fob-crop-zoom input { flex: 1; accent-color: var(--gold); height: 34px; }
.fob-crop-zoom span {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-dim);
}
.fob-crop-hint { text-align: center; font-size: 12.5px; color: var(--muted); }

/* =============================================================
   MEDIA
   Photos, voice notes and GIFs in the composer and in posts.
   Sized against the existing tokens so attachments read as part
   of a card rather than as an embed dropped on top of one.
   ============================================================= */

/* ---------- composer tools ---------------------------------- */
.fob-compose-tools {
  display: flex; align-items: center; gap: 4px;
  margin: 2px 0 14px;
}
.fob-tool {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 11px; cursor: pointer;
  color: var(--muted);
}
.fob-tool svg { width: 20px; height: 20px; }
.fob-tool:hover { background: rgba(211,190,152,0.12); color: var(--gold-bright); }
.fob-tool:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Recording state doubles as the timer, so no separate readout is
   needed and the row does not change height mid-recording. */
.fob-tool.is-recording { color: #E2705F; background: rgba(226,112,95,0.14); }
.fob-tool.is-recording::after {
  content: attr(data-time);
  margin-left: 6px; font-family: var(--body); font-size: 12px;
}
.fob-tool.is-recording { width: auto; padding: 0 12px; }
@keyframes fob-rec-pulse { 50% { opacity: 0.45; } }
.fob-tool.is-recording svg { animation: fob-rec-pulse 1.1s ease-in-out infinite; }

#composer-expanded.is-dropping {
  outline: 2px dashed var(--gold); outline-offset: 8px; border-radius: 14px;
}

/* ---------- pending attachments ----------------------------- */
.fob-media-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.fob-media-strip[hidden] { display: none; }
.fob-attach {
  position: relative; width: 92px; height: 92px; flex: none;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-surface);
}
.fob-attach img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fob-attach.is-audio {
  width: 100%; height: auto; display: flex; align-items: center;
  gap: 10px; padding: 10px 12px;
}
.fob-attach-audio { flex: 1; min-width: 0; height: 34px; }
.fob-attach-len { font-size: 12px; color: var(--muted); flex: none; }
.fob-attach.is-uploading { opacity: 0.6; }
.fob-attach.is-failed { border-color: #E2705F; }
.fob-attach-progress {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--gold); width: 0; transition: width 0.2s ease;
}
.fob-attach-remove {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(10,12,15,0.72); color: #fff;
  border: none; cursor: pointer; font-size: 16px; line-height: 1;
}
.fob-attach-remove:focus-visible { outline: 2px solid var(--gold-bright); }

/* ---------- media inside posts ------------------------------ */
.fob-media { margin: 2px 0 12px; }
.fob-media-grid {
  display: grid; gap: 3px;
  border-radius: 14px; overflow: hidden;
  /* Capped so a portrait phone photo does not become the entire post,
     and centred, because a capped block with no auto margin sits hard
     against the left edge of the card. */
  max-width: 340px;
  margin-inline: auto;
}
.fob-media-n1 { grid-template-columns: 1fr; }
.fob-media-n2 { grid-template-columns: 1fr 1fr; }
.fob-media-n3, .fob-media-n4 { grid-template-columns: 1fr 1fr; }

.fob-media-cell {
  position: relative; padding: 0; border: none; cursor: pointer;
  background: var(--c-surface); overflow: hidden;
  display: block; width: 100%;
}
/* A single photo keeps its own shape; a grid needs equal cells or the
   rows do not line up. */
.fob-media-n2 .fob-media-cell,
.fob-media-n3 .fob-media-cell,
.fob-media-n4 .fob-media-cell { aspect-ratio: 1 / 1 !important; }
.fob-media-n1 .fob-media-cell { max-height: 300px; }
.fob-media-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fob-media-cell.is-missing {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; color: var(--muted); font-size: 13px;
}
.fob-media-cell:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.fob-media-tag {
  position: absolute; left: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(10,12,15,0.7); color: #fff;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.08em;
}
.fob-media-more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,15,0.58); color: #fff;
  font-family: var(--display); font-size: 22px; font-weight: 600;
}

/* ---------- voice note in a post ---------------------------- */
.fob-voice {
  display: flex; align-items: center; gap: 11px;
  max-width: 340px; margin-inline: auto;
  padding: 10px 13px; margin-top: 8px;
  border: 1px solid var(--card-line); border-radius: 999px;
}
.fob-voice-play {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink); border: none; cursor: pointer;
}
.fob-voice-play:disabled { opacity: 0.5; cursor: default; }
.fob-voice-play:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-voice-bar {
  flex: 1; min-width: 0; height: 4px; border-radius: 999px;
  background: var(--card-line); cursor: pointer; position: relative;
}
.fob-voice-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--gold);
}
.fob-voice-time {
  flex: none; font-size: 12.5px; color: var(--card-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- lightbox ---------------------------------------- */
.fob-lightbox {
  position: fixed; left: 0; right: 0; top: 0; z-index: 130;
  height: 100vh; height: 100dvh;
  background: rgba(6,8,10,0.94);
  display: flex; align-items: center; justify-content: center;
}
.fob-lightbox[hidden] { display: none; }
.fob-community-page > .fob-lightbox {
  position: fixed; top: 0; bottom: auto; z-index: 130;
}
.fob-lightbox-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px;
}
.fob-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 8px;
}
.fob-lightbox-close, .fob-lightbox-nav {
  position: absolute; background: rgba(255,255,255,0.1); color: #fff;
  border: none; cursor: pointer; border-radius: 50%;
  width: 44px; height: 44px; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fob-lightbox-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.fob-lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.fob-lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }
.fob-lightbox-nav[hidden], .fob-lightbox-count[hidden] { display: none; }
.fob-lightbox-close:focus-visible,
.fob-lightbox-nav:focus-visible { outline: 2px solid var(--gold-bright); }
.fob-lightbox-count {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.8); font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ---------- GIF picker -------------------------------------- */
.fob-gif-card { max-height: 78dvh; }
.fob-gif-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fob-gif-head .fob-community-input { flex: 1; min-width: 0; }
.fob-gif-grid {
  column-count: 2; column-gap: 6px;
  max-height: 54dvh; overflow-y: auto;
}
@media (min-width: 520px) { .fob-gif-grid { column-count: 3; } }
.fob-gif-cell {
  display: block; width: 100%; padding: 0; border: none; cursor: pointer;
  background: var(--c-surface); border-radius: 10px; overflow: hidden;
  /* Natural height: a square crop cut the subject out of most results. */
  break-inside: avoid; margin: 0 0 6px;
}
.fob-gif-cell img { width: 100%; height: auto; display: block; }
.fob-gif-cell:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .fob-tool.is-recording svg { animation: none; }
  .fob-attach-progress { transition: none; }
}

/* =============================================================
   CAROUSEL, VIDEO, STORIES
   ============================================================= */

/* ---------- carousel ---------------------------------------- */
.fob-carousel {
  position: relative; max-width: 340px; margin-inline: auto;
  border-radius: 14px; overflow: hidden; background: var(--c-surface);
}
.fob-carousel-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fob-carousel-track::-webkit-scrollbar { display: none; }
.fob-carousel-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #0D0F12;
}
.fob-carousel-slide.is-missing {
  color: var(--muted); font-size: 13px; min-height: 140px;
}
.fob-carousel-open {
  width: 100%; height: 100%; padding: 0; border: none;
  background: none; cursor: pointer; display: block;
}
.fob-carousel-slide img,
.fob-carousel-slide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fob-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 5px;
}
.fob-carousel-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.42); cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.fob-carousel-dot.is-on { background: #fff; transform: scale(1.25); }
.fob-carousel-dot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.fob-carousel-count {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(10,12,15,0.66); color: #fff;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.fob-attach-kind {
  position: absolute; left: 5px; bottom: 5px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(10,12,15,0.72); color: #fff; font-size: 10px;
}
.fob-attach video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- story rail -------------------------------------- */
.fob-story-rail {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 2px 14px; margin-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fob-story-rail::-webkit-scrollbar { display: none; }
.fob-story-rail[hidden] { display: none; }
.fob-story-item {
  flex: none; width: 66px; padding: 0; border: none; background: none;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.fob-story-ring {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--c-surface);
  /* Two rings: a gold edge with a dark gap, so the avatar reads as a
     photo rather than a coin. */
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--gold);
}
.fob-story-ring img { width: 100%; height: 100%; object-fit: cover; }
.fob-story-ring.is-add {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--c-line-2);
  color: var(--gold);
}
.fob-story-ring.is-add svg { width: 22px; height: 22px; }
.fob-story-fallback {
  font-family: var(--display); font-size: 18px; color: var(--gold);
}
.fob-story-name {
  font-size: 11px; color: var(--c-text-2); max-width: 66px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fob-story-item:focus-visible .fob-story-ring { outline: 2px solid var(--gold-bright); outline-offset: 4px; }

/* ---------- story viewer ------------------------------------ */
.fob-story-viewer {
  position: fixed; left: 0; right: 0; top: 0; z-index: 200;
  height: 100vh; height: 100dvh;
  background: #07090B;
  display: flex; flex-direction: column;
}
.fob-story-viewer[hidden] { display: none; }
.fob-community-page > .fob-story-viewer {
  position: fixed; top: 0; bottom: auto; z-index: 200;
}
.fob-story-bars {
  display: flex; gap: 3px; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0;
  position: relative; z-index: 6;
}
.fob-story-bar {
  flex: 1; height: 2.5px; border-radius: 999px;
  background: rgba(255,255,255,0.26); overflow: hidden;
}
.fob-story-bar i { display: block; height: 100%; width: 0; background: #fff; }
.fob-story-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; position: relative; z-index: 6;
}
.fob-story-who { color: #fff; font-family: var(--display); font-size: 14px; font-weight: 600; }
.fob-story-when { color: rgba(255,255,255,0.6); font-size: 12px; flex: 1; }
.fob-story-close {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.fob-story-stage {
  flex: 1; min-height: 0; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px calc(20px + env(safe-area-inset-bottom, 0px));
}
.fob-story-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
video.fob-story-media { position: relative; z-index: 5; }
.fob-story-text {
  color: #fff; font-family: var(--display); font-size: clamp(20px, 6vw, 30px);
  line-height: 1.35; text-align: center; max-width: 22ch;
}
/* Above the media so a tap anywhere on the photo advances, but below
   the header, so Close still wins. */
.fob-story-half {
  position: absolute; top: 0; bottom: 0; width: 32%;
  border: none; background: none; cursor: pointer; z-index: 4;
}
.fob-story-back { left: 0; }
.fob-story-next { right: 0; width: 68%; }

.fob-story-shared {
  position: relative; z-index: 5;
  width: 100%; max-width: 340px; padding: 18px;
  background: var(--panel); border: 1px solid var(--gold-line-soft);
  border-radius: 16px; color: var(--text);
}
.fob-story-shared-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fob-story-shared-head b { display: block; color: var(--cream); font-size: 14px; }
.fob-story-shared-head span { color: var(--gold-dim); font-size: 12.5px; }
.fob-story-shared h3 {
  font-family: var(--display); font-size: 17px; color: var(--cream); margin-bottom: 8px;
}
.fob-story-shared p { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.fob-story-shared-note {
  color: var(--gold-dim); font-style: normal; font-size: 14.5px;
  padding-bottom: 10px; border-bottom: 1px solid var(--gold-line-soft);
}
.fob-story-preview { margin-bottom: 12px; border-radius: 12px; overflow: hidden; max-height: 220px; }
.fob-story-preview[hidden] { display: none; }
.fob-story-preview img, .fob-story-preview video {
  width: 100%; max-height: 220px; object-fit: cover; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .fob-carousel-track { scroll-behavior: auto; }
  .fob-carousel-dot { transition: none; }
}

/* =============================================================
   FOUNDER TREATMENT + STORY GLOW
   ============================================================= */

/* ---------- founder's posts --------------------------------- */
/* A quiet marker, not a spotlight. The breath is 4.5s and the
   contrast is low, because anything faster or brighter turns a
   scrolling feed into something that twitches. */
.fob-post.is-founder {
  box-shadow: 0 0 0 1px rgba(211,190,152,0.45),
              0 0 18px -4px rgba(211,190,152,0.35);
  animation: fob-founder-breathe 4.5s ease-in-out infinite;
}
@keyframes fob-founder-breathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(211,190,152,0.32),
                0 0 14px -6px rgba(211,190,152,0.26);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(211,190,152,0.58),
                0 0 24px -4px rgba(211,190,152,0.48);
  }
}

/* ---------- story rings ------------------------------------- */
.fob-story-ring {
  /* Author's colour when set, brand gold otherwise. */
  --story-glow: var(--gold);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--story-glow),
              0 0 14px -3px var(--story-glow);
}
/* Watched rings go quiet, so the rail shows what is left to see. */
.fob-story-ring.is-seen {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--c-line-2);
  opacity: 0.72;
}
.fob-story-ring.is-seen + .fob-story-name { color: var(--muted); }

/* ---------- glow inside the viewer -------------------------- */
.fob-story-viewer.has-glow .fob-story-stage::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 60% at 50% 100%,
              var(--story-glow), transparent 68%);
  opacity: 0.24;
}
.fob-story-viewer.has-glow .fob-story-media {
  box-shadow: 0 0 34px -8px var(--story-glow);
}

/* ---------- skip control ------------------------------------ */
.fob-story-skip {
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  background: none; color: #fff; cursor: pointer;
  padding: 5px 13px; font-family: var(--body); font-size: 12.5px;
}
.fob-story-skip:hover { background: rgba(255,255,255,0.12); }
.fob-story-skip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- glow picker ------------------------------------- */
.fob-story-glow-row {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 2px;
}
.fob-story-glow-row label { margin: 0; }
.fob-story-glow-row input[type=color] {
  width: 34px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--c-line-2); border-radius: 8px;
}
.fob-story-glow-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: transparent; margin-left: auto;
  transition: background 0.15s, box-shadow 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .fob-post.is-founder { animation: none; }
  .fob-story-glow-dot { transition: none; }
}

/* ---------- comment sheet ----------------------------------- */
.fob-comments-card {
  display: flex; flex-direction: column;
  max-height: 88dvh; padding-bottom: 0;
}
.fob-comments-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--gold-line-soft);
}
.fob-comments-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fob-comments-list {
  flex: 1; min-height: 80px; overflow-y: auto;
  padding: 12px 0; display: flex; flex-direction: column; gap: 12px;
}
/* The composer stays put while the list scrolls, so a long thread never
   pushes the reply box off screen. */
.fob-comments-compose {
  border-top: 1px solid var(--gold-line-soft);
  padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
}
.fob-comments-compose .fob-post-comment-input {
  width: 100%; min-height: 42px; resize: vertical;
}
.fob-comments-compose .fob-compose-tools { margin: 8px 0 0; }
.fob-comments-compose .fob-compose-tools .fob-community-btn { margin-left: auto; }
.fob-comments-compose .fob-media-strip { margin-bottom: 10px; }
/* Attachments inside a comment are smaller again: a comment is a reply,
   not a post, and should not out-shout the thing it answers. */
.fob-post-comment .fob-media,
.fob-post-comment .fob-carousel,
.fob-post-comment .fob-voice { max-width: 240px; margin-inline: 0; }
.fob-post-comment .fob-media { margin-top: 8px; margin-bottom: 2px; }