/**
 * PHASE base typography role application.
 */

html {
    font-family: var(--font-system);
    font-size: 100%;
    font-synthesis: none;
    min-inline-size: var(--viewport-min);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-system);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
    min-inline-size: var(--viewport-min);
    overflow-x: clip;
    color: var(--text-primary);
    background-color: var(--surface-page);
}

:where(img, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
}

:where(img, video) {
    block-size: auto;
}

:where(svg) {
    overflow: visible;
}

:where(h1) {
    max-inline-size: var(--phase-type-h1-measure);
}

:where(h2) {
    max-inline-size: var(--phase-type-h2-measure);
}

:where(h3) {
    max-inline-size: var(--phase-type-h3-measure);
}

:where(p) {
    max-inline-size: var(--phase-type-body-measure);
}

:where(small, figcaption) {
    max-inline-size: var(--phase-type-caption-measure);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
}

:where(code, kbd, samp, pre) {
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
}

:where(strong, b) {
    font-weight: 600;
}

/* =========================================================
 * SEMANTIC, LINK, AND REFLOW BASELINE
 * ====================================================== */

:where(main, [id]):target {
    scroll-margin-block-start:
        var(--anchor-offset-safe);
}

:where(
    p,
    li,
    dd,
    figcaption,
    label,
    legend,
    summary
) {
    overflow-wrap: anywhere;
}

.prose a {
    color: currentColor;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
}

@media (hover: hover) and (pointer: fine) {
    .prose a:hover {
        text-decoration-thickness: 0.12em;
    }
}

/* =========================================================
 * CONTROL RADIUS
 * ====================================================== */

:where(
    button,
    input:not(
        [type="checkbox"]
    ):not(
        [type="radio"]
    ):not(
        [type="range"]
    ):not(
        [type="color"]
    ),
    select,
    textarea
) {
    border-radius:
        var(--phase-radius-interactive);
}

/* =========================================================
 * KEYBOARD FOCUS BASELINE
 * ====================================================== */

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="menuitemcheckbox"],
    [role="menuitemradio"],
    [role="tab"],
    [role="switch"],
    [role="checkbox"],
    [role="radio"],
    [role="combobox"],
    [role="option"],
    [role="treeitem"],
    [tabindex]:not([tabindex="-1"]),
    [contenteditable="true"]
):not([disabled]):not([aria-disabled="true"]):focus {
    outline:
        var(--focus-width)
        solid
        var(--focus-color);

    outline-offset:
        var(--focus-offset);

    box-shadow:
        0 0 0
        var(--phase-focus-ring-contrast-width)
        var(--phase-focus-ring-contrast-color);
}

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="menuitemcheckbox"],
    [role="menuitemradio"],
    [role="tab"],
    [role="switch"],
    [role="checkbox"],
    [role="radio"],
    [role="combobox"],
    [role="option"],
    [role="treeitem"],
    [tabindex]:not([tabindex="-1"]),
    [contenteditable="true"]
):not([disabled]):not([aria-disabled="true"]):focus:not(
    :focus-visible
) {
    outline-color:
        transparent;

    box-shadow:
        none;
}

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="menuitemcheckbox"],
    [role="menuitemradio"],
    [role="tab"],
    [role="switch"],
    [role="checkbox"],
    [role="radio"],
    [role="combobox"],
    [role="option"],
    [role="treeitem"],
    [tabindex]:not([tabindex="-1"]),
    [contenteditable="true"]
):not([disabled]):not([aria-disabled="true"]):focus-visible {
    outline:
        var(--focus-width)
        solid
        var(--focus-color);

    outline-offset:
        var(--focus-offset);

    box-shadow:
        0 0 0
        var(--phase-focus-ring-contrast-width)
        var(--phase-focus-ring-contrast-color);
}

/*
 * The first tab stop is the skip link. It is translated, not display-hidden,
 * so it remains discoverable to keyboard and assistive-technology users.
 */
.skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: var(--layer-emergency);
    padding-block: var(--space-control-block);
    padding-inline: var(--space-control-inline);
    color: var(--text-primary);
    background-color: var(--surface-page);
    border:
        var(--border-width-2)
        solid
        var(--border-strong);
    border-radius: var(--phase-radius-interactive);
    translate: 0 calc(-100% - var(--space-4));
}

.skip-link:focus,
.skip-link:focus-visible {
    outline:
        var(--focus-width)
        solid
        var(--focus-color);
    outline-offset: var(--focus-offset);
    box-shadow:
        0 0 0
        var(--phase-focus-ring-contrast-width)
        var(--focus-contrast-color);
    translate: 0;
}

.surface-dark
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus,
.surface-dark-secondary
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus,
.surface-panel-dark
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus,
.surface-signal
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus,
.surface-dark
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus-visible,
.surface-dark-secondary
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus-visible,
.surface-panel-dark
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus-visible,
.surface-signal
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
):not([disabled]):not([aria-disabled="true"]):focus-visible {
    outline:
        var(--focus-width)
        solid
        var(--focus-color-inverse);
    outline-offset: var(--focus-offset);
    box-shadow:
        0 0 0
        var(--phase-focus-ring-contrast-width)
        var(--phase-focus-ring-color);
}

