/* App frame: top bar, the floating nav, the screen host, and the panel + map layout. */
.app { position: relative; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.view { position: relative; flex: 1; min-height: 0; pointer-events: none; z-index: 2; }
.app[data-chrome="0"] .topbar, .app[data-chrome="0"] .nav--foot, .app[data-chrome="0"] .mhide { display: none !important; }
.app[data-tabbar="0"] .nav--foot, .app[data-screen="report"] .mhide { display: none; }

/* ---------- Top bar ---------- */
.topbar { position: relative; z-index: 20; height: 88px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-nav); }
.brand { justify-self: start; }
.brand__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0a0a0a; color: var(--accent); }
.brand__mark svg { width: 20px; height: 20px; }
.brand__t { display: flex; flex-direction: column; line-height: 1.15; }
.brand__t b { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.brand__t small { font-size: 12px; color: var(--muted); }
.top-actions { display: flex; gap: 8px; justify-self: end; }
.theme-btn .is-sun, :root[data-theme="dark"] .theme-btn .is-moon { display: none; }
:root[data-theme="dark"] .theme-btn .is-sun { display: block; }

/* ---------- The nav: a black pill holding big white circles, lime on the open one ---------- */
.nav { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #0a0a0a; box-shadow: var(--shadow-nav); }
:root[data-theme="dark"] .nav { background: #232326; }
.nav a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #0a0a0a; transition: background .25s, transform .3s var(--spring); }
.nav a:hover { transform: translateY(-1px); }
.nav a:active { transform: scale(.92); }
.nav a svg { width: 22px; height: 22px; }
.nav a.is-active { background: var(--accent); }
.nav--foot { display: none; position: absolute; z-index: 30; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
.mhide { display: none; position: absolute; z-index: 40; top: 14px; right: 14px; }

/* ---------- Screen host ---------- */
.screen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.screen > * { pointer-events: auto; }
.screen.is-entering { animation: screen-in .35s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }
.screen--setup, .screen--cover { pointer-events: auto; }
.scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Panel floating beside the full-bleed map. */
.split { position: absolute; inset: 0; padding: 0 20px 20px; pointer-events: none; --pw: 420px; }
.panel { position: relative; z-index: 5; display: flex; flex-direction: column; width: var(--pw); height: 100%; background: var(--sheet); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; pointer-events: auto; }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 24px; scrollbar-width: none; }
.panel__grab, .scrim { display: none; }
.screen--map { --pw: 420px; }
.mapbtns { position: absolute; z-index: 4; top: 12px; right: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mapkey { position: absolute; z-index: 6; top: 12px; right: 84px; width: 300px; max-height: calc(100% - 24px); }
.mapctl { position: absolute; z-index: 4; left: calc(var(--pw) + 40px); bottom: 20px; width: min(470px, calc(100% - var(--pw) - 60px)); display: flex; flex-direction: column; gap: 10px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .split, .screen--map { --pw: 360px; }
  .nav a { width: 46px; height: 46px; }
  .nav a svg { width: 20px; height: 20px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .topbar { display: none; }
  .nav--foot { display: flex; }
  .nav a { width: 52px; height: 52px; }
  .nav a svg { width: 22px; height: 22px; }
  .mhide { display: grid; }
  .split { padding: 0; z-index: 26; }
  .split[data-open="0"] { display: none; }
  .scrim { display: block; position: absolute; inset: 0; background: rgba(10,10,10,.28); animation: fade .25s; pointer-events: auto; }
  .panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 86%; border-radius: 32px 32px 0 0; animation: sheet-up .42s var(--ease); transition: transform .24s; }
  .panel__grab { display: grid; place-items: center; flex: none; height: 26px; touch-action: none; cursor: grab; }
  .panel__grab::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--surface-3); }
  .panel__body { padding: 2px 20px 24px; }
  .screen--map { overflow: visible; }
  .app[data-screen="map"] .view { z-index: 26; }
  .mapbtns { top: 78px; right: 18px; }
  .mapkey { left: 14px; right: 14px; top: auto; width: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-height: calc(100% - 200px); }
  .mapctl { left: 14px; right: 14px; width: auto; top: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
  .mapctl > * { pointer-events: auto; }
  .mapctl .whereto { flex: none; order: -2; height: 52px; margin-right: 64px; } /* Fills the row up to the 52px hide switch, 12px apart */
  .mapctl .whereto i { width: 40px; height: 40px; }
  .place .back { display: none; }
  .app:has(.split[data-open="1"]) .nav--foot { display: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }