/* Shell metrics and the palette both live in css/xava.tokens.css now. They were
   declared here under [data-bs-theme="dark"], which outranks :root and would
   defeat any theme the token file tried to set. */

/* Phase 3: publishing workspace */
.xava-deploy-page {
    padding-bottom: 7.5rem;
}

.xava-deploy-sidebar {
    position: sticky;
    top: .5rem;
    max-height: calc(100vh - var(--surux-topbar-height) - 3rem);
    overflow: auto;
    scrollbar-width: thin;
}

.xava-deploy-main {
    position: relative;
}

.xava-deploy-test-source {
    position: sticky;
    top: .4rem;
    z-index: 12;
    box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .18);
}

.xava-target-toolbar {
    align-items: center;
    padding: .7rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .55rem;
    background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-sink) 6%);
}

.xava-target-filters {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .42rem;
}

.xava-target-filters label,
.xava-target-filters .form-control,
.xava-target-filters .form-select {
    min-width: 0;
}

.xava-target-filters .xava-search-field {
    flex: 1 1 9rem;
}

.xava-target-filters .form-select {
    width: auto;
    min-width: 7.25rem;
}

.xava-target-list {
    max-height: clamp(18rem, 52vh, 42rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: .2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--surux-primary-rgb), .48) color-mix(in srgb, var(--surux-raise) 73%, transparent);
}

.xava-target-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: .62rem .68rem;
}

.xava-target-body {
    cursor: pointer;
}

.xava-target-detail-button {
    align-self: center;
}

.xava-publish-dock {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 55;
    width: min(58rem, calc(100vw - var(--surux-sidebar-width) - 3rem));
    min-height: 4.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem .82rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 52%, rgba(var(--surux-primary-rgb), .48));
    border-radius: .72rem;
    background:
        linear-gradient(135deg, rgba(var(--surux-primary-rgb), .12), transparent 45%),
        color-mix(in srgb, var(--surux-surface) 96%, var(--surux-sink) 4%);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
}

.xava-publish-dock-summary,
.xava-publish-dock-actions,
.xava-publish-target-preview {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.xava-publish-dock-summary {
    flex: 1 1 auto;
}

.xava-publish-dock-summary > div:not(.xava-publish-target-preview) {
    min-width: 7.5rem;
    display: grid;
    gap: .08rem;
}

.xava-publish-dock-summary strong {
    color: var(--surux-text);
    font-size: .9rem;
}

.xava-publish-dock-summary span:not(.xava-chip) {
    color: var(--surux-muted);
    font-size: .75rem;
}

.xava-publish-target-preview {
    flex-wrap: wrap;
}

.xava-publish-dock-actions {
    flex: 0 0 auto;
}

.xava-publish-dock-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.xava-step-label {
    display: block;
    margin-bottom: .2rem;
    color: var(--surux-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xava-prod-confirmation {
    width: min(48rem, calc(100vw - 2rem));
}

.xava-prod-targets {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    max-height: 9rem;
    overflow: auto;
    padding: .68rem;
    border: 1px solid var(--surux-border);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--surux-raise) 44%, transparent);
}

.xava-prod-challenge {
    display: grid;
    place-items: center;
    gap: .25rem;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--surux-danger) 42%, var(--surux-border));
    border-radius: .65rem;
    background: color-mix(in srgb, var(--surux-danger) 7%, color-mix(in srgb, var(--surux-raise) 36%, transparent));
    text-align: center;
}

.xava-prod-challenge span {
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xava-prod-challenge strong {
    color: color-mix(in srgb, var(--surux-danger) 78%, var(--surux-hue-lift) 22%);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: clamp(2.4rem, 8vw, 4rem);
    letter-spacing: .12em;
    line-height: 1.1;
}

.xava-prod-challenge p {
    margin: .25rem 0 0;
    color: var(--surux-muted);
}

.xava-prod-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.xava-prod-options .btn {
    min-height: 3.5rem;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 1.05rem;
    font-weight: 850;
}

.xava-target-detail-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1080;
    width: min(40rem, 94vw);
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    border-left: 1px solid color-mix(in srgb, var(--surux-border) 58%, rgba(var(--surux-primary-rgb), .42));
    background:
        linear-gradient(145deg, rgba(var(--surux-primary-rgb), .08), transparent 34rem),
        color-mix(in srgb, var(--surux-surface) 97%, var(--surux-sink) 3%);
    box-shadow: -1.4rem 0 4rem rgba(0, 0, 0, .42);
    animation: xava-drawer-in 160ms ease-out;
}

.xava-target-detail-header,
.xava-target-detail-actions {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem;
}

.xava-target-detail-header {
    border-bottom: 1px solid var(--surux-border);
}

.xava-target-detail-header h2 {
    margin: 0 0 .45rem;
    color: var(--surux-text);
    font-size: 1.25rem;
    font-weight: 850;
}

.xava-target-detail-body {
    min-height: 0;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
    scrollbar-width: thin;
}

.xava-target-detail-section {
    display: grid;
    gap: .6rem;
}

.xava-target-detail-section h3 {
    margin: 0;
    color: var(--surux-text);
    font-size: .9rem;
    font-weight: 850;
}

.xava-target-runtime-summary {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem;
    border: 1px solid var(--surux-border);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
}

.xava-target-runtime-summary p {
    margin: 0;
    color: var(--surux-muted);
    overflow-wrap: anywhere;
}

.xava-target-detail-body .xava-target-paths {
    grid-template-columns: 1fr;
}

.xava-target-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.xava-target-facts span {
    display: grid;
    gap: .18rem;
    padding: .6rem;
    border: 1px solid var(--surux-border);
    border-radius: .48rem;
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-raise) 44%, transparent);
    font-size: .75rem;
}

.xava-target-facts strong {
    color: var(--surux-text);
    font-size: .88rem;
}

.xava-target-detail-actions {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--surux-border);
}

.xava-deploy-config.is-popup.is-target-drawer {
    inset: 0 0 0 auto;
    width: min(54rem, 96vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    transform: none;
    animation: xava-drawer-in 160ms ease-out;
}

@keyframes xava-drawer-in {
    from {
        opacity: .7;
        transform: translateX(2rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.xava-deploy-progress-dock {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1060;
    width: min(62rem, calc(100vw - var(--surux-sidebar-width) - 3rem));
    max-height: calc(100vh - var(--surux-topbar-height) - 2rem);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .5);
}

.xava-deploy-progress-dock.is-collapsed {
    bottom: 6.5rem;
    grid-template-rows: auto;
    max-height: none;
}

.xava-deploy-progress-dock.is-collapsed .xava-progress-header h2 {
    margin-top: .2rem;
}

@media (max-width: 900px) {
    .xava-deploy-page {
        padding-bottom: 10rem;
    }

    .xava-deploy-sidebar,
    .xava-deploy-test-source {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .xava-target-list {
        max-height: none;
        overflow: visible;
    }

    .xava-publish-dock {
        right: .65rem;
        bottom: calc(var(--surux-mobile-nav-height) + .55rem);
        left: .65rem;
        width: auto;
        z-index: 70;
    }

    .xava-deploy-progress-dock {
        right: .65rem;
        bottom: calc(var(--surux-mobile-nav-height) + .55rem);
        left: .65rem;
        width: auto;
        max-height: calc(100dvh - var(--surux-mobile-nav-height) - 1.2rem);
    }

    .xava-deploy-progress-dock.is-collapsed {
        bottom: calc(var(--surux-mobile-nav-height) + 8.2rem);
    }
}

@media (max-width: 720px) {
    .xava-target-toolbar,
    .xava-target-filters,
    .xava-publish-dock,
    .xava-publish-dock-summary,
    .xava-publish-dock-actions,
    .xava-target-detail-header,
    .xava-target-runtime-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-target-filters,
    .xava-target-filters label,
    .xava-target-filters .form-select,
    .xava-target-filters .btn,
    .xava-publish-dock-actions,
    .xava-publish-dock-actions .btn {
        width: 100%;
    }

    .xava-target-filters .xava-search-field {
        flex-basis: auto;
    }

    .xava-target-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .xava-target-detail-button {
        grid-column: 2;
        justify-self: start;
    }

    .xava-publish-target-preview {
        display: none;
    }

    .xava-publish-dock-summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xava-publish-dock-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .xava-target-detail-drawer,
    .xava-deploy-config.is-popup.is-target-drawer {
        width: 100vw;
        max-width: none;
    }

    .xava-target-facts {
        grid-template-columns: 1fr;
    }

    .xava-prod-options {
        gap: .4rem;
    }
}

/*
 * Bootstrap drawn from the Xava palette rather than from a second one.
 *
 * Bootstrap 5.3 ships 436 of these; ten were mapped, so most of what Bootstrap
 * painted still came from stock and could not follow a theme. These are the
 * ones the console actually renders through. Declared on :root so they resolve
 * against whichever theme the tokens have selected.
 */
:root {
    --bs-body-bg: var(--surux-app-bg);
    --bs-body-color: var(--surux-text);
    --bs-emphasis-color: var(--surux-text);
    --bs-secondary-color: var(--surux-muted);
    --bs-tertiary-bg: var(--surux-surface);
    --bs-secondary-bg: var(--surux-surface-2);
    --bs-border-color: var(--surux-border);
    --bs-border-color-translucent: var(--surux-border);
    --bs-primary: var(--surux-primary);
    --bs-primary-rgb: var(--surux-primary-rgb);
    --bs-link-color: var(--surux-primary);
    --bs-link-hover-color: var(--surux-primary-strong);
    --bs-code-color: var(--surux-code);
    --bs-success: var(--surux-success);
    --bs-warning: var(--surux-warning);
    --bs-danger: var(--surux-danger);
    --bs-heading-color: var(--surux-text);
}

html,
body {
    height: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
    background: var(--surux-app-bg);
    color: var(--surux-text);
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

a,
.btn-link {
    color: var(--surux-primary);
}

a:hover {
    color: color-mix(in srgb, var(--surux-primary) 80%, var(--surux-hue-lift) 20%);
}

h1:focus {
    outline: none;
}

code {
    color: var(--surux-code);
}

.text-muted,
.form-text {
    color: var(--surux-muted) !important;
}

.xava-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--surux-sidebar-width) minmax(0, 1fr);
    overflow: hidden;
}

.xava-sidebar {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: .9rem;
    background:
        linear-gradient(180deg, rgba(var(--surux-primary-rgb), .06), transparent 18rem),
        color-mix(in srgb, var(--surux-surface) 88%, var(--surux-sink) 12%);
    border-right: 1px solid var(--surux-border);
    box-shadow: .8rem 0 2.4rem rgba(0, 0, 0, .28);
}

.xava-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: var(--surux-topbar-height) minmax(0, 1fr);
}

.xava-topbar {
    min-width: 0;
    height: var(--surux-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.15rem;
    background: color-mix(in srgb, var(--surux-app-bg) 82%, var(--surux-sink) 18%);
    border-bottom: 1px solid var(--surux-border);
}

.xava-topbar-brand,
.xava-brand-home {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--surux-text);
    text-decoration: none;
}

.xava-topbar-brand:hover,
.xava-brand-home:hover {
    color: var(--surux-text);
}

.xava-topbar-wordmark,
.xava-brand-text {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .22rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.xava-topbar-wordmark strong,
.xava-brand-text strong {
    color: var(--surux-primary);
}

.xava-brand-home {
    height: 58px;
    padding: .2rem .25rem .95rem;
}

.xava-brand-text {
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
    font-size: 1.12rem;
}

.xava-brand-text strong {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.xava-logo-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xava-logo-mark-large {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.xava-logo-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.xava-logo-panel {
    fill: color-mix(in srgb, var(--surux-surface-2) 72%, var(--surux-sink) 28%);
    stroke: var(--surux-border);
    stroke-width: 1.5;
}

.xava-logo-back,
.xava-logo-front {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xava-logo-front {
    opacity: .96;
}

.xava-logo-light {
    fill: none;
    stroke: color-mix(in srgb, var(--surux-text) 88%, transparent);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .86;
}

.xava-logo-node {
    fill: var(--surux-primary);
}

.xava-topbar-meta {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--surux-muted);
    font-size: .84rem;
    white-space: nowrap;
}

.xava-topbar-meta strong {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 .65rem;
    border: 1px solid rgba(var(--surux-primary-rgb), .3);
    border-radius: 999px;
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .12);
    font-size: .78rem;
}

.xava-content {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--surux-primary-rgb), .55) color-mix(in srgb, var(--surux-raise) 91%, transparent);
}

.xava-page-pad {
    min-height: 100%;
    padding: 1.4rem;
}

.xava-page {
    display: grid;
    gap: 1.1rem;
}

.xava-login-page {
    min-height: calc(100vh - var(--surux-topbar-height) - 2.8rem);
    display: grid;
    align-items: center;
}

.xava-login-panel {
    width: min(100%, 34rem);
    display: grid;
    gap: 1.2rem;
    padding: 1.35rem;
    border: 1px solid var(--surux-border);
    border-radius: .72rem;
    background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 1.2rem 3.4rem rgba(0, 0, 0, .22);
}

.xava-login-mark {
    display: flex;
}

.xava-login-copy {
    display: grid;
    gap: .45rem;
}

.xava-login-copy p {
    margin: 0;
    color: var(--surux-primary);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.xava-login-copy h1 {
    margin: 0;
    color: var(--surux-text);
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.08;
}

.xava-login-button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    justify-content: center;
}

.xava-login-spinner {
    display: none;
}

.xava-login-button.xava-is-loading {
    pointer-events: none;
    opacity: .82;
}

.xava-login-button.xava-is-loading .xava-login-spinner {
    display: inline-block;
}

.xava-login-message {
    padding: .72rem .82rem;
    border: 1px solid rgba(var(--surux-primary-rgb), .28);
    border-radius: .52rem;
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .12);
    font-size: .88rem;
    line-height: 1.35;
}

.xava-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .1rem 0 .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .18));
}

