/**
 * PHASE typography role utilities.
 */

.type-route-display {
    font-family: var(--font-system);
    font-size: var(--type-route-size);
    line-height: var(--type-route-line);
    letter-spacing: var(--type-route-tracking);
    font-weight: var(--type-route-weight);
}

.type-section-display {
    font-family: var(--font-system);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    letter-spacing: var(--type-section-tracking);
    font-weight: var(--type-section-weight);
}

.type-subsection-heading {
    font-family: var(--font-system);
    font-size: var(--type-subsection-size);
    line-height: var(--type-subsection-line);
    letter-spacing: var(--type-subsection-tracking);
    font-weight: var(--type-subsection-weight);
}

.type-lead {
    font-family: var(--font-system);
    font-size: var(--type-lead-size);
    line-height: var(--type-lead-line);
    letter-spacing: var(--type-lead-tracking);
    font-weight: var(--type-lead-weight);
}

.type-body {
    font-family: var(--font-system);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    letter-spacing: var(--type-body-tracking);
    font-weight: var(--type-body-weight);
}

.type-supporting {
    font-family: var(--font-system);
    font-size: var(--type-supporting-size);
    line-height: var(--type-supporting-line);
    letter-spacing: var(--type-supporting-tracking);
    font-weight: var(--type-supporting-weight);
}

.type-label {
    font-family: var(--font-system);
    font-size: var(--type-label-size);
    line-height: var(--type-label-line);
    letter-spacing: var(--type-label-tracking);
    font-weight: var(--type-label-weight);
}

.type-technical {
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
    font-weight: var(--type-technical-weight);
    text-transform: uppercase;
}

.type-action {
    font-family: var(--font-system);
    font-size: var(--type-action-size);
    line-height: var(--type-action-line);
    letter-spacing: var(--type-action-tracking);
    font-weight: var(--type-action-weight);
}

.type-navigation {
    font-family: var(--font-system);
    font-size: var(--type-navigation-size);
    line-height: var(--type-navigation-line);
    letter-spacing: var(--type-navigation-tracking);
    font-weight: var(--type-navigation-weight);
}

.type-caption {
    font-family: var(--font-system);
    font-size: var(--type-caption-size);
    line-height: var(--type-caption-line);
    letter-spacing: var(--type-caption-tracking);
    font-weight: var(--type-caption-weight);
}

.type-mutation {
    font-family: var(--font-mutation);
    font-style: normal;
    font-weight: 400;
}

.type-mutation-italic {
    font-family: var(--font-mutation);
    font-style: italic;
    font-weight: 400;
}

/*
 * Legacy Step 4B.1 utility names remain for compatibility only.
 * New templates and components must consume the canonical .type-* roles.
 */
.phase-type-display {
    max-inline-size: var(--phase-type-display-measure);
    font-size: var(--phase-type-display-size);
    line-height: var(--phase-type-display-line-height);
    letter-spacing: var(--phase-type-display-letter-spacing);
}

.phase-type-h1 {
    max-inline-size: var(--phase-type-h1-measure);
    font-size: var(--phase-type-h1-size);
    line-height: var(--phase-type-h1-line-height);
    letter-spacing: var(--phase-type-h1-letter-spacing);
}

.phase-type-h2 {
    max-inline-size: var(--phase-type-h2-measure);
    font-size: var(--phase-type-h2-size);
    line-height: var(--phase-type-h2-line-height);
    letter-spacing: var(--phase-type-h2-letter-spacing);
}

.phase-type-h3 {
    max-inline-size: var(--phase-type-h3-measure);
    font-size: var(--phase-type-h3-size);
    line-height: var(--phase-type-h3-line-height);
    letter-spacing: var(--phase-type-h3-letter-spacing);
}

.phase-type-body {
    max-inline-size: var(--phase-type-body-measure);
    font-size: var(--phase-type-body-size);
    line-height: var(--phase-type-body-line-height);
    letter-spacing: var(--phase-type-body-letter-spacing);
}

.phase-type-lead {
    max-inline-size: var(--phase-type-lead-measure);
    font-size: var(--phase-type-lead-size);
    line-height: var(--phase-type-lead-line-height);
    letter-spacing: var(--phase-type-lead-letter-spacing);
}

.phase-type-supporting {
    max-inline-size: var(--phase-type-supporting-measure);
    font-size: var(--phase-type-supporting-size);
    line-height: var(--phase-type-supporting-line-height);
    letter-spacing: var(--phase-type-supporting-letter-spacing);
}

.phase-type-caption {
    max-inline-size: var(--phase-type-caption-measure);
    font-size: var(--phase-type-caption-size);
    line-height: var(--phase-type-caption-line-height);
    letter-spacing: var(--phase-type-caption-letter-spacing);
}

.phase-type-metadata {
    max-inline-size: var(--phase-type-metadata-measure);
    font-size: var(--phase-type-metadata-size);
    line-height: var(--phase-type-metadata-line-height);
    letter-spacing: var(--phase-type-metadata-letter-spacing);
}

.phase-type-technical {
    max-inline-size: var(--phase-type-technical-measure);
    font-family: var(--phase-font-technical);
    font-size: var(--phase-type-technical-size);
    line-height: var(--phase-type-technical-line-height);
    letter-spacing: var(--phase-type-technical-letter-spacing);
}

.phase-type-navigation {
    max-inline-size: var(--phase-type-navigation-measure);
    font-size: var(--phase-type-navigation-size);
    line-height: var(--phase-type-navigation-line-height);
    letter-spacing: var(--phase-type-navigation-letter-spacing);
}

.phase-type-control {
    max-inline-size: var(--phase-type-control-measure);
    font-size: var(--phase-type-control-size);
    line-height: var(--phase-type-control-line-height);
    letter-spacing: var(--phase-type-control-letter-spacing);
}

/* Measure Utilities */
.phase-measure-body {
    max-inline-size: var(--phase-measure-body);
}

.phase-measure-lead {
    max-inline-size: var(--phase-measure-lead);
}

.phase-measure-supporting {
    max-inline-size: var(--phase-measure-supporting);
}

.phase-measure-editorial {
    max-inline-size: var(--phase-measure-editorial);
}

.phase-measure-technical {
    max-inline-size: var(--phase-measure-technical);
}

/* =========================================================
 * RADIUS UTILITIES
 * ====================================================== */

.phase-radius-structural {
    border-radius:
        var(--phase-radius-structure);
}

.phase-radius-control {
    border-radius:
        var(--phase-radius-interactive);
}

.phase-radius-container {
    border-radius:
        var(--phase-radius-surface);
}

.phase-radius-media {
    border-radius:
        var(--phase-radius-image);
}

/* =========================================================
 * MOTION CONTEXTS
 * ====================================================== */

.phase-motion-system {
    --phase-motion-duration:
        var(--phase-motion-system-standard);

    --phase-motion-easing:
        var(--phase-ease-system);
}

.phase-motion-system--instant {
    --phase-motion-duration:
        var(--phase-motion-system-instant);
}

.phase-motion-system--fast {
    --phase-motion-duration:
        var(--phase-motion-system-fast);
}

.phase-motion-system--deliberate {
    --phase-motion-duration:
        var(--phase-motion-system-deliberate);
}

.phase-motion-mutation,
[data-phase-motion="mutation"] {
    --phase-motion-duration:
        var(--phase-motion-mutation-standard);

    --phase-motion-easing:
        var(--phase-ease-mutation);
}

.phase-motion-mutation--fast {
    --phase-motion-duration:
        var(--phase-motion-mutation-fast);
}

.phase-motion-mutation--deliberate {
    --phase-motion-duration:
        var(--phase-motion-mutation-deliberate);
}

.phase-motion-essential,
[data-phase-motion="essential"] {
    --phase-motion-duration:
        var(--phase-motion-system-standard);

    --phase-motion-easing:
        var(--phase-ease-system);
}

.phase-motion-decorative,
[data-phase-motion="decorative"] {
    --phase-motion-duration:
        var(--phase-motion-mutation-standard);

    --phase-motion-easing:
        var(--phase-ease-mutation);
}

.phase-motion-displacement,
[data-phase-motion-effect~="displacement"] {
    --phase-motion-translate-x: initial;
    --phase-motion-translate-y: initial;
}

.phase-motion-scale,
[data-phase-motion-effect~="scale"] {
    --phase-motion-scale-factor: initial;
}

.phase-motion-reveal,
[data-phase-motion-effect~="reveal"] {
    --phase-motion-reveal-opacity: initial;
}

/* =========================================================
 * STEP 4B.4 FINITE GLOBAL UTILITY REGISTRY
 * ====================================================== */

/* Display */
.u-block {
    display: block;
}

.u-inline {
    display: inline;
}

.u-inline-block {
    display: inline-block;
}

.u-flex {
    display: flex;
}

.u-grid {
    display: grid;
}

.u-hidden {
    display: none;
}

/* Assistive visibility */
.u-sr-only,
.u-sr-only-focusable:not(
    :focus
):not(
    :focus-within
) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Text and box alignment */
.u-text-start {
    text-align: start;
}

.u-text-center {
    text-align: center;
}

