/* ============================================================
   css/pages.css — page-specific styling, one section per page (auth, add, fic, home,
   trove, series, group hallucinations, search, tending, damage report,
   housekeeping, profile).

   Load order (header.php → stylesheets.php): base → layout → components
   → pages → responsive. This file is 4 of 5; later files win ties.

   CONTENTS
      1. AUTH PAGES — login / register
      2. ADD PAGE — the hoard form
      3. ADD PAGE — AO3 fetch bar
      4. ADD PAGE — label with an info button
      5. FIC PAGE — page wrapper
      6. FIC PAGE — two columns
      7. HOME — sections
      8. NATIVE CHECKBOXES
      9. VERDICT CARDS — card spacing
     10. PROFILE (LAIR) — identity card + collections grid
     11. HOUSEKEEPING — avatar + colour pickers, settings form
     12. GROUP HALLUCINATIONS — three columns
     13. GROUP HALLUCINATIONS — posts: images, attached works, comments
     14. SEARCH — hunting grounds
     15. TENDING — tabs, workspace, alphabet bar
     16. TENDING — abandonment verdicts
     17. TENDING — deletion requests; the removal form on fic pages
     18. AUTH EXTRAS — remember me, forced password change, temp password
     19. FIC PAGE — hunt for updates
     20. FIC PAGE — entry actions
     21. SOUNDTRACKS — fic page + audio evidence in posts
     22. AUTH PAGES — logo
     23. FIC PAGE — entry details: reread count, chapter, finished date; pile actions
     24. SERIES PAGE
     25. WRANGLING — entity selector, warning
     26. WRANGLING — inspect panel
     27. WRANGLING — existing groups
     28. WRANGLING — workspace "make canonical" button
     29. GROUP HALLUCINATIONS — editing posts and comments; series link prompt
     30. EDIT FORMS — the shared work / series edit form
     31. FORM TYPE SCALE — shared by the add form and both edit forms
     32. GROUP HALLUCINATIONS — post edit panel (inline attachment editing)
     33. HOME SIDEBAR — stalk + hideout pulse
     34. DAMAGE REPORT
     35. HOUSEKEEPING — account card, admin card, danger strip
     36. TAG WRANGLING — three pools, one at a time
   ============================================================ */

/* ============================================================
   AUTH PAGES — login / register
   ============================================================ */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.auth-box {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  border-radius: 4px;
  padding: 28px 26px;
  box-shadow: 0 2px 10px var(--shadow-sm);
}

.auth-title {
  font-size: var(--fs-title);
  color: var(--ink);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: var(--fs-ui);
  color: var(--grey);
  font-style: italic;
  margin-bottom: 18px;
}

.auth-box label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 4px;
  margin-top: 12px;
}

.auth-box input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--surface);
  color: var(--ink);
}

.auth-box input:focus {
  outline: none;
  border-color: var(--red);
}

.auth-button {
  width: 100%;
  background: var(--red);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  padding: 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: bold;
  cursor: pointer;
  margin-top: 18px;
}

.auth-button:hover { background: var(--red-dark); }

.auth-link {
  font-size: var(--fs-ui);
  color: var(--grey);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* error + success messages */
.auth-error {
  background: var(--red-tint);
  border: 1px solid var(--pink);
  color: var(--red);
  font-size: var(--fs-ui);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.auth-success {
  background: var(--success-tint);
  border: 1px solid var(--success-line);
  color: var(--success);
  font-size: var(--fs-ui);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* ============================================================
   ADD PAGE — the hoard form
   ============================================================ */

/* hoarding a work is the same shape of task as editing one, so the form takes
   the same two-column treatment as .work-edit-form rather than a single
   600px stack */
/* same width as .work-edit-form so the two pages read as the same weight.
   Left-aligned, not centred — it lines up with the page title above it. */
.add-form {
  max-width: 1180px;
}

.add-form fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: var(--surface);
}

/* the two fieldsets side by side. "the work" is internally two columns, so it
   needs roughly double the width; "your entry" is a single column. */
.add-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* same gutter as the edit form */
.add-form .work-edit-cols { gap: 32px; }

.add-cols fieldset { margin-bottom: 0; }

/* the submit sits under both columns, so it needs real separation from them */
.add-form > .button[type="submit"] { margin-top: 28px; }

/* checkbox and toggle labels are inline controls, not field labels */
/* fandoms / relationships / characters / tags are comma-separated lists that
   run long. As single-line inputs you could only ever see the tail of what you'd
   typed; as short scrollable boxes the whole list is visible. */
.taglist-input {
  min-height: 50px;
  resize: vertical;
  line-height: 1.5;
}

.add-form input:focus,
.add-form select:focus,
.add-form textarea:focus {
  outline: none;
  border-color: var(--red);
}

/* ============================================================
   ADD PAGE — AO3 fetch bar
   ============================================================ */

.fetch-bar {
  display: flex;
  gap: 8px;
  max-width: 600px;
  margin-bottom: 8px;
}

.fetch-bar input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--surface);
  color: var(--ink);
}

.fetch-bar input:focus { outline: none; border-color: var(--red); }

.fetch-hint {
  font-size: var(--fs-ui);
  color: var(--grey);
  font-style: italic;
  margin-bottom: 18px;
}

/* ============================================================
   ADD PAGE — label with an info button
   ============================================================ */

/* a form label with its own "how does it work?" button beside it (add page
   series fields). the row carries the label's spacing */
.add-form .label-with-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

.add-form .label-with-info label { margin: 0; }

/* ============================================================
   FIC PAGE — page wrapper
   ============================================================ */

/* no cap: the two columns span the page like every other view, so the right
   one sits against the right edge instead of floating mid-page */
.fic-page { max-width: none; }

/* ============================================================
   FIC PAGE — two columns
   Left  = the shared work record (what this work IS)
   Right = your relationship to it (your entry, piles, comments)
   Header, hunt buttons and the edit form stay full-width above.
   ============================================================ */

.fic-cols {
  display: grid;
  /* fixed-width right column pinned to the right edge (same idea as the
     filter sidebar elsewhere); the left column takes whatever's left */
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}

.fic-col-left,
.fic-col-right {
  min-width: 0;   /* lets long tag chips wrap instead of forcing the column wider */
}

/* the personal entry is the thing you actually interact with, so it gets a
   panel treatment to lift it off the page */
.fic-col-right .your-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

/* the panel is a tab strip + pane + footer, so it manages its own padding */
.fic-col-right .your-entry {
  padding: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
   ENTRY / PILES TABS
   Two panes sharing one panel. The pile picker is bulky and only
   occasionally needed, so it hides behind a tab — but which piles
   the work is in stays in the footer, always visible.
   ------------------------------------------------------------ */
/* cream strip, active tab a solid red pill — the same toggle language as the
   me/everyone switch, so the interaction reads as familiar */
.entry-tabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
}

.entry-tab {
  flex: 1;
  padding: 9px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--red-dark);
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}

.entry-tab:hover { background: var(--red-tint); }

.entry-tab.active {
  background: var(--red);
  color: var(--surface);
}

.entry-tab.active:hover { background: var(--red); }

.entry-pane { padding: 16px 18px; }

/* one type scale inside the panel. Sizes had drifted — body text at 15px next
   to a 16px button next to a 14px button next to 10px labels — which read as
   wonky rather than deliberate. */
.your-entry .entry-pane p,
.your-entry .entry-pane label { font-size: var(--fs-body); }

.your-entry .entry-pane .hint,
.your-entry .entry-timestamp,
.your-entry .entry-timestamp small { font-size: var(--fs-ui); }

.your-entry .button,
.your-entry .button-sm { font-size: var(--fs-ui); padding: 7px 14px; }

.your-entry .link-button { font-size: var(--fs-ui); }

/* reset is the rarer, destructive half of the pair — it shouldn't sit at the
   same visual weight as +1 */
.your-entry .link-button[title="reset to zero"] { color: var(--grey); }

.your-entry .status-chip,
.your-entry .pile-chip { font-size: var(--fs-ui); }

/* the reread controls sit on one line with the count */
.your-entry .entry-pane p .button-sm { padding: 4px 10px; }

/* footer strip: pile membership, visible whichever pane is open */
.entry-piles-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-warm);
}

.entry-piles-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin-right: 2px;
}

/* on the filled footer the chips need a white fill to stand off the cream */
.entry-piles-footer .pile-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--red-dark);
}

/* the panel is the first thing in its column, so no leading gap — its top
   edge should line up with the title on the left */
.fic-col-right > *:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------
   LEFT-COLUMN PANELS
   Three grouped blocks — the facts, the tags, the summary — so the
   rating and series stop getting lost in a long vertical run. No
   headings: the content says what it is.
   ------------------------------------------------------------ */
.fic-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* the facts panel: chips, rating and series on their own lines */
.fic-panel-meta .fic-chips { margin-bottom: 10px; }

.fic-panel-meta .fic-avg   { margin: 0 0 8px; }

.fic-panel-meta .fic-series { margin: 0; }

.fic-panel-meta > *:last-child { margin-bottom: 0; }

