/* ============================================================
   css/components.css — pieces reused across pages: fic cards (+ hover popup, flags, status
   colours), chips, pickers, the filter sidebar and left nav, pile tiles,
   section headings, info buttons + panels, tooltips, mode toggle, modals.

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

   CONTENTS
      1. FORM CONTROLS — checkbox groups, star rating, status pills, flag toggles
      2. INFO BUTTON + PANEL — "how does it work?"
      3. FIC CARD, SECTION HEADINGS, FOLDER TILES
      4. FOLDER TILES — open folder
      5. STATUS CHIP
      6. PILE FORMS, PICKER AND EDIT BUTTONS
      7. PILE CHIPS AND THE "+ NEW PILE" CONTROL
      8. STATUS COLOURS — card borders, smart-folder icons
      9. FLAG BADGES ON FIC CARDS
     10. LEFT NAV — smart views, pile tree; sidebar forms
     11. FILTER TOGGLE CHIPS
     12. FIC CARD HOVER POPUP; MODE TOGGLE; HOARDED BADGE
     13. AVATAR AND COLOUR CHIPS
     14. PICKER KIND LABEL — work / series
     15. SERIES STATE BADGE; CHIP COUNTS
     16. TAG CHIPS
     17. MODAL DIALOG
     18. FLASH BANNER
     19. PICKER — the "add a new work" link
     20. PLATFORM CHIPS — Spotify / YouTube / other
     21. TAG CHIP — the canonical star
     22. FILTER SIDEBAR — sort row, direction toggle, word range, actions
     23. PILE TILE — a stack of paper
     24. VIBE CHIP
     25. CLOUD CHIP (damage report); MODE TOGGLE SPACING
     26. TOOLTIPS — hover explainers on themed wording
   ============================================================ */

/* ============================================================
   FORM CONTROLS — checkbox groups, star rating, status pills, flag toggles
   ============================================================ */

/* checkbox groups (warnings, categories) */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  font-size: var(--fs-ui);
  color: var(--ink);
  margin: 0;
}

.checkbox-item input { width: auto; }

/* star rating (JS-driven) */
.star-rating {
  display: inline-flex;
  gap: 4px;
}

.star-rating .star {
  font-size: var(--fs-title);
  color: var(--border);
  cursor: pointer;
}

.star-rating .star.lit {
  color: var(--red);
}

/* reading status pills */
.status-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-pills .pill {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: var(--fs-ui);
  color: var(--grey);
  cursor: pointer;
  background: var(--surface);
}

.status-pills .pill.selected {
  background: var(--red);
  color: var(--surface);
  border-color: var(--red);
}

/* selected pill takes its status color (matches the card border) */
.status-pills .pill[data-value="untouched"].selected {
  background: var(--status-untouched); border-color: var(--status-untouched); color: var(--warning);
}

.status-pills .pill[data-value="reading"].selected {
  background: var(--status-reading); border-color: var(--status-reading); color: var(--surface);
}

.status-pills .pill[data-value="finished"].selected {
  background: var(--status-finished); border-color: var(--status-finished); color: var(--surface);
}

.status-pills .pill[data-value="dropped"].selected {
  background: var(--status-dropped); border-color: var(--status-dropped); color: var(--surface);
}

/* toggle icons (favorite, downloaded, etc — JS-driven) */
.toggle-icons {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}

.toggle-icon {
  cursor: pointer;
  margin: 0;
}

.toggle-icon input { display: none; }

.toggle-icon i,
.toggle-icon svg {
  width: 26px;
  height: 26px;
  color: var(--border);
  stroke: var(--border);
}

/* each active toggle takes its own flag color (matches the card badges) */
.toggle-icon.on .lucide-heart       { color: var(--status-favorite);   stroke: var(--status-favorite);   fill: var(--status-favorite); }

.toggle-icon.on .lucide-bookmark    { color: var(--status-want);      stroke: var(--status-want);      fill: var(--status-want); }

.toggle-icon.on .lucide-refresh-cw  { color: var(--flag-reread);     stroke: var(--flag-reread); }

.toggle-icon.on .lucide-save        { color: var(--flag-downloaded); stroke: var(--flag-downloaded); }

.toggle-icon.on .lucide-help-circle { color: var(--flag-mystery);    stroke: var(--flag-mystery); }

/* ============================================================
   INFO BUTTON + PANEL — "how does it work?"
   ============================================================ */

/* ONE info button, everywhere. Every box property is pinned here, so the
   row it sits in (heading, search bar, fetch bar, form label) can't stretch,
   shrink or re-pad it — no per-context overrides. */
.info-btn {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  line-height: 1;
  cursor: pointer;
}

.info-btn i, .info-btn svg {
  width: 18px;
  height: 18px;
  color: var(--grey);
  stroke: var(--grey);
}

