/* ============================================================
   css/responsive.css — every @media / @supports block: phone layout (≤900px), the other
   width breakpoints, hover vs touch. Loaded LAST so it overrides the rest.

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

   CONTENTS
      1. ADD PAGE — two columns become one
      2. INFO BUTTON — hover vs touch
      3. FIC PAGE — columns stack
      4. "+ NEW PILE" CHIP — hover only where there is hover
      5. PAGE COLUMNS — stack on narrow screens
      6. FIC CARD POPUP — off on narrow screens
      7. GROUP HALLUCINATIONS — columns collapse
      8. POST IMAGE DOWNLOAD — always visible on touch
      9. EDIT FORMS — columns stack
     10. DAMAGE REPORT — narrower widths
     11. WRANGLING — columns stack
     12. FIC FACTS ROW + DELETION CASES — stack
     13. PHONE LAYOUT (≤900px)
     14. CARD WIDTH CAP — desktop only
   ============================================================ */

/* ============================================================
   ADD PAGE — two columns become one
   ============================================================ */

@media (max-width: 1000px) {
  .add-cols { grid-template-columns: 1fr; }
  .add-cols fieldset { margin-bottom: 18px; }
}

/* ============================================================
   INFO BUTTON — hover vs touch
   ============================================================ */

/* hover only where there IS hover — on touch, :hover sticks after a tap */
@media (hover: hover) {
  .info-btn:hover { border-color: var(--red); }
  .info-btn:hover i, .info-btn:hover svg {
    color: var(--red);
    stroke: var(--red);
  }
}

@media (hover: none) {
  .info-btn.tip::after,
  .info-btn.tip::before { display: none; }
}

/* ============================================================
   FIC PAGE — columns stack
   ============================================================ */