.u-text-end {
    text-align: end;
}

.u-items-start {
    align-items: start;
}

.u-items-center {
    align-items: center;
}

.u-items-end {
    align-items: end;
}

.u-justify-start {
    justify-content: start;
}

.u-justify-center {
    justify-content: center;
}

.u-justify-between {
    justify-content: space-between;
}

.u-self-start {
    align-self: start;
}

.u-self-end {
    align-self: end;
}

/* Intrinsic-safe sizing */
.u-inline-full {
    inline-size: 100%;
}

.u-block-full {
    block-size: 100%;
}

.u-max-inline-full {
    max-inline-size: 100%;
}

.u-min-inline-0 {
    min-inline-size: 0;
}

.u-min-block-0 {
    min-block-size: 0;
}

/* Deliberate local overflow */
.u-overflow-auto {
    overflow: auto;
}

.u-overflow-x-auto {
    overflow-x: auto;
}

.u-overflow-clip {
    overflow: clip;
}

/* Position */
.u-relative {
    position: relative;
}

.u-sticky {
    position: sticky;
}

.u-inset-block-start-0 {
    inset-block-start: 0;
}

/* Registered layer ownership */
.u-layer-base {
    z-index: var(--layer-base);
}

.u-layer-raised {
    z-index: var(--layer-raised);
}

.u-layer-sticky {
    z-index: var(--layer-sticky);
}

.u-layer-dropdown {
    z-index: var(--layer-dropdown);
}

.u-layer-overlay {
    z-index: var(--layer-overlay);
}

.u-layer-modal {
    z-index: var(--layer-modal);
}

.u-layer-toast {
    z-index: var(--layer-toast);
}

.u-layer-emergency {
    z-index: var(--layer-emergency);
}

/* Surface roles */
.surface-page {
    color: var(--text-primary);
    background-color: var(--surface-page);
}

.surface-dark {
    color: var(--text-inverse);
    background-color: var(--surface-dark);
}

.surface-dark-secondary {
    color: var(--text-inverse);
    background-color: var(--surface-dark-secondary);
}

.surface-panel {
    color: var(--text-primary);
    background-color: var(--surface-panel);
}

.surface-panel-dark {
    color: var(--text-inverse);
    background-color: var(--surface-panel-dark);
}

.surface-signal {
    color: var(--text-on-signal);
    background-color: var(--surface-signal);
}

/* Border roles */
.border-none {
    border: var(--border-width-0) solid transparent;
}

.border-subtle {
    border: var(--border-width-1) solid var(--border-subtle);
}

.border-default {
    border: var(--border-width-1) solid var(--border-default);
}

.border-strong {
    border: var(--border-width-1) solid var(--border-strong);
}

.border-signal {
    border: var(--border-width-2) solid var(--border-signal);
}

.border-error {
    border: var(--border-width-2) solid var(--border-error);
}

/* Radius ownership */
.radius-none {
    border-radius: var(--phase-radius-structure);
}

.radius-control {
    border-radius: var(--phase-radius-interactive);
}

.radius-container {
    border-radius: var(--phase-radius-surface);
}

.radius-media {
    border-radius: var(--phase-radius-image);
}

/*
 * Responsive visibility is restricted to reviewed decoration or
 * nonessential metadata. Semantic task content remains one DOM.
 */
.u-hide-b0-b1,
.u-show-b4 {
    display: none;
}

@media (min-width: 48rem) {
    .u-hide-b0-b1 {
        display: revert;
    }
}

@media (min-width: 75rem) {
    .u-show-b4 {
        display: revert;
    }
}

/* PHASE GRID UTILITIES:START */

/* Generated from config/manifests/layout.json. */
/* The finite registry is intentional; do not expand it mechanically. */

.span-1,
.phase-span-1 {
    --layout-item-span: 1;
    --phase-grid-item-span: 1;
}

.span-2,
.phase-span-2 {
    --layout-item-span: 2;
    --phase-grid-item-span: 2;
}

.span-3,
.phase-span-3 {
    --layout-item-span: 3;
    --phase-grid-item-span: 3;
}

.span-4,
.phase-span-4 {
    --layout-item-span: 4;
    --phase-grid-item-span: 4;
}

.span-full,
.phase-span-full {
    --layout-item-start: 1;
    --layout-item-span: var(--layout-grid-columns);
    --phase-grid-item-start: 1;
    --phase-grid-item-span: var(--layout-grid-columns);
}

.start-1,
.phase-start-1 {
    --layout-item-start: 1;
    --phase-grid-item-start: 1;
}

.start-2,
.phase-start-2 {
    --layout-item-start: 2;
    --phase-grid-item-start: 2;
}

