/* ============================================================================
   BMR — shared phone/tablet refinement (Apple-HIG-inspired)
   Linked from every public page. ONE source of truth for the mobile chrome, so
   the pages cannot drift apart the way they did when cart/order-form/thank-you
   were left on the old dark graphite for a month.

   ⚠ EVERYTHING here is inside @media (max-width:1023px) — the exact complement of
   each page's own @media(min-width:1024px) desktop block. The desktop layout, and
   the measured 12-card first screen on the home page that depends on it, cannot be
   reached by anything in this file. The owner said "the desktop mode is ok do not
   touch"; this is how that promise is kept structurally rather than by care.

   Only SHARED chrome lives here (.topbar/.tbwrap/.logobox + press feedback).
   Page-specific layout stays in each page's own stylesheet.
   ============================================================================ */

@media (max-width:1023px){

  /* --- 1. THE NAV BAR ---------------------------------------------------
     Was ~70px of opaque chrome pinned to the top of every screen. Now compact
     and translucent so content scrolls beneath it. This is the ONLY place
     Liquid Glass is spent — using it once is what stops it feeling like a
     gimmick and keeps it reading as premium. */
  .topbar{
    background:rgba(28,32,41,.72);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  /* an opaque child would defeat the blur, so the open menu gets its own value */
  .topbar.nav-open{background:rgba(28,32,41,.94)}

  .tbwrap{
    padding-top:9px;padding-bottom:9px;
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    gap:12px;
  }

  /* The mark shrinks, but the LINK must not: 34px of artwork inside a 44px
     target. tools/audit.js fails anything under 40px tall. */
  .logobox{display:flex;align-items:center;min-height:44px}
  .logobox img{height:34px}

  .navtoggle{width:44px;height:44px;border-radius:13px;
    background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}

  /* --- 2. SUBTLE MOTION -------------------------------------------------
     iOS confirms a tap by scaling the surface very slightly. Transform-only,
     so it can never trigger layout or reflow mid-press. */
  .btn,.pill,.hbtn,.pcard,.pkg,.dlcard,.navtoggle,.tab,.fpill,.langbtn,.back{
    transition:transform .22s cubic-bezier(.2,.7,.3,1),background-color .22s,border-color .22s}
  .pcard:active,.pkg:active,.dlcard:active{transform:scale(.975)}
  .btn:active,.pill:active,.hbtn:active,.tab:active,.fpill:active,
  .langbtn:active,.back:active,.navtoggle:active{transform:scale(.96)}


  /* --- 4. INLINE CALLS-TO-ACTION AT 44px --------------------------------
     These two sit at the end of their paragraph rather than mid-sentence, so
     unlike the prose links in the policy pages (deliberately capped at 36px,
     where 44px would overlap the neighbouring line) they can take a full
     block-level touch target. */
  .teamcta a,.hint a{
    display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
    text-decoration:underline}

  /* --- 3. EDGE SAFETY ---------------------------------------------------
     Notched iPhones in landscape clip content against the sensor housing. */
  footer .fw{
    padding-left:max(22px,env(safe-area-inset-left));
    padding-right:max(22px,env(safe-area-inset-right))}
}

/* Motion is a system preference, not decoration. */
@media (prefers-reduced-motion:reduce){
  .btn,.pill,.hbtn,.pcard,.pkg,.dlcard,.navtoggle,.tab,.fpill,.langbtn,.back{transition:none}
  .pcard:active,.pkg:active,.dlcard:active,.btn:active,.pill:active,.hbtn:active,
  .tab:active,.fpill:active,.langbtn:active,.back:active,.navtoggle:active{transform:none}
}

/* Some Android browsers ship without backdrop-filter. Fall back to a solid bar
   rather than a see-through, unreadable one. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:1023px){ .topbar{background:var(--bar,#1c2029)} }
}