/* ==========================================================================
   mobile-nav.css
   Adapts the app-mobile.html navigation concept — a slim top bar, a fixed
   bottom tab bar, and a "More" sheet for every other page — into index.html
   itself, so one file serves both the desktop site and the Android app.
   Active only at <=760px (the same breakpoint the old hamburger menu used
   to kick in at); above that, the regular desktop header.nav is shown as
   before. Loaded AFTER styles.css, so it inherits every theme variable,
   font and component style untouched.

   This intentionally covers ONLY the navigation chrome — the broader
   mobile-ergonomics pass (video tap-to-play facade, article swipe nav,
   tighter paddings, etc.) lives in app-mobile.css/app-mobile.js and stays
   exclusive to app-mobile.html for now, since the Android app no longer
   points there.
   ========================================================================== */

.app-topbar,.app-tabbar,.app-more-back,.app-more-sheet{display:none;}

@media(max-width:760px){
  header.nav,.nav-burger,.nav-dd-menu{display:none!important;}

  /* ---- top bar — logo + search + auth only, no link list ---- */
  .app-topbar{
    display:block;
    position:sticky; top:0; z-index:70;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid var(--line);
  }
  .app-topbar::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(10,13,16,.92);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .app-topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;}
  .app-logo{display:flex;align-items:center;gap:10px;font-family:'Syne',sans-serif;font-weight:800;font-size:1.02rem;cursor:pointer;min-width:0;}
  .app-logo .logo-mark{width:34px;height:34px;flex-shrink:0;display:none;}
  .app-logo .logo-mark-mobile{display:block;}
  .app-logo .logo-mark-mobile img{width:100%;height:100%;border-radius:8px;display:block;}
  .app-logo>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .app-icon-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text);cursor:pointer;}
  .app-icon-btn:active{border-color:var(--lagoon);color:var(--lagoon);}
  .app-topbar .auth-chip{font-size:.66rem;padding:6px 10px;}

  /* ---- bottom tab bar ---- */
  .app-tabbar{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    justify-content:space-around; align-items:stretch;
    background:rgba(15,19,23,.97);
    border-top:1px solid var(--line);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .app-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 7px;background:none;border:none;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:color .15s ease;}
  .app-tab svg{width:21px;height:21px;}
  .app-tab.active{color:var(--lagoon);}
  .app-tab:active{transform:scale(.94);}
  #app-more-btn.sheet-open{color:var(--lagoon);}

  /* ---- "More" sheet — slide-up drawer listing every remaining page ---- */
  .app-more-back{display:block;position:fixed;inset:0;z-index:85;background:rgba(6,8,10,.6);opacity:0;pointer-events:none;transition:opacity .22s ease;}
  .app-more-back.open{opacity:1;pointer-events:auto;}
  .app-more-sheet{
    display:flex;flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    max-height:78vh;
    background:var(--surface);
    border-top:1px solid var(--line);
    border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px -12px rgba(0,0,0,.6);
    transform:translateY(102%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    padding-bottom:calc(env(safe-area-inset-bottom) + 10px);
  }
  .app-more-sheet.open{transform:translateY(0);}
  .app-more-handle{width:38px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 4px;}
  .app-more-scroll{overflow-y:auto;padding:6px 16px 4px;}
  .app-more-group{padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .app-more-group:last-child{border-bottom:none;}
  .app-more-heading{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0 4px;}
  .app-more-group button{display:flex;align-items:center;width:100%;text-align:left;background:none;border:none;color:var(--text);font-size:.96rem;font-weight:600;padding:11px 4px;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .app-more-group button:active{background:var(--surface2);color:var(--lagoon);}
  .app-more-group button.active{color:var(--lagoon);}

  /* app shell base — room for the fixed bottom tab bar, no rubber-band overscroll */
  html{scroll-padding-top:56px;}
  body{overscroll-behavior-y:contain;padding-bottom:calc(64px + env(safe-area-inset-bottom));}

  /* cookie banner and toasts must sit above the tab bar, not behind it */
  #cookie-banner{bottom:calc(64px + env(safe-area-inset-bottom) + 10px)!important;}
  #toast{bottom:calc(64px + env(safe-area-inset-bottom) + 14px)!important;}

  /* home hero search bar: a little top breathing room now there's no desktop nav above it */
  #home-search{margin-top:4px;}
}