/* AMSP Listening Room 002 · PB033 private visual review.
   1 · Edition 001-style publication bar (amsp.css) replaces the dev context bar.
   3 · A/B/C key in the room opening: even spacing at every width; the active
       level no longer shifts its text when the yellow bar appears.
   Data, side switching and Previous/Next behaviour are untouched. */

/* 1 · header: keep the shared bar exactly as Edition 001 draws it */
.room002-page .pb033-room-nav{position:sticky;top:0;z-index:60}
.room002-page .pb033-room-nav a{text-decoration:none}
.room002-page #main,.room002-page .room002-hero{scroll-margin-top:64px}

/* 3 · A/B/C key in the opening */
.room002-page--dev024 .room0322-nav__key{gap:0;margin-top:12px}
.room002-page--dev024 .room0322-nav__level{
  grid-template-columns:28px minmax(0,1fr);gap:14px;
  padding:13px 12px 13px 14px;
  border-left:2px solid transparent;
}
.room002-page--dev024 .room0322-nav[data-side="A"] .room0322-nav__level[data-side="A"],
.room002-page--dev024 .room0322-nav[data-side="B"] .room0322-nav__level[data-side="B"],
.room002-page--dev024 .room0322-nav[data-side="C"] .room0322-nav__level[data-side="C"]{
  border-left-color:#f0e112;padding-left:14px;
}
.room002-page--dev024 .room0322-nav__letter{line-height:1.35;padding-top:1px}
.room002-page--dev024 .room0322-nav__level small{margin-top:4px}

/* tablet: three columns, a closed box, the same inner spacing in each cell */
@media (max-width:900px) and (min-width:421px){
  .room002-page--dev024 .room0322-nav__key{border-left:1px solid rgba(234,232,195,.18)}
  .room002-page--dev024 .room0322-nav__level{display:block;padding:14px 14px 14px 16px;border-left-width:2px}
  .room002-page--dev024 .room0322-nav__level + .room0322-nav__level{border-left:2px solid transparent}
  .room002-page--dev024 .room0322-nav__level:last-child{border-right:1px solid rgba(234,232,195,.18)}
  .room002-page--dev024 .room0322-nav__letter{display:block;margin:0 0 8px}
  .room002-page--dev024 .room0322-nav[data-side] .room0322-nav__level[aria-current],
  .room002-page--dev024 .room0322-nav[data-side="A"] .room0322-nav__level[data-side="A"],
  .room002-page--dev024 .room0322-nav[data-side="B"] .room0322-nav__level[data-side="B"],
  .room002-page--dev024 .room0322-nav[data-side="C"] .room0322-nav__level[data-side="C"]{padding-left:16px}
}

/* phones: one list, letter column and text aligned with the rest of the hero */
@media (max-width:420px){
  .room002-page--dev024 .room0322-nav__level{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:11px 10px 11px 12px}
  .room002-page--dev024 .room0322-nav[data-side="A"] .room0322-nav__level[data-side="A"],
  .room002-page--dev024 .room0322-nav[data-side="B"] .room0322-nav__level[data-side="B"],
  .room002-page--dev024 .room0322-nav[data-side="C"] .room0322-nav__level[data-side="C"]{padding-left:12px}
  .room002-page--dev024 .room0322-nav__letter{margin:0}
}

/* instrument side keys: a little breathing room at the edges on phones */
@media (max-width:599px){
  .room002-page--dev024 #main .mi .amsp-abc__key{padding:14px 10px}
}