/* ─────────────────────────────────────────────────────────────────────────
   Residence — shared room-panel UI
   Used by the Listening Lounge and the Library (internal section navigation)
   and by every room panel (the Close button). Modeled on the approved Wine
   Lounge ribbon so the whole Residence feels like one system.

   Expects the two brand tokens to exist on the page:
     --gold  (#dfc07a on room pages)   --ivory (#f5f0e6)
   ───────────────────────────────────────────────────────────────────────── */

/* ── One Close button for the whole Residence ──────────────────────────────
   Prominent, high-contrast, unmistakable against dark panels. Same treatment
   in every room. Kept in its existing spot (top-right of each panel header). */
.residence-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: rgba(223, 192, 122, 0.16);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.residence-close:hover {
  background: var(--gold);
  color: #14100a;
  transform: scale(1.05);
}
.residence-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(223, 192, 122, 0.55);
}
/* Comfortable touch target on phones / tablets. */
@media (pointer: coarse) {
  .residence-close { width: 48px; height: 48px; font-size: 21px; }
}

/* ── Internal section navigation ───────────────────────────────────────────
   A vertical ribbon that rides just outside the panel's left edge (desktop /
   tablet), modeled on the Wine Lounge navigator. It lists the room's major
   sections, jumps to each on click, and highlights the active one on scroll.
   The nav is a child of the sliding panel, so it slides in and out with it. */
.room-nav {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: max-content;
  max-width: 210px;
  padding: 14px 8px;
  background: rgba(6, 4, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(223, 192, 122, 0.16);
  border-right: none;
  border-radius: 10px 0 0 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s 0.12s;
}
/* Revealed once its panel is open. */
.open > .room-nav { opacity: 1; pointer-events: auto; }

.room-nav-label {
  font-size: 7px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.32);
  padding: 4px 14px 10px;
}
.room-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: rgba(245, 240, 230, 0.62);
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.room-nav-item:hover { color: var(--gold); background: rgba(223, 192, 122, 0.05); }
.room-nav-item.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(223, 192, 122, 0.08);
}
.room-nav-item:focus-visible {
  outline: none;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(223, 192, 122, 0.55);
}

/* Narrower screens: a ~580px panel leaves too little room for a ribbon beside
   it, so convert the same nav to a horizontal, scrollable bar pinned directly
   under the header — visible immediately, never covering content. Covers phones
   and portrait tablets; landscape tablets / laptops keep the vertical ribbon. */
@media (max-width: 860px) {
  .room-nav {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    width: auto;
    max-width: none;
    flex-direction: row;
    gap: 2px;
    padding: 9px 14px;
    border: none;
    border-bottom: 1px solid rgba(223, 192, 122, 0.12);
    border-radius: 0;
    background: rgba(6, 4, 10, 0.72);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
    opacity: 1;
    pointer-events: auto;
  }
  .room-nav::-webkit-scrollbar { display: none; }
  .room-nav-label { display: none; }
  .room-nav-item {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: 11px;
  }
  .room-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--gold);
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-nav { transition: none; }
}