/* Phone layout comes after the component styles so controls retain usable sizes. */
.mobile-menu-button { display: none; }
.password-control { position: relative; display: flex; align-items: stretch; }
.password-control input { width: 100%; padding-right: 68px; }
.password-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; min-width: 60px; border: 0; background: transparent; font-size: 12px; text-decoration: underline; }
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 980px) {
  :root { font-size: 14px; }
  .app-shell, .workspace, #main { min-width: 0; width: 100%; }
  .app-shell { display: block; }
  .sidebar { position: sticky; top: 0; height: auto; max-height: 100dvh; overflow-y: auto; width: 100%; padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0; z-index: 70; }
  .sidebar .brand { font-size: 21px; padding: 0; width: fit-content; }
  .sidebar .monogram { font-size: 43px; }
  .mobile-menu-button { display: inline-flex; align-items: center; gap: 16px; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); background: white; font-size: 13px; }
  .sidebar-rule, .sidebar-caption { display: none; }
  .sidebar #navigation, .sidebar #sidebar-tools { display: none; }
  .sidebar.menu-open #navigation { display: block; grid-column: 1/-1; width: 100%; overflow: visible; margin: 16px 0 0; padding: 0; }
  .sidebar.menu-open #sidebar-tools { display: block; position: static; grid-column: 1/-1; margin: 0; padding-top: 12px; }
  .sidebar .nav-item { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 0 8px; position: relative; align-items: start; }
  .sidebar .nav-link { width: 100%; min-height: 48px; margin: 0; padding: 12px; font-size: 15px; white-space: normal; }
  .sidebar .nav-info { display: contents; }
  .sidebar .nav-info>summary { width: 44px; height: 44px; margin: 2px 0; font-size: 14px; }
  .sidebar .nav-info>p { position: static; grid-column: 1/-1; width: auto; min-width: 0; margin: 4px 0 12px; padding: 14px; font-size: 13px; line-height: 1.65; box-shadow: none; }
  .sidebar .nav-info:not([open])>p { display: none; }
  .sidebar .help-button { display: flex; min-height: 48px; font-size: 13px; }
  .sidebar .archive-person, .sidebar .local-note { display: none; }
  .sidebar select { min-height: 48px; font-size: 16px; }
  .topbar { padding: 16px 18px; gap: 12px; }
  .breadcrumb { font-size: 12px; white-space: normal; gap: 10px; }
  .topbar-actions { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  #global-search { width: 100%; border: 1px solid var(--line); padding-left: 10px; }
  #search { width: 100%; min-width: 0; min-height: 46px; font-size: 16px; }
  #global-search>button { display: block; flex: 0 0 44px; width: 44px; height: 46px; border: 0; border-left: 1px solid var(--line); font-size: 17px; }
  .topbar .button, .topbar .sign-out-link { min-height: 44px; font-size: 13px; padding: 10px 16px; }
  .topbar .sign-out-link { display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--line); }
  #main { padding: 28px 18px 40px; }
  .page-heading { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .page-heading h1 { font-size: clamp(34px,9vw,42px); }
  .page-heading p, .hero p { font-size: 14px; line-height: 1.7; }
  .page-heading .heading-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .page-heading .text-button { font-size: 13px; }
  .eyebrow { font-size: 10px; }
  .hero { padding: 28px 22px; }
  .hero h2 { font-size: clamp(38px,10vw,52px); }
  .hero-actions { flex-wrap: wrap; gap: 12px; }
  .button, .button.small, .text-button, .hero-actions .text-button { min-height: 44px; font-size: 13px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat { padding: 18px 12px; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; min-width: 0; }
  .stat-number { font-size: 38px; }
  .stat-label { font-size: 12px; }
  .stat-label small { font-size: 11px; line-height: 1.5; }
  .stat-arrow { display: none; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card:last-child { display: block; }
  .collection-card p, .row-copy p, .activity li, .activity small, .table-note, .record-subtitle, .site-summary { font-size: 12px; line-height: 1.65; }
  .section-heading { flex-wrap: wrap; gap: 8px; }
  .section-heading h2 { font-size: 29px; }
  .toolbar, .tabs { flex-wrap: wrap; gap: 8px 16px; }
  .filter-tab { min-height: 44px; font-size: 13px; }
  .select-filter { flex-wrap: wrap; gap: 8px; font-size: 13px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea, .select-filter select, .geography-select select, .year-sort-control select, .readership-controls input, .readership-controls select, .auth-form input { min-height: 48px; max-width: 100%; font-size: 16px; }
  #main input:not([type=checkbox]):not([type=radio]), #main select, #main textarea { font-size: 16px; min-height: 48px; }
  input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; }
  .field-row { grid-template-columns: 1fr; }
  .field, .field>label, .settings-panel>p { font-size: 13px; }
  .field small, .upload-zone p, .save-state, .form-error { font-size: 12px; }
  .archive-table { width: 100%; table-layout: fixed; }
  .archive-table .record-title { min-width: 0; font-size: 23px; overflow-wrap: anywhere; }
  .archive-table td, .archive-table th { overflow-wrap: anywhere; }
  .archive-table .badge, .visibility { font-size: 10px; white-space: normal; }
  .settings-panel, .source-card, .review-card, .analytics-card { min-width: 0; padding: 22px 18px; }
  .member-entry { flex-wrap: wrap; gap: 10px; }
  .member-entry>div { min-width: 0; overflow-wrap: anywhere; }
  .member-entry .text-button { min-height: 44px; }
  .profile-fact-editor-row { grid-template-columns: 1fr; }
  .notice, .source-card p, .review-note { font-size: 13px; overflow-wrap: anywhere; }
  .record-dialog, .help-dialog { width: calc(100% - 16px); max-width: none; max-height: calc(100dvh - 16px); margin: auto; overscroll-behavior: contain; }
  .dialog-header, .dialog-body { padding: 24px 18px; }
  .dialog-header { padding-right: 58px; }
  .close-button { width: 44px; height: 44px; top: 8px; right: 8px; }
  .dialog-tabs { padding: 0 18px; }
  .dialog-tabs button { min-height: 48px; font-size: 13px; }
  .dialog-footer { position: static; padding: 16px 18px max(16px,env(safe-area-inset-bottom)); }
  .dialog-footer>div { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .dialog-footer .button { flex: 1 1 auto; }
  .upload-zone input { width: 100%; }
  .readership-controls { flex-direction: column; align-items: stretch; }
  .readership-controls input { width: 100%; }
  .readership-country-row { min-height: 48px; font-size: 13px; }
  .readership-country-list { columns: auto; display: flex; flex-direction: column; max-height: 270px; overflow-y: auto; overflow-x: hidden; }
  .readership-country-row { flex-shrink: 0; width: 100%; }
  .readership-map { padding: 6px; }
  .readership-map svg { min-height: 160px; height: auto; }
  .readership-table { font-size: 12px; }
  .analytics-section-label p, .citation-highlight span, .profile-fact-card>p,
  .profile-bar-label, .local-record-stats span, .analytics-tail, .readership-metrics span,
  .readership-detail-head p, .readership-provenance, .readership-institution span,
  .readership-institution p, .readership-country-row small, .geography-source,
  .geography-selection, .readership-downloads-head p, .readership-download-more,
  .readership-download-row span, .readership-pagination>span { font-size: 12px; line-height: 1.65; }
  .profile-fact-card .text-button, .heading-links .text-button { font-size: 13px; min-height: 44px; }
  .readership-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .geography-heading, .year-chart-heading { align-items: stretch; }
  .geography-select, .year-sort-control { width: 100%; }
  .geography-select select, .year-sort-control select { width: 100%; max-width: 100%; }
  .mentions-frame-wrap { margin: 0 -8px; }
  .mentions-frame { min-width: 0; height: 80dvh; min-height: 520px; }
  .auth-mode #main { min-height: 100svh; padding: 20px 14px max(20px,env(safe-area-inset-bottom)); align-items: start; }
  .auth-card { margin: auto 0; padding: 28px 22px; min-width: 0; }
  .auth-brand { margin-bottom: 30px; }
  .auth-card h1 { font-size: 40px; }
  .auth-intro { font-size: 14px; line-height: 1.7; }
  .auth-form .field { font-size: 13px; }
  .auth-form .table-note, .auth-switch, .auth-foot, .auth-form .form-error { font-size: 12px; line-height: 1.7; }
  .auth-switch a { display: inline-block; padding: 10px 0; }
  .auth-submit { font-size: 14px; }
  .workspace-footer { margin: 0 18px; font-size: 11px; padding-bottom: max(20px,env(safe-area-inset-bottom)); }
  .toast { bottom: max(16px,env(safe-area-inset-bottom)); font-size: 13px; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .sidebar, .topbar { padding-left: 14px; padding-right: 14px; }
  #main { padding-left: 14px; padding-right: 14px; }
  .auth-card { padding: 26px 18px; }
  .auth-brand { gap: 10px; }
  .auth-brand>b { font-size: 48px; }
  .auth-brand>span { font-size: 21px; }
  .auth-card h1 { font-size: 36px; }
}