.start-3,
.phase-start-3 {
    --layout-item-start: 3;
    --phase-grid-item-start: 3;
}

.start-4,
.phase-start-4 {
    --layout-item-start: 4;
    --phase-grid-item-start: 4;
}

.start-auto,
.phase-start-auto {
    --layout-item-start: auto;
    --phase-grid-item-start: auto;
}

@media (min-width: 48rem) {
    .span-b2-2,
    .phase-b2-span-2 {
        --layout-item-span: 2;
        --phase-grid-item-span: 2;
    }

    .span-b2-3,
    .phase-b2-span-3 {
        --layout-item-span: 3;
        --phase-grid-item-span: 3;
    }

    .span-b2-4,
    .phase-b2-span-4 {
        --layout-item-span: 4;
        --phase-grid-item-span: 4;
    }

    .span-b2-5,
    .phase-b2-span-5 {
        --layout-item-span: 5;
        --phase-grid-item-span: 5;
    }

    .span-b2-6,
    .phase-b2-span-6 {
        --layout-item-span: 6;
        --phase-grid-item-span: 6;
    }

    .span-b2-8,
    .phase-b2-span-8 {
        --layout-item-span: 8;
        --phase-grid-item-span: 8;
    }

    .start-b2-1,
    .phase-b2-start-1 {
        --layout-item-start: 1;
        --phase-grid-item-start: 1;
    }

    .start-b2-2,
    .phase-b2-start-2 {
        --layout-item-start: 2;
        --phase-grid-item-start: 2;
    }

    .start-b2-3,
    .phase-b2-start-3 {
        --layout-item-start: 3;
        --phase-grid-item-start: 3;
    }

    .start-b2-4,
    .phase-b2-start-4 {
        --layout-item-start: 4;
        --phase-grid-item-start: 4;
    }

    .start-b2-5,
    .phase-b2-start-5 {
        --layout-item-start: 5;
        --phase-grid-item-start: 5;
    }

    .start-b2-7,
    .phase-b2-start-7 {
        --layout-item-start: 7;
        --phase-grid-item-start: 7;
    }

}

@media (min-width: 75rem) {
    .span-b4-3,
    .phase-b4-span-3 {
        --layout-item-span: 3;
        --phase-grid-item-span: 3;
    }

    .span-b4-4,
    .phase-b4-span-4 {
        --layout-item-span: 4;
        --phase-grid-item-span: 4;
    }

    .span-b4-5,
    .phase-b4-span-5 {
        --layout-item-span: 5;
        --phase-grid-item-span: 5;
    }

    .span-b4-6,
    .phase-b4-span-6 {
        --layout-item-span: 6;
        --phase-grid-item-span: 6;
    }

    .span-b4-7,
    .phase-b4-span-7 {
        --layout-item-span: 7;
        --phase-grid-item-span: 7;
    }

    .span-b4-8,
    .phase-b4-span-8 {
        --layout-item-span: 8;
        --phase-grid-item-span: 8;
    }

    .span-b4-9,
    .phase-b4-span-9 {
        --layout-item-span: 9;
        --phase-grid-item-span: 9;
    }

    .span-b4-10,
    .phase-b4-span-10 {
        --layout-item-span: 10;
        --phase-grid-item-span: 10;
    }

    .span-b4-12,
    .phase-b4-span-12 {
        --layout-item-span: 12;
        --phase-grid-item-span: 12;
    }

    .start-b4-1,
    .phase-b4-start-1 {
        --layout-item-start: 1;
        --phase-grid-item-start: 1;
    }

    .start-b4-2,
    .phase-b4-start-2 {
        --layout-item-start: 2;
        --phase-grid-item-start: 2;
    }

    .start-b4-3,
    .phase-b4-start-3 {
        --layout-item-start: 3;
        --phase-grid-item-start: 3;
    }

    .start-b4-4,
    .phase-b4-start-4 {
        --layout-item-start: 4;
        --phase-grid-item-start: 4;
    }

    .start-b4-5,
    .phase-b4-start-5 {
        --layout-item-start: 5;
        --phase-grid-item-start: 5;
    }

    .start-b4-7,
    .phase-b4-start-7 {
        --layout-item-start: 7;
        --phase-grid-item-start: 7;
    }

    .start-b4-9,
    .phase-b4-start-9 {
        --layout-item-start: 9;
        --phase-grid-item-start: 9;
    }

    .offset-inline-sm {
        translate: var(--offset-sm) 0;
    }

    .offset-block-sm {
        translate: 0 var(--offset-sm);
    }

}

/* PHASE GRID UTILITIES:END */