/**
 * PHASE global component runtime patterns.
 *
 * Interactive components own reusable presentation while native elements and
 * attributes continue to own names, roles, destinations, and state.
 */

/* =========================================================
 * BUTTON AND CONTROL RUNTIME
 * ====================================================== */

.button,
.control {
    box-sizing: border-box;
    display: inline-flex;
    gap: var(--space-control-gap);
    align-items: center;
    justify-content: center;
    max-inline-size: 100%;
    min-inline-size: var(--control-target-min);
    min-block-size: var(--control-target-min);
    padding-block: var(--space-control-block);
    padding-inline: var(--space-control-inline);
    appearance: none;
    color: var(--text-primary);
    background-color: var(--surface-secondary);
    border:
        var(--border-width-1)
        solid
        var(--border-default);
    border-radius: var(--phase-radius-interactive);
    font-family: var(--font-system);
    font-size: var(--type-action-size);
    font-weight: var(--type-action-weight);
    line-height: var(--type-action-line);
    letter-spacing: var(--type-action-tracking);
    text-align: center;
    text-decoration-line: none;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.button > svg {
    flex: none;
    inline-size: var(--space-component-sm);
    block-size: var(--space-component-sm);
}

.button--primary {
    color: var(--text-on-signal);
    background-color: var(--surface-signal);
    border-color: var(--surface-transparent);
}

.button--secondary {
    color: var(--text-primary);
    background-color: var(--surface-transparent);
    border-color: var(--border-default);
}

.button--text {
    min-inline-size: auto;
    padding-inline: var(--space-control-inline-text);
    color: var(--text-primary);
    background-color: var(--surface-transparent);
    border-color: var(--surface-transparent);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width-1);
    text-underline-offset: var(--space-link-underline-offset);
}

.button--compact {
    padding-block: var(--space-control-block-compact);
    padding-inline: var(--space-control-inline-compact);
}

.button--standard {
    padding-block: var(--space-control-block);
    padding-inline: var(--space-control-inline);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover,
    .control:hover {
        border-color: var(--border-strong);
    }

    .button--primary:hover {
        background-color: var(--surface-signal);
    }

    .button--secondary:hover {
        background-color: var(--surface-primary);
    }

    .button--text:hover {
        text-decoration-thickness: var(--border-width-2);
    }

    .button--cta-p:hover {
        color: var(--text-primary);
        background-color: var(--surface-signal-transition);
        border-color: var(--surface-transparent);
    }
}

.button--cta-p:active {
    color: var(--text-on-signal);
    background-color: var(--surface-signal);
    border-color: var(--surface-transparent);
}

.button:active,
.control:active {
    translate: 0 var(--interaction-press-offset);
}

.button:active,
.control:active,
.button[aria-pressed="true"],
.control[aria-pressed="true"],
.button[aria-selected="true"],
.control[aria-selected="true"] {
    border-color: var(--border-signal);
}

.button[aria-invalid="true"],
.button.has-error,
.control[aria-invalid="true"],
.has-error .control {
    border-color: var(--border-error);
    border-style: double;
}

.button:is(
    [disabled],
    [aria-disabled="true"]
),
.control:is(
    [disabled],
    [aria-disabled="true"]
) {
    color: var(--text-secondary);
    background-color: var(--surface-primary);
    border-style: dashed;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration-line: line-through;
}

/* Busy controls require visible state text in markup and aria-busy="true". */
.button.is-busy[aria-busy="true"],
.control.is-busy[aria-busy="true"] {
    border-style: dashed;
    cursor: progress;
}

/* =========================================================
 * LINK AND ACTION-GROUP RUNTIME
 * ====================================================== */

.link {
    color: currentColor;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: var(--border-width-1);
    text-underline-offset: var(--space-link-underline-offset);
    text-decoration-skip-ink: auto;
}

