/* ============================================================
   Forum Design System — COMPONENTS
   Reusable forum-content building blocks shared across surfaces:
   topic list, post card, threaded reply tree, right rail, votes,
   badges, avatars, buttons, ad frames. Ported verbatim from the
   approved mockups. Depends on tokens.css.
   ============================================================ */

/* ── AD FRAMES (in-feed + rail) ────────────────────────── */
.in-feed-ad{
  padding:14px 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--bg-sunk);
}
.in-feed-ad .ad-label,.top-ad-band .ad-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ad-label-ink);font-weight:500;
}
.in-feed-ad .ad-frame,.rail-ad .ad-frame{
  border:1px solid var(--ad-frame);background:var(--bg);
  display:grid;place-items:center;
  background-image:repeating-linear-gradient(45deg, var(--bg-muted) 0 8px, color-mix(in srgb, var(--bg-muted) 60%, var(--bg)) 8px 16px);
}
.in-feed-ad .ad-frame{width:728px;max-width:100%;height:90px}
.rail-ad{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
.rail-ad .ad-frame{width:300px;height:250px}
.in-feed-ad .ad-frame .lbl,.rail-ad .ad-frame .lbl,.top-ad-band .ad-frame .lbl{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,255,255,.7);padding:4px 10px;border-radius:3px;
}

/* ── BADGES ────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;
  line-height:1;white-space:nowrap;
  vertical-align:0.12em;position:relative;top:-1px;
}
.badge--nt{background:var(--bg-muted);color:var(--ink-3)}
.badge--link{background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.badge--link svg{stroke-width:2.2}

/* ── POST STATE BADGES ─────────────────────────────────── */
/* DELETED / HIDDEN / LOCKED, rendered by components/state_badges.twig.
   Identical on every surface: index rows and their reply previews, the
   threaded reply tree, single post, and View All. Sized to sit on a
   title line without pushing it taller. */
.state-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:2px 5px;border-radius:3px;
  line-height:1;white-space:nowrap;flex-shrink:0;
  vertical-align:0.14em;position:relative;top:-1px;
}
.state-badge--deleted{background:var(--danger);color:var(--ink-inverse)}
.state-badge--hidden{background:var(--danger-tint);color:var(--danger)}

/* The states every reader sees are icons, not badges — pinned
   (components/pin_icon.twig) and locked (components/state_badges.twig).
   Only the moderator-only states stay as text pills above. */
/* Same treatment as .lock-icon below, and for the same reason: a fixed 14px
   glyph with a fixed -0.18em offset sits low against a 24-32px serif heading,
   because em resolves against the heading's font-size. The pin's ink runs
   y=2 to y=21 of its 24 viewBox (79%), so a 0.9em box draws it at ~0.71em —
   cap height — and 0.11em drops its foot onto the baseline. */
.pin-icon{color:var(--nd-gold);flex-shrink:0;width:0.9em;height:0.9em;vertical-align:-0.11em}
/* Sized AND offset in em, so one rule holds everywhere this appears — from a
   13px reply row to the 32px desktop heading.

   Both numbers fall out of the glyph: its ink runs y=1.3 to y=21.5 of the 24
   viewBox, i.e. 84% of the box. A 0.85em box therefore draws a mark ~0.71em
   tall, which is cap height for this serif. The ink's foot sits 0.104 of the
   box above its bottom edge, so dropping the box 0.09em lands that foot on the
   baseline instead of floating above it.

   It previously borrowed .pin-icon's fixed -0.18em. That is tuned for a 14px
   glyph on small text; against a 24px heading em resolves to 4.3px and pushed
   the lock 5.7px below the text's optical centre, 10px at 32px. */
.lock-icon{color:var(--ink-3);flex-shrink:0;width:0.85em;height:0.85em;vertical-align:-0.09em}

/* Every surface renders the markers inside the title and ahead of the
   subject, so none of them is a flex item of the row and none picks up the
   row's 10px gap. They need their own spacing, and a much smaller one: these
   are icons bound to the words that follow, not peers of the title.

   .3em rather than a fixed px so one number holds from a 13px reply row to a
   32px desktop heading — the gap tracks the type it is attached to. */
