/* App shell for phones: bottom tab bar, "use my location" button and a More sheet that
   turn the home page into a full screen, app like map. Everything that changes the
   page is scoped to body.app-shell inside the phone breakpoint, so desktop, tablet
   and every other page render exactly as before. Markup lives in index.html, behaviour
   in public/js/app-shell.js. Colours reuse the tokens from site.css. */

/* ---- hidden by default; only phones show the new controls ---- */
.app-tabs,.more-sheet,.more-backdrop,.locate-btn{display:none}

/* ---- installed app (any width): just the map, sheet and tabs ---- */
html.sfc-standalone,html.sfc-standalone body.app-shell{overscroll-behavior:none}
html.sfc-standalone body.app-shell main.content,
html.sfc-standalone body.app-shell .site-footer{display:none}
/* the FAQ and About sections are hidden in the installed app, so their links go too */
html.sfc-standalone .more-web{display:none}

@media (max-width:640px){
  body.app-shell{--nav-h:env(safe-area-inset-top, 0px);--tab-h:58px;
    padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px))}
  html.sfc-standalone body.app-shell{padding-bottom:0}

  /* the More sheet replaces the hamburger; the map now fills the whole screen and
     --nav-h is only the status bar inset that floating controls must clear */
  body.app-shell .nav{display:none}
  body.app-shell .tool-hero{margin-top:0;height:100vh;height:100dvh}

  /* ---- tab bar ---- */
  .app-tabs{position:fixed;left:0;right:0;bottom:0;z-index:58;display:flex;
    background:var(--navy2);border-top:1px solid rgba(201,162,75,.3);
    padding-bottom:env(safe-area-inset-bottom, 0px)}
  .app-tab{position:relative;flex:1 1 0;min-width:0;min-height:var(--tab-h);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;background:none;border:0;border-radius:0;margin:0;
    color:#9fb0c6;font:600 11px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .app-tab svg{display:block;flex:none}
  .app-tab.is-active,.app-tab[aria-expanded="true"]{color:var(--gold)}
  .app-tab:active{background:rgba(255,255,255,.06)}
  .app-tab:focus-visible,.more-row:focus-visible,.locate-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
  .app-badge{position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
    border-radius:999px;background:var(--gold);color:var(--navy);font:700 10px/16px -apple-system,sans-serif;
    text-align:center}
  /* hide the bar while the on screen keyboard is likely up so it never rides above it */
  body.app-shell.kb-open .app-tabs{display:none}
  body.app-shell.kb-open #panel{bottom:0}

  /* ---- sheet and map sit above the tab bar ---- */
  body.app-shell #panel{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px))}
  body.app-shell #panel.expanded{
    height:calc(88vh - var(--tab-h) - env(safe-area-inset-bottom, 0px));
    max-height:calc(88vh - var(--tab-h) - env(safe-area-inset-bottom, 0px));
    height:calc(88dvh - var(--tab-h) - env(safe-area-inset-bottom, 0px));
    max-height:calc(88dvh - var(--tab-h) - env(safe-area-inset-bottom, 0px))}
  /* the tab bar now carries the bottom safe area, so the action row must not add it too */
  body.app-shell .action-row{padding-bottom:10px}
  body.app-shell #panel.mini .action-row{padding-bottom:6px}

  /* floating map furniture clears the status bar (standalone) and the attribution */
  body.app-shell #compassWrap{top:calc(var(--nav-h) + 10px)}
  body.app-shell #map .maplibregl-ctrl-bottom-left{top:var(--nav-h)}
  body.app-shell #stackHintChip{top:calc(var(--nav-h) + 10px)}
  body.app-shell #loading,
  body.app-shell #sfc-install-btn,
  body.app-shell #sfc-ios-tip{top:calc(var(--nav-h) + 40px) !important;bottom:auto !important}
  body.app-shell #loading,
  body.app-shell #sfc-install-btn{left:12px !important;right:auto !important;transform:none !important}

  /* ---- use my location ---- */
  .locate-btn{position:absolute;z-index:7;display:flex;align-items:center;justify-content:center;
    top:calc(var(--nav-h) + 96px);right:14px;width:48px;height:48px;padding:0;margin:0;
    border-radius:50%;background:rgba(19,32,51,.92);color:#eef2f8;
    border:1px solid rgba(201,162,75,.45);box-shadow:0 6px 16px rgba(0,0,0,.35);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .locate-btn:active{background:var(--navy2)}
  .locate-btn.is-busy{color:var(--gold);animation:sfc-locate-pulse 1s ease-in-out infinite}
  .locate-btn.is-busy svg{animation:sfc-locate-spin 1.2s linear infinite}

  /* ---- More sheet ---- */
  .more-backdrop{position:fixed;top:0;left:0;right:0;z-index:59;
    bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));display:block;background:rgba(7,12,20,.55);
    animation:sfc-fade .18s ease}
  .more-sheet{position:fixed;left:0;right:0;z-index:60;display:block;
    bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - var(--tab-h) - env(safe-area-inset-bottom, 0px) - 24px);overflow-y:auto;
    background:var(--navy);color:#eef2f8;border-radius:18px 18px 0 0;
    border-top:1px solid rgba(201,162,75,.35);padding:14px 0 6px;
    box-shadow:0 -12px 34px rgba(0,0,0,.4);animation:sfc-rise .22s ease}
  .more-brand{margin:0 20px 6px;font-size:13px;font-weight:700;color:#9fb0c6}
  .more-brand span{color:var(--gold)}
  .more-row{display:flex;align-items:center;min-height:52px;padding:0 20px;font-size:16px;
    color:#eef2f8;text-decoration:none;border-top:1px solid rgba(255,255,255,.07)}
  .more-row:active{background:rgba(255,255,255,.06)}
  .more-wa{color:#25D366;font-weight:600}
}

@keyframes sfc-fade{from{opacity:0}to{opacity:1}}
@keyframes sfc-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes sfc-locate-spin{to{transform:rotate(360deg)}}
@keyframes sfc-locate-pulse{50%{box-shadow:0 0 0 8px rgba(201,162,75,.25)}}
@media (prefers-reduced-motion:reduce){
  .more-sheet,.more-backdrop,.locate-btn.is-busy,.locate-btn.is-busy svg{animation:none}
}