/* ==========================================================================
   NITRATE — THE SERIES PAGE BODY.  Pairs with series.js.  Nothing else.

   The film pages are made of artwork; this one is made of paperwork.  The
   marquee above still carries the pictures — below it a shelf of 268 shows is
   a set of LENGTHS, and the only honest way to draw a length is to draw it.

   COLOUR.  Every value comes from tokens.css and none are redefined here.
   Safety orange has exactly two jobs on this page, both of them the rule
   tokens.css states: the figure in the column you sorted by (and the control
   doing the sorting), and the day count on a show filed as running that has
   not aired anything in over a year.  The tracks are ink and muted ink.

   GEOMETRY.  Hairlines, no radius, tabular figures.  The block takes the
   host's gutter (--pad-x) and claims no margin of its own.

   ALIGNMENT.  The measuring rule and every row share ONE column template and
   ONE reserved right-hand track for the Plex pair, at every width — including
   the narrow layout, where the cells are explicitly placed rather than
   auto-flowed so that hiding a header label cannot shift the ruler off the
   bars it is measuring.
   ========================================================================== */

.nsr {
  display: block;
  padding: 0 var(--pad-x, 0px);
  margin: 0;
}

.nsr > section { margin: 0 0 46px; }
.nsr > section:last-child { margin-bottom: 8px; }

.nsr-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

