/* ==========================================================================
   NITRATE — THE WIRE.  Stylesheet for wanted.js.

   Two sections on the foyer, the same component twice: films and television
   struck by the houses John trusts, that are not on his shelves.

   THE ONE JOB
   Every other rail on this site is about something we HAVE.  This one is about
   something we could have, from a named lab, at a stated size — so the two
   facts that decide it are stamped on the artwork rather than captioned under
   it.  Bottom-left, the GROUP, on a solid panel with a hairline: a lab's stamp
   on a can of film.  Bottom-right, the SIZE, tabular.

   COLOUR
   tokens.css and nothing else.  Safety orange keeps its one meaning — this
   needs attention — and here that is exactly one thing: a print over John's
   4 GB cap, which is the fact that turns a grab into a decision.  The group
   stamp is therefore NOT orange, however much it wants to be; it earns its
   legibility from placement, weight and a solid ground.  Orange appears once
   more, on a grab that came back queued, because a state you caused is the
   other thing worth interrupting for.

   TWO ROUTES, AND ONLY ONE OF THEM IS THE DEFAULT
   GRAB hands the print to Radarr/Sonarr, which imports and RENAMES it.  MAGNET
   puts the torrent straight into qBittorrent and nothing renames it.  That
   difference is drawn, not captioned: the second control takes no accent, no
   fill and no orange, and is set on a DASHED hairline — the alternate path on
   a plan.  It goes amber only twice, and both times because a person is about
   to make a decision: armed (the press that states what the route costs) and
   offered (a GRAB has failed in a way a magnet survives).  It borrows the
   orange exactly once, for qBittorrent confirmed holding the torrent, because
   that is the same fact as QUEUED ✓ and must read the same.

   No border-radius anywhere.  Every divider is a hairline.  Every figure is
   mono and tabular so a column of sizes can be read as a column.

   The host owns the gutter and the vertical rhythm — `padding: 0 var(--pad-x)`
   and no outer margin — the same contract shelves.css and field.css keep, so
   this drops into the foyer without fighting it.
   ========================================================================== */

.wnt {
  padding: 0 var(--pad-x, 0px);
  width: 100%;
  /* One knob.  The rail, the open-shelf grid and every breakpoint read the
     poster width from here, so they cannot disagree. */
  --wnt-w: 158px;
  --wnt-gap: 14px;

  /* SAFARICSS_20260905 — off-screen, the wire skips layout and paint (see landing.css) */
  content-visibility: auto; contain-intrinsic-size: auto 1px 520px;
}

/* ===================================================================== head
   Name, figures, controls.  The rule carries the eye across to the control
   that opens the shelf, exactly as the racks do. */
.wnt-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-top: var(--hair) solid var(--rule);
  padding: 16px 0 10px;
}
.wnt-hl { min-width: 0; flex: 1 1 auto; }
.wnt-h {
  font-family: var(--font-marquee);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: .94;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.wnt-note {
  margin: 5px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

.wnt-ctl { display: flex; gap: 6px; flex: 0 0 auto; }
.wnt-arrow {
  width: 30px; height: 30px;
  padding: 0;
  line-height: 1;
  font-size: 17px;
  color: var(--ink-2);
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  display: flex; align-items: center; justify-content: center;
}
.wnt-arrow:hover:not(:disabled),
.wnt-open:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-arrow:disabled { color: var(--rule); background: transparent; cursor: default; }
.wnt-open {
  height: 30px;
  padding: 0 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-2);
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  white-space: nowrap;
}

/* ===================================================================== rail */
.wnt-railbox { position: relative; }
.wnt-rail {
  position: relative;
  display: flex;
  gap: var(--wnt-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding: 12px 0 16px;
  scrollbar-width: thin;
}
.wnt-rail > * { scroll-snap-align: start; }
.wnt-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* OPEN SHELF — the rail becomes the whole shelf, wrapped. */
.wnt.is-open .wnt-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wnt-w), 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
.wnt.is-open .wnt-cardw { flex: initial; }

/* ===================================================================== card */
.wnt-cardw {
  position: relative;
  flex: 0 0 var(--wnt-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wnt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
}
.wnt-card.is-inert { cursor: default; }

.wnt-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
  overflow: hidden;
}
.wnt-img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.wnt-card:hover .wnt-art { outline: var(--hair) solid var(--accent); outline-offset: -1px; }
/* a print not yet struck for this house: art held back until you look at it */
.wnt-art { opacity: .92; }
button.wnt-card:hover .wnt-art { opacity: 1; }

.wnt-noart {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 8px;
  font-family: var(--font-marquee);
  font-size: 15px;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- THE STAMP: who struck this print.  The reason the section exists. ---
   Not orange.  Orange means "needs attention" everywhere else on this site and
   a group name is an identity, not an alarm.  It reads instead because it sits
   on solid ground, at full ink, in the mono face, on the edge of the picture
   where nothing else competes. */
.wnt-stamp {
  position: absolute; left: 0; bottom: 0;
  max-width: 74%;
  display: flex; align-items: baseline; gap: 4px;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--panel);
  border-top: var(--hair) solid var(--rule);
  border-right: var(--hair) solid var(--rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wnt-stamp-x { font-style: normal; font-size: 9.5px; color: var(--muted); }

/* --- THE SIZE: never buried.  Over John's 4 GB cap it goes orange, which is
   the one thing on this card that is asking him to decide something. */
.wnt-size {
  position: absolute; right: 0; bottom: 0;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
  background: var(--panel);
  border-top: var(--hair) solid var(--rule);
  border-left: var(--hair) solid var(--rule);
}
.wnt-size.is-over { color: var(--accent); }

/* a fact about the row that is not about the file: it may be one you own, or
   it never resolved to a title at all */
.wnt-mark {
  position: absolute; left: 0; top: 0;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--ink-2);
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
  border-right: var(--hair) solid var(--rule);
}

.wnt-slot {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--cool);
}
.wnt-t {
  font-size: 13px;
  font-weight: 620;
  color: var(--ink);
  line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wnt-m {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--muted);
}
.wnt-verdict {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--warn);
}
/* --- the foot: always drawn.
   The shell hides hover-only .nact pairs under (hover: none), so a download
   control that appeared on hover would not exist on a phone at all. */
