/* ============================================================
   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}

/* The title rows (.topic-title-row / .pr-row / .rt-row) are flex and
   space these with their own gap. The two serif headings are not, so
   they get an explicit inline gap instead. */
.op-title .state-badge,.va-title .state-badge,
.op-title .pin-icon,.va-title .pin-icon,
.op-title .lock-icon,.va-title .lock-icon{margin-left:10px}

/* In the reply rows the marker sits inside the title instead, so the row's
   10px flex gap no longer separates it — it needs its own, and a much smaller
   one: this is an icon bound to the words after it, not a peer item in the
   row. */
.pr-title .lock-icon,.rt-title .lock-icon,
.pr-title .state-badge,.rt-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)}
/* In the vote column the pin replaces the vote controls rather than sitting on
   a line of text, so the em sizing above has no text to track — hold it at the
   size it has always been. */
.vote-col .vote-pin{color:var(--nd-gold);line-height:0;padding-top:3px}
.vote-col .vote-pin .pin-icon{width:14px;height:14px;vertical-align:baseline}
.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}
.reply-preview .pr-row.is-nested,.reply-preview .pr-row.is-nested-2{padding-left:14px;border-left:1.5px solid var(--line);position:relative}
.reply-preview .pr-row.is-nested{margin-left:18px}
.reply-preview .pr-row.is-nested-2{margin-left:36px;border-left-color:var(--line-soft)}
.reply-preview .pr-row.is-nested::before,.reply-preview .pr-row.is-nested-2::before{content:"";position:absolute;left:-1px;top:12px;width:8px;height:1.5px;background:var(--line)}
.reply-preview .pr-row.is-nested-2::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}
.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,
body[data-density="flat"] .reply-preview .pr-row.is-nested-2{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 26px}
.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-body p{margin:0 0 18px;text-wrap:pretty}
.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:24px;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)}