/* Phones. The menu moves to a bar along the bottom, within thumb reach; the account menu opens from the top bar;
   everything tappable is at least 44px tall; inputs use 16px text so the phone doesn't zoom in; and only wide tables
   scroll sideways, inside their own box. Shared by the prototype and the staff app (prototype/mobile.css is a copy). */
.me-btn{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .app{grid-template-rows:auto 1fr}
  aside.side{position:sticky;top:0;z-index:25;overflow:visible;background:var(--surface);padding:8px max(12px,env(safe-area-inset-left,0px)) 8px max(12px,env(safe-area-inset-right,0px));
    padding-top:max(8px,env(safe-area-inset-top,0px));box-shadow:0 1px 0 var(--line)}
  .side-brand{gap:8px}
  .side-brand select{flex:1;max-width:none}
  .side-brand .pill{display:none}
  .me-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:50%;padding:0;font-weight:700;font-size:13px;
    background:var(--accent-soft);color:var(--accent);border:0}
  /* The account menu: who's signed in, appearance, sign out */
  .side-foot{display:none;position:absolute;top:100%;right:8px;left:8px;margin:0;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 12px 32px rgba(16,24,40,.18);flex-direction:column;gap:8px}
  aside.side.me-open .side-foot{display:flex}
  .side-foot select{width:100%}
  .side-foot .appearance-pop{position:static;box-shadow:none;border:0;padding:4px 0 0}
  /* The bottom bar */
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:25;flex-direction:row;gap:0;margin:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    background:var(--surface);border-top:1px solid var(--line);padding:4px max(4px,env(safe-area-inset-left,0px)) calc(4px + env(safe-area-inset-bottom,0px))}
  .nav::-webkit-scrollbar{display:none}
  .nav button,.nav a{position:relative;flex:1 0 68px;flex-direction:column;justify-content:center;gap:2px;min-height:54px;padding:4px 6px;font-size:11px;line-height:1.1;
    text-align:center;white-space:nowrap;border-radius:10px}
  .nav button svg,.nav a svg{width:22px;height:22px}
  .nav .count{position:absolute;top:2px;left:calc(50% + 6px);margin:0;font-size:10px;padding:0 5px}
  .nav button[aria-current=page],.nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
  .nav button[aria-current=page] .count{background:var(--accent);color:var(--accent-ink)}
  /* More than four screens: the rest open from "More" as a sheet above the bar, so the bar never scrolls sideways */
  .nav .nav-more{display:flex}
  .nav.has-more .nav-extra{display:none}
  aside.side.more-open .nav.has-more{flex-wrap:wrap;border-radius:16px 16px 0 0;box-shadow:0 -12px 32px rgba(16,24,40,.18)}
  aside.side.more-open .nav.has-more .nav-extra{display:flex;flex:1 0 25%;max-width:25%;order:-1}
  aside.side.more-open .nav .nav-more{background:var(--accent-soft);color:var(--accent)}
  .nav .nav-break{display:none}
  aside.side.more-open .nav .nav-break{display:block;order:-1;flex-basis:100%;height:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
  /* The page */
  .wrap{padding-top:12px;gap:12px}
  header.top{gap:10px}
  .brand h1{font-size:19px}
  .controls{width:100%}
  .gsearch{flex:1 1 100%}
  .gsearch input{width:100%}
  .gres{left:0;right:0;width:auto}
  .controls>button{flex:1}
  .sechead{flex-wrap:wrap;gap:8px}
  .actions{flex-wrap:wrap}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px)}
  .callbar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  table{font-size:13px}
}
/* Fingers, not a mouse */
@media (pointer:coarse){
  button,select,input[type=text],input[type=search],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=number],a.btnlike{min-height:44px}
  .linkbtn{min-height:0;padding:8px 2px}
  input,select,textarea{font-size:16px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}