.topic-title .lock-icon,.pr-title .lock-icon,.rt-title .lock-icon,
.op-title .lock-icon,.va-title .lock-icon,
.topic-title .pin-icon,.pr-title .pin-icon,.rt-title .pin-icon,
.op-title .pin-icon,.va-title .pin-icon,
.topic-title .state-badge,.pr-title .state-badge,.rt-title .state-badge,
.op-title .state-badge,.va-title .state-badge{margin-right:.3em}


/* ── VOTE CONTROLS ─────────────────────────────────────── */
/* SVGs inside vote anchors must not capture pointer events — upvote.js
   reads e.target.id from the <a> element to get forumid/msgid. If the
   SVG intercepts the click, e.target.id is empty and the vote silently
   fails. pointer-events:none passes clicks through to the anchor. */
.vote-col a svg, .vote-pill a svg, .va-vote-mini a svg { pointer-events: none; }
.vote-col{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:3px;user-select:none}
.vote-col button,.vote-col a.upvote,.vote-col a.downvote{
  width:28px;height:22px;display:grid;place-items:center;border-radius:4px;cursor:pointer;
  color:var(--ink-4);transition:color .12s ease, background .12s ease;
}
.vote-col button:hover,.vote-col a.upvote:hover{background:var(--accent-tint);color:var(--vote-pos)}
.vote-col a.downvote:hover{background:var(--accent-tint);color:var(--vote-neg)}
.vote-col button.is-pos{color:var(--vote-pos)}
.vote-col button.is-neg{color:var(--vote-neg)}
.vote-col .score{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:1px 0;line-height:1}
.vote-col .score.pos{color:var(--vote-pos)}
.vote-col .score.neg{color:var(--vote-neg)}
.vote-col .score.zero{color:var(--ink-3)}

.vote-pill{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);background:#fff;border-radius:9999px;padding:3px 4px}
.vote-pill button{width:30px;height:28px;display:grid;place-items:center;color:var(--ink-3);border-radius:9999px;transition:color .12s ease, background .12s ease}
.vote-pill button:hover{color:var(--nd-navy);background:var(--accent-tint)}
.vote-pill .v-score{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:0 8px;letter-spacing:.01em}

/* Logged-out guests: arrows stay visible but give no interactive affordance.
   Keep the upvote/downvote classes + u-/d-/v- ids — upvote.js contract;
   the server already no-ops guest votes (forum/pages/upvote.php). */
.is-guest a.upvote,.is-guest a.downvote{cursor:default}
.is-guest a.upvote:hover,.is-guest a.downvote:hover{background:transparent;text-decoration:none}
.vote-col.is-guest a.upvote:hover,.vote-col.is-guest a.downvote:hover{color:var(--ink-4)}
.vote-pill .v-score.pos{color:var(--vote-pos)}
.vote-pill .v-score.neg{color:var(--vote-neg)}
.vote-pill .v-score.zero{color:var(--ink-3)}