/* tag blocks already have their own spacing; drop the last one's gap */
.fic-panel-tags .tag-block:last-child { margin-bottom: 0; }

/* the summary already carries its own left rule, so it doesn't need a
   second border inside the panel */
.fic-panel-summary .fic-summary {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------------------
   MENTIONED IN GROUP HALLUCINATIONS
   Compact preview of posts that attached this work. Each row links
   through to the feed filtered to this fic.
   ------------------------------------------------------------ */
.fic-mentions { margin-top: 24px; }

.mention-row {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.1s;
}

.mention-row:hover { border-color: var(--red); text-decoration: none; }

.mention-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui);
  margin-bottom: 4px;
}

.mention-head i, .mention-head svg { width: 14px; height: 14px; }

.mention-when { color: var(--grey); font-size: var(--fs-sm); margin-left: auto; }

.mention-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  line-height: 1.45;
}

.mention-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.mention-tag {
  font-size: var(--fs-xs);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--grey);
}

/* banner when the feed is filtered to one work */
.feed-filter-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 8px 14px;
  background: var(--page);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  font-size: var(--fs-ui);
}

.feed-filter-clear { margin-left: auto; color: var(--red); font-size: var(--fs-ui); white-space: nowrap; }

.removal-section .removal-form {
  max-width: 480px;
  margin: 12px auto 0;
  text-align: left;
}

.fic-head { margin-bottom: 16px; }

.fic-head-title {
  font-size: var(--fs-title);
  color: var(--ink);
  margin-bottom: 4px;
}

.fic-head-author {
  font-size: var(--fs-body);
  color: var(--grey);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* the one link that takes you off NBJV — treated as an action, not prose */
.ao3-link {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: var(--fs-sm);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 2px 9px;
  white-space: nowrap;
  transition: background-color 0.1s, color 0.1s;
}

.ao3-link:hover {
  background: var(--red);
  color: var(--surface);
}

.fic-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* a state pill among the square chips (series page) — centred, not stretched
   to the chips' height */
.fic-chips .series-state-badge { align-self: center; }

.fic-chips .chip {
  font-size: var(--fs-sm);
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.fic-chips .chip.rating {
  background: var(--red-tint);
  border-color: var(--pink);
  color: var(--red);
}

/* tag blocks */
/* AO3's model: every entity chip looks the same; the LABEL does the sorting.
   Labels sit in a fixed-width column so the blocks line up and scan easily. */
.tag-block {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.tag-block-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.tag-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey);
  font-weight: 600;
  flex: 0 0 100px;   /* fixed column keeps every block's label aligned */
}

/* warnings are the exception — safety info, so they keep a distinct look
   (same idea as AO3's "required tags") */
.tag-block-warnings .tag-label {
  color: var(--red);
  font-weight: bold;
}

/* tag chip — the unified content-tag look (cream fill + warm border + red text).
   squared (4px) so tags read as TAGS, distinct from rounded status badges. */
.tag {
  font-size: var(--fs-ui);
  padding: 3px 11px;
  border-radius: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
}

/* warnings keep their alert tint; ships look like every other tag
   (AO3 doesn't colour-code tag types — the label does that job) */
.tag.warning { background: var(--red-tint); border-color: var(--pink); color: var(--red); }

/* clickable tag chips (when rendered as <a>): fill solid red on hover = "click me → filter" */
a.tag {
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

a.tag:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--surface);
}

.fic-series {
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  margin: 10px 0;
}

.fic-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 14px 0;
}

.fic-summary p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin-top: 6px; }

.fic-avg {
  font-size: var(--fs-body);
  color: var(--ink);
  margin: 14px 0;
}

.fic-avg .muted, .muted { color: var(--grey); font-style: italic; }

/* abandonment vote */
.vote-tally { font-size: var(--fs-ui); color: var(--grey); }

/* your entry */
.your-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 20px 0;
}

.your-entry p { font-size: var(--fs-body); margin-bottom: 8px; color: var(--ink); }

/* the entry's flags are the same coloured icon badges the cards use, so a flag
   reads the same wherever you meet it. Slightly larger here since there's room. */
.entry-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.entry-flags .fic-flag { width: 26px; height: 26px; }

.entry-flags .fic-flag i,
.entry-flags .fic-flag svg { width: 15px; height: 15px; }

/* your own comment in the list — marked so it's obvious which one is yours */
.comment-mine { border-left: 3px solid var(--red); padding-left: 10px; }

.comment-edit-btn { margin-left: auto; }

/* writing / editing your comment, in the comments section rather than the
   entry form — same place you read everyone else's */
.comment-form { margin-bottom: 16px; }

.comment-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-ui);
  resize: vertical;
  box-sizing: border-box;
}

.comment-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.comment-form-hint { font-size: var(--fs-sm); color: var(--grey); font-style: italic; }

.flag {
  font-size: var(--fs-sm);
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--grey);
}

.entry-edit label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: bold;
  color: var(--ink-soft);
  margin: 12px 0 4px;
}

.entry-edit textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
}

.entry-edit-actions { display: flex; gap: 8px; margin-top: 14px; }

/* comments */
.comments { margin: 20px 0; }

.comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui);
  margin-bottom: 4px !important;
}

.comment-head i, .comment-head svg { width: 16px; height: 16px; }

.comment-body { font-size: var(--fs-body); color: var(--ink); line-height: 1.5; }

/* ============================================================
   HOME — sections
   ============================================================ */

.home-section { margin-bottom: 24px; }

/* ============================================================
   NATIVE CHECKBOXES
   ============================================================ */

/* native checkboxes tick in AO3 red, not browser-default purple/blue */
input[type="checkbox"] { accent-color: var(--red); }

/* ============================================================
   VERDICT CARDS — card spacing
   ============================================================ */

/* The verdict grid suppresses the popup entirely. It drops below the card,
   which is exactly where the vote buttons are — so hovering to reach them
   covered them, and they couldn't be clicked at all.
   Here you click through to the fic page if you want the detail. */
.verdict-card .fic-card-popup { display: none !important; }

/* ============================================================
   PROFILE (LAIR) — identity card + collections grid
   The identity (avatar, name, bio, favourite tags) reads as one card;
   the collections sit in a grid beside it.
   ============================================================ */

.creature-card {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 18px 16px;
  text-align: center;
  position: sticky;
  top: 12px;
}

/* the profile's avatar: the big circle at the top of the identity card */
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--avatar-color, var(--red));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto 8px;
}
.profile-avatar i, .profile-avatar svg { width: 32px; height: 32px; color: var(--surface); stroke: var(--surface); }

.creature-card .creature-name { margin: 0 0 6px; font-size: var(--fs-lead); }

/* the bio is a short self-description, not an essay slot. It gets its own
   breathing room rather than sitting flush against the name above and the
   tags below. */
.creature-card .creature-bio {
  margin: 10px 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-ui);
  line-height: 1.6;
  text-align: left;
}

.creature-card .fav-tag-list { justify-content: center; margin-bottom: 12px; }

.creature-card .fav-tag-list .chip { font-size: var(--fs-sm); padding: 2px 8px; }

/* stacked, full width */
/* the edit button sits directly under the name, so it needs no divider
   above it */
.creature-card .creature-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

/* collections in a grid rather than one long stack */
/* full-width rows, not a two-column grid: each section's cards run across
   the column (side by side, the sections would be narrow vertical panels) */
.creature-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.creature-grid .creature-section { margin: 0; }

/* a preview is one row of cards, not a wrapping grid */
.creature-grid .fic-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.creature-name { margin: 0; flex: 1; }

.creature-section { margin-bottom: 28px; }

.creature-bio { line-height: 1.6; color: var(--ink); white-space: pre-wrap; }

.fav-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* favourite tags use the same cream chip look as fic-page tags (bare .chip
   has no base rule) */
.fav-tag-list .chip {
  font-size: var(--fs-ui);
  padding: 3px 11px;
  border-radius: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
  text-decoration: none;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

/* they link to browse.php filtered by that tag, same as tag chips elsewhere */
a.fav-tag-list .chip:hover,
.fav-tag-list a.chip:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--surface);
  text-decoration: none;
}

/* the form is the only thing on screen while editing — the whole lair hides —
   so it gets a comfortable measure and real padding rather than the cramped
   600px it had when it sat beside the identity column */
.profile-edit-form {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 26px 30px;
}

.profile-edit-form .sidebar-label { margin-top: 18px; }

.profile-edit-form > *:first-child { margin-top: 0; }

.profile-edit-form textarea { min-height: 90px; }

.bio-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  resize: vertical;
  margin-bottom: 8px;
}

.bio-input:focus { outline: none; border-color: var(--red); }

/* ============================================================
   HOUSEKEEPING — avatar + colour pickers, settings form
   ============================================================ */

.settings-form { max-width: none; }

/* fills its card; the card's columns set the widths */
/* (older .settings-label / .settings-help / .settings-section input rules lived
   here and were overridden by the housekeeping block further down — the same
   duplicate-rule trap .add-form label had. Merged into that block.) */