.wnt-foot {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: auto;
  padding-top: 2px;
}
.wnt-gwrap { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
/* TWO ROUTES ON ONE LINE — and one line is the point.  The rail is a flex row
   of equal-height cards, so a control that stacks on some cards and not others
   drags every foot on the shelf out of alignment.  GRAB takes the room that is
   going; MAGNET is intrinsic; and it WRAPS rather than overflowing, which is
   what happens on a 128px card, where the second route lands on its own line
   for the two thirds of prints that have one. */
.wnt-gbtns { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.wnt-gbtns .wnt-grab { width: auto; flex: 1 1 52px; }
.wnt-grab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  padding: 6px 8px;
  min-height: 28px;
  width: 100%;
  white-space: nowrap;
}
.wnt-grab:hover:not(:disabled) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-grab:disabled { cursor: default; color: var(--muted); }
.wnt-grab.is-on {
  color: var(--accent); border-color: var(--accent); background: transparent;
}
.wnt-grab.is-bad { color: var(--crit); border-color: var(--crit); }
/* 🔴 DID NOT START — the state that used to be a green QUEUED ✓ while nothing
   downloaded.  It is a rung louder than an ordinary refusal (a tinted ground,
   not just crit text) because a refusal is the system working and this is the
   system having dropped something John asked for.  Same 13 characters as
   ALREADY ASKED, so it fits every place a button already fits. */
.wnt-grab.is-dropped {
  background: color-mix(in srgb, var(--crit) 12%, transparent);
  border-color: var(--crit);
}
.wnt-grab.is-dropped:hover:not(:disabled) {
  background: var(--crit); color: var(--panel); border-color: var(--crit);
}
/* ⚠️ SENT, AND UNVERIFIABLE — the state between queued and dropped.  The add
   was taken and the release carries no readable infohash, so nothing can be
   asserted about it.  Amber, not orange and not crit: it is neither a success
   to celebrate nor a failure to shout about, it is an open question, and the
   one thing it must never look like is QUEUED ✓. */
.wnt-grab.is-unsure {
  color: var(--warn); border-color: var(--warn); background: transparent;
}
/* the bench is where a grab is a deliberate act, so there it is filled */
.wnt-grab.is-strong:not(:disabled) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-grab.is-strong:hover:not(:disabled) { filter: brightness(1.08); }
.wnt-grab.is-strong.is-on { background: transparent; color: var(--accent); }
.wnt-grab.is-strong.is-bad { background: transparent; }
.wnt-grab.is-strong.is-dropped {
  background: color-mix(in srgb, var(--crit) 12%, transparent);
}
/* Two lines, and the whole of it on the title attribute.  Cards on a rail
   share a height, so an unclamped five-line message under one grab pushes the
   other thirty-nine down with it — the section visibly lurched when a grab
   came back.  The bench prints the same message with room to breathe. */
.wnt-gmsg {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.32;
  color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wnt-gmsg.is-bad { color: var(--crit); }
/* on the bench there is width for it, so it is not clamped there */
.wnt-row .wnt-gmsg { -webkit-line-clamp: 3; }

/* ⛔ THE SECOND ROUTE'S STYLES ARE DELETED.  `.wnt-mag` (the MAGNET
   button, its dashed hairline, its armed / offered / on / dropped
   states) and `.wnt-gmag` (the caveat paragraph under it) drew a control
   this surface no longer has -- John, 2026-08-11: *"the magnet part
   should be for you (background) not in frontend like that."*  A card
   carries exactly one action now, so a second button has no styles to
   fall back on if one is ever added by accident.  See wanted.js. */

.wnt-more {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  padding: 6px 7px;
  min-height: 28px;
}
.wnt-more:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* the tail card: the rail is a sample, and it says so rather than pretending */
.wnt-restw { display: flex; }
.wnt-rest {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 100%;
  padding: 14px;
  text-align: left;
  color: inherit;
  background: var(--panel);
  border: var(--hair) dashed var(--rule);
}
.wnt-rest:hover { border-color: var(--accent); border-style: solid; }
.wnt-rest-n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--ink);
}
.wnt-rest-l { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.wnt-rest-s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--accent); }

/* ==================================================================== bench
   The rail says what exists; the bench is where a choice between prints gets
   made.  Columns, because that is what makes 2.1 GB NeoNoir against 9.7 GB QxR
   a comparison instead of a memory test. */