.xava-header h1 {
    margin: 0;
    color: var(--surux-text);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
}

.xava-header p {
    margin: .35rem 0 0;
    color: var(--surux-muted);
}

.xava-nav {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .44rem;
    overflow-y: auto;
    padding: .75rem .1rem;
}

.xava-nav-section-label {
    padding: .35rem .75rem .4rem;
    color: var(--surux-primary);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.xava-nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .58rem .72rem;
    border: 1px solid transparent;
    border-radius: .58rem;
    color: var(--surux-muted);
    line-height: 1.25;
    text-decoration: none;
    transition: background var(--surux-transition), border-color var(--surux-transition), color var(--surux-transition);
}

.xava-nav-link:hover,
.xava-nav-link.active {
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .14);
    border-color: rgba(var(--surux-primary-rgb), .28);
}

.xava-nav-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .12);
}

.xava-nav-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.xava-nav-link.active .xava-nav-icon,
.xava-nav-link:hover .xava-nav-icon {
    color: var(--surux-hue-lift);
    background: rgba(var(--surux-primary-rgb), .38);
}

.xava-sidebar-foot {
    display: grid;
    gap: .25rem;
    padding: .85rem .75rem;
    border-top: 1px solid color-mix(in srgb, var(--surux-hue-lift) 8%, transparent);
    color: var(--surux-muted);
    font-size: .78rem;
}

.xava-sidebar-foot strong {
    color: var(--surux-text);
    font-size: .88rem;
}

.xava-metrics {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

/*
 * `.xava-card` had no rules in any stylesheet, so ten sections across
 * DocumentLifecycle, VisionModels and VisionStorage rendered as bare <section>
 * elements with no border, background or padding. It is the same thing as
 * `.xava-section`, so it is given the same treatment here rather than
 * restructured onto XavaSurface - all three pages are scheduled for shell
 * migration and would otherwise be reworked twice. Delete `.xava-card` from
 * these selectors when that lands.
 */
.xava-metric,
.xava-section,
.xava-card,
.xava-alert,
.xava-form {
    border: 1px solid var(--surux-border);
    border-radius: .58rem;
    background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 1.1rem 3.2rem rgba(0, 0, 0, .20);
}

.xava-metric {
    min-height: 92px;
    padding: .95rem 1rem;
}

/* A figure that was never queried reads as absent, not as zero. */
.xava-metric.is-unmeasured strong {
    color: var(--surux-muted);
}

.xava-metric-unmeasured-note {
    display: block;
    margin-top: .1rem;
    color: var(--surux-muted);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.xava-metric span {
    display: block;
    color: var(--surux-muted);
    font-size: .82rem;
}

.xava-metric strong {
    display: block;
    margin-top: .4rem;
    color: var(--surux-text);
    font-size: 1.72rem;
    line-height: 1;
}

.xava-health-text-success {
    color: color-mix(in srgb, var(--surux-success) 86%, var(--surux-hue-lift) 14%) !important;
}

.xava-health-text-warning {
    color: color-mix(in srgb, var(--surux-warning) 86%, var(--surux-hue-lift) 14%) !important;
}

.xava-health-text-danger {
    color: color-mix(in srgb, var(--surux-danger) 84%, var(--surux-hue-lift) 16%) !important;
}

.xava-section,
.xava-card {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.xava-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.xava-section-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.xava-section-heading p {
    margin: .18rem 0 0;
    color: var(--surux-muted);
    font-size: .86rem;
    line-height: 1.4;
}

.xava-section-heading a {
    font-weight: 700;
    text-decoration: none;
}

.xava-loading-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .22));
    border-radius: .62rem;
    background:
        linear-gradient(135deg, rgba(var(--surux-primary-rgb), .08), transparent 44%),
        color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 1.1rem 3rem rgba(0, 0, 0, .18);
}

.xava-loading-heading {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--surux-text);
}

.xava-loading-heading strong {
    font-size: .94rem;
}

.xava-spinner {
    width: 1.08rem;
    height: 1.08rem;
    display: inline-block;
    border: 2px solid rgba(var(--surux-primary-rgb), .24);
    border-top-color: var(--surux-primary);
    border-radius: 999px;
    animation: xava-spin .78s linear infinite;
}

.xava-loading-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}

.xava-loading-lines {
    display: grid;
    gap: .55rem;
}

.xava-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--surux-surface-2) 82%, var(--surux-raise) 4%);
}

.xava-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surux-hue-lift) 12%, transparent), transparent);
    animation: xava-shimmer 1.35s ease-in-out infinite;
}

.xava-skeleton-metric {
    min-height: 5.4rem;
}

.xava-skeleton-line {
    min-height: 2.6rem;
}

.xava-inline-busy {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
}

@keyframes xava-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes xava-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.table-responsive {
    border: 1px solid var(--surux-border);
    border-radius: .58rem;
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
}

.xava-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--surux-text);
    --bs-table-border-color: var(--surux-border);
    --bs-table-hover-bg: rgba(var(--surux-primary-rgb), .07);
    margin-bottom: 0;
    color: var(--surux-text);
    font-size: .92rem;
    vertical-align: middle;
}

.xava-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-color: color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .28));
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-surface) 92%, var(--surux-sink) 8%);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.xava-table tbody tr:hover {
    background: var(--bs-table-hover-bg);
}

.xava-table td,
.xava-table th {
    padding: .76rem .85rem;
}

.xava-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .58rem;
    border: 1px solid var(--surux-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surux-raise) 100%, transparent);
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.xava-chip-success {
    border-color: rgba(54, 228, 140, .38);
    background: rgba(54, 228, 140, .12);
    color: color-mix(in srgb, var(--surux-success) 88%, var(--surux-hue-lift) 12%);
}

.xava-chip-info {
    border-color: rgba(var(--surux-primary-rgb), .42);
    background: rgba(var(--surux-primary-rgb), .13);
    color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-hue-lift) 18%);
}

.xava-chip-warning {
    border-color: rgba(251, 191, 36, .42);
    background: rgba(251, 191, 36, .12);
    color: color-mix(in srgb, var(--surux-warning) 84%, var(--surux-hue-lift) 16%);
}

.xava-chip-danger {
    border-color: rgba(251, 113, 133, .42);
    background: rgba(251, 113, 133, .12);
    color: color-mix(in srgb, var(--surux-danger) 82%, var(--surux-hue-lift) 18%);
}

.xava-status-message {
    color: var(--surux-text);
    font-weight: 650;
}

.xava-backup-key-line {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .18rem 0;
}

.xava-deploy-page {
    gap: 1rem;
}

.xava-deploy-header-actions {
    justify-content: flex-end;
}

.xava-deploy-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .35rem;
    border: 1px solid var(--surux-border);
    border-radius: .62rem;
    background: color-mix(in srgb, var(--surux-surface) 82%, var(--surux-sink) 18%);
}

.xava-deploy-tab {
    min-height: 40px;
    padding: .55rem .95rem;
    border: 1px solid transparent;
    border-radius: .48rem;
    color: var(--surux-muted);
    background: transparent;
    font-weight: 800;
    transition: background var(--surux-transition), border-color var(--surux-transition), color var(--surux-transition);
}

.xava-deploy-tab:hover,
.xava-deploy-tab:focus-visible,
.xava-deploy-tab.is-active {
    border-color: color-mix(in srgb, var(--surux-border) 52%, rgba(var(--surux-primary-rgb), .48));
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .14);
}

.xava-deploy-workspace {
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.xava-deploy-sidebar,
.xava-deploy-main,
.xava-deploy-config,
.xava-deploy-runs,
.xava-mobile-packages {
    min-width: 0;
}

.xava-deploy-env-list,
.xava-target-list,
.xava-run-list {
    display: grid;
    gap: .58rem;
}

.xava-deploy-env {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: .5rem;
    padding: .72rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .18));
    border-radius: .52rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-raise) 51%, transparent);
    text-align: left;
    transition: border-color var(--surux-transition), background var(--surux-transition), transform var(--surux-transition);
}

.xava-deploy-env:hover,
.xava-deploy-env:focus-visible,
.xava-deploy-env.is-selected {
    border-color: rgba(var(--surux-primary-rgb), .58);
    background: rgba(var(--surux-primary-rgb), .12);
}

.xava-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background:
        radial-gradient(circle at 50% 18%, rgba(var(--surux-primary-rgb), .14), transparent 24rem),
        rgba(5, 7, 10, .78);
    backdrop-filter: blur(10px);
}

.xava-deploy-config.is-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1080;
    width: min(76rem, calc(100vw - 2rem));
    max-height: min(88vh, 58rem);
    overflow: auto;
    transform: translate(-50%, -50%);
    border-color: color-mix(in srgb, var(--surux-border) 64%, rgba(var(--surux-primary-rgb), .48));
    background:
        linear-gradient(145deg, rgba(var(--surux-primary-rgb), .08), transparent 34rem),
        color-mix(in srgb, var(--surux-surface) 94%, var(--surux-sink) 6%);
    box-shadow: 0 26px 92px rgba(0, 0, 0, .48);
    animation: xava-modal-in 140ms ease-out;
}

.xava-service-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1080;
    width: min(56rem, calc(100vw - 2rem));
    max-height: min(88vh, 56rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .85rem;
    padding: 1rem;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, var(--surux-border) 64%, rgba(var(--surux-primary-rgb), .48));
    border-radius: .72rem;
    background:
        linear-gradient(145deg, rgba(var(--surux-primary-rgb), .08), transparent 34rem),
        color-mix(in srgb, var(--surux-surface) 94%, var(--surux-sink) 6%);
    box-shadow: 0 26px 92px rgba(0, 0, 0, .48);
    animation: xava-modal-in 140ms ease-out;
}

.xava-service-modal-wide {
    width: min(76rem, calc(100vw - 2rem));
}

.xava-service-modal-header,
.xava-service-modal-footer {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.xava-service-modal-header h2 {
    margin: 0;
    color: var(--surux-text);
    font-size: 1.18rem;
    font-weight: 800;
}

.xava-service-modal-header p {
    margin: .25rem 0 0;
    color: var(--surux-muted);
}

.xava-service-modal-body {
    min-width: 0;
    overflow: auto;
    padding: .25rem .25rem .35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--surux-primary-rgb), .55) color-mix(in srgb, var(--surux-raise) 91%, transparent);
}

.xava-service-modal-footer {
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: .35rem;
    border-top: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .18));
}

@keyframes xava-modal-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + .45rem)) scale(.985);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.xava-deploy-env-name,
.xava-deploy-env-meta,
.xava-deploy-selected-meta,
.xava-target-body span {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .42rem;
}

.xava-deploy-env-name {
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
}

.xava-deploy-env-name strong,
.xava-target-body strong,
.xava-run-summary strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xava-deploy-env-name small,
.xava-deploy-env-host,
.xava-deploy-env-count,
.xava-target-body small,
.xava-run-status small,
.xava-run-summary span,
.xava-run-summary p,
.xava-target-paths span,
.xava-deploy-paths span,
.xava-target-toolbar span {
    color: var(--surux-muted);
    font-size: .78rem;
}

.xava-deploy-env-host,
.xava-deploy-env-count {
    overflow-wrap: anywhere;
}

.xava-deploy-selected-heading,
.xava-target-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.xava-target-toolbar h2 {
    margin: 0;
    color: var(--surux-text);
    font-size: 1.08rem;
    font-weight: 800;
}

.xava-deploy-paths {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xava-deploy-paths div,
.xava-target-paths div {
    min-width: 0;
    display: grid;
    gap: .22rem;
    padding: .58rem .65rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .16));
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 47%, transparent);
}

.xava-deploy-paths code,
.xava-target-paths code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xava-deploy-test-source {
    display: grid;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--surux-warning) 46%, var(--surux-border));
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-warning) 7%, color-mix(in srgb, var(--surux-raise) 47%, transparent));
}

.xava-deploy-test-source-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.xava-deploy-test-source-heading h3 {
    margin: 0 0 .16rem;
    color: var(--surux-text);
    font-size: .98rem;
    font-weight: 800;
}

.xava-deploy-test-source-heading span {
    color: var(--surux-muted);
    font-size: .78rem;
}

.xava-deploy-test-source .form-select {
    min-width: 0;
    color: var(--surux-text);
    border-color: color-mix(in srgb, var(--surux-warning) 35%, var(--surux-border));
    background-color: var(--surux-surface-2);
}

.xava-target-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(12rem, .8fr) minmax(18rem, 1.4fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-raise) 47%, transparent);
}

.xava-target-row.is-selected {
    border-color: rgba(var(--surux-primary-rgb), .52);
    background: rgba(var(--surux-primary-rgb), .10);
}

.xava-target-row.is-disabled {
    opacity: .68;
}

.xava-target-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.xava-target-body {
    min-width: 0;
    display: grid;
    gap: .28rem;
    border: 0;
    color: var(--surux-text);
    background: transparent;
    text-align: left;
}

.xava-target-body:disabled {
    cursor: not-allowed;
}

.xava-target-body:focus-visible {
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff);
    outline-offset: var(--xava-ui-focus-outline-offset, 2px);
}

.xava-target-paths {
    min-width: 0;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xava-deploy-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .58rem;
    padding-top: .25rem;
}

.xava-deploy-empty {
    padding: .72rem .8rem;
    border: 1px dashed color-mix(in srgb, var(--surux-border) 82%, rgba(var(--surux-primary-rgb), .18));
    border-radius: .5rem;
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-raise) 36%, transparent);
}

.xava-mobile-package-root {
    display: block;
    margin-top: .24rem;
    color: var(--surux-muted);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .76rem;
    overflow-wrap: anywhere;
}

.xava-mobile-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.xava-mobile-channel-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: .72rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .18));
    border-radius: .58rem;
    background: color-mix(in srgb, var(--surux-raise) 51%, transparent);
}

.xava-mobile-channel-card.is-dev {
    border-color: rgba(var(--surux-primary-rgb), .32);
}

.xava-mobile-channel-card.is-beta {
    border-color: rgba(251, 191, 36, .32);
}

