/* Community view — peer Q&A, stories, review requests.
 *
 * Kept in its own file rather than appended to the 267 KB style.sheet: this is
 * one self-contained view, and a separate file means a change here can never
 * ripple into the rest of the app. Every colour is a token from tokens.css so
 * dark mode and the plan palette come for free — no literal hex values.
 */

/* ─── The scroll container ───────────────────────────────────────────────── */

/* .app-view is `overflow: hidden; height: 100%` on purpose — the SPA shell
   locks document scrolling and every view owns an internal scroller
   (.discover-main, .resources-main, .alumni-main, .settings-shell). Community
   shipped without one, so anything past the first viewport was rendered,
   laid out, and unreachable: 2256px of thread inside a 720px box with no way
   to scroll it. This rule is that missing scroller.

   It also has to be the scroller rather than a child, because the sticky
   thread bar, the sticky filter row and the back-to-top button all position
   against it. */
#view-community {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
@media (prefers-reduced-motion: reduce) {
  #view-community { scroll-behavior: auto; }
}
#view-community::-webkit-scrollbar { width: 6px; }
#view-community::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 3px;
}

.community-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  /* A flex child in the column .app-view would otherwise be shrunk to the
     container height and clip its own overflow back off. */
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.community-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.community-header h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0 0 4px;
  color: var(--text-primary);
}
.community-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

/* ─── Filters ────────────────────────────────────────────────────────────── */

.community-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 20px;
}
/* Sticks so a reader forty threads down the feed can change topic without
   scrolling back. Negative side margins let the backdrop span the gutter the
   wrap's padding creates, so rows pass under it rather than beside it. */
.community-filters.is-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 16px -20px 20px;
  padding: 10px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.community-chip {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.community-chip:hover { background: var(--bg-hover); }
.community-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.community-tag-select {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* ─── Feed ───────────────────────────────────────────────────────────────── */

.community-rail-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 0 0 8px;
}
.community-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.community-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.community-row-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 62px;
  text-align: center;
}
.community-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.community-stat b {
  font-size: 1rem;
  color: var(--text-secondary);
}
/* An answered question reads differently at a glance — this is the single
   strongest signal that the community is alive, so it earns real colour. */
.community-stat.is-answered b { color: var(--success); }

.community-row-main { flex: 1; min-width: 0; }
.community-row-title { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.4; }
.community-row-title a {
  color: var(--text-primary);
  text-decoration: none;
}
.community-row-title a:hover { color: var(--accent); }

