/* The phone layout (iPhone home-screen web app and any narrow screen). Loaded after the page's own styles. */
.tap{display:none}
@media (display-mode: standalone){
  header{padding-top:calc(8px + env(safe-area-inset-top))}
}
@media (max-width: 820px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:15px}
  /* 16px inputs stop iOS zooming the page when a box is tapped */
  input,select,textarea{font-size:16px;padding:9px 10px}
  input[type=checkbox]{width:22px;height:22px}
  button{min-height:40px;padding:8px 14px}
  button.small{min-height:34px}
  button.small:not(.primary):not(.seg){padding:6px 8px}
  .chip{padding:8px 2px;font-size:14px}
  .chips{gap:16px}

  /* header: logo, then the tabs as a swipeable row */
  header{padding:6px 12px 0;gap:6px}
  header .logo{height:34px}
  nav{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 8px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:none;white-space:nowrap;padding:12px 10px 9px;font-size:13px}
  .bar{padding:6px 12px;gap:6px}
  .bar .title{display:none}
  .who{margin-left:0;width:100%;gap:6px}
  .bar button{padding:5px 8px;font-size:12px;min-height:34px;white-space:nowrap}
  .who{flex-wrap:wrap;row-gap:4px}
  .who #who{flex:1 1 100%;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg{display:none}
  .bar a{font-size:13px;padding:6px 4px}
  .banner{padding:8px 12px;font-size:12.5px}
  main{padding:10px 12px calc(40px + env(safe-area-inset-bottom));overflow-x:auto}

  /* search and filters */
  .toolbar{gap:6px}
  .toolbar .search{flex:1 1 100%;max-width:none}
  .toolbar select,.toolbar .multi{flex:1 1 calc(50% - 6px);width:auto;max-width:none;min-width:0}
  .toolbar .multi-btn{width:100%;min-width:0}
  .multi-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:60vh;overflow:auto;min-width:0}
  .toolbar label{flex:1 1 100%}

  /* the lists become cards: the first column is the title, then only the useful ones */
  .tablewrap.cards{border:none;background:none;overflow:visible}
  table.cardify,table.cardify tbody{display:block}
  table.cardify thead{display:none}
  table.cardify tr{display:block;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 8px;padding:9px 12px}
  table.cardify tr.inactive{opacity:.7}
  table.cardify td{display:none;border:none;padding:1px 0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  table.cardify td.m{display:block;color:var(--muted);font-size:13px}
  table.cardify td.m1{color:var(--heading);font-size:16px;font-weight:700}
  table.cardify td.m2{color:var(--text)}
  table.cardify td.m:empty{display:none}
  table.cardify td.num{text-align:left}

  /* a record opens full screen */
  #drawer{width:100%;border-left:none}
  #drawer .head{padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
  #drawer .head .grab{display:none}
  #drawer .body{padding:8px 12px 24px}
  #drawer .foot{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  #drawer .foot button{flex:1}
  .grid{grid-template-columns:1fr}
  fieldset{padding:8px 10px 10px;margin:10px 0;min-width:0}
  .grid > *,.field,.people > *{min-width:0}
  .prod-slot{overflow-x:auto;max-width:100%}
  .form-row{flex-wrap:wrap}
  .form-row > input,.form-row > select{flex:1 1 100%}
  .timeline{grid-template-columns:minmax(0,1fr)}
  .tl-entry{font-size:14px;min-width:0}
  .tl-title,.tl-details,.tl-head,.links li{overflow-wrap:anywhere}
  .tl-actions{flex:1 1 100%;margin-left:0}
  table.mini{display:block;overflow-x:auto}
  /* tap to call / write */
  .tap{display:inline-block;margin:4px 12px 0 0;font-size:14px;font-weight:600}
  /* the Slide Notes editor */
  .rte-bar{gap:2px}
  .rte-btn{min-width:40px;padding:6px 8px}
  .rte-body{min-height:140px;font-size:16px}
  #login form{width:100%;padding:22px}
  dialog{max-width:calc(100% - 24px)}
}