.xava-mobile-channel-card.is-prod {
    border-color: rgba(54, 228, 140, .28);
}

.xava-mobile-channel-card.is-empty {
    opacity: .78;
}

.xava-mobile-channel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.xava-mobile-channel-state {
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 740;
}

.xava-mobile-channel-card h3 {
    margin: 0;
    color: var(--surux-text);
    font-size: 1rem;
    font-weight: 800;
}

.xava-mobile-channel-card p {
    margin: 0;
    color: var(--surux-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.xava-mobile-package-details {
    display: grid;
    gap: .45rem;
    margin: 0;
}

.xava-mobile-package-details div {
    min-width: 0;
    display: grid;
    gap: .1rem;
}

.xava-mobile-package-details dt {
    color: var(--surux-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.xava-mobile-package-details dd {
    margin: 0;
    color: var(--surux-text);
    overflow-wrap: anywhere;
}

.xava-mobile-hash {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .5rem .58rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, rgba(var(--surux-primary-rgb), .16));
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 47%, transparent);
}

.xava-mobile-hash span {
    color: var(--surux-muted);
    font-size: .72rem;
    font-weight: 800;
}

.xava-mobile-hash code {
    min-width: 0;
    color: var(--surux-text);
    overflow-wrap: anywhere;
}

.xava-mobile-download {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
}

.xava-mobile-qr-link {
    width: 8.2rem;
    display: grid;
    justify-items: center;
    gap: .38rem;
    padding: .5rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .2));
    border-radius: .58rem;
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-raise) 47%, transparent);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--surux-transition), background var(--surux-transition), color var(--surux-transition);
}

.xava-mobile-qr-link:hover,
.xava-mobile-qr-link:focus-visible {
    border-color: rgba(var(--surux-primary-rgb), .55);
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .1);
}

.xava-mobile-qr-link img {
    width: 7rem;
    height: 7rem;
    padding: .35rem;
    border-radius: .4rem;
    /* theme-literal: a QR code needs a white quiet zone to scan, whichever
       theme the page is in. */
    background: #fff;
}

.xava-filter-bar {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.xava-filter-bar label {
    display: grid;
    gap: .35rem;
}

.xava-filter-bar span {
    color: var(--surux-muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.xava-hosted-upload {
    display: grid;
    gap: .75rem;
}

.xava-hosted-file-picker {
    position: relative;
    min-height: 4.8rem;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .34));
    border-radius: .58rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-surface-2) 72%, rgba(var(--surux-primary-rgb), .08));
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.xava-hosted-file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.xava-hosted-file-description {
    max-width: 40rem;
    margin-top: .3rem;
    color: color-mix(in srgb, var(--surux-muted) 86%, var(--surux-hue-lift) 14%);
    font-size: .84rem;
    line-height: 1.45;
}

.xava-file-hash {
    color: var(--surux-text);
    overflow-wrap: anywhere;
}

.xava-files-table td:last-child {
    min-width: 18rem;
}

.xava-run-row {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: .85rem;
    padding: .72rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-raise) 47%, transparent);
}

.xava-run-row.is-success {
    border-color: rgba(54, 228, 140, .24);
}

.xava-run-row.is-failed {
    border-color: rgba(251, 113, 133, .30);
}

.xava-run-status,
.xava-run-summary {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: .32rem;
}

.xava-run-summary p {
    margin: 0;
    overflow-wrap: anywhere;
}

.xava-progress-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(0, 12, 20, .66);
    backdrop-filter: blur(6px);
}

.xava-progress-panel {
    width: min(62rem, 100%);
    max-height: min(46rem, calc(100vh - 2.5rem));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: .85rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 58%, rgba(var(--surux-primary-rgb), .42));
    border-radius: .66rem;
    background: color-mix(in srgb, var(--surux-surface) 92%, var(--surux-sink) 8%);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .38);
}

.xava-progress-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.xava-progress-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.xava-progress-header h2 {
    margin: .45rem 0 .2rem;
    color: var(--surux-text);
    font-size: 1.18rem;
    font-weight: 800;
}

.xava-progress-header p {
    margin: 0;
    color: var(--surux-muted);
    overflow-wrap: anywhere;
}

.xava-progress-running {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-hue-lift) 18%);
}

.xava-progress-log {
    min-height: 18rem;
    max-height: 30rem;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: .65rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .5rem;
    background: color-mix(in srgb, var(--surux-sink) 76%, var(--surux-surface-2) 24%);
}

.xava-progress-line {
    display: grid;
    grid-template-columns: 4.5rem 13rem minmax(0, 1fr);
    gap: .65rem;
    padding: .28rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--surux-raise) 64%, transparent);
    color: color-mix(in srgb, var(--surux-text) 92%, var(--surux-primary) 8%);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.4;
}

.xava-progress-line span {
    color: var(--surux-muted);
    white-space: nowrap;
}

.xava-progress-line strong {
    min-width: 0;
    color: color-mix(in srgb, var(--surux-primary) 82%, var(--surux-hue-lift) 18%);
    overflow-wrap: anywhere;
}

.xava-progress-line p {
    min-width: 0;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xava-progress-line.is-success strong {
    color: color-mix(in srgb, var(--surux-success) 84%, var(--surux-hue-lift) 16%);
}

.xava-progress-line.is-failed strong {
    color: color-mix(in srgb, var(--surux-danger) 84%, var(--surux-hue-lift) 16%);
}

.xava-copy-feedback {
    color: color-mix(in srgb, var(--surux-success) 82%, var(--surux-hue-lift) 18%);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.xava-copy-feedback.is-error {
    color: color-mix(in srgb, var(--surux-danger) 82%, var(--surux-hue-lift) 18%);
}

.xava-row-selected {
    outline: 1px solid rgba(var(--surux-primary-rgb), .32);
    outline-offset: -1px;
}

.xava-run-output-cell {
    min-width: min(36rem, 65vw);
}

.xava-run-message {
    color: var(--surux-muted);
}

.xava-output-panel {
    margin-top: .42rem;
}

.xava-output-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: .45rem;
}

.xava-output-panel summary {
    width: fit-content;
    cursor: pointer;
    color: var(--surux-primary);
    font-size: .78rem;
    font-weight: 800;
}

.xava-output-panel pre {
    max-width: 56rem;
    max-height: 22rem;
    margin: .45rem 0 0;
    overflow: auto;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .46rem;
    color: color-mix(in srgb, var(--surux-text) 92%, var(--surux-primary) 8%);
    background: color-mix(in srgb, var(--surux-sink) 72%, var(--surux-surface-2) 28%);
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.xava-console {
    min-height: 28rem;
    max-height: calc(100vh - 15rem);
    overflow: auto;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-sink) 76%, var(--surux-surface-2) 24%);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.45;
}

.xava-console-line {
    display: grid;
    grid-template-columns: 12.5rem 6.25rem 10.5rem minmax(20rem, 1fr);
    gap: .65rem;
    padding: .18rem 0;
    color: color-mix(in srgb, var(--surux-text) 92%, var(--surux-primary) 8%);
    border-bottom: 1px solid color-mix(in srgb, var(--surux-raise) 64%, transparent);
}

.xava-console-time,
.xava-console-worker {
    color: var(--surux-muted);
    white-space: nowrap;
}

.xava-console-level {
    color: color-mix(in srgb, var(--surux-success) 82%, var(--surux-hue-lift) 18%);
    font-weight: 800;
    white-space: nowrap;
}

.xava-console-level-warning {
    color: color-mix(in srgb, var(--surux-warning) 86%, var(--surux-hue-lift) 14%);
}

.xava-console-level-error {
    color: color-mix(in srgb, var(--surux-danger) 86%, var(--surux-hue-lift) 14%);
}

.xava-console-message {
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.xava-console-empty {
    color: var(--surux-muted);
}

.xava-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .48rem;
}

.xava-form {
    max-width: 62rem;
    padding: 1rem;
}

.xava-inline-form {
    display: grid;
    gap: .8rem;
}

.xava-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .58rem;
    margin-top: 1rem;
}

.xava-form-submit-cell {
    display: flex;
    align-items: flex-end;
}

.xava-form-submit-cell .btn {
    min-height: 44px;
    width: 100%;
}

.form-label,
.form-check-label {
    color: var(--surux-text);
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 44px;
    border-color: var(--surux-border);
    border-radius: .52rem;
    color: var(--surux-text);
    background-color: color-mix(in srgb, var(--surux-surface-2) 84%, var(--surux-sink) 16%);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--surux-primary-rgb), .68);
    box-shadow: none;
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff);
    outline-offset: var(--xava-ui-focus-outline-offset, 2px);
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--surux-muted) 80%, transparent);
}

.form-control:disabled,
.form-select:disabled {
    color: color-mix(in srgb, var(--surux-muted) 82%, var(--surux-hue-lift) 18%);
    background-color: color-mix(in srgb, var(--surux-surface) 78%, var(--surux-sink) 22%);
}

.form-check-input {
    border-color: color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .24));
    background-color: color-mix(in srgb, var(--surux-surface-2) 82%, rgba(var(--surux-primary-rgb), .10));
}

.form-check-input:checked {
    border-color: rgba(var(--surux-primary-rgb), .82);
    background-color: var(--surux-primary);
}

.xava-check-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-top: 2rem;
}

.xava-config-file-editor {
    display: grid;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
}

.xava-config-file-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.xava-config-file-heading-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.xava-config-file-heading h3 {
    margin: 0;
    font-size: 1rem;
}

.xava-config-file-heading span {
    color: var(--surux-muted);
    font-size: .85rem;
}

.xava-config-file-row {
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 78%, transparent);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-surface-2) 78%, var(--surux-sink) 22%);
}

.xava-config-file-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .65rem;
}

.xava-secret-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.xava-secret-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.xava-secret-toggle {
    min-width: 5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.xava-config-editor-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--surux-border) 82%, var(--surux-success) 18%);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-surface) 72%, var(--surux-sink) 28%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surux-raise) 64%, transparent);
}

.xava-config-editor-shell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3.1rem;
    border-right: 1px solid color-mix(in srgb, var(--surux-border) 80%, transparent);
    background:
        linear-gradient(180deg, rgba(45, 212, 191, .08), transparent 9rem),
        color-mix(in srgb, var(--surux-surface) 72%, var(--surux-sink) 28%);
    pointer-events: none;
    z-index: 1;
}

.xava-config-editor-shell:focus-within {
    border-color: rgba(var(--surux-primary-rgb), .78);
    box-shadow:
        0 0 0 .18rem rgba(var(--surux-primary-rgb), .14),
        inset 0 1px 0 color-mix(in srgb, var(--surux-raise) 82%, transparent);
}

.xava-config-content.form-control {
    position: relative;
    z-index: 2;
    min-height: 22rem;
    max-height: 62vh;
    margin: 0;
    padding: .9rem 1rem .9rem 3.85rem;
    border: 0;
    border-radius: 0;
    color: color-mix(in srgb, var(--surux-text) 94%, var(--surux-success) 6%);
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 1.54rem,
            color-mix(in srgb, var(--surux-raise) 47%, transparent) 1.54rem,
            color-mix(in srgb, var(--surux-raise) 47%, transparent) calc(1.54rem + 1px)
        ),
        transparent;
    box-shadow: none;
    caret-color: var(--surux-success);
    font-family: "Cascadia Mono", "Fira Code", Consolas, "Courier New", monospace;
    font-size: .92rem;
    line-height: 1.54rem;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.xava-config-content.form-control:focus {
    border: 0;
    box-shadow: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 1.54rem,
            color-mix(in srgb, var(--surux-raise) 58%, transparent) 1.54rem,
            color-mix(in srgb, var(--surux-raise) 58%, transparent) calc(1.54rem + 1px)
        ),
        transparent;
}

.xava-config-preview-panel {
    width: min(70rem, calc(100vw - 2rem));
}

.xava-config-preview-content {
    min-height: 24rem;
    max-height: 62vh;
    overflow: auto;
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    color: var(--surux-text);
    background: rgba(7, 9, 12, .72);
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.xava-number-input {
    max-width: 8rem;
}

.xava-schema-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.xava-schema-grid div {
    min-height: 86px;
    display: grid;
    align-content: center;
    gap: .3rem;
    padding: .85rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-raise) 64%, transparent);
}

.xava-schema-grid span {
    color: var(--surux-muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.xava-schema-grid strong {
    min-width: 0;
    color: var(--surux-text);
    font-size: 1.1rem;
    line-height: 1.1;
    word-break: break-word;
}

.xava-migration-list {
    display: grid;
    gap: .45rem;
}

.xava-migration-list code {
    display: block;
    padding: .52rem .62rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .24));
    border-radius: .42rem;
    background: color-mix(in srgb, var(--surux-surface-2) 76%, var(--surux-sink) 24%);
    word-break: break-word;
}

.xava-provisioning-output {
    max-height: 26rem;
    margin: 0;
    overflow: auto;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 70%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .46rem;
    color: color-mix(in srgb, var(--surux-text) 92%, var(--surux-primary) 8%);
    background: color-mix(in srgb, var(--surux-sink) 76%, var(--surux-surface-2) 24%);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.xava-user-link-list {
    display: grid;
    gap: .45rem;
    min-width: min(30rem, 54vw);
}

.xava-user-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .52rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .24));
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 64%, transparent);
}

.xava-user-link-row strong,
.xava-user-link-row code {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xava-user-link-row code {
    margin-top: .18rem;
    color: var(--surux-muted);
    font-size: .74rem;
}

.xava-copy-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    min-height: 32px;
}

.xava-permission-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.xava-permission-grid section {
    display: grid;
    gap: .55rem;
    align-content: start;
    padding: .85rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
}

.xava-permission-grid h3 {
    margin: 0 0 .2rem;
    color: var(--surux-text);
    font-size: .95rem;
    font-weight: 800;
}

.xava-check-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .55rem;
    min-height: 36px;
    padding: .35rem 0;
}

