/* =============================================================
   shell.css — App chrome (shared across every panel)
   -------------------------------------------------------------
   Contains: .app (the phone-width frame), offline fallback banner,
   .panel show/hide + fade-in animation, .bottom-nav + .nav-btn.
   This is the persistent UI: bottom nav is always visible;
   .panel/.panel.active controls which app screen
   (#panel-overview/route/money/map/info/admin) is shown. The show/hide
   logic itself lives in js/nav.js (switchPanel()). The Admin nav item is
   hidden on mobile until js/nav.js reveals it from the Info hold gesture.
   ============================================================= */
/* ============ APP SHELL ============ */
.app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  background:var(--mist);
  position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.35);
}
@media (min-width:560px){
  body{padding:0}
}

/* ---- offline API fallback ---- */
.offline-banner{
  position:sticky;
  top:0;
  z-index:35;
  margin:0 16px;
  padding:10px 12px;
  border:1px solid rgba(204,162,72,.34);
  border-radius:var(--radius-sm);
  background:var(--gold-10);
  color:var(--ink-70);
  box-shadow:var(--shadow);
  font:600 12px/1.4 var(--font-body);
}
.offline-banner[hidden]{
  display:none;
}

/* ---- panels ---- */
.panel{display:none; padding:16px 16px 100px; animation:fadeIn .25s ease}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ---- bottom nav ---- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px;
  display:flex;
  background:var(--chrome);
  border-top:1px solid var(--chrome-line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index:40;
}
.nav-btn{
  flex:1; background:none; border:none; color:var(--chrome-muted);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px 5px; cursor:pointer; border-radius:10px;
  transition:color .15s ease;
}
.nav-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7}
.nav-btn span{font-size:10.5px; font-weight:600; letter-spacing:.02em}
.nav-btn.active{color:var(--buoy)}
.nav-btn.admin-nav{display:none}
.app.admin-enabled.admin-nav-revealed .nav-btn.admin-nav,
.app.admin-enabled .nav-btn.admin-nav.active{
  position:absolute;
  right:5px;
  bottom:calc(100% + 8px);
  display:flex;
  width:78px;
  min-height:64px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  background:var(--chrome);
  border:1px solid var(--chrome-line);
  border-radius:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}