/* the "how does it work?" bubble opens LEFTWARD at every width: these buttons
   end their row, and a rightward bubble ran off the screen edge (clipped on
   desktop, a sideways scroll on phones). On touch it's dropped entirely —
   there's no hover to show it, and a tap opens the panel anyway. */
.info-btn.tip::after  { left: auto; right: 0; }

.info-btn.tip::before { left: auto; right: 14px; }

.info-dropdown {
  max-width: 600px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--ink-soft);
}

.info-dropdown .info-title {
  font-weight: bold;
  color: var(--red);
  margin-bottom: 6px;
}

.info-dropdown p { margin-bottom: 6px; }

.info-dropdown p:last-child { margin-bottom: 0; }

/* ============================================================
   FIC CARD, SECTION HEADINGS, FOLDER TILES
   ============================================================ */

/* EVERY section heading on the site is this one structure:
     <div class="section-head">
       <h2 class="section-label">…</h2>
       [info button]  [side link: .see-all / .back-link]
     </div>
   The rule belongs to the ROW, so it always spans the full content width.
   (On the <h2> itself it broke the moment the h2 sat in a flex row: the h2
   shrinks to its text and so did its underline — two heading styles from
   one class, decided by the parent.) The info button follows the heading
   text; a side link goes to the far end of the same line. */
.section-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

.section-label {
  /* the text only — spacing and the rule come from .section-head */
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

/* profile headings carry their view's icon */
.section-label i, .section-label svg { width: 15px; height: 15px; }

.section-head .see-all,
.section-head .back-link { margin-left: auto; }

/* trove: the open pile's "edit" link sits beside its name */
.section-head .pile-edit-btn { font-size: var(--fs-ui); }

.folder {
  width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: 4px;
  padding: 14px 10px;
  text-align: center;
  color: var(--ink);
  box-shadow: 0 1px 3px var(--shadow-sm);
}

.folder:hover {
  box-shadow: 0 3px 8px var(--shadow-md);
  text-decoration: none;
}

/* fic cards */
.fic-card-grid {
  display: grid;
  /* Columns: as many 290px ones as fit, sharing out the leftover width, so the
     grid starts at the page title's left edge and cards grow a little where
     there's room. The CARD is capped at 360px separately (responsive.css,
     desktop only), so a lone column in a narrow middle (trove between its two
     sidebars) can't stretch a card to twice its width. The cap is on the card,
     not the track: with a fixed 360px track maximum, auto-fill would count
     360px columns and fit fewer cards per row.
     auto-FILL, not auto-fit: a short row (verdicts with 2-3 works) keeps its
     empty tracks, so those cards stay row-sized instead of ballooning. */
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  /* generous row gap so the hover dropdown has room to expand into without
     visually crashing into the row below (the row below is still there, just
     covered while hovering — that's the intended tradeoff) */
  row-gap: 20px;
}

/* home uses the same grid as everywhere else — forcing five columns was what
   made its cards a different size from lurk's and trove's */

.see-all {
  font-size: var(--fs-ui);
  color: var(--red);
  white-space: nowrap;
}

.see-all:hover { text-decoration: underline; }

.fic-card {
  display: flex;
  flex-direction: column;
  /* top block pinned top, meta chips pinned bottom,
     title+fandom float in the middle with the slack around them */
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px var(--shadow-sm);
  /* fixed height for uniform grid appearance.
     Title clamps to 2 lines, fandom truncates, meta chips wrap.
     Sized for the worst case: 2-line title + 2-line fandom + 2 chip rows. */
  height: 240px;
  position: relative;
}

.fic-card:hover {
  text-decoration: none;
  box-shadow: 0 3px 8px var(--shadow-md);
  /* lift hovered card above siblings so the dropdown covers what's below */
  z-index: 40;
}

/* top block: two independent columns.
   LEFT  = rating, hoarded badge underneath
   RIGHT = reading status, flag icons underneath
   Separate columns, so flags can never push the rating onto its own line. */
.fic-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.fic-card-top-left,
.fic-card-top-right {
  display: flex;
  flex-direction: column;
  gap: 8px;   /* space between rating↔hoarded and status↔flags */
  min-width: 0;
}

.fic-card-top-left  { align-items: flex-start; }

.fic-card-top-right { align-items: flex-end; flex-shrink: 0; }

.fic-card-top .chip-status {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--grey);
  text-transform: lowercase;
  white-space: nowrap;
}

.fic-card-top .fic-card-rating {
  color: var(--red);
  white-space: nowrap;
}

.fic-card-top .fic-card-rating .muted { color: var(--grey); font-style: italic; }

.fic-card-top .hoarded-badge {
  font-size: var(--fs-xs);
  padding: 1px 5px;
}