.xava-check-row strong,
.xava-check-row small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xava-check-row small {
    margin-top: .12rem;
    color: var(--surux-muted);
}

.btn:not(.btn-close) {
    /* Same direction-correct pair as .xava-ui-button, so the two button systems
       do not disagree about what a default button looks like. The old fill and
       border measured 1.11 and 1.94 against the page - Cancel faded out of the
       row exactly the way the xava-ui neutral did. */
    --xava-button-bg: color-mix(in srgb, var(--surux-hue-lift) 14%, var(--surux-app-bg));
    --xava-button-fg: var(--surux-text);
    --xava-button-border: color-mix(in srgb, var(--surux-text) 44%, transparent);
    --xava-button-glow: rgba(var(--surux-primary-rgb), .18);
    position: relative;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .52rem;
    border: 1px solid var(--xava-button-border) !important;
    border-radius: var(--xava-ui-radius-button) !important;
    color: var(--xava-button-fg) !important;
    background: var(--xava-button-bg) !important;
    box-shadow:
        0 .46rem 1rem rgba(0, 0, 0, .22),
        /* theme-literal: a gloss highlight on a saturated button fill, which
           is the same saturated fill in both themes. */
        inset 0 1px 0 rgba(255, 255, 255, .16),
        inset 0 -1px 0 rgba(0, 0, 0, .10) !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform var(--surux-transition), border-color var(--surux-transition), filter var(--surux-transition);
}

.btn-sm {
    min-height: 36px !important;
    padding: .42rem .72rem !important;
    font-size: .82rem;
}

.btn:not(.btn-close):disabled,
.btn:not(.btn-close).disabled {
    opacity: .58;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/*
 * Prefixed with .btn on purpose. The base rule above is `.btn:not(.btn-close)`,
 * and :not() contributes its argument's specificity, so the base is (0,2,0)
 * while a bare `.btn-primary` is (0,1,0) - the base won every custom property
 * and every button in the console rendered as the same neutral pill regardless
 * of variant. Measured: .btn, .btn-primary and .btn-danger all computed to an
 * identical fill and text colour. Matching the specificity lets source order
 * decide, which is what these blocks always assumed.
 */
.btn.btn-primary,
.btn.btn-outline-primary {
    --xava-button-bg: linear-gradient(145deg, var(--surux-primary), var(--surux-primary-strong));
    --xava-button-fg: var(--xava-ui-on-primary);
    --xava-button-border: rgba(var(--surux-primary-rgb), .76);
    --xava-button-glow: rgba(var(--surux-primary-rgb), .36);
}

/* .btn-outline-secondary deliberately has no block: it is the default button,
   and the base rule above is the default treatment. */

.btn.btn-success,
.btn.btn-outline-success {
    /* Stops chosen so white clears AA across the whole ramp. The old #22c55e
       start measured 2.28:1 and was only invisible because a specificity bug
       meant this variant never rendered at all.
       theme-literal: a fixed green fill, so its label is fixed too. */
    --xava-button-bg: linear-gradient(145deg, #15803d, #14532d);
    --xava-button-fg: #fff;
    --xava-button-border: rgba(74, 222, 128, .76);
}

/* Used by six buttons in the markup and two more for warning; neither had a
   variant block, so both fell through to neutral. */
.btn.btn-info,
.btn.btn-outline-info {
    --xava-button-bg: color-mix(in srgb, var(--surux-surface) 82%, var(--surux-info) 18%);
    --xava-button-fg: color-mix(in srgb, var(--surux-info) 76%, var(--surux-text));
    --xava-button-border: color-mix(in srgb, var(--surux-info) 50%, transparent);
    --xava-button-glow: color-mix(in srgb, var(--surux-info) 22%, transparent);
}

.btn.btn-warning,
.btn.btn-outline-warning {
    --xava-button-bg: color-mix(in srgb, var(--surux-surface) 82%, var(--surux-warning) 18%);
    --xava-button-fg: color-mix(in srgb, var(--surux-warning) 74%, var(--surux-text));
    --xava-button-border: color-mix(in srgb, var(--surux-warning) 52%, transparent);
    --xava-button-glow: color-mix(in srgb, var(--surux-warning) 26%, transparent);
}

.btn.btn-danger,
.btn.btn-outline-danger {
    /* Stops chosen so white clears AA across the whole ramp. The old #fb7185
       start measured 2.69:1.
       theme-literal: a fixed red fill, so its label is fixed too. */
    --xava-button-bg: linear-gradient(145deg, #e11d48, #9f1239);
    --xava-button-fg: #fff;
    --xava-button-border: rgba(251, 113, 133, .74);
}

.btn:not(.btn-close):hover,
.btn:not(.btn-close):focus-visible {
    border-color: color-mix(in srgb, var(--xava-button-border) 48%, var(--surux-primary) 52%) !important;
    color: var(--xava-button-fg) !important;
    filter: saturate(1.03) brightness(1.03);
    transform: translateY(-1px);
}

/* Keyboard focus must stay visible. This used to share the block above and end
   in `outline: 0 !important`, which removed the focus indicator from every
   button in the app - including the production publish flow. */
.btn:not(.btn-close):focus-visible {
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff) !important;
    outline-offset: var(--xava-ui-focus-outline-offset, 2px) !important;
}

.alert {
    border-color: var(--surux-border);
    border-radius: .58rem;
}

.alert-info {
    color: var(--surux-text);
    background: rgba(var(--surux-primary-rgb), .13);
    border-color: rgba(var(--surux-primary-rgb), .3);
}

.xava-alert {
    display: grid;
    gap: .75rem;
    max-width: 54rem;
    padding: 1rem;
}

/*
 * An inline note is not a floating card. .xava-alert carries max-width: 54rem
 * and is a member of the panel group above, which is right for the standalone
 * banner and wrong for the prose notes that used to be Bootstrap alerts - they
 * were full-width and flat. XavaCallout adds is-banner when it has a heading,
 * so the two shapes are told apart by the component rather than by the caller.
 */
.xava-alert:not(.is-banner) {
    max-width: none;
    box-shadow: none;
}

.xava-alert-actions {
    justify-content: flex-start;
}

.xava-alert h2 {
    margin: 0;
    font-size: 1.08rem;
}

.xava-alert p {
    margin: 0;
}

.xava-alert pre {
    margin: 0;
    overflow-x: auto;
    padding: .75rem;
    border: 1px solid var(--surux-border);
    border-radius: .46rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-sink) 18%, transparent);
    white-space: pre-wrap;
}

/*
 * Severity has to be visible to be severity.
 *
 * These previously set a 38%-alpha border and a background of roughly one per
 * cent tint - applied, and invisible, so a danger alert and a warning alert and
 * a plain panel all read as the same grey box. A solid left stripe carries the
 * state at a glance and survives both grounds; the heading takes the hue so the
 * first thing read is already coloured.
 *
 * Every rule below reads --xava-alert-hue, which each severity sets once. The
 * danger and warning treatments were written out twice with percentages a point
 * or two apart, which is how a third severity turns into six copied rules; this
 * way it is one declaration.
 */
.xava-alert-danger {
    --xava-alert-hue: var(--surux-danger);
}

.xava-alert-warning {
    --xava-alert-hue: var(--surux-warning);
}

.xava-alert-info {
    --xava-alert-hue: var(--surux-info);
}

.xava-alert-success {
    --xava-alert-hue: var(--surux-success);
}

/*
 * The severity hue arrives from the corner rather than as a flat wash, which is
 * the same gradient idea the SuruX panels use. The stripe stays but thins out -
 * the icon and the figure now carry the state, so the bar does not have to
 * shout on its own.
 */
.xava-alert[class*="xava-alert-"] {
    color: var(--surux-text);
    border-left-width: 4px;
    border-left-style: solid;
    border-color: color-mix(in srgb, var(--xava-alert-hue) 38%, var(--surux-border));
    border-left-color: var(--xava-alert-hue);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--xava-alert-hue) 19%, transparent), transparent 46%),
        color-mix(in srgb, var(--surux-surface) 90%, var(--xava-alert-hue) 10%);
}

/*
 * Collapsible variant. The card loses its own padding so the header tint can
 * reach the edges; the header and body carry their own instead.
 */
.xava-alert.is-collapsible {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.xava-alert-collapse {
    display: block;
}

/* Icon, message, headline figure and disclosure on one line. Opt-in, so every
   existing alert keeps its plain stacked layout. */
.xava-alert-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .3rem .85rem;
}

summary.xava-alert-head {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    padding: .8rem 1rem;
    cursor: pointer;
    list-style: none;
    /* A tint of the severity hue, so the header reads as part of the state
       rather than as a neutral strip laid over it. */
    border-bottom: 1px solid var(--surux-border);
}

.xava-alert[class*="xava-alert-"] summary.xava-alert-head {
    background: color-mix(in srgb, var(--xava-alert-hue) 9%, transparent);
    border-bottom-color: color-mix(in srgb, var(--xava-alert-hue) 28%, var(--surux-border));
}

.xava-alert[class*="xava-alert-"] summary.xava-alert-head:hover {
    background: color-mix(in srgb, var(--xava-alert-hue) 14%, transparent);
}

summary.xava-alert-head::-webkit-details-marker {
    display: none;
}

summary.xava-alert-head:focus-visible {
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff);
    outline-offset: -3px;
}


.xava-alert-body {
    display: grid;
    gap: .6rem;
    padding: .85rem 1rem .95rem;
}

/*
 * An author `display` beats the user-agent rule that hides a closed details'
 * non-summary children, so declaring the grid above left the body on screen
 * with the chevron claiming it was shut. Put it back.
 */
.xava-alert-collapse:not([open]) > .xava-alert-body {
    display: none;
}

.xava-alert-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--surux-muted);
}

.xava-alert-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
    transition: transform var(--surux-transition);
}

details[open] > summary .xava-alert-toggle svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .xava-alert-toggle svg {
        transition: none;
    }
}

.xava-alert-head > div:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: .35rem;
}

/* Same well the toasts use, so the two read as one family. */
.xava-alert-icon {
    width: 2.05rem;
    height: 2.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .52rem;
    margin-top: .1rem;
}

.xava-alert-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.xava-alert[class*="xava-alert-"] .xava-alert-icon {
    color: var(--xava-alert-hue);
    background: color-mix(in srgb, var(--xava-alert-hue) 16%, transparent);
}

/* The one number the reader came for. */
.xava-alert-figure {
    display: grid;
    justify-items: end;
    gap: .05rem;
    padding-left: .5rem;
    text-align: right;
    line-height: 1;
}

.xava-alert-figure strong {
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.xava-alert-figure span {
    /* Muted alone measured 4.47:1 on the light theme's tinted callout - under
       AA for text this small, and it is uppercase and letter-spaced on top. */
    color: color-mix(in srgb, var(--surux-muted) 80%, var(--surux-text));
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.xava-alert[class*="xava-alert-"] .xava-alert-figure strong {
    color: color-mix(in srgb, var(--xava-alert-hue) 76%, var(--surux-text));
}

@media (max-width: 34rem) {
    .xava-alert-head,
    summary.xava-alert-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
    }

    .xava-alert-figure {
        grid-column: 2;
        justify-items: start;
        padding-left: 0;
        text-align: left;
    }

    /* The chevron stays on the header's first line beside the heading. */
    summary.xava-alert-head .xava-alert-toggle {
        grid-column: 3;
        grid-row: 1;
    }
}

.xava-alert[class*="xava-alert-"] h2 {
    color: color-mix(in srgb, var(--xava-alert-hue) 70%, var(--surux-text));
}

/* Facts worth scanning before the prose is read. */
.xava-alert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .76rem;
    /* Same correction as the figure's unit label: muted alone measured 4.47:1
       on the light theme's tinted callout, just under AA for text this small. */
    color: color-mix(in srgb, var(--surux-muted) 80%, var(--surux-text));
}

.xava-alert-meta strong {
    color: var(--surux-text);
    font-weight: 650;
}

.xava-session-panel {
    max-width: 42rem;
}

.xava-session-summary {
    display: grid;
    gap: .28rem;
}

.xava-session-summary span {
    color: var(--surux-muted);
    font-size: .82rem;
}

.xava-session-summary strong {
    color: var(--surux-text);
    font-size: 1.25rem;
}

.xava-session-actions {
    justify-content: flex-start;
}

.xava-setup-steps {
    display: grid;
    gap: .35rem;
    color: var(--surux-muted);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--surux-success);
}

.invalid {
    outline: 1px solid var(--surux-danger);
}

