/* SEQUENS: shared phone and tablet layer. Loaded after each page's own styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas{max-width:100%;height:auto}
pre{overflow-x:auto;max-width:100%}
body{overflow-wrap:break-word}

/* Grid and flex children may shrink below their content, so nothing pushes the page sideways */
.app>*,.grid>*,.doors>*,.cards>*,.cols>*,main,.main{min-width:0}

/* Top bars: buttons and links keep to one line */
header a,header button,.rs-toggle,.btn,.nav a{white-space:nowrap}

/* Tablets and phones */
@media (max-width:900px){
  html,body{overflow-x:clip}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  input,select,textarea{font-size:16px}
}

/* Phones */
@media (max-width:640px){
  .wrap,.wrap-h{padding-left:1rem;padding-right:1rem}
  header .wrap-h{flex-wrap:wrap;row-gap:.6rem}
  h1{overflow-wrap:anywhere}
}

/* Touch screens: comfortable tap targets */
@media (pointer:coarse){
  button,.btn,[role="button"],select,input[type="submit"],input[type="button"],.rs-toggle{min-height:40px}
  header a,.nav a{min-height:40px;display:inline-flex;align-items:center}
}

/* Home page header on phones: compact, everything visible, nothing hidden off the edge */
@media (max-width:640px){
  header>.wrap{padding-top:.9rem!important;padding-bottom:.8rem!important;row-gap:.4rem!important}
  header>.wrap>nav{display:flex;flex-wrap:wrap;width:100%;gap:.2rem .9rem;align-items:center}
  header>.wrap>nav>*{white-space:nowrap}
  header>.wrap>nav a:not(.pill){font-size:.95rem;min-height:40px;padding:0 .1rem}
  header>.wrap>nav .pill{min-height:40px;padding:0 1rem;font-size:.95rem}
}