/* title + fandom as one unit, floating in the middle of the card */
.fic-card-body {
  flex-shrink: 0;
}

.fic-card-title {
  font-size: var(--fs-lead);
  font-weight: bold;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.fic-card-fandom {
  font-size: var(--fs-ui);
  color: var(--grey);
  margin-bottom: 0;
  /* wrap to 2 lines instead of cutting off with an ellipsis —
     multi-fandom works were losing readable text */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1.35;
}

.fic-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.fic-card-meta .chip {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--grey);
}

.fic-card-meta .chip-pairing {
  background: var(--red-tint);
  border-color: var(--red);
  color: var(--red);
  font-weight: bold;
}

.fic-card-meta .chip-meta {
  background: var(--surface);
  color: var(--grey);
}

/* language chip only renders for NON-english works, so give it a distinct
   amber look — when you see it, it means something. */
.fic-card-meta .chip-lang {
  background: var(--warning-tint);
  border-color: var(--warning-line);
  color: var(--warning);
  font-weight: bold;
}

.fic-card-rating {
  font-size: var(--fs-sm);
  color: var(--red);
}

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

/* ============================================================
   FOLDER TILES — open folder
   ============================================================ */

/* highlight the open smart folder */
.folder.open {
  border-top-width: 5px;
  box-shadow: 0 3px 10px var(--red-glow);
}

/* ============================================================
   STATUS CHIP
   ============================================================ */

/* reading status as a chip in its own colour — the same scale the card
   borders and the edit-form pills use */
.status-chip {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 2px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--grey);
}

.status-chip[data-value="untouched"] { background: var(--status-untouched); border-color: var(--status-untouched); color: var(--warning); }

.status-chip[data-value="reading"]   { background: var(--status-reading);   border-color: var(--status-reading);   color: var(--surface); }

.status-chip[data-value="finished"]  { background: var(--status-finished);  border-color: var(--status-finished);  color: var(--surface); }

.status-chip[data-value="dropped"]   { background: var(--status-dropped);   border-color: var(--status-dropped);   color: var(--surface); }

/* ============================================================
   PILE FORMS, PICKER AND EDIT BUTTONS
   ============================================================ */

/* create / edit pile form */
.pile-form[hidden],
.pile-picker[hidden] { display: none; }

.pile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-bottom: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  box-shadow: 0 2px 6px var(--shadow-sm);
}

.pile-form input[type="text"] {
  flex: 1 1 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
}

.pile-form select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--surface);
}

.folder.pile a { color: var(--ink); display: block; }

.folder.pile a:hover { text-decoration: none; }

/* edit icon in the corner of a pile */
/* .pile-edit-btn is used in two places: a small icon pinned to a pile card's
   corner, and a full "edit pile" button in .pile-actions. Only the corner
   icon is absolutely positioned — on every copy, it would tear the
   .pile-actions button out of the flow. */
.folder .pile-edit-btn,
.nav-pile-row .pile-edit-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  z-index: 2;
}

.pile-edit-btn i, .pile-edit-btn svg {
  width: 15px;
  height: 15px;
}

.folder .pile-edit-btn i, .folder .pile-edit-btn svg,
.nav-pile-row .pile-edit-btn i, .nav-pile-row .pile-edit-btn svg {
  color: var(--grey);
  stroke: var(--grey);
}

.pile-edit-btn:hover i, .pile-edit-btn:hover svg {
  color: var(--red);
  stroke: var(--red);
}

/* pile form label wrapping the dropdown */
.pile-form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
}

/* ============================================================
   PILE CHIPS AND THE "+ NEW PILE" CONTROL
   ============================================================ */

/* fic page: piles this fic is in */
/* piles sit inside the entry panel now — a divider instead of a gap */
.pile-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-ui);
  padding: 3px 4px 3px 10px;
  border-radius: 99px;
  background: var(--red-tint);
  border: 1px solid var(--pink);
  color: var(--red);
}

.pile-chip-remove { display: inline; margin: 0; }

/* "+ new pile" — directly under a pile picker (add.php, fic.php). Same
   pill as .pile-chip, dashed and unfilled: a pile that doesn't exist yet. */
.new-pile { width: 100%; margin: 2px 0 6px; }

.new-pile-chip {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 3px 10px;
  border-radius: 99px;
  background: none;
  border: 1px dashed var(--red);
  color: var(--red);
  cursor: pointer;
}

/* the open row: field takes the width, "make it" its natural width, both
   one height so they line up whatever form they sit in (the form's own
   input rules set width and padding, never height) */
.new-pile-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.new-pile input.new-pile-name {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 34px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-ui);
}

/* outline, never solid — the form's own submit stays the one solid button.
   Its own hover too: .button-outline's fills red, and on touch a hover sticks. */