.validation-message {
    color: var(--surux-danger);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    max-width: min(32rem, calc(100vw - 2rem));
    padding: .85rem 3rem .85rem 1rem;
    border: 1px solid rgba(251, 113, 133, .42);
    border-radius: .58rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-surface) 82%, rgba(251, 113, 133, .18));
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .26);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: .6rem;
    right: .85rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    .xava-shell {
        min-height: 100vh;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: visible;
    }

    .xava-sidebar {
        position: sticky;
        top: 0;
        z-index: 10;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: .75rem;
        padding: .65rem .85rem;
        border-right: 0;
        border-bottom: 1px solid var(--surux-border);
    }

    .xava-brand-home {
        display: none;
    }

    .xava-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        gap: .5rem;
        overflow: visible;
        padding: 0;
    }

    .xava-nav-section-label,
    .xava-sidebar-foot {
        display: none;
    }

    .xava-nav-link {
        min-width: 0;
        min-height: 40px;
        justify-content: center;
        padding: .5rem .65rem;
    }

    .xava-nav-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .xava-main {
        min-height: 0;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .xava-topbar {
        min-height: var(--surux-topbar-height);
        height: auto;
        padding: .8rem .95rem;
    }

    .xava-content {
        overflow: visible;
    }

    .xava-page-pad {
        padding: 1rem;
    }

    .xava-deploy-workspace {
        grid-template-columns: 1fr;
    }

    .xava-deploy-env-list {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .xava-deploy-paths,
    .xava-target-paths,
    .xava-mobile-channel-grid {
        grid-template-columns: 1fr;
    }

    .xava-target-row {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .xava-target-paths,
    .xava-target-row > .xava-actions {
        grid-column: 2;
    }

    .xava-run-row {
        grid-template-columns: 1fr;
    }

    .xava-mobile-download {
        grid-template-columns: 1fr;
    }

    .xava-progress-line {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .xava-progress-line p {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .xava-header {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-header .btn {
        align-self: flex-start;
    }

    .xava-topbar-meta span {
        display: none;
    }

    .xava-actions {
        justify-content: flex-start;
    }

    .xava-deploy-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xava-deploy-tab {
        width: 100%;
    }

    .xava-deploy-header-actions,
    .xava-deploy-selected-heading,
    .xava-deploy-test-source-heading,
    .xava-target-toolbar,
    .xava-progress-header {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-progress-backdrop {
        padding: .7rem;
    }

    .xava-progress-panel {
        max-height: calc(100vh - 1.4rem);
    }

    .xava-service-modal {
        width: calc(100vw - 1.4rem);
        max-height: calc(100vh - 1.4rem);
    }

    .xava-service-modal-header,
    .xava-service-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-check-cell {
        padding-top: .25rem;
    }

    .xava-console {
        min-height: 22rem;
        max-height: none;
    }

    .xava-console-line {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .45rem 0;
    }
}

@media (max-width: 520px) {
    .xava-nav-link {
        flex-direction: column;
        gap: .22rem;
        padding: .45rem .35rem;
        font-size: .74rem;
        line-height: 1.05;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:not(.btn-close),
    .xava-nav-link {
        transition: none !important;
    }
}

/* Publishing workspace refinement: dense, bounded, and target-first. */
.xava-deploy-page {
    min-height: 0;
    gap: .72rem;
    padding-bottom: 0;
}

.xava-deploy-page > .xava-header {
    align-items: center;
    padding-bottom: .62rem;
    border-bottom: 1px solid var(--surux-border);
}

.xava-deploy-page > .xava-header h1 {
    font-size: 1.45rem;
}

.xava-deploy-page > .xava-header p {
    margin-top: .12rem;
}

.xava-deploy-tabs {
    flex: 0 0 auto;
    gap: .2rem;
    padding: .22rem;
}

.xava-deploy-tab {
    min-height: 34px;
    padding: .38rem .78rem;
}

/*
 * Sized by its content, not by viewport arithmetic.
 *
 * This carried height: calc(100dvh - topbar - 10.9rem). The constant stood for
 * the page padding, header and tabs, under-counted them, and could not know
 * about the connected-context banner a tenant-service deep link adds. Two
 * breakpoints already existed purely to set height: auto and undo it.
 *
 * The result was visible both ways: with two targets the box was forced far
 * taller than its content, leaving a dead gap; and either way its bottom edge -
 * carrying the publish footer - sat below the fold. Content-sized, the page
 * scrolls in .xava-content as it always could, the footer sticks to the bottom
 * of the visible area, and the target list keeps its own cap so a long list
 * scrolls in place instead of making the page enormous.
 */
.xava-deploy-workspace {
    position: relative;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(13rem, 15rem) minmax(28rem, 1fr);
    gap: .72rem;
    align-items: start;
}

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

.xava-deploy-sidebar,
.xava-deploy-main,
.xava-run-monitor {
    height: 100%;
    min-height: 0;
}

.xava-deploy-sidebar {
    position: static;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .55rem;
    max-height: none;
    padding: .7rem;
    overflow: hidden;
}

.xava-deploy-sidebar .xava-section-heading {
    align-items: center;
}

.xava-deploy-sidebar .xava-section-heading h2 {
    font-size: .92rem;
}

.xava-deploy-env-list {
    min-height: 0;
    align-content: start;
    gap: .35rem;
    overflow: auto;
    padding-right: .15rem;
    scrollbar-width: thin;
}

.xava-deploy-env {
    position: relative;
    min-height: 56px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .48rem;
    padding: .48rem .52rem;
    border-color: transparent;
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 40%, transparent);
}

.xava-deploy-env:hover,
.xava-deploy-env:focus-visible {
    border-color: color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
    background: color-mix(in srgb, var(--surux-raise) 82%, transparent);
}

.xava-deploy-env.is-selected {
    border-color: rgba(var(--surux-primary-rgb), .4);
    background: rgba(var(--surux-primary-rgb), .085);
    box-shadow: inset 3px 0 0 var(--surux-primary);
}

.xava-deploy-env > .xava-chip {
    padding-inline: .42rem;
}

.xava-deploy-env-name {
    gap: .08rem;
}

.xava-deploy-env-name strong {
    font-size: .84rem;
    line-height: 1.15;
}

.xava-deploy-env-name small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-deploy-env-count {
    display: grid;
    justify-items: end;
    gap: 0;
    white-space: nowrap;
}

.xava-deploy-env-count strong {
    color: var(--surux-text);
    font-size: .86rem;
}

.xava-deploy-env-count small {
    font-size: .64rem;
}

.xava-deploy-main {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: .62rem;
    padding: .72rem;
    overflow: hidden;
}

.xava-deploy-context {
    display: grid;
    gap: .4rem;
}

.xava-deploy-selected-heading {
    align-items: center;
}

.xava-deploy-selected-heading h2 {
    font-size: 1rem;
}

.xava-deploy-selected-heading p {
    margin: .12rem 0 0;
    color: var(--surux-muted);
    font-size: .74rem;
}

.xava-deploy-settings {
    color: var(--surux-muted);
    font-size: .74rem;
}

.xava-deploy-settings > summary {
    width: max-content;
    max-width: 100%;
    cursor: pointer;
    color: var(--surux-muted);
    font-weight: 700;
}

.xava-deploy-settings[open] > summary {
    margin-bottom: .45rem;
}

.xava-deploy-settings .xava-deploy-paths {
    gap: .4rem;
}

.xava-deploy-settings .xava-deploy-paths div {
    padding: .4rem .5rem;
}

.xava-source-panel {
    border: 1px solid var(--surux-border);
    border-radius: .48rem;
    background: color-mix(in srgb, var(--surux-raise) 33%, transparent);
}

.xava-source-panel.is-override {
    border-color: color-mix(in srgb, var(--surux-warning) 48%, var(--surux-border));
    background: color-mix(in srgb, var(--surux-warning) 7%, color-mix(in srgb, var(--surux-raise) 33%, transparent));
}

.xava-source-panel > summary {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .48rem .62rem;
    cursor: pointer;
    list-style: none;
}

.xava-source-panel > summary::-webkit-details-marker {
    display: none;
}

.xava-source-panel > summary > span:first-child {
    min-width: 0;
    display: grid;
    gap: .06rem;
}

.xava-source-panel > summary strong,
.xava-source-panel > summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-source-panel > summary strong {
    color: var(--surux-text);
    font-size: .8rem;
}

.xava-source-panel > summary small,
.xava-source-change,
.xava-source-body p {
    color: var(--surux-muted);
    font-size: .7rem;
}

.xava-source-change {
    flex: 0 0 auto;
    color: var(--surux-primary);
    font-weight: 750;
}

.xava-source-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    padding: 0 .62rem .58rem;
}

.xava-source-body p {
    grid-column: 1 / -1;
    margin: 0;
}

.xava-target-toolbar {
    min-width: 0;
    gap: .65rem;
}

.xava-target-toolbar h2 {
    font-size: .94rem;
}

.xava-target-filters {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .36rem;
}

.xava-target-filters .xava-search-field {
    min-width: 10rem;
    flex: 1 1 15rem;
}

.xava-target-filters label:not(.xava-search-field) {
    flex: 0 1 8.5rem;
}

.xava-target-list {
    min-height: 0;
    /* Was `none`, which only worked because the workspace clipped it. */
    max-height: clamp(14rem, 52dvh, 46rem);
    align-content: start;
    gap: .34rem;
    overflow: auto;
    padding: .05rem .15rem .05rem 0;
    scrollbar-width: thin;
}

.xava-target-row {
    min-height: 58px;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    gap: .55rem;
    padding: .46rem .54rem;
    border-color: color-mix(in srgb, var(--surux-border) 88%, transparent);
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 33%, transparent);
}

.xava-target-row.is-selected {
    border-color: rgba(var(--surux-primary-rgb), .38);
    background: rgba(var(--surux-primary-rgb), .065);
    box-shadow: inset 3px 0 0 rgba(var(--surux-primary-rgb), .82);
}

.xava-target-body {
    grid-template-columns: minmax(9rem, .8fr) minmax(14rem, 1.2fr);
    align-items: center;
    gap: .7rem;
}

.xava-target-body .xava-target-identity {
    display: grid;
    align-content: center;
    gap: .08rem;
}

.xava-target-identity strong {
    font-size: .84rem;
}

.xava-target-body .xava-target-meta {
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .34rem;
}

.xava-target-meta small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-target-detail-button {
    min-height: 32px;
    padding: .3rem .58rem;
}

.xava-target-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}

.xava-target-service-button {
    min-width: 4.35rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .55rem;
}

.xava-target-service-button .spinner-border {
    width: .78rem;
    height: .78rem;
    border-width: .12rem;
}

.xava-publish-footer {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .62rem;
    border: 1px solid color-mix(in srgb, var(--surux-border) 72%, rgba(var(--surux-primary-rgb), .28));
    border-radius: .5rem;
    background: color-mix(in srgb, var(--surux-surface-2) 94%, rgba(var(--surux-primary-rgb), .06));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
}

.xava-publish-footer-summary,
.xava-publish-footer-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.xava-publish-footer-summary > div {
    min-width: 0;
    display: grid;
    gap: .04rem;
}

.xava-publish-footer-summary strong,
.xava-publish-footer-summary span:not(.xava-chip) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-publish-footer-summary strong {
    color: var(--surux-text);
    font-size: .8rem;
}

.xava-publish-footer-summary span:not(.xava-chip),
.xava-footer-hint {
    color: var(--surux-muted);
    font-size: .7rem;
}

.xava-run-monitor {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--surux-border) 66%, rgba(var(--surux-primary-rgb), .34));
    border-radius: .62rem;
    background: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-sink) 4%);
    box-shadow: -10px 0 34px rgba(0, 0, 0, .18);
}

.xava-run-monitor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    padding: .78rem;
    border-bottom: 1px solid var(--surux-border);
}

.xava-run-monitor-header > div:first-child {
    min-width: 0;
}

.xava-run-monitor-header h2 {
    margin: .4rem 0 .12rem;
    color: var(--surux-text);
    font-size: 1rem;
    font-weight: 800;
}

.xava-run-monitor-header p {
    margin: 0;
    overflow: hidden;
    color: var(--surux-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-run-monitor-actions {
    display: flex;
    gap: .35rem;
}

.xava-run-overall {
    display: grid;
    gap: .45rem;
    padding: .65rem .78rem;
    border-bottom: 1px solid var(--surux-border);
}

.xava-run-overall > div {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    color: var(--surux-muted);
    font-size: .72rem;
}

.xava-run-overall strong {
    color: var(--surux-text);
}

.xava-run-overall progress {
    width: 100%;
    height: .42rem;
    accent-color: var(--surux-primary);
}

.xava-run-monitor-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: .32rem .48rem 0;
    border-bottom: 1px solid var(--surux-border);
}

.xava-run-monitor-tabs button {
    padding: .5rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--surux-muted);
    background: transparent;
    font-size: .76rem;
    font-weight: 800;
}

.xava-run-monitor-tabs button.is-active {
    border-bottom-color: var(--surux-primary);
    color: var(--surux-text);
}

.xava-target-progress-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: .42rem;
    overflow: auto;
    padding: .58rem;
    scrollbar-width: thin;
}

.xava-target-progress {
    display: grid;
    gap: .35rem;
    padding: .58rem .62rem;
    border: 1px solid var(--surux-border);
    border-left: 3px solid color-mix(in srgb, var(--surux-muted) 48%, transparent);
    border-radius: .46rem;
    background: color-mix(in srgb, var(--surux-raise) 36%, transparent);
}

.xava-target-progress.is-running {
    border-left-color: var(--surux-primary);
    background: rgba(var(--surux-primary-rgb), .055);
}

.xava-target-progress.is-success {
    border-left-color: var(--surux-success);
}

.xava-target-progress.is-failed {
    border-left-color: var(--surux-danger);
    background: color-mix(in srgb, var(--surux-danger) 5%, color-mix(in srgb, var(--surux-raise) 36%, transparent));
}

.xava-target-progress-heading,
.xava-target-progress-stage {
    display: flex;
    align-items: center;
    gap: .38rem;
}

.xava-target-progress-heading {
    justify-content: space-between;
}

.xava-target-progress-heading strong {
    color: var(--surux-text);
    font-size: .8rem;
}

.xava-target-progress-heading span,
.xava-target-progress p {
    color: var(--surux-muted);
    font-size: .68rem;
}

.xava-target-progress-stage strong {
    color: var(--surux-text);
    font-size: .74rem;
}

.xava-target-progress p {
    margin: 0;
    overflow-wrap: anywhere;
}

.xava-progress-dot {
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: var(--surux-muted);
}

.is-success .xava-progress-dot {
    background: var(--surux-success);
}

.is-failed .xava-progress-dot {
    background: var(--surux-danger);
}

.xava-progress-log-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .7fr);
    gap: .4rem;
    padding: .55rem;
    border-bottom: 1px solid var(--surux-border);
}

.xava-progress-follow {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--surux-muted);
    font-size: .7rem;
}

.xava-progress-log-list {
    min-height: 0;
    overflow: auto;
    padding: .35rem .58rem .58rem;
    background: color-mix(in srgb, var(--surux-background) 82%, var(--surux-sink) 18%);
    font-family: var(--bs-font-monospace);
    scrollbar-width: thin;
}

.xava-progress-log-list .xava-progress-line {
    min-width: 0;
    display: grid;
    grid-template-columns: 4.3rem minmax(7rem, .55fr) minmax(0, 1fr);
    gap: .45rem;
    padding: .34rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--surux-raise) 91%, transparent);
    font-size: .68rem;
}

