/* ==========================================================================
   AMSP 002 · DEV02.4.2 — consolidated correction pass (Pre-Build 019, approved)
   Loaded LAST on /listening/002/ (after dev0241-corrections.css) and on /002/.
   No new tokens or materials: every rule re-positions, re-sizes or un-clips
   something DEV02.4 / DEV02.4.1 already styles. Each block names its PB019
   change-map row so it can be removed on its own.
   Scope: .room002-page--dev024 (room) · .edition002-page--dev02 (/002/).
   ========================================================================== */

/* --------------------------------------------------------------------------
   B-2 · Opening notebook photograph: whole image, never cropped.
   Overrides dev023-editorial.css :74-90, :403, :412 (min/max-height, overflow,
   object-fit:cover) and dev024-system.css :175-178 (20px radius + clip, which
   masks the corners). width/height attributes + aspect-ratio reserve the box
   before the file arrives, so there is no layout shift.
   -------------------------------------------------------------------------- */
.room002-page--dev024 .room002-hero .dev023-hero__photo.dev0242-opening {
  align-self: start;
  justify-self: end;
  width: min(100%, calc((100svh - 96px) * 2 / 3));
  min-height: 0;
  max-height: none;
  aspect-ratio: 2 / 3;
  overflow: visible;
  border-radius: 0;
  background: none;
}
.room002-page--dev024 .room002-hero .dev023-hero__photo.dev0242-opening img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: 50% 50%;
}
@media (max-width: 900px) {
  .room002-page--dev024 .room002-hero .dev023-hero__photo.dev0242-opening {
    justify-self: center;
    width: min(100%, 520px);
  }
}

/* --------------------------------------------------------------------------
   C-1 / C-2 · P0 text containment.
   The artist/title are grid items of .mi-display__names (dev024 :314) and of
   .mi-b__card-names (dev024 :616); with the default min-width:auto they grew to
   their longest word, so fitArtist() never saw them overflow, and the base
   .mi-display{overflow:hidden} (magnetic-instrument.css :80, never overridden)
   then cut the letters. Children may now shrink to the column, and the display
   never clips display type. Words still never break (overflow-wrap:normal).
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi :is(.mi-display__names, .mi-b__card-names) > * { min-width: 0; }
.room002-page--dev024 #main .mi .mi-display { overflow: visible; }

/* --------------------------------------------------------------------------
   D-1 / D-2 · P0 stable announcer height (Side A).
   announcer.js reserve() measures the tallest Side A state at the current width
   and sets --mi-announcer-min. Text is top-anchored (decision 3): side pill,
   artist and title never move; spare height collects above the status line,
   which stays pinned to the bottom edge of the announcer.
   Replaces magnetic-instrument.css :79 align-content:space-between.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-display {
  min-block-size: var(--mi-announcer-min, auto);
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
}
.room002-page--dev024 #main .mi .mi-display > .mi-status { align-self: end; }
/* the meta block is itself a grid (dev024 :333): keep its lines together at the top of the spare row */
.room002-page--dev024 #main .mi .mi-display > .mi-display__meta { align-self: start; }

/* --------------------------------------------------------------------------
   E-1 · "Also on" above LISTEN, its row always reserved (controls.js).
   Visible labels unchanged (decision 2). Replaces the [hidden] collapse
   (magnetic-instrument.css :36) that moved the transport on 5 of 13 tracks.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-providers {
  min-block-size: 48px;
  margin: 0 0 var(--dv-s3);
}
.room002-page--dev024 #main .mi .mi-providers[data-empty="true"] { visibility: hidden; }

/* --------------------------------------------------------------------------
   D-3 · ≥900px: the controls column is anchored to the top of the deck row.
   dev024 :892 bottom-aligned it (align-items:end), so taller names pushed it
   down and Watch / Return below it pushed it up.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .room002-page--dev024 #main .mi[data-active-side="A"] .mi-deck { align-items: start; }
}

/* --------------------------------------------------------------------------
   D-4 · Side B: the poster reserves the tallest version of the focused family
   (side-b.js reserveFamily → --mi-b-card-min), so Previous / Next under it stay
   put while stepping versions. Recomputed when the family or width changes.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-b__card { min-block-size: var(--mi-b-card-min, auto); }
/* The "n / total" counter between Previous and Next is auto-width; "10 / 10"
   (family 09) is 9 px wider than "9 / 10" and nudged Next sideways. One width
   that fits the longest family keeps both keys still. */
.room002-page--dev024 #main .mi .mi-b__position { min-inline-size: 88px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   /002/ · Edition opening (PB019 section I, ranked option 1)
   ========================================================================== */
/* I-1 · edition-optical.js moves #edition002-abc-pyramid out of this grid into the
   hero, which left abc-branches-dev.css :90's two columns with an empty right half:
   the h2 wrapped to 5 lines in a 479 px column at 1440. One column now. */
.edition002-page--dev02 .edition002-abc .wrap {
  grid-template-columns: minmax(0, 1fr);
  /* I-2 · one spacing step between the triptych and the text, from the existing
     DEV02.4 scale (--dv-s6 32px → --dv-s7 48px); replaces margin-bottom + gap. */
  gap: clamp(var(--dv-s6, 32px), 4vw, var(--dv-s7, 48px));
}
.edition002-page--dev02 .edition002-abc .edition002-fields { margin-bottom: 0; }
/* I-3 · the provisional-photo note sits on paper; dev023-editorial.css :395 gave it
   the dark-ground grey (#c0c4c4, 1.42 : 1). Restore dev02-photographic.css :285's
   own colour for this ground. Same text. */
.edition002-page--dev02 .edition002-abc .edition002-fields__note { color: #3B3B38; }