.wnt-bench {
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  background: var(--panel);
  margin-bottom: 14px;
}
.wnt-bench[hidden] { display: none; }
.wnt-bh {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 12px;
  border-bottom: var(--hair) solid var(--rule);
}
.wnt-bt {
  font-family: var(--font-marquee);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
.wnt-bn { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.wnt-bx {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--ink-2); background: var(--ground);
  border: var(--hair) solid var(--rule);
  padding: 5px 10px;
}
.wnt-bx:hover { color: var(--accent); border-color: var(--accent); }

.wnt-rows { display: block; }
.wnt-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 120px 74px 82px 92px 118px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--rule) 55%, transparent);
}
.wnt-row:last-child { border-bottom: 0; }
.wnt-rg {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink);
  padding: 3px 6px;
  border: var(--hair) solid var(--rule);
  background: var(--ground);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wnt-rmid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wnt-rn {
  font-size: 12.5px; color: var(--ink); line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wnt-rsub { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .03em; }
.wnt-rq { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: .04em; }
.wnt-rs {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: right;
}
.wnt-rs.is-over { color: var(--accent); }
.wnt-rd { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
          font-size: 11px; color: var(--muted); text-align: right; }
.wnt-rv { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.wnt-rv.is-ok { color: var(--ok); }
.wnt-rv.is-bad { color: var(--warn); }
.wnt-row .wnt-gwrap { flex: 0 0 auto; }

/* ================================================================== empties
   A section that renders nothing looks like a bug in this file.  It says which
   houses were asked, whether this is a cached answer, and what the feed said
   went wrong. */
.wnt-empty {
  margin: 0; padding: 22px 0 26px;
  font-size: 13px; color: var(--muted); font-style: italic;
}
.wnt-none { padding: 18px 0 22px; max-width: 66ch; }
.wnt-none-t { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.wnt-none-s { margin: 0 0 5px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ================================================================== caption
   The figures, and what is not reported yet.  Sits at the foot because it is
   the accounting for what is above it, not a preamble to it.

   John, 2026-08-11, pointing at NEW PRINTS · TELEVISION at 1536px: the rail
   above is full width and this was capped at 96ch, so 686px of caption sat
   under nine posters with 660px of nothing beside it.  It is set on the house
   caption grid instead (tokens.css --cap-col) — the same measure, taken as a
   column width — so the accounting fills the row it is the accounting for. */
.wnt-cap {
  margin: 0;
  padding: 0 0 26px;
  columns: var(--cap-col);
  column-gap: var(--cap-gap);
  orphans: 2;
  widows: 2;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  border-top: var(--hair) solid var(--rule);
  padding-top: 10px;
}
.wnt-cap-bad { color: var(--crit); }

/* ==================================================================== focus */
.wnt :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wnt .wnt-card:focus-visible { outline-offset: -2px; }

/* ================================================================== motion
   tokens.css already reduces durations globally; the one behaviour this file
   owns is the smooth scroll on the rail and the bench, so it is unwound here
   rather than left to a duration clamp. */
@media (prefers-reduced-motion: reduce) {
  .wnt-rail { scroll-behavior: auto; }
}

/* =================================================================== narrow
   Desktop is the priority, so nothing above this line is a compromise for a
   phone.  What changes below: the poster gets smaller so two and a bit fit in
   a 360px viewport, the bench stops pretending to be a table — seven columns
   in 328px is four characters a column — and everything a finger meets grows
   to a real target.

   ⚠️ TWO TIERS BELOW THE DESK, AND ONLY TWO (MOBILE_SPEC §1).  The 640px tier
   this file used to carry is folded into 760 — the house mobile breakpoint —
   and 430 is the narrow tier.  900 stays: it is above 820 and it is a DESKTOP
   fold (the bench's seven columns stop fitting long before a phone), so the
   spec leaves it alone. */
@media (max-width: 900px) {
  .wnt-row {
    grid-template-columns: 84px minmax(0, 1fr) 78px 108px;
    grid-template-areas:
      "g  n  s  b"
      "g  q  d  b"
      "g  v  v  b";
    gap: 4px 10px;
    align-items: start;
  }
  .wnt-rg { grid-area: g; align-self: center; }
  .wnt-rmid { grid-area: n; }
  .wnt-rq { grid-area: q; }
  .wnt-rs { grid-area: s; }
  .wnt-rd { grid-area: d; text-align: right; }
  .wnt-rv { grid-area: v; }
  .wnt-row .wnt-gwrap { grid-area: b; align-self: center; }
}

@media (max-width: 760px) {
  .wnt { --wnt-w: 132px; --wnt-gap: 10px; }
  .wnt-head { flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding-top: 14px; }
  .wnt-hl { flex: 1 1 100%; }
  .wnt-note { font-size: 11px; letter-spacing: .1em; }
  .wnt-t { font-size: 12.5px; }
  /* one column at the house mobile tier: 330px would still fit two at 760 and
     a phone caption wants the whole width (tokens.css, the caption grid) */
  .wnt-cap { font-size: 12.5px; columns: 1; }
  .wnt-none-s { font-size: 12.5px; }
  .wnt-rn { font-size: 12.5px; }

  /* THE MONO FLOOR.  A desk reads 9.5px figures; a phone does not.  Every mono
     thing this file draws comes up to 11px together, so a card cannot end up
     with an 11px size against a 9.5px stamp on the same edge. */
  .wnt-m, .wnt-stamp, .wnt-size, .wnt-slot, .wnt-verdict, .wnt-mark,
  .wnt-gmsg, .wnt-more, .wnt-rest-s, .wnt-bn, .wnt-bx,
  .wnt-rg, .wnt-rsub, .wnt-rq, .wnt-rs, .wnt-rd, .wnt-rv { font-size: 11px; }
  .wnt-stamp-x { font-size: 10px; }
  .wnt-rs { font-size: 12.5px; }

  /* TOUCH — no hover, so nothing hides behind one and everything a finger
     meets is a real target.  GRAB is the whole point of the section. */
  .wnt-arrow { width: 44px; height: 44px; font-size: 20px; }
  .wnt-open { height: 44px; padding: 0 14px; font-size: 12px; }

  /* 🔴 THE STATE LABEL WRAPS, AND THIS IS THE ONE RULE ON THIS SURFACE THAT
     ACTUALLY MATTERS ON A PHONE.  The button is `white-space: nowrap` for the
     desk, where it sits in a 158px card and every state fits on one line.  It
     does not fit here.  Measured at 390px, where a card is 128px wide:

        AWAITING REVIEW        134px button in a 128px card   +6px
        QUEUED · NOT RENAMED   172px                          +44px
        QUEUED · NEEDS A LOOK  180px                          +52px

     — and the overflow is not a clipped word, it is the control lying across
     the NEXT card's poster on the rail.  The two states it wrecks are the two
     that must not be misread: AWAITING REVIEW is where every reader's press
     lands, and QUEUED · NEEDS A LOOK is the only thing separating a download
     that is coming from one that has stalled.  A nowrap ellipsis would have
     turned both into "QUEUED · NEE…", which is the same string as QUEUED ✓ to
     a thumb in a hurry, so the label wraps instead: three short lines of the
     whole sentence, centred, on a target that only gets taller.
     ⚠️ Do not put `white-space: nowrap` back for the phone, and do not shrink
     the type to buy the line — 11px is the mono floor set above. */
  .wnt-grab {
    min-height: 44px;
    font-size: 11px;
    white-space: normal;
    line-height: 1.18;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
  }
  /* the dossier's copy of the same control: it is the primary action there, so
     it takes the full target rather than the desk's 38px */
  .wnt-grab-big { height: auto; min-height: 44px; padding: 6px 18px; }

  .wnt-more { min-height: 44px; min-width: 44px; font-size: 11px; }
  .wnt-bx { min-height: 44px; display: inline-flex; align-items: center; }
  .wnt-rest { padding: 12px; }
}

@media (max-width: 430px) {
  .wnt { --wnt-w: 128px; }
  .wnt-row {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "g  n"
      "q  s"
      "v  d"
      "b  b";
    row-gap: 6px;
  }
  .wnt-rq { text-align: left; }
  .wnt-row .wnt-gwrap { align-self: stretch; }
  .wnt-bh { padding: 10px; }
  .wnt-row { padding: 10px; }
}

/* Anything a hover would have been the only route to is already in the flow
   above; this only removes the outline that a finger can never trigger. */
@media (hover: none) {
  button.wnt-card:hover .wnt-art { outline: none; }
}

/* ═══════════════════════════════════════════════ TELEVISION IS A REQUEST ══
   John, 2026-08-11: series became a REQUEST for readers, reviewed by him.
   Two things needed drawing: the state a reader's button lands in, and the
   desk he answers from.

   THE COLOUR IS `--cool`, AND IT IS THE POINT.  This palette already spends
   accent on "it is moving", crit on "it failed", warn on "it cannot be
   confirmed".  AWAITING REVIEW is none of those — it is a thing correctly
   parked with another person — so it takes the one hue nothing else on this
   surface uses.  A reader can tell at a glance that their press did something
   and that the something was not a download. */
.wnt-grab.is-wait {
  color: var(--cool); border-color: var(--cool); background: transparent;
}
.wnt-grab.is-strong.is-wait { background: transparent; color: var(--cool); }
/* ⚠️ :disabled greys every other finished state, and that is right for them —
   they are over.  This one is not over, it is WAITING, and a grey AWAITING
   REVIEW reads as a control that failed rather than one that is pending. */
.wnt-grab.is-wait:disabled { color: var(--cool); }
/* John reviewed it and said no.  It is crit, but flat: an answer he gave is
   not an error the system made, so it does not get the tinted DID NOT START
   ground. */
.wnt-grab.is-nope { color: var(--crit); border-color: var(--crit); }
.wnt-grab.is-nope:disabled { color: var(--crit); }
.wnt-grab.is-strong.is-nope { background: transparent; }

/* ------------------------------------------------------------- the desk
   Above the rail, and only for the owner.  It is a LIST, not a grid: each row
   is a decision and a decision wants one line of attention at a time, not a
   mosaic that invites skimming past the shelf line. */
.wnt-desk {
  margin: 14px 0 4px;
  border: var(--hair) solid var(--rule);
  border-left: 3px solid var(--cool);
  background: var(--panel);
  padding: 12px 14px 14px;
}
.wnt-desk[hidden] { display: none; }
.wnt-dk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.wnt-dk-ht {
  font-family: var(--font-marquee); font-size: 17px; font-weight: 600;
  letter-spacing: .01em; margin: 0; color: var(--ink);
}
.wnt-dk-hn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--cool);
}
.wnt-dk-lead {
  margin: 6px 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2);
  max-width: 68ch;
}
.wnt-dk-sub {
  margin: 16px 0 8px; font-size: 10px; letter-spacing: .14em;
  color: var(--muted); border-top: var(--hair) solid var(--rule); padding-top: 10px;
}
.wnt-dk-row {
  border-top: var(--hair) solid var(--rule);
  padding: 11px 0 12px;
}
.wnt-dk-row.is-working { opacity: .55; }
.wnt-dk-row.is-done { opacity: .72; }
.wnt-dk-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wnt-dk-t {
  font-family: var(--font-marquee); font-size: 15px; color: var(--ink);
}
.wnt-dk-s {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--cool);
}
.wnt-dk-f {
  margin: 5px 0 0; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
}
/* the release name is the longest string on the row and the least urgent, so
   it is the one thing allowed to be quiet and to truncate */
.wnt-dk-r {
  margin: 3px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
/* THE DECIDING FACT.  Most of these are answered on this line alone — three
   of ten episodes already here is a different question from a show he has
   never held — so it is the one line here set in the reading face. */
.wnt-dk-shelf { margin: 7px 0 0; font-size: 13px; color: var(--ink); }
.wnt-dk-who {
  margin: 4px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted);
}
.wnt-dk-warn { color: var(--warn); }
.wnt-dk-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wnt-dk-yes, .wnt-dk-no {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; padding: 8px 16px; min-height: 32px;
  border: var(--hair) solid var(--rule); background: var(--panel);
  color: var(--ink);
}
/* APPROVE is filled because it is the act that spends bandwidth and disk;
   REJECT is outlined because a no costs nothing and should not be the loud
   one. */