.xava-progress-log-list .xava-progress-line time,
.xava-progress-log-list .xava-progress-line strong {
    color: color-mix(in srgb, var(--surux-primary) 74%, var(--surux-hue-lift) 26%);
}

.xava-progress-log-list .xava-progress-line span {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--surux-text);
}

@media (max-width: 1450px) {
    .xava-deploy-workspace.has-run-monitor {
        grid-template-columns: minmax(11.5rem, 13rem) minmax(27rem, 1fr) minmax(21rem, 25rem);
    }

    .xava-target-filters .btn {
        padding-inline: .45rem;
        font-size: .7rem;
    }
}

@media (max-width: 1180px) {
    .xava-deploy-workspace.has-run-monitor {
        grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    }

    .xava-run-monitor {
        position: fixed;
        top: calc(var(--surux-topbar-height) + .65rem);
        right: .65rem;
        bottom: .65rem;
        z-index: 1060;
        width: min(32rem, calc(100vw - 1.3rem));
        height: auto;
        box-shadow: -18px 0 50px rgba(0, 0, 0, .44);
    }

    .xava-target-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-target-filters {
        justify-content: stretch;
    }
}

@media (max-width: 900px) {
    .xava-deploy-page {
        padding-bottom: calc(var(--surux-mobile-nav-height) + .7rem);
    }

    .xava-deploy-page > .xava-header {
        align-items: flex-start;
    }

    .xava-deploy-workspace,
    .xava-deploy-workspace.has-run-monitor {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .xava-deploy-sidebar,
    .xava-deploy-main {
        height: auto;
    }

    .xava-deploy-sidebar {
        display: grid;
        overflow: hidden;
    }

    .xava-deploy-env-list {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .2rem;
    }

    .xava-deploy-env {
        width: 14rem;
        min-width: 14rem;
    }

    .xava-deploy-main {
        min-height: 35rem;
        grid-template-rows: auto auto auto auto auto;
        overflow: visible;
    }

    .xava-target-list {
        max-height: 52dvh;
        overflow: auto;
    }

    .xava-publish-footer {
        position: sticky;
        bottom: calc(var(--surux-mobile-nav-height) + .35rem);
        z-index: 30;
    }

    .xava-run-monitor {
        inset: var(--surux-topbar-height) 0 var(--surux-mobile-nav-height) 0;
        z-index: 1090;
        width: auto;
        height: auto;
        border-radius: 0;
    }
}

@media (max-width: 720px) {
    .xava-deploy-page > .xava-header {
        flex-direction: row;
    }

    .xava-deploy-header-actions .btn:first-child {
        display: none;
    }

    .xava-deploy-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .xava-deploy-tab {
        width: auto;
    }

    .xava-deploy-selected-heading {
        align-items: flex-start;
        flex-direction: row;
    }

    .xava-deploy-selected-heading .xava-actions .btn {
        min-height: 34px;
        padding: .3rem .45rem;
        font-size: .68rem;
    }

    .xava-deploy-settings .xava-deploy-paths {
        grid-template-columns: 1fr;
    }

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

    .xava-target-filters .xava-search-field {
        grid-column: 1 / -1;
    }

    .xava-target-row {
        grid-template-columns: 1.25rem minmax(0, 1fr);
        align-items: start;
    }

    .xava-target-body {
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
    }

    .xava-target-body .xava-target-meta {
        overflow: hidden;
    }

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

    .xava-target-row-actions .xava-target-detail-button {
        margin-left: auto;
    }

    .xava-target-service-button,
    .xava-target-detail-button {
        min-height: 38px;
    }

    .xava-target-detail-button {
        width: 2.2rem;
        overflow: hidden;
        color: transparent;
    }

    .xava-target-detail-button::after {
        content: "›";
        display: block;
        color: var(--surux-text);
        font-size: 1.2rem;
    }

    .xava-publish-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-publish-footer-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .xava-publish-footer-actions .btn-primary {
        flex: 1 1 auto;
    }

    .xava-run-monitor-header {
        padding: .65rem;
    }

    .xava-run-monitor-header p {
        max-width: 14rem;
    }

    .xava-progress-log-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .xava-progress-log-list .xava-progress-line {
        grid-template-columns: 3.8rem minmax(0, 1fr);
    }

    .xava-progress-log-list .xava-progress-line span {
        grid-column: 1 / -1;
    }
}

/* Operations-console shell and shared data views. */
:root {
    --surux-sidebar-collapsed-width: 76px;
    --surux-mobile-nav-height: 66px;
}

.xava-route-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: rgba(var(--surux-primary-rgb), .14);
    transition: opacity 120ms ease;
}

.xava-route-progress span {
    width: 42%;
    height: 100%;
    display: block;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, var(--surux-primary), color-mix(in srgb, var(--surux-primary) 55%, var(--surux-hue-lift)), transparent);
    box-shadow: 0 0 1rem rgba(var(--surux-primary-rgb), .72);
}

body.xava-is-navigating .xava-route-progress {
    opacity: 1;
}

body.xava-is-navigating .xava-route-progress span {
    animation: xava-route-progress 1.05s ease-in-out infinite;
}

@keyframes xava-route-progress {
    to { transform: translateX(260%); }
}

.xava-shell {
    transition: grid-template-columns var(--surux-transition);
}

.xava-shell.is-nav-collapsed {
    grid-template-columns: var(--surux-sidebar-collapsed-width) minmax(0, 1fr);
}

.xava-sidebar {
    transition: width var(--surux-transition), transform var(--surux-transition), padding var(--surux-transition);
}

.xava-nav-group {
    display: grid;
    gap: .3rem;
}

.xava-nav-group + .xava-nav-group {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, var(--surux-raise) 100%, transparent);
}

.xava-topbar-start {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.xava-icon-button {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--surux-border);
    border-radius: var(--xava-ui-radius-button);
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-raise) 64%, transparent);
    transition: color var(--surux-transition), border-color var(--surux-transition), background var(--surux-transition);
}

.xava-icon-button:hover,
.xava-icon-button:focus-visible {
    color: var(--surux-text);
    border-color: rgba(var(--surux-primary-rgb), .38);
    background: rgba(var(--surux-primary-rgb), .12);
}

.xava-icon-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.xava-theme-toggle svg {
    display: none;
}

:root:not([data-theme-preference]) .xava-theme-toggle .xava-theme-icon-system,
:root[data-theme-preference="system"] .xava-theme-toggle .xava-theme-icon-system,
:root[data-theme-preference="light"] .xava-theme-toggle .xava-theme-icon-light,
:root[data-theme-preference="dark"] .xava-theme-toggle .xava-theme-icon-dark {
    display: block;
}

/* `.xava-mobile-nav-toggle` was here too; it matches no markup in the app. */
.xava-mobile-bottom-nav,
.xava-mobile-scrim {
    display: none;
}

.xava-shell.is-nav-collapsed .xava-sidebar {
    padding-inline: .55rem;
}

.xava-shell.is-nav-collapsed .xava-brand-home {
    justify-content: center;
    padding-inline: 0;
}

.xava-shell.is-nav-collapsed .xava-brand-text,
.xava-shell.is-nav-collapsed .xava-nav-section-label,
.xava-shell.is-nav-collapsed .xava-nav-label,
.xava-shell.is-nav-collapsed .xava-sidebar-foot {
    display: none;
}

.xava-shell.is-nav-collapsed .xava-nav-link {
    justify-content: center;
    padding-inline: .35rem;
}

.xava-shell.is-nav-collapsed .xava-nav-group + .xava-nav-group {
    margin-top: .28rem;
    padding-top: .28rem;
}

.xava-page-pad {
    padding: 1rem 1.1rem;
}

.xava-page {
    gap: .85rem;
}

.xava-section,
.xava-card {
    padding: .85rem;
}

.xava-metric {
    min-height: 78px;
    padding: .75rem .85rem;
}

.xava-table {
    font-size: .84rem;
}

.xava-table td,
.xava-table th {
    padding: .5rem .62rem;
}

.xava-loading-panel {
    position: relative;
    overflow: hidden;
}

.xava-loading-progress,
.xava-data-progress {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    overflow: hidden;
    background: rgba(var(--surux-primary-rgb), .1);
}

.xava-loading-progress span,
.xava-data-progress span {
    width: 38%;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, transparent, var(--surux-primary), transparent);
    animation: xava-loading-progress 1.2s ease-in-out infinite;
}

@keyframes xava-loading-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(280%); }
}

.xava-loading-heading > div {
    display: grid;
    gap: .16rem;
}

.xava-loading-heading p {
    margin: 0;
    color: var(--surux-muted);
    font-size: .8rem;
}

.xava-busy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
}

.xava-busy-button .xava-spinner {
    width: .9rem;
    height: .9rem;
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
}

.xava-data-view {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--surux-border);
    border-radius: .68rem;
    background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .16);
}

.xava-data-toolbar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .72rem .82rem;
    border-bottom: 1px solid var(--surux-border);
    background: color-mix(in srgb, var(--surux-surface) 94%, var(--surux-sink) 6%);
}

.xava-data-title {
    min-width: 0;
    display: grid;
    gap: .18rem;
}

.xava-data-title-line {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.xava-data-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.xava-data-title p {
    margin: 0;
    color: var(--surux-muted);
    font-size: .78rem;
}

.xava-count {
    min-width: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .16rem .42rem;
    border-radius: 999px;
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-hue-lift) 6.5%, transparent);
    font-size: .72rem;
    font-weight: 800;
}

.xava-data-controls {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.xava-search {
    width: min(19rem, 34vw);
    min-height: 36px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    padding: 0 .62rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--surux-sink) 16%, transparent);
}

.xava-search:focus-within {
    border-color: rgba(var(--surux-primary-rgb), .55);
    box-shadow: 0 0 0 .18rem rgba(var(--surux-primary-rgb), .1);
}

.xava-search svg {
    width: 1rem;
    height: 1rem;
    fill: var(--surux-muted);
}

.xava-search input {
    min-width: 0;
    width: 100%;
    padding: .42rem 0;
    border: 0;
    outline: 0;
    color: var(--surux-text);
    background: transparent;
    font-size: .82rem;
}

.xava-search input::placeholder {
    color: color-mix(in srgb, var(--surux-muted) 76%, transparent);
}

.xava-data-progress {
    top: auto;
    bottom: 0;
    z-index: 3;
}

.xava-data-body {
    min-width: 0;
}

.xava-data-body > .table-responsive {
    border: 0;
    border-radius: 0;
}

/* Health dashboard. */
.xava-eyebrow {
    margin-bottom: .25rem;
    color: var(--surux-primary);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xava-health-header {
    align-items: flex-end;
}

.xava-live-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.xava-live-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .35rem .62rem;
    border: 1px solid rgba(52, 211, 153, .28);
    border-radius: 999px;
    color: color-mix(in srgb, var(--surux-success) 86%, var(--surux-hue-lift) 14%);
    background: rgba(52, 211, 153, .08);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.xava-live-status.is-paused {
    border-color: rgba(251, 191, 36, .34);
    color: color-mix(in srgb, var(--surux-warning) 88%, var(--surux-hue-lift) 12%);
    background: rgba(251, 191, 36, .08);
}

.xava-live-dot {
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 .65rem currentColor;
    animation: xava-live-pulse 1.8s ease-in-out infinite;
}

.xava-live-status.is-paused .xava-live-dot {
    animation: none;
}

@keyframes xava-live-pulse {
    50% { opacity: .42; transform: scale(.78); }
}

.xava-interval-control {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: 0 .35rem 0 .62rem;
    border: 1px solid var(--surux-border);
    border-radius: .52rem;
    color: var(--surux-muted);
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
    font-size: .76rem;
    font-weight: 700;
}

.xava-interval-control select {
    padding: .36rem .45rem;
    border: 0;
    outline: 0;
    color: var(--surux-text);
    background: var(--surux-surface-2);
    border-radius: .4rem;
    font-size: .78rem;
}

.xava-health-overview {
    display: grid;
    grid-template-columns: minmax(19rem, 1.25fr) minmax(20rem, 1fr);
    gap: .8rem;
}

.xava-health-hero,
.xava-health-summary-strip {
    border: 1px solid var(--surux-border);
    border-radius: .72rem;
    background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .18);
}

.xava-health-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: .6rem;
    padding: .9rem 1rem;
}

.xava-health-hero::after {
    content: "";
    position: absolute;
    inset: -60% -12% auto auto;
    width: 15rem;
    height: 15rem;
    border-radius: 999px;
    background: rgba(var(--surux-primary-rgb), .09);
    filter: blur(1rem);
    pointer-events: none;
}

.xava-health-hero.is-critical { border-color: rgba(251, 113, 133, .38); }
.xava-health-hero.is-warning { border-color: rgba(251, 191, 36, .34); }
.xava-health-hero.is-healthy { border-color: rgba(52, 211, 153, .28); }

.xava-health-hero-status {
    display: flex;
    align-items: center;
    gap: .78rem;
}

.xava-health-orb {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    display: inline-block;
    border-radius: 999px;
    background: var(--surux-success);
    box-shadow: 0 0 0 .35rem rgba(52, 211, 153, .12), 0 0 1.2rem rgba(52, 211, 153, .5);
}

.xava-health-hero.is-warning .xava-health-orb {
    background: var(--surux-warning);
    box-shadow: 0 0 0 .35rem rgba(251, 191, 36, .12), 0 0 1.2rem rgba(251, 191, 36, .45);
}

.xava-health-hero.is-critical .xava-health-orb {
    background: var(--surux-danger);
    box-shadow: 0 0 0 .35rem rgba(251, 113, 133, .12), 0 0 1.2rem rgba(251, 113, 133, .45);
}

.xava-health-hero-status > div {
    display: grid;
    gap: .12rem;
}

.xava-health-hero-status span {
    color: var(--surux-muted);
    font-size: .74rem;
    font-weight: 750;
    text-transform: uppercase;
}

