/* Phone hygiene shared by every SPIDER site: nothing sideways, readable text, finger-sized controls, tables and code that scroll inside themselves.
   Loaded as ../portfolio/css/mobile.css from the other sites. It changes nothing on a wide screen except the safe defaults. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { overflow-wrap: break-word; overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
pre, textarea { max-width: 100%; }
pre { overflow: auto; -webkit-overflow-scrolling: touch; }
.table-wrap, .scroll, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }
@media (max-width: 760px) {
  /* a form field under 16px makes iPhones zoom in */
  input, select, textarea { font-size: 16px !important; }
  button:not(.ft-set-dot), [role="button"], .btn, .g-btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea { min-height: 44px; }
  button, [role="button"], .btn, .g-btn { padding-inline: max(14px, 1em); }
  /* long rows of tabs and chips slide sideways under the thumb, with a hint of the next one */
  [role="tablist"], .tabs, .tabbar, .tab-bar { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [role="tablist"]::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar { display: none; }
  [role="tab"], .tab { scroll-snap-align: start; flex: none; }
  /* wide tables and grids fit inside their box */
  table { display: block; overflow-x: auto; }
  .wrap, main { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  h1 { overflow-wrap: anywhere; }
}
@media (hover: none) { a, button { -webkit-tap-highlight-color: rgba(255, 255, 255, .12); } }
/* the notch and the home bar */
.nav, header.nav, .bar { padding-top: env(safe-area-inset-top); }
/* hub pages: hero grids and the top bar may never be wider than the screen */
@media (max-width: 760px) {
  .lux-hero { grid-template-columns: minmax(0, 1fr) !important; max-width: 100%; }
  .lux-hero > *, .lux-text { min-width: 0; }
  .standalone-bar { flex-wrap: wrap; row-gap: 4px; }
  .standalone-bar .local-nav { overflow-x: auto; max-width: 100%; white-space: nowrap; scrollbar-width: none; }
  .lnav-links { min-width: 0; }
}
@media (max-width: 760px) {
  .top-header, .top-header .brand, .top-header .brand > div { min-width: 0; max-width: 100%; }
  .tagline { white-space: normal !important; }
}
/* robotic-parking landing */
@media (max-width: 760px) {
  .lnav-in { height: auto; min-height: 58px; flex-wrap: wrap; gap: 6px 12px; padding-block: 6px; }
  .lnav-links { flex: 1 1 100%; order: 3; }
  .brand-mark { white-space: normal; min-width: 0; }
  .hero-cta { flex-wrap: wrap; } .lbtn { max-width: 100%; white-space: normal; }
  .hero-bg { max-width: 100%; }
}
/* wellness fitness: routine rows wrap instead of pushing the page wider */
@media (max-width: 760px) {
  .ft-routine-item { flex-wrap: wrap; }
  .ft-routine-item .nm { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 760px) {
  .v3-poster .lbtn { width: auto; max-width: calc(100% - 24px); white-space: normal; }
  .v3-tools { left: 8px; right: 8px; width: auto; flex-wrap: wrap; }
  .v3-tools .lbtn { white-space: normal; }
}
@media (max-width: 760px) { header.hero { overflow: hidden; } .hero-bg { max-width: 100vw; } }
@media (max-width: 760px) { .ask-form, .ask-fields, .ask-fields .f { min-width: 0; max-width: 100%; } .ask-fields input, .ask-fields select, .ask-fields textarea { width: 100%; max-width: 100%; box-sizing: border-box; } }
@media (max-width: 760px) { .ask-form { grid-template-columns: minmax(0, 1fr); } }