/* ==========================================================================
   NITRATE — THE FIELD.  Pairs with field.js.  Nothing else.

   The foyer answers "what am I doing tonight".  A category page has to answer
   a different question — "what do I actually have, and what is the shape of
   it" — so this block is one picture of the WHOLE scope: every title a mark,
   release year across, audience rating up.

   Almost nothing is styled here.  The picture is a single canvas, painted by
   field.js from the tokens read off this element, so the frame is all that CSS
   owns: a hairline gate, a reading rail under it, a key, a caption.  No value
   below is invented — every colour comes from tokens.css and none are
   redefined.  There is no border-radius anywhere and no animation: the plot is
   a static image that changes only when the data or the box changes.

   The host owns the gutter (--pad-x) and the vertical rhythm, exactly as the
   foyer's other blocks do, so this drops into a landing section without
   fighting it for margin.
   ========================================================================== */

.nfld {
  padding: 0 var(--pad-x, 0px);
  width: 100%;
}

/* ------------------------------------------------------------------- head */
.nfld-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.nfld-hd h3 {
  font-size: 12px;
  letter-spacing: .13em;
  white-space: nowrap;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}
.nfld-rule {
  flex: 1 1 auto;
  min-width: 16px;
  height: 0;
  border-top: var(--hair) solid var(--rule);
  transform: translateY(-4px);
}
.nfld-meta {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------- the picture
   The plot needs about 520px of width before the year axis stops being
   readable — under that the columns are thinner than a mark and 90 years turn
   into a smear.  So on a phone the picture keeps its width and scrolls INSIDE
   this box.  The page body never scrolls sideways; this one element does. */
.nfld-stage { position: relative; }

.nfld-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* the film-lab gate: a hairline frame around the plate, not a card */
  border: var(--hair) solid var(--rule);
  background: var(--panel);
}

.nfld-plot {
  position: relative;
  height: 480px;
  min-width: 520px;
  cursor: crosshair;
  /* pan and pinch still work on touch; only the double-tap zoom delay goes */
  touch-action: manipulation;
}
.nfld-plot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;      /* inside the gate — an outset ring would be clipped */
}
.nfld-cv {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------- the reading rail
   Not a floating tooltip.  An instrument has a readout that is always in the
   same place, always says something, and never moves the page when it
   changes: with nothing under the pointer it reads the collection, with a
   mark under the pointer it reads that film.  (The name also appears ON the
   plate beside the cursor — that is drawn by the canvas, not by this file.) */
.nfld-rail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 30px;
  padding: 7px 10px;
  border: var(--hair) solid var(--rule);
  border-top: 0;
  background: var(--panel-2);
}
.nfld-rail-mark {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  align-self: center;
  background: var(--muted);
  /* stays in the layout when empty so the text never shifts by 18px */
  visibility: hidden;
}
.nfld-rail.is-live .nfld-rail-mark { visibility: visible; }
.nfld-rail.is-live.is-played .nfld-rail-mark { background: var(--accent); }
.nfld-rail-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nfld-rail.is-idle .nfld-rail-name { color: var(--ink-2); }
/* nowrap, but it MUST still be allowed to shrink: min-width:0 and a clip are
   what stop the longest reading ("median year 2015 · median rating 6.9 · 2,401
   never played") from setting a min-content width for the whole block and
   pushing the page sideways.  Found at 430px on Movies, which has the longest
   line of the three scopes. */
.nfld-rail-meta {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nfld-rail-meta b { color: var(--ink-2); font-weight: 600; }
.nfld-rail-meta .is-played { color: var(--accent); }

/* -------------------------------------------------------------------- key */
.nfld-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.nfld-k { display: inline-flex; align-items: center; gap: 6px; }
.nfld-k i {
  width: 7px;
  height: 7px;
  background: var(--ink-2);
  opacity: .62;
}
.nfld-k.is-played i { background: var(--accent); opacity: 1; }
/* the unrated lane's own mark is drawn hollow on the plate, so is its key */
.nfld-k.is-lane i {
  background: transparent;
  border: var(--hair) solid var(--muted);
  opacity: 1;
}

/* ---------------------------------------------------------------- caption */
.nfld-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: var(--hair) solid var(--rule);
}
/* The plot is full width and this reading of it was capped at 108ch, so 681px
   of caption sat under a 1336px picture with 623px of nothing beside it — the
   same void John pointed at on NEW PRINTS.  Set on the house caption grid
   (tokens.css --cap-col), which is the same measure taken as a column width. */
