/* Shared phone layout, loaded after each page's component styles. */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 0; }
  main, section, form, fieldset, .card, .admin-card, .modal-card { min-width: 0; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  button, a, label { -webkit-tap-highlight-color: transparent; }
  button, input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  button { overflow-wrap: anywhere; }
  input[type=checkbox], input[type=radio] { flex-shrink: 0; }
  h1, h2, h3, p, .name, .meeting-detail, .receipt-person { overflow-wrap: anywhere; }
  .topbar { height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); }
  .topbar>div { min-width: 0; max-width: 100%; flex-wrap: wrap; gap: 8px; }
  .topbar strong { min-width: 0; margin-right: 0; font-size: 20px; overflow-wrap: anywhere; }
  .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
  .topbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .pagehead, .history-toolbar, .monthbar, .declaration-controls, .modal-actions, .dialog-actions { min-width: 0; flex-wrap: wrap; }
  .monthbar { align-items: stretch; }
  .monthbar label, .monthbar select, .monthbar input { min-width: 0; max-width: 100%; width: 100%; }
  .monthbar label { flex: 1 1 180px; }
  .modal-actions button, .dialog-actions button { flex: 1 1 120px; white-space: normal; }
  .data-table, .admin-table { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .data-table th, .admin-table th { white-space: normal; }
  .admin-wrap { padding: 14px; }
  .modal { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); height: var(--app-viewport-height,100dvh); bottom: auto; }
  .modal-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
  .modal-head { gap: 10px; }
  .modal-head h3 { min-width: 0; }
  .login-cover { height: var(--app-viewport-height,100dvh); overflow-y: auto; align-items: flex-start; }
  .login-cover-card { flex-shrink: 0; margin: auto; }
  .login-cover-form { padding: 22px 18px; }

  /* Four equally accessible top-level mobile destinations. */
  .mobile-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: visible; }
  .mobile-tabs:has(#mobileAgendaTab[hidden]) { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mobile-tabs button { min-width: 0; white-space: normal; }
  .mobile-brand { min-width: 0; }
  .mobile-brand small { white-space: normal; overflow-wrap: anywhere; }
  .mobile-more-links a, .mobile-more-links button { min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
  .entry-head { flex-wrap: wrap; }
  .entry-actions button { min-height: 44px; }
  .archive-category .entry-head button { min-height: 44px; }

  .meetings-page { padding: 14px max(12px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .meeting-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .meeting-tabs button { min-width: 0; min-height: 48px; padding: 10px 8px; white-space: normal; hyphens: auto; }
  .meeting-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; }
  .meeting-toolbar>label { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .meeting-toolbar select { width: 100%; max-width: 100%; }
  .meeting-toolbar button { min-width: 0; white-space: normal; }
  .meeting-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
  .meeting-actions:empty { display: none; }
  .meeting-actions button, .meeting-actions a { min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .meeting-actions a { display: flex; align-items: center; }
  .meeting-filters { display: grid; grid-template-columns: minmax(0,1fr); }
  .meeting-filters label, .meeting-filters input, .meeting-filters select { min-width: 0; width: 100%; }
  .meeting-title { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
  .meeting-table { width: 100%; table-layout: fixed; }
  .meeting-table td { min-width: 0; overflow-wrap: anywhere; }
  .meeting-table select.meeting-status { width: 100%; min-height: 44px; font-size: 16px; }
  .meeting-row-actions button { min-width: 44px; min-height: 44px; }
  .meeting-counts, .meeting-subtitle, .meeting-source { overflow-wrap: anywhere; }
  .meeting-dialog[open], .agenda-dialog[open], .messenger-dialog[open], .user-dialog[open] {
    position: fixed; inset: 0; margin: 0; box-sizing: border-box; width: 100%; max-width: 100%;
    height: var(--app-viewport-height,100dvh); max-height: var(--app-viewport-height,100dvh);
    border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .meeting-dialog, .messenger-dialog { padding: max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  .meeting-dialog form { padding: 0; max-height: none; overflow: visible; }
  .meeting-dialog form>button[type=submit] { width: 100%; margin-top: 14px; }
  .meeting-dialog .meeting-check { min-height: 44px; align-items: center; overflow-wrap: anywhere; }
  .meeting-check input { width: 22px; height: 22px; }
  .meeting-members { max-height: none; overflow: visible; }
  .agenda-dialog-content { padding: max(16px,env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); }
  .agenda-dialog form { max-height: none; overflow: visible; }
  .agenda-toolbar .agenda-field { min-width: 0; flex-basis: 130px; }
  .agenda-actions { flex-wrap: wrap; }
  .agenda-actions button { flex: 1 1 120px; }
  .agenda-visibility { min-width: 0; }
  .agenda-person { overflow-wrap: anywhere; }
  .agenda-field input, .agenda-field select, .agenda-field textarea, .agenda-visibility input[type=search] { font-size: 16px; }
  .agenda-chips { min-width: 0; }
  .agenda-chip { max-width: 100%; white-space: normal; }

  .messenger-shell, .mobile-view .messenger-shell { height: var(--messenger-available-height,calc(var(--app-viewport-height,100dvh) - 150px)); min-height: 0; }
  .messenger-sidebar, .messenger-chat { min-height: 0; }
  .messenger-toolbar { padding: 10px; }
  .messenger-toolbar button { white-space: normal; }
  .chat-head { flex-shrink: 0; gap: 8px; }
  .chat-head>div { min-width: 0; max-width: 100%; }
  .chat-head h2 { overflow-wrap: anywhere; }
  .chat-compose { flex-shrink: 0; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); }
  .compose-row { gap: 6px; grid-template-columns: 44px minmax(0,1fr) 64px; }
  .compose-row textarea { font-size: 16px; min-height: 44px; }
  .compose-row button { padding: 8px 4px; }
  .message-list { padding: 10px; }
  .message-bubble { min-width: 0; max-width: 92%; }
  .message-actions { display: flex; flex-wrap: wrap; gap: 4px; }
  .message-actions button { min-height: 36px; padding: 6px; font-size: 12px; }
  .message-receipt { min-height: 36px; padding: 6px 4px; }
  .message-stamp { max-width: 100%; }
  .messenger-dialog input, .messenger-dialog select { min-width: 0; max-width: 100%; }
}
@media (max-width: 420px) {
  .agenda-preview-weeks { grid-template-columns: minmax(0,1fr); }
  .contract-grid, .annual-summary-grid, .certificate-grid { grid-template-columns: minmax(0,1fr); }
  .login-cover-brand { padding: 16px; }
  .login-logo-wrap { width: min(200px,100%); }
}
@media (max-height: 500px) and (max-width: 950px) {
  .modal-card, .agenda-dialog, .meeting-dialog, .messenger-dialog { max-height: var(--app-viewport-height,100dvh); overflow-y: auto; }
}
@media (max-width: 768px) {
  .meeting-heading { font-size: 24px; line-height: 1.25; hyphens: auto; }
  .meetings-page h2, .meeting-dialog h2 { font-size: 21px; line-height: 1.3; hyphens: auto; }
  .meeting-dialog .meeting-check, .messenger-dialog label { flex-direction: row; gap: 10px; text-align: left; }
  .meeting-dialog .meeting-check input { flex: 0 0 22px; }
}