/* OffCycle Forum.
   Built entirely on the tokens in app.css (--panel/--line/--ink/--accent/--gold), so dark
   mode needs no rules of its own: switching data-theme on <html> repaints the forum along
   with the rest of the site. Nothing here hard-codes a colour except the vote arrows,
   which need a warm/cool pair that reads on both themes. */

/* ── Shell ─────────────────────────────────────────────────────────────────── */
.f-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start;margin:16px 0 40px}
@media(max-width:900px){.f-wrap{grid-template-columns:1fr}.f-side{order:-1}}

.f-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 4px}
.f-head h1{font-size:26px;margin:0 0 6px}
.f-head p{color:var(--ink2);margin:0;max-width:62ch;font-size:13.5px}

/* ── Sort tabs ─────────────────────────────────────────────────────────────── */
.f-tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;margin:14px 0}
.f-tabs button{flex:none;border:none;background:none;font:600 13px var(--sans);color:var(--mute);
  padding:7px 14px;border-radius:7px;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.f-tabs button:hover{color:var(--ink)}
.f-tabs button.on{background:var(--accent-soft);color:var(--accent)}
.f-tabs .f-spacer{flex:1}

/* ── Post card ─────────────────────────────────────────────────────────────── */
.f-card{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px 12px;margin-bottom:10px;transition:border-color var(--t-fast) var(--ease)}
.f-card:hover{border-color:var(--accent2)}
.f-main{min-width:0;flex:1}
.f-title{font-size:16px;margin:0 0 4px;line-height:1.35;font-weight:700}
.f-title a{color:var(--ink)}
.f-title a:hover{color:var(--accent2);text-decoration:none}
.f-excerpt{color:var(--ink2);font-size:13px;margin:7px 0 0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.f-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--mute)}
.f-meta time{color:var(--mute)}
.f-dot{opacity:.5}
.f-by{font-weight:700;color:var(--ink2)}
.f-room{font-weight:700;color:var(--accent2)}
.f-edited,.f-lock{font-style:italic;opacity:.75}
/* Pinned. Reads as a status, not a category, so it is set apart from the room and kind
   pills beside it: those describe what a post IS, this explains where it SITS. */
.f-pin{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)}
.f-pin svg{width:11px;height:11px}
.f-firms{margin-top:6px}
.f-firm{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent)}
.f-firm:hover{text-decoration:none;background:var(--accent);color:#fff}

/* The Premium marker. A quiet gold pill, deliberately not a crown or a colour that
   outranks the post title — the paid advantage is meant to be felt in the ordering,
   not announced. */
.f-prem{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:1.5px 6px;border-radius:20px;background:var(--gold-soft);color:var(--gold);vertical-align:1px}

/* "Team" reads as an attribution, not a rank: same shape as the Premium pill so it sits
   naturally beside it, but in the site's own accent rather than gold, because it is
   saying "we wrote this" and not "this person paid". */
.f-team{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:1.5px 6px;border-radius:20px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}

.f-kind{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--line2);color:var(--ink2)}
.f-kind.k-q{background:var(--accent-soft);color:var(--accent)}
.f-kind.k-rev{background:var(--gold-soft);color:var(--gold)}
.f-kind.k-fb{background:var(--green-soft);color:var(--green)}

.f-actions{display:flex;align-items:center;gap:14px;margin-top:9px}
.f-actions a,.f-actions button{font-size:12px;font-weight:600;color:var(--mute);background:none;border:none;
  padding:0;cursor:pointer;font-family:var(--sans)}
.f-actions a:hover,.f-actions button:hover{color:var(--accent2);text-decoration:none}
.f-actions button:disabled{opacity:.6;cursor:default}

/* ── Votes ─────────────────────────────────────────────────────────────────── */
.f-vote{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;width:34px;padding-top:2px}
.f-vote button{border:none;background:none;padding:2px;cursor:pointer;color:var(--mute);border-radius:5px;
  display:grid;place-items:center;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.f-vote button:hover{background:var(--line2)}
.f-vote svg{width:17px;height:17px;display:block}
.f-vote .f-up.on{color:#c2571f}
.f-vote .f-down.on{color:var(--accent2)}
.f-score{font-size:12.5px;font-weight:800;color:var(--ink2);min-width:20px;text-align:center;
  font-variant-numeric:tabular-nums}
.f-vote-gap{width:34px;flex:none}

/* ── Collapsed (below threshold) ───────────────────────────────────────────── */
/* Nothing is ever removed. A folded row keeps its metadata visible and one click always
   brings the content back, so an unpopular opinion is quietened rather than erased. */
.f-card.collapsed .f-excerpt,.f-card.collapsed .f-firms,
.f-cmt.collapsed .f-body,.f-cmt.collapsed>.f-cmt-row>.f-cmt-main>.f-actions{display:none}
.f-card.collapsed .f-title{font-size:14px;opacity:.55;font-weight:600}
.f-cmt.collapsed>.f-kids{display:none}
.f-reveal{margin-top:7px;font-size:11.5px;font-weight:700;color:var(--mute);background:none;
  border:1px dashed var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:var(--sans)}
.f-reveal:hover{border-color:var(--accent2);color:var(--accent2)}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.f-side>section{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:12px}
.f-side h2{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);
  margin:0 0 10px;padding:0;border:none}
.f-rooms{list-style:none;margin:0;padding:0}
.f-rooms li{margin-bottom:2px}
.f-rooms a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 9px;
  border-radius:8px;color:var(--ink);font-size:13px;font-weight:600}