.xava-health-hero-status strong {
    font-size: 1.35rem;
    line-height: 1;
}

.xava-health-hero > p {
    max-width: 52rem;
    margin: 0;
    color: var(--surux-muted);
    font-size: .84rem;
}

.xava-health-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    color: var(--surux-muted);
    font-size: .72rem;
}

.xava-health-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xava-health-summary-strip > div {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: .25rem;
    padding: .78rem;
}

.xava-health-summary-strip > div + div {
    border-left: 1px solid var(--surux-border);
}

.xava-health-summary-strip span {
    overflow: hidden;
    color: var(--surux-muted);
    font-size: .68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-health-summary-strip strong {
    font-size: 1.16rem;
}

.xava-health-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(9rem, 1fr));
    gap: .65rem;
}

.xava-health-card {
    min-width: 0;
    display: grid;
    gap: .32rem;
    padding: .72rem .78rem;
    border: 1px solid var(--surux-border);
    border-radius: .62rem;
    color: var(--surux-text);
    text-align: left;
    background: color-mix(in srgb, var(--surux-surface) 94%, transparent);
    box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .12);
    transition: transform var(--surux-transition), border-color var(--surux-transition), background var(--surux-transition);
}

.xava-health-card:hover,
.xava-health-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--surux-primary-rgb), .42);
    background: color-mix(in srgb, var(--surux-surface-2) 76%, transparent);
}

.xava-health-card.is-active {
    border-color: rgba(var(--surux-primary-rgb), .62);
    box-shadow: inset 0 0 0 1px rgba(var(--surux-primary-rgb), .15), 0 .8rem 2.2rem rgba(0, 0, 0, .16);
}

.xava-health-card.is-critical { border-top-color: rgba(251, 113, 133, .58); }
.xava-health-card.is-warning { border-top-color: rgba(251, 191, 36, .56); }
.xava-health-card.is-healthy { border-top-color: rgba(52, 211, 153, .48); }

.xava-health-card-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    color: var(--surux-muted);
    font-size: .72rem;
    font-weight: 750;
}

.xava-health-card-heading .xava-chip {
    min-height: 22px;
    padding: .18rem .4rem;
    font-size: .65rem;
}

.xava-health-card > strong {
    overflow: hidden;
    font-size: 1.28rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-health-card > small {
    overflow: hidden;
    color: var(--surux-muted);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xava-attention-panel {
    gap: .62rem;
}

.xava-attention-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.xava-attention-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .52rem .62rem;
    border: 1px solid color-mix(in srgb, var(--surux-hue-lift) 6%, transparent);
    border-radius: .52rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
    text-decoration: none;
}

.xava-attention-item:hover {
    color: var(--surux-text);
    border-color: rgba(var(--surux-primary-rgb), .3);
    background: rgba(var(--surux-primary-rgb), .055);
}

.xava-attention-marker {
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: var(--surux-muted);
}

.xava-attention-marker.is-critical { background: var(--surux-danger); box-shadow: 0 0 .55rem rgba(251, 113, 133, .55); }
.xava-attention-marker.is-warning { background: var(--surux-warning); box-shadow: 0 0 .55rem rgba(251, 191, 36, .45); }

.xava-attention-area {
    overflow: hidden;
    color: var(--surux-muted);
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.xava-attention-copy {
    min-width: 0;
    display: grid;
    gap: .08rem;
}

.xava-attention-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The failure reason is the most important text on the landing page. It used to
 * share the single-line clamp above, which cut SQL exceptions and "overdue by"
 * diagnostics at roughly 70 characters with no tooltip. Two lines, then clamp.
 */
.xava-attention-copy small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.xava-attention-copy strong { font-size: .8rem; }
.xava-attention-copy small { color: var(--surux-muted); font-size: .7rem; }

.xava-section-foot {
    color: var(--surux-muted);
    font-size: .72rem;
    text-align: right;
}

.xava-health-tabs {
    display: flex;
    align-items: center;
    gap: .3rem;
    overflow-x: auto;
    padding: .18rem;
    scrollbar-width: thin;
}

.xava-health-tab {
    min-height: 34px;
    flex: 0 0 auto;
    padding: .38rem .68rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--surux-muted);
    background: transparent;
    font-size: .76rem;
    font-weight: 800;
}

.xava-health-tab:hover,
.xava-health-tab.is-active {
    color: var(--surux-text);
    border-color: rgba(var(--surux-primary-rgb), .28);
    background: rgba(var(--surux-primary-rgb), .11);
}

@media (max-width: 1280px) {
    .xava-health-card-grid {
        grid-template-columns: repeat(3, minmax(10rem, 1fr));
    }
}

@media (max-width: 1040px) {
    .xava-health-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .xava-shell,
    .xava-shell.is-nav-collapsed {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    .xava-shell .xava-sidebar,
    .xava-shell.is-nav-collapsed .xava-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 120;
        width: min(86vw, 320px);
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 0;
        padding: .9rem;
        border-right: 1px solid var(--surux-border);
        border-bottom: 0;
        transform: translateX(-105%);
        box-shadow: 1.3rem 0 3.2rem rgba(0, 0, 0, .42);
    }

    .xava-shell .xava-brand-home,
    .xava-shell.is-nav-collapsed .xava-brand-home {
        display: inline-flex;
        justify-content: flex-start;
        padding-inline: .25rem;
    }

    .xava-shell.is-nav-collapsed .xava-brand-text,
    .xava-shell.is-nav-collapsed .xava-nav-section-label,
    .xava-shell.is-nav-collapsed .xava-nav-label,
    .xava-shell.is-nav-collapsed .xava-sidebar-foot {
        display: initial;
    }

    .xava-shell.is-nav-collapsed .xava-brand-text {
        display: inline-flex;
    }

    .xava-shell.is-nav-collapsed .xava-sidebar-foot {
        display: grid;
    }

    .xava-shell .xava-nav,
    .xava-shell.is-nav-collapsed .xava-nav {
        min-height: 0;
        display: flex;
        grid-template-columns: none;
        align-items: stretch;
        gap: .44rem;
        overflow-y: auto;
        padding: .75rem .1rem;
    }

    .xava-shell .xava-nav-section-label,
    .xava-shell .xava-sidebar-foot {
        display: block;
    }

    .xava-shell .xava-nav-link,
    .xava-shell.is-nav-collapsed .xava-nav-link {
        min-height: 42px;
        justify-content: flex-start;
        flex-direction: row;
        gap: .72rem;
        padding: .52rem .68rem;
        font-size: .88rem;
        line-height: 1.25;
    }

    .xava-main {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) var(--surux-mobile-nav-height);
    }

    .xava-topbar {
        min-height: 58px;
        height: auto;
        padding: .58rem .72rem;
    }

    .xava-content {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .xava-mobile-bottom-nav {
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        padding: .28rem max(.35rem, env(safe-area-inset-right)) max(.28rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
        border-top: 1px solid var(--surux-border);
        background: color-mix(in srgb, var(--surux-app-bg) 92%, var(--surux-sink) 8%);
        box-shadow: 0 -.8rem 2rem rgba(0, 0, 0, .2);
    }

    .xava-mobile-bottom-link {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .12rem;
        padding: .25rem .15rem;
        border: 0;
        border-radius: .5rem;
        color: var(--surux-muted);
        background: transparent;
        font-size: .66rem;
        font-weight: 750;
        text-decoration: none;
    }

    .xava-mobile-bottom-link svg {
        width: 1.18rem;
        height: 1.18rem;
        fill: currentColor;
    }

    .xava-mobile-bottom-link.active,
    .xava-mobile-bottom-link:hover,
    .xava-mobile-bottom-link[aria-expanded="true"] {
        color: var(--surux-primary);
        background: rgba(var(--surux-primary-rgb), .1);
    }

    .xava-mobile-scrim {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: block;
        border: 0;
        opacity: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, .58);
        backdrop-filter: blur(2px);
        transition: opacity var(--surux-transition);
    }

    .xava-attention-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .xava-responsive-table,
    .xava-responsive-table tbody,
    .xava-responsive-table tr,
    .xava-responsive-table td {
        display: block;
        width: 100%;
    }

    .xava-responsive-table thead {
        display: none;
    }

    .xava-responsive-table tbody {
        display: grid;
        gap: .55rem;
        padding: .55rem;
    }

    .xava-responsive-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--surux-border);
        border-radius: .56rem;
        background: color-mix(in srgb, var(--surux-raise) 45%, transparent);
    }

    .xava-responsive-table td {
        display: grid;
        grid-template-columns: minmax(6.4rem, .7fr) minmax(0, 1.4fr);
        align-items: start;
        gap: .65rem;
        min-height: 0;
        padding: .48rem .58rem;
        border-bottom: 1px solid color-mix(in srgb, var(--surux-raise) 100%, transparent);
        overflow-wrap: anywhere;
    }

    .xava-responsive-table td:last-child {
        border-bottom: 0;
    }

    .xava-responsive-table td::before {
        content: attr(data-label);
        color: var(--surux-muted);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .xava-responsive-table td:empty {
        display: none;
    }

    .xava-health-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .xava-page-pad {
        padding: .72rem;
    }

    .xava-topbar-wordmark {
        font-size: .88rem;
    }

    .xava-user-name {
        display: none;
    }

    .xava-health-header {
        align-items: stretch;
    }

    .xava-live-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .xava-live-controls > * {
        min-width: 0;
    }

    .xava-live-status,
    .xava-interval-control {
        justify-content: center;
    }

    .xava-health-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xava-health-summary-strip > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--surux-border);
    }

    .xava-health-summary-strip > div:nth-child(4) {
        border-top: 1px solid var(--surux-border);
    }

    .xava-health-hero-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .18rem;
    }

    .xava-data-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .xava-data-controls,
    .xava-search {
        width: 100%;
    }

    .xava-attention-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .xava-attention-area {
        display: none;
    }
}

@media (max-width: 440px) {
    .xava-health-card-grid {
        grid-template-columns: 1fr;
    }

    .xava-live-controls {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xava-route-progress span,
    .xava-loading-progress span,
    .xava-data-progress span,
    .xava-live-dot {
        animation-duration: 2.4s !important;
    }
}

/*
 * Slide-out navigation drawer.
 *
 * This block used to be unscoped, so it applied at every width and overrode
 * the two-column rail defined earlier in this file: the sidebar became a
 * fixed overlay with a click-blocking scrim even on a 1920px monitor, and the
 * collapsed 76px icon rail never rendered anywhere. Confining it to the
 * overlay breakpoint restores the desktop rail and lets the open/collapsed
 * preference persist without covering the page the operator just navigated to.
 */
@media (max-width: 900px) {
    .xava-shell,
    .xava-shell.is-nav-collapsed {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .xava-main {
        width: 100%;
    }

    .xava-shell .xava-sidebar,
    .xava-shell.is-nav-collapsed .xava-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 120;
        width: min(var(--surux-sidebar-width), calc(100vw - 1rem));
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: .9rem;
        overflow: hidden;
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        transition:
            transform 220ms cubic-bezier(.2, .82, .24, 1),
            opacity 160ms ease,
            visibility 0s linear 0s;
        will-change: transform;
    }

    .xava-shell.is-nav-collapsed .xava-sidebar {
        padding: .9rem;
        visibility: hidden;
        opacity: .98;
        pointer-events: none;
        transform: translateX(calc(-100% - 1.25rem));
        transition:
            transform 190ms cubic-bezier(.4, 0, 1, 1),
            opacity 150ms ease,
            visibility 0s linear 190ms;
    }

    .xava-shell.is-nav-collapsed .xava-brand-home,
    .xava-shell.is-nav-collapsed .xava-nav-link {
        justify-content: flex-start;
        padding-inline: .72rem;
    }

    .xava-shell.is-nav-collapsed .xava-brand-home {
        padding-inline: .25rem;
    }

    .xava-shell.is-nav-collapsed .xava-brand-text {
        display: inline-flex;
    }

    .xava-shell.is-nav-collapsed .xava-nav-section-label,
    .xava-shell.is-nav-collapsed .xava-nav-label {
        display: inline;
    }

    .xava-shell.is-nav-collapsed .xava-sidebar-foot {
        display: grid;
    }
}

.xava-sidebar-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
}

/*
 * With the rail permanently on screen the shell shows two wordmarks and two
 * ways to dismiss the navigation. Previously the sidebar was hidden by default,
 * so only the topbar copy was ever visible.
 *
 * Expanded rail: the rail carries the wordmark, so the topbar drops it.
 * Collapsed icon rail: only the logo mark is left, so the topbar keeps it.
 */
@media (min-width: 901px) {
    .xava-shell:not(.is-nav-collapsed) .xava-topbar-brand {
        display: none;
    }

    /* The topbar toggle owns collapse and expand once the rail is a column. */
    .xava-sidebar-close {
        display: none;
    }
}

.xava-sidebar-header .xava-brand-home {
    min-width: 0;
    flex: 1 1 auto;
}

.xava-sidebar-close {
    margin-top: .18rem;
}

.xava-nav-toggle[aria-expanded="true"] {
    color: var(--surux-text);
    border-color: rgba(var(--surux-primary-rgb), .42);
    background: rgba(var(--surux-primary-rgb), .14);
}

/* The scrim belongs to the overlay drawer only; on desktop the rail is a
   layout column, so dimming and blocking the page would be wrong. */
@media (max-width: 900px) {
    .xava-mobile-scrim {
        position: fixed;
        inset: 0;
        z-index: 110;
        display: block;
        border: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background:
            linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .28));
        backdrop-filter: blur(2px);
        transition:
            opacity 180ms ease,
            visibility 0s linear 180ms;
    }

    body.xava-navigation-open .xava-mobile-scrim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 180ms ease,
            visibility 0s linear 0s;
    }
}

