@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .topbar { height: 60px; padding: 0 14px; gap: 10px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 25px; height: 25px; }
  .user-controls { gap: 7px; min-width: 0; }
  .user-controls #currentUser { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-controls .subtle { padding: 7px 9px; }
  .login-screen { inset: 60px 0 0; }
  .login-card { padding: 24px 20px; }
  .app-shell { min-height: calc(100vh - 60px); }
  .sidebar { padding: 12px 14px; }
  .new-patient { padding: 11px; }
  .search { margin: 12px 0 9px; }
  .patient-list { gap: 6px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .patient-row { min-width: 180px; padding: 9px; }
  .content { padding: 24px 14px; }
  .empty-state { margin: 65px auto; }
  .patient-header { gap: 12px; }
  .patient-header h1 { font-size: 23px; }
  .patient-header .subtle { flex: 0 0 auto; padding: 8px 9px; }
  .tabs { margin: 25px 0 20px; gap: 18px; overflow-x: auto; }
  .panel { max-width: 100%; }
  .consent-card { padding: 14px; }
  .consent-copy { padding-right: 4px; }
  .toggle { flex: 0 0 auto; }
  .record-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px; gap: 10px; }
  .record-card > div:nth-child(2) { min-width: 0; }
  .timer { grid-column: 2; margin: 0; }
  .record-button { grid-column: 3; grid-row: 1 / 3; }
  .section-heading { align-items: flex-start; gap: 12px; margin-top: 26px; }
  .section-heading > div { min-width: 0; }
  .section-heading .secondary { flex: 0 0 auto; }
  .summary-heading { display: grid; grid-template-columns: 1fr; }
  .summary-heading .save-status { margin-top: 4px; }
  textarea { font-size: 16px; }
  .actions { flex-wrap: wrap; }
  .actions button { min-height: 42px; }
  .actions .primary { flex: 1 1 220px; }
  .history-item header { align-items: flex-start; gap: 10px; flex-direction: column; }
  dialog form { padding: 20px 16px; }
}

@media (max-width: 420px) {
  .section-heading { display: grid; grid-template-columns: 1fr; }
  .section-heading .secondary { width: 100%; }
  .patient-header { align-items: flex-start; }
  .record-card p { line-height: 1.35; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .actions button { width: 100%; }
}