/* public/css/mobile.css — the phone / tablet floor every Kit Agent page shares (r14).
 *
 * Linked LAST in <head> on every public/*.html page, so it comes after each page's own
 * <style>. It only sets floors (font size, tap height, safe-area room, no sideways scroll);
 * layout stays with each page. Nothing here applies on a desktop with a mouse except the
 * safe-area padding, which is 0 wherever the device has no notch / home indicator.
 */

/* iOS: keep the text size the page asked for when the phone rotates */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* iOS Safari zooms the whole page when a field under 16px gets focus. */
@media (max-width:1024px){
  input,select,textarea{font-size:16px!important}
}

/* Notch / home-indicator room (viewport-fit=cover is set on every page). env() is 0 on
   devices without them, so nothing moves on a desktop. Sticky top bars get the top inset as a
   transparent border, which shows the bar's own background and leaves its padding alone.
   RULE FOR THIS BLOCK: it applies at every width (env() is 0 on a desktop), so it must never
   SET a property a page also sets — a 0 here would replace the page's own value. Room at the
   bottom is therefore ADDED after the footer (::after), not written into its padding. The
   body / bar / floating-button properties used here are ones no page sets (checked by
   test/a1-r14-mobile.test.js). */
@supports (padding:env(safe-area-inset-left)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  body>header,#top,.top,#topbar{border-top:env(safe-area-inset-top) solid transparent}
  footer::after{content:"";display:block;height:env(safe-area-inset-bottom)}
  .toast,.syn-fab,.syn-panel,#demoBadge,#demoDataBadge{margin-bottom:env(safe-area-inset-bottom)}
}

/* Touch screens: 44px tap targets for links in navigation and footers, icon buttons and
   buttons. :where() keeps this at zero specificity, so a page rule that sets its own
   min-height still wins; height alone does not shrink below it. */
@media (pointer:coarse){
  :where(nav a,footer a,header nav a,.side a){display:inline-flex;align-items:center;min-height:44px}
  :where(button,.btn,[role=button],summary,select,.iconbtn,.themebtn,.langsel-el,input[type=submit],input[type=button]){min-height:44px}
  :where(input[type=checkbox],input[type=radio]){min-width:22px;min-height:22px}
}

/* Hover-only reveals get a tap / focus equivalent on touch screens. */
@media (hover:none){
  .dfstage .dfhint{opacity:1;transform:none}
}
.dfstage:focus-visible .dfhint{opacity:1;transform:none}

/* Landscape phones (e.g. 844×390): a sticky marketing header would take a fifth of the
   screen, so it scrolls away with the page there. */
@media (max-height:500px) and (orientation:landscape){
  body>header,#top,.top{position:relative}
}

/* No sideways page scroll from a stray wide child: tables and code scroll in their own box. */
@media (max-width:768px){
  pre{max-width:100%;overflow-x:auto}
  video{max-width:100%}
}