/* Shared mobile type scale. See MOBILE_UI_GUIDELINES.md.
   Keep this stylesheet after page styles, including dynamically loaded fragments. */
@media (max-width: 991.98px) {
  :root {
    --ui-font-family: 'Figtree', system-ui, sans-serif;
    --ui-text-page: 1.25rem;
    --ui-text-section: 1rem;
    --ui-text-body: .8rem;
    --ui-text-label: .8125rem;
    --ui-text-meta: .65rem;
    --ui-text-input: 0.8rem;
    --ui-text-stat: 1.1rem;
  }
  html { font-size: 100%; }
  body { font-family: var(--ui-font-family); font-size: var(--ui-text-body); line-height: 1.5; }

  /* Page headings (the same class used on a subsection is mapped below). */
  body :is(.staffDashboardTitle, .myShiftTitle, .availabilityTitle, .staffProfileTitle,
    .announcementFeedTitle, .adminDashboardTitle, .manageStaffTitle, .hospitalsTitle,
    .confirmedShiftTitle, .staffAvailabilityTitle, .panel-body h1, .reportsTitle) {
    font-size: var(--ui-text-page); font-weight: 700; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  body :is(.staffProfileSectionTitle, .staffDashboardPanelHeader h3,
    .availabilityPaneHeader h3, .availabilitySectionHeader h4, .availabilitySelectedCard h3,
    .myShiftSectionTitle, .myShiftDetailSection h4, .myShiftDetailPlaceholder h4,
    .adminChartCardHeader h3, .hospitalsPanelTitle, .hospitalsRegionTitle,
    .reportsTableTitle, h2.manageStaffTitle, .manageStaffFormSectionTitle,
    .adminEntityModalHero h4, .adminEntityModalSectionHeader h5,
    .confirmedShiftSectionTitle, .confirmedShiftDetailSection h4,
    .confirmedShiftDetailPlaceholder h4, .confirmedShiftCancellationTimelineBlock h4,
    .staffAvailabilitySectionTitle, .staffAvailabilityDetailSection h4,
    .staffAvailabilityDetailPlaceholder h4, .qualifiedStaffRequestTitle,
    .qualifiedStaffHeaderTitle, .shiftProcessTimelineTitle, .emailListTop h5,
    .emailContentPlaceholder h4, .announcementGeneralHeading, .announcementShiftForm h3,
    .fillInfosSectionTitle, .fillInfosPolicySubhead, .modal-title,
    .fillInfosPolicyModal .modal-title, .appDialogTitle, .hospitalsRegionHero h2,
    .notificationBellTitle, .emailContent h4, .forgotPasswordSectionTitle, .myShiftEmptyState h5) {
    font-size: var(--ui-text-section); font-weight: 600; line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Card titles, body copy, table content, and essential messages. */
  body :is(p, .alert, .appDialogText, .appDialogInputError, .appDialogMessage, .appDialogPromptLabel, .panel-body b,
    .announcementFeedBody, .announcementFeedCardBody, .fillInfosPolicyBody,
    .notificationBellItemPreview, .email-item-preview, .confirmedShiftListReason,
    .myShiftKeyValue, .myShiftKeyValue strong, .myShiftTimelineValue,
    .confirmedShiftKeyValue, .confirmedShiftKeyValue strong, .confirmedShiftTimelineValue,
    .staffAvailabilityKeyValue, .staffAvailabilityKeyValue strong,
    .manageStaffPendingChangeValue, .shiftProcessTimelineValue,
    .adminChartBarValue, .adminChartHorizontalValue, .adminChartDonutLabel,
    .hospitalsDetailRegionName, .hospitalsDetailRow, .hospitalsDetailStat,
    .confirmedShiftCancellationTimelineReason, .confirmedShiftCancelModalError,
    .staffDashboardSubtitle, .myShiftSubtitle, .availabilitySubtitle,
    .announcementFeedSubtitle, .adminDashboardSubtitle, .manageStaffSubtitle,
    .hospitalsSubtitle, .confirmedShiftSubtitle, .staffAvailabilitySubtitle,
    .staffDashboardPanelHeader p, .availabilityPaneHeader p, .adminChartCardHeader p,
    .adminEntityModalHero p, .adminEntityModalSectionHeader p,
    .hospitalsDetailBody, .hospitalsDirectoryAddress, .hospitalsInfoWindowAddress,
    .manageStaffTable tbody td, .reportsTable tbody td, .qualifiedStaffTable tbody td,
    .notificationBellEmptyState, .myShiftEmptyState, .staffDashboardEmptyState,
    .confirmedShiftEmptyState, .staffAvailabilityEmptyState, .announcementFeedEmptyState) {
    font-size: var(--ui-text-body); line-height: 1.5;
  }
  body :is(.staffProfileName, .staffDashboardShiftHospital, .myShiftListHospital,
    .announcementFeedCardTitle, .notificationBellItemSubject, .email-item-title,
    .emailNotificationToastSubject, .manageStaffName, .manageStaffPendingName,
    .manageCertificationTitle, .hospitalsDirectoryName, .hospitalsDetailTitle,
    .hospitalsMapEmptyTitle, .hospitalCardNameWrap h5, .confirmedShiftListHospital,
    .staffAvailabilityListName, .staffAvailabilityProfileRole, .myShiftHighlightValue,
    .confirmedShiftHighlightValue, .staffAvailabilityHighlightValue,
    .shiftProcessTimelineStepTitle, .shiftProcessTimelineItemHeader strong, .availabilityShiftLabel strong,
    .app-shell-header .textUsername h4) {
    font-size: var(--ui-text-body); font-weight: 600; line-height: 1.4;
    overflow-wrap: anywhere;
  }

  /* Labels and secondary explanations. Label children must not keep old sizes. */
  body :is(label, .form-label, .staffProfileField label, .panel-body label b,
    .input-group b, .staffCredentialSectionTitle, .staffCredentialTitle,
    .appDialogFieldLabel, .appDialogInputLabel, .appDialogPresetLabel, .confirmedShiftCancelReasonLabel,
    .manageStaffTable thead th, .reportsTable thead th, .qualifiedStaffTable thead th,
    .staffDashboardSummaryLabel, .myShiftSummaryLabel, .staffDashboardMetricLabel,
    .adminDashboardSummaryLabel, .confirmedShiftSummaryLabel, .staffAvailabilitySummaryLabel,
    .myShiftHighlightLabel, .confirmedShiftHighlightLabel, .staffAvailabilityHighlightLabel,
    .availabilityHeroMetric span, .announcementFeedStat span) {
    font-size: var(--ui-text-label); font-weight: 600; line-height: 1.4;
  }
  body :is(small, .form-text, .staffCredentialHelper, .staffCredentialProofStatus,
    .staffCredentialProofLink, .fillInfosHint, .manageStaffFieldHint,
    .staffDashboardSummaryMeta, .staffDashboardMetricMeta, .myShiftSummaryMeta,
    .adminDashboardSummaryMeta, .confirmedShiftSummaryMeta, .staffAvailabilitySummaryMeta,
    .myShiftModeMeta, .myShiftSectionMeta, .confirmedShiftSectionMeta,
    .staffAvailabilitySectionMeta, .availabilityHeroMetric small,
    .confirmedShiftHighlightMeta, .staffAvailabilityHighlightMeta,
    .myShiftHighlightMeta, .manageCertificationDescription, .searchMeta,
    .reportsTableNote, .reportsExportHint, .manageStaffResultMeta, .manageStaffMuted,
    .staffDashboardRefreshMeta, .myShiftRefreshMeta, .adminDashboardRefreshMeta,
    .manageStaffRefreshMeta, .hospitalsRefreshMeta, .confirmedShiftRefreshMeta,
    .staffAvailabilityRefreshMeta, .appDialogHelper, .appDialogFootnote,
    .fillInfosFooterLink, .fillInfosFooterLink a, .forgotPasswordHint, .forgotPasswordFooter,
    .forgotPasswordFooter a, .remember-forgot, .remember-forgot a, .availabilityRegionHint,
    .availabilityLegendItem, .announcementFeedUpdated, .availabilitySuggestionMeta,
    .availabilitySuggestionReasons, .myShiftListRole, .myShiftListRequester,
    .confirmedShiftListRole, .confirmedShiftListStaff, .staffAvailabilityListRole,
    .staffDashboardShiftMeta, .staffDashboardFocusText,
    .adminChartLegendLabel, .adminChartHorizontalLabel, .qualifiedStaffMatchScore,
    .manageStaffPendingChangeLabel, .manageStaffPendingDocumentName,
    .manageStaffPendingDocumentLink, .qualifiedStaffRequestMeta, .qualifiedStaffHeaderMeta,
    .confirmedShiftCancelModalMeta, .confirmedShiftCancellationTimelineValue,
    .myShiftTimelineTitle, .confirmedShiftTimelineTitle,
    .hospitalsPanelSubtitle, .hospitalsLegendItem, .qualifiedStaffCriteriaRow,
    .qualifiedStaffReasonList span, .qualifiedStaffWorkload) {
    font-size: var(--ui-text-label); line-height: 1.45;
  }

  body :is(.notificationBellEyebrow, .notificationBellHeaderCount,
    .notificationBellItemType, .notificationBellItemMeta, .notificationBellItemBadge,
    .notificationBellBadge, .announcementFeedCardPostTime, .announcementFeedStatusBadge,
    .staffDashboardEyebrow, .staffDashboardSectionEyebrow, .myShiftEyebrow,
    .availabilityEyebrow, .availabilityPaneEyebrow, .staffProfileEyebrow,
    .announcementFeedEyebrow, .adminDashboardEyebrow, .adminDashboardSectionEyebrow,
    .confirmedShiftEyebrow, .staffAvailabilityEyebrow, .adminEntityModalEyebrow,
    .qualifiedStaffModalEyebrow, .confirmedShiftCancelModalEyebrow,
    .staffDashboardPill, .adminDashboardPill, .manageStaffPill, .hospitalsPill,
    .myShiftStatusBadge, .myShiftAvailabilityChip, .staffProfileRoleBadge,
    .confirmedShiftStatusBadge, .confirmedShiftAvailabilityChip, .staffAvailabilityStatusBadge,
    .qualifiedStaffCountBadge, .fillInfosRoleBadge, .manageStaffRoleBadge,
    .emailItemBadge, .emailListUnreadBadge, .emailListTabCount, .email-item-meta,
    .emailNotificationToastEyebrow, .emailNotificationToastMeta, .emailNotificationToastHint,
    .myShiftListDate, .myShiftListMeta, .confirmedShiftListDate, .confirmedShiftListMeta,
    .staffAvailabilityListDate, .staffAvailabilityListMeta, .staffAvailabilityProfileMeta,
    .manageStaffMeta, .manageStaffCellNote, .manageStaffCertification,
    .manageStaffNextShiftMeta, .manageStaffPendingSubmeta, .hospitalsDirectoryBadge,
    .hospitalsDirectoryTown, .hospitalsPanelMeta, .hospitalsRegionMeta,
    .hospitalsDetailEyebrow, .hospitalsRegionEyebrow, .hospitalsInfoWindowMeta,
    .shiftProcessTimelineEyebrow, .shiftProcessTimelineMeta,
    .fillInfosPolicyModalEyebrow, .staffCredentialCode, .availabilitySelectedBadge,
    .availabilityPaneBadge, .hospitalsMapBadge, .hospitalsInsetLabel, .hospitalsInsetFocusLabel,
    .adminChartBarLabel, .adminChartLegendMeta, .staffAvailabilityShiftChip small,
    .staffAvailabilityShiftChip, .staffDashboardShiftDate,
    .manageStaffMetricChip, .manageStaffMetricSingle, .manageStaffNextShiftDate) {
    font-size: var(--ui-text-meta); line-height: 1.4; letter-spacing: normal;
  }

  /* Buttons retain their touch area independently of their text size. */
  body :is(button, .btn, .app-shell-header .nameLogout .btn, .staffProfileActions .btn,
    .staffDashboardHeroAction .btn, .myShiftHeroAction .btn,
    .confirmedShiftHeroAction .btn, .staffAvailabilityHeroAction .btn,
    .app-sidebar.sidenav a, .sidenav a, .appDialogButton,
    .announcementShiftChoices span, .availabilityShiftChoices .shift-btn, .fillInfosPolicyLink) {
    font-size: var(--ui-text-body); font-weight: 600; line-height: 1.3;
  }
  body :is(.btn, .appDialogButton, .notificationFilterButton, .myShiftModeButton,
    .confirmedShiftModeButton, .announcementFeedFilter, .reportsTab, .adminDashboardTab) {
    min-height: 44px; white-space: normal;
  }
  body #btnLogin, body #staffNavToggle, body #staffMobilePageName {
    font-size: var(--ui-text-body); line-height: 1.3;
  }
  body #user-position { font-size: var(--ui-text-meta); }
  body :is(.form-control, .form-select, .appDialogInput, .appDialogTextarea, .appDialogPresetSelect,
    .staffProfileField .form-control, .staffProfileField .form-select,
    .fillInfosPanel .form-select, .fillInfosPanel textarea.form-control,
    .manageStaffSearchShell .form-control, .reportsField .form-control,
    .reportsField .form-select, .searchShell .form-control, .staffCredentialDropdownToggle) {
    font-family: var(--ui-font-family); font-size: var(--ui-text-input);
    font-weight: 400; line-height: 1.4; min-width: 0; min-height: 44px;
  }
  body #emailSearch { font-size: var(--ui-text-input); }
  body #selected-date { font-size: var(--ui-text-section); line-height: 1.35; }

  body :is(.staffDashboardSummaryValue, .staffDashboardMetricValue, .myShiftSummaryValue,
    .adminDashboardSummaryValue, .confirmedShiftSummaryValue, .staffAvailabilitySummaryValue,
    .announcementFeedStat strong, .adminChartDonutTotal) {
    font-size: var(--ui-text-stat); font-weight: 700; line-height: 1.2;
  }
  body :is(.staffDashboardSummaryValue.is-text, .staffDashboardMetricValue.is-text,
    .myShiftSummaryValue.is-text, .confirmedShiftSummaryValue.is-text,
    .staffAvailabilitySummaryValue.is-text, .availabilityHeroMetric strong,
    .adminDashboardSummaryValue.is-text) {
    font-size: var(--ui-text-body); font-weight: 600; line-height: 1.4;
  }
  body .myAvailabilityShell .fc .fc-toolbar-title,
  body #confirmedShiftCalendar .fc .fc-toolbar-title { font-size: var(--ui-text-section); }
  body .myAvailabilityShell .fc .fc-button,
  body #confirmedShiftCalendar .fc .fc-button { font-size: var(--ui-text-body); min-height: 44px; }
  body .myAvailabilityShell .fc :is(.fc-daygrid-day-number, .fc-col-header-cell-cushion),
  body #confirmedShiftCalendar .fc :is(.fc-daygrid-day-number, .fc-col-header-cell-cushion) {
    font-size: var(--ui-text-meta);
  }
  body .myAvailabilityShell .fc-daygrid-event,
  body #confirmedShiftCalendar .fc-event.confirmedShiftCalendarEvent {
    font-size: var(--ui-text-meta);
  }

  /* Larger text must wrap instead of breaking fixed-height mobile containers. */
  body :is(.notificationBellHeader, .staffProfileActions, .announcementFeedFilters) { flex-wrap: wrap; }
  body :is(.notificationBellHeader, .notificationBellFilters) { flex-shrink: 0; }
  body .notificationBellList { min-height: 0; overflow-y: auto; }
  body :is(.notificationBellItemSubject, .notificationBellItemPreview, .staffProfileField label) { overflow-wrap: anywhere; }
  body .app-shell-header { height: auto; }
  body:has(.panel-primary) { overflow-y: auto; }
  body .panel-primary { max-height: none; }
  body .forgotPasswordColumn > .row { margin-inline: 0; }
}