/* .button in the selector on purpose: it outranks .your-entry .button (the
   fic page's entry panel, which this button sits inside) by specificity, so
   the result doesn't depend on which stylesheet loads first */
.new-pile .button.new-pile-make {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  padding: 0 14px;
  font-size: var(--fs-ui);
  white-space: nowrap;
}

.new-pile .button.new-pile-make:hover {
  background: var(--red-tint);
  color: var(--red);
  border-color: var(--red);
}

/* a ticked row that won't exist until the form is saved */
.new-pile-tag {
  margin-left: 5px;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--grey);
}

.pile-chip-remove button {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 0 4px;
}

.pile-chip-remove button:hover { color: var(--red-dark); }

/* stacked, not side by side: as a flex sibling the button stretched to the
   picker box's full height, which turned it into a giant red slab */
.add-pile-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.add-pile-form .picker-box { width: 100%; }

.add-pile-form select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--surface);
}

/* the add-works picker */
.pile-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin: 12px 0;
  max-width: 480px;
}

.picker-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body);
  margin-bottom: 10px;
}

.picker-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 10px;
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: var(--fs-body);
  border-radius: 4px;
  cursor: pointer;
}

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

.picker-actions { display: flex; gap: 8px; }

/* ============================================================
   STATUS COLOURS — card borders, smart-folder icons
   ============================================================ */

/* being consumed = reading = vibrant gold */
.folder-reading { border-top-color: var(--status-reading); }

/* marked for TBR = marked-for-later blue */

/* sacred texts = favorite = berry */
.folder-favorites { border-top-color: var(--status-favorite); }

/* user piles = AO3 red (override the blue from earlier .folder.pile rule) */
.folder.pile {
  position: relative;
  border-top-color: var(--red);
}

/* fic card left borders — make sure these match the status palette */
.fic-card.status-reading   { border-left-color: var(--status-reading); }

.fic-card.status-finished  { border-left-color: var(--status-finished); }

.fic-card.status-dropped   { border-left-color: var(--status-dropped); }

.fic-card.status-untouched { border-left-color: var(--status-untouched); }

/* fics you haven't hoarded (seen on lurk / other people's piles) —
   neutral border, no status claimed */
.fic-card.no-entry         { border-left-color: var(--border); }

/* ============================================================
   FLAG BADGES ON FIC CARDS
   (sit in the top-right column, under the reading-status chip)
   ============================================================ */

/* .fic-card already sets `position: relative` in its own rule — the flag
   badges just rely on it */

.fic-card-flags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fic-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.fic-flag i, .fic-flag svg {
  width: 12px;
  height: 12px;
  color: var(--surface);
  stroke: var(--surface);
}

.fic-flag.flag-favorite   { background: var(--status-favorite); }

.fic-flag.flag-later      { background: var(--status-want); }

.fic-flag.flag-reread     { background: var(--flag-reread); }

.fic-flag.flag-downloaded { background: var(--flag-downloaded); }

.fic-flag.flag-mystery    { background: var(--flag-mystery); }

/* (flag badges are in the top-right column now, so the title needs no offset) */

/* ============================================================
   LEFT NAV — smart views, pile tree; sidebar forms
   ============================================================ */

.nav-pile-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.nav-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-ui);
  border-left: 3px solid transparent;
}

.nav-folder i, .nav-folder svg { width: 16px; height: 16px; flex-shrink: 0; }

/* each nav entry's icon takes the same colour that flag has on cards, so the
   nav and the cards teach each other */
.nav-folder.folder-reading    i, .nav-folder.folder-reading svg    { color: var(--status-reading); }

.nav-folder.folder-favorites  i, .nav-folder.folder-favorites svg  { color: var(--status-favorite); }

.nav-folder.folder-later      i, .nav-folder.folder-later svg      { color: var(--status-want); }

.nav-folder.folder-reread     i, .nav-folder.folder-reread svg     { color: var(--flag-reread); }

.nav-folder.folder-downloaded i, .nav-folder.folder-downloaded svg { color: var(--flag-downloaded); }

.nav-folder.folder-mystery    i, .nav-folder.folder-mystery svg    { color: var(--flag-mystery); }

.nav-folder.folder-dusty      i, .nav-folder.folder-dusty svg      { color: var(--status-dropped); }

.nav-folder.folder-nopile     i, .nav-folder.folder-nopile svg     { color: var(--grey); }

.nav-folder:hover { background: var(--page); }

.nav-folder.active { background: var(--page); font-weight: bold; }

.nav-folder.folder-reading.active    { border-left-color: var(--status-reading); }

.nav-folder.folder-favorites.active  { border-left-color: var(--status-favorite); }

.nav-folder.folder-later.active      { border-left-color: var(--status-want); }

