/* ============================================================
   27-floatnav.css — The floating tab bar of the iOS app.
   On a phone the rail is a bottom tab bar (05-mobile.css). In the iOS app
   (html.is-ios, set by js/native.js) it floats instead: a glass capsule
   with room to the screen edges, just above the home indicator, the
   active tab marked by a pill. Android and the website keep the docked
   bar. The capsule ends lower than the docked bar did, so everything that
   clears the docked bar (toasts, the select bar) clears it too.
   The scanner's camera runs to the screen edge, under the capsule; what
   floats over the camera and the result sheet's foot sit above it instead
   (--fn-clear: the capsule's top, measured from the screen's bottom edge).
   ============================================================ */
@media(max-width:960px){
  html.is-ios{--fn-clear:calc(max(12px, env(safe-area-inset-bottom) - 8px) + 60px);}
  html.is-ios .rail{
    left:14px; right:14px; width:auto; max-width:520px; margin:0 auto;
    bottom:max(12px, calc(env(safe-area-inset-bottom) - 8px));
    padding:0; border-radius:30px;
    border:1px solid var(--line-2);
    background:rgba(12,17,27,.72);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  }
  html.is-ios .nav{padding:6px; gap:2px;}
  html.is-ios .nav-item{padding:6px 2px 5px; gap:3px; border-radius:24px;}
  html.is-ios .nav-item.active{background:rgba(var(--accent-rgb),.16);}
  html.is-ios .nav-item.active::before{display:none;}
  html.is-ios .nav-item.active:hover{background:rgba(var(--accent-rgb),.16);}
  html.is-ios .nav-item .count{top:2px; right:max(6px, 20%);}

  /* the scanner: camera edge to edge, its controls above the capsule */
  html.is-ios body.scan-full #view-scan{bottom:0;}
  html.is-ios body.scan-full .scan-wrap > div:last-child{padding-bottom:calc(var(--fn-clear) + 76px);}
  html.is-ios body.scan-full.sheet-list .scan-wrap > div:last-child{padding-bottom:calc(var(--fn-clear) + 10px);}
  html.is-ios body.scan-full .scan-optbar{bottom:calc(var(--fn-clear) + 18px);}
  html.is-ios body.scan-full .scan-shutter:not([hidden]){bottom:calc(var(--fn-clear) + 78px);}
  html.is-ios body.scan-full .scan-last:not([hidden]){bottom:calc(var(--fn-clear) + 74px);}
  html.is-ios body.scan-full.scan-multi .scan-last:not([hidden]){bottom:calc(var(--fn-clear) + 158px);}
}