/* ScanFirst, touch targets for phones: every control gets a hit area of at least 44x44 px.
   Only applies on small screens, desktop is untouched. Selectors start with "html" so they win over page styles. */
@media (max-width:768px){
  /* shared: header + footer */
  html a.logo{min-height:44px;display:flex;align-items:center}
  html .theme-toggle,html .sw-floattheme{width:44px;height:44px}
  html .sw-wbtn{height:44px;min-width:44px}
  html nav a{display:inline-flex;align-items:center;min-height:44px}
  html .footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px}
  html .footer-links .soc{width:44px;height:44px}

  /* homepage */
  html .icon-dock{gap:4px}
  html .dock-item{width:44px;height:44px}
  html .hsearch{height:44px}
  html .ad-strip{min-height:44px}
  html .intro-close{min-height:44px}
  html .prem-ad{height:44px}
  html .btn-book-slot{display:inline-flex;align-items:center;min-height:44px}
  html .tab{min-height:44px}
  html .retry{min-height:44px}
  html .quiet-btn,html .meta-right button{position:relative;z-index:1}
  html .quiet-btn::after{content:"";position:absolute;inset:-10px -5px}
  html .meta-right button::after{content:"";position:absolute;inset:-14px -6px}
  html .promo-note a,html .p-promo a{display:inline-flex;align-items:center;min-height:44px}

  /* token page */
  html .title .star{min-width:44px;min-height:44px;padding:0;align-items:center;justify-content:center;margin:-6px -2px}
  html .copy{position:relative;z-index:1}
  html .copy::after{content:"";position:absolute;inset:-10px -5px}
  html .tlinks a,html .imgbtn{min-width:44px;min-height:44px;padding:0;align-items:center;justify-content:center}
  html .tf-btn{min-height:44px;padding:0 14px}
  html .addr button,html .addr a{min-width:44px;min-height:44px;padding:0;align-items:center;justify-content:center;margin:-9px -6px}

  /* boost page */
  html .link-btn{min-height:44px;min-width:44px;padding:0 6px;display:inline-flex;align-items:center}
  html .st-btn{position:relative}
  html .st-btn::after{content:"";position:absolute;inset:-8px -4px}
  html .addon input{flex:none;width:20px;height:20px;margin-top:2px}
  html .btn-submit,html .btn-ghost{min-height:48px}
  /* form fields: 44 px high and 16 px text, so iPhones don't zoom in when you tap a field */
  html input[type=text],html input[type=email],html input:not([type]){min-height:44px;font-size:16px}
  html label.agree{align-items:center}
  html label.agree input{flex:none;width:22px;height:22px}
}

/* very narrow phones (320 px): keep the header on one row next to the bigger wallet button */
@media (max-width:360px){
  html nav{gap:8px}
  html nav a.btn-boost{padding-left:14px;padding-right:14px}
}

/* ===== mobile: opvallende onderbalk ===== */
@media (max-width:768px){
  html{--dock:84px}
  html body{padding-bottom:calc(var(--dock) + 60px + env(safe-area-inset-bottom,0px))}
  html .icon-dock{left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-width:none;border-radius:18px 18px 0 0;border:0;border-top:1px solid rgba(20,241,149,.45);background:linear-gradient(180deg,#18223a,#0f1626);box-shadow:0 -8px 28px rgba(0,0,0,.55),0 -1px 0 rgba(20,241,149,.25);padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));gap:0;justify-content:space-around;align-items:stretch;z-index:8000}
  html .dock-item{flex:1;min-width:44px;width:auto;height:58px;flex-direction:column;gap:4px;background:none;border:0;border-radius:12px;transform:none}
  html .dock-item svg{width:24px;height:24px;stroke-width:2.2}
  html .dock-item::after{display:block;font-size:11px;font-weight:600;line-height:1;color:#cbd5e1;letter-spacing:.2px}
  html .icon-dock>:nth-child(1)::after{content:"Search"}
  html .icon-dock>:nth-child(2)::after{content:"Saved"}
  html .icon-dock>:nth-child(3)::after{content:"Alerts"}
  html .icon-dock>:nth-child(4)::after{content:"Charts"}
  html .icon-dock>:nth-child(5)::after{content:"Portfolio"}
  html .icon-dock>:nth-child(6)::after{content:"Theme"}
  html .dock-item:active{background:rgba(20,241,149,.14)}
  html .dock-item.active,html .dock-item.active:hover{background:rgba(20,241,149,.16);border:0;box-shadow:none}
  html .dock-item.active svg{stroke:var(--accent)}
  html .dock-item.active::after{color:var(--accent)}
  html #dock-watch.active svg{fill:var(--accent)}
  html .dock-badge{top:4px;right:calc(50% - 20px)}
}