.nav-folder.folder-reread.active     { border-left-color: var(--flag-reread); }

.nav-folder.folder-downloaded.active { border-left-color: var(--flag-downloaded); }

.nav-folder.folder-mystery.active    { border-left-color: var(--flag-mystery); }

.nav-folder.folder-dusty.active      { border-left-color: var(--status-dropped); }

.nav-folder.folder-nopile.active     { border-left-color: var(--grey); }

/* divider before "not in any pile" — it's about sorting, not about how you
   marked something, so it gets its own group */
.nav-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 4px;
}

.nav-folder-name { flex: 1; }

.nav-pile-count {
  font-size: var(--fs-sm);
  color: var(--grey);
  background: var(--page);
  border-radius: 99px;
  padding: 1px 7px;
}

.nav-section-label {
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin: 14px 0 6px;
  padding: 0 8px;
}

.nav-empty { font-size: var(--fs-ui); color: var(--grey); padding: 0 8px; }

/* pile tree rows */
.nav-pile-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: calc(var(--depth, 0) * 14px);
  border-radius: 4px;
  border-left: 3px solid transparent;
}

.nav-pile-row:hover { background: var(--page); }

.nav-pile-row.active { background: var(--page); border-left-color: var(--red); }

.nav-expand {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--grey);
  width: 16px;
  flex-shrink: 0;
  transition: transform 0.12s;
  padding: 0;
}

.nav-expand.open { transform: rotate(90deg); }

.nav-expand-spacer { width: 16px; flex-shrink: 0; }

.nav-pile-link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-ui);
}

.nav-pile-link i, .nav-pile-link svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

.nav-pile-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-pile-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--grey);
  padding: 2px;
  opacity: 0;
  flex-shrink: 0;
}

.nav-pile-edit i, .nav-pile-edit svg { width: 14px; height: 14px; }

.nav-pile-row:hover .nav-pile-edit { opacity: 1; }

.nav-pile-edit:hover { color: var(--red); }

/* every direct child of the filter form shares one left edge and one width,
   so nothing is indented deeper than anything else */
.filter-form > * { width: 100%; box-sizing: border-box; }

.filter-form .sidebar-section-heading { width: auto; }

/* page actions sit at the very top of the sidebar: "things you can do on
   this page" right above "ways to filter this page". */
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

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

.sidebar-title {
  font-size: var(--fs-body);
  font-weight: bold;
  color: var(--red);
  margin-bottom: 12px;
}

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

/* inside the filter sidebar the field labels are quieter and smaller than
   the section headings above them, so the hierarchy reads at a glance */
.filter-form .sidebar-label {
  width: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin: 0 0 5px;
}

.filter-form select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-ui);
  background: var(--surface);
}

/* section headings inside the sidebar ("essentials", "archive deep dive")
   all share one look — they're the same kind of thing */
.filter-group-label,
.sidebar-section-heading {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  margin: 4px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-ui);
  color: var(--ink-soft);
  margin: 6px 0;
  cursor: pointer;
}

.filter-actions .button { text-align: center; }

/* type-to-filter picker boxes in the sidebar */
.picker-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--surface);
}

.picker-filter {
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: var(--fs-ui);
  border-radius: 6px 6px 0 0;
}

.picker-filter:focus { outline: none; border-bottom-color: var(--red); }

/* pickers kept short so the always-open sidebar doesn't become a huge scroll */
.picker-options {
  max-height: 84px;
  overflow-y: auto;
  padding: 6px 8px;
}

/* ============================================================
   FILTER TOGGLE CHIPS
   Real checkboxes with the input visually hidden (but still
   focusable for keyboard use). The <span> is what's styled.
   No JS — the browser handles checked state and form submission.
   ============================================================ */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
}

.filter-chip {
  display: inline-block;
  cursor: pointer;
}

.filter-chip input {
  /* visually hidden but still reachable by keyboard */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.filter-chip span {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

.filter-chip:hover span {
  border-color: var(--red);
  color: var(--red);
}

.filter-chip input:checked + span {
  background: var(--red);
  border-color: var(--red);
  color: var(--surface);
}

.filter-chip input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

.picker-options .check-line { margin: 4px 0; font-size: var(--fs-ui); }

/* ============================================================
   FIC CARD HOVER POPUP; MODE TOGGLE; HOARDED BADGE
   ============================================================ */

.fic-card-popup {
  position: absolute;
  /* DROPS BELOW the card on hover — card itself stays visible above.
     left/right at -1px so the popup's border lines up with the card's. */
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 50;
  display: none;
  /* Capped so the card stays visible above the popup even on long content.
     Anything that doesn't fit gets a scrollbar inside the popup itself. */
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--red);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px var(--shadow-lg);
  padding: 10px 12px;
  /* vertical stack: author → warnings → series → relationship → characters → tags → summary */
  flex-direction: column;
  gap: 6px;
  text-align: left;
  cursor: default;
}

.fic-card:hover .fic-card-popup { display: flex; }

.popup-summary {
  background: var(--page);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: var(--fs-ui);
  line-height: 1.5;
  color: var(--ink-soft);
}

.popup-line { font-size: var(--fs-ui); line-height: 1.4; margin: 0; color: var(--ink-soft); }

/* pipes between popup list items — spaced out and muted so the names read as
   separate values instead of one run-on "gojo|geto|blabla" string */
.popup-sep {
  margin: 0 7px;
  color: var(--border);
}

.popup-label {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--red);
  margin-right: 4px;
}