.error-summary:focus {
    outline:
        var(--focus-width)
        solid
        var(--focus-color);
    outline-offset: var(--focus-offset);
    box-shadow:
        0 0 0
        var(--phase-focus-ring-contrast-width)
        var(--focus-contrast-color);
}

/* =========================================================
 * FORCED COLORS BASELINE
 * ====================================================== */

@media (forced-colors: active) {
    :root {
        --focus-color: Highlight;
        --focus-color-inverse: Highlight;
    }

    body {
        color:
            var(--phase-forced-text);

        background:
            var(--phase-forced-surface);
    }

    :where(
        .site-header,
        .site-footer
    ) {
        color:
            var(--phase-forced-text);

        background:
            var(--phase-forced-surface);

        border-color:
            var(--phase-forced-text);
    }

    :where(
        .header-cta,
        .navigation-toggle
    ) {
        border-color:
            currentColor;
    }

    a[href] {
        color:
            var(--phase-forced-link);

        text-decoration-line:
            underline;

        text-decoration-style:
            solid;

        text-decoration-thickness:
            var(
                --phase-forced-link-decoration-thickness
            );

        text-underline-offset:
            var(
                --phase-forced-link-decoration-offset
            );
    }

    a[href]:visited {
        color:
            var(--phase-forced-link-visited);
    }

    :where(
        button,
        a.button[href],
        summary,
        [role="button"],
        [role="menuitem"],
        [role="tab"],
        [role="switch"]
    ):not([disabled]):not([aria-disabled="true"]) {
        color:
            var(--phase-forced-control-text);

        background:
            var(--phase-forced-control-surface);

        border:
            var(--phase-forced-control-border-width)
            solid
            var(--phase-forced-control-text);

        box-shadow:
            none;

        text-shadow:
            none;

        forced-color-adjust:
            auto;
    }

    :where(
        input:not(
            [type="checkbox"]
        ):not(
            [type="radio"]
        ):not(
            [type="range"]
        ):not(
            [type="color"]
        ),
        select,
        textarea
    ):not([disabled]) {
        color:
            var(--phase-forced-field-text);

        background:
            var(--phase-forced-field-surface);

        border:
            var(--phase-forced-control-border-width)
            solid
            var(--phase-forced-field-text);

        box-shadow:
            none;

        text-shadow:
            none;

        forced-color-adjust:
            auto;
    }

    :where(
        input:not(
            [type="checkbox"]
        ):not(
            [type="radio"]
        ):not(
            [type="range"]
        ):not(
            [type="color"]
        ),
        textarea
    )::placeholder {
        color:
            var(--phase-forced-disabled);

        opacity:
            1;
    }

    :where(
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="link"],
        [role="menuitem"],
        [role="tab"],
        [role="switch"]
    ):is(
        [disabled],
        [aria-disabled="true"]
    ) {
        color:
            var(--phase-forced-disabled);

        border-color:
            var(--phase-forced-disabled);

        opacity:
            1;

        box-shadow:
            none;
    }

    a[aria-current]:not(
        [aria-current="false"]
    ) {
        text-decoration-style:
            double;

        text-decoration-thickness:
            var(--phase-forced-state-border-width);
    }

    :where(
        [aria-pressed="true"],
        [aria-selected="true"],
        [aria-expanded="true"],
        [role="checkbox"][aria-checked="true"],
        [role="radio"][aria-checked="true"],
        [role="switch"][aria-checked="true"]
    ) {
        border-style:
            double;

        border-width:
            var(--phase-forced-state-border-width);
    }

    :where(
        input:not(
            [type="checkbox"]
        ):not(
            [type="radio"]
        ):not(
            [type="range"]
        ):not(
            [type="color"]
        ),
        select,
        textarea
    )[aria-invalid="true"] {
        border-style:
            double;

        border-width:
            var(--phase-forced-state-border-width);
    }

    :where(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="link"],
        [role="menuitem"],
        [role="menuitemcheckbox"],
        [role="menuitemradio"],
        [role="tab"],
        [role="switch"],
        [role="checkbox"],
        [role="radio"],
        [role="combobox"],
        [role="option"],
        [role="treeitem"],
        [tabindex]:not([tabindex="-1"]),
        [contenteditable="true"]
    ):not([disabled]):not([aria-disabled="true"]):focus,
    :where(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="link"],
        [role="menuitem"],
        [role="menuitemcheckbox"],
        [role="menuitemradio"],
        [role="tab"],
        [role="switch"],
        [role="checkbox"],
        [role="radio"],
        [role="combobox"],
        [role="option"],
        [role="treeitem"],
        [tabindex]:not([tabindex="-1"]),
        [contenteditable="true"]
    ):not([disabled]):not([aria-disabled="true"]):focus-visible {
        outline-color:
            var(--phase-focus-ring-forced-color);

        box-shadow:
            none;

        forced-color-adjust:
            auto;
    }

    :where(
        .phase-icon,
        [data-phase-icon]
    ) {
        color:
            currentColor;

        fill:
            currentColor;

        stroke:
            currentColor;

        forced-color-adjust:
            auto;
    }

    :where(
        .phase-decorative-layer,
        [data-phase-decoration]
    ) {
        background-image:
            none;

        box-shadow:
            none;

        text-shadow:
            none;

        filter:
            none;

        backdrop-filter:
            none;

        mix-blend-mode:
            normal;
    }

    :where(
        .phase-decorative-layer,
        [data-phase-decoration]
    )[aria-hidden="true"] {
        display:
            none !important;
    }

    .phase-skip-link:focus,
    .phase-skip-link:focus-visible {
        color:
            var(--phase-forced-control-text);

        background:
            var(--phase-forced-control-surface);

        border:
            var(--phase-forced-control-border-width)
            solid
            var(--phase-forced-control-text);

        box-shadow:
            none;
    }

    .panel.panel,
    .card.card,
    .disclosure.disclosure,
    .metadata.metadata,
    .evidence-tag.evidence-tag,
    .data-status.data-status,
    .boundary-block.boundary-block,
    .quote-block.quote-block,
    .utility-boundary.utility-boundary,
    .utility-table-region.utility-table-region,
    .button.button,
    .control.control,
    .panel--boundary.panel--boundary,
    .boundary-panel.boundary-panel {
        border-color:
            var(--phase-forced-text);
    }

    .surface-dark.surface-dark,
    .surface-dark-secondary.surface-dark-secondary,
    .surface-panel-dark.surface-panel-dark,
    .surface-signal.surface-signal,
    .panel--dark.panel--dark,
    .panel--signal.panel--signal {
        forced-color-adjust:
            auto;
    }

    .divider.divider {
        border-color:
            var(--phase-forced-text);
    }

    .field-error.field-error {
        color:
            var(--phase-forced-text);

        border-color:
            var(--phase-forced-text);
    }

    :where(
        .error-summary,
        .status-pair,
        .disclosure,
        .metadata,
        .evidence-tag,
        .data-status,
        .utility-boundary,
        .utility-table-region,
        .media__frame,
        .is-current,
        .is-selected,
        .is-busy,
        .has-error,
        .has-warning,
        .has-success
    ) {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
        forced-color-adjust: auto;
    }

    :where(
        .is-current,
        [aria-current]:not([aria-current="false"]),
        .is-selected,
        [aria-selected="true"],
        [aria-pressed="true"]
    ) {
        text-decoration-line: underline;
        text-decoration-style: double;
    }

    :where(
        .has-error,
        [aria-invalid="true"],
        .error-summary
    ) {
        border-style: double;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html.has-enhanced-scroll {
        scroll-behavior: smooth;
    }
}

