/* CEM_APPLE_TYPOGRAPHY_V1
   Patient Portal typography and accessibility.
   No application logic changes.
*/

html {
    font-size: 100%;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 1.0625rem;
    line-height: 1.48;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

input,
select,
textarea {
    font-size: 1rem;
    line-height: 1.4;
}

textarea,
select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c8d2dc;
    border-radius: 10px;
    background: #fff;
    color: #203046;
}

p {
    line-height: 1.5;
}

h1,
h2,
h3 {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 1.875rem;
}

h2,
.appointment-section h2,
.cem-summary-panel h2,
.cem-schedule-panel h2 {
    font-size: 1.375rem;
}

label {
    font-size: 0.9375rem;
}

.patient-secondary,
.cem-account-label,
.cem-login-divider,
#cem-face-login-status,
#cem-passkey-status {
    font-size: 0.875rem;
}

.cem-search-result strong {
    font-size: 1rem;
    font-weight: 600;
}

/* Consistent buttons */

.primary,
.secondary,
.text-button,
.cem-search-result button {
    min-height: 44px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Supporting text */

.notice,
.fineprint,
.cem-disabled-note,
.development-notice {
    font-size: 0.875rem;
    line-height: 1.5;
}

.eyebrow,
.cem-banner-label,
.appointment-type,
.cem-appointment-kind {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Administrator / Patient account menu */

.cem-account-menu summary.initials {
    width: 44px;
    height: 44px;
    font-size: 0.875rem;
    font-weight: 700;
}

.cem-account-dropdown {
    width: min(292px, calc(100vw - 32px));
    padding: 16px;
    max-height: 75vh;
    overflow-y: auto;
}

.cem-account-dropdown .cem-menu-heading {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.cem-account-dropdown .cem-menu-email {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
    margin: 6px 0 12px;
}

.cem-account-dropdown .cem-menu-passkey,
.cem-account-dropdown button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    border-radius: 10px;
    text-align: left;
}

.cem-account-dropdown form {
    margin-top: 8px;
}

/* Patient identification */

.cem-viewing-patient {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.cem-mobile-banner button {
    min-height: 44px;
    font-size: 0.9375rem;
}

.cem-patient-name {
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Appointment overview */

.cem-stat strong {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
}

.cem-stat span {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.cem-section-header a {
    font-size: 0.9375rem;
    font-weight: 600;
}

.cem-mobile-appointment,
.appointment-card {
    line-height: 1.55;
}

.cem-appointment-detail,
.appointment-detail {
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Contact information */

.cem-contact-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.cem-contact-item a {
    font-size: 1rem;
    font-weight: 600;
}

.cem-contact-disclaimer,
footer {
    font-size: 0.8125rem;
}

/* Bottom navigation */

.cem-bottom-nav a {
    min-height: 56px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.cem-bottom-nav svg {
    width: 24px;
    height: 24px;
}

.cem-bottom-nav span {
    white-space: nowrap;
}

/* Keyboard and accessibility focus */

.cem-account-menu summary:focus-visible,
.cem-account-dropdown a:focus-visible,
.cem-account-dropdown button:focus-visible,
.cem-bottom-nav a:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #1f5d91;
    outline-offset: 2px;
}

/* Mobile adjustments */

@media (max-width: 600px) {
    h1 {
        font-size: 1.625rem;
    }

    h2,
    .appointment-section h2,
    .cem-summary-panel h2,
    .cem-schedule-panel h2 {
        font-size: 1.3125rem;
    }

    .cem-stat strong {
        font-size: 1.875rem;
    }
}