/* Shared typography for content and administrative dialogs on desktop. */
:is(#root, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) {
  --fs-type-body: 14px;
  --fs-type-label: 13px;
  --fs-type-small: 12px;
  font-family: Outfit, Arial, sans-serif;
}
:is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) :is(button, input, select, textarea) {
  font-family: Outfit, Arial, sans-serif !important;
}
@media (min-width: 901px) {
  :is(#root .content .fs-admin-v15, #root .content .admin-workspace, .admin-account-backdrop, .fs-detail-dialog) {
    font-size: 14px;
    line-height: 1.5;
  }
  :is(#root .content .fs-admin-v15, #root .content .admin-workspace, .admin-account-backdrop, .fs-detail-dialog) :is(p, td, dd, li) {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  :is(#root .content .fs-admin-v15, #root .content .admin-workspace, .admin-account-backdrop, .fs-detail-dialog) :is(label, th, dt, small) {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  :is(#root .content .fs-admin-v15, #root .content .admin-workspace, .admin-account-backdrop, .fs-detail-dialog) button:not(:where(.modal-close, .mobile-enrollment-toggle)) {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
}
/* Final mobile type scale, shared by employee and administrator screens.
   Loaded last so older page-specific typography does not restore desktop sizes. */
@media (max-width: 900px) {
  :is(#root, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) {
    --fs-type-page: 24px;
    --fs-type-section: 20px;
    --fs-type-card: 17px;
    --fs-type-subtitle: 15px;
    --fs-type-body: 14px;
    --fs-type-label: 13px;
    --fs-type-small: 12px;
    --fs-type-input: 16px;
    --fs-type-metric: 24px;
    font-family: Outfit, Arial, sans-serif !important;
  }

  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) {
    font-size: var(--fs-type-body) !important;
    line-height: 1.5 !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) :is(h1, h2, h3, h4, p, label, button, input, select, textarea) {
    font-family: Outfit, Arial, sans-serif !important;
  }

  #root .content h1,
  #root .content .fs-page-banner h1 {
    font-size: var(--fs-type-page) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) h2,
  #root .content .hero-card .hero-copy h2,
  #root .content .fs-profile-page h2,
  #root .content .month-calendar h2,
  #root .content .year-title h2,
  #root .content .fs-section-heading-v25 h2,
  #root .content .fs-admin-section-header h2,
  #root .content .panel-title h2 {
    font-size: var(--fs-type-section) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) h3,
  #root .content .offer-grid .offer-card .offer-body .fs-offer-heading h3,
  #root .content .fs-info-docs .fs-resource-copy h3,
  #root .content :is(.fs-community-card, .fs-news-card, .team-card) h2,
  #root .content .event-card-main .event-info .event-title-button {
    font-size: var(--fs-type-card) !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) h4 {
    font-size: var(--fs-type-subtitle) !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) :is(h1, h2, h3, h4) {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) p,
  #root .content .fs-page-banner p:not(.eyebrow) {
    font-size: var(--fs-type-body) !important;
    line-height: 1.55 !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) label {
    font-size: var(--fs-type-label) !important;
    line-height: 1.4 !important;
  }
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) small,
  #root .content .fs-page-banner .eyebrow,
  #root .content :is(.eyebrow, .section-kicker),
  #root .content .fs-admin-v15 :is(.eyebrow, .fs-admin-note, .fs-account-meta, .fs-account-status) {
    font-size: var(--fs-type-small) !important;
    line-height: 1.45 !important;
  }
  #root .content :is(.eyebrow, .section-kicker),
  #root .content .fs-page-banner .eyebrow {
    letter-spacing: .06em !important;
  }

  /* Form controls stay at 16 px to avoid automatic zoom on iOS. */
  :is(#root .content, #root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) :is(input, select, textarea),
  #root .content .fs-profile-page .editor-grid :is(input, select),
  #root .content :is(.fs-admin-v15, .admin-workspace) :is(input, select, textarea),
  .fs-detail-dialog .fs-usage-filters :is(input, select) {
    font-size: var(--fs-type-input) !important;
    line-height: 1.4 !important;
  }
  /* Limit button rules to labelled actions; keep icon-only controls intact. */
  #root .content :is(.primary-button, .outline-button, .fs-admin-create-button, .fs-admin-banner-refresh),
  #root .content :is(.fs-account-actions, .fs-admin-form-actions, .fs-account-pagination, .fs-admin-subnav, .fs-admin-main-nav, .fs-christmas-export-buttons, .fs-bulk-buttons) :is(button, a),
  #root .content .fs-admin-v15 :is(button, a):not(:where(.modal-close, .fs-message-icon-action, .fs-admin-nav-icon)),
  :is(#root .modal-backdrop, .fs-detail-dialog, .admin-account-backdrop, .fs-doc-backdrop, .fs-info-editor-backdrop) :is(.primary-button, .outline-button, .fs-detail-form-actions button, .fs-account-actions button) {
    font-size: var(--fs-type-body) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
  }
  #root .content :is(.fs-admin-v15, .admin-workspace) :is(th, td, dt, dd, li) {
    font-size: var(--fs-type-label) !important;
    line-height: 1.5 !important;
  }
  #root .content :is(.fs-admin-task, .fs-admin-fold > summary, .fs-account-person, .fs-category-identity) strong {
    font-size: var(--fs-type-subtitle) !important;
    line-height: 1.4 !important;
  }
  #root .content :is(.fs-admin-metrics, .enrollment-kpis, .insight-dashboard, .fs-usage-metrics, .fs-health-metrics, .fs-online-metric, .fs-foire-admin-metrics) strong,
  #root .content .fs-usage-panel .fs-usage-metrics article strong,
  .fs-detail-dialog .fs-usage-metrics strong {
    font-size: var(--fs-type-metric) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
  }
}

/* Table actions need room for their label, independently of the type scale. */
#root .content .participant-actions {
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
#root .content .participants-table .participant-actions button {
  box-sizing: border-box;
  width: auto;
  min-width: 120px;
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-family: Outfit, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  word-break: normal !important;
}
#root .content .participants-table :is(.participant-identity, .participant-event) strong {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
#root .content .participants-table :is(.participant-head, .participant-count, .participant-payment, .participant-status, .status-chip) {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#root .content .participants-table :is(.participant-identity, .participant-event, .participant-status) small {
  font-size: 12px !important;
  line-height: 1.45 !important;
}
#root .content .enrollment-pagination {
  gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#root .content .enrollment-pagination :is(b, span, label) {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#root .content .enrollment-pagination > div { gap: 8px; }
#root .content .enrollment-pagination button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  border-radius: 10px;
}
@media (min-width: 761px) {
  #root .content .participants-table :is(.participant-head, article) {
    grid-template-columns: 34px minmax(205px, 1.25fr) minmax(180px, 1.1fr) 90px 110px 120px 136px;
    min-width: 990px;
  }
  #root .content .participants-table { overflow-x: auto; }
}
@media (max-width: 900px) {
  #root .content .participants-table .participant-actions button {
    flex: 1 1 120px;
    max-width: 100%;
  }
  #root .content .enrollment-pagination { padding: 10px 12px; gap: 8px; }
}