/* Web/tablet additions — loaded after styles.css, additive only.
   The shared stylesheet is already fluid; this adapts hit targets and
   density for touch, and tightens narrow-portrait layout. */

html { -webkit-text-size-adjust: 100%; }
body { touch-action: manipulation; overscroll-behavior-y: none; }

/* comfortable touch targets on coarse pointers (finger/stylus) */
@media (pointer: coarse) {
  .hbtn, .xbtn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .chip { min-height: 38px; }
  select, input[type=search], input[type=text], input[type=password] { min-height: 40px; font-size: 14px; }
  input[type=range] { height: 32px; }
  .toggle input { width: 20px; height: 20px; }
  th, td { padding-top: 9px; padding-bottom: 9px; }
  ::-webkit-scrollbar { width: 0; height: 0; }  /* touch scrolling, no bars */
  .tblwrap { -webkit-overflow-scrolling: touch; }
}

/* portrait tablet: stack the stat tiles and give the modals the full width */
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .app { padding: 12px 12px 40px; }
  .modal { width: min(94vw, 560px) !important; max-height: 88vh; overflow-y: auto; }
  #heat { height: 380px; }
  .hdr { flex-wrap: wrap; row-gap: 8px; }
}

/* installed-PWA safe areas (gesture nav bars) */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}