.popup-summary .popup-label { display: block; margin-bottom: 4px; }

/* "hoarded" marker on lurk cards (fic already in user's lair) */
.hoarded-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--status-reading);
  border: 1px solid var(--status-reading);
  border-radius: 99px;
  padding: 1px 8px;
}

/* me / everyone toggle on home — a chip-style segmented control (4px, matches the design system) */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.mode-opt {
  padding: 5px 16px;
  font-size: var(--fs-ui);
  color: var(--grey);
  text-decoration: none;
  background: var(--surface);
}

.mode-opt.active {
  background: var(--red);
  color: var(--surface);
}

/* ============================================================
   AVATAR AND COLOUR CHIPS
   ============================================================ */

.avatar-chip {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
}

.avatar-chip i, .avatar-chip svg { width: 22px; height: 22px; color: var(--ink-soft); }

.color-chip {
  display: block;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
}

/* ============================================================
   PICKER KIND LABEL — work / series
   ============================================================ */

/* works and series share one picker, so each row says which it is */
.picker-kind {
  display: inline-block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  border: 1px solid var(--border);
  color: var(--grey);
}

.picker-kind-series { border-color: var(--red); color: var(--red); }

/* ============================================================
   SERIES STATE BADGE; CHIP COUNTS
   ============================================================ */

.chip-n { color: var(--grey); font-size: var(--fs-sm); margin-left: 6px; }

.series-state-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--fs-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 99px;
  padding: 1px 8px;
}

.series-state-badge.is-complete { color: var(--red); border-color: var(--red); }

/* ============================================================
   TAG CHIPS
   ============================================================ */

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

.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--page); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 10px;
  font-size: var(--fs-ui); font-family: inherit; color: var(--ink);
  cursor: pointer;
  /* Tag names come from AO3 and some are whole sentences. Left alone, one
     chip takes most of a row and the wrapping grid loses all rhythm. The
     name truncates; the full text is on the tooltip. */
  max-width: 260px;
}

.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

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

.tag-chip.selected { background: var(--red); color: var(--surface); border-color: var(--red); }

.tag-chip.selected .chip-n { color: var(--white-a85); }

/* dashed = not sorted into a group yet */
.tag-chip.needs-wrangling { border: 1px dashed var(--red); background: var(--surface); }

/* red, matching .ws-star inside it and every other accent on this page */
.tag-chip.is-canonical { border-color: var(--red); border-width: 2px; padding: 3px 9px; }

.tag-chip.is-synonym  { opacity: 0.7; }

/* HOVER GOES LAST, and names the states explicitly: `.tag-chip.needs-wrangling`
   sets its own background at the SAME specificity, so a plain `.tag-chip:hover`
   above it would lose, and unsorted chips — the ones you most need to click —
   would look dead. */
.tag-chip:hover,
.tag-chip.needs-wrangling:hover,
.tag-chip.is-canonical:hover,
.tag-chip.is-synonym:hover { background: var(--hover); }

.tag-chip.selected:hover { background: var(--red-dark); }

/* ============================================================
   MODAL DIALOG
   ============================================================ */

/* modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--surface);
  border-radius: 6px;
  padding: 24px;
  max-width: 480px; width: 90%;
  box-shadow: 0 8px 24px var(--shadow-lg);
}

.modal h3 {
  margin: 0 0 12px;
  font-size: var(--fs-lead); color: var(--red);
}

.modal p { margin: 0 0 16px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* caretaker list in housekeeping */
/* (the .caretaker-* rules lived here; the creature list is grouped by role now
   and uses .creature-* — see the housekeeping block near the end of this file) */

/* ============================================================
   FLASH BANNER
   ============================================================ */

.flash-banner {
  background: var(--success-tint);
  border: 1px solid var(--success-line);
  color: var(--success);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: var(--fs-ui);
  margin: 0 0 16px;
}

/* the same banner, for something that went wrong (red, like .auth-error) */
.flash-banner.flash-error {
  background: var(--red-tint);
  border-color: var(--pink);
  color: var(--red);
}