.settings-card input:focus,
.settings-danger-strip input:focus { outline: none; border-color: var(--red); }

/* avatar picker */
.avatar-picker { display: flex; flex-direction: column; gap: 16px; }

.avatar-creatures, .avatar-colors { display: flex; gap: 10px; flex-wrap: wrap; }

.avatar-opt input, .color-opt input { display: none; }

/* the tooltip host is the <label>, which needs to be a positioned box */
.avatar-opt, .color-opt { display: inline-block; position: relative; }

.avatar-opt input:checked + .avatar-chip { border-color: var(--red); background: var(--page); }

.color-opt input:checked + .color-chip { border-color: var(--ink); transform: scale(1.1); }

/* donut */
.donut {
  width: 150px; height: 150px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}

.donut-hole {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--bg, var(--surface-warm));
}

/* length stats list */
/* (an older .length-stats block lived here with flex-direction: column, which
   stacked each label above its value. The rule further down sets `display:
   flex` but never reset the direction, so this one kept winning. Merged.) */

/* horizontal bars */
.stat-bars { display: flex; flex-direction: column; gap: 8px; }

/* meter (stacked single bar) */
.stat-meter {
  display: flex; height: 26px; border-radius: 4px; overflow: hidden;
  margin-bottom: 10px;
}

.stat-meter > div { height: 100%; }

.meter-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-ui); color: var(--grey); }

.meter-leg-item { display: flex; align-items: center; gap: 5px; }

.meter-dot { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }

/* ============================================================
   GROUP HALLUCINATIONS — three columns
   compose (sticky) · feed grid · filters
   A post is compact by default and spans BOTH feed columns when
   opened, so its comment thread isn't squeezed into half the width.
   ============================================================ */

.social-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 290px;
  gap: 20px;
  align-items: start;
}

.social-layout .post-compose {
  position: sticky;
  top: 12px;
  margin-bottom: 0;
}

/* one column, filling the gap between the compose panel and the filters */
.post-feed { width: 100%; }

/* Each post splits in two: what was posted on the left, the conversation on
   the right. A full-width card with comments underneath left the right half
   empty and stretched the text past a readable measure. */
.post-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  /* stretch, NOT start: the divider is a border on the right column, so with
     align-items:start it only ran as far as the comments did */
  align-items: stretch;
}

.post-body { min-width: 0; }

.post-side {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.post-side .post-comments {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.post-compose {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
}

/* taller at rest — a two-row box invites a one-line answer, and this is meant
   for describing psychic damage */
.post-compose textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  resize: vertical;
}

.post-compose textarea:focus { outline: none; border-color: var(--red); }

.post-actions-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
  flex-wrap: wrap;
}

/* the three ways to attach something: always-visible tiles, three in a
   row at every width (labels wrap inside a tile on a phone) */
.attach-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.attach-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.attach-tile svg { width: 20px; height: 20px; color: var(--red); stroke: var(--red); flex-shrink: 0; }

.attach-tile:hover { border-color: var(--red); }

/* active = its input is open; clicking it again closes it */
.attach-tile.active { background: var(--surface); border-color: var(--red); }

.post-actions-row .button { cursor: pointer; }

/* the real image size limit: left of the submit button, only while visual
   evidence is open */
.attach-hint { font-size: var(--fs-sm); color: var(--grey); }

.post-actions-row .button:last-child { margin-left: auto; }

.post-attach {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--page); border-radius: 4px; padding: 4px 8px;
  margin: 8px 0 0; font-size: var(--fs-ui); color: var(--ink);
}

.post-attach[hidden] { display: none; }

.post-attach-label { color: var(--grey); font-size: var(--fs-sm); text-transform: uppercase; }

.post-attach-clear {
  background: none; border: none; cursor: pointer;
  color: var(--grey); font-size: var(--fs-lead); line-height: 1; padding: 0 4px;
}

.post-attach-clear:hover { color: var(--red); }

/* fic picker dropdown */
.fic-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}

.fic-picker input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; font-size: var(--fs-body); }

.fic-picker-results { margin-top: 8px; max-height: 240px; overflow-y: auto; }

.fic-picker-row {
  display: block; width: 100%; text-align: left; padding: 8px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; font-family: inherit; font-size: var(--fs-ui);
}

.fic-picker-row:hover { background: var(--page); }

.fic-picker-row b { color: var(--ink); }

/* a series culprit reads slightly differently from a single work */
.post-series-attach i, .post-series-attach svg { color: var(--red); }

.fic-picker-row .muted { color: var(--grey); font-size: var(--fs-ui); margin-left: 8px; }

/* the posts themselves */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px;
  margin-bottom: 16px;
}

.post-author {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none; font-weight: bold;
}

.post-author:hover { color: var(--red); }

.post-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  flex-shrink: 0;
}

.post-avatar i, .post-avatar svg { width: 16px; height: 16px; color: var(--surface); stroke: var(--surface); }

.post-avatar-sm { width: 24px; height: 24px; }

.post-avatar-sm i, .post-avatar-sm svg { width: 12px; height: 12px; }

.post-time { color: var(--grey); font-size: var(--fs-ui); }

.post-content {
  font-size: var(--fs-body); line-height: 1.55; color: var(--ink);
  margin: 0 0 12px; white-space: pre-wrap;
}

.post-image-link { display: block; margin: 0 0 12px; }

/* a thumbnail in the feed — 500px let a portrait image swallow the page.
   Click opens it full size in a lightbox. */
.post-image {
  max-width: 100%;
  max-height: 240px;
  width: auto;
  border-radius: 4px;
  display: block;
  cursor: zoom-in;
}

/* ---- lightbox ---- */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}

.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 8px 40px var(--overlay);
}

.image-lightbox-hint {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  color: var(--white-a60);
  font-size: var(--fs-sm);
}

/* ============================================================
   GROUP HALLUCINATIONS — posts: images, attached works, comments
   Sits in the image's top-right corner. Hidden until hover so the
   feed stays clean; always visible on touch devices, which have no
   hover state to reveal it.
   ============================================================ */

.post-image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.post-image-download {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white-a92);
  border: 1px solid var(--border);
  color: var(--red);
  opacity: 0;
  transition: opacity 0.12s, background-color 0.12s;
}

.post-image-wrap:hover .post-image-download,
.post-image-download:focus-visible {
  opacity: 1;
}

.post-image-download:hover {
  background: var(--red);
  color: var(--surface);
  border-color: var(--red);
}

.post-image-download i,
.post-image-download svg {
  width: 16px;
  height: 16px;
}

.post-fic-attach {
  display: flex; align-items: center; gap: 8px;
  background: var(--page); border-radius: 4px;
  padding: 10px 12px; margin: 0 0 12px;
  text-decoration: none; color: var(--ink);
}

.post-fic-attach:hover { background: var(--hover); }

.post-fic-attach i, .post-fic-attach svg { color: var(--red); width: 18px; height: 18px; }

.post-fic-title { font-weight: bold; }

.post-fic-author { color: var(--grey); font-size: var(--fs-ui); }

/* comments */
.post-comments {
  border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 12px;
}

.post-comment {
  display: flex; gap: 8px;
  padding: 8px 0;
}

.post-comment-body { flex: 1; }

.post-comment-meta b { color: var(--ink); font-size: var(--fs-ui); }

.post-comment-body p { margin: 2px 0 0; font-size: var(--fs-body); line-height: 1.5; }

/* the respond field stays out of the way until you want it: a feed of open
   text boxes is noisy, and a plain link is too quiet to read as an invitation */
.post-respond-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  /* 4px, not 99px: rounded means A STATE in the shape language, so this is an
     ordinary secondary button — still louder than a plain link */
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--page);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}

.post-respond-toggle:hover { background: var(--hover); }

.post-respond-toggle i, .post-respond-toggle svg { width: 14px; height: 14px; }

.post-comment-form {
  display: flex; gap: 8px; margin-top: 10px;
}

.post-comment-form input {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: var(--fs-ui);
}

.post-comment-form input:focus { outline: none; border-color: var(--red); }

/* ============================================================
   SEARCH — hunting grounds
   ============================================================ */

/* the group list runs wide so cards have room, but the search bar itself
   doesn't need to be a metre long */
/* the toggle stays left, the search bar sits centred on the page. Three grid
   columns with matching outer widths keep the bar truly centred regardless of
   how wide the toggle is. */