.wnt-dk-yes:not(:disabled) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-dk-yes:hover:not(:disabled) { filter: brightness(1.08); }
.wnt-dk-no:hover:not(:disabled) {
  color: var(--crit); border-color: var(--crit);
}
.wnt-dk-yes:disabled, .wnt-dk-no:disabled {
  cursor: default; color: var(--muted); background: var(--panel);
  border-color: var(--rule); filter: none;
}
.wnt-dk-out {
  margin: 8px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-2); line-height: 1.4;
}
.wnt-dk-out.is-on { color: var(--accent); }
.wnt-dk-out.is-bad { color: var(--crit); }

@media (max-width: 760px) {
  .wnt-desk { padding: 11px 12px 12px; }
  .wnt-dk-ht { font-size: 15px; }
  .wnt-dk-lead, .wnt-dk-shelf { font-size: 12.5px; }
  .wnt-dk-f, .wnt-dk-r, .wnt-dk-who, .wnt-dk-out, .wnt-dk-hn { font-size: 11px; }
  /* a decision is a finger target like any other */
  .wnt-dk-yes, .wnt-dk-no { min-height: 44px; flex: 1 1 42%; }
  /* THE RELEASE NAME GETS TO WRAP ON A PHONE rather than vanish into an
     ellipsis there is no hover to read.  All four properties are needed, and
     leaving one behind is what left `Rick.and.Morty.S09E03.1080p.…` clipped
     mid-line on a 390px screen: a release name is one unbroken dotted token,
     so `white-space: normal` alone gives it nowhere to break and the ellipsis
     still fires. */
  .wnt-dk-r {
    white-space: normal; text-overflow: clip; overflow: visible;
    overflow-wrap: anywhere;
  }
}

/* The dossier's copy of the grab control. Same element, same states — only the
   scale changes, because in the dossier it is the primary action rather than one
   of forty on a rail. */
.wnt-grab-big {
  height: 38px;
  padding: 0 22px;
  font-size: 13px;
  letter-spacing: .1em;
}

/* Seeder count and freshness — the two numbers that predict whether a grab
   finishes. Deliberately quiet: the feed already refuses anything unusable, so
   these report health rather than shouting a warning. */
