/* Shared readable type for administrator and user screens, including form previews. */
:root {
    --app-body-font-size: .9375rem;
    --app-secondary-font-size: .875rem;
    --app-title-font-size: 1.75rem;
    --app-section-font-size: 1.25rem;
    --app-subheading-font-size: 1.125rem;
    --app-label-font-size: 1rem;
    --app-tooltip-font-size: .875rem;
}
body.app-readable {
    font-size: var(--app-body-font-size);
    line-height: 1.65;
}
.app-readable p { line-height: 1.7; }
.app-readable :is(input, button, select, textarea, .ql-container) { font-family: inherit; }
.app-readable :is(.form-control, .form-select, .select2-selection__rendered, .select2-results__option, .btn, .page-link, .user-outline-action-button, .ql-container) {
    font-size: var(--app-body-font-size) !important;
}
.app-readable :is(.form-control:not(.select2-hidden-accessible), .form-select) {
    min-height: 44px;
}
.app-readable :is(.small, small, .form-text, .required-badge, .payment-badge, .readonly-badge, .badge:not(.fs-6), .admin-table-badge, .control-count-badge, .item-description, .char-count, .menu-description, .user-role-note, .section-hint, .project-form-unit) {
    font-size: var(--app-secondary-font-size) !important;
    line-height: 1.6;
}
.app-readable :is(.list-table, .admin-modern-table, .table, .address-table) :is(th, td) {
    font-size: var(--app-body-font-size) !important;
    line-height: 1.65;
}
.app-readable :is(label, .form-label, .item-title, .description-box) { font-size: var(--app-body-font-size) !important; }
.app-readable #login_form p { font-size: var(--app-secondary-font-size) !important; }
.app-readable :is(.select2-selection--single) { min-height: 44px; }
.app-readable :is(.select2-selection--single .select2-selection__rendered) { line-height: 42px; }
.app-readable :is(.select2-selection--single .select2-selection__arrow) { min-height: 42px; }
.app-readable .ql-editor { line-height: 1.75; }
.app-readable .ql-editor p { line-height: inherit; }
.app-readable .user-form-list-table td { padding-top: 12px; padding-bottom: 12px; }
.app-readable .user-form-list-table .badge { white-space: normal; }
.app-readable table tbody td.table-row-number {
    color: #adb5bd !important;
    font-variant-numeric: tabular-nums;
}

/* One heading hierarchy for page chrome; preserve authored rich-text content. */
body.app-readable :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):where(:not(.ql-editor *)) {
    line-height: 1.45;
    overflow-wrap: anywhere;
}
body.app-readable :where(h1, .h1):where(:not(.ql-editor *)) { font-size: var(--app-title-font-size) !important; }
body.app-readable :where(h2, .h2):where(:not(.ql-editor *)) { font-size: var(--app-section-font-size) !important; }
body.app-readable :where(h3, .h3):where(:not(.ql-editor *)) { font-size: var(--app-subheading-font-size) !important; }
body.app-readable :where(h4, .h4):where(:not(.ql-editor *)) { font-size: var(--app-label-font-size) !important; }
body.app-readable :where(h5, .h5):where(:not(.ql-editor *)) { font-size: var(--app-body-font-size) !important; }
body.app-readable :where(h6, .h6):where(:not(.ql-editor *)) { font-size: var(--app-secondary-font-size) !important; }
body.app-readable :is(.main-heading, .management-page-heading h1, .admin-index-heading h1, .registration-box .main-heading) {
    font-size: var(--app-title-font-size) !important;
}
body.app-readable :is(.management-page h2, .section-title, .top-menu-section-title, .menu-section-title) {
    font-size: var(--app-section-font-size) !important;
}
body.app-readable :is(.management-form-grid h2, .management-list-panel-heading h3, .management-form-card h4, .management-project-card-title h3, .section-heading, .menu-title) {
    font-size: var(--app-subheading-font-size) !important;
}
body.app-readable :is(.management-project-action-label, .user-notice-heading, .mail-text h3, .modal-title) {
    font-size: var(--app-label-font-size) !important;
}
body.app-readable .management-project-section-label { font-size: var(--app-secondary-font-size) !important; }

/* Shared body and supporting text, including legacy pages with fixed font sizes. */
body.app-readable .management-panel-heading .management-form-description {
    font-size: 13px !important;
}
body.app-readable :is(.management-page, .management-list-page, .user-page-content, .registration-box, .guide-page) {
    font-size: var(--app-body-font-size);
}
body.app-readable :is(.admin-index-heading p, .management-page-heading p, .management-list-description, .description-box, .remarks-box, .remarks_box, .management-mail-body, .user-home-intro) {
    font-size: var(--app-body-font-size) !important;
    line-height: 1.75;
}
body.app-readable :is(.management-project-hub-metrics dt, .management-project-meta p, .management-project-customer, .management-project-updated, .management-project-metric-unit, .user-profile-status dt, .management-breadcrumb, .admin-index-breadcrumb, .result-count) {
    font-size: var(--app-secondary-font-size) !important;
    line-height: 1.6;
}
body.app-readable .management-project-hub-metrics--settings dd {
    font-size: var(--app-body-font-size);
    line-height: 1.65;
}
body.app-readable .user-login-page .recommended-browser :is(p, .recommended-browser-heading) {
    font-size: var(--app-secondary-font-size) !important;
    line-height: 1.6;
}

/* Match Bootstrap help bubbles and the interactive project login URL popup. */
body.app-readable :is(.tooltip, .popover, .project-login-tooltip, .ql-tooltip) {
    font-family: inherit;
    font-size: var(--app-tooltip-font-size);
    line-height: 1.6;
}
body.app-readable .tooltip {
    --bs-tooltip-font-size: var(--app-tooltip-font-size);
    --bs-tooltip-max-width: min(320px, calc(100vw - 24px));
}
body.app-readable .tooltip-inner {
    padding: 8px 12px;
    font-size: var(--app-tooltip-font-size);
    line-height: 1.6;
    text-align: left;
    overflow-wrap: anywhere;
}
body.app-readable .project-login-tooltip-url { max-width: min(440px, calc(100vw - 50px)); }
body.app-readable .popover-header { font-size: var(--app-body-font-size) !important; }
body.app-readable .popover-body { font-size: var(--app-tooltip-font-size); line-height: 1.6; }
@media (max-width: 767px) {
    :root {
        --app-title-font-size: 1.5rem;
        --app-section-font-size: 1.125rem;
        --app-subheading-font-size: 1rem;
    }
}