/* Phone and tablet rules shared by every page (added 2026-10-25). Loaded last so it wins. */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
body { overflow-x: hidden; }
.em-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* A grid or flex item grows to fit a wide table unless told it may shrink; then the table scrolls inside its card
   instead of making the whole page wider than the phone (Jeff, 2026-10-30). */
.grid > *, .stack > *, .cols > *, .kpis > *, .two > *, .three > *, .board > *, .layout > *, .queues > *, .row > *, main > *, .page > * { min-width: 0; }
.card, .table-wrap, .em-tablewrap, .box { max-width: 100%; min-width: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.em-menubtn { display: none; }

@media (max-width: 900px) {
  .topbar { position: sticky; flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 14px; gap: 8px; }
  .em-menubtn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; order: 5;
    width: 44px; height: 44px; border: 1px solid #333; background: #1d1d1d; color: #fff; border-radius: 12px; font-size: 22px; cursor: pointer; }
  .who { order: 4; }
  .topnav { display: none; order: 9; flex: 0 0 100%; flex-direction: column; gap: 2px; padding: 6px 0 10px; }
  .topbar.em-open .topnav { display: flex; }
  .topnav a { padding: 13px 14px; font-size: 16px; border-radius: 10px; }
  .page, main { padding-left: 14px; padding-right: 14px; }
  .cols, .cols.wide, .two, .three, .board, .layout, .queues { grid-template-columns: 1fr !important; }
  .page-head { align-items: flex-start; }
  .card { padding: 16px; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; }
  /* 16px inputs stop iPhones zooming in on focus; 44px targets are easy to hit with a thumb */
  input, select, textarea, .field input, .field select, .field textarea { font-size: 16px !important; min-height: 44px; }
  .btn, .seg button, .groupbar button, .suggest button { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .btn.small { min-height: 40px; }
  .page-head .row, .page-head .inline { width: 100%; }
  .page-head .btn { flex: 1 1 auto; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi .value { font-size: 26px; }
  table.t { font-size: 13.5px; }
  table.t th, table.t td { padding: 8px 8px; }
  .sticky { position: sticky; bottom: 0; padding: 12px 14px; }
  .sticky .btn { flex: 1 1 auto; }
  .dlg { width: calc(100vw - 16px); max-height: calc(100vh - 24px); padding: 16px; }
  .trow, .prow { flex-wrap: wrap; }
  .seg { max-width: 100%; overflow-x: auto; }
  .em-ticker { font-size: 13px; }
}
@media (max-width: 380px) { .kpis { grid-template-columns: 1fr; } }