/* =============================================================================
 * The Iron Realms board.
 *
 * Built to XenForo's SHAPE, in the game's own colours — because what makes a
 * forum feel like a forum is structure, not a skin: a node list whose every
 * row ends in "Latest: <thread> by <member>", a thread list with sticky rows
 * pinned above the rest and a last-post column on the right, and — the single
 * most recognisable thing on the internet — the author card running down the
 * left of every post, carrying who this person is and what they have earned.
 *
 * Vanilla CSS, no framework, no build step: this file ships as-is to a static
 * host and must keep working when the game's bundler is nowhere in sight.
 * ========================================================================== */

/* THE BOARD'S TOKENS ARE NOW DERIVATIONS, NOT A SECOND PALETTE.
 *
 * These twelve --f-* names were a complete parallel colour scheme: a second
 * near-black, a second gold, a second hairline, a second muted grey — all of
 * them within a few percent of the site's, none of them the same. That is how
 * a forum ends up looking like a page from a different site that happens to
 * share a logo, and it is also why a change to the site's palette used to stop
 * at the board's front door.
 *
 * The names stay, because the 460 rules below and the board's own runtime use
 * them. What changed is what they point AT: the ramp documented at the top of
 * site.css, which forum pages already load before this file. The board keeps
 * its own SHAPE — that was never the problem — and inherits its colour.
 *
 * --f-link is the one value that did not need moving: a cold blue link on a
 * dark board was right, and it is exactly what the site's frost secondary now
 * is everywhere else. */
:root {
  --f-bg: var(--ink-800);
  --f-panel: var(--surface-1);
  --f-panel-2: var(--surface-2);
  --f-row: var(--surface-1);
  --f-row-alt: var(--surface-2);
  --f-line: var(--hair);
  --f-gold: var(--gold-500);
  --f-gold-bright: var(--gold-300);
  --f-gold-dim: var(--gold-700);
  --f-text: var(--text);
  --f-muted: var(--text-dim);
  --f-link: var(--frost-400);
  --f-danger: var(--danger);
  --f-good: var(--ok);
  --f-display: var(--display);
  --f-ui: var(--body);
  --f-radius: var(--r-md);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 50% -10%, #1b2436 0%, rgba(13,17,23,0) 60%),
    linear-gradient(180deg, #0b0f15 0%, var(--f-bg) 100%);
  color: var(--f-text);
  font: 15px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--f-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 14px 64px; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
.f-head {
  border-bottom: 1px solid var(--f-line);
  background: linear-gradient(180deg, rgba(227,193,104,0.08), rgba(0,0,0,0.25));
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.f-head-in {
  max-width: 1100px; margin: 0 auto; padding: 12px 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.f-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 20px; font-weight: 700;
  color: var(--f-gold-bright); text-decoration: none; letter-spacing: 0.4px;
}
.f-brand:hover { text-decoration: none; filter: brightness(1.1); }
.f-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.f-nav a, .f-nav button {
  font: 600 13.5px/1 var(--f-ui); color: var(--f-text);
  padding: 9px 13px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; text-decoration: none;
}
.f-nav a:hover, .f-nav button:hover { background: rgba(255,255,255,0.06); border-color: var(--f-line); text-decoration: none; }
.f-nav a.on { background: rgba(227,193,104,0.16); border-color: var(--f-gold-dim); color: var(--f-gold-bright); }

/* Search sits in the masthead, as on every board.
   flex-wrap here is load-bearing, not cosmetic: without it the 860px rule
   below that widens the input to fill the row has nowhere to put the three
   buttons beside it but off the right edge of the screen — which is exactly
   how "Members" ended up invisible on an iPhone. Wrapping lets the input
   claim its own line and the buttons fall to the next one instead. */
.f-search { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.f-search input {
  width: 190px; max-width: 42vw; font: inherit; font-size: 13.5px;
  padding: 8px 11px; border-radius: 999px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--f-line); color: var(--f-text);
}
.f-search input:focus { outline: none; border-color: var(--f-gold-dim); }

/* ── Browse all sections (collapsed) ──────────────────────────────────────
   The eighteen crawlable /forum/c/<slug> links (index.html) used to render
   open, every time — a wall above the node list that repeats what the node
   list already shows with an icon and a blurb each. <details> keeps every
   anchor real and static (nothing here depends on JS or on the reader's
   viewport) and just stops it from being open by default. The disclosure
   marker matches .nav-drop's already-shipped treatment (site.css) rather
   than inventing a second one; unlike .nav-drop-menu this opens INLINE, not
   as a floating flyout, because eighteen links need real room to sit in. */
.section-jump { margin-bottom: 14px; }
.section-jump > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--f-ui); color: var(--f-muted);
  padding: 8px 2px; -webkit-appearance: none; appearance: none;
}
.section-jump > summary::-webkit-details-marker { display: none; }
.section-jump > summary::marker { content: ""; }
/* site.css's generic `details summary::before` (the FAQ accordion's own
   "▸ "/"▾ " caret) otherwise wins here too — this element is a bare <details>
   and inherits that rule same as every FAQ block does. Reset exactly the way
   .nav-drop already resets it, or the caret below doubles up with a second,
   gold one from that rule. */
.section-jump > summary::before { content: none; }
.section-jump[open] > summary::before { content: none; }
.section-jump > summary::after {
  content: ""; width: 0; height: 0; margin-top: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .6; transition: transform .15s;
}
.section-jump[open] > summary { color: var(--f-gold-bright); }
.section-jump[open] > summary::after { transform: rotate(180deg); }
/* .cta-row's own rule centers 2-3 landing-page CTA buttons (site.css); here
   it holds eighteen quick links, so this scope overrides alignment without
   touching the shared rule those other pages rely on. */
.section-jump .cta-row { justify-content: flex-start; padding-top: 10px; }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 16px 0 12px; font-size: 13px; color: var(--f-muted);
}
.crumbs a { color: var(--f-muted); }
.crumbs a:hover { color: var(--f-gold); }
.crumbs .sep { opacity: 0.5; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--f-panel);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: linear-gradient(180deg, rgba(227,193,104,0.12), rgba(0,0,0,0.2));
  border-bottom: 1px solid var(--f-line);
  font-family: var(--f-display); font-size: 15px; font-weight: 700;
  color: var(--f-gold-bright); letter-spacing: 0.3px;
}
.panel-head .count { margin-left: auto; font: 400 12px var(--f-ui); color: var(--f-muted); letter-spacing: 0; }

/* ── The node list (board index) ───────────────────────────────────────── */
.node {
  display: grid;
  grid-template-columns: 42px 1fr 128px minmax(0, 250px);
  gap: 14px; align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(41,52,74,0.6);
}
.node:last-child { border-bottom: 0; }
.node:hover { background: var(--f-row-alt); }
.node-ico { font-size: 24px; text-align: center; line-height: 1; }
.node-name { font-weight: 700; font-size: 15.5px; color: var(--f-text); }
.node-name:hover { color: var(--f-gold-bright); text-decoration: none; }
.node-blurb { font-size: 13px; color: var(--f-muted); margin-top: 2px; }
.node-stats { font-size: 12.5px; color: var(--f-muted); text-align: right; line-height: 1.7; }
.node-stats b { color: var(--f-text); font-variant-numeric: tabular-nums; }
.node-latest { font-size: 12.5px; color: var(--f-muted); min-width: 0; }
.node-latest .t {
  display: block; color: var(--f-link); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-latest .m { display: block; margin-top: 2px; }
.official .node-name::after {
  content: "OFFICIAL"; margin-left: 8px; font: 700 9.5px/1 var(--f-ui);
  letter-spacing: 0.8px; color: #1a1408; background: var(--f-gold);
  padding: 3px 6px; border-radius: 4px; vertical-align: middle;
}

/* ── The thread list ───────────────────────────────────────────────────── */
.thread {
  display: grid;
  grid-template-columns: 40px 1fr 116px minmax(0, 210px);
  gap: 14px; align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(41,52,74,0.6);
}
.thread:last-child { border-bottom: 0; }
.thread:nth-child(even) { background: var(--f-row-alt); }
.thread:hover { background: rgba(227,193,104,0.05); }
.thread.sticky { background: rgba(227,193,104,0.07); box-shadow: inset 3px 0 0 var(--f-gold-dim); }
.thread-title { font-weight: 700; font-size: 15px; color: var(--f-text); }
.thread-title:hover { color: var(--f-gold-bright); text-decoration: none; }
.thread-meta { font-size: 12.5px; color: var(--f-muted); margin-top: 3px; }
.tag {
  display: inline-block; font: 700 9.5px/1 var(--f-ui); letter-spacing: 0.7px;
  padding: 3px 6px; border-radius: 4px; margin-right: 6px; vertical-align: middle;
}
.tag.pin { background: var(--f-gold); color: #1a1408; }
.tag.lock { background: #3a4257; color: #cfd8e8; }
/* A Resident is one of the realm's own voices. Deliberately the quietest tag
   on the board — outlined rather than filled, and it FOLLOWS the name instead
   of leading the title, because it is a fact about the author and not a
   warning about the post. Chat has marked them since day one; this is the
   board finally saying the same thing. */
.tag.resident {
  background: transparent; border: 1px solid rgba(150, 170, 200, 0.35);
  color: var(--f-muted); margin-right: 0; margin-left: 6px; padding: 2px 5px;
  font-size: 8.5px; letter-spacing: 0.6px;
}

/* ── The avatar ────────────────────────────────────────────────────────────
   No uploads, no CDN, no moderation queue for images: an avatar is generated
   from the member's name, so every member has a distinct one from their first
   post and nothing can ever be uploaded that needs taking down. */
.av {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--f-display); color: #0e1218;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  flex: 0 0 auto; text-transform: uppercase; user-select: none;
}
.av.lg { width: 88px; height: 88px; border-radius: 12px; font-size: 34px; }
.av.sm { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; }

/* ── A post ────────────────────────────────────────────────────────────────
   THE forum layout: identity down the left, words on the right. */
.post {
  display: grid; grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--f-line);
}
.post:last-child { border-bottom: 0; }
.post:target .post-body { box-shadow: inset 0 0 0 2px var(--f-gold-dim); }
.post-side {
  padding: 16px 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.16));
  border-right: 1px solid var(--f-line);
}
.post-side .av { margin: 0 auto 9px; }
.post-author { font-weight: 700; font-size: 14.5px; color: var(--f-gold-bright); word-break: break-word; }
.post-rank {
  font-size: 11.5px; color: var(--f-muted); font-style: italic; margin-top: 1px;
}
.post-figs {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11.5px; color: var(--f-muted); line-height: 1.7;
}
.post-figs b { color: var(--f-text); font-variant-numeric: tabular-nums; }
.post-main { min-width: 0; display: flex; flex-direction: column; }
.post-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid rgba(41,52,74,0.5);
  font-size: 12.5px; color: var(--f-muted);
}
.post-head .permalink { margin-left: auto; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.post-body { padding: 16px; font-size: 15px; line-height: 1.62; flex: 1; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 12px; }
.post-body p:last-child { margin-bottom: 0; }

/* A quote block — the attribution bar is what makes a reply legible. */
.quote {
  margin: 0 0 12px; border-left: 3px solid var(--f-gold-dim);
  background: rgba(0,0,0,0.28); border-radius: 0 8px 8px 0;
  padding: 10px 13px; font-size: 14px; color: #c9d3e3;
}
.quote .qh {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--f-gold); margin-bottom: 5px;
}

