/* App shell LAYOUT — a two-row grid (header / body); the body is the FULL-BLEED map.
   Features live on right-edge DRAWER-TABS over the map (rail.css) — no dedicated
   chrome column. Structural dimensions live here (colours in tokens.css). */

:root {
  --hdr-h:      60px;  /* fits the brand (30px globe) + breadcrumb-search pills (~38px) */
  --cam-h:      92px;
  --cam-card-w: 322px;
  --cam-right-reserve: 12px; /* matches the .cam left margin — nothing floats on the map's right edge */
  --rail-w:     48px;  /* drawer-tab width — the cam 3D card offsets from it */
}

#app {
  height: 100vh;
  position: relative;
  display: grid;
  grid-template-rows: var(--hdr-h) 1fr;
}

/* ---- Body: full-bleed map (dock + panels float over it) ------------------ */
.layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}

.map-pane { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }

/* ---- Footer ------------------------------------------------------------- */
.ftr {
  display: none; align-items: center; gap: 14px;
  padding: 0 12px; background: var(--bg-2);
  border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-dim);
}
.ftr-brand { font-weight: 600; }
.ftr-attribution { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }