/* ==========================================================================
   NITRATE — THE EPISODE BROWSER.  Pairs with episodes.js.  Nothing else.

   COLOUR.  Every value comes from tokens.css; none are redefined here, and no
   second saturated hue is introduced (not even --crit).  Safety orange has
   exactly TWO jobs in this block, and they are the same job:
       the season you are reading      — "this is the axis you sorted by"
       a hole in the run, a season cut by more than one release group
                                       — "this needs attention"
   A watched tick is NOT an alarm and is drawn in ink; a fully watched season
   is a quiet meter, not a green light.  Everything else is the warm grey scale.

   GEOMETRY.  Hairlines, no radius, tabular figures.  The block claims no
   margin of its own so the host keeps deciding where it sits, and every wide
   thing in it — the season strip, the block navigator — scrolls or wraps
   INSIDE its own box.  Nothing here can push the page sideways.

   WIDTH.  Written narrow-first for the 560px detail sheet and tested at 430px.
   A container query lets the stills and the type grow when the component is
   given a wider column; without container query support the narrow layout is
   what you get, which is the layout that has to work.
   ========================================================================== */

.ne {
  display: block;
  container-type: inline-size;
  container-name: ne;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--size-dense);
}

/* --- heading -------------------------------------------------------------- */
.ne-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.ne-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.ne-tally {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.ne-hr {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}

/* --- the season strip ----------------------------------------------------- */
/* A tablist that scrolls inside itself.  Super Dragon Ball Heroes has a season
   29; the strip has to hold that without the sheet growing a scrollbar. */
.ne-seasons {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ne-season {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 96px;
  max-width: 190px;
  /* 5px of ceiling so the meter never abuts the rule above it — the strip's
     own top hairline on the first row, the row divider on a wrapped one.  All
     meters are inset by the same 5px, so they still read off one line. */
  padding: 5px 12px 7px;
  border: 0;
  border-right: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  position: relative;
}
.ne-season:last-child { border-right: 0; }
.ne-season:hover { background: var(--panel); color: var(--ink-2); }
.ne-season:focus-visible { outline-offset: -3px; z-index: 1; }

.ne-season-l {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.ne-season-n {
  font-family: var(--font-marquee, var(--font-display));
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ne-season-c {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--muted);
  flex: 0 0 auto;
}

/* THE ONE ORANGE THING at the top: the season being read. */
.ne-season[aria-selected="true"] {
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.ne-season[aria-selected="true"] .ne-season-c { color: var(--ink-2); }

.ne-season-flag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* THE METER MOVED TO THE CEILING (2026-08-10).
   It used to be the last child, on the floor of the strip — which put a 3px
   grey bar and, on the selected tab, the 2px accent underline seven pixels
   apart, two horizontal rules stacked under the busiest four words in the
   block.  Read at arm's length they merged into one thick, ambiguous edge and
   the selection stopped being obvious, which is the one thing that mark is
   for.  Sending the meter to the top puts the two rules at opposite ends of
   the tab: the accent underline is alone on the floor and unmistakable, and
   the meters still read off ONE line across the whole strip — the strip's own
   top rule — so a flagged tab and a clean one still line up, which was the
   reason for the floor in the first place. */
.ne-season > .ne-meter { order: -1; margin: 0 0 3px; }

/* --- the watched meter ---------------------------------------------------- */
/* Ink on panel.  Progress is not an alarm, so it never takes the accent. */
.ne-meter {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--panel-2);
  overflow: hidden;
}
.ne-meter > i {
  display: block;
  height: 100%;
  background: var(--ink-2);
}
.ne-meter[data-full="true"] > i { background: var(--ink); }

/* --- the season summary --------------------------------------------------- */
.ne-panel { display: block; padding-top: 12px; }

.ne-sum {
  display: block;
  padding: 0 0 12px;
  border-bottom: var(--hair) solid var(--rule);
}
.ne-sum-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ne-watch {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.ne-watch b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.ne-watch b.is-none { color: var(--muted); font-weight: 400; }
.ne-sum-top .ne-meter { flex: 1 1 auto; min-width: 40px; }

.ne-sum-f {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--muted);
}
.ne-sep { padding: 0 6px; color: var(--rule); }

/* --- a flag: the only other place orange is allowed ----------------------- */
.ne-flag {
  display: block;
  margin: 8px 0 0;
  padding: 6px 9px;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
}
.ne-flag-k {
  color: var(--accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 10px;
  display: block;
}
.ne-flag-v { display: block; }

.ne-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- the block navigator -------------------------------------------------- */
.ne-pager { display: block; padding: 10px 0; }
.ne-pager[data-where="bottom"] { border-top: var(--hair) solid var(--rule); }
.ne-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 0 -1px;
}
.ne-block {
  flex: 0 0 auto;
  padding: 4px 9px;
  margin: 0 0 -1px -1px;
  border: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: .02em;
  cursor: pointer;
}
.ne-block:hover { color: var(--ink); background: var(--panel-2); }
.ne-block[aria-current="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}
.ne-block:focus-visible { outline-offset: -2px; position: relative; z-index: 2; }

.ne-pager-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--muted);
}

/* --- the list ------------------------------------------------------------- */
.ne-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hair) solid var(--rule);
}
.ne-ep { display: block; border-bottom: var(--hair) solid var(--rule); }

