/*
 * Shared readability layer for the Board, Treasurer, Director, Parent, and
 * Administrator portals. This deliberately raises the floor under functional copy without
 * changing the established display-heading scale or visual identity.
 */

:root {
  --readable-muted: #526b75;
  --readable-secondary: #5f747e;
}

body {
  font-size: 15px;
}

.portal-shell,
.admin-shell {
  --muted: var(--readable-muted);
}

/* Shared shell */
.portal-shell .brand small,
.admin-shell .brand small {
  color: #bed0d8;
  font-size: 12px;
  line-height: 1.3;
}

.portal-shell .sidebar-user strong,
.admin-shell .admin-user strong {
  display: -webkit-box;
  max-width: 154px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.portal-shell .sidebar-user small,
.admin-shell .admin-user small {
  color: #aec2cb;
  font-size: 12px;
  line-height: 1.35;
}

.portal-shell .logout-form button,
.admin-shell .admin-sidebar > form button {
  min-height: 40px;
  font-size: 13px;
}

.portal-shell .portal-switcher-copy strong,
.admin-shell .portal-switcher-copy strong {
  font-size: 14px;
}

.portal-shell .portal-switcher-copy small,
.admin-shell .portal-switcher-copy small {
  color: #b4c7cf;
  overflow: visible;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

.portal-shell .portal-switcher-menu small,
.admin-shell .portal-switcher-menu small {
  color: #b4c7cf;
  font-size: 12px;
  line-height: 1.35;
}

.portal-shell .portal-switcher-menu strong,
.admin-shell .portal-switcher-menu strong {
  font-size: 14px;
}

.portal-shell .topbar p,
.admin-shell .admin-topbar p {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.portal-shell .private-pill,
.portal-shell .access-pill,
.admin-shell .admin-topbar > span {
  font-size: 12px;
  line-height: 1.25;
}

/* A consistent floor for supporting copy and controls. */
.portal-shell small,
.admin-shell small {
  font-size: 12px;
  line-height: 1.45;
}

.portal-shell .view p,
.portal-shell dialog p,
.admin-shell .admin-view p,
.admin-shell dialog p {
  font-size: 14px;
  line-height: 1.6;
}

.portal-shell .view label,
.portal-shell dialog label,
.admin-shell .admin-view label,
.admin-shell dialog label {
  font-size: 13px;
  line-height: 1.4;
}

.portal-shell :is(input, select, textarea),
.admin-shell :is(input, select, textarea) {
  font-size: 15px;
  line-height: 1.45;
}

.portal-shell .view button:not(.nav-item):not(.menu-button):not([aria-label]),
.portal-shell dialog button:not([aria-label]),
.portal-shell .button,
.admin-shell .admin-view button:not(.nav-item):not(.menu-button):not([aria-label]),
.admin-shell dialog button:not([aria-label]),
.admin-shell .primary,
.admin-shell .secondary,
.admin-shell .danger,
.admin-shell .danger-outline {
  font-size: 13px;
  line-height: 1.3;
}

/* Board overview and shared modules */
.portal-shell .welcome-panel > div > span,
.portal-shell .overview-heading span,
.portal-shell .panel-head > div > span,
.portal-shell .placeholder-page > small,
.portal-shell .report-reader-head > span,
.portal-shell .roster-heading small,
.portal-shell .meeting-hero small,
.portal-shell .meeting-section-head small,
.portal-shell .secretary-head small,
.portal-shell .workspace-title small,
.portal-shell .next-meeting small {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.portal-shell .welcome-panel p {
  font-size: 16px;
  line-height: 1.7;
}

.portal-shell .overview-heading > p,
.portal-shell .module-card em,
.portal-shell .placeholder-page > p {
  font-size: 14px;
  line-height: 1.55;
}

.portal-shell .module-card small,
.portal-shell .metric > span,
.portal-shell .panel-head > small,
.portal-shell .budget-highlight small,
.portal-shell .roster-summary small {
  font-size: 11px;
  line-height: 1.3;
}

.portal-shell .metric > small,
.portal-shell .period-banner p small,
.portal-shell .budget-summary span,
.portal-shell .budget-highlight span,
.portal-shell .commitment-row small {
  font-size: 13px;
  line-height: 1.45;
}

.portal-shell .math-list dt,
.portal-shell .activity-list dt,
.portal-shell .budget-summary strong,
.portal-shell .commitment-row strong,
.portal-shell .commitment-row > b,
.portal-shell .commitment-empty {
  font-size: 14px;
  line-height: 1.45;
}

.portal-shell .report-link,
.portal-shell .back-link,
.portal-shell .roster-export-button,
.portal-shell .parent-profile-back {
  font-size: 13px;
  line-height: 1.35;
}

/* Roster and Board-managed Parent profiles */
.portal-shell .roster-heading p {
  font-size: 14px;
}

.portal-shell .roster-filters button,
.portal-shell .roster-status {
  font-size: 12px;
}

.portal-shell .roster-table {
  font-size: 14px;
  line-height: 1.45;
}

.portal-shell .roster-table th,
.portal-shell .roster-table td::before {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.portal-shell .roster-table td {
  font-size: 14px;
  line-height: 1.45;
}

.portal-shell .parent-profile-header small,
.portal-shell .parent-profile-section-heading > small,
.portal-shell .parent-profile-account-details small,
.portal-shell .board-email-dialog header small,
.portal-shell .parent-profile-email-pending small {
  color: var(--readable-secondary);
  font-size: 11px;
}

.portal-shell .parent-profile-header p,
.portal-shell .parent-profile-section-heading p,
.portal-shell .board-email-dialog form > p,
.portal-shell .parent-profile-email-pending p,
.portal-shell .parent-profile-dancers > p {
  font-size: 14px;
}

.portal-shell .parent-profile-fields label,
.portal-shell .board-email-dialog label {
  font-size: 13px;
}

.portal-shell .parent-profile-fields input,
.portal-shell .board-email-dialog :is(input, textarea) {
  font-size: 15px;
}

.portal-shell .parent-profile-account-details strong,
.portal-shell .parent-profile-dancers strong,
.portal-shell .parent-profile-email-pending strong {
  font-size: 14px;
}

.portal-shell .parent-profile-dancers small {
  font-size: 12px;
}

.portal-shell .parent-profile-dancers em,
.portal-shell .parent-profile-email-change,
.portal-shell .parent-profile-email-pending button,
.portal-shell .board-email-dialog label span {
  font-size: 12px;
}

/* Meetings workspace */
.portal-shell .primary-button,
.portal-shell .secondary-button,
.portal-shell .quiet-button,
.portal-shell .document-button,
.portal-shell .danger-button {
  font-size: 13px;
  line-height: 1.35;
}

.portal-shell .meeting-notice,
.portal-shell .meeting-empty,
.portal-shell .workspace-help,
.portal-shell .safety-banner,
.portal-shell .revision-banner,
.portal-shell .meeting-defaults-notice,
.portal-shell .schedule-change-warning,
.portal-shell .attendance-duplicate {
  font-size: 14px;
  line-height: 1.55;
}

.portal-shell .date-tile b,
.portal-shell .status-chip,
.portal-shell .agenda-number,
.portal-shell .minute-topic-letter,
.portal-shell .decision-row small,
.portal-shell .motion-outcome-row small,
.portal-shell .distribution-readiness small,
.portal-shell .defaults-head small {
  font-size: 11px;
  line-height: 1.3;
}

.portal-shell .next-meeting p,
.portal-shell .meeting-library p,
.portal-shell .action-row small,
.portal-shell .decision-row p,
.portal-shell .default-setting-card p,
.portal-shell .template-help,
.portal-shell .carry-forward-note,
.portal-shell .defaults-head p,
.portal-shell .mission-dialog > form > p,
.portal-shell .reset-minutes-warning span,
.portal-shell .motion-outcome-row p,
.portal-shell .distribution-signature-caption {
  font-size: 13px;
  line-height: 1.5;
}

.portal-shell .action-row strong,
.portal-shell .workspace-steps span,
.portal-shell .minutes-items > article > div > b,
.portal-shell .distribution-readiness strong {
  font-size: 14px;
  line-height: 1.45;
}

.portal-shell .workspace-steps b {
  font-size: 12px;
}

.portal-shell .workspace-steps small,
.portal-shell .distribution-readiness span,
.portal-shell .draft-list span,
.portal-shell .draft-list article em,
.portal-shell .distribution-schedule-fields label small,
.portal-shell .dialog-field-help {
  font-size: 12px;
  line-height: 1.45;
}

.portal-shell .draft-list strong,
.portal-shell .mission-dialog label,
.portal-shell .default-section-options label,
.portal-shell .distribution-signature-options label {
  font-size: 13px;
}

/* Online Board report. The stylesheet is screen-only, so PDF/print density is unchanged. */
.portal-shell .board-report header p,
.portal-shell .report-lead small,
.portal-shell .report-budget small,
.portal-shell .report-commitments small,
.portal-shell .report-cleared-heading small,
.portal-shell .report-cleared-groups header small {
  font-size: 10px;
  line-height: 1.35;
}

.portal-shell .board-report header > b,
.portal-shell .report-cleared-groups header > span,
.portal-shell .report-bank-row time,
.portal-shell .report-bank-row small {
  font-size: 11px;
  line-height: 1.35;
}

.portal-shell .report-columns dl > div,
.portal-shell .report-outstanding-row,
.portal-shell .report-notes p,
.portal-shell .report-bank-row span,
.portal-shell .report-empty-row,
.portal-shell .report-cash-position dt,
.portal-shell .report-cash-position dd {
  font-size: 13px;
  line-height: 1.5;
}

.portal-shell .report-bank-row b,
.portal-shell .report-bank-row > strong,
.portal-shell .report-cash-position .total dt {
  font-size: 13px;
}

.portal-shell .board-report footer {
  font-size: 10px;
  line-height: 1.4;
}

/* Treasurer Portal. The screen-only link leaves its dense printed reports unchanged. */
.app-shell {
  --muted: var(--readable-muted);
}

.app-shell .brand small,
.app-shell .sidebar-user small {
  color: #b8cad2;
  font-size: 12px;
  line-height: 1.35;
}

.app-shell .sidebar-user strong {
  display: -webkit-box;
  max-width: 145px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-shell .logout-form button {
  min-height: 40px;
  font-size: 13px;
}

.app-shell .portal-switcher-copy strong,
.app-shell .portal-switcher-menu strong {
  font-size: 14px;
}

.app-shell .portal-switcher-copy small {
  color: #b8cad2;
  overflow: visible;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

.app-shell .portal-switcher-menu small {
  color: #b8cad2;
  font-size: 12px;
  line-height: 1.35;
}

.app-shell .topbar p,
.app-shell .section-intro span,
.app-shell .panel-head span,
.app-shell .report-toolbar > div > span,
.app-shell .drawer header span,
.app-shell .modal header span {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.app-shell .private-pill,
.app-shell .fy-pill,
.app-shell .status-badge {
  font-size: 12px;
}

.app-shell .view > :not(.board-report) p,
.app-shell dialog p,
.app-shell .drawer p {
  font-size: 14px;
  line-height: 1.55;
}

.app-shell small {
  font-size: 12px;
  line-height: 1.45;
}

.app-shell .metric > span,
.app-shell .panel-head > small,
.app-shell .status-chip,
.app-shell .doc-chip,
.app-shell .category-side,
.app-shell .registration-enrollment,
.app-shell .reconciliation-cleared-summary span,
.app-shell .reconciliation-carry-chip {
  font-size: 11px;
  line-height: 1.3;
}

.app-shell .metric > small,
.app-shell .period-banner small,
.app-shell .math-list dt,
.app-shell .queue-callout span,
.app-shell .budget-watch p,
.app-shell .commitment-card p,
.app-shell .outstanding-row p small,
.app-shell .registration-status-list small,
.app-shell .reconciliation-cleared-summary small,
.app-shell .reconciliation-match-panel .panel-head p {
  font-size: 13px;
  line-height: 1.45;
}

.app-shell .panel-head h2 {
  font-size: 20px;
}

.app-shell .section-intro p {
  font-size: 14px;
}

.app-shell .view label,
.app-shell dialog label,
.app-shell .drawer label {
  font-size: 13px;
  line-height: 1.4;
}

.app-shell :is(input, select, textarea) {
  font-size: 15px;
  line-height: 1.45;
}

.app-shell .view button:not(.nav-item):not(.menu-button):not([aria-label]),
.app-shell dialog button:not([aria-label]),
.app-shell .drawer button:not([aria-label]) {
  font-size: 13px;
  line-height: 1.3;
}

.app-shell table th {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.app-shell table td {
  font-size: 14px;
  line-height: 1.45;
}

.app-shell table td small {
  font-size: 12px;
}

.app-shell .locked-note,
.app-shell .outstanding-row em,
.app-shell .budget-progress-label,
.app-shell .report-inputs .report-save-explainer {
  font-size: 12px;
  line-height: 1.45;
}

.app-shell .segments button,
.app-shell .reconciliation-match-segments button {
  font-size: 13px;
}

.app-shell .board-report header p,
.app-shell .report-cleared-heading small,
.app-shell .report-cleared-groups header small,
.app-shell .report-bank-row time,
.app-shell .report-bank-row small,
.app-shell .board-report footer {
  font-size: 10px;
  line-height: 1.35;
}

.app-shell .report-cleared-groups header > span,
.app-shell .report-bank-row span,
.app-shell .report-empty-row,
.app-shell .report-cash-position dt,
.app-shell .report-cash-position dd {
  font-size: 12px;
  line-height: 1.45;
}

.app-shell .report-bank-row b,
.app-shell .report-bank-row > strong,
.app-shell .report-cash-position .total dt {
  font-size: 13px;
}

/* Communication and calendar */
.portal-shell .communication-hero small,
.portal-shell .communication-panel-heading small,
.portal-shell .overview-calendar-card > header small,
.portal-shell .communication-calendar-toolbar small,
.portal-shell .communication-calendar-schedule > header small,
.portal-shell .communication-calendar-time-heading small,
.portal-shell .communication-dialog-head small,
.portal-shell .communication-trash-view > header small {
  color: var(--readable-secondary);
  font-size: 11px;
}

.portal-shell .communication-hero p,
.portal-shell .communication-panel-heading p,
.portal-shell .communication-calendar-toolbar p,
.portal-shell .communication-calendar-event-copy p,
.portal-shell .communication-calendar-event-copy > small,
.portal-shell .communication-dialog form > p,
.portal-shell .communication-trash-view > header p {
  font-size: 14px;
  line-height: 1.55;
}

.portal-shell .communication-notice,
.portal-shell .communication-calendar-form-notice {
  font-size: 13px;
  line-height: 1.5;
}

.portal-shell .communication-metrics small,
.portal-shell .communication-tabs button > span,
.portal-shell .communication-status,
.portal-shell .communication-event-type,
.portal-shell .communication-event-scope,
.portal-shell .communication-record > span {
  font-size: 11px;
}

.portal-shell .communication-metrics span,
.portal-shell .communication-tabs small,
.portal-shell .communication-calendar-event > time small,
.portal-shell .communication-recipient-count small,
.portal-shell .communication-record header small,
.portal-shell .communication-recipient-snapshot span small,
.portal-shell .communication-recipient-snapshot em {
  font-size: 12px;
  line-height: 1.4;
}

.portal-shell .communication-tabs b,
.portal-shell .communication-updates-tabs button,
.portal-shell .communication-updates-add-menu summary,
.portal-shell .communication-updates-add-menu button,
.portal-shell .overview-calendar-list time,
.portal-shell .communication-calendar-form label,
.portal-shell .communication-calendar-toolbar label,
.portal-shell .communication-calendar-time-heading strong,
.portal-shell .communication-trash-link,
.portal-shell .communication-meeting-draft button,
.portal-shell .communication-form-grid label,
.portal-shell .communication-dialog label,
.portal-shell .communication-fieldset,
.portal-shell .communication-follow-up-grid label,
.portal-shell .communication-follow-up-grid button,
.portal-shell .communication-record footer button {
  font-size: 13px;
  line-height: 1.4;
}

.portal-shell .overview-calendar-list span strong,
.portal-shell .communication-calendar-event h4,
.portal-shell .communication-meeting-draft b,
.portal-shell .communication-channel-options span b,
.portal-shell .communication-person-results b,
.portal-shell .communication-signature-head span strong,
.portal-shell .communication-attachments span b,
.portal-shell .communication-delivery-detail > div b,
.portal-shell .communication-record header b {
  font-size: 14px;
}

.portal-shell .overview-calendar-list span small,
.portal-shell .communication-meeting-draft small,
.portal-shell .communication-channel-options span small,
.portal-shell .communication-person-results small,
.portal-shell .communication-signature-head span small,
.portal-shell .communication-signature-caption,
.portal-shell .communication-schedule-fields label small,
.portal-shell .communication-attachments span small,
.portal-shell .communication-attachments > p,
.portal-shell .communication-delivery-detail > div small,
.portal-shell .communication-delivery-detail > div > span:last-child,
.portal-shell .communication-delivery-detail summary,
.portal-shell .communication-record header span,
.portal-shell .communication-reply > small {
  font-size: 12px;
  line-height: 1.45;
}

.portal-shell .communication-form-grid :is(input, select, textarea),
.portal-shell .communication-dialog :is(input, textarea),
.portal-shell .communication-thread-detail :is(input, select, textarea),
.portal-shell .communication-follow-up-grid :is(input, select),
.portal-shell .communication-calendar-toolbar select,
.portal-shell .communication-calendar-form :is(input, select, textarea) {
  font-size: 15px;
}

.portal-shell .communication-thread-row b {
  font-size: 15px;
}

.portal-shell .communication-thread-row time,
.portal-shell .communication-thread-row footer span,
.portal-shell .communication-message time {
  font-size: 12px;
}

.portal-shell .communication-thread-row p,
.portal-shell .communication-thread-header p,
.portal-shell .communication-message-signature,
.portal-shell .communication-signature-preview {
  font-size: 14px;
  line-height: 1.55;
}

.portal-shell .communication-message b {
  font-size: 14px;
}

.portal-shell .communication-message p,
.portal-shell .communication-message-body {
  font-size: 16px;
  line-height: 1.65;
}

/* Board Vault */
.portal-shell .resources-hero small,
.portal-shell .resource-vault-toolbar small,
.portal-shell .resources-approvals header small,
.portal-shell .resource-trash-view header small,
.portal-shell .resource-coming-soon > small,
.portal-shell .resource-dialog header small,
.portal-shell .resources-metrics small {
  color: var(--readable-secondary);
  font-size: 11px;
}

.portal-shell .resources-hero p,
.portal-shell .resources-approvals p,
.portal-shell .resource-trash-view p,
.portal-shell .resource-vault-toolbar p,
.portal-shell .resource-empty p,
.portal-shell .resource-coming-soon p,
.portal-shell .resource-dialog form > div > p {
  font-size: 14px;
  line-height: 1.55;
}

.portal-shell .resources-private-mark b,
.portal-shell .resources-tabs button > b,
.portal-shell .resource-approval-row strong,
.portal-shell .resource-item-main > button,
.portal-shell .resource-item-main > a,
.portal-shell .resource-trash-view .resource-item-main > span,
.portal-shell .resource-protection-explainer strong {
  font-size: 14px;
}

.portal-shell .resources-private-mark small,
.portal-shell .resources-tabs button > small,
.portal-shell .resources-metrics span,
.portal-shell .resource-approval-row small,
.portal-shell .resource-item-main small,
.portal-shell .resource-item-meta,
.portal-shell .resource-protection-explainer span,
.portal-shell .resource-upload-progress {
  font-size: 12px;
  line-height: 1.45;
}

.portal-shell .resources-tabs button > span,
.portal-shell .resources-approvals > header > span,
.portal-shell .resource-badge,
.portal-shell .resource-coming-soon > b,
.portal-shell .resource-folder-shape > span {
  font-size: 11px;
}

.portal-shell .resource-approval-row span,
.portal-shell .resource-approval-row > button,
.portal-shell .resource-search input,
.portal-shell .resource-trash-button,
.portal-shell .resource-item-actions button,
.portal-shell .resource-item-actions a,
.portal-shell .resource-dialog label,
.portal-shell .resource-danger-button {
  font-size: 13px;
}

.portal-shell .resource-dialog :is(input, textarea) {
  font-size: 15px;
}

/* Parent Portal */
.parent-shell .parent-primary,
.parent-shell .parent-secondary {
  min-height: 44px;
  font-size: 14px;
}

.parent-shell .parent-panel > header span,
.parent-shell .parent-form-card header > span,
.parent-shell .parent-section-head > div > span,
.parent-shell .parent-account-security > header > span,
.parent-shell .parent-security-dialog header small,
.parent-shell .parent-security-row small,
.parent-shell .parent-pending-email small {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.parent-shell .parent-panel > header button,
.parent-shell .parent-membership button,
.parent-shell .parent-pending-email button {
  font-size: 13px;
}

.parent-shell .parent-loading,
.parent-shell .parent-empty-inline {
  font-size: 14px;
}

.parent-shell .overview-dancer strong,
.parent-shell .overview-event strong,
.parent-shell .parent-director,
.parent-shell .parent-login-note strong,
.parent-shell .parent-security-row strong,
.parent-shell .parent-pending-email strong,
.parent-shell .parent-checkbox strong,
.parent-shell .parent-preferences strong,
.parent-shell .parent-announcement strong {
  font-size: 14px;
  line-height: 1.4;
}

.parent-shell .overview-dancer small,
.parent-shell .overview-event small,
.parent-shell .parent-dancer-card > header small,
.parent-shell .parent-login-note p,
.parent-shell .parent-login-note small,
.parent-shell .parent-checkbox small,
.parent-shell .parent-preferences small,
.parent-shell .parent-empty small {
  font-size: 13px;
  line-height: 1.5;
}

.parent-shell .overview-event > span,
.parent-shell .parent-membership-head span,
.parent-shell .parent-directors > small,
.parent-shell .parent-event-date b,
.parent-shell .parent-event-copy > span,
.parent-shell .parent-event-group,
.parent-shell .parent-announcement span {
  font-size: 11px;
  line-height: 1.25;
}

.parent-shell .parent-section-head p,
.parent-shell .parent-form-card header p,
.parent-shell .parent-account-security > header p,
.parent-shell .parent-security-row p,
.parent-shell .parent-pending-email p,
.parent-shell .parent-security-dialog form > p,
.parent-shell .parent-event-copy p,
.parent-shell .parent-announcement p {
  font-size: 14px;
  line-height: 1.6;
}

.parent-shell .parent-profile label,
.parent-shell .parent-contact-form > label:not(.parent-checkbox),
.parent-shell .parent-security-dialog label {
  font-size: 13px;
}

.parent-shell .parent-profile :is(input, select, textarea),
.parent-shell .parent-contact-form :is(input, select, textarea),
.parent-shell .parent-security-dialog input {
  font-size: 15px;
}

.parent-shell .parent-contact-guide p,
.parent-shell .parent-contact-guide li {
  color: #dce8ec;
  font-size: 15px;
  line-height: 1.7;
}

/* Director Portal, including mobile-first attendance */
.director-shell .director-view > .eyebrow,
.director-shell .attendance .eyebrow {
  font-size: 11px;
}

.director-shell .meta,
.director-shell .notice {
  font-size: 14px;
  line-height: 1.55;
}

.director-shell .button {
  min-height: 44px;
  font-size: 14px;
}

.director-shell .director-view label {
  font-size: 14px;
}

.director-shell .director-view :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-size: 15px;
}

.director-shell .dancer strong,
.director-shell .contact-row strong,
.director-shell .thread-row strong {
  font-size: 15px;
  line-height: 1.4;
}

.director-shell .status label {
  min-height: 50px;
  display: grid;
  place-items: center;
  padding: 4px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

.director-shell .filter {
  min-height: 40px;
  font-size: 13px;
}

.director-shell .conversation-context dt {
  color: var(--readable-secondary);
  font-size: 11px;
}

.director-shell .conversation-context dd,
.director-shell .thread-row span,
.director-shell .thread-row small {
  font-size: 13px;
  line-height: 1.45;
}

.director-shell .message p,
.director-shell .announcement p,
.director-shell .family-dancer p {
  font-size: 15px;
  line-height: 1.6;
}

/* Administrator Portal */
.admin-shell .admin-hero > div > span,
.admin-shell .section-head > div > span,
.admin-shell .guidance > span,
.admin-shell .modal header span,
.admin-shell .email-setting-card > span,
.admin-shell .email-preview-heading span,
.admin-shell .template-section-head > div > span,
.admin-shell .email-template-group-head > div > span,
.admin-shell .email-template-card > summary > div:first-child > span,
.admin-shell .template-reminder-schedule > header > div > span,
.admin-shell .resource-admin-metrics small,
.admin-shell .resource-admin-card header span,
.admin-shell .resource-protected-admin header span,
.admin-shell .resource-delete-admin header span {
  color: var(--readable-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.admin-shell .admin-hero p {
  font-size: 16px;
  line-height: 1.7;
}

.admin-shell .guidance p,
.admin-shell .section-head p,
.admin-shell .position-card > p,
.admin-shell .email-setting-card p,
.admin-shell .template-section-head p,
.admin-shell .email-template-group-head p,
.admin-shell .email-template-card summary p,
.admin-shell .template-reminder-schedule p,
.admin-shell .resource-admin-card header p,
.admin-shell .resource-protected-admin header p,
.admin-shell .resource-delete-admin header p,
.admin-shell .resource-request-empty p {
  font-size: 14px;
  line-height: 1.55;
}

.admin-shell .metrics span,
.admin-shell .position-top small,
.admin-shell .account-roles small,
.admin-shell .status,
.admin-shell .template-safety-note,
.admin-shell .template-summary-state small,
.admin-shell .template-live-heading span,
.admin-shell .resource-protected-row > b {
  font-size: 11px;
  line-height: 1.3;
}

.admin-shell .metrics small,
.admin-shell .holder span,
.admin-shell .holder em,
.admin-shell .account-identity span,
.admin-shell .account-roles span,
.admin-shell .email-settings-actions small,
.admin-shell .template-field-actions small,
.admin-shell .email-template-savebar small,
.admin-shell .template-reminder-savebar small,
.admin-shell .resource-admin-metrics span,
.admin-shell .resource-admin-usage span,
.admin-shell #resource-quota-updated,
.admin-shell .resource-breakdown-row small,
.admin-shell .resource-protected-row small,
.admin-shell .resource-request-row small {
  font-size: 12px;
  line-height: 1.45;
}

.admin-shell .holder strong,
.admin-shell .account-identity strong,
.admin-shell .resource-breakdown-row strong,
.admin-shell .resource-breakdown-row > span,
.admin-shell .resource-protected-row strong,
.admin-shell .resource-request-row strong {
  font-size: 14px;
  line-height: 1.4;
}

.admin-shell .email-setting-card label,
.admin-shell .email-template-fields label,
.admin-shell .reminder-timing-fields > label,
.admin-shell .reminder-repeat-field,
.admin-shell #resource-quota-form > label {
  font-size: 13px;
}

.admin-shell .email-setting-card textarea,
.admin-shell .email-template-fields :is(input, textarea),
.admin-shell .reminder-inline-control input,
.admin-shell #resource-quota-form input {
  font-size: 15px;
}

.admin-shell .email-preview-switch button,
.admin-shell .email-preview-body > span,
.admin-shell .template-field-buttons button,
.admin-shell .template-reminder-savebar button,
.admin-shell .reminder-master-toggle,
.admin-shell .resource-protected-row button,
.admin-shell .resource-request-row button {
  font-size: 13px;
}

.admin-shell .email-preview-body p,
.admin-shell .email-preview-footer,
.admin-shell .email-preview-note,
.admin-shell .template-live-body p,
.admin-shell .template-live-preview > p {
  font-size: 13px;
  line-height: 1.55;
}

.admin-shell .email-template-section-nav span,
.admin-shell .template-live-heading small,
.admin-shell .template-placeholders > div:first-child span,
.admin-shell .placeholder-chip span,
.admin-shell .reminder-inline-control em,
.admin-shell .reminder-followup-toggle small {
  font-size: 12px;
  line-height: 1.4;
}

.admin-shell .email-template-group-head > strong,
.admin-shell .template-summary-state b,
.admin-shell .template-placeholders > div:first-child strong,
.admin-shell .placeholder-chip strong,
.admin-shell .template-live-heading strong,
.admin-shell .reminder-followup-toggle strong {
  font-size: 13px;
}

.admin-shell .resource-admin-usage strong,
.admin-shell .resource-breakdown-card aside span,
.admin-shell #resource-quota-form label b,
.admin-shell .resource-protected-row span,
.admin-shell .resource-request-row span {
  font-size: 13px;
  line-height: 1.45;
}

/* Director Access is intentionally shared by more than one portal. */
.access-page {
  font-size: 15px;
}

.access-page .access-head p,
.access-page .access-row small {
  color: var(--readable-muted);
  font-size: 14px;
  line-height: 1.55;
}

.access-page .assignment-tags span {
  font-size: 12px;
  line-height: 1.3;
}

.access-page :is(input, select, textarea) {
  font-size: 15px;
}

/* Authentication and confirmation pages were already close to the target. */
.auth-card .auth-brand {
  color: var(--readable-muted);
  font-size: 12px;
}

.auth-card .lede {
  color: var(--readable-muted);
  font-size: 16px;
  line-height: 1.65;
}

.auth-card .auth-field {
  font-size: 14px;
}

.auth-card .auth-field input,
.auth-card .auth-primary {
  font-size: 16px;
}

.auth-card .verification-head strong,
.auth-card .auth-error,
.auth-card .auth-notice {
  font-size: 14px;
}

.auth-card .verification-head small,
.auth-card .auth-foot,
.auth-card .email-confirm-address small {
  color: var(--readable-muted);
  font-size: 13px;
  line-height: 1.45;
}

.auth-card .email-confirm-warning,
.auth-card #email-confirm-complete > p:not(.email-confirm-success) {
  font-size: 15px;
  line-height: 1.6;
}

/* Reflow before enlarged labels become cramped. */
@media (max-width: 1180px) {
  .admin-shell .account-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-shell .account-roles {
    grid-column: 2;
  }

  .admin-shell .account-actions {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .admin-shell .status {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: end;
  }

  .portal-shell .report-cleared-groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .portal-shell .communication-inbox-layout {
    grid-template-columns: 1fr;
  }

  .portal-shell .communication-thread-list {
    max-height: 330px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .portal-shell .communication-calendar-event {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .portal-shell .communication-event-scope {
    grid-column: 2;
    justify-self: start;
  }

  .portal-shell .communication-calendar-event-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 900px) {
  .portal-shell .overview-calendar-list {
    grid-template-columns: 1fr;
  }

  .portal-shell .overview-calendar-list > div:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e7eceb;
  }

  .portal-shell .overview-calendar-list > div:last-child {
    border-bottom: 0;
  }

  .portal-shell .resource-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .portal-shell .resource-item-meta {
    grid-column: 2 / 3;
  }

  .portal-shell .resource-item-badges {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }

  .portal-shell .resource-item-actions {
    grid-column: 2 / -1;
  }
}

@media (max-width: 800px) {
  /* Keep navigation footers compact so the primary portal menu fits on a phone. */
  body:has(.sidebar.open),
  body:has(.admin-sidebar.open) {
    overflow: hidden;
  }

  .sidebar.open nav,
  .admin-sidebar.open nav {
    overscroll-behavior: contain;
  }

  .portal-shell .portal-switcher-wrap,
  .admin-shell .portal-switcher-wrap,
  .app-shell .portal-switcher-wrap {
    padding: 6px 5px 5px;
  }

  .portal-shell :is(.portal-switcher summary, .portal-switcher-fallback),
  .admin-shell :is(.portal-switcher summary, .portal-switcher-fallback),
  .app-shell :is(.portal-switcher summary, .portal-switcher-fallback) {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 8px;
    min-height: 48px;
    padding: 6px 8px;
  }

  .portal-shell .portal-switcher-icon,
  .admin-shell .portal-switcher-icon,
  .app-shell .portal-switcher-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
  }

  .portal-shell .portal-switcher-menu,
  .admin-shell .portal-switcher-menu,
  .app-shell .portal-switcher-menu {
    max-height: min(330px, calc(100dvh - 130px));
  }

  .portal-shell .portal-switcher-copy strong,
  .admin-shell .portal-switcher-copy strong,
  .app-shell .portal-switcher-copy strong {
    font-size: 13px;
  }

  .portal-shell .portal-switcher-copy small,
  .admin-shell .portal-switcher-copy small,
  .app-shell .portal-switcher-copy small {
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: clip;
    white-space: nowrap;
  }

  .portal-shell .portal-switcher-menu strong,
  .admin-shell .portal-switcher-menu strong,
  .app-shell .portal-switcher-menu strong {
    font-size: 12px;
  }

  .portal-shell .portal-switcher-menu small,
  .admin-shell .portal-switcher-menu small,
  .app-shell .portal-switcher-menu small {
    font-size: 9px;
    line-height: 1.3;
  }

  .portal-shell .sidebar-user strong,
  .app-shell .sidebar-user strong {
    display: block;
    max-width: 145px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
  }

  .portal-shell .sidebar-user small,
  .app-shell .sidebar-user small {
    font-size: 9px;
    line-height: 1.3;
  }

  .admin-shell .admin-user strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
  }

  .admin-shell .admin-user small {
    font-size: 8px;
    line-height: 1.3;
  }

  .portal-shell :is(input, select, textarea),
  .admin-shell :is(input, select, textarea),
  .access-page :is(input, select, textarea) {
    font-size: 16px;
  }

  .portal-shell .view button:not(.nav-item):not(.menu-button):not([aria-label]),
  .portal-shell dialog button:not([aria-label]),
  .portal-shell .button,
  .admin-shell .admin-view button:not(.nav-item):not(.menu-button):not([aria-label]),
  .admin-shell dialog button:not([aria-label]) {
    font-size: 14px;
  }

  .portal-shell .roster-table td {
    font-size: 14px;
    line-height: 1.5;
  }

  .portal-shell .roster-table td::before {
    margin-bottom: 3px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .app-shell #view-transactions .table-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell #view-transactions table {
    display: block;
    min-width: 0;
  }

  .app-shell #view-transactions thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .app-shell #view-transactions tbody {
    display: grid;
    gap: 12px;
  }

  .app-shell #view-transactions tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(20, 48, 67, .04);
  }

  .app-shell #view-transactions tbody td {
    display: block;
    min-width: 0;
    padding: 11px 12px;
    border: 0;
  }

  .app-shell #view-transactions tbody td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--readable-secondary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .app-shell #view-transactions tbody td:nth-child(1) { order: 2; }
  .app-shell #view-transactions tbody td:nth-child(1)::before { content: "Date"; }
  .app-shell #view-transactions tbody td:nth-child(2) {
    grid-column: 1 / -1;
    order: 1;
    padding-top: 14px;
    background: #f8faf9;
  }
  .app-shell #view-transactions tbody td:nth-child(2)::before { content: "Payee / source"; }
  .app-shell #view-transactions tbody td:nth-child(3) { order: 4; border-top: 1px solid var(--line); }
  .app-shell #view-transactions tbody td:nth-child(3)::before { content: "Category"; }
  .app-shell #view-transactions tbody td:nth-child(4) { order: 5; border-top: 1px solid var(--line); }
  .app-shell #view-transactions tbody td:nth-child(4)::before { content: "Type / ref."; }
  .app-shell #view-transactions tbody td:nth-child(5) { order: 6; border-top: 1px solid var(--line); }
  .app-shell #view-transactions tbody td:nth-child(5)::before { content: "Clearance"; }
  .app-shell #view-transactions tbody td:nth-child(6) { order: 3; text-align: left; }
  .app-shell #view-transactions tbody td:nth-child(6)::before { content: "Amount"; }
  .app-shell #view-transactions tbody td:nth-child(7) { order: 7; border-top: 1px solid var(--line); }
  .app-shell #view-transactions tbody td:nth-child(7)::before { content: "Documents"; }
  .app-shell #view-transactions tbody td:nth-child(8) {
    grid-column: 1 / -1;
    order: 8;
    padding-top: 4px;
    border-top: 1px solid var(--line);
    white-space: normal;
  }

  .app-shell #view-transactions .row-actions button {
    min-height: 40px;
    margin: 7px 5px 7px 0;
    padding-inline: 12px;
  }

  .admin-shell .email-template-section-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .admin-shell .email-template-section-nav button {
    min-width: 0;
    min-height: 64px;
    padding: 9px 7px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
  }

  .admin-shell .email-template-section-nav strong {
    font-size: 17px;
  }

  .admin-shell .account-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-shell .account-roles,
  .admin-shell .status,
  .admin-shell .account-actions {
    grid-column: 2;
    grid-row: auto;
  }

  .admin-shell .status {
    justify-self: start;
    align-self: auto;
  }

  .admin-shell .account-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .portal-shell .welcome-panel p,
  .admin-shell .admin-hero p {
    font-size: 15px;
  }

  .parent-shell .parent-security-row,
  .parent-shell .parent-pending-email {
    gap: 15px;
  }

  .portal-shell .communication-tabs button::after {
    font-size: 11px;
    line-height: 1.2;
  }

  .portal-shell .resources-tabs button > b {
    font-size: 12px;
  }

  .portal-shell .communication-calendar-event {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .portal-shell .communication-calendar-event > time {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .portal-shell .communication-calendar-event-copy,
  .portal-shell .communication-event-scope,
  .portal-shell .communication-calendar-event-actions {
    grid-column: 2;
    grid-row: auto;
  }

  .portal-shell .communication-calendar-event-actions {
    width: 100%;
  }

  .portal-shell .communication-calendar-event-actions button {
    flex: 1;
  }
}

/* Keep Board roster controls compact enough to fit all groups and counts on phones. */
@media (max-width: 640px) {
  .portal-shell :is(#view-dancers, #view-parents, #view-directors) .roster-filters button {
    font-size: 10px;
    line-height: 1.2;
  }

  .portal-shell :is(#view-dancers, #view-parents, #view-directors) .roster-summary small {
    font-size: 7px;
    line-height: 1.25;
  }

  .portal-shell :is(#view-dancers, #view-parents, #view-directors) .roster-summary b {
    font-size: 18px;
  }
}