/* ==========================================================================
   NITRATE — THE WALL (poster grid)  +  THE SHEET (title detail panel)

   Owned by the wall/sheet agent.  Consumes tokens.css, never redefines a token.

   Why the sheet lives in this file: index.html links exactly three stylesheets
   (tokens / screener / wall) and this agent owns no sheet.css.  Every selector
   here is prefixed .nw- (wall) or .ns- (sheet) so nothing can collide with
   screener.css.

   THE COLUMN-WIDTH PROBLEM, and the measured answer.
   Plex art is not one aspect ratio.  Fixing column WIDTH gives ragged heights
   and captions that never line up, so instead the poster HEIGHT is fixed and
   the column is as wide as the widest poster.  Measured over all 2728 cached
   posters (Pillow, at the cached height of 300px):

        200px wide  2653  (97.99%)   <- 2:3, the mode
        201-212px     47  ( 1.79%)   cumulative 99.78%
        215-253px      6  ( 0.22%)
        landscape     14            BIF mosaics / video frames, up to 720px

   --nw-ar is therefore .72 (216px at h=300): every one of the 99.78% sits in
   its column uncropped with room to spare, and six freak-wide posters plus the
   14 landscape ones cannot inflate 2733 columns.  Those 20 get .is-wide
   (object-fit:cover) at render time — clipped, never letterboxed, never
   reflowing.  Taking the widest at RUNTIME instead is what the first version
   did, and it was wrong: one 240x300 poster in the opening screenful pushed
   the ratio to .80 and grew every column by 24px.  wall.js logs once if art
   above the cap turns up, so a future rebuild can be re-measured.
   ========================================================================== */

/* -------------------------------------------------------------------- wall */
.nw {
  display: flex;
  flex-direction: column;
  min-height: 0;

  --nw-ar: .72;                       /* widest poster, height-normalised     */
  --nw-h: 300px;                      /* poster height — the density lever    */
  --nw-w: calc(var(--nw-h) * var(--nw-ar));
  --nw-gap: 18px;
  --nw-mast: 68px;                    /* masthead height, measured in JS      */
}
.nw[data-density="2"] { --nw-h: 208px; --nw-gap: 14px; }
.nw[data-density="3"] { --nw-h: 132px; --nw-gap: 10px; }

/* ---- control bar --------------------------------------------------------- */
.nw-bar {
  position: sticky;
  top: var(--nw-mast);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 7px var(--pad);
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
}

.nw-grp { display: flex; align-items: center; gap: 5px; }

.nw-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nw-bar select,
.nw-bar input {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 5px;
  color: var(--ink);
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  max-width: 148px;
}
.nw-bar select:hover,
.nw-bar input:hover { border-color: var(--muted); }
.nw-bar input { width: 148px; }
.nw-bar select[data-on="1"] { color: var(--accent); }

/* sort + density: the same underline language as the masthead's view buttons */
.nw-tab {
  border: 0;
  padding: 4px 7px 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: inset 0 -2px 0 transparent;
}
.nw-tab:hover { color: var(--ink); outline: var(--hair) solid var(--rule); }
.nw-tab[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.nw-dir {
  min-width: 26px;
  padding: 3px 6px 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
}
.nw-dir:hover { color: var(--accent); }

.nw-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  outline: var(--hair) solid var(--accent);
}
.nw-chip button { border: 0; color: inherit; font-family: var(--font-mono); padding: 0 3px; }
.nw-chip[hidden] { display: none; }

.nw-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.nw-count b { color: var(--ink); font-weight: 700; }
.nw-count b.crit { color: var(--crit); }
.nw-count .sep { color: var(--rule); padding: 0 6px; }

/* ---- the grid ------------------------------------------------------------ */
.nw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--nw-w));
  justify-content: space-evenly;      /* leftover space shared, not dumped right */
  align-content: start;
  gap: var(--nw-gap);
  padding: calc(var(--nw-gap) + 4px) var(--pad) 72px;
}

.nw-tile {
  display: block;
  width: var(--nw-w);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  outline-offset: 3px;
}
.nw-tile:hover { outline: var(--hair) solid var(--accent); }   /* outline, never border */
.nw-tile:hover .nw-t { color: var(--accent); }

.nw-shot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--nw-h);
}

.nw-shot img {
  height: var(--nw-h);
  width: auto;
  max-width: 100%;
  background: var(--tint, var(--panel-2));   /* the poster's own dominant tint */
  display: block;
}
.nw-shot img.is-wide { width: 100%; object-fit: cover; }

/* no art on disk (5 titles): a plate, not a broken image */
.nw-noart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--nw-h) * .6667);
  height: var(--nw-h);
  padding: 8px;
  background: var(--panel-2);
  outline: var(--hair) solid var(--rule);
  outline-offset: -1px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
  overflow: hidden;
}

/* critical only — 23 titles.  A warn strip would paint 82% of the wall. */
.nw-sev {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--crit);
}

.nw-cap { padding: 6px 1px 0; }

.nw-t {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nw-m {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--muted);
}
.nw-m i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-m i.hot { color: var(--accent); flex: none; }   /* the field you sorted by */

.nw[data-density="3"] .nw-cap { display: none; }    /* contact sheet: art only */
.nw[data-density="2"] .nw-t { font-size: 11.5px; }
.nw[data-density="2"] .nw-m { font-size: 9.5px; }