/* ── BUTTONS / CTAs ────────────────────────────────────── */
.new-topic-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:var(--nd-green);
  padding:9px 16px;border-radius:6px;
  box-shadow:0 1px 0 oklch(1 0 0 / .25) inset, 0 1px 2px rgba(12,35,64,0.1);
  cursor:pointer;text-decoration:none;transition:background .12s ease;
}
.new-topic-btn:hover{background:var(--nd-green-hover);text-decoration:none;color:#fff}
.new-topic-btn svg{stroke-width:2.4}
.reply-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;background:var(--nd-navy);
  padding:9px 16px;border-radius:6px;
  box-shadow:0 1px 0 oklch(1 0 0 / .15) inset, 0 1px 2px rgba(12,35,64,0.12);
  transition:background .12s ease;
}
.reply-btn:hover{background:var(--nd-navy-2);text-decoration:none;color:#fff}
.tool-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:9999px;border:1px solid var(--line);background:#fff;
  font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.tool-btn:hover{background:var(--bg-muted);color:var(--nd-navy);text-decoration:none;border-color:var(--line-strong)}
.tool-btn svg{color:var(--ink-3);stroke-width:2}
.tool-btn:hover svg{color:var(--nd-navy)}

/* ── PAGINATION ────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 8px;font-family:var(--font-sans);font-size:13px;color:var(--ink-3)}
.pagination-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pagination-pages a,.pagination-pages span{
  min-width:32px;height:32px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;border-radius:4px;
  font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.pagination-pages a:hover{background:var(--bg-muted);text-decoration:none;color:var(--nd-navy)}
.pagination-pages a[aria-current="page"],.pagination-pages span.is-current{background:var(--nd-navy);color:#fff;border-color:var(--nd-navy)}
.pagination-pages .ell{border:0;background:transparent;color:var(--ink-4)}
.pagination .results{font-variant-numeric:tabular-nums}

/* ── TOPIC LIST (Forum Home) ───────────────────────────── */
.topic-list{display:flex;flex-direction:column;background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
.topic-list .topic + .topic{border-top:1px solid var(--line-soft)}
.topic-list .topic + .in-feed-ad{border-top:1px solid var(--line-soft)}
.in-feed-ad + .topic{border-top:1px solid var(--line-soft)}
.topic{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:18px 20px 18px 14px;position:relative;transition:background .1s ease}
.topic:hover{background:oklch(0.99 0.005 82)}
.topic.is-hot{background:linear-gradient(180deg, color-mix(in srgb, var(--nd-gold) 5%, transparent), transparent 60%)}
.topic-body{min-width:0}
.topic-title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.topic-title{font-family:var(--font-serif);font-size:1.2rem;font-weight:600;color:var(--nd-navy);letter-spacing:-.005em;line-height:1.28;margin:0;text-wrap:pretty}
.topic-title a{color:inherit}
.topic-title a:visited{color:var(--link-visited)}
.topic-title a:hover{color:var(--accent-hover);text-decoration:none}

.topic-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3)}
.topic-meta .author{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:600}
.topic-meta time{font-variant-numeric:tabular-nums}
.topic-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.topic-meta .replies-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg-muted);color:var(--ink-2);font-family:var(--font-sans);font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:9999px;letter-spacing:.01em}
.topic-meta .replies-chip svg{color:var(--ink-3);stroke-width:2}
.topic-meta .replies-chip.is-hot{background:color-mix(in srgb, var(--nd-gold) 22%, transparent);color:#5e4a0a}
.topic-meta .replies-chip.is-hot svg{color:#8a6e10}
.topic-meta .view-all{margin-left:auto;font-family:var(--font-sans);font-size:11.5px;font-weight:600;color:var(--nd-navy);letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.topic-meta .view-all:hover{color:var(--accent-hover);text-decoration:none}
.topic-meta .view-all svg{transition:transform .15s ease}
.topic-meta .view-all:hover svg{transform:translateX(2px)}

/* Avatars (shared; size varies by surface) */
.avatar{
  border-radius:50%;
  background:linear-gradient(135deg, var(--nd-navy), var(--ink-2));color:var(--nd-gold);
  display:grid;place-items:center;font-family:var(--font-serif);font-weight:700;flex-shrink:0;
}
.topic-meta .avatar{width:18px;height:18px;font-size:9.5px}

/* Inline reply preview (topic list partial tree) */
.reply-preview{margin-top:12px;padding:3px 0 2px 14px;border-left:1.5px solid var(--thread-rule);display:flex;flex-direction:column}
.reply-preview .pr-row{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-family:var(--font-sans);font-size:13px;line-height:1.35;min-width:0}
/* Indent steps for preview rows and for the continue links that sit under them,
   so a link shares its row's indent. How many steps are reachable depends on the
   index_preview_levels setting; four is the cap, because indent that grows with
   depth eventually leaves the row no width at all — the invariant in
   docs/forum-deep-thread-navigation.md §2. At the default level of 3 only step 1
   is ever used, which is what the old .is-nested rule did. */
.reply-preview .is-nested-1{margin-left:18px}
.reply-preview .is-nested-2{margin-left:36px}
.reply-preview .is-nested-3{margin-left:54px}
.reply-preview .is-nested-4{margin-left:72px}
.reply-preview .pr-row.is-nested-1,.reply-preview .pr-row.is-nested-2,
.reply-preview .pr-row.is-nested-3,.reply-preview .pr-row.is-nested-4{padding-left:14px;border-left:1.5px solid var(--line);position:relative}
.reply-preview .pr-row.is-nested-3,.reply-preview .pr-row.is-nested-4{border-left-color:var(--line-soft)}
.reply-preview .pr-row.is-nested-1::before,.reply-preview .pr-row.is-nested-2::before,
.reply-preview .pr-row.is-nested-3::before,.reply-preview .pr-row.is-nested-4::before{content:"";position:absolute;left:-1px;top:12px;width:8px;height:1.5px;background:var(--line)}
.reply-preview .pr-row.is-nested-3::before,.reply-preview .pr-row.is-nested-4::before{background:var(--line-soft)}
.reply-preview .pr-title{color:var(--ink-2);font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview .pr-title a{color:inherit}
.reply-preview .pr-title a:visited{color:var(--link-visited)}
.reply-preview .pr-title a:hover{color:var(--nd-navy);text-decoration:none}
.reply-preview .pr-by{color:var(--ink-3);font-size:11.5px;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.reply-preview .pr-by .author{font-weight:600;color:var(--ink-2)}
.reply-preview .pr-badge,.rt-badge{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--bg-muted);color:var(--ink-3);padding:2px 5px;border-radius:3px;line-height:1;flex-shrink:0}
/* margin is set as longhands, never the shorthand: the indent comes from an
   .is-nested-N class at equal specificity, and a `margin:` shorthand here would
   silently zero the margin-left it sets.

   padding-left matches .pr-row's 14px rather than the 12px of the other sides,
   so the link's text lands on exactly the same x as a reply row at its indent
   step — the link is meant to read as occupying the slot of the replies it
   stands in for. */
.reply-preview .pr-continue{margin-top:2px;margin-bottom:4px;padding:5px 12px 5px 14px;border-left:1.5px dashed var(--line);display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--nd-navy);letter-spacing:.02em}
.reply-preview .pr-continue.is-topic-more{margin-top:6px}
.reply-preview .pr-continue:hover{color:var(--accent-hover);text-decoration:none}
.reply-preview .pr-continue .count{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.04em}
.reply-preview .pr-continue svg{transition:transform .15s ease}
.reply-preview .pr-continue:hover svg{transform:translateX(2px)}
.reply-preview .pr-more{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--nd-navy);letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px;margin-top:6px}
.reply-preview .pr-more:hover{text-decoration:none;color:var(--accent-hover)}
.reply-preview .pr-more svg{transition:transform .15s ease}
.reply-preview .pr-more:hover svg{transform:translateX(2px)}
/* Density modes: threaded (default) / flat / legacy */
body[data-density="flat"] .reply-preview .pr-row.is-nested-1,
body[data-density="flat"] .reply-preview .pr-row.is-nested-2,
body[data-density="flat"] .reply-preview .pr-row.is-nested-3,
body[data-density="flat"] .reply-preview .pr-row.is-nested-4{display:none}
body[data-density="legacy"] .reply-preview{display:none}
body[data-density="legacy"] .topic{padding-top:14px;padding-bottom:14px}

/* ── OP CARD (Single Post) ─────────────────────────────── */
.op-card{background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:28px 32px 28px}
.op-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.5rem, 2.4vw, 2rem);line-height:1.15;letter-spacing:-.012em;color:var(--nd-navy);margin:0 0 18px;text-wrap:pretty}
.op-author-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.op-author{display:flex;align-items:center;gap:12px}
.op-author .avatar{width:44px;height:44px;font-size:18px}
.op-author .stack{display:flex;flex-direction:column;line-height:1.25}
.op-author .who{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--nd-navy)}
.op-author .who a{color:inherit}
.op-author .badges{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.op-badge{font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px}
.op-badge.is-veteran{background:color-mix(in srgb, var(--nd-gold) 18%, transparent);color:#5e4a0a;font-weight:600;padding:2px 7px;border-radius:9999px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.op-badge.is-veteran svg{color:var(--nd-gold)}
.op-badge .dot,.op-author .badges .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);margin:0 2px}
.op-posted{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-family:var(--font-sans);font-size:12px;color:var(--ink-3)}
.op-posted .when{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;display:flex;align-items:center;gap:5px}
.op-posted .label{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--ink-4);text-transform:uppercase;font-weight:500}
.op-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0 18px}
.op-tools .reply-btn,.op-tools .vote-pill ~ .reply-btn{margin-left:auto}