.post-sig {
  margin: 0 16px 14px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; font-style: italic; color: var(--f-muted);
}
.post-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid rgba(41,52,74,0.5);
  background: rgba(0,0,0,0.14);
}
.post-foot .spacer { margin-left: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  font: 600 13px/1 var(--f-ui); cursor: pointer;
  padding: 9px 14px; border-radius: 8px; min-height: 38px;
  border: 1px solid var(--f-line); background: var(--f-panel-2); color: var(--f-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.btn:hover:not(:disabled) { border-color: var(--f-gold-dim); background: #232c3d; text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--f-gold-bright), var(--f-gold-dim));
  color: #1a1408; border-color: var(--f-gold); font-weight: 700;
}
.btn.sm { padding: 6px 10px; min-height: 32px; font-size: 12px; }
.btn.liked { background: rgba(227,193,104,0.18); border-color: var(--f-gold); color: var(--f-gold-bright); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--f-muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; color: var(--f-text);
  background: rgba(0,0,0,0.32); border: 1px solid var(--f-line);
  border-radius: 8px; padding: 10px 12px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--f-gold-dim);
  box-shadow: 0 0 0 3px rgba(227,193,104,0.12);
}
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.notice {
  padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px;
  background: rgba(227,193,104,0.09); border: 1px solid rgba(227,193,104,0.3); color: #f0e2be;
}
.notice.bad { background: rgba(224,104,95,0.12); border-color: rgba(224,104,95,0.4); color: #f3c9c5; }
.notice.good { background: rgba(111,190,143,0.12); border-color: rgba(111,190,143,0.4); color: #c7ecd7; }

.empty { padding: 40px 16px; text-align: center; color: var(--f-muted); }
.muted { color: var(--f-muted); }
.small { font-size: 12.5px; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pager button {
  font: 600 13px/1 var(--f-ui); min-width: 38px; min-height: 38px; padding: 0 11px;
  border-radius: 8px; border: 1px solid var(--f-line);
  background: var(--f-panel-2); color: var(--f-text); cursor: pointer;
}
.pager button:hover:not(:disabled):not(.on) { border-color: var(--f-gold-dim); }
.pager button.on { background: var(--f-gold); border-color: var(--f-gold); color: #1a1408; font-weight: 800; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Board statistics ──────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 14px 15px; }
.stat { font-size: 13px; color: var(--f-muted); }
.stat b { display: block; font-size: 19px; font-weight: 800; color: var(--f-gold-bright); font-variant-numeric: tabular-nums; }

/* ── Member roll ───────────────────────────────────────────────────────── */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 15px; }
.member {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--f-row); border: 1px solid var(--f-line); border-radius: 8px;
}
.member:hover { border-color: var(--f-gold-dim); text-decoration: none; }
.member-name { font-weight: 700; font-size: 14px; color: var(--f-text); }
.member-sub { font-size: 11.5px; color: var(--f-muted); }

/* ── Unread, watching, alerts ──────────────────────────────────────────────
 *
 * The three marks that turn a wall of posts into a board you come back to:
 * what moved since you looked, what you asked to hear about, and what someone
 * said to you while you were away. All three are computed server-side from
 * your read marks, so they agree across every device you sign in from — a
 * browser-local "seen" flag never could. */
.thread.unread .thread-title { color: var(--f-gold-bright); font-weight: 700; }
.thread.unread { border-left: 3px solid var(--f-gold); }
.tag.watch { background: rgba(126, 200, 255, 0.14); border-color: rgba(126, 200, 255, 0.4); color: #a8d8ff; }

.bell { position: relative; text-decoration: none; font-size: 17px; line-height: 1; padding: 2px; }
.bell-count {
  position: absolute; top: -5px; right: -9px; min-width: 16px; padding: 0 4px;
  border-radius: 999px; background: #b03a30; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.alert {
  display: flex; gap: 11px; align-items: center; padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: inherit;
}
.alert:last-child { border-bottom: 0; }
.alert:hover { background: rgba(255,255,255,0.03); }
/* Unseen ones carry the gold edge; once the page marks them read they lose it
 * on the NEXT visit, not this one — you should see what was waiting. */
.alert.fresh { border-left: 3px solid var(--f-gold); background: rgba(227,193,104,0.05); }
.alert em { color: var(--f-gold); font-style: normal; }

/* ── Standing in the realm ─────────────────────────────────────────────────
 *
 * The banner line sits ABOVE the posting rank and is the only one in gold,
 * because it is the one that states standing. A board that showed a post
 * count alone had an alliance's Leader reading as "Smallfolk" beneath their
 * own sworn sword — the count was never wrong, it was just the only thing
 * speaking. */
.member-banner,
.post-banner {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--f-gold); margin: 2px 0 1px;
}
.member-rank-badge {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: rgba(227, 170, 63, 0.14); border: 1px solid rgba(227, 170, 63, 0.35);
  color: var(--f-gold-bright); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}

/* ── Profile ───────────────────────────────────────────────────────────── */
.profile-top { display: flex; gap: 16px; align-items: center; padding: 18px; flex-wrap: wrap; }
.profile-name { font-family: var(--f-display); font-size: 25px; font-weight: 700; color: var(--f-gold-bright); }
.profile-rank { color: var(--f-muted); font-style: italic; margin-top: 2px; }
.profile-figs { display: flex; gap: 26px; margin-top: 10px; flex-wrap: wrap; }

/* ── Phones ────────────────────────────────────────────────────────────────
   The desktop grid columns collapse rather than squeeze: a four-column row at
   380px is unreadable in every direction. The last-post column folds into the
   title block, and the post's identity column becomes a header strip. */
@media (max-width: 860px) {
  .node, .thread { grid-template-columns: 36px 1fr; gap: 10px; }
  .node-stats, .thread .node-stats { display: none; }
  .node-latest, .thread .node-latest {
    grid-column: 2 / -1; padding-top: 4px;
    border-top: 1px dashed rgba(41,52,74,0.8); margin-top: 6px;
  }
  .post { grid-template-columns: 1fr; }
  .post-side {
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--f-line);
  }
  .post-side .av { margin: 0; width: 34px; height: 34px; font-size: 14px; }
  .post-figs {
    margin: 0 0 0 auto; padding: 0; border: 0; text-align: right;
    font-size: 11px; line-height: 1.4;
  }
  /* flex: 1 1 100% forces the input onto its own row (it wraps as soon as
     anything shares the line) while staying flexible rather than a hard
     100% width, which is what used to fight the buttons for space. */
  .f-search input { flex: 1 1 100%; width: auto; max-width: none; }
  .f-nav { width: 100%; margin-left: 0; }
}
@media (max-width: 520px) {
  .post-figs { display: none; } /* the card's numbers lose to the words here */
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE BOARD GETS A PULSE — sigils, the hot/new tabs, and Best of the Realm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sigils ───────────────────────────────────────────────────────────────
   Five faces instead of one thumb. A sigil nobody has cast is dimmed rather
   than hidden: a row that reshuffles as counts appear is impossible to aim
   at, and the whole point is that the five are always in the same places. */
.sigils { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.sigil {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 9px; min-height: 32px; cursor: pointer;
  font: 600 12px/1 var(--f-ui); color: var(--f-text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--f-line); border-radius: 999px;
  transition: background .15s, border-color .15s, transform .1s;
}
.sigil:hover { background: rgba(255,255,255,0.08); border-color: var(--f-gold-dim); transform: translateY(-1px); }
.sigil:disabled { opacity: .55; cursor: default; transform: none; }
.sigil.zero { opacity: .62; }
.sigil.zero:hover { opacity: 1; }
/* The one you hold. Gold, so your own mark is findable in a row of five. */
.sigil.on {
  background: rgba(227,193,104,0.18);
  border-color: var(--f-gold); color: var(--f-gold-bright); opacity: 1;
}
.sigil .n { font-variant-numeric: tabular-nums; }

/* ── Newest / Hot ─────────────────────────────────────────────────────── */
.board-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.board-tab {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  font: 600 13px/1 var(--f-ui); color: var(--f-muted);
  background: rgba(255,255,255,0.03); border: 1px solid var(--f-line);
}
.board-tab:hover { color: var(--f-text); border-color: var(--f-gold-dim); text-decoration: none; }
.board-tab.on { background: rgba(227,193,104,0.16); border-color: var(--f-gold-dim); color: var(--f-gold-bright); }
.node-latest .m.heat { color: var(--f-gold-bright); }

/* ── Best of the Realm ────────────────────────────────────────────────── */
.thread.best { grid-template-columns: 44px 1fr 116px 0; align-items: start; }
.best-rank {
  font-family: var(--f-display); font-size: 19px; line-height: 1.2;
  color: var(--f-gold); text-align: center;
}
.best-excerpt {
  margin-top: 6px; color: var(--f-muted); font-size: 13px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 720px) {
  .thread.best { grid-template-columns: 34px 1fr; }
  .thread.best .node-stats { grid-column: 2 / -1; }
}

/* SkyBB's colophon. Quiet — it names the engine without competing with the
   board's own content. */
.skybb-mark {
  margin: 22px 0 0; text-align: center;
  font-size: 12.5px; color: var(--f-muted);
}
.skybb-mark strong { color: var(--f-gold); letter-spacing: .3px; }
.skybb-mark a { color: var(--f-link); }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETTE PASS — the surfaces the token block above could not reach
   ───────────────────────────────────────────────────────────────────────────
   Retargeting the --f-* names carried most of the board onto the site's ramp
   in one edit. What it could not reach are the places where a colour was
   written directly into a rule: a second body gradient, gold-tinted washes on
   rows and buttons, and a dozen `rgba(0,0,0,0.3)` wells. Those are corrected
   here — the wells become real surfaces so they exist on a pale ground too,
   and the gold washes become the section tone.
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--tone-veil), transparent 62%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: var(--f-text);
}
.f-head { background: linear-gradient(180deg, var(--tone-wash), transparent); }
.f-search input, .composer input, .composer textarea, .f-post-body pre {
  background: var(--ink-900); border: 1px solid var(--edge); color: var(--text);
}
.f-nav a:hover, .f-nav button:hover { background: var(--surface-3); }
.f-nav a.on { background: var(--tone-wash); border-color: var(--tone-edge); color: var(--tone); }
.thread:hover { background: var(--tone-wash); }
.thread.sticky { background: var(--tone-wash); box-shadow: inset 3px 0 0 var(--tone); }
.tag.lock { background: var(--surface-4); color: var(--text); }
.alert:hover { background: var(--surface-2); }
.alert.fresh { border-left-color: var(--tone); background: var(--tone-wash); }
.sigil { background: var(--surface-2); }
.sigil:hover { background: var(--surface-3); border-color: var(--tone-edge); }
.notice { background: var(--info-wash); border: 1px solid rgba(144,205,241,.35); color: var(--text); }
.notice.bad { background: var(--danger-wash); border-color: rgba(249,128,120,.4); color: var(--text); }
.notice.good { background: var(--ok-wash); border-color: rgba(103,216,156,.4); color: var(--text); }
.btn.liked { background: var(--tone-wash); border-color: var(--tone); color: var(--tone); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--frost-300); outline-offset: 2px;
}

/* ── EDITING A POST ──────────────────────────────────────────────────────────
   The button sits in the post foot beside Quote and is drawn only for the
   author or an operator — a rendering decision, never a gate: /api/forum/post/
   edit re-checks authorship and standing on every request. */
.post-edited {
  color: var(--muted, #8b93a7);
  font-size: 0.78rem;
  margin-left: 0.5rem;
}
.post-edit-box {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  font: inherit;
}

/* An optimistic reply, on the wall before the server has answered. Pale on
 * purpose: the reader should be able to tell "said" from "sending" at a
 * glance, without a spinner stealing the moment. */
.post.pending {
  opacity: 0.55;
}

/* ── Batch B: prefixes, the answer mark, polls, the unread divider ─────────
   New badges follow the existing .tag scale; the poll bars print their number
   beside every bar so the geometry is never the only reading. */
.tag.solved { background: rgba(91, 189, 138, 0.16); border-color: rgba(91, 189, 138, 0.5); color: #8fd8b0; }
.tag.pollmark { background: rgba(126, 168, 255, 0.12); border-color: rgba(126, 168, 255, 0.4); color: #a8c4ff; }
.tag.pfx { background: rgba(230, 192, 103, 0.12); border-color: rgba(230, 192, 103, 0.45); color: #ecd792; }
.post.answered { border-color: rgba(91, 189, 138, 0.45); box-shadow: 0 0 0 1px rgba(91, 189, 138, 0.2); }

.unread-divider {
  display: flex; align-items: center; gap: 10px; margin: 4px 0;
  color: #d8b45a; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.unread-divider::before, .unread-divider::after {
  content: ""; flex: 1; border-top: 1px dashed rgba(216, 180, 90, 0.5);
}

.poll { padding: 12px 15px; border-bottom: 1px solid var(--f-line, rgba(255,255,255,0.08)); }
.poll-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.poll-opt {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; margin: 4px 0; padding: 7px 10px; overflow: hidden;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.poll-opt:disabled { cursor: default; opacity: 0.9; }
.poll-opt.on { border-color: rgba(230, 192, 103, 0.6); }
.poll-opt .poll-label, .poll-opt .poll-n { position: relative; z-index: 1; }
.poll-opt .poll-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(230, 192, 103, 0.14);
}

.search-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.search-filters select, .search-filters input {
  background: rgba(0,0,0,0.25); color: inherit; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 6px 8px; font: inherit;
}
.row-inline { display: flex; gap: 8px; }
.row-inline input { flex: 1; min-width: 0; }
.row-inline select {
  background: rgba(0,0,0,0.25); color: inherit; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 6px 8px; font: inherit;
}

/* ── Batch C: the reader's conveniences ───────────────────────────────────── */
.mod-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 12px; border: 1px dashed rgba(230, 192, 103, 0.4); border-radius: 8px; }
.mod-bar select { background: rgba(0,0,0,0.25); color: inherit; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 5px 8px; font: inherit; }
.post.ignored-post .post-main { padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.copylink { padding: 2px 7px; }
.reading-now { margin-left: 8px; }
/* The index-level unread dot — same grammar as the thread rows'. */
.node.unread .node-name::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 7px;
  border-radius: 50%; background: #d8b45a; vertical-align: middle;
}
.thread.kb-cursor { outline: 1px solid rgba(230, 192, 103, 0.55); outline-offset: -1px; border-radius: 6px; }

/* Edit history — the author's own view of their earlier words. */
.post-edited.linkish { cursor: pointer; text-decoration: underline dotted; }
.edit-history { margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,0.2); border-radius: 6px; }
.edit-version { margin: 8px 0; padding-left: 10px; border-left: 2px solid rgba(230,192,103,0.35); }