@media (max-width: 900px) {
    .xava-shell .xava-sidebar,
    .xava-shell.is-nav-collapsed .xava-sidebar {
        width: min(88vw, 320px);
    }

    .xava-nav-toggle {
        display: inline-flex;
    }

    .xava-shell:not(.is-nav-collapsed) .xava-sidebar {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xava-shell .xava-sidebar,
    .xava-shell.is-nav-collapsed .xava-sidebar,
    .xava-mobile-scrim {
        transition-duration: 1ms !important;
    }
}

/* Publishing feedback stays out of the workspace layout and scroll model. */
/*
 * Notification stack.
 *
 * The toast below was built for Publishing, where only ever one was on screen,
 * so it positioned itself. Now that every page reports through one host there
 * can be several, and the stack owns placement instead.
 */
.xava-toast-stack {
    position: fixed;
    top: calc(var(--surux-topbar-height) + .8rem);
    right: .9rem;
    /*
     * Above the 1070/1080 dialog band. At 1065 a failure raised from inside a
     * modal rendered behind it, which is the one case where the operator most
     * needs to see it. The stack is pointer-events:none with events restored
     * per toast, so it never swallows a backdrop click.
     */
    z-index: 1090;
    width: min(27rem, calc(100vw - 1.8rem));
    max-height: calc(100dvh - var(--surux-topbar-height) - 1.6rem);
    display: grid;
    /* The gap lives on .xava-toast-slot instead, so a dismissal can close it. */
    gap: 0;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
}

.xava-toast-stack > * {
    pointer-events: auto;
}

/*
 * One slot per notification, and the reason the gap above is 0.
 *
 * A dismissal has to close the space it leaves behind. A stack-level gap cannot
 * animate, so removing a toast snapped everything under it upwards - trading the
 * missing exit for a different discontinuity. The gap therefore belongs to the
 * slot, which can collapse it. 1fr to 0fr is the cheapest honest way to animate
 * a height: one animatable track, no max-height guesswork.
 *
 * No overflow:hidden. It would have to sit here permanently and would clip the
 * shadow a card rests on; the content is fading out as the slot closes, so it
 * has nothing to spill.
 */
.xava-toast-slot {
    display: grid;
    grid-template-rows: 1fr;
    padding-bottom: .55rem;
    transition:
        grid-template-rows 180ms cubic-bezier(.2, .8, .3, 1),
        padding-bottom 180ms cubic-bezier(.2, .8, .3, 1);
}

/*
 * Do not delete this wrapper - the collapse does not work without it.
 *
 * A 0fr track resolves to the automatic minimum of the grid item in it, and a
 * sliver sets an explicit height (2.35rem). That height keeps contributing to
 * the minimum no matter what min-height says, so a sliver placed directly in
 * the slot pinned the track open at 2.35rem and only the padding ever closed.
 * This wrapper is the grid item instead: it declares no height of its own, so
 * min-height:0 genuinely takes its minimum to zero and the track can reach it.
 *
 * No overflow:hidden, deliberately - that would clip the shadow a card rests on
 * for the whole of its life. The toast is fading out while the slot closes, so
 * what briefly overflows is already invisible.
 */
.xava-toast-clip {
    min-height: 0;
}

.xava-toast-slot.is-leaving {
    grid-template-rows: 0fr;
    padding-bottom: 0;
    /* On its way out and no longer clickable. */
    pointer-events: none;
}

/* Departures accelerate away, which is the one place ease-in is right. */
.xava-toast-slot.is-leaving .xava-toast-sliver,
.xava-toast-slot.is-leaving .xava-toast-card {
    animation: xava-toast-out 130ms cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes xava-toast-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(8px, 0, 0);
    }
}

/*
 * The object grows with how broken things are.
 *
 * Success and info are a sliver that erases itself on a depleting rail: the
 * operator who took the action already knows what they asked for and only needs
 * telling that it landed. Warning and error are cards, because a failure has to
 * survive being looked away from, and carries the timestamp and copy affordance
 * the operator would otherwise go digging through the run log for.
 *
 * This replaces a single .xava-toast that drew every severity at one weight, so
 * a routine save and a refused connection were the same size on screen.
 */
.xava-toast-sliver {
    position: relative;
    display: grid;
    /* Third track is for the dismiss button a sliver only grows when it was
       raised without a countdown; it collapses to nothing otherwise. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    height: 2.35rem;
    padding: 0 .65rem 0 .7rem;
    border: 1px solid var(--xava-ui-border);
    border-left-width: 3px;
    border-radius: var(--xava-ui-radius-sm);
    background: var(--xava-ui-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
    overflow: hidden;
    transform-origin: top right;
    animation: xava-toast-sliver-in 170ms cubic-bezier(.2, .8, .3, 1) both;
}

.xava-toast-sliver.is-success {
    color: var(--xava-ui-success);
    border-left-color: var(--xava-ui-success);
}

.xava-toast-sliver.is-info {
    color: var(--xava-ui-info);
    border-left-color: var(--xava-ui-info);
}

.xava-toast-tick {
    width: .85rem;
    height: .85rem;
}

.xava-toast-line {
    min-width: 0;
    color: var(--xava-ui-text);
    font-size: var(--xava-ui-text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xava-toast-line strong {
    font-weight: var(--xava-ui-weight-semibold);
}

/*
 * The countdown. Transform-only, so a toast counting itself out never costs a
 * layout pass, and the duration is stamped inline from AutoDismissAfter so the
 * rail cannot drift from the timer that actually removes it.
 */
.xava-toast-rail {
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: currentColor;
    opacity: .5;
    transform-origin: left center;
    animation: xava-toast-deplete linear both;
}

.xava-toast-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid var(--xava-ui-border);
    border-left-width: 4px;
    border-radius: var(--xava-ui-radius-md);
    color: var(--surux-text);
    background: var(--xava-ui-surface);
    transform-origin: top right;
    animation: xava-toast-card-in 220ms cubic-bezier(.2, .82, .24, 1) both;
}

.xava-toast-card.is-warning {
    border-left-color: var(--xava-ui-warning);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}

.xava-toast-card.is-error {
    border-color: color-mix(in srgb, var(--xava-ui-danger) 45%, var(--xava-ui-border));
    border-left-color: var(--xava-ui-danger);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--xava-ui-danger) 9%, transparent), transparent 62%),
        var(--xava-ui-surface);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .30);
}

.xava-toast-badge {
    width: 1.6rem;
    height: 1.6rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
}

.xava-toast-card.is-warning .xava-toast-badge {
    color: var(--xava-ui-warning);
    background: color-mix(in srgb, var(--xava-ui-warning) 15%, transparent);
}

.xava-toast-card.is-error .xava-toast-badge {
    color: var(--xava-ui-danger);
    background: color-mix(in srgb, var(--xava-ui-danger) 15%, transparent);
}

.xava-toast-badge svg,
.xava-toast-tick svg {
    width: .95rem;
    height: .95rem;
    fill: currentColor;
}

.xava-toast-tick svg {
    width: 100%;
    height: 100%;
    display: block;
}

.xava-toast-body {
    min-width: 0;
}

.xava-toast-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.xava-toast-head strong {
    color: var(--surux-text);
    font-size: var(--xava-ui-text-sm);
    font-weight: var(--xava-ui-weight-bold);
}

/* The failure is the one thing on screen that may set its own type size. */
.xava-toast-card.is-error .xava-toast-head strong {
    font-size: var(--xava-ui-text-base);
}

.xava-toast-stamp {
    color: var(--xava-ui-muted);
    font-family: var(--xava-ui-font-mono);
    font-size: var(--xava-ui-text-2xs);
}

.xava-toast-body p {
    margin: .2rem 0 0;
    color: color-mix(in srgb, var(--surux-text) 82%, var(--surux-muted) 18%);
    font-size: var(--xava-ui-text-xs);
    line-height: var(--xava-ui-leading-snug);
    overflow-wrap: anywhere;
}

.xava-toast-tools {
    margin-top: .55rem;
    display: flex;
    gap: .4rem;
}

.xava-toast-tool {
    height: 1.6rem;
    padding: 0 .5rem;
    border: 1px solid var(--xava-ui-border);
    border-radius: var(--xava-ui-radius-button);
    color: var(--surux-text);
    background: transparent;
    font: inherit;
    font-size: var(--xava-ui-text-2xs);
}

.xava-toast-tool:hover {
    background: color-mix(in srgb, var(--surux-hue-lift) 6%, transparent);
}

.xava-toast-dismiss {
    width: 1.8rem;
    height: 1.8rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .42rem;
    color: var(--surux-muted);
    background: transparent;
}

.xava-toast-dismiss:hover,
.xava-toast-dismiss:focus-visible {
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-hue-lift) 7%, transparent);
}

.xava-toast-dismiss svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

@keyframes xava-toast-sliver-in {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes xava-toast-card-in {
    from {
        opacity: 0;
        transform: translate3d(12px, -4px, 0) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes xava-toast-deplete {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* The stack owns placement, so the narrow-screen adjustment belongs to it and
   not to the toasts inside it, which no longer position themselves. */
@media (max-width: 900px) {
    .xava-toast-stack {
        top: calc(58px + .65rem);
        right: .65rem;
        width: min(27rem, calc(100vw - 1.3rem));
    }
}

/*
 * The depleting rail is deliberately exempt: it is the only cue that a sliver
 * is about to erase itself, so removing it would leave the notification
 * vanishing with no warning at all.
 */
@media (prefers-reduced-motion: reduce) {
    /*
     * The leaving selectors are repeated at their own weight on purpose: a media
     * query adds no specificity, so `.xava-toast-slot.is-leaving .xava-toast-card`
     * would otherwise still win here and animate the exit anyway.
     */
    .xava-toast-sliver,
    .xava-toast-card,
    .xava-toast-slot.is-leaving .xava-toast-sliver,
    .xava-toast-slot.is-leaving .xava-toast-card {
        animation: none;
    }

    .xava-toast-slot {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Legacy single-weight toast. Deployments only.

   Every page reports through XavaToastHost, which now renders severity at
   proportional weight - a sliver for success and info, a card for warning and
   error. Deployments is the exception: it still draws two toasts of its own
   from page-local `_message` and `_copyStatus` state, positioning them itself
   rather than going through the notification service.

   These rules exist so that page keeps working, and only for that. Nothing new
   should use them. Migrating those two call sites onto the service deletes this
   block outright and gets them the proportional treatment for free.
   --------------------------------------------------------------------------- */
.xava-toast {
    position: fixed;
    top: calc(var(--surux-topbar-height) + .8rem);
    right: .9rem;
    z-index: 1065;
    width: min(27rem, calc(100vw - 1.8rem));
    max-height: min(22rem, calc(100dvh - var(--surux-topbar-height) - 1.6rem));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .68rem;
    padding: .78rem;
    overflow: auto;
    border: 1px solid rgba(var(--surux-primary-rgb), .38);
    border-radius: .66rem;
    color: var(--surux-text);
    background: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-sink) 4%);
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .42);
    animation: xava-toast-in 180ms cubic-bezier(.2, .82, .24, 1);
}

.xava-toast.is-error {
    border-color: color-mix(in srgb, var(--surux-danger) 56%, var(--surux-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surux-danger) 10%, transparent), transparent 70%),
        color-mix(in srgb, var(--surux-surface) 96%, var(--surux-sink) 4%);
}

.xava-toast.is-success {
    border-color: color-mix(in srgb, var(--surux-success) 46%, var(--surux-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surux-success) 8%, transparent), transparent 70%),
        color-mix(in srgb, var(--surux-surface) 96%, var(--surux-sink) 4%);
}

.xava-toast-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .48rem;
    color: var(--surux-success);
    background: color-mix(in srgb, var(--surux-success) 14%, transparent);
}

.xava-toast.is-error .xava-toast-icon {
    color: var(--surux-danger);
    background: color-mix(in srgb, var(--surux-danger) 14%, transparent);
}

.xava-toast-icon svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.xava-toast-copy {
    min-width: 0;
    display: grid;
    gap: .2rem;
}

.xava-toast-copy strong {
    color: var(--surux-text);
    font-size: .84rem;
    font-weight: 800;
}

.xava-toast-copy p {
    margin: 0;
    color: color-mix(in srgb, var(--surux-text) 82%, var(--surux-muted) 18%);
    font-size: .78rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@keyframes xava-toast-in {
    from {
        opacity: 0;
        transform: translate3d(.8rem, -.25rem, 0) scale(.985);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 900px) {
    .xava-toast {
        top: calc(58px + .65rem);
        right: .65rem;
        width: min(27rem, calc(100vw - 1.3rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .xava-toast {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Keyboard focus baseline.

   Every custom control below previously suppressed its focus indicator with
   `outline: 0` and supplied nothing in its place, so the app was not keyboard
   operable. Declared last so it wins regardless of where the control is styled.
   --------------------------------------------------------------------------- */

.xava-deploy-tab:focus-visible,
.xava-deploy-env:focus-visible,
.xava-mobile-qr-link:focus-visible,
.xava-toast-dismiss:focus-visible,
.xava-nav-link:focus-visible,
.xava-mobile-bottom-link:focus-visible,
.xava-icon-button:focus-visible,
.xava-brand-home:focus-visible,
.xava-topbar-brand:focus-visible,
/* Second pass. These four share a rule with :hover, or restyle a control whose
   real focus target is a visually hidden input, so the first sweep missed them:
   a hover treatment is not a focus indicator. */
.xava-health-card:focus-visible,
.xava-health-tab:focus-visible,
.xava-git-direction button:focus-visible {
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff);
    outline-offset: var(--xava-ui-focus-outline-offset, 2px);
}

/* Wrappers whose inner input/select is deliberately unstyled or visually
   hidden: move the ring to the wrapper so focus is still visible on the
   control the user is actually in. */
.xava-search:focus-within,
.xava-interval-control:focus-within,
.xava-hosted-file-picker:focus-within,
.xava-ui-scope-control:focus-within {
    outline: var(--xava-ui-focus-outline, 2px solid #6ea2ff);
    outline-offset: var(--xava-ui-focus-outline-offset, 2px);
}