/*
 * Publishing workspace
 *
 * This layer owns deployment-specific layout and overflow behaviour. Shared
 * controls, colour, typography, and elevation continue to come from the
 * central Xava design-system stylesheets.
 */

.xava-deploy-page {
    --xava-deploy-footer-offset: var(--xava-ui-space-2, .5rem);
    min-width: 0;
}

.xava-environment-runs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xava-ui-space-2, .5rem);
}

.xava-environment-runs > span {
    color: var(--xava-ui-muted);
}

.xava-environment-runs .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--xava-ui-space-2, .5rem);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
    max-width: 100%;
}

.xava-environment-runs [aria-pressed="true"] {
    border-color: var(--xava-ui-primary);
    background: var(--xava-ui-surface-raised);
}

.xava-deploy-page :where(
    .xava-ui-page-content,
    .xava-deploy-workspace,
    .xava-deploy-sidebar,
    .xava-deploy-main,
    .xava-deploy-context,
    .xava-target-toolbar,
    .xava-target-filters,
    .xava-target-list,
    .xava-target-row,
    .xava-target-body,
    .xava-target-meta,
    .xava-target-row-actions,
    .xava-publish-footer,
    .xava-run-monitor) {
    min-width: 0;
    max-width: 100%;
}

.xava-deploy-page .xava-deploy-workspace {
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
}

.xava-deploy-page .xava-deploy-workspace.has-run-monitor {
    grid-template-columns: minmax(34rem, 1fr) minmax(23rem, 29rem);
}

/*
 * Self-sizing, not track-counted.
 *
 * This used to be `grid-template-rows` with seven explicit tracks while the
 * element's child count varies with `@if (CanUseTestSource)` and the
 * DeploymentsRun authorization - and AuthorizeView emits no wrapper, so the
 * footer is a direct child. With more children than tracks the `minmax(0, 1fr)`
 * landed on the wrong row, the target list grew unbounded, and the publish
 * footer fell into an implicit row below the clipped area: the primary action
 * on the page was pushed off-screen.
 *
 * A flex column cannot fall out of step with the markup. The list takes the
 * slack, the footer keeps its height and sticks to the bottom of the scroll
 * area, and adding a section can no longer displace them.
 */
.xava-deploy-page .xava-deploy-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.xava-deploy-page .xava-target-list {
    flex: 1 1 auto;
    min-height: 0;
    /* Takes the space the workspace has left rather than a slice of the
       viewport. The 52dvh cap plus the chrome above it overran the fold, which
       is what kept pushing the footer off-screen. */
    max-height: none;
}

/*
 * A real height chain, scoped to this page with :has() so no other page is
 * affected. Without it the workspace has nothing to measure against and falls
 * back to viewport arithmetic, and a `position: sticky` footer is inert
 * regardless: a sticky box cannot be offset past its containing block, and the
 * footer is the last child, so its travel room is the container's padding.
 *
 * Flex rather than explicit grid rows on purpose - XavaPageShell emits a
 * variable number of children (breadcrumbs, context, header, tabs), and
 * counting them is the mistake that put the footer in an implicit row.
 */
.xava-page-pad:has(> .xava-deploy-page) {
    height: 100%;
    min-height: 0;
}

.xava-ui-page-shell.xava-deploy-page {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.xava-deploy-page > .xava-ui-page-content {
    flex: 1 1 auto;
    min-height: 0;
}

.xava-deploy-page .xava-deploy-workspace,
.xava-deploy-page .xava-deploy-main {
    height: 100%;
    min-height: 0;
}

.xava-deploy-page .xava-publish-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 30;
}

.xava-publish-environment {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--xava-ui-space-4, 1rem);
    padding-bottom: var(--xava-ui-space-3, .75rem);
    border-bottom: 1px solid var(--xava-ui-border);
}

.xava-publish-environment label {
    min-width: min(100%, 25rem);
    display: grid;
    gap: var(--xava-ui-space-1, .25rem);
}