.search-controls {
  /* one row: toggle, then the search field taking all the room that's left,
     then "hunt" — so the row reaches the right edge of the content area */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

/* pinned to column 2 explicitly: the toggle only renders once there's a query,
   so without it the form would otherwise fall into column 1 and sit left */
.search-controls .search-bar-main { flex: 1 1 auto; min-width: 0; max-width: none; }

/* the toggle and the search field are matched to the same height rather than
   stretched to fit — stretching grew the toggle's border box while its buttons
   stayed short, which read as a hollow outline */
/* one explicit height for all three, rather than hoping matched padding lands
   on the same total — the input, the button and the toggle each compute their
   height differently (borders, line-height, font metrics) */
.search-controls .search-bar-main input[type="text"],
.search-controls .search-bar-main .button {
  height: 38px;
  box-sizing: border-box;
}

.search-controls .mode-opt {
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.search-controls .search-bar-main input[type="text"] { padding: 0 12px; font-size: var(--fs-ui); }

.search-controls .search-bar-main .button { padding: 0 18px; font-size: var(--fs-ui); }

.search-bar-main {
  display: flex;
  gap: 8px;
  max-width: 1100px;
  width: 100%;
  flex: 1 1 700px;
  margin: 0;
}

.search-controls .mode-toggle {
  height: 38px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* a group with no hits still shows, collapsed and muted, so you can see it was
   searched rather than wondering whether it was. Muted by mixing its colours
   toward the page (the look of 55% opacity) rather than with opacity: opacity
   would fade its tooltip too, and make each empty group its own stacking
   layer that the next one paints over the bubble. */
.search-group.search-group-empty {   /* .search-group is defined below and would win a tie */
  background: color-mix(in srgb, var(--surface) 55%, var(--page));
  border-color: color-mix(in srgb, var(--border) 55%, var(--page));
}
.search-group-empty .search-group-head { color: color-mix(in srgb, var(--ink-soft) 55%, var(--page)); }
.search-group-empty .search-group-head::before,
.search-group-empty .search-count { color: color-mix(in srgb, var(--grey) 55%, var(--page)); }

.search-group-empty .search-group-head { cursor: default; }

.search-group-none { margin: 0; font-size: var(--fs-ui); font-style: italic; }

.search-bar-main input[type="text"] {
  flex: 1; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: var(--fs-body);
}

.search-bar-main input:focus { outline: none; border-color: var(--red); }

.search-results-head {
  max-width: none;
  font-size: var(--fs-body); color: var(--grey); margin: 0 0 16px;
}

.search-group {
  /* groups span the page — they're the structure of the results. The text
     hits inside them keep their own narrower caps (long lines are hard to read) */
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 12px;
}

.search-group-head {
  cursor: pointer; padding: 12px 16px;
  font-size: var(--fs-ui); font-weight: bold; text-transform: lowercase;
  letter-spacing: 0.03em; color: var(--ink-soft);
  list-style: none;
}

.search-group-head::-webkit-details-marker { display: none; }

.search-group-head::before { content: '▸ '; color: var(--grey); }

.search-group[open] .search-group-head::before { content: '▾ '; }

.search-count {
  background: var(--page); border-radius: 99px;
  padding: 1px 8px; font-size: var(--fs-ui); color: var(--grey); margin-left: 4px;
}

.search-group-body { padding: 0 16px 16px; }

.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* entity hits are tag chips — the same cream square chip as on the fic page,
   so a tag looks like a tag wherever you meet it */
.search-chips .chip {
  /* inline-block, NOT inline-flex: a flex container makes every text node its
     own item, so the gap wedged itself around the <mark> and split words in
     half — "Getou Suguru" came out as "Getou Sug uru" */
  display: inline-block;
  font-size: var(--fs-ui);
  padding: 3px 11px;
  border-radius: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

/* Tags, fandoms, characters and ships FILL on hover, same as tag chips on the
   fic page, the damage report and the favourites list. A second copy of this
   rule sat 7 lines below setting white-with-a-red-border, won by cascade
   order, and made search the only page where a tag behaved differently.
   Creatures and traces are NOT chips — they have their own hover below. */
.search-chips .chip:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--surface);
  text-decoration: none;
}

.search-chips .chip:hover .chip-n { color: var(--white-a75); }

/* the highlight must not add width, or it breaks the word it sits inside */
/* the match is marked with colour and weight, not a background — a highlight
   fill either clashes with the chip's own fill or (with any padding) pushes the
   word apart. Red is already in the palette, so nothing new is introduced. */
.search-chips mark {
  background: none;
  padding: 0;
  color: var(--red);
  font-weight: 700;
}

/* ...but the chip fills RED on hover, so a red mark vanished into it — the
   matched part of the word disappeared mid-hover. On a filled chip the
   highlight carries on weight alone. */
.search-chips .chip:hover mark { color: var(--surface); }

/* traces are things people wrote, so they read as quoted boxes */
.search-trace {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  max-width: 780px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.1s;
}

/* a result you READ rather than a filter you APPLY — border plus the shared
   hover fill, never the solid red the chips use */
.search-trace:hover { border-color: var(--red); background: var(--hover); text-decoration: none; }

.search-trace-text { margin: 0 0 4px; font-size: var(--fs-body); line-height: 1.5; }

.search-trace-meta { margin: 0; font-size: var(--fs-ui); color: var(--grey); }

.search-trace mark, .search-creature mark {
  background: none;
  padding: 0;
  color: var(--red);
  font-weight: 700;
}

.search-creatures { display: flex; flex-direction: column; gap: 8px; }

.search-creature {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  margin-bottom: 6px;
  max-width: 520px;
  transition: border-color 0.1s;
}

/* same treatment as .search-trace — this used the page cream while the trace used the
   hover fill, so two identical-looking rows lit up differently */
.search-creature:hover { border-color: var(--red); background: var(--hover); text-decoration: none; }

.search-creature-bio { display: block; font-size: var(--fs-ui); color: var(--grey); }

/* series results ride on .search-trace; only the state badge and a smaller
   count line are their own */
.search-series .series-parts-count { margin: 4px 0 0; font-size: var(--fs-ui); }

.search-series mark {
  background: none;
  padding: 0;
  color: var(--red);
  font-weight: 700;
}

.search-series .series-state-badge { margin-left: 6px; }

/* ============================================================
   TENDING — tabs, workspace, alphabet bar
   ============================================================ */

.community-tabs {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.community-tab {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--grey);
  font-size: var(--fs-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.community-tab:hover { color: var(--ink); }

.community-tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: bold; }

.wrangle-search { margin-bottom: 16px; }

.wrangle-section { margin-bottom: 24px; }

/* Label ABOVE its chips, not beside. Side by side, a 90px label left ~260px
   for tag names in a 364px column, so long names overflowed and the workspace
   grew a horizontal scrollbar. */
.workspace-row { margin-bottom: 12px; }

.workspace-row:last-child { margin-bottom: 0; }

.workspace-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin-bottom: 5px;
}

.workspace-canonical, .workspace-synonyms { display: flex; flex-wrap: wrap; gap: 5px; }

/* nothing in here should be able to push the column wider */
.workspace {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 10px;
  min-height: 60px;
  overflow-wrap: anywhere;
}

.workspace .ws-chip { max-width: 100%; }

/* Chips are CREAM-filled, canonical is WHITE — inverted, because the
   .workspace panel is white. Cream keeps ordinary chips visible against it,
   and flipping canonical to white means canonical is marked by fill AND
   border rather than by the border alone.
   Padding is asymmetric (less on the right) because the remove × carries its
   own padding; symmetric padding read as a gap on that side. */
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--page); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px 4px 10px;
  font-size: var(--fs-ui);
  margin: 0 4px 4px 0;
}

/* Red, matching .ws-star inside it. This was briefly orange
   (--status-finished) — but orange is a READING STATUS on this site, and a
   canonical tag isn't a reading status. Padding drops 1px to absorb the 2px
   border, so canonical chips don't sit taller than neighbours in a wrapping
   row. */
.ws-chip.is-canonical {
  background: var(--surface);
  border-color: var(--red);
  border-width: 2px;
  padding: 3px 7px 3px 9px;
}

.ws-chip .chip-n { color: var(--grey); font-size: var(--fs-sm); }

/* one star colour everywhere (.tag-chip must not override it) */
.ws-star { color: var(--red); font-weight: bold; font-size: var(--fs-ui); }

/* 18px/2px, carried over from the duplicate below that had been winning —
   this is the × you've actually been looking at */
.ws-remove {
  background: none; border: none; cursor: pointer;
  color: var(--grey); font-size: var(--fs-lead); line-height: 1; padding: 0 2px;
}

.ws-remove:hover { color: var(--red); }

.ws-chip:not(.is-canonical) { cursor: pointer; }

.ws-chip:not(.is-canonical):hover { background: var(--hover); }

/* alphabet jump bar + all tags pool */
/* The A-Z jump is a horizontal row above the pool, styled as chips so it reads
   as a control. Styled like .letter-head it would read as a column of section
   headings that failed to line up with the real ones. */
.wrangle-stack { display: block; }

.all-tags-pool { min-width: 0; }

.letter-block:last-child { margin-bottom: 0; }

.alpha-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);   /* .pool-panel is white; without this the chips
                                 scroll over the tags underneath */
}

.alpha-jump {
  text-decoration: none;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: var(--fs-sm); font-weight: bold;
  color: var(--red);
  min-width: 22px; text-align: center;
}

.alpha-jump:hover { background: var(--red); border-color: var(--red); color: var(--surface); text-decoration: none; }

.letter-block { margin-bottom: 14px; scroll-margin-top: 12px; }