/* ============================================================
   PICKER — the "add a new work" link
   ============================================================ */

/* used on both an <a> and a <button>, so it has to reset the button's own
   border, background and font — otherwise the two sit side by side looking
   like different kinds of control */
.picker-add-new {
  margin-left: auto;
  align-self: center;
  font-family: inherit;
  font-size: var(--fs-ui);
  line-height: inherit;
  color: var(--red);
  background: none;
  border: none;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.picker-add-new:hover { background: var(--page); }

/* ============================================================
   PLATFORM CHIPS — Spotify / YouTube / other
   ============================================================ */

/* the form field for adding your playlist URL */

/* platform chip — small pill colored per platform */
.platform-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}

/* ============================================================
   TAG CHIP — the canonical star
   ============================================================ */

/* .ws-star is red and bold for everyone now — this only adds the spacing */
.tag-chip .ws-star { margin-right: 2px; }

/* ============================================================
   FILTER SIDEBAR — sort row, direction toggle, word range, actions
   ============================================================ */

.sort-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 4px 0 12px;
}

.sort-select {
  flex: 1;
  font-family: inherit;
  font-size: var(--fs-ui);
  padding: 4px 6px;
}

.sort-dir-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  width: 32px;
  font-size: var(--fs-lead);
  line-height: 1;
  font-family: inherit;
  color: var(--ink);
  border-radius: 4px;
}

.sort-dir-toggle:hover {
  background: var(--page);
  border-color: var(--red);
  color: var(--red);
}

/* deep dive collapse */

.deepdive-content {
  /* "archive deep dive" is a plain heading (styled with .filter-group-label
   above), always open — no collapsible, no extra click. */
  display: block;
  border-left: 2px solid var(--page);
  padding-left: 10px;
  margin: 0 0 12px;
}

/* word count range inputs side-by-side */
/* stacked, not side by side — at sidebar width the second input ran off-screen */
.words-range {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 12px;
}

.words-range input { width: 100%; }

.words-range input {
  flex: 1;
  font-size: var(--fs-ui);
  padding: 4px 6px;
}

.words-range span { color: var(--grey); }

/* the filters are one column at every width */
.filter-cols { display: block; }

.filter-col-left {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  width: auto !important;
}

/* filter actions row at the bottom of the sidebar */
.filter-actions {
  flex-direction: column;
  gap: 8px;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   PILE TILE — a stack of paper
   Sheet count grows with the pile's size (capped), and an empty pile
   has no stack plus a dashed edge, so the shape reads before the
   number does. Top-sheet colour comes from the pile's name.
   ============================================================ */

.pile-tile {
  display: inline-block;
  width: 104px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.pile-tile:hover { text-decoration: none; }

.pile-stack {
  position: relative;
  display: block;
  /* the sheets only reach ~50px; the rest was empty space under the tile */
  height: 52px;
  margin-bottom: 2px;
}

.pile-sheet {
  position: absolute;
  width: 56px;
  height: 40px;
  left: 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--page);
}

/* the backing sheets, each nudged and rotated a little */
.pile-sheet-1 { top: 14px; transform: rotate(3deg);  background: var(--surface-warm); }

.pile-sheet-2 { top: 16px; left: 20px; transform: rotate(-6deg); background: var(--hover); }

.pile-sheet-3 { top: 18px; left: 27px; transform: rotate(7deg);  background: var(--hover); }

/* the top sheet carries the count and the pile's colour */
/* the count is a secondary detail — the pile's NAME is what you're scanning
   for, so the number is smaller and muted rather than dominating the tile */
.pile-sheet-top {
  top: 8px;
  z-index: 2;
  background: var(--surface);
  border-color: var(--red);
  border-top: 3px solid var(--red);
  color: var(--grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-ui);
  transition: transform 0.12s;
}

.pile-tile:hover .pile-sheet-top { transform: translateY(-2px); }

/* nothing in it: no stack, dashed edge, muted */
.pile-tile-empty .pile-sheet-top {
  border: 1px dashed var(--border);
  color: var(--border);
  font-weight: normal;
}

.pile-tile-name {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-ui);
  font-weight: bold;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}

.pile-tile:hover .pile-tile-name { color: var(--red); }

/* rows of tiles */
.folder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* ============================================================
   VIBE CHIP
   ============================================================ */

.vibe-chip {
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-body);
  padding: 5px 14px;
  border-radius: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
  text-decoration: none;
}

/* the fallback ("an empty void") isn't a real tag, so it isn't clickable */
.vibe-chip-none { font-style: italic; color: var(--grey); background: none; border-style: dashed; }

/* ============================================================
   CLOUD CHIP (damage report); MODE TOGGLE SPACING
   ============================================================ */

