/* Residence: an architectural selector with the selected room kept in view. */
.residence-view {
  max-width: 1380px;
  padding-top: clamp(20px, 2.8vw, 38px);
}

.residence-view .secondary-heading {
  align-items: center;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.residence-view .secondary-heading h1 {
  font-size: clamp(32px, 4vw, 44px);
}

.residence-view .secondary-heading p {
  max-width: 700px;
  color: var(--text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-copy);
}

.residence-live-chip {
  margin: 0;
  padding: 10px 12px;
  border-color: var(--border-control);
  border-radius: var(--radius-control);
  background: var(--terminal-panel-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-caption);
}

.residence-layout {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  gap: var(--space-4);
}

.residence-gallery,
.room-detail-panel {
  min-width: 0;
  border: var(--border-width) solid var(--terminal-panel-border);
  border-radius: var(--terminal-panel-radius);
  background: var(--terminal-panel-surface);
  box-shadow: var(--terminal-panel-shadow);
}

.residence-gallery { padding: clamp(14px, 1.5vw, 20px); }

.residence-gallery-head {
  min-height: 40px;
  margin-bottom: 14px;
  color: var(--text-secondary);
}

.residence-gallery-head .eyebrow { font-size: var(--font-size-caption); }
.residence-gallery-head > div > strong { font-size: var(--font-size-body); }
.residence-gallery-head > span { font-size: var(--font-size-caption); }

.residence-map {
  min-height: 430px;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  grid-template-rows: minmax(150px, 1fr) 44px minmax(150px, 1fr);
  padding: 12px;
  border-color: color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--green) 7%, transparent), transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--line) 48%, transparent) 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb, var(--line) 48%, transparent) 28px),
    var(--bg);
}

.map-room {
  --residence-room-text: var(--text);
  --residence-room-muted: var(--text-secondary);
  --residence-room-accent: var(--green);
  padding: 15px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--text) 22%, var(--line));
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--surface) 45%, transparent);
}

.map-room:hover { transform: translateY(-1px); }
.map-room.is-selected {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, var(--surface-raised));
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent), 0 0 22px color-mix(in srgb, var(--green) 12%, transparent);
}

.map-room-texture {
  opacity: .12;
  filter: grayscale(.35) saturate(.45);
}

.map-room.is-selected .map-room-texture,
.map-room:hover .map-room-texture { opacity: .17; }

.map-room::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 28%, transparent),
    color-mix(in srgb, var(--surface) 76%, transparent) 52%,
    color-mix(in srgb, var(--surface) 92%, transparent));
}

html[data-theme="light"] .map-room-texture,
html[data-theme="light"] .map-room.is-selected .map-room-texture,
html[data-theme="light"] .map-room:hover .map-room-texture { opacity: .035; }

html[data-theme="light"] .map-room::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 92%, transparent),
    color-mix(in srgb, var(--surface) 97%, transparent));
}

.map-room-index { font-size: var(--font-size-caption); }
.map-room-index i { width: 7px; height: 7px; }
.map-room-copy { gap: 7px; }
.map-room-copy small { font-size: var(--font-size-overline); }
.map-room-copy strong { font-size: clamp(13px, 1.15vw, 17px); line-height: 1.2; }
.map-room-copy em { max-width: 100%; font-size: var(--font-size-caption); }
.map-room-state { min-width: 26px; height: 26px; font-size: var(--font-size-overline); }

.map-corridor {
  border-top-style: solid;
  border-bottom-style: solid;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  font-size: var(--font-size-overline);
}

.map-corridor span { margin-left: 12px; }
.map-corridor i { right: 18px; }

.map-lift {
  width: 46px;
  height: 64px;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface) 82%, transparent), 0 5px 18px color-mix(in srgb, var(--bg) 25%, transparent);
}

.map-foyer {
  border-color: color-mix(in srgb, var(--green) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 54%, transparent);
}

.map-foyer-symbol { font-size: 24px; }
.map-foyer strong { color: var(--text); font-size: var(--font-size-overline); }
.map-foyer small { font-size: var(--font-size-micro); }

.residence-map-legend {
  gap: 14px;
  padding-top: 13px;
  color: var(--text-secondary);
  font-size: var(--font-size-caption);
}