.nw-empty {
  padding: 60px var(--pad);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 720px) {
  .nw-bar { gap: 5px 10px; }
  .nw-count { margin-left: 0; }
  .nw-bar input, .nw-bar select { max-width: 110px; width: auto; }
}

/* ---- view transitions ---------------------------------------------------- */
/* the poster morphs into the sheet's hero; different aspect ratios cross-fade
   without letterboxing because the snapshots are replaced elements. */
::view-transition-old(nitrate-hero),
::view-transition-new(nitrate-hero) {
  object-fit: cover;
  height: 100%;
  overflow: hidden;
}
::view-transition-group(nitrate-hero) { animation-duration: .3s; z-index: 5; }

/* ------------------------------------------------------------------- sheet */
/* the shell owns #sheet's frame (fixed, right, min(560px,100vw), panel bg). */

.ns-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .42);
  border: 0;
  padding: 0;
  cursor: default;
}
.ns-scrim[hidden] { display: none; }

.ns-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px var(--pad);
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
}
.ns-kind {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ns-close {
  margin-left: auto;
  padding: 3px 8px 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
  white-space: nowrap;
}
.ns-close:hover { color: var(--accent); border-color: var(--accent); }

.ns-body { padding: 0 var(--pad) 80px; }

/* ---- hero ---------------------------------------------------------------- */
.ns-hero {
  display: flex;
  gap: 14px;
  padding: 16px 0 14px;
  border-bottom: var(--hair) solid var(--rule);
}
.ns-hero-art { flex: none; width: 132px; }
.ns-hero-art img {
  width: 132px;
  height: 198px;
  object-fit: cover;
  background: var(--tint, var(--panel-2));
  display: block;
}
.ns-hero-art .nw-noart { width: 132px; height: 198px; }
.ns-hero-txt { min-width: 0; align-self: flex-start; }
.ns-title { font-size: 21px; line-height: 1.08; color: var(--ink); overflow-wrap: anywhere; }
.ns-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-2);
}
.ns-sub .sep { color: var(--rule); padding: 0 6px; }
.ns-tag {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ns-ids { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ns-ids a { color: var(--cool); }

/* ---- sections ------------------------------------------------------------ */
.ns-sec { padding: 14px 0; border-bottom: var(--hair) solid var(--rule); }
.ns-sec:last-child { border-bottom: 0; }
.ns-h {
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ns-h b { color: var(--ink-2); font-weight: 800; }

/* ratings — three cells, mono, tabular */
.ns-rate { display: flex; gap: 0; margin-bottom: 12px; }
.ns-rate div {
  flex: 1 1 0;
  padding: 6px 10px 5px 0;
  border-right: var(--hair) solid var(--rule);
}
.ns-rate div:last-child { border-right: 0; }
.ns-rate span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ns-rate b {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.ns-rate b.none { color: var(--rule); }

.ns-kv { display: grid; grid-template-columns: 92px 1fr; gap: 3px 12px; }
.ns-kv dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.ns-kv dd {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ns-kv dd.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.ns-syn { font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.ns-people { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ns-people p { margin: 0 0 6px; }
.ns-people b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
  margin-right: 7px;
}

/* ---- flags --------------------------------------------------------------- */
.ns-flag {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 2px 10px;
  padding: 5px 0;
  border-top: var(--hair) solid var(--rule);
}
.ns-flag:first-of-type { border-top: 0; }
.ns-flag code {
  font-size: 10px;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.ns-flag p { margin: 0; font-size: 12px; color: var(--ink-2); }
.ns-flag[data-sev="crit"] code { color: var(--crit); }
.ns-flag[data-sev="warn"] code { color: var(--warn); }
.ns-flag[data-sev="info"] code { color: var(--muted); }

/* ---- storage / files ----------------------------------------------------- */
.ns-drives { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ns-drive {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 7px 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink);
  outline: var(--hair) solid var(--rule);
}
.ns-drive i { font-style: normal; font-size: 9.5px; color: var(--muted); letter-spacing: .08em; }

.ns-season { border-top: var(--hair) solid var(--rule); }
.ns-season > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-2);
}
.ns-season > summary::-webkit-details-marker { display: none; }
.ns-season > summary::before { content: "+"; color: var(--muted); width: 10px; }
.ns-season[open] > summary::before { content: "\2212"; }
.ns-season > summary:hover { color: var(--accent); }
.ns-season > summary b { color: var(--ink); font-weight: 700; letter-spacing: .08em; }
.ns-season > summary .sep { color: var(--rule); padding: 0 3px; }

.ns-file { padding: 8px 0 9px; border-top: var(--hair) solid var(--rule); }
.ns-file:first-child { border-top: 0; }
.ns-file-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ns-file-hd .ns-drive { flex: none; }
.ns-ep {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--accent);
  flex: none;
}
.ns-name { font-size: 12.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.ns-nums {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-2);
}
.ns-nums span { white-space: nowrap; }
.ns-nums span + span::before { content: "\00b7"; color: var(--rule); padding: 0 6px; }
.ns-nums .over { color: var(--warn); }

.ns-path {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ns-strm {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 8px;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
}
.ns-strm > b {
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}
.ns-strm u { text-decoration: none; }
.ns-strm u + u::before { content: "\00b7"; color: var(--rule); padding: 0 5px; }
.ns-strm .df { color: var(--ink); }
.ns-strm .fo { color: var(--warn); }
.ns-strm em { font-style: normal; color: var(--muted); }

.ns-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
}
.ns-more:hover { color: var(--accent); border-color: var(--accent); }

.ns-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
}