/* Phones (390 px and up to 640 px). Loaded last on every page; everything is inside a max-width query, so desktop is untouched.
   - Text floor: every font-size below 14px in the other stylesheets is written max(<size>, var(--fs-floor,0px)); the floor is 0 on desktop, 14px here.
   - Tap targets: buttons, selects, inputs, tab bars and nav links are at least 40px tall.
   - Nothing may push the page sideways: wide tables scroll inside their own box, bars scroll horizontally, forms stack. */
@media (max-width:640px){
  :root{--fs-floor:14px;}

  /* ---- tap targets ---- */
  button, .btn, select, summary,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]){min-height:40px;}
  .btn, .btn-sm, .btn-ghost{display:inline-flex; align-items:center; justify-content:center; min-height:40px;}
  .btn-ghost{padding:8px 10px;}
  summary{padding-block:9px;}
  input[type=checkbox], input[type=radio]{width:22px; height:22px;}
  .checklist-item, .tel-check, label.tel-check{min-height:44px; align-items:center;}
  .checklist-item input, .tel-check input{margin-top:0;}
  .modal-close{min-width:40px; min-height:40px; font-size:1.75rem;}
  .skiplink:focus{min-height:40px;}

  /* the signed-in bar: name on its own line, links as a wrapping row of 40px targets */
  .userbar{justify-content:flex-start; gap:2px 4px; font-size:max(0.8125rem,var(--fs-floor,0px));}
  .userbar > span:first-child{flex:1 0 100%; overflow-wrap:anywhere;}
  .userbar a, .userbar button{display:inline-flex; align-items:center; min-height:40px; padding:0 10px; font-size:max(0.8125rem,var(--fs-floor,0px));}
  .back-home{min-height:40px; padding:8px 4px 8px 0;}
  .link-grid a{min-height:40px; display:flex; align-items:center;}

  /* softphone dial pad: full-width number field, big keys */
  .phone-dial input{flex-basis:100%;}
  .phone-pad{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .phone-pad .btn{min-height:48px;}

  /* tab bars and pill bars scroll sideways inside themselves */
  .portal-switch, .tel-tabs, .pr-tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * clamp(16px,4vw,40px)); margin-right:calc(-1 * clamp(16px,4vw,40px));
    padding-left:clamp(16px,4vw,40px); padding-right:clamp(16px,4vw,40px);}
  .tel-tabs{padding-bottom:2px;}
  .portal-switch::-webkit-scrollbar, .tel-tabs::-webkit-scrollbar, .pr-tabs::-webkit-scrollbar{display:none;}
  .portal-switch button, .tel-tabs button, .pr-tabs button, .pr-filter button{flex:0 0 auto; white-space:nowrap; min-height:44px;}
  .tel-tabs button{padding:8px 16px;}
  .pr-filter{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
  .pr-filter::-webkit-scrollbar{display:none;}

  /* forms: one column, inputs 16px so iOS does not zoom */
  input, select, textarea{font-size:max(1rem,var(--fs-floor,0px));}
  .field-row, .mini-row, .tel-grid2, .tel-grid3, .admin-invite{grid-template-columns:minmax(0,1fr);}
  input, select, textarea{max-width:100%;}
  .tel-rank{width:6em !important;}
}
@media (max-width:640px){
  small{font-size:max(0.8333em,var(--fs-floor,0px));}
  label:has(> input[type=checkbox]), label:has(> input[type=radio]){display:flex; align-items:center; gap:10px; min-height:44px;}
}
@media (max-width:640px){
  td > input[type=checkbox]{width:40px; height:40px;}
}
@media (max-width:640px){
  /* wide editing tables scroll inside their own box */
  .ra-table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .ra-table input[type=text], .ra-table select{min-width:6rem;}
  .ra-table input[type=number]{min-width:3.5rem;}
  textarea{min-height:40px;}
}
@media (max-width:640px){ .btn-sm{min-width:40px;} }
@media (max-width:640px){
  /* compliance simulation: voice pickers as "label + select | Test" rows */
  #csim-voice-picker{display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px !important;}
  #csim-voice-picker > span{grid-column:1 / -1; white-space:normal !important;}
  #csim-voice-picker label{flex-wrap:wrap; min-width:0;}
  #csim-voice-picker select{flex:1 1 8rem; min-width:0; max-width:100%; padding:6px 8px !important;}
}