.letter-head {
  font-size: var(--fs-ui); font-weight: bold; color: var(--grey);
  margin: 0 0 6px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   TENDING — abandonment verdicts
   ============================================================ */

.verdict-meta { font-size: var(--fs-ui); color: var(--grey); margin: 0 0 4px; }

.verdict-tally { font-size: var(--fs-ui); color: var(--ink); margin: 0; }

/* ONE dead/hope colour pair, used by the tally, the bar and the buttons.
   Dead is site red (taupe reads as muddy, and as if the panel had already
   decided); hope is --status-reading gold: the work is still alive. */
.tally-dead { color: var(--red); font-weight: bold; }

.tally-hope { color: var(--status-reading); font-weight: bold; }

.verdict-vote { display: flex; gap: 6px; }

/* Outline until you vote. Both were solid red, so two opposite verdicts
   carried identical weight and the panel looked like it wanted a click.
   Each button wears its own colour so you can tell them apart without
   reading, and only YOUR vote is filled. */
.verdict-vote .button-sm.vote-dead {
  background: var(--surface);
  border-color: var(--red);
  color: var(--red);
}

.verdict-vote .button-sm.vote-hope {
  background: var(--surface);
  border-color: var(--status-reading);
  /* the gold itself is too pale for text on white — this is the same hue
     darkened to stay readable */
  color: var(--warning);
}

.verdict-vote .button-sm.vote-dead:hover  { background: var(--red-tint); }

.verdict-vote .button-sm.vote-hope:hover  { background: var(--warning-tint); }

.verdict-vote .button-sm.selected-dead { background: var(--red); color: var(--surface); border-color: var(--red); }

.verdict-vote .button-sm.selected-hope { background: var(--status-reading); color: var(--ink); border-color: var(--status-reading); }

/* the caveat sits with the intro, not stranded under the cards — it qualifies
   the whole exercise, so you should read it before voting rather than after */
.verdict-caveat {
  max-width: 720px;
  margin: 0 0 18px;
  padding: 9px 13px;
  background: var(--page);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-ui);
  font-style: italic;
  color: var(--grey);
}

/* the verdict-info box on the fic page (the tally + weigh in link) */
.verdict-box {
  background: var(--page);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}

.verdict-box .vote-tally { margin: 0; flex: 1; font-size: var(--fs-ui); }

/* ============================================================
   TENDING — deletion requests; the removal form on fic pages
   ============================================================ */

.removal-section {
  /* removal request — a centred strip at the foot of the page, so something
   destructive reads as deliberate rather than forgotten in a corner */
  text-align: center;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--border);
}

.removal-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px; margin-top: 10px;
}

.removal-form h3 { font-size: var(--fs-body); margin: 0 0 8px; color: var(--ink); }

.removal-form textarea {
  width: 100%; padding: 8px;
  border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: var(--fs-ui);
}

.removal-form-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px;
}

/* the cancel link goes UNDER its sentence, not beside it: block, not flex
   (flex would pin the form to the right of a centred strip) */
.removal-pending {
  background: var(--page);
  border-radius: 4px;
  padding: 12px 16px;
  display: inline-block;
  text-align: center;
}

.removal-pending p {
  /* the cancel link goes UNDER its sentence — inline inside a centred strip, it
   trailed off to the right on its own */
  margin: 0 0 6px;
  font-size: var(--fs-ui);
  color: var(--ink);
}

.removal-pending form { display: block; }

/* deletion review (admin tab) — the case layout lives near the end of the file */
.deletion-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* one case per row, full width */

.deletion-fic-title { font-weight: bold; color: var(--ink); text-decoration: none; }

.deletion-fic-title:hover { color: var(--red); }

.deletion-reasons li {
  padding: 6px 0; border-bottom: 1px dotted var(--border);
  font-size: var(--fs-ui);
}

.deletion-reasons li:last-child { border-bottom: none; }

/* ============================================================
   AUTH EXTRAS — remember me, forced password change, temp password
   ============================================================ */

.remember-line {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 14px;
  font-size: var(--fs-ui); color: var(--ink);
  /* override auth-box label defaults (uppercase, bold, block) */
  text-transform: none;
  font-weight: normal;
  letter-spacing: normal;
}

/* .auth-box input sets width:100% and padding for the text fields — which also
   hits the checkbox, stretching it into a wide box so the label sat beside a
   distorted control. Checkboxes opt out. */
.auth-box input[type="checkbox"],
.remember-line input {
  width: auto;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.force-pw-banner {
  background: var(--red); color: var(--surface);
  padding: 12px 16px; border-radius: 4px;
  margin-bottom: 16px;
  font-size: var(--fs-body);
}

.temp-pw-notice {
  background: var(--page); border: 1px dashed var(--red);
  padding: 14px 16px; border-radius: 4px;
  margin-bottom: 16px;
  font-size: var(--fs-body);
}

.temp-pw-notice p { margin: 0 0 8px; }

.temp-pw-notice p:last-child { margin-bottom: 0; }

.temp-pw-value {
  font-family: monospace; font-size: var(--fs-lead);
  background: var(--surface); padding: 6px 10px;
  border-radius: 4px; display: inline-block;
  letter-spacing: 1px;
  user-select: all;  /* one-click copy */
}

/* ============================================================
   FIC PAGE — hunt for updates
   ============================================================ */

.hunt-updates {
  margin: 8px 0 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}

/* the two buttons sit side by side under the banner */
.hunt-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.hunt-banner {
  margin: 0; padding: 8px 14px;
  border-radius: 4px;
  font-size: var(--fs-ui);
  background: var(--page);
  border: 1px solid var(--border);
}

.hunt-banner-success   { background: var(--success-tint); border-color: var(--success-line); color: var(--success); }

.hunt-banner-quiet     { background: var(--page); color: var(--grey); font-style: italic; }

.hunt-banner-throttled { background: var(--warning-tint); border-color: var(--warning-line); color: var(--warning); font-style: italic; }

.hunt-banner-error     { background: var(--red-tint); border-color: var(--red); color: var(--red); }

/* ============================================================
   FIC PAGE — entry actions
   ============================================================ */

.entry-view-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 8px;
}

/* ============================================================
   SOUNDTRACKS — fic page + audio evidence in posts
   ============================================================ */

.platform-spotify { background: var(--brand-spotify); color: var(--surface); }

.platform-youtube { background: var(--brand-youtube); color: var(--surface); }

.platform-other   { background: var(--grey); color: var(--surface); }

/* social compose: audio input row (URL + caption + buttons) */
.audio-input-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 8px 0;
  background: var(--page);
  padding: 8px;
  border-radius: 4px;
}

/* the HTML [hidden] attribute should win over our display:flex above —
   without this override, audioInputRow stays visible by default. */
.audio-input-row[hidden] { display: none; }

.audio-input-row input[type="url"] { flex: 1 1 250px; min-width: 0; }

.audio-input-row input[type="text"] { flex: 1 1 200px; min-width: 0; }

/* social feed: a playlist attached to a post */
.post-playlist-attach {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 8px 0;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-ui);
}

.post-playlist-attach:hover { border-color: var(--red); }