/* =========================================================
 * REDUCED MOTION BASELINE
 * ====================================================== */

@media (prefers-reduced-motion: reduce) {
    html,
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            var(--phase-motion-reduced-duration) !important;

        animation-delay:
            var(--phase-motion-reduced-delay) !important;

        animation-iteration-count:
            var(--phase-motion-reduced-iteration) !important;

        transition-duration:
            var(--phase-motion-reduced-duration) !important;

        transition-delay:
            var(--phase-motion-reduced-delay) !important;

        scroll-behavior:
            auto !important;
    }

    .phase-motion-essential,
    [data-phase-motion="essential"] {
        animation-duration:
            var(--phase-motion-reduced-essential-duration) !important;
        animation-timing-function:
            var(--phase-motion-reduced-easing) !important;
        transition-duration:
            var(--phase-motion-reduced-essential-duration) !important;
        transition-timing-function:
            var(--phase-motion-reduced-easing) !important;
    }

    .phase-motion-displacement,
    [data-phase-motion-effect~="displacement"] {
        --phase-motion-translate-x:
            var(--phase-motion-reduced-translate);
        --phase-motion-translate-y:
            var(--phase-motion-reduced-translate);
        transform: none !important;
    }

    .phase-motion-scale,
    [data-phase-motion-effect~="scale"] {
        --phase-motion-scale-factor:
            var(--phase-motion-reduced-scale);
        transform: none !important;
    }

    .phase-motion-reveal,
    [data-phase-motion-effect~="reveal"],
    .reveal {
        --phase-motion-reveal-opacity: 1;
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: none !important;
        transform: none !important;
    }

    .phase-motion-decorative,
    [data-phase-motion="decorative"],
    .phase-motion-autoplay,
    [data-phase-autoplay] {
        animation-play-state: paused !important;
    }

    marquee,
    [data-phase-marquee],
    [data-phase-auto-rotate] {
        animation-play-state: paused !important;
        transform: none !important;
    }

    :where(
        .motion-system,
        .motion-mutation,
        .media-transition,
        .route-transition
    ) {
        animation-play-state: paused !important;
        transition-duration:
            var(--phase-motion-reduced-duration) !important;
        transition-delay:
            var(--phase-motion-reduced-delay) !important;
        transform: none !important;
        translate: none !important;
    }

    .button:active,
    .control:active {
        translate: none;
    }
}