/* Post body (serif reading surface) */
/* Post bodies carry user content, and a pasted URL is one unbreakable token —
   long enough to push the whole page sideways on a phone (measured: 467px wide
   against a 390px viewport on single post, 504px on View All). `anywhere` breaks
   only when a token cannot fit on its own line, so ordinary prose is untouched;
   it is preferred over `break-word` because it also shrinks the element's
   min-content contribution, which keeps working if these ever become flex or
   grid children. Titles elsewhere are already protected by overflow:hidden. */
.op-body{max-width:760px;font-family:var(--font-serif);font-size:18px;line-height:1.7;color:var(--text);margin-top:6px;overflow-wrap:anywhere}
/* .op-tools is conditional — it renders only when the reader has something to
   click. A guest reading a reply gets no vote pill and no actions, so the body
   landed 6px under the author row's rule while sitting ~30px off the bottom of
   the card. That is the common case, not an edge one: most posts are replies and
   most readers are logged out. Where the tools row is absent the body takes the
   gap itself, close to the 18px + 6px it inherits when the tools are there. */
.op-author-row + .op-body{margin-top:22px}
.op-body p{margin:0 0 18px;text-wrap:pretty}
/* Post bodies are bare text with <br> unless the author wrote HTML, so the
   trailing 18px below only appeared for some posts — the gap under the body
   should not depend on how the post was written. */