@media (max-width: 1100px) {
  .fic-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   "+ NEW PILE" CHIP — hover only where there is hover
   ============================================================ */

@media (hover: hover) {
  .new-pile-chip:hover { background: var(--red-tint); }
}

/* ============================================================
   PAGE COLUMNS — stack on narrow screens
   ============================================================ */

/* on narrow screens the sidebar drops below (rough mobile handling) */
@media (max-width: 760px) {
  .page-layout { flex-direction: column; }
  .page-sidebar { width: 100%; }
}

/* ============================================================
   FIC CARD POPUP — off on narrow screens
   ============================================================ */

/* on narrow viewports the dropdown still works but we just hide it on phones —
   tap into the fic page for full details */
@media (max-width: 900px) {
  .fic-card-popup { display: none !important; }
}

/* ============================================================
   GROUP HALLUCINATIONS — columns collapse
   ============================================================ */

@media (max-width: 900px) {
  .post-cols { grid-template-columns: 1fr; gap: 0; }
  .post-side { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
}

@media (max-width: 1200px) {
  .social-layout { grid-template-columns: 1fr; }
  .social-layout .post-compose { position: static; }
  .post-feed { grid-template-columns: 1fr; }
}

/* ============================================================
   POST IMAGE DOWNLOAD — always visible on touch
   ============================================================ */

/* touch devices can't hover, so keep it permanently visible there */
@media (hover: none) {
  .post-image-download { opacity: 1; }
}

/* ============================================================
   EDIT FORMS — columns stack
   ============================================================ */

@media (max-width: 900px) {
  }

/* ============================================================
   DAMAGE REPORT — narrower widths
   ============================================================ */

@media (max-width: 1300px) {
  .stat-analysis-row { grid-template-columns: 1fr 1fr; }
  .stat-analysis-row .stat-hero-row { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .stat-analysis-row { grid-template-columns: 1fr; }
  }

/* ============================================================
   WRANGLING — columns stack
   ============================================================ */

@media (max-width: 1200px) {
  /* minmax(0, …), not plain 1fr: a 1fr track can't shrink below its
     content, so one long tag name widened the whole column */
  .wrangle-layout { grid-template-columns: minmax(0, 1fr); }
  .wrangle-nav, .wrangle-side { position: static; }
}

/* ============================================================
   FIC FACTS ROW + DELETION CASES — stack
   ============================================================ */

@media (max-width: 900px) {
  .fic-facts-row { flex-direction: column; }
  .fic-facts-row .verdict-box { flex: none; }
}

@media (max-width: 800px) {
  /* stretch: the base `align-items: flex-start` would shrink both halves to
     their content width once they stack */
  .deletion-case { flex-direction: column; align-items: stretch; }
  .deletion-work { flex: 1 1 auto; min-width: 0; border-right: none; padding-right: 0;
                   border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  /* stacked: the consequence line directly above the buttons */
  .deletion-decide { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ============================================================
   PHONE LAYOUT (≤900px)
   Everything outside this block is desktop-first; the narrower media
   queries above only collapse multi-column layouts. This block is the
   phone layout.

   900px because the nav genuinely runs out of room around 960px (five
   labels plus the search field), and the fic-card popup already hides
   there.

   The nav drawer PUSHES: it's a normal block in the flow, so it shoves
   the page down like the info panels do — no scrim, no scroll lock, no
   z-index, and panels never jump the page.
   ============================================================ */

@media (max-width: 900px) {

  /* --- the top row: logo, search, menu --- */
  .header-mobile-actions { display: flex; gap: 8px; }
  .site-logo-img-wrap { width: 30px; height: 30px; }

  /* --- both halves of the drawer are hidden until the ☰ is tapped --- */
  .header-account,
  .header-nav-bar { display: none; }

  .site-header.nav-open .header-account { display: flex; }

  /* Account block sits ABOVE the nav because it lives inside .header-top in
     the DOM, and moving it would mean restructuring the desktop header for a
     mobile-only gain. It reads fine there — an account block at the top of a
     drawer is the common pattern, and the greeting doubles as a header. */
  /* .header-account is a flex ITEM of .header-top, so on its own it would
     size to its content (dividers stopping halfway) and add its own 12px
     padding on top of .header-top's. width:100% + no padding of its own
     gives both halves of the drawer one left edge. */
  .header-top {
  padding: 8px 12px;
  flex-wrap: wrap;
}
  .site-header.nav-open .header-account {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }
  .site-header.nav-open .header-account > * {
    padding: 9px 0;
    border-left: none;          /* the desktop dividers are vertical */
  }
  .site-header.nav-open .header-account > * + * {
    border-top: 1px solid var(--border);
  }

  /* --- the red nav list --- */
  .site-header.nav-open .header-nav-bar {
  display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 12px 10px;
  }
  .site-header.nav-open .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header.nav-open .site-nav a {
    padding: 11px 0;            /* tap target, not a text link */
    border-bottom: 1px solid var(--white-a18);
  }
  .site-header.nav-open .site-nav a:last-child,
  .site-header.nav-open .site-nav a:has(+ .desk-only-link:last-child) { border-bottom: none; }
  /* the search icon in the top row already covers this */
  .site-header.nav-open .site-search { display: none; }

  /* --- page shell --- */
  .site-main { padding: 14px 12px; }
  .page-title { font-size: var(--fs-title); }

  /* --- tag wrangling ---
     .wrangle-top is a flex row of [entity select][search] (the info button
     moved up into the "feral tags" heading row). The search had `flex: 1`
     beside an unshrinkable select, so on a phone it collapsed to about 100px
     — wide enough to show "hunt" and nothing else, which read as a broken
     button rather than as the search box it is. Search gets its own row. */
  .wrangle-top .wrangle-search { flex: 1 0 100%; order: 3; }
  .wrangle-top .wrangle-entity-selector { order: 1; flex: 1; }

  /* The A-Z bar is sticky so it stays reachable while you scroll 118 tags.
     On a phone it pinned itself over the tags instead — same problem the
     side columns had. */
  /* A fixed 8-column grid rather than wrapping flex: every cell is identical
     and the columns line up down the page, so the only ragged edge is the
     gap after the last letter — which reads as an ending rather than as a
     mistake. */
  .alpha-bar {
    position: static;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
  }
  .alpha-jump { padding: 5px 0; min-width: 0; }

  /* The workspace is where wrangling actually happens, and it sat after the
     entire 118-tag pool. */
  .wrangle-nav  { order: -2; }
  /* in normal flow on a phone: no inner scroll area, no sticky */
  .wrangle-side { order: -1; max-height: none; overflow: visible; }
  /* stretch, not the grid's `start`: in a flex column `start` shrinks every
     child to its content width, which is what left the workspace narrow */
  .wrangle-layout { display: flex; flex-direction: column; align-items: stretch; }

  /* --- the chapter counter ---
     input + "/ 5" + [+1] on one line read as cramped once the type came down.
     More room between the parts, and the number field sized for two digits
     rather than the desktop 70px. */
  /* No flex-wrap: `.add-form input[type="number"] { width: 100% }` outranks
     `.chapter-input`'s 70px, so the field filled the row and pushed +1 onto a
     line of its own. Constrain the field instead — the selector needs three
     classes to beat that rule. */
  .chapter-input-row { gap: 10px; margin: 6px 0 16px; align-items: center; }
  .chapter-input { width: 64px; padding: 6px 8px; }
  .add-form .chapter-input-row input[type="number"] { width: 72px; flex: 0 0 72px; }
  .add-form .chapter-input-row .button { flex: 0 0 auto; }

  /* --- the fic page's tag panel ---
     .tag-label is a fixed `flex: 0 0 100px` column so every block's label
     lines up on desktop. Inside a padded panel on a 356px screen that leaves
     ~218px for the chips, so a tag like "Plot What Plot/Porn Without Plot"
     wrapped onto three lines and the panel swallowed half the page.
     Stacked, the label sits above and the chips get the full width. */
  .tag-block { flex-direction: column; gap: 4px; }
  .tag-label { flex: none; }
  .tag { font-size: var(--fs-ui); }

  /* --- avatar picker: tighter, and left-aligned ---
     44px chips with a 10px gap fitted four to a row and read as scattered. */
  /* Each group gets the column count that divides it best: 13 creatures on 5,
     6 colours on exactly 6. Rows are CENTRED, so the short last row sits
     under the middle of the block instead of stranding one circle on the
     left — 5 / 5 / 3 reads as a symmetrical shape rather than a leftover. */
  .avatar-creatures, .avatar-colors {
    display: grid;
    justify-items: center;
    gap: 9px;
  }
  .avatar-creatures { grid-template-columns: repeat(5, 1fr); }
  .avatar-colors    { grid-template-columns: repeat(6, 1fr); }
  /* 13 into 5 leaves 3 on the last row — nudged to start in column 2 so it
     sits under the middle rather than stranded on the left */
  .avatar-creatures > :nth-child(11) { grid-column: 2; }

  /* The OUTER columns drop half a row, so the block curves instead of sitting
     as a flat rectangle: paw and squirrel fall between rows 1 and 2, bunny and
     fish between rows 2 and 3. Half a row = (44px chip + 9px gap) / 2.
     Targeted by position rather than by :nth-child(5n) so the 11th — which
     has been moved into column 2 above — stays put. */
  .avatar-creatures > :nth-child(1),
  .avatar-creatures > :nth-child(5),
  .avatar-creatures > :nth-child(6),
  .avatar-creatures > :nth-child(10) { transform: translateY(26px); }
  /* No extra bottom margin: only rows 1 and 2 are shifted, and row 2 + 26px
     still finishes above row 3's baseline, so nothing hangs past the grid.
     The 26px I first added here just stacked on the picker's own 16px gap. */
  .avatar-picker { gap: 12px; margin-top: 9px; }
  .avatar-chip { width: 44px; height: 44px; }
  .avatar-chip i, .avatar-chip svg { width: 21px; height: 21px; }
  .color-chip { width: 36px; height: 36px; }

  /* --- a comment box that pushed its own button off the screen ---
     `flex: 1` on an input does not let it shrink below its intrinsic width
     without min-width: 0, so "respond" hung off the right edge. */
  .post-comment-form { flex-wrap: wrap; }
  .post-comment-form input { min-width: 0; flex: 1 1 60%; }

  /* --- crawl back out was sitting on the footer text, then on the add
     page's left-aligned "add to hoardings" button — moved to the right --- */
  .crawl-out { right: 12px; left: auto; bottom: 12px; padding: 7px 12px; font-size: var(--fs-sm); }
  .site-footer { padding: 12px 18px 46px; }

  /* --- GRIDS THAT NEVER COLLAPSED ---
     Three pages ran wider than the screen, each for its own reason.

     .settings-cols uses auto-fit with minmax(440px, 1fr) — auto-fit will not
     shrink a track below its stated minimum, so it forced a 440px column
     inside a 356px viewport. This is the trap with minmax: a min larger than
     the container overflows silently.

     .stat-two-col is a hard `1fr 1fr` with no breakpoint at all — the two
     meters sat side by side at any width.

     .community-tabs is three tabs at 16px padding each, about 380px of tab
     in a 356px box. */
  /* the two columns inside each housekeeping card stack, with a rule
     between them */
  .settings-card-cols { grid-template-columns: 1fr; }
  .settings-card-col + .settings-card-col {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }
  .stat-two-col  { grid-template-columns: 1fr; gap: 14px; }
  .stat-analysis-row .stat-hero-row {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
  .community-tabs { flex-wrap: wrap; }
  .community-tab { padding: 9px 11px; }

  /* --- ⓘ tooltips open below on a phone: there's no room to the right ---
     The bubble anchors to the whole row (the icon goes position: static, the
     row is the positioned box), so it starts at the row's left edge and gets
     its full width instead of starting at the icon and running off-screen.
     No arrow: it would point at the row's corner, not the icon. */
  .has-tip-icon { position: relative; }
  .tip-icon.tip-right { position: static; }
  .tip-icon.tip-right::after {
    top: calc(100% + 6px);
    left: 0;
    transform: none;
  }
  .tip-icon.tip-right::before { display: none; }

  /* --- search bar: stacked, so it can't push the page sideways ---
     .search-controls is one row, and .search-bar-main inside it
     asks for `flex: 1 1 700px`, a basis wider than a phone. Stacked, with no
     basis and an input that can shrink, the "hunt" button stays on screen. */
  .search-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-bar-main { flex: 1 1 auto; max-width: 100%; }
  .search-bar-main input[type="text"] { min-width: 0; }

  /* --- panels: less padding, more content ---
     16-26px of padding on each side costs up to a third of the width. */
  .settings-card { padding: 16px 14px; }
  .fic-panel,
  .stat-card,
  .pool-panel { padding: 14px; }

  /* --- cards fit their content ---
     Each card is as tall as what's in it. (Matching every card to the
     tallest one — 1fr rows + height:100% — left the short ones with a gap
     between the top rows and the title, because desktop's space-between
     spread the slack around.) So: no stretching, everything stacks from the
     top with fixed gaps, and a little more room under the chips. */
  /* nothing may be wider than the screen, whatever its own rules say */
  .fic-card {
    max-width: 100%;
    height: auto;   /* no fixed height on phones: the 240px is for desktop rows */
    justify-content: flex-start;
    padding-bottom: 14px;
  }
  .fic-card-top { margin-bottom: 10px; }    /* → title */
  .fic-card-body { margin-bottom: 8px; }    /* fandom → chips */

  /* --- nothing overflows sideways ---
     Fandom names, tag names and AO3 titles are user data with no length
     limit, and a single long word forces a whole page wider than the screen.
     This is the blanket guard; the specific offenders are handled above. */
  body { overflow-wrap: break-word; }
  .length-stats p,
  .length-stats p a,
  .stat-bar-row { min-width: 0; }
  .length-stats p { flex-wrap: wrap; }

  /* --- type comes down a step ---
     The ladder was tuned on a 1440px screen. Inputs are deliberately NOT in
     here: anything under 16px makes iOS zoom on focus.
     Then everything comes down again by --mobile-scale: zoom scales type,
     padding, borders and icons together, so the whole page shrinks in
     proportion from one variable (see :root). */
  :root {
    --fs-title: 23px;   /* titles: today's phone page-title size, so nothing on a phone grows */
    --fs-logo:  19px;   /* the logo's own phone size (not a ladder step) */
  }
  body { font-size: var(--fs-ui); zoom: var(--mobile-scale); }
  .fic-head-title { font-size: var(--fs-title); }
  .fic-card-title { font-size: var(--fs-body); }
  .fic-card-fandom { font-size: var(--fs-sm); }
  .section-label { font-size: var(--fs-ui); }
  .creature-name { font-size: var(--fs-lead); }

  /* --- things that overflow a 380px viewport ---
     .page-sidebar.expanded widens to 460px when the deep dive opens, which is
     wider than the whole phone. And .filter-cols splits into two columns,
     which at this width would be two very narrow ones. */
  .page-sidebar.expanded { width: 100%; }

  /* --- 16px on every input, on iOS only ---
     iOS Safari ZOOMS THE PAGE IN when you focus an input whose font-size is
     under 16px, and doesn't zoom back out afterwards. These are all 15px, so
     tapping any search box, password field or add-form input would leave the
     page stranded at 1.1x. Nobody on Android sees this; anyone in the group
     on an iPhone sees it on every form.
     Three things make this rule look odd, and all are load-bearing:
     - body is zoomed, and iOS checks the font size AFTER zoom. So this
       asks for 16px ÷ the scale, which renders at exactly 16px.
     - !important, because a dozen more-specific rules (.search-controls
       .search-bar-main input, .series-link-form input, .wrangle-search
       input…) set 15px and were quietly winning over the plain version.
     - the @supports: -webkit-touch-callout exists only in iOS/iPadOS WebKit,
       which every browser on an iPhone has to use. Everywhere else the
       guard isn't needed, and inputs shrink with the rest of the page
       instead of towering over it. */
  @supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    select,
    textarea { font-size: calc(16px / var(--mobile-scale)) !important; }
  }

  /* --- less chunky fields ---
     Desktop paddings run 6-10px top and bottom across ~30 rules, most more
     specific than this one, hence the !important. Textareas keep theirs:
     the padding is part of the writing area. */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  select {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* --- side columns become closed panels at the top ---
     The wrapper is created by the script in header.php. Negative order pulls
     both above .page-main, so you meet "your piles & views" and "sort and
     filter" as two closed rows and then go straight into the fics — instead
     of scrolling a wall of nav first, or (on trove) never reaching the
     filters at all because they sat after every card. */
  .mobile-panel { width: 100%; }

  /* --- tending (community.php) is desk work ---
     its drawer link goes, and community.php shows its notice instead of
     the page unless opened with ?anyway=1 */
  .desk-only-link { display: none; }
  .desk-only-notice { display: block; }
  .desk-only-page { display: none; }

  /* --- tending, opened anyway on a phone, has to FIT (not be pretty) ---
     (The "how does it work?" bubble opens leftward at every width, so it
     can't widen the page — see .info-btn.) */
  /* deletion requests: a 620px minimum column. (Each case already stacks
     its card above its reasons at 800px.) */
  .deletion-list { grid-template-columns: minmax(0, 1fr); }
  /* verdicts: 290px-minimum tracks → one full-width column */
  .verdict-list { grid-template-columns: minmax(0, 1fr); }

  /* --- one control box ---
     The script gathers the page actions and every panel into .mobile-controls,
     placed before .page-layout and under the page title. Same shape as home's
     pulse box: white, bordered, a hover-fill strip on top (the actions), then
     each panel as a row divided by a 1px rule instead of separate boxes. */
  .mobile-controls {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .mobile-controls > * + * { border-top: 1px solid var(--border); }
  .sidebar-actions.mobile-hoisted {
    flex-direction: row;
    gap: 10px;
    padding: 12px;
    margin: 0;
    border-bottom: none;
    background: var(--hover);
  }
  .sidebar-actions.mobile-hoisted .button {
    flex: 1;
    min-width: 0;
    padding: 11px 8px;
    font-size: var(--fs-ui);
    white-space: nowrap;
    text-align: center;
  }

  /* --- the hoard page ---
     .fetch-bar is a flex row and "pull from AO3, respectfully" cannot
     shrink; ONE overflowing element gives the whole page a horizontal
     scroll, so on phones the bar wraps. */
  .fetch-bar { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: 100%; }
  /* input gets its own row; the pull button stretches beside the info
     button, which stays its natural size, centred rather than stretched to
     the button's height */
  .fetch-bar input { flex: 1 1 100%; min-width: 0; }
  .fetch-bar .button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 8px 12px; font-size: var(--fs-body); }
  /* two columns with a 56px gutter inside a 356px screen */
  .work-edit-cols { grid-template-columns: 1fr; gap: 0; }

  .mobile-panel-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: var(--surface);
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .mobile-panel-toggle:hover { background: var(--hover); }
  .mobile-panel-toggle i, .mobile-panel-toggle svg {
    width: 17px; height: 17px; color: var(--grey); flex-shrink: 0;
  }

  .page-nav.is-collapsed,
  .page-sidebar.is-collapsed,
  .stalk-form.is-collapsed { display: none; }
  /* home's stalk form is lifted out of .home-sidebar on its own, so it
     needs its own padding */
  .mobile-panel .stalk-form {
    padding: 12px;
    margin: 0;
    border-top: 1px solid var(--border);
  }
  /* the toggle already says "stalk creatures"; keep only the note */
  .mobile-panel .stalk-title { display: none; }
  .mobile-panel .stalk-form > .sidebar-label { margin-top: 0; }

  /* --- home: what's left of the sidebar follows the content as one box ---
     Same shape as the panels above (white body, hover-fill header strip),
     but always open. The sidebar's own cream box steps aside so the two
     don't nest. */
  .home-sidebar { background: none; border: none; padding: 0; }
  .home-pulse-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .home-pulse-head {
    display: block;
    margin: 0;
    padding: 11px 12px;
    background: var(--hover);
    border-bottom: 1px solid var(--border);
    border-radius: 5px 5px 0 0;
    font-size: var(--fs-ui);
    color: var(--red);
  }
  .home-pulse-body { padding: 14px; }
  .home-pulse-box .pulse-heading { display: none; }

  /* the panel already says "sort and filter" on its toggle */
  .mobile-panel .sidebar-title { display: none; }
  /* an open panel's body sits inside the control box with padding, but
     without a box of its own (border, radius, gap) — a frame inside a frame */
  .mobile-panel .page-sidebar,
  .mobile-panel .page-nav {
    margin: 0;
    padding: 12px;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
  /* group hallucinations boxes its two filter columns; inside a panel they
     drop the box and share the panel's padding */
  .mobile-panel .filter-col-left {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  /* --- STICKY IS A DESKTOP IDEA ---
     A sticky column works because it sits BESIDE the content. Stacked on a
     phone it sits ON the content: .page-sidebar pinned itself at the top of
     the viewport and covered the page the moment you scrolled back up.
     The 760px breakpoint made these full-width but never unpinned them.

     The internal scrollers go too. They exist so a sticky column taller than
     the viewport can still reach its bottom — irrelevant once the thing
     scrolls with the page, and a scroll area inside a scrolling page is
     miserable on touch. .post-compose, .wrangle-nav and .wrangle-side
     already do this at 1200px; these three were missed. */
  .page-nav,
  .page-sidebar,
  .creature-card {
    position: static;
    max-height: none;
    width: 100%;
  }
  .page-sidebar .filter-form,
  .page-sidebar .filter-scroll,
  .nav-pile-tree {
    overflow: visible;
    max-height: none;
  }

  /* --- cards go full width ---
     The 290px track exists so a card is the same size on every page and a
     sidebar costs you a column. On a phone there are no columns to keep
     consistent, and a 290px card in a 356px viewport just leaves a ragged
     gap down one side. */
  .fic-card-grid { grid-template-columns: 1fr; row-gap: 12px; }
}

/* ============================================================
   CARD WIDTH CAP — desktop only
   A card (or a verdict card, or a series part) never grows past 360px.
   Desktop only: on phones the single column is the screen's width, as it
   always was.
   ============================================================ */
@media (min-width: 901px) {
  .fic-card-grid > *,
  .verdict-list > * { max-width: 360px; }
}