/* --- block heading: a rule with the note sitting on it -------------------- */
.nsr-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.nsr-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(19px, 2.3vw, 27px);
  font-weight: 700;
  letter-spacing: -.01em;
  flex: 0 0 auto;
}
.nsr-note {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.nsr-hr {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}

/* the dagger that points at the seasons note; never decorative */
.nsr-mark {
  font-size: .72em;
  color: var(--muted);
  line-height: 0;
}

/* ==========================================================================
   I.  THE RUN FIGURES — prose left, the figures right

   John, 2026-08-12, holding this block up against THE RUN on #/anime: "can
   you make it more neat like this?"  What he was looking at was a 148px "342"
   with a thousand pixels of nothing beside it and six figures in a flat row
   underneath.  THE RUN is the same material composed — prose left, a bordered
   stat grid right, the summary under both — so this block is now that one.

   ⭐ THIS IS DELIBERATELY NOT A NEW COMPONENT.  Every number below was taken
   from `.an-mast` / `.an-figs` in anime.css (the 1.15fr : 1fr split, the 44px
   gutter, the 11px mono label, the clamp(26px, 3vw, 38px) marquee value, the
   11px muted caption, the collapse at 1080) so the two pages read as one
   instrument.  The class names are ours because anime.css belongs to another
   module and a shared class is a shared fate; the VALUES are theirs.  If that
   file's masthead is retuned, retune this with it.
   ========================================================================== */
.nsr-led {
  padding-top: 2px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 8px 44px;
  align-items: start;
}
.nsr-led-l { min-width: 0; }

/* The headline.  It was a flex row of numeral + words, which is what wrapped
   "…END TO / END" mid-phrase: the words were a baseline-aligned sibling of a
   148px glyph with 23ch to live in.  Stacked, the phrase gets the column's
   whole width and sets on one line at every width above the phone. */
.nsr-led-big { display: block; }
.nsr-led-fig {
  display: block;
  font-family: var(--font-marquee, var(--font-display));
  font-variant-numeric: tabular-nums;
  font-size: clamp(56px, 7.8vw, 116px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.035em;
  color: var(--ink);
}
.nsr-led-unit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(16px, 1.9vw, 27px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.04;
  color: var(--ink-2);
}
.nsr-led-lede {
  margin: 13px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nsr-led-lede b { color: var(--ink); font-weight: 700; }

/* The figures.  FOUR cards carrying SIX figures — seasons rides under runs
   and the median episode under episodes, exactly as "median 52 a title" rides
   under EPISODES on the anime block.  A caption is for a figure that MODIFIES
   the one above it; a card is for a figure that stands beside the others. */
.nsr-led-reg {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--hair) solid var(--rule);
  border-left: var(--hair) solid var(--rule);
}
.nsr-led-cell {
  border-right: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  padding: 9px 12px 10px;
  min-width: 0;
}
.nsr-led-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.nsr-led-v {
  margin: 2px 0 0;
  font-family: var(--font-marquee, var(--font-display));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.nsr-led-s {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
/* The foot carries the rule so it spans BOTH columns (`.an-prop` does the
   same); the sentence inside keeps a reading measure. */
.nsr-led-foot {
  grid-column: 1 / -1;
  margin-top: 20px;
  border-top: var(--hair) solid var(--rule);
  padding-top: 11px;
}
.nsr-led-say {
  margin: 0;
  max-width: 82ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* The two columns become one where the anime masthead's do, at the same
   width, for the same reason: below this the prose column can no longer hold
   a 62ch measure beside a grid of four numbers. */
@media (max-width: 1080px) {
  .nsr-led { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ==========================================================================
   II.  STILL RUNNING — the card index of what can leave you hanging
   ========================================================================== */
.nsr-run-say {
  margin: 0 0 14px;
  max-width: 84ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.nsr-run-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
}
.nsr-run-col { min-width: 0; }

.nsr-run-ch {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: var(--hair) solid var(--ink-2);
}
.nsr-run-cl {
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 0;
}
.nsr-run-cn {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink);
}
.nsr-run-col.is-quiet .nsr-run-cn { color: var(--accent); }
.nsr-run-cs {
  padding: 5px 0 2px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

.nsr-run-list { list-style: none; margin: 0; padding: 0; }
.nsr-run-item { border-bottom: var(--hair) solid var(--rule); }
.nsr-run-none {
  padding: 7px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

.nsr-run-btn {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 0 7px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.nsr-run-btn:hover { background: var(--panel); }
.nsr-run-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.nsr-run-f {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.nsr-run-d { font-size: 11px; color: var(--muted); }
.nsr-run-a {
  font-size: 11px;
  color: var(--ink-2);
  min-width: 5.4em;
  text-align: right;
}
.nsr-run-a.is-late { color: var(--accent); }

/* ==========================================================================
   III.  THE RUN REGISTER
   ========================================================================== */
.nsr-reg-say {
  margin: 0 0 12px;
  max-width: 84ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- controls ------------------------------------------------------------ */
.nsr-ctl {
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  padding: 2px 0 11px;
}
.nsr-ctl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
}
.nsr-ctl-l {
  flex: 0 0 auto;
  width: 8.6em;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.nsr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 9px 5px;
  border: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .03em;
  line-height: 1.25;
}
.nsr-chip:hover { border-color: var(--muted); color: var(--ink); }
.nsr-chip-n { font-size: 11px; color: var(--muted); }
.nsr-chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}
.nsr-chip[aria-pressed="true"] .nsr-chip-n { color: var(--accent); }
.nsr-chip-tog::before {
  content: "";
  width: 7px;
  height: 7px;
  border: var(--hair) solid var(--rule);
  align-self: center;
}
.nsr-chip-tog[aria-pressed="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}

.nsr-tally {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--muted);
}
.nsr-tally-n { color: var(--ink); font-size: 13px; }

/* --- the shared column template ------------------------------------------
   58px on the right is the track the Plex pair parks in, reserved at every
   width so the pair can never sit on top of a figure and so the measuring
   rule and the bars share one right edge. */
.nsr-scale,
.nsr-open {
  display: grid;
  grid-template-columns:
    40px                   /* # */
    minmax(0, 1.7fr)       /* show */
    238px                  /* sn · ep · min · shelf */
    minmax(72px, 1.15fr)   /* the run */
    72px                   /* hours */
    118px;                 /* status */
  gap: 0 14px;
  align-items: center;
  padding-right: 58px;
}
/* 🔴 These widths are px on purpose. They were em, and em resolves against the
   element's OWN font-size — 10px on the measuring rule, 12.5px on a row — so
   every column drifted and the ruler was measuring bars it did not line up
   with. A shared template has to have a shared basis. */

.nsr-scale {
  position: sticky;
  /* the masthead is sticky at the body level; series.js measures it so the rule
     parks under it instead of behind it */
  top: var(--nsr-top, 0px);
  z-index: 2;
  padding-top: 22px;
  padding-bottom: 6px;
  margin-top: 16px;
  background: var(--ground);
  border-bottom: var(--hair) solid var(--ink-2);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.nsr-row {
  position: relative;
  border-bottom: var(--hair) solid var(--rule);
}
.nsr-row:hover { background: var(--panel); }

.nsr-open {
  width: 100%;
  /* 🔴 padding-left MUST be stated. A <button> carries the UA's own 1px 6px,
     and that 6px pushed every column six pixels off the measuring rule above
     it — the ruler was ticking a scale the bars did not sit on. */
  padding-left: 0;
  padding-top: 7px;
  padding-bottom: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* --- cells --------------------------------------------------------------- */
.nsr-c-idx {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.nsr-c-name { min-width: 0; }
.nsr-t {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.nsr-y {
  margin-left: 7px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

.nsr-c-figs {
  display: flex;
  gap: 9px;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  /* hard guard: a show carrying both a group and a format marker used to push
     its figures out over the track and sit on top of its own bar */
  min-width: 0;
  overflow: hidden;
}
.nsr-scale .nsr-c-figs { display: block; }
.nsr-f-sn { min-width: 3.4em; }
.nsr-f-ep { min-width: 4.4em; }
.nsr-f-mn { min-width: 3.8em; color: var(--muted); }
/* the run disagreeing with itself is a fact about the FILES, so it sits with
   the file figures and not in the column about where you are in the show */
.nsr-f-mix { color: var(--muted); }

/* --- the track: one show, drawn as its length ----------------------------- */
.nsr-c-track {
  position: relative;
  display: block;
  height: 12px;
  border-bottom: var(--hair) solid var(--rule);
}
.nsr-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  min-width: 1px;
  background: var(--muted);
  transition: width .18s ease;
}
.nsr-bar-seen {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink);
}
.nsr-bar.is-unknown {
  height: 0;
  border-top: var(--hair) dashed var(--rule);
  background: transparent;
}
/* THE SEAM's one visible mark. Orange because a hole is the definition of
   "this needs attention"; it exists only once applyGaps() has been fed. */
.nsr-gapmark {
  font-size: 10px;
  color: var(--accent);
  white-space: nowrap;
}

/* the measuring rule */
.nsr-scale-track {
  height: 14px;
  border-bottom-color: var(--ink-2);
}
.nsr-tick {
  position: absolute;
  bottom: 0;
  height: 8px;
  border-left: var(--hair) solid var(--muted);
}
.nsr-tick-l {
  position: absolute;
  bottom: 10px;
  left: 0;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: none;
}
.nsr-tick.is-end .nsr-tick-l { transform: translateX(-100%); padding-right: 2px; }

/* --- hours + status ------------------------------------------------------- */
.nsr-c-hrs {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  text-align: right;
}
.nsr-hv {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
}
.nsr-hu { font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }

.nsr-c-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nsr-st {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.nsr-st-ongoing {
  color: var(--ink);
  border-bottom: var(--hair) solid var(--ink-2);
  align-self: flex-start;
}
.nsr-st-unknown { font-style: italic; }
.nsr-sub {
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the ONE meaning of orange in this block: the measure you ordered by */
.is-sorted .nsr-hv,
.is-sorted .nsr-t,
.is-sorted .nsr-y,
.is-sorted .nsr-f-ep,
.is-sorted .nsr-sub { color: var(--accent); }
.nsr-c-figs.is-sorted { color: var(--accent); }

/* --- the Plex + Stream pair ----------------------------------------------
   Absolutely parked in the reserved 58px track, never inside the row button:
   an <a> cannot live in a <button>.  Out of the tab order — 268 rows would
   add 536 stops — and the sheet the row opens carries the same pair focusable. */
.nsr-act {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .14s ease;
}
.nsr-row:hover > .nsr-act,
.nsr-row:focus-within > .nsr-act { opacity: 1; }

/* glyph only: the labels are wider than the whole status column, and both
   controls carry their own aria-label */
.nsr-act .plexlink-label,
.nsr-act .nstream-label { display: none; }
.nsr-act .plexlink,
.nsr-act .nstream-btn {
  height: 24px;
  padding: 0 6px;
  min-width: 25px;
  justify-content: center;
}

/* --- the expander --------------------------------------------------------- */
.nsr-reg-foot { padding: 14px 0 0; }
.nsr-more {
  padding: 7px 14px;
  border: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .05em;
}
.nsr-more:hover { border-color: var(--accent); color: var(--accent); }
.nsr-more[hidden] { display: none; }

/* ==========================================================================
   IV.  THE NOTES
   ========================================================================== */
.nsr-note-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nsr-note-item {
  padding: 11px 0 12px;
  border-bottom: var(--hair) solid var(--rule);
  min-width: 0;
}
.nsr-note-h {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.nsr-note-b {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   NARROW
   Cells are placed EXPLICITLY here rather than auto-flowed, so hiding a header
   label cannot re-flow the ruler out of alignment with the bars beneath it.
   ========================================================================== */
@media (max-width: 1120px) {
  .nsr-scale,
  .nsr-open {
    grid-template-columns: 38px minmax(0, 1.5fr) 204px minmax(64px, 1fr) 66px 108px;
    gap: 0 10px;
  }
  .nsr-note-list { gap: 0 22px; }
}

@media (max-width: 900px) {
  .nsr-run-grid { grid-template-columns: minmax(0, 1fr); gap: 26px 0; }
  .nsr-note-list { grid-template-columns: minmax(0, 1fr); }
  .nsr-ctl-l { width: 100%; padding-bottom: 1px; }
}

@media (max-width: 860px) {
  .nsr-scale,
  .nsr-open {
    grid-template-columns: 34px minmax(0, 1fr) 86px;
    gap: 2px 10px;
  }
  .nsr-c-idx  { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
  .nsr-c-name { grid-column: 2 / span 2; grid-row: 1; }
  .nsr-c-figs { grid-column: 2; grid-row: 2; }
  .nsr-c-stat { grid-column: 3; grid-row: 2; align-items: flex-end; text-align: right; }
  .nsr-c-track{ grid-column: 2; grid-row: 3; margin-top: 2px; }
  .nsr-c-hrs  { grid-column: 3; grid-row: 3; }

  .nsr-c-figs { font-size: 10.5px; gap: 7px; flex-wrap: wrap; overflow: visible; }
  .nsr-f-sn, .nsr-f-ep, .nsr-f-mn { min-width: 0; }

  /* the ruler keeps its column and loses its labels */
  .nsr-scale { padding-top: 20px; margin-top: 12px; }
  .nsr-scale .nsr-c-idx,
  .nsr-scale .nsr-c-name,
  .nsr-scale .nsr-c-figs,
  .nsr-scale .nsr-c-stat { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   THE HAND.  2026-08-10.

   THIS PAGE WAS 16,243px AT 390 — nineteen screens.  Two thirds of that was
   one block: sixty register rows at 86px each, drawn over three lines with a
   two-line status cell and a 12px trench under every bar.  A register is a
   dense object by nature and the answer is not to make it shorter by holding
   things back; it is to stop spending a line and a half on air.

   WHAT CHANGED, and what it bought at 390px:
     · the row is still three lines, but they are the RIGHT three — the show
       and its hours on one, the figures and where you are on the next, the
       length itself on the third.  The status cell lies down instead of
       stacking.  86px → ~55px, and sixty of them is ~1,900px back.
     · every remaining control clears 44px: the filter chips, the still-running
       index, and the reveal at the foot of the register.
     · the Plex pair is genuinely gone.  It was already told to go at 560px,
       but .nact { display:flex } in the shell is a later, equal-weight rule
       and quietly won — 134 controls sat at 25 × 24px with opacity 0, hover-
       only, unreachable by a thumb and uncountable by eye.  The row's own
       selector now outranks it.  The sheet the row opens carries both.

   WHAT DID NOT CHANGE, and cannot from here: the register still reveals SIXTY
   rows before the "reveal the rest" control.  Twenty-five would be the honest
   phone default and that number lives in series.js.
   ⭐ 2026-08-11: series.js now does exactly that, off NITRATE.isMobile(), and
   re-counts on the crossing.  The note stays because it is the reason the
   number is where it is.

   ═════════════════════════════════════════════════════════════════════════
   THE FOLD.  2026-08-11.  This was THREE queries for one phone — 760, 620
   (the re-cut row) and 560 (the ledger cell and the ruler's right edge),
   invented on three different days.  MOBILE_SPEC §1 folds 460–720 into 760,
   so they are one block, kept in the cascade order they resolved in at 390px
   before the fold: 560's rules first, then 760's, then 620's.
   ⛔ Nothing above 760 moved — 860, 900 and 1120 are exactly as they were.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* --- was the 560 tier ------------------------------------------------- */
  .nsr-scale,
  .nsr-open { padding-right: 0; }
  .nsr-run-a { min-width: 4.8em; }

  /* the host gutters at --pad; this block was paying for it twice */
  .nsr { padding-left: 0; padding-right: 0; }
  .nsr > section { margin-bottom: 34px; }

  .nsr-h { font-size: 21px; }

  /* 🔴 THE NOTE WAS BEING EATEN.  A head is title · note · rule on one
     baseline, and the note is `white-space: nowrap` with an ellipsis.  At
     390px "44 of 268 have not been marked finished or cancelled" was given
     106px of the 221px it wants and printed as "44 of 268 have not been
     marke…" — the line that says what the section IS, cut mid-word, on every
     heading in the block.  So the head wraps: the title keeps the rule beside
     it, and the note drops to a full-width line under it, whole.  `order` is
     what puts it BELOW the rule rather than between the two. */
  .nsr-head { flex-wrap: wrap; row-gap: 2px; }
  .nsr-note {
    order: 3;
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    font-size: 11.5px;
    line-height: 1.45;
  }

  /* --- I. the run figures -----------------------------------------------
     The cards keep their desktop type here, as the anime masthead's do: the
     value is a clamp that has already bottomed out at 26px and the label and
     caption are 11px mono either way.  The old tier shrank the value to 16px
     because it was one of six cells in a flex row two-across; it is now one
     of four cards and there is room for the figure to be a figure. */
  .nsr-led { gap: 16px; }
  .nsr-led-say,
  .nsr-run-say,
  .nsr-reg-say { font-size: 12.5px; line-height: 1.55; }

  /* --- II. still running ------------------------------------------------ */
  .nsr-run-grid { gap: 22px 0; }
  .nsr-run-cl { font-size: 11.5px; }
  .nsr-run-cs { font-size: 11.5px; }
  .nsr-run-none { font-size: 12.5px; }
  /* A full-width row with a hairline under it.  It was 40px — close enough to
     read as done and not close enough to BE done: this index is 44 rows of
     one-line titles stacked directly on each other, the worst possible place
     to be 4px short, because the row you miss is the row above the one you
     wanted and it opens a different show.  44 is the floor (spec §4.2). */
  .nsr-run-btn { min-height: var(--tap, 44px); padding: 4px 0 5px; gap: 8px; }
  .nsr-run-t { font-size: 12.5px; }
  .nsr-run-d, .nsr-run-a { font-size: 11.5px; }

  /* --- III. the controls ------------------------------------------------ */
  .nsr-ctl { padding-bottom: 12px; }
  .nsr-ctl-row { gap: 7px; padding-top: 8px; }
  .nsr-ctl-l { width: 100%; font-size: 11px; padding-bottom: 2px; }
  .nsr-chip {
    align-items: center;
    min-height: 44px;
    padding: 4px 12px;
    font-size: 12.5px;
  }
  .nsr-chip-n { font-size: 11.5px; }
  .nsr-chip-tog::before { width: 9px; height: 9px; }
  .nsr-tally { font-size: 12px; }
  .nsr-tally-n { font-size: 14px; }

  /* --- the reveal ------------------------------------------------------- */
  .nsr-reg-foot { padding-top: 16px; }
  .nsr-more {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 12px;
  }

  /* --- IV. the notes ---------------------------------------------------- */
  .nsr-note-h { font-size: 11.5px; }
  .nsr-note-b { font-size: 12.5px; }

  /* ══ was the 620 tier ══════════════════════════════════════════════════
     Everything below drew the register ROW.  It is folded in here unchanged
     and LAST, which is exactly where it sat in the cascade before. */
  /* THE ROW, RE-CUT.  Three lines, explicitly placed — the ruler above and the
     bars below share one template, so a hidden header can never slide the
     scale off the thing it is measuring. */
  .nsr-scale,
  .nsr-open {
    grid-template-columns: 28px minmax(0, 1fr) 92px;
    gap: 1px 10px;
    padding-right: 0;
  }
  /* the bottom padding is the lane the length is drawn in */
  .nsr-open { padding-top: 6px; padding-bottom: 13px; }

  /* line 1  #  ·  show (year)  ·············  hours
     line 2  figures  ························  status
     the lane  the length itself, across the whole measure of the row
     The status column spans line 2 and the lane, so a show you have never
     opened — 222 of the 268 — costs nothing for the line it does not print. */
  .nsr-c-idx  { grid-column: 1; grid-row: 1; align-self: baseline; padding-top: 0; font-size: 11px; }
  .nsr-c-name { grid-column: 2; grid-row: 1; }
  .nsr-c-hrs  { grid-column: 3; grid-row: 1; align-self: baseline; }
  .nsr-c-figs { grid-column: 2; grid-row: 2; align-self: baseline; }
  .nsr-c-stat { grid-column: 3; grid-row: 2 / span 2; align-self: start; overflow: hidden; }

  /* 🔴 THE LENGTH LEAVES THE GRID.  On the row it is absolutely placed against
     .nsr-row — which is position:relative, and whose padding box starts and
     ends exactly where the grid does — so it costs no line of its own and it
     runs the WHOLE measure instead of one 218px column.  That is 47% more bar
     to compare, on the one block whose entire argument is that a run is a
     length.  The measuring rule stays IN the grid and spans the same two
     columns, so the two still share one left edge and one right edge; a
     grid-placed absolute child inside the sticky rule would have resolved
     against its grid AREA rather than the box, which is the trap here. */
  .nsr-c-track {
    position: absolute;
    left: 38px;              /* 28px index column + 10px gap */
    right: 0;
    bottom: 5px;
    height: 6px;
    margin: 0;
  }
  /* 🔴 position stays RELATIVE.  The ticks and their labels are absolutely
     placed at left:X% INSIDE the track; make it static and they resolve
     against the sticky rule instead and the whole scale walks off. */
  .nsr-scale .nsr-c-track {
    position: relative;
    left: auto; right: auto; bottom: auto;
    grid-column: 2 / -1;
    grid-row: 3;
    height: 12px;
  }
  .nsr-st { font-size: 11px; line-height: 1.3; letter-spacing: .08em; }
  .nsr-sub { font-size: 11px; line-height: 1.3; }
  .nsr-t { font-size: 13px; line-height: 1.25; }
  .nsr-y { font-size: 11px; }
  .nsr-c-figs { font-size: 11px; line-height: 1.3; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
  .nsr-hv { font-size: 13px; }
  .nsr-hu { font-size: 11px; letter-spacing: .06em; }

  .nsr-bar { height: 6px; }

  /* the ruler keeps its scale and its labels and gives back its headroom */
  .nsr-scale { padding-top: 17px; padding-bottom: 6px; margin-top: 12px; }
  .nsr-scale .nsr-c-hrs { display: none; }
  .nsr-tick { height: 7px; }
  .nsr-tick-l { bottom: 9px; font-size: 11px; }

  /* 🔴 The shell's .nact { display: flex } is a later rule of equal weight, so
     a bare .nsr-act could never turn this off.  The row's own selector can. */
  .nsr-row > .nsr-act { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   THE NARROW TIER.  MOBILE_SPEC §1 — 430px, the second and last sanctioned
   tier, and the first time this stylesheet has needed it (it had only 760).
   ⛔ Not a new breakpoint: it is one of the two the contract names.

   ONE THING happens here, and only here: the four run cards go one-up.  The
   anime masthead drops its four to one column at 760; these go at 430
   instead, because the series captions are longer than the anime ones — "936
   seasons, specials included" is 30 characters against "median 52 a title"'s
   17, and two-across at 430 breaks it over two lines while two-across at 560
   sets it whole.  The width where a card stops fitting its caption is the
   width where the grid should stop being a grid, and that is 430 here.
   At the three widths the two pages are compared at — 390, 1000, 1440 —
   both blocks are laid out identically.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .nsr-led-reg { grid-template-columns: minmax(0, 1fr); }
}

/* The two transitions in this file are the run bar filling and the row's own
   controls fading in.  Both are motion, and this was the last stylesheet in
   the house carrying motion with no guard on it. */
@media (prefers-reduced-motion: reduce) {
  .nsr-bar-seen { transition: none; }
  .nsr-act { transition: none; }
}