/* Phones and small tablets (round 3). Loaded last on every page. Rules: nothing sideways, nothing off screen, every control
   at least 44 px to tap, long text wraps, wide rows stack. Checked by npm run test:phone at 390, 360 and 768 px wide. */
html,body{max-width:100%}
img,video,canvas,svg{max-width:100%}
@media (max-width:820px){
  /* tap targets */
  button,[role=button],[role=tab],[role=menuitem],summary,select,textarea,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]){min-height:44px}
  .btn,.btn-sm,.btn-lg,.btn-filled,.btn-outlined,.btn-text,.btn-tonal,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{height:auto;min-height:44px}
  .btn-link{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
  .ib,.icon-btn,.icon-btn.sm{width:44px;height:44px;min-width:44px}
  a.btn,a.ib{display:inline-flex;align-items:center;justify-content:center}
  .nav a,.hm-nav a,.hm-quiet,.nav-ask,.acct,.tabs a,.tabs button,.seg button,.modes button,.menu a,.menu button,.pop a,.pop button{min-height:44px}
  .nav a,.nav-ask{min-width:44px}
  :root{--side:64px}
  .acct,.nav-ask,.nav a{min-width:44px}
  button,[role=tab],[role=menuitem],summary,a.btn,.ib,.seg button,.tabs a{min-width:44px}
  .sig-link{min-width:44px;justify-content:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  label:has(>input[type=checkbox]),label:has(>input[type=radio]),label.chk,label.check,label.opt{min-height:44px;display:inline-flex;align-items:center;gap:10px}
  .linkbtn,.btn-text{min-height:44px;display:inline-flex;align-items:center}
  .cons-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat{padding:12px 14px}
  /* fonts of 16 px stop the phone zooming in when a field is focused */
  input,select,textarea{font-size:16px}
  /* wrapping */
  h1,h2,h3,.title,.db-who h1{overflow-wrap:anywhere;min-width:0}
  .ph,.db-row,.row,.acts,.ph .acts,.hm-head,.hm-actions,.actions,.btn-row,.btns{flex-wrap:wrap}
  .acts,.hm-actions,.actions,.btn-row,.btns{margin-left:0;row-gap:8px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs > *{flex:none}
  table{max-width:100%}
  pre,code{overflow-wrap:anywhere;white-space:pre-wrap}
  /* dialogs fit the screen */
  .dialog,.modal,.sheet,.box,.dlg{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}
  .dialog input,.dialog select,.dialog textarea,.modal input,.modal select,.modal textarea{max-width:100%}
  /* page headings and action rows: wrap, never run off the edge */
  .ph{gap:12px}
  .ph .acts{flex:1 1 100%;flex-wrap:wrap;margin-left:0;justify-content:flex-start}
  .ph .acts .seg{flex:1 1 100%;max-width:100%;overflow-x:auto}
  .ph .acts .btn{flex:1 1 auto}
  a.crumb,.crumb{min-height:44px}
  .db-sub{flex-wrap:wrap;row-gap:0}
  .db-sub a,.grp-h a,.dp-crumbs a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
  .grp-h{flex-wrap:wrap}
  .grp-h a h2{overflow-wrap:anywhere}
  a{overflow-wrap:anywhere}
  .nav a,.hm-nav a{overflow-wrap:normal}
  .brand,.auth-brand,.hm-brand{min-height:44px;min-width:44px}
  .auth-brand,.foot a,.auth-foot a,footer a,.legal a{display:inline-flex;align-items:center;min-height:44px}
  .row{min-height:52px}
  .page,.main,.wrap,.hm-main{min-width:0;max-width:100%}

  /* the editor on a phone: one row for back, title and share; chips and menus scroll sideways; the toolbar folds into More */
  .ed{height:var(--wr-vh,100dvh)}
  .ed-top{flex-wrap:wrap;gap:0 4px;padding:4px 6px 2px 4px;min-height:0}
  .ed-logo{display:none}
  .ed-titlebox{display:contents}
  .ed-back{order:0}
  .ed-title{order:1;flex:1 1 0;min-width:0;height:44px;font-size:17px;margin-left:0}
  .ed-right{order:2;gap:2px}
  .ed-sub{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px;padding:0 2px 2px}
  .ed-sub::-webkit-scrollbar{display:none}
  .ed-sub > *{flex:none}
  .ed-save,.ed-chip{height:44px;min-height:44px}
  .ed-right .btn .lbl,.ed-presence .pr-label{display:none}
  .ed-right .btn{padding:0;width:44px;min-width:44px}
  .ed-me{width:44px;height:44px;margin-left:0}
  .ed-presence{display:none}
  .ed-menubar{height:44px;padding:0 4px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .ed-menubar::-webkit-scrollbar{display:none}
  .mb{height:44px;min-width:44px;flex:none;padding:0 12px}
  .ed-toolbar-wrap{padding:2px 6px 6px}
  .ed-toolbar{height:52px;padding:0 4px}
  .tb,.tb-select,.tb-mode,.tb-dd{min-width:44px;min-height:44px;width:44px;height:44px}
  .tb-select{width:auto;padding:0 6px 0 10px}
  .tb-size input{min-height:44px;width:44px}
  .ed-outline-btn,.ed-wc{min-width:44px;min-height:44px}
}
@media (max-width:520px){
  .tb-mode{width:44px;padding:0;justify-content:center}.tb-mode span:not(.ms){display:none}

  /* settings and forms */
  .url-row,.tadd,.section-f,.trow,.row-sw,.field .url-row{flex-wrap:wrap;row-gap:8px}
  .url-row > .sel,.url-row > .inp,.tadd > .inp,.url-row > input,.url-row > select{flex:1 1 180px;min-width:0;max-width:100%}
  .url-row > .btn,.tadd > .btn{flex:1 1 auto}
  .section-f .btn{margin-left:auto}
  .sel,.inp,select,input[type=text],input[type=email],input[type=number],input[type=search],textarea{max-width:100%;min-width:0}
  .form-grid,.facts{grid-template-columns:minmax(0,1fr)}
  .trow .t,.row .t{min-width:0}
  /* the replay's controls wrap: nothing past the edge of the panel */
  .iwp-rp-transport,.db-view[data-view=replay] .iwp-rp-transport{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:center;row-gap:4px;max-width:100%}
  .iwp-rp-bar,.db-view[data-view=replay] .iwp-rp-bar{min-width:0;max-width:100%;justify-content:center}
  .iwp-rp-time{flex:1 1 100%;min-width:0}
  .iwp-rp-opts{flex-wrap:wrap;max-width:100%}
  .iwp-rp-top{min-width:0;max-width:100%}
  .trow:has(input[type=number]) .t{flex-basis:100%}   /* (a name above its number box, not cut to two letters beside it) */
  .section,.lcard,.card{max-width:100%;min-width:0}
}