.f-rooms a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.f-rooms a.on{background:var(--accent-soft);color:var(--accent)}
.f-rooms .n{font-size:11px;color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums}
.f-side p.hint{font-size:12px;color:var(--mute);margin:0 0 10px;line-height:1.5}

/* ── Composer ──────────────────────────────────────────────────────────────── */
.f-compose{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:14px}
.f-compose h2{font-size:15px;margin:0 0 12px;padding:0;border:none}
.f-compose label{display:block;font-size:11.5px;font-weight:700;color:var(--ink2);margin:0 0 4px}
.f-compose input,.f-compose select,.f-compose textarea{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:13.5px}
.f-compose textarea{min-height:110px;resize:vertical;line-height:1.55}
.f-compose input:focus,.f-compose select:focus,.f-compose textarea:focus{outline:none;border-color:var(--accent2)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-compose .row{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
.f-tip{font-size:11.5px;color:var(--mute);margin:6px 0 0}
.f-tip code{background:var(--line2);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:11px}

/* ── Thread page ───────────────────────────────────────────────────────────── */
.f-thread{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.f-thread h1{font-size:23px;margin:4px 0 7px;line-height:1.28;letter-spacing:-.01em}
/* The byline sits under the title now, so it reads as attribution rather than as a header
   the reader has to get past. Deliberately quieter than the title. */
.f-byline{font-size:12px}
.f-body{color:var(--ink);font-size:14px;line-height:1.65;margin-top:12px;overflow-wrap:anywhere}
.f-body p{margin:0 0 11px}
.f-body p:last-child{margin-bottom:0}
.f-body blockquote{margin:0 0 11px;padding:6px 0 6px 13px;border-left:3px solid var(--line);color:var(--ink2)}
.f-body .fm-pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  overflow-x:auto;margin:0 0 11px}
.f-body .fm-pre code{font-family:var(--mono);font-size:12.5px;background:none;padding:0}
.f-body .fm-code{background:var(--line2);padding:1.5px 5px;border-radius:4px;font-family:var(--mono);font-size:12.5px}
.f-crumb{font-size:12px;color:var(--mute);margin-bottom:2px}
.f-crumb a{font-weight:700}

.f-cmts{margin-top:6px}
.f-cmts>h2{font-size:14px;margin:0 0 12px}
.f-cmt{margin-bottom:14px}
.f-cmt-row{display:flex;gap:10px}
.f-cmt-main{min-width:0;flex:1}
.f-cmt .f-body{font-size:13.5px;margin-top:5px}
/* Nesting rail. Capped at depth 2 in SQL, so this can only ever indent three levels and
   a phone never ends up with a 12px-wide column of text. */
.f-kids{margin:12px 0 0 17px;padding-left:14px;border-left:2px solid var(--line2)}
@media(max-width:560px){.f-kids{margin-left:6px;padding-left:10px}}

.f-replybox{margin-top:9px}
.f-replybox textarea{width:100%;box-sizing:border-box;min-height:74px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13.5px;resize:vertical}
.f-replybox .row{display:flex;gap:8px;margin-top:7px}

/* ── States ────────────────────────────────────────────────────────────────── */
.f-empty{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:36px 24px;
  text-align:center;color:var(--mute)}
.f-empty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:5px}
.f-gone{color:var(--mute);font-style:italic;margin:5px 0 0;font-size:13px}
.f-err{background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.f-note{background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.f-skel{height:78px;background:var(--line2);border-radius:12px;margin-bottom:10px;
  animation:fpulse 1.3s var(--ease) infinite}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.f-skel{animation:none}}

/* Transient message for failures that only surface after the click — a vote the database
   refused, a rate limit. Deliberately not a modal: a rejected vote should not make the
   reader stop and dismiss something. */
.f-flash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:10px 16px;
  border-radius:9px;box-shadow:0 6px 22px rgba(0,0,0,.22);max-width:min(90vw,420px);
  opacity:0;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.f-flash.go{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.f-flash{transition:opacity var(--t-fast) linear;transform:translate(-50%,0)}}