/* PB032 · reader-selectable atmospheres (Room 002). Scoped to .mi; loads only on /listening/002/.
   The canvas copies the host photograph's own box (dev02-photographic.css .mi-photo__img) so the
   picture lines up exactly, and sits beneath the room's scrim. It never takes pointer input. */
.room002-page--dev02 .mi-photo .mi-atmos__canvas {
  position: absolute; left: 0; top: -24px; width: 100%; height: calc(100% + 48px); display: block;
  transform: translate3d(0, var(--mi-photo-shift, 0px), 0); pointer-events: none;
}
.room002-page--dev02 .mi-photo .mi-atmos__canvas[hidden] { display: none; }
.room002-page--dev02 .mi-photo[data-motion="still"] .mi-atmos__canvas { transform: none; }
@media (prefers-reduced-motion: reduce) { .room002-page--dev02 .mi-photo .mi-atmos__canvas { transform: none !important; } }

/* chooser: one compact row under A / B / C, never animated */
.room002-page--dev02 .mi .mi-atmos { margin: 10px 0 18px; font: 500 .8rem/1.3 var(--mi-mono, ui-monospace, Menlo, monospace); color: #f2f3ec; }
.room002-page--dev02 .mi .mi-atmos__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.room002-page--dev02 .mi .mi-atmos__k { letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; color: #dfe2da;
  padding: 6px 10px; border-radius: 999px; background: rgba(10, 12, 11, .72); }   /* readable on any photograph (Side B marigolds are bright) */
.room002-page--dev02 .mi .mi-atmos__toggle,
.room002-page--dev02 .mi .mi-atmos__pause {
  min-height: 44px; padding: 8px 14px; border: 1px solid rgba(242, 243, 236, .42); border-radius: 999px;
  background: rgba(10, 12, 11, .78); color: #f2f3ec; font: inherit; letter-spacing: .04em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
.room002-page--dev02 .mi .mi-atmos__toggle[aria-expanded="true"],
.room002-page--dev02 .mi .mi-atmos[data-atmos]:not([data-atmos="off"]) .mi-atmos__toggle { border-color: #f0e20f; }
.room002-page--dev02 .mi .mi-atmos__name { color: #f0e20f; }
.room002-page--dev02 .mi .mi-atmos__chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.room002-page--dev02 .mi .mi-atmos__toggle[aria-expanded="true"] .mi-atmos__chev { transform: translateY(2px) rotate(225deg); }
.room002-page--dev02 .mi .mi-atmos__pause[aria-pressed="true"] { border-color: #f0e20f; color: #f0e20f; }
.room002-page--dev02 .mi .mi-atmos__panel { margin-top: 12px; padding: 14px; border: 1px solid rgba(242, 243, 236, .22); border-radius: 14px; background: rgba(8, 10, 9, .9); }
.room002-page--dev02 .mi .mi-atmos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.room002-page--dev02 .mi .mi-atmos__opt {
  width: 100%; min-height: 44px; padding: 0 0 8px; display: flex; flex-direction: column; gap: 7px; align-items: stretch; text-align: left;
  border: 1px solid rgba(242, 243, 236, .24); border-radius: 10px; overflow: hidden; background: #0d100e; color: #f2f3ec; font: inherit; cursor: pointer;
}
.room002-page--dev02 .mi .mi-atmos__opt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #111; }
.room002-page--dev02 .mi .mi-atmos__opt-name { padding: 0 9px; font-size: .74rem; line-height: 1.25; }
.room002-page--dev02 .mi .mi-atmos__opt[aria-pressed="true"] { border-color: #f0e20f; box-shadow: inset 0 0 0 1px #f0e20f; }
.room002-page--dev02 .mi .mi-atmos__opt[aria-pressed="true"] .mi-atmos__opt-name { color: #f0e20f; }
.room002-page--dev02 .mi .mi-atmos__opt:disabled { opacity: .45; cursor: not-allowed; }
.room002-page--dev02 .mi .mi-atmos__note { margin: 10px 0 0; font-size: .72rem; color: #c9cdc4; }
.room002-page--dev02 .mi .mi-atmos button:focus-visible { outline: 2px solid #f0e20f; outline-offset: 3px; }
@media (max-width: 980px) { .room002-page--dev02 .mi .mi-atmos__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .room002-page--dev02 .mi .mi-atmos__bar { justify-content: flex-start; }
  .room002-page--dev02 .mi .mi-atmos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room002-page--dev02 .mi .mi-atmos__panel { padding: 10px; }
}