/* ==========================================================================
   NITRATE — THE SPECTRUM.  Pairs with spectrum.js.  Nothing else.

   The band itself is the ONE thing on this site that is allowed to be full of
   colour, because the colour is not a decision: it is 2,731 measurements read
   off the collection's own posters.  So the band is never tinted, filtered or
   faded — the frame around it does all the work, in tokens, and has to read on
   both grounds.  Every value here comes from tokens.css; none are redefined.
   ========================================================================== */

.nspec {
  /* --pad-x is the foyer's own gutter and is only defined there; everywhere
     else this falls back to the token.  Set by the HOST, so the band lines up
     with whatever it is mounted beside instead of inventing its own margin. */
  padding: 18px var(--pad-x, var(--pad)) 22px;
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

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

/* ------------------------------------------------------------- the band */
.nspec-stage { position: relative; }

.nspec-band {
  position: relative;
  /* ⭐ 120px AT EVERY WIDTH, and it is the readout card's box as much as the
     picture's.  It used to be 112 here, 92 under 860 and 120 on a phone —
     three heights for one instrument — because the card hung BELOW the band
     on a mouse and only came inside it on a finger.  See .nspec-read. */
  height: 120px;
  /* a hairline frame, not a card: the band is a strip of film in a gate */
  border: var(--hair) solid var(--rule);
  background: var(--panel-2);
  cursor: crosshair;
  touch-action: manipulation;
}
.nspec-band:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nspec-cv {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------- the readout
   ⭐ 2026-08-12 — THE CARD SITS INSIDE THE GATE, ON EVERY POINTER.  It used to
   hang 8px BELOW the band, which cost the page a 92px slot of reserved paper
   that was empty every second the cursor was not inside the band: on first
   paint, on every touch device, and in every screenshot.  That is the blank
   band John kept pointing at, and it was 101px measured from the band's bottom
   edge to the caption's top.  The phone tier had already brought the card
   inside for exactly this reason; this is the same decision taken for the
   mouse, and it deletes two overrides rather than adding one.

   IT COSTS THE PICTURE NOTHING.  renderBand() draws ONE scanline and stretches
   it down the whole band — the colour does not vary in y — so the 75px the
   card covers (86px on a two-line title) carry the identical measurement to
   the 37px left above it.  The caliper drawn by drawCursor() is full height
   with a mark at the TOP as well as the bottom, so the column being read stays
   visible above and below the card that names it, and the card now lands ON
   the thing you are pointing at instead of a hundred pixels away from it.

   ⛔ Do NOT put it back below the band "so it does not cover the colour".  The
   card is ~220px wide against a 1,380px band, it is pinned by the keyboard as
   well as the mouse (see `pinned` in spectrum.js), and a pinned card parked
   over the caption is a permanent defect where a covered stripe is not.
   ⚠️ The band's height is the card's ceiling: measured, the worst case is 86px
   of card + the 8px inset, so anything under ~100px cannot hold it. */
.nspec-read {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 8px;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px 8px 8px;
  max-width: 300px;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  /* transform is set per-frame by the script and must NOT be animated, or the
     card lags behind the column it is reading.  Only opacity is eased, and
     tokens.css already flattens that under prefers-reduced-motion. */
  transition: opacity .08s linear;
  pointer-events: none;
}
.nspec-read[hidden] { display: none; }

.nspec-thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 57px;
  object-fit: cover;
  border: var(--hair) solid var(--rule);
}
.nspec-rtext { min-width: 0; }
.nspec-rname {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink);
  /* two lines then clip: a long title must not resize the card mid-sweep */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nspec-rmeta {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
}
.nspec-rhex {
  margin-top: 5px;
  padding-left: 6px;
  font-size: 10px;
  color: var(--ink-2);
  /* the measured colour itself, as a swatch on the edge of its own reading */
  border-left: 3px solid var(--rule);
}

/* ---------------------------------------------------------- the caption */
.nspec-foot {
  /* ⭐ 14px, not 92.  The 92 was a SLOT held open for the readout card, which
     now lives inside the band (see .nspec-read), so there is nothing left to
     reserve and the caption follows its instrument the way every other block
     on this page follows its head.  14 + 8 + the hairline = 23px from the
     band's edge to the first line of type. */
  margin-top: 14px;
  padding-top: 8px;
  border-top: var(--hair) solid var(--rule);
}
.nspec-cap {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 108ch;
}
.nspec-lead {
  color: var(--ink-2);
}
.nspec-err {
  color: var(--crit);
}

/* -------------------------------------------------------------- narrow
   ⛔ The 860 tier used to shrink the band to 92px.  It is gone: 92px cannot
   hold the readout card, and one instrument that is one height everywhere is
   worth more than a band that is 20px lighter on a 800px window. */

/* ---------------------------------------------------------------- phone
   The band is the one block here that was BUILT for width, so it is worth
   saying plainly what happens to it and why it is kept.

   THE PICTURE IS STILL TRUE.  renderBand() does not draw one column per film
   and then let them collide — it averages the run of films that falls under
   each device pixel, and the run is contiguous in a hue-then-lightness sort,
   so its members are near-identical by construction.  At 354 CSS px the band
   is the same measurement at a coarser bin width, the way a histogram with
   fewer buckets is still the histogram.  Held side by side with the 1500px
   render the bands agree: same monochrome run at the left, same red block,
   same yellow spike, same cyan-to-blue mass.  So it is NOT hidden, NOT
   sampled down to a subset, and NOT put behind a disclosure — all three would
   throw away the only thing it says, which is what the whole shelf looks like
   AT ONCE.  Scrolling it was tried and rejected for the same reason: a band
   you have to drag across three screens has stopped being one picture.

   THE POINTING IS NOT TRUE, and that is what gets fixed.  The caption used to
   say "point at a column to name the film"; at this width a fingertip covers a
   few hundred films, so a tap opens one title from under the finger rather
   than one that was chosen.  ⭐ 2026-08-11: that correction now lives in
   spectrum.js's own caption, where this block asked for it to go — it belongs
   in the sentence it corrects, in the reading order, not in an ::after a
   screen reader meets after the full stop.

   The band also grew: 84px was a smear on a phone, and it left the readout
   card stranded 92px below in reserved air the finger never dwells long
   enough to fill.  The card came INSIDE the band instead — where the finger
   already is — and the page got those 82px back.  ⭐ 2026-08-12: that is now
   the BASE rule at every width, so the band height and the card's position
   have left this block entirely; what is left below is only what a phone
   needs that a desktop does not.

   ⭐ THE QUERY IS NOW 760, NOT 700 (MOBILE_SPEC §1).  700 was one of the 24
   independently-invented breakpoints; 760 is the mobile tier. */
@media (max-width: 760px) {
  .nspec { padding: 16px var(--pad-x, var(--pad)) 20px; }

  /* the section head matched the caption, not the other blocks it sits
     between — on a phone that read as a label rather than a heading */
  .nspec-hd { gap: 10px; }
  .nspec-hd h3 {
    font-family: var(--font-marquee, var(--font-display));
    font-size: 17px;
    letter-spacing: -.01em;
  }
  .nspec-rule { transform: translateY(-5px); }
  .nspec-meta { font-size: 11px; }

  /* the card is inside the gate at every width now; a finger only needs it
     narrower and tighter, because a 300px card on a 354px band is the band.
     ⛔ left stays 0 — the script clamps translateX against the band's own
     width, and any inset here would push the card past the right edge. */
  .nspec-read {
    max-width: 250px;
    padding: 7px 9px 7px 7px;
  }
  .nspec-rmeta, .nspec-rhex { font-size: 11px; }

  .nspec-cap { font-size: 11.5px; line-height: 1.62; }
}