/*
 * Layout: a full-bleed 3D stage with floating mist-glass chrome.
 *
 * Regions (index.html): #splash, #topbar, #context, #stage (#stage-hero,
 * #stage-canvas, #stage-mist, #stage-overlays, #stage-notice-host,
 * #stage-credit), #rail, #drawer, #list, #views, #sheet, #notes, dialogs
 * (#disclaimer, #contact, #lightbox, #menu), #settings, #toast-region.
 *
 * js/app.js writes these attributes on <body>:
 *   data-view            current view id
 *   data-chrome          stage | views | tour | context
 *   data-stage           loading | ready | off | error | suspended
 *   data-rail-open       the residences rail is expanded (desktop/tablet)
 *   data-drawer-visible  the unit drawer is shown (open, not minimised to its pill)
 *   data-drawer-mini     the unit drawer is minimised (bus drawer:state 'mini'); the
 *                        stage inset and, on tablets, the list are released
 *   data-list            the unit table is open
 *   data-sheet           peek | half | full (mobile)
 *   data-mist            holding | clearing | clear
 *   data-splash          present while the splash covers the app
 *
 * Other workstreams place things inside the visible stage area with
 *   --stage-inset-left / --stage-inset-right / --stage-inset-top / --stage-inset-bottom
 * and pad full-screen views with --chrome-top / --chrome-bottom.
 *
 * #rail and #drawer are transparent positioning hosts: the residences
 * workstream draws its own glass panels inside them (and the collapsed rail
 * tab), so the hosts never block the stage with empty space.
 *
 * Breakpoints: desktop ≥ 1100 px · tablet 760–1099 px · mobile < 760 px.
 */

body {
  --stage-inset-top: var(--chrome-top);
  --stage-inset-left: calc(var(--safe-left) + var(--gutter));
  --stage-inset-right: calc(var(--safe-right) + var(--gutter));
  --stage-inset-bottom: calc(var(--safe-bottom) + var(--gutter));
}

body[data-chrome="stage"][data-rail-open] {
  --stage-inset-left: calc(var(--safe-left) + var(--gutter) * 2 + var(--rail-w));
}

body[data-chrome="stage"][data-drawer-visible] {
  --stage-inset-right: calc(var(--safe-right) + var(--gutter) * 2 + var(--drawer-w));
}

#main {
  outline: none;
}

/* Stage ------------------------------------------------------------------- */
#stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-stage);
  overflow: hidden;
  background: var(--fog);
  isolation: isolate;
}

#stage-hero,
#stage-canvas,
#stage-mist,
#stage-overlays {
  position: absolute;
  inset: 0;
}

#stage-hero {
  z-index: 0;
}

#stage-canvas {
  z-index: 1;
  touch-action: none;
  transition: opacity var(--dur-fade) var(--ease);
}

#stage-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

body[data-stage="off"] #stage-canvas,
body[data-stage="error"] #stage-canvas {
  opacity: 0;
  pointer-events: none;
}

#stage-mist {
  z-index: 2;
  pointer-events: none;
}

#stage-overlays {
  z-index: 3;
  pointer-events: none;
}

#stage-overlays > * {
  pointer-events: auto;
}

#stage-overlays [data-pass-through] {
  pointer-events: none;
}

#stage-notice-host {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

#stage-notice-host > * {
  pointer-events: auto;
}

#stage-credit {
  position: absolute;
  z-index: 5;
  left: var(--stage-inset-left);
  bottom: var(--stage-inset-bottom);
  transition: left var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

/* The credit belongs to the 3D stage chrome; hide it where views cover it. */
body:not([data-chrome="stage"]) #stage-credit,
body[data-list] #stage-credit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

/* Top bar ---------------------------------------------------------------- */
#topbar {
  position: fixed;
  z-index: var(--z-chrome);
  top: calc(var(--safe-top) + var(--gutter));
  left: calc(var(--safe-left) + var(--gutter));
  right: calc(var(--safe-right) + var(--gutter));
  height: var(--topbar-h);
}

/* Context row ------------------------------------------------------------ */
#context {
  position: fixed;
  z-index: var(--z-chrome);
  top: calc(var(--safe-top) + var(--gutter) + var(--topbar-h) + var(--sp-2));
  left: calc(var(--safe-left) + var(--gutter));
  right: calc(var(--safe-right) + var(--gutter));
  height: var(--context-h);
  pointer-events: none;
}

#context > * {
  pointer-events: auto;
}

#context .context-row__spacer {
  pointer-events: none;
}

/* Rail (left) and drawer (right) hosts ------------------------------------ */
#rail,
#drawer {
  position: fixed;
  z-index: var(--z-panels);
  top: var(--chrome-top);
  bottom: calc(var(--safe-bottom) + var(--gutter));
  display: flex;
  flex-direction: column;
  min-height: 0;
  pointer-events: none;
  transition:
    transform var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
}

#rail > *,
#drawer > * {
  pointer-events: auto;
}

#rail {
  left: calc(var(--safe-left) + var(--gutter));
  width: var(--rail-w);
  align-items: flex-start;
}

#drawer {
  right: calc(var(--safe-right) + var(--gutter));
  width: var(--drawer-w);
  align-items: stretch;
}

#rail > *,
#drawer > * {
  max-height: 100%;
}

/* Rail: shown with the 3D stage; the residences UI draws the expanded panel
   or the collapsed tab itself. */
