/* Keep the compact account layout usable on small screens. */
@media (max-width: 760px) {
  .container { width: calc(100% - 32px); }
  .workspace { grid-template-columns: 1fr; gap: 24px; padding-top: 16px; align-content: start; }
  .sidebar { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .sidebar .eyebrow, .member-card { display: none; }
  .sidebar nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 4px; }
  .sidebar nav a { flex-shrink: 0; white-space: nowrap; }
  .sidebar .danger-link { margin-top: 0; }
  .auth-page { width: min(480px, calc(100% - 32px)); }
}
@media (max-width: 640px) {
  .topnav { flex-wrap: wrap; gap: 8px 16px; }
  .nav-links { flex-wrap: wrap; gap: 8px 14px; }
  .welcome-page { margin: 36px auto 64px; }
  .auth-page { padding-block: 24px; }
  .auth-card { padding: 20px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select { font-size: 16px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .account-details { grid-template-columns: 1fr; gap: 4px; }
  .account-details dd { margin-bottom: 10px; }
}
@media (pointer: coarse) {
  button, .button, .button.small, .nav-links > a, .sidebar nav a { min-height: 44px; }
  .nav-links > a, .sidebar nav a { display: inline-flex; align-items: center; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; font-size: 16px; }
  textarea { font-size: 16px; }
  .checkbox-field label { display: inline-flex; align-items: center; min-height: 44px; }
}