/* ─────────────────────────────────────────────────────────
   Verba shared mobile primitives
   Loaded by every HTML page; runs AFTER each page's inline
   <style> block so it can safely override where needed.
   ───────────────────────────────────────────────────────── */

/* Safe-area env vars default to 0 on desktop browsers */
:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* Never allow sideways scroll from a stray wide element */
html,body{max-width:100vw;overflow-x:hidden}

/* Prevent iOS Safari auto-zoom: any focusable input must be ≥16px */
@media (max-width:768px){
  input,select,textarea,button{font-size:16px !important}
}

/* 44x44 minimum tap target for interactive pills, icons */
@media (max-width:768px){
  .icon-btn,.nav-item,.soc-btn,.submit,.mode-tab,.back,.brand,button[type="submit"]{
    min-height:44px;
  }
  .icon-btn{min-width:44px}
}

/* Respect notch / home indicator */
@media (max-width:768px){
  body{
    padding-left:var(--safe-l);
    padding-right:var(--safe-r);
  }
}

/* Images never overflow their container */
img,svg,video,canvas{max-width:100%;height:auto}

/* Long unbroken strings (URLs, tokens) wrap instead of overflowing */
.cut-body,.card,.modal,.pay-shell,.form-wrap{overflow-wrap:anywhere}