.post-playlist-caption { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   AUTH PAGES — logo
   ============================================================ */

.auth-logo-wrap {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 14px;
  /* the SVG is tightly cropped — no zoom hack needed */
}

.auth-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   FIC PAGE — entry details: reread count, chapter, finished date; pile actions
   ============================================================ */

.chapter-input-row {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 14px;
}

.chapter-input {
  width: 70px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: var(--fs-body);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.entry-timestamp small { color: var(--grey); }

/* pile actions row in trove main column */
.pile-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

/* ============================================================
   SERIES PAGE
   ============================================================ */

/* parts use the normal card grid (a flex column would stretch each card,
   and its hover popup, the full page width) */
/* the series page is one full-width column, so its facts panel needs a cap —
   a row of four chips stretched across 1900px reads as a stray band */
/* One content width for the whole page. The series page is a single column
   with no sidebar, so nothing sets a natural measure — it had drifted to three
   different widths (facts 720, summary 900, edit panel 1390). 1000px is what
   the edit form needs for two comfortable columns (~458px each); everything
   else follows it so the page reads as one column of stacked panels. */
.series-page .fic-panel,
.series-page .fic-panel-summary,
.series-page .work-edit { max-width: 1000px; }

.series-parts-count {
  margin: 10px 0 0;
  font-size: var(--fs-body);
  color: var(--ink);
}

.series-parts { margin: 14px 0; }

.series-part { position: relative; }

.series-part-badge {
  display: inline-block;
  background: var(--red);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 5px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.series-part-missing {
  font-size: var(--fs-sm);
  margin: 5px 0 0;
  font-style: italic;
}

a.series-link {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted var(--red);
}

a.series-link:hover {
  color: var(--red);
}

/* ============================================================
   WRANGLING — entity selector, warning
   ============================================================ */

.wrangle-entity-selector {
  margin: 12px 0;
}

.wrangle-entity-selector label {
  font-size: var(--fs-body);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}

.wrangle-entity-selector select {
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}

/* soft warning when fandoms / characters selected */
.wrangle-warning {
  background: var(--warning-tint);
  border-left: 3px solid var(--warning-line);
  padding: 8px 12px;
  font-size: var(--fs-ui);
  color: var(--warning);
  margin: 8px 0 16px;
}

/* ============================================================
   WRANGLING — inspect panel
   ============================================================ */

.inspect-panel {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 14px 0;
}

.inspect-subheading {
  color: var(--grey);
  font-size: var(--fs-ui);
  margin: 4px 0 12px;
}

.inspect-rows {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.inspect-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-ui);
}

.inspect-row-canonical {
  border-color: var(--red);
  background: var(--surface);
}

.inspect-row .ws-star { color: var(--red); font-weight: bold; }

.inspect-name { flex: 1; }

.inspect-tag {
  background: var(--red);
  color: var(--surface);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

.inspect-row-actions {
  display: flex; gap: 10px;
}

.inspect-actions {
  display: flex; gap: 8px;
  margin-top: 8px;
}

/* ============================================================
   WRANGLING — existing groups
   ============================================================ */

.existing-groups {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.group-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.1s, background 0.1s;
}

.group-row:hover {
  border-color: var(--red);
  background: var(--page);
}

.group-canonical-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: bold;
}

.group-canonical-name .ws-star { color: var(--red); }

.group-meta { color: var(--grey); font-size: var(--fs-ui); }

/* ============================================================
   WRANGLING — workspace "make canonical" button
   ============================================================ */

.workspace-buttons {
  display: flex; gap: 8px; margin-top: 12px;
  flex-wrap: wrap;
}

/* .ws-chip and .ws-chip.is-canonical live in the WRANGLING WORKSPACE block
   above — this copy was overriding them (white fill, red canonical border) and
   has been removed. */
.ws-make-canonical {
  font-size: var(--fs-sm);
  margin-left: 4px;
}

/* wrangle mode bar — entry point + hint */
.mode-hint-active {
  color: var(--red) !important;
  font-weight: bold;
}

/* ============================================================
   GROUP HALLUCINATIONS — editing posts and comments; series link prompt
   ============================================================ */

.post-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.post-actions .link-button {
  font-size: var(--fs-sm);
  color: var(--grey);
  text-decoration: none;
}

.post-actions .link-button:hover { color: var(--red); text-decoration: underline; }

.edited-indicator {
  font-size: var(--fs-sm);
  color: var(--grey);
  font-style: italic;
  margin-left: 4px;
  cursor: help;
}

/* clickable comment profile (matches post-author hover) */
.post-comment-name {
  color: var(--ink);
  font-weight: bold;
  text-decoration: none;
}

.post-comment-name:hover { color: var(--red); text-decoration: underline; }

/* the comment avatar is an <a>; display:inline-block was overriding the flex
   centring from .post-avatar, so the creature icon sat top-left in its circle */
a.post-avatar-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.post-avatar-sm:hover { opacity: 0.85; }

/* inline edit textarea + buttons */
.inline-edit {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.inline-edit-textarea {
  width: 100%;
  min-height: 60px;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
}

.inline-edit-actions { display: flex; gap: 6px; }

/* post-meta needs to flex so actions push to the right */
.post-meta {
  font-size: var(--fs-ui);
  color: var(--grey);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-comment-meta {
  font-size: var(--fs-ui);
  color: var(--grey);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* series link-to-AO3 prompt (only shown when ao3_series_id is null) */
.series-link-prompt {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--page);
  border-radius: 4px;
  border-left: 3px solid var(--grey);
}

.series-link-prompt .muted { margin: 0 0 6px; font-size: var(--fs-ui); }

.series-link-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.series-link-form input[type="text"] {
  flex: 1;
  min-width: 200px;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ============================================================
   EDIT FORMS — the shared work / series edit form
   ============================================================ */

/* Fills its column. On the fic page that's the ~1390px left column; the series
   page is capped to the same figure below so the two panels match. No cap of
   its own: one here would stack with the form's cap inside it. */
.work-edit {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 16px 0;
}

/* the form sits in a ~1400px column, but form fields don't want to be 1400px
   wide — a title input that long is harder to read, not easier */
/* the form sits in a ~1400px column; two columns of ~560px read far better
   than one very long line per field */
/* no cap: the panel already sets the width (a second cap inside it would stop
   the two columns short of the space they have) */
.work-edit-form { max-width: none; }

/* the unlink action sits under the series fields inside the edit form */
.unlink-series-line { margin: 8px 0 0; }

.work-edit-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.work-edit-col { min-width: 0; }

.work-edit-col > *:first-child .sidebar-label,
.work-edit-col > .sidebar-label:first-child { margin-top: 0; }

.work-edit-form textarea { max-width: 100%; }

.work-edit-warning {
  background: var(--warning-tint);
  border-left: 3px solid var(--warning-line);
  padding: 8px 12px;
  font-size: var(--fs-ui);
  color: var(--warning);
  margin: 0 0 14px;
}

/* ============================================================
   FORM TYPE SCALE — shared by the add form and both edit forms
   (hoard new work · edit work · edit series)

   These three forms do the same job, so they share one type scale.
   Keep their rules here: separate copies are how they drifted apart.

   Hierarchy: section heading > field label > field text
   ============================================================ */

/* section heading (fieldset legends) — the most prominent thing */
.add-form legend {
  font-size: var(--fs-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  padding: 0 8px;
}

/* field labels — a step down from the heading above them */
.work-edit-form .sidebar-label,
.add-form label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin: 12px 0 4px;
}

.work-edit-col > *:first-child,
.add-form fieldset > *:first-of-type { margin-top: 0; }

/* checkbox / toggle labels are inline controls, not field labels */
.add-form .checkbox-item,
.add-form .check-line,
.work-edit-form .check-line {
  display: flex;
  font-size: var(--fs-ui);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
}

.add-form .toggle-icon {
  font-size: var(--fs-ui);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
  display: inline-flex;
}

/* hints sit inside a label, so they have to opt out of its casing */
.add-form .hint,
.work-edit-form .hint {
  font-weight: normal;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
  font-size: var(--fs-sm);
}

/* field text */
.work-edit-form input[type="text"],
.work-edit-form input[type="number"],
.work-edit-form input[type="date"],
.work-edit-form select,
.work-edit-form textarea,
.add-form input[type="text"],
.add-form input[type="number"],
.add-form input[type="date"],
.add-form select,
.add-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
}

.work-edit-form textarea,
.add-form textarea { resize: vertical; min-height: 80px; }

/* flex rather than grid so an individual field can be given more weight —
   title deserves more room than author, series link more than part number */
.work-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0;
}

.work-edit-row > div { flex: 1 1 160px; min-width: 0; }

.work-edit /* categories are short (F/F, gen) so they pair up; warnings get
   .check-grid-wide below, since their names are long enough to wrap */
.work-edit-form .check-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 2px 16px;
  margin: 4px 0 0;
}

/* the rows inside a group sit tight — the grid gap spaces them, so their own
   margins were making each group as airy as the space between groups */
.work-edit-form .check-grid .check-line { margin: 0; }

/* a label following a checkbox group starts a NEW group, so it gets a divider
   and real breathing room. Without this, "archive warnings → its boxes →
   categories → its boxes" all sat at the same rhythm and read as one run. */
.work-edit-form .check-grid + .sidebar-label {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 16px;
  margin: 4px 0 10px;
}

/* AO3's archive warning names are long — in a multi-column grid each wrapped to
   two lines. One per row uses the width that was sitting empty. Placed after
   the generic .check-grid so neither specificity nor order is in question. */
.check-grid-wide,
.work-edit-form .check-grid-wide { grid-template-columns: 1fr; }

/* .checkbox-group is flex, not grid — it needs a direction, not columns */
.checkbox-group-wide,
.add-form .checkbox-group-wide { flex-direction: column; gap: 4px; }

.work-edit-tag-note {
  font-size: var(--fs-ui);
  color: var(--grey);
  font-style: italic;
  margin: 10px 0;
}

.work-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.parts-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 10px;
}

.parts-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* the generic .work-edit-form input[type="number"] { width: 100% } outranks a
   plain .parts-edit-row input, so the number field was stretching and squashing
   the title. Fixed width, and the title takes what's left, left-aligned. */
.work-edit-form .parts-edit-row input[type="number"] {
  flex: 0 0 64px;
  width: 64px;
  text-align: center;
}

.parts-edit-row .parts-edit-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  /* long titles truncate rather than wrapping the row onto two lines */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parts-edit-name { font-size: var(--fs-ui); color: var(--ink); }

/* shared-record edit form — series link extras */
.current-series-line {
  margin: 14px 0 6px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 4px;
  border-left: 3px solid var(--grey);
  font-size: var(--fs-ui);
}

/* ============================================================
   GROUP HALLUCINATIONS — post edit panel (inline attachment editing)
   ============================================================ */

.post-edit-panel {
  margin: 8px 0;
  padding: 12px;
  background: var(--page);
  border-radius: 4px;
  border-left: 3px solid var(--red);
}

.post-edit-textarea {
  width: 100%;
  min-height: 60px;
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  resize: vertical;
}

.post-edit-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.post-edit-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-ui);
}

