/* Layout: a full-bleed 3D world under a grid of floating glass panels.
   ≥1280 px: rails on both sides; 768–1279 px: rails become drawers; <768 px: 3D plus a bottom sheet. */

.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  touch-action: none;
}

.world canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.world,
.kpis,
.queues__body,
.scrubber {
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* A failed load freezes the page: what is still on screen is stale, so it steps back behind the card. */
[data-view="error"] .world,
[data-view="invalid"] .world {
  opacity: 0.35;
  filter: saturate(0.4);
}

[data-view="error"] .kpis,
[data-view="error"] .queues__body,
[data-view="error"] .scrubber,
[data-view="invalid"] .kpis,
[data-view="invalid"] .queues__body,
[data-view="invalid"] .scrubber {
  opacity: 0.45;
}

.shell {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "kpi kpi kpi"
    "rail stage detail"
    "time time time";
  gap: var(--gutter);
  padding: calc(var(--gutter) + env(safe-area-inset-top))
    calc(var(--gutter) + env(safe-area-inset-right))
    calc(var(--gutter) + env(safe-area-inset-bottom))
    calc(var(--gutter) + env(safe-area-inset-left));
  pointer-events: none;
}

.shell > .panel {
  pointer-events: auto;
}

.topbar {
  grid-area: top;
  /* Above the KPI strip, so the date list can open over it. */
  z-index: 2;
}

.kpis {
  grid-area: kpi;
}

.queues {
  grid-area: rail;
  min-height: 0;
}

.stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.stage > * > * {
  pointer-events: auto;
}

.detail {
  grid-area: detail;
  width: var(--detail-w);
  min-height: 0;
}

.detail[data-open="false"] {
  display: none;
}

.timeline {
  grid-area: time;
}

.drawer {
  position: fixed;
  z-index: 40;
  top: calc(var(--topbar-bottom, 0px) + var(--gutter));
  right: calc(var(--gutter) + env(safe-area-inset-right));
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  width: min(var(--drawer-w), calc(100vw - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  background: var(--glass-strong);
  box-shadow: var(--shadow-float);
  transform: translateX(calc(100% + 2 * var(--gutter)));
  visibility: hidden;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}

.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}

.tabbar {
  display: none;
}

.hover-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}

.toasts {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  pointer-events: none;
}

/* The queue toggle only exists where the rail is a drawer. */
.stage__tools {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: var(--sp-2);
}

#queues-toggle {
  display: none;
}

/* ---------- 768–1279 px: rails become drawers ---------- */
@media (max-width: 1279.98px) {
  :root {
    --rail-w: 320px;
    --detail-w: 360px;
    --gutter: 10px;
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "kpi"
      "stage"
      "time";
  }

  #queues-toggle {
    display: inline-flex;
  }

  .queues,
  .detail {
    position: fixed;
    z-index: 30;
    top: calc(var(--topbar-bottom, 0px) + var(--gutter));
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
    background: var(--glass-strong);
    box-shadow: var(--shadow-float);
    visibility: hidden;
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  .queues {
    left: calc(var(--gutter) + env(safe-area-inset-left));
    width: min(var(--rail-w), calc(100vw - 2 * var(--gutter)));
    transform: translateX(calc(-100% - 2 * var(--gutter)));
  }

  .detail {
    right: calc(var(--gutter) + env(safe-area-inset-right));
    width: min(var(--detail-w), calc(100vw - 2 * var(--gutter)));
    transform: translateX(calc(100% + 2 * var(--gutter)));
  }

  .detail[data-open="false"] {
    display: flex;
  }

  .queues[data-open="true"],
  .detail[data-open="true"] {
    transform: none;
    visibility: visible;
    transition:
      transform var(--dur-slow) var(--ease-out),
      visibility 0s;
  }
}

/* ---------- <768 px: the 3D view plus one bottom sheet ---------- */
@media (max-width: 767.98px) {
  :root {
    --gutter: 8px;
    --tabbar-h: 58px;
  }

  .shell {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding-bottom: calc(
      var(--tabbar-h) + var(--gutter) + env(safe-area-inset-bottom)
    );
  }

  .queues,
  .detail,
  .drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(72vh, calc(100vh - 120px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    transform: translateY(105%);
  }

  .drawer {
    height: min(72vh, calc(100vh - 120px));
  }

  .queues[data-open="true"],
  .detail[data-open="true"],
  .drawer[data-open="true"] {
    transform: none;
  }

  .queues::before,
  .detail::before,
  .drawer::before {
    content: "";
    flex: none;
    align-self: center;
    width: 40px;
    height: 4px;
    margin-top: var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--line-strong);
  }

  #queues-toggle {
    display: none;
  }

  .tabbar {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--line);
  }
}