/* ==========================================================================
   AMSP 002 · DEV02.4.1 — consolidated correction pass (layout only)
   Loaded AFTER dev024-system.css. No new materials, tokens or components:
   every rule here re-positions or re-sizes something DEV02.4 already styled.
   Scope: .room002-page--dev024 (room) and .amsp-dev024 (room + /002/).
   ========================================================================== */

/* --------------------------------------------------------------------------
   P0-A · A/B/C selector is never sticky.
   DEV02.4 pinned it at top:6–8px below 900px with no reserved corridor, so it
   slid over the Side badge, artist, Side B family selector and the first
   Side C journey row. It now stays in its own place in the flow at every
   width (≥900px was already relative). Nothing scrolls under it.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-navigation {
  position: relative;
  top: auto;
  z-index: auto;
}

/* P1-1 · selector labels a little larger now that they no longer float.
   Canonical names unchanged; sizes chosen so "THE CONSTELLATION" still fits
   one column at 320px (measured: 87px of type in a 90px column). */
.room002-page--dev024 #main .mi .amsp-abc__key-name {
  font-size: 11.5px; line-height: 1.3; letter-spacing: .06em; max-width: 15ch;
}
@media (max-width: 359px) {
  .room002-page--dev024 #main .mi .amsp-abc__key { padding-inline: 4px; }
  .room002-page--dev024 #main .mi .amsp-abc__key-name { font-size: 10.5px; letter-spacing: .04em; }
}
@media (min-width: 600px) {
  .room002-page--dev024 #main .mi .amsp-abc__key-name { font-size: 11.5px; letter-spacing: .12em; max-width: none; }
}

/* --------------------------------------------------------------------------
   P0-B · Utility navigation (Opening / Listen / Back Room) no longer floats.
   Below 900px it was position:fixed over the page and covered the Side A
   instructions, Side B swipe note, Side C "Explore its connections" and —
   through body padding-bottom:84px — added a black band under the footer.
   It now sits in the flow at the end of the room, directly above the private
   review strip and the public footer (DOM moved in listening/002/index.html),
   so it can never cover content or focus targets, is "released" before the
   footer by construction, and the 84px body padding is removed.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* !important: live amsp.css (≤699px) also adds 86px body padding and a
     fixed-bar `bottom` offset for the old floating bar */
  body.room002-page--dev024 { padding-bottom: 0 !important; }
  .room002-page--dev024 .mobile-nav {
    position: relative; left: auto; right: auto; bottom: auto !important; z-index: auto;
    margin: 0 16px 24px;
    box-shadow: var(--dv-bevel);
  }
}

/* --------------------------------------------------------------------------
   P1-5 · Development chrome is off in normal editorial views.
   The hero "Review" box and the long yellow build tape show only with
   ?review=1 (js/dev0241/review-gate.js sets html.dev0241-review for the tab
   session; ?review=0 clears it). The thin top context bar, the collapsed
   in-stage Review tools and the private strip above the footer stay, so
   review access is always one tap away.
   -------------------------------------------------------------------------- */
html:not(.dev0241-review) .amsp-dev024 .dev023-review-shortcuts,
html:not(.dev0241-review) .amsp-dev024 .dev023-review-note { display: none; }

/* --------------------------------------------------------------------------
   P1-2 · Side B — one mark grammar for version status.
   Same 8px circle cell everywhere (dots row and the status pill). Status is
   carried by the mark's FORM, position by COLOUR:
     original · home       filled disc
     selected alternate    solid ring
     candidate             thin dim ring
     identity unresolved   small dim point (no body yet)
     current position      the same form, in lemon, with a lemon halo
   The status keys and texts are unchanged (side-b.js statusOf()).
   Supersedes the DEV02 filled/dashed/outline marks and the DEV02.4 ring.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-b__dots { gap: 8px; align-items: center; }
.room002-page--dev024 #main .mi .mi-b__dots li,
.room002-page--dev024 #main .mi .mi-b__status::before {
  box-sizing: border-box; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; outline: 0; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dv-ink-2);
  --mk: var(--dv-ink-2);
}
.room002-page--dev024 #main .mi .mi-b__status::before { content: ""; display: inline-block; margin-right: 10px; }
/* form by status */
.room002-page--dev024 #main .mi .mi-b__dots li[data-status="original"],
.room002-page--dev024 #main .mi .mi-b__card[data-status="original"] .mi-b__status::before { background: var(--dv-ink); box-shadow: none; }
.room002-page--dev024 #main .mi .mi-b__dots li[data-status="selected"],
.room002-page--dev024 #main .mi .mi-b__card[data-status="selected"] .mi-b__status::before { box-shadow: inset 0 0 0 1.5px var(--dv-ink); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-status="candidate"],
.room002-page--dev024 #main .mi .mi-b__card[data-status="candidate"] .mi-b__status::before { box-shadow: inset 0 0 0 1px var(--dv-ink-3); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-status="unresolved"],
.room002-page--dev024 #main .mi .mi-b__card[data-status="unresolved"] .mi-b__status::before {
  background: radial-gradient(circle, var(--dv-ink-3) 0 2px, transparent 2.5px); box-shadow: none;
}
/* position: the current mark keeps its form, turns lemon, gains a halo */
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"] { outline: 0; }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"][data-status="original"] { background: var(--dv-lemon); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"][data-status="selected"] { box-shadow: inset 0 0 0 1.5px var(--dv-lemon); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"][data-status="candidate"] { box-shadow: inset 0 0 0 1.5px var(--dv-lemon); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"][data-status="unresolved"] { background: radial-gradient(circle, var(--dv-lemon) 0 2px, transparent 2.5px); }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"]::after { content: none; }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"] { position: relative; }
.room002-page--dev024 #main .mi .mi-b__dots li[data-current="1"]::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(240, 226, 15, .55), 0 0 10px var(--dv-lemon-glow);
}
/* one pill outline for every status (status is read from the mark + text) */
.room002-page--dev024 #main .mi .mi-b__card[data-status] .mi-b__status { border-style: solid; color: var(--dv-ink); }

/* --------------------------------------------------------------------------
   P1-4 · Public footer, ≤819px only: credit lines clear the dandelions.
   Live amsp.css (≤819px) sizes the dandelion box to clamp(232px,69vw,304px)
   but reserves only clamp(162px,49vw,215px) under .credits, so the photograph
   rises into the text: at 768px the width-limited `cover` crop puts the heads
   across the visual credit and credits (89px of overlap); at 390px the heads
   graze the last credits line ("…otherwise credited."). This reserves the
   full box height + 16px so the text ends above the image. Same DOM, same
   image, same crop, same type sizes; ≥820px untouched. A bug fix, recorded as
   a deviation from live in DEV02_4_1_QA_REPORT.md.
   -------------------------------------------------------------------------- */
@media (max-width: 819px) {
  .amsp-dev024 .amsp-foot .credits {
    padding-bottom: calc(clamp(232px, 69vw, 304px) + 16px) !important;
  }
}

/* --------------------------------------------------------------------------
   P1-6 · Side C inline step — rhythm re-checked after P0-A/B.
   With the floating bars gone the step card has room; only its top spacing
   is evened so it reads as part of the timeline rather than wedged into it.
   -------------------------------------------------------------------------- */
.room002-page--dev024 #main .mi .mi-c__tl-item > .mi-c__journey-step { margin: 6px 0 14px 44px; }
@media (max-width: 359px) {
  .room002-page--dev024 #main .mi .mi-c__tl-item > .mi-c__journey-step { margin-left: 0; }
}