/* DDE (DesignX) app-shell layer
   Mobile chrome that makes the site behave like a native Android app: bottom
   navigation bar, the old full-screen menu restyled as a bottom sheet, tap
   tactility, edge-to-edge safe areas, install affordance, page transitions.

   Linked AFTER each page's inline <style> (not before, like site.css) on purpose:
   .wa-fab / .back-top / .mobile-menu / .nav-burger are declared inside those
   inline blocks, and this layer has to win them at equal specificity instead of
   with !important. Everything visual is gated to max-width:860px, matching the
   breakpoint the pages already use, so desktop rendering is untouched. */

html{-webkit-text-size-adjust:100%}
a,button,input,textarea,select,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.appbar-item:active,.mobile-menu a:active{transform:scale(.99)}

/* Base bar geometry; visibility is decided by the media query below, which must
   come after this rule so the equal-specificity display override wins. */
.appbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:890;
  flex-direction:row;align-items:stretch;
  height:calc(4.7rem + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(11,9,7,.95);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.09)
}

@media (max-width:860px){
  body{padding-bottom:calc(4.7rem + env(safe-area-inset-bottom,0px))}
  .nav-burger{display:none}

  /* --- bottom navigation bar --- */
  .appbar{display:flex}
  .mobile-menu{
    inset:auto 0 0 0;height:auto;max-height:min(74vh,34rem);
    padding:.1rem 0 calc(4.9rem + env(safe-area-inset-bottom,0px));
    justify-content:flex-start;align-items:stretch;gap:0;
    background:#0f0d0c;border-radius:1.5rem 1.5rem 0 0;
    box-shadow:0 -20px 60px rgba(0,0,0,.55);
    overscroll-behavior:contain;animation:sheetUp .3s var(--ease)
  }
  .mobile-menu::before{
    content:'';flex:0 0 auto;width:2.4rem;height:3px;border-radius:3px;
    background:rgba(255,255,255,.25);margin:.65rem auto .45rem
  }
  .mobile-menu.closing{animation:sheetDown .2s var(--ease) forwards}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{
    font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.1;
    letter-spacing:0;color:rgba(255,255,255,.85);
    padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.07);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    transition:color .18s,background .18s
  }
  .mobile-menu a::after{content:'\203A';color:rgba(255,255,255,.3);font-size:1.25rem;line-height:1}
  .mobile-menu a:hover{color:#fff}
  .mobile-menu a:active{background:rgba(255,255,255,.06)}
  .mobile-menu a[aria-current="page"]{color:var(--amber)}
  .mobile-menu .m-cta{
    margin:1rem 1.5rem .2rem;padding:.95rem 1.2rem;border:0;border-radius:.85rem;
    background:var(--red);color:#fff;justify-content:center;font-weight:700;
    box-shadow:0 8px 22px rgba(204,0,0,.28)
  }
  .mobile-menu .m-cta::after{display:none}
  .mobile-menu .m-cta:active{background:#b30000}

  /* scrim behind the sheet (the sheet itself is .mobile-menu) */
  body.sheet-open::after{
    content:'';position:fixed;inset:0;z-index:880;
    background:rgba(0,0,0,.55);animation:fadeIn .2s ease
  }

  /* --- FAB and back-to-top clear the bar --- */
  .wa-fab{bottom:calc(6.1rem + env(safe-area-inset-bottom,0px))}
  .back-top{bottom:calc(6.1rem + env(safe-area-inset-bottom,0px));right:5.4rem}

  /* --- install affordance --- */
  .install-chip.show{
    display:flex;position:fixed;left:.9rem;right:.9rem;
    bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));z-index:755;
    align-items:center;gap:.75rem;padding:.8rem .95rem;
    background:#161311;border:1px solid rgba(255,255,255,.11);border-radius:1rem;
    box-shadow:0 14px 40px rgba(0,0,0,.5);animation:fadeIn .25s ease
  }
}

.appbar-item{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.28rem;
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.005em;
  color:rgba(255,255,255,.5);background:none;border:0;cursor:pointer;
  transition:color .18s,transform .12s var(--ease)
}
.appbar-item i{
  font-size:1.3rem;line-height:1;width:3.3rem;height:1.85rem;
  display:flex;align-items:center;justify-content:center;border-radius:1rem;
  transition:background .2s,color .2s
}
.appbar-item.active{color:#fff}
.appbar-item.active i{background:rgba(204,0,0,.2);color:var(--red-bright)}
.appbar-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}

.install-chip{display:none}
.install-chip-copy{flex:1 1 auto;font-family:var(--sans);font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.85)}
.install-chip-copy b{display:block;font-weight:700;color:#fff;font-size:.9rem;margin-bottom:.1rem}
.install-chip-go{
  flex:0 0 auto;padding:.55rem .85rem;border:0;border-radius:.7rem;
  background:var(--red);color:#fff;font-family:var(--sans);font-size:.8rem;font-weight:700;cursor:pointer
}
.install-chip-x{
  flex:0 0 auto;width:1.7rem;height:1.7rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.7);
  font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center
}

@keyframes sheetUp{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes sheetDown{from{transform:translateY(0)}to{transform:translateY(102%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Cross-document page transitions: Chromium 126+/Safari 18+ only, ignored elsewhere. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,body.sheet-open::after,.install-chip.show,.appbar-item,.mobile-menu a{animation:none;transition:none}
  .mobile-menu.closing{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
}

@media print{.appbar,body.sheet-open::after,.install-chip{display:none!important}}