/* =========================================================================
   FREE SAILING — the forum (assets/js/forum.js). Threads + replies, one
   global room and one per class. Genuinely new chrome — qa.css's own header
   still correctly says "no thread view, no forum chrome" about ITSELF
   (fs-qa.js is untouched), so this is a separate file rather than an edit
   that would contradict what qa.css says it is.

   Same discipline as qa.css: no new colour, radius or shadow token — every
   value below is one already in site.css / demand.css. This file loads
   alongside demand.css (dm-in / dm-lb / dm-go / dm-err / dm-note) wherever
   it is used, so the compose and reply forms share one look with the rest
   of the site's anonymous-write forms instead of inventing a second one.
   ========================================================================= */

/* --------------------------------------------------------------- channel
   head — title, one-line description, and (class channels only) a way
   back to the class itself. */
.fo-head{ margin-bottom:6px; }
.fo-head .eyebrow{ display:block; margin-bottom:4px; }
.fo-head h1{ font-size:30px; color:var(--navy); letter-spacing:-.022em; }
.fo-head .sub{ color:var(--ink-40); font-size:15px; margin-top:6px; max-width:64ch; }
.fo-back{ display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--cyan-text); }
.fo-back:hover{ color:var(--navy); }

/* ---------------------------------------------------------------- rooms
   a small strip on the full forum page pointing at the one other room —
   general <-> "each class has its own, from that class's Community tab". */
.fo-rooms{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 26px; }

/* ---------------------------------------------------------------- list */
.fo-list{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.fo-t{
  display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-s);
  background:#fff; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
a.fo-t:hover{ border-color:#C9D8EA; box-shadow:var(--shadow-1); text-decoration:none; }
.fo-t-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.fo-t-title{ font-size:15.5px; font-weight:700; color:var(--navy); line-height:1.35; }
.fo-t-chips{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.fo-t-chips:empty{ display:none; }
.fo-t-snip{ margin-top:5px; font-size:13.5px; color:var(--ink-60); line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fo-t-meta{ margin-top:9px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-25); }
.fo-t-who{ color:var(--ink-40); }

/* ---------------------------------------------------------------- empty
   Deliberately NOT a new class. `.empty` is site.css's own empty-state
   convention — 219 uses across this codebase (blm-signals.js's own count),
   always bold title + plain sentence, never an image. A prototype elsewhere
   in the estate (classhub-site) puts the mascot inside every empty state;
   checked against what actually shipped here before copying it, and this
   site's real empty states never do that — so this file adds no variant of
   its own and just uses `.empty` directly, one spacing rule for where it
   sits after a list. */
#forum-root .empty, [data-fs-forum] .empty{ margin-top:18px; }

/* -------------------------------------------------------------- compose */
.fo-compose{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2); max-width:62ch; }
.fo-compose textarea{ min-height:96px; }
.fo-compose .dm-two{ margin-bottom:4px; }

/* ---------------------------------------------------------------- thread
   the opening post reads like a small article; a reply reads like qa-a's
   lighter block, same family as Q&A's answer bubbles on purpose. */
.fo-op{ padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.fo-op h1{ font-size:24px; color:var(--navy); letter-spacing:-.02em; line-height:1.3; }
.fo-body{ white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.fo-op .fo-body{ margin-top:12px; font-size:15px; color:var(--ink-60); }
.fo-op .fo-t-meta{ margin-top:14px; }

.fo-replies{ display:flex; flex-direction:column; margin-top:8px; }
.fo-reply{ padding:16px 0; border-top:1px solid var(--line-2); }
.fo-reply .fo-body{ font-size:14.5px; color:var(--ink-60); }
.fo-reply .fo-t-meta{ margin-top:8px; }
.fo-reply-count{ margin-top:26px; font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink-40);
  text-transform:uppercase; }

.fo-reply-form{ margin-top:20px; padding-top:20px; border-top:1px solid var(--line-2); max-width:62ch; }

/* ------------------------------------------------------------- report
   deliberately quiet — not a second call to action competing with Reply. */
.fo-report{
  font-size:11.5px; color:var(--ink-25); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; padding:0;
}
.fo-report:hover{ color:var(--orange-text); }
.fo-report[disabled]{ text-decoration:none; cursor:default; color:var(--ink-25); }

/* --------------------------------------------------------- compact embed
   the per-class preview on class-community.html: same list, tighter, and
   every thread links OUT to the full forum page rather than opening here —
   one engine, two presentations, never a second data model. */
.fo-compact .fo-list{ margin-top:14px; gap:8px; }
.fo-compact .fo-t{ padding:13px 15px; }
.fo-compact .fo-t-snip{ display:none; }
.fo-compact .fo-compose{ margin-top:18px; padding-top:16px; }
.fo-more{ display:inline-block; margin-top:16px; font-size:13.5px; font-weight:700; color:var(--cyan-text); }
.fo-more:hover{ color:var(--navy); }

@media (max-width:640px){
  .fo-t-top{ flex-direction:column; align-items:flex-start; gap:4px; }
  .fo-rooms{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------- development fixtures
   Ratified 2026-08-13 — "yes fixtures on live site that's why we made a
   build 3." Not re-opened here. What is non-negotiable the other way: a
   visitor must never mistake one for a neighbour's real post. So every
   fixture, in every one of the three places it can appear (a list card, its
   own thread page, one of its replies), carries BOTH the chip below AND a
   plain-English line — never chrome alone, never text alone. The chip is
   the site's own convention (.chip, site.css) for a short status word, kept
   deliberately muted rather than given a colour — this is the one chip on
   the page that is not describing something a visitor did. */
.chip.fx-chip{ background:var(--pale); color:var(--ink-40); border-color:var(--line); }
.fo-fx-note{ margin:10px 0 4px; font-size:12.5px; color:var(--ink-25); }
.fo-t-fixture{ border-style:dashed; }