@media (hover: hover) and (pointer: fine) {
    .link:hover {
        text-decoration-thickness: var(--border-width-2);
        text-underline-offset:
            var(--space-link-underline-offset-hover);
    }
}

.link__external-indicator {
    display: inline-block;
    margin-inline-start: var(--space-inline-xs);
    font-family: var(--font-technical);
    text-decoration-line: none;
}

.action-group {
    --cluster-gap: var(--space-action-group);

    align-items: center;
    inline-size: auto;
}

.action-group > :is(
    .button,
    .control,
    .link
) {
    flex: 0 1 auto;
}

/* =========================================================
 * FORM SPACING
 * ====================================================== */

.form-group {
    display: grid;
    gap: var(--space-stack-lg);
}

.field-unit {
    display: grid;
    gap: var(--space-label-to-control);
}

.field-help,
.field-error {
    margin-block: 0;
}

.field-error {
    font-weight: var(--phase-font-weight-emphasis);
    text-decoration-line: underline;
    text-decoration-style: solid;
}

/* =========================================================
 * INTERACTION AND STATUS STATE FOUNDATION
 * ====================================================== */

:where(
    .is-current,
    .is-selected,
    .is-disabled,
    .is-busy,
    .has-error,
    .has-warning,
    .has-success
) {
    border-inline-start:
        var(--state-boundary-width)
        solid
        var(--border-strong);
}

:where(
    .is-current,
    .is-selected
) {
    font-weight: var(--phase-font-weight-emphasis);
    text-decoration-line: underline;
    text-decoration-style: double;
}

.is-disabled:is(
    [disabled],
    [aria-disabled="true"]
) {
    color: var(--text-secondary);
    border-style: dashed;
    cursor: not-allowed;
    text-decoration-line: line-through;
}

.is-busy[aria-busy="true"] {
    border-style: dashed;
    cursor: progress;
}

.has-error {
    border-color: var(--border-error);
}

.has-warning {
    border-color: var(--border-warning);
    border-style: dashed;
}

.has-success {
    border-color: var(--border-success);
    border-style: double;
}

.error-summary {
    padding: var(--space-panel);
    border:
        var(--state-boundary-width)
        solid
        var(--border-error);
    border-radius: var(--phase-radius-surface);
}

.error-summary > :first-child,
.error-summary > :last-child {
    margin-block: 0;
}

.status-pair {
    display: grid;
    gap: var(--space-status-gap);
    margin-block: 0;
    padding: var(--space-status-inset);
    border:
        var(--border-width-1)
        solid
        var(--border-default);
    border-radius: var(--phase-radius-surface);
}

.status-pair__item {
    display: grid;
    gap: var(--space-status-gap);
    align-items: baseline;
}

.status-pair__namespace {
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    font-weight: var(--phase-font-weight-emphasis);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
}

.status-pair__value {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: var(--phase-font-weight-emphasis);
}

/* =========================================================
 * CONTENT GROUPING AND INFORMATION PRIMITIVES
 * ====================================================== */

.card {
    display: grid;
    gap: var(--space-card-section-gap);
    padding: var(--space-card);
    color: var(--text-primary);
    background-color: var(--surface-panel);
    border:
        var(--border-width-1)
        solid
        var(--border-subtle);
    border-radius: var(--phase-radius-surface);
}

.card > :where(
    .card__header,
    .card__body,
    .card__footer
) {
    display: grid;
    gap: var(--space-card-section-gap);
    min-inline-size: 0;
}

.card__title,
.card__body > :first-child,
.card__body > :last-child,
.card__footer > :first-child,
.card__footer > :last-child {
    margin-block: 0;
}

.card__media {
    display: grid;
    gap: var(--space-card-media-gap);
    margin: 0;
}

.card__media > :is(
    img,
    picture,
    video
) {
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: var(--media-failure-min-block);
    border-radius: var(--phase-radius-image);
    object-fit: cover;
}

.card__media > figcaption {
    margin-block: 0;
}

