/* The visitor panel takes the width that the intact room plate cannot use.
   The plate, its hotspots, and the elevator remain one proportional surface. */
body.mq-typography .room-visit {
  --visit-panel: max(clamp(360px, 24vw, 440px), calc(100% - (100svh - var(--environment-header-height)) * var(--visit-aspect)));
  display: grid;
  grid-template-columns: var(--visit-panel) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  background: #11161e;
}
body.mq-typography .room-visit--lobby { margin-top: var(--environment-header-height); }
body.mq-typography .room-visit > :is(.atrium, .floor-scene, .shop-scene, .rooftop-scene) {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: var(--visit-aspect);
  align-self: start;
}
body.mq-typography .room-visitor {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  contain: size;
  overflow-y: auto;
  padding: clamp(24px, 1.8vw, 48px);
  color: #eeeef0;
  background: linear-gradient(145deg, #171e28, #10141b 80%);
  border-right: 1px solid #333b48;
  border-top: 3px solid #3879ef;
}
.room-visitor__identity {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: clamp(18px, 2vh, 28px);
  border-bottom: 1px solid #38404a;
}
html body.mq-typography :is(.room-visitor__identity, .room-visitor__floor) {
  font-family: var(--mq-font-label);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.room-visitor__identity { color: #afb9c7; }
.room-visitor__identity > span:last-child { letter-spacing: .06em; }
body.mq-typography .room-visitor__floor { margin: 20px 0 10px; color: #8db4ff; }
.room-visitor__floor > span { color: #acb5c2; }
body.mq-typography .room-visitor__heading h2 {
  max-width: 12ch;
  margin: 0 0 18px;
  font-size: clamp(34px, 2.65vw, 52px);
  text-transform: none;
}
.room-visitor__heading h2 > span { color: #6499ff; }
.room-visitor__brief { min-height: 0; }
.room-visitor__brief > summary { display: none; }
body.mq-typography .room-visitor__copy { max-width: 37ch; }
body.mq-typography .room-visitor__copy p {
  margin: 0 0 16px;
  color: #cdd1d8;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.5;
}
body.mq-typography .room-visitor__copy .room-visitor__aside { color: #a9bce0; }
body.mq-typography .room-visitor__copy p:last-child { margin-bottom: 0; }
.room-visitor > * { flex-shrink: 0; transition: opacity 400ms ease; }
body.elevator-ui-hidden .room-visitor > :not(.elevator-direction) { opacity: 0; }
body.mq-typography .room-visitor > .elevator-direction { background: #11161e; }
body.mq-typography .elevator-direction strong { font: 500 clamp(32px, 3vw, 52px)/1.15 var(--mq-font-body); letter-spacing: -.02em; text-transform: none; }
body.mq-typography .elevator-direction small { font: 700 12px/1.5 var(--mq-font-label); letter-spacing: .15em; }
body.mq-typography .elevator-direction :is(span, b) { color: #8db4ff; font-family: var(--mq-font-body); }

/* Portrait screens retain a full-width plate, with the briefing beneath it. */
@media (max-width: 900px) and (orientation: portrait) {
  body.mq-typography .room-visit { grid-template-columns: minmax(0, 1fr); }
  body.mq-typography .room-visit > :is(.atrium, .floor-scene, .shop-scene, .rooftop-scene) { grid-row: 1; }
  body.mq-typography .room-visitor { border-right: 0; padding: 22px 24px; contain: none; overflow: visible; }
  .room-visitor__identity { padding-bottom: 14px; }
  body.mq-typography .room-visitor__floor { margin-top: 16px; }
  body.mq-typography .room-visitor__heading h2 { margin-bottom: 14px; font-size: 34px; max-width: none; }
  body.mq-typography .room-visitor__copy { max-width: 52ch; }
}
.room-visitor[data-compact] .room-visitor__brief > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; color: #bdd0f2; border-top: 1px solid #38404a; cursor: pointer; font: 700 16px/1.5 var(--mq-font-body); list-style: none; }
.room-visitor__brief > summary::-webkit-details-marker { display: none; }
.room-visitor__brief > summary:focus-visible { outline: 2px solid #8db4ff; outline-offset: 3px; }
.room-visitor__brief[open] > summary > span { transform: rotate(45deg); }
body.mq-typography .room-visitor[data-compact] .room-visitor__copy { padding-top: 14px; }
@media (max-height: 700px) and (orientation: landscape) {
  body.mq-typography .room-visitor { padding: 18px 24px; }
  .room-visitor__identity { padding-bottom: 12px; }
  body.mq-typography .room-visitor__floor { margin-top: 14px; }
  body.mq-typography .room-visitor__heading h2 { margin-bottom: 14px; font-size: 30px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .room-visitor > *, .room-visitor .elevator-direction { transition: none; }
  .room-visitor .elevator-direction :is(b, i) { animation: none; }
}


/* Reserve the whole opening viewport so the editorial section starts below
   the fold, even when a room's natural proportions make its image shorter. */
@media (min-width: 901px) {
  body.mq-typography .room-visit {
    min-height: calc(100dvh - var(--environment-header-height));
  }
  body.mq-typography .room-visit > :is(.atrium, .floor-scene, .shop-scene, .rooftop-scene) {
    align-self: center;
  }
}