.residence-map-legend i { width: 9px; height: 9px; }
.residence-map-footnote { opacity: 1; }

.room-detail-panel { align-self: stretch; }

.room-detail-layout {
  grid-template-columns: minmax(150px, .68fr) minmax(0, 1.32fr);
  min-height: 100%;
}

.room-detail-visual { min-height: 100%; }
.room-detail-visual img { filter: saturate(.82); }
.room-detail-content { padding: clamp(16px, 1.7vw, 24px); }
.room-status { font-size: var(--font-size-overline); }
.room-detail-content h2 { font-size: clamp(20px, 2.1vw, 27px); }
.room-description { color: var(--text-secondary); font-size: var(--font-size-small); line-height: 1.7; }
.room-feature-tags { flex-wrap: wrap; }
.room-feature-tags span { font-size: var(--font-size-overline); }
.room-course-heading h3 { font-size: var(--font-size-body); }
.room-progress-count { font-size: var(--font-size-small); }
.room-module { min-height: 54px; }
.module-index { width: 29px; height: 29px; font-size: var(--font-size-caption); }
.room-module strong { font-size: var(--font-size-small); }
.room-module small { font-size: var(--font-size-caption); }
.room-module > b { font-size: var(--font-size-body); }
.lounge-membership p,
.lounge-membership li { color: var(--text-secondary); font-size: var(--font-size-small); line-height: 1.65; }
.lounge-membership h3 { font-size: var(--font-size-subtitle); }
.lounge-launch-note { color: var(--text-secondary); font-size: var(--font-size-caption); }
.lesson-reader { padding: 15px; }
.lesson-reader h3 { font-size: var(--font-size-body); }
.lesson-reader p { color: var(--text-secondary); font-size: var(--font-size-small); }
.lesson-complete-button { min-height: 38px; font-size: var(--font-size-caption); }
.residence-bottom-note { color: var(--text-secondary); font-size: var(--font-size-caption); }

@media (max-width: 1100px) {
  .residence-layout { grid-template-columns: minmax(0, 1fr); }
  .residence-map { min-height: clamp(350px, 48vw, 440px); }
  .room-detail-layout { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); }
}

@media (max-width: 760px) {
  .residence-view { padding-top: 16px; }
  .residence-view .secondary-heading { gap: 10px; margin-bottom: 18px; }
  .residence-view .secondary-heading h1 { font-size: 30px; }
  .residence-view .secondary-heading p { font-size: var(--font-size-small); }
  .residence-live-chip { padding: 8px 9px; font-size: var(--font-size-overline); }
  .residence-layout { gap: var(--space-3); }
  .residence-gallery { padding: 12px; }
  .residence-gallery-head { align-items: flex-start; margin-bottom: 11px; }
  .residence-gallery-head > span { font-size: var(--font-size-micro); }
  .residence-map {
    min-height: 330px;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    grid-template-rows: minmax(125px, 1fr) 38px minmax(125px, 1fr);
    padding: 8px;
  }
  .map-room { padding: 10px 8px; }
  .map-room-copy { gap: 5px; }
  .map-room-copy small { font-size: var(--font-size-micro); }
  .map-room-copy strong { font-size: var(--font-size-small); }
  .map-room-copy em { font-size: var(--font-size-micro); line-height: 1.35; }
  .map-room-state { top: 8px; right: 7px; min-width: 22px; height: 22px; }
  .map-lift { width: 32px; height: 54px; }
  .map-corridor { font-size: var(--font-size-micro); }
  .map-corridor span { margin-left: 8px; }
  .map-corridor i { right: 12px; width: 9px; height: 9px; }
  .residence-map-legend { gap: 8px 12px; font-size: var(--font-size-overline); }
  .residence-map-footnote { width: 100%; margin-left: 0; }
  .room-detail-layout { grid-template-columns: 1fr; }
  .room-detail-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .room-detail-content { padding: 18px; }
  .room-detail-content h2 { font-size: 23px; }
  .residence-bottom-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
  .residence-gallery-head > span { max-width: 105px; text-align: right; }
  .map-room-copy em { display: none; }
  .residence-map-legend { gap: 7px; }
}