/* ═══════════════════════════════════════════════════════════
   Shared Responsive Architecture — Pull Me Under Residences
   Library (library.html) + Listening Lounge (listening-lounge.html)
   Linked AFTER each page's <style> block so it wins in cascade.

   Three layout tiers:
     Desktop   ≥1025px    default — no query needed
     Tablet    768–1024px @media (max-width: 1024px)
     Phone     <768px     @media (max-width: 767px)

   For Welcome Home, the equivalent rules live in
   src/style/responsive.css (compiled into the Vite bundle).
   ═══════════════════════════════════════════════════════════ */

/* ── Side panels: dvh match ─────────────────────────────────────
   Scene containers were fixed to height:100dvh in a previous commit.
   Side panels were missed — applying the same fix here.
────────────────────────────────────────────────────────────── */
#lib-panel,
#ll-panel {
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;
}

/* ── Responsive navigation ──────────────────────────────────────
   The right-side label (e.g. "Pull Me Under") is purely decorative.
   On tablet/phone, the nav is too narrow to hold all three elements
   at full padding — hide the label and reduce padding.
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lib-nav-right,
  .ll-nav-right {
    display: none;
  }

  .lib-nav,
  .ll-nav {
    padding: 16px 22px;
  }
}

@media (max-width: 767px) {
  .lib-nav,
  .ll-nav {
    padding: 12px 16px;
  }

  /* Full-width panel on phone — no partial overlay */
  #lib-panel,
  #ll-panel {
    width: 100vw;
  }
}

/* ── Audio button: clear browser chrome on tablet/phone ─────────
   The previous dvh fix corrects the container height.
   This increases the bottom offset so the button has breathing
   room above any remaining browser chrome or home indicator.
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #lib-audio-btn {
    bottom: 40px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #ll-audio-btn {
    bottom: 40px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Touch targets ──────────────────────────────────────────────
   Apple HIG minimum: 44×44pt.
   Only applied on coarse-pointer (touchscreen) devices.
────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .lib-hotspot,
  .ll-hotspot {
    width: 44px;
    height: 44px;
  }

  /* Library audio: already 46×46 — above minimum, no change needed */

  /* LL audio: text-style button — enforce minimum height */
  #ll-audio-btn {
    min-height: 44px;
    padding: 12px 22px;
  }
}

/* ── Tooltip flip for right-edge hotspots ───────────────────────
   Hotspots positioned past ~left:70% generate tooltips that
   extend off the right edge on portrait iPad (768px wide).

   Add class="... flip-tooltip" to any such hotspot in HTML.
   The tooltip will render to the LEFT of the dot instead.

   Applied in: library.html and listening-lounge.html
────────────────────────────────────────────────────────────── */
.lib-hotspot.flip-tooltip::after,
.ll-hotspot.flip-tooltip::after {
  left: auto;
  right: 44px;
}