/* Baxter Maps -- page shells. Phone (< 1024 px): floating search pill, category
   chips, FABs, bottom sheet, bottom navigation. Desktop (>= 1024 px): 72 px rail,
   full-height 408 px side panel that holds every view, chips on the map. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/20px Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text); background: var(--ground); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
#map { position: absolute; inset: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.i { width: 24px; height: 24px; fill: currentColor; flex: none; }
.muted { color: var(--muted); }
.spacer { flex: 1; }

/* ================= phone (default) ================= */
.rail { display: none; }
.panel { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.panel > * { pointer-events: auto; }
.topbar { position: absolute; top: calc(8px + var(--sat)); left: 12px; right: 12px; z-index: 3; transition: transform .25s var(--ease), opacity .2s; }
.chips { position: absolute; top: calc(8px + var(--sat) + var(--pill-h) + 10px); left: 0; right: 0; z-index: 2; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--sheet-px, 50%);
  background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
  transition: height .3s var(--ease);
}
.sheet.dragging { transition: none; }
.sheet .view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sab); }
.grab { flex: none; height: 22px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.grab span { width: 32px; height: 4px; border-radius: 2px; background: var(--outline); }
.collapse-tab { display: none; }
.fabs { position: absolute; right: 16px; bottom: calc(var(--bottomnav-h) + var(--sab) + 16px); z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; transition: bottom .3s var(--ease), opacity .2s; }
.fabs #fab-layers { position: fixed; right: 16px; top: calc(8px + var(--sat) + var(--pill-h) + 56px); }
.bottomnav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(var(--bottomnav-h) + var(--sab)); padding-bottom: var(--sab);
  background: var(--surface); display: flex; box-shadow: 0 -1px 0 var(--line);
}
.compass { position: absolute; right: 16px; top: calc(8px + var(--sat) + var(--pill-h) + 108px); z-index: 4; }

/* sheet open: FABs ride above it, the bottom nav hides under it */
body.sheet-open .fabs { bottom: calc(var(--sheet-h) + 16px); }
body.sheet-open .fabs #fab-dir { display: none; }
body.sheet-full .fabs, body.sheet-full .compass { opacity: 0; pointer-events: none; }
body.sheet-full:not(.searching) .topbar { transform: translateY(-120%); opacity: 0; pointer-events: none; }
body.sheet-open .chips { display: none; }
body.view-directions .topbar, body.view-route .topbar, body.view-timeline .topbar, body.view-you .topbar, body.view-contribute .topbar, body.view-saved .topbar, body.view-recents .topbar, body.view-settings .topbar { display: none; }
body.view-directions .chips, body.view-route .chips { display: none; }
body.view-directions #fab-layers, body.view-route #fab-layers { display: none; }

/* typing: the search takes the whole phone screen, as in the app */
body.searching .panel { background: var(--surface); }
body.searching .topbar { left: 0; right: 0; top: 0; padding: calc(8px + var(--sat)) 12px 8px; background: var(--surface); }
body.searching .chips, body.searching .fabs, body.searching .bottomnav, body.searching #compass { display: none; }
body.searching .sheet { top: calc(var(--pill-h) + 16px + var(--sat)); height: auto; border-radius: 0; box-shadow: none; }
body.searching .grab { display: none; }

/* tablet / landscape: the sheet docks left, 480 px */
@media (min-width: 601px) and (max-width: 1023px) {
  .sheet { right: auto; width: 480px; left: 0; }
  .topbar { right: auto; width: 456px; }
}

/* ================= desktop ================= */
@media (min-width: 1024px) and (min-height: 521px) {
  :root { --bottomnav-h: 0px; }
  .bottomnav { display: none; }
  .rail { display: flex; position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 7; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 12px; background: var(--surface); border-right: 1px solid var(--line); }
  .panel { inset: 0 auto 0 var(--rail-w); width: var(--panel-w); }
  .topbar { top: 12px; left: 16px; right: auto; width: 376px; }
  .chips { top: 12px; left: calc(var(--panel-w) + 16px); right: auto; width: calc(100vw - var(--rail-w) - var(--panel-w) - 90px); }
  /* panel closed (explore): only the floating search box shows */
  .panel[data-view="explore"] { width: 408px; pointer-events: none; }
  .panel[data-view="explore"] .chips { left: 408px; }
  .panel:not([data-view="explore"]) { background: var(--surface); box-shadow: var(--shadow-2); }
  .panel:not([data-view="explore"]) .topbar { top: 12px; }
  .sheet { position: absolute; inset: 72px 0 0 0; width: auto; height: auto !important; border-radius: 0; box-shadow: none; background: transparent; }
  .panel:not([data-view="explore"]) .sheet { background: var(--surface); }
  .grab { display: none; }
  .collapse-tab { display: flex; position: absolute; top: 50%; right: -23px; width: 23px; height: 48px; border-radius: 0 8px 8px 0; background: var(--surface); box-shadow: 2px 0 4px rgba(60,64,67,.2); align-items: center; justify-content: center; color: var(--muted); }
  .panel[data-view="explore"] .collapse-tab { display: none; }
  body.panel-collapsed .panel:not([data-view="explore"]) { transform: translateX(calc(-1 * var(--panel-w))); }
  body.panel-collapsed .collapse-tab svg { transform: rotate(180deg); }
  .panel { transition: transform .25s var(--ease); }
  body.view-directions .topbar, body.view-route .topbar, body.view-timeline .topbar, body.view-you .topbar, body.view-saved .topbar, body.view-recents .topbar, body.view-settings .topbar, body.view-contribute .topbar { display: none; }
  body.view-directions .sheet, body.view-route .sheet, body.view-timeline .sheet, body.view-you .sheet, body.view-saved .sheet, body.view-recents .sheet, body.view-settings .sheet, body.view-contribute .sheet { top: 0; }
  body.searching .panel { background: var(--surface); box-shadow: var(--shadow-2); }
  body.searching .topbar { left: 16px; right: auto; top: 12px; padding: 0; background: none; width: 376px; }
  body.searching .sheet { top: 72px; }
  body.searching .chips { display: flex; }
  .fabs { right: 16px; bottom: 28px; gap: 12px; }
  .fabs #fab-layers { position: fixed; left: calc(var(--rail-w) + 16px); right: auto; top: auto; bottom: 24px; }
  body:not(.view-explore) .fabs #fab-layers { left: calc(var(--rail-w) + var(--panel-w) + 16px); }
  body.panel-collapsed .fabs #fab-layers { left: calc(var(--rail-w) + 16px); }
  .fabs #fab-dir { display: none; }
  body.sheet-open .fabs { bottom: 28px; }
  body.sheet-open .chips { display: flex; }
  .compass { top: auto; bottom: 150px; right: 22px; }
  .maplibregl-ctrl-bottom-right { right: 12px; bottom: 110px; }
}