.xava-publish-environment label > span {
    color: var(--xava-ui-muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xava-publish-environment .form-select {
    color: var(--xava-ui-text);
    font-size: .95rem;
    font-weight: 750;
}

.xava-publish-environment small {
    color: var(--xava-ui-muted);
}

/* The one sentence worth keeping from the old "desired outcome" panel, now
   inside the collapsed reference drawer instead of costing 75px permanently. */
.xava-deploy-settings-note {
    margin: 0 0 var(--xava-ui-space-3, .75rem);
    color: var(--xava-ui-muted);
    font-size: .78rem;
}

.xava-release-outcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xava-ui-space-4, 1rem);
    padding: var(--xava-ui-space-3, .75rem) 0;
    border-bottom: 1px solid var(--xava-ui-border);
}

.xava-release-outcome h2 {
    margin: .12rem 0;
    color: var(--xava-ui-text);
    font-size: .95rem;
}

.xava-release-outcome p {
    margin: 0;
    color: var(--xava-ui-muted);
    font-size: .76rem;
}

.xava-capability-group {
    display: grid;
    gap: .34rem;
    padding-block: .3rem .55rem;
}

.xava-capability-group + .xava-capability-group {
    border-top: 1px solid var(--xava-ui-border);
}

/*
 * The target list is a bounded scroller, so a partly-scrolled row used to slide
 * under the toolbar with nothing to say content continued above it. The group
 * header stays put while its targets scroll beneath, and the inset shadow on
 * the list gives the edge somewhere to disappear to.
 */
.xava-capability-group > header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--xava-ui-space-3, .75rem);
    padding: .3rem .2rem;
    background: var(--xava-ui-surface);
}

.xava-deploy-page .xava-target-list {
    border-top: 1px solid var(--xava-ui-border);
}

.xava-capability-group > header > div {
    display: grid;
    gap: .05rem;
}

.xava-capability-group > header strong {
    color: var(--xava-ui-text);
    font-size: .82rem;
}

.xava-capability-group > header small,
.xava-capability-group > header > span {
    color: var(--xava-ui-muted);
    font-size: .7rem;
}

.xava-deploy-page .xava-deploy-sidebar {
    min-width: 0;
}

.xava-deploy-page .xava-deploy-env-list {
    min-width: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.xava-deploy-page .xava-deploy-env {
    min-width: 0;
}

.xava-deploy-page .xava-deploy-env-name,
.xava-deploy-page .xava-deploy-env-name > *,
.xava-deploy-page .xava-deploy-selected-heading > div:first-child {
    min-width: 0;
}

.xava-deploy-page .xava-target-list {
    /*
     * Keep every target at its intrinsic height inside the bounded scrolling
     * list. Auto tracks can otherwise shrink mobile rows to their 58px
     * minimum while their wrapped content and action grid paint across the
     * following targets.
     */
    grid-auto-rows: max-content;
    scroll-padding-block: var(--xava-ui-space-3, .75rem) 7rem;
    overscroll-behavior: contain;
}

.xava-deploy-page .xava-target-row {
    min-width: 0;
}

.xava-deploy-page .xava-target-check {
    min-width: 0;
}

.xava-deploy-page .xava-target-body {
    width: 100%;
    min-width: 0;
}

.xava-deploy-page .xava-target-body .xava-target-meta {
    min-width: 0;
    flex-wrap: wrap;
}

.xava-deploy-page .xava-target-meta > *,
.xava-deploy-page .xava-target-identity,
.xava-deploy-page .xava-target-identity > * {
    min-width: 0;
}

.xava-deploy-page .xava-target-meta small {
    flex: 1 1 10rem;
}

.xava-deploy-page .xava-target-row-actions {
    min-width: max-content;
    flex-wrap: wrap;
}

.xava-deploy-page .xava-publish-footer {
    max-width: 100%;
}

.xava-deploy-page .xava-publish-footer-summary {
    flex: 1 1 auto;
}

.xava-deploy-page .xava-publish-footer-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.xava-deploy-page .xava-run-monitor {
    max-width: 100vw;
}

/*
 * Deployment drawers and legacy deployment dialogs share the same intrinsic
 * sizing safeguards while the publishing screen migrates to XavaDrawer.
 */
.xava-deploy-page :where(
    .xava-ui-drawer,
    .xava-target-detail-drawer,
    .xava-deploy-config.is-popup) {
    box-sizing: border-box;
    max-width: 100vw;
    min-width: 0;
}

.xava-deploy-page .xava-ui-drawer {
    overflow: hidden;
}

.xava-deploy-page :where(
    .xava-ui-drawer-header,
    .xava-ui-drawer-heading,
    .xava-ui-drawer-body,
    .xava-ui-drawer-footer,
    .xava-target-detail-header,
    .xava-target-detail-body,
    .xava-target-detail-actions,
    .xava-inline-form,
    .xava-config-file-editor,
    .xava-config-file-row,
    .xava-config-editor-shell) {
    min-width: 0;
    max-width: 100%;
}

.xava-deploy-page .xava-ui-drawer-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.xava-deploy-page .xava-ui-drawer-body :where(.row, .row > *) {
    min-width: 0;
}

.xava-deploy-page :where(
    .xava-deploy-paths,
    .xava-target-paths,
    .xava-target-facts) {
    min-width: 0;
}

.xava-deploy-page :where(
    .xava-deploy-paths code,
    .xava-target-paths code,
    .xava-target-detail-body code) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.xava-deploy-page .xava-config-editor-shell {
    width: 100%;
    overflow: hidden;
}

.xava-deploy-page textarea.xava-config-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    overflow-wrap: normal;
    word-break: normal;
    white-space: pre;
}

