@media (max-width: 1180px) {
  .app-header {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-inline: 28px;
  }

  .account-strip {
    order: 2;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .nav-row {
    flex: 1 1 520px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspect-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 900px) {
  .users-table .user-email,
  .users-table .user-login { display: none; }
}

@media (max-width: 600px) {
  /* A table of seven columns cannot fit a phone: show each user as a card with every field. */
  .users-table thead { display: none; }
  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td { display: block; width: 100%; }
  .users-table tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .users-table tbody tr:last-child { border-bottom: 0; }
  .users-table td { padding: 2px 0; border: 0; }
  .users-table .user-email,
  .users-table .user-login,
  .users-table .user-department { display: block; color: var(--muted); font-size: 13px; }
  .users-table td.row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding-top: 8px; white-space: normal; }
}

@media (max-width: 920px) {
  .settings-page .settings-grid {
    grid-template-columns: 1fr;
  }

  /* The header wraps to several rows here; keeping it pinned would cover the page. */
  .app-header {
    position: static;
  }

  .admin-group li > .row-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 6px;
  }

  main {
    padding: 18px 24px;
  }

  .brand {
    min-width: 0;
  }

  .nav-row {
    flex-basis: 100%;
    margin-left: 0;
  }

  .tabs {
    max-width: calc(100vw - 110px);
  }

  .chart-grid,
  .work-grid,
  .inspect-layout {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list article {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .row-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .admin-group li {
    grid-template-columns: 1fr;
  }

  .row-actions strong {
    min-width: 0;
    text-align: left;
  }

  .criteria-row {
    grid-template-columns: minmax(0, 1fr);
  }


}

@media (max-width: 680px) {
  .app-header {
    gap: 10px;
    padding: 12px 16px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 17px;
  }

  .account-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tabs {
    max-width: calc(100vw - 74px);
    gap: 4px;
  }

  .tabs button {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .menu-button {
    width: 38px;
    min-height: 38px;
  }

  .tab-menu {
    position: fixed;
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 86px);
    overflow: auto;
  }

  main {
    padding: 14px 12px;
  }

  .panel,
  .stats article {
    border-radius: var(--radius);
  }

  .panel {
    padding: 16px;
    margin-bottom: 16px;
  }

  .chart-grid,
  .work-grid,
  .inspect-layout,
  .filter,
  .form-grid,
  .check-item,
  .inspection-filter {
    grid-template-columns: 1fr;
  }

  /* Give each criterion the full width so its wording is not cut. */
  .criterion-edit-row {
    grid-template-columns: 1fr;
  }

  .photo-viewer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Figures stay two to a row on a phone so the page is not a long column of single numbers. */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats,
  .chart-grid,
  .work-grid,
  .inspect-layout {
    gap: 12px;
    margin-bottom: 16px;
  }

  .stats article {
    padding: 14px;
  }

  .stats strong,
  .list strong {
    font-size: 20px;
  }

  .today-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .today-hero h2 {
    font-size: 20px;
  }

  .quick-actions,
  .form-actions,
  .split-actions,
  .pager {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  /* Phones: the count on its own line, then Previous, the page number, and Next. */
  .list-pager {
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-items: center;
  }

  .list-pager > span,
  .list-pager > label:first-of-type {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
  }

  .list-pager [data-pager-edge] {
    display: none;
  }

  .quick-actions > *,
  .form-actions > *,
  .pager > button,
  .button-link {
    flex: 1 1 auto;
  }

  .sub-tabs {
    padding-bottom: 2px;
  }

  .sub-tabs button {
    flex: 0 0 auto;
  }

  .inspection-zone,
  .inspection-location {
    padding: 12px;
  }

  .inspection-zone > header,
  .inspection-location > header {
    align-items: flex-start;
    flex-direction: column;
  }

  /* One location per row on a phone, so a long name reads on one or two lines. */
  .inspection-location-nav {
    grid-template-columns: 1fr;
  }

  .inspection-location-nav button {
    min-height: 44px;
  }



  .donut {
    width: min(220px, 100%);
  }

  dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  dialog form {
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 18px;
  }

  dialog header {
    position: sticky;
    top: -18px;
    z-index: 1;
    margin: -18px -18px 2px;
    padding: 14px 18px;
    background: var(--surface);
  }

  .mark-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mark-toolbar input {
    grid-column: 1 / -1;
  }

  .zone-location-picker [data-zone-location-options],
  .visit-location-picker [data-visit-location-options],
  .permission-picker [data-role-permissions] {
    grid-template-columns: 1fr;
  }

  .zone-location-option,
  .permission-option {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  button,
  .button-link,
  select,
  input,
  textarea {
    min-height: 38px;
    padding-inline: 10px;
  }

  .brand p {
    display: none;
  }

  .list article,
  .admin-group {
    padding: 12px;
  }

  .row-actions {
    justify-content: stretch;
  }

  .row-actions > button,
  .row-actions > .button-link {
    flex: 1 1 42%;
  }

  .auth-shell {
    padding: 12px;
  }

  .auth-card {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  /* Two people across on a phone. */
  .org-row {
    gap: 8px;
    padding: 10px;
  }

  .org-row .org-person {
    width: 132px;
    padding: 10px 6px;
  }

  .org-row .org-avatar {
    width: 52px;
    height: 52px;
  }
}