.op-body > :last-child{margin-bottom:0}
.op-body strong{font-weight:600;color:var(--nd-navy)}
.op-body em{font-style:italic}
.op-body blockquote{margin:18px 0;padding:6px 0 6px 18px;border-left:3px solid var(--nd-gold);font-family:var(--font-serif);font-style:italic;color:var(--ink-2);font-size:17px;line-height:1.55}
.op-body img{margin:18px 0;border:1px solid var(--line);border-radius:6px}
.op-body a{color:var(--nd-green-ink);font-weight:600}
/* The link row is metadata trailing the body, not another body paragraph, and
   the body it follows usually ends in a bare <br>-separated line with no
   bottom margin — so it sat flush against the last line of the post. Each
   container gives it its own paragraph rhythm rather than a shared constant:
   .op-body sets 18px between paragraphs, .va-body 10px. The "Link:" label uses
   <strong>, so it picks up the bold navy the body already gives emphasis
   rather than inventing a second treatment. */
.op-body .post-link{margin-top:18px}
.va-body .post-link{margin-top:10px}

.op-body .timestamp-ref{font-family:var(--font-mono);font-size:14.5px;color:var(--nd-navy);font-weight:600;background:color-mix(in srgb, var(--nd-gold) 14%, transparent);padding:1px 5px;border-radius:3px;letter-spacing:.01em}
.embedded-media{margin:22px 0;padding:16px;border:1px solid var(--line);background:var(--bg);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;background-image:repeating-linear-gradient(45deg, var(--bg-muted) 0 8px, color-mix(in srgb, var(--bg-muted) 60%, var(--bg)) 8px 16px);position:relative}
.embedded-media .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600;background:rgba(255,255,255,.85);padding:5px 12px;border-radius:3px}
.embedded-media .caption{font-family:var(--font-sans);font-size:12px;color:var(--ink-3);text-align:center;max-width:36ch;background:rgba(255,255,255,.85);padding:4px 10px;border-radius:3px}
.embedded-broken{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:4px;background:var(--bg-muted);color:var(--ink-3);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;vertical-align:middle}
.embedded-broken svg{color:var(--ink-4);stroke-width:2}
.op-edit-notes{margin-top:6px;max-width:760px}
.op-edit-notes .edit-note{
  display:block;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink-4);
}
.op-edit-notes .edit-note + .edit-note{margin-top:3px}
.op-signature{margin-top:26px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--font-sans);font-size:12.5px;font-style:italic;color:var(--ink-4);line-height:1.5;max-width:760px}