.ne-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* the synopsis lives in here and has to stay selectable */
  -webkit-user-select: text;
  user-select: text;
}
.ne-toggle:hover { background: var(--panel); }
.ne-toggle:focus-visible { outline-offset: -2px; }

/* --- the still ------------------------------------------------------------ */
/* 16:9, hairline, and it draws the episode number until (or unless) a frame
   arrives.  A 404 leaves the number, which is a tile, not a broken tile. */
.ne-still {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 96px;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
  overflow: hidden;
}
.ne-still-n {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
}
.ne-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .18s linear;
}
.ne-still[data-thumb="ok"] .ne-img { opacity: 1; }
.ne-still[data-thumb="ok"] .ne-still-n { opacity: 0; }

/* --- the text column ------------------------------------------------------ */
.ne-body {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.ne-l1 {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}
.ne-code {
  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(--muted);
}
.ne-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ne-name.is-none { color: var(--muted); font-weight: 400; font-style: italic; }

.ne-l2 {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--muted);
}
.ne-seen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* a filled square, the same weight as the rules — a tick would be a badge */
.ne-seen::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ink-2);
}

/* where you stopped.  A hairline box in ink — legible without spending the
   accent, which in this block means "defect", not "you are here". */
.ne-next {
  display: inline-block;
  margin-left: 8px;
  padding: 0 4px;
  border: var(--hair) solid var(--ink-2);
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ne-ep[data-next="true"] .ne-code { color: var(--ink); }

.ne-syn {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.42;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ne-syn.is-none { color: var(--muted); font-style: italic; }
.ne-toggle[aria-expanded="true"] .ne-syn {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* --- the disclosure caret ------------------------------------------------- */
.ne-chev {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: 6px 2px 0 4px;
  border-right: var(--hair) solid var(--muted);
  border-bottom: var(--hair) solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .16s ease;
}
.ne-toggle[aria-expanded="true"] .ne-chev { transform: rotate(45deg); }
.ne-toggle:hover .ne-chev { border-color: var(--ink); }

/* --- the drawer ----------------------------------------------------------- */
.ne-det { padding: 0 0 11px 106px; }

.ne-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  margin: 0 0 9px;
  font-size: 10.5px;
}
.ne-facts dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9.5px;
  padding-top: 2px;
}
.ne-facts dd {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

/* the odd-one-out note: this episode breaks "one group per season" */
.ne-odd {
  margin: 0 0 9px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--accent);
}
.ne-odd.is-none { color: var(--muted); font-style: italic; }

/* THE PAIR.  plexlink hands back an <a>, stream hands back a <button>; they
   are siblings in this wrapper and never nested — an <a> inside a <button> is
   invalid and would break both controls. */
.ne-act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* an episode from a different group than the rest of its season */
.ne-ep[data-odd-group] .ne-code { color: var(--accent); }
.ne-ep[data-odd-group] .ne-still { border-color: var(--accent); }

/* --- the house player's own record ---------------------------------------
   Plex's marks above (.ne-seen, .ne-next) are drawn in ink.  These are drawn
   in the cool, which is this house's second non-accent voice and is already
   what the foyer uses for "when".  They are a DIFFERENT record, so they read
   as a different voice — and an episode played on both machines carries both
   marks side by side, because both are true.  ⛔ Not the accent: in this block
   the accent means a defect (an odd release group, a hole in the run), and
   where you got to is not a defect. */
.ne-here {
  display: inline-block;
  margin-left: 8px;
  padding: 0 4px;
  border: var(--hair) solid var(--cool);
  color: var(--cool);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ne-here.is-next { font-weight: 700; }
.ne-ep[data-here] .ne-still { border-color: var(--cool); }

/* the run mark on the frame — the foyer's object, at this block's scale */
.ne-run {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 44%, transparent);
  z-index: 2;
}
.ne-run-fill { display: block; height: 100%; background: var(--cool); }

/* the episode's own door into the house player.  It sits FIRST in the pair's
   wrapper because it is the only control in that row that both names this
   episode and plays it; the Plex controls beside it keep their own grammar. */
.ne-play {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  background: transparent;
  color: var(--accent);
  border: var(--hair) solid var(--accent);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .12s linear, color .12s linear;
}
.ne-play:hover,
.ne-play:focus-visible { background: var(--accent); color: var(--accent-ink); }

/* --- a hole in the run ---------------------------------------------------- */
.ne-gap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 9px;
  border-bottom: var(--hair) solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--panel);
}
.ne-gap-n {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.ne-gap-t { display: block; min-width: 0; }
.ne-gap-t b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.ne-gap-list {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* --- loading, empty, error ------------------------------------------------ */
/* The shape of the list that is coming, in hairlines.  Not a spinner over
   nothing: the panel does not jump when the payload lands. */
.ne-skel { border-top: var(--hair) solid var(--rule); }
.ne-skel-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: var(--hair) solid var(--rule);
  opacity: .55;
  animation: ne-breathe 1.6s ease-in-out infinite;
}
.ne-skel-row:nth-child(2) { animation-delay: .12s; }
.ne-skel-row:nth-child(3) { animation-delay: .24s; }
.ne-skel-row:nth-child(4) { animation-delay: .36s; }
.ne-skel-still {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  border: var(--hair) solid var(--rule);
}
.ne-skel-body { flex: 1 1 auto; min-width: 0; display: block; }
.ne-skel-l { display: block; height: 8px; background: var(--panel-2); }
.ne-skel-l1 { width: 62%; margin-bottom: 7px; }
.ne-skel-l2 { width: 38%; margin-bottom: 7px; height: 6px; }
.ne-skel-l3 { width: 92%; height: 6px; }

@keyframes ne-breathe {
  0%, 100% { opacity: .40; }
  50%      { opacity: .70; }
}
@media (prefers-reduced-motion: reduce) {
  .ne-skel-row { animation: none; opacity: .55; }
  .ne-img { transition: none; }
  .ne-chev { transition: none; }
}

.ne-msg {
  padding: 14px 0 4px;
  border-top: var(--hair) solid var(--rule);
}
.ne-msg-h {
  margin: 0 0 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.ne-msg-p {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 52ch;
}
.ne-btn {
  padding: 5px 12px;
  border: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.ne-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* --- given a wider column, let it breathe --------------------------------- */
@container ne (min-width: 620px) {
  .ne-still, .ne-skel-still { width: 128px; }
  .ne-det { padding-left: 138px; }
  .ne-name { font-size: 14px; }
  .ne-syn { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
  .ne-h { font-size: 23px; }
  .ne-season { min-width: 116px; }
}

/* --- the season strip stops being a drag --------------------------------- */
/* THE STRIP WRAPS BELOW 620px, WHICH IS EVERY SHEET ON EVERY DEVICE.
   Scrolling was right for a tab bar and wrong for what this is.  At 560px —
   the detail sheet on a desk — the strip held THREE tabs, so Attack on Titan
   hid two seasons and a 17-season show hid fourteen behind a sideways drag
   with nothing at the edge to say they were there.  Every fix for that is a
   fix for the CUE (a fade, a shadow, a sliver of the next tab), and a cue only
   tells you to go looking.  The strip is not a tab bar you page through, it is
   a PICKER: you are choosing one of five, or one of seventeen, and the useful
   thing is seeing all of them at once and putting a thumb on one.  So it
   wraps, the tabs stretch to fill each row so there is no ragged edge, and
   there is nothing left to discover — 17 seasons is four rows of a thing you
   can read, not fourteen tabs parked off-screen.  Above 620px the component
   has room for the original single line and keeps it. */
@container ne (max-width: 619.98px) {
  .ne-seasons {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .ne-season {
    flex: 1 1 auto;
    min-width: 92px;
    max-width: none;
    /* wrapped rows need their own dividers; the bottom hairline of the last
       row is pulled onto the strip's own so the edge never doubles */
    border-bottom: var(--hair) solid var(--rule);
    margin-bottom: calc(-1 * var(--hair));
  }
  /* a lit tab's floor rule has to win over the divider it shares */
  .ne-season[aria-selected="true"] { border-bottom-color: transparent; }
}

/* --- very narrow (a phone in the sheet) -----------------------------------
   ⚠️ A CONTAINER query, not a viewport one — it asks how wide this component's
   COLUMN is, which on a phone is the viewport minus the sheet's own chrome.
   Measured 2026-08-11: 314px of a 390px screen and 354px of a 430px one, so
   both phones land inside it.  The number is 430 rather than the 400 it was
   built with purely so that it reads as the same narrow tier as the rest of
   the site (MOBILE_SPEC §1) — a desk sheet's column is ~530px and is nowhere
   near either number, so nothing above the phone moves. */
@container ne (max-width: 430px) {
  .ne-still, .ne-skel-still { width: 76px; }
  .ne-det { padding-left: 0; }
  .ne-toggle { gap: 8px; }
  .ne-season { min-width: 84px; padding-left: 9px; padding-right: 9px; }
}

/* ==========================================================================
   THE EPISODE BROWSER IN THE HAND  (<= 760px viewport)

   The component is already narrow-first, so this block is not a re-layout: it
   is the two things a container query cannot see.  A container query knows how
   WIDE the column is; it does not know that the column is being read at arm's
   length with a thumb.  So: every control comes up to 44px, and every figure
   comes up off the 9.5-10px desk floor to 11px, prose to 12.5px.  The tally,
   the episode codes, the run figures and the flags are the whole point of this
   panel — a number you have to squint at is a number you did not read.

   2026-08-11: the query was 720px.  Folded to 760 per MOBILE_SPEC §1 — the
   codebase had twenty-four breakpoints and 720 was one of them.  The band it
   gains, 721–760, is a phone-shaped column by any reading and wants exactly
   what is in here.
   ========================================================================== */
@media (max-width: 760px) {
  .ne-h { font-size: 21px; }
  .ne-tally { font-size: 11px; }

  /* --- the strip --- */
  .ne-season { min-height: 46px; padding-bottom: 8px; }
  .ne-season-n { font-size: 15px; }
  .ne-season-c { font-size: 11px; }
  .ne-season-flag { font-size: 11px; }

  /* --- the summary --- */
  .ne-watch { font-size: 12.5px; }
  .ne-sum-f { font-size: 11px; }
  .ne-sep { padding: 0 5px; }
  .ne-flag { font-size: 12.5px; padding: 8px 10px; }
  .ne-flag-k { font-size: 11px; }
  .ne-note { font-size: 11.5px; }

  /* --- the block navigator: 1-100, 101-200 … on a 409-episode show, and the
         only way to reach episode 300.  These were 23px high. --- */
  .ne-block {
    min-width: 56px;
    min-height: 44px;
    padding: 4px 11px;
    font-size: 12px;
  }
  .ne-pager { padding: 8px 0; }
  .ne-pager-note { font-size: 11px; }

  /* --- the list --- */
  .ne-toggle { padding: 10px 0; }
  .ne-code { font-size: 11px; }
  .ne-l2 { font-size: 11px; margin-top: 4px; }
  .ne-seen::before { width: 7px; height: 7px; }
  .ne-syn { font-size: 12.5px; line-height: 1.45; }
  /* the caret is a 7px mark inside a full-width control; give it room to be
     seen rather than room to be pressed — the whole row is the press */
  .ne-chev { width: 8px; height: 8px; margin-top: 7px; }

  .ne-det { padding-bottom: 13px; }
  .ne-facts { font-size: 11.5px; }
  .ne-facts dt { font-size: 11px; }
  .ne-odd { font-size: 11.5px; }
  .ne-act { gap: 10px; }
  /* The drawer is where an episode is acted on, on a phone as much as on a
     desk.  It was 40px, which is not the floor — and of every control on this
     side of the site this is the one that must not be missed: it is the door
     into the player, and the thing beside it opens Plex instead. */
  .ne-play { min-height: var(--tap, 44px); padding: 0 14px; font-size: 11px; }

  /* --- a hole in the run --- */
  .ne-gap { padding: 10px 0 10px 10px; }
  .ne-gap-t b { font-size: 12.5px; }
  .ne-gap-list { font-size: 11px; }

  /* --- messages --- */
  .ne-msg-p { font-size: 12.5px; }
  .ne-btn { min-height: 44px; padding: 5px 16px; font-size: 11.5px; }
}

/* ==================================================================== TOUCH
   🔴 A PHONE HELD IN LANDSCAPE IS 844 OR 932 CSS px WIDE, so the block above
   does not apply to it at all (MOBILE_SPEC §10.3) — and landscape is exactly
   how you hold a phone when you are about to watch something.  PLAY is the
   one control in this component that must survive that: it is the door into
   the house player, and the Plex link sits next to it, so a 24px miss opens
   the wrong application.  Width is the wrong question for it; "is this a
   finger" is the right one, and that is `hover: none`.
   ⛔ Deliberately just this one control.  The season strip and the block
   navigator are already at 44+ in the tier above and re-stating them here
   would size a touch-screen DESK, which is not what this is for.  */
@media (hover: none) {
  .ne-play { min-height: var(--tap, 44px); padding: 0 14px; }
}