.card--evidence {
    border-inline-start-width: var(--state-boundary-width);
    border-inline-start-color: var(--border-strong);
}

.panel {
    display: grid;
    gap: var(--space-panel-section-gap);
    padding: var(--space-panel);
    color: var(--text-primary);
    background-color: var(--surface-panel);
    border:
        var(--border-width-1)
        solid
        var(--border-subtle);
    border-radius: var(--phase-radius-surface);
}

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

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

.panel--boundary,
.boundary-panel {
    padding: var(--space-disclosure);
    border:
        var(--border-width-0)
        solid
        var(--border-strong);
    border-inline-start-width: var(--border-width-2);
    border-radius: var(--phase-radius-structure);
}

.disclosure {
    display: grid;
    gap: var(--space-disclosure-content-gap);
    padding: var(--space-disclosure);
    color: var(--text-primary);
    background-color: var(--surface-panel);
    border:
        var(--border-width-1)
        solid
        var(--border-default);
    border-radius: var(--phase-radius-surface);
}

.disclosure__label {
    margin-block: 0;
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    font-weight: var(--phase-font-weight-emphasis);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
}

.disclosure > :last-child {
    margin-block-end: 0;
}

/*
 * Native details remains an independent interaction primitive. It must not be
 * used in place of the persistent truth-boundary disclosure above.
 */
.native-disclosure > summary {
    display: flex;
    align-items: center;
    min-block-size: var(--control-target-min);
    cursor: pointer;
}

.metadata {
    display: grid;
    gap: var(--space-metadata-gap);
    margin-block: 0;
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
}

.metadata__item {
    display: grid;
    gap: var(--space-metadata-pair-gap);
}

.metadata dt {
    font-weight: var(--phase-font-weight-emphasis);
}

.metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.evidence-tag,
.data-status {
    display: inline-flex;
    gap: var(--space-status-gap);
    align-items: center;
    inline-size: fit-content;
    max-inline-size: 100%;
    padding-block: var(--space-evidence-tag-block);
    padding-inline: var(--space-evidence-tag-inline);
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
    border:
        var(--border-width-1)
        solid
        var(--border-default);
    border-radius: var(--phase-radius-interactive);
    overflow-wrap: anywhere;
}

/* =========================================================
 * DIVIDERS AND MEDIA BOUNDARIES
 * ====================================================== */

.divider {
    border: 0;
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-subtle);
}

.divider--strong {
    border-block-start-color: var(--border-strong);
}

.divider--inverse {
    border-block-start-color: var(--border-inverse);
}

.media-frame {
    position: relative;
    overflow: clip;
    max-inline-size: 100%;
    border-radius: var(--phase-radius-image);
}

.media-frame > :is(
    img,
    video,
    picture
) {
    max-inline-size: 100%;
}

.media-frame > img {
    inline-size: 100%;
    min-block-size: var(--media-failure-min-block);
}

.media {
    display: grid;
    gap: var(--space-card-media-gap);
    min-inline-size: 0;
    margin: 0;
}

.media__frame {
    position: relative;
    overflow: clip;
    max-inline-size: 100%;
    min-block-size: var(--media-failure-min-block);
    background-color: var(--surface-panel);
    border:
        var(--border-width-1)
        solid
        var(--border-subtle);
    border-radius: var(--phase-radius-image);
}

.media__frame > :is(
    picture,
    svg
),
.media__image {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
}

.media__caption {
    display: grid;
    gap: var(--space-stack-xs);
    margin-block: 0;
}

.media__credit {
    color: var(--text-secondary);
    font-family: var(--font-technical);
    font-size: var(--type-technical-size);
    line-height: var(--type-technical-line);
    letter-spacing: var(--type-technical-tracking);
}

.media__description {
    max-inline-size: var(--phase-type-body-measure);
    margin-block: 0;
}

.media.is-media-failed .media__frame {
    min-block-size: 0;
    block-size: 0;
    visibility: hidden;
    border: 0;
}