body:not([data-chrome="stage"]) #rail {
  transform: translateX(calc(-100% - var(--gutter) * 2));
  opacity: 0;
  visibility: hidden;
}

/* Drawer: only while a residence is selected in a stage view. */
body:not([data-drawer-visible]) #drawer,
body:not([data-chrome="stage"]) #drawer {
  transform: translateX(calc(100% + var(--gutter) * 2));
  opacity: 0;
  visibility: hidden;
}

body[data-chrome="stage"] #rail,
body[data-chrome="stage"][data-drawer-visible] #drawer {
  transition:
    transform var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease),
    visibility 0s linear 0s;
}

/* Unit table ---------------------------------------------------------------- */
#list {
  position: fixed;
  z-index: calc(var(--z-panels) + 1);
  top: var(--chrome-top);
  left: var(--stage-inset-left);
  right: var(--stage-inset-right);
  max-height: calc(100dvh - var(--chrome-top) - var(--safe-bottom) - var(--gutter) - 56px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: left var(--dur-slow) var(--ease), right var(--dur-slow) var(--ease);
}

#list > * {
  min-height: 0;
}

body:not([data-list]) #list,
body:not([data-chrome="stage"]) #list {
  display: none;
}

/* Views host (plan, tour, gallery, location, project, common, context) ---- */
#views {
  position: fixed;
  inset: 0;
  z-index: var(--z-views);
  pointer-events: none;
}

#views > * {
  pointer-events: auto;
}

#views [data-pass-through] {
  pointer-events: none;
}

#views [data-pass-through] > * {
  pointer-events: auto;
}

body[data-chrome="stage"] #views {
  visibility: hidden;
}

/* Mobile sheet ------------------------------------------------------------ */
#sheet {
  display: none;
}

/* Notes drawer host ------------------------------------------------------- */
#notes {
  position: fixed;
  z-index: var(--z-notes);
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--notes-w), 100vw);
  pointer-events: none;
}

#notes > * {
  pointer-events: auto;
}

/* Splash, settings, toast ------------------------------------------------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
}

#splash[hidden] {
  display: none;
}

#toast-region {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--gutter) + 64px);
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  width: min(92vw, 520px);
  pointer-events: none;
}

/* While the splash covers the app, keep the chrome out of the tab order
   visually (the app also marks it inert). */
body[data-splash] #topbar,
body[data-splash] #context,
body[data-splash] #rail,
body[data-splash] #drawer {
  opacity: 0;
}

#topbar,
#context {
  transition: opacity var(--dur-slow) var(--ease);
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1099px) {
  #list {
    left: calc(var(--safe-left) + var(--gutter));
    right: calc(var(--safe-right) + var(--gutter));
  }

  /* Rail and drawer do not fit side by side: the drawer wins while a residence
     is selected and open ("‹ Todas las residencias" returns to the list; a
     minimised drawer gives the list back). */
  body[data-drawer-visible] #rail {
    transform: translateX(calc(-100% - var(--gutter) * 2));
    opacity: 0;
    visibility: hidden;
  }

  body[data-chrome="stage"][data-drawer-visible] {
    --stage-inset-left: calc(var(--safe-left) + var(--gutter));
  }
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 759px) {
  body,
  body[data-chrome="stage"][data-rail-open],
  body[data-chrome="stage"][data-drawer-visible] {
    --stage-inset-left: calc(var(--safe-left) + var(--gutter));
    --stage-inset-right: calc(var(--safe-right) + var(--gutter));
    --stage-inset-bottom: calc(var(--safe-bottom) + var(--sheet-peek) + var(--gutter));
  }

  body:not([data-chrome="stage"]) {
    --stage-inset-bottom: calc(var(--safe-bottom) + var(--gutter));
  }

  /* Sheet raised to "half": the stage area (and Stage.setInsets) ends above it. */
  body[data-chrome="stage"][data-sheet="half"] {
    --stage-inset-bottom: calc(52dvh + var(--gutter));
  }

  #stage-credit {
    display: none;
  }

  #sheet {
    display: flex;
    position: fixed;
    z-index: var(--z-sheet);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100dvh - var(--safe-top) - var(--gutter) - var(--topbar-h) - var(--sp-2));
    transform: translateY(var(--sheet-y, calc(100% - var(--sheet-peek) - var(--safe-bottom))));
    transition: transform var(--dur-slow) var(--ease), visibility 0s linear 0s;
    will-change: transform;
  }

  #sheet[data-dragging] {
    transition: none;
  }

  body:not([data-chrome="stage"]) #sheet,
  body[data-list] #sheet {
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  }

  /* Rail and drawer are adopted into the sheet body by js/ui/shell/sheet.js. */
  #sheet #rail,
  #sheet #drawer {
    position: static;
    width: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  #sheet[data-unit] #rail,
  #sheet:not([data-unit]) #drawer {
    display: none;
  }

  #list {
    top: var(--chrome-top);
    bottom: 0;
    left: 0;
    right: 0;
    max-height: none;
    z-index: calc(var(--z-sheet) + 1);
  }

  #toast-region {
    bottom: calc(var(--safe-bottom) + var(--sheet-peek) + var(--gutter));
  }

  body:not([data-chrome="stage"]) #toast-region {
    bottom: calc(var(--safe-bottom) + var(--gutter) + 56px);
  }
}