/* ==========================================================================
   NITRATE — THE SHORTLIST.  Pairs with shortlist.js.  Nothing else.

   The block that used to be a rail of twenty-four posters is now a worksheet:
   a ranked six, each with the measures that put it there drawn beside it, and
   the rule printed above the list rather than asserted under it.

   COLOUR.  Every value comes from tokens.css; none are redefined here.  Safety
   orange has exactly ONE meaning in this block — THE NUMBER THAT DECIDED THE
   ORDER: the composite score on each row, and the budget chip currently doing
   the sorting.  The measure bars are ink; the register of figures is mono.
   (The Plex play / cast pair keeps its own orange glyph at rest.  That is
   plexlink's and stream's rule and this block does not overrule it.)

   GEOMETRY.  Hairlines, no radius, tabular figures.  The block takes the
   host's gutter (--pad-x, absent everywhere but the foyer) and claims no
   margin of its own, so the page keeps deciding where it sits.
   ========================================================================== */

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

/* --- heading: a rule with the tally sitting on it ------------------------- */
.sl-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.sl-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(18px, 2.1vw, 24px);
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.sl-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;
}
.sl-hr {
  flex: 1 1 auto;
  min-width: 16px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}

.sl-empty {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* --- the one control: how long you have ---------------------------------- */
.sl-ctl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 0 10px;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}
.sl-ctl-l {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sl-ctl-u {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
}
.sl-chips { display: flex; gap: 0; }
.sl-chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: transparent;
  border: var(--hair) solid var(--rule);
  border-right: 0;
  padding: 4px 12px 5px;
  min-height: 27px;
}
.sl-chip:last-child { border-right: var(--hair) solid var(--rule); }
.sl-chip:hover { color: var(--ink); background: var(--panel-2); }
/* the axis that decided the order — the only orange in the header */
.sl-chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--panel-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.sl-chip:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }

/* --- the rule, printed ---------------------------------------------------- */
.sl-rule { padding: 12px 0 14px; }
.sl-rule-h {
  font-size: 10.5px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 7px;
}
.sl-rule-l {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 0 14px;
  margin: 0;
  max-width: 118ch;
}
.sl-rule-k {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-top: var(--hair) solid var(--rule);
}
.sl-rule-d {
  margin: 0;
  padding: 3px 0;
  border-top: var(--hair) solid var(--rule);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  min-width: 0;
  overflow-wrap: break-word;
}
.sl-rule-n {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.sl-rule-w {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink-2);
}
/* a measure that was read and then discarded is still part of the working */
.sl-rule-k.is-out .sl-rule-n,
.sl-rule-k.is-out .sl-rule-w,
.sl-rule-d.is-out { color: var(--muted); }
.sl-rule-k.is-out .sl-rule-n { text-decoration: line-through; }
.sl-rule-f {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 108ch;
}

/* --- the list ------------------------------------------------------------- */
.sl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--hair) solid var(--rule);
}
.sl-row {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, .88fr) minmax(0, 1.6fr) 94px;
  gap: 0 18px;
  align-items: start;
  padding: 13px 0 14px;
  border-top: var(--hair) solid var(--rule);
}
.sl-row:hover { background: var(--panel); }

.sl-rank {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  padding-top: 2px;
  text-align: left;
}

/* the row's primary control.  The play / cast pair is its SIBLING, never a
   child: an <a> cannot live inside a <button>. */
.sl-open {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
  color: inherit;
}
.sl-open:focus-visible { outline-offset: 3px; }
.sl-thumb {
  position: relative;
  display: block;
  width: 46px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
}
.sl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-thumb.is-blank img { visibility: hidden; }

.sl-id { display: block; min-width: 0; }
.sl-t {
  display: block;
  font-family: var(--font-marquee, var(--font-display));
  font-size: 19px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
  overflow-wrap: break-word;
}
.sl-open:hover .sl-t { color: var(--accent); }
.sl-meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: break-word;
}
/* wrap BETWEEN the facts, never through one — "5 / seasons" on two lines reads
   as two facts that are not there */
.sl-meta > span:not(.sl-sep) { white-space: nowrap; }
.sl-sep { color: var(--rule); padding: 0 5px; }