.wnt-health { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.wnt-seed { font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
.wnt-seed.is-strong { color: var(--ok, #4f8a5b); }
.wnt-seed.is-thin   { color: var(--warn, #b07d2b); }
.wnt-fresh {
  font-size: 9px; letter-spacing: .1em; padding: 1px 5px;
  border: var(--hair) solid var(--accent); color: var(--accent);
}
.wnt-stale {
  font-size: 9px; letter-spacing: .1em; padding: 1px 5px;
  border: var(--hair) solid var(--rule); color: var(--ink-3);
}

/* The film's year, top-right of the art — the one corner the group stamp and the
   size do not use. Quiet by design: it is context for the title, not a headline. */
.wnt-year {
  position: absolute; right: 0; top: 0;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--panel);
  border-left: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  THE SEASON SHEET — GRAB SERIES                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   The bench is "this title is a choice between prints".  This is the same
   gesture one level up — "this series is a choice between seasons" — so it
   opens in the bench's slot, on the bench's ground, in the bench's ink, and
   the two are mutually exclusive.  Nothing here is a new idiom for its own
   sake; what is new is new because the data needs it.

   THE THREE THINGS THIS SURFACE HAD TO DRAW THAT NOTHING ELSE HERE DOES

   1. WHAT HE ALREADY HOLDS, SEASON BY SEASON — a frame strip.  A run of
      episodes on a shelf IS a strip of frames, some exposed and some not, and
      eight seasons of "7 of 10" is a column you read one line at a time while
      eight strips is one glance.  It is drawn only where the expected count is
      known and short enough to stay on one line; past that the fraction is the
      honest form.  ⛔ It is never a percentage and never a bar: a season is a
      countable number of episodes, not a proportion.

   2. THE ANSWER, AND HOW OLD IT IS.  A search costs ~25 s of real indexer
      traffic and its answer perishes, so every resolved row carries its own
      age and every unsearched row says NOT YET SEARCHED rather than sitting
      empty.  The five rungs share ONE stamp shape and only 4 and 5 take amber:
      🔴 a mixed season inside tolerance is a RESULT, not a warning, and it is
      drawn in the ink the best answer is drawn in.

   3. THE SIZE, BEFORE THE BUTTON FIRES — the order slip.  Leader dots, because
      this is a works order: a line, a figure, and the run of dots between them
      belonging to both.  It is sticky, so the total travels with him down a
      sheet of eight seasons, and the figure is printed ON the control that
      spends it so it can never be a thing revealed afterwards.

   COLOUR, AND THE ONE PLACE IT ESCALATES
   tokens.css and nothing else.  --accent (safety orange) keeps its single
   meaning — this needs attention — so the ordinary GRAB N SEASONS is filled in
   INK, heavy and deliberate like the desk's APPROVE but not shouting, and the
   orange is spent on exactly one thing: an order over 50 GB, which also then
   asks twice.  --warn is rungs 4 and 5, where there is an open question.
   --cool is deliberately NOT used: on this surface it already means "parked
   with another person", which is not what any of this is.
   ⛔ No border-radius. Every divider a hairline. Every figure mono and tabular. */

.wnt-ss {
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  background: var(--panel);
  margin-bottom: 14px;
  position: relative;
}
.wnt-ss[hidden] { display: none; }

/* ------------------------------------------------------------------ head */
.wnt-ss-h {
  display: flex; align-items: baseline; gap: 10px 12px; flex-wrap: wrap;
  padding: 11px 12px;
  border-bottom: var(--hair) solid var(--rule);
}
.wnt-ss-t {
  font-family: var(--font-marquee);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
/* FINISHED / ONGOING · AIRING / ONGOING · BETWEEN SEASONS.  The class changes
   what the sheet is FOR, so it is a stamp beside the name and not a caption. */
.wnt-ss-k {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  color: var(--ink-2);
  padding: 3px 7px;
  border: var(--hair) solid var(--rule);
  background: var(--ground);
  white-space: nowrap;
}
.wnt-ss-k.is-live { color: var(--ink); border-color: var(--ink-2); }
.wnt-ss-k.is-open { color: var(--warn); border-color: var(--warn); }
.wnt-ss-n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: .04em;
}
.wnt-ss-lead {
  margin: 0; padding: 10px 12px 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  max-width: 78ch;
}
.wnt-ss-err {
  margin: 0; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--crit);
}

/* ---------------------------------------------------- search all seasons
   🔴 THE PRICE IS ON THE CONTROL.  This is the one button here that spends
   minutes rather than seconds, and a control that hides what it costs is the
   same untruth as one that hides what it downloads.  The count is only the
   seasons it would ACTUALLY search, so the figure falls as the sheet fills in. */
.wnt-ss-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
}
.wnt-ss-all {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 13px;
  color: var(--ink);
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  text-align: left;
}
.wnt-ss-all:hover { border-color: var(--accent); }
.wnt-ss-all:hover .wnt-ss-all-c { color: var(--accent); }
.wnt-ss-all-l {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .11em;
}
.wnt-ss-all-c {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
}
/* said ONCE for the whole sheet, beside the control it is about */
.wnt-ss-barnote {
  flex: 1 1 240px; max-width: 62ch;
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
/* ⛔ NOT A PROGRESS BAR.  Nothing here knows how long an indexer will take. */
.wnt-ss-flying {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--warn);
}

/* ------------------------------------------------------------ the seasons */
.wnt-ss-rows { display: block; }
.wnt-ss-row {
  display: grid;
  grid-template-columns: 52px 136px minmax(0, 1fr) 106px 186px;
  grid-template-areas:
    "s hold ans sz  act"
    "s hold body body body";
  gap: 4px 12px;
  align-items: start;
  padding: 11px 12px;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--rule) 55%, transparent);
}
.wnt-ss-row:last-child { border-bottom: 0; }
.wnt-ss-row.is-picked { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wnt-ss-row.is-sent { opacity: .8; }

.wnt-ss-s {
  grid-area: s;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink);
  padding: 3px 4px;
  border: var(--hair) solid var(--rule);
  background: var(--ground);
  text-align: center;
}

/* --- the frame strip: what is already on the shelf ---------------------- */
.wnt-ss-hold { grid-area: hold; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wnt-ss-strip { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 3px; }
.wnt-ss-tick {
  display: block; width: 5px; height: 12px;
  border: var(--hair) solid var(--rule);
  background: transparent;
}
.wnt-ss-tick.is-held { background: var(--ink-2); border-color: var(--ink-2); }
.wnt-ss-hw {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .07em; color: var(--muted);
}
.wnt-ss-hw.is-full { color: var(--ok); }
.wnt-ss-hw.is-part { color: var(--ink-2); }

/* --- the answer -------------------------------------------------------- */
.wnt-ss-ans {
  grid-area: ans;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  min-width: 0;
}
/* ONE STAMP SHAPE FOR ALL FIVE RUNGS.  PACK, COMPLETE and MIXED are the same
   ink because a mixed season inside tolerance is a first-class answer; only an
   open question (out of band, incomplete) takes amber, and only a failure
   takes crit. */
.wnt-ss-v {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  color: var(--ink);
  padding: 2px 7px;
  border: var(--hair) solid var(--ink-2);
  white-space: nowrap;
}
.wnt-ss-v.is-idle { color: var(--muted); border-color: var(--rule); border-style: dashed; }
.wnt-ss-v.is-work { color: var(--accent); border-color: var(--accent); }
.wnt-ss-v.is-open { color: var(--warn); border-color: var(--warn); }
.wnt-ss-v.is-bad  { color: var(--crit); border-color: var(--crit); }
.wnt-ss-v.is-on   { color: var(--accent); border-color: var(--accent); }
.wnt-ss-v.is-full { color: var(--ok); border-color: var(--ok); }
.wnt-ss-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--muted);
}
/* the age of an answer is part of the answer */
.wnt-ss-when {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
}
/* prose keeps a readable measure even when the column is 900px wide */
.wnt-ss-p1 {
  flex: 1 1 100%; max-width: 72ch;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}
.wnt-ss-p2 {
  flex: 1 1 100%;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; line-height: 1.45; color: var(--ink-2); letter-spacing: .02em;
}
/* the group names, demoted on purpose: they are a footnote, never the claim */
.wnt-ss-fn {
  flex: 1 1 100%;
  font-family: var(--font-mono); font-size: 10.5px;
  line-height: 1.45; color: var(--muted); letter-spacing: .02em;
}
/* the server's own remark on a season — "shown, but not recommended", "coverage
   read off a truncated sample".  Printed PLAINLY: it is a caveat the reader has
   to be able to weigh, not an alarm, and amber on this surface is reserved for
   an open question.  The rule down its left says whose sentence it is. */
.wnt-ss-note {
  flex: 1 1 100%; max-width: 78ch;
  padding-left: 9px;
  border-left: var(--hair) solid var(--rule);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.wnt-ss-out {
  flex: 1 1 100%; font-size: 12px; line-height: 1.45; color: var(--warn);
}
/* pushed to the end of its line so the affordance is in the same place on every
   row, however long the properties above it happen to run */
.wnt-ss-x {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--muted); background: transparent;
  border: 0; border-bottom: var(--hair) dotted var(--rule);
  padding: 0 0 1px;
}
.wnt-ss-x:hover { color: var(--accent); border-bottom-color: var(--accent); }

.wnt-ss-sz {
  grid-area: sz;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700; color: var(--ink); text-align: right;
}
.wnt-ss-sz.is-unknown { font-size: 10px; font-weight: 400; color: var(--warn); letter-spacing: .06em; }

.wnt-ss-act { grid-area: act; display: flex; flex-direction: column; gap: 5px; }
.wnt-ss-btn {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--ink);
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  padding: 7px 9px;
  min-height: 30px;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.wnt-ss-btn:hover:not(:disabled) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-ss-btn:disabled { cursor: default; color: var(--muted); }
.wnt-ss-btn.is-go { border-color: var(--ink-2); }
/* selected: the row is what the order slip is charging for, so it says so in
   the one colour that means "this is what you picked" */
.wnt-ss-btn.is-picked {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.wnt-ss-btn.is-picked:hover { filter: brightness(1.08); }
.wnt-ss-btn.is-on { color: var(--accent); border-color: var(--accent); }
.wnt-ss-btn.is-bad { color: var(--crit); border-color: var(--crit); }

/* --- the disclosure: for a mixed season it IS the design ---------------- */
.wnt-ss-body {
  grid-area: body;
  margin-top: 6px;
  padding: 8px 0 2px;
  border-top: var(--hair) dashed var(--rule);
}
.wnt-ss-body[hidden] { display: none; }
.wnt-ss-offer { display: flex; flex-direction: column; gap: 3px; }
.wnt-ss-sub {
  margin-top: 9px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  color: var(--muted);
}
.wnt-ss-alt {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  border-bottom: var(--hair) solid color-mix(in srgb, var(--rule) 45%, transparent);
}
.wnt-ss-alt-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wnt-ss-alt-p { font-size: 12px; color: var(--ink-2); }
.wnt-ss-alt-g { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.wnt-ss-alt-s {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--ink-2); text-align: right;
}
.wnt-ss-alt .wnt-ss-btn { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════ THE ORDER SLIP
   A works order: what was asked for, what it weighs, and the run of dots
   between them.  Sticky, so on a sheet of eight seasons the total travels with
   him; it comes to rest at the foot of the sheet, never over the page.

   🔴 IT STICKS ABOVE THE PHONE'S TAB BAR, NOT UNDER IT.  The shell pins a
   fixed navigation bar to the bottom of a phone and publishes its exact height
   as --shell-tabbar (0px on a desk).  `bottom: 0` therefore parked the biggest
   control on this site — the one with the gigabytes printed on it — behind
   MOVIES / SERIES / ANIME, where it was a 6px orange sliver.  The token
   already contains the home-indicator inset, so it is not added twice. */
.wnt-ss-order {
  position: sticky;
  bottom: var(--shell-tabbar, 0px);
  z-index: 2;
  padding: 11px 12px 12px;
  background: var(--panel-2);
  border-top: var(--hair) solid var(--rule);
}
.wnt-ss-line { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.wnt-ss-line-l {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
/* the leader: a real dotted rule, not a row of typed full stops — those never
   line up and they wrap in the middle of a run */
.wnt-ss-dots {
  flex: 1 1 auto; min-width: 14px;
  align-self: center;
  border-bottom: var(--hair) dotted var(--rule);
  transform: translateY(2px);
}
.wnt-ss-line-r {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.wnt-ss-line-t {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--muted);
  min-width: 42px; text-align: right;
}
.wnt-ss-line.is-total {
  margin-top: 5px; padding-top: 8px;
  border-top: var(--hair) solid var(--rule);
}
.wnt-ss-line.is-total .wnt-ss-line-l { color: var(--ink); font-weight: 700; }
.wnt-ss-line.is-total .wnt-ss-line-r { font-size: 14px; }
.wnt-ss-asrep {
  margin: 4px 0 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--muted);
}

/* 🔴 THE FIGURE IS ON THE CONTROL.  Not beside it, not above it — on it, so it
   cannot become a thing revealed after the press.  Filled in INK because this
   is the act that spends bandwidth and disk (the review desk fills APPROVE for
   the same reason); the safety orange is held back for the one case that has
   to interrupt him. */
/* ⛔ NOT A FULL-WIDTH SLAB.  A works order is authorised with a stamp in the
   corner, not a banner across the page — and a 1300px filled bar would be the
   loudest thing on the site sitting under the quietest.  It is sized to its own
   words and set against the right edge, in the same column the figures land in,
   so the eye runs total -> control.  On a phone it becomes full width: there
   the act is the thing you came to do and it belongs under the thumb. */
.wnt-ss-goline { display: flex; justify-content: flex-end; margin-top: 10px; }
.wnt-ss-go {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--ground);
  background: var(--ink);
  border: var(--hair) solid var(--ink);
}
.wnt-ss-go:hover { filter: brightness(1.12); }
/* over 50 GB — more than one season's worth — so it goes orange and asks twice */
.wnt-ss-go.is-big {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.wnt-ss-go.is-armed {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-ink);
}

/* --- the Lock offered after a clean catch-up ---------------------------- */
.wnt-ss-pin {
  padding: 0 0 11px;
  border-bottom: var(--hair) solid var(--rule);
  margin-bottom: 10px;
}
.wnt-ss-pin-p {
  margin: 5px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  max-width: 74ch;
}
.wnt-ss-pin .wnt-ss-act { flex-direction: row; flex-wrap: wrap; gap: 8px; }

/* ══════════════════════════════════════════════════════════ THE CATCH-UP
   John, 2026-08-12: *"maybe you can make separate UI for finished and ongoing
   series list since it might have different logic?"*

   🔴 ONE CONTROL, AND ITS FILL SAYS WHAT PRESSING IT SPENDS.  That is not a
   new idea invented for this block — it is the sheet's existing grammar used
   properly.  SEARCH ALL SEASONS is OUTLINED because it spends indexer time;
   the order slip's button is FILLED because it spends gigabytes.  The catch-up
   is the same control at two moments in its life, so it wears the outline
   while it is only asking a question and takes the fill the instant the answer
   makes it an act.  A reader who has used this sheet once already knows what
   the fill means, and never has to be told.

   ⛔ NOT A PANEL WITH A HEADING AND AN ICON.  It sits directly under the lead
   sentence in the sheet's own ink, on the same hairline rules as everything
   else, because on an ongoing series it is not a feature being advertised —
   it is the question the sheet was opened to answer. */
.wnt-cu {
  padding: 11px 12px 12px;
  border-bottom: var(--hair) solid var(--rule);
}
.wnt-cu-k {
  margin-bottom: 7px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--muted);
}
/* the control itself: label left, figure right, in the tabular column the
   whole sheet lands its figures in */
.wnt-cu-go {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 46px;
  padding: 11px 16px;
  color: var(--ink);
  background: var(--ground);
  border: var(--hair) solid var(--ink-2);
  text-align: left;
}
.wnt-cu-go:hover:not(:disabled) { border-color: var(--accent); }
.wnt-cu-go:hover:not(:disabled) .wnt-cu-c { color: var(--accent); }
.wnt-cu-l {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  min-width: 0;
}
.wnt-cu-c {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; letter-spacing: .04em; color: var(--muted);
}
/* 🔴 THE MOMENT IT WOULD SPEND GIGABYTES, IT FILLS.  Same ink, same weight and
   the same two-step as the order slip's button — one act, drawn one way,
   whichever route he took to it. */
.wnt-cu-go.is-act {
  color: var(--ground); background: var(--ink); border-color: var(--ink);
}
.wnt-cu-go.is-act:hover { filter: brightness(1.12); border-color: var(--ink); }
.wnt-cu-go.is-big {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.wnt-cu-go.is-armed {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-ink);
}
/* ⛔ NOT A PROGRESS BAR, and here not even a row landing to count: one call,
   one answer. The figure on the right is elapsed time — what has passed, never
   a share of a total nothing here knows. */
.wnt-cu-go.is-work {
  color: var(--accent); border-color: var(--accent); border-style: dashed;
  background: var(--ground); cursor: default;
}
.wnt-cu-go.is-work .wnt-cu-c { color: var(--accent); }
.wnt-cu-p {
  margin: 8px 0 0; max-width: 74ch;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.wnt-cu .wnt-ss-x { margin-top: 9px; }
.wnt-cu .wnt-ss-err { margin: 0 0 9px; }
/* ⚠️ THE SERVER'S OWN SENTENCE, AND IT IS A PARAGRAPH.  The live note runs to
   four clauses — which seasons it will plan, which are cached, whether any
   indexer is touched at all — and that is the most useful thing on the block
   before the press.  It gets the sheet's existing treatment for a server
   remark: prose size, ink-2, and a rule down the left saying whose sentence it
   is.  ⛔ Never 10.5px mono: at 400 characters that is a wall, not a note. */
.wnt-cu-note {
  margin-top: 9px; max-width: 78ch;
  padding-left: 9px;
  border-left: var(--hair) solid var(--rule);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}

/* the fold: what it resolved to, season by season, in the works-order grammar
   the slip already uses — a line, a figure, and the leader between them */
.wnt-cu-fold {
  margin-top: 10px; padding-top: 10px;
  border-top: var(--hair) solid var(--rule);
}
.wnt-cu-fold[hidden] { display: none; }
/* 🔴 NO TAG COLUMN ON THIS FOLD.  The order slip keeps one because its tag is
   only ever MIXED or empty, so 42px always holds it.  A catch-up prints the
   RUNG, and a column wide enough for OUT OF BAND took 88px off a 390px phone —
   the season names truncated and the figures still did not line up.  The rung
   moved into the label instead, so the column has nothing left to hold and the
   gigabytes sit hard against the right edge at every width. */
.wnt-cu-fold .wnt-ss-line-t { display: none; }
/* the disclosure's rule follows the TEXT, not the 44px tap box a phone gives
   it — a border-bottom on the box left a dotted line floating below the words */
.wnt-cu .wnt-ss-x {
  border-bottom: 0;
  text-decoration: underline dotted; text-underline-offset: 4px;
}
.wnt-cu-item { padding: 4px 0; }
.wnt-cu-item + .wnt-cu-item { border-top: var(--hair) solid var(--rule); }
/* ⚠️ A SEASON NOTHING CAN BE HAD FOR IS DRAWN, NOT DROPPED — and it is drawn
   in the amber this surface already uses for an open question, never in the
   red it uses for a failure. Nothing failed; there is simply no offer. */
.wnt-cu-item.is-none .wnt-ss-line-l,
.wnt-cu-item.is-none .wnt-ss-line-r,
.wnt-cu-item.is-none .wnt-ss-line-t { color: var(--warn); }
/* ⭐ THE UNIFORMITY LINE — the whole point of asking for the run in one go, so
   it is the first thing on the fold and it is prose, not a stamp. */
.wnt-cu-one {
  margin: 0 0 9px; max-width: 74ch;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.wnt-cu-one.is-mixed { color: var(--muted); }
.wnt-cu-foot {
  display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap;
  margin-top: 7px;
}
/* ⚠️ `.wnt-ss-fn` is a full-width footnote everywhere else on this sheet, which
   is right there and wrong here: on one line the count and the age of the
   answer are one fact. */
.wnt-cu-foot > * { flex: 0 0 auto; }
/* THE SEASON PICKER UNDER A CATCH-UP: still whole, still priced, no longer the
   headline.  ⛔ The demotion is WEIGHT, NOT A PANEL — a grey band under the
   catch-up made the demoted control the heaviest thing on the sheet, which is
   the hierarchy upside down. */
.wnt-ss-bar.is-second .wnt-ss-all-l { font-weight: 400; color: var(--ink-2); }
.wnt-ss-bar.is-second .wnt-ss-barnote { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════ phone
   ⚠️ DESIGNED, NOT SCALED DOWN.  The desktop row is five columns because a
   desk can hold five; a phone cannot, and shrinking them is how #/movies once
   grew 33% at 390px.  So the row is re-cut into four bands in the order a
   thumb needs them:

       S01  ▮▮▮▮▮▯▯▯▯▯  7 OF 10 HELD              24.1 GB     ← who / held / price
       MIXED  searched 2 min ago                              ← the claim
       1080p · x265 · WEB throughout   DETAIL ▾
       [ TAKE 10 EPISODES                              ]      ← the act, thumb-sized

   Identity, holding and price on one line because they are one question; the
   claim underneath at full width because it is prose and wants the measure;
   the control last and full width, because on a phone the act is the thing you
   came to do and it should be under your thumb, not beside a poster.
   The order slip keeps its dotted leaders — they are what makes a narrow line
   readable — and stays stuck to the bottom with the home-indicator inset. */
@media (max-width: 760px) {
  .wnt-ss-h { padding: 10px; gap: 8px 10px; }
  .wnt-ss-t { font-size: 18px; }
  .wnt-ss-lead { padding: 9px 10px 0; font-size: 12.5px; }
  .wnt-ss-bar { padding: 10px; }
  .wnt-ss-all { width: 100%; min-height: 44px; justify-content: center; }
  .wnt-ss-all-l, .wnt-ss-all-c, .wnt-ss-flying,
  .wnt-ss-k, .wnt-ss-n, .wnt-ss-hw, .wnt-ss-when, .wnt-ss-v,
  .wnt-ss-fn, .wnt-ss-p2, .wnt-ss-sub, .wnt-ss-asrep, .wnt-ss-tag,
  .wnt-ss-alt-g, .wnt-ss-line-l, .wnt-ss-line-t, .wnt-ss-x { font-size: 11px; }
  .wnt-ss-barnote { font-size: 12px; flex: 1 1 100%; }
  .wnt-ss-sub, .wnt-ss-tag { letter-spacing: .1em; }

  .wnt-ss-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "s    hold  sz"
      "ans  ans   ans"
      "body body  body"
      "act  act   act";
    gap: 8px 10px;
    padding: 12px 10px;
  }
  .wnt-ss-hold { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  .wnt-ss-strip { padding-top: 0; }
  .wnt-ss-sz { font-size: 15px; align-self: center; }
  .wnt-ss-act { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  /* a season grab is the biggest act on this site; it gets a real target */
  .wnt-ss-act .wnt-ss-btn {
    flex: 1 1 46%;
    min-height: 44px;
    white-space: normal; line-height: 1.2; text-align: center;
    display: flex; align-items: center; justify-content: center;
    overflow: visible; text-overflow: clip;
  }
  /* the disclosure toggle is a control like any other and a thumb has to be
     able to hit it (MOBILE_SPEC §4.2) */
  .wnt-ss-x {
    min-height: var(--tap, 44px);
    display: inline-flex; align-items: center;
    padding: 0 4px;
  }
  .wnt-ss-alt { flex-wrap: wrap; }
  .wnt-ss-alt-t { flex: 1 1 100%; }
  .wnt-ss-alt .wnt-ss-btn { min-height: 44px; flex: 1 1 auto; }

  .wnt-ss-order { padding: 10px 10px 11px; }
  .wnt-ss-line-r { font-size: 12px; }
  .wnt-ss-goline { display: block; }
  .wnt-ss-go {
    width: 100%;
    font-size: 12px; min-height: 48px; letter-spacing: .09em; padding: 12px;
  }
  .wnt-ss-pin .wnt-ss-btn { min-height: 44px; flex: 1 1 42%; }

  /* THE CATCH-UP ON A PHONE — designed, not shrunk.  The desktop control puts
     the label and the figure at opposite ends of a wide line because a desk
     has that width; a phone does not, so the two STACK and the control keeps
     its full height under the thumb.  ⛔ The figure is never truncated to fit:
     it is the reason the button exists. */
  .wnt-cu { padding: 10px; }
  .wnt-cu-go {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 3px; min-height: 52px; padding: 11px 12px;
  }
  .wnt-cu-l {
    font-size: 12px; letter-spacing: .08em;
    white-space: normal; line-height: 1.25;
  }
  .wnt-cu-c { font-size: 10.5px; }
  .wnt-cu-p, .wnt-cu-one { font-size: 12px; }
  .wnt-cu-k { font-size: 9px; }
  .wnt-cu-foot { gap: 4px 8px; }
  /* ⛔ THE SEASON NAME WRAPS, IT DOES NOT ELLIPSISE.  On the order slip a
     truncated line is acceptable because the figure is the point; here the
     line IS the answer — which season, which rung, whose print — and "S02 · 8
     of 10 eps…" answers none of it. The figure stays in its column and the
     label takes a second line when it needs one. */
  .wnt-cu-fold .wnt-ss-line-l {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.35;
  }
  .wnt-cu-fold .wnt-ss-line { align-items: flex-end; }
}

@media (max-width: 430px) {
  .wnt-ss-row { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 12px 10px; }
  .wnt-ss-tick { width: 4px; height: 11px; }
  .wnt-ss-t { font-size: 17px; }
  /* at 390px "GRAB 2 SEASONS · 50.9 GB" is 24 characters: it wraps rather than
     shrinks, because the figure is the reason the button exists */
  .wnt-ss-go { white-space: normal; line-height: 1.25; }
  .wnt-ss-line-t { min-width: 0; }
  /* "CATCH UP · 36 EPISODES · 84.2 GB" is 32 characters — it takes two lines
     at 390px rather than losing the gigabytes off the end */
  .wnt-cu-l { font-size: 11.5px; letter-spacing: .06em; }
  .wnt-cu-go { min-height: 56px; }
}

/* GRAB SERIES sits in the card's own wrapping control row, so on a 128px card
   it takes its own line rather than lying across the next poster.  Outlined,
   never filled: it starts nothing — it opens the sheet where the thing that
   does is drawn with its size on it. */
.wnt-gbtns .wnt-series {
  flex: 1 1 100%;
}
.wnt-series {
  border-style: dashed;
  color: var(--ink-2);
}
.wnt-series:hover {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); border-style: solid;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  THE DOOR — reaching a series that is not on the rail                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Inline with the NEW PRINTS · TELEVISION heading, so the shelf reads *"here
   is what is new — or name one"*.  It is a DESK STRIP, not a panel: a rule
   under the masthead with the open requests set out on it, the way the review
   desk already sits above the rail.  ⛔ Nothing here is a card — the cards on
   this page are prints, and a request is not one. */
.wnt-door {
  border-top: var(--hair) solid var(--rule);
  background: var(--panel);
  padding: 10px 12px 12px;
  margin-bottom: 12px;
}
.wnt-door-top {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding-bottom: 9px;
  border-bottom: var(--hair) solid var(--rule);
  margin-bottom: 9px;
}
.wnt-door-l { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.wnt-door-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink); text-transform: uppercase;
}
.wnt-door-n {
  font-size: 10.5px; letter-spacing: .09em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* THE BOX.  Set in the mono face because what goes in it is a KEY, not prose —
   the same reason the figures are.  It takes the room left over, so on a desk
   the requests and the box share one line. */
.wnt-door-f { flex: 1 1 260px; min-width: 0; display: flex; }
.wnt-door-in {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink);
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  padding: 9px 10px;
  min-height: 38px;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.wnt-door-in::placeholder { color: var(--muted); }
.wnt-door-in:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* THE ROWS.  A wrapped grid rather than a rail: this is a LIST HE READS, and
   the thing he is reading for — what he already holds — is a sentence, not a
   poster.  ⛔ No covers here on purpose; the dossier is one press away and a
   grid of artwork would make this compete with the rail above it. */
.wnt-door-list, .wnt-door-res {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.wnt-door-res { margin-top: 9px; }
.wnt-door-r {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  padding: 8px 10px;
  min-height: var(--tap, 44px);
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  cursor: pointer;
  min-width: 0;
}
.wnt-door-r:hover { border-color: var(--accent); }
.wnt-door-r:hover .wnt-door-t { color: var(--accent); }
.wnt-door-r:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* a candidate is a GUESS he is confirming, so it is drawn open — dashed, the
   same way GRAB SERIES is drawn on a card because it starts nothing */
.wnt-door-r.is-find { border-style: dashed; }
.wnt-door-r.is-find:hover { border-style: solid; }
.wnt-door-t {
  font-family: var(--font-marquee);
  font-size: 14px; font-weight: 800; letter-spacing: -.005em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.wnt-door-m {
  font-size: 10.5px; letter-spacing: .05em; color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wnt-door-marks { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.wnt-door-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
  padding: 2px 5px;
  white-space: nowrap;
}
/* ⛔ NOT AIRED YET is amber, which on this surface already means "an open
   question" and never "it failed" — the sheet's own rule for rungs 4 and 5. */
.wnt-door-tag.is-wait { color: var(--warn); border-color: var(--warn); }
.wnt-door-tag.is-on   { color: var(--accent); border-color: var(--accent); }
.wnt-door-tag.is-have { color: var(--ok); border-color: var(--ok); }
.wnt-door-h {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2);
}
.wnt-door-e {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
  max-width: 74ch;
}

/* ── the queue check, on the row ────────────────────────────────────────── */
.wnt-ss-row.is-inhand { opacity: .92; }
.wnt-ss-note.is-inflight { color: var(--accent); }

/* ── THE SENT STATE ─────────────────────────────────────────────────────────
   It takes the ORDER SLIP'S OWN SLOT and its own ink, because it is the same
   works order after the fact: the leader dots, the figures in their column and
   the tag on the right all line up with what he was reading a second before he
   pressed.  ⛔ It is not a toast and not a banner — those wash off, and the one
   thing this had to stop being is a thing that disappears. */
.wnt-ss-sent {
  padding: 0 0 10px;
  border-bottom: var(--hair) solid var(--rule);
  margin-bottom: 10px;
}
.wnt-ss-sent .wnt-ss-line-t { color: var(--ok); }
.wnt-ss-sent .wnt-ss-line.is-short .wnt-ss-line-t { color: var(--warn); }
.wnt-ss-sent .wnt-ss-out { margin-top: 1px; }
.wnt-ss-sentfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 760px) {
  /* MOBILE IS DESIGNED, NOT SCALED.  On a phone the box is the door — the
     request list is a scroll away but the thing he came to type is under his
     thumb — so the two STACK with the box full width and a real tap target,
     and the rows become one column at the full measure. */
  .wnt-door { padding: 9px 10px 11px; }
  .wnt-door-top { gap: 8px; }
  .wnt-door-l { flex: 1 1 100%; }
  .wnt-door-f { flex: 1 1 100%; }
  .wnt-door-in { min-height: var(--tap, 44px); font-size: 16px; }
  .wnt-door-list, .wnt-door-res { grid-template-columns: 1fr; }
  .wnt-door-r { min-height: 52px; padding: 9px 10px; }
  .wnt-door-t { font-size: 15px; }
  .wnt-door-m, .wnt-door-e { font-size: 12px; }
  .wnt-door-k, .wnt-door-n, .wnt-door-h { font-size: 10px; }
  .wnt-ss-sentfoot { gap: 6px; }
}

@media (max-width: 430px) {
  .wnt-door { padding: 8px 10px 10px; }
  .wnt-door-t { font-size: 14px; }
  .wnt-door-tag { font-size: 8.5px; letter-spacing: .08em; }
  /* the meta line wraps rather than truncates: "you hold 6 of 10 seasons" is
     the reason the row is worth pressing, and half of it answers nothing */
  .wnt-door-m { white-space: normal; }
}

/* ═══════════════════════════════════════════════════ ROLLING NEW PRINTS ═══
   John, 2026-08-13: "make new prints rail for movies and series scrolling,
   for the UX, scroll stop when the rail shelf open."

   ⛔ MIRRORS the .lnd-rail rules in landing.css rather than widening them.
   Broadening those selectors to match any rail would change the landing page
   and the home page too; these four selectors change only NEW PRINTS. The
   keyframes and the .lnd-roll-track / .lnd-roll-seq layout are shared —
   index.html loads landing.css on every route.

   ⭐ The shelf-open stop is NOT here. It is in wanted.js :: roll(), which
   simply never starts the roller while `open` is true — a rail that is not
   rolling cannot be paused wrongly, and CSS that hid the motion would leave
   the duplicated cards in the DOM for a reader who has deliberately opened
   the full list. */
.wnt-rail.is-roll { scroll-snap-type: none; }
.wnt-rail.is-roll.is-rolling.is-roll-left  .lnd-roll-track { animation-name: lnd-roll-l; }
.wnt-rail.is-roll.is-rolling.is-roll-right .lnd-roll-track { animation-name: lnd-roll-r; }

/* 🔴 THE VIEWER WINS — play-state only, so these never fight for the name. */
.wnt-rail.is-held  .lnd-roll-track,
.wnt-rail.is-off   .lnd-roll-track,
.wnt-rail.is-focus .lnd-roll-track { animation-play-state: paused; }
/* ⚠️ Real hover pointers only: a phone leaves a phantom :hover on the last
   thing tapped, and "it moves until you touch it once" is worse than static. */
@media (hover: hover) {
  .wnt-rail.is-roll:hover .lnd-roll-track { animation-play-state: paused; }
}

/* HISTORY_20260829 — the approval history: one line per answered ask, read by
   scanning.  The ones that landed are folded away by default and marked with
   the house's ◆ when shown; safety-orange stays the colour of attention, so a
   FAILED verdict gets it and a settled one does not. */
.wnt-hi { margin-top: 26px; }
.wnt-hi-list, .wnt-hi-more { display: flex; flex-direction: column; }
.wnt-hi-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 4px 12px;
  padding: 9px 2px; border-top: var(--hair) solid var(--rule);
}
.wnt-hi-row.is-here { opacity: .75; }
.wnt-hi-v { font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.wnt-hi-v.is-approved { color: var(--ok); }
.wnt-hi-v.is-rejected { color: var(--muted); }
.wnt-hi-v.is-failed { color: var(--crit); }
.wnt-hi-t {
  font-weight: 600; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wnt-hi-m { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wnt-hi-sh { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wnt-hi-sh.is-on { color: var(--accent); }
.wnt-hi-why {
  grid-column: 2 / -1; margin: 4px 0 0;
  font-size: 12px; color: var(--ink-2);
}
.wnt-hi-btn {
  margin-top: 10px; align-self: flex-start;
  font: 600 11px/1 var(--font-ui); letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 12px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: var(--hair) solid var(--rule); border-radius: 3px;
}
.wnt-hi-btn:hover { color: var(--ink); border-color: var(--ink-2); }
@media (max-width: 620px) {
  .wnt-hi-row { grid-template-columns: 72px minmax(0, 1fr); }
  .wnt-hi-m, .wnt-hi-sh { grid-column: 2; white-space: normal; }
}

/* PROFILE_20260901 — the raiser's face on the ASKS desk (admin scope only) */
.wnt-dk-face{
  width:20px; height:20px; object-fit:cover; vertical-align:-5px;
  margin-right:6px; border:1px solid var(--rule);
}