.post-edit-attachment .post-attach-label {
  color: var(--grey); font-size: var(--fs-sm); text-transform: uppercase;
}

.post-edit-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }

.post-edit-remove {
  background: none; border: none; cursor: pointer;
  color: var(--grey); font-size: var(--fs-lead); line-height: 1;
  padding: 0 4px;
}

.post-edit-remove:hover { color: var(--red); }

.post-edit-image-row,
.post-edit-fic-row,
.post-edit-audio-row {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.post-edit-fic-row input[type="text"],
.post-edit-audio-row input[type="url"],
.post-edit-audio-row input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.post-edit-fic-results {
  display: flex; flex-direction: column;
  gap: 2px;
  max-height: 160px; overflow-y: auto;
}

.post-edit-add-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0;
}

.post-edit-form-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   HOME SIDEBAR — stalk + hideout pulse
   Home is a dashboard, so its side column shows what's happening
   across the site rather than filters that don't apply to it.
   ============================================================ */

.home-sidebar {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  /* Home's sidebar is a read-through column, not a control panel: it has no
     apply button to keep reachable, so it doesn't need to stick or scroll
     internally. It runs its natural height and moves with the page.
     (Sticky would be worse here — taller than the viewport, its bottom would
     never come into view once the top pinned.) */
  position: static;
  max-height: none;
  overflow: visible;
  height: fit-content;
}

.home-sidebar .sidebar-actions { margin-bottom: 14px; }

.home-sidebar .sidebar-actions .button { width: 100%; text-align: center; }

.stalk-form { margin-bottom: 16px; }

/* the boxed header bar is a phone thing; see the mobile block */
.home-pulse-head { display: none; }

/* the site at a glance — damage report has the detail, this is the shape */
.archive-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 6px;
  text-align: center;
}

.stat-n {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-lead);
  font-weight: bold;
  color: var(--red);
  line-height: 1.1;
}

.stat-label { display: block; font-size: var(--fs-xs); color: var(--grey); margin-top: 2px; }

/* the vibe is flavour rather than something you act on, so it gets its own
   framed card between the pulse and the numbers instead of a loud band */
.vibe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  /* the pulse above ends on a text row with no border of its own, so the card
     needs the gap rather than relying on the pulse's spacing */
  margin: 18px 0 14px;
}

.vibe-label {
  margin: 0 0 7px;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
}

a.vibe-chip:hover { background: var(--red); border-color: var(--red); color: var(--surface); text-decoration: none; }

.stalk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.archive-pulse .filter-group-label:first-child { padding-top: 0; border-top: none; }

.pulse-row {
  display: flex;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
}

.pulse-row:hover { background: var(--surface); text-decoration: none; }

.pulse-row i, .pulse-row svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

.pulse-text { font-size: var(--fs-ui); line-height: 1.4; min-width: 0; }

.pulse-target { color: var(--red); }

.pulse-when { display: block; color: var(--grey); font-size: var(--fs-sm); white-space: nowrap; }

.pulse-empty { font-size: var(--fs-ui); font-style: italic; margin: 0; }

/* the site's shared favourite */
.pulse-top {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--ink);
}

.pulse-top:hover { border-color: var(--red); text-decoration: none; }

.pulse-top-title { display: block; font-size: var(--fs-ui); font-weight: bold; }

.pulse-top-meta { display: block; font-size: var(--fs-sm); color: var(--grey); margin-top: 2px; }

/* ============================================================
   DAMAGE REPORT
   Grouped by question rather than by data type: how much (heroes),
   what shape (consumption analysis), what you're drawn to
   (psychic vulnerabilities). Everything in red links to browse.php
   filtered by that entity.
   ============================================================ */

/* every stat sits in a card, so the page reads as grouped blocks
   rather than a continuous run of headings and charts */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
}

.stat-section {
  margin-bottom: 26px;
}

.stat-section > .stat-card { margin-bottom: 12px; }

/* three equal columns: the donut, the extremes it doesn't cover, and the four
   headline numbers */
.stat-analysis-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.stat-analysis-donut { display: flex; }

.stat-analysis-donut .stat-card { flex: 1; display: flex; align-items: center; }

/* the extremes card is a direct grid child — it has to fill its cell before
   spreading its rows over that height means anything */
.stat-analysis-row > .length-stats { height: 100%; box-sizing: border-box; }

/* 2x2, filling its column's height alongside the other two */
.stat-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-bottom: 0;
}

.stat-hero {
  flex: 1;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 16px 14px;
  text-align: center;
}

.stat-hero-num {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-title);
  font-weight: bold;
  color: var(--red);
  line-height: 1;
}

.stat-hero-label { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--grey); }

.stat-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}

.stat-three-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

/* donut and its legend side by side rather than stacked */
/* donut left, legend pushed to the box's right edge — `justify-content: center`
   pulled them together into the middle with space either side */
.donut-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.donut-row .donut { flex-shrink: 0; }

.donut-row .meter-legend-stacked { margin-left: auto; }

.meter-legend-stacked { display: flex; flex-direction: column; gap: 4px; }

/* label left, work right, on ONE line (the <a> is a flex child, not a block,
   so it doesn't wrap to its own row) */
/* the card is as tall as its neighbours, so the three rows spread across that
   height rather than bunching at the top with dead space beneath */
.length-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.length-stats p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-ui);
  flex-direction: row;   /* explicit, so no other .length-stats rule can flip it */
  flex-wrap: nowrap;
}

.length-stats p:last-child { padding-bottom: 0; border-bottom: none; }

.length-stats span { color: var(--grey); flex-shrink: 0; }

/* each names a specific work, so each is a link to it */
.length-stats a {
  text-align: right;
  font-weight: bold;
  color: var(--red-dark);
  text-decoration: none;
  min-width: 0;
}

.length-stats a:hover { color: var(--red); text-decoration: underline; }

.stat-sub {
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: normal;
  color: var(--grey);
}

.stat-hint { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--grey); }

/* the cloud is made of real tag chips that scale with frequency, so a tag
   looks like a tag here too */
.tag-cloud {
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

/* bar rows: name, bar, count */
.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: var(--fs-sm);
}

.stat-bar-row:last-child { margin-bottom: 0; }

.stat-bar-label {
  font-size: var(--fs-ui);
  color: var(--ink);
  text-align: right;
  flex: 0 0 42%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-bar-label a { color: var(--red-dark); text-decoration: none; }

.stat-bar-label a:hover { color: var(--red); text-decoration: underline; }

.stat-bar-track {
  flex: 1;
  height: 9px;
  background: var(--hover);
  border-radius: 99px;
  overflow: hidden;
}

.stat-bar-fill {
  border-radius: 4px;
  display: block;
  height: 100%;
}

.stat-bar-n {
  font-size: var(--fs-ui);
  flex: 0 0 28px;
  text-align: right;
  font-weight: bold;
  color: var(--grey);
}

/* ============================================================
   HOUSEKEEPING — account card, admin card, danger strip
   Full-width cards, each split into two columns: your account
   (credentials | exposure + save), then the admin card (creatures |
   keys), then the danger strip.
   ============================================================ */

/* the cards stack, each full width (account, then the admin card); the
   two-column split happens INSIDE each card (.settings-card-cols) */
.settings-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  max-width: 1400px;
}

/* account: credentials | exposure + meta + save
   admin:   creatures   | keys */
.settings-card-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  align-items: start;
}

.settings-card-col { min-width: 0; }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 22px 26px;
}

.settings-card-title {
  margin: 0 0 18px;
  font-size: var(--fs-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Outranks the field labels below it: at the same size, weight and casing as
   .settings-label, a heading like "KEYS" would read as a sibling of the
   field labels under it rather than as their heading. */
.settings-sub-title {
  margin: 0 0 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-lead);
  font-weight: bold;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

.settings-subsection {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.settings-subsection-first { margin-top: 0; padding-top: 0; border-top: none; }

/* the breadcrumbs (invite code): save + pause initiations, one row */
.invite-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; }

/* initiated / role / dark mode: one quiet line */
.settings-meta {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-ui);
  color: var(--grey);
}

.settings-save { margin-top: 14px; }

/* matches the shared form scale used by add / edit work / edit series */
.settings-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin: 16px 0 5px;
}

.settings-card .settings-form > *:first-child + .settings-label { margin-top: 0; }

.settings-card input[type="text"],
.settings-card input[type="password"],
.settings-danger-strip input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-ui);
  margin-bottom: 8px;
}

/* the help line sits between two password fields, so it needs room on both
   sides rather than pressing against the confirm box below it */
.settings-card .settings-help + input { margin-top: 10px; }

/* an intro sits under its heading and explains the block below it */
.settings-intro {
  margin: 0 0 14px;
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* smaller notes attached to a single field */
.settings-help { font-size: var(--fs-ui); color: var(--grey); margin: 4px 0 0; line-height: 1.55; }

/* Creatures are grouped by role, so "who holds power here" is answerable
   without reading every row's button. */
.creature-group-label {
  margin: 16px 0 4px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey);
}