/* --- the working ---------------------------------------------------------- */
.sl-work { min-width: 0; }
.sl-m {
  display: grid;
  grid-template-columns: 58px 92px minmax(0, 1fr) 38px;
  gap: 0 10px;
  align-items: center;
  padding: 2px 0;
}
.sl-m-k {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sl-m-bar {
  display: block;
  height: 7px;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
  overflow: hidden;
}
.sl-m-fill {
  display: block;
  height: 100%;
  background: var(--ink-2);
  transition: width .18s ease;
}
.sl-m-t {
  font-size: 11px;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-m-p {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.sl-verdict {
  margin: 5px 0 0;
  padding-left: 10px;
  border-left: var(--hair) solid var(--rule);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- the score, and the two controls under it ----------------------------- */
.sl-tail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
.sl-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);          /* the number that decided the order */
}
.sl-score-l {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sl-act {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  justify-content: flex-end;
}
/* glyph only: the words would be wider than the column, and both controls set
   their own aria-label so nothing is lost to a screen reader */
.sl-act .plexlink-label,
.sl-act .nstream-label { display: none; }
.sl-act .plexlink,
.sl-act .nstream-btn { height: 24px; padding: 0 8px; }

/* --- what just missed, and the label -------------------------------------- */
.sl-next {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: break-word;
}
.sl-next-k {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: 10px;
  white-space: nowrap;
}
.sl-next-i { white-space: nowrap; }
.sl-next-t { color: var(--ink-2); }
.sl-next-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.sl-cap {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: var(--hair) solid var(--rule);
  max-width: 108ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------------------- narrower ---
   Two folds.  At the first the working drops under the title and takes the
   full width, because a 58px label plus a bar plus a sentence cannot share a
   half column.  At the second the poster and the rank sit on the title's line
   and the score moves up beside them. */
@media (max-width: 1080px) {
  .sl-row {
    grid-template-columns: 26px minmax(0, 1fr) 92px;
    gap: 2px 14px;
  }
  /* Every child is PLACED.  With .sl-work spanning 2/4 on a three-column grid,
     auto-placement drops .sl-tail — the score — into the 26px rank column on a
     row of its own, where it overflows to the left and is clipped by the body's
     own overflow-x:hidden.  Nothing in a scroll-width check can see that. */
  .sl-rank { grid-column: 1; grid-row: 1; }
  .sl-open { grid-column: 2; grid-row: 1; }
  .sl-tail { grid-column: 3; grid-row: 1; }
  .sl-work { grid-column: 2 / 4; grid-row: 2; margin-top: 8px; }
  .sl-m { grid-template-columns: 58px 78px minmax(0, 1fr) 38px; }
}

/* folded 620 → 760, the house mobile tier (MOBILE_SPEC §1).  1080 is above 820
   and is a desktop fold, so it stays.  THE HAND block below is the same tier
   and is written after this one on purpose: where the two touch, it wins. */
@media (max-width: 760px) {
  .sl-row {
    grid-template-columns: 22px minmax(0, 1fr) 70px;
    gap: 2px 10px;
    padding: 12px 0 13px;
  }
  .sl-open { grid-template-columns: 38px minmax(0, 1fr); gap: 0 10px; }
  .sl-thumb { width: 38px; }
  .sl-t { font-size: 17px; }
  .sl-score { font-size: 20px; }
  .sl-m {
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 0 8px;
    padding: 4px 0 5px;
    border-top: var(--hair) solid var(--rule);
  }
  .sl-m-k { grid-column: 1; }
  .sl-m-p { grid-column: 2; grid-row: 1; }
  .sl-m-bar { grid-column: 1 / 3; }
  .sl-m-t { grid-column: 1 / 3; white-space: normal; }
  .sl-rule-l { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sl-rule-k { border-bottom: 0; padding-bottom: 0; }
  .sl-rule-d { border-top: 0; padding-top: 1px; padding-bottom: 6px; }
  .sl-act { margin-top: 6px; }
  .sl-ctl { gap: 8px; }
  .sl-ctl-u { display: none; }        /* the group's aria-label still says it */
}

@media (prefers-reduced-motion: reduce) {
  .sl-m-fill { transition: none; }
}

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

   The worksheet survives a phone better than anything else on these pages —
   a ranked six with its working shown is already a column.  Three things had
   to change and none of them is the shape:

   THE BUDGET CHIPS were 33 × 28.  They are the only control in the block that
   changes the answer, and they were the smallest thing on the page.  Here they
   are a segmented bar across the full measure, 46px tall, each chip an equal
   share of it — one thumb, four states, no aiming.

   THE PLAY / CAST PAIR was 28 × 24 and parked under a 25px score.  It is now
   44 × 44 and sits on its own line under the score, where the two controls have
   real air between them.

   THE WORKING was set at 10.5–11px, which is under the floor for something
   you actually read a sentence of.  Every measure line is at or above it now,
   and the padding it cost is taken back out of the row.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* the host gutters at --pad; this block was paying for it twice */
  .sl { padding-left: 0; padding-right: 0; }

  .sl-head { flex-wrap: wrap; row-gap: 2px; }
  .sl-h { font-size: 21px; }
  .sl-note { white-space: normal; font-size: 11.5px; flex: 1 1 100%; order: 3; }
  .sl-hr { order: 2; }
  .sl-empty { font-size: 12.5px; }

  /* --- the one control: a segmented bar, not four small boxes ----------- */
  .sl-ctl {
    display: block;
    padding: 10px 0 12px;
  }
  .sl-ctl-l { display: block; font-size: 11px; margin-bottom: 7px; }
  .sl-chips { display: flex; width: 100%; }
  .sl-chip {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 4px 6px;
    font-size: 13px;
    text-align: center;
  }
  .sl-chip[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--accent); }

  /* --- the rule, printed ------------------------------------------------ */
  .sl-rule { padding: 12px 0 12px; }
  .sl-rule-h { font-size: 11px; }
  .sl-rule-n { font-size: 12.5px; }
  .sl-rule-w, .sl-rule-d { font-size: 12.5px; }
  .sl-rule-f { font-size: 12px; line-height: 1.55; }

  /* --- the rows --------------------------------------------------------- */
  .sl-row { padding: 10px 0 11px; column-gap: 12px; }
  .sl-work { margin-top: 6px; }
  .sl-t { font-size: 18px; }
  .sl-meta { font-size: 12.5px; margin-top: 5px; }
  .sl-rank { font-size: 12px; }
  .sl-score { font-size: 22px; }
  .sl-score-l { font-size: 11px; }

  /* ── THE WORKING IS A FOOTNOTE, NOT A THREE-LINE STACK.  2026-08-11 ──────
     The first pass on this file unfolded each measure into three lines —
     label+figure, bar, reading — because the desk's four-column line does not
     fit 354px.  Measured at 390 that cost 58px a measure, 174px of working in
     a 329px entry, and six of those is most of the block: John gets 2.5
     entries a screen on a list whose whole job is "what do I watch tonight".

     The measure is one SENTENCE with a rule under it instead: the label leads
     the reading on the same line (`SHELF 5 y 0 m on the shelf, never played`),
     the contribution is parked at the right margin where the eye can run down
     a column of figures, and the bar is a 4px rule beneath the pair rather
     than a row of its own.  ~37px a measure, ~110px of working, and nothing
     is dropped: every label, every reading, every figure and every bar is
     still on the glass, and the reading still wraps to a second line rather
     than being clipped when it is long.  It is also closer to the desk's
     shape than the stack was — one line per measure, in reading order. */
  .sl-m {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 7px;
    row-gap: 0;
    padding: 5px 0 6px;
  }
  /* 11px, not 12: the label is a lead-in and every pixel it spends is a pixel
     the reading has to wrap for.  It is not a mono figure, so the 11px floor
     the rest of this block keeps does not apply to it. */
  .sl-m-k { order: 1; flex: 0 0 auto; font-size: 11px; }
  .sl-m-t {
    order: 2; flex: 1 1 auto; min-width: 0;
    font-size: 12.5px; line-height: 1.4;
  }
  .sl-m-p { order: 3; flex: 0 0 34px; font-size: 12px; }
  .sl-m-bar { order: 4; flex: 1 0 100%; height: 4px; margin-top: 4px; }
  .sl-verdict { font-size: 12.5px; line-height: 1.45; margin-top: 6px; }

  /* --- the pair, as objects you can hit --------------------------------- */
  .sl-tail { align-items: flex-end; }
  .sl-act { margin-top: 9px; gap: 8px; }
  .sl-act .plexlink,
  .sl-act .nstream-btn {
    height: 44px;
    min-width: 44px;
    padding: 0 10px;
    justify-content: center;
  }

  .sl-next { font-size: 12.5px; }
  .sl-next-k { font-size: 11px; }
  .sl-cap { font-size: 12.5px; line-height: 1.6; }
}

/* The row folds to rank · title · score with the working underneath (the first
   ≤760 block above).  This is the last word on the tail column: it has to be
   wide enough to hold two 44px controls side by side, with the score above
   them.  Folded 620 → 760 with the rest, and it stays LAST so it keeps
   outranking the two ≤760 blocks before it. */
@media (max-width: 760px) {
  .sl-row { grid-template-columns: 20px minmax(0, 1fr) 96px; }
  .sl-open { grid-template-columns: 44px minmax(0, 1fr); }
  .sl-thumb { width: 44px; }
  /* ⛔ no `.sl-m { grid-template-columns }` here any more — the measure is a
     wrapping flex row on a phone (see THE WORKING above), and a leftover grid
     template on it was a rule for a layout that no longer exists. */
}