/* ── REPLIES SECTION (Single Post threaded tree) ───────── */
.replies-section{margin-top:32px}
.replies-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line-strong);margin-bottom:6px}
.replies-head h2{font-family:var(--font-serif);font-weight:600;font-size:22px;letter-spacing:-.008em;color:var(--nd-navy);margin:0}
.replies-head h2 .count{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);font-weight:500;letter-spacing:.02em;margin-left:6px}
.replies-controls{margin-left:auto;display:flex;align-items:center;gap:14px}
.collapse-all{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.02em;padding:6px 10px;border-radius:4px;border:1px solid var(--line);background:#fff}
.collapse-all:hover{background:var(--bg-muted);color:var(--nd-navy);border-color:var(--line-strong);text-decoration:none}
.collapse-all svg{stroke-width:2;color:var(--ink-3)}

.rt-list{list-style:none;padding:0;margin:0}
.rt-list .rt-list{margin:0 0 0 18px;padding-left:0;border-left:1.5px solid var(--thread-rule)}
.rt-list .rt-list .rt-list{border-left-color:var(--line-strong)}
.rt-list .rt-list .rt-list .rt-list{border-left-color:var(--line)}
.rt-list .rt-list .rt-list .rt-list .rt-list{border-left-color:var(--line-soft)}
.rt-list .rt-list .rt-list .rt-list .rt-list .rt-list{border-left-color:var(--line-soft)}
.rt-node{margin:0;position:relative}
.rt-row{display:flex;align-items:baseline;gap:10px;padding:7px 8px 7px 12px;border-radius:4px;position:relative;min-width:0}
.rt-row:hover{background:oklch(0.99 0.005 82)}
.rt-list .rt-list > .rt-node > .rt-row::before{content:"";position:absolute;left:-1px;top:16px;width:9px;height:1.5px;background:currentColor;color:var(--thread-rule);opacity:.85}
.rt-list .rt-list .rt-list > .rt-node > .rt-row::before{color:var(--line-strong)}
.rt-list .rt-list .rt-list .rt-list > .rt-node > .rt-row::before{color:var(--line)}
.rt-list .rt-list .rt-list .rt-list .rt-list > .rt-node > .rt-row::before{color:var(--line-soft)}
.rt-caret{width:14px;height:14px;display:grid;place-items:center;flex-shrink:0;color:var(--ink-3);cursor:pointer;border-radius:3px;transition:transform .15s ease, background .12s ease, color .12s ease;margin-right:-2px}
.rt-caret:hover{background:var(--accent-tint);color:var(--nd-navy)}
.rt-node.is-leaf > .rt-row > .rt-caret{visibility:hidden;cursor:default}
.rt-node.is-collapsed > .rt-row > .rt-caret{transform:rotate(-90deg)}
.rt-node.is-collapsed > .rt-children{display:none}
.rt-title{color:var(--nd-navy);font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:-.005em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
a.rt-title:visited{color:var(--link-visited)}
.rt-title:hover{color:var(--accent-hover);text-decoration:none}
.rt-meta{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11.5px;color:var(--ink-3);white-space:nowrap;flex-shrink:0}
.rt-meta .rt-author{color:var(--ink-2);font-weight:600}
.rt-meta time{font-variant-numeric:tabular-nums}
.rt-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.rt-badge.is-link{background:var(--accent-tint);color:var(--accent)}
.rt-badge.is-op{background:color-mix(in srgb, var(--nd-gold) 22%, transparent);color:#5e4a0a}
/* The row you are currently viewing. Without this the focused row is
   indistinguishable from its siblings, which matters once the tree is windowed
   and you can arrive mid-thread via "continue this thread". */
.rt-row.is-here{background:var(--gold-tint);border-radius:4px}

/* Ancestor path strip — the posts above the one being viewed. Flat, not
   stair-stepped: matching the tree row's weight would push content down, which
   defeats the purpose. See docs/forum-deep-thread-navigation.md. */
.rt-ancestors{
  display:flex;flex-direction:column;gap:1px;
  margin:0 0 14px;padding:10px 12px 11px;
  background:var(--bg-sunk);border:1px solid var(--line-soft);
  border-radius:var(--r-card);
}
.rt-anc-root{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:5px;
}
.rt-anc-root:hover{color:var(--nd-navy);text-decoration:none}
.rt-anc{
  display:flex;align-items:baseline;gap:10px;min-width:0;
  padding:3px 0;font-family:var(--font-sans);font-size:13px;line-height:1.35;
}
.rt-anc:hover{text-decoration:none}
.rt-anc-title{
  color:var(--ink-2);font-weight:500;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rt-anc:hover .rt-anc-title{color:var(--nd-navy)}
.rt-anc-by{color:var(--ink-3);font-size:11.5px;white-space:nowrap;flex-shrink:0;font-weight:600}

.rt-continue{margin:6px 0 6px 18px;padding:8px 14px;border-left:1.5px dashed var(--line);display:flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--nd-navy);letter-spacing:.02em}
.rt-continue:hover{color:var(--accent-hover);text-decoration:none}
.rt-continue svg{transition:transform .15s ease}
.rt-continue:hover svg{transform:translateX(2px)}
.rt-continue .count{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.04em}
.replies-foot{margin-top:18px;padding:16px 0 6px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center}
.replies-foot a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--nd-navy);padding:10px 18px;border-radius:6px;border:1px solid var(--line);background:#fff}
.replies-foot a:hover{background:var(--bg-muted);color:var(--accent-hover);text-decoration:none;border-color:var(--line-strong)}
.replies-foot svg{transition:transform .15s ease}
.replies-foot a:hover svg{transform:translateX(2px)}

/* ── RIGHT RAIL (Single Post) ──────────────────────────── */
.rail-card{background:var(--card-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px 18px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.rail-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.topic-info dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:7px 14px}
.topic-info dt{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);align-self:baseline}
.topic-info dd{margin:0;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-2);font-weight:500}
.topic-info dd.num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--nd-navy)}
.related-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.related-list li{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.related-list li:last-child{border-bottom:0;padding-bottom:0}
.related-list a{font-family:var(--font-serif);font-size:14.5px;font-weight:600;color:var(--nd-navy);line-height:1.3;display:block}
.related-list a:hover{color:var(--accent-hover);text-decoration:none}
.related-list .r-meta{display:block;margin-top:4px;font-family:var(--font-sans);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.related-list .r-meta .author{color:var(--ink-2);font-weight:600}

/* ── VIEW ALL reply cards (flat tree) ──────────────────── */
.va-tree{list-style:none;padding:0;margin:24px 0 0}
.va-tree .va-tree{list-style:none;padding:0;margin:0 0 0 22px;border-left:1.5px solid var(--thread-rule)}
.va-tree .va-tree .va-tree{border-left-color:var(--line-strong)}
.va-tree .va-tree .va-tree .va-tree{border-left-color:var(--line)}
.va-tree .va-tree .va-tree .va-tree .va-tree{border-left-color:var(--line-soft)}
.va-tree .va-tree .va-tree .va-tree .va-tree .va-tree{border-left-color:var(--line-soft)}
.va-node{position:relative;padding:14px 0 0}
.va-tree > .va-node:first-child{padding-top:24px}
.va-tree .va-tree > .va-node > .va-card::before{content:"";position:absolute;left:-1px;top:30px;width:14px;height:1.5px;background:var(--thread-rule)}
.va-tree .va-tree .va-tree > .va-node > .va-card::before{background:var(--line-strong)}
.va-tree .va-tree .va-tree .va-tree > .va-node > .va-card::before{background:var(--line)}
.va-tree .va-tree .va-tree .va-tree .va-tree > .va-node > .va-card::before{background:var(--line-soft)}
.va-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 22px 16px;box-shadow:var(--shadow-sm)}
.va-tree .va-tree .va-node > .va-card{margin-left:18px}
.va-card.is-op-reply{border-color:color-mix(in srgb, var(--nd-gold) 38%, var(--line));background:linear-gradient(180deg, color-mix(in srgb, var(--nd-gold) 4%, #fff), #fff 30%)}
body.no-op-tint .va-card.is-op-reply{border-color:var(--line);background:#fff}
.va-eyebrow{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);display:inline-flex;align-items:center;gap:8px;margin:0 0 8px}
.va-eyebrow .lvl-num{color:var(--ink-3);font-variant-numeric:tabular-nums}
.va-eyebrow .pip{width:4px;height:4px;border-radius:50%;background:var(--line)}
.va-title{font-family:var(--font-serif);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.005em;color:var(--nd-navy);margin:0 0 10px;text-wrap:pretty}
.va-title a{color:inherit}
.va-title a:hover{color:var(--accent-hover);text-decoration:none}
.va-byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.va-byline .avatar{width:28px;height:28px;font-size:12px}
.va-byline .who{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--nd-navy)}
.va-byline .who a{color:inherit}
.va-byline .posts{font-family:var(--font-sans);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.va-byline .op-flag{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb, var(--nd-gold) 25%, transparent);color:#5e4a0a;padding:2px 6px;border-radius:3px;line-height:1}
.va-byline .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.va-byline time{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.va-body{font-family:var(--font-serif);font-size:15.5px;line-height:1.62;color:var(--text);overflow-wrap:anywhere}
.va-body p{margin:0 0 10px;text-wrap:pretty}
.va-body p:last-child{margin-bottom:0}
.va-body strong{font-weight:600;color:var(--nd-navy)}
.va-body em{font-style:italic}
.va-body a{color:var(--nd-green-ink);font-weight:600}
.va-body img{margin:10px 0;border:1px solid var(--line);border-radius:6px}
.va-body .timestamp-ref{font-family:var(--font-mono);font-size:13px;color:var(--nd-navy);font-weight:600;background:color-mix(in srgb, var(--nd-gold) 14%, transparent);padding:1px 4px;border-radius:3px;letter-spacing:.01em}
.va-body blockquote{margin:12px 0;padding:4px 0 4px 14px;border-left:3px solid var(--nd-gold);font-style:italic;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.va-card.is-nt .va-body{font-family:var(--font-sans);font-size:12.5px;font-style:italic;color:var(--ink-4)}
.va-card .embedded-media{min-height:200px;margin:14px 0 4px}
.va-sig{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-family:var(--font-sans);font-size:11.5px;font-style:italic;color:var(--ink-4);line-height:1.5}
.va-sig .edit-note{display:block;margin-top:3px;font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--ink-4)}
.va-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.va-vote-mini{display:inline-flex;align-items:center;gap:2px}
.va-vote-mini button{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--ink-4)}
.va-vote-mini button:hover{color:var(--nd-navy);background:var(--accent-tint)}
.va-vote-mini .v-score{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink-2);padding:0 6px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.va-vote-mini .v-score.pos{color:var(--vote-pos)}
.va-vote-mini .v-score.neg{color:var(--vote-neg)}
.va-mini-link{font-family:var(--font-sans);font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:4px}
.va-mini-link:hover{color:var(--nd-navy);background:var(--bg-muted);text-decoration:none}
.va-mini-link svg{stroke-width:2;color:var(--ink-3)}
.va-mini-link:hover svg{color:var(--nd-navy)}
.va-actions .perma{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--ink-4);letter-spacing:.04em}
.va-actions .perma:hover{color:var(--ink-2);text-decoration:none}
.va-continue{margin:16px 0 4px 18px;padding:12px 16px;border:1px dashed var(--line);background:var(--bg-sunk);border-radius:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--nd-navy);letter-spacing:.02em}
.va-continue:hover{color:var(--accent-hover);text-decoration:none;background:var(--bg-muted);border-color:var(--line-strong)}
.va-continue svg{transition:transform .15s ease}
.va-continue:hover svg{transform:translateX(2px)}
.va-continue .preview{flex:1;min-width:0;font-weight:500;color:var(--ink-3);font-family:var(--font-serif);font-size:13.5px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-continue .count{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);font-weight:500;letter-spacing:.04em}
.va-end{margin-top:36px;padding:18px 0;text-align:center;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;gap:14px}
.va-end::before,.va-end::after{content:"";width:48px;height:1px;background:var(--line)}