.nfld-cap {
  margin: 0;
  columns: var(--cap-col);
  column-gap: var(--cap-gap);
  orphans: 2;
  widows: 2;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}
.nfld-lead { color: var(--ink-2); }
.nfld-err { color: var(--crit); }

/* ----------------------------------------------------------------- narrow */
@media (max-width: 1000px) {
  .nfld-plot { height: 420px; }
}
@media (max-width: 860px) {
  .nfld-plot { height: 380px; }
  .nfld-rail-meta { margin-left: 10px; }
}
/* folded from 620 into the house mobile tier (MOBILE_SPEC §1); 1000 and 860
   are above 820 and are desktop folds, so they stay as they are */
@media (max-width: 760px) {
  .nfld-plot { height: 340px; }
  .nfld-hd { flex-wrap: wrap; row-gap: 2px; }
  .nfld-hd h3 { flex: 0 0 auto; }
  .nfld-rule { order: 3; flex-basis: 100%; transform: none; margin-top: 5px; }
  .nfld-meta { white-space: normal; min-width: 0; }
  .nfld-rail { flex-wrap: wrap; row-gap: 2px; }
  /* on one line of its own it may wrap instead of being clipped — there is
     room for two lines here and the figures are worth more than the tidiness */
  .nfld-rail-meta { margin-left: 0; flex-basis: 100%; white-space: normal; }
  .nfld-key { gap: 3px 12px; }
  /* one column at the house mobile tier (tokens.css, the caption grid) */
  .nfld-cap { columns: 1; }
}

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

   THE 520px FLOOR IS WITHDRAWN ON A PHONE, and that is the whole change.
   The floor was set so the year axis would stay legible; the cost was that a
   390px screen opened on 1937–1995 — the emptiest third of the picture — with
   the 981 films of the 2020s parked off-glass to the right and nothing on
   screen saying so.  A plate you cannot see two thirds of is not a portrait
   of the collection, it is a portrait of its dullest corner.

   Withdrawing the floor does not cost the axis what the note feared: field.js
   already thins the decade labels to every twenty years once a column is under
   4.6px (`ystep`), so a 358px plate prints 1940 · 1960 · 1980 · 2000 · 2020
   and the marks land where they belong.  The shape — a cloud climbing to the
   right, dense at the end — is exactly the thing worth seeing, and now the
   whole of it is on the glass at once.

   The alternative was to keep the scroll and open it at the right-hand end.
   That was rejected: field.js drives scrollLeft itself to keep the keyboard
   cursor in view, and the RTL trick that opens a scroller at its far end
   inverts the sign of scrollLeft under it.  A picture that fits needs no
   scroll position to be honest about.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* the host already gutters at --pad; this block was paying for it twice */
  .nfld { padding-left: 0; padding-right: 0; }

  .nfld-hd h3 { font-size: 12.5px; }
  .nfld-meta { font-size: 11.5px; }

  .nfld-plot { min-width: 0; }
  .nfld-scroll { overflow-x: hidden; }

  /* the readout is the instrument's only text on a phone — it gets read */
  .nfld-rail { min-height: 38px; padding: 8px 10px; }
  .nfld-rail-name { font-size: 13px; }
  .nfld-rail-meta { font-size: 11.5px; }
  .nfld-rail-mark { width: 9px; height: 9px; }

  .nfld-key { font-size: 11px; gap: 6px 14px; margin-top: 11px; }
  .nfld-k i { width: 9px; height: 9px; }

  .nfld-cap { font-size: 12.5px; line-height: 1.65; }
}

/* ⛔ THE 340px FLOOR IS WITHDRAWN, NOT MOVED TO 430.  2026-08-11.
   It said: under 340 the plate stops being a picture of ninety years, so give
   it a 420px minimum and let it scroll.  There are only two tiers below the
   desk now (spec §1), so that rule could only become a ≤430 rule — and at 430
   it is not a rescue, it is the exact defect THE HAND above was written to
   remove: a 390px phone would open on a 420px plate with the right-hand end,
   where the 2020s live, off the glass and nothing on screen saying so.
   Trading a legible axis at 320px for a truthful picture at 390 is the right
   way round: 390 and 430 are the phones John holds, and field.js thins the
   decade labels on its own (`ystep`) as the columns narrow, so the axis
   degrades to 1940 · 1960 · 1980 · 2000 · 2020 instead of breaking. */