/* HEXA Mobile: phones and tablets. win.css already gives the "fills the window" layout (and the app layout from 820px);
   this file adds what a phone needs: the dynamic viewport, notches / home bar (safe areas), touch sizes, no zoom-on-focus. */
/* (the selectors carry both classes so they beat win.css, which comes later and says 100vh = the LARGE viewport on iOS: that is what pushed the tab bar under the screen edge) */
html.hx-mobile.hx-win, html.hx-mobile.hx-win body {
  width: 100% !important; height: 100vh !important; height: 100dvh !important; height: var(--hx-h, 100dvh) !important; max-width: none !important;
  overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
html.hx-mobile input, html.hx-mobile textarea, html.hx-mobile select, html.hx-mobile [contenteditable] { -webkit-user-select: text; user-select: text; }
html.hx-mobile.hx-win .h-\[600px\] { height: 100vh !important; height: 100dvh !important; height: var(--hx-h, 100dvh) !important; }
html.hx-mobile .w-\[400px\] { width: 100% !important; max-width: none; margin: 0 !important; box-shadow: none !important; }

/* notch / Dynamic Island on top, home indicator at the bottom (iPhone X to the newest Pro Max, and Android gesture bars) */
html.hx-mobile .hexa-head { padding-top: calc(env(safe-area-inset-top, 0px) + .4rem) !important; padding-left: calc(env(safe-area-inset-left, 0px) + 1rem); padding-right: calc(env(safe-area-inset-right, 0px) + 1rem); }
html.hx-mobile .w-\[400px\] > div > nav:not(.hx-rail) { padding-bottom: env(safe-area-inset-bottom, 0px); }
html.hx-mobile .w-\[400px\] > div > main { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html.hx-mobile .pointer-events-none.absolute.inset-x-0 { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem) !important; }   /* toasts above the tab bar */

/* iOS zooms the page when a field under 16px gets focus */
@media (max-width: 819px) {
  html.hx-mobile input, html.hx-mobile select, html.hx-mobile textarea { font-size: 16px !important; }
  html.hx-mobile button, html.hx-mobile .hx-tab { min-height: 44px; }
  html.hx-mobile .hx-tab span { font-size: 11px; }
  html.hx-mobile .hx-list { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}
/* Cost Lab page (full) on a phone */
html.hx-mobile body.costlab, html.hx-mobile .wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
/* landscape phones: keep the bottom bar slim */
@media (max-height: 460px) and (orientation: landscape) { html.hx-mobile .hexa-head { padding-top: calc(env(safe-area-inset-top, 0px) + .25rem) !important; padding-bottom: .25rem; } }
/* the psdeals sale history works only inside the Android / iOS app (its own psdeals page); the web build hides the tools */
html.hx-mobile:not(.hx-native) #histBtn, html.hx-mobile:not(.hx-native) [data-psd-show] { display: none !important; }
/* The Cost Lab pages (compact and full, also inside the app's Cost tab frame) are normal scrolling documents. The app-wide rule above
   locks html/body to the screen height with overflow hidden, which made them impossible to scroll. */
html.hx-mobile.hx-win.hx-cost, html.hx-mobile.hx-win.hx-cost body { height: auto !important; min-height: 100dvh; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
html.hx-mobile.hx-cost body { padding-top: env(safe-area-inset-top, 0px); }
/* iPhone: the tab bar never touches the home indicator, whatever the WebView reports */
html.hx-ios .w-\[400px\] > div > nav:not(.hx-rail) { padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); }
/* iOS gives a date field its own minimum width: it spilled over the field next to it (the add-account form). Fields fill their cell, and the pair stacks on narrow screens. */
html.hx-mobile input[type="datetime-local"], html.hx-mobile input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { html.hx-mobile .grid-cols-2:has(input[type="datetime-local"]) { grid-template-columns: 1fr; } }

/* keyboard open: no tab bar, no empty strip under it */
html.hx-mobile.hx-kb .w-\[400px\] > div > nav:not(.hx-rail) { display: none !important; }
html.hx-mobile.hx-kb, html.hx-mobile.hx-kb body { overflow: hidden; }