/* =============================================================
   shell.css — App chrome (shared across every panel)
   -------------------------------------------------------------
   Contains: .app (the phone-width frame), .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 of the 5 screens
   (#panel-overview/schedule/money/map/info) is shown. The show/hide
   logic itself lives in js/nav.js (switchPanel()).
   ============================================================= */
/* ============ 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}
}

/* ---- 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)}