.community-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.community-row-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}
.community-author { color: var(--text-secondary); font-weight: 500; }
.community-rep {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.community-anon { font-style: italic; color: var(--text-tertiary); }

/* ─── Chips, tags, badges ────────────────────────────────────────────────── */

.community-kind,
.community-tag,
.community-program,
.community-badge {
  display: inline-block;
  border-radius: var(--radius-md);
  padding: 2px 8px;
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: nowrap;
}
.community-kind {
  background: var(--bg-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.community-kind-question { border-color: var(--accent); color: var(--accent); }
.community-kind.is-members { border-color: var(--warning); color: var(--warning); }
.community-kind.is-official { border-color: var(--success); color: var(--success); }

.community-tag {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.community-program {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
/* A snapshot attachment has no id to link to — it came from a private, per-user
   program row. Rendering it flat keeps that visually honest. */
.community-program.is-plain {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
}

.community-badge {
  border: 1px solid var(--border);
  color: var(--text-tertiary);
}
.community-badge-verified_alumni { border-color: var(--success); color: var(--success); }
.community-badge-mentor { border-color: var(--plan-scholar); color: var(--plan-scholar); }
.community-badge-top_contributor { border-color: var(--yellow); color: var(--yellow); }

.community-mentor-cta {
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

/* ─── Thread ─────────────────────────────────────────────────────────────── */

.community-back {
  background: none;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 0 12px;
  font-size: 0.86rem;
}
.community-back:hover { color: var(--accent); }

.community-post h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 8px 0 10px;
  color: var(--text-primary);
}
.community-post-head { display: flex; gap: 6px; }

.community-body {
  color: var(--text-primary);
  line-height: 1.7;
  margin: 14px 0;
  word-break: break-word;
}
.community-body p { margin: 0 0 12px; }
.community-body pre {
  background: var(--bg-sunken);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.community-body code { font-family: var(--font-mono); font-size: 0.88em; }
.community-body a { color: var(--accent); }
.community-body img { max-width: 100%; height: auto; }

.community-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.community-action {
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 0;
}
.community-action:hover { color: var(--text-secondary); }
.community-action.is-accept { color: var(--status-approve); font-weight: 500; }
.community-edited { font-size: 0.76rem; color: var(--text-quaternary); font-style: italic; }

.community-vote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--motion-fast) var(--motion-ease);
}
.community-vote:hover { background: var(--bg-hover); }
.community-vote.is-voted {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.community-answers-title {
  font-size: 1rem;
  margin: 0;
  color: var(--text-secondary);
}
/* ─── Long-thread navigation ─────────────────────────────────────────────────
 *
 * Everything from here down exists for the thread that runs four screens deep.
 * A short thread looks the same as it always did; a long one gains a sticky
 * bar, a sort, a collapse per answer, folded replies and a folded body. The
 * shape is deliberately the one readers already know from Reddit — caret on
 * the left, a thread line down the replies, a one-line summary when collapsed.
 */

.community-threadbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -24px -20px 12px;
  padding: 10px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.community-threadbar .community-back {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.community-back-caret { font-size: 1rem; line-height: 1; }
.community-threadbar-title {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.community-threadbar-jump {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.community-threadbar-jump:hover { background: var(--bg-hover); color: var(--text-primary); }

.community-answers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 12px;
  scroll-margin-top: 60px;   /* clears the sticky bar when jumped to */
}
.community-sort {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-surface);
}
.community-sort-btn {
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
}
.community-sort-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.community-sort-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.community-answer {
  padding: 16px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 60px;
}
.community-answer.is-accepted {
  border-left: 3px solid var(--success);
  padding-left: 14px;
  background: var(--success-soft);
  border-radius: var(--radius-md);
}
/* Momentary marker on the answer the reader just posted, so a re-rendered
   thread does not make them hunt for their own words. */
.community-answer.is-fresh {
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-radius: var(--radius-md);
  transition: box-shadow 600ms var(--motion-ease);
}
.community-accepted-flag {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--success);
}

.community-answer-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.community-answer-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-collapse {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.community-collapse:hover { color: var(--accent); border-color: var(--accent); }

/* The one-line stand-in a collapsed answer leaves behind — author, score and
   how much is folded underneath, which is all a reader needs to decide whether
   to open it again. */
.community-answer-summary {
  display: none;
  margin: 4px 0 0 30px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}
.community-answer.is-collapsed .community-answer-summary { display: block; }
.community-answer.is-collapsed .community-answer-body { display: none; }
.community-answer.is-collapsed .community-answer-heading { display: none; }
.community-answer.is-collapsed { padding-bottom: 10px; }
.community-dot { margin: 0 6px; }

.community-answer-body { margin-left: 30px; }

.community-replies {
  position: relative;
  margin: 12px 0 0;
  padding-left: 16px;
}
/* The thread line is a real button, not a border: clicking the rail to fold a
   subtree is the gesture readers bring with them. Kept out of the tab order —
   the caret above is the same action, and is labelled. */
.community-threadline {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.community-threadline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.community-threadline:hover::before { background: var(--accent); }

.community-reply-item {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 60px;
}
.community-reply-item:first-child { border-top: 0; padding-top: 0; }
.community-reply-item.is-fresh {
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-radius: var(--radius-md);
}
.community-more-replies {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 0;
  cursor: pointer;
}
.community-more-replies:hover { text-decoration: underline; }

/* A body that would take a full screen folds instead of scrolling past. The
   mask is the affordance: it says "there is more" without a truncation
   ellipsis pretending the rest is gone. */
.community-body.is-clamped {
  max-height: 560px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.community-clamp-toggle {
  display: inline-block;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 2px 0 8px;
  cursor: pointer;
}
.community-clamp-toggle:hover { text-decoration: underline; }

.community-when {
  color: var(--text-quaternary, var(--text-tertiary));
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Back to top sits above the mobile menu FAB rather than under it. */
.community-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.community-totop:hover { color: var(--accent); border-color: var(--accent); }
.community-totop[hidden] { display: none; }

.community-sentinel { height: 1px; }

/* Shown beside the Load more button when a page failed. The button is the
   explicit retry — auto-append stays off until it is pressed, so a flaky
   connection cannot turn a scroll into a request loop. */
.community-more-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--danger);
}

/* The collapsed summary keeps the accepted marker: it is the strongest signal
   on the page and the reason someone would open that subtree again. */
.community-answer-summary .community-accepted-flag {
  margin-right: 8px;
}

/* ─── Composer + reply ───────────────────────────────────────────────────── */

.community-form,
.community-reply {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px 0;
}
.community-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* The inline composer opens under the comment being answered instead of at the
   foot of the page. In a long thread the bottom of the page is nowhere near
   what you are replying to, and the scroll down there loses the quote you were
   answering. */
.community-reply.is-inline {
  margin: 12px 0 4px;
  border-color: var(--accent);
}
.community-replying-to {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.community-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.community-form input,
.community-form select,
.community-form textarea,
.community-reply textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
}
.community-form textarea,
.community-reply textarea { resize: vertical; min-height: 96px; }
.community-form-row select { width: auto; flex: 1; min-width: 150px; }
.community-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* `.btn-secondary` has no base rule in style.css — only icon sizing and
   onboarding-scoped variants — so a bare one renders as an unstyled browser
   default (2px outset, light grey) in any new view. Styled here, scoped to this
   view, rather than adding a global base rule that would change how the
   onboarding buttons already look. */
/* The dialog is appended to document.body, NOT inside .community-wrap, so it
   must be named here too. style.css has no base .btn-secondary rule — only
   icon sizing and onboarding-scoped variants — so a bare one renders as a
   browser default button. This is the second place that has bitten; if a
   third appears, promote the rule to style.css rather than adding a selector. */
.community-wrap .btn-secondary,
.community-dialog .btn-secondary {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.community-wrap .btn-secondary:hover,
.community-dialog .btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.community-anon-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.community-anon-toggle input { width: auto; }
.community-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.community-attached {
  margin: 0;
  font-size: 0.82rem;
  color: var(--accent);
}
.community-error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--danger);
}
.community-locked {
  margin: 20px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  font-size: 0.88rem;
}

/* ─── Empty + loading ────────────────────────────────────────────────────── */

.community-empty,
.community-empty-state {
  text-align: center;
  color: var(--text-tertiary);
  padding: 40px 20px;
}
.community-empty-state p { margin: 0 0 6px; color: var(--text-secondary); }
.community-empty-sub { font-size: 0.88rem; color: var(--text-tertiary); }
.community-more { text-align: center; margin-top: 20px; }

.community-skeleton { padding: 20px 0; }
.community-skeleton-row {
  height: 72px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  margin-bottom: 12px;
  animation: community-pulse 1.4s var(--motion-ease) infinite;
}
@keyframes community-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .community-skeleton-row { animation: none; }
}

/* ─── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .community-wrap { padding: 16px 14px 48px; }
  .community-header { flex-direction: column; align-items: stretch; }
  .community-row { gap: 12px; }
  .community-row-stats {
    flex-direction: row;
    gap: 12px;
    min-width: 0;
    text-align: left;
  }
  .community-stat { flex-direction: row; gap: 4px; align-items: baseline; }
  .community-tag-select { margin-left: 0; width: 100%; }
}

/* ─── Program attach picker (composer) ───────────────────────────────────── */

.community-program-picker { display: flex; flex-direction: column; gap: 8px; }

.community-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.community-attached-list { display: flex; flex-wrap: wrap; gap: 6px; }

.community-attached-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: 13px;
}

.community-attached-x {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-tertiary);
}
.community-attached-x:hover { color: var(--text-primary); }

.community-program-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
}
.community-program-hits.hidden { display: none; }

.community-program-hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.community-program-hits li:last-child .community-program-hit { border-bottom: none; }
.community-program-hit:hover { background: var(--bg-secondary); }
.community-program-hit-name { font-size: 13px; color: var(--text-primary); }
.community-program-hit-org { font-size: 12px; color: var(--text-tertiary); }

/* ─── Report dialog ──────────────────────────────────────────────────────── */

.community-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}

.community-dialog {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.community-dialog h3 { margin: 0; font-size: 16px; }
.community-dialog label { font-size: 13px; color: var(--text-secondary); }
.community-dialog select {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
}
.community-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ─── Public profile ─────────────────────────────────────────────────────── */

.community-author.is-link {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.community-author.is-link:hover { text-decoration: underline; }

.community-profile-head { margin-bottom: 20px; }
.community-profile-head h1 { margin: 0 0 8px; font-size: 22px; }
.community-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.community-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-size: 13px;
  color: var(--text-tertiary);
}
.community-profile-section {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}

/* ─── Community section on the Discover program detail ───────────────────── */
/* Lives here rather than style.css so the whole feature stays removable in one
   file. The .discover-detail-section wrapper it sits inside is style.css's. */

.discover-community-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discover-community-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: pointer;
}
.discover-community-row:hover { border-color: var(--accent); }
.discover-community-row-title {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.discover-community-row-meta { font-size: 12px; color: var(--text-tertiary); }

.discover-community-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.discover-community-ask {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
}
.discover-community-ask:hover { background: var(--bg-secondary); }

/* ── Held for review (T5.2.3) ─────────────────────────────────────────────────
   The author's own view of content the auto-hold caught. It has to read as a
   normal state rather than an error: the person did nothing wrong, and a red
   banner on a first post is how a newcomer decides not to post again. Muted
   surface, plain language, and the content still rendered below it. */
.community-review-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.community-review-notice strong { color: var(--text-primary); }

/* Dimmed, not hidden — the author reads back what they wrote while it waits. */
.community-post.is-pending,
.community-answer.is-pending { opacity: 0.72; }

.community-pending-flag {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.community-row.is-pending { opacity: 0.72; }

/* ─── Language filter (Q2) ───────────────────────────────────────────────── */
/*
 * The note is always on screen while the language default is doing anything.
 * A filter that quietly hides half the room looks identical, from the reader's
 * side, to a room that is half empty — and that is a conclusion people draw
 * once and never revisit.
 */
.community-locale-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: -4px 0 16px;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

.community-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.community-link-btn:hover,
.community-link-btn:focus-visible {
  color: var(--accent-hover);
}

.community-empty-state .btn-secondary {
  margin-top: 12px;
}

/* ─── Narrow screens ─────────────────────────────────────────────────────── */
/*
 * Two things change on a phone and nothing else: the reply rail loses width it
 * cannot afford, and the back-to-top button moves clear of the mobile menu FAB
 * that lives in the same corner (style.css, .mobile-menu-toggle).
 */
@media (max-width: 768px) {
  .community-wrap { padding: 16px 14px 72px; }
  .community-threadbar { margin: -16px -14px 10px; padding: 8px 14px; }
  .community-filters.is-sticky { margin: 12px -14px 16px; padding: 8px 14px; }
  .community-threadbar-title { display: none; }
  .community-answer-body { margin-left: 0; }
  .community-answer-summary { margin-left: 30px; }
  .community-replies { padding-left: 12px; }
  .community-totop { right: 16px; bottom: 84px; }
  .community-answers-head { align-items: flex-start; }
}