/* the toggle sits between the title and the subtitle, with room either side */
.mode-toggle + .page-subtitle { margin-top: 14px; }

.cloud-chip {
  background: var(--surface-warm);
  border: 1px solid var(--border);
  color: var(--red-dark);
  border-radius: 4px;
  padding: 3px 11px;
  text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}

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

/* ============================================================
   TOOLTIPS — hover explainers on themed wording
   The copy on this site is deliberately feral, which is fun once you
   know it and opaque on day one. These give a newcomer the plain
   meaning without sanding the wording down.

   Pure CSS: `class="tip" data-tip="..."` on the label itself. No
   marker, no icon, no JS — people know tooltips exist, and an
   indicator next to every nav item would be louder than the nav.

   Scope is STRUCTURAL LABELS ONLY — nav, section headings, stat
   headings, buttons. Never inline in a sentence: underlining half a
   paragraph is noise, and prose explains itself from context.

   Visual: the same white/6px/border panel as every other popup, so
   this adds no new visual vocabulary.
   ============================================================ */

.tip {
  position: relative;
  /* deliberately NO `cursor: help` — the question-mark cursor is intrusive,
     and every trigger keeps its own natural cursor instead (pointer on nav
     links and buttons, default on headings) */
}

/* the bubble */
.tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;

  /* ONE LINE wherever the screen allows. A tooltip that wraps reads as a
     paragraph and draws more attention than the label it's explaining —
     if a tip doesn't fit on one line on a laptop, the copy is too long,
     not the box. But never wider than the screen: on a narrow phone it
     wraps instead of running off the edge (the cap leaves the page's
     16px gutters free). */
  width: max-content;
  max-width: calc(100vw - 32px);
  white-space: normal;
  text-align: left;

  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px var(--shadow-md);

  /* the trigger may be bold, italic, uppercase or pink-on-red —
     the bubble resets all of it so every tooltip reads identically */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-sm);
  font-weight: normal;
  font-style: normal;
  /* `none`, not `lowercase` — this only needs to undo an inherited
     uppercase (ARCHIVE, section headings). Forcing lowercase turned
     "AO3" into "ao3" in every tip that names it. */
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.25s, visibility 0s linear 0.37s;
}

/* the little arrow — a rotated square so it inherits the panel border */
.tip::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 14px;
  z-index: 81;

  width: 9px;
  height: 9px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.25s, visibility 0s linear 0.37s;
}

/* :focus-visible as well as :hover, so keyboard users get them too.
   Headings and paragraphs carry tabindex="0" to be reachable at all;
   links and buttons already are. */
.tip:hover::after,
.tip:hover::before,
.tip:focus-visible::after,
.tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.25s, 0.25s;
}

/* --- variant: open to the right, for the trove's left nav ---
   Below would cover the next folder in the list, and the nav is only
   280px wide, so sideways is the only direction with room. */
.tip-right::after {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}

.tip-right::before {
  top: 50%;
  left: calc(100% + 5px);
  border-left: none;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transform: translateY(-50%) rotate(-45deg);
}

/* --- variant: a small ⓘ that carries the tooltip ---
   For headings where the text itself shouldn't be the trigger (hunting
   grounds' groups and its me/everyone switch). Muted until pointed at;
   focusable, so a tap on a phone or Tab shows the bubble as well. */
.tip-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--grey);
  cursor: default;
  border-radius: 50%;
}

/* sized to the heading it sits in, not a fixed px */
.tip-icon svg { width: 1em; height: 1em; color: currentColor; stroke: currentColor; }

/* the heading row it sits in: everything centred on one line, no baseline
   offset (inline, the icon sat 1-2px below the text). Spaces between the
   pieces collapse in a flex row, so the column gap puts them back. */
.has-tip-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4px;
}

/* a count badge in such a row becomes a block, whose background would cover
   the whole line height; normal line height keeps it the size it is inline */
.has-tip-icon .search-count { line-height: normal; }

.tip-icon:hover,
.tip-icon:focus { color: var(--red); outline: none; }

.tip-icon:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* shown on plain :focus too (a tap focuses it; :focus-visible may not fire) */
.tip-icon:focus::after,
.tip-icon:focus::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* --- variant: allowed to wrap ---
   The one-line rule governs COPY we write. Tag names, titles and other user
   data have no length limit, and truncating them in the tooltip too would
   defeat the point of the tooltip. Use this only where the text is data. */
.tip-wide::after {
  white-space: normal;
  max-width: min(320px, calc(100vw - 32px));
}

/* nav-folder is display:flex; the bubble is absolutely positioned so it
   drops out of flow and never becomes a flex item.

   STACKING lives on the two host rules themselves (.site-header and
   .page-nav, further up) rather than in a second copy down here —
   a duplicate selector is how this file got into trouble seven times. */