.creature-group-caretakers { color: var(--red); margin-top: 4px; }

.creature-list { list-style: none; margin: 0; padding: 0; }

.creature-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hover);
  flex-wrap: wrap;
}

.creature-row:last-child { border-bottom: none; }

/* housekeeping's member list: the avatar carries the row's visual weight, so
   the username stays small — any bigger and it competes with the section
   heading. (The profile's big avatar is .profile-avatar.) */
.member-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-color, var(--red));
  color: var(--surface);
}

.member-row-avatar i, .member-row-avatar svg { width: 16px; height: 16px; color: var(--surface); stroke: var(--surface); }

.creature-ident { flex: 1; min-width: 0; }

.creature-username { display: block; font-size: var(--fs-ui); color: var(--ink); }

.creature-since { display: block; font-size: var(--fs-sm); color: var(--grey); }

/* ONE .creature-actions rule on purpose — a second copy would quietly win */
.creature-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  /* sits under the avatar and name, which are centred */
  justify-content: center;
  margin-bottom: 14px;
}

.creature-actions .button { font-size: var(--fs-sm); padding: 5px 11px; }

/* leaving is a one-line strip under both cards, not a full section */
/* the danger heading sits outside the strip, like the card titles */
.settings-danger-title {
  margin: 26px 0 10px;
  font-size: var(--fs-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

.settings-danger-strip {
  /* as wide as the cards above (they're full width now), so it reads as a
     peer of them rather than a stray box */
  max-width: 1400px;
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--pink);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 18px 22px;
}

/* confirmation of whatever you just wrangled — a bare reload gave no sign
   anything had happened */
.wrangle-flash {
  background: var(--success-tint);
  border: 1px solid var(--success-line);
  border-left: 3px solid var(--success);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: var(--fs-ui);
  color: var(--success);
}

/* and the group you just made is briefly marked, so you can see it */
.group-row.just-wrangled {
  border-color: var(--success);
  box-shadow: 0 0 0 2px var(--success-glow);
}

/* three columns, the same shell as trove: pools left, chips centre,
   workspace right */
/* proportioned in card widths: the page fits five, so one column for the
   nav, three for the chips, one for the workspace */
.wrangle-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 16px;
  align-items: start;
}

.wrangle-nav {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  position: sticky;
  top: 12px;
}

.wrangle-nav .pool-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 2px;
  font-family: inherit;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  cursor: pointer;
}

.wrangle-nav .pool-tab i, .wrangle-nav .pool-tab svg { width: 15px; height: 15px; flex-shrink: 0; }

.wrangle-nav .pool-tab .search-count { margin-left: auto; }

.wrangle-nav .pool-tab:hover { background: var(--page); color: var(--red); }

.wrangle-nav .pool-tab.active { background: var(--surface-warm); color: var(--red); }

.wrangle-nav-action {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}

.wrangle-nav-action .button { width: 100%; text-align: center; }

.wrangle-nav-action .hint { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.45; }

.wrangle-main { min-width: 0; }

/* inspect and workspace stack in the right column — everything wrangling-
   related happens in one place instead of scattered up the page */
.wrangle-side {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.wrangle-side .inspect-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 14px;
  margin: 0;
}

/* the toolbar: what you're wrangling, how to find it, how it works */
.wrangle-top .wrangle-search { flex: 1; margin: 0; }

.wrangle-top .wrangle-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-ui);
}

/* ============================================================
   TAG WRANGLING — three pools, one at a time
   The pools are the same kind of thing (a pool of chips) shown
   three ways, so they're one view with a switcher rather than
   three stacked full-width sections.
   ============================================================ */

.wrangle-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.wrangle-top .wrangle-entity-selector { margin: 0; }

.pool-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
}

.pool-intro {
  margin: 0 0 14px;
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* one box per suspected duplicate set, so it's obvious which names the
   archive thinks belong together */
.suggestion-cluster {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 8px;
}

/* the workspace is its own column now, sticky via .wrangle-side, so it stays
   in view while you scroll a long pool picking chips */
.workspace-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 14px;
}

/* ------------------------------------------------------------
   ABANDONMENT VERDICTS
   The actual fic card, with voting docked underneath — deciding a
   work is dead from a title and a date alone is thin.
   ------------------------------------------------------------ */
.verdict-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));   /* same rule as .fic-card-grid */
  gap: 12px;
  /* every card + verdict pair in a row takes the row's full height, so the
     boxes end level and their buttons line up */
  align-items: stretch;
}

/* The vote panel is its own block BELOW the card, not squeezed inside its box.
   Wrapping both in one bordered container made the card's own padding fight
   the panel's, and left no room to breathe between them. */
.verdict-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* the card keeps its own border and card treatment — it IS a card */
.verdict-card .fic-card { margin: 0; }

.verdict-vote-panel {
  /* fills the rest of its pair's height; the buttons sit at the bottom */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  /* site red, not the dropped-taupe: taupe is the "dead" colour, so a taupe
     edge read as the panel having already reached a verdict */
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 14px 16px;
}

.verdict-vote-panel .verdict-meta {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  color: var(--grey);
}

.verdict-bar {
  display: flex;
  height: 9px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--hover);
  margin-bottom: 7px;
}

/* red, not the dropped-taupe — same pair as the tally and the buttons */
.verdict-bar-dead { background: var(--red); }

.verdict-bar-hope { background: var(--status-reading); }

.verdict-vote-panel .verdict-tally { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--grey); }

.verdict-vote-panel .verdict-vote { display: flex; flex-direction: row; gap: 6px; margin-top: auto; }

/* nobody has voted yet: the track, empty */
.verdict-bar.verdict-bar-empty { background: var(--border); }

.verdict-vote-panel .verdict-vote .button { flex: 1; text-align: center; padding: 7px 10px; }

/* the facts panel and the verdict box share a row, so "weigh in" sits beside
   the work's info instead of at the far edge of a 1400px column */
.fic-facts-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.fic-facts-row .fic-panel-meta { flex: 1; min-width: 0; margin-bottom: 0; }

.fic-facts-row .verdict-box {
  flex: 0 0 240px;
  margin: 0;
  /* white like every other panel (the base .verdict-box rule sets cream) */
  background: var(--surface);
  border: 1px solid var(--border);
  /* site red, not the dropped-taupe: taupe means "dead", so a taupe edge read
     as the panel having already decided */
  border-top: 3px solid var(--red);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

/* the tally's panel heading, in .section-label's language (bold uppercase
   red) at panel scale */
.verdict-box-heading {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

.fic-facts-row .verdict-box .vote-tally { margin: 0; font-size: var(--fs-ui); }

.fic-facts-row .verdict-box .button { align-self: center; }

/* ------------------------------------------------------------
   DELETION REQUESTS — a case file
   What the work IS on the left, the case for removing it on the
   right. The reasons are free text and are the whole point, so
   they get the room a grid cell wouldn't give them.
   ------------------------------------------------------------ */
.deletion-case {
  display: flex;
  flex-direction: row;
  gap: 18px;
  /* both columns take the box's height, so the right column's bottom row
     can sit level with the bottom of the work card */
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.deletion-work {
  flex: 0 0 290px;   /* one card wide */
  border-right: 1px solid var(--border);
  padding-right: 18px;
}

/* the card renders exactly as it does in any grid — status border, hoarded
   badge, flags. It just needs its own margin reset here. */
.deletion-work .fic-card { margin: 0; width: 100%; }

/* the popup drops below the card, straight onto the stakes line */
.deletion-work .fic-card-popup { display: none !important; }

/* what approving actually costs — the thing a reviewer most needs to know */
.deletion-stakes {
  margin: 0;
  padding-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--grey);
  font-style: italic;
}

.deletion-case-body {
  flex: 1;
  min-width: 0;
  /* requests at the top; the decision row at the bottom. With many
     requests the column (and the box) just grows. */
  display: flex;
  flex-direction: column;
}

/* bottom row: what releasing costs on the left, taking the free space; the
   two buttons on the right; bottoms aligned */
.deletion-decide {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 14px;
}

.deletion-decide .deletion-stakes { flex: 1 1 auto; min-width: 0; }

.deletion-decide .deletion-actions { flex: 0 0 auto; }

.deletion-count {
  margin: 0 0 10px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
}

.deletion-reasons { list-style: none; margin: 0 0 14px; padding: 0; }   /* the 14px keeps the decision row off the last request */

.deletion-reason { display: flex; gap: 9px; margin-bottom: 11px; }

.deletion-reason:last-child { margin-bottom: 0; }

.deletion-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--avatar-color, var(--red));
  color: var(--surface);
}

.deletion-avatar i, .deletion-avatar svg { width: 13px; height: 13px; }

.deletion-reason-body { font-size: var(--fs-ui); line-height: 1.5; min-width: 0; }

.deletion-reason-body .muted { font-size: var(--fs-sm); margin-left: 4px; }

.deletion-reason-text { display: block; font-style: italic; color: var(--ink-soft); }

.deletion-actions { display: flex; gap: 6px; flex-wrap: wrap; }