.xava-deploy-page .xava-config-preview-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
    overflow-wrap: normal;
    word-break: normal;
    white-space: pre;
}

.xava-deploy-page .xava-ui-drawer-footer {
    min-width: 0;
}

.xava-deploy-page .xava-ui-drawer-footer > :where(
    .xava-actions,
    .xava-form-actions) {
    min-width: 0;
    margin: 0;
}

/*
 * Publishing configuration editor
 *
 * Business fields stay local to the page. Structure, rhythm, disclosure, and
 * action placement are defined here so future deployment editors use the same
 * drawer language.
 */
.xava-deployment-editor-drawer .xava-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--xava-ui-space-5, 1.25rem);
}

.xava-deployment-editor-section {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--xava-ui-space-4, 1rem);
}

.xava-deployment-editor-drawer :where(.row, .row > *) {
    min-width: 0;
    max-width: 100%;
}

.xava-deployment-editor-section-heading {
    margin: 0;
    padding-bottom: var(--xava-ui-space-3, .75rem);
    border-bottom: 1px solid var(--xava-ui-border);
    color: var(--xava-ui-text);
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.xava-deployment-config-disclosure {
    padding: 0;
    overflow: clip;
    transition:
        border-color var(--xava-ui-transition),
        background-color var(--xava-ui-transition);
}

.xava-deployment-config-disclosure[open] {
    border-color: color-mix(in srgb, var(--xava-ui-primary) 42%, var(--xava-ui-border));
    background: color-mix(in srgb, var(--xava-ui-primary) 3%, var(--xava-ui-surface-raised));
}

.xava-deployment-config-summary {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--xava-ui-space-3, .75rem);
    padding: var(--xava-ui-space-3, .75rem) var(--xava-ui-space-4, 1rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.xava-deployment-config-summary::-webkit-details-marker {
    display: none;
}

.xava-deployment-config-summary::before {
    content: "";
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--xava-ui-muted);
    border-bottom: 2px solid var(--xava-ui-muted);
    transform: rotate(-45deg);
    transition: transform var(--xava-ui-transition);
}

.xava-deployment-config-disclosure[open] > .xava-deployment-config-summary::before {
    transform: rotate(45deg) translate(-.1rem, -.1rem);
}

.xava-deployment-config-summary:hover {
    background: color-mix(in srgb, var(--xava-ui-primary) 6%, transparent);
}

.xava-deployment-config-summary:focus-visible {
    outline: 0;
    box-shadow: var(--xava-ui-focus-ring-inset);
}

.xava-deployment-config-summary-copy {
    min-width: 0;
    display: grid;
    gap: var(--xava-ui-space-1, .25rem);
}

.xava-deployment-config-summary-copy strong {
    overflow: hidden;
    color: var(--xava-ui-text);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-deployment-config-summary-meta {
    color: var(--xava-ui-muted);
    font-size: .75rem;
}

.xava-deployment-config-fields {
    min-width: 0;
    padding:
        var(--xava-ui-space-4, 1rem)
        var(--xava-ui-space-4, 1rem)
        var(--xava-ui-space-5, 1.25rem);
    border-top: 1px solid var(--xava-ui-border);
}

/*
 * Medium desktop / compact shell (approximately 1,275 px viewport with the
 * application rail present): give status metadata and actions separate rows.
 */
@media (max-width: 1320px) {
    .xava-deploy-page .xava-target-row {
        grid-template-areas:
            "select content"
            ". actions";
        grid-template-columns: 1.4rem minmax(0, 1fr);
        align-items: start;
    }

    .xava-deploy-page .xava-target-check {
        grid-area: select;
    }

    .xava-deploy-page .xava-target-body {
        grid-area: content;
        grid-template-columns: minmax(9rem, .7fr) minmax(0, 1.3fr);
    }

    .xava-deploy-page .xava-target-row-actions {
        width: 100%;
        min-width: 0;
        grid-area: actions;
        justify-content: flex-end;
    }
}

/*
 * Tablet / narrow application content: replace the squeezed two-column
 * workspace with an environment rail above a bounded target workbench.
 */
@media (max-width: 1120px) {
    .xava-deploy-page .xava-deploy-workspace,
    .xava-deploy-page .xava-deploy-workspace.has-run-monitor {
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .xava-deploy-page .xava-deploy-sidebar,
    .xava-deploy-page .xava-deploy-main {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .xava-deploy-page .xava-deploy-sidebar {
        grid-template-rows: auto auto;
        max-height: none;
        overflow: hidden;
    }

    .xava-deploy-page .xava-deploy-env-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(13rem, 15rem);
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-block-end: var(--xava-ui-space-2, .5rem);
        scroll-padding-inline: var(--xava-ui-space-2, .5rem);
        scroll-snap-type: inline proximity;
    }

    .xava-deploy-page .xava-deploy-env {
        width: auto;
        min-width: 0;
        scroll-snap-align: start;
    }

    .xava-deploy-page .xava-deploy-main {
        grid-template-rows: auto auto auto auto auto;
        overflow: visible;
    }

    .xava-deploy-page .xava-target-list {
        max-height: min(58dvh, 42rem);
        overflow: auto;
    }

    .xava-deploy-page .xava-publish-footer {
        position: sticky;
        z-index: 30;
        bottom: var(--xava-deploy-footer-offset);
    }
}

@media (max-width: 900px) {
    .xava-deploy-page {
        --xava-deploy-footer-offset:
            calc(var(--surux-mobile-nav-height, 0px) + env(safe-area-inset-bottom) + var(--xava-ui-space-2, .5rem));
        padding-bottom:
            calc(var(--surux-mobile-nav-height, 0px) + env(safe-area-inset-bottom) + var(--xava-ui-space-4, 1rem));
    }

    .xava-deploy-page .xava-target-list {
        max-height: min(55dvh, 38rem);
    }

    .xava-deploy-page .xava-run-monitor {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .xava-deploy-page .xava-deploy-env-list {
        grid-auto-columns: minmax(12.5rem, 76vw);
    }

    .xava-deploy-page .xava-target-row {
        grid-template-areas: none;
        grid-template-columns: 1.25rem minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: start;
        align-items: start;
    }

    .xava-deploy-page .xava-target-check {
        grid-column: 1;
        grid-row: 1;
    }

    .xava-deploy-page .xava-target-body {
        grid-column: 2;
        grid-row: 1;
    }

    .xava-deploy-page .xava-target-filters {
        align-items: stretch;
    }

    .xava-deploy-page .xava-target-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .xava-deploy-page .xava-target-body .xava-target-meta {
        overflow: visible;
    }

    .xava-deploy-page .xava-target-meta small {
        flex-basis: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .xava-deploy-page .xava-target-row-actions {
        width: 100%;
        min-width: 0;
        grid-column: 2;
        grid-row: 2;
        justify-content: flex-start;
    }

    .xava-deploy-page .xava-target-row-actions .xava-target-detail-button {
        width: auto;
        min-width: 2.75rem;
        margin-left: auto;
        overflow: visible;
        color: inherit;
    }

    .xava-deploy-page .xava-target-row-actions .xava-target-detail-button::after {
        content: none;
    }

    .xava-deploy-page .xava-publish-footer {
        align-items: stretch;
    }

    .xava-deploy-page .xava-publish-footer-summary,
    .xava-deploy-page .xava-publish-footer-actions {
        width: 100%;
    }

    .xava-deploy-page .xava-publish-footer-summary {
        align-items: flex-start;
    }

    .xava-deploy-page .xava-publish-footer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xava-deploy-page .xava-publish-footer-actions > * {
        width: 100%;
        min-width: 0;
    }

    .xava-deploy-page :where(
        .xava-ui-drawer,
        .xava-target-detail-drawer,
        .xava-deploy-config.is-popup.is-target-drawer) {
        width: 100%;
        max-width: none;
    }

    .xava-deploy-page .xava-config-file-heading,
    .xava-deploy-page .xava-target-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-deploy-page .xava-config-file-heading-actions {
        justify-content: flex-start;
    }

    .xava-deployment-editor-drawer .xava-check-cell {
        align-items: center;
        flex-wrap: wrap;
        padding-top: var(--xava-ui-space-2, .5rem);
    }

    .xava-deployment-editor-drawer .xava-check-cell label {
        margin-right: var(--xava-ui-space-2, .5rem);
        white-space: nowrap;
    }

    .xava-deploy-page textarea.xava-config-content {
        min-height: 16rem;
        max-height: 52dvh;
    }
}

@media (max-width: 560px) {
    .xava-deploy-page .xava-target-row {
        gap: var(--xava-ui-space-2, .5rem);
        padding: var(--xava-ui-space-3, .75rem);
    }

    .xava-deploy-page .xava-target-row-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xava-deploy-page .xava-target-row-actions > * {
        width: 100%;
        min-width: 0;
    }

    .xava-deploy-page .xava-target-row-actions .xava-target-detail-button {
        width: 100%;
        grid-column: 1 / -1;
        margin-left: 0;
        justify-self: stretch;
    }

    .xava-deploy-page .xava-publish-footer {
        position: static;
        gap: var(--xava-ui-space-2, .5rem);
        padding: var(--xava-ui-space-3, .75rem);
    }

    .xava-deploy-page .xava-publish-footer-summary {
        align-items: center;
    }

    .xava-deploy-page .xava-publish-footer-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .xava-deploy-page .xava-publish-footer-actions :where(.btn, .xava-ui-button) {
        min-height: 2.75rem;
    }

    .xava-deploy-page .xava-ui-drawer-header,
    .xava-deploy-page .xava-ui-drawer-body {
        padding-inline: var(--xava-ui-space-3, .75rem);
    }

    .xava-deploy-page .xava-ui-drawer-footer {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        align-items: stretch;
        padding:
            var(--xava-ui-space-3, .75rem)
            var(--xava-ui-space-3, .75rem)
            max(var(--xava-ui-space-3, .75rem), env(safe-area-inset-bottom));
    }

    .xava-deploy-page .xava-ui-drawer-footer > :where(
        .xava-actions,
        .xava-form-actions) {
        width: 100%;
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    }

    .xava-deploy-page .xava-ui-drawer-footer :where(
        .btn,
        .xava-ui-button) {
        width: 100%;
        min-width: 0;
        min-height: 2.75rem;
    }

    .xava-deploy-page .xava-target-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: max(var(--xava-ui-space-3, .75rem), env(safe-area-inset-bottom));
    }

    .xava-deploy-page .xava-target-detail-actions > * {
        width: 100%;
        min-width: 0;
    }

    .xava-deploy-page .xava-config-file-editor,
    .xava-deploy-page .xava-config-file-row {
        padding: var(--xava-ui-space-2, .5rem);
    }
}


/* The monitor has four rows in both views; logs own their toolbar and scroll area. */
.xava-deploy-page .xava-run-monitor {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-height: 0;
}

.xava-run-monitor .xava-run-overall { padding: .85rem; gap: .7rem; }
.xava-run-monitor .xava-run-overall-heading { align-items: center; flex-wrap: wrap; }
.xava-run-overall-heading > div { display: grid; gap: .25rem; }
.xava-run-overall-heading small { color: var(--xava-ui-muted); font-size: .75rem; }
.xava-run-monitor .xava-run-elapsed { text-align: right; margin-left: auto; }
.xava-run-elapsed > span { font-size: .68rem; color: var(--xava-ui-muted); text-transform: uppercase; letter-spacing: .06em; }
.xava-run-monitor .xava-run-elapsed > strong { font: 600 1.3rem var(--xava-ui-font-mono); font-variant-numeric: tabular-nums; }
.xava-run-monitor .xava-run-overall progress { appearance: none; height: .4rem; border: 0; border-radius: 999px; overflow: hidden; }
.xava-run-overall progress::-webkit-progress-bar { background: var(--xava-ui-border); }
.xava-run-overall progress::-webkit-progress-value { background: var(--xava-ui-primary); border-radius: 999px; }
.xava-run-overall progress::-moz-progress-bar { background: var(--xava-ui-primary); border-radius: 999px; }

.xava-run-activity { height: .4rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--xava-ui-primary) 15%, transparent); }
.xava-run-activity > span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--xava-ui-primary); animation: xava-deployment-working 1.8s ease-in-out infinite; }
.xava-run-activity.is-target { height: .2rem; margin: .15rem 0; }
@keyframes xava-deployment-working { from { transform: translateX(-110%); } to { transform: translateX(300%); } }

.xava-run-monitor .xava-target-progress-list { gap: .65rem; padding: .75rem; }
.xava-run-monitor .xava-target-progress { gap: .55rem; padding: .85rem; }
.xava-run-monitor .xava-target-progress-heading { align-items: baseline; flex-wrap: wrap; }
.xava-run-monitor .xava-target-progress-heading strong { font-size: .9rem; }
.xava-run-monitor .xava-target-progress-heading span { font-family: var(--xava-ui-font-mono); font-size: .75rem; font-variant-numeric: tabular-nums; }
.xava-run-monitor .xava-target-progress-stage strong { font-size: .8rem; }
.xava-run-monitor .xava-target-progress-stage .spinner-border { width: .85rem; height: .85rem; border-width: 2px; }
.xava-run-monitor .xava-target-progress p { font-size: .76rem; line-height: 1.5; }

.xava-run-log-view { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; }
.xava-run-monitor .xava-progress-log-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .6rem; padding: .75rem; background: var(--xava-ui-surface); }
.xava-progress-filter { display: grid; gap: .3rem; min-width: 0; color: var(--xava-ui-muted); font-size: .72rem; }
.xava-progress-filter select { min-width: 0; width: 100%; }
.xava-progress-log-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; grid-column: 1 / -1; }
.xava-run-monitor .xava-progress-follow { margin: 0; font-size: .75rem; }
.xava-progress-log-count { grid-column: 1 / -1; font-size: .68rem; color: var(--xava-ui-muted); }
.xava-run-monitor .xava-progress-log-list { min-width: 0; min-height: 0; padding: .25rem .75rem .75rem; overflow: auto; }
.xava-run-monitor .xava-progress-log-list .xava-progress-line { width: 100%; min-width: 0; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .3rem .65rem; padding: .65rem 0; font-size: .72rem; line-height: 1.5; }
.xava-run-monitor .xava-progress-log-list .xava-progress-line time { font-variant-numeric: tabular-nums; color: var(--xava-ui-muted); }
.xava-run-monitor .xava-progress-log-list .xava-progress-line strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.xava-run-monitor .xava-progress-log-list .xava-progress-line > span { grid-column: 1 / -1; white-space: pre-wrap; overflow-wrap: anywhere; }
.xava-progress-log-empty { padding: 1rem .25rem; color: var(--xava-ui-muted); font-family: var(--xava-ui-font-body, sans-serif); }

@media (prefers-reduced-motion: reduce) {
    .xava-run-activity > span { animation: none; transform: translateX(90%); }
}

/*
 * Publish shortcuts
 *
 * Saved multi-environment publishes. The numbered environment list is the
 * run order, so the number is drawn from a counter rather than typed into the
 * markup - it cannot disagree with the order the environments actually run in.
 */

.xava-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: var(--xava-ui-space-4, 1rem);
    align-items: start;
}

.xava-shortcut-card,
.xava-shortcut-run {
    min-width: 0;
}

.xava-shortcut-card .xava-ui-surface-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xava-ui-space-2, .5rem);
}

.xava-shortcut-meta {
    margin: 0 0 var(--xava-ui-space-2, .5rem);
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-sm, .82rem);
}

.xava-shortcut-card .xava-ui-surface-footer .xava-shortcut-meta {
    margin: 0;
}

.xava-shortcut-envs,
.xava-shortcut-run-envs,
.xava-shortcut-order-list {
    display: grid;
    gap: var(--xava-ui-space-2, .5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: xava-shortcut-step;
}

.xava-shortcut-env,
.xava-shortcut-run-env,
.xava-shortcut-order-item {
    position: relative;
    display: grid;
    gap: var(--xava-ui-space-2, .5rem);
    min-width: 0;
    padding: var(--xava-ui-space-3, .75rem) var(--xava-ui-space-3, .75rem) var(--xava-ui-space-3, .75rem) 2.6rem;
    border: 1px solid var(--xava-ui-border);
    border-radius: var(--xava-ui-radius-sm, .5rem);
    background: color-mix(in srgb, var(--surux-raise) 44%, transparent);
    counter-increment: xava-shortcut-step;
}

.xava-shortcut-env::before,
.xava-shortcut-run-env::before,
.xava-shortcut-order-item::before {
    content: counter(xava-shortcut-step);
    position: absolute;
    top: var(--xava-ui-space-3, .75rem);
    left: var(--xava-ui-space-3, .75rem);
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--xava-ui-radius-pill, 999px);
    background: color-mix(in srgb, var(--xava-ui-primary) 16%, transparent);
    color: var(--xava-ui-text);
    font-size: var(--xava-ui-text-2xs, .68rem);
    font-weight: var(--xava-ui-weight-bold, 750);
    font-variant-numeric: tabular-nums;
}

.xava-shortcut-env.is-skipped {
    border-style: dashed;
    background: transparent;
}

.xava-shortcut-env.is-skipped::before {
    background: color-mix(in srgb, var(--xava-ui-warning) 16%, transparent);
}

.xava-shortcut-env-head,
.xava-shortcut-order-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xava-ui-space-2, .5rem);
}

.xava-shortcut-env-head > div,
.xava-shortcut-order-item > span:first-child {
    display: grid;
    min-width: 0;
}

.xava-shortcut-env-head small,
.xava-shortcut-order-item small {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-xs, .74rem);
    overflow-wrap: anywhere;
}

.xava-shortcut-targets {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.xava-shortcut-warning {
    margin: 0;
    color: color-mix(in srgb, var(--xava-ui-warning) 84%, var(--surux-hue-lift) 16%);
    font-size: var(--xava-ui-text-xs, .74rem);
}

.xava-shortcut-run {
    border-color: color-mix(in srgb, var(--xava-ui-border) 60%, rgba(var(--xava-ui-primary-rgb), .45));
}

.xava-shortcut-run .xava-target-progress-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    padding: 0;
    overflow: visible;
}

.xava-shortcut-run-log summary {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-xs, .74rem);
    cursor: pointer;
}

.xava-shortcut-run-log pre {
    max-height: 18rem;
    margin: var(--xava-ui-space-2, .5rem) 0 0;
    padding: var(--xava-ui-space-2, .5rem) var(--xava-ui-space-3, .75rem);
    overflow: auto;
    border: 1px solid var(--xava-ui-border);
    border-radius: var(--xava-ui-radius-sm, .5rem);
    background: var(--xava-ui-surface-muted);
    font-family: var(--xava-ui-font-mono);
    font-size: var(--xava-ui-text-2xs, .68rem);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xava-shortcut-editor-section {
    display: grid;
    gap: var(--xava-ui-space-3, .75rem);
    padding-bottom: var(--xava-ui-space-4, 1rem);
    margin-bottom: var(--xava-ui-space-4, 1rem);
    border-bottom: 1px solid var(--xava-ui-border);
}

.xava-shortcut-editor-section h3 {
    margin: 0;
    font-size: var(--xava-ui-text-md, .9rem);
    font-weight: var(--xava-ui-weight-bold, 750);
}

.xava-shortcut-env-picker {
    display: grid;
    gap: var(--xava-ui-space-2, .5rem);
    min-width: 0;
    margin: 0;
    padding: var(--xava-ui-space-3, .75rem);
    border: 1px solid var(--xava-ui-border);
    border-radius: var(--xava-ui-radius-sm, .5rem);
}

.xava-shortcut-env-picker legend {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--xava-ui-space-2, .5rem);
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--xava-ui-text-base, 1rem);
}

.xava-shortcut-env-picker legend > span:first-child {
    display: grid;
    min-width: 0;
}

.xava-shortcut-env-picker legend small {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-xs, .74rem);
}

.xava-shortcut-target-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: .35rem var(--xava-ui-space-3, .75rem);
}

.xava-shortcut-target-option {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin: 0;
    font-size: var(--xava-ui-text-sm, .82rem);
    cursor: pointer;
}

.xava-shortcut-target-option .form-check-input {
    flex: none;
    margin: 0;
}

.xava-shortcut-target-option small {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-2xs, .68rem);
}

/* Shortcut run: elapsed, remaining, targets and concurrency at a glance. */
.xava-shortcut-run-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: var(--xava-ui-space-2, .5rem);
    margin-bottom: var(--xava-ui-space-3, .75rem);
}

.xava-shortcut-run-stat {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: var(--xava-ui-space-2, .5rem) var(--xava-ui-space-3, .75rem);
    border: 1px solid var(--xava-ui-border);
    border-radius: var(--xava-ui-radius-sm, .5rem);
    background: color-mix(in srgb, var(--surux-raise) 44%, transparent);
}

.xava-shortcut-run-stat > span {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-2xs, .68rem);
    font-weight: var(--xava-ui-weight-bold, 750);
    letter-spacing: var(--xava-ui-tracking-wide, .08em);
    text-transform: uppercase;
}

.xava-shortcut-run-stat > strong {
    font: var(--xava-ui-weight-semibold, 650) var(--xava-ui-text-xl, 1.4rem) var(--xava-ui-font-mono);
    font-variant-numeric: tabular-nums;
    line-height: var(--xava-ui-leading-tight, 1.2);
}

.xava-shortcut-run-stat > small {
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-xs, .74rem);
    overflow-wrap: anywhere;
}

.xava-shortcut-run-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin: 0;
    color: var(--xava-ui-muted);
    font-size: var(--xava-ui-text-xs, .74rem);
    font-variant-numeric: tabular-nums;
}

.xava-shortcut-progress {
    height: .45rem;
    overflow: hidden;
    border-radius: var(--xava-ui-radius-pill, 999px);
    background: color-mix(in srgb, var(--xava-ui-primary) 15%, transparent);
}

.xava-shortcut-run-stats + .xava-shortcut-progress {
    margin-bottom: var(--xava-ui-space-4, 1rem);
}

.xava-shortcut-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--xava-ui-primary);
    transition: width 900ms linear;
}

.xava-shortcut-progress.is-compact {
    height: .2rem;
    margin: .15rem 0;
}

.xava-shortcut-progress.is-indeterminate > span {
    width: 35%;
    animation: xava-deployment-working 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .xava-shortcut-progress > span { transition: none; }
    .xava-shortcut-progress.is-indeterminate > span { animation: none; transform: translateX(90%); }
}

/*
 * Unchanged-source warning: the selected targets already run the commit the
 * source checkout is on. Advisory, so it reads as a warning line rather than a
 * callout, and it never disables the publish action.
 */
.xava-source-unchanged {
    display: block;
    margin: .25rem 0 0;
    padding-left: .6rem;
    border-left: 3px solid var(--xava-ui-warning);
    color: color-mix(in srgb, var(--xava-ui-warning) 84%, var(--surux-hue-lift) 16%);
    font-size: var(--xava-ui-text-xs, .74rem);
    line-height: var(--xava-ui-leading-snug, 1.4);
    white-space: normal;
}

.xava-publish-footer-summary span.xava-source-unchanged {
    color: color-mix(in srgb, var(--xava-ui-warning) 84%, var(--surux-hue-lift) 16%);
}