@import 'Pulse.Client.hf9zhlj9zm.bundle.scp.css';

/* /Components/Account/Pages/ChangePassword.razor.rz.scp.css */
/* The title shares the card's top line with the security chip. The layout's
   ::deep rules still paint the icon, the chip and the h1; this only lays the
   title out beside the icon and lets the top line wrap on a phone. */
.account-card .account-card-title[b-kvkk8jhta5] { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.account-card .account-card-title .account-card-icon[b-kvkk8jhta5] { flex: 0 0 auto; margin: 0; }
.account-card .account-card-title h1[b-kvkk8jhta5] { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .account-card .account-card-topline[b-kvkk8jhta5] { align-items: center; flex-wrap: wrap; }
}
/* /Components/Account/Pages/Preferences.razor.rz.scp.css */
.account-preferences-page[b-kq6mtkttt2] {
    box-sizing: border-box;
    container: account-preferences / inline-size;
    width: min(var(--pulse-workspace-max, 100rem), 100%);
    margin: 0 auto;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 1rem) var(--pulse-workspace-pad-bottom, 2rem);
    color: var(--pulse-text);
}

@container account-preferences (min-width: 60rem) {
    .account-preferences-page[b-kq6mtkttt2]  .operator-preferences-panel {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) minmax(30rem, 2fr);
        gap: 2rem;
        align-items: start;
    }

    .account-preferences-page[b-kq6mtkttt2]  .panel-heading {
        flex-direction: column;
        gap: .75rem;
        margin-bottom: 0;
    }

    .account-preferences-page[b-kq6mtkttt2]  .operator-preferences-scope {
        text-align: left;
    }

    .account-preferences-page[b-kq6mtkttt2]  .operator-preferences-action {
        margin-top: 0;
        padding-top: .75rem;
    }
}

@media (max-width: 680px) {
    .account-preferences-page[b-kq6mtkttt2] { padding: .75rem; }
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
.account-shell[b-xqh0j3h53k] {
    --account-ink: var(--pulse-text);
    --account-muted: var(--pulse-muted);
    --account-border: var(--pulse-border);
    --account-accent: var(--pulse-accent);
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--account-ink);
    background: var(--pulse-canvas);
    line-height: 1.45;
    isolation: isolate;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.account-brandbar[b-xqh0j3h53k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1260px, calc(100% - 3rem));
    margin: 0 auto;
    gap: 1rem;
    padding: 1.15rem 0;
    box-sizing: border-box;
    min-width: 0;
}

.account-brand[b-xqh0j3h53k] {
    display: inline-flex;
    gap: 0.8rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.account-brand-symbol[b-xqh0j3h53k] {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid var(--account-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface);
}

.account-brand-symbol svg[b-xqh0j3h53k] {
    width: 2rem;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Falls back to the stock mark until a brand pack is published; the brand's
   primary colour is validated to 3:1 against both surfaces. */
.account-brand-shield[b-xqh0j3h53k] { stroke: var(--pulse-brand-primary, var(--pulse-accent)); }
.account-brand-pulse[b-xqh0j3h53k] { stroke: var(--account-ink); }

.account-brand > span:last-child[b-xqh0j3h53k] {
    display: grid;
    gap: 0.08rem;
}

.account-brand strong[b-xqh0j3h53k] {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.account-brand small[b-xqh0j3h53k] {
    color: var(--account-muted);
    font-size: 0.75rem;
}

.account-trust[b-xqh0j3h53k] {
    display: inline-flex;
    gap: 0.48rem;
    align-items: center;
    color: var(--account-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.account-trust svg[b-xqh0j3h53k] {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1rem;
}

.account-brand-actions[b-xqh0j3h53k] {
    align-items: center;
    display: flex;
    gap: .65rem;
}

.account-theme-toggle[b-xqh0j3h53k] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--account-border);
    border-radius: .72rem;
    color: var(--account-ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    gap: .42rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 .72rem;
}

.account-theme-toggle svg[b-xqh0j3h53k] {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 1rem;
}

.account-theme-sun[b-xqh0j3h53k],
.account-theme-toggle[data-current-theme="dark"] .account-theme-moon[b-xqh0j3h53k] {
    display: none;
}

.account-theme-toggle[data-current-theme="dark"] .account-theme-sun[b-xqh0j3h53k] {
    display: block;
}

.account-theme-toggle:hover[b-xqh0j3h53k] {
    color: var(--account-accent);
    border-color: var(--account-accent);
}

.account-theme-toggle:focus-visible[b-xqh0j3h53k],
[b-xqh0j3h53k] .account-input:focus-visible,
[b-xqh0j3h53k] .account-submit:focus-visible,
[b-xqh0j3h53k] .account-secondary:focus-visible,
[b-xqh0j3h53k] .account-check:focus-within {
    outline: 3px solid var(--pulse-focus-ring, #0284c7);
    outline-offset: 3px;
}

.account-stage[b-xqh0j3h53k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(25rem, 32rem);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: min(1160px, calc(100% - 3rem));
    margin: auto;
    padding: 1.25rem 0 2rem;
    box-sizing: border-box;
    min-width: 0;
}

.account-story[b-xqh0j3h53k] {
    max-width: 38rem;
}

.account-story-kicker[b-xqh0j3h53k] {
    color: var(--account-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-story > .account-story-title[b-xqh0j3h53k] {
    margin: .8rem 0 1rem;
    color: var(--account-ink);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.account-story > p[b-xqh0j3h53k] {
    max-width: 34rem;
    margin: 0;
    color: var(--account-muted);
    font-size: 1rem;
    line-height: 1.45;
}

.account-story-points[b-xqh0j3h53k] {
    display: grid;
    gap: 1rem;
    margin-top: 1.75rem;
}

.account-story-points article[b-xqh0j3h53k] {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.account-story-points article > span[b-xqh0j3h53k] {
    display: grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--account-border);
    border-radius: 0.75rem;
    color: var(--account-accent);
    background: var(--pulse-surface);
}

.account-story-points svg[b-xqh0j3h53k] {
    width: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.account-story-points article div[b-xqh0j3h53k] {
    display: grid;
    gap: 0.12rem;
}

.account-story-points strong[b-xqh0j3h53k] { font-size: 0.91rem; }
.account-story-points small[b-xqh0j3h53k] { color: var(--account-muted); font-size: 0.78rem; }

.account-workspace[b-xqh0j3h53k] {
    min-width: 0;
}

.account-footer[b-xqh0j3h53k] {
    display: flex;
    justify-content: space-between;
    width: min(1260px, calc(100% - 3rem));
    margin: 0 auto;
    padding: 1.2rem 0 1.5rem;
    border-top: 1px solid var(--account-border);
    color: var(--account-muted);
    font-size: 0.75rem;
    box-sizing: border-box;
    min-width: 0;
}

[b-xqh0j3h53k] .account-card {
    position: relative;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--account-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
    box-shadow: var(--pulse-shadow-sm);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

[b-xqh0j3h53k] .account-card-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid var(--account-border);
    border-radius: var(--pulse-radius-md, 12px);
    color: var(--account-accent);
    background: var(--pulse-surface-soft);
}

[b-xqh0j3h53k] .account-card-topline {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

[b-xqh0j3h53k] .account-card-topline .account-card-icon {
    margin-bottom: 0;
}

[b-xqh0j3h53k] .account-card-icon.danger {
    background: var(--pulse-danger-soft);
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
}

[b-xqh0j3h53k] .account-security-chip {
    align-items: center;
    background: var(--pulse-success-soft);
    border: 1px solid var(--pulse-success-border);
    border-radius: 999px;
    color: var(--pulse-success-text);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    gap: .4rem;
    line-height: 1.45;
    margin-top: .22rem;
    padding: .38rem .56rem;
}

[b-xqh0j3h53k] .account-security-chip i {
    background: currentColor;
    border-radius: 50%;
    height: .36rem;
    width: .36rem;
}

[b-xqh0j3h53k] .account-security-chip.local {
    background: var(--pulse-info-soft);
    border-color: var(--pulse-info-border);
    color: var(--pulse-info-strong);
}

[b-xqh0j3h53k] .account-security-chip.restricted {
    background: var(--pulse-danger-soft);
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
}

[b-xqh0j3h53k] .account-card-icon svg {
    width: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

[b-xqh0j3h53k] .account-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--account-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-xqh0j3h53k] .account-card h1,
[b-xqh0j3h53k] .account-card h2 {
    margin: 0;
    color: var(--account-ink);
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

[b-xqh0j3h53k] .account-intro {
    margin: .6rem 0 1.25rem;
    color: var(--account-muted);
    font-size: .875rem;
    line-height: 1.45;
}

[b-xqh0j3h53k] .account-form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

[b-xqh0j3h53k] .account-sign-in-option {
    display: grid;
    gap: .7rem;
    min-width: 0;
}

[b-xqh0j3h53k] .account-sign-in-option h2,
[b-xqh0j3h53k] .account-card .account-sign-in-divider,
[b-xqh0j3h53k] .account-sign-in-help h2 {
    color: var(--account-ink);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

[b-xqh0j3h53k] .account-card .account-sign-in-divider {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--account-border);
}

[b-xqh0j3h53k] .account-sign-in-note,
[b-xqh0j3h53k] .account-sign-in-help p {
    margin: 0;
    color: var(--account-muted);
    font-size: .875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

[b-xqh0j3h53k] .account-sign-in-help {
    display: grid;
    gap: .4rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--account-border);
}

/* A second form cannot sit inside the first one, so its button has to be spaced by hand:
   the grid gap above only separates items within a single form. */
[b-xqh0j3h53k] .account-form + .account-form,
[b-xqh0j3h53k] .account-submit + .account-form {
    margin-top: 1rem;
}

[b-xqh0j3h53k] .account-field {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
}

[b-xqh0j3h53k] .account-field > span,
[b-xqh0j3h53k] .account-field > label {
    color: var(--account-ink);
    font-size: .875rem;
    font-weight: 700;
}

[b-xqh0j3h53k] .account-field > small {
    color: var(--account-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

[b-xqh0j3h53k] .account-input,
[b-xqh0j3h53k] .account-select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .6rem .75rem;
    border: 1px solid var(--pulse-control-border, var(--account-border));
    border-radius: var(--pulse-radius-sm, 8px);
    outline: none;
    color: var(--pulse-control-text, var(--account-ink));
    background: var(--pulse-control-surface, var(--pulse-surface));
    font: inherit;
    font-size: .875rem;
}

[b-xqh0j3h53k] .account-input:focus,
[b-xqh0j3h53k] .account-select:focus {
    border-color: var(--account-accent);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

[b-xqh0j3h53k] .account-input::placeholder { color: var(--account-muted); }

[b-xqh0j3h53k] .account-check {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    color: var(--account-muted);
    font-size: .875rem;
    cursor: pointer;
    min-height: var(--pulse-control-min-height, 44px);
}

[b-xqh0j3h53k] .account-check input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--account-accent);
}

[b-xqh0j3h53k] .account-submit,
[b-xqh0j3h53k] .account-secondary {
    display: inline-flex;
    min-height: var(--pulse-control-min-height, 44px);
    align-items: center;
    justify-content: center;
    padding: .6rem .9rem;
    border-radius: var(--pulse-radius-sm, 8px);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.45;
    text-align: center;
    transition: background-color 140ms ease, border-color 140ms ease;
}

[b-xqh0j3h53k] .account-submit {
    border: 1px solid var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    gap: .7rem;
    justify-content: space-between;
}

[b-xqh0j3h53k] .account-submit:hover:not(:disabled) { background: var(--pulse-action-hover); border-color: var(--pulse-action-hover); }
[b-xqh0j3h53k] .account-submit:disabled { cursor: wait; opacity: var(--pulse-disabled-opacity, .65); }

[b-xqh0j3h53k] .account-secondary {
    border: 1px solid var(--account-border);
    color: var(--account-ink);
    background: var(--pulse-surface-soft);
}

[b-xqh0j3h53k] .account-secondary:hover:not(:disabled) { border-color: var(--account-accent); }

[b-xqh0j3h53k] .account-form + .account-secondary {
    margin-top: .85rem;
}

[b-xqh0j3h53k] .account-form > small {
    color: var(--account-muted);
    font-size: .8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

[b-xqh0j3h53k] .account-validation,
[b-xqh0j3h53k] .validation-message {
    color: var(--pulse-danger-text);
    font-size: .8125rem;
    line-height: 1.45;
}

[b-xqh0j3h53k] .account-validation ul { margin: 0; padding-left: 1.1rem; }

[b-xqh0j3h53k] .account-card ol {
    display: grid;
    gap: .85rem;
    margin: 0 0 1.25rem;
    padding-inline-start: 1.25rem;
    font-size: .875rem;
    line-height: 1.45;
}

[b-xqh0j3h53k] .account-card li > p {
    margin: .5rem 0 0;
    color: var(--account-muted);
    font-size: .8125rem;
}

[b-xqh0j3h53k] .account-alert {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.78rem 0.88rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
    font-size: .875rem;
    line-height: 1.45;
}

/* The tone icon carries no text: it repeats what the colour already says for
   anyone who cannot separate the three backgrounds, and it is why the alert
   is a row rather than a paragraph. */
[b-xqh0j3h53k] .account-alert-icon {
    flex: 0 0 auto;
    margin-top: 0.06rem;
    line-height: 0;
}

[b-xqh0j3h53k] .account-alert-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

[b-xqh0j3h53k] .account-alert-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-xqh0j3h53k] .account-alert-body strong {
    display: block;
    margin-bottom: 0.12rem;
}

[b-xqh0j3h53k] .account-alert:focus {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

[b-xqh0j3h53k] .account-alert.success {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

[b-xqh0j3h53k] .account-alert.attention {
    border-color: var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

[b-xqh0j3h53k] .account-card-footer {
    margin: 1.15rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--account-border);
    color: var(--account-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

[b-xqh0j3h53k] .account-card-footer a { color: var(--pulse-link); }

@media (max-width: 900px) {
    .account-stage[b-xqh0j3h53k] {
        grid-template-columns: 1fr;
        width: min(32rem, calc(100% - 2rem));
        padding-top: .75rem;
    }

    .account-story[b-xqh0j3h53k] { display: none; }
    .account-brandbar[b-xqh0j3h53k], .account-footer[b-xqh0j3h53k] { width: calc(100% - 2rem); }
}

@media (max-width: 560px) {
    .account-brandbar[b-xqh0j3h53k] {
        gap: .75rem;
        padding-top: 1rem;
    }

    .account-brand[b-xqh0j3h53k],
    .account-brand > span:last-child[b-xqh0j3h53k],
    .account-brand-actions[b-xqh0j3h53k] {
        min-width: 0;
    }

    .account-brand small[b-xqh0j3h53k] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-trust[b-xqh0j3h53k] { display: none; }
    .account-stage[b-xqh0j3h53k] {
        align-items: start;
        padding: .5rem 1rem 1.5rem;
        width: 100%;
    }

    .account-footer[b-xqh0j3h53k] { display: grid; gap: 0.2rem; }
    [b-xqh0j3h53k] .account-card {
        padding: 1.15rem;
        border-radius: var(--pulse-radius-lg, 14px);
        overflow-wrap: anywhere;
    }

    [b-xqh0j3h53k] .account-input,
    [b-xqh0j3h53k] .account-select {
        font-size: 16px;
    }

    [b-xqh0j3h53k] .account-card-topline {
        gap: .75rem;
        min-width: 0;
    }

    [b-xqh0j3h53k] .account-security-chip {
        max-width: calc(100% - 3.75rem);
        text-align: right;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .account-theme-toggle span[b-xqh0j3h53k] {
        display: none;
    }

    .account-theme-toggle[b-xqh0j3h53k] {
        justify-content: center;
        padding: 0;
        width: 2.35rem;
    }

    [b-xqh0j3h53k] .account-security-chip {
        font-size: .75rem;
        letter-spacing: .03em;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-xqh0j3h53k] .account-submit,
    [b-xqh0j3h53k] .account-secondary {
        transition: none;
    }
}
.account-brand-logo[b-xqh0j3h53k] { overflow: hidden; }
.account-brand-logo img[b-xqh0j3h53k] { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: var(--pulse-surface); }

/* Authenticator enrollment QR. The tile stays white in both themes on
   purpose: phone cameras want dark modules on a light ground, and the SVG's
   own quiet zone plus this padding keep it scannable against the dark card. */
[b-xqh0j3h53k] .account-qr {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
    margin: 0.35rem 0 1.1rem;
}

[b-xqh0j3h53k] .account-qr-tile {
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: var(--pulse-radius-md, 12px);
    box-sizing: border-box;
    padding: 0.65rem;
    width: min(12.5rem, 100%);
}

[b-xqh0j3h53k] .account-qr-tile svg {
    display: block;
    height: auto;
    width: 100%;
}

[b-xqh0j3h53k] .account-qr figcaption {
    color: var(--account-muted);
    font-size: .8125rem;
    line-height: 1.45;
    max-width: 24rem;
}
/* /Components/CameraGroupAccessPicker.razor.rz.scp.css */
.camera-access-picker[b-ul5aivmib6] { min-width: 0; margin: 0; padding: 0; border: 0; color: var(--users-ink, var(--pulse-text)); }
.camera-access-picker:disabled[b-ul5aivmib6] { opacity: .72; }
.access-modes[b-ul5aivmib6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.access-mode[b-ul5aivmib6] { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; min-height: 4rem; padding: .65rem; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-md, 12px); background: var(--users-surface, var(--pulse-surface)); cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.access-mode:hover[b-ul5aivmib6] { border-color: color-mix(in srgb, var(--users-accent, var(--pulse-accent)) 42%, var(--users-border, var(--pulse-border))); }
.access-mode.selected[b-ul5aivmib6] { border-color: color-mix(in srgb, var(--users-accent, var(--pulse-accent)) 62%, var(--users-border, var(--pulse-border))); background: color-mix(in srgb, var(--users-accent, var(--pulse-accent)) 6%, var(--users-surface, var(--pulse-surface))); }
.access-mode > input[b-ul5aivmib6] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mode-icon[b-ul5aivmib6] { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: var(--pulse-radius-sm, 8px); color: var(--users-muted, var(--pulse-muted)); background: var(--users-surface-soft, var(--pulse-surface-soft)); }
.mode-icon.restricted[b-ul5aivmib6] { color: var(--users-muted, var(--pulse-muted)); background: var(--users-surface-soft, var(--pulse-surface-soft)); }
.mode-icon svg[b-ul5aivmib6] { width: 1.18rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.access-mode > span:nth-of-type(2)[b-ul5aivmib6] { display: grid; gap: .18rem; min-width: 0; }
.access-mode strong[b-ul5aivmib6] { color: var(--users-ink, var(--pulse-text)); font-size: .875rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.access-mode small[b-ul5aivmib6] { color: var(--users-muted, var(--pulse-muted)); font-size: .75rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.mode-check[b-ul5aivmib6] { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: 50%; color: transparent; font-size: .75rem; }
.access-mode.selected .mode-check[b-ul5aivmib6] { border-color: var(--pulse-action); color: var(--pulse-on-action); background: var(--pulse-action); }
.access-mode:focus-within[b-ul5aivmib6] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.access-groups[b-ul5aivmib6] { margin-top: .65rem; padding: .65rem; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-md, 12px); background: var(--users-surface, var(--pulse-surface)); transition: opacity .14s ease; }
.access-groups.is-disabled[b-ul5aivmib6] { opacity: .48; }
.access-groups > header[b-ul5aivmib6] { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .65rem; }
.access-groups > header > div:first-child[b-ul5aivmib6] { display: grid; gap: .14rem; }
.access-groups > header strong[b-ul5aivmib6] { font-size: .875rem; font-weight: 600; }
.access-groups > header small[b-ul5aivmib6] { color: var(--users-muted, var(--pulse-muted)); font-size: .75rem; }
.selection-actions[b-ul5aivmib6] { display: flex; gap: .35rem; }
.selection-actions button[b-ul5aivmib6] { min-height: 44px; padding: .25rem .5rem; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-sm, 8px); color: var(--users-accent-strong, var(--pulse-accent)); background: transparent; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.selection-actions button:focus-visible[b-ul5aivmib6] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.selection-actions button:hover[b-ul5aivmib6] { background: var(--users-surface-soft, var(--pulse-surface-soft)); }
.access-groups-search[b-ul5aivmib6] { display: block; margin-bottom: .5rem; }
.access-groups-search input[b-ul5aivmib6] { width: 100%; min-height: 44px; padding: .42rem .6rem; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-sm, 8px); outline: 0; color: var(--users-ink, var(--pulse-text)); background: var(--users-surface, var(--pulse-surface)); font: inherit; font-size: .875rem; }
.access-groups-search input[b-ul5aivmib6]::placeholder { color: var(--pulse-placeholder, var(--users-muted, var(--pulse-muted))); }
.access-groups-search input:focus-visible[b-ul5aivmib6] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.access-groups-nomatch[b-ul5aivmib6] { margin: .5rem .1rem 0; color: var(--users-muted, var(--pulse-muted)); font-size: .75rem; line-height: 1.45; }
.group-checklist[b-ul5aivmib6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; max-height: min(16rem, 45dvh); padding: .25rem; overflow: auto; overscroll-behavior: contain; }
.group-check[b-ul5aivmib6] { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: center; min-width: 0; min-height: 44px; padding: .5rem; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-sm, 8px); background: var(--users-surface-soft, var(--pulse-surface-soft)); cursor: pointer; }
.group-check.selected[b-ul5aivmib6] { border-color: color-mix(in srgb, var(--users-accent, var(--pulse-accent)) 48%, var(--users-border, var(--pulse-border))); background: color-mix(in srgb, var(--users-accent, var(--pulse-accent)) 7%, var(--users-surface, var(--pulse-surface))); }
.group-check > input[b-ul5aivmib6] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.custom-check[b-ul5aivmib6] { display: grid; width: 1.18rem; height: 1.18rem; place-items: center; border: 1px solid var(--users-border, var(--pulse-border)); border-radius: .35rem; color: transparent; background: var(--users-surface, var(--pulse-surface)); font-size: .75rem; }
.group-check.selected .custom-check[b-ul5aivmib6] { border-color: var(--pulse-action); color: var(--pulse-on-action); background: var(--pulse-action); }
.group-check:focus-within[b-ul5aivmib6] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 1px; }
.group-copy[b-ul5aivmib6] { display: grid; gap: .12rem; min-width: 0; }
.group-copy strong[b-ul5aivmib6], .group-copy small[b-ul5aivmib6] { overflow-wrap: anywhere; }
.group-copy strong[b-ul5aivmib6] { color: var(--users-ink, var(--pulse-text)); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.group-copy small[b-ul5aivmib6] { color: var(--users-muted, var(--pulse-muted)); font-size: .75rem; font-weight: 400; line-height: 1.45; }
.access-groups-empty[b-ul5aivmib6] { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .7rem; border: 1px dashed var(--users-border, var(--pulse-border)); border-radius: var(--pulse-radius-sm, 8px); color: var(--users-muted, var(--pulse-muted)); }
.access-groups-empty svg[b-ul5aivmib6] { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.access-groups-empty span[b-ul5aivmib6] { display: grid; gap: .1rem; }
.access-groups-empty strong[b-ul5aivmib6] { color: var(--users-ink, var(--pulse-text)); font-size: .75rem; }
.access-groups-empty small[b-ul5aivmib6] { font-size: .75rem; }
.access-warning[b-ul5aivmib6] { display: flex; gap: .5rem; align-items: flex-start; margin: .65rem 0 0; padding: .62rem .7rem; border: 1px solid var(--pulse-warning-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; font-weight: 600; line-height: 1.45; }
.access-warning.all[b-ul5aivmib6] { border-color: var(--pulse-success-border); color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.access-warning.danger[b-ul5aivmib6] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.access-warning svg[b-ul5aivmib6] { flex: 0 0 .95rem; width: .95rem; margin-top: .05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
@media (max-width: 650px) { .access-modes[b-ul5aivmib6], .group-checklist[b-ul5aivmib6] { grid-template-columns: 1fr; } .access-groups > header[b-ul5aivmib6] { align-items: flex-start; flex-direction: column; } }
@media (max-width: 650px), (any-pointer: coarse) { .selection-actions button[b-ul5aivmib6], .group-check[b-ul5aivmib6], .access-groups-search input[b-ul5aivmib6] { min-height: 44px; } }
@media (max-width: 650px), (any-pointer: coarse) { .access-groups-search input[b-ul5aivmib6] { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .access-mode[b-ul5aivmib6], .access-groups[b-ul5aivmib6] { transition: none; } }
/* /Components/CameraGroupFilterPicker.razor.rz.scp.css */
/* A filter control that sits in a toolbar beside native selects, so it has to
   look and behave like one: same height and chrome closed, and a floating
   panel open. It used to be a bare <details> that expanded inline, pushing the
   whole toolbar apart - visibly a different species from the select next to
   it. */

.group-filter[b-lyabreikhf] {
    position: relative;
    min-width: 11rem;
    max-width: 100%;
}

/* Each toolbar has its own control chrome (height, radius, palette), and a
   control that ignores it visibly belongs to a different design system. The
   host sets these --group-filter-* properties on the wrapping cell; the
   fallbacks are for a picker standing alone. */
.group-filter > summary[b-lyabreikhf] {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    min-height: max(44px, var(--group-filter-height, 44px));
    padding: .45rem .7rem;
    border: 1px solid var(--group-filter-border, var(--pulse-border, rgba(121, 143, 171, .35)));
    border-radius: var(--group-filter-radius, var(--pulse-radius-sm, 8px));
    background: var(--group-filter-surface, var(--pulse-surface, #fff));
    color: var(--pulse-text, #14243c);
    font-size: max(.875rem, var(--group-filter-font-size, .875rem));
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.group-filter > summary[b-lyabreikhf]::-webkit-details-marker { display: none; }

/* The same affordance a select carries, so it reads as "this opens". */
.group-filter > summary[b-lyabreikhf]::after {
    flex: 0 0 auto;
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 1.5px solid var(--pulse-muted, #687993);
    border-bottom: 1.5px solid var(--pulse-muted, #687993);
    transform: rotate(45deg) translateY(-15%);
}

.group-filter[open] > summary[b-lyabreikhf] { border-color: var(--pulse-accent, #0f827d); }
.group-filter[open] > summary[b-lyabreikhf]::after { transform: rotate(-135deg) translateY(-15%); }

.group-filter > summary:focus-visible[b-lyabreikhf] {
    outline: 3px solid var(--pulse-focus-ring, var(--pulse-accent, #0f827d));
    outline-offset: 2px;
}

/* The hosts draw the visible field label outside the component. Keep this copy
   in the summary's accessible name without repeating it visually. display:none
   removed it from the accessibility tree and left a vague "All my groups"
   disclosure in the Tab order. */
.group-filter-label[b-lyabreikhf],
.group-filter-body legend[b-lyabreikhf] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.group-filter-value[b-lyabreikhf] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-filter > summary[aria-disabled="true"][b-lyabreikhf] {
    cursor: not-allowed;
    opacity: .62;
}

/* Floats over the page instead of expanding into it: opening a filter must
   never reflow the toolbar it lives in. */
.group-filter-body[b-lyabreikhf] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    box-sizing: border-box;
    width: max(100%, min(19rem, calc(100vw - 2rem)));
    min-width: 0;
    max-width: calc(100vw - 2rem);
    max-height: 19rem;
    max-height: min(19rem, calc(100dvh - 5rem));
    padding: .65rem;
    border: 1px solid var(--pulse-border, rgba(121, 143, 171, .35));
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface, #fff);
    box-shadow: var(--pulse-shadow-lg);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.group-filter-hierarchy[b-lyabreikhf] {
    display: grid;
    gap: .08rem;
    margin: -.1rem 0 .5rem;
    padding: .05rem .1rem .45rem;
    border-bottom: 1px solid var(--pulse-border, rgba(121, 143, 171, .25));
}

.group-filter-hierarchy strong[b-lyabreikhf] { color: var(--pulse-text, #14243c); font-size: .875rem; font-weight: 600; }

.group-filter-hierarchy small[b-lyabreikhf] {
    color: var(--pulse-muted, #687993);
    font-size: .75rem;
}

.group-filter-search[b-lyabreikhf] {
    display: flex;
    margin-bottom: .45rem;
}

.group-filter-search input[b-lyabreikhf] {
    width: 100%;
    min-height: 44px;
    padding: .35rem .55rem;
    border: 1px solid var(--pulse-border, rgba(121, 143, 171, .35));
    border-radius: var(--pulse-radius-sm, 8px);
    outline: 0;
    background: var(--pulse-surface-soft, #f5f8fc);
    color: var(--pulse-text, #14243c);
    font: inherit;
    font-size: .875rem;
}

.group-filter-search input:focus[b-lyabreikhf] {
    border-color: var(--pulse-accent, #0f827d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse-accent, #0f827d) 12%, transparent);
}

.group-filter-body fieldset[b-lyabreikhf] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.group-filter-body ul[b-lyabreikhf] {
    display: grid;
    gap: .1rem;
    margin: .35rem 0 0;
    padding: .35rem 0 0;
    border-top: 1px solid var(--pulse-border, rgba(121, 143, 171, .25));
    list-style: none;
}

.group-filter-all[b-lyabreikhf],
.group-filter-body li label[b-lyabreikhf] {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-height: 44px;
    padding: .4rem .45rem;
    border-radius: var(--pulse-radius-sm, 8px);
    font-size: .875rem;
    color: var(--pulse-text, #14243c);
    cursor: pointer;
}

.group-filter-all:hover[b-lyabreikhf],
.group-filter-body li label:hover[b-lyabreikhf] { background: var(--pulse-surface-soft, #f5f8fc); }

.group-filter-all:has(input:checked)[b-lyabreikhf],
.group-filter-body li label:has(input:checked)[b-lyabreikhf] {
    background: var(--pulse-accent-soft);
}

.group-filter-body input[type="checkbox"][b-lyabreikhf] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--pulse-action, #0f827d);
}

.group-filter-body input[type="checkbox"]:focus-visible[b-lyabreikhf] {
    outline: 3px solid var(--pulse-focus-ring, var(--pulse-accent, #0f827d));
    outline-offset: 2px;
}

.group-filter-all > span[b-lyabreikhf],
.group-filter-body li label > span[b-lyabreikhf] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.group-filter-body li label small[b-lyabreikhf] {
    margin-left: auto;
    color: var(--pulse-muted, #687993);
    font-size: .875rem;
    white-space: nowrap;
}

.group-filter-all small[b-lyabreikhf] {
    margin-left: auto;
    color: var(--pulse-muted, #687993);
    font-size: .875rem;
    white-space: nowrap;
}

.group-filter-ungrouped[b-lyabreikhf] {
    border-bottom: 1px dashed var(--pulse-border, rgba(121, 143, 171, .25));
    margin-bottom: .15rem;
    padding-bottom: .15rem;
}

.group-filter-empty[b-lyabreikhf] {
    margin: .4rem 0 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--pulse-muted, #687993);
}

/* CSS isolation prevents the host toolbar's phone rules from reaching this
   disclosure. Size both the closed control and every option here so touch
   users get a real target, and keep control text at 16px to avoid iOS zoom. */
@media (max-width: 760px), (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .group-filter > summary[b-lyabreikhf] {
        min-height: 44px;
        font-size: 16px;
    }

    .group-filter-all[b-lyabreikhf],
    .group-filter-body li label[b-lyabreikhf] {
        min-height: 44px;
        font-size: 16px;
    }

    .group-filter-all small[b-lyabreikhf],
    .group-filter-body li label small[b-lyabreikhf] { font-size: 16px; }

    .group-filter-search input[b-lyabreikhf] { min-height: 44px; font-size: 16px; }
}

/* Cameras places this picker in the final toolbar column. Opening toward
   the inline end at desktop and tablet widths keeps the wider
   option panel inside the content surface instead of clipping past its edge. */
@media (min-width: 761px) {
    .group-filter.group-filter-align-end .group-filter-body[b-lyabreikhf] {
        right: 0;
        left: auto;
    }
}

@media (max-width: 480px) {
    .group-filter[b-lyabreikhf] {
        width: 100%;
        min-width: 0;
    }

    .group-filter-body[b-lyabreikhf] {
        width: min(18rem, calc(100vw - 2rem));
        max-height: min(19rem, 60dvh);
    }
}

@media (forced-colors: active) {
    .group-filter > summary:focus-visible[b-lyabreikhf],
    .group-filter-body input[type="checkbox"]:focus-visible[b-lyabreikhf] {
        outline-color: Highlight;
    }
}
/* /Components/Dashboard/AccessControlDataSummary.razor.rz.scp.css */
.access-data[b-g7hvb984mm] {
    display: grid;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--pulse-surface);
    box-shadow: var(--pulse-shadow-sm);
    line-height: 1.45;
}

.access-data > header[b-g7hvb984mm] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .8rem;
}

.access-data-eyebrow[b-g7hvb984mm] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.access-data h2[b-g7hvb984mm] { margin: .12rem 0 .2rem; font-size: 16px; font-weight: 700; line-height: 1.3; }
.access-data header p[b-g7hvb984mm] { max-width: 72ch; margin: 0; color: var(--pulse-muted); font-size: 12px; line-height: 1.45; }
.access-data header > a[b-g7hvb984mm] { display: inline-flex; align-items: center; min-height: var(--pulse-control-compact-height, 38px); padding: .35rem .15rem; color: var(--pulse-accent-text, var(--pulse-accent)); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.access-data header > a:hover[b-g7hvb984mm] { text-decoration: underline; }
.access-data header > a:focus-visible[b-g7hvb984mm] { border-radius: var(--pulse-radius-sm); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.access-data-loading[b-g7hvb984mm],
.access-data-empty[b-g7hvb984mm],
.access-data-unavailable[b-g7hvb984mm] {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    border: 1px dashed var(--pulse-border-strong, var(--pulse-border));
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-muted);
    font-size: 14px;
}

.access-data-empty > span[b-g7hvb984mm],
.access-data-unavailable > span[b-g7hvb984mm],
.access-data-notice > span[b-g7hvb984mm] { display: grid; gap: .18rem; }
.access-data-empty strong[b-g7hvb984mm],
.access-data-unavailable strong[b-g7hvb984mm],
.access-data-notice strong[b-g7hvb984mm] { color: var(--pulse-text); }
.access-data-empty small[b-g7hvb984mm],
.access-data-unavailable small[b-g7hvb984mm],
.access-data-notice small[b-g7hvb984mm] { font-size: 12px; line-height: 1.45; }
.access-data-empty[b-g7hvb984mm]  svg { color: var(--pulse-accent); }

.access-data-unavailable[b-g7hvb984mm],
.access-data-notice[b-g7hvb984mm] {
    border: 1px solid var(--pulse-warning-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pulse-warning-soft);
    color: var(--pulse-warning-text);
}

.access-data-unavailable[b-g7hvb984mm] {
    padding: .8rem;
}

.access-data-unavailable[b-g7hvb984mm]  svg { color: var(--pulse-warning-text); }

.access-data-notice[b-g7hvb984mm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .68rem .78rem;
    font-size: 12px;
}

.access-data-unavailable button[b-g7hvb984mm],
.access-data-notice button[b-g7hvb984mm] {
    min-height: 2.1rem;
    padding: .38rem .65rem;
    border: 1px solid currentColor;
    border-radius: var(--pulse-radius-sm);
    background: var(--pulse-surface);
    color: var(--pulse-warning-text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.access-data-unavailable button:focus-visible[b-g7hvb984mm],
.access-data-notice button:focus-visible[b-g7hvb984mm] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.access-data-totals[b-g7hvb984mm] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
    margin: 0;
}

.access-data-totals > div[b-g7hvb984mm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .58rem .68rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pulse-surface-soft);
}

/* A source whose store could not be read has no count to report. Left looking
   like every other tile, its dash reads as a real zero. */
.access-data-totals > div.is-unknown[b-g7hvb984mm] {
    border-color: var(--pulse-warning-border);
    background: var(--pulse-warning-soft);
}

.access-data-totals > div.is-unknown dt[b-g7hvb984mm],
.access-data-totals > div.is-unknown dd[b-g7hvb984mm],
.access-data-totals > div.is-unknown dd small[b-g7hvb984mm] { color: var(--pulse-warning-text); }
.access-data-totals > div.is-unknown[b-g7hvb984mm]  svg { color: var(--pulse-warning-text); }

.access-data-totals dt[b-g7hvb984mm] { display: flex; align-items: center; gap: .35rem; color: var(--pulse-muted); font-size: 12px; font-weight: 700; }
.access-data-totals dd[b-g7hvb984mm] { margin: 0; color: var(--pulse-text); font-size: 14px; font-weight: 700; }
.access-data-totals dd small[b-g7hvb984mm] { color: var(--pulse-muted); font-size: 12px; font-weight: 700; }
.access-data-totals[b-g7hvb984mm]  svg { color: var(--pulse-accent); }

.access-data-controls[b-g7hvb984mm] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .25rem 0;
}

.access-data-controls > span[b-g7hvb984mm] {
    margin-right: .15rem;
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}

.access-data-controls button[b-g7hvb984mm] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .34rem .58rem;
    border: 1px solid var(--pulse-border);
    border-radius: 999px;
    background: var(--pulse-surface-soft);
    color: var(--pulse-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.access-data-controls button strong[b-g7hvb984mm] {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.access-data-controls button.is-active[b-g7hvb984mm] {
    border-color: var(--pulse-accent-border, var(--pulse-accent));
    background: var(--pulse-accent-soft);
    color: var(--pulse-accent-text, var(--pulse-accent));
}

.access-data-controls button:focus-visible[b-g7hvb984mm] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.access-data-empty.is-filtered[b-g7hvb984mm] { min-height: 4.5rem; }

/* Says out loud that the table is a window: the filter chips can claim
   hundreds of rows while only the newest few render below. */
.access-data-note[b-g7hvb984mm] {
    margin: 0;
    color: var(--pulse-muted);
    font-size: 12px;
    line-height: 1.4;
}

.access-data-table-wrap[b-g7hvb984mm] { min-width: 0; overflow-x: auto; }
.access-data table[b-g7hvb984mm] { width: 100%; border-collapse: collapse; font-size: 14px; }
.access-data th[b-g7hvb984mm] { padding: .5rem .55rem; border-bottom: 1px solid var(--pulse-border-strong, var(--pulse-border)); color: var(--pulse-muted); font-size: 12px; font-weight: 600; letter-spacing: normal; text-align: left; text-transform: none; white-space: nowrap; }
.access-data td[b-g7hvb984mm] { max-width: 22rem; padding: .6rem .55rem; border-bottom: 1px solid var(--pulse-border); vertical-align: middle; }
.access-data tbody tr:last-child td[b-g7hvb984mm] { border-bottom: 0; }
.access-data .number[b-g7hvb984mm] { text-align: right; font-variant-numeric: tabular-nums; }
.access-data .number.no-count[b-g7hvb984mm] { color: var(--pulse-muted); }

.source-cell[b-g7hvb984mm] { display: flex; align-items: center; gap: .5rem; min-width: 9rem; }
.source-cell > span:last-child[b-g7hvb984mm] { display: grid; min-width: 0; }
.source-cell strong[b-g7hvb984mm], .event-key[b-g7hvb984mm] { overflow: hidden; color: var(--pulse-text); text-overflow: ellipsis; white-space: nowrap; }
/* A bare inline <strong> never ellipsizes - overflow/text-overflow do not
   apply to non-replaced inline boxes - so a 2048-character topic rendered as
   one unbroken line and pushed Use/Count/Last seen off-screen. */
.event-key[b-g7hvb984mm] { display: block; }
.source-cell small[b-g7hvb984mm], .event-detail[b-g7hvb984mm] { display: block; overflow: hidden; color: var(--pulse-muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

.source-glyph[b-g7hvb984mm] { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; flex: 0 0 auto; border-radius: var(--pulse-radius-sm); background: color-mix(in srgb, var(--pulse-accent) 9%, var(--pulse-surface)); color: var(--pulse-accent); }
.source-glyph.onvif[b-g7hvb984mm] { color: #0d9488; background: color-mix(in srgb, #14b8a6 10%, var(--pulse-surface)); }
.source-glyph.mqtt[b-g7hvb984mm] { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 10%, var(--pulse-surface)); }
.source-glyph.sia[b-g7hvb984mm] { color: #d97706; background: color-mix(in srgb, #f59e0b 10%, var(--pulse-surface)); }
/* Same red the AutroSafe source card carries on /access-control - without it the
   rows fell back to the generic accent and read as Integra rows on the surface
   directly below the card that just taught the operator the colour. */
.source-glyph.autrosafe[b-g7hvb984mm] { color: #dc5050; background: color-mix(in srgb, #dc5050 10%, var(--pulse-surface)); }
.source-glyph[b-g7hvb984mm]  svg { display: block; }

.mapping-cell[b-g7hvb984mm] { display: grid; gap: .2rem; justify-items: start; }
.mapping-state[b-g7hvb984mm] { display: inline-flex; padding: .24rem .45rem; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mapping-state.mapped[b-g7hvb984mm] { background: var(--pulse-success-soft, #dcfce7); color: var(--pulse-success-text, #166534); }
.mapping-state.stored[b-g7hvb984mm] { background: var(--pulse-surface-soft); color: var(--pulse-muted); border: 1px solid var(--pulse-border); }

/* A row that names unmapped hardware and offers no way to map it is where this
   panel used to stop. */
.mapping-action[b-g7hvb984mm] { display: inline-flex; align-items: center; min-height: var(--pulse-control-compact-height, 38px); color: var(--pulse-accent-text, var(--pulse-accent)); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mapping-action:hover[b-g7hvb984mm] { text-decoration: underline; }
.mapping-action:focus-visible[b-g7hvb984mm] { border-radius: var(--pulse-radius-sm); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.access-data time[b-g7hvb984mm] { color: var(--pulse-muted); white-space: nowrap; }

@media (max-width: 760px) {
    .access-data > header[b-g7hvb984mm] { align-items: start; flex-direction: column; }
    .access-data-totals[b-g7hvb984mm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .access-data-notice[b-g7hvb984mm],
    .access-data-unavailable[b-g7hvb984mm] { align-items: flex-start; flex-direction: column; }
    .access-data-controls button[b-g7hvb984mm] { min-height: 44px; }
    .access-data-notice button[b-g7hvb984mm],
    .access-data-unavailable button[b-g7hvb984mm] { min-height: 44px; width: 100%; }
    .access-data header > a[b-g7hvb984mm] { min-height: 44px; }
    .mapping-action[b-g7hvb984mm] { min-height: 44px; }
}

@media (min-width: 761px) and (max-width: 1050px) {
    .access-data-totals[b-g7hvb984mm] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* /Components/Dashboard/AlarmMessageDisplay.razor.rz.scp.css */
.structured-alarm-message[b-1gmyfoqdkd] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    min-width: 0;
}

.telemetry-badge[b-1gmyfoqdkd] {
    background: var(--pulse-info-soft);
    border: 1px solid var(--pulse-info-border);
    border-radius: 999px;
    color: var(--pulse-info-strong);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    padding: 4px 5px;
    text-transform: none;
}

.telemetry-summary[b-1gmyfoqdkd],
.plain-alarm-message[b-1gmyfoqdkd] {
    display: block;
    max-width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.plain-alarm-message[b-1gmyfoqdkd] {
    color: var(--pulse-text);
    font-size: 14px;
}

.telemetry-summary[b-1gmyfoqdkd] {
    color: var(--pulse-text);
    font-size: 14px;
    font-weight: 600;
}

.telemetry-fields[b-1gmyfoqdkd] {
    display: grid;
    flex-basis: 100%;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    margin: 7px 0 0;
}

.telemetry-fields div[b-1gmyfoqdkd] {
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 9px;
    min-width: 0;
    padding: 7px 8px;
}

.telemetry-fields dt[b-1gmyfoqdkd] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.telemetry-fields dd[b-1gmyfoqdkd] {
    color: var(--pulse-text);
    font-size: 14px;
    font-weight: 700;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}
/* /Components/Dashboard/DashboardAggregateSection.razor.rz.scp.css */
.aggregate-section[b-0jpjddkven] { margin-top: 14px; }
.aggregate-header[b-0jpjddkven] {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 2px 9px;
}
.aggregate-eyebrow[b-0jpjddkven] { color: var(--pulse-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.aggregate-header h2[b-0jpjddkven] { color: var(--pulse-text); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 2px 0 0; }
.aggregate-header p[b-0jpjddkven] { color: var(--pulse-muted); font-size: 12px; line-height: 1.45; margin: 3px 0 0; }
.dashboard-link[b-0jpjddkven] { display: inline-flex; align-items: center; min-height: var(--pulse-control-compact-height, 38px); padding: .35rem .15rem; color: var(--pulse-accent); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.dashboard-link:hover[b-0jpjddkven] { text-decoration: underline; }
.dashboard-link:focus-visible[b-0jpjddkven] { border-radius: var(--pulse-radius-sm); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.aggregate-grid[b-0jpjddkven] { display: grid; gap: 12px; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); }
.aggregate-rows[b-0jpjddkven] { grid-column: 1 / -1; }
.aggregate-total[b-0jpjddkven], .aggregate-panel[b-0jpjddkven] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    box-shadow: var(--pulse-shadow-sm);
    color: var(--pulse-text);
    min-width: 0;
    padding: 16px;
}
.aggregate-total[b-0jpjddkven] { align-self: start; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.aggregate-total > span[b-0jpjddkven] { color: var(--pulse-muted); font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.aggregate-total strong[b-0jpjddkven] { color: var(--pulse-text); font-size: clamp(30px, 3.2vw, 38px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; margin-top: 10px; }
.aggregate-total small[b-0jpjddkven] { color: var(--pulse-muted); font-size: 12px; line-height: 1.45; margin-top: 9px; }
.aggregate-panel > header[b-0jpjddkven] { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.aggregate-panel h3[b-0jpjddkven] { color: var(--pulse-text); font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; }
.aggregate-panel header span[b-0jpjddkven] { color: var(--pulse-muted); font-size: 12px; }
.aggregate-table-scroll[b-0jpjddkven] { max-height: 275px; overflow: auto; }
.aggregate-table-scroll:focus-visible[b-0jpjddkven] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.aggregate-table[b-0jpjddkven] { border-collapse: collapse; font-size: 13px; line-height: 1.45; min-width: 760px; width: 100%; }
.aggregate-table th[b-0jpjddkven], .aggregate-table td[b-0jpjddkven] { border-bottom: 1px solid var(--pulse-border); padding: 8px 7px; text-align: left; vertical-align: top; }
.aggregate-table th[b-0jpjddkven] { background: var(--pulse-surface-soft); color: var(--pulse-muted); font-size: 12px; font-weight: 600; letter-spacing: normal; position: sticky; text-transform: none; top: 0; z-index: 2; }
.aggregate-table tbody tr:hover[b-0jpjddkven] { background: var(--pulse-surface-soft); }
.number-cell[b-0jpjddkven] { font-variant-numeric: tabular-nums; text-align: right !important; white-space: nowrap; }
.time-cell[b-0jpjddkven] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-cell strong[b-0jpjddkven], .time-cell span[b-0jpjddkven] { display: block; }
.time-cell span[b-0jpjddkven] { color: var(--pulse-muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 760px) { .aggregate-header[b-0jpjddkven] { align-items: flex-start; flex-direction: column; } .dashboard-link[b-0jpjddkven] { min-height: 44px; } .aggregate-grid[b-0jpjddkven] { grid-template-columns: 1fr; } .aggregate-rows[b-0jpjddkven] { grid-column: auto; } .aggregate-total[b-0jpjddkven] { min-height: 120px; } }
/* /Components/Dashboard/DashboardAlarmEventsTable.razor.rz.scp.css */
.alarm-events-panel[b-r1flhgjk60] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    box-shadow: var(--pulse-shadow-sm);
    color: var(--pulse-text);
    min-width: 0;
    line-height: 1.45;
    padding: 16px;
}

.alarm-events-header[b-r1flhgjk60] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.alarm-events-header > div[b-r1flhgjk60] { min-width: 0; }

/* Match the heading rank of the adjacent chart panels. */
.alarm-events-header h2[b-r1flhgjk60] {
    color: var(--pulse-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0;
}

.alarm-events-header p[b-r1flhgjk60] {
    color: var(--pulse-muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 3px 0 0;
}

.alarm-events-tools[b-r1flhgjk60] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.result-count[b-r1flhgjk60] {
    background: var(--pulse-accent-soft);
    border: 1px solid var(--pulse-accent-border);
    border-radius: 999px;
    color: var(--pulse-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    white-space: nowrap;
}

/* The evidence-card layout answers the panel's own width, so the query
   container must be an element the scroller can be styled from: a container
   query cannot reach the element that defines its own container. */
.alarm-table-shell[b-r1flhgjk60] {
    container-name: dashboard-alarm-records;
    container-type: inline-size;
    max-inline-size: 100%;
    min-inline-size: 0;
    width: 100%;
}

.alarm-table-scroll[b-r1flhgjk60] {
    max-height: 570px;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-inline: contain;
    width: 100%;
}

.alarm-table[b-r1flhgjk60] {
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
    width: 100%;
}

.alarm-table th[b-r1flhgjk60],
.alarm-table td[b-r1flhgjk60] {
    border-bottom: 1px solid var(--pulse-border);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 9px 8px;
    text-align: left;
    vertical-align: top;
}

.alarm-table th[b-r1flhgjk60] {
    background: var(--pulse-surface-soft);
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    position: sticky;
    text-transform: none;
    top: 0;
    white-space: nowrap;
    z-index: 2;
}

.alarm-table tbody tr:hover[b-r1flhgjk60] { background: var(--pulse-surface-soft); }

.time-cell[b-r1flhgjk60] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-cell time[b-r1flhgjk60],
.time-cell time strong[b-r1flhgjk60],
.time-cell time > span[b-r1flhgjk60] { display: block; }
.time-cell time span[b-r1flhgjk60] { color: var(--pulse-muted); font-size: 12px; margin-top: 2px; }
.support-reference[b-r1flhgjk60],
.technical-reference[b-r1flhgjk60] {
    display: block;
    max-width: 18rem;
    margin-top: 4px;
    color: var(--pulse-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    user-select: text;
    white-space: normal;
}

.alarm-table th:nth-child(1)[b-r1flhgjk60] { width: 7rem; }
.alarm-table th:nth-child(2)[b-r1flhgjk60] { width: 11.5rem; }
.alarm-table th:nth-child(5)[b-r1flhgjk60] { width: 11rem; }
.alarm-table th:nth-child(6)[b-r1flhgjk60] { width: 8rem; }
.alarm-table th:nth-child(7)[b-r1flhgjk60] { width: 8rem; }
.alarm-table th:nth-child(8)[b-r1flhgjk60] { width: 4.75rem; }
.snapshot-cell[b-r1flhgjk60] { width: 184px; }
.snapshot-cell img[b-r1flhgjk60] {
    background: var(--pulse-border);
    border-radius: 7px;
    display: block;
    height: 96px;
    object-fit: cover;
    width: 168px;
}
.snapshot-preview-unavailable[b-r1flhgjk60] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 7px;
    color: var(--pulse-muted);
    display: flex;
    height: 96px;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    width: 168px;
}
.snapshot-preview-unavailable span[b-r1flhgjk60],
.snapshot-preview-unavailable strong[b-r1flhgjk60] { display: block; }
.snapshot-preview-unavailable strong[b-r1flhgjk60] { color: var(--pulse-accent); margin-top: 4px; }
.snapshot-preview-retry[b-r1flhgjk60] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--pulse-accent);
    cursor: pointer;
    align-items: center;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    margin-top: 6px;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 2px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.snapshot-cell a:focus-visible[b-r1flhgjk60],
.snapshot-preview-retry:focus-visible[b-r1flhgjk60] {
    outline: 3px solid var(--pulse-focus-ring, var(--pulse-accent));
    outline-offset: 2px;
}

.module-link[b-r1flhgjk60] { align-items: center; color: var(--pulse-accent); display: inline-flex; font-size: 14px; font-weight: 700; min-height: var(--pulse-control-compact-height, 38px); overflow-wrap: anywhere; text-decoration: none; }
.module-link:hover[b-r1flhgjk60] { text-decoration: underline; }
.row-actions[b-r1flhgjk60] { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.row-actions a[b-r1flhgjk60] {
    align-items: center;
    background: var(--pulse-accent-soft);
    border: 1px solid var(--pulse-accent-border);
    border-radius: 999px;
    color: var(--pulse-accent);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .025em;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 3px 6px;
    text-decoration: none;
    text-transform: none;
}
.row-actions a:hover[b-r1flhgjk60] { background: color-mix(in srgb, var(--pulse-accent) 13%, var(--pulse-surface)); border-color: var(--pulse-accent); }
.message-cell[b-r1flhgjk60] { max-width: 330px; overflow-wrap: anywhere; white-space: normal; }
.empty-value[b-r1flhgjk60] { color: var(--pulse-muted); }

.classification-cell > *[b-r1flhgjk60] { display: block; }
.classification-severity[b-r1flhgjk60] { margin-bottom: 5px; }
.classification-priority[b-r1flhgjk60] { margin-top: 5px; }
.classification-target[b-r1flhgjk60] { color: var(--pulse-text); margin-top: 3px; }
.classification-fallback[b-r1flhgjk60] { color: var(--pulse-muted); margin-top: 4px; }

.status-pill[b-r1flhgjk60] {
    border-radius: 999px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 7px;
    white-space: nowrap;
}

.status-pill.is-active[b-r1flhgjk60] { background: var(--pulse-danger-soft); color: var(--pulse-danger-text); }
.status-pill.is-ended[b-r1flhgjk60] { background: var(--pulse-success-soft); color: var(--pulse-success-text); }

.row-actions a:focus-visible[b-r1flhgjk60] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The dashboard can sit beside the expanded navigation rail, so the component
   responds to its allocated width. Below 960px, each alarm becomes a compact
   evidence card instead of making the browser or the page pan sideways. */
@container dashboard-alarm-records (max-width: 60rem) {
    .alarm-table[b-r1flhgjk60],
    .alarm-table tbody[b-r1flhgjk60] { display: block; width: 100%; }

    .alarm-table thead[b-r1flhgjk60] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .alarm-table tbody[b-r1flhgjk60] {
        display: grid;
        gap: 12px;
    }

    .alarm-table tbody tr[b-r1flhgjk60] {
        display: grid;
        grid-template-areas:
            "snapshot time status"
            "snapshot camera camera"
            "snapshot message message"
            "snapshot classification classification"
            "snapshot server channel";
        grid-template-columns: minmax(9rem, 11.5rem) minmax(0, 1fr) minmax(0, .75fr);
        border: 1px solid var(--pulse-border);
        border-radius: 12px;
        background: var(--pulse-surface);
        box-shadow: none;
    }

    .alarm-table td[b-r1flhgjk60] {
        display: block;
        min-width: 0;
        padding: 10px 12px;
        border-bottom: 1px solid var(--pulse-border);
    }

    .alarm-table td[b-r1flhgjk60]::before {
        display: block;
        margin-bottom: 4px;
        color: var(--pulse-muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: none;
    }

    .time-cell[b-r1flhgjk60] { grid-area: time; white-space: normal; }
    .snapshot-cell[b-r1flhgjk60] { grid-area: snapshot; width: auto; border-bottom: 0 !important; }
    .camera-cell[b-r1flhgjk60] { grid-area: camera; }
    .message-cell[b-r1flhgjk60] { grid-area: message; max-width: none; white-space: normal; }
    .classification-cell[b-r1flhgjk60] { grid-area: classification; }
    .server-cell[b-r1flhgjk60] { grid-area: server; border-bottom: 0 !important; }
    .channel-cell[b-r1flhgjk60] { grid-area: channel; border-bottom: 0 !important; }
    .status-cell[b-r1flhgjk60] { grid-area: status; }

    .snapshot-cell img[b-r1flhgjk60],
    .snapshot-preview-unavailable[b-r1flhgjk60] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Fifteen full-height evidence cards inside a 570px window is a nested
       scrollbar over two and a half rows. */
    .alarm-table-scroll[b-r1flhgjk60] { max-height: none; overflow: visible; }
}

@container dashboard-alarm-records (max-width: 38rem) {
    .alarm-table tbody tr[b-r1flhgjk60] {
        grid-template-areas:
            "time"
            "status"
            "snapshot"
            "camera"
            "message"
            "classification"
            "server"
            "channel";
        grid-template-columns: minmax(0, 1fr);
    }

    .alarm-table td[b-r1flhgjk60] { border-bottom: 1px solid var(--pulse-border); }
    .alarm-table .channel-cell[b-r1flhgjk60] { border-bottom: 0; }
    .snapshot-cell img[b-r1flhgjk60],
    .snapshot-preview-unavailable[b-r1flhgjk60] { max-width: 24rem; }
}

@media (max-width: 650px) {
    .alarm-events-panel[b-r1flhgjk60] { padding: 14px; }
    .alarm-events-header[b-r1flhgjk60] { align-items: flex-start; flex-wrap: wrap; }
    .alarm-table-scroll[b-r1flhgjk60] { max-height: none; overflow: visible; }
    .module-link[b-r1flhgjk60],
    .row-actions a[b-r1flhgjk60],
    .snapshot-preview-retry[b-r1flhgjk60] { min-height: 44px; }
}
/* /Components/Dashboard/DashboardBarChart.razor.rz.scp.css */
/* The ordered categorical series palette, shared by every dashboard chart
   so one series index is one colour across the panels on a screen. The dark
   values are the bright variants: the light hexes sat near 2:1 against the
   dark panel surface, which is below the 3:1 a chart line has to clear. */
.bar-chart[b-8xjzpk35vf] {
    --pulse-series-1: #0f766e;
    --pulse-series-2: #2563eb;
    --pulse-series-3: #ea580c;
    --pulse-series-4: #9333ea;
    --pulse-series-5: #dc2626;
    --pulse-series-6: #0891b2;
    --pulse-series-7: #65a30d;
    --pulse-series-8: #d97706;
    --pulse-series-9: #4f46e5;
    --pulse-series-10: #db2777;
    --pulse-series-11: #14b8a6;
    --pulse-series-12: #60a5fa;
    --pulse-series-13: #fb923c;
    --pulse-series-14: #c084fc;
    --pulse-series-15: #f87171;
}

html[data-theme="dark"] .bar-chart[b-8xjzpk35vf] {
    --pulse-series-1: #2dd4bf;
    --pulse-series-2: #60a5fa;
    --pulse-series-3: #fb923c;
    --pulse-series-4: #c084fc;
    --pulse-series-5: #f87171;
    --pulse-series-6: #22d3ee;
    --pulse-series-7: #a3e635;
    --pulse-series-8: #fbbf24;
    --pulse-series-9: #a5b4fc;
    --pulse-series-10: #f472b6;
    --pulse-series-11: #5eead4;
    --pulse-series-12: #93c5fd;
    --pulse-series-13: #fdba74;
    --pulse-series-14: #d8b4fe;
    --pulse-series-15: #fca5a5;
}

.bar-chart[b-8xjzpk35vf] {
    min-height: 120px;
}

.bar-chart svg[b-8xjzpk35vf] {
    display: block;
    /* The SVG height attribute owns the pixel-sized rows; deriving height
       from a canvas aspect ratio would crop them in narrower cards. */
    overflow: visible;
    width: 100%;
}

.bar-label[b-8xjzpk35vf] {
    fill: var(--pulse-text);
    font-size: 14px;
    font-weight: 600;
}

.bar-detail[b-8xjzpk35vf] {
    fill: var(--pulse-muted);
    font-size: 12px;
}

.bar-track[b-8xjzpk35vf] {
    fill: var(--pulse-border);
}

.bar-value[b-8xjzpk35vf] {
    transition: filter .15s ease;
}

.bar-value:hover[b-8xjzpk35vf] {
    filter: brightness(1.08);
}

.bar-number[b-8xjzpk35vf] {
    fill: var(--pulse-text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-anchor: end;
}

.bar-more[b-8xjzpk35vf] {
    color: var(--pulse-muted);
    font-size: 12px;
    padding-top: 6px;
    text-align: right;
}

.chart-empty[b-8xjzpk35vf] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    font-size: 13px;
    justify-content: center;
    min-height: 110px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .bar-value[b-8xjzpk35vf] {
        transition: none;
    }
}

@media (max-width: 640px) {
    .bar-label[b-8xjzpk35vf],
    .bar-number[b-8xjzpk35vf] {
        font-size: 14px;
    }

    .bar-detail[b-8xjzpk35vf] {
        font-size: 12px;
    }
}
/* /Components/Dashboard/DashboardChartExport.razor.rz.scp.css */
.chart-export[b-fy7a92hgu2] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.chart-export-button[b-fy7a92hgu2] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 9px;
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    gap: 5px;
    min-height: var(--pulse-control-compact-height, 38px);
    letter-spacing: .02em;
    padding: 0 10px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.chart-export-button:hover:not(:disabled)[b-fy7a92hgu2] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-text);
}

.chart-export-button:disabled[b-fy7a92hgu2] {
    cursor: default;
    opacity: .5;
}

.chart-export-button:focus-visible[b-fy7a92hgu2] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.chart-export-button svg[b-fy7a92hgu2] {
    fill: none;
    height: 12px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 12px;
}

.chart-export-error[b-fy7a92hgu2] {
    color: var(--pulse-danger-text);
    flex-basis: 100%;
    font-size: 12px;
    text-align: right;
}

@media (max-width: 650px) {
    .chart-export[b-fy7a92hgu2],
    .chart-export-button[b-fy7a92hgu2] {
        width: 100%;
    }

    .chart-export-button[b-fy7a92hgu2] {
        justify-content: center;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chart-export-button[b-fy7a92hgu2] {
        transition: none;
    }
}
/* /Components/Dashboard/DashboardDonutChart.razor.rz.scp.css */
/* The ordered categorical series palette, shared by every dashboard chart
   so one series index is one colour across the panels on a screen. The dark
   values are the bright variants: the light hexes sat near 2:1 against the
   dark panel surface, which is below the 3:1 a chart line has to clear. */
.donut-layout[b-br2sivauuo] {
    --pulse-series-1: #0f766e;
    --pulse-series-2: #2563eb;
    --pulse-series-3: #ea580c;
    --pulse-series-4: #9333ea;
    --pulse-series-5: #dc2626;
    --pulse-series-6: #0891b2;
    --pulse-series-7: #65a30d;
    --pulse-series-8: #d97706;
    --pulse-series-9: #4f46e5;
    --pulse-series-10: #db2777;
    --pulse-series-11: #14b8a6;
    --pulse-series-12: #60a5fa;
    --pulse-series-13: #fb923c;
    --pulse-series-14: #c084fc;
    --pulse-series-15: #f87171;
}

html[data-theme="dark"] .donut-layout[b-br2sivauuo] {
    --pulse-series-1: #2dd4bf;
    --pulse-series-2: #60a5fa;
    --pulse-series-3: #fb923c;
    --pulse-series-4: #c084fc;
    --pulse-series-5: #f87171;
    --pulse-series-6: #22d3ee;
    --pulse-series-7: #a3e635;
    --pulse-series-8: #fbbf24;
    --pulse-series-9: #a5b4fc;
    --pulse-series-10: #f472b6;
    --pulse-series-11: #5eead4;
    --pulse-series-12: #93c5fd;
    --pulse-series-13: #fdba74;
    --pulse-series-14: #d8b4fe;
    --pulse-series-15: #fca5a5;
}

/* auto-fit: side by side where the panel is wide enough for two 190px
   columns, stacked in narrow panels. The old fixed two-column minimums were
   wider than a span-3 dashboard panel, so the legend spilled out of the card. */
.donut-layout[b-br2sivauuo] {
    align-items: center;
    display: grid;
    gap: 12px;
    /* min() matters: a bare minmax(190px, …) floor never shrinks below 190px,
       so in a panel narrower than that the single track still overflowed and
       was clipped by the panel's overflow:hidden. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    min-height: 170px;
}

.donut-visual svg[b-br2sivauuo] {
    display: block;
    margin: auto;
    max-width: 175px;
    overflow: visible;
    width: 100%;
}

.donut-track[b-br2sivauuo],
.donut-slice[b-br2sivauuo] {
    fill: none;
    stroke-width: 30;
}

/* Emitted only while a slice click actually cross-filters the dashboard, so the
   cursor never promises an interaction the chart is not wired for. */
.donut-slice[data-clickable][b-br2sivauuo] {
    cursor: pointer;
}

.donut-track[b-br2sivauuo] {
    stroke: var(--pulse-border);
}

.donut-slice[b-br2sivauuo] {
    transform: rotate(-90deg);
    transform-origin: 110px 110px;
    transition: filter .15s ease, stroke-width .15s ease;
}

.donut-slice:hover[b-br2sivauuo] {
    filter: brightness(1.08);
    stroke-width: 35;
}

.donut-residual[b-br2sivauuo] {
    stroke: var(--pulse-border-strong);
}

.donut-total[b-br2sivauuo] {
    fill: var(--pulse-text);
    font-size: 26px;
    font-weight: 700;
    text-anchor: middle;
}

.donut-caption[b-br2sivauuo] {
    fill: var(--pulse-muted);
    font-size: 13px;
    text-anchor: middle;
}

.donut-visual[b-br2sivauuo] { min-width: 0; }

.donut-legend[b-br2sivauuo] {
    max-height: 190px;
    min-width: 0;
    overflow: auto;
    padding-right: 4px;
}

.donut-legend-row[b-br2sivauuo] {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pulse-border);
    cursor: pointer;
    display: grid;
    font-family: inherit;
    font-size: 14px;
    gap: 7px;
    grid-template-columns: 10px minmax(0, 1fr) auto 40px;
    min-width: 0;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 8px 0;
    text-align: left;
    width: 100%;
}

.donut-legend-row:focus-visible[b-br2sivauuo] {
    border-radius: var(--pulse-radius-sm);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.donut-legend-row:disabled[b-br2sivauuo],
.donut-legend-row.is-static[b-br2sivauuo],
.donut-legend-row.is-residual[b-br2sivauuo] {
    cursor: default;
    opacity: 1;
}

.legend-dot-residual[b-br2sivauuo] {
    background: var(--pulse-border-strong);
}

.donut-legend-row:hover:not(:disabled):not(.is-static):not(.is-residual) .legend-name[b-br2sivauuo] {
    color: var(--pulse-accent);
    text-decoration: underline;
}

.legend-dot[b-br2sivauuo] {
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.legend-name[b-br2sivauuo] {
    color: var(--pulse-text);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.legend-count[b-br2sivauuo] {
    color: var(--pulse-text);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.legend-percent[b-br2sivauuo] {
    color: var(--pulse-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.chart-empty[b-br2sivauuo] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    font-size: 14px;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 160px;
    text-align: center;
}

@media (max-width: 520px) {
    .donut-layout[b-br2sivauuo] {
        grid-template-columns: 1fr;
    }

    .donut-legend-row[b-br2sivauuo] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .donut-slice[b-br2sivauuo] {
        transition: none;
    }
}
/* /Components/Dashboard/DashboardEmptyState.razor.rz.scp.css */
.dashboard-empty[b-ivvk5cdxaa] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 8px;
    justify-content: center;
    line-height: 1.45;
    min-height: 160px;
    padding: 16px;
    text-align: center;
}

.empty-icon[b-ivvk5cdxaa] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 50%;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 18px;
    height: 32px;
    justify-content: center;
    width: 32px;
}
/* /Components/Dashboard/DashboardIoTTelemetryChart.razor.rz.scp.css */
.telemetry-chart[b-wp7tl0dgn8] { min-width: 0; }

/* Wraps at every width like .panel-header does, not just under the narrow
   breakpoint: the tools column now carries the export error, and a header that
   cannot wrap answers a long message by squeezing the title instead. */
.telemetry-chart-header[b-wp7tl0dgn8] {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* .panel-header > div, for the same reason: without it the title block refuses
   to shrink below its longest word and pushes the tools off the panel. */
.telemetry-chart-header > div[b-wp7tl0dgn8] {
    min-width: 0;
}


/* One panel-title rank across the dashboard grid: this heading sat beside
   "Alarm flow over time" at a visibly smaller size and a different weight. */
.telemetry-chart-header h2[b-wp7tl0dgn8] {
    color: var(--pulse-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0;
}

.telemetry-chart-header p[b-wp7tl0dgn8] {
    color: var(--pulse-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 3px 0 0;
}

.telemetry-chart-tools[b-wp7tl0dgn8] {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* justify-content matters once the error wraps onto its own line: the line
   holding the buttons is then narrower than the group, and the shared control
   keeps them against the right edge. */
.telemetry-export[b-wp7tl0dgn8] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}


/* Deliberately the same chrome as the shared chart-export control on the other
   six panels: this panel needs its own buttons (one <svg> per metric card, not
   one per panel), but an operator must not be able to tell that apart. */
.telemetry-export-button[b-wp7tl0dgn8] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 9px;
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    gap: 5px;
    letter-spacing: .02em;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 0 10px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.telemetry-export-button:hover:not(:disabled)[b-wp7tl0dgn8] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-text);
}

.telemetry-export-button:disabled[b-wp7tl0dgn8] {
    cursor: default;
    opacity: .5;
}

.telemetry-export-button:focus-visible[b-wp7tl0dgn8] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.telemetry-export-button svg[b-wp7tl0dgn8] {
    fill: none;
    height: 12px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 12px;
}

/* Same placement as .chart-export-error: the message belongs to the button
   cluster that produced it, wrapping onto its own line under the buttons. As a
   block between the header and the cards it sat a full panel row away from the
   control it was reporting on, and only on this one panel. */
.telemetry-export-error[b-wp7tl0dgn8] {
    color: var(--pulse-danger-text);
    flex-basis: 100%;
    font-size: 12px;
    text-align: right;
}

.telemetry-count[b-wp7tl0dgn8] {
    background: var(--pulse-info-soft);
    border: 1px solid var(--pulse-info-border);
    border-radius: 999px;
    color: var(--pulse-info-strong);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}

.telemetry-card-grid[b-wp7tl0dgn8] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.telemetry-card[b-wp7tl0dgn8] {
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    min-width: 0;
    padding: 12px;
}

.telemetry-card-heading[b-wp7tl0dgn8] {
    align-items: flex-start;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.metric-name[b-wp7tl0dgn8] {
    color: var(--pulse-muted);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.telemetry-card strong[b-wp7tl0dgn8] {
    color: var(--pulse-text);
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: 3px;
}

.reading-count[b-wp7tl0dgn8] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.telemetry-card svg[b-wp7tl0dgn8] {
    height: 64px;
    margin: 8px 0 5px;
    overflow: visible;
    width: 100%;
}

.chart-baseline[b-wp7tl0dgn8] { fill: none; stroke: var(--pulse-border); stroke-width: 1; }
.chart-area[b-wp7tl0dgn8] { fill: color-mix(in srgb, var(--pulse-info) 11%, transparent); stroke: none; }
.chart-line[b-wp7tl0dgn8] { fill: none; stroke: var(--pulse-info); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.chart-endpoint[b-wp7tl0dgn8] { fill: var(--pulse-surface); stroke: var(--pulse-info); stroke-width: 2; vector-effect: non-scaling-stroke; }
.telemetry-card.is-state .chart-area[b-wp7tl0dgn8] { fill: color-mix(in srgb, var(--pulse-accent) 11%, transparent); }
.telemetry-card.is-state .chart-line[b-wp7tl0dgn8] { stroke: var(--pulse-accent); }
.telemetry-card.is-state .chart-endpoint[b-wp7tl0dgn8] { stroke: var(--pulse-accent); }

.telemetry-card footer[b-wp7tl0dgn8] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 8px;
    justify-content: space-between;
}

.telemetry-card footer span[b-wp7tl0dgn8] {
    color: var(--pulse-text);
    font-weight: 700;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.telemetry-card time[b-wp7tl0dgn8] { white-space: nowrap; }

/* 650px, not this panel's own card breakpoint: it is the width at which
   .panel-tools goes full width in Dashboard.razor.css and .chart-export-button
   goes full width in DashboardChartExport.razor.css. This panel is rendered
   between two panels carrying the shared control, so a breakpoint of its own
   left a band of widths where the middle panel still showed 36px inline
   buttons while its neighbours showed 44px full-width ones. */
@media (max-width: 650px) {
    /* The heading and its export buttons stop fitting on one line here, so the
       tools take the whole row underneath rather than squeezing the title. The
       wrap itself is unconditional above; this is what makes the row full
       width, exactly as .panel-tools does at this breakpoint. */
    .telemetry-chart-tools[b-wp7tl0dgn8] { width: 100%; }

    /* width, not flex: the shared control stacks PNG above CSV here. Sharing a
       row at 50% each is the one narrow-width difference an operator could
       still see between this panel and the ones above and below it. */
    .telemetry-export[b-wp7tl0dgn8] {
        width: 100%;
    }

    .telemetry-export-button[b-wp7tl0dgn8] {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .telemetry-card-grid[b-wp7tl0dgn8] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .telemetry-card *[b-wp7tl0dgn8] { transition: none !important; }

    .telemetry-export-button[b-wp7tl0dgn8] { transition: none; }
}
/* /Components/Dashboard/DashboardPager.razor.rz.scp.css */
.pagination[b-fk4hhcsn4s] {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    padding-top: 14px;
}

.pagination button[b-fk4hhcsn4s] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border-strong);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    min-height: var(--pulse-control-compact-height, 38px);
    justify-content: center;
    min-width: var(--pulse-control-compact-height, 38px);
}

.pagination button:hover:not(:disabled)[b-fk4hhcsn4s] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-accent);
}

.pagination button.current[b-fk4hhcsn4s] {
    background: var(--pulse-action);
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
}

.pagination button:disabled[b-fk4hhcsn4s] { cursor: default; opacity: .45; }

.pagination button:focus-visible[b-fk4hhcsn4s] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .pagination[b-fk4hhcsn4s] { flex-wrap: wrap; justify-content: center; }
    .pagination button[b-fk4hhcsn4s] { min-height: 44px; min-width: 44px; }
}
/* /Components/Dashboard/DashboardTrendChart.razor.rz.scp.css */
/* The ordered categorical series palette, shared by every dashboard chart
   so one series index is one colour across the panels on a screen. The dark
   values are the bright variants: the light hexes sat near 2:1 against the
   dark panel surface, which is below the 3:1 a chart line has to clear. */
.trend-chart[b-e5uhkc5y0x] {
    --pulse-series-1: #0f766e;
    --pulse-series-2: #2563eb;
    --pulse-series-3: #ea580c;
    --pulse-series-4: #9333ea;
    --pulse-series-5: #dc2626;
    --pulse-series-6: #0891b2;
    --pulse-series-7: #65a30d;
    --pulse-series-8: #d97706;
    --pulse-series-9: #4f46e5;
    --pulse-series-10: #db2777;
    --pulse-series-11: #14b8a6;
    --pulse-series-12: #60a5fa;
    --pulse-series-13: #fb923c;
    --pulse-series-14: #c084fc;
    --pulse-series-15: #f87171;
}

html[data-theme="dark"] .trend-chart[b-e5uhkc5y0x] {
    --pulse-series-1: #2dd4bf;
    --pulse-series-2: #60a5fa;
    --pulse-series-3: #fb923c;
    --pulse-series-4: #c084fc;
    --pulse-series-5: #f87171;
    --pulse-series-6: #22d3ee;
    --pulse-series-7: #a3e635;
    --pulse-series-8: #fbbf24;
    --pulse-series-9: #a5b4fc;
    --pulse-series-10: #f472b6;
    --pulse-series-11: #5eead4;
    --pulse-series-12: #93c5fd;
    --pulse-series-13: #fdba74;
    --pulse-series-14: #d8b4fe;
    --pulse-series-15: #fca5a5;
}

.trend-chart[b-e5uhkc5y0x] {
    min-height: 180px;
    width: 100%;
}

.chart-plot-scroll:focus-visible[b-e5uhkc5y0x] {
    border-radius: var(--pulse-radius-sm);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.chart-plot-scroll[b-e5uhkc5y0x] {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.trend-chart svg[b-e5uhkc5y0x] {
    aspect-ratio: 620 / 270;
    display: block;
    height: auto;
    min-width: 620px;
    overflow: visible;
    width: 100%;
}

.grid-line[b-e5uhkc5y0x] {
    stroke: var(--pulse-border);
    stroke-width: 1;
}

.axis-line[b-e5uhkc5y0x],
.tick-line[b-e5uhkc5y0x] {
    stroke: var(--pulse-border-strong);
    stroke-width: 1;
}

.axis-label[b-e5uhkc5y0x] {
    fill: var(--pulse-muted);
    font-family: var(--pulse-font-sans);
    font-size: 12px;
}

.y-label[b-e5uhkc5y0x] {
    text-anchor: end;
}

.x-label[b-e5uhkc5y0x] {
    text-anchor: middle;
}

.series-line[b-e5uhkc5y0x] {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

/* Emitted only while a mark click actually cross-filters the dashboard, so the
   cursor never promises an interaction the chart is not wired for. */
.series-line[data-clickable][b-e5uhkc5y0x],
.series-point[data-clickable][b-e5uhkc5y0x] {
    cursor: pointer;
}

.series-point[b-e5uhkc5y0x] {
    opacity: .15;
    stroke: var(--pulse-surface);
    stroke-width: 1.5;
    transition: opacity .15s ease, r .15s ease;
    vector-effect: non-scaling-stroke;
}

.series-point:hover[b-e5uhkc5y0x] {
    opacity: 1;
    r: 5px;
}

.chart-legend[b-e5uhkc5y0x] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-height: 24px;
    padding: 0 6px;
}

.legend-item[b-e5uhkc5y0x] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    gap: 6px;
    max-width: 240px;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 2px 0;
}

.legend-item:focus-visible[b-e5uhkc5y0x] {
    border-radius: var(--pulse-radius-sm);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.legend-item:disabled[b-e5uhkc5y0x],
.legend-item.is-static[b-e5uhkc5y0x] {
    cursor: default;
    opacity: 1;
}

.legend-item:hover:not(:disabled):not(.is-static) .legend-name[b-e5uhkc5y0x] {
    color: var(--pulse-accent);
    text-decoration: underline;
}

.legend-dot[b-e5uhkc5y0x] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.legend-name[b-e5uhkc5y0x] {
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.legend-more[b-e5uhkc5y0x] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
}

.chart-empty[b-e5uhkc5y0x] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    font-size: 14px;
    justify-content: center;
    min-height: 180px;
    text-align: center;
}

@media (max-width: 650px) {
    .legend-item[b-e5uhkc5y0x] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .series-point[b-e5uhkc5y0x] {
        transition: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.pulse-shell[b-2nf8jykrga] {
    --sidebar-width: 252px;
    --sidebar-background: var(--pulse-surface);
    --sidebar-border: var(--pulse-border);
    --sidebar-drawer-shadow: var(--pulse-shadow-lg);
    --sidebar-text-strong: var(--pulse-text);
    --sidebar-text: var(--pulse-muted);
    --sidebar-text-muted: var(--pulse-muted);
    --sidebar-divider: var(--pulse-border);
    --sidebar-accent: var(--pulse-accent);
    --sidebar-accent-strong: var(--pulse-accent);
    --sidebar-brand-surface: var(--pulse-surface-soft);
    --sidebar-brand-border: var(--pulse-border);
    --sidebar-brand-shield: var(--pulse-accent-soft);
    --sidebar-item-hover: var(--pulse-surface-soft);
    --sidebar-item-hover-border: var(--pulse-border);
    --sidebar-item-active: var(--pulse-accent-soft);
    --sidebar-item-active-border: var(--pulse-accent-border);
    --sidebar-panel: var(--pulse-surface-soft);
    --sidebar-panel-border: var(--pulse-border);
    --sidebar-indicator-border: var(--pulse-surface);
    --sidebar-scroll-thumb: var(--pulse-border-strong);
    background: var(--pulse-canvas);
    color: var(--pulse-text);
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    transition: grid-template-columns var(--pulse-motion-normal) ease;
}

/* Bootstrap's .visually-hidden-focusable keeps this out of the way until it is
   focused; revealing it as a grid item would push the whole shell down, so it
   comes back fixed above the command bar instead. */
.pulse-skip-link:focus[b-2nf8jykrga] {
    background: var(--pulse-surface);
    border-radius: var(--pulse-radius-sm);
    box-shadow: var(--pulse-shadow-md);
    color: var(--pulse-text);
    font-size: 14px;
    font-weight: 700;
    left: 14px;
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
    padding: 10px 16px;
    position: fixed;
    text-decoration: none;
    top: 14px;
    z-index: 1200;
}

.pulse-content:focus-visible[b-2nf8jykrga] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: -3px;
}

.pulse-sidebar[b-2nf8jykrga] {
    background: var(--sidebar-background);
    border-right: 1px solid var(--sidebar-border);
    box-sizing: border-box;
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    left: 0;
    overflow: hidden;
    padding: 20px 14px 16px;
    position: sticky;
    top: 0;
    z-index: 60;
}

.pulse-nav[b-2nf8jykrga]::-webkit-scrollbar {
    width: 6px;
}

.pulse-nav[b-2nf8jykrga]::-webkit-scrollbar-thumb {
    background: var(--sidebar-scroll-thumb);
    border-radius: 999px;
}

.sidebar-heading[b-2nf8jykrga] {
    align-items: center;
    border-bottom: 1px solid var(--sidebar-divider);
    display: flex;
    justify-content: space-between;
    margin: 0 3px 18px;
    padding: 0 3px 18px;
}

.pulse-sidebar .pulse-brand[b-2nf8jykrga] {
    align-items: center;
    color: var(--sidebar-text-strong);
    display: flex;
    flex: 1;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.brand-symbol[b-2nf8jykrga] {
    align-items: center;
    background: var(--sidebar-brand-surface);
    border: 1px solid var(--sidebar-brand-border);
    border-radius: var(--pulse-radius-md);
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    transition: border-color var(--pulse-motion-fast) ease;
    width: 42px;
}

.pulse-brand:hover .brand-symbol[b-2nf8jykrga] {
    border-color: var(--sidebar-accent);
}

.brand-symbol svg[b-2nf8jykrga] {
    height: 31px;
    width: 31px;
}

.brand-shield[b-2nf8jykrga] {
    fill: var(--sidebar-brand-shield);
    /* The published brand's primary colour, which the validator holds to 3:1
       against both surfaces - the WCAG threshold for a graphical object, which
       is what this mark is. Undefined until a brand is published, so the
       default install keeps the stock accent. */
    stroke: var(--pulse-brand-primary, var(--sidebar-accent));
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.brand-pulse[b-2nf8jykrga] {
    fill: none;
    stroke: var(--sidebar-text-strong);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.brand-copy[b-2nf8jykrga] {
    display: grid;
    line-height: 1.3;
}

.brand-copy strong[b-2nf8jykrga] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.brand-copy small[b-2nf8jykrga] {
    color: var(--sidebar-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    margin-top: 6px;
    text-transform: uppercase;
}

.sidebar-close[b-2nf8jykrga],
.menu-toggle[b-2nf8jykrga] {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: none;
    justify-content: center;
}

.sidebar-close[b-2nf8jykrga] {
    border-radius: var(--pulse-radius-sm);
    color: var(--sidebar-text-muted);
    flex: 0 0 auto;
    height: 38px;
    width: 38px;
}

.sidebar-close:hover[b-2nf8jykrga] {
    background: var(--sidebar-item-hover);
    color: var(--sidebar-accent-strong);
}

.sidebar-close svg[b-2nf8jykrga],
.menu-toggle svg[b-2nf8jykrga] {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
    width: 22px;
}

.pulse-nav[b-2nf8jykrga] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    /* The scroll box must leave room for the solid focus outline; the
       negative inline margin preserves the alignment of the links. */
    margin-inline: -6px;
    min-height: 0;
    overscroll-behavior: contain;
    overflow: hidden auto;
    padding: 6px;
    scroll-padding-block: 6px;
    scrollbar-color: var(--sidebar-scroll-thumb) transparent;
    scrollbar-width: thin;
}

.nav-section-label[b-2nf8jykrga] {
    color: var(--sidebar-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.3;
    margin: 2px 12px 7px;
    text-transform: uppercase;
}

.nav-section-system[b-2nf8jykrga] {
    margin-top: 19px;
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm);
    color: var(--sidebar-text);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 11px;
    min-height: 48px;
    padding: 0 10px;
    position: relative;
    text-decoration: none;
    transition: background-color var(--pulse-motion-fast) ease,
        border-color var(--pulse-motion-fast) ease,
        color var(--pulse-motion-fast) ease;
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item::before {
    background: var(--sidebar-accent);
    border-radius: 999px;
    content: "";
    height: 0;
    left: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
}

.sidebar-density-toggle[b-2nf8jykrga] {
    align-items: center;
    background: var(--sidebar-panel);
    border: 1px solid var(--sidebar-panel-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
    width: 32px;
}

.sidebar-density-toggle:hover[b-2nf8jykrga] {
    background: var(--sidebar-item-hover);
    border-color: var(--sidebar-item-hover-border);
    color: var(--sidebar-accent-strong);
}

.sidebar-density-toggle svg[b-2nf8jykrga] {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform .18s ease;
    width: 18px;
}

.pulse-nav[b-2nf8jykrga]  .pulse-nav-item svg {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm);
    box-sizing: border-box;
    fill: none;
    flex: 0 0 auto;
    height: 31px;
    padding: 5px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 31px;
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item:hover {
    background: var(--sidebar-item-hover);
    border-color: var(--sidebar-item-hover-border);
    color: var(--sidebar-accent-strong);
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item.active {
    background: var(--sidebar-item-active);
    border-color: var(--sidebar-item-active-border);
    color: var(--sidebar-accent-strong);
    font-weight: 700;
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item.active svg {
    color: var(--sidebar-accent-strong);
}

.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item.active::before {
    height: 22px;
}

.pulse-sidebar[b-2nf8jykrga]  .control-room-nav {
    color: var(--sidebar-text);
}

.pulse-sidebar .pulse-brand:focus-visible[b-2nf8jykrga],
.pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item:focus-visible,
.sidebar-close:focus-visible[b-2nf8jykrga],
.sidebar-density-toggle:focus-visible[b-2nf8jykrga] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.live-nav-dot[b-2nf8jykrga] {
    background: #fb7185;
    border: 2px solid var(--sidebar-indicator-border);
    border-radius: 50%;
    height: 7px;
    margin-left: auto;
    width: 7px;
}

.alarm-badge[b-2nf8jykrga] {
    background: #e11d48;
    border: 2px solid var(--sidebar-indicator-border);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    min-width: 18px;
    padding: 4px 5px;
    text-align: center;
}

/* Keep unknown counts amber and legible against their white text in either
   theme; a bright warning token would lose that contrast. */
.alarm-badge.is-unknown[b-2nf8jykrga] {
    background: #b45309;
}

.sidebar-footer[b-2nf8jykrga] {
    border-top: 1px solid var(--sidebar-divider);
    margin-top: 20px;
    padding: 16px 3px 0;
}

.system-health[b-2nf8jykrga] {
    align-items: center;
    background: var(--sidebar-panel);
    border: 1px solid var(--sidebar-panel-border);
    border-radius: var(--pulse-radius-md);
    color: var(--sidebar-text-strong);
    display: flex;
    gap: 11px;
    cursor: pointer;
    font: inherit;
    padding: 11px 12px;
    text-align: left;
    transition: background-color var(--pulse-motion-fast) ease, border-color var(--pulse-motion-fast) ease;
}

.system-health:hover[b-2nf8jykrga] {
    background: var(--sidebar-item-hover);
    border-color: var(--sidebar-item-hover-border);
}

.system-health:focus-visible[b-2nf8jykrga] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.system-health > span:last-child[b-2nf8jykrga] {
    display: grid;
    min-width: 0;
}

.system-health small[b-2nf8jykrga] {
    color: var(--sidebar-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.system-health strong[b-2nf8jykrga] {
    font-size: 14px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-orbit[b-2nf8jykrga] {
    align-items: center;
    border: 1px solid var(--sidebar-panel-border);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.status-dot[b-2nf8jykrga] {
    background: var(--sidebar-text-muted);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.system-health.is-online .status-dot[b-2nf8jykrga] {
    background: #34d399;
}

.system-health.is-degraded .status-dot[b-2nf8jykrga] {
    background: #fbbf24;
}

.system-health.is-offline .status-dot[b-2nf8jykrga] {
    background: #fb7185;
}

/* Match the unknown alarm badge without borrowing a healthy status colour. */
.system-health.is-unknown .status-dot[b-2nf8jykrga] {
    background: #b45309;
}

.system-health.is-paused .status-dot[b-2nf8jykrga] {
    background: var(--sidebar-text-muted);
}

.system-health-fix[b-2nf8jykrga] {
    align-items: center;
    border-radius: var(--pulse-radius-sm);
    color: var(--sidebar-accent-strong);
    display: none;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    margin-top: 7px;
    padding: 8px 10px;
    text-decoration: none;
}

.system-health.is-degraded ~ .system-health-fix[b-2nf8jykrga],
.system-health.is-offline ~ .system-health-fix[b-2nf8jykrga] {
    display: flex;
}

.system-health-fix:hover[b-2nf8jykrga] {
    background: var(--sidebar-item-hover);
    color: var(--sidebar-accent-strong);
}

.system-health-fix:focus-visible[b-2nf8jykrga] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.system-health-fix svg[b-2nf8jykrga] {
    fill: none;
    flex: 0 0 auto;
    height: 15px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 15px;
}

.native-badge[b-2nf8jykrga] {
    align-items: center;
    color: var(--sidebar-text-muted);
    display: flex;
    font-size: 12px;
    font-weight: 500;
    gap: 7px;
    letter-spacing: .05em;
    margin: 11px 4px 0;
    text-transform: uppercase;
}

.native-badge span[b-2nf8jykrga] {
    background: var(--sidebar-accent);
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

.pulse-workspace[b-2nf8jykrga] {
    min-width: 0;
}

.pulse-commandbar[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-surface);
    border-bottom: 1px solid var(--pulse-border);
    display: flex;
    gap: 18px;
    min-height: var(--pulse-commandbar-height);
    padding: 0 var(--pulse-page-gutter);
    position: sticky;
    top: 0;
    z-index: 45;
}

.commandbar-discovery[b-2nf8jykrga] {
    align-items: stretch;
    display: flex;
    flex: 1;
    gap: 8px;
    max-width: 650px;
    min-width: 0;
}

.pulse-search[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-control-surface-hover);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-md);
    display: flex;
    flex: 1;
    min-width: 0;
    padding: 0 3px 0 13px;
    transition: background-color var(--pulse-motion-fast) ease,
        border-color var(--pulse-motion-fast) ease;
}

.pulse-search:focus-within[b-2nf8jykrga] {
    background: var(--pulse-control-surface);
    border-color: var(--pulse-focus-ring);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The magnifier is the only mark in the search field until something is typed,
   and a fixed slate stroke put it at roughly 2.6:1 on the dark command bar and
   the dark command dialog. --pulse-muted is the same grey in light and lifts in
   dark, like every other secondary mark in the shell. */
.pulse-search > svg[b-2nf8jykrga],
.command-search svg[b-2nf8jykrga] {
    fill: none;
    flex: 0 0 auto;
    height: 19px;
    stroke: var(--pulse-muted);
    stroke-linecap: round;
    stroke-width: 1.7;
    width: 19px;
}

.pulse-search input[b-2nf8jykrga] {
    background: transparent;
    border: 0;
    color: var(--pulse-control-text);
    flex: 1;
    font: inherit;
    font-size: 14px;
    min-width: 0;
    outline: none;
    padding: 12px 10px;
}

.pulse-search input[b-2nf8jykrga]::placeholder {
    color: var(--pulse-placeholder);
    opacity: 1;
}

/* A settings-only host has a palette opener but no camera search field. */
div.pulse-search[b-2nf8jykrga],
div.pulse-search:focus-within[b-2nf8jykrga] {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.search-shortcut[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    min-height: var(--pulse-control-min-height);
    padding: 8px 10px;
    transition: background-color var(--pulse-motion-fast) ease,
        border-color var(--pulse-motion-fast) ease,
        color var(--pulse-motion-fast) ease;
}

.search-shortcut:hover[b-2nf8jykrga] {
    background: var(--pulse-control-surface-hover);
    border-color: var(--pulse-border-strong);
}

.quick-actions-icon[b-2nf8jykrga] {
    fill: none;
    flex: 0 0 auto;
    height: 18px;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 18px;
}

kbd[b-2nf8jykrga] {
    background: var(--pulse-surface-inset);
    border: 1px solid var(--pulse-control-border);
    border-bottom-color: var(--pulse-border-strong);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--pulse-border-strong);
    color: var(--pulse-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px;
}

.commandbar-tools[b-2nf8jykrga] {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.control-room-button[b-2nf8jykrga],
.theme-toggle[b-2nf8jykrga],
.alarm-popups-toggle[b-2nf8jykrga],
.relay-toast-sound[b-2nf8jykrga],
.account-menu > summary[b-2nf8jykrga] {
    min-height: var(--pulse-control-compact-height);
}

.relay-toast-sound[b-2nf8jykrga] {
    min-width: var(--pulse-control-compact-height);
}

.local-clock[b-2nf8jykrga] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

/* A direct workspace entry when the full navigation is tucked away. */
.control-room-button[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-action);
    border: 1px solid var(--pulse-action-hover);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-on-action);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 9px 11px;
    text-decoration: none;
    transition: background-color var(--pulse-motion-fast) ease;
    white-space: nowrap;
}

.control-room-button:hover[b-2nf8jykrga] {
    background: var(--pulse-action-hover);
    color: var(--pulse-on-action);
}

.control-room-icon[b-2nf8jykrga] {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.theme-toggle[b-2nf8jykrga],
.alarm-popups-toggle[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    padding: 8px 9px;
    transition: background-color var(--pulse-motion-fast) ease,
        border-color var(--pulse-motion-fast) ease,
        color var(--pulse-motion-fast) ease;
}

.theme-toggle svg[b-2nf8jykrga],
.alarm-popups-toggle svg[b-2nf8jykrga] {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 17px;
}

.alarm-popups-toggle[b-2nf8jykrga] {
    color: var(--pulse-control-text);
    flex: 0 0 auto;
    white-space: nowrap;
}

.alarm-popups-toggle[hidden][b-2nf8jykrga] {
    display: none;
}

.alarm-popups-toggle:hover[b-2nf8jykrga] {
    background: var(--pulse-control-surface-hover);
}

.alarm-popups-state[b-2nf8jykrga] {
    color: var(--pulse-muted);
    font-size: 12px;
}

.alarm-popups-off-mark[b-2nf8jykrga] {
    display: none;
}

.alarm-popups-toggle[aria-pressed="false"] .alarm-popups-off-mark[b-2nf8jykrga] {
    display: initial;
}

.theme-sun[b-2nf8jykrga],
.theme-toggle[data-current-theme="dark"] .theme-moon[b-2nf8jykrga] {
    display: none;
}

.theme-toggle[data-current-theme="dark"] .theme-sun[b-2nf8jykrga] {
    display: block;
}

.account-menu[b-2nf8jykrga] {
    position: relative;
}

.account-menu > summary[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-control-text);
    cursor: pointer;
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 4px 8px 4px 5px;
    transition: background-color var(--pulse-motion-fast) ease,
        border-color var(--pulse-motion-fast) ease;
}

.account-menu > summary[b-2nf8jykrga]::-webkit-details-marker {
    display: none;
}

.account-menu[open] > summary[b-2nf8jykrga],
.account-menu > summary:hover[b-2nf8jykrga] {
    background: var(--pulse-control-surface-hover);
    border-color: var(--pulse-border-strong);
}

.account-menu > summary > svg[b-2nf8jykrga] {
    fill: none;
    height: 14px;
    stroke: var(--pulse-muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 14px;
}

.account-avatar[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-accent-soft);
    border: 1px solid var(--pulse-accent-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-accent);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    letter-spacing: .02em;
    width: 28px;
}

.account-avatar.large[b-2nf8jykrga] {
    border-radius: var(--pulse-radius-md);
    font-size: 12px;
    height: 38px;
    width: 38px;
}

.account-summary-copy[b-2nf8jykrga] {
    display: grid;
    line-height: 1.3;
    max-width: 115px;
    min-width: 0;
    text-align: left;
}

.account-summary-copy strong[b-2nf8jykrga] {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-summary-copy small[b-2nf8jykrga] {
    color: var(--pulse-placeholder);
    font-size: 12px;
    font-weight: 500;
    margin-top: 3px;
}

.account-popover[b-2nf8jykrga] {
    background: var(--pulse-surface-overlay);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    box-shadow: var(--pulse-shadow-lg);
    min-width: 245px;
    max-height: calc(100dvh - var(--pulse-commandbar-height) - 18px);
    max-width: min(320px, calc(100vw - 28px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 9px;
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    z-index: 80;
}

.account-popover[b-2nf8jykrga]::before {
    background: var(--pulse-surface-raised);
    border-left: 1px solid var(--pulse-border);
    border-top: 1px solid var(--pulse-border);
    content: "";
    height: 9px;
    position: absolute;
    right: 17px;
    top: -5px;
    transform: rotate(45deg);
    width: 9px;
}

.account-popover header[b-2nf8jykrga] {
    align-items: center;
    display: flex;
    gap: 9px;
    padding: 7px;
}

.account-popover header > span:last-child[b-2nf8jykrga] {
    display: grid;
    min-width: 0;
}

.account-popover header strong[b-2nf8jykrga] {
    color: var(--pulse-text);
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.account-popover header small[b-2nf8jykrga] {
    color: var(--pulse-muted);
    font-size: 12px;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.account-role[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-muted);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    margin: 3px 5px 8px;
    padding: 6px 7px;
}

.account-role > span[b-2nf8jykrga] {
    background: var(--pulse-accent);
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.account-popover nav[b-2nf8jykrga] {
    border-bottom: 1px solid var(--pulse-border);
    border-top: 1px solid var(--pulse-border);
    display: grid;
    padding: 6px 0;
}

.account-popover nav a[b-2nf8jykrga],
.account-popover form button[b-2nf8jykrga] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    min-height: var(--pulse-control-compact-height);
    padding: 8px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.account-popover nav a:hover[b-2nf8jykrga],
.account-popover form button:hover[b-2nf8jykrga] {
    background: var(--pulse-control-surface-hover);
    color: var(--pulse-accent);
}

.account-popover nav svg[b-2nf8jykrga],
.account-popover form svg[b-2nf8jykrga] {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
    width: 16px;
}

.account-popover form[b-2nf8jykrga] {
    margin-top: 5px;
}

.account-popover form button[b-2nf8jykrga] {
    color: var(--pulse-danger-text);
}

.pulse-content[b-2nf8jykrga] {
    background: var(--pulse-canvas);
    color: var(--pulse-text);
    /* Derived, not a copy of the bar's height: the bar is 64px on desktop and
       tablet and 132px once the phone bar wraps, and a literal here stayed put
       through all three, so pages picked up a scrollbar they did not need. */
    min-height: calc(100vh - var(--pulse-commandbar-height));
    min-height: calc(100dvh - var(--pulse-commandbar-height));
}

.sidebar-backdrop[b-2nf8jykrga] {
    display: none;
}

.sidebar-backdrop[hidden][b-2nf8jykrga] {
    display: none;
}

.command-palette[hidden][b-2nf8jykrga] {
    display: none;
}

.command-palette[b-2nf8jykrga] {
    inset: 0;
    position: fixed;
    z-index: 1000;
}

.command-backdrop[b-2nf8jykrga] {
    background: rgba(3, 12, 23, .63);
    border: 0;
    cursor: default;
    inset: 0;
    position: absolute;
    width: 100%;
}

.command-dialog[b-2nf8jykrga] {
    animation: command-enter-b-2nf8jykrga .18s ease-out;
    background: var(--pulse-surface-raised);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-xl);
    box-shadow: var(--pulse-shadow-lg);
    left: 50%;
    max-height: min(720px, calc(100vh - 70px));
    max-height: min(720px, calc(100dvh - 70px));
    max-width: 660px;
    overflow: auto;
    padding: 18px;
    position: absolute;
    top: 9vh;
    transform: translateX(-50%);
    width: calc(100% - 36px);
}

@keyframes command-enter-b-2nf8jykrga {
    from { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.command-dialog header[b-2nf8jykrga] {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 2px 3px 14px;
}

.command-eyebrow[b-2nf8jykrga] {
    color: var(--pulse-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.command-dialog h2[b-2nf8jykrga] {
    color: var(--pulse-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 3px 0 0;
}

.command-dialog header p[b-2nf8jykrga] {
    color: var(--pulse-placeholder);
    font-size: 12px;
    line-height: 1.45;
    margin: 5px 0 0;
}

.command-dialog header button[b-2nf8jykrga] {
    background: var(--pulse-surface-inset);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-placeholder);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    min-height: var(--pulse-control-compact-height);
    min-width: var(--pulse-control-compact-height);
    padding: 5px 7px;
}

.command-search[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    display: flex;
    gap: 9px;
    padding: 0 13px;
}

.command-search:focus-within[b-2nf8jykrga] {
    border-color: var(--pulse-focus-ring);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.command-search input[b-2nf8jykrga] {
    background: transparent;
    border: 0;
    color: var(--pulse-text);
    flex: 1;
    font: inherit;
    font-size: 14px;
    min-width: 0;
    outline: 0;
    padding: 13px 0;
}

.system-health.is-checking .status-dot[b-2nf8jykrga] {
    animation: status-checking-pulse-b-2nf8jykrga 1.1s ease-in-out infinite alternate;
}

@keyframes status-checking-pulse-b-2nf8jykrga {
    to {
        opacity: .45;
        transform: scale(.72);
    }
}

.command-search input[b-2nf8jykrga]::placeholder {
    color: var(--pulse-placeholder);
    opacity: 1;
}

.command-grid[b-2nf8jykrga] {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px 0 2px;
}

.command-grid a[b-2nf8jykrga] {
    background: var(--pulse-surface-raised);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-text);
    display: grid;
    gap: 3px;
    min-height: 70px;
    padding: 12px 44px 12px 13px;
    position: relative;
    text-decoration: none;
}

.command-grid a:hover[b-2nf8jykrga],
.command-grid a.is-highlighted[b-2nf8jykrga] {
    background: var(--pulse-accent-soft);
    border-color: var(--pulse-accent-bright);
}

.command-grid strong[b-2nf8jykrga] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.command-grid span[b-2nf8jykrga] {
    color: var(--pulse-placeholder);
    font-size: 12px;
    line-height: 1.45;
}

.command-grid kbd[b-2nf8jykrga] {
    position: absolute;
    right: 10px;
    top: 10px;
}

.command-empty[b-2nf8jykrga] {
    color: var(--pulse-muted);
    padding: 28px 12px;
    text-align: center;
}

.command-dialog footer[b-2nf8jykrga] {
    border-top: 1px solid var(--pulse-border);
    color: var(--pulse-placeholder);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    gap: 18px;
    margin-top: 13px;
    padding: 12px 3px 0;
}

.command-dialog footer span[b-2nf8jykrga] {
    align-items: center;
    display: flex;
    gap: 4px;
}

/* A browser that refuses to play the alarm tone has to be visible without
   hovering the control, so the toggle widens and carries the reason. */
.relay-toast-sound.is-sound-blocked[b-2nf8jykrga] {
    background: var(--pulse-warning-soft, #fff7ed);
    border-color: var(--pulse-warning-border, #fed7aa);
    color: var(--pulse-warning-text, #9a3412);
    gap: 7px;
    padding: 0 12px;
    width: auto;
}

.relay-toast-sound[b-2nf8jykrga]  .relay-toast-sound-note {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

#blazor-error-ui[b-2nf8jykrga] {
    align-items: center;
    background: #fffdf5;
    border: 1px solid #f6d588;
    border-radius: var(--pulse-radius-xl);
    bottom: 18px;
    box-shadow: var(--pulse-shadow-lg);
    box-sizing: border-box;
    color: #713f12;
    display: none;
    gap: 12px;
    max-width: min(560px, calc(100vw - 36px));
    padding: 12px 48px 12px 12px;
    position: fixed;
    right: 18px;
    width: auto;
    z-index: 1100;
}

#blazor-error-ui[style*="display: block"][b-2nf8jykrga] {
    display: flex !important;
}

#blazor-error-ui .error-ui-icon[b-2nf8jykrga] {
    align-items: center;
    background: #fef3c7;
    border: 1px solid #f6d588;
    border-radius: var(--pulse-radius-md);
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 18px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
}

#blazor-error-ui .error-ui-copy[b-2nf8jykrga] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#blazor-error-ui .error-ui-copy strong[b-2nf8jykrga] {
    font-size: 12px;
}

#blazor-error-ui .error-ui-copy small[b-2nf8jykrga] {
    color: #92621b;
    font-size: 12px;
}

#blazor-error-ui .reload[b-2nf8jykrga] {
    background: #713f12;
    border-radius: var(--pulse-radius-sm);
    color: #fff;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 11px;
    text-decoration: none;
}

#blazor-error-ui .dismiss[b-2nf8jykrga] {
    background: transparent;
    border: 0;
    color: #92621b;
    cursor: pointer;
    font-family: inherit;
    font-size: 20px;
    position: absolute;
    right: 12px;
    top: 10px;
}

html[data-theme="dark"] #blazor-error-ui[b-2nf8jykrga] {
    background: #211a10;
    border-color: #6f5226;
    color: #fde8b2;
}

html[data-theme="dark"] #blazor-error-ui .error-ui-icon[b-2nf8jykrga] {
    background: #35250f;
    border-color: #6f5226;
}

html[data-theme="dark"] #blazor-error-ui .error-ui-copy small[b-2nf8jykrga],
html[data-theme="dark"] #blazor-error-ui .dismiss[b-2nf8jykrga] {
    color: #d8b56b;
}

html[data-theme="dark"] #blazor-error-ui .reload[b-2nf8jykrga] {
    background: #f3c96b;
    color: #211a10;
}

.theme-toggle:focus-visible[b-2nf8jykrga],
.alarm-popups-toggle:focus-visible[b-2nf8jykrga],
.account-menu > summary:focus-visible[b-2nf8jykrga],
.control-room-button:focus-visible[b-2nf8jykrga],
.menu-toggle:focus-visible[b-2nf8jykrga],
.search-shortcut:focus-visible[b-2nf8jykrga],
.command-dialog button:focus-visible[b-2nf8jykrga],
.command-grid a:focus-visible[b-2nf8jykrga],
#blazor-error-ui .reload:focus-visible[b-2nf8jykrga],
#blazor-error-ui .dismiss:focus-visible[b-2nf8jykrga] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

@media (min-width: 821px) {
    /* The full sidebar already exposes this destination. Keep the shortcut
       when that navigation is collapsed, as well as in the mobile drawer layout. */
    html:not([data-sidebar-mode="compact"]) .control-room-button[b-2nf8jykrga] {
        display: none;
    }

    html[data-sidebar-mode="compact"] .pulse-shell[b-2nf8jykrga] {
        --sidebar-width: 86px;
    }

    html[data-sidebar-mode="compact"] .pulse-sidebar[b-2nf8jykrga] {
        padding-inline: 12px;
    }

    html[data-sidebar-mode="compact"] .sidebar-heading[b-2nf8jykrga] {
        gap: 4px;
        justify-content: center;
        margin-inline: 0;
        padding-inline: 0;
    }

    html[data-sidebar-mode="compact"] .pulse-sidebar .pulse-brand[b-2nf8jykrga] {
        flex: 0 0 auto;
        justify-content: center;
    }

    html[data-sidebar-mode="compact"] .brand-symbol[b-2nf8jykrga] {
        border-radius: var(--pulse-radius-sm);
        height: 34px;
        width: 34px;
    }

    html[data-sidebar-mode="compact"] .brand-symbol svg[b-2nf8jykrga] {
        height: 25px;
        width: 25px;
    }

    html[data-sidebar-mode="compact"] .sidebar-density-toggle[b-2nf8jykrga] {
        border-radius: var(--pulse-radius-sm);
        height: 24px;
        width: 24px;
    }

    html[data-sidebar-mode="compact"] .sidebar-density-toggle svg[b-2nf8jykrga] {
        height: 15px;
        transform: rotate(180deg);
        width: 15px;
    }

    html[data-sidebar-mode="compact"] .brand-copy[b-2nf8jykrga],
    html[data-sidebar-mode="compact"] .nav-section-label[b-2nf8jykrga],
    html[data-sidebar-mode="compact"] .pulse-nav[b-2nf8jykrga]  .pulse-nav-item > span:not(.alarm-badge):not(.live-nav-dot),
    html[data-sidebar-mode="compact"] .system-health > span:last-child[b-2nf8jykrga],
    html[data-sidebar-mode="compact"] .native-badge[b-2nf8jykrga] {
        display: none;
    }

    html[data-sidebar-mode="compact"] .system-health.is-degraded ~ .system-health-fix[b-2nf8jykrga],
    html[data-sidebar-mode="compact"] .system-health.is-offline ~ .system-health-fix[b-2nf8jykrga] {
        display: none;
    }

    html[data-sidebar-mode="compact"] .pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item {
        justify-content: center;
        min-height: 48px;
        padding: 0;
    }

    html[data-sidebar-mode="compact"] .nav-section-label.nav-section-system[b-2nf8jykrga] {
        background: var(--sidebar-divider);
        display: block;
        height: 1px;
        margin: 14px 6px 10px;
        overflow: hidden;
    }

    html[data-sidebar-mode="compact"] .live-nav-dot[b-2nf8jykrga],
    html[data-sidebar-mode="compact"] .alarm-badge[b-2nf8jykrga] {
        position: absolute;
        right: 9px;
        top: 7px;
    }

    html[data-sidebar-mode="compact"] .system-health[b-2nf8jykrga] {
        justify-content: center;
        padding-inline: 0;
    }
}

@media (max-width: 1320px) {
    .account-summary-copy[b-2nf8jykrga] {
        display: none;
    }
}


/* The bar sheds its widest items while the sidebar is still docked. Tying that
   to the drawer breakpoint left a nowrap tool group wider than the workspace
   between 821px and 1320px, and the whole document scrolled sideways. */
@media (max-width: 1180px) {
    .local-clock[b-2nf8jykrga],
    .theme-label[b-2nf8jykrga],
    .alarm-popups-label[b-2nf8jykrga],
    .alarm-popups-state[b-2nf8jykrga],
    .search-shortcut span[b-2nf8jykrga] {
        display: none;
    }
}

@media (max-width: 1000px) {
    .control-room-button[b-2nf8jykrga] {
        font-size: 0;
        height: 38px;
        justify-content: center;
        padding: 0;
        width: 38px;
    }
}

@media (max-width: 820px) {
    .pulse-shell[b-2nf8jykrga] {
        display: block;
    }

    .pulse-sidebar[b-2nf8jykrga] {
        box-shadow: var(--sidebar-drawer-shadow);
        height: 100dvh;
        max-width: 300px;
        padding: 20px 14px 16px;
        position: fixed;
        transform: translateX(-104%);
        /* Sliding the drawer off-screen left every link in it focusable, so
           tabbing from the address bar walked through a dozen invisible controls
           before reaching the page. visibility animates discretely, so the slide
           is preserved in both directions, and it is inherited - which takes the
           whole drawer out of the accessibility tree too. */
        transition: transform var(--pulse-motion-normal) ease,
            visibility var(--pulse-motion-normal) ease;
        visibility: hidden;
        width: min(88vw, 300px);
    }

    .pulse-sidebar.is-open[b-2nf8jykrga] {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-heading[b-2nf8jykrga] {
        justify-content: space-between;
        margin: 0 3px 18px;
    }

    .pulse-sidebar .pulse-brand[b-2nf8jykrga] {
        flex: 1;
        justify-content: flex-start;
    }

    .brand-symbol[b-2nf8jykrga] {
        border-radius: var(--pulse-radius-md);
        height: 42px;
        width: 42px;
    }

    .brand-symbol svg[b-2nf8jykrga] {
        height: 31px;
        width: 31px;
    }

    .brand-copy[b-2nf8jykrga],
    .system-health > span:last-child[b-2nf8jykrga] {
        display: grid;
    }

    .nav-section-label[b-2nf8jykrga] {
        display: block;
    }

    .nav-section-label.nav-section-system[b-2nf8jykrga] {
        background: transparent;
        height: auto;
        margin: 19px 12px 7px;
        overflow: visible;
    }

    .pulse-nav[b-2nf8jykrga]  .pulse-nav-item > span:not(.alarm-badge):not(.live-nav-dot) {
        display: inline;
    }

    .native-badge[b-2nf8jykrga] {
        display: flex;
    }

    .pulse-sidebar[b-2nf8jykrga]  .pulse-nav-item {
        justify-content: flex-start;
        min-height: 48px;
        padding: 0 10px;
    }

    .live-nav-dot[b-2nf8jykrga],
    .alarm-badge[b-2nf8jykrga] {
        margin-left: auto;
        position: static;
    }

    .system-health[b-2nf8jykrga] {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .sidebar-close[b-2nf8jykrga],
    .menu-toggle[b-2nf8jykrga] {
        display: inline-flex;
    }

    .sidebar-density-toggle[b-2nf8jykrga] {
        display: none;
    }

    .sidebar-backdrop[b-2nf8jykrga] {
        background: rgba(3, 9, 18, .56);
        border: 0;
        cursor: default;
        display: block;
        inset: 0;
        position: fixed;
        width: 100%;
        z-index: 55;
    }

    /* The height itself comes from --pulse-commandbar-height: 64px for the
       single-row tablet bar and 132px once the phone search wraps below it. */
    .pulse-commandbar[b-2nf8jykrga] {
        gap: 10px;
        padding: 0 14px;
    }

    .menu-toggle[b-2nf8jykrga] {
        color: var(--pulse-placeholder);
        flex: 0 0 auto;
        height: 40px;
        width: 40px;
    }

    .local-clock[b-2nf8jykrga],
    .theme-label[b-2nf8jykrga],
    .search-shortcut span[b-2nf8jykrga],
    .search-shortcut kbd[b-2nf8jykrga] {
        display: none;
    }

    .search-shortcut[b-2nf8jykrga] {
        min-width: var(--pulse-control-min-height);
        padding-inline: 10px;
    }

    .control-room-button[b-2nf8jykrga] {
        font-size: 0;
        height: 38px;
        justify-content: center;
        padding: 0;
        width: 38px;
    }

    .account-menu > summary[b-2nf8jykrga] {
        height: 38px;
        justify-content: center;
        padding: 4px;
        width: 38px;
    }

    .account-menu > summary > svg[b-2nf8jykrga] {
        display: none;
    }
}

@media (max-width: 560px) {
    .pulse-commandbar[b-2nf8jykrga] {
        flex-wrap: wrap;
        padding-block: 10px;
    }

    .commandbar-discovery[b-2nf8jykrga] {
        flex: 0 0 100%;
        max-width: none;
        order: 3;
        width: 100%;
    }

    div.pulse-search .search-shortcut[b-2nf8jykrga] {
        width: 100%;
    }

    div.pulse-search .search-shortcut span[b-2nf8jykrga] {
        display: inline;
    }

    .commandbar-tools[b-2nf8jykrga] {
        gap: 4px;
        margin-left: auto;
    }

    .command-grid[b-2nf8jykrga] {
        grid-template-columns: 1fr;
    }

    .command-dialog[b-2nf8jykrga] {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 14px;
        top: 12px;
        width: calc(100% - 20px);
    }

    #blazor-error-ui[b-2nf8jykrga] {
        align-items: flex-start;
        bottom: 10px;
        flex-wrap: wrap;
        left: 10px;
        max-width: none;
        right: 10px;
        width: auto;
    }

    #blazor-error-ui .error-ui-copy[b-2nf8jykrga] {
        flex: 1 1 calc(100% - 52px);
    }

    #blazor-error-ui .reload[b-2nf8jykrga] {
        margin-left: 50px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .account-popover[b-2nf8jykrga] {
        max-height: calc(100dvh - 56px);
    }
}

@media (max-width: 560px), (any-pointer: coarse) {
    .pulse-search input[b-2nf8jykrga],
    .command-search input[b-2nf8jykrga] {
        font-size: 16px;
    }

    .sidebar-close[b-2nf8jykrga],
    .sidebar-density-toggle[b-2nf8jykrga],
    .menu-toggle[b-2nf8jykrga],
    .control-room-button[b-2nf8jykrga],
    .theme-toggle[b-2nf8jykrga],
    .alarm-popups-toggle[b-2nf8jykrga],
    .relay-toast-sound[b-2nf8jykrga],
    .account-menu > summary[b-2nf8jykrga],
    .search-shortcut[b-2nf8jykrga],
    .account-popover nav a[b-2nf8jykrga],
    .account-popover form button[b-2nf8jykrga],
    .command-dialog header button[b-2nf8jykrga] {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-symbol[b-2nf8jykrga],
    .command-dialog[b-2nf8jykrga],
    .pulse-shell[b-2nf8jykrga],
    .pulse-sidebar[b-2nf8jykrga],
    .sidebar-density-toggle[b-2nf8jykrga],
    .sidebar-density-toggle svg[b-2nf8jykrga],
    .pulse-nav[b-2nf8jykrga]  .pulse-nav-item,
    .pulse-nav[b-2nf8jykrga]  .pulse-nav-item::before,
    .control-room-button[b-2nf8jykrga] {
        animation: none;
        transition: none;
    }
}
.brand-logo-image[b-2nf8jykrga] { overflow: hidden; }
.brand-logo-image img[b-2nf8jykrga] { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: var(--pulse-surface); }
.operator-localization-boundary[b-2nf8jykrga] {
    align-content: center;
    box-sizing: border-box;
    display: grid;
    gap: .75rem;
    margin: clamp(1rem, 4vw, 3rem) auto;
    max-width: min(42rem, calc(100% - 1.5rem));
    min-height: 10rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: clamp(1rem, 4vw, 2rem);
    width: 100%;
}

/* A quiet footnote after a working page, not a page of its own and never a
   strip in front of the control room: one line, warning tokens, dismissible.
   It renders only when the durable preference store itself failed to read. */
.operator-localization-notice[b-2nf8jykrga] {
    align-items: center;
    background: var(--pulse-warning-soft, #fffbeb);
    border: 1px solid var(--pulse-warning-border, #fde68a);
    border-radius: .75rem;
    color: var(--pulse-warning-text, #92400e);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    margin: 1rem 0 0;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .6rem .9rem;
}

.operator-localization-copy[b-2nf8jykrga] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    min-width: 0;
}

.operator-localization-notice a[b-2nf8jykrga],
.operator-localization-notice button[b-2nf8jykrga] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--pulse-warning-border, #fde68a);
    border-radius: .5rem;
    color: inherit;
    display: inline-flex;
    font-size: .85rem;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .35rem .75rem;
    text-decoration: none;
}

.operator-localization-dismiss[b-2nf8jykrga] {
    font-size: 1.1rem;
    line-height: 1;
    padding: .35rem .6rem;
}

.operator-localization-actions[b-2nf8jykrga] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    min-width: 0;
}

.operator-localization-boundary a[b-2nf8jykrga] {
    justify-self: start;
    max-width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .65rem 1rem;
}

@media (max-width: 480px) {
    .operator-localization-boundary[b-2nf8jykrga] {
        margin: .75rem auto;
    }

    .operator-localization-actions[b-2nf8jykrga] {
        align-items: stretch;
        display: grid;
    }

    .operator-localization-boundary a[b-2nf8jykrga] {
        box-sizing: border-box;
        text-align: center;
        width: 100%;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-oef9jogiz6],
.components-reconnect-repeated-attempt-visible[b-oef9jogiz6],
.components-reconnect-failed-visible[b-oef9jogiz6],
.components-pause-visible[b-oef9jogiz6],
.components-resume-failed-visible[b-oef9jogiz6],
.components-rejoining-animation[b-oef9jogiz6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-retrying[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-failed[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-oef9jogiz6] {
    display: block;
}

/* Fixed at 25rem with 10-13px type, this box was written for someone sitting at a desk. It
   also appears on a control-room wall, where it has to be read from a couple of metres away,
   so its width and every type size below now grow with the display. */
#components-reconnect-modal[b-oef9jogiz6] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-xl);
    box-shadow: var(--pulse-shadow-lg);
    box-sizing: border-box;
    color: var(--pulse-text);
    /* A top-layer dialog cannot be scrolled by the page, so an offset without
       a height bound puts Retry and Reload below a short screen with no way
       back to them. Bounded here, the dialog's own overflow scrolls the copy. */
    margin: min(18vh, 9rem) auto 1rem;
    max-height: calc(100dvh - min(18vh, 9rem) - 1rem);
    max-width: calc(100vw - 32px);
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    scroll-padding-block: 1rem;
    width: clamp(25rem, 30vw, 44rem);
}

#components-reconnect-modal[open][b-oef9jogiz6] {
    opacity: 1;
    animation: components-reconnect-enter-b-oef9jogiz6 .18s ease-out both;
}

/* A near-opaque scrim blacked out the alarm list behind this box. The list is stale while the
   connection is down, but an operator still needs to see the last alarms it managed to show. */
#components-reconnect-modal[b-oef9jogiz6]::backdrop {
    background: rgba(3, 12, 23, .38);
}

.components-reconnect-container[b-oef9jogiz6] {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: min(22rem, 60dvh);
    overflow: visible;
    padding: clamp(1.5rem, 1.8vw, 2.25rem);
    position: relative;
    text-align: center;
}

.components-reconnect-brand[b-oef9jogiz6] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    display: flex;
    height: 46px;
    justify-content: center;
    margin-bottom: .75rem;
    width: 46px;
}

.components-reconnect-brand svg[b-oef9jogiz6] {
    fill: var(--pulse-accent-soft);
    height: 33px;
    stroke: var(--pulse-brand-primary, var(--pulse-accent));
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 33px;
}

.components-reconnect-brand svg path:last-child[b-oef9jogiz6] {
    fill: none;
    stroke: var(--pulse-text);
    stroke-width: 2;
}

.components-rejoining-animation[b-oef9jogiz6] {
    height: 58px;
    margin: .15rem 0 1rem;
    position: relative;
    width: 58px;
}

.components-rejoining-animation div[b-oef9jogiz6] {
    border: 2px solid var(--pulse-accent-border);
    border-radius: 50%;
    inset: 0;
    position: absolute;
}

.components-rejoining-animation div:first-child[b-oef9jogiz6] {
    animation: components-reconnect-pulse-b-oef9jogiz6 1.1s ease-out infinite;
    border-color: var(--pulse-accent);
}

.components-rejoining-animation div:nth-child(2)[b-oef9jogiz6] {
    inset: 10px;
}

.components-rejoining-animation div:nth-child(2)[b-oef9jogiz6]::after {
    background: var(--pulse-accent);
    border-radius: 50%;
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
}

.components-reconnect-copy[b-oef9jogiz6] {
    min-width: 0;
    overflow-wrap: anywhere;
    width: 100%;
}

.components-reconnect-copy h2[b-oef9jogiz6] {
    color: var(--pulse-text);
    font-size: clamp(1.45rem, 1.7vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: .45rem 0 .7rem;
}

.components-reconnect-copy p[b-oef9jogiz6] {
    color: var(--pulse-muted);
    font-size: clamp(1rem, .9vw, 1.55rem);
    line-height: 1.45;
    margin: 0 auto;
    max-width: 44ch;
}

.components-reconnect-eyebrow[b-oef9jogiz6] {
    color: var(--pulse-accent);
    font-size: clamp(.78rem, .55vw, 1.05rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.components-reconnect-eyebrow.is-critical[b-oef9jogiz6] {
    color: var(--pulse-danger-text);
}

.components-reconnect-actions[b-oef9jogiz6] {
    gap: .6rem;
    margin-top: 1.35rem;
    width: 100%;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-actions[b-oef9jogiz6],
#components-reconnect-modal.components-reconnect-paused .components-reconnect-actions[b-oef9jogiz6] {
    display: flex;
}

#components-reconnect-modal button[b-oef9jogiz6],
.components-reconnect-secondary[b-oef9jogiz6],
.components-reconnect-reload[b-oef9jogiz6] {
    align-items: center;
    border-radius: var(--pulse-radius-sm);
    cursor: pointer;
    display: inline-flex;
    flex: 1;
    font: inherit;
    font-size: clamp(.9rem, .7vw, 1.2rem);
    font-weight: 600;
    justify-content: center;
    min-height: clamp(44px, 3.2vw, 62px);
    padding: .7rem 1rem;
    text-decoration: none;
}

#components-reconnect-modal button:disabled[b-oef9jogiz6] {
    cursor: wait;
    opacity: .68;
    transform: none;
}

#components-reconnect-button[b-oef9jogiz6],
#components-resume-button[b-oef9jogiz6] {
    background: var(--pulse-action);
    border: 1px solid var(--pulse-action);
    color: var(--pulse-on-action);
}

.components-reconnect-secondary[b-oef9jogiz6],
.components-reconnect-reload[b-oef9jogiz6] {
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    color: var(--pulse-control-text);
}

.components-reconnect-reload[b-oef9jogiz6] {
    margin-top: 1.35rem;
    width: 100%;
}

.components-reconnect-secondary:hover[b-oef9jogiz6],
.components-reconnect-reload:hover[b-oef9jogiz6] {
    background: var(--pulse-control-surface-hover);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-control-text);
}

#components-reconnect-button:hover[b-oef9jogiz6],
#components-resume-button:hover[b-oef9jogiz6] {
    background: var(--pulse-action-hover);
    border-color: var(--pulse-action-hover);
}

#components-reconnect-modal button:focus-visible[b-oef9jogiz6],
.components-reconnect-secondary:focus-visible[b-oef9jogiz6],
.components-reconnect-reload:focus-visible[b-oef9jogiz6] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.components-reconnect-footnote[b-oef9jogiz6] {
    align-items: center;
    border-top: 1px solid var(--pulse-border);
    color: var(--pulse-muted);
    display: flex;
    font-size: clamp(.75rem, .55vw, 1rem);
    gap: .4rem;
    justify-content: center;
    line-height: 1.45;
    margin-top: auto;
    padding-top: 1.2rem;
    width: 100%;
}

/* This dot was the same green the rest of the product uses for "healthy". It only ever appears
   while the connection is down, so green was the one colour it could not be. */
.components-reconnect-footnote span[b-oef9jogiz6] {
    background: var(--pulse-warning);
    border-radius: 50%;
    flex: none;
    height: 7px;
    width: 7px;
}

/* Give the solid dialog separation from the dark workspace without concealing
   the last visible alarm content beneath it. */
html[data-theme="dark"] #components-reconnect-modal[b-oef9jogiz6]::backdrop {
    background: rgba(2, 6, 17, .5);
}

@keyframes components-reconnect-enter-b-oef9jogiz6 {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes components-reconnect-pulse-b-oef9jogiz6 {
    from { opacity: .8; transform: scale(.78); }
    to { opacity: .15; transform: scale(1); }
}

@media (max-width: 480px) {
    #components-reconnect-modal[b-oef9jogiz6] {
        margin: 10vh auto 1rem;
        max-height: calc(100dvh - 10vh - 1rem);
    }

    .components-reconnect-container[b-oef9jogiz6] {
        min-height: 20rem;
        padding: 1.5rem;
    }

    .components-reconnect-actions[b-oef9jogiz6] {
        flex-direction: column;
    }
}

/* A landscape phone or zoomed desktop has little vertical room. Keep all
   status text, and let the dialog scroll when even the compact layout is taller
   than the viewport; the page behind a native modal cannot provide that scroll. */
@media (max-height: 620px) {
    #components-reconnect-modal[b-oef9jogiz6] {
        margin: .75rem auto;
        max-height: calc(100dvh - 1.5rem);
        border-radius: var(--pulse-radius-xl);
    }

    .components-reconnect-container[b-oef9jogiz6] {
        min-height: 0;
        overflow: visible;
        padding: 1rem 1.25rem;
    }

    .components-reconnect-brand[b-oef9jogiz6] {
        width: 34px;
        height: 34px;
        margin-bottom: .5rem;
        border-radius: var(--pulse-radius-sm);
    }

    .components-reconnect-brand svg[b-oef9jogiz6] {
        width: 26px;
        height: 26px;
    }

    .components-rejoining-animation[b-oef9jogiz6] {
        width: 32px;
        height: 32px;
        margin: .15rem 0 .5rem;
    }

    .components-reconnect-copy h2[b-oef9jogiz6] {
        margin: .3rem 0 .5rem;
        font-size: 1.35rem;
    }

    .components-reconnect-copy p[b-oef9jogiz6] {
        line-height: 1.45;
    }

    .components-reconnect-actions[b-oef9jogiz6],
    .components-reconnect-reload[b-oef9jogiz6] {
        margin-top: 1rem;
    }

    .components-reconnect-footnote[b-oef9jogiz6] {
        margin-top: 1rem;
        padding-top: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open][b-oef9jogiz6],
    .components-rejoining-animation div:first-child[b-oef9jogiz6] {
        animation: none;
    }
}
/* /Components/Pages/AccessControl.razor.rz.scp.css */
.access-control-page[b-by0g6i1uq7] {
    box-sizing: border-box;
    display: grid;
    gap: .75rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, .75rem) var(--pulse-workspace-pad-x, 1rem) var(--pulse-workspace-pad-bottom, 1rem);
    color: var(--pulse-text);
}

.access-control-principles[b-by0g6i1uq7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    padding: 0 .85rem .85rem;
}

.access-control-guide[b-by0g6i1uq7] {
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface);
}

.access-control-guide > summary[b-by0g6i1uq7] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .7rem .85rem;
    color: var(--pulse-muted);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.access-control-guide > summary:focus-visible[b-by0g6i1uq7] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
    border-radius: var(--pulse-radius-sm, 8px);
}

.access-control-principles article[b-by0g6i1uq7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .8rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface);
}

.access-control-principles[b-by0g6i1uq7]  svg {
    color: var(--pulse-muted);
}

.access-control-principles h2[b-by0g6i1uq7] {
    margin: 0 0 .18rem;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
}

.access-control-principles p[b-by0g6i1uq7] {
    margin: 0;
    color: var(--pulse-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.access-control-source-grid[b-by0g6i1uq7] {
    display: grid;
    gap: .8rem;
    padding: clamp(.85rem, 1.5vw, 1rem);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
}

.access-control-source-grid > header[b-by0g6i1uq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.access-control-source-grid h2[b-by0g6i1uq7] {
    margin: .12rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.module-shortcut[b-by0g6i1uq7] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem .72rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.module-shortcut:hover[b-by0g6i1uq7] { border-color: var(--pulse-accent); color: var(--pulse-accent-text, var(--pulse-accent)); }
.module-shortcut:focus-visible[b-by0g6i1uq7], .source-cards > a:focus-visible[b-by0g6i1uq7] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.source-cards[b-by0g6i1uq7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.source-cards > a[b-by0g6i1uq7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface-soft);
    color: var(--pulse-text);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.source-cards > a:hover[b-by0g6i1uq7] {
    border-color: color-mix(in srgb, var(--pulse-accent) 55%, var(--pulse-border));
    background: var(--pulse-surface);
}

.source-icon[b-by0g6i1uq7] {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--pulse-surface);
    color: var(--pulse-muted);
}

/* The source glyph identifies its connector; semantic color belongs to the
   live-state chip. Shared surface/text tokens carry both themes. */
.source-icon[b-by0g6i1uq7]  svg { display: block; }

.source-cards > a > span:nth-child(2)[b-by0g6i1uq7] { display: grid; gap: .18rem; min-width: 0; }
.source-cards strong[b-by0g6i1uq7] { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.source-cards small[b-by0g6i1uq7] { color: var(--pulse-muted); font-size: .78rem; line-height: 1.4; }
.source-card-title[b-by0g6i1uq7] { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; }
.source-card-title em[b-by0g6i1uq7] {
    padding: .14rem .38rem;
    border: 1px solid var(--pulse-border);
    border-radius: 999px;
    color: var(--pulse-muted);
    background: var(--pulse-surface);
    font-size: .75rem;
    font-style: normal;
    font-weight: 600;
}

.source-card-title .source-live-state[b-by0g6i1uq7] {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    text-transform: none;
}

.source-live-state[b-by0g6i1uq7]::before {
    content: "";
    width: .38rem;
    height: .38rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pulse-border-strong);
}

.source-live-state.is-live[b-by0g6i1uq7] {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.source-live-state.is-live[b-by0g6i1uq7]::before { background: var(--pulse-success); }

.source-live-state.is-working[b-by0g6i1uq7],
.source-live-state.is-attention[b-by0g6i1uq7] {
    border-color: var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

.source-live-state.is-working[b-by0g6i1uq7]::before,
.source-live-state.is-attention[b-by0g6i1uq7]::before { background: var(--pulse-warning); }

.source-live-state.is-off[b-by0g6i1uq7] {
    border-style: dashed;
    color: var(--pulse-muted);
    background: var(--pulse-surface);
}
.source-arrow[b-by0g6i1uq7] { color: var(--pulse-muted); font-size: 1.05rem; }
.source-cards > a:hover .source-arrow[b-by0g6i1uq7] { color: var(--pulse-accent); }

@media (max-width: 760px) {
    .access-control-principles[b-by0g6i1uq7], .source-cards[b-by0g6i1uq7] { grid-template-columns: 1fr; }
    .access-control-source-grid > header[b-by0g6i1uq7] { align-items: start; flex-direction: column; }
}

@media (min-width: 761px) and (max-width: 1080px) {
    .access-control-principles[b-by0g6i1uq7],
    .source-cards[b-by0g6i1uq7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .source-cards > a[b-by0g6i1uq7], .source-arrow[b-by0g6i1uq7] { transition: none; }
}
/* /Components/Pages/Alarms.razor.rz.scp.css */
.alarm-page[b-9rgda9i6ul] {
    --ap-surface: var(--pulse-surface-raised);
    --ap-soft: var(--pulse-surface-soft);
    --ap-inset: var(--pulse-surface-inset);
    --ap-border: var(--pulse-border);
    --ap-border-strong: var(--pulse-border-strong);
    --ap-ink: var(--pulse-text);
    --ap-muted: var(--pulse-muted);
    --ap-accent: var(--pulse-accent);
    --ap-accent-strong: var(--pulse-link);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: calc(100vh - 6rem);
    min-height: calc(100dvh - 6rem);
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    color: var(--ap-ink);
    background: transparent;
    line-height: 1.45;
}

.breadcrumbs[b-9rgda9i6ul] {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    margin: 0;
    padding: 0;
    width: auto;
    background: transparent;
    font-size: .875rem;
}

.breadcrumbs a[b-9rgda9i6ul] {
    align-items: center;
    color: var(--ap-accent-strong);
    display: inline-flex;
    font-weight: 700;
    min-height: var(--pulse-control-min-height);
}
.breadcrumbs .current[b-9rgda9i6ul] { color: var(--ap-muted); }

/* Title row on the canvas: h1, count read-out and Clear filters at the left,
   the camera links at the right. */
.alarm-header[b-9rgda9i6ul] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height);
    margin: 0 0 var(--pulse-workspace-gap);
    padding: .25rem 0rem;
    border: 0;
    border-radius: var(--pulse-radius-xl, 1.4rem);
    color: var(--pulse-text);
    background: transparent;
}

.alarm-heading-copy[b-9rgda9i6ul] { align-items: baseline; display: flex; flex: 1 1 24rem; flex-wrap: wrap; gap: .15rem .6rem; min-width: 0; }
.alarm-header h1[b-9rgda9i6ul] { margin: 0; min-width: 0; color: var(--pulse-text); font-size: var(--pulse-workspace-title-size); font-weight: 700; letter-spacing: normal; line-height: 1.3; overflow-wrap: anywhere; }
.alarm-context[b-9rgda9i6ul] { max-width: 46rem; min-width: 0; margin: 0; color: var(--pulse-muted); font-size: var(--pulse-workspace-lede-size); line-height: 1.6; overflow-wrap: anywhere; }
.alarm-context strong[b-9rgda9i6ul] { color: var(--ap-ink); }
.alarm-header-actions[b-9rgda9i6ul] { align-content: center; align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

.alarm-header-actions a[b-9rgda9i6ul],
.alarm-detail-actions a[b-9rgda9i6ul],
.alarm-detail-actions button[b-9rgda9i6ul],
.alarm-secondary-link[b-9rgda9i6ul] { align-items: center; display: inline-flex; justify-content: center; min-height: var(--pulse-control-min-height); padding: .55rem .8rem; border: 1px solid transparent; border-radius: var(--pulse-radius-sm); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease; }
.alarm-detail-primary[b-9rgda9i6ul] { color: var(--ap-accent-strong); border-color: var(--ap-border); background: var(--pulse-control-surface); }
/* The overlay renders outside main.alarm-page, so this control cannot read the
   page-scoped --ap-* aliases; it names the shared tokens itself. */
.alarm-secondary-link[b-9rgda9i6ul] { color: var(--pulse-link); border-color: var(--pulse-border); background: var(--pulse-control-surface); }
.alarm-secondary-link:hover[b-9rgda9i6ul] { border-color: var(--pulse-accent); }
.alarm-detail-actions a:not(.alarm-detail-primary)[b-9rgda9i6ul],
.alarm-detail-actions button[b-9rgda9i6ul] { color: var(--ap-accent-strong); border-color: var(--ap-border); background: var(--pulse-control-surface); }
.alarm-header-actions a:hover[b-9rgda9i6ul],
.alarm-detail-actions :is(a, button):hover[b-9rgda9i6ul] { border-color: var(--ap-accent); }

/* Tool row: one line at desktop width - search, the two most used filters,
   Active only and the More-filters disclosure, then Export and Refresh at the
   right end. An open disclosure takes its own full-width line under the row
   (flex order), so the actions never move. */
.alarm-toolbar[b-9rgda9i6ul] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    /* Let the camera-group disclosure escape the toolbar instead of clipping it. */
    overflow: visible;
    margin-bottom: .75rem;
    padding: .5rem .625rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--ap-surface);
}

.alarm-primary-filters[b-9rgda9i6ul] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.alarm-secondary-filters[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: end; gap: .625rem; min-width: 0; }
.alarm-primary-filters > .alarm-select[b-9rgda9i6ul] { flex: 0 1 auto; min-width: 0; }
.alarm-primary-filters > .alarm-search[b-9rgda9i6ul] { flex: 1 1 10rem; min-width: 9rem; }
.alarm-secondary-filters > :is(.alarm-search, .alarm-select)[b-9rgda9i6ul] { display: grid; gap: .25rem; flex: 1 1 13rem; min-width: 0; }
/* The export-mode checkbox keeps its inline layout; it only takes a cell of the grid. */
.alarm-secondary-filters > .alarm-export-mode[b-9rgda9i6ul] { flex: 1 1 13rem; min-width: 0; }
.alarm-more-filters[b-9rgda9i6ul] { flex: 0 0 auto; order: 0; min-width: 0; border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-sm); background: transparent; }
.alarm-more-filters[open][b-9rgda9i6ul] { flex: 1 1 100%; order: 2; }
.alarm-more-filters > summary[b-9rgda9i6ul] { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: var(--pulse-control-min-height); padding: .5rem .7rem; color: var(--ap-ink); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.alarm-more-filters > summary[b-9rgda9i6ul]::-webkit-details-marker { display: none; }
.alarm-more-filters > summary[b-9rgda9i6ul]::before { content: ""; flex: 0 0 .45rem; width: .45rem; height: .45rem; margin-inline-end: .15rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg); }
.alarm-more-filters[open] > summary[b-9rgda9i6ul]::before { transform: rotate(45deg); }
.alarm-more-filters > summary:hover[b-9rgda9i6ul] { background: var(--pulse-control-surface-hover); }
.alarm-more-filters > summary:focus-visible[b-9rgda9i6ul] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.alarm-more-filters .alarm-secondary-filters[b-9rgda9i6ul] { padding: .625rem .7rem .7rem; border-top: 1px solid var(--ap-border); }
.alarm-additional-filter-count[b-9rgda9i6ul] { margin-inline-start: auto; color: var(--ap-accent-strong); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-search[b-9rgda9i6ul],
.alarm-select[b-9rgda9i6ul] { display: flex; align-items: center; gap: .4rem; }
.alarm-search span[b-9rgda9i6ul], .alarm-select span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* The camera-group picker is a child component, so the select chrome below
   cannot reach it; it reads its toolbar chrome from these properties. */
.alarm-select[b-9rgda9i6ul] {
    --group-filter-height: var(--pulse-control-min-height);
    --group-filter-radius: var(--pulse-radius-sm);
    --group-filter-border: var(--ap-border);
    --group-filter-surface: var(--pulse-control-surface);
}

.alarm-search input[b-9rgda9i6ul],
.alarm-select select[b-9rgda9i6ul] {
    width: 100%;
    min-height: var(--pulse-control-min-height);
    padding: .45rem .625rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--ap-ink);
    background: var(--pulse-control-surface);
    font-size: .875rem;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease, box-shadow var(--pulse-motion-fast) ease;
}

.alarm-search input[b-9rgda9i6ul]::placeholder { color: var(--pulse-placeholder); }
.alarm-search input:hover[b-9rgda9i6ul], .alarm-select select:hover[b-9rgda9i6ul] { border-color: var(--ap-border-strong); background: var(--pulse-control-surface-hover); }
.alarm-search input:focus[b-9rgda9i6ul], .alarm-select select:focus[b-9rgda9i6ul] { border-color: var(--pulse-focus-ring); background: var(--pulse-control-surface); box-shadow: 0 0 0 .2rem var(--pulse-focus-ring-soft); outline: 0; }
/* An inline label and its select read as one pill - "Priority [Any priority]" -
   and the select gives way before the pill can overflow a narrow line. */
.alarm-primary-filters .alarm-select select[b-9rgda9i6ul] { width: auto; flex: 1 1 auto; min-width: 0; }
.alarm-primary-filters > .alarm-search input[b-9rgda9i6ul] { min-width: 0; }

/* Reads as one more filter control rather than a stray checkbox. */
.alarm-toggle[b-9rgda9i6ul] {
    display: flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--pulse-control-min-height);
    padding: 0 .7rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--ap-ink);
    background: var(--pulse-control-surface);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease;
}

.alarm-toggle:hover[b-9rgda9i6ul] { border-color: var(--ap-border-strong); background: var(--pulse-control-surface-hover); }
.alarm-toggle input[b-9rgda9i6ul] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ap-accent); }
.alarm-toolbar-status[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-left: 0; min-height: 1.25rem; color: var(--ap-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.alarm-toolbar-status strong[b-9rgda9i6ul] { color: var(--ap-ink); font-size: .95rem; }
.alarm-toolbar-actions[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; order: 1; }

.alarm-toggle input:focus-visible[b-9rgda9i6ul],
button:focus-visible[b-9rgda9i6ul],
a:focus-visible[b-9rgda9i6ul] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

/* Clearing a storm needs one pass over the page, not one pass per alarm. The
   strip only exists while the page holds a row it can act on. */
.alarm-bulk-bar[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .625rem; margin-bottom: .75rem; padding: .625rem .75rem; border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-md); background: var(--ap-surface); }
/* Inside the table card the strip is the card's header row, not a second card. */
.alarm-table-shell > .alarm-bulk-bar[b-9rgda9i6ul] { margin-bottom: 0; border: 0; border-bottom: 1px solid var(--ap-border); border-radius: 0; }
.alarm-bulk-selection[b-9rgda9i6ul] { display: flex; flex: 1 1 20rem; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; min-width: 0; }
.alarm-bulk-all[b-9rgda9i6ul] { display: flex; flex: 0 1 auto; align-items: center; gap: .375rem; min-width: 0; min-height: var(--pulse-control-min-height); color: var(--ap-ink); font-size: .875rem; font-weight: 600; }
.alarm-bulk-all input[b-9rgda9i6ul],
.alarm-row-select input[b-9rgda9i6ul] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ap-accent); }
.alarm-bulk-all input:focus-visible[b-9rgda9i6ul],
.alarm-row-select input:focus-visible[b-9rgda9i6ul] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 3px; }
.alarm-bulk-selection-count[b-9rgda9i6ul] { flex: 1 1 14rem; margin: 0; color: var(--ap-accent-strong); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.alarm-bulk-field[b-9rgda9i6ul] { display: grid; flex: 0 1 12rem; gap: .25rem; min-width: 0; }
.alarm-bulk-field > span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .75rem; font-weight: 600; }
.alarm-bulk-field select[b-9rgda9i6ul],
.alarm-bulk-field input[b-9rgda9i6ul],
.alarm-bulk-field textarea[b-9rgda9i6ul] { width: 100%; min-height: var(--pulse-control-min-height); padding: .45rem .625rem; color: var(--ap-ink); border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font: inherit; font-size: .875rem; resize: vertical; }
.alarm-bulk-note[b-9rgda9i6ul] { flex: 1 1 16rem; min-width: 12.5rem; }
.alarm-bulk-status[b-9rgda9i6ul] { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--ap-muted); font-size: .75rem; font-weight: 700; }
.alarm-permanence-hint[b-9rgda9i6ul] { flex: 1 1 100%; margin: 0; color: var(--ap-muted); font-size: .75rem; }
.alarm-row-select[b-9rgda9i6ul] { display: flex; align-items: center; justify-content: center; min-width: var(--pulse-control-min-height); min-height: var(--pulse-control-min-height); width: fit-content; margin-bottom: 0; border: 1px solid transparent; border-radius: var(--pulse-radius-sm); cursor: pointer; }
.alarm-row-select:has(input:disabled)[b-9rgda9i6ul] { cursor: not-allowed; }
.alarm-row-select:hover[b-9rgda9i6ul] { border-color: var(--ap-border-strong); background: var(--pulse-control-surface-hover); }
.alarm-click-row[data-bulk-selected="true"] .alarm-row-select[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface); }

/* The queue refreshes itself; a filled accent Refresh made a live surface look
   like a manual pull and competed with the workspace's real primary action. */
.alarm-refresh-button[b-9rgda9i6ul], .alarm-quiet-button[b-9rgda9i6ul], .alarm-state button[b-9rgda9i6ul], .alarm-inline-error button[b-9rgda9i6ul] { color: var(--pulse-control-text); border: 1px solid var(--pulse-control-border); background: var(--pulse-control-surface); }
.alarm-refresh-button[b-9rgda9i6ul], .alarm-quiet-button[b-9rgda9i6ul], .alarm-state button[b-9rgda9i6ul], .alarm-inline-error button[b-9rgda9i6ul] { min-height: var(--pulse-control-min-height); padding: .5rem .8rem; border-radius: var(--pulse-radius-sm); cursor: pointer; font-size: .875rem; font-weight: 600; transition: background var(--pulse-motion-fast) ease, border-color var(--pulse-motion-fast) ease; }
.alarm-refresh-button:hover:not(:disabled)[b-9rgda9i6ul], .alarm-quiet-button:hover:not(:disabled)[b-9rgda9i6ul], .alarm-state button:hover:not(:disabled)[b-9rgda9i6ul], .alarm-inline-error button:hover:not(:disabled)[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
.alarm-export-link[b-9rgda9i6ul] { align-items: center; display: inline-flex; justify-content: center; min-height: var(--pulse-control-min-height); padding: .5rem .8rem; color: var(--ap-accent-strong); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--pulse-motion-fast) ease, border-color var(--pulse-motion-fast) ease; }
.alarm-export-link:hover[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }

button:disabled[b-9rgda9i6ul] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }

/* The pager sits under the table because that is where a reader arrives
   after the last row, and it stays legible at a glance: the position text
   uses tabular numerals so the range does not jitter between pages. */
.alarm-pager[b-9rgda9i6ul] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; padding: .85rem .5rem .25rem; }
.alarm-pager-button[b-9rgda9i6ul] { min-height: var(--pulse-control-min-height); color: var(--pulse-control-text); border: 1px solid var(--pulse-control-border); background: var(--pulse-control-surface); border-radius: var(--pulse-radius-sm); padding: .45rem .95rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background var(--pulse-motion-fast) ease, border-color var(--pulse-motion-fast) ease; }
.alarm-pager-button:hover:not(:disabled):not([aria-disabled="true"])[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
.alarm-pager-button:disabled[b-9rgda9i6ul],
.alarm-pager-button[aria-disabled="true"][b-9rgda9i6ul] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }
.alarm-pager-position[b-9rgda9i6ul] { color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.alarm-pager-page[b-9rgda9i6ul] { color: var(--ap-muted); font-variant-numeric: tabular-nums; }

/* What the frozen window is holding back. It carries the same soft warning
   surface as the stale-result banner because it reports the same kind of fact -
   the screen is not the whole truth right now - and the way out sits inside it
   rather than being a pager button the operator has to work out. */
.alarm-pager-frozen[b-9rgda9i6ul] { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: .875rem 0 0; padding: .7rem .875rem; color: var(--pulse-warning-text); border: 1px solid var(--pulse-warning-border); border-radius: var(--pulse-radius-md); background: var(--pulse-warning-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .alarm-pager[b-9rgda9i6ul] { gap: .45rem; }
    .alarm-pager-button[b-9rgda9i6ul] { min-height: 44px; flex: 1 1 auto; }
    .alarm-pager-page[b-9rgda9i6ul] { flex: 1 1 100%; text-align: center; }
    .alarm-pager-frozen[b-9rgda9i6ul] { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .alarm-pager-button[b-9rgda9i6ul] { transition: none; }
}
.alarm-ack-button[b-9rgda9i6ul] { min-height: var(--pulse-control-min-height); padding: .45rem .7rem; color: var(--pulse-on-action); border: 0; border-radius: var(--pulse-radius-sm); background: var(--pulse-action); cursor: pointer; font-size: .875rem; font-weight: 700; white-space: nowrap; transition: background var(--pulse-motion-fast) ease; }
.alarm-ack-button:hover:not(:disabled)[b-9rgda9i6ul] { background: var(--pulse-action-hover); }
.alarm-ack-chip[b-9rgda9i6ul] { align-items: center; display: inline-flex; gap: .3rem; width: fit-content; margin-top: .375rem; padding: .2rem .55rem; border-radius: 999px; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; }
.alarm-ack-disposition[b-9rgda9i6ul] { margin-top: .2rem; color: var(--pulse-success-text); font-size: .75rem; font-weight: 700; }
.alarm-repeat-chip[b-9rgda9i6ul] { align-items: center; display: inline-flex; padding: .1rem .4rem; border-radius: 999px; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* DetecNext priority 0..6 on the product's severity tokens; the P-number label
   carries the meaning, never colour alone. */
.alarm-priority-chip[b-9rgda9i6ul] { align-items: center; display: inline-flex; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.alarm-priority-chip.is-priority-routine[b-9rgda9i6ul] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.alarm-priority-chip.is-priority-elevated[b-9rgda9i6ul] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.alarm-priority-chip.is-priority-high[b-9rgda9i6ul] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.alarm-priority-chip.is-priority-critical[b-9rgda9i6ul] { color: #fff; background: var(--pulse-danger); }
.alarm-severity-chip[b-9rgda9i6ul] { align-items: center; display: inline-flex; padding: .1rem .45rem; border: 1px solid transparent; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.alarm-severity-chip.is-low[b-9rgda9i6ul] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.alarm-severity-chip.is-medium[b-9rgda9i6ul] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.alarm-severity-chip.is-high[b-9rgda9i6ul] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.alarm-severity-chip.is-critical[b-9rgda9i6ul] { color: #fff; background: var(--pulse-danger); }
.alarm-ack-form[b-9rgda9i6ul] { display: grid; gap: .5rem; margin-top: .625rem; padding: .75rem; color: var(--ap-ink); border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-md); background: var(--ap-soft); }
.alarm-ack-form label[b-9rgda9i6ul] { display: grid; gap: .25rem; }
.alarm-ack-form label span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .75rem; font-weight: 600; }
/* A single acknowledgement removes the row it was made on, so its outcome has
   to be reported somewhere the removal cannot take with it. */
.alarm-ack-status[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 .875rem; padding: .7rem .875rem; color: var(--pulse-success-text); border: 1px solid var(--pulse-success-border); border-radius: var(--pulse-radius-md); background: var(--pulse-success-soft); font-size: .875rem; font-weight: 700; }
.alarm-ack-status:focus-visible[b-9rgda9i6ul] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.alarm-ack-status span[b-9rgda9i6ul] { flex: 1 1 16rem; min-width: 0; }
.alarm-ack-conflict-panel[b-9rgda9i6ul] { display: grid; gap: .5rem; margin-bottom: .875rem; padding: .7rem .875rem; color: var(--pulse-danger-text); border: 1px solid var(--pulse-danger-border); border-radius: var(--pulse-radius-md); background: var(--pulse-danger-soft); }
.alarm-ack-conflict-panel strong[b-9rgda9i6ul] { font-size: .875rem; }
.alarm-ack-conflict-panel label[b-9rgda9i6ul] { display: grid; gap: .25rem; }
.alarm-ack-conflict-panel label span[b-9rgda9i6ul] { color: var(--pulse-danger-text); font-size: var(--pulse-workspace-eyebrow-size); font-weight: 700; letter-spacing: normal; }
.alarm-ack-conflict-panel textarea[b-9rgda9i6ul] { width: 100%; min-height: var(--pulse-control-min-height); padding: .5rem .625rem; color: var(--pulse-control-text); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font: inherit; font-size: .875rem; resize: vertical; }
.alarm-ack-conflict-panel .alarm-quiet-button[b-9rgda9i6ul] { justify-self: start; }
.alarm-ack-form select[b-9rgda9i6ul],
.alarm-ack-form textarea[b-9rgda9i6ul] { width: 100%; min-height: var(--pulse-control-min-height); padding: .5rem .625rem; color: var(--pulse-control-text); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font: inherit; font-size: .875rem; resize: vertical; }
.alarm-ack-form .alarm-ack-button[b-9rgda9i6ul] { justify-self: start; }
.alarm-ack-error[b-9rgda9i6ul] { margin: 0; color: var(--pulse-danger-text); font-size: .75rem; font-weight: 700; }
.alarm-inline-error[b-9rgda9i6ul] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; padding: .7rem .875rem; color: var(--pulse-warning-text); border: 1px solid var(--pulse-warning-border); border-radius: var(--pulse-radius-md); background: var(--pulse-warning-soft); }

/* Operator-fireable Detec Next commands, beside Acknowledge and the incident
   action. Firing can operate physical equipment, so the armed/confirm states
   are explicit and the outcome is a sentence, never a silent state change. */
.alarm-field-actions[b-9rgda9i6ul] { display: grid; gap: .5rem; margin-top: .625rem; padding: .75rem; color: var(--ap-ink); border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-md); background: var(--ap-soft); }
.alarm-field-actions-header[b-9rgda9i6ul] { display: grid; gap: .15rem; }
.alarm-field-actions-header strong[b-9rgda9i6ul] { font-size: .84rem; }
.alarm-field-actions-header span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .75rem; }
.alarm-field-actions-state[b-9rgda9i6ul] { margin: 0; color: var(--ap-muted); font-size: .76rem; }
.alarm-field-actions-state.is-failed[b-9rgda9i6ul] { color: var(--pulse-danger-text); font-weight: 700; }
.alarm-field-actions-list[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; gap: .5rem; }
.alarm-field-action-button[b-9rgda9i6ul] { align-items: center; display: inline-flex; min-height: var(--pulse-control-min-height); padding: .5rem .85rem; color: var(--ap-ink); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.alarm-field-action-button:hover[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
.alarm-field-action-button[b-9rgda9i6ul] { display: grid; gap: .15rem; text-align: left; }
.alarm-field-action-button > span[b-9rgda9i6ul] { font-weight: 700; }
.alarm-field-action-button > small[b-9rgda9i6ul] { color: var(--ap-muted, var(--pulse-muted)); font-size: .75rem; font-weight: 600; line-height: 1.25; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-field-action-button.is-armed[b-9rgda9i6ul] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); color: var(--pulse-warning-text); }
.alarm-field-action-button:disabled[b-9rgda9i6ul] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }
.alarm-field-action-confirm[b-9rgda9i6ul] { display: grid; gap: .5rem; padding: .7rem .875rem; color: var(--pulse-warning-text); border: 1px solid var(--pulse-warning-border); border-radius: var(--pulse-radius-md); background: var(--pulse-warning-soft); }
.alarm-field-action-confirm p[b-9rgda9i6ul] { margin: 0; font-size: .78rem; line-height: 1.55; }
.alarm-field-action-confirm code[b-9rgda9i6ul] { padding: 0 .25rem; border-radius: 4px; background: var(--pulse-control-surface); font-size: .75rem; }
.alarm-field-action-help[b-9rgda9i6ul] { color: var(--ap-muted); }
.alarm-field-action-fixed-message[b-9rgda9i6ul] { background: var(--pulse-control-surface); border: 1px solid var(--pulse-control-border); border-radius: 8px; padding: .5rem .6rem; }
.alarm-field-action-fixed-message small[b-9rgda9i6ul],
.alarm-field-action-confirm label > span small[b-9rgda9i6ul] { color: var(--ap-muted); display: block; font-size: .75rem; font-weight: 600; }
.alarm-field-action-confirm label[b-9rgda9i6ul] { display: grid; gap: .25rem; }
.alarm-field-action-confirm label span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: var(--pulse-workspace-eyebrow-size); font-weight: 700; letter-spacing: normal; }
.alarm-field-action-confirm textarea[b-9rgda9i6ul] { width: 100%; min-height: var(--pulse-control-min-height); padding: .5rem .625rem; color: var(--pulse-control-text); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-control-surface); font: inherit; font-size: .875rem; resize: vertical; }
.alarm-field-action-confirm-buttons[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; gap: .5rem; }
.alarm-field-action-send[b-9rgda9i6ul] { align-items: center; display: inline-flex; min-height: var(--pulse-control-min-height); padding: .5rem .85rem; border: 1px solid transparent; border-radius: var(--pulse-radius-sm); color: var(--pulse-on-action); background: var(--pulse-action); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.alarm-field-action-send:hover[b-9rgda9i6ul] { background: var(--pulse-action-hover); }
.alarm-field-action-send:disabled[b-9rgda9i6ul] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }
.alarm-field-action-result[b-9rgda9i6ul] { margin: 0; padding: .55rem .75rem; border: 1px solid; border-radius: var(--pulse-radius-sm); font-size: .78rem; font-weight: 700; }
.alarm-field-action-result.is-delivered[b-9rgda9i6ul] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.alarm-field-action-result.is-queued[b-9rgda9i6ul] { color: var(--pulse-warning-text); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.alarm-field-action-result.is-failed[b-9rgda9i6ul],
.alarm-field-action-result.is-refused[b-9rgda9i6ul] { color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.alarm-field-action-ledger summary[b-9rgda9i6ul] { color: var(--ap-muted); cursor: pointer; font-size: .75rem; font-weight: 700; }
.alarm-field-action-ledger ul[b-9rgda9i6ul] { display: grid; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.alarm-field-action-ledger li[b-9rgda9i6ul] { display: grid; gap: .1rem; padding: .45rem .6rem; border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-sm); background: var(--ap-surface); font-size: .75rem; }
.alarm-field-action-ledger li strong[b-9rgda9i6ul] { font-size: .76rem; }
.alarm-field-action-ledger li span[b-9rgda9i6ul] { color: var(--ap-muted); }
.alarm-field-action-ledger li em[b-9rgda9i6ul] { color: var(--pulse-danger-text); font-style: normal; }
.alarm-field-action-ledger li.is-delivered strong[b-9rgda9i6ul] { color: var(--pulse-success-text); }
.alarm-field-action-ledger li.is-failed strong[b-9rgda9i6ul] { color: var(--pulse-danger-text); }

.alarm-state[b-9rgda9i6ul] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    min-height: 3rem;
    padding: .75rem .875rem;
    border: 1px solid var(--ap-border);
    border-radius: var(--pulse-radius-md);
    color: var(--ap-muted);
    background: var(--ap-surface);
    box-shadow: var(--pulse-shadow-sm);
}

.alarm-state p[b-9rgda9i6ul] { margin: 0; }
.alarm-state a[b-9rgda9i6ul] { color: var(--ap-accent-strong); font-weight: 700; }
.alarm-state-copy[b-9rgda9i6ul] { display: grid; flex: 1 1 20rem; gap: .22rem; min-width: 0; }
.alarm-state-copy strong[b-9rgda9i6ul] { color: var(--ap-ink); font-size: .84rem; }
.alarm-state-copy p[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .76rem; line-height: 1.5; }
.alarm-state-actions[b-9rgda9i6ul] { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .5rem; }
.alarm-state-actions a[b-9rgda9i6ul] { align-items: center; display: inline-flex; justify-content: center; min-height: var(--pulse-control-min-height); padding: .55rem .85rem; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); color: var(--ap-accent-strong); background: var(--pulse-control-surface); text-decoration: none; }
.alarm-state-actions a:hover[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
.alarm-state-actions .alarm-state-primary[b-9rgda9i6ul] { border-color: transparent; color: var(--pulse-on-action); background: var(--pulse-action); }
.alarm-state-actions .alarm-state-primary:hover[b-9rgda9i6ul] { border-color: transparent; background: var(--pulse-action-hover); }
.alarm-state-empty[b-9rgda9i6ul] { align-content: center; }
.alarm-state-loading[b-9rgda9i6ul] { justify-content: flex-start; }
.alarm-state-spinner[b-9rgda9i6ul] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border: 2px solid var(--pulse-accent-border); border-top-color: var(--pulse-accent); border-radius: 50%; animation: alarm-spin-b-9rgda9i6ul .8s linear infinite; }
.alarm-state-error[b-9rgda9i6ul] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.alarm-state-error .alarm-state-copy strong[b-9rgda9i6ul],
.alarm-state-error .alarm-state-copy p[b-9rgda9i6ul] { color: var(--pulse-danger-text); }

@keyframes alarm-spin-b-9rgda9i6ul { to { transform: rotate(360deg); } }

.alarm-table-shell[b-9rgda9i6ul] {
    container-name: alarm-records;
    container-type: inline-size;
    width: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    /* Clip, not scroll: the rounded corners still crop the sticky header row,
       but the queue keeps the document scrollport so the page has one bar. */
    overflow: clip;
    border: 1px solid var(--ap-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--ap-surface);
}

/* A refetch narrows the rows the page already holds instead of emptying the
   queue, so the table stays mounted and only says it is catching up. */
.alarm-table-shell.is-stale[b-9rgda9i6ul] { opacity: .72; transition: opacity var(--pulse-motion-fast) ease; }

.alarm-table[b-9rgda9i6ul] { width: 100%; color: var(--ap-ink); border: 0; border-collapse: collapse; border-radius: 0; background: transparent; box-shadow: none; font-size: .875rem; table-layout: fixed; }
.alarm-table th[b-9rgda9i6ul],
.alarm-table td[b-9rgda9i6ul] { min-width: 0; padding: .625rem .75rem; border-bottom: 1px solid var(--ap-border); overflow-wrap: anywhere; text-align: left; vertical-align: top; }
.alarm-table th:nth-child(1)[b-9rgda9i6ul] { width: 7rem; }
.alarm-table th:nth-child(3)[b-9rgda9i6ul] { width: 9rem; }
.alarm-table th:nth-child(5)[b-9rgda9i6ul] { width: 18.25rem; }
.alarm-table thead th[b-9rgda9i6ul] { position: sticky; top: var(--pulse-commandbar-height); z-index: 3; color: var(--ap-muted); border-bottom: 1px solid var(--ap-border); background: var(--ap-inset); box-shadow: 0 1px var(--ap-border); font-size: var(--pulse-workspace-eyebrow-size); font-weight: 600; letter-spacing: normal; }
.alarm-table td[b-9rgda9i6ul] { border-bottom-color: var(--ap-border); vertical-align: middle; }
/* The row is a container, not a control: its links and buttons are the
   navigation, so text inside it stays selectable. */
.alarm-click-row[b-9rgda9i6ul] { transition: background var(--pulse-motion-fast) ease, box-shadow var(--pulse-motion-fast) ease; }
.alarm-click-row:hover[b-9rgda9i6ul], .alarm-click-row:focus-within[b-9rgda9i6ul], .alarm-click-row.is-selected[b-9rgda9i6ul] { background: color-mix(in srgb, var(--ap-accent) 7%, var(--ap-surface)); box-shadow: inset 3px 0 var(--ap-accent); }
.alarm-click-row[data-bulk-selected="true"][b-9rgda9i6ul] { background: color-mix(in srgb, var(--ap-accent) 12%, var(--ap-surface)); box-shadow: inset 5px 0 var(--ap-accent); }
.alarm-time-cell time[b-9rgda9i6ul] { display: grid; gap: .125rem; white-space: nowrap; }
.alarm-camera-name[b-9rgda9i6ul] { color: var(--ap-ink); font-weight: 700; }
.alarm-message[b-9rgda9i6ul], .alarm-time-cell time span[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .75rem; }
.alarm-message[b-9rgda9i6ul] { margin-top: .3rem; font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.alarm-type-line[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
/* Wrap between badges so narrow cells never split a priority or severity label. */
.alarm-type-line > :is(.alarm-status-chip, .alarm-priority-chip, .alarm-severity-chip, .alarm-repeat-chip)[b-9rgda9i6ul] { flex: 0 0 auto; white-space: nowrap; overflow-wrap: normal; }
.alarm-type-line > strong[b-9rgda9i6ul] { flex: 1 1 10rem; min-width: 0; font-weight: 600; }
.alarm-status-chip[b-9rgda9i6ul] { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.alarm-status-chip.is-active[b-9rgda9i6ul] { color: var(--pulse-danger-text); }
.alarm-status-chip.is-ended[b-9rgda9i6ul] { color: var(--ap-muted); }
.alarm-status-dot[b-9rgda9i6ul] { display: inline-block; flex: 0 0 auto; width: .5rem; height: .5rem; border: 1px solid transparent; border-radius: 999px; }
.alarm-status-dot.is-active[b-9rgda9i6ul] { background: var(--pulse-danger); }
.alarm-status-dot.is-ended[b-9rgda9i6ul] { background: var(--ap-muted); }

/* Forced colours override every background, so the two states would otherwise
   collapse into one appearance. Shape carries the difference instead. */
@media (forced-colors: active) {
    .alarm-status-dot.is-active[b-9rgda9i6ul] { border-color: Highlight; background: Highlight; }
    .alarm-status-dot.is-ended[b-9rgda9i6ul] { border-color: currentColor; background: transparent; }
    .alarm-click-row[data-bulk-selected="true"] .alarm-row-select[b-9rgda9i6ul] { border: 2px solid Highlight; }
}
.alarm-support-reference[b-9rgda9i6ul],
.alarm-technical-reference[b-9rgda9i6ul] {
    display: block;
    margin-top: .28rem;
    color: var(--ap-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    user-select: text;
}
/* The failed preview occupies exactly the tile the thumbnail would have, so a
   row whose evidence could not be drawn is the same height as its neighbours
   and the retry wording is never clipped mid-word. */
.alarm-preview-retry[b-9rgda9i6ul] {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: .25rem;
    color: var(--ap-accent-strong);
    background: var(--ap-soft);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.alarm-thumbnail-link:focus-visible[b-9rgda9i6ul],
.alarm-snapshot-frame:focus-visible[b-9rgda9i6ul] {
    outline: 3px solid var(--pulse-focus-ring, var(--ap-accent));
    outline-offset: 2px;
}
.alarm-row-links[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }
.alarm-row-links a[b-9rgda9i6ul], .alarm-detail-button[b-9rgda9i6ul], .alarm-field-actions-button[b-9rgda9i6ul] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pulse-control-min-height); padding: .35rem .6rem; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); color: var(--ap-accent-strong); background: var(--pulse-control-surface); font-size: .875rem; font-weight: 600; text-decoration: none; }
.alarm-row-links a[b-9rgda9i6ul] { border-color: transparent; background: transparent; }
.alarm-row-links a:hover[b-9rgda9i6ul], .alarm-detail-button:hover[b-9rgda9i6ul], .alarm-field-actions-button:hover[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
/* Hugs the thumbnail and its buttons so the width goes to the alarm text. */
.alarm-preview-cell[b-9rgda9i6ul] { width: auto; }
.alarm-preview-actions[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; min-width: 0; }
/* The snapshot is the evidence this product sells; at 76x48 it was a colour
   swatch, and object-fit cropped a 16:9 frame on both sides. */
.alarm-thumbnail-link[b-9rgda9i6ul] { display: block; flex: 0 0 6.5rem; width: 6.5rem; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 2px solid var(--ap-surface); border-radius: var(--pulse-radius-sm); background: var(--pulse-navy-900); box-shadow: 0 0 0 1px var(--ap-border-strong); cursor: pointer; }
.alarm-thumbnail-link img[b-9rgda9i6ul] { width: 100%; height: 100%; object-fit: cover; }
.alarm-no-thumbnail[b-9rgda9i6ul] { display: flex; flex: 0 0 6.5rem; align-items: center; justify-content: center; width: 6.5rem; aspect-ratio: 16 / 9; border-radius: var(--pulse-radius-sm); color: var(--ap-muted); background: var(--ap-soft); font-size: .75rem; font-weight: 700; text-align: center; }
.alarm-detail-button[b-9rgda9i6ul], .alarm-field-actions-button[b-9rgda9i6ul] { cursor: pointer; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.alarm-preview-actions .alarm-ack-button[b-9rgda9i6ul] { color: var(--ap-accent-strong); border: 1px solid var(--pulse-control-border); background: var(--pulse-control-surface); font-weight: 600; }
.alarm-preview-actions .alarm-ack-button:hover:not(:disabled)[b-9rgda9i6ul] { border-color: var(--ap-accent); background: var(--pulse-control-surface-hover); }
.alarm-detail-row td[b-9rgda9i6ul] { background: var(--ap-soft); }
/* Intrinsic tracks rather than two guessed thresholds: the panel folds when it
   runs out of room instead of char-breaking its labels through the 34-60rem
   band. content-visibility needs a size to skip to, or the scroll container's
   height changes as the panel enters and leaves the viewport. */
.alarm-detail-panel[b-9rgda9i6ul] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); content-visibility: auto; contain-intrinsic-size: auto 26rem; gap: .75rem; padding: .75rem; border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-lg); background: var(--ap-surface); }
.alarm-snapshot-column[b-9rgda9i6ul] { min-width: 0; }
.alarm-snapshot-frame[b-9rgda9i6ul] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 14.375rem; padding: 0; overflow: hidden; color: var(--pulse-on-action); border: 0; border-radius: var(--pulse-radius-md); background: var(--pulse-navy-900); cursor: pointer; font: inherit; text-decoration: none; }
.alarm-snapshot-frame img[b-9rgda9i6ul] { display: block; width: 100%; height: 100%; min-height: 14.375rem; max-height: 26.25rem; object-fit: contain; }
.alarm-snapshot-empty[b-9rgda9i6ul] { padding: 1.25rem; color: color-mix(in srgb, var(--pulse-on-action) 80%, var(--pulse-navy-900)); font-weight: 700; text-align: center; }
.alarm-snapshot-frame > span:last-child:not(:first-child)[b-9rgda9i6ul] { position: absolute; right: .75rem; bottom: .75rem; padding: .45rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--pulse-navy-900) 84%, transparent); font-size: .75rem; font-weight: 700; }
.alarm-detail-actions[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .625rem; }
.alarm-detail-actions form[b-9rgda9i6ul] { display: flex; }
.alarm-evidence-status[b-9rgda9i6ul] { display: grid; gap: .2rem; margin: .55rem 0 0; padding: .55rem .7rem; border: 1px solid var(--pulse-warning-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; line-height: 1.5; }
.alarm-evidence-status.is-failed[b-9rgda9i6ul] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.alarm-evidence-status .alarm-quiet-button[b-9rgda9i6ul] { justify-self: start; margin-top: .25rem; }
.alarm-detail-list[b-9rgda9i6ul] { display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .625rem; margin: 0; }
.alarm-detail-list > div[b-9rgda9i6ul] { min-width: 0; padding: .625rem 0; border-bottom: 1px solid var(--ap-border); }
.alarm-detail-list dt[b-9rgda9i6ul], .alarm-snapshot-note[b-9rgda9i6ul] { color: var(--ap-muted); }
.alarm-detail-list dt[b-9rgda9i6ul] { margin-bottom: .3rem; font-size: var(--pulse-workspace-eyebrow-size); font-weight: 600; letter-spacing: normal; }
.alarm-detail-list dd[b-9rgda9i6ul] { margin: 0; color: var(--ap-ink); overflow-wrap: anywhere; }
.alarm-snapshot-note[b-9rgda9i6ul] { margin: .55rem .125rem 0; font-size: .75rem; }
.alarm-detail-wide[b-9rgda9i6ul] { grid-column: 1 / -1; }

.visually-hidden[b-9rgda9i6ul],
.alarm-bulk-bar:not(:has(.alarm-bulk-field)) .alarm-bulk-selection-count[b-9rgda9i6ul] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

html[data-theme="dark"] .alarm-search input[b-9rgda9i6ul],
html[data-theme="dark"] .alarm-select select[b-9rgda9i6ul],
html[data-theme="dark"] .alarm-bulk-field select[b-9rgda9i6ul],
html[data-theme="dark"] .alarm-bulk-field input[b-9rgda9i6ul],
html[data-theme="dark"] .alarm-ack-form select[b-9rgda9i6ul],
html[data-theme="dark"] .alarm-ack-form textarea[b-9rgda9i6ul] { color-scheme: dark; }

@media (max-width: 1040px) {
    .alarm-toolbar-status[b-9rgda9i6ul] { margin-left: 0; }
}

/* The queue is also embedded beside a 252px navigation rail. Its own width,
   rather than the browser width, decides when a five-column table stops being
   useful. At that point each alarm becomes a bounded, two-column record; no
   page or table scrollbar is needed to reach its actions. */
@container alarm-records (max-width: 60rem) {
    .alarm-table[b-9rgda9i6ul],
    .alarm-table tbody[b-9rgda9i6ul] { display: block; width: 100%; }

    .alarm-table thead[b-9rgda9i6ul] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .alarm-table tbody[b-9rgda9i6ul] {
        display: grid;
        gap: .75rem;
        padding: .75rem;
    }

    .alarm-table .alarm-click-row[b-9rgda9i6ul] {
        display: grid;
        grid-template-areas:
            "time alarm"
            "camera camera"
            "channel preview";
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        overflow: hidden;
        border: 1px solid var(--ap-border);
        border-radius: var(--pulse-radius-lg);
        background: var(--ap-surface);
        box-shadow: var(--pulse-shadow-sm);
    }

    .alarm-table .alarm-click-row.is-selected[b-9rgda9i6ul] {
        border-color: color-mix(in srgb, var(--ap-accent) 48%, var(--ap-border));
    }

    .alarm-table .alarm-click-row[data-bulk-selected="true"][b-9rgda9i6ul] {
        border-color: var(--ap-accent);
        background: color-mix(in srgb, var(--ap-accent) 12%, var(--ap-surface));
        box-shadow: inset 5px 0 var(--ap-accent), var(--pulse-shadow-sm);
    }

    .alarm-click-row > td[b-9rgda9i6ul] {
        display: block;
        min-width: 0;
        padding: .72rem .85rem;
        border-bottom: 1px solid var(--ap-border);
    }

    .alarm-click-row > td[b-9rgda9i6ul]::before {
        display: block;
        margin-bottom: .3rem;
        color: var(--ap-muted);
        content: attr(data-label);
        font-size: var(--pulse-workspace-eyebrow-size);
        font-weight: 700;
        letter-spacing: normal;
    }

    .alarm-time-cell[b-9rgda9i6ul] { grid-area: time; }
    .alarm-camera-cell[b-9rgda9i6ul] { grid-area: camera; }
    .alarm-channel-cell[b-9rgda9i6ul] { grid-area: channel; border-bottom: 0 !important; }
    .alarm-type-cell[b-9rgda9i6ul] { grid-area: alarm; }
    .alarm-preview-cell[b-9rgda9i6ul] { grid-area: preview; width: auto; border-bottom: 0 !important; }
    .alarm-message[b-9rgda9i6ul] { max-width: none; }
    .alarm-preview-actions[b-9rgda9i6ul] { align-items: flex-start; }

    .alarm-detail-row[b-9rgda9i6ul],
    .alarm-detail-row > td[b-9rgda9i6ul] { display: block; width: 100%; }
    .alarm-detail-row > td[b-9rgda9i6ul] { padding: 0; border: 0; }
    .alarm-detail-row > td[b-9rgda9i6ul]::before { content: none; }
}

@container alarm-records (max-width: 34rem) {
    .alarm-table .alarm-click-row[b-9rgda9i6ul] {
        grid-template-areas:
            "camera"
            "alarm"
            "time"
            "channel"
            "preview";
        grid-template-columns: minmax(0, 1fr);
    }

    .alarm-click-row > td[b-9rgda9i6ul] { padding: .5rem .75rem; border-bottom: 0 !important; }
    .alarm-click-row > :is(.alarm-camera-cell, .alarm-type-cell, .alarm-time-cell)[b-9rgda9i6ul]::before { display: none; }
    .alarm-click-row > .alarm-camera-cell[b-9rgda9i6ul] { padding-bottom: .25rem; }
    .alarm-click-row > .alarm-type-cell[b-9rgda9i6ul] { padding-top: .25rem; }
    .alarm-type-line > strong[b-9rgda9i6ul] { flex: 1 1 auto; }
    .alarm-table .alarm-time-cell[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--ap-border); }
    .alarm-time-cell time[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
    .alarm-time-cell time strong[b-9rgda9i6ul] { font-size: .8125rem; font-weight: 600; }
    .alarm-time-cell .alarm-row-select[b-9rgda9i6ul] { flex: 0 0 auto; }
    .alarm-channel-cell[b-9rgda9i6ul] { color: var(--ap-muted); font-size: .8125rem; }
    .alarm-click-row > .alarm-channel-cell[b-9rgda9i6ul]::before { display: inline; margin-inline-end: .4rem; }
    .alarm-channel-cell > div[b-9rgda9i6ul] { display: inline; }
    .alarm-preview-cell[b-9rgda9i6ul] { border-top: 1px solid var(--ap-border); }
    .alarm-preview-actions > :is(button, a, form)[b-9rgda9i6ul] { flex: 1 1 8.5rem; }
    .alarm-preview-actions > form button[b-9rgda9i6ul] { width: 100%; }
    .alarm-detail-panel[b-9rgda9i6ul],
    .alarm-detail-list[b-9rgda9i6ul] { grid-template-columns: minmax(0, 1fr); }
    .alarm-detail-wide[b-9rgda9i6ul] { grid-column: auto; }
}

@media (max-width: 760px) {
    .alarm-page[b-9rgda9i6ul] { width: 100%; margin: 0; padding: .75rem .625rem 1.75rem; }
    .breadcrumbs[b-9rgda9i6ul] { margin: 0; }
    .alarm-header[b-9rgda9i6ul] { align-items: flex-start; gap: .25rem .5rem; padding: .25rem 0rem; }
    .alarm-header-actions:empty[b-9rgda9i6ul] { display: none; }
    .alarm-header-actions[b-9rgda9i6ul] { align-self: stretch; justify-content: flex-start; }
    .alarm-header-actions a[b-9rgda9i6ul] { flex: 1 1 9rem; text-align: center; }
    .alarm-toolbar[b-9rgda9i6ul] { align-items: stretch; gap: .5rem; padding: .5rem; }
    .alarm-secondary-filters > :is(.alarm-search, .alarm-select, .alarm-export-mode)[b-9rgda9i6ul], .alarm-toolbar-actions[b-9rgda9i6ul] { flex: 1 1 100%; min-width: 0; }
    .alarm-primary-filters > .alarm-search[b-9rgda9i6ul] { flex-basis: 100%; min-width: 0; }
    .alarm-primary-filters > .alarm-select[b-9rgda9i6ul] { flex: 1 1 calc(50% - .25rem); min-width: 0; }
    .alarm-primary-filters > .alarm-toggle[b-9rgda9i6ul] { flex: 1 1 calc(50% - .25rem); justify-content: flex-start; }
    .alarm-more-filters[b-9rgda9i6ul] { flex: 1 1 calc(50% - .25rem); }
    .alarm-more-filters[open][b-9rgda9i6ul] { flex-basis: 100%; }
    .alarm-additional-filter-count[b-9rgda9i6ul] { margin-inline-start: 1.1rem; }
    .alarm-bulk-bar[b-9rgda9i6ul] { align-items: stretch; }
    .alarm-bulk-field[b-9rgda9i6ul], .alarm-bulk-note[b-9rgda9i6ul] { flex: 1 1 100%; min-width: 0; }
    .alarm-toggle[b-9rgda9i6ul] { justify-content: center; padding: .55rem .7rem; }
    .alarm-toolbar-actions > *[b-9rgda9i6ul] { flex: 1 1 8rem; }
    .alarm-inline-error[b-9rgda9i6ul] { align-items: flex-start; flex-direction: column; }
    .alarm-state[b-9rgda9i6ul] { align-items: stretch; }
    .alarm-state-actions[b-9rgda9i6ul] { width: 100%; }
    .alarm-state-actions > *[b-9rgda9i6ul] { flex: 1 1 9rem; }
    .alarm-table-shell[b-9rgda9i6ul] { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .alarm-table-shell > .alarm-bulk-bar[b-9rgda9i6ul] { margin-bottom: .75rem; border: 1px solid var(--ap-border); border-radius: var(--pulse-radius-md); }
    .alarm-table tbody[b-9rgda9i6ul] { padding: 0; }
    .alarm-preview-actions > :is(button, a)[b-9rgda9i6ul] { min-height: 44px; }
    .alarm-detail-panel[b-9rgda9i6ul],
    .alarm-detail-list[b-9rgda9i6ul] { grid-template-columns: minmax(0, 1fr); }
    .alarm-detail-wide[b-9rgda9i6ul] { grid-column: auto; }
}

/* Phone tool row. Search, the disclosure and the actions are the whole row an
   operator needs at a glance; priority, acknowledgement and Active only wrapped
   into three more lines and pushed the queue most of a screen down. They fold
   into the More-filters disclosure that already carries the rest of the
   criteria, so opening it still reaches every one of them - no new state, and
   the header keeps offering Clear filters while any of them is set. */
@media (max-width: 540px) {
    .alarm-toolbar[b-9rgda9i6ul] { padding: .375rem .5rem; }
    .alarm-primary-filters[b-9rgda9i6ul] { flex: 1 1 100%; }
    .alarm-primary-filters > :is(.alarm-select, .alarm-toggle)[b-9rgda9i6ul] { display: none; }
    .alarm-toolbar:has(.alarm-more-filters[open]) .alarm-primary-filters > :is(.alarm-select, .alarm-toggle)[b-9rgda9i6ul] { display: flex; }
    .alarm-more-filters[b-9rgda9i6ul] { flex: 0 1 auto; }
    .alarm-more-filters[open][b-9rgda9i6ul] { flex: 1 1 100%; }
    /* Export and Refresh share the disclosure's line instead of owning one; the
       tighter side padding is what lets the three labels hold that line in
       Norwegian too, and the 44px touch height is untouched. */
    .alarm-toolbar-actions[b-9rgda9i6ul] { flex: 1 1 auto; justify-content: flex-end; }
    .alarm-toolbar-actions > :is(a, button)[b-9rgda9i6ul] { flex: 0 1 auto; padding-inline: .6rem; }
}

@media (any-pointer: coarse) {
    .breadcrumbs a[b-9rgda9i6ul],
    .alarm-row-links a[b-9rgda9i6ul],
    .alarm-detail-button[b-9rgda9i6ul],
    .alarm-field-actions-button[b-9rgda9i6ul] {
        align-items: center;
        display: inline-flex;
        min-height: var(--pulse-control-min-height);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alarm-header-actions a[b-9rgda9i6ul], .alarm-detail-actions :is(a, button)[b-9rgda9i6ul], .alarm-secondary-link[b-9rgda9i6ul], .alarm-search input[b-9rgda9i6ul], .alarm-select select[b-9rgda9i6ul], .alarm-toggle[b-9rgda9i6ul], .alarm-refresh-button[b-9rgda9i6ul], .alarm-quiet-button[b-9rgda9i6ul], .alarm-state button[b-9rgda9i6ul], .alarm-inline-error button[b-9rgda9i6ul], .alarm-export-link[b-9rgda9i6ul], .alarm-ack-button[b-9rgda9i6ul], .alarm-table-shell.is-stale[b-9rgda9i6ul] { transition: none; }
    .alarm-state-spinner[b-9rgda9i6ul] { animation: none; border-top-color: var(--pulse-accent-border); background: var(--pulse-accent); }
}

/* The camera's own commands, shown when the page is scoped to one camera.
   Same control vocabulary as the per-alarm field-action strip so the two read
   as one feature seen from two places. */
.alarm-camera-commands[b-9rgda9i6ul] { background: var(--pulse-surface); border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-md, 14px); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; padding: .5rem .75rem; }
.alarm-camera-commands > header[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; }
.alarm-camera-commands > header strong[b-9rgda9i6ul] { font-size: .875rem; }
.alarm-camera-commands > header small[b-9rgda9i6ul] { color: var(--ap-muted, var(--pulse-muted)); font-size: .8125rem; }
.alarm-camera-command-list[b-9rgda9i6ul] { display: flex; flex-wrap: wrap; gap: .5rem; }
.alarm-camera-command[b-9rgda9i6ul],
.alarm-camera-command-cancel[b-9rgda9i6ul] { align-items: center; background: var(--pulse-control-surface); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); color: var(--ap-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: .8rem; font-weight: 700; min-height: var(--pulse-control-min-height); padding: .5rem .85rem; }
.alarm-camera-command:hover[b-9rgda9i6ul],
.alarm-camera-command-cancel:hover[b-9rgda9i6ul] { background: var(--pulse-control-surface-hover); border-color: var(--ap-accent); }
.alarm-camera-command[b-9rgda9i6ul] { display: grid; gap: .15rem; text-align: left; }
.alarm-camera-command > span[b-9rgda9i6ul] { font-weight: 700; }
.alarm-camera-command > small[b-9rgda9i6ul] { color: var(--ap-muted, var(--pulse-muted)); font-size: .75rem; font-weight: 600; line-height: 1.25; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarm-camera-command.is-armed[b-9rgda9i6ul] { background: color-mix(in srgb, var(--ap-accent) 12%, var(--pulse-control-surface)); border-color: var(--ap-accent); }
.alarm-camera-command:disabled[b-9rgda9i6ul],
.alarm-camera-command-cancel:disabled[b-9rgda9i6ul] { cursor: not-allowed; opacity: .6; }
.alarm-camera-command-result[b-9rgda9i6ul] { flex: 1 1 100%; font-size: .8rem; margin: 0; }
.alarm-camera-command-result.is-failed[b-9rgda9i6ul],
.alarm-camera-command-result.is-refused[b-9rgda9i6ul],
.alarm-camera-command-result.is-outcome_unknown[b-9rgda9i6ul] { color: var(--pulse-danger, #b3261e); font-weight: 700; }

.alarm-export-mode[b-9rgda9i6ul] { align-items: center; display: inline-flex; gap: .45rem; min-height: var(--pulse-control-min-height); font-size: .8125rem; }
.alarm-export-mode input[b-9rgda9i6ul] { accent-color: var(--ap-accent); }
/* /Components/Pages/AlarmSeverityRules.razor.rz.scp.css */
.severity-rules-page[b-sntyxpo9ex] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    color: var(--pulse-text);
    font-size: .875rem;
    line-height: 1.45;
}

.severity-breadcrumbs[b-sntyxpo9ex] { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: 0; font-size: .8125rem; color: var(--pulse-muted); }
.severity-breadcrumbs a[b-sntyxpo9ex] { display: inline-flex; min-height: var(--pulse-control-min-height); align-items: center; color: var(--pulse-link); }
.severity-hero[b-sntyxpo9ex], .section-heading[b-sntyxpo9ex], .editor-actions[b-sntyxpo9ex] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.severity-hero[b-sntyxpo9ex] { flex-wrap: wrap; min-height: var(--pulse-control-min-height); padding: 0; border: 0; border-radius: 0; background: transparent; }
.severity-hero > div[b-sntyxpo9ex], .section-heading > div[b-sntyxpo9ex] { min-width: 0; }
.severity-hero h1[b-sntyxpo9ex] { margin: 0; font-size: var(--pulse-workspace-title-size); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.severity-hero > button[b-sntyxpo9ex] { flex: 0 0 auto; }
.severity-title[b-sntyxpo9ex] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; }
button[b-sntyxpo9ex], input[b-sntyxpo9ex], select[b-sntyxpo9ex] { font: inherit; }
button[b-sntyxpo9ex] { min-height: var(--pulse-control-min-height); border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); padding: .5rem .75rem; background: var(--pulse-control-surface); color: var(--pulse-control-text); font-weight: 600; cursor: pointer; }
button:hover:not(:disabled)[b-sntyxpo9ex] { border-color: var(--pulse-border-strong); background: var(--pulse-control-surface-hover); }
a:focus-visible[b-sntyxpo9ex], button:focus-visible[b-sntyxpo9ex], input:focus-visible[b-sntyxpo9ex], select:focus-visible[b-sntyxpo9ex], summary:focus-visible[b-sntyxpo9ex] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
button:disabled[b-sntyxpo9ex] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }
button.primary[b-sntyxpo9ex] { border-color: transparent; background: var(--pulse-action); color: var(--pulse-on-action); }
button.primary:hover:not(:disabled)[b-sntyxpo9ex] { background: var(--pulse-action-hover); }
button.danger[b-sntyxpo9ex] { margin-inline-start: auto; border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); }
button.danger:hover:not(:disabled)[b-sntyxpo9ex] { background: var(--pulse-danger-soft); border-color: var(--pulse-danger); }

.severity-workspace[b-sntyxpo9ex] { display: grid; grid-template-columns: minmax(16rem, .65fr) minmax(0, 1.7fr); gap: var(--pulse-workspace-gap); margin-top: var(--pulse-workspace-gap); align-items: start; }
.severity-list[b-sntyxpo9ex], .severity-editor[b-sntyxpo9ex], .severity-state[b-sntyxpo9ex] { min-width: 0; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-lg); background: var(--pulse-surface); padding: 1rem; }
.section-heading h2[b-sntyxpo9ex], .severity-editor h2[b-sntyxpo9ex] { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.section-heading p[b-sntyxpo9ex] { margin: .3rem 0 0; color: var(--pulse-muted); }
.section-heading p[b-sntyxpo9ex] { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.severity-list ol[b-sntyxpo9ex] { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rule-card[b-sntyxpo9ex] { width: 100%; display: grid; grid-template-columns: minmax(2rem, max-content) minmax(0, 1fr) auto; gap: .625rem; padding: .625rem; text-align: left; align-items: center; }
.rule-card.selected[b-sntyxpo9ex] { border-color: var(--pulse-accent); background: var(--pulse-accent-soft); }
.rule-card span:nth-child(2)[b-sntyxpo9ex] { min-width: 0; display: grid; gap: .2rem; }
.rule-card strong[b-sntyxpo9ex], .rule-card small[b-sntyxpo9ex] { overflow-wrap: anywhere; }
.rule-card strong[b-sntyxpo9ex] { font-weight: 600; }
.rule-card small[b-sntyxpo9ex] { color: var(--pulse-muted); font-size: .75rem; font-weight: 400; }
.rule-order[b-sntyxpo9ex] { display: grid; place-items: center; min-height: 2rem; padding: .25rem .375rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-surface-soft); color: var(--pulse-text); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-state[b-sntyxpo9ex] { font-size: .75rem; font-weight: 500; color: var(--pulse-muted); white-space: nowrap; }
.severity-empty[b-sntyxpo9ex] { margin-top: .75rem; padding: .75rem 0 .25rem; }
.severity-state[b-sntyxpo9ex] { margin-top: var(--pulse-workspace-gap); }
.severity-empty strong[b-sntyxpo9ex], .severity-state strong[b-sntyxpo9ex] { font-weight: 600; }
.severity-empty p[b-sntyxpo9ex], .severity-state p[b-sntyxpo9ex] { margin: .35rem 0 .75rem; color: var(--pulse-muted); }
.severity-notice[b-sntyxpo9ex] { margin-top: var(--pulse-workspace-gap); padding: .75rem 1rem; border: 1px solid var(--pulse-success-border); border-radius: var(--pulse-radius-md); background: var(--pulse-success-soft); color: var(--pulse-success-text); }
.severity-notice.error[b-sntyxpo9ex], .severity-state.error[b-sntyxpo9ex] { background: var(--pulse-danger-soft); color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); }
.severity-state.error p[b-sntyxpo9ex] { color: var(--pulse-danger-text); }

.editor-grid[b-sntyxpo9ex] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .875rem; }
.editor-grid label[b-sntyxpo9ex] { display: grid; align-content: start; gap: .3rem; min-width: 0; font-weight: 600; }
.editor-grid label.wide[b-sntyxpo9ex] { grid-column: 1 / -1; }
.editor-grid label.toggle[b-sntyxpo9ex] { display: flex; align-items: center; align-self: end; min-height: var(--pulse-control-min-height); cursor: pointer; }
.editor-grid input[type=checkbox][b-sntyxpo9ex] { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0 .2rem 0 0; accent-color: var(--pulse-accent); }
.editor-grid input:not([type=checkbox])[b-sntyxpo9ex], .editor-grid select[b-sntyxpo9ex] { min-width: 0; width: 100%; min-height: var(--pulse-control-min-height); box-sizing: border-box; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); padding: .5rem .65rem; background: var(--pulse-control-surface); color: var(--pulse-control-text); font-weight: 400; }
.editor-grid input[b-sntyxpo9ex]::placeholder { color: var(--pulse-placeholder); }
.editor-grid input[readonly][b-sntyxpo9ex] { background: var(--pulse-surface-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8125rem; }
.editor-grid small[b-sntyxpo9ex] { font-size: .75rem; font-weight: 400; color: var(--pulse-muted); }
.editor-grid .severity-legacy-warning[b-sntyxpo9ex] { color: var(--pulse-warning-text); }
.severity-device-search[b-sntyxpo9ex] { display: flex; gap: .5rem; min-width: 0; }
.severity-device-search input[b-sntyxpo9ex] { flex: 1 1 0; }
.severity-device-search button[b-sntyxpo9ex] { flex: 0 0 auto; }
.editor-actions[b-sntyxpo9ex] { justify-content: flex-start; margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--pulse-border); flex-wrap: wrap; }
.severity-guidance[b-sntyxpo9ex] { margin-top: .875rem; border-top: 1px solid var(--pulse-border); }
.severity-guidance summary[b-sntyxpo9ex] { min-height: var(--pulse-control-min-height); padding: .65rem .25rem; color: var(--pulse-link); font-weight: 600; list-style-position: inside; cursor: pointer; }
.severity-guidance summary:hover[b-sntyxpo9ex] { background: var(--pulse-control-surface-hover); }
.severity-guidance p[b-sntyxpo9ex] { margin: .25rem .25rem .75rem; color: var(--pulse-muted); }

@media (min-width: 1280px) {
    .editor-grid[b-sntyxpo9ex] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .editor-grid label.rule-name[b-sntyxpo9ex],
    .editor-grid label.device-lookup[b-sntyxpo9ex],
    .editor-grid label.device-identity[b-sntyxpo9ex],
    .editor-grid label.match-filter[b-sntyxpo9ex],
    .editor-grid label.response-target[b-sntyxpo9ex] { grid-column: span 2; }
}

@media (max-width: 820px) {
    .severity-rules-page[b-sntyxpo9ex] { padding: .75rem .625rem 1.75rem; }
    .severity-hero[b-sntyxpo9ex] { padding: 0; }
    .severity-hero > div[b-sntyxpo9ex] { flex: 1 1 22rem; }
    .severity-workspace[b-sntyxpo9ex] { grid-template-columns: minmax(0, 1fr); }
    .editor-grid[b-sntyxpo9ex] { grid-template-columns: minmax(0, 1fr); }
    .editor-grid label.wide[b-sntyxpo9ex] { grid-column: auto; }
    .severity-list[b-sntyxpo9ex], .severity-editor[b-sntyxpo9ex] { padding: .875rem; }
    .rule-card[b-sntyxpo9ex] { grid-template-columns: minmax(2rem, max-content) minmax(0, 1fr) auto; }
}
@media (max-width: 420px) {
    .severity-device-search[b-sntyxpo9ex] { flex-wrap: wrap; }
    .severity-device-search input[b-sntyxpo9ex] { flex-basis: 12rem; }
    .severity-device-search button[b-sntyxpo9ex] { flex: 1 0 auto; }
    .editor-actions button[b-sntyxpo9ex] { flex: 1 1 7rem; }
    .editor-actions button.danger[b-sntyxpo9ex] { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *[b-sntyxpo9ex] { scroll-behavior: auto !important; transition: none !important; }
}
/* /Components/Pages/AssetMetadataImport.razor.rz.scp.css */
.asset-metadata-page[b-aigucda27l] {
    container-type: inline-size;
    container-name: asset-metadata-page;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, .75rem) var(--pulse-workspace-pad-x, 1rem) var(--pulse-workspace-pad-bottom, 1rem);
    color: var(--pulse-text);
    display: grid;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.45;
}
.asset-metadata-hero[b-aigucda27l] { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.asset-metadata-hero h1[b-aigucda27l] { margin: 0; font-size: var(--pulse-workspace-title-size, 1.55rem); letter-spacing: -.015em; font-weight: 700; line-height: 1.3; }
.asset-metadata-hero-actions[b-aigucda27l], .asset-metadata-template-links[b-aigucda27l], .asset-metadata-actions[b-aigucda27l] { display:flex; flex-wrap:wrap; gap:.55rem; }
.asset-metadata-hero-actions a[b-aigucda27l], .asset-metadata-template-links a[b-aigucda27l], .asset-metadata-primary[b-aigucda27l], .asset-metadata-secondary[b-aigucda27l] { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:.55rem .8rem; border:1px solid var(--pulse-control-border); border-radius:var(--pulse-radius-sm); color:var(--pulse-control-text); background:var(--pulse-control-surface); font:inherit; font-size:.875rem; font-weight:600; text-decoration:none; cursor:pointer; }
.asset-metadata-primary[b-aigucda27l] { border-color:var(--pulse-action); color:var(--pulse-on-action); background:var(--pulse-action); }
.asset-metadata-hero-actions a:hover[b-aigucda27l], .asset-metadata-template-links a:hover[b-aigucda27l], .asset-metadata-secondary:hover[b-aigucda27l] { border-color:var(--pulse-accent); background:var(--pulse-control-surface-hover); }
.asset-metadata-primary:hover:not(:disabled)[b-aigucda27l] { border-color:var(--pulse-action-hover); background:var(--pulse-action-hover); }
.asset-metadata-primary:disabled[b-aigucda27l], .asset-metadata-secondary:disabled[b-aigucda27l] { cursor:not-allowed; opacity: var(--pulse-disabled-opacity, .58); }
.asset-metadata-disabled-action[b-aigucda27l] { display:inline-flex; min-height:44px; align-items:center; padding:.55rem .8rem; border:1px dashed var(--pulse-control-border); border-radius:var(--pulse-radius-sm); color:var(--pulse-muted); font-size:.875rem; font-weight:700; }
.asset-metadata-setup[b-aigucda27l], .asset-metadata-validation[b-aigucda27l] { display: grid; gap: .75rem; min-width: 0; align-content: start; }
.asset-metadata-panel[b-aigucda27l] { display:grid; gap: .75rem; padding: .85rem; border:1px solid var(--pulse-border); border-radius:var(--pulse-radius-lg); background:var(--pulse-surface); min-width: 0; }
.asset-metadata-guide[b-aigucda27l] { grid-template-columns: minmax(0, 1fr) auto; align-items:center; }
.asset-metadata-panel-heading[b-aigucda27l] { display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap: wrap; }
.asset-metadata-panel-heading > div[b-aigucda27l] { display:flex; gap:.65rem; align-items:center; min-width: 0; }
.asset-metadata-step[b-aigucda27l] { display:inline-flex; width: 1.75rem; height: 1.75rem; align-items:center; justify-content:center; border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-muted); background: var(--pulse-surface-soft); font-weight: 600; flex-shrink: 0; border: 1px solid var(--pulse-border); font-size: .875rem; }
.asset-metadata-panel h2[b-aigucda27l] { margin:0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.asset-metadata-panel p[b-aigucda27l] { margin:0; color:var(--pulse-muted); line-height: 1.45; }
.asset-metadata-warning-note[b-aigucda27l] { color:var(--pulse-warning-text) !important; }
.asset-metadata-limit[b-aigucda27l] { color:var(--pulse-muted); font-size: .75rem; font-variant-numeric:tabular-nums; }
.asset-metadata-file-picker[b-aigucda27l] { display:grid; gap:.4rem; padding: .85rem; border:1px dashed var(--pulse-control-border); border-radius:var(--pulse-radius-md); background: var(--pulse-surface-soft); min-width: 0; }
.asset-metadata-file-picker > span[b-aigucda27l] { color: var(--pulse-text); font-size: .875rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.asset-metadata-file-picker[b-aigucda27l]  input { width:100%; min-height:44px; color:var(--pulse-control-text); font:inherit; font-size: .875rem; }
.asset-metadata-file-picker small[b-aigucda27l] { color:var(--pulse-muted); font-size: .75rem; overflow-wrap: anywhere; }
.asset-metadata-alert[b-aigucda27l] { padding:.8rem 1rem; border-radius:var(--pulse-radius-md); font-weight: 500; overflow-wrap: anywhere; }
.asset-metadata-alert.is-error[b-aigucda27l] { border:1px solid var(--pulse-danger-border); color:var(--pulse-danger-text); background:var(--pulse-danger-soft); }
.asset-metadata-alert.is-success[b-aigucda27l] { border:1px solid var(--pulse-success-border); color:var(--pulse-success-text); background:var(--pulse-success-soft); }
.asset-metadata-review-state[b-aigucda27l] { color:var(--pulse-muted); font-size: .75rem; font-weight: 600; }
.asset-metadata-review-state.is-ready[b-aigucda27l] { color:var(--pulse-success-text); }
.asset-metadata-review-state.is-applied[b-aigucda27l] { color:var(--pulse-success-text); }
.asset-metadata-review-state.is-blocked[b-aigucda27l] { color:var(--pulse-danger-text); }
.asset-metadata-summary[b-aigucda27l] { display:flex; flex-wrap:wrap; gap:.55rem; }
.asset-metadata-summary span[b-aigucda27l] { padding: .5rem .65rem; border:1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm, 8px); color:var(--pulse-muted); font-size: .875rem; background: var(--pulse-surface-soft); }
.asset-metadata-summary strong[b-aigucda27l] { color:var(--pulse-text); margin-right:.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.asset-metadata-error-table[b-aigucda27l] { overflow:auto; max-height:24rem; border:1px solid var(--pulse-danger-border); border-radius:var(--pulse-radius-md); }
.asset-metadata-error-table table[b-aigucda27l] { width:100%; border-collapse:collapse; font-size: .8125rem; }
.asset-metadata-error-table th[b-aigucda27l], .asset-metadata-error-table td[b-aigucda27l] { padding:.6rem .7rem; border-bottom:1px solid var(--pulse-border); text-align:left; vertical-align:top; }
.asset-metadata-error-table th[b-aigucda27l] { position:sticky; top:0; color:var(--pulse-muted); background:var(--pulse-surface-raised); font-size: .75rem; letter-spacing: normal; text-transform: none; font-weight: 600; z-index: 1; }
.asset-metadata-error-table td:first-child[b-aigucda27l] { font-variant-numeric:tabular-nums; }
.asset-metadata-no-errors[b-aigucda27l] { padding:.8rem; border:1px solid var(--pulse-success-border); border-radius:var(--pulse-radius-md); color:var(--pulse-success-text) !important; background:var(--pulse-success-soft); }
.asset-metadata-hero > div[b-aigucda27l], .asset-metadata-template-links[b-aigucda27l] { min-width: 0; }
.asset-metadata-hero-actions[b-aigucda27l] { flex: 0 0 auto; }
.asset-metadata-hero-actions a[b-aigucda27l] { white-space: nowrap; }
.asset-metadata-guide > div:first-child[b-aigucda27l] { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; min-width: 0; }
.asset-metadata-reference[b-aigucda27l] { flex: 0 1 auto; }
.asset-metadata-reference[open][b-aigucda27l] { flex: 1 1 100%; }
.asset-metadata-reference > summary[b-aigucda27l] { min-height: var(--pulse-control-min-height, 44px); padding: .25rem .5rem; color: var(--pulse-muted); font-size: .875rem; font-weight: 600; cursor: pointer; }
.asset-metadata-reference > p + p[b-aigucda27l] { margin-top: .45rem; }
.asset-metadata-template-links[b-aigucda27l] { max-width: none; }
.asset-metadata-page :is(h1, h2, p, code)[b-aigucda27l] { overflow-wrap: anywhere; }
.asset-metadata-page :is(a, button)[b-aigucda27l], .asset-metadata-file-picker[b-aigucda27l]  input { line-height: 1.3; }
.asset-metadata-page :is(a, button, summary):focus-visible[b-aigucda27l], .asset-metadata-error-table:focus-visible[b-aigucda27l], .asset-metadata-file-picker[b-aigucda27l]  input:focus-visible { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.asset-metadata-file-picker[b-aigucda27l]  input::file-selector-button { min-height: var(--pulse-control-min-height, 44px); margin-inline-end: .65rem; padding: .5rem .75rem; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-control-text); background: var(--pulse-control-surface); font: inherit; font-weight: 600; cursor: pointer; }
.asset-metadata-file-picker[b-aigucda27l]  input:not(:disabled)::file-selector-button:hover { border-color: var(--pulse-accent); background: var(--pulse-control-surface-hover); }
.asset-metadata-file-picker[b-aigucda27l]  input:disabled::file-selector-button { cursor: not-allowed; opacity: var(--pulse-disabled-opacity, .58); }
.asset-metadata-error-table td[b-aigucda27l] { overflow-wrap: anywhere; }
@container asset-metadata-page (min-width: 62rem) {
    .asset-metadata-setup[b-aigucda27l] { grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr); align-items: start; }
    .asset-metadata-guide[b-aigucda27l] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width:760px) {
    .asset-metadata-page[b-aigucda27l] { padding:.75rem; }
    .asset-metadata-hero[b-aigucda27l], .asset-metadata-guide[b-aigucda27l] { display:grid; grid-template-columns:1fr; align-items:stretch; }
    .asset-metadata-hero-actions[b-aigucda27l], .asset-metadata-template-links[b-aigucda27l] { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .asset-metadata-actions[b-aigucda27l] { display:grid; grid-template-columns:1fr; }
    .asset-metadata-hero-actions a[b-aigucda27l], .asset-metadata-template-links a[b-aigucda27l], .asset-metadata-primary[b-aigucda27l], .asset-metadata-secondary[b-aigucda27l] { width:100%; }
    .asset-metadata-panel-heading[b-aigucda27l] { align-items:flex-start; flex-direction:column; }
    .asset-metadata-limit[b-aigucda27l] { align-self:flex-start; }
    .asset-metadata-template-links[b-aigucda27l] { max-width: none; }
}
/* /Components/Pages/AuditTrail.razor.rz.scp.css */
.audit-page[b-ufcr4zntzx] {
    --audit-surface: var(--pulse-surface);
    --audit-surface-soft: var(--pulse-surface-soft);
    --audit-border: var(--pulse-border);
    --audit-ink: var(--pulse-text);
    --audit-muted: var(--pulse-muted);
    --audit-accent: var(--pulse-accent);
    box-sizing: border-box;
    container-name: audit-page;
    container-type: inline-size;
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - 6rem);
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--audit-ink);
    font-size: .875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.audit-breadcrumbs[b-ufcr4zntzx] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 0;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--audit-muted);
    background: transparent;
    font-size: .875rem;
}

.audit-breadcrumbs a[b-ufcr4zntzx] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--audit-accent);
    font-weight: 600;
    text-decoration: none;
}

.audit-hero[b-ufcr4zntzx] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    margin-bottom: var(--pulse-workspace-hero-pad-y, 14px);
    padding: 0;
    border: 0;
    border-radius: var(--pulse-radius-xl, 1rem);
    background: transparent;
}

.audit-hero h1[b-ufcr4zntzx] {
    margin: 0;
    color: var(--audit-ink);
    font-size: var(--pulse-workspace-title-size, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.audit-hero > div > p[b-ufcr4zntzx] {
    max-width: none;
    margin: 0;
    color: var(--audit-muted);
    font-size: var(--pulse-workspace-lede-size, .875rem);
    line-height: 1.45;
}

.audit-hero-actions[b-ufcr4zntzx] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.audit-scope[b-ufcr4zntzx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .85rem;
    padding: .8rem .9rem;
    border: 1px solid var(--audit-border);
    border-radius: var(--pulse-radius-md, .75rem);
    background: var(--audit-surface);
}

.audit-scope-copy[b-ufcr4zntzx] {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.audit-context-grid[b-ufcr4zntzx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pulse-workspace-gap, 12px);
}

.audit-context-grid .audit-scope[b-ufcr4zntzx] { margin-bottom: 0; min-width: 0; }

.audit-scope-icon[b-ufcr4zntzx] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--audit-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--audit-muted);
    background: var(--audit-surface-soft);
}

.audit-scope-icon svg[b-ufcr4zntzx] {
    width: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.audit-scope-copy h2[b-ufcr4zntzx] { margin: .08rem 0 .15rem; font-size: .9rem; }
.audit-scope-copy p[b-ufcr4zntzx] { max-width: 54rem; margin: 0; color: var(--audit-muted); font-size: .75rem; line-height: 1.45; }
.audit-scope-kicker[b-ufcr4zntzx] {
    color: var(--audit-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.audit-scope-facts[b-ufcr4zntzx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 1 auto;
    gap: .6rem;
    margin: 0;
}

.audit-scope-facts > div[b-ufcr4zntzx] {
    display: grid;
    gap: .15rem;
    min-width: 0;
    padding: .35rem .6rem;
    border-inline-start: 1px solid var(--audit-border);
}

.audit-scope-facts dt[b-ufcr4zntzx] {
    color: var(--audit-muted); font-size: .75rem; font-weight: 500;
}
.audit-scope-facts dd[b-ufcr4zntzx] {
    margin: 0; font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.audit-scope-facts dd.is-recording[b-ufcr4zntzx] { color: var(--pulse-success-text); }
.audit-scope-facts dd.is-disabled[b-ufcr4zntzx] { color: var(--pulse-danger-text); }

.audit-primary[b-ufcr4zntzx],
.audit-export[b-ufcr4zntzx] {
    display: inline-flex;
    min-height: var(--pulse-control-min-height, 44px);
    gap: .5rem;
    align-items: center;
    justify-content: center;
    padding: .55rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm, .5rem);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.audit-export[b-ufcr4zntzx] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.audit-export:hover:not(:disabled)[b-ufcr4zntzx] {
    border-color: var(--pulse-action-hover); background: var(--pulse-action-hover);
}

.audit-primary[b-ufcr4zntzx] {
    border-color: var(--audit-border);
    color: var(--audit-ink);
    background: var(--audit-surface);
}

.audit-primary:hover:not(:disabled)[b-ufcr4zntzx] { border-color: var(--audit-accent); color: var(--audit-accent); }
.audit-primary:disabled[b-ufcr4zntzx], .audit-export:disabled[b-ufcr4zntzx] { cursor: wait; opacity: .58; }

.audit-primary svg[b-ufcr4zntzx],
.audit-export svg[b-ufcr4zntzx] {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.audit-notice[b-ufcr4zntzx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: 0.75rem;
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: 0.8rem;
}

.audit-notice.error[b-ufcr4zntzx] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.audit-notice > span[b-ufcr4zntzx] {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    font-weight: 700;
}

.audit-notice p[b-ufcr4zntzx] { margin: 0; }
.audit-notice button[b-ufcr4zntzx] {
    min-width: 44px; min-height: 44px; border: 0; color: inherit; background: transparent; font-size: 1.2rem; cursor: pointer;
}

.audit-summary[b-ufcr4zntzx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.audit-summary article[b-ufcr4zntzx] {
    display: flex;
    min-width: 0;
    gap: .65rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid var(--audit-border);
    border-radius: var(--pulse-radius-md, .75rem);
    background: var(--audit-surface);
}


.summary-icon[b-ufcr4zntzx] {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--audit-muted);
    background: var(--audit-surface-soft);
}

.summary-icon.total[b-ufcr4zntzx] {
    color: var(--audit-muted); background: var(--audit-surface-soft);
}
.summary-icon.shown[b-ufcr4zntzx] {
    color: var(--audit-muted); background: var(--audit-surface-soft);
}
.summary-icon.failed[b-ufcr4zntzx] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.summary-icon.suppressed[b-ufcr4zntzx] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.summary-icon.pending[b-ufcr4zntzx] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.summary-icon.unknown[b-ufcr4zntzx] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.summary-icon.retention[b-ufcr4zntzx] {
    color: var(--audit-muted); background: var(--audit-surface-soft);
}

.summary-icon svg[b-ufcr4zntzx] {
    width: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.audit-summary article > div[b-ufcr4zntzx] { display: grid; min-width: 0; }
.audit-summary strong[b-ufcr4zntzx] {
    font-size: 1.2rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.audit-summary small[b-ufcr4zntzx] {
    margin-top: .15rem; color: var(--audit-muted); font-size: .75rem; overflow-wrap: anywhere;
}

.audit-panel[b-ufcr4zntzx] {
    margin-bottom: .85rem;
    border: 1px solid var(--audit-border);
    border-radius: var(--pulse-radius-lg, .875rem);
    background: var(--audit-surface);
}

.audit-toolbar[b-ufcr4zntzx] {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--audit-border);
}

.audit-toolbar h2[b-ufcr4zntzx] { margin: 0; color: var(--audit-ink); font-size: 1rem; font-weight: 600; white-space: nowrap; }

.audit-quick-filters[b-ufcr4zntzx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.audit-quick-filters button[b-ufcr4zntzx] {
    min-height: 44px;
    padding: .4rem .65rem;
    border: 1px solid var(--audit-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--audit-ink);
    background: var(--audit-surface);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.audit-quick-filters button:hover:not(:disabled)[b-ufcr4zntzx] { border-color: var(--audit-accent); color: var(--audit-accent); }
.audit-quick-filters button.failure[b-ufcr4zntzx] { color: var(--pulse-danger-text); }
.audit-quick-filters button.clear[b-ufcr4zntzx] { margin-left: auto; }
.audit-quick-filters button:disabled[b-ufcr4zntzx] { cursor: not-allowed; opacity: .48; }
.audit-quick-filters button:focus-visible[b-ufcr4zntzx] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.audit-actor-scope[b-ufcr4zntzx] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    flex: 0 0 100%;
    margin: 0;
    padding: .25rem .35rem .25rem .65rem;
    width: fit-content;
    max-width: max-content;
    border: 1px solid var(--pulse-info-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-info-strong);
    background: var(--pulse-info-soft);
    font-size: .8125rem;
    font-weight: 500;
}

.audit-actor-scope button[b-ufcr4zntzx] {
    min-height: 44px;
    padding: .35rem .6rem;
    border: 1px solid currentColor;
    border-radius: var(--pulse-radius-sm, .5rem);
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.audit-filters[b-ufcr4zntzx] {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem .75rem;
}

.audit-filters label[b-ufcr4zntzx] {
    display: grid; min-width: 0; gap: .3rem; align-content: start;
}
.audit-filters label > span[b-ufcr4zntzx] {
    color: var(--audit-muted); font-size: .875rem; font-weight: 500;
}

.audit-filters select[b-ufcr4zntzx],
.audit-filters input[b-ufcr4zntzx],
.audit-search input[b-ufcr4zntzx] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .5rem .65rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font: inherit;
    font-size: .875rem;
}

.audit-filters select:focus[b-ufcr4zntzx],
.audit-filters input:focus[b-ufcr4zntzx],
.audit-search input:focus[b-ufcr4zntzx] { border-color: var(--audit-accent); box-shadow: 0 0 0 0.18rem rgba(13, 148, 136, 0.1); }

.audit-page :is(button, a, input, select, textarea):focus-visible[b-ufcr4zntzx] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.audit-search[b-ufcr4zntzx] { display: block; flex: 1 1 16rem; min-width: 0; max-width: 32rem; }
.audit-search input[b-ufcr4zntzx] { width: 100%; min-width: 0; }

.audit-more-filters[b-ufcr4zntzx] { min-width: 0; }
.audit-more-filters > summary[b-ufcr4zntzx] { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .4rem .65rem; border: 1px solid var(--audit-border); border-radius: var(--pulse-radius-sm, .5rem); color: var(--audit-ink); background: var(--audit-surface); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.audit-more-filters > summary[b-ufcr4zntzx]::-webkit-details-marker { display: none; }
.audit-more-filters > summary[b-ufcr4zntzx]::after { content: "\25BE"; color: var(--audit-muted); }
.audit-more-filters[open][b-ufcr4zntzx] { flex: 1 1 100%; order: 10; }
.audit-more-filters[open] > .audit-filters[b-ufcr4zntzx] { margin-top: .5rem; }
.audit-result-count[b-ufcr4zntzx] { margin-left: auto; color: var(--audit-muted); font-size: .8125rem; white-space: nowrap; }

.audit-loading[b-ufcr4zntzx],
.audit-empty[b-ufcr4zntzx] {
    display: grid;
    gap: .5rem;
    justify-items: center;
    padding: 2rem 1rem;
    color: var(--audit-muted);
    font-size: .875rem;
    text-align: center;
}

.audit-loading span[b-ufcr4zntzx] {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--audit-border);
    border-top-color: var(--audit-accent);
    border-radius: 50%;
    animation: audit-spin-b-ufcr4zntzx 0.9s linear infinite;
}

@keyframes audit-spin-b-ufcr4zntzx { to { transform: rotate(360deg); } }

.audit-empty svg[b-ufcr4zntzx] { width: 2.4rem; fill: none; stroke: var(--audit-muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.audit-empty h3[b-ufcr4zntzx] { margin: 0; color: var(--audit-ink); font-size: 0.95rem; }
.audit-empty p[b-ufcr4zntzx] { margin: 0; }

/* One recovery affordance across the administration pages: the same outlined
   button, so retrying a failed read never outweighs the page's real action. */
.notice-retry[b-ufcr4zntzx] {
    min-height: 44px; padding: .4rem .7rem; border: 1px solid currentColor; border-radius: var(--pulse-radius-sm, .5rem); color: inherit; background: transparent; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.notice-retry:disabled[b-ufcr4zntzx] { cursor: default; opacity: .55; }
.audit-empty .notice-retry[b-ufcr4zntzx] { color: var(--audit-ink); }

/* A 500-row page of six similar-looking text columns loses its headings after a
   dozen rows. Sticky needs a scrollport, so the wrapper takes the height bound
   the sibling account table already uses. */
.audit-table-wrap[b-ufcr4zntzx] {
    overflow: auto; max-height: min(62vh, 48rem);
}

/* The wrapper is a focus stop so the record can be scrolled by keyboard. */
.audit-table-wrap:focus-visible[b-ufcr4zntzx] {
    border-radius: .5rem;
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.audit-table[b-ufcr4zntzx] {
    width: 100%; border-collapse: collapse; font-size: .8125rem;
}

.audit-table th[b-ufcr4zntzx] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--audit-border);
    box-shadow: 0 1px var(--audit-border);
    color: var(--audit-muted);
    background: var(--audit-surface-soft);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.audit-table td[b-ufcr4zntzx] {
    padding: 0.72rem 0.9rem;
    border-top: 1px solid var(--audit-border);
    color: var(--audit-ink);
    vertical-align: top;
}

.audit-table tbody tr:first-child td[b-ufcr4zntzx] { border-top: 0; }

.audit-when[b-ufcr4zntzx] { color: var(--audit-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-when time[b-ufcr4zntzx] { display: grid; gap: .08rem; }
.audit-when strong[b-ufcr4zntzx] { color: var(--audit-ink); font-size: .75rem; }
.audit-when small[b-ufcr4zntzx] { color: var(--audit-muted); font-size: .75rem; }

.audit-actor[b-ufcr4zntzx] { display: flex; min-width: 10rem; gap: 0.6rem; align-items: center; }
.actor-avatar[b-ufcr4zntzx] { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--pulse-accent-border); border-radius: 0.6rem; color: var(--pulse-accent); background: var(--pulse-accent-soft); font-size: 0.75rem; font-weight: 600; }
.audit-actor > span:last-child[b-ufcr4zntzx] { display: grid; min-width: 0; }
.audit-actor strong[b-ufcr4zntzx] {
    font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere;
}
.audit-actor small[b-ufcr4zntzx] {
    margin-top: .12rem; color: var(--audit-muted); font-size: .75rem; overflow-wrap: anywhere;
}

/* A readable label now, not the raw action key, so no monospace - but still a
   chip, or the column reads as unstyled bold text next to its styled siblings. */
.audit-action[b-ufcr4zntzx] { display: inline-block; padding: 0.14rem 0.4rem; border-radius: 0.4rem; color: var(--audit-ink); background: var(--audit-surface-soft); font-size: 0.75rem; font-weight: 600; }
.audit-category[b-ufcr4zntzx] { display: block; margin-top: 0.2rem; color: var(--audit-muted); font-size: 0.75rem; }

.audit-target[b-ufcr4zntzx] { min-width: 9rem; }
.audit-target strong[b-ufcr4zntzx] {
    display: block; max-width: 18rem; font-size: .8125rem; font-weight: 600; overflow-wrap: anywhere;
}
.audit-target small[b-ufcr4zntzx] { color: var(--audit-muted); font-size: 0.75rem; }

.audit-outcome[b-ufcr4zntzx] { display: inline-block; padding: 0.14rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.audit-outcome.ok[b-ufcr4zntzx] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.audit-outcome.bad[b-ufcr4zntzx] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.audit-outcome.warn[b-ufcr4zntzx] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.audit-outcome.pending[b-ufcr4zntzx] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.audit-outcome.unknown[b-ufcr4zntzx] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.audit-outcome.neutral[b-ufcr4zntzx] { color: var(--pulse-muted); background: var(--pulse-surface-inset); }

.audit-detail[b-ufcr4zntzx] {
    max-width: 28rem; color: var(--audit-muted); font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line;
}

.audit-truncated[b-ufcr4zntzx] {
    padding: 0.8rem 1.15rem;
    border-top: 1px solid var(--audit-border);
    color: var(--audit-muted);
    background: var(--audit-surface-soft);
    font-size: 0.75rem;
}

/* The dismiss glyph keeps its dedicated oversized treatment; every
   text-bearing action and filter remains at least 14px. */
.audit-page :is(a, button:not([aria-label]), input, select, label)[b-ufcr4zntzx],
.audit-page :is(a, button:not([aria-label]), label) :is(span, strong, small)[b-ufcr4zntzx] {
    font-size: .875rem;
}

.audit-hero > div:first-child[b-ufcr4zntzx] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; min-width: 0; flex: 1 1 auto; }
.audit-hero .audit-scope-facts[b-ufcr4zntzx] { width: min(100%, 42rem); margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--audit-border); }
.audit-hero .audit-scope-facts > div[b-ufcr4zntzx] { padding: 0; border: 0; }
.audit-custody .audit-scope-copy[b-ufcr4zntzx] { flex: 1 1 24rem; }
.audit-custody .audit-scope-facts[b-ufcr4zntzx] { flex: 1 1 23rem; max-width: 34rem; }
.audit-custody.needs-attention[b-ufcr4zntzx] { border-inline-start: 3px solid var(--pulse-warning-border); }
.audit-custody.needs-attention h2[b-ufcr4zntzx] { color: var(--pulse-warning-text); }
.audit-scope-copy p[role="alert"][b-ufcr4zntzx] { margin-top: .4rem; color: var(--pulse-danger-text); }

/* Extra page width serves the filters and evidence facts. Prose stays in
   readable groups, and the five advanced filters need only one desktop row. */
@container audit-page (min-width: 64rem) {
    .audit-filters[b-ufcr4zntzx] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

@container audit-page (min-width: 72rem) {
    .audit-context-grid[b-ufcr4zntzx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-context-grid .audit-scope[b-ufcr4zntzx] { align-items: stretch; flex-direction: column; }
    .audit-context-grid .audit-scope-facts[b-ufcr4zntzx] { flex-basis: auto; width: 100%; }
}

@container audit-page (min-width: 96rem) {
    .audit-summary[b-ufcr4zntzx] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .audit-page[b-ufcr4zntzx] { margin: 0; padding: .75rem .625rem 1.75rem; border-radius: var(--pulse-radius-lg, 1.125rem); }
    .audit-breadcrumbs a[b-ufcr4zntzx] { min-height: var(--pulse-control-min-height, 44px); }
    .audit-hero[b-ufcr4zntzx] { flex-wrap: wrap; }
    .audit-summary[b-ufcr4zntzx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-scope[b-ufcr4zntzx] { align-items: flex-start; flex-direction: column; }
    .audit-custody .audit-scope-copy[b-ufcr4zntzx], .audit-custody .audit-scope-facts[b-ufcr4zntzx] { flex-basis: auto; }
    .audit-hero > div:first-child[b-ufcr4zntzx] { width: 100%; }
    .audit-scope-facts[b-ufcr4zntzx] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .audit-scope-facts > div[b-ufcr4zntzx] { border-inline-start: 0; border-top: 1px solid var(--audit-border); min-width: 0; padding-inline: 0; }
}

/* Six columns compress long evidence at tablet widths. Use the existing cards
   when the page itself is narrow, including when the desktop sidebar is open. */
@container audit-page (max-width: 900px) {
    .audit-table-wrap[b-ufcr4zntzx] { contain: none; max-height: none; overflow: visible; padding: .7rem; }
    .audit-table[b-ufcr4zntzx], .audit-table tbody[b-ufcr4zntzx], .audit-table tr[b-ufcr4zntzx], .audit-table td[b-ufcr4zntzx] { display: block; width: 100%; }
    .audit-table thead[b-ufcr4zntzx] { display: none; }
    .audit-table tbody[b-ufcr4zntzx] { display: grid; gap: .65rem; }
    .audit-table tr[b-ufcr4zntzx] { border: 1px solid var(--audit-border); border-radius: var(--pulse-radius-md, .75rem); background: var(--audit-surface); }
    .audit-table td[b-ufcr4zntzx] { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .65rem; max-width: none; padding: .62rem .72rem; border-top: 1px solid var(--audit-border); }
    .audit-table td:first-child[b-ufcr4zntzx] { border-top: 0; }
    .audit-table td > small[b-ufcr4zntzx] { grid-column: 2; }
    .audit-table td[b-ufcr4zntzx]::before { color: var(--audit-muted); content: attr(data-label); font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
    .audit-actor[b-ufcr4zntzx], .audit-target[b-ufcr4zntzx] { min-width: 0; }
    .audit-target strong[b-ufcr4zntzx], .audit-detail[b-ufcr4zntzx] { max-width: none; }
}

@media (max-width: 720px) {
    .audit-hero-actions[b-ufcr4zntzx] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .audit-primary[b-ufcr4zntzx], .audit-export[b-ufcr4zntzx] { width: 100%; }
    .audit-summary[b-ufcr4zntzx] { gap: .55rem; }
    .audit-summary article[b-ufcr4zntzx] { padding: .75rem; }
    .audit-filters[b-ufcr4zntzx] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-filters label[b-ufcr4zntzx], .audit-filters select[b-ufcr4zntzx], .audit-filters input[b-ufcr4zntzx], .audit-search input[b-ufcr4zntzx] { min-width: 0; width: 100%; }
    .audit-search[b-ufcr4zntzx] { flex: 1 1 100%; }
    .audit-quick-filters button.clear[b-ufcr4zntzx] { margin-left: 0; }
}

@media (max-width: 480px) {
    .audit-summary[b-ufcr4zntzx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .audit-scope-facts[b-ufcr4zntzx] { gap: .5rem; }
    .audit-filters[b-ufcr4zntzx] { gap: .6rem; }
    .audit-table td[b-ufcr4zntzx] { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .55rem .6rem; }
    .audit-summary article[b-ufcr4zntzx] { align-items: flex-start; gap: .5rem; padding: .65rem; }
    .summary-icon[b-ufcr4zntzx] { flex-basis: 1.6rem; width: 1.6rem; height: 1.6rem; }
    .summary-icon svg[b-ufcr4zntzx] { width: 1.1rem; }
    .audit-when[b-ufcr4zntzx] { white-space: normal; }
}

@media (max-width: 720px), (any-pointer: coarse) {
    .audit-page :is(a, button, input, select)[b-ufcr4zntzx] { min-height: 44px; }
    .audit-page :is(input, select)[b-ufcr4zntzx] { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .audit-loading span[b-ufcr4zntzx] { animation: none; }
}
/* /Components/Pages/Automations.razor.rz.scp.css */
.automation-page[b-o1q7rhdedl] {
    --automation-violet: var(--pulse-accent, #0f766e);
    --automation-cyan: var(--pulse-accent, #0f766e);
    --automation-green: var(--pulse-success-text, #047857);
    --automation-amber: var(--pulse-warning-text, #9a3412);
    --automation-red: var(--pulse-danger-text, #b91c1c);
    --automation-ink: var(--pulse-text, #17262d);
    --automation-muted: var(--pulse-muted, #687980);
    --automation-border: var(--pulse-border, #dbe5e5);
    --automation-surface: var(--pulse-surface, #fff);
    --automation-soft: var(--pulse-surface-soft, #f3f7f7);
    box-sizing: border-box;
    color: var(--automation-ink);
    display: grid;
    line-height: 1.45;
    min-width: 0;
    gap: var(--pulse-workspace-gap, 20px);
    margin: 0;
    max-width: none;
    width: 100%;
    padding: var(--pulse-workspace-pad-top, 22px)
        var(--pulse-workspace-pad-x, 32px)
        var(--pulse-workspace-pad-bottom, 44px);
}

.automation-breadcrumbs[b-o1q7rhdedl] {
    align-items: center;
    color: var(--automation-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .875rem;
    gap: 4px 8px;
}

.automation-breadcrumbs a[b-o1q7rhdedl] { align-items: center; color: inherit; display: inline-flex; min-height: var(--pulse-control-min-height, 44px); padding-inline: 4px; text-decoration: none; }
.automation-breadcrumbs a:hover[b-o1q7rhdedl] { color: var(--automation-violet); }

.automation-hero[b-o1q7rhdedl] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-xl, 16px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    padding: calc(var(--pulse-workspace-hero-pad-y, 14px) / 4) 0;
}

.automation-hero > div:first-child[b-o1q7rhdedl] { align-items: baseline; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.automation-hero h1[b-o1q7rhdedl] { font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.automation-kicker[b-o1q7rhdedl] { color: var(--automation-muted); font-size: max(.75rem, var(--pulse-workspace-eyebrow-size, .75rem)); font-weight: 600; letter-spacing: 0; text-transform: none; }
.hero-actions[b-o1q7rhdedl] { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; min-width: 0; }
.engine-state[b-o1q7rhdedl] { align-items: center; display: flex; gap: 9px; min-width: 0; padding: 2px 0; }
.engine-state > span:last-child[b-o1q7rhdedl] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 .4rem; }
.engine-state strong[b-o1q7rhdedl] { font-size: .75rem; line-height: 1.3; }
.engine-state small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: var(--pulse-workspace-lede-size, .82rem); line-height: 1.45; overflow-wrap: anywhere; }
.engine-state-dot[b-o1q7rhdedl] { background: var(--automation-green); border-radius: 50%; flex: 0 0 8px; height: 8px; width: 8px; }
.engine-state.loading .engine-state-dot[b-o1q7rhdedl] { background: var(--automation-violet); }
.engine-state.paused .engine-state-dot[b-o1q7rhdedl] { background: var(--automation-amber); }

.primary-action[b-o1q7rhdedl],
.secondary-action[b-o1q7rhdedl],
.danger-action[b-o1q7rhdedl],
.simulation-inputs button[b-o1q7rhdedl],
.editor-actions button[b-o1q7rhdedl],
.rule-index header button[b-o1q7rhdedl] {
    align-items: center;
    border-radius: var(--pulse-radius-sm, 8px);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 9px 16px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background-color .16s ease, border-color .16s ease;
}

.primary-action[b-o1q7rhdedl] {
    background: var(--pulse-action, #0f766e);
    border: 1px solid var(--pulse-action, #0f766e);
    color: var(--pulse-on-action, #fff);
}
.primary-action:hover[b-o1q7rhdedl] { background: var(--pulse-action-hover, #115e59); border-color: var(--pulse-action-hover, #115e59); }

.secondary-action[b-o1q7rhdedl],
.simulation-inputs button[b-o1q7rhdedl],
.rule-index header button[b-o1q7rhdedl] {
    background: var(--automation-surface);
    border: 1px solid var(--automation-border);
    color: var(--automation-ink);
}

.danger-action[b-o1q7rhdedl] {
    background: var(--automation-surface);
    border: 1px solid var(--pulse-danger-border, #fecdd3);
    color: var(--pulse-danger-text, #b91c1c);
}

.secondary-action:hover[b-o1q7rhdedl],
.simulation-inputs button:hover[b-o1q7rhdedl],
.rule-index header button:hover[b-o1q7rhdedl] { background: var(--automation-soft); border-color: var(--pulse-border-strong, #cbd5e1); }
button:disabled[b-o1q7rhdedl] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); transform: none !important; }

.automation-notice[b-o1q7rhdedl] {
    align-items: center;
    border: 1px solid;
    border-radius: var(--pulse-radius-md, 13px);
    display: grid;
    font-size: .75rem;
    gap: 10px;
    grid-template-columns: auto 1fr auto;
    padding: 11px 14px;
}

.automation-notice p[b-o1q7rhdedl] { margin: 0; }
.automation-notice button[b-o1q7rhdedl] { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.25rem; min-height: 44px; min-width: 44px; }
.automation-notice.error[b-o1q7rhdedl] { background: var(--pulse-danger-soft, #fff1f1); border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); }
.automation-notice.warning[b-o1q7rhdedl] { background: var(--pulse-warning-soft, #fff7df); border-color: var(--pulse-warning-border, #f0d9a4); color: var(--pulse-warning-text, #855d12); }
.automation-notice.success[b-o1q7rhdedl] { background: var(--pulse-success-soft, #edf9f3); border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); }
.notice-retry[b-o1q7rhdedl] { background: transparent; border: 1px solid currentColor; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); padding: 5px 10px; }

.automation-metrics[b-o1q7rhdedl] {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.automation-metrics article[b-o1q7rhdedl],
.automation-metrics .metric-tile[b-o1q7rhdedl] {
    align-items: center;
    background: var(--automation-surface);
    border: 1px solid var(--automation-border);
    border-radius: var(--pulse-radius-md, 12px);
    display: flex;
    gap: 10px;
    min-height: 68px;
    padding: 10px 12px;
}

.automation-metrics .metric-tile[b-o1q7rhdedl] {
    color: var(--automation-ink);
    cursor: pointer;
    font: inherit;
    min-width: 0;
    text-align: left;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease;
    width: 100%;
}

.automation-metrics .metric-tile:hover[b-o1q7rhdedl] { border-color: color-mix(in srgb, var(--automation-violet) 42%, var(--automation-border)); }
.automation-metrics .metric-tile.active[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-violet) 7%, var(--automation-surface)); border-color: var(--automation-violet); }
.automation-metrics em[b-o1q7rhdedl] { color: var(--automation-violet); font-size: .75rem; font-style: normal; font-weight: 700; }

.metric-icon[b-o1q7rhdedl] {
    align-items: center;
    background: color-mix(in srgb, var(--automation-violet) 10%, var(--automation-soft));
    border-radius: 10px;
    color: var(--automation-violet);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    font-style: normal;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    letter-spacing: .04em;
    line-height: 0;
    width: 36px;
}

.metric-icon.enabled[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-green) 11%, var(--automation-soft)); color: var(--automation-green); }
.metric-icon.paused[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 11%, var(--automation-soft)); color: var(--automation-amber); }
.metric-icon.suggest[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 12%, var(--automation-soft)); color: var(--automation-amber); }
.metric-icon.executed[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-cyan) 11%, var(--automation-soft)); color: var(--automation-cyan); }
.metric-icon.failed[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-red) 11%, var(--automation-soft)); color: var(--automation-red); }
.metric-icon.is-zero[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-muted) 10%, var(--automation-soft)); color: var(--automation-muted); }
.automation-metrics article div[b-o1q7rhdedl],
.automation-metrics .metric-tile div[b-o1q7rhdedl] { display: grid; gap: 1px; min-width: 0; }
.automation-metrics strong[b-o1q7rhdedl] { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.automation-metrics small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; }

.safety-contract[b-o1q7rhdedl] {
    background: var(--automation-soft);
    border: 1px solid var(--automation-border);
    border-radius: var(--pulse-radius-md, 12px);
}

.safety-contract summary[b-o1q7rhdedl] { cursor: pointer; font-size: .875rem; font-weight: 600; line-height: 1.45; min-height: var(--pulse-control-min-height, 44px); padding: 11px 14px; }
.safety-contract summary:focus-visible[b-o1q7rhdedl] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.safety-contract ul[b-o1q7rhdedl] { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 14px 14px; }
.safety-contract li[b-o1q7rhdedl] { border-left: 1px solid var(--automation-border); display: grid; gap: 4px; padding-left: 10px; }
.safety-contract li strong[b-o1q7rhdedl] { font-size: .75rem; }
.safety-contract li span[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; line-height: 1.35; }

.automation-workbench[b-o1q7rhdedl] {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: clamp(248px, 22%, 320px) minmax(0, 1fr);
}

.rule-index[b-o1q7rhdedl],
.rule-editor[b-o1q7rhdedl],
.execution-ledger[b-o1q7rhdedl] {
    background: var(--automation-surface);
    border: 1px solid var(--automation-border);
    border-radius: var(--pulse-radius-lg, 14px);
    min-width: 0;
}

.rule-index[b-o1q7rhdedl] { max-height: calc(100vh - 110px); position: sticky; top: var(--pulse-sticky-top); }
.rule-index > header[b-o1q7rhdedl],
.rule-editor > header[b-o1q7rhdedl],
.execution-ledger > header[b-o1q7rhdedl] {
    align-items: center;
    border-bottom: 1px solid var(--automation-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 15px 17px;
}

.rule-index h2[b-o1q7rhdedl],
.rule-editor h2[b-o1q7rhdedl],
.execution-ledger h2[b-o1q7rhdedl] { font-size: 1.125rem; line-height: 1.3; margin: 3px 0 0; overflow-wrap: anywhere; }
.rule-index > header > div[b-o1q7rhdedl], .rule-editor > header > div[b-o1q7rhdedl], .execution-ledger > header > div[b-o1q7rhdedl] { min-width: 0; }
.rule-index header button[b-o1q7rhdedl] { border-radius: 9px; min-height: var(--pulse-control-min-height, 44px); padding: 6px 11px; }
.rule-list[b-o1q7rhdedl] { max-height: calc(100vh - 205px); overflow: auto; padding: 8px; }

.rule-row[b-o1q7rhdedl] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 9px;
    grid-template-columns: 7px minmax(0, 1fr);
    margin-bottom: 4px;
    padding: 11px;
    text-align: left;
    width: 100%;
}

.rule-row:hover[b-o1q7rhdedl] { background: var(--automation-soft); }
.rule-row.selected[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-violet) 8%, var(--automation-surface)); border-color: color-mix(in srgb, var(--automation-violet) 35%, var(--automation-border)); }
.rule-state[b-o1q7rhdedl] { background: var(--automation-muted); border-radius: 99px; height: 7px; margin-top: 5px; width: 7px; }
.rule-state.enabled[b-o1q7rhdedl] { background: var(--automation-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--automation-green) 12%, transparent); }
.rule-row > span:last-child[b-o1q7rhdedl] { display: grid; gap: 5px; min-width: 0; }
.rule-top[b-o1q7rhdedl] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 7px; justify-content: space-between; }
.rule-top b[b-o1q7rhdedl] { font-size: .875rem; overflow-wrap: anywhere; }
.rule-row small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; line-height: 1.4; }
.rule-outcome[b-o1q7rhdedl] { align-items: center; color: var(--automation-muted); display: flex; flex-wrap: wrap; font-size: .75rem; font-weight: 600; gap: 6px; }

.mode-chip[b-o1q7rhdedl],
.execution-state[b-o1q7rhdedl] {
    background: color-mix(in srgb, var(--automation-violet) 10%, var(--automation-soft));
    border-radius: 99px;
    color: var(--automation-violet);
    display: inline-flex;
    font-size: .75rem;
    font-style: normal;
    font-weight: 700;
    padding: 4px 7px;
    white-space: nowrap;
}

.mode-chip.automatic[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-cyan) 11%, var(--automation-soft)); color: var(--automation-cyan); }

.rule-editor[b-o1q7rhdedl] { container: automation-editor / inline-size; }
.rule-editor > header[b-o1q7rhdedl] { padding: 14px 16px; }
.rule-enable[b-o1q7rhdedl] { align-items: center; cursor: pointer; display: flex; gap: 9px; min-height: var(--pulse-control-min-height, 44px); min-width: 0; }
.rule-enable input[b-o1q7rhdedl] { accent-color: var(--automation-green); height: 18px; width: 18px; }
.rule-enable span[b-o1q7rhdedl] { display: grid; gap: 1px; }
.rule-enable strong[b-o1q7rhdedl] { font-size: .875rem; }
.rule-enable small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; }

.rule-flow[b-o1q7rhdedl] { display: grid; min-width: 0; }
.editor-section[b-o1q7rhdedl] { border-bottom: 1px solid var(--automation-border); min-width: 0; padding: 14px 16px; }
.identity-section[b-o1q7rhdedl],
.condition-grid[b-o1q7rhdedl],
.outcome-fields[b-o1q7rhdedl] { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.identity-section label:last-child[b-o1q7rhdedl] { grid-column: span 1; }

.editor-section label[b-o1q7rhdedl],
.simulation-inputs label[b-o1q7rhdedl] { color: var(--automation-muted); display: grid; font-size: .75rem; font-weight: 700; gap: 6px; }
.editor-section input:not([type="checkbox"]):not([type="radio"])[b-o1q7rhdedl],
.editor-section select[b-o1q7rhdedl],
.simulation-inputs input[b-o1q7rhdedl] {
    background: var(--automation-surface);
    border: 1px solid var(--automation-border);
    border-radius: 9px;
    box-sizing: border-box;
    color: var(--automation-ink);
    font: inherit;
    font-size: .875rem;
    min-height: var(--pulse-control-min-height, 44px);
    min-width: 0;
    padding: 8px 10px;
    width: 100%;
}

.editor-section input:focus[b-o1q7rhdedl],
.editor-section select:focus[b-o1q7rhdedl],
.simulation-inputs input:focus[b-o1q7rhdedl] { border-color: var(--automation-violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--automation-violet) 13%, transparent); outline: none; }
.automation-page :is(button, a, input, select, textarea):focus-visible[b-o1q7rhdedl] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.editor-section label small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; font-weight: 500; }
.editor-section label .asset-picker-error[b-o1q7rhdedl] { color: var(--automation-red); font-size: .75rem; font-weight: 700; }
.asset-picker input[aria-invalid="true"][b-o1q7rhdedl] { border-color: color-mix(in srgb,var(--automation-red) 65%,var(--automation-border)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--automation-red) 12%,transparent); }
.condition-grid .wide[b-o1q7rhdedl],
.outcome-fields .wide[b-o1q7rhdedl] { grid-column: 1 / -1; }

.section-heading[b-o1q7rhdedl] { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; }
.section-number[b-o1q7rhdedl] { align-items: center; background: color-mix(in srgb, var(--automation-violet) 11%, var(--automation-soft)); border-radius: 9px; color: var(--automation-violet); display: flex; font-size: .75rem; font-weight: 700; height: 31px; justify-content: center; width: 31px; }
.section-heading h3[b-o1q7rhdedl] { font-size: .875rem; margin: 0; }
.section-heading p[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; margin: 2px 0 0; }

.outcome-grid[b-o1q7rhdedl] { display: grid; gap: 15px; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.5fr); }
.outcome-grid fieldset[b-o1q7rhdedl] { border: 0; display: grid; gap: 8px; margin: 0; min-width: 0; padding: 0; }
.outcome-grid legend[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; font-weight: 700; margin-bottom: 6px; }
.choice-card[b-o1q7rhdedl] { align-items: center; background: var(--automation-soft); border: 1px solid transparent; border-radius: 11px; cursor: pointer; display: flex !important; gap: 9px !important; padding: 11px; }
.choice-card.selected[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-violet) 8%, var(--automation-surface)); border-color: color-mix(in srgb, var(--automation-violet) 42%, var(--automation-border)); }
.choice-card input[b-o1q7rhdedl] { accent-color: var(--automation-violet); }
.choice-card > span[b-o1q7rhdedl] { display: grid; gap: 2px; }
.choice-card strong[b-o1q7rhdedl] { color: var(--automation-ink); font-size: .875rem; }
.choice-card small[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; font-weight: 500; }
.number-unit[b-o1q7rhdedl] { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.number-unit input[b-o1q7rhdedl] { border-radius: 9px 0 0 9px !important; }
.number-unit span[b-o1q7rhdedl] { align-items: center; background: var(--automation-soft); border: 1px solid var(--automation-border); border-left: 0; border-radius: 0 9px 9px 0; display: flex; font-size: .75rem; padding: 0 9px; }
.integration-toggle[b-o1q7rhdedl] { align-items: center; background: color-mix(in srgb, var(--automation-cyan) 6%, var(--automation-soft)); border-radius: 10px; display: flex !important; gap: 9px !important; grid-column: 1 / -1; padding: 10px; }
.integration-toggle input[b-o1q7rhdedl] { accent-color: var(--automation-cyan); height: 17px; width: 17px; }
.integration-toggle > span[b-o1q7rhdedl] { display: grid; gap: 1px; }
.integration-toggle strong[b-o1q7rhdedl] { color: var(--automation-ink); font-size: .875rem; }

.simulation-lab[b-o1q7rhdedl] {
    align-items: end;
    background: var(--automation-soft);
    border-bottom: 1px solid var(--automation-border);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
    padding: 14px 16px;
}

.simulation-lab h3[b-o1q7rhdedl] { font-size: .9375rem; margin: 3px 0 4px; }
.simulation-lab > div > p[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; line-height: 1.45; margin: 0; }
.simulation-inputs[b-o1q7rhdedl] { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(90px, 1fr) minmax(80px, .7fr) auto; }
.simulation-inputs button[b-o1q7rhdedl] { min-height: var(--pulse-control-min-height, 44px); padding-inline: 13px; }
.simulation-result[b-o1q7rhdedl] { align-items: center; border: 1px solid; border-radius: 11px; display: flex; gap: 11px; grid-column: 1 / -1; padding: 11px; }
.simulation-result.match[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-green) 8%, var(--automation-surface)); border-color: color-mix(in srgb, var(--automation-green) 32%, var(--automation-border)); }
.simulation-result.no-match[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 8%, var(--automation-surface)); border-color: color-mix(in srgb, var(--automation-amber) 32%, var(--automation-border)); }
.result-mark[b-o1q7rhdedl] { border-radius: 6px; color: var(--automation-green); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.no-match .result-mark[b-o1q7rhdedl] { color: var(--automation-amber); }
.simulation-result strong[b-o1q7rhdedl] { font-size: .75rem; }
.simulation-result p[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; margin: 2px 0 0; }

.editor-actions[b-o1q7rhdedl] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 16px; }
.execution-ledger > header p[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; margin: 4px 0 0; }
.ledger-filter-clear[b-o1q7rhdedl] { align-items: center; background: var(--automation-surface); border: 1px solid color-mix(in srgb, var(--automation-violet) 40%, var(--automation-border)); border-radius: 9px; color: var(--automation-violet); cursor: pointer; display: inline-flex; flex: 0 1 auto; font: inherit; font-size: .75rem; font-weight: 600; justify-content: center; max-width: 100%; min-height: var(--pulse-control-min-height, 44px); overflow-wrap: anywhere; padding: 6px 12px; }
.ledger-filter-clear:hover[b-o1q7rhdedl] { border-color: var(--automation-violet); }
.automation-empty .secondary-action[b-o1q7rhdedl] { margin-top: 10px; }
.execution-table-wrap[b-o1q7rhdedl] { border-radius: 0 0 var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px); overflow-x: auto; }
/* The wrapper is a focus stop so the ledger can be scrolled by keyboard; the
   ring has to be visible for the operator who put it there. */
.execution-table-wrap:focus-visible[b-o1q7rhdedl] { border-radius: 10px; outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.execution-ledger table[b-o1q7rhdedl] { border-collapse: collapse; min-width: 760px; width: 100%; }
.execution-ledger th[b-o1q7rhdedl] { background: var(--automation-soft); color: var(--automation-muted); font-size: .75rem; font-weight: 600; padding: 10px 14px; text-align: left; }
.execution-ledger td[b-o1q7rhdedl] { border-top: 1px solid var(--automation-border); font-size: .75rem; padding: 11px 14px; vertical-align: top; }
.execution-ledger td strong[b-o1q7rhdedl] { display: block; font-weight: 600; }
.execution-ledger td small[b-o1q7rhdedl] { color: var(--automation-muted); display: block; font-size: .75rem; margin-top: 2px; }
.execution-ledger a[b-o1q7rhdedl] { align-items: center; color: var(--automation-violet); display: inline-flex; font-size: .875rem; font-weight: 600; min-height: var(--pulse-control-min-height, 44px); text-decoration: none; }
.execution-state.executed[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-green) 10%, var(--automation-soft)); color: var(--automation-green); }
.execution-state.suggested[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 12%, var(--automation-soft)); color: var(--automation-amber); }
.execution-state.failed[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-red) 10%, var(--automation-soft)); color: var(--automation-red); }
.execution-state.deadlettered[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-red) 18%, var(--automation-soft)); color: var(--automation-red); outline: 1px solid currentColor; }
.execution-state.queued[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 12%, var(--automation-soft)); color: var(--automation-amber); }
.execution-state.suppressed[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-muted) 14%, var(--automation-soft)); color: var(--automation-muted); }
/* Skipped and Processing used to fall through to the base chip rule, which paints
   them the same violet the Mode column gives "Suggest" - two columns' semantics
   reading as one colour on rows real traffic produces (dismissed suggestions,
   suppressed signals, relay-echo refusals). Neither outcome is a success or a
   failure, so they take the neutral family instead of a new accent: in dark theme
   --automation-violet resolves to blue and --automation-cyan to sky, so an
   "in progress" blue would rebuild the very collision with the Mode chips these
   rules exist to remove. Skipped stays recessive, Processing carries the ink. */
.execution-state.skipped[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-muted) 10%, var(--automation-soft)); color: color-mix(in srgb, var(--automation-muted) 62%, var(--automation-ink)); }
.execution-state.processing[b-o1q7rhdedl] { align-items: center; background: color-mix(in srgb, var(--automation-ink) 8%, var(--automation-soft)); color: var(--automation-ink); gap: 5px; }
/* The dot, not the colour, is what tells Processing apart from Skipped, so it has
   to survive motion being switched off - see the reduced-motion block below. */
.execution-state.processing[b-o1q7rhdedl]::before { animation: automation-processing-pulse-b-o1q7rhdedl 1.4s ease-in-out infinite; background: currentColor; border-radius: 99px; content: ""; flex: 0 0 auto; height: 6px; width: 6px; }

@keyframes automation-processing-pulse-b-o1q7rhdedl {
    0%, 100% { opacity: .4; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1); }
}

.automation-empty[b-o1q7rhdedl] { color: var(--automation-muted); display: grid; gap: 5px; justify-items: center; padding: 24px 16px; text-align: center; }
.automation-empty strong[b-o1q7rhdedl] { color: var(--automation-ink); }
.automation-empty p[b-o1q7rhdedl] { font-size: .75rem; margin: 0; max-width: 300px; }
.empty-action[b-o1q7rhdedl] { align-items: center; background: var(--automation-surface); border: 1px solid var(--automation-border); border-radius: 10px; color: var(--automation-violet); display: inline-flex; font: inherit; font-size: .875rem; font-weight: 700; justify-content: center; margin-top: 7px; min-height: var(--pulse-control-min-height, 44px); padding: 8px 13px; text-decoration: none; }
.empty-action:hover[b-o1q7rhdedl] { border-color: var(--automation-violet); }

.automation-conflict[b-o1q7rhdedl],
.final-send-confirmation[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 9%, var(--automation-surface)); border: 1px solid color-mix(in srgb, var(--automation-amber) 58%, var(--automation-border)); border-radius: 14px; display: grid; gap: 12px; margin: 16px; padding: 16px; }
.conflict-compare[b-o1q7rhdedl] { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conflict-compare article[b-o1q7rhdedl] { background: var(--automation-surface); border: 1px solid var(--automation-border); border-radius: 10px; display: grid; gap: 4px; padding: 12px; }
.conflict-compare small[b-o1q7rhdedl],
.immutable-authority p[b-o1q7rhdedl],
.final-send-confirmation p[b-o1q7rhdedl] { color: var(--automation-muted); margin: 0; }
.conflict-actions[b-o1q7rhdedl] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.immutable-authority[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-violet) 7%, var(--automation-surface)); border: 1px solid color-mix(in srgb, var(--automation-violet) 35%, var(--automation-border)); border-radius: 12px; display: grid; gap: 9px; grid-column: 1 / -1; padding: 13px; }
.immutable-authority dl[b-o1q7rhdedl],
.final-send-confirmation dl[b-o1q7rhdedl] { display: grid; gap: 8px; margin: 0; }
.immutable-authority dl div[b-o1q7rhdedl],
.final-send-confirmation dl div[b-o1q7rhdedl] { display: grid; gap: 4px; grid-template-columns: minmax(120px, .35fr) 1fr; }
.immutable-authority dt[b-o1q7rhdedl],
.final-send-confirmation dt[b-o1q7rhdedl] { color: var(--automation-muted); font-size: .75rem; font-weight: 700; }
.immutable-authority dd[b-o1q7rhdedl],
.final-send-confirmation dd[b-o1q7rhdedl] { margin: 0; overflow-wrap: anywhere; }
.simulation-invalidated[b-o1q7rhdedl] { background: color-mix(in srgb, var(--automation-amber) 10%, var(--automation-surface)); border: 1px solid color-mix(in srgb, var(--automation-amber) 48%, var(--automation-border)); border-radius: 11px; padding: 12px; }
.simulation-invalidated p[b-o1q7rhdedl] { margin: 4px 0 0; }
.execution-table-wrap td p[b-o1q7rhdedl] { margin: 4px 0; max-width: 360px; }
.execution-table-wrap td strong[b-o1q7rhdedl] { overflow-wrap: anywhere; }

@container automation-editor (min-width: 680px) {
    .condition-grid[b-o1q7rhdedl] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container automation-editor (min-width: 920px) {
    .rule-flow[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .condition-section[b-o1q7rhdedl] { border-inline-end: 1px solid var(--automation-border); }
    .condition-grid[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outcome-grid[b-o1q7rhdedl] { grid-template-columns: 1fr; gap: 12px; }
    .outcome-grid fieldset[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outcome-grid legend[b-o1q7rhdedl] { grid-column: 1 / -1; }
}

@media (max-width: 1120px) {
    .automation-workbench[b-o1q7rhdedl] { grid-template-columns: minmax(235px, .7fr) minmax(0, 1.5fr); }
    .outcome-grid[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .outcome-grid fieldset[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outcome-grid legend[b-o1q7rhdedl] { grid-column: 1 / -1; }
    .simulation-lab[b-o1q7rhdedl] { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .automation-metrics[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .automation-workbench[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .rule-index[b-o1q7rhdedl] { max-height: none; position: static; }
    .rule-list[b-o1q7rhdedl] { display: flex; max-height: none; overflow-x: auto; padding-bottom: 11px; scroll-snap-type: x mandatory; }
    .rule-row[b-o1q7rhdedl] { flex: 0 0 min(74vw, 290px); margin: 0 5px 0 0; scroll-snap-align: start; }
}

@media (max-width: 640px) {
    .automation-page[b-o1q7rhdedl] { gap: var(--pulse-workspace-gap, 13px); padding: 10px 10px 28px; }
    .automation-breadcrumbs[b-o1q7rhdedl] { display: none; }
    .automation-hero[b-o1q7rhdedl] { gap: 8px 12px; padding: 0; }
    .automation-hero > div:first-child[b-o1q7rhdedl] { flex-basis: auto; }
    .hero-actions[b-o1q7rhdedl] { display: contents; }
    .engine-state[b-o1q7rhdedl] { flex: 0 1 auto; }
    .engine-state small[b-o1q7rhdedl] { display: none; }
    .automation-hero .primary-action[b-o1q7rhdedl] { margin-left: auto; }
    .automation-metrics[b-o1q7rhdedl] { gap: 7px; }
    .automation-metrics article[b-o1q7rhdedl],
    .automation-metrics .metric-tile[b-o1q7rhdedl] { min-height: 66px; padding: 10px; }
    .automation-metrics strong[b-o1q7rhdedl] { font-size: 1.25rem; }
    .safety-contract ul[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .rule-index[b-o1q7rhdedl],
    .rule-editor[b-o1q7rhdedl],
    .execution-ledger[b-o1q7rhdedl] { border-radius: 14px; }
    .rule-editor > header[b-o1q7rhdedl] { align-items: flex-start; flex-direction: column; }
    .rule-enable[b-o1q7rhdedl] { width: 100%; }
    .identity-section[b-o1q7rhdedl],
    .condition-grid[b-o1q7rhdedl],
    .outcome-fields[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .identity-section > *[b-o1q7rhdedl],
    .condition-grid > *[b-o1q7rhdedl],
    .outcome-fields > *[b-o1q7rhdedl] { grid-column: 1 !important; }
    .outcome-grid fieldset[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .editor-section[b-o1q7rhdedl],
    .simulation-lab[b-o1q7rhdedl] { padding: 15px 14px; }
    .simulation-inputs[b-o1q7rhdedl] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .simulation-inputs button[b-o1q7rhdedl] { grid-column: 1 / -1; }
    .editor-actions[b-o1q7rhdedl] { display: grid; grid-template-columns: 1fr 1.35fr; padding: 13px 14px; }
    .conflict-compare[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .immutable-authority dl div[b-o1q7rhdedl],
    .final-send-confirmation dl div[b-o1q7rhdedl] { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .metric-icon[b-o1q7rhdedl] { display: none; }
    .simulation-inputs[b-o1q7rhdedl] { grid-template-columns: 1fr; }
    .simulation-inputs > *[b-o1q7rhdedl] { grid-column: 1 !important; }
}

@media (pointer: coarse) {
    .automation-breadcrumbs a[b-o1q7rhdedl] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .automation-page *[b-o1q7rhdedl], .automation-page *[b-o1q7rhdedl]::before, .automation-page *[b-o1q7rhdedl]::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .execution-state.processing[b-o1q7rhdedl]::before { animation: none; opacity: 1; }
}
/* /Components/Pages/AutroSafeBridge.razor.rz.scp.css */
.as-page[b-unj7vedp2x] {
    --as-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: autrosafe-workspace / inline-size;
    color: var(--pulse-text);
    line-height: 1.45;
    min-width: 0;
}

.as-page[aria-busy="true"][b-unj7vedp2x] { cursor: progress; }
.as-page button[b-unj7vedp2x],
.as-page a[b-unj7vedp2x] {
    font-family: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.as-protocol-chip[b-unj7vedp2x],
.as-use[b-unj7vedp2x],
.as-delivery-state[b-unj7vedp2x] {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--pulse-border) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pulse-surface-soft) 88%, transparent);
    color: var(--pulse-muted);
    padding: .36rem .65rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.as-notice[b-unj7vedp2x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--pulse-success-soft);
    color: var(--pulse-success-text);
    padding: .6rem .85rem;
    font-size: .8rem;
    font-weight: 600;
}

.as-notice > span[b-unj7vedp2x] { min-width: 0; overflow-wrap: anywhere; }
.as-notice.is-error[b-unj7vedp2x] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); color: var(--pulse-danger-text); }
.as-notice-dismiss[b-unj7vedp2x] { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; font-size: 1rem; line-height: 1; }
.as-notice-dismiss:hover:not(:disabled)[b-unj7vedp2x] { background: color-mix(in srgb, currentColor 10%, transparent); }

.as-doctrine[b-unj7vedp2x] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
    padding: .85rem 1rem;
}

.as-doctrine-icon[b-unj7vedp2x] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--pulse-surface-soft);
    color: var(--pulse-muted);
}

.as-eyebrow[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; font-weight: 600; }
.as-doctrine h2[b-unj7vedp2x], .as-card h2[b-unj7vedp2x], .as-panel-rail h2[b-unj7vedp2x] { margin: .18rem 0 .3rem; font-size: 1rem; overflow-wrap: anywhere; line-height: 1.3; font-weight: 700; }
.as-doctrine p[b-unj7vedp2x], .as-card p[b-unj7vedp2x] { margin: 0; color: var(--pulse-muted); font-size: .84rem; line-height: 1.5; }
.as-doctrine dl[b-unj7vedp2x] { display: grid; grid-template-columns: repeat(3, auto); gap: .8rem; margin: 0; }
.as-doctrine dl div[b-unj7vedp2x] { border-left: 1px solid var(--pulse-border); padding-left: .8rem; }
.as-doctrine dt[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; }
.as-doctrine dd[b-unj7vedp2x] { margin: .18rem 0 0; font-size: .8rem; font-weight: 700; white-space: nowrap; }

.as-overview[b-unj7vedp2x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
    overflow: visible;
}

.as-overview > article[b-unj7vedp2x],
.as-master-switch[b-unj7vedp2x] { display: grid; gap: .2rem; padding: .85rem .95rem; border-right: 1px solid var(--pulse-border); min-width: 0; }
.as-overview > article:last-child[b-unj7vedp2x] { border-right: 0; }
.as-overview article > span[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; }
.as-overview article > strong[b-unj7vedp2x] { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.as-overview small[b-unj7vedp2x], .as-master-switch small[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
/* The master switch is a card in the fire-systems rail now, not the fifth overview tile. */
.as-master-switch[b-unj7vedp2x] { grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--pulse-border); border-radius: .75rem; background: var(--pulse-surface-soft); padding: .6rem .75rem; cursor: pointer; }
.as-master-switch span[b-unj7vedp2x] { display: grid; gap: .15rem; min-width: 0; }
.as-master-switch input[b-unj7vedp2x], .as-row-switch input[b-unj7vedp2x] { inline-size: 2.6rem; block-size: 1.3rem; accent-color: var(--pulse-accent); }

/* The standard delivery-counter row every bridge page carries. */
.as-metrics[b-unj7vedp2x] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.as-metric[b-unj7vedp2x] {
    display: grid;
    justify-items: start;
    gap: .12rem;
    min-width: 6.25rem;
    padding: .42rem .55rem .38rem;
    border: 1px solid var(--pulse-border);
    border-radius: .55rem;
    background: var(--pulse-surface);
}

.as-metric dd[b-unj7vedp2x] {
    order: -1;
    margin: 0;
    font-family: var(--as-mono);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.as-metric dt[b-unj7vedp2x] {
    color: var(--pulse-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.as-metric.is-zero[b-unj7vedp2x] { border-color: transparent; background: var(--pulse-surface-soft); }
.as-metric.is-zero dd[b-unj7vedp2x] { color: var(--pulse-muted); font-weight: 600; }
.as-metric.is-good dd[b-unj7vedp2x] { color: var(--pulse-success-text); }
.as-metric.is-warn[b-unj7vedp2x] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.as-metric.is-warn dd[b-unj7vedp2x] { color: var(--pulse-warning-text); }
.as-metric.is-bad[b-unj7vedp2x] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.as-metric.is-bad dd[b-unj7vedp2x] { color: var(--pulse-danger-text); }

.as-workspace[b-unj7vedp2x] { display: grid; grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr); gap: .75rem; align-items: start; }
.as-panel-rail[b-unj7vedp2x] {
    position: sticky;
    top: var(--pulse-sticky-top, 78px);
    display: grid;
    gap: .55rem;
    align-content: start;
    max-height: calc(100dvh - var(--pulse-sticky-top, 78px) - 1rem);
    overflow-y: auto;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
    padding: .85rem;
}
.as-panel-card[b-unj7vedp2x] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; border: 1px solid transparent; border-radius: .75rem; background: var(--pulse-surface-soft); color: inherit; padding: .72rem; text-align: left; cursor: pointer; }
.as-panel-card:hover[b-unj7vedp2x], .as-panel-card.is-current[b-unj7vedp2x] { border-color: color-mix(in srgb, var(--pulse-accent) 48%, var(--pulse-border)); background: color-mix(in srgb, var(--pulse-accent) 9%, var(--pulse-surface-soft)); }
.as-panel-mark[b-unj7vedp2x] { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: .65rem; color: var(--pulse-muted); background: var(--pulse-surface-soft); }
.as-panel-card > span:nth-child(2)[b-unj7vedp2x], .as-unit-name > span[b-unj7vedp2x], .as-picked-unit > span[b-unj7vedp2x], .as-mapping-ident[b-unj7vedp2x] { display: grid; min-width: 0; gap: .1rem; }
.as-panel-card strong[b-unj7vedp2x], .as-mapping-ident strong[b-unj7vedp2x] { overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; }
.as-panel-card small[b-unj7vedp2x], table small[b-unj7vedp2x], .as-picked-unit small[b-unj7vedp2x], .as-mapping-ident small[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-health[b-unj7vedp2x] { display: inline-block; flex: none; width: .58rem; height: .58rem; border-radius: 50%; background: var(--pulse-border-strong); box-shadow: none; }
.as-health.is-good[b-unj7vedp2x] { background: var(--pulse-success); box-shadow: none; }
.as-health.is-bad[b-unj7vedp2x] { background: var(--pulse-danger); box-shadow: none; }
.as-health.is-warn[b-unj7vedp2x] { background: var(--pulse-warning); box-shadow: none; }
.as-health.is-waiting[b-unj7vedp2x] { background: var(--pulse-warning-bright); box-shadow: none; }
.as-health.is-off[b-unj7vedp2x] { background: var(--pulse-border-strong); box-shadow: none; }
.as-empty[b-unj7vedp2x] { margin: .35rem 0; padding: .7rem; border: 1px dashed var(--pulse-border); border-radius: .6rem; color: var(--pulse-muted); background: var(--pulse-surface-soft); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }

/* A failed read is not an empty list: solid-bordered, tinted, and carrying the
   only way out of the state. */
.as-empty.is-unavailable[b-unj7vedp2x] { border-style: solid; border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.as-empty.is-unavailable .as-secondary[b-unj7vedp2x] { display: block; margin-top: .55rem; }

.as-refusal-line[b-unj7vedp2x] { margin: 0; color: var(--pulse-danger-text); font-size: .78rem; line-height: 1.5; overflow-wrap: anywhere; }
.as-refusal-line a[b-unj7vedp2x] { color: inherit; }

.as-main-column[b-unj7vedp2x] { display: grid; gap: .75rem; min-width: 0; }
.as-card[b-unj7vedp2x] { display: grid; gap: .7rem; min-width: 0; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--pulse-surface); padding: .85rem; overflow: visible; }
.as-card > header[b-unj7vedp2x] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; min-width: 0; }
.as-card > header > div[b-unj7vedp2x] { min-width: 0; }
.as-card > header > a[b-unj7vedp2x] { color: var(--pulse-accent); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.as-status-line[b-unj7vedp2x] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem !important; min-width: 0; }
.as-status-text[b-unj7vedp2x] { min-width: 0; overflow-wrap: anywhere; }
.as-seen[b-unj7vedp2x] { flex: none; color: var(--pulse-muted); font-size: .75rem; white-space: nowrap; }
.as-row-switch[b-unj7vedp2x] { display: inline-flex; gap: .5rem; align-items: center; font-size: .875rem; font-weight: 700; }

.as-form-grid[b-unj7vedp2x] { display: grid; gap: .7rem; }
.as-conn-form[b-unj7vedp2x] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.as-unit-form[b-unj7vedp2x] { grid-template-columns: 1.4fr 1fr .65fr 1.2fr auto; align-items: end; }
.as-form-grid label[b-unj7vedp2x], .as-mapping-form label[b-unj7vedp2x] { display: grid; gap: .32rem; min-width: 0; color: var(--pulse-muted); font-size: .875rem; font-weight: 600; }
.as-page input[b-unj7vedp2x], .as-page select[b-unj7vedp2x] { min-width: 0; min-height: var(--pulse-control-min-height, 44px); border: 1px solid var(--pulse-border-strong); border-radius: .55rem; background: var(--pulse-surface); color: var(--pulse-text); padding: .58rem .65rem; font: inherit; font-size: .875rem; }
.as-page input:focus[b-unj7vedp2x], .as-page select:focus[b-unj7vedp2x], .as-page button:focus-visible[b-unj7vedp2x], .as-page a:focus-visible[b-unj7vedp2x] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.as-order-switch[b-unj7vedp2x] { display: inline-flex; min-height: 24px; align-items: center; gap: .5rem; width: fit-content; color: var(--pulse-muted); font-size: .875rem; font-weight: 700; cursor: pointer; }
.as-order-switch input[b-unj7vedp2x] { inline-size: 2.2rem; block-size: 1.2rem; min-height: 0; accent-color: var(--pulse-accent); }
.as-form-foot[b-unj7vedp2x] { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-width: 0; flex-wrap: wrap; }
.as-form-foot p[b-unj7vedp2x] { max-width: 780px; min-width: 0; overflow-wrap: anywhere; }
.as-foot-actions[b-unj7vedp2x] { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.as-primary[b-unj7vedp2x], .as-secondary[b-unj7vedp2x], .as-actions button[b-unj7vedp2x], .as-mapping-list button[b-unj7vedp2x] { min-height: 2.5rem; border: 1px solid transparent; border-radius: .55rem; padding: .55rem .8rem; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.as-primary[b-unj7vedp2x] { background: var(--pulse-action); color: var(--pulse-on-action); }
.as-secondary[b-unj7vedp2x], .as-actions button[b-unj7vedp2x], .as-mapping-list button[b-unj7vedp2x] { border-color: var(--pulse-border); background: var(--pulse-surface-soft); color: var(--pulse-text); }
.as-page button:disabled[b-unj7vedp2x] { opacity: .55; cursor: not-allowed; }
.as-actions button.is-danger[b-unj7vedp2x], .as-mapping-list button.is-danger[b-unj7vedp2x] { color: var(--pulse-danger-text); }
.as-danger[b-unj7vedp2x] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); color: var(--pulse-danger-text); }
.as-help[b-unj7vedp2x], .as-result-note[b-unj7vedp2x] { border-left: 2px solid color-mix(in srgb, var(--pulse-accent) 55%, transparent); padding-left: .7rem; overflow-wrap: anywhere; }

.as-test-result[b-unj7vedp2x] { border: 1px solid var(--pulse-border); border-radius: .6rem; background: var(--pulse-surface-soft); padding: .6rem .75rem; font-size: .78rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.as-test-result.is-good[b-unj7vedp2x] { border-color: var(--pulse-success-border); background: var(--pulse-success-soft); color: var(--pulse-success-text); }
.as-test-result.is-bad[b-unj7vedp2x] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); color: var(--pulse-danger-text); }

.as-search-header[b-unj7vedp2x] { align-items: center !important; }
.as-search[b-unj7vedp2x] { display: grid; grid-template-columns: auto minmax(220px, 360px); align-items: center; gap: .45rem; color: var(--pulse-muted); }
.as-search input[b-unj7vedp2x] { width: min(360px, 40vw); }
.as-table-wrap[b-unj7vedp2x] { max-width: 100%; overflow-x: auto; }
.as-table-wrap table[b-unj7vedp2x] { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: .78rem; }
.as-table-wrap th[b-unj7vedp2x] { color: var(--pulse-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; text-align: left; }
.as-table-wrap th:nth-child(1)[b-unj7vedp2x] { width: 27%; }
.as-table-wrap th:nth-child(2)[b-unj7vedp2x] { width: 24%; }
.as-table-wrap th:nth-child(3)[b-unj7vedp2x] { width: 25%; }
.as-table-wrap th:nth-child(4)[b-unj7vedp2x] { width: 10%; }
.as-table-wrap th:nth-child(5)[b-unj7vedp2x] { width: 14%; }
.as-table-wrap th[b-unj7vedp2x], .as-table-wrap td[b-unj7vedp2x] { border-bottom: 1px solid var(--pulse-border); padding: .68rem .55rem; vertical-align: middle; overflow: hidden; }
.as-table-wrap td > strong[b-unj7vedp2x], .as-table-wrap td > small[b-unj7vedp2x] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-table-wrap td input[b-unj7vedp2x], .as-table-wrap td select[b-unj7vedp2x] { width: 100%; font-size: .875rem; padding: .4rem .5rem; min-height: 2.25rem; }
.as-ident-edit[b-unj7vedp2x] { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .35rem; margin-bottom: .25rem; }
.as-num[b-unj7vedp2x] { font-variant-numeric: tabular-nums; }
.as-unit-name[b-unj7vedp2x], .as-picked-unit[b-unj7vedp2x] { display: inline-flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; }
.as-unit-name > span[b-unj7vedp2x] { width: 100%; gap: .3rem; }
.as-use.is-mapped[b-unj7vedp2x] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.as-actions[b-unj7vedp2x] { display: flex; justify-content: flex-end; gap: .4rem; white-space: nowrap; }

.as-mapping-form[b-unj7vedp2x] { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr auto; gap: .7rem; align-items: end; border: 1px solid var(--pulse-border); border-radius: .75rem; background: var(--pulse-surface-soft); padding: .75rem; }
.as-picked-unit[b-unj7vedp2x] { min-width: 0; }
.as-mapping-list[b-unj7vedp2x] { display: grid; gap: .45rem; }
.as-mapping-list article[b-unj7vedp2x] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr) auto auto auto; gap: .55rem; align-items: center; border-top: 1px solid var(--pulse-border); padding-top: .65rem; }
.as-mapping-list article.is-disabled[b-unj7vedp2x] {
    border-left: 3px solid var(--pulse-muted);
    background: var(--pulse-surface-soft);
    padding-left: .55rem;
}
.as-row-enabled[b-unj7vedp2x] { display: inline-flex; align-items: center; gap: .35rem; color: var(--pulse-muted); font-size: .875rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.as-row-enabled input[b-unj7vedp2x] { min-height: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--pulse-accent); }
/* The unit row's Enabled switch shares its cell with the Use chip, and the
   generic table-cell input rule would stretch the checkbox across the column. */
.as-table-wrap td .as-row-enabled[b-unj7vedp2x] { margin-top: .3rem; }
.as-table-wrap td .as-row-enabled input[b-unj7vedp2x] { width: 1.05rem; min-height: 0; }
.as-mapping-list small[b-unj7vedp2x] { color: var(--pulse-muted); }

.as-register-grid[b-unj7vedp2x] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem; }
.as-register-grid article[b-unj7vedp2x] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .7rem; align-items: center; border: 1px solid var(--pulse-border); border-radius: .65rem; background: var(--pulse-surface-soft); padding: .68rem; }
.as-register-grid article > span[b-unj7vedp2x] { display: grid; min-width: 0; }
.as-register-grid article > span > strong[b-unj7vedp2x], .as-register-grid article > span > small[b-unj7vedp2x] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-register-grid article > small[b-unj7vedp2x] { grid-column: 1 / -1; color: var(--pulse-muted); }
.as-register-grid code[b-unj7vedp2x] { color: var(--pulse-info-strong); font-size: .8rem; }

@media (any-pointer: coarse) {
    .as-page :is(button, a, input:not([type="checkbox"]), select)[b-unj7vedp2x] {
        min-height: var(--pulse-control-min-height, 44px);
    }

    .as-master-switch[b-unj7vedp2x], .as-row-switch[b-unj7vedp2x], .as-order-switch[b-unj7vedp2x], .as-row-enabled[b-unj7vedp2x] { min-height: var(--pulse-control-min-height, 44px); }
    .as-master-switch input[b-unj7vedp2x], .as-row-switch input[b-unj7vedp2x] { block-size: 1.6rem; }
    .as-notice-dismiss[b-unj7vedp2x] { min-width: var(--pulse-control-min-height, 44px); }
}

@container autrosafe-workspace (max-width: 62rem) {
    .as-overview[b-unj7vedp2x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-overview > *[b-unj7vedp2x] { border-bottom: 1px solid var(--pulse-border); }
    .as-workspace[b-unj7vedp2x] { grid-template-columns: 1fr; }
    .as-panel-rail[b-unj7vedp2x] { position: static; max-height: none; overflow-y: visible; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .as-panel-rail header[b-unj7vedp2x] { grid-column: 1 / -1; }
    .as-panel-rail > .as-master-switch[b-unj7vedp2x] { grid-column: 1 / -1; }
    .as-conn-form[b-unj7vedp2x] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .as-unit-form[b-unj7vedp2x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-mapping-form[b-unj7vedp2x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .as-page[b-unj7vedp2x] { gap: .75rem; padding: .65rem; }
}

@container autrosafe-workspace (max-width: 45rem) {
    .as-doctrine[b-unj7vedp2x] { grid-template-columns: auto minmax(0, 1fr); }
    .as-doctrine dl[b-unj7vedp2x] { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .as-overview[b-unj7vedp2x], .as-conn-form[b-unj7vedp2x], .as-unit-form[b-unj7vedp2x], .as-mapping-form[b-unj7vedp2x] { grid-template-columns: 1fr; }
    .as-card > header[b-unj7vedp2x], .as-form-foot[b-unj7vedp2x] { align-items: stretch; flex-direction: column; }
    .as-foot-actions[b-unj7vedp2x] { justify-content: stretch; }
    .as-foot-actions button[b-unj7vedp2x] { flex: 1 1 auto; }
    .as-search[b-unj7vedp2x] { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
    .as-search input[b-unj7vedp2x] { width: 100%; }
    .as-mapping-list article[b-unj7vedp2x] { grid-template-columns: minmax(0, 1fr) auto; }
    .as-mapping-list article select[b-unj7vedp2x], .as-mapping-list article input[list][b-unj7vedp2x] { grid-column: 1 / -1; }
    .as-mapping-list article button[b-unj7vedp2x] { grid-column: 1 / -1; }
    .as-page :is(input, select)[b-unj7vedp2x] { font-size: 1rem; }
    .as-notice-dismiss[b-unj7vedp2x] { width: 2.75rem; height: 2.75rem; }
    .as-primary[b-unj7vedp2x], .as-secondary[b-unj7vedp2x], .as-actions button[b-unj7vedp2x], .as-mapping-list button[b-unj7vedp2x] { min-height: 2.75rem; }
}
/* /Components/Pages/Branding.razor.rz.scp.css */
.branding-page[b-uk0yxj8llp] {
    display: grid;
    gap: var(--pulse-workspace-gap);
    width: min(var(--pulse-workspace-max), 100%);
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    color: var(--pulse-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.branding-panel[b-uk0yxj8llp] {
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--pulse-surface);
}

.branding-hero[b-uk0yxj8llp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
}

.branding-hero > div:first-child[b-uk0yxj8llp] { min-width: 0; }

.branding-hero h1[b-uk0yxj8llp],
.branding-panel h2[b-uk0yxj8llp],
.branding-history h3[b-uk0yxj8llp] { margin: 0; color: var(--pulse-text); font-weight: 600; line-height: 1.3; }
.branding-hero h1[b-uk0yxj8llp] { font-size: var(--pulse-workspace-title-size); font-weight: 700; letter-spacing: -.015em; }
.branding-panel-heading p[b-uk0yxj8llp] { max-width: 68ch; margin: .4rem 0 0; color: var(--pulse-muted); font-size: var(--pulse-workspace-lede-size); line-height: 1.45; }

.branding-status[b-uk0yxj8llp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .55rem;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
}
.branding-status-dot[b-uk0yxj8llp] { width: .5rem; height: .5rem; border-radius: 50%; background: var(--pulse-accent); }
.branding-status-dot.is-default[b-uk0yxj8llp] { background: var(--pulse-muted); }
.branding-status strong[b-uk0yxj8llp] { min-width: 0; font-size: .8125rem; font-weight: 600; }
.branding-status small[b-uk0yxj8llp] { min-width: 0; color: var(--pulse-muted); font-size: .75rem; }

.branding-alert[b-uk0yxj8llp] {
    padding: .75rem .9rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    font-size: .875rem;
    font-weight: 500;
}
.branding-alert > small[b-uk0yxj8llp] { display: block; margin-top: .3rem; font-size: .75rem; }
.branding-alert.is-error[b-uk0yxj8llp] { color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.branding-alert.is-success[b-uk0yxj8llp] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.branding-alert.is-warning[b-uk0yxj8llp] { color: var(--pulse-warning-text); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }

.branding-grid[b-uk0yxj8llp] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: var(--pulse-workspace-gap); }
.branding-panel[b-uk0yxj8llp] { min-width: 0; padding: 1rem; }
.branding-review-column[b-uk0yxj8llp] { display: grid; min-width: 0; gap: var(--pulse-workspace-gap); align-content: start; }
.branding-panel-heading[b-uk0yxj8llp] { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .65rem; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--pulse-border); }
.branding-panel-heading > div[b-uk0yxj8llp] { flex: 1 1 15rem; min-width: 0; }
.branding-panel-heading h2[b-uk0yxj8llp] { font-size: 1rem; }
.branding-reference > summary[b-uk0yxj8llp] { min-height: 44px; padding: .6rem 0; box-sizing: border-box; color: var(--pulse-text); cursor: pointer; }
.branding-reference > summary h2[b-uk0yxj8llp] { display: inline; }
.branding-reference > summary[b-uk0yxj8llp]::marker { color: var(--pulse-muted); }
.branding-reference > summary:focus-visible[b-uk0yxj8llp] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; border-radius: var(--pulse-radius-sm); }
.branding-reference[open] > summary[b-uk0yxj8llp] { margin-bottom: .35rem; }
.branding-reference > p:last-child[b-uk0yxj8llp] { margin-bottom: .5rem; }
.branding-lock[b-uk0yxj8llp],
.branding-preview-badge[b-uk0yxj8llp] { display: inline-flex; flex: 0 1 auto; align-items: center; min-height: 1.8rem; padding: .2rem .55rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-muted); background: var(--pulse-surface-soft); font-size: .75rem; font-weight: 500; }
.branding-preview-badge[b-uk0yxj8llp] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }

.branding-field[b-uk0yxj8llp] { display: grid; gap: .35rem; margin-bottom: .75rem; }
.branding-field > label[b-uk0yxj8llp] { color: var(--pulse-text); font-size: .875rem; font-weight: 600; }
.branding-field small[b-uk0yxj8llp] { color: var(--pulse-muted); font-size: .75rem; line-height: 1.45; }
/* InputText and InputFile render in their own component scope. */
.branding-field[b-uk0yxj8llp]  .branding-input,
.branding-field[b-uk0yxj8llp]  .branding-file { box-sizing: border-box; width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-control-text); background: var(--pulse-control-surface); font: inherit; font-size: .875rem; }
.branding-field[b-uk0yxj8llp]  .branding-input:focus,
.branding-field[b-uk0yxj8llp]  .branding-file:focus { border-color: var(--pulse-accent); outline: 3px solid var(--pulse-focus-ring-soft); outline-offset: 1px; }
.branding-field[b-uk0yxj8llp]  .branding-input.invalid { border-color: var(--pulse-danger-border); }
.branding-field[b-uk0yxj8llp]  .branding-file { padding: .35rem .45rem; }
.branding-field[b-uk0yxj8llp]  .branding-file::file-selector-button { min-height: 32px; margin-right: .65rem; padding: .3rem .65rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-text); background: var(--pulse-surface-soft); font: inherit; cursor: pointer; }
.branding-logo-reference[b-uk0yxj8llp] { display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem; border: 1px solid var(--pulse-success-border); border-radius: .65rem; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; }
.branding-logo-check[b-uk0yxj8llp] { display: grid; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--pulse-success-text); color: var(--pulse-surface); font-size: .75rem; }
.branding-link-button[b-uk0yxj8llp] { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin-left: auto; padding: .35rem .5rem; border: 0; color: inherit; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; text-decoration: underline; cursor: pointer; }

.branding-color-grid[b-uk0yxj8llp] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem .75rem; }
.branding-color-field[b-uk0yxj8llp] { margin-bottom: .65rem; }
.branding-color-control[b-uk0yxj8llp] { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .2rem .4rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-surface-soft); }
.branding-color-control input[b-uk0yxj8llp] { width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; border-radius: .375rem; background: transparent; cursor: pointer; }
.branding-color-control input:focus-visible[b-uk0yxj8llp] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.branding-color-control code[b-uk0yxj8llp] { color: var(--pulse-muted); font-size: .75rem; }

.branding-editor-actions[b-uk0yxj8llp],
.branding-publish-actions[b-uk0yxj8llp] { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.branding-editor-actions[b-uk0yxj8llp] { padding-top: .85rem; border-top: 1px solid var(--pulse-border); }
.branding-rollback-confirm[b-uk0yxj8llp] { background: var(--pulse-warning-soft); border: 1px solid var(--pulse-warning-border); border-radius: .7rem; color: var(--pulse-warning-text); margin-top: .75rem; padding: .75rem; }
.branding-rollback-confirm p[b-uk0yxj8llp] { font-size: .78rem; line-height: 1.5; margin: .35rem 0 .65rem; }
.branding-rollback-confirm > div[b-uk0yxj8llp] { display: flex; flex-wrap: wrap; gap: .45rem; }
.branding-primary[b-uk0yxj8llp],
.branding-secondary[b-uk0yxj8llp] { min-height: 44px; padding: .55rem .85rem; border-radius: var(--pulse-radius-sm); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.branding-primary[b-uk0yxj8llp] { border: 1px solid var(--pulse-action); color: var(--pulse-on-action); background: var(--pulse-action); }
.branding-secondary[b-uk0yxj8llp] { border: 1px solid var(--pulse-border); color: var(--pulse-text); background: var(--pulse-surface-soft); }
.branding-primary:hover:not(:disabled)[b-uk0yxj8llp] { border-color: var(--pulse-action-hover); background: var(--pulse-action-hover); }
.branding-secondary:hover:not(:disabled)[b-uk0yxj8llp] { border-color: var(--pulse-border-strong); color: var(--pulse-control-surface-hover-text, var(--pulse-text)); background: var(--pulse-control-surface-hover); }
.branding-primary:disabled[b-uk0yxj8llp], .branding-secondary:disabled[b-uk0yxj8llp] { cursor: not-allowed; color: var(--pulse-disabled-text); border-color: var(--pulse-disabled-border); background: var(--pulse-disabled-surface); opacity: 1; }
.branding-primary:focus-visible[b-uk0yxj8llp], .branding-secondary:focus-visible[b-uk0yxj8llp], .branding-link-button:focus-visible[b-uk0yxj8llp], .branding-history-item:focus-within[b-uk0yxj8llp] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.branding-empty-preview[b-uk0yxj8llp] { display: grid; min-height: 10rem; place-items: center; align-content: center; gap: .4rem; padding: 1rem; border: 1px dashed var(--pulse-border); border-radius: var(--pulse-radius-md); color: var(--pulse-muted); background: var(--pulse-surface-soft); text-align: center; }
.branding-empty-preview > span[b-uk0yxj8llp] { color: var(--pulse-muted); font-size: 1.6rem; }
.branding-empty-preview strong[b-uk0yxj8llp] { color: var(--pulse-text); font-size: .875rem; font-weight: 600; }
.branding-empty-preview p[b-uk0yxj8llp] { max-width: 25rem; margin: 0; font-size: .76rem; line-height: 1.5; }
.branding-preview-stack[b-uk0yxj8llp] { display: grid; gap: .7rem; }
.branding-theme-sample[b-uk0yxj8llp] { min-width: 0; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-md); color: var(--pulse-text); background: var(--pulse-surface); }
.branding-theme-sample-header[b-uk0yxj8llp] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-md) var(--pulse-radius-md) 0 0; background: var(--pulse-surface-soft); font-size: .8125rem; }
.branding-theme-color[b-uk0yxj8llp] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--pulse-muted); font-size: .75rem; }
.branding-theme-color input[b-uk0yxj8llp] { width: 1rem; height: 1rem; padding: 0; border: 0; border-radius: .2rem; }
.branding-theme-body[b-uk0yxj8llp] { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; min-height: 5.1rem; padding: .8rem; }
.branding-theme-body img[b-uk0yxj8llp] { width: 2.7rem; height: 2.7rem; object-fit: contain; border: 1px solid var(--pulse-border); border-radius: .5rem; background: var(--pulse-surface-raised); }
.branding-theme-body > div[b-uk0yxj8llp] { display: grid; gap: .15rem; min-width: 0; }
.branding-theme-body > div strong[b-uk0yxj8llp] { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.branding-theme-body > div span[b-uk0yxj8llp] { color: var(--pulse-muted); font-size: .75rem; }
.branding-theme-action-preview[b-uk0yxj8llp] { display: inline-flex; min-height: 2rem; margin-left: auto; padding: .3rem .6rem; align-items: center; border: 1px solid var(--pulse-accent); border-radius: var(--pulse-radius-sm); color: var(--pulse-on-action); background: var(--pulse-action); font-size: .875rem; font-weight: 600; }
.branding-token-preview[b-uk0yxj8llp] { background: var(--pulse-surface-inset); border-top: 1px solid var(--pulse-border); border-radius: 0 0 var(--pulse-radius-md) var(--pulse-radius-md); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .65rem .75rem; }
.branding-token-preview span[b-uk0yxj8llp] { border: 1px solid; border-radius: 999px; font-size: .75rem; font-weight: 500; padding: .25rem .45rem; }
.branding-token-preview .success[b-uk0yxj8llp] { background: var(--pulse-success-soft); border-color: var(--pulse-success-border); color: var(--pulse-success-text); }
.branding-token-preview .warning[b-uk0yxj8llp] { background: var(--pulse-warning-soft); border-color: var(--pulse-warning-border); color: var(--pulse-warning-text); }
.branding-token-preview .danger[b-uk0yxj8llp] { background: var(--pulse-danger-soft); border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); }
.branding-token-preview .info[b-uk0yxj8llp] { background: var(--pulse-info-soft); border-color: var(--pulse-info-border); color: var(--pulse-info-strong); }
.branding-token-preview input[b-uk0yxj8llp] { box-sizing: border-box; flex: 1 1 10rem; min-width: 0; max-width: 100%; min-height: 44px; padding: .4rem .55rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-text); background: var(--pulse-surface-raised); font: inherit; font-size: .875rem; }
.branding-token-preview input:focus-visible[b-uk0yxj8llp] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.branding-token-preview input[b-uk0yxj8llp]::placeholder { color: var(--pulse-placeholder); opacity: 1; }
.branding-token-preview button:disabled[b-uk0yxj8llp] { min-height: 44px; padding: .4rem .65rem; border: 1px solid var(--pulse-disabled-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-disabled-text); background: var(--pulse-disabled-surface); font: inherit; font-size: .875rem; opacity: 1; }
.branding-contrast-note[b-uk0yxj8llp] { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding: .6rem .7rem; border: 1px solid var(--pulse-success-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 500; line-height: 1.45; }
.branding-contrast-note > span:first-child[b-uk0yxj8llp] { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--pulse-surface); background: var(--pulse-success-text); }

.branding-publish-panel[b-uk0yxj8llp] { min-height: 0; }
.branding-reference .branding-audit-note[b-uk0yxj8llp] { margin: .65rem 0 .5rem; color: var(--pulse-muted); font-size: .75rem; line-height: 1.45; }
.branding-history[b-uk0yxj8llp] { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--pulse-border); }
.branding-history h3[b-uk0yxj8llp] { font-size: .875rem; }
.branding-muted[b-uk0yxj8llp] { margin: .7rem 0 0; color: var(--pulse-muted); font-size: .75rem; }
.branding-history-list[b-uk0yxj8llp] { display: grid; gap: .45rem; margin-top: .7rem; }
.branding-history-item[b-uk0yxj8llp] { display: flex; align-items: center; gap: .6rem; min-width: 0; min-height: 44px; padding: .6rem .65rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-surface-soft); cursor: pointer; }
.branding-history-item:has(input[type="radio"]:checked)[b-uk0yxj8llp] { border-color: var(--pulse-accent); background: var(--pulse-accent-soft); }
.branding-history-item input[b-uk0yxj8llp] { flex: 0 0 auto; accent-color: var(--pulse-accent); }
.branding-history-copy[b-uk0yxj8llp] { display: grid; gap: .13rem; min-width: 0; }
.branding-history-copy strong[b-uk0yxj8llp] { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.branding-history-copy small[b-uk0yxj8llp] { color: var(--pulse-muted); font-size: .75rem; }
.branding-history-colors[b-uk0yxj8llp] { display: flex; gap: .25rem; margin-left: auto; }
.branding-history-colors input[b-uk0yxj8llp] { width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: .25rem; }

@media (min-width: 1560px) {
    .branding-grid[b-uk0yxj8llp] { grid-template-columns: minmax(22rem, 1.1fr) minmax(0, 1fr) minmax(18rem, .9fr); }
    .branding-review-column[b-uk0yxj8llp] { display: contents; }
    .branding-publish-actions[b-uk0yxj8llp] { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .branding-grid[b-uk0yxj8llp] { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .branding-page[b-uk0yxj8llp] { padding-right: .75rem; padding-left: .75rem; }
    .branding-hero[b-uk0yxj8llp] { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .branding-status[b-uk0yxj8llp] { width: 100%; max-width: none; box-sizing: border-box; }
    .branding-color-grid[b-uk0yxj8llp] { grid-template-columns: 1fr; }
    .branding-editor-actions[b-uk0yxj8llp], .branding-publish-actions[b-uk0yxj8llp] { display: grid; grid-template-columns: 1fr; }
    .branding-primary[b-uk0yxj8llp], .branding-secondary[b-uk0yxj8llp] { width: 100%; min-height: 44px; }
    .branding-theme-sample-header[b-uk0yxj8llp] { align-items: flex-start; flex-direction: column; }
    .branding-theme-body[b-uk0yxj8llp] { align-items: flex-start; flex-wrap: wrap; }
    .branding-theme-action-preview[b-uk0yxj8llp] { width: 100%; margin-left: 0; min-height: 44px; justify-content: center; }
    .branding-logo-reference[b-uk0yxj8llp] { flex-wrap: wrap; }
    .branding-history-item[b-uk0yxj8llp] { flex-wrap: wrap; }
    .branding-history-copy[b-uk0yxj8llp] { flex: 1 1 10rem; }
    .branding-empty-preview[b-uk0yxj8llp] { min-height: 10rem; }
    .branding-field[b-uk0yxj8llp]  .branding-input,
    .branding-field[b-uk0yxj8llp]  .branding-file,
    .branding-token-preview input[b-uk0yxj8llp] { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .branding-primary[b-uk0yxj8llp], .branding-secondary[b-uk0yxj8llp] { transition: none; }
}
/* /Components/Pages/Buildings.razor.rz.scp.css */
/* Buildings, floors and rooms.

   A workspace, not a stack of panels: structure on the left, exactly one stage
   in the middle, the selection and its cameras on the right. It borrows the
   shape and the chrome of the operations map deliberately - the two screens
   describe the same estate, and an operator should not have to learn a second
   layout to say where a camera hangs. The page's own names are aliases of the
   shared tokens - custom properties do cross into scoped CSS - so the header
   strip and the tree beneath it cannot end up on two palettes. */

.buildings-page[b-afwb7eqs24] {
    --bld-surface: var(--pulse-surface);
    --bld-soft: var(--pulse-surface-soft);
    --bld-border: var(--pulse-border);
    --bld-ink: var(--pulse-text);
    --bld-muted: var(--pulse-muted);
    --bld-accent: var(--pulse-accent);
    --bld-sheet: var(--pulse-surface-inset);
    --bld-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap, .7rem);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: clamp(.7rem, 1.4vw, 1.15rem);
    color: var(--bld-ink);
    line-height: 1.45;
}

.buildings-page[aria-busy="true"][b-afwb7eqs24] { cursor: progress; }

.buildings-page[b-afwb7eqs24]  .leaflet-control-attribution a { display: inline-flex; min-height: 24px; align-items: center; }

/* Leaflet paints its own chrome light: the zoom bar keeps background-color:#fff
   and the credit strip a white wash, so on a dark map they are the two
   brightest slabs on the page and their links read near 1.7:1. Both follow the
   shared control tokens instead, so they flip with the theme like the rest. */
.buildings-page[b-afwb7eqs24]  .leaflet-bar a { background: var(--pulse-control-surface); color: var(--pulse-control-text); border-bottom: 1px solid var(--pulse-control-border); }
.buildings-page[b-afwb7eqs24]  .leaflet-bar a:hover, .buildings-page[b-afwb7eqs24]  .leaflet-bar a:focus { background: var(--pulse-control-surface-hover); color: var(--pulse-control-text); }
.buildings-page[b-afwb7eqs24]  .leaflet-bar a.leaflet-disabled { background: var(--pulse-surface-inset); color: var(--pulse-muted); }
.buildings-page[b-afwb7eqs24]  .leaflet-control-attribution { background: color-mix(in srgb, var(--pulse-surface) 92%, transparent); color: var(--pulse-muted); }
.buildings-page[b-afwb7eqs24]  .leaflet-control-attribution a { color: var(--pulse-link); }

/* ---- the bar --------------------------------------------------------- */

.bld-bar[b-afwb7eqs24] {
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    justify-content: flex-start;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
}

.bld-bar-copy[b-afwb7eqs24] { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; min-width: 0; }
.bld-bar h1[b-afwb7eqs24] { margin: 0; color: var(--bld-ink); font-size: var(--pulse-workspace-title-size, 1.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; }

.bld-bar-stats[b-afwb7eqs24] { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }

.bld-bar-stats span[b-afwb7eqs24] {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pulse-muted);
    font-size: .8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    padding: 0;
}

.bld-bar-stats strong[b-afwb7eqs24] { color: var(--pulse-text); font-variant-numeric: tabular-nums; }

/* ---- notices --------------------------------------------------------- */

.bld-alert[b-afwb7eqs24] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: .75rem;
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .75rem;
    font-weight: 600;
}

.bld-alert.error[b-afwb7eqs24] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.bld-alert.confirm[b-afwb7eqs24] { border-color: var(--pulse-warning-border); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.bld-confirm-actions[b-afwb7eqs24] { display: inline-flex; gap: .45rem; align-items: center; }

/* The way back to a map after the page has stopped trying for itself. It sits
   in the alert's second grid column, beside the sentence that explains it. */
.bld-retry-map[b-afwb7eqs24] {
    min-height: 44px;
    padding: .3rem .7rem;
    border: 1px solid currentColor;
    border-radius: .55rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.bld-retry-map:hover[b-afwb7eqs24] { background: color-mix(in srgb, currentColor 12%, transparent); }
.bld-retry-map:focus-visible[b-afwb7eqs24] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

/* ---- the workspace --------------------------------------------------- */

.bld-workspace[b-afwb7eqs24] {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(300px, 340px);
    gap: .7rem;
    align-items: stretch;
    min-height: 0;
    flex: 1;
}

.bld-structure[b-afwb7eqs24],
.bld-stage[b-afwb7eqs24],
.bld-inspector[b-afwb7eqs24] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--bld-surface);
}

.bld-pane-head[b-afwb7eqs24] {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-lg) var(--pulse-radius-lg) 0 0;
    background: var(--bld-soft);
}

.bld-pane-head h2[b-afwb7eqs24] {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bld-open-operations[b-afwb7eqs24] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 1 auto;
    color: var(--bld-accent);
    font-size: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.bld-open-operations:hover[b-afwb7eqs24] { text-decoration: underline; }

/* ---- buttons --------------------------------------------------------- */

/* Only the family is inherited. The `font` shorthand would also reset
   font-size, and at (0,1,1) it outranks every button rule below - which is
   exactly how every control on this page ended up at 16px. */
.buildings-page button[b-afwb7eqs24] { font-family: inherit; cursor: pointer; }

.bld-primary-button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font-size: .75rem;
    font-weight: 600;
}

.bld-primary-button:hover:not(:disabled)[b-afwb7eqs24] { background: var(--pulse-action-hover); }
.bld-primary-button:disabled[b-afwb7eqs24] { cursor: not-allowed; opacity: .55; }

.bld-ghost-button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .3rem .65rem;
    border: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--bld-accent);
    background: var(--bld-surface);
    font-size: .75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bld-ghost-button:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); }
.bld-form > .bld-ghost-button[b-afwb7eqs24] { justify-self: start; }
.bld-ghost-button.is-armed[b-afwb7eqs24] {
    border-color: var(--pulse-warning-border, #fed7aa);
    color: var(--pulse-warning-text, #9a3412);
    background: var(--pulse-warning-soft, #fff7ed);
}

.bld-danger-button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .3rem .65rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-danger-text);
    background: transparent;
    font-size: .75rem;
    font-weight: 600;
}

.bld-danger-button:hover:not(:disabled)[b-afwb7eqs24] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); border-color: var(--pulse-danger-border); }

/* Same disabled treatment the primary button already carries: while a delete
   is in flight both answers in the confirm bar are refused, and they have to
   look refused rather than merely ignore the click. */
.bld-ghost-button:disabled[b-afwb7eqs24],
.bld-danger-button:disabled[b-afwb7eqs24] { cursor: not-allowed; opacity: .55; }

.bld-tiny-button[b-afwb7eqs24] {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--bld-muted);
    background: transparent;
    font-size: .9rem;
    line-height: 1;
}

.bld-tiny-button:hover:not(:disabled)[b-afwb7eqs24] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }

/* ---- structure tree -------------------------------------------------- */

.bld-tree[b-afwb7eqs24],
.bld-subtree[b-afwb7eqs24] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bld-tree[b-afwb7eqs24] {
    flex: 1;
    padding: .4rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.bld-subtree[b-afwb7eqs24] { padding-left: .8rem; }

/* A building is a stack of levels, not a flat list, so the levels are drawn
   as one: a single rule runs down them and each carries its own ordinal. */
.bld-subtree:has(.is-floor)[b-afwb7eqs24] {
    position: relative;
    margin-left: .95rem;
    padding-left: .55rem;
    border-left: 1px solid var(--bld-border);
}

.bld-level[b-afwb7eqs24] {
    display: grid;
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    margin-left: -1.28rem;
    border: 1px solid var(--bld-border);
    border-radius: .3rem;
    color: var(--bld-muted);
    background: var(--bld-surface);
    font-family: var(--bld-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bld-node.is-active .bld-level[b-afwb7eqs24] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.bld-node[b-afwb7eqs24] {
    display: flex;
    gap: .45rem;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: .4rem .5rem;
    border: 1px solid transparent;
    border-radius: .6rem;
    color: var(--bld-ink);
    background: transparent;
    text-align: left;
    transition: background .12s ease, border-color .12s ease;
}

.bld-node:hover[b-afwb7eqs24] { background: var(--bld-soft); }

.bld-node.is-active[b-afwb7eqs24] {
    border-color: var(--pulse-accent-border);
    background: var(--pulse-accent-soft);
    box-shadow: inset 2px 0 var(--bld-accent);
}

.bld-node-copy[b-afwb7eqs24] { display: grid; gap: .05rem; min-width: 0; flex: 1; }
.bld-node-copy strong[b-afwb7eqs24] { font-size: .875rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.bld-node-copy small[b-afwb7eqs24] { color: var(--bld-muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
/* The same badge the map and the building layout use for "no saved position",
   so one state does not read as prose here and a chip everywhere else. */
.bld-node-copy small.bld-node-flag[b-afwb7eqs24] {
    justify-self: start;
    padding: .05rem .3rem;
    border-radius: 999px;
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
    font-weight: 700;
}

.bld-node-mark[b-afwb7eqs24] {
    display: grid;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: .45rem;
    color: var(--bld-accent);
    background: color-mix(in srgb, var(--bld-accent) 10%, transparent);
}

.bld-node-mark svg[b-afwb7eqs24] { width: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.bld-node-count[b-afwb7eqs24] {
    flex: 0 0 auto;
    font-family: var(--bld-mono);
    min-width: 1.3rem;
    padding: .1rem .35rem;
    border-radius: 999px;
    color: var(--bld-muted);
    background: var(--bld-soft);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

.bld-node.is-floor[b-afwb7eqs24] { font-size: .75rem; }
.bld-node.is-room .bld-node-copy strong[b-afwb7eqs24] { color: var(--bld-muted); font-size: .875rem; font-weight: 700; }

/* ---- small forms ----------------------------------------------------- */

.bld-add-form[b-afwb7eqs24],
.bld-form[b-afwb7eqs24] {
    display: grid;
    gap: .7rem;
    padding: .8rem;
}

.bld-add-form[b-afwb7eqs24] { border-bottom: 1px solid var(--bld-border); background: var(--bld-soft); }

.bld-add-form label[b-afwb7eqs24],
.bld-form label[b-afwb7eqs24],
.bld-floor-add label[b-afwb7eqs24] {
    display: grid;
    gap: .22rem;
    color: var(--bld-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.45;
}

.bld-field-pair[b-afwb7eqs24] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bld-field-pair label[b-afwb7eqs24] { min-width: 0; }
.bld-save-row[b-afwb7eqs24] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; margin-top: .15rem; padding: .65rem; border: 1px solid var(--bld-border); border-radius: var(--pulse-radius-sm); background: var(--bld-soft); }
.bld-save-row .bld-primary-button[b-afwb7eqs24] { margin-left: auto; }
.bld-details-state[b-afwb7eqs24] { display: inline-flex; align-items: center; gap: .4rem; color: var(--bld-muted); font-size: .75rem; font-weight: 700; line-height: 1.4; }
.bld-details-state i[b-afwb7eqs24] { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--pulse-success-text); }
.bld-details-state.pending[b-afwb7eqs24] { color: var(--pulse-warning-text); }
.bld-details-state.pending i[b-afwb7eqs24] { background: var(--pulse-warning-text); }

/* Latitude and longitude are figures to compare, not prose: the data face and
   tabular figures keep the decimal points under each other. */
.bld-field-pair input[inputmode="decimal"][b-afwb7eqs24] {
    font-family: var(--bld-mono);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.buildings-page input[b-afwb7eqs24],
.buildings-page select[b-afwb7eqs24] {
    width: 100%;
    min-height: 44px;
    padding: 0 .55rem;
    border: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--bld-ink);
    background: var(--bld-surface);
    font: inherit;
    font-size: .875rem;
}

.buildings-page input:focus[b-afwb7eqs24],
.buildings-page select:focus[b-afwb7eqs24] {
    border-color: var(--bld-accent);
    outline: 0;
    box-shadow: 0 0 0 .18rem rgba(15, 130, 125, .12);
}

.bld-hint[b-afwb7eqs24] { margin: 0; color: var(--bld-muted); font-size: .75rem; line-height: 1.45; }

.bld-empty[b-afwb7eqs24],
.bld-empty-inspector[b-afwb7eqs24] {
    display: grid;
    gap: .3rem;
    place-items: center;
    padding: .8rem 1rem;
    color: var(--bld-muted);
    font-size: .75rem;
    text-align: center;
}

.bld-empty-inspector strong[b-afwb7eqs24] { color: var(--bld-ink); font-size: .8rem; }
.bld-empty-inspector p[b-afwb7eqs24] { margin: 0; }

.bld-inline-add[b-afwb7eqs24] { display: flex; gap: .3rem; padding: .35rem .1rem; }
.bld-inline-add input[b-afwb7eqs24] { min-height: 44px; font-size: .875rem; }
.bld-inline-add input:nth-of-type(2)[b-afwb7eqs24] { max-width: 3.4rem; }
.bld-floor-add[b-afwb7eqs24] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3.8rem, .45fr); gap: .4rem; }
.bld-floor-add label[b-afwb7eqs24] { min-width: 0; }
.bld-floor-add .bld-hint[b-afwb7eqs24],
.bld-floor-add button[b-afwb7eqs24] { grid-column: 1 / -1; }
.bld-floor-add input[b-afwb7eqs24],
.bld-inline-add.bld-floor-add button[b-afwb7eqs24] { min-height: 44px; }
.bld-inline-add button:focus-visible[b-afwb7eqs24] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.bld-inline-add button[b-afwb7eqs24] {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .25rem .6rem;
    border: 1px solid var(--bld-border);
    border-radius: .5rem;
    color: var(--bld-accent);
    background: var(--bld-surface);
    font-size: .75rem;
    font-weight: 600;
}

/* The label needs a shape of its own: it carries the only sentence telling the
   operator that choosing a file saves - and overwrites - immediately, so the
   caption must sit with the control rather than run into it. */
.bld-file[b-afwb7eqs24] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-weight: 700;
    color: var(--bld-muted);
}

/* ::deep, because the input is rendered by the InputFile child component and
   therefore never carries this component's scope attribute. Without it the one
   control that puts a drawing into the product was a native UA file picker. */
.bld-file[b-afwb7eqs24]  input[type="file"] {
    min-height: 44px;
    padding: .4rem;
    border: 1px dashed var(--bld-border);
    border-radius: .55rem;
    background: var(--bld-soft);
    color: var(--bld-ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.bld-file[b-afwb7eqs24]  input[type="file"]:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ---- the stage ------------------------------------------------------- */

.bld-stage-tabs[b-afwb7eqs24] {
    display: flex;
    gap: .25rem;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-lg) var(--pulse-radius-lg) 0 0;
    background: var(--bld-soft);
    overflow-x: auto;
    scrollbar-width: none;
}

.bld-stage-tabs[b-afwb7eqs24]::-webkit-scrollbar { display: none; }

/* These select on the element, not on role="tab": the group is a role="group"
   of toggle buttons - a tablist promises arrow-key navigation and a tabpanel
   per tab, and this one has neither - so a [role="tab"] qualifier matched
   nothing and every toggle rendered as a native UA button. The child combinator
   is what keeps this off the zoom and placement controls, which sit one level
   deeper inside .bld-stage-tools. */
.bld-stage-tabs > button[b-afwb7eqs24] {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    min-height: 44px;
    padding: .3rem .7rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm);
    color: var(--bld-muted);
    background: transparent;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* Hover only; focus stays on the page-wide --pulse-focus-ring rule at the foot
   of this file, which already covers every button here. */
.bld-stage-tabs > button:hover[b-afwb7eqs24] { background: var(--bld-surface); }

/* Both selectors, because the markup sets the class and the state attribute
   together: whichever one a later edit forgets, the selected drawing still
   reads as selected. */
.bld-stage-tabs > button.is-active[b-afwb7eqs24],
.bld-stage-tabs > button[aria-pressed="true"][b-afwb7eqs24] {
    border-color: var(--bld-accent);
    color: var(--bld-accent);
    background: var(--pulse-accent-soft);
}

.bld-tab-note[b-afwb7eqs24] { opacity: .7; font-size: .875rem; font-weight: 700; }
.bld-stage-tools[b-afwb7eqs24] { margin-left: auto; padding-left: .5rem; }

.bld-zoom[b-afwb7eqs24] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-sm);
    background: var(--bld-surface);
}

.bld-zoom button[b-afwb7eqs24] {
    min-height: 44px;
    min-width: 44px;
    padding: .25rem .45rem;
    border: 0;
    color: var(--bld-accent);
    background: none;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.bld-zoom button:nth-child(2)[b-afwb7eqs24] {
    min-width: 3rem;
    border-inline: 1px solid var(--bld-border);
    color: var(--bld-muted);
    font-family: var(--bld-mono);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.bld-zoom button:hover:not(:disabled)[b-afwb7eqs24] { background: var(--bld-soft); }
.bld-zoom button:disabled[b-afwb7eqs24] { opacity: .4; cursor: not-allowed; }

.bld-stage-body[b-afwb7eqs24] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.bld-stage-body.is-hidden[b-afwb7eqs24] { display: none; }

.bld-map[b-afwb7eqs24] {
    flex: 1;
    min-height: 24rem;
    position: relative;
    contain: layout paint;
    isolation: isolate;
    overflow: hidden;
    background: var(--bld-soft);
}

/* A fitted drawing leaves vertical touch to the page. Deliberately zooming adds
   is-plan-zoomed, at which point touch pans the drawing instead. */
.bld-plan-scroll[b-afwb7eqs24] {
    position: relative;
    display: grid;
    flex: 1;
    min-height: 0;
    padding: 0;
    place-content: stretch;
    overflow: hidden;
    background: var(--bld-sheet);
    touch-action: pan-y pinch-zoom;
    cursor: grab;
}

.bld-plan-scroll:active[b-afwb7eqs24] { cursor: grabbing; }
.bld-plan-scroll.is-plan-zoomed[b-afwb7eqs24] { touch-action: none; }

/* The pin fractions are of this element, so it wraps the drawing exactly: any
   padding here and every pin lands offset by it. Width is set inline by the
   zoom control, never a transform, so a drop measured while zoomed is true. */
.bld-plan[b-afwb7eqs24] {
    --plan-inverse-scale: 1;
    position: relative;
    display: block;
    width: 100%;
    align-self: start;
    will-change: transform;
}

.bld-plan img[b-afwb7eqs24] { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.bld-plan.is-dropping[b-afwb7eqs24] { outline: 2px dashed var(--bld-accent); outline-offset: -4px; }
.bld-plan.is-picking[b-afwb7eqs24] { cursor: crosshair; }

.bld-plan.is-aiming[b-afwb7eqs24] { cursor: crosshair; }
.bld-plan:focus-visible[b-afwb7eqs24] { outline: 3px solid var(--pulse-focus-ring); outline-offset: -3px; }

.bld-plan-crosshair[b-afwb7eqs24] {
    position: absolute;
    z-index: 8;
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--bld-surface);
    border-radius: 999px;
    background:
        linear-gradient(var(--bld-accent), var(--bld-accent)) center / 3px 100% no-repeat,
        linear-gradient(90deg, var(--bld-accent), var(--bld-accent)) center / 100% 3px no-repeat;
    box-shadow: 0 0 0 2px var(--bld-accent), 0 4px 12px rgba(15, 23, 42, .38);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(var(--plan-inverse-scale, 1));
    transform-origin: center;
}

.bld-plan-crosshair.is-aim[b-afwb7eqs24] {
    background:
        linear-gradient(#d97706, #d97706) center / 3px 100% no-repeat,
        linear-gradient(90deg, #d97706, #d97706) center / 100% 3px no-repeat;
    box-shadow: 0 0 0 2px #d97706, 0 4px 12px rgba(15, 23, 42, .38);
}

.bld-plan-placement[b-afwb7eqs24] {
    display: flex;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bld-accent) 45%, var(--bld-border));
    color: var(--bld-ink);
    background: color-mix(in srgb, var(--bld-accent) 10%, var(--bld-surface));
    font-size: .75rem;
    line-height: 1.4;
}

.bld-plan-placement span[b-afwb7eqs24] { min-width: 0; }
.bld-plan-placement strong[b-afwb7eqs24] { margin-right: .25rem; color: var(--bld-accent); }

.bld-plan-placement button[b-afwb7eqs24],
.bld-plan-action[b-afwb7eqs24] {
    min-height: 44px;
    padding: .4rem .7rem;
    border: 1px solid var(--bld-border);
    border-radius: .55rem;
    color: var(--bld-accent);
    background: var(--bld-surface);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.bld-plan-placement button:hover:not(:disabled)[b-afwb7eqs24],
.bld-plan-action:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); }
.bld-plan-action.is-active[b-afwb7eqs24] { color: var(--pulse-on-action); background: var(--pulse-action); }
.bld-plan-action:disabled[b-afwb7eqs24] { cursor: not-allowed; opacity: .5; }

/* While a drag or an aim is in flight the pins must not swallow the pointer, or
   the offset would be measured against a pin instead of the drawing. The same
   holds for is-picking (Place/Move): two cameras often share one junction, so
   the spot the operator taps for the armed camera regularly lands on a
   neighbour's mark. A pin left hit-testable would take that tap - its own
   @onclick stops propagation and building-plan.js waves through anything inside
   a button - and select the neighbour instead of placing, with the banner still
   armed and nothing to say the placement was lost. */
.bld-plan.is-dropping .bld-pin[b-afwb7eqs24],
.bld-plan.is-picking .bld-pin[b-afwb7eqs24],
.bld-plan.is-aiming .bld-pin[b-afwb7eqs24] { pointer-events: none; }

.bld-pin[b-afwb7eqs24] {
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: grab;
}

.bld-pin:active[b-afwb7eqs24] { cursor: grabbing; }

/* The button itself is a zero-size anchor - the visible mark hangs off it -
   so a keyboard focus ring must be drawn on the mark, or it is invisible. */
.bld-pin:focus-visible[b-afwb7eqs24] { outline: none; }

.bld-pin:focus-visible[b-afwb7eqs24]  .camera-plan-pin {
    box-shadow: 0 0 0 3px var(--pulse-focus-ring), 0 7px 18px rgba(15, 23, 42, .4);
}

/* The label a drawing carries: which sheet, how much of it is done, and at
   what magnification. Set in the data face because all three are figures. */
.bld-titleblock[b-afwb7eqs24] {
    display: flex;
    gap: .8rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: .4rem .8rem;
    border-top: 1px solid var(--bld-border);
    background: var(--bld-soft);
}

.bld-titleblock-name[b-afwb7eqs24] {
    flex: 1;
    min-width: 0;
    color: var(--bld-ink);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.bld-titleblock-data[b-afwb7eqs24] {
    color: var(--bld-muted);
    font-family: var(--bld-mono);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bld-titleblock-open[b-afwb7eqs24] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--bld-accent);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.bld-titleblock-open:hover[b-afwb7eqs24] { text-decoration: underline; }

.bld-stage-hint[b-afwb7eqs24] {
    margin: 0;
    padding: .45rem .8rem;
    border-top: 1px solid var(--bld-border);
    color: var(--bld-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.bld-stage-empty[b-afwb7eqs24] {
    display: grid;
    flex: 1;
    gap: .3rem;
    place-content: center;
    place-items: center;
    padding: 1.25rem;
    color: var(--bld-muted);
    font-size: .75rem;
    text-align: center;
}

.bld-stage-empty strong[b-afwb7eqs24] { color: var(--bld-ink); font-size: .82rem; }
.bld-stage-empty p[b-afwb7eqs24] { margin: 0; }

/* ---- inspector ------------------------------------------------------- */

.bld-inspector[b-afwb7eqs24] { overflow-y: auto; }

.bld-section[b-afwb7eqs24] { border-bottom: 1px solid var(--bld-border); }

.bld-section > summary[b-afwb7eqs24] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem .8rem;
    color: var(--bld-ink);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.bld-section > summary[b-afwb7eqs24]::-webkit-details-marker { display: none; }
.bld-section > summary[b-afwb7eqs24]::before { content: "\25B8  "; color: var(--bld-muted); }
.bld-section[open] > summary[b-afwb7eqs24]::before { content: "\25BE  "; }
.bld-section[open] > summary[b-afwb7eqs24] { background: var(--bld-soft); }

/* Cameras are what this pane is for; the sections above it are setup that gets
   done once, so the list is the one that keeps the light background. */
.bld-section.is-cameras[b-afwb7eqs24] { border-bottom: 0; }
.bld-section.is-cameras[open] > summary[b-afwb7eqs24] { color: var(--bld-accent); }

/* ---- the camera on the drawing --------------------------------------- */

/* Where a camera is taken off a drawing: by name, and worded as a removal.
   Outside the folds below, because a removal hidden behind a section someone
   has collapsed sends them back to clicking the pin for it. */
.bld-on-plan[b-afwb7eqs24] {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .5rem .8rem;
    border-bottom: 1px solid var(--bld-border);
    background: var(--bld-soft);
    color: var(--bld-muted);
    font-size: .75rem;
}

.bld-on-plan strong[b-afwb7eqs24] { color: var(--bld-ink); }

/* ---- aiming a camera ------------------------------------------------- */

.bld-section.is-aim[open] > summary[b-afwb7eqs24] { color: var(--bld-accent); }

.bld-aim[b-afwb7eqs24] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .85rem;
}

/* A dial showing the cone itself, not an abstract needle: what is on the
   drawing and what is in this panel are the same drawing. */
.bld-dial[b-afwb7eqs24] {
    position: relative;
    width: 5.25rem;
    height: 5.25rem;
    border: 1px solid var(--bld-border);
    border-radius: 50%;
    background:
        conic-gradient(from -.5deg, var(--bld-border) 0 1deg, transparent 1deg 89deg) center / 100% 100%,
        var(--bld-soft);
}

.bld-dial-hub[b-afwb7eqs24] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--bld-accent);
    transform: translate(-50%, -50%);
}

.bld-aim-readout[b-afwb7eqs24] { display: grid; gap: .15rem; }

.bld-aim-readout strong[b-afwb7eqs24] {
    font-family: var(--bld-mono);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bld-ink);
}

.bld-aim-readout span[b-afwb7eqs24] { font-size: .78rem; color: var(--bld-muted); }

.bld-compass[b-afwb7eqs24] {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: .2rem;
}

.bld-compass button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .3rem 0;
    border: 1px solid var(--bld-border);
    border-radius: .3rem;
    color: var(--bld-muted);
    background: var(--bld-surface);
    font-family: var(--bld-mono);
    font-size: .75rem;
    cursor: pointer;
}

.bld-compass button:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); color: var(--bld-accent); }

.bld-compass button.is-on[b-afwb7eqs24] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.bld-slider[b-afwb7eqs24] { display: grid; gap: .25rem; }

.bld-slider > span[b-afwb7eqs24] {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--bld-muted);
}

.bld-slider em[b-afwb7eqs24] {
    font-family: var(--bld-mono);
    font-style: normal;
    color: var(--bld-ink);
}

.bld-slider input[type="range"][b-afwb7eqs24] {
    width: 100%;
    accent-color: var(--bld-accent);
}

.bld-aim-actions[b-afwb7eqs24] { display: flex; flex-wrap: wrap; gap: .4rem; }

.bld-aim-actions button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .4rem .7rem;
    border: 1px solid var(--bld-border);
    border-radius: .4rem;
    color: var(--bld-ink);
    background: var(--bld-surface);
    font-size: .8rem;
    cursor: pointer;
}

.bld-aim-actions button:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); }
.bld-aim-actions button:disabled[b-afwb7eqs24] { cursor: not-allowed; opacity: .55; }


.bld-chip-list[b-afwb7eqs24] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bld-chip-list li[b-afwb7eqs24] {
    display: inline-flex;
    gap: .2rem;
    align-items: center;
    padding: .18rem .25rem .18rem .55rem;
    border: 1px solid var(--bld-border);
    border-radius: 999px;
    background: var(--bld-soft);
    font-size: .75rem;
    font-weight: 700;
}

.bld-camera-list[b-afwb7eqs24],
.bld-assign-list[b-afwb7eqs24] {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bld-camera-list[b-afwb7eqs24] { max-height: 15rem; overflow-y: auto; }
.bld-assign-list[b-afwb7eqs24] { max-height: 12rem; overflow-y: auto; }

.bld-camera-list li[b-afwb7eqs24] {
    display: flex;
    gap: .3rem;
    align-items: center;
    padding: .2rem .3rem;
    border: 1px solid var(--bld-border);
    border-radius: .55rem;
    background: var(--bld-soft);
}

.bld-camera-list li[draggable="true"][b-afwb7eqs24] { cursor: grab; }
.bld-camera-list li[draggable="true"]:active[b-afwb7eqs24] { cursor: grabbing; }

.bld-camera-name[b-afwb7eqs24] {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: .2rem .25rem;
    border: 0;
    border-radius: .4rem;
    color: var(--bld-ink);
    background: transparent;
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
}

.bld-camera-name.is-picked[b-afwb7eqs24] { color: var(--bld-accent); background: var(--pulse-accent-soft); }

.bld-plan-action[b-afwb7eqs24] {
    flex: 0 0 auto;
    min-width: 3.7rem;
}

.bld-plan-needed[b-afwb7eqs24] {
    flex: 0 0 auto;
    max-width: 5.5rem;
    color: var(--pulse-warning-text, #9a3412);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.bld-camera-dot[b-afwb7eqs24] {
    flex: 0 0 auto;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--bld-muted);
}

.bld-camera-dot.is-pinned[b-afwb7eqs24] { background: #2563eb; }
.bld-camera-name.is-picked .bld-camera-dot[b-afwb7eqs24] { background: currentColor; }

.bld-assign[b-afwb7eqs24] { display: grid; gap: .4rem; padding-top: .45rem; border-top: 1px dashed var(--bld-border); }

.bld-assign-list li button[b-afwb7eqs24] {
    display: grid;
    gap: .05rem;
    width: 100%;
    min-height: 44px;
    padding: .28rem .45rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--bld-ink);
    background: transparent;
    text-align: left;
}

.bld-assign-list li button:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); background: var(--bld-soft); }
.bld-assign-list li button span[b-afwb7eqs24] { font-size: .875rem; font-weight: 700; }
.bld-assign-list li button small[b-afwb7eqs24] { color: var(--bld-muted); font-size: .875rem; }

/* ---- bulk table ------------------------------------------------------ */

.bld-bulk[b-afwb7eqs24] {
    border: 1px solid var(--bld-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--bld-surface);
}

.bld-bulk > summary[b-afwb7eqs24] {
    min-height: 44px;
    padding: .6rem .9rem;
    color: var(--bld-ink);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.bld-bulk-body[b-afwb7eqs24] { padding: 0 .9rem .9rem; }

.bld-bulk-filters[b-afwb7eqs24] {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: .5rem 0 .7rem;
}

.bld-bulk-filters label[b-afwb7eqs24] { display: grid; gap: .22rem; color: var(--bld-muted); font-size: .75rem; font-weight: 600; }
.bld-bulk-filters label:first-child[b-afwb7eqs24] { flex: 1 1 14rem; }
.bld-bulk-filters label:not(:first-child)[b-afwb7eqs24] { flex: 0 1 12rem; }
.bld-bulk-filters .bld-hint[b-afwb7eqs24] { margin-left: auto; padding-bottom: .5rem; }

.bld-bulk-empty[b-afwb7eqs24] {
    display: grid;
    min-height: 0;
    gap: .4rem;
    place-items: center;
    align-content: center;
    padding: 1rem;
    border: 1px dashed var(--bld-border);
    border-radius: .78rem;
    color: var(--bld-muted);
    background: var(--bld-soft);
    font-size: .75rem;
    text-align: center;
}

.bld-bulk-empty strong[b-afwb7eqs24] { color: var(--bld-ink); font-size: .82rem; }
.bld-bulk-empty p[b-afwb7eqs24] { max-width: 34rem; margin: 0; line-height: 1.55; }
.bld-bulk-empty button[b-afwb7eqs24],
.bld-window-footer button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .5rem .78rem;
    border: 1px solid var(--bld-border);
    border-radius: .6rem;
    color: var(--bld-accent);
    background: var(--bld-surface);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.bld-bulk-empty button:hover[b-afwb7eqs24],
.bld-window-footer button:hover:not(:disabled)[b-afwb7eqs24] { border-color: var(--bld-accent); }

.bld-table[b-afwb7eqs24] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .75rem; }

.bld-table thead th[b-afwb7eqs24] {
    padding: .4rem .45rem;
    border-bottom: 1px solid var(--bld-border);
    color: var(--bld-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: left;
    text-transform: uppercase;
}

.bld-table tbody th[b-afwb7eqs24],
.bld-table tbody td[b-afwb7eqs24] {
    padding: .28rem .45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bld-border) 55%, transparent);
    vertical-align: middle;
}

.bld-table tbody th[b-afwb7eqs24] { color: var(--bld-ink); font-weight: 600; text-align: left; white-space: nowrap; }
.bld-camera-identity[b-afwb7eqs24] { display: block; max-width: 15rem; margin-top: .16rem; overflow: hidden; color: var(--bld-muted); font-size: .75rem; font-weight: 600; text-overflow: ellipsis; }
.bld-table td:last-child[b-afwb7eqs24] { width: 1%; }

.bld-table td:last-child button[b-afwb7eqs24] {
    min-height: 44px;
    padding: .25rem .7rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font-size: .875rem;
    font-weight: 600;
}

.bld-window-footer[b-afwb7eqs24] {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .8rem .9rem;
    border: 1px solid var(--bld-border);
    border-top: 0;
    border-radius: 0 0 .72rem .72rem;
    color: var(--bld-muted);
    background: var(--bld-soft);
    font-size: .75rem;
}

.bld-retired[b-afwb7eqs24] {
    margin-left: .3rem;
    padding: .08rem .3rem;
    border-radius: 999px;
    color: var(--pulse-warning-text, #9a3412);
    background: var(--pulse-warning-soft, #fff7ed);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.buildings-page :is(button, a, input, select):focus-visible[b-afwb7eqs24] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* Commercial readability floor: every action keeps a full-size label, while
   passive identifiers and operational metadata remain compact at 12px. The
   descendant rule prevents a badge or secondary line inside a button from
   shrinking the actual action label. */
.buildings-page :is(button, a, summary, label, input, select)[b-afwb7eqs24] {
    font-size: .875rem;
}

.buildings-page :is(button, a, summary, label) :is(span, strong, small)[b-afwb7eqs24] {
    font-size: inherit;
}

/* ---- narrower screens ------------------------------------------------ */

@media (max-width: 1400px) {
    .bld-workspace[b-afwb7eqs24] { grid-template-columns: minmax(210px, 240px) minmax(0, 1fr); }
    .bld-inspector[b-afwb7eqs24] { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .bld-workspace[b-afwb7eqs24] { grid-template-columns: minmax(0, 1fr); }
    .bld-tree[b-afwb7eqs24] { max-height: 16rem; }
    .bld-map[b-afwb7eqs24] { min-height: 18rem; }
    .bld-empty-inspector[b-afwb7eqs24] { padding: 1rem; }
}

@media (max-width: 620px), (hover: none), (any-pointer: coarse) {
    .buildings-page input[b-afwb7eqs24],
    .buildings-page select[b-afwb7eqs24] { min-height: 44px; font-size: 16px; }
    /* The rule above cannot reach the picker: scoped CSS stamps the attribute
       on the last element of the selector, and that input belongs to InputFile. */
    .bld-file[b-afwb7eqs24]  input[type="file"] { min-height: 44px; font-size: 16px; }
    .bld-node[b-afwb7eqs24],
    .bld-stage-tabs > button[b-afwb7eqs24],
    .bld-primary-button[b-afwb7eqs24],
    .bld-ghost-button[b-afwb7eqs24],
    .bld-danger-button[b-afwb7eqs24] { min-height: 44px; }
    .bld-plan-placement[b-afwb7eqs24] { align-items: stretch; flex-direction: column; font-size: .82rem; }
    .bld-plan-placement button[b-afwb7eqs24],
    .bld-plan-action[b-afwb7eqs24],
    .bld-camera-name[b-afwb7eqs24],
    .bld-tiny-button[b-afwb7eqs24] { min-height: 44px; }
    .bld-tiny-button[b-afwb7eqs24] { min-width: 44px; }
    .bld-camera-name[b-afwb7eqs24],
    .bld-plan-action[b-afwb7eqs24] { font-size: .8rem; }
    .bld-zoom button[b-afwb7eqs24] { min-width: 44px; min-height: 44px; font-size: .875rem; }
}

@media (max-width: 620px) {
    .buildings-page[b-afwb7eqs24] { gap: .65rem; padding: .65rem .65rem calc(.85rem + env(safe-area-inset-bottom)); }
    .bld-bar[b-afwb7eqs24] { padding: 0; }
    .bld-bar-stats[b-afwb7eqs24] { gap: .4rem; }
    .bld-pane-head[b-afwb7eqs24] { gap: .5rem; padding: .6rem .75rem; }
    .bld-inspector .bld-pane-head h2[b-afwb7eqs24] { flex-basis: 100%; }
    .bld-alert[b-afwb7eqs24] { grid-template-columns: minmax(0, 1fr); }
    .bld-confirm-actions[b-afwb7eqs24] { flex-wrap: wrap; }
    .bld-save-row[b-afwb7eqs24] { align-items: stretch; }
    .bld-save-row .bld-primary-button[b-afwb7eqs24] { flex: 1 0 100%; margin-left: 0; }
    .bld-stage-tabs[b-afwb7eqs24] {
        flex-wrap: wrap;
        overflow-x: hidden;
    }
    .bld-stage-tools[b-afwb7eqs24] {
        flex: 1 0 100%;
        min-width: 0;
        margin-left: 0;
        padding-left: 0;
    }
    .bld-stage-tools:has(> .bld-ghost-button)[b-afwb7eqs24] { flex: 0 1 auto; margin-left: auto; }
    .bld-zoom[b-afwb7eqs24] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        border-radius: .75rem;
    }
    .bld-zoom button[b-afwb7eqs24],
    .bld-zoom button:nth-child(2)[b-afwb7eqs24] { min-width: 0; }
    .bld-bulk-body[b-afwb7eqs24] { min-width: 0; padding: 0 .65rem .65rem; }
    .bld-bulk-filters[b-afwb7eqs24] { align-items: stretch; flex-direction: column; }
    .bld-bulk-filters label[b-afwb7eqs24],
    .bld-bulk-filters label:first-child[b-afwb7eqs24],
    .bld-bulk-filters label:not(:first-child)[b-afwb7eqs24] { flex: 1 1 auto; width: 100%; }
    .bld-bulk-filters .bld-hint[b-afwb7eqs24] { margin-left: 0; }
    .bld-table[b-afwb7eqs24],
    .bld-table tbody[b-afwb7eqs24],
    .bld-table tr[b-afwb7eqs24],
    .bld-table th[b-afwb7eqs24],
    .bld-table td[b-afwb7eqs24] { display: block; width: 100%; }
    .bld-table thead[b-afwb7eqs24] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .bld-table tbody[b-afwb7eqs24] { display: grid; gap: .65rem; }
    .bld-table tbody tr[b-afwb7eqs24] {
        display: grid;
        gap: .5rem;
        padding: .7rem;
        border: 1px solid var(--bld-border);
        border-radius: .75rem;
        background: var(--bld-soft);
    }
    .bld-table tbody th[b-afwb7eqs24],
    .bld-table tbody td[b-afwb7eqs24] { padding: 0; border: 0; white-space: normal; }
    .bld-table tbody th[b-afwb7eqs24] { font-size: .82rem; }
    .bld-table tbody td[data-label][b-afwb7eqs24]::before {
        display: block;
        margin-bottom: .2rem;
        color: var(--bld-muted);
        content: attr(data-label);
        font-size: .75rem;
        font-weight: 600;
    }
    .bld-table .bld-table-action button[b-afwb7eqs24] { width: 100%; min-height: 44px; font-size: .875rem; }
    .bld-window-footer[b-afwb7eqs24] { align-items: stretch; flex-direction: column; border-top: 1px solid var(--bld-border); border-radius: .72rem; }
    .bld-window-footer button[b-afwb7eqs24] { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .bld-node[b-afwb7eqs24] { transition: none; }
}
/* /Components/Pages/CameraGroups.razor.rz.scp.css */
.camera-groups-page[b-76kjesvw7w] {
    --groups-surface: var(--pulse-surface);
    --groups-soft: var(--pulse-surface-soft);
    --groups-border: var(--pulse-border);
    --groups-ink: var(--pulse-text);
    --groups-muted: var(--pulse-muted);
    --groups-accent: var(--pulse-accent);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: calc(100vh - 6rem);
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--groups-ink);
    line-height: 1.45;
}
.groups-breadcrumbs[b-76kjesvw7w] { display: flex; flex-wrap: wrap; width: fit-content; gap: .5rem; align-items: center; color: var(--groups-muted); font-size: .75rem; }
.groups-breadcrumbs a[b-76kjesvw7w] { display: inline-flex; min-height: 44px; align-items: center; color: var(--groups-accent); font-weight: 600; text-decoration: none; }
.groups-hero[b-76kjesvw7w] { display: flex; flex-wrap: wrap; gap: var(--pulse-workspace-hero-pad-y, 14px) 1rem; align-items: center; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); margin-bottom: .85rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
.groups-hero > *[b-76kjesvw7w] { position: relative; z-index: 1; }
.groups-eyebrow[b-76kjesvw7w] { display: inline-flex; align-items: center; margin: 0 0 .35rem; color: var(--pulse-accent); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.groups-hero h1[b-76kjesvw7w] { margin: 0; color: var(--pulse-text); font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.groups-title[b-76kjesvw7w] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; }
.groups-hero-actions[b-76kjesvw7w] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.groups-hero[b-76kjesvw7w]  .camera-management-tabs ul { padding: 0; }
.groups-primary[b-76kjesvw7w] { display: inline-flex; min-height: 2.8rem; gap: .5rem; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-on-action); background: var(--pulse-action); font: inherit; font-size: .875rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.groups-primary:hover:not(:disabled)[b-76kjesvw7w] { background: var(--pulse-action-hover); border-color: var(--pulse-action-hover); }
.groups-primary:disabled[b-76kjesvw7w] { cursor: wait; opacity: .58; }
.groups-primary svg[b-76kjesvw7w] { width: 1.08rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.groups-notice[b-76kjesvw7w] { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; margin-bottom: .85rem; padding: .72rem .82rem; border: 1px solid var(--pulse-success-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; }
.groups-notice.error[b-76kjesvw7w] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.groups-notice.syncing[b-76kjesvw7w] { border-color: var(--pulse-info-border); color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.groups-notice > span[b-76kjesvw7w] { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: inherit; font-weight: 700; }
.groups-notice.syncing > span[b-76kjesvw7w] { color: inherit; background: transparent; }
.groups-notice p[b-76kjesvw7w] { margin: 0; }
/* The bare-glyph treatment is for the dismiss "×" only; an action like "Try
   again" needs button chrome or it reads as oversized stray text. */
.groups-notice button[aria-label][b-76kjesvw7w] { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--pulse-radius-sm, 8px); color: currentColor; background: transparent; font-size: 1.2rem; cursor: pointer; }
/* One recovery affordance for this page: the same outlined button in the inline
   banner and in the failed-read empty state, so retrying never reads as the
   page's primary action. */
.notice-retry[b-76kjesvw7w] { min-height: 44px; padding: .3rem .7rem; border: 1px solid currentColor; border-radius: var(--pulse-radius-sm, 8px); color: inherit; background: transparent; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.notice-retry:disabled[b-76kjesvw7w] { cursor: default; opacity: .55; }
.groups-empty .notice-retry[b-76kjesvw7w] { color: var(--groups-ink); }
.groups-summary[b-76kjesvw7w] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: .85rem 0 0; }
.groups-summary article[b-76kjesvw7w] { display: flex; gap: .6rem; align-items: center; min-width: 0; min-height: 3.75rem; padding: .65rem .75rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-md, 12px); background: var(--groups-surface); }
.summary-mark[b-76kjesvw7w] { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-muted); background: var(--groups-soft); }
.summary-mark.assigned[b-76kjesvw7w] { color: var(--groups-muted); background: var(--groups-soft); }
.summary-mark.ungrouped[b-76kjesvw7w] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.summary-mark svg[b-76kjesvw7w] { width: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.groups-summary article > div[b-76kjesvw7w] { display: grid; min-width: 0; gap: .1rem; }
.groups-summary strong[b-76kjesvw7w] { font-size: 1.125rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.groups-summary small[b-76kjesvw7w] { color: var(--groups-muted); font-size: .75rem; overflow-wrap: anywhere; }
.groups-panel[b-76kjesvw7w] { border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--groups-surface); }
.groups-toolbar[b-76kjesvw7w] { display: flex; gap: .85rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--groups-border); }
.groups-toolbar h2[b-76kjesvw7w] { margin: 0; font-size: .95rem; }
.groups-toolbar p[b-76kjesvw7w] { margin: .25rem 0 0; color: var(--groups-muted); font-size: .75rem; line-height: 1.45; }
.groups-search[b-76kjesvw7w] { display: flex; width: min(21rem, 100%); min-height: 44px; gap: .5rem; align-items: center; padding: 0 .68rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--groups-soft); }
.groups-search:focus-within[b-76kjesvw7w] { border-color: var(--groups-accent); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.groups-search svg[b-76kjesvw7w] { flex: 0 0 1rem; width: 1rem; fill: none; stroke: var(--groups-muted); stroke-linecap: round; stroke-width: 1.7; }
.groups-search input[b-76kjesvw7w] { width: 100%; min-height: 24px; border: 0; outline: 0; color: var(--groups-ink); background: transparent; font: inherit; font-size: .875rem; }
.groups-loading[b-76kjesvw7w], .groups-empty[b-76kjesvw7w] { display: grid; min-height: 13rem; gap: .6rem; place-items: center; align-content: center; padding: 1.5rem; color: var(--groups-muted); font-size: .875rem; text-align: center; }
.groups-loading > span[b-76kjesvw7w] { width: 1.6rem; height: 1.6rem; border: 2px solid var(--groups-border); border-top-color: var(--groups-accent); border-radius: 50%; animation: group-spin-b-76kjesvw7w 700ms linear infinite; }
.groups-empty .empty-visual[b-76kjesvw7w] { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--pulse-radius-xl, 16px); color: var(--groups-accent); background: color-mix(in srgb, var(--groups-accent) 9%, transparent); }
.groups-empty svg[b-76kjesvw7w] { width: 1.8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.groups-empty h3[b-76kjesvw7w] { margin: .15rem 0 0; color: var(--groups-ink); font-size: .95rem; }
.groups-empty p[b-76kjesvw7w] { max-width: 28rem; margin: 0; line-height: 1.5; }
.group-card-grid[b-76kjesvw7w] { display: grid; grid-template-columns: 1fr; gap: .6rem; padding: .75rem; }
.group-card[b-76kjesvw7w] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, auto); min-width: 0; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-md, 12px); background: var(--groups-surface); transition: border-color .14s ease; }
.group-card:hover[b-76kjesvw7w] { border-color: color-mix(in srgb, var(--groups-accent) 35%, var(--groups-border)); }
.group-card > header[b-76kjesvw7w] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-column: 1; grid-row: 1; gap: .65rem; align-items: center; padding: .8rem; }
.group-card-icon[b-76kjesvw7w] { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-accent); background: color-mix(in srgb, var(--groups-accent) 9%, transparent); }
.group-card-icon svg[b-76kjesvw7w] { width: 1.18rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.group-card h3[b-76kjesvw7w] { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.group-card header p[b-76kjesvw7w] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .2rem 0 0; color: var(--groups-muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.camera-count[b-76kjesvw7w] { padding: .24rem .48rem; border-radius: 999px; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.camera-preview[b-76kjesvw7w] { display: flex; grid-column: 1 / -1; grid-row: 2; gap: .35rem; align-content: flex-start; flex-wrap: wrap; padding: .55rem .8rem; border-top: 1px solid var(--groups-border); background: var(--groups-soft); border-radius: 0 0 var(--pulse-radius-md, 12px) var(--pulse-radius-md, 12px); }
.camera-pill[b-76kjesvw7w] { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: .3rem; align-items: center; padding: .28rem .45rem; border: 1px solid var(--groups-border); border-radius: 999px; color: var(--groups-ink); background: var(--groups-surface); font-size: .75rem; font-weight: 600; overflow-wrap: anywhere; }
.camera-pill > span[b-76kjesvw7w] { width: .4rem; height: .4rem; border-radius: 50%; background: var(--pulse-success); }
.camera-pill > .resource-dot.iot[b-76kjesvw7w] { background: var(--pulse-info); }
.camera-pill b[b-76kjesvw7w] { padding: .08rem .26rem; border-radius: 999px; color: var(--groups-accent); background: color-mix(in srgb,var(--groups-accent) 8%,transparent); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.camera-pill small[b-76kjesvw7w] { max-width: 100%; color: var(--groups-muted); overflow-wrap: anywhere; }
.camera-pill.retired[b-76kjesvw7w] { opacity: .62; }
.camera-pill.retired > span[b-76kjesvw7w] { background: var(--groups-muted); }
.camera-pill.more[b-76kjesvw7w] { color: var(--groups-accent); border-style: dashed; }
.group-no-cameras[b-76kjesvw7w] { display: grid; grid-column: 1 / -1; grid-row: 2; padding: .55rem .8rem; border-top: 1px solid var(--groups-border); color: var(--groups-muted); background: var(--groups-soft); border-radius: 0 0 var(--pulse-radius-md, 12px) var(--pulse-radius-md, 12px); font-size: .75rem; }
.group-card > footer[b-76kjesvw7w] { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; gap: .45rem; align-items: flex-end; justify-content: center; padding: .65rem .8rem; border-left: 1px solid var(--groups-border); color: var(--groups-muted); font-size: .75rem; }
.group-card footer > div[b-76kjesvw7w] { display: flex; flex-wrap: wrap; gap: .35rem; }
.group-card footer button[b-76kjesvw7w] { min-height: 44px; padding: .3rem .55rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-accent); background: var(--groups-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.group-card footer button:hover:not(:disabled)[b-76kjesvw7w] { border-color: var(--groups-accent); }
.group-card footer button.archive[b-76kjesvw7w] { border-color: transparent; color: var(--pulse-danger-text); background: transparent; }
.groups-archived[b-76kjesvw7w] { margin-top: .85rem; padding: .7rem 1rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-md, 12px); background: var(--groups-surface); }
.groups-archived > summary[b-76kjesvw7w] { display: flex; gap: .5rem; align-items: center; min-height: 44px; color: var(--groups-ink); font-size: .875rem; font-weight: 700; cursor: pointer; }
.groups-archived .archived-note[b-76kjesvw7w] { margin: .5rem 0 .65rem; color: var(--groups-muted); font-size: .75rem; line-height: 1.45; }
.groups-archived ul[b-76kjesvw7w] { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.groups-archived li[b-76kjesvw7w] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: .7rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--groups-soft); }
.groups-archived li > div[b-76kjesvw7w] { display: grid; min-width: 0; }
.groups-archived strong[b-76kjesvw7w] { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.groups-archived small[b-76kjesvw7w] { color: var(--groups-muted); font-size: .75rem; overflow-wrap: anywhere; }
.archived-tally[b-76kjesvw7w] { padding: .2rem .45rem; border-radius: 999px; color: var(--groups-muted); background: color-mix(in srgb, var(--groups-muted) 12%, transparent); font-size: .75rem; font-weight: 600; overflow-wrap: anywhere; }
.groups-archived li button[b-76kjesvw7w] { min-height: 44px; padding: .3rem .65rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-accent); background: var(--groups-surface); font: inherit; font-size: .875rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.groups-archived li button:hover:not(:disabled)[b-76kjesvw7w] { border-color: var(--groups-accent); }
.groups-archived li button:disabled[b-76kjesvw7w] { cursor: not-allowed; opacity: .48; }
.groups-guidance[b-76kjesvw7w] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin-top: .85rem; padding: .85rem 1rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-md, 12px); color: var(--groups-muted); background: var(--groups-surface); }
.groups-guidance > svg[b-76kjesvw7w] { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.groups-guidance strong[b-76kjesvw7w] { font-size: .75rem; }
.groups-guidance p[b-76kjesvw7w] { margin: .2rem 0 0; color: var(--groups-muted); font-size: .75rem; line-height: 1.45; }
.groups-guidance a[b-76kjesvw7w] { display: inline-flex; min-height: 44px; align-items: center; padding: .45rem .65rem; border: 1px solid var(--pulse-info-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-info-strong); background: var(--groups-surface); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.group-modal[b-76kjesvw7w] { position: fixed; inset: 0; z-index: 145; display: grid; place-items: center; padding: clamp(.65rem,2vw,1.35rem); --groups-surface: var(--pulse-surface); --groups-soft: var(--pulse-surface-soft); --groups-border: var(--pulse-border); --groups-ink: var(--pulse-text); --groups-muted: var(--pulse-muted); --groups-accent: var(--pulse-accent); }
.group-modal-backdrop[b-76kjesvw7w] { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; background: rgba(4,12,22,.68); cursor: default; }
.group-editor[b-76kjesvw7w], .archive-dialog[b-76kjesvw7w], .discard-dialog[b-76kjesvw7w] { position: relative; z-index: 1; overflow: auto; max-height: calc(100dvh - 2rem); border: 1px solid var(--groups-border); color: var(--groups-ink); background: var(--groups-surface); box-shadow: var(--pulse-shadow-lg); }
.group-editor[b-76kjesvw7w] { width: min(64rem,100%); border-radius: var(--pulse-radius-xl, 16px); }
.group-editor > header[b-76kjesvw7w] { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--groups-border); }
.editor-icon[b-76kjesvw7w] { display: grid; flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: var(--pulse-radius-md, 12px); color: var(--groups-accent); background: color-mix(in srgb,var(--groups-accent) 9%,transparent); }
.editor-icon svg[b-76kjesvw7w] { width: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.group-editor .groups-eyebrow[b-76kjesvw7w] { margin-bottom: .1rem; color: var(--groups-accent); }
.group-editor h2[b-76kjesvw7w] { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; overflow-wrap: anywhere; }
.editor-close[b-76kjesvw7w] { display: grid; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; place-items: center; border: 1px solid transparent; border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-muted); background: transparent; font: inherit; font-size: 1.45rem; cursor: pointer; }
.editor-close:hover:not(:disabled)[b-76kjesvw7w] { border-color: var(--groups-border); color: var(--groups-ink); background: var(--groups-soft); }
.editor-intro[b-76kjesvw7w] { margin: 0; padding: .75rem 1.15rem; border-bottom: 1px solid var(--groups-border); color: var(--groups-muted); font-size: .75rem; line-height: 1.5; }
.editor-error[b-76kjesvw7w] { margin: .75rem 1.15rem 0; padding: .7rem .8rem; border: 1px solid var(--pulse-danger-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); font-size: .75rem; }
.group-editor form[b-76kjesvw7w] { display: grid; gap: .75rem; padding: .85rem 1.15rem 0; }
.editor-details[b-76kjesvw7w], .editor-cameras[b-76kjesvw7w] { padding: .85rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-md, 12px); background: var(--groups-soft); }
.editor-details > header[b-76kjesvw7w], .camera-editor-heading[b-76kjesvw7w] { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .75rem; }
.editor-details > header > span[b-76kjesvw7w], .camera-editor-heading > span[b-76kjesvw7w] { display: grid; flex: 0 0 1.55rem; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-on-action); background: var(--pulse-action); font-size: .75rem; font-weight: 700; }
.editor-details h3[b-76kjesvw7w], .camera-editor-heading h3[b-76kjesvw7w] { margin: 0; font-size: .8rem; }
.editor-details header p[b-76kjesvw7w], .camera-editor-heading p[b-76kjesvw7w] { margin: .15rem 0 0; color: var(--groups-muted); font-size: .75rem; }
.editor-field-grid[b-76kjesvw7w] { display: grid; grid-template-columns: minmax(12rem,.72fr) minmax(16rem,1.28fr); gap: .7rem; }
.editor-field-grid label[b-76kjesvw7w] { display: grid; gap: .35rem; color: var(--groups-ink); font-size: .875rem; font-weight: 700; }
.editor-field-grid label > span[b-76kjesvw7w] { display: flex; }
.editor-field-grid em[b-76kjesvw7w] { margin-left: auto; color: var(--groups-muted); font-size: .75rem; font-style: normal; text-transform: uppercase; }
.editor-field-grid input[b-76kjesvw7w], .editor-field-grid textarea[b-76kjesvw7w], .camera-filters input[b-76kjesvw7w], .camera-filters select[b-76kjesvw7w] { width: 100%; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); outline: 0; color: var(--groups-ink); background: var(--groups-surface); font: inherit; font-size: .875rem; }
.editor-field-grid input[b-76kjesvw7w] { min-height: 44px; padding: .55rem .68rem; }
.editor-field-grid textarea[b-76kjesvw7w] { min-height: 44px; padding: .55rem .68rem; resize: vertical; }
.editor-field-grid :is(input,textarea):focus[b-76kjesvw7w], .camera-filters :is(input,select):focus[b-76kjesvw7w] { border-color: var(--groups-accent); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.camera-filters[b-76kjesvw7w] { display: grid; grid-template-columns: minmax(0,1fr) minmax(10rem,.3fr); gap: .55rem; margin-bottom: .6rem; }
.camera-filters label:first-child[b-76kjesvw7w] { display: flex; align-items: center; }
.camera-filters label:first-child svg[b-76kjesvw7w] { position: absolute; width: 1rem; margin-left: .68rem; fill: none; stroke: var(--groups-muted); stroke-linecap: round; stroke-width: 1.7; pointer-events: none; }
.camera-filters input[b-76kjesvw7w] { min-height: 44px; padding: .5rem .65rem .5rem 2.2rem; }
.camera-filters select[b-76kjesvw7w] { min-height: 44px; padding: .45rem .65rem; }
.camera-selection-toolbar[b-76kjesvw7w] { display: flex; gap: .65rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; padding: .5rem .55rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); background: color-mix(in srgb,var(--groups-surface) 72%,var(--groups-soft)); }
.camera-selection-summary[b-76kjesvw7w] { display: grid; min-width: 0; gap: .1rem; margin: 0; color: var(--groups-muted); font-size: .75rem; }
.camera-selection-summary strong[b-76kjesvw7w] { color: var(--groups-ink); font-size: .75rem; }
.camera-bulk-actions[b-76kjesvw7w] { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.camera-bulk-actions button[b-76kjesvw7w] { min-height: 44px; padding: .3rem .5rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-accent); background: var(--groups-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.camera-bulk-actions button:hover:not(:disabled)[b-76kjesvw7w] { border-color: var(--groups-accent); background: color-mix(in srgb,var(--groups-accent) 6%,var(--groups-surface)); }
.camera-bulk-actions button.clear-all[b-76kjesvw7w] { color: var(--pulse-danger-text); }
.camera-bulk-actions button:disabled[b-76kjesvw7w] { cursor: not-allowed; opacity: .48; }
.camera-checklist[b-76kjesvw7w] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; max-height: 22rem; padding: .25rem; overflow: auto; overscroll-behavior: contain; }
.camera-window-more[b-76kjesvw7w] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; width:100%; min-height:44px; margin-top:.55rem; padding:.55rem .75rem; border:1px solid var(--groups-border); border-radius:.62rem; color:var(--groups-accent); background:var(--groups-surface); font:inherit; font-size:.875rem; font-weight: 700; cursor:pointer; }
.camera-window-more:hover[b-76kjesvw7w] { border-color:var(--groups-accent); background:color-mix(in srgb,var(--groups-accent) 6%,var(--groups-surface)); }
.camera-window-more span[b-76kjesvw7w] { color:var(--groups-muted); font-size:.75rem; font-weight: 600; }
.camera-check[b-76kjesvw7w] { position: relative; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto; gap: .52rem; align-items: center; min-width: 0; min-height: 44px; padding: .55rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--groups-surface); cursor: pointer; }
.camera-check.selected[b-76kjesvw7w] { border-color: color-mix(in srgb,var(--groups-accent) 48%,var(--groups-border)); background: color-mix(in srgb,var(--groups-accent) 6%,var(--groups-surface)); }
.camera-check.retired[b-76kjesvw7w] { opacity: .72; }
.camera-check > input[b-76kjesvw7w] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.camera-check-mark[b-76kjesvw7w] { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border: 1px solid var(--groups-border); border-radius: .34rem; color: transparent; background: var(--groups-surface); font-size: .75rem; }
.camera-check.selected .camera-check-mark[b-76kjesvw7w] { border-color: var(--pulse-action); color: var(--pulse-on-action); background: var(--pulse-action); }
.camera-check:focus-within[b-76kjesvw7w] { outline: 3px solid var(--pulse-focus-ring); outline-offset: -3px; }
.camera-glyph[b-76kjesvw7w] { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .52rem; color: var(--groups-accent); background: color-mix(in srgb,var(--groups-accent) 9%,transparent); }
.camera-glyph.iot[b-76kjesvw7w] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.camera-glyph svg[b-76kjesvw7w] { width: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.camera-check-copy[b-76kjesvw7w] { display: grid; min-width: 0; }
.camera-check-copy strong[b-76kjesvw7w], .camera-check-copy small[b-76kjesvw7w] { overflow-wrap: anywhere; }
.camera-check-copy strong[b-76kjesvw7w] { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.camera-check-copy small[b-76kjesvw7w] { color: var(--groups-muted); font-size: .75rem; }
.camera-check-copy small span[b-76kjesvw7w] { color: var(--groups-accent); font-weight: 600; }
.resource-type[b-76kjesvw7w] { padding: .18rem .34rem; border-radius: 999px; color: var(--groups-accent); background: color-mix(in srgb,var(--groups-accent) 9%,transparent); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.resource-type.iot[b-76kjesvw7w] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.camera-state[b-76kjesvw7w] { padding: .19rem .36rem; border-radius: 999px; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; }
.camera-state.retired[b-76kjesvw7w] { color: var(--groups-muted); background: var(--groups-soft); }
.camera-list-empty[b-76kjesvw7w] { display: grid; min-height: 8rem; place-items: center; padding: 1rem; border: 1px dashed var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-muted); font-size: .75rem; text-align: center; }
.membership-note[b-76kjesvw7w] { margin: .6rem 0 0; color: var(--groups-muted); font-size: .75rem; line-height: 1.45; }
.membership-note strong[b-76kjesvw7w] { color: var(--groups-ink); }
.editor-actions[b-76kjesvw7w] { position: sticky; bottom: 0; z-index: 2; display: flex; gap: .6rem; justify-content: flex-end; margin: 0 -1.15rem; padding: .85rem 1.15rem; border-top: 1px solid var(--groups-border); background: var(--groups-surface); }
.editor-secondary[b-76kjesvw7w], .archive-confirm[b-76kjesvw7w], .discard-confirm[b-76kjesvw7w] { min-height: 44px; padding: .58rem .9rem; border: 1px solid var(--groups-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--groups-ink); background: var(--groups-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.editor-secondary:hover:not(:disabled)[b-76kjesvw7w] { border-color: var(--groups-accent); color: var(--groups-accent); }
.archive-dialog[b-76kjesvw7w], .discard-dialog[b-76kjesvw7w] { display: grid; width: min(29rem,100%); gap: .65rem; justify-items: center; padding: 1.35rem; border-radius: var(--pulse-radius-xl, 16px); text-align: center; }
.archive-icon[b-76kjesvw7w] { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border-radius: var(--pulse-radius-md, 12px); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.discard-icon[b-76kjesvw7w] { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border-radius: var(--pulse-radius-md, 12px); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.archive-icon svg[b-76kjesvw7w], .discard-icon svg[b-76kjesvw7w] { width: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.archive-dialog h2[b-76kjesvw7w], .discard-dialog h2[b-76kjesvw7w] { margin: .15rem 0 0; font-size: 1.15rem; }
.archive-dialog p[b-76kjesvw7w], .discard-dialog p[b-76kjesvw7w] { margin: 0; color: var(--groups-muted); font-size: .75rem; line-height: 1.52; }
.archive-dialog > div[b-76kjesvw7w], .discard-dialog > div[b-76kjesvw7w] { display: flex; gap: .55rem; margin-top: .35rem; }
.archive-confirm[b-76kjesvw7w], .discard-confirm[b-76kjesvw7w] { border-color: var(--pulse-danger); color: #fff; background: var(--pulse-danger); }
.group-modal-discard[b-76kjesvw7w] { z-index: 150; }
:is(.camera-groups-page, .group-modal) :is(button, a, label, input, select, textarea)[b-76kjesvw7w] { font-size: .875rem; }
:is(.camera-groups-page, .group-modal) :is(button, a, label) :is(strong, small, span, b, em)[b-76kjesvw7w] { font-size: inherit; }
.camera-groups-page .groups-notice button[aria-label][b-76kjesvw7w] { font-size: 1.2rem; }
.group-modal .editor-close[b-76kjesvw7w] { font-size: 1.45rem; }
.camera-groups-page :is(button,a,input,select,textarea):focus-visible[b-76kjesvw7w], .group-modal :is(button,input,select,textarea):focus-visible[b-76kjesvw7w] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
/* The refusal takes focus programmatically after a failed save, and plain
   :focus is what a programmatic move is guaranteed to match. */
.editor-error:focus[b-76kjesvw7w] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.editor-field-grid input[aria-invalid="true"][b-76kjesvw7w] { border-color: var(--pulse-danger-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse-danger-text) 12%, transparent); }
@keyframes group-spin-b-76kjesvw7w { to { transform: rotate(360deg); } }
@media (min-width: 1600px) {
    .group-card-grid[b-76kjesvw7w] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .group-card[b-76kjesvw7w] { grid-template-columns: minmax(0, 1fr) auto; }
    .group-card > footer[b-76kjesvw7w] { min-width: 0; }
}
@media (max-width: 1050px) { .groups-summary[b-76kjesvw7w] { grid-template-columns: repeat(2,minmax(0,1fr)); } .group-card[b-76kjesvw7w] { grid-template-columns: 1fr; } .group-card > header[b-76kjesvw7w] { grid-column: 1; grid-row: auto; } .group-card > footer[b-76kjesvw7w] { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px solid var(--groups-border); } .camera-preview[b-76kjesvw7w], .group-no-cameras[b-76kjesvw7w] { border-radius: 0; } }
@media (max-width: 780px) { .camera-groups-page[b-76kjesvw7w] { margin: 0; padding: .75rem; border-radius: var(--pulse-radius-xl, 16px); } .groups-hero[b-76kjesvw7w], .groups-toolbar[b-76kjesvw7w] { align-items: stretch; flex-direction: column; } .groups-hero[b-76kjesvw7w] { gap: .6rem; padding: 0; } .groups-hero-actions[b-76kjesvw7w] { flex-direction: column; align-items: stretch; } .groups-primary[b-76kjesvw7w] { align-self: flex-start; } .groups-search[b-76kjesvw7w] { width: 100%; } .groups-guidance[b-76kjesvw7w] { grid-template-columns: auto 1fr; } .groups-guidance a[b-76kjesvw7w] { grid-column: 2; width: fit-content; } .editor-field-grid[b-76kjesvw7w], .camera-checklist[b-76kjesvw7w] { grid-template-columns: 1fr; } .camera-selection-toolbar[b-76kjesvw7w] { align-items: stretch; flex-direction: column; } .camera-selection-summary[b-76kjesvw7w] { white-space: normal; } .camera-bulk-actions[b-76kjesvw7w] { justify-content: flex-start; } .group-editor[b-76kjesvw7w] { max-height: calc(100dvh - 1.25rem); } }
@media (max-width: 540px) { .groups-archived li[b-76kjesvw7w] { grid-template-columns: 1fr; justify-items: start; } .groups-archived li button[b-76kjesvw7w] { width: 100%; } .groups-summary[b-76kjesvw7w] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; } .groups-summary article[b-76kjesvw7w] { gap: .45rem; padding: .6rem; } .summary-mark[b-76kjesvw7w] { flex-basis: 1.65rem; width: 1.65rem; height: 1.65rem; } .group-card > header[b-76kjesvw7w] { grid-template-columns: auto minmax(0,1fr); } .camera-count[b-76kjesvw7w] { grid-column: 2; width: fit-content; } .group-card > footer[b-76kjesvw7w] { align-items: stretch; flex-direction: column; } .group-card footer > div[b-76kjesvw7w] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .camera-check[b-76kjesvw7w] { grid-template-columns: auto minmax(0,1fr) auto; } .camera-check-mark[b-76kjesvw7w] { grid-column: 1; grid-row: 1 / 3; } .camera-glyph[b-76kjesvw7w] { display: none; } .camera-check-copy[b-76kjesvw7w] { grid-column: 2 / -1; } .resource-type[b-76kjesvw7w] { grid-column: 2; justify-self: start; } .camera-state[b-76kjesvw7w] { grid-column: 3; } .groups-notice[b-76kjesvw7w] { align-items: start; } .groups-notice .notice-retry[b-76kjesvw7w] { grid-column: 2 / -1; justify-self: start; } .groups-guidance[b-76kjesvw7w] { grid-template-columns: 1fr; text-align: left; } .groups-guidance a[b-76kjesvw7w] { grid-column: auto; } .camera-editor-heading[b-76kjesvw7w] { flex-wrap: wrap; } .camera-bulk-actions button[b-76kjesvw7w] { flex: 1 1 calc(50% - .35rem); } .camera-filters[b-76kjesvw7w] { grid-template-columns: 1fr; } .camera-window-more[b-76kjesvw7w] { align-items:flex-start; flex-direction:column; } .editor-actions[b-76kjesvw7w] { flex-direction: column-reverse; } .editor-actions > *[b-76kjesvw7w] { width: 100%; } .archive-dialog > div[b-76kjesvw7w], .discard-dialog > div[b-76kjesvw7w] { width: 100%; flex-direction: column-reverse; } .archive-dialog button[b-76kjesvw7w], .discard-dialog button[b-76kjesvw7w] { width: 100%; } }
@media (max-width: 560px), (any-pointer: coarse) {
    .groups-breadcrumbs a[b-76kjesvw7w],
    .groups-notice button[b-76kjesvw7w],
    .notice-retry[b-76kjesvw7w],
    .groups-search[b-76kjesvw7w],
    .group-card footer button[b-76kjesvw7w],
    .groups-archived > summary[b-76kjesvw7w],
    .groups-archived li button[b-76kjesvw7w],
    .groups-guidance a[b-76kjesvw7w],
    .editor-close[b-76kjesvw7w],
    .camera-bulk-actions button[b-76kjesvw7w],
    .editor-secondary[b-76kjesvw7w],
    .archive-confirm[b-76kjesvw7w],
    .discard-confirm[b-76kjesvw7w],
    .groups-primary[b-76kjesvw7w] {
        min-height: 44px;
    }
    .groups-breadcrumbs a[b-76kjesvw7w],
    .groups-notice button[b-76kjesvw7w],
    .groups-guidance a[b-76kjesvw7w],
    .editor-close[b-76kjesvw7w] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .groups-notice button[aria-label][b-76kjesvw7w], .editor-close[b-76kjesvw7w] { min-width: 44px; }
    .groups-search input[b-76kjesvw7w],
    .editor-field-grid input[b-76kjesvw7w],
    .editor-field-grid textarea[b-76kjesvw7w],
    .camera-filters input[b-76kjesvw7w],
    .camera-filters select[b-76kjesvw7w] {
        font-size: 16px;
    }
}
@media (prefers-reduced-motion: reduce) { .groups-primary[b-76kjesvw7w], .group-card[b-76kjesvw7w] { transition: none; } .groups-loading > span[b-76kjesvw7w] { animation: none; } }

.groups-hint[b-76kjesvw7w] { margin: .3rem 0 0; color: var(--groups-muted, var(--pulse-muted)); font-size: .75rem; line-height: 1.5; }
/* /Components/Pages/CameraManagement.razor.rz.scp.css */
.camera-management-page[b-0t3e0fx4ig] {
    box-sizing: border-box;
    color: var(--pulse-text);
    display: grid;
    gap: var(--pulse-workspace-gap);
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
}

.camera-management-heading[b-0t3e0fx4ig] {
    align-items: center;
    display: flex;
    min-height: var(--pulse-control-min-height, 44px);
}

.camera-management-heading h1[b-0t3e0fx4ig] {
    font-size: var(--pulse-workspace-title-size);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0;
}

.camera-management-choices[b-0t3e0fx4ig] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.camera-management-card[b-0t3e0fx4ig] {
    align-content: start;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    display: grid;
    gap: .8rem;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-width: 0;
    padding: 1rem;
}

.camera-management-icon[b-0t3e0fx4ig] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-muted);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.camera-management-icon svg[b-0t3e0fx4ig],
.camera-management-open svg[b-0t3e0fx4ig] {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 20px;
}

.camera-management-copy[b-0t3e0fx4ig] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.camera-management-copy h2[b-0t3e0fx4ig] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: .1rem 0 .4rem;
}

.camera-management-copy p[b-0t3e0fx4ig] {
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
}

.camera-management-open[b-0t3e0fx4ig] {
    align-items: center;
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: .6rem;
    grid-column: 2;
    justify-self: start;
    line-height: 1.3;
    min-height: var(--pulse-control-min-height);
    padding: .6rem .85rem;
    text-decoration: none;
}

.camera-management-open svg[b-0t3e0fx4ig] {
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.camera-management-open:hover[b-0t3e0fx4ig] {
    background: var(--pulse-control-surface-hover);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-control-text);
}

.camera-management-open.is-primary[b-0t3e0fx4ig] {
    background: var(--pulse-action);
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
}

.camera-management-open.is-primary:hover[b-0t3e0fx4ig] {
    background: var(--pulse-action-hover);
    border-color: var(--pulse-action-hover);
}

.camera-management-open:focus-visible[b-0t3e0fx4ig] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 3px;
}

.camera-management-unavailable[b-0t3e0fx4ig] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
    padding: 1rem;
}

@media (min-width: 1280px) {
    .camera-management-card[b-0t3e0fx4ig] {
        align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
    }

    .camera-management-open[b-0t3e0fx4ig] {
        grid-column: 3;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    .camera-management-choices[b-0t3e0fx4ig] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .camera-management-open[b-0t3e0fx4ig] {
        grid-column: 1 / -1;
        justify-content: center;
        justify-self: stretch;
    }
}
/* /Components/Pages/Cameras.razor.rz.scp.css */
.camera-page[b-4mcjs7276c] {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: calc(100vh - 6rem);
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 1.5rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--pulse-text);
    display: grid;
    gap: var(--pulse-workspace-gap, 1rem);
    align-content: start;
    line-height: 1.45;
}

/* One 44px title row on the canvas: h1, the muted stat strip as its context
   fragment, and the primary action at the right. No card, no eyebrow, no lede. */
.camera-header[b-4mcjs7276c] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
    border: 0;
    background: transparent;
}

.camera-heading-copy[b-4mcjs7276c] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 24rem;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    max-width: none;
    column-gap: .9rem;
    row-gap: .15rem;
}


.camera-header h1[b-4mcjs7276c] {
    margin: 0;
    color: var(--pulse-text);
    font-size: var(--pulse-workspace-title-size, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.camera-header-summary[b-4mcjs7276c] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .8rem;
    justify-content: flex-start;
    color: var(--pulse-muted);
    font-size: var(--pulse-workspace-lede-size, 13px);
}

.camera-stat[b-4mcjs7276c] {
    display: flex;
    min-width: 0;
    gap: .3rem;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}

.camera-stat:first-child[b-4mcjs7276c] {
    border-left: 0;
}

.camera-stat strong[b-4mcjs7276c] {
    color: var(--pulse-text);
    font-size: inherit;
    font-weight: 700;
    line-height: 1.45;
}

.camera-stat span[b-4mcjs7276c] {
    color: var(--pulse-muted);
    font-size: inherit;
    font-weight: 500;
    line-height: 1.45;
}

.camera-header-actions[b-4mcjs7276c] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    margin-left: auto;
}

.camera-header-actions a[b-4mcjs7276c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .45rem .75rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease;
}

.camera-header-actions .camera-wall-link[b-4mcjs7276c] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.camera-header-actions a:hover[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    background: var(--pulse-control-surface-hover);
}

.camera-header-actions .camera-wall-link:hover[b-4mcjs7276c] {
    border-color: var(--pulse-action-hover);
    background: var(--pulse-action-hover);
}

/* One tool row: search + three filters at the left, count and actions at the
   right end of the same line; wraps on narrow widths. */
.camera-toolbar[b-4mcjs7276c] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    overflow: visible;
    padding: .6rem .9rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--pulse-surface);
    box-shadow: none;
}

.camera-filter-row[b-4mcjs7276c] {
    display: grid;
    flex: 1 1 36rem;
    min-width: 0;
    grid-template-columns: minmax(12rem, 1.4fr) repeat(3, minmax(8.5rem, 1fr));
    gap: .7rem;
    align-items: center;
}

/* The phone disclosure wraps the three secondary filters. Above the phone
   breakpoint it is display: contents, so the slots stay grid items of the
   filter row and the :last-child rules below keep matching. */
.camera-more-filters[b-4mcjs7276c] {
    display: contents;
}

.camera-filters-toggle[b-4mcjs7276c] {
    display: none;
}

.camera-search[b-4mcjs7276c],
.camera-select[b-4mcjs7276c] {
    position: relative;
    display: grid;
    min-width: 0;
    gap: .35rem;
}

/* The controls name themselves ("All video cameras (n)", "All servers", "All
   my groups", the search placeholder), so the labels stay for assistive
   technology only and the toolbar fits one line. */
.camera-search span[b-4mcjs7276c],
.camera-select > span[b-4mcjs7276c] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.camera-select[b-4mcjs7276c] {
    --group-filter-height: var(--pulse-control-min-height, 44px);
    --group-filter-radius: var(--pulse-radius-sm, 9px);
    --group-filter-border: var(--pulse-control-border);
    --group-filter-surface: var(--pulse-control-surface);
    --group-filter-font-size: .875rem;
}

.camera-search input[b-4mcjs7276c],
.camera-select select[b-4mcjs7276c] {
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem .7rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font: inherit;
    font-size: .875rem;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease;
}

.camera-search input[b-4mcjs7276c]::placeholder {
    color: var(--pulse-placeholder);
}

.camera-search input:hover[b-4mcjs7276c],
.camera-select select:hover[b-4mcjs7276c] {
    border-color: color-mix(in srgb, var(--pulse-accent) 55%, var(--pulse-border));
}

.camera-search input:focus[b-4mcjs7276c],
.camera-select select:focus[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    background: var(--pulse-surface-raised);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pulse-focus-ring) 18%, transparent);
    outline: 0;
}

.camera-toolbar-footer[b-4mcjs7276c] {
    display: flex;
    flex: 0 1 auto;
    gap: .75rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    padding-top: 0;
    border-top: 0;
}

.camera-toolbar-status[b-4mcjs7276c] {
    min-width: 0;
    color: var(--pulse-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.camera-toolbar-status strong[b-4mcjs7276c],
.camera-toolbar-status time[b-4mcjs7276c] {
    color: var(--pulse-text);
}

.camera-toolbar-actions[b-4mcjs7276c] {
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
    margin-left: auto;
}

.camera-refresh-button[b-4mcjs7276c],
.camera-clear-button[b-4mcjs7276c],
.camera-filters-toggle[b-4mcjs7276c],
.camera-state button[b-4mcjs7276c],
.camera-inline-error button[b-4mcjs7276c],
.camera-filter-notice button[b-4mcjs7276c] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem .8rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease;
}

.camera-state-primary[b-4mcjs7276c] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.camera-refresh-button[b-4mcjs7276c],
.camera-clear-button[b-4mcjs7276c],
.camera-filters-toggle[b-4mcjs7276c],
.camera-inline-error button[b-4mcjs7276c],
.camera-filter-notice button[b-4mcjs7276c] {
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
}

.camera-state-primary:hover:not(:disabled)[b-4mcjs7276c] {
    border-color: var(--pulse-action-hover);
    background: var(--pulse-action-hover);
}

.camera-refresh-button:hover:not(:disabled)[b-4mcjs7276c],
.camera-clear-button:hover:not(:disabled)[b-4mcjs7276c],
.camera-filters-toggle:hover:not(:disabled)[b-4mcjs7276c],
.camera-inline-error button:hover:not(:disabled)[b-4mcjs7276c],
.camera-filter-notice button:hover:not(:disabled)[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    background: var(--pulse-control-surface-hover);
}

.camera-page button:disabled[b-4mcjs7276c] {
    cursor: not-allowed;
    opacity: var(--pulse-disabled-opacity, .58);
}

.camera-inline-error[b-4mcjs7276c],
.camera-filter-notice[b-4mcjs7276c] {
    display: flex;
    gap: .85rem;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .85rem;
    border-radius: var(--pulse-radius-md);
    font-size: .78rem;
}

.camera-inline-error[b-4mcjs7276c] {
    border: 1px solid var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

.camera-filter-notice[b-4mcjs7276c] {
    border: 1px solid var(--pulse-info-border);
    color: var(--pulse-info-strong);
    background: var(--pulse-info-soft);
}

.camera-filter-notice > div[b-4mcjs7276c] {
    display: grid;
    gap: .2rem;
}

.camera-filter-notice span[b-4mcjs7276c] {
    color: var(--pulse-muted);
}

.camera-state[b-4mcjs7276c] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
    padding: 2rem 1.25rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-muted);
    background: var(--pulse-surface);
    font-size: .875rem;
    text-align: center;
}

.camera-state-error[b-4mcjs7276c] {
    border-color: var(--pulse-danger-border);
}

.camera-state h2[b-4mcjs7276c] {
    margin: .55rem 0 0;
    color: var(--pulse-text);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.camera-state p[b-4mcjs7276c] {
    max-width: 42rem;
    margin: .1rem 0 .8rem;
    line-height: 1.45;
}

.camera-state-icon[b-4mcjs7276c] {
    display: flex;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-info-strong);
    background: var(--pulse-info-soft);
    font-weight: 700;
    box-shadow: var(--pulse-shadow-sm);
}

.camera-state-icon svg[b-4mcjs7276c] {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.camera-state-error .camera-state-icon[b-4mcjs7276c] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.camera-state-spinner[b-4mcjs7276c] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--pulse-border);
    border-top-color: var(--pulse-accent);
    border-radius: 50%;
    animation: camera-inventory-spin-b-4mcjs7276c .8s linear infinite;
}

.camera-state-actions[b-4mcjs7276c] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    justify-content: center;
}

.camera-state-actions a[b-4mcjs7276c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem .8rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.camera-state-actions a:hover[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    background: var(--pulse-control-surface-hover);
}

.camera-state .camera-state-guidance[b-4mcjs7276c] {
    margin: .65rem 0 0;
    color: var(--pulse-muted);
    font-size: .75rem;
}

.camera-grid[b-4mcjs7276c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: clamp(.75rem, 1.4vw, 1rem);
    align-items: start;
}

.camera-card[b-4mcjs7276c] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .85rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    box-shadow: none;
    cursor: pointer;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: auto 13rem;
    transition: border-color var(--pulse-motion-fast) ease, background var(--pulse-motion-fast) ease, box-shadow var(--pulse-motion-fast) ease;
}

.camera-card:hover[b-4mcjs7276c],
.camera-card:focus-within[b-4mcjs7276c] {
    border-color: color-mix(in srgb, var(--pulse-accent) 58%, var(--pulse-border));
    background: color-mix(in srgb, var(--pulse-accent) 3%, var(--pulse-surface));
    box-shadow: none;
}

.camera-card-topline[b-4mcjs7276c] {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: space-between;
}

.camera-card-identity[b-4mcjs7276c] {
    display: flex;
    flex: 1 1 13rem;
    min-width: 0;
    gap: .65rem;
    align-items: center;
}

.camera-icon[b-4mcjs7276c] {
    position: relative;
    display: flex;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pulse-surface-soft);
}

.camera-body[b-4mcjs7276c] {
    position: absolute;
    width: 1.75rem;
    height: 1.25rem;
    border-radius: .3rem;
    background: var(--pulse-info-strong);
}

.camera-body[b-4mcjs7276c]::after {
    position: absolute;
    top: .12rem;
    left: 1.5rem;
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
    border-left: .68rem solid var(--pulse-info-strong);
    content: "";
}

.camera-lens[b-4mcjs7276c] {
    position: absolute;
    z-index: 1;
    width: .62rem;
    height: .62rem;
    border: 2px solid var(--pulse-info-strong);
    border-radius: 50%;
    background: var(--pulse-info-border);
}

.camera-badges[b-4mcjs7276c] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-start;
}

.camera-badge[b-4mcjs7276c] {
    padding: .3rem .48rem;
    border: 1px solid var(--pulse-border);
    border-radius: 999px;
    color: var(--pulse-muted);
    background: var(--pulse-surface-soft);
    font-size: .75rem;
    font-weight: 600;
}

.camera-badge-ptz[b-4mcjs7276c] {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.camera-badge-alarm[b-4mcjs7276c] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.camera-card-copy[b-4mcjs7276c] {
    min-width: 0;
    margin-top: 0;
}

.camera-card-copy h2[b-4mcjs7276c] {
    margin: 0;
    color: var(--pulse-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.camera-card-copy[b-4mcjs7276c]  .server-tag {
    margin-top: .25rem;
    margin-inline-start: 0;
}

.camera-card-prompt[b-4mcjs7276c] {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-height: 44px;
    margin: .35rem 0;
    border-radius: inherit;
    color: var(--pulse-link);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.camera-card-primary-link[b-4mcjs7276c]::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    content: "";
}

.camera-card-primary-link:focus-visible[b-4mcjs7276c] {
    outline: 0;
}

.camera-card-primary-link:focus-visible[b-4mcjs7276c]::after {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: -4px;
}

.camera-actions[b-4mcjs7276c] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--pulse-border);
}

.camera-actions a[b-4mcjs7276c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .42rem .58rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    background: var(--pulse-surface-soft);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--pulse-motion-fast) ease, color var(--pulse-motion-fast) ease;
}

.camera-actions a:hover[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    color: var(--pulse-accent);
}

.camera-pager[b-4mcjs7276c] {
    display: flex;
    gap: .85rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: .75rem;
}

.camera-pager span[b-4mcjs7276c] {
    color: var(--pulse-muted);
    font-size: .78rem;
    text-align: center;
}

.camera-pager strong[b-4mcjs7276c] {
    color: var(--pulse-text);
    font-variant-numeric: tabular-nums;
}

.camera-pager button[b-4mcjs7276c] {
    min-width: 7rem;
    min-height: var(--pulse-control-min-height, 44px);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font-size: .875rem;
    font-weight: 700;
}

.camera-pager button:not(:disabled):hover[b-4mcjs7276c] {
    border-color: var(--pulse-accent);
    color: var(--pulse-accent);
}

.camera-page :is(a, button, input, select):focus-visible:not(.camera-card-primary-link)[b-4mcjs7276c] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

@keyframes camera-inventory-spin-b-4mcjs7276c {
    to { transform: rotate(360deg); }
}

@media (max-width:1180px) {
    .camera-header[b-4mcjs7276c] { align-items: center; }
    .camera-filter-row[b-4mcjs7276c] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
    .camera-page[b-4mcjs7276c] {
        min-height: calc(100dvh - 4rem);
        margin: 0;
        padding: .75rem max(.75rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    }

    /* Title and "Build video wall" share the first row; the stat strip wraps
       under them so the toolbar starts within the first screen. */
    .camera-header[b-4mcjs7276c] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title actions" "stats stats";
        align-items: center;
        column-gap: .75rem;
        row-gap: .35rem;
        min-height: 0;
        padding: 0;
    }

    .camera-heading-copy[b-4mcjs7276c] { display: contents; }
    .camera-header h1[b-4mcjs7276c] { grid-area: title; }
    .camera-header-summary[b-4mcjs7276c] { grid-area: stats; }
    .camera-header-actions[b-4mcjs7276c] { grid-area: actions; display: flex; margin-left: 0; }
    .camera-header-actions a[b-4mcjs7276c] { min-height: var(--pulse-control-min-height, 44px); }

    .camera-toolbar[b-4mcjs7276c] { padding:.85rem; }
    .camera-filter-row[b-4mcjs7276c] { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .camera-search[b-4mcjs7276c], .camera-select:last-child[b-4mcjs7276c] { grid-column:1 / -1; }
    .camera-page:not(.phone-filters-open) .camera-more-filters[b-4mcjs7276c] { display: none; }
    .camera-filters-toggle[b-4mcjs7276c] { display: inline-flex; align-items: center; justify-content: center; }
    .camera-toolbar-footer[b-4mcjs7276c] { flex: 1 1 100%; align-items:stretch; flex-direction:column; margin-left:0; }
    .camera-toolbar-status[b-4mcjs7276c] { white-space: normal; }
    .camera-toolbar-actions[b-4mcjs7276c] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin-left:0; padding:0 max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left)); }
    .camera-toolbar-actions > button:only-child[b-4mcjs7276c] { grid-column:1 / -1; }
    /* The disclosure button makes the count odd whenever Clear filters is
       shown; the last button then takes the whole row instead of half. */
    .camera-toolbar-actions > button:last-child:nth-child(odd)[b-4mcjs7276c] { grid-column:1 / -1; }
    .camera-toolbar-actions button[b-4mcjs7276c] { width:100%; }
    .camera-search input[b-4mcjs7276c], .camera-select select[b-4mcjs7276c] { min-height:44px; font-size:16px; }

    .camera-inline-error[b-4mcjs7276c],
    .camera-filter-notice[b-4mcjs7276c] {
        align-items: stretch;
        flex-direction: column;
    }

    .camera-inline-error button[b-4mcjs7276c],
    .camera-filter-notice button[b-4mcjs7276c] {
        width: 100%;
    }

    .camera-state[b-4mcjs7276c] { min-height: 0; padding: 1.5rem 1rem; }
    .camera-state-actions[b-4mcjs7276c] { display: grid; width: 100%; max-width: 28rem; grid-template-columns: 1fr; }
    .camera-state-actions > *[b-4mcjs7276c] { width: 100%; }
    .camera-grid[b-4mcjs7276c] { grid-template-columns:1fr; gap:.7rem; }
    .camera-actions[b-4mcjs7276c] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .camera-actions a[b-4mcjs7276c] { display:flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem; text-align:center; }
    .camera-pager[b-4mcjs7276c] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width: 100%; }
    .camera-pager span[b-4mcjs7276c] { grid-column:1 / -1; grid-row:1; }
    .camera-pager button[b-4mcjs7276c] { min-width:0; width:100%; }
}

@media (hover:none), (pointer:coarse), (any-pointer:coarse) {
    .camera-header-actions a[b-4mcjs7276c],
    .camera-search input[b-4mcjs7276c],
    .camera-select select[b-4mcjs7276c],
    .camera-refresh-button[b-4mcjs7276c],
    .camera-clear-button[b-4mcjs7276c],
    .camera-filters-toggle[b-4mcjs7276c],
    .camera-state button[b-4mcjs7276c],
    .camera-state-actions a[b-4mcjs7276c],
    .camera-inline-error button[b-4mcjs7276c],
    .camera-filter-notice button[b-4mcjs7276c],
    .camera-actions a[b-4mcjs7276c] {
        min-height: 44px;
    }

    .camera-search input[b-4mcjs7276c],
    .camera-select select[b-4mcjs7276c] {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .camera-state-spinner[b-4mcjs7276c] { animation: none; border-top-color: var(--pulse-border); }
    .camera-header-actions a[b-4mcjs7276c],
    .camera-search input[b-4mcjs7276c],
    .camera-select select[b-4mcjs7276c],
    .camera-refresh-button[b-4mcjs7276c],
    .camera-clear-button[b-4mcjs7276c],
    .camera-filters-toggle[b-4mcjs7276c],
    .camera-state button[b-4mcjs7276c],
    .camera-state-actions a[b-4mcjs7276c],
    .camera-inline-error button[b-4mcjs7276c],
    .camera-filter-notice button[b-4mcjs7276c],
    .camera-card[b-4mcjs7276c],
    .camera-actions a[b-4mcjs7276c] {
        transition: none;
    }
}
/* /Components/Pages/CameraSettings.razor.rz.scp.css */
.camera-settings-page[b-bgcta2qonk] {
    --settings-surface: var(--pulse-surface);
    --settings-soft: var(--pulse-surface-soft);
    --settings-border: var(--pulse-border);
    --settings-ink: var(--pulse-text);
    --settings-muted: var(--pulse-muted);
    --settings-accent: var(--pulse-accent);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: calc(100vh - 6rem);
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    color: var(--settings-ink);
    background: transparent;
    line-height: 1.45;
}
.settings-breadcrumbs[b-bgcta2qonk] { display: flex; width: fit-content; gap: .5rem; align-items: center; padding: 0; border: 0; border-radius: 0; color: var(--settings-muted); background: transparent; font-size: .75rem; flex-wrap: wrap; }
.settings-breadcrumbs a[b-bgcta2qonk] { display: inline-flex; min-height: var(--pulse-control-min-height, 44px); align-items: center; color: var(--settings-accent); font-weight: 600; text-decoration: none; }
/* Keep administration surfaces quiet; selection and validation carry colour. */
.settings-hero[b-bgcta2qonk] { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); margin-bottom: var(--pulse-workspace-gap); padding: 0; border: 0; border-radius: 0; background: transparent; }
.settings-hero > *[b-bgcta2qonk] { position: relative; z-index: 1; }
.settings-title[b-bgcta2qonk] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; }
.settings-hero[b-bgcta2qonk]  .camera-management-tabs ul { padding: 0; }
.settings-eyebrow[b-bgcta2qonk] { display: inline-flex; gap: .375rem; align-items: center; margin: 0 0 .4rem; color: var(--pulse-accent); font-size: .75rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.settings-hero h1[b-bgcta2qonk] { margin: 0; color: var(--pulse-text); font-size: var(--pulse-workspace-title-size); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.settings-primary[b-bgcta2qonk] { display: inline-flex; min-height: var(--pulse-control-min-height, 44px); gap: .5rem; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--pulse-radius-sm, 8px); color: var(--pulse-on-action); background: var(--pulse-action); font: inherit; font-size: .875rem; font-weight: 600; white-space: normal; text-decoration: none; cursor: pointer; transition: background .14s ease, border-color .14s ease; line-height: 1.35; }
.settings-primary:hover:not(:disabled)[b-bgcta2qonk] { background: var(--pulse-action-hover); }
.settings-primary:disabled[b-bgcta2qonk] { cursor: not-allowed; opacity: .58; }
.settings-primary svg[b-bgcta2qonk] { width: 1.08rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.settings-notice[b-bgcta2qonk] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; margin-bottom: .85rem; padding: .72rem .82rem; border: 1px solid var(--pulse-success-border); border-radius: .72rem; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; line-height: 1.45; }
.settings-notice.error[b-bgcta2qonk] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.settings-notice.success[b-bgcta2qonk] { border-color: var(--pulse-success-border); }
.settings-notice.syncing[b-bgcta2qonk] { border-color: var(--pulse-info-border); color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
/* The disc inherits the notice's semantic colour and tints itself from it.
   Painting the background with currentColor while also setting color on the
   same element filled the disc with the glyph's own colour and hid the mark. */
.settings-notice > span[b-bgcta2qonk] { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; color: inherit; background: color-mix(in srgb, currentColor 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 36%, transparent); font-weight: 700; }
.settings-notice p[b-bgcta2qonk] { margin: 0; }
/* The bare-glyph treatment is for the dismiss "×" only; an action like "Try
   again" needs button chrome or it reads as oversized stray text. */
.settings-notice button[aria-label][b-bgcta2qonk] { border: 0; color: currentColor; background: transparent; font-size: 1.2rem; cursor: pointer; min-width: var(--pulse-control-min-height, 44px); min-height: var(--pulse-control-min-height, 44px); }
.settings-notice .notice-retry[b-bgcta2qonk] { padding: .3rem .7rem; border: 1px solid currentColor; border-radius: .5rem; color: inherit; background: transparent; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; min-height: var(--pulse-control-min-height, 44px); }
.settings-notice .notice-retry:disabled[b-bgcta2qonk] { cursor: default; opacity: .55; }
.settings-summary[b-bgcta2qonk] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin: var(--pulse-workspace-gap) 0 0; }
.settings-summary article[b-bgcta2qonk] { position: relative; display: flex;  gap: .5rem; align-items: center; min-height: 4rem; padding: .75rem; border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-md, 12px); background: var(--settings-surface); box-shadow: none; }
.summary-mark[b-bgcta2qonk] { display: grid; flex: 0 0 1.875rem; width: 1.875rem; height: 1.875rem; place-items: center; border-radius: var(--pulse-radius-sm, 8px); color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, transparent); }
.summary-mark.cameras[b-bgcta2qonk] { color: var(--settings-accent); }
.summary-mark.forced-on[b-bgcta2qonk] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.summary-mark.forced-off[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.summary-mark.maintenance[b-bgcta2qonk] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.summary-mark.inactive[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.summary-mark.retired[b-bgcta2qonk] { color: var(--settings-muted); background: var(--settings-soft); }
.summary-mark svg[b-bgcta2qonk] { width: 1.18rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.settings-summary article > div[b-bgcta2qonk] { display: grid; min-width: 0; gap: .125rem; }
.settings-summary strong[b-bgcta2qonk] { font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.settings-summary small[b-bgcta2qonk] { color: var(--settings-muted); font-size: .75rem; overflow-wrap: anywhere; line-height: 1.35; }
.global-snapshot-banner[b-bgcta2qonk] { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; min-height: var(--pulse-control-min-height, 44px); margin: 0; padding: .45rem .85rem; border: 1px solid var(--pulse-info-border); border-radius: .85rem; color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.global-snapshot-banner.off[b-bgcta2qonk] { border-color: var(--pulse-warning-border); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.global-snapshot-banner.on[b-bgcta2qonk] { border-color: var(--pulse-info-border); }
.global-snapshot-banner > svg[b-bgcta2qonk] { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.global-snapshot-banner strong[b-bgcta2qonk] { font-size: .8125rem; }
.global-snapshot-banner a[b-bgcta2qonk] { display: inline-flex; min-height: var(--pulse-control-min-height, 44px); align-items: center; justify-content: center; padding: .45rem .65rem; border: 1px solid currentColor; border-radius: var(--pulse-radius-sm, 8px); color: inherit; background: var(--settings-surface); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: normal; text-align: center; }
.settings-workbench[b-bgcta2qonk] { display: grid; min-width: 0; grid-template-columns: minmax(20rem, .9fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
.settings-workbench > *[b-bgcta2qonk] { min-width: 0; }
.camera-index[b-bgcta2qonk], .camera-editor[b-bgcta2qonk] {  border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--settings-surface); box-shadow: none; min-width: 0; }
.index-toolbar[b-bgcta2qonk] { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .5rem .75rem; border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--settings-surface); }
.index-title[b-bgcta2qonk] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; flex: 0 0 auto; }
.index-toolbar h2[b-bgcta2qonk] { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.index-toolbar p[b-bgcta2qonk] { margin: 0; color: var(--settings-muted); font-size: .75rem; line-height: 1.45; }
.index-search[b-bgcta2qonk] { display: flex; flex: 1 1 12rem; min-width: 10rem; min-height: var(--pulse-control-min-height, 44px); gap: .5rem; align-items: center; padding: 0 .68rem; border: 1px solid var(--settings-border); border-radius: .65rem; background: var(--settings-soft); }
.index-search:focus-within[b-bgcta2qonk] { border-color: var(--settings-accent); box-shadow: 0 0 0 .2rem rgba(15, 130, 125, .11); }
.index-search svg[b-bgcta2qonk] { flex: 0 0 1rem; width: 1rem; fill: none; stroke: var(--settings-muted); stroke-linecap: round; stroke-width: 1.7; }
.index-search input[b-bgcta2qonk] { width: 100%; min-width: 0; min-height: 24px; border: 0; outline: 0; color: var(--settings-ink); background: transparent; font: inherit; font-size: .875rem; }
.index-group-scope[b-bgcta2qonk] { --group-filter-height: var(--pulse-control-min-height, 44px); --group-filter-radius: .65rem; --group-filter-border: var(--settings-border); --group-filter-surface: var(--settings-soft); display: flex; align-items: center; gap: .4rem; flex: 0 1 auto; min-width: 0; }
.index-group-scope > span[b-bgcta2qonk] { color: var(--settings-ink); font-size: .75rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.index-group-scope[b-bgcta2qonk]  .camera-settings-group-filter { width: auto; min-width: 11rem; }
.index-group-scope[b-bgcta2qonk]  .camera-settings-group-filter > summary { font-size: .875rem; }
.index-group-scope[b-bgcta2qonk]  .camera-settings-group-filter .group-filter-body { width: min(27rem, calc(100vw - 2rem)); }
.lifecycle-filters[b-bgcta2qonk] { display: flex; flex: 1 1 18rem; min-width: 0; gap: .375rem; overflow-x: auto; scrollbar-width: thin; padding: .25rem; margin: -.25rem; }
.lifecycle-filters button[b-bgcta2qonk] { flex: 0 0 auto; min-height: var(--pulse-control-min-height, 44px); padding: .35rem .65rem; border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--settings-muted); background: var(--settings-surface); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.lifecycle-filters button.selected[b-bgcta2qonk] { border-color: var(--settings-accent); color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, var(--settings-surface)); }
.index-loading[b-bgcta2qonk], .index-empty[b-bgcta2qonk], .editor-placeholder[b-bgcta2qonk] { display: grid; min-height: 18rem; gap: .6rem; place-items: center; align-content: center; padding: 2rem; color: var(--settings-muted); font-size: .76rem; text-align: center; }
.index-loading > span[b-bgcta2qonk] { width: 1.6rem; height: 1.6rem; border: 2px solid var(--settings-border); border-top-color: var(--settings-accent); border-radius: 50%; animation: camera-settings-spin-b-bgcta2qonk 700ms linear infinite; }
.empty-visual[b-bgcta2qonk] { display: grid; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 1rem; color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, transparent); }
.empty-visual svg[b-bgcta2qonk] { width: 1.8rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.index-empty h3[b-bgcta2qonk], .editor-placeholder h2[b-bgcta2qonk] { margin: .15rem 0 0; color: var(--settings-ink); font-size: .95rem; }
.index-empty p[b-bgcta2qonk], .editor-placeholder p[b-bgcta2qonk] { max-width: 28rem; margin: 0; line-height: 1.5; }
.camera-rows[b-bgcta2qonk] { display: grid; align-content: start; gap: .3rem; max-height: min(41rem, 62dvh); margin: 0; padding: .6rem; overflow: auto; list-style: none; }
.camera-rows li[b-bgcta2qonk] { min-width: 0; }
.camera-row[b-bgcta2qonk] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .625rem; align-items: center; width: 100%; padding: .625rem; border: 1px solid var(--settings-border); border-radius: .62rem; color: var(--settings-ink); background: var(--settings-surface); font: inherit; text-align: left; cursor: pointer; transition: border-color .14s ease, background .14s ease; min-height: var(--pulse-control-min-height, 44px); }
.camera-row:hover[b-bgcta2qonk] { border-color: color-mix(in srgb, var(--settings-accent) 40%, var(--settings-border)); }
.camera-row.selected[b-bgcta2qonk] { border-color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 7%, var(--settings-surface)); }
.camera-row.retired[b-bgcta2qonk] { opacity: .68; }
.camera-row.maintenance[b-bgcta2qonk] { border-left: .22rem solid var(--pulse-warning-text); }
.camera-row.inactive[b-bgcta2qonk] { border-left: .22rem solid var(--pulse-danger); opacity: .76; }
.camera-row.retired[b-bgcta2qonk] { border-left: .22rem solid var(--settings-muted); }
.row-glyph[b-bgcta2qonk] { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .52rem; color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, transparent); grid-row: 1 / 3; align-self: start; }
.row-glyph.camera[b-bgcta2qonk] { color: var(--settings-accent); }
.row-glyph.iot[b-bgcta2qonk] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.row-glyph svg[b-bgcta2qonk] { width: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.row-copy[b-bgcta2qonk] { display: grid; min-width: 0; grid-column: 2; grid-row: 1; }
.row-copy strong[b-bgcta2qonk], .row-copy small[b-bgcta2qonk] {   white-space: normal; overflow-wrap: anywhere; }
/* The row's subject needs one step over its own subtitle, groups and pills. The
   operator-scale rule below is more specific than a bare .row-copy strong, so
   the name has to be qualified by the row to win the cascade. */
.camera-row .row-copy strong[b-bgcta2qonk] { font-size: .95rem; letter-spacing: -.01em; }
.row-copy small[b-bgcta2qonk] { color: var(--settings-muted); font-size: .75rem; }
.row-copy small span[b-bgcta2qonk] { color: var(--settings-muted); }
.row-groups[b-bgcta2qonk] {  color: var(--settings-muted); font-size: .75rem;  white-space: normal; grid-column: 2; grid-row: 2; overflow-wrap: anywhere; }
.row-snapshot[b-bgcta2qonk] { padding: .19rem .4rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: normal; grid-column: 3; grid-row: 2; justify-self: end; align-self: start; text-align: center; max-width: 8rem; }
.row-snapshot.inherit[b-bgcta2qonk] { color: var(--settings-muted); background: var(--settings-soft); }
.row-snapshot.always[b-bgcta2qonk] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.row-snapshot.never[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.profile-editor[b-bgcta2qonk],.health-history[b-bgcta2qonk] { scroll-margin-top:1rem; }
.profile-grid[b-bgcta2qonk] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: .875rem; }
.profile-grid label[b-bgcta2qonk] { display:grid; gap:.3rem; color: var(--settings-ink); font-size: .875rem; font-weight: 600; min-width: 0; }
.profile-grid input[b-bgcta2qonk],.profile-grid select[b-bgcta2qonk],.profile-grid textarea[b-bgcta2qonk] { width:100%; min-height: var(--pulse-control-min-height, 44px); padding:.55rem .65rem; border:1px solid var(--settings-border); border-radius: var(--pulse-radius-sm, 8px); color:var(--settings-ink); background:var(--settings-surface); font:inherit; min-width: 0; font-size: .875rem; font-weight: 400; }
.profile-grid textarea[b-bgcta2qonk] { min-height:4.5rem; resize:vertical; }
.profile-wide[b-bgcta2qonk] { grid-column:1/-1; }
.field-note[b-bgcta2qonk] { grid-column:1/-1; display:grid; gap:.25rem; padding:.65rem; border:1px solid var(--settings-border); border-radius:.55rem; color:var(--settings-muted); background:var(--settings-soft); font-size:.8rem; line-height:1.45; }
.field-note strong[b-bgcta2qonk] { color:var(--settings-ink); }
.profile-actions[b-bgcta2qonk],.health-toolbar[b-bgcta2qonk],.health-pager[b-bgcta2qonk] { display:flex; gap:.55rem; align-items:center; justify-content:space-between; margin-top:.7rem; flex-wrap: wrap; }
/* Sits between the revision number and Save, so the reason a greyed Save is
   greyed is read on the way to the button rather than after giving up on it. */
.profile-blocked[b-bgcta2qonk] { flex: 1 1 12rem; color:var(--settings-muted); font-size:.75rem; font-weight: 600; line-height:1.45; text-align: left; }
.profile-history[b-bgcta2qonk] { margin-top:.7rem; padding:.65rem; border:1px solid var(--settings-border); border-radius:.65rem; }
.profile-history summary[b-bgcta2qonk] { cursor:pointer; font-weight: 600; min-height: var(--pulse-control-min-height, 44px); align-content: center; }
.profile-history article[b-bgcta2qonk],.health-alert[b-bgcta2qonk],.health-samples article[b-bgcta2qonk] { display:flex; gap:.7rem; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--settings-border); }
.profile-history article:last-child[b-bgcta2qonk],.health-alert:last-child[b-bgcta2qonk],.health-samples article:last-child[b-bgcta2qonk] { border-bottom:0; }
.profile-history article div[b-bgcta2qonk],.health-alert div[b-bgcta2qonk],.health-samples article div[b-bgcta2qonk] { display:grid; min-width:0; }
.profile-history small[b-bgcta2qonk],.health-alert small[b-bgcta2qonk],.health-samples small[b-bgcta2qonk] { color:var(--settings-muted); line-height:1.45; }
.health-alert.open[b-bgcta2qonk] { border-left:.2rem solid var(--pulse-warning-text); padding-left:.55rem; }
.health-alert.recovered[b-bgcta2qonk] { opacity:.78; }
.health-ack[b-bgcta2qonk] { color:var(--pulse-success-text); font-size:.75rem; font-weight: 700; }
.health-state[b-bgcta2qonk] { padding:.2rem .45rem; border-radius:999px; background:var(--pulse-warning-soft); color:var(--pulse-warning-text); font-size:.75rem; font-weight: 700; text-transform:capitalize; }
.health-state.healthy[b-bgcta2qonk] { background:var(--pulse-success-soft); color:var(--pulse-success-text); }
.health-pager span[b-bgcta2qonk] { font-size:.75rem; font-weight: 700; }
.row-lifecycle[b-bgcta2qonk] { padding: .19rem .4rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: normal; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; text-align: center; max-width: 8rem; }
.row-lifecycle.active[b-bgcta2qonk] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.row-lifecycle.maintenance[b-bgcta2qonk] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.row-lifecycle.inactive[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.row-lifecycle.retired[b-bgcta2qonk] { color: var(--settings-muted); background: var(--settings-soft); }
.index-truncated[b-bgcta2qonk] { display: flex; gap: .6rem; align-items: center; justify-content: space-between; margin: 0; padding: .6rem 1rem .8rem; color: var(--settings-muted); font-size: .75rem; }
.index-truncated button[b-bgcta2qonk] { min-height: var(--pulse-control-min-height, 44px); padding: .28rem .6rem; border: 1px solid var(--settings-border); border-radius: .5rem; color: var(--settings-accent); background: var(--settings-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.index-truncated button:hover:not(:disabled)[b-bgcta2qonk] { border-color: var(--settings-accent); }
.camera-editor[b-bgcta2qonk] { position: sticky; top: var(--pulse-sticky-top); display: grid; align-content: start; }
.editor-identity[b-bgcta2qonk] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--settings-border); }
.editor-icon[b-bgcta2qonk] { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .8rem; color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, transparent); }
.editor-icon svg[b-bgcta2qonk] { width: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.camera-editor .settings-eyebrow[b-bgcta2qonk] { margin-bottom: .1rem; color: var(--settings-accent); }
.editor-identity h2[b-bgcta2qonk] {  margin: 0; font-size: 1.05rem; letter-spacing: -.01em;  white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.editor-identity-meta[b-bgcta2qonk] {  margin: .15rem 0 0; color: var(--settings-muted); font-size: .75rem;  white-space: normal; overflow-wrap: anywhere; }
.camera-state[b-bgcta2qonk] { padding: .19rem .4rem; border-radius: 999px; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.camera-state.active[b-bgcta2qonk] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.camera-state.retired[b-bgcta2qonk] { color: var(--settings-muted); background: var(--settings-soft); }
.camera-state.maintenance[b-bgcta2qonk] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.camera-state.inactive[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.editor-error[b-bgcta2qonk] { margin: .8rem 1rem 0; padding: .7rem .8rem; border: 1px solid var(--pulse-danger-border); border-radius: .62rem; color: var(--pulse-danger-text); background: var(--pulse-danger-soft); font-size: .75rem; }
.editor-block[b-bgcta2qonk] { min-width: 0; margin: .8rem 1rem 0; padding: .85rem; border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-md, 12px); background: var(--settings-surface); }
.editor-block > header[b-bgcta2qonk] { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .7rem; }
.editor-block > header > span[b-bgcta2qonk] { display: grid; flex: 0 0 1.55rem; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: .48rem; color: var(--settings-muted); background: var(--settings-soft); font-size: .75rem; font-weight: 600; border: 1px solid var(--settings-border); }
.editor-block h3[b-bgcta2qonk] { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.editor-block header p[b-bgcta2qonk] { margin: .15rem 0 0; color: var(--settings-muted); font-size: .75rem; line-height: 1.45; }
.lifecycle-editor[b-bgcta2qonk] { border-color: var(--settings-border); }
.lifecycle-choices[b-bgcta2qonk] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.lifecycle-choice[b-bgcta2qonk] { position: relative; display: grid; min-width: 0; gap: .12rem; padding: .62rem .68rem; border: 1px solid var(--settings-border); border-radius: .62rem; background: var(--settings-surface); cursor: pointer; }
.lifecycle-choice > input[b-bgcta2qonk] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lifecycle-choice.selected[b-bgcta2qonk] { border-color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 6%, var(--settings-surface)); box-shadow: inset .18rem 0 0 var(--settings-accent); }
.lifecycle-choice.maintenance.selected[b-bgcta2qonk] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); box-shadow: inset .18rem 0 0 var(--pulse-warning-text); }
.lifecycle-choice.inactive.selected[b-bgcta2qonk], .lifecycle-choice.retired.selected[b-bgcta2qonk] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); box-shadow: inset .18rem 0 0 var(--pulse-danger); }
.lifecycle-fields[b-bgcta2qonk] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.lifecycle-fields > label[b-bgcta2qonk] { display: grid; min-width: 0; gap: .3rem; color: var(--settings-ink); font-size: .875rem; font-weight: 600; }
.lifecycle-fields label > span[b-bgcta2qonk] { display: flex; gap: .35rem; align-items: center; }
.lifecycle-fields label > span b[b-bgcta2qonk] { color: var(--settings-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.lifecycle-fields :is(input, textarea)[b-bgcta2qonk] { width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .52rem .6rem; border: 1px solid var(--settings-border); border-radius: .58rem; color: var(--settings-ink); background: var(--settings-surface); font: inherit; font-size: .875rem; resize: vertical; font-weight: 400; }
.lifecycle-fields :is(input, textarea):focus[b-bgcta2qonk] { border-color: var(--settings-accent); outline: 0; box-shadow: 0 0 0 .18rem rgba(15, 130, 125, .1); }
.lifecycle-impact[b-bgcta2qonk] { margin-top: .6rem; padding: .62rem .7rem; border: 1px solid var(--pulse-warning-border); border-radius: .58rem; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; line-height: 1.5; }
.lifecycle-impact.inactive[b-bgcta2qonk], .lifecycle-impact.retired[b-bgcta2qonk] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.lifecycle-impact strong[b-bgcta2qonk] { display: block; margin-bottom: .12rem; font-size: .75rem; }
.editor-empty[b-bgcta2qonk] { display: grid; min-height: 5rem; place-items: center; padding: 1rem; border: 1px dashed var(--settings-border); border-radius: .62rem; color: var(--settings-muted); font-size: .75rem; text-align: center; }
.editor-empty a[b-bgcta2qonk] { color: var(--settings-accent); font-weight: 700; }
.group-checklist[b-bgcta2qonk] { display: grid; align-content: start; gap: .35rem; max-height: min(15rem, 42dvh); padding: .1rem; overflow: auto; }
.group-check[b-bgcta2qonk] { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; min-width: 0; padding: .5rem .55rem; border: 1px solid var(--settings-border); border-radius: .62rem; background: var(--settings-surface); cursor: pointer; }
.group-check.selected[b-bgcta2qonk] { border-color: color-mix(in srgb, var(--settings-accent) 48%, var(--settings-border)); background: color-mix(in srgb, var(--settings-accent) 6%, var(--settings-surface)); }
.group-check > input[b-bgcta2qonk] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.group-check-mark[b-bgcta2qonk] { display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border: 1px solid var(--settings-border); border-radius: .34rem; color: transparent; background: var(--settings-surface); font-size: .75rem; }
.group-check.selected .group-check-mark[b-bgcta2qonk] { border-color: var(--settings-accent); color: var(--pulse-canvas); background: var(--settings-accent); }
.group-check-copy[b-bgcta2qonk] { display: grid; min-width: 0; }
.group-check-copy strong[b-bgcta2qonk], .group-check-copy small[b-bgcta2qonk] {   white-space: normal; overflow-wrap: anywhere; }
.group-check-copy strong[b-bgcta2qonk] { font-size: .75rem; }
.group-check-copy small[b-bgcta2qonk] { color: var(--settings-muted); font-size: .75rem; }
.group-size[b-bgcta2qonk] { padding: .18rem .36rem; border-radius: 999px; color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 9%, transparent); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.editor-note[b-bgcta2qonk] { margin: .6rem 0 0; color: var(--settings-muted); font-size: .75rem; line-height: 1.5; }
.settings-help[b-bgcta2qonk] { min-width: 0; margin-top: .375rem; }
.settings-help > summary[b-bgcta2qonk] { min-height: var(--pulse-control-min-height, 44px); width: fit-content; max-width: 100%; align-content: center; padding: .375rem .5rem; border-radius: var(--pulse-radius-sm, 8px); color: var(--settings-accent); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.settings-help > summary:focus-visible[b-bgcta2qonk] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.settings-help > .editor-note[b-bgcta2qonk] { max-width: 72ch; margin: .25rem .5rem .75rem; }
.snapshot-choices[b-bgcta2qonk] { display: grid; gap: .4rem; }
.snapshot-choice[b-bgcta2qonk] { position: relative; display: grid; gap: .1rem; padding: .6rem .68rem; border: 1px solid var(--settings-border); border-radius: .62rem; background: var(--settings-surface); cursor: pointer; }
.snapshot-choice > input[b-bgcta2qonk] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.snapshot-choice.selected[b-bgcta2qonk] { border-color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 6%, var(--settings-surface)); box-shadow: inset .18rem 0 0 var(--settings-accent); }
.snapshot-choice.danger.selected[b-bgcta2qonk] { border-color: var(--pulse-danger); box-shadow: inset .18rem 0 0 var(--pulse-danger); }
.choice-title[b-bgcta2qonk] { font-size: .75rem; font-weight: 700; }
.choice-detail[b-bgcta2qonk] { color: var(--settings-muted); font-size: .75rem; line-height: 1.45; }
.channel-loading[b-bgcta2qonk] { display: flex; min-height: 4.5rem; gap: .55rem; align-items: center; justify-content: center; color: var(--settings-muted); font-size: .75rem; }
.channel-loading > span[b-bgcta2qonk] { width: 1.15rem; height: 1.15rem; border: 2px solid var(--settings-border); border-top-color: var(--settings-accent); border-radius: 50%; animation: camera-settings-spin-b-bgcta2qonk 700ms linear infinite; }
.channel-choices[b-bgcta2qonk] { display: grid; gap: .4rem; }
.channel-choice[b-bgcta2qonk] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .62rem .68rem; border: 1px solid var(--settings-border); border-radius: .62rem; background: var(--settings-surface); cursor: pointer; }
.channel-choice > input[b-bgcta2qonk] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.channel-choice.selected[b-bgcta2qonk] { border-color: var(--settings-accent); background: color-mix(in srgb, var(--settings-accent) 6%, var(--settings-surface)); box-shadow: inset .18rem 0 0 var(--settings-accent); }
.channel-choice.data-only[b-bgcta2qonk] { cursor: not-allowed; opacity: .72; }
.channel-choice.data-only.selected[b-bgcta2qonk] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); box-shadow: inset .18rem 0 0 var(--pulse-danger); opacity: 1; }
.channel-choice-copy[b-bgcta2qonk] { display: grid; min-width: 0; gap: .12rem; }
.channel-choice .choice-title small[b-bgcta2qonk] { margin-left: .25rem; padding: .1rem .3rem; border-radius: 999px; color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.channel-snapshot[b-bgcta2qonk] { display: inline-flex; width: fit-content; max-width: 100%; gap: .3rem; align-items: center; margin-top: .12rem; padding: .14rem .38rem; border: 1px solid var(--settings-border); border-radius: 999px; color: var(--settings-muted); background: color-mix(in srgb, var(--settings-border) 24%, transparent); font-size: .75rem; font-weight: 700; line-height: 1.3; }
.channel-snapshot[b-bgcta2qonk]::before { width: .38rem; height: .38rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ""; }
.channel-snapshot[data-state="ready"][b-bgcta2qonk] { border-color: color-mix(in srgb, var(--pulse-success-text) 32%, transparent); color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.channel-snapshot[data-state="warning"][b-bgcta2qonk] { border-color: var(--pulse-warning-border); color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.channel-snapshot[data-state="unavailable"][b-bgcta2qonk] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.channel-media[b-bgcta2qonk] { padding: .2rem .4rem; border-radius: 999px; color: var(--pulse-info-strong); background: var(--pulse-info-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.channel-media.jpeg[b-bgcta2qonk] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.channel-media.data[b-bgcta2qonk] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.channel-warning[b-bgcta2qonk] { margin-top: .55rem; padding: .62rem .7rem; border: 1px solid var(--pulse-warning-border); border-radius: .58rem; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; line-height: 1.5; }
.evidence-warning[b-bgcta2qonk] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; margin-top: .6rem; padding: .7rem .8rem; border: 1px solid var(--pulse-danger-border); border-radius: .62rem; color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.evidence-warning svg[b-bgcta2qonk] { width: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.evidence-warning strong[b-bgcta2qonk] { font-size: .75rem; }
.evidence-warning p[b-bgcta2qonk] { margin: .2rem 0 0; font-size: .75rem; line-height: 1.5; }
.editor-actions[b-bgcta2qonk] { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .85rem; padding: .8rem 1rem; border-top: 1px solid var(--settings-border); background: var(--settings-surface); position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; border-radius: 0 0 var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px); box-shadow: var(--pulse-shadow-sm); }
.editor-dirty[b-bgcta2qonk] { margin-right: auto; color: var(--settings-muted); font-size: .75rem; font-weight: 600; flex: 1 0 100%; }
a.settings-secondary[b-bgcta2qonk] { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.settings-secondary[b-bgcta2qonk] { min-height: var(--pulse-control-min-height, 44px); padding: .58rem .9rem; border: 1px solid var(--settings-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--settings-ink); background: var(--settings-surface); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; line-height: 1.35; }
.camera-editor :is(input, select, textarea, button, summary)[b-bgcta2qonk] { scroll-margin-bottom: 7rem; }
.settings-secondary:hover:not(:disabled)[b-bgcta2qonk] { border-color: var(--settings-accent); color: var(--settings-accent); }
.settings-secondary:disabled[b-bgcta2qonk] { cursor: not-allowed; opacity: .5; }
.camera-settings-page :is(button, a, label, input, select, textarea, summary)[b-bgcta2qonk] { font-size: .875rem; }
.camera-settings-page :is(button, a, label, summary) :is(strong, small, span, b, em)[b-bgcta2qonk] { font-size: inherit; }
.camera-settings-page .settings-notice button[aria-label][b-bgcta2qonk] { font-size: 1.2rem; }
.camera-settings-page :is(button, a, input, select, textarea):focus-visible[b-bgcta2qonk] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
/* The radio and checkbox each of these labels wraps is a 1px, opacity:0 box, so
   the rule above paints the ring on something nobody can see: tabbing the
   lifecycle, group, snapshot and channel choices showed no focus at all. The
   visible label carries it instead. */
.lifecycle-choice:has(input:focus-visible)[b-bgcta2qonk], .group-check:has(input:focus-visible)[b-bgcta2qonk], .snapshot-choice:has(input:focus-visible)[b-bgcta2qonk], .channel-choice:has(input:focus-visible)[b-bgcta2qonk] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
@keyframes camera-settings-spin-b-bgcta2qonk { to { transform: rotate(360deg); } }
@media (min-width: 1600px) {
    .settings-workbench[b-bgcta2qonk] { grid-template-columns: minmax(22rem, .72fr) minmax(0, 1.65fr); }
    .camera-editor[b-bgcta2qonk] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camera-editor > *[b-bgcta2qonk] { grid-column: 1 / -1; }
    .camera-editor > .editor-block:not(.lifecycle-editor):not(.profile-editor):not(.health-history)[b-bgcta2qonk] { grid-column: auto; }
}
@media (max-width: 1180px) { .settings-workbench[b-bgcta2qonk] { grid-template-columns: minmax(0, 1fr); } .camera-editor[b-bgcta2qonk] { position: static; } .editor-actions[b-bgcta2qonk] { position: static; box-shadow: none; } .camera-rows[b-bgcta2qonk] { max-height: min(26rem, 55dvh); } }
@media (max-width: 1050px) { .settings-summary[b-bgcta2qonk] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .camera-settings-page[b-bgcta2qonk] { margin: 0; } .settings-hero[b-bgcta2qonk] { align-items: flex-start; flex-direction: column; padding: 0; } .global-snapshot-banner[b-bgcta2qonk] { grid-template-columns: auto 1fr; } .global-snapshot-banner a[b-bgcta2qonk] { grid-column: 2; width: fit-content; } .editor-actions[b-bgcta2qonk] { flex-wrap: wrap; } .lifecycle-fields[b-bgcta2qonk] { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .settings-summary[b-bgcta2qonk] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-summary article[b-bgcta2qonk] { padding: .625rem; } .settings-notice[b-bgcta2qonk] { grid-template-columns: auto minmax(0, 1fr); } .settings-notice .notice-retry[b-bgcta2qonk] { grid-column: 2; justify-self: start; } .settings-notice button[aria-label][b-bgcta2qonk] { grid-column: 2; justify-self: end; } .global-snapshot-banner[b-bgcta2qonk] { grid-template-columns: 1fr; } .global-snapshot-banner a[b-bgcta2qonk] { grid-column: auto; } .editor-identity[b-bgcta2qonk] { grid-template-columns: auto minmax(0, 1fr); } .camera-state[b-bgcta2qonk] { grid-column: 2; width: fit-content; } .editor-actions > button[b-bgcta2qonk] { width: 100%; } .editor-dirty[b-bgcta2qonk] { width: 100%; margin-bottom: .3rem; } .lifecycle-choices[b-bgcta2qonk] { grid-template-columns: 1fr; } .lifecycle-filters button[b-bgcta2qonk] { min-height: 44px; } }
@media (max-width: 540px) {
    .index-title[b-bgcta2qonk],
    .index-search[b-bgcta2qonk],
    .index-group-scope[b-bgcta2qonk],
    .lifecycle-filters[b-bgcta2qonk] { flex-basis: 100%; min-width: 0; }
    .index-group-scope[b-bgcta2qonk] { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .index-group-scope[b-bgcta2qonk]  .camera-settings-group-filter { width: 100%; min-width: 0; }
    .lifecycle-filters[b-bgcta2qonk] { max-width: 100%; margin-inline: 0; overscroll-behavior-x: contain; }
}
@media (max-width: 560px), (any-pointer: coarse) { .camera-settings-page :is(input[type="text"], input[type="search"], input[type="number"], input[type="datetime-local"], textarea)[b-bgcta2qonk] { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .settings-primary[b-bgcta2qonk], .camera-row[b-bgcta2qonk] { transition: none; } .settings-primary:hover:not(:disabled)[b-bgcta2qonk] { transform: none; } .index-loading > span[b-bgcta2qonk], .channel-loading > span[b-bgcta2qonk] { animation: none; } }
@media (max-width: 540px) { .profile-grid[b-bgcta2qonk] { grid-template-columns:1fr; } .profile-wide[b-bgcta2qonk] { grid-column:auto; } .profile-actions[b-bgcta2qonk],.health-alert[b-bgcta2qonk],.health-samples article[b-bgcta2qonk] { align-items:stretch; flex-direction:column; } .profile-actions button[b-bgcta2qonk],.health-alert button[b-bgcta2qonk] { width:100%; min-height:44px; } .profile-blocked[b-bgcta2qonk] { text-align:left; } .health-toolbar button[b-bgcta2qonk],.health-pager button[b-bgcta2qonk] { min-height:44px; } }
/* /Components/Pages/CommercialAdministration.razor.rz.scp.css */
.commercial-page[b-ke4279eyd2] {
    --commercial-accent: var(--pulse-accent);
    display: grid;
    width: min(var(--pulse-workspace-max), 100%);
    min-width: 0;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    gap: var(--pulse-workspace-gap);
    color: var(--pulse-text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.commercial-hero[b-ke4279eyd2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    min-height: var(--pulse-control-min-height);
    padding: 0;
    border: 0;
    background: transparent;
}

.commercial-hero > div[b-ke4279eyd2] { min-width: 0; }

.section-kicker[b-ke4279eyd2] {
    display: block;
    margin-bottom: .35rem;
    color: var(--pulse-muted);
    font-size: .75rem;
    font-weight: 600;
}

.commercial-hero h1[b-ke4279eyd2] {
    margin: 0;
    color: var(--pulse-text);
    font-size: var(--pulse-workspace-title-size);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.commercial-card[b-ke4279eyd2] {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-text);
    background: var(--pulse-surface);
}

.card-heading[b-ke4279eyd2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--pulse-border);
}

.card-heading h2[b-ke4279eyd2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.card-heading > div[b-ke4279eyd2] { min-width: 0; }
.card-heading p[b-ke4279eyd2] { margin: .4rem 0 0; color: var(--pulse-muted); font-size: .875rem; line-height: 1.45; }
.commercial-reference > summary[b-ke4279eyd2] { min-height: 44px; padding: .6rem 0; box-sizing: border-box; color: var(--pulse-text); font-size: .875rem; font-weight: 600; cursor: pointer; }
.commercial-reference > summary h2[b-ke4279eyd2] { display: inline; }
.commercial-reference > summary[b-ke4279eyd2]::marker { color: var(--pulse-muted); }
.commercial-reference > summary:focus-visible[b-ke4279eyd2] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; border-radius: var(--pulse-radius-sm); }
.commercial-reference[open] > summary[b-ke4279eyd2] { margin-bottom: .35rem; }

.license-state[b-ke4279eyd2] {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    gap: .5rem;
    flex: 0 1 auto;
    padding: .4rem .7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.license-state > span[b-ke4279eyd2] { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.license-state.success[b-ke4279eyd2] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.license-state.warning[b-ke4279eyd2] { color: var(--pulse-warning-text); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.license-state.danger[b-ke4279eyd2] { color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }

.decision-message[b-ke4279eyd2] {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.45;
}

.decision-message.success[b-ke4279eyd2] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.decision-message.warning[b-ke4279eyd2] { color: var(--pulse-warning-text); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.decision-message.danger[b-ke4279eyd2] { color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }

.license-facts[b-ke4279eyd2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pulse-border);
}

.license-facts > div[b-ke4279eyd2] {
    min-width: 0;
    padding: .65rem .75rem;
    background: var(--pulse-surface-soft);
}

.license-facts dt[b-ke4279eyd2] { margin: 0 0 .25rem; color: var(--pulse-muted); font-size: .75rem; font-weight: 500; }
.license-facts dd[b-ke4279eyd2] { margin: 0; color: var(--pulse-text); font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.technical-value[b-ke4279eyd2] { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace; }

.capacity-grid[b-ke4279eyd2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.capacity-grid article[b-ke4279eyd2] {
    display: grid;
    gap: .2rem;
    padding: .75rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pulse-surface-soft);
}

.capacity-grid strong[b-ke4279eyd2] { color: var(--pulse-text); font-size: 1.35rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.capacity-grid span[b-ke4279eyd2] { color: var(--pulse-muted); font-size: .8125rem; font-weight: 500; }

.entitlement-block[b-ke4279eyd2] { margin-top: 1rem; }
.entitlement-block h3[b-ke4279eyd2] { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.license-readiness[b-ke4279eyd2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 0; }
.license-readiness > div[b-ke4279eyd2] { display: flex; flex-direction: column; min-width: 0; }
.license-readiness .decision-message[b-ke4279eyd2] { flex: 1; margin-bottom: 0; }
.capacity-grid + .license-facts[b-ke4279eyd2] { margin-top: 1rem; }
.entitlement-list[b-ke4279eyd2] { display: flex; flex-wrap: wrap; gap: .45rem; }
.entitlement-list span[b-ke4279eyd2] { max-width: 100%; padding: .35rem .55rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-text); background: var(--pulse-surface-soft); font-size: .75rem; font-weight: 500; }

.activation-layout[b-ke4279eyd2] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .7fr);
    gap: 1rem;
    align-items: start;
}

.activation-form[b-ke4279eyd2],
.activation-guidance[b-ke4279eyd2],
.commercial-grants[b-ke4279eyd2] { min-width: 0; }
.activation-form label[b-ke4279eyd2],
.commercial-grants > label[b-ke4279eyd2] { display: block; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; }
.activation-form > p[b-ke4279eyd2] { margin: 0 0 .65rem; color: var(--pulse-muted); font-size: .8125rem; line-height: 1.45; }
.activation-form textarea[b-ke4279eyd2] {
    width: 100%;
    box-sizing: border-box;
    min-height: 10rem;
    resize: vertical;
    padding: .8rem .9rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font: 500 .875rem/1.5 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.activation-form textarea:focus[b-ke4279eyd2] { border-color: var(--commercial-accent); box-shadow: 0 0 0 .2rem var(--pulse-focus-ring-soft); outline: 0; }
.activation-actions[b-ke4279eyd2] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .65rem; }
.activation-actions small[b-ke4279eyd2] { color: var(--pulse-muted); font-size: .75rem; }
.activation-actions button[b-ke4279eyd2],
.commercial-primary[b-ke4279eyd2],
.commercial-secondary[b-ke4279eyd2] {
    min-height: 44px;
    padding: .6rem .9rem;
    border: 1px solid var(--pulse-action);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.activation-actions button:hover:not(:disabled)[b-ke4279eyd2], .commercial-primary:hover:not(:disabled)[b-ke4279eyd2] { background: var(--pulse-action-hover); border-color: var(--pulse-action-hover); }
.commercial-secondary[b-ke4279eyd2] { border-color: var(--pulse-border); color: var(--pulse-text); background: var(--pulse-surface-soft); }
.commercial-secondary:hover:not(:disabled)[b-ke4279eyd2] { border-color: var(--pulse-border-strong); background: var(--pulse-control-surface-hover); }
.commercial-page button:disabled[b-ke4279eyd2] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }
.commercial-page :is(button, input, select, textarea):focus-visible[b-ke4279eyd2] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.activation-guidance[b-ke4279eyd2] {
    padding: .9rem 1rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-text);
    background: var(--pulse-surface-soft);
}

.activation-guidance ol[b-ke4279eyd2] { margin: .65rem 0 0; padding-left: 1.2rem; color: var(--pulse-muted); font-size: .8125rem; line-height: 1.45; }
.activation-guidance li + li[b-ke4279eyd2] { margin-top: .35rem; }
.activation-message[b-ke4279eyd2] { margin: .8rem 0 0; padding: .7rem .8rem; border: 1px solid; border-radius: var(--pulse-radius-sm); font-size: .8125rem; font-weight: 500; }
.activation-message.success[b-ke4279eyd2] { color: var(--pulse-success-text); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.activation-message.danger[b-ke4279eyd2] { color: var(--pulse-danger-text); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }

.commercial-loading[b-ke4279eyd2] { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.commercial-loading > div[b-ke4279eyd2] { flex: 1 1 16rem; min-width: 0; }
.commercial-loading strong[b-ke4279eyd2] { font-size: .875rem; font-weight: 600; }
.commercial-loading p[b-ke4279eyd2] { margin: .2rem 0 0; color: var(--pulse-muted); font-size: .8rem; }
.commercial-spinner[b-ke4279eyd2] { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; border: 2px solid var(--pulse-border); border-top-color: var(--commercial-accent); border-radius: 50%; animation: commercial-spin-b-ke4279eyd2 .8s linear infinite; }
.licensing-disabled[b-ke4279eyd2] { display: flex; align-items: flex-start; gap: .85rem; }
.licensing-disabled > div[b-ke4279eyd2] { min-width: 0; }
.licensing-disabled h2[b-ke4279eyd2] { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.licensing-disabled p[b-ke4279eyd2] { margin: .4rem 0 0; color: var(--pulse-muted); font-size: .875rem; line-height: 1.45; }
.disabled-mark[b-ke4279eyd2] { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--pulse-success-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-success-text); background: var(--pulse-success-soft); font-size: 1.15rem; font-weight: 600; }

.commercial-grants-layout[b-ke4279eyd2] { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1.25rem; }
.commercial-grants-layout :is(.form-control, .form-select)[b-ke4279eyd2] { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; margin-bottom: .85rem; padding: .55rem .7rem; border: 1px solid var(--pulse-control-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-control-text); background-color: var(--pulse-control-surface); font: inherit; font-size: .875rem; }
.activation-form .account-check[b-ke4279eyd2] { display: flex; gap: .6rem; align-items: center; min-height: 44px; margin: .25rem 0 .75rem; font-weight: 500; cursor: pointer; }
.account-check input[b-ke4279eyd2] { flex: 0 0 auto; accent-color: var(--commercial-accent); }
.commercial-grants[b-ke4279eyd2] { padding-left: 1.25rem; border-left: 1px solid var(--pulse-border); }
.commercial-grants > p[b-ke4279eyd2] { margin: .2rem 0 0; color: var(--pulse-muted); font-size: .875rem; }
.commercial-grants-list[b-ke4279eyd2] { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.commercial-grants-list li[b-ke4279eyd2] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-width: 0; padding: .75rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm); background: var(--pulse-surface-soft); }
.commercial-grant-identity[b-ke4279eyd2] { display: grid; gap: .25rem; min-width: 0; }
.commercial-grant-identity strong[b-ke4279eyd2] { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.commercial-grant-identity span[b-ke4279eyd2] { color: var(--pulse-muted); font-size: .8125rem; }
.commercial-grants-list button[b-ke4279eyd2] { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--pulse-danger-border); border-radius: var(--pulse-radius-sm); color: var(--pulse-danger-text); background: var(--pulse-surface); font-size: .875rem; font-weight: 600; }
.commercial-grants-list button:hover:not(:disabled)[b-ke4279eyd2] { background: var(--pulse-danger-soft); }

@keyframes commercial-spin-b-ke4279eyd2 { to { transform: rotate(360deg); } }

@media (min-width: 1240px) {
    .commercial-page[b-ke4279eyd2] { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
    .commercial-hero[b-ke4279eyd2], .commercial-loading[b-ke4279eyd2], .licensing-disabled[b-ke4279eyd2], .commercial-grants-card[b-ke4279eyd2] { grid-column: 1 / -1; }
    .license-activation .activation-layout[b-ke4279eyd2] { grid-template-columns: 1fr; gap: .75rem; }
    .license-activation .activation-guidance[b-ke4279eyd2] { padding: .5rem .75rem; }
    .commercial-page:not(:has(.license-activation)) .status-card[b-ke4279eyd2] { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .activation-layout[b-ke4279eyd2] { grid-template-columns: 1fr; }
    .commercial-grants[b-ke4279eyd2] { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--pulse-border); }
}

@media (max-width: 620px) {
    .commercial-page[b-ke4279eyd2] { padding-right: .75rem; padding-left: .75rem; }
    .license-readiness[b-ke4279eyd2], .license-facts[b-ke4279eyd2] { grid-template-columns: 1fr; }
    .capacity-grid[b-ke4279eyd2] { gap: .5rem; }
    .capacity-grid article[b-ke4279eyd2] { min-width: 0; padding: .65rem .5rem; }
    .capacity-grid strong[b-ke4279eyd2] { font-size: 1.125rem; }
    .card-heading[b-ke4279eyd2] { align-items: stretch; flex-direction: column; }
    .activation-actions[b-ke4279eyd2] { align-items: stretch; flex-direction: column; }
    .activation-actions button[b-ke4279eyd2], .commercial-primary[b-ke4279eyd2] { width: 100%; }
    .commercial-grants-list li[b-ke4279eyd2] { grid-template-columns: 1fr; }
    .commercial-grants-list button[b-ke4279eyd2] { justify-self: start; }
}

@media (max-width: 560px), (any-pointer: coarse) {
    .activation-form textarea[b-ke4279eyd2], .commercial-grants-layout :is(.form-control, .form-select)[b-ke4279eyd2] { font-size: 16px; }
    .commercial-page :is(button, textarea)[b-ke4279eyd2] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .commercial-spinner[b-ke4279eyd2] { animation: none; }
}
/* /Components/Pages/Commissioning.razor.rz.scp.css */
.commissioning-page[b-9c9i4moye0] {
    --cm-surface: var(--pulse-surface, #fff);
    --cm-soft: var(--pulse-surface-soft, #f5f8fc);
    --cm-border: var(--pulse-border, rgba(121, 143, 171, .24));
    --cm-text: var(--pulse-text, #14243c);
    --cm-muted: var(--pulse-muted, #687993);
    --cm-accent: var(--pulse-accent, #0f827d);
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    border-radius: var(--pulse-radius-xl, 1rem);
    color: var(--cm-text);
    background: transparent;
}

.commissioning-breadcrumbs[b-9c9i4moye0] {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--cm-muted);
    font-size: var(--pulse-workspace-lede-size, .82rem);
}

.commissioning-breadcrumbs a[b-9c9i4moye0] {
    display: inline-flex;
    min-height: var(--pulse-control-min-height, 44px);
    align-items: center;
    color: var(--cm-accent);
    font-weight: 700;
    text-decoration: none;
}

/* The h1 is the visible current crumb; the aria-current span stays in the
   DOM for assistive technology only. */
.commissioning-breadcrumbs [aria-current="page"][b-9c9i4moye0] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.commissioning-hero[b-9c9i4moye0] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    margin-bottom: var(--pulse-workspace-hero-pad-y, 14px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.commissioning-hero-copy[b-9c9i4moye0],
.commissioning-refresh[b-9c9i4moye0] {
    position: relative;
    z-index: 1;
}

.commissioning-hero-copy[b-9c9i4moye0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    flex: 1 1 24rem;
    min-width: 0;
}

.commissioning-eyebrow[b-9c9i4moye0],
.commissioning-section-label[b-9c9i4moye0],
.commissioning-overview-label[b-9c9i4moye0] {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    color: var(--cm-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.commissioning-hero h1[b-9c9i4moye0] {
    margin: 0;
    color: var(--cm-text);
    font-size: var(--pulse-workspace-title-size, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.commissioning-hero-context[b-9c9i4moye0] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    color: var(--cm-muted);
    font-size: var(--pulse-workspace-lede-size, .82rem);
    line-height: 1.45;
}

.commissioning-guide[b-9c9i4moye0],
.commissioning-state-guide[b-9c9i4moye0] { min-width: 0; }
.commissioning-guide summary[b-9c9i4moye0],
.commissioning-state-guide summary[b-9c9i4moye0] { min-height: var(--pulse-control-min-height, 44px); padding-block: .8rem; color: var(--cm-accent); font-size: .75rem; font-weight: 600; line-height: 1.3; cursor: pointer; }
.commissioning-guide p[b-9c9i4moye0],
.commissioning-state-guide p[b-9c9i4moye0] { margin: 0 0 .5rem; }

.commissioning-refresh[b-9c9i4moye0] {
    display: inline-flex;
    min-width: 10.5rem;
    min-height: var(--pulse-control-min-height, 44px);
    gap: .55rem;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .7rem;
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s ease;
}

.commissioning-refresh:hover:not(:disabled)[b-9c9i4moye0] {
    background: var(--pulse-action-hover);
}

.commissioning-refresh:disabled[b-9c9i4moye0] {
    cursor: wait;
    opacity: .7;
}

.commissioning-refresh svg[b-9c9i4moye0] {
    width: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.commissioning-refresh svg.is-spinning[b-9c9i4moye0],
.commissioning-spinner[b-9c9i4moye0] {
    animation: commissioning-spin-b-9c9i4moye0 760ms linear infinite;
}

.commissioning-loading[b-9c9i4moye0],
.commissioning-failure[b-9c9i4moye0],
.commissioning-notice[b-9c9i4moye0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--cm-border);
    border-radius: 1rem;
    background: var(--cm-surface);
}

.commissioning-loading[b-9c9i4moye0] {
    min-height: 6rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.commissioning-spinner[b-9c9i4moye0] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--cm-border);
    border-top-color: var(--cm-accent);
    border-radius: 50%;
}

.commissioning-loading strong[b-9c9i4moye0],
.commissioning-failure strong[b-9c9i4moye0] {
    color: var(--cm-text);
    font-size: .84rem;
}

.commissioning-loading p[b-9c9i4moye0],
.commissioning-failure p[b-9c9i4moye0],
.commissioning-notice p[b-9c9i4moye0] {
    margin: .22rem 0 0;
    color: var(--cm-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.commissioning-failure[b-9c9i4moye0] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.commissioning-failure > span[b-9c9i4moye0],
.commissioning-notice > span[b-9c9i4moye0] {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: inherit;
    background: transparent;
    font-weight: 700;
}

.commissioning-failure button[b-9c9i4moye0],
.handover-unavailable a[b-9c9i4moye0] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem .85rem;
    border: 1px solid currentColor;
    border-radius: .62rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

/* The handover tone that used to colour a separate overview card now sits on
   the evidence card itself. */
.commissioning-workflow.needs-proof[b-9c9i4moye0] { border-color: var(--pulse-warning-border); }
.commissioning-workflow.is-ready[b-9c9i4moye0] { border-color: var(--pulse-success-border); }

.commissioning-score[b-9c9i4moye0] {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .1rem .55rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: 999px;
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

.commissioning-score.is-ready[b-9c9i4moye0] {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.commissioning-score strong[b-9c9i4moye0] {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.commissioning-score strong span[b-9c9i4moye0] {
    color: inherit;
    font-size: .75rem;
}

.commissioning-score small[b-9c9i4moye0] {
    margin: 0;
    color: inherit;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: normal;
}

.commissioning-servers h2[b-9c9i4moye0],
.commissioning-section-heading h2[b-9c9i4moye0],
.commissioning-handover h2[b-9c9i4moye0] {
    margin: .22rem 0 0;
    color: var(--cm-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.commissioning-section-heading p[b-9c9i4moye0],
.commissioning-handover header p[b-9c9i4moye0] {
    max-width: 48rem;
    margin: .3rem 0 0;
    color: var(--cm-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.commissioning-checked[b-9c9i4moye0] {
    display: inline-flex;
    gap: .3rem;
    align-items: baseline;
    color: var(--cm-muted);
}

.commissioning-checked time[b-9c9i4moye0] {
    margin: 0;
    color: var(--cm-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.commissioning-notice[b-9c9i4moye0] {
    margin-bottom: .75rem;
    border-color: var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

.commissioning-notice p[b-9c9i4moye0] {
    margin: 0;
    color: inherit;
}

.commissioning-notice-action[b-9c9i4moye0] { display: inline-flex; align-items: center; min-height: var(--pulse-control-min-height, 44px); padding: .55rem .75rem; border: 1px solid currentColor; border-radius: var(--pulse-radius-sm, .5rem); color: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; }

.commissioning-key[b-9c9i4moye0] {
    margin: 0 .75rem;
    border-top: 1px solid var(--cm-border);
    color: var(--cm-muted);
    font-size: .75rem;
}

.commissioning-key summary[b-9c9i4moye0] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .8rem .25rem;
    cursor: pointer;
}

.commissioning-key > div[b-9c9i4moye0] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding-bottom: .75rem;
}

.commissioning-key p[b-9c9i4moye0] { flex-basis: 100%; margin: 0; line-height: 1.45; }

/* Both guides sit in the evidence card's footer, styled like the key. */
.commissioning-workflow > .commissioning-state-guide[b-9c9i4moye0],
.commissioning-workflow > .commissioning-guide[b-9c9i4moye0] {
    margin: 0 .75rem;
    border-top: 1px solid var(--cm-border);
    color: var(--cm-muted);
    font-size: .75rem;
}

.commissioning-workflow > .commissioning-state-guide summary[b-9c9i4moye0],
.commissioning-workflow > .commissioning-guide summary[b-9c9i4moye0] {
    padding: .8rem .25rem;
}

.commissioning-workflow > .commissioning-state-guide p[b-9c9i4moye0],
.commissioning-workflow > .commissioning-guide p[b-9c9i4moye0] {
    margin: 0 .25rem .75rem;
    line-height: 1.45;
}

.commissioning-key > div > span[b-9c9i4moye0] {
    display: inline-flex;
    min-height: 2rem;
    gap: .38rem;
    align-items: center;
    padding: .35rem .6rem;
    border: 1px solid var(--cm-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--cm-muted);
    background: var(--cm-surface);
    font-size: .75rem;
}

.commissioning-key strong[b-9c9i4moye0] {
    color: var(--cm-text);
}

.state-dot[b-9c9i4moye0],
.step-state i[b-9c9i4moye0],
.server-indicator[b-9c9i4moye0] {
    flex: 0 0 auto;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--pulse-muted);
}

.state-dot.verified[b-9c9i4moye0],
.step-state.verified i[b-9c9i4moye0],
.server-indicator.reachable[b-9c9i4moye0] {
    background: var(--pulse-success-text);
}

.state-dot.configured[b-9c9i4moye0],
.step-state.configured i[b-9c9i4moye0] {
    background: var(--pulse-info);
}

.state-dot.pending[b-9c9i4moye0],
.step-state.pending i[b-9c9i4moye0] {
    background: var(--pulse-warning-text);
}

.state-dot.unavailable[b-9c9i4moye0],
.step-state.unavailable i[b-9c9i4moye0],
.server-indicator.unreachable[b-9c9i4moye0] {
    background: var(--pulse-danger-text);
}

.commissioning-servers[b-9c9i4moye0],
.commissioning-workflow[b-9c9i4moye0],
.commissioning-handover[b-9c9i4moye0] {
    margin-bottom: .85rem;
    border: 1px solid var(--cm-border);
    border-radius: var(--pulse-radius-lg, .875rem);
    background: var(--cm-surface);
}

.commissioning-servers > header[b-9c9i4moye0],
.commissioning-section-heading[b-9c9i4moye0],
.commissioning-handover > header[b-9c9i4moye0] {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--cm-border);
}

.commissioning-servers > header > a[b-9c9i4moye0] {
    display: inline-flex;
    align-items: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .45rem .68rem;
    border: 1px solid var(--cm-border);
    border-radius: .55rem;
    color: var(--cm-accent);
    background: var(--cm-soft);
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.commissioning-servers ul[b-9c9i4moye0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .55rem;
    margin: 0;
    padding: .75rem;
    list-style: none;
}

.commissioning-servers li[b-9c9i4moye0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--cm-border);
    border-radius: .72rem;
    background: var(--cm-soft);
}

.server-copy[b-9c9i4moye0] {
    display: grid;
    min-width: 0;
}

.server-copy strong[b-9c9i4moye0],
.server-copy small[b-9c9i4moye0] {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.server-copy strong[b-9c9i4moye0] {
    color: var(--cm-text);
    font-size: .875rem;
}

.server-copy small[b-9c9i4moye0] {
    margin-top: .14rem;
    color: var(--cm-muted);
    font-size: .75rem;
}

.server-result[b-9c9i4moye0] {
    padding: .22rem .42rem;
    border-radius: 999px;
    color: var(--cm-muted);
    background: var(--cm-surface);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.server-result.reachable[b-9c9i4moye0] {
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.server-result.unreachable[b-9c9i4moye0] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.inventory-evidence[b-9c9i4moye0] {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .38rem .62rem;
    border: 1px solid var(--cm-border);
    border-radius: 999px;
    color: var(--cm-muted);
    background: var(--cm-soft);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.inventory-evidence i[b-9c9i4moye0] {
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background: var(--cm-muted);
}

.commissioning-steps[b-9c9i4moye0] {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: .65rem;
    list-style: none;
}

.commissioning-step[b-9c9i4moye0] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    min-height: 4.5rem;
    padding: .65rem;
    border: 1px solid var(--cm-border);
    border-radius: .82rem;
    background: var(--cm-surface);
}

.commissioning-step + .commissioning-step[b-9c9i4moye0] {
    margin-top: 0;
}

@media (min-width: 1200px) {
    .commissioning-steps[b-9c9i4moye0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.commissioning-step.verified[b-9c9i4moye0] { border-left: 3px solid var(--pulse-success-text); }
.commissioning-step.configured[b-9c9i4moye0] { border-left: 3px solid var(--pulse-info); }
.commissioning-step.pending[b-9c9i4moye0] { border-left: 3px solid var(--pulse-warning-text); }
.commissioning-step.unavailable[b-9c9i4moye0] { border-left: 3px solid var(--pulse-danger-text); }

.step-index[b-9c9i4moye0] {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .75rem;
    color: var(--cm-muted);
    background: var(--cm-soft);
    font-size: .75rem;
    font-weight: 700;
}

.verified .step-index[b-9c9i4moye0] {
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.step-index svg[b-9c9i4moye0] {
    width: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.step-copy[b-9c9i4moye0] {
    min-width: 0;
}

.step-title-row[b-9c9i4moye0] {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}

.step-title-row h3[b-9c9i4moye0] {
    margin: 0;
    color: var(--cm-text);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.step-state[b-9c9i4moye0] {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .2rem .42rem;
    border-radius: 999px;
    color: var(--cm-muted);
    background: var(--cm-soft);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.step-state.verified[b-9c9i4moye0] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.step-state.configured[b-9c9i4moye0] { color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.step-state.pending[b-9c9i4moye0] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.step-state.unavailable[b-9c9i4moye0] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }

.step-state i[b-9c9i4moye0] {
    width: .38rem;
    height: .38rem;
    box-shadow: none;
}

.step-summary[b-9c9i4moye0] {
    display: block;
    margin-top: .38rem;
    color: var(--cm-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
}

.step-copy p[b-9c9i4moye0] {
    max-width: 53rem;
    margin: .2rem 0 0;
    color: var(--cm-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.step-action[b-9c9i4moye0] {
    display: inline-flex;
    min-width: 9.5rem;
    min-height: var(--pulse-control-min-height, 44px);
    gap: .45rem;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .7rem;
    border: 1px solid var(--cm-border);
    border-radius: .62rem;
    color: var(--cm-accent);
    background: var(--cm-soft);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease;
}

.step-action:hover[b-9c9i4moye0] {
    border-color: var(--cm-accent);
    background: color-mix(in srgb, var(--cm-accent) 5%, var(--cm-surface));
}

.handover-chip[b-9c9i4moye0] {
    padding: .35rem .62rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: 999px;
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.handover-chip.ready[b-9c9i4moye0] {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.handover-grid[b-9c9i4moye0] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .58rem;
    padding: .75rem;
}

.handover-card[b-9c9i4moye0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    min-width: 0;
    min-height: 5rem;
    padding: .7rem;
    border: 1px solid var(--cm-border);
    border-radius: .78rem;
    color: var(--cm-text);
    background: var(--cm-soft);
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease;
}

.handover-card:hover[b-9c9i4moye0] {
    border-color: color-mix(in srgb, var(--cm-accent) 55%, var(--cm-border));
    background: var(--cm-surface);
}

.handover-card.primary[b-9c9i4moye0] {
    border-color: color-mix(in srgb, var(--cm-accent) 45%, var(--cm-border));
    background: color-mix(in srgb, var(--cm-accent) 7%, var(--cm-surface));
}

.handover-icon[b-9c9i4moye0] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .6rem;
    color: var(--cm-accent);
    background: color-mix(in srgb, var(--cm-accent) 10%, transparent);
}

.handover-icon svg[b-9c9i4moye0] {
    width: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.handover-card > span:nth-child(2)[b-9c9i4moye0] {
    display: grid;
    min-width: 0;
}

.handover-card strong[b-9c9i4moye0] {
    font-size: .78rem;
}

.handover-card small[b-9c9i4moye0] {
    margin-top: .18rem;
    color: var(--cm-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.handover-card b[b-9c9i4moye0] {
    color: var(--cm-accent);
    font-size: .85rem;
}

.handover-unavailable[b-9c9i4moye0] {
    margin: .75rem;
    padding: 1rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: .78rem;
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}

.handover-unavailable strong[b-9c9i4moye0] {
    font-size: .75rem;
}

.handover-unavailable p[b-9c9i4moye0] {
    margin: .28rem 0 .7rem;
    font-size: .76rem;
}

.handover-unavailable a[b-9c9i4moye0] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.commissioning-footnote[b-9c9i4moye0] {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .75rem .85rem;
    border: 1px solid var(--cm-border);
    border-radius: .8rem;
    color: var(--cm-muted);
    background: var(--cm-soft);
}

.commissioning-footnote svg[b-9c9i4moye0] {
    flex: 0 0 1.1rem;
    width: 1.1rem;
    fill: none;
    stroke: var(--cm-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.commissioning-footnote p[b-9c9i4moye0] {
    margin: 0;
    font-size: .75rem;
    line-height: 1.5;
}

.commissioning-footnote strong[b-9c9i4moye0] {
    color: var(--cm-text);
}

/* Links and buttons carry workflow meaning on this page. Keep their visible
   labels and supporting copy readable without inflating passive evidence. */
.commissioning-page :is(a, button)[b-9c9i4moye0],
.commissioning-page :is(a, button) :is(span, strong, small, b)[b-9c9i4moye0] {
    font-size: .875rem;
}

.commissioning-page :is(a, button, input, summary, pre):focus-visible[b-9c9i4moye0] {
    outline: 3px solid var(--pulse-focus-ring, rgba(14, 165, 233, .38));
    outline-offset: 2px;
}

html[data-theme="dark"] .commissioning-page[b-9c9i4moye0] {
    background: transparent;
}

@media (max-width: 1180px) {
    .handover-grid[b-9c9i4moye0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .commissioning-page[b-9c9i4moye0] {
        margin: 0;
        padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
        border-radius: 0;
    }

    .commissioning-hero[b-9c9i4moye0] {
        align-items: flex-start;
    }

    .commissioning-step[b-9c9i4moye0] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .step-action[b-9c9i4moye0] {
        grid-column: 2;
        width: fit-content;
        min-width: 11rem;
    }

    .commissioning-section-heading[b-9c9i4moye0],
    .commissioning-handover > header[b-9c9i4moye0] {
        align-items: flex-start;
    }

    .inventory-evidence[b-9c9i4moye0],
    .handover-chip[b-9c9i4moye0] {
        white-space: normal;
    }

    .handover-grid[b-9c9i4moye0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .commissioning-servers > header[b-9c9i4moye0],
    .commissioning-section-heading[b-9c9i4moye0],
    .commissioning-handover > header[b-9c9i4moye0] {
        flex-direction: column;
        align-items: stretch;
    }

    .commissioning-hero[b-9c9i4moye0] { gap: .35rem .65rem; padding: 0; }
    .commissioning-hero-copy[b-9c9i4moye0] { flex-basis: 100%; }
    .commissioning-hero h1[b-9c9i4moye0] { flex-basis: 100%; margin: 0; }
    .commissioning-refresh[b-9c9i4moye0] { width: auto; min-width: 0; min-height: 2.75rem; padding-inline: .75rem; }

    .commissioning-key > div[b-9c9i4moye0] { display: grid; grid-template-columns: 1fr; }
    .commissioning-key > div > span[b-9c9i4moye0] { min-width: 0; }
    .commissioning-servers ul[b-9c9i4moye0] { grid-template-columns: 1fr; }
    .inventory-evidence[b-9c9i4moye0] { width: fit-content; }

    .commissioning-step[b-9c9i4moye0] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .step-title-row[b-9c9i4moye0] {
        display: grid;
        justify-items: start;
    }

    .step-action[b-9c9i4moye0] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 2.75rem;
    }

    .handover-grid[b-9c9i4moye0] { grid-template-columns: 1fr; }
    .handover-card[b-9c9i4moye0] { min-height: 4.5rem; }
    .commissioning-failure[b-9c9i4moye0] { grid-template-columns: auto minmax(0, 1fr); }
    .commissioning-failure button[b-9c9i4moye0] { grid-column: 1 / -1; width: 100%; min-height: 2.75rem; }
    .commissioning-notice[b-9c9i4moye0] { grid-template-columns: auto minmax(0, 1fr); }
    .commissioning-notice-action[b-9c9i4moye0] { grid-column: 1 / -1; justify-content: center; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .commissioning-page[b-9c9i4moye0] { padding-top: .7rem; }
}

@media (any-pointer: coarse) {
    .commissioning-page :is(a, button)[b-9c9i4moye0] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .commissioning-page *[b-9c9i4moye0],
    .commissioning-page *[b-9c9i4moye0]::before,
    .commissioning-page *[b-9c9i4moye0]::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.commissioning-control[b-9c9i4moye0] {
    margin-bottom: .85rem;
    padding: .85rem;
    border: 1px solid var(--cm-border);
    border-radius: var(--pulse-radius-lg, .875rem);
    background: var(--cm-surface);
}
.commissioning-control > header[b-9c9i4moye0] { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.commissioning-control h2[b-9c9i4moye0] { margin: .2rem 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.commissioning-control p[b-9c9i4moye0] { margin: .3rem 0; color: var(--cm-muted); font-size: .8125rem; line-height: 1.45; }
.commissioning-controls[b-9c9i4moye0] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pulse-workspace-gap, .75rem); align-items: end; margin-top: var(--pulse-workspace-gap, .75rem); }
.commissioning-owner[b-9c9i4moye0] { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.commissioning-owner label[b-9c9i4moye0] { flex: 1 1 14rem; }
.commissioning-review-actions[b-9c9i4moye0] { display: flex; flex-wrap: wrap; gap: .5rem; grid-column: 1 / -1; padding-top: .6rem; border-top: 1px solid var(--cm-border); }
.commissioning-controls label[b-9c9i4moye0] { display: grid; gap: .35rem; min-width: 0; color: var(--cm-text); font-size: .875rem; font-weight: 600; }
.commissioning-controls input[b-9c9i4moye0],
.commissioning-controls button[b-9c9i4moye0] { min-height: var(--pulse-control-min-height, 44px); border: 1px solid var(--cm-border); border-radius: var(--pulse-radius-sm, .5rem); padding: .55rem .75rem; font: inherit; font-size: .875rem; }
.commissioning-controls input[b-9c9i4moye0] { width: 100%; min-width: 0; background: var(--cm-surface); color: var(--cm-text); }
.commissioning-controls button[b-9c9i4moye0] { background: var(--cm-surface); color: var(--cm-text); font-weight: 600; cursor: pointer; }
.commissioning-controls button.primary[b-9c9i4moye0] { background: var(--pulse-action); border-color: var(--pulse-action); color: var(--pulse-on-action); }
.commissioning-controls button.secondary[b-9c9i4moye0] { background: var(--cm-soft); color: var(--cm-text); }
.commissioning-controls button:hover:not(:disabled)[b-9c9i4moye0] { border-color: var(--cm-accent); }
.commissioning-controls button.primary:hover:not(:disabled)[b-9c9i4moye0] { background: var(--pulse-action-hover); }
.commissioning-controls button:disabled[b-9c9i4moye0] { opacity: var(--pulse-disabled-opacity, .55); cursor: not-allowed; }
/* The workflow outcome is a bare paragraph, not the icon/copy/action grid the
   banner variants use, so it lays out as one block instead of one grid cell. */
p.commissioning-notice[b-9c9i4moye0] { display:block; }
/* A refused handover action must not be painted in the same amber as one that
   completed; the notice keeps its shape and swaps to the danger tokens. */
.commissioning-notice.is-error[b-9c9i4moye0] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}
.commissioning-control p.commissioning-notice[b-9c9i4moye0] { margin-top: .75rem; color: var(--pulse-warning-text); }
.commissioning-control p.commissioning-notice.is-error[b-9c9i4moye0] { color: var(--pulse-danger-text); }
/* Why each greyed control is greyed, next to the controls themselves. */
.commissioning-control-hints[b-9c9i4moye0] { list-style:none; padding:0; margin:.7rem 0 0; display:grid; gap:.3rem; }
.commissioning-control-hints li[b-9c9i4moye0] { position:relative; padding-left:1rem; color:var(--cm-muted); font-size:.8125rem; line-height:1.45; }
.commissioning-control-hints li[b-9c9i4moye0]::before { content:""; position:absolute; left:.25rem; top:.55em; width:.35rem; height:.35rem; border-radius:50%; background:currentColor; }
.commissioning-receipts[b-9c9i4moye0] { list-style: none; padding: 0; margin: .75rem 0; display: grid; }
.commissioning-receipts li[b-9c9i4moye0] { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(5rem, .5fr) minmax(9rem, 1fr) 4.25rem 5rem; gap: .65rem; align-items: center; padding: .55rem .25rem; border-bottom: 1px solid var(--cm-border); font-size: .8125rem; line-height: 1.45; }
.commissioning-receipts strong[b-9c9i4moye0] { font-weight: 600; overflow-wrap: anywhere; }
.commissioning-receipts time[b-9c9i4moye0] { color: var(--cm-muted); font-size: .75rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.receipt-state[b-9c9i4moye0] { color: var(--cm-text); overflow-wrap: anywhere; }
.receipt-freshness[b-9c9i4moye0] { width: fit-content; border-radius: var(--pulse-radius-sm, .5rem); padding: .15rem .4rem; font-size: .75rem; font-weight: 600; }
.receipt-freshness.is-stale[b-9c9i4moye0] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.receipt-freshness.is-fresh[b-9c9i4moye0] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.commissioning-receipts em[b-9c9i4moye0] { color: var(--cm-muted); font-size: .75rem; font-style: normal; }
.commissioning-control details[b-9c9i4moye0] { margin-top: 1rem; border-top: 1px solid var(--cm-border); }
.commissioning-control summary[b-9c9i4moye0] { min-height: var(--pulse-control-min-height, 44px); padding: .8rem 0; font-size: .875rem; font-weight: 600; cursor: pointer; }
.commissioning-control pre[b-9c9i4moye0] { max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem; border: 1px solid var(--cm-border); border-radius: var(--pulse-radius-sm, .5rem); background: var(--cm-soft); color: var(--cm-text); font-size: .75rem; line-height: 1.5; }
@media (max-width: 800px) {
    .commissioning-controls[b-9c9i4moye0] { grid-template-columns: 1fr; }
    .commissioning-receipts li[b-9c9i4moye0] { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; }
    .commissioning-receipts time[b-9c9i4moye0] { grid-column: 1; }
}
@media (max-width: 560px) {
    .commissioning-control > header[b-9c9i4moye0] { flex-direction:column; }
    .commissioning-capture button[b-9c9i4moye0],
    .commissioning-owner > *[b-9c9i4moye0],
    .commissioning-review-actions button[b-9c9i4moye0] { width: 100%; }
}

@keyframes commissioning-spin-b-9c9i4moye0 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/ContextGraph.razor.rz.scp.css */
.context-page[b-gywqae0uzo] {
    container-type: inline-size;
    container-name: context-page;
    --ctx-accent: var(--pulse-accent-text, var(--pulse-accent));
    --ctx-cyan: var(--pulse-accent);
    --ctx-ink: var(--pulse-text, #17272f);
    --ctx-muted: var(--pulse-muted, #687a82);
    --ctx-border: var(--pulse-border, #dbe5e8);
    --ctx-surface: var(--pulse-surface, #fff);
    --ctx-soft: var(--pulse-surface-soft, #f3f7f8);
    box-sizing: border-box;
    display: grid;
    gap: var(--pulse-workspace-gap, .75rem);
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 12px) var(--pulse-workspace-pad-x, 16px) var(--pulse-workspace-pad-bottom, 20px);
    color: var(--ctx-ink);
    background: transparent;
    line-height: 1.45;
    align-content: start;
}
.context-hero[b-gywqae0uzo] { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); padding: calc(var(--pulse-workspace-hero-pad-y, 14px) / 4) 0; border: 0; border-radius: 0; background: transparent; }
.context-hero h1[b-gywqae0uzo] { margin: 0; font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.context-primary[b-gywqae0uzo], .context-secondary[b-gywqae0uzo], .context-icon[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); border: 1px solid transparent; border-radius: var(--pulse-radius-sm, 8px); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; line-height: 1.3; }
.context-primary[b-gywqae0uzo] { padding: .64rem .88rem; color: var(--pulse-on-action); background: var(--pulse-action); border-color: var(--pulse-action); }
.context-primary:hover:not(:disabled)[b-gywqae0uzo] { border-color: var(--pulse-action-hover); background: var(--pulse-action-hover); }
.context-secondary:hover:not(:disabled)[b-gywqae0uzo], .context-icon:hover:not(:disabled)[b-gywqae0uzo] { border-color: var(--ctx-accent); background: var(--ctx-soft); }
.context-primary.compact[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); padding: .45rem .7rem; }
.context-secondary[b-gywqae0uzo] { display: inline-flex; align-items: center; justify-content: center; padding: .62rem .82rem; border-color: var(--ctx-border); color: var(--ctx-ink); background: var(--ctx-surface); text-decoration: none; }
.context-icon[b-gywqae0uzo] { width: var(--pulse-control-min-height, 44px); color: var(--ctx-accent); background: var(--ctx-soft); font-size: 1rem; flex-shrink: 0; }
:is(.context-primary, .context-secondary, .context-icon):disabled[b-gywqae0uzo] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; box-shadow: none; }
/* The hero action and the sentence that says why it is unavailable. The reason
   sits to the button's left, bounded to the hero's right half, so a long reason
   cannot squeeze the title. */
.context-hero-action[b-gywqae0uzo] { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .35rem .6rem; flex: 0 1 auto; max-width: 60%; }
.context-action-blocked[b-gywqae0uzo] { color: var(--ctx-muted); font-size: var(--pulse-workspace-lede-size, .82rem); font-weight: 600; line-height: 1.45; text-align: right; text-wrap: balance; }
.context-notice[b-gywqae0uzo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .7rem .8rem; border: 1px solid; border-radius: var(--pulse-radius-sm, 8px); font-size: .75rem; line-height: 1.45; }
.context-notice p[b-gywqae0uzo] { margin: 0; }
.context-notice button[b-gywqae0uzo] { border: 0; color: inherit; background: transparent; font-size: 1.1rem; cursor: pointer; min-width: var(--pulse-control-min-height, 44px); min-height: var(--pulse-control-min-height, 44px); }
.context-notice.error[b-gywqae0uzo] { border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); background: var(--pulse-danger-soft, #fff1f1); }
.context-notice.success[b-gywqae0uzo] { border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); background: var(--pulse-success-soft, #edf9f3); }
.context-notice.warning[b-gywqae0uzo] { border-color: var(--pulse-warning-border, #ddc379); color: var(--pulse-warning-text, #735711); background: var(--pulse-warning-soft, #fff9e8); }
.context-summary[b-gywqae0uzo] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.context-summary article[b-gywqae0uzo] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-surface); }
.context-summary strong[b-gywqae0uzo], .context-summary small[b-gywqae0uzo] { display: block; }
.context-summary strong[b-gywqae0uzo] { font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.context-summary small[b-gywqae0uzo] { margin-top: .12rem; color: var(--ctx-muted); font-size: .75rem; }
.context-reference[b-gywqae0uzo] { border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-md, 12px); background: var(--ctx-surface); }
.context-reference > summary[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); padding: .7rem .8rem; color: var(--ctx-muted); font-size: .875rem; font-weight: 600; cursor: pointer; }
.context-reference > summary:focus-visible[b-gywqae0uzo] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; border-radius: var(--pulse-radius-sm, 8px); }
.suggestion-principle[b-gywqae0uzo] { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; padding: .65rem .8rem; border-top: 1px solid var(--ctx-border); }
.principle-mark[b-gywqae0uzo] { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-muted); background: var(--ctx-soft); font-size: .75rem; font-weight: 700; letter-spacing: .08em; line-height: 0; }
.suggestion-principle strong[b-gywqae0uzo] { font-size: .75rem; }
.suggestion-principle p[b-gywqae0uzo] { margin: .15rem 0 0; color: var(--ctx-muted); font-size: .75rem; line-height: 1.5; }
.suggestion-principle a[b-gywqae0uzo] { display: inline-flex; min-height: var(--pulse-control-min-height, 44px); align-items: center; color: var(--ctx-accent); font-size: .875rem; font-weight: 600; text-decoration: none; }
.context-workbench[b-gywqae0uzo] { display: grid; grid-template-columns: clamp(15rem, 20%, 19rem) minmax(0, 1fr) clamp(18rem, 25%, 23rem); gap: .75rem; align-items: start; }
.asset-index[b-gywqae0uzo], .context-stage[b-gywqae0uzo], .context-editor[b-gywqae0uzo] { min-width: 0; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--ctx-surface); }
.asset-index > header[b-gywqae0uzo], .context-editor > header[b-gywqae0uzo], .stage-heading[b-gywqae0uzo] { display: flex; gap: .65rem; align-items: center; justify-content: space-between; padding: .75rem .85rem; border-bottom: 1px solid var(--ctx-border); flex-wrap: wrap; }
:is(.asset-index, .context-editor, .context-stage) h2[b-gywqae0uzo] { margin: .12rem 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
:is(.asset-index, .context-editor, .context-stage) p[b-gywqae0uzo] { margin: .12rem 0 0; color: var(--ctx-muted); font-size: .75rem; line-height: 1.5; }
.asset-search[b-gywqae0uzo] { display: block; padding: .5rem; border-bottom: 1px solid var(--ctx-border); }
.asset-search input[b-gywqae0uzo], .target-picker > input[b-gywqae0uzo], .asset-scope select[b-gywqae0uzo] { width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .52rem .62rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: var(--ctx-soft); font: inherit; font-size: .875rem; }
.asset-scope[b-gywqae0uzo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: 0 .5rem .5rem; border-bottom: 1px solid var(--ctx-border); }
.asset-scope label[b-gywqae0uzo] { display: grid; min-width: 0; gap: .24rem; color: var(--ctx-muted); font-size: .75rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.asset-scope .group-scope[b-gywqae0uzo] { grid-column: 1 / -1; }
.asset-list[b-gywqae0uzo] { display: grid; gap: .24rem; max-height: clamp(15rem, calc(100dvh - 22rem), 42rem); padding: .42rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.asset-row[b-gywqae0uzo] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .58rem; align-items: center; min-width: 0; min-height: 3.5rem; padding: .5rem .55rem; border: 1px solid transparent; border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: transparent; text-align: left; cursor: pointer; }
.asset-row:hover[b-gywqae0uzo] { border-color: color-mix(in srgb, var(--ctx-accent) 40%, var(--ctx-border)); background: color-mix(in srgb, var(--ctx-accent) 6%, var(--ctx-surface)); }
.asset-row.selected[b-gywqae0uzo] { border-color: var(--ctx-accent); background: color-mix(in srgb, var(--ctx-accent) 13%, var(--ctx-surface)); box-shadow: inset .2rem 0 0 var(--ctx-accent); }
.asset-glyph[b-gywqae0uzo] { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-muted); background: var(--ctx-soft); font-size: .75rem; font-weight: 700; line-height: 0; }
.asset-glyph.sensor[b-gywqae0uzo] { background: var(--ctx-soft); }
.asset-row strong[b-gywqae0uzo], .asset-row small[b-gywqae0uzo] { display: block; overflow-wrap: anywhere; }
.asset-row strong[b-gywqae0uzo] { font-size: .875rem; font-weight: 600; }
.asset-row small[b-gywqae0uzo] { margin-top: .12rem; color: var(--ctx-muted); font-size: .75rem; }
.asset-mode[b-gywqae0uzo] { grid-column: 2; width: fit-content; padding: .17rem .38rem; border-radius: 999px; color: var(--pulse-success-text, #176341); background: var(--pulse-success-soft, #edf9f3); font-size: .75rem; }
.asset-mode.maintenance[b-gywqae0uzo] { color: var(--pulse-warning-text, #855d12); background: var(--pulse-warning-soft, #fff7df); }
.asset-mode.inactive[b-gywqae0uzo], .asset-mode.retired[b-gywqae0uzo] { color: var(--ctx-muted); background: var(--ctx-soft); }
.context-empty[b-gywqae0uzo], .editor-placeholder[b-gywqae0uzo] { padding: 1.2rem .9rem; color: var(--ctx-muted); font-size: .75rem; line-height: 1.55; text-align: center; }
.context-empty-action[b-gywqae0uzo] { display: grid; min-height: 12rem; gap: .42rem; place-items: center; align-content: center; }
.context-empty-action strong[b-gywqae0uzo] { color: var(--ctx-ink); font-size: .75rem; }
.context-empty-action p[b-gywqae0uzo] { max-width: 24rem; margin: 0; }
.context-empty-action .context-secondary[b-gywqae0uzo] { margin-top: .25rem; }
.asset-window-footer[b-gywqae0uzo] { display: flex; gap: .5rem; align-items: center; justify-content: space-between; padding: .55rem .65rem; border-top: 1px solid var(--ctx-border); color: var(--ctx-muted); background: var(--ctx-soft); font-size: .75rem; }
.asset-window-footer button[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); padding: .4rem .6rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-accent); background: var(--ctx-surface); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.asset-window-footer button:hover[b-gywqae0uzo] { border-color: var(--ctx-accent); }
.editor-placeholder strong[b-gywqae0uzo] { display: block; color: var(--ctx-ink); font-size: .75rem; }
.stage-empty[b-gywqae0uzo] { display: grid; place-items: center; min-height: 20rem; padding: 1.25rem; text-align: center; align-content: center; gap: .65rem; }
.stage-radar[b-gywqae0uzo] { width: 2.75rem; height: 2.75rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-md, 12px); background: var(--ctx-soft); display: grid; place-items: center; color: var(--ctx-muted); }
.context-orbit[b-gywqae0uzo] { position: relative; display: grid; grid-template-columns: minmax(8.5rem, .78fr) minmax(0, 1.4fr); gap: 1rem; align-items: center; min-height: 15rem; padding: 1rem; border-bottom: 1px solid var(--ctx-border); background: var(--ctx-soft); }
.context-orbit[b-gywqae0uzo]::before { position: absolute; left: 27%; width: 38%; height: 1px; background: var(--ctx-border); content: ""; }
.focus-node[b-gywqae0uzo] { position: relative; z-index: 1; display: grid; place-items: center; min-height: 7rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--ctx-cyan) 48%, var(--ctx-border)); border-radius: var(--pulse-radius-md, 12px); background: var(--ctx-surface); text-align: center; }
.focus-node span[b-gywqae0uzo] { color: var(--ctx-accent); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.focus-node strong[b-gywqae0uzo] { max-width: 100%; font-size: .75rem; overflow-wrap: anywhere; }
.focus-node small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.orbit-targets[b-gywqae0uzo] { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.orbit-node[b-gywqae0uzo] { display: grid; min-width: 0; padding: .52rem .58rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: var(--ctx-surface); text-align: left; cursor: pointer; min-height: var(--pulse-control-min-height, 44px); }
.orbit-node:hover[b-gywqae0uzo] { border-color: var(--ctx-cyan); }
.orbit-node.disabled[b-gywqae0uzo], .relationship-row.disabled[b-gywqae0uzo] { opacity: .55; }
.orbit-node span[b-gywqae0uzo] { color: var(--ctx-accent); font-size: .75rem; font-weight: 700; }
.orbit-node strong[b-gywqae0uzo] { font-size: .75rem; overflow-wrap: anywhere; }
.orbit-node small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.orbit-empty[b-gywqae0uzo] { position: relative; z-index: 1; color: var(--ctx-muted); font-size: .75rem; text-align: center; }
.relationship-list[b-gywqae0uzo], .suggestion-list[b-gywqae0uzo] { padding: .85rem; border-bottom: 1px solid var(--ctx-border); }
:is(.relationship-list, .suggestion-list) > header[b-gywqae0uzo] { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; flex-wrap: wrap; gap: .5rem; }
:is(.relationship-list, .suggestion-list) h3[b-gywqae0uzo] { margin: 0; font-size: .75rem; }
.retired-toggle[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); padding: .4rem .6rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-accent); background: var(--ctx-surface); font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.retired-toggle:hover[b-gywqae0uzo] { border-color: var(--ctx-accent); }
.retired-toggle[aria-pressed="true"][b-gywqae0uzo] { border-color: var(--ctx-cyan); background: color-mix(in srgb, var(--ctx-cyan) 8%, var(--ctx-surface)); }
.relationship-row[b-gywqae0uzo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .58rem; align-items: center; width: 100%; min-width: 0; margin-top: .28rem; padding: .53rem .58rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: var(--ctx-surface); text-align: left; cursor: pointer; min-height: var(--pulse-control-min-height, 44px); }
.relation-rank[b-gywqae0uzo] { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-accent); background: var(--ctx-soft); font-size: .75rem; font-weight: 700; }
.relationship-row strong[b-gywqae0uzo], .relationship-row small[b-gywqae0uzo] { display: block; overflow-wrap: anywhere; }
.relationship-row strong[b-gywqae0uzo] { font-size: .75rem; }
.relationship-row small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.relation-origin[b-gywqae0uzo] { padding: .18rem .38rem; border-radius: 999px; color: var(--ctx-muted); background: var(--ctx-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.relation-origin.mapsuggestion[b-gywqae0uzo] { color: var(--ctx-accent); background: color-mix(in srgb, var(--ctx-cyan) 10%, transparent); }
.suggestion-loading[b-gywqae0uzo] { color: var(--ctx-accent); font-size: .75rem; }
.suggestion-grid[b-gywqae0uzo] { display: grid; gap: .35rem; }
.suggestion-card[b-gywqae0uzo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .58rem; border: 1px dashed var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-surface); }
.confidence-ring[b-gywqae0uzo] { --size: 2.3rem; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--ctx-cyan) calc(var(--confidence) * 1turn), var(--ctx-border) 0); }
.confidence-ring[b-gywqae0uzo]::before { grid-area: 1 / 1; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ctx-surface); content: ""; }
.confidence-ring b[b-gywqae0uzo] { z-index: 1; grid-area: 1 / 1; font-size: .75rem; }
.suggestion-card strong[b-gywqae0uzo], .suggestion-card small[b-gywqae0uzo] { display: block; }
.suggestion-card strong[b-gywqae0uzo] { font-size: .75rem; }
.suggestion-card small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.suggestion-card p[b-gywqae0uzo] { overflow-wrap: anywhere; }
.suggestion-card > button[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); padding: .35rem .55rem; border: 1px solid var(--ctx-cyan); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-accent); background: transparent; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.context-editor[b-gywqae0uzo] { position: sticky; top: var(--pulse-sticky-top); max-height: calc(100dvh - var(--pulse-sticky-top) - .75rem); overflow: auto; }
.context-editor:not(.open)[b-gywqae0uzo] { min-height: 14rem; }
.editor-source[b-gywqae0uzo] { display: grid; padding: .8rem .9rem; text-align: center; }
.editor-source small[b-gywqae0uzo], .target-picker > small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.editor-source strong[b-gywqae0uzo] { margin-top: .15rem; font-size: .75rem; }
.direction-arrow[b-gywqae0uzo] { display: grid; grid-template-columns: 1fr auto 1fr; gap: .35rem; align-items: center; padding: 0 .9rem; color: var(--ctx-accent); font-size: .75rem; }
.direction-arrow span[b-gywqae0uzo] { height: 1px; background: var(--ctx-border); }
.target-picker[b-gywqae0uzo] { display: grid; gap: .32rem; padding: .75rem .9rem; }
.context-target-scope[b-gywqae0uzo] { display: grid; gap: .38rem; padding: .45rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-soft); }
.context-target-scope label[b-gywqae0uzo] { display: grid; gap: .2rem; color: var(--ctx-muted); font-size: .75rem; font-weight: 700; }
.context-target-scope select[b-gywqae0uzo] { width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .4rem .5rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: var(--ctx-surface); font: inherit; font-size: .875rem; }
.chosen-target[b-gywqae0uzo] { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: .55rem .6rem; border: 1px solid color-mix(in srgb, var(--ctx-cyan) 42%, var(--ctx-border)); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: color-mix(in srgb, var(--ctx-cyan) 5%, var(--ctx-surface)); text-align: left; cursor: pointer; min-height: var(--pulse-control-min-height, 44px); gap: .5rem; }
.chosen-target strong[b-gywqae0uzo], .chosen-target small[b-gywqae0uzo] { display: block; overflow-wrap: anywhere; }
.chosen-target strong[b-gywqae0uzo] { font-size: .75rem; }
.chosen-target small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.chosen-target b[b-gywqae0uzo] { color: var(--ctx-accent); font-size: .75rem; }
.target-results[b-gywqae0uzo] { display: grid; max-height: 14rem; overflow-y: auto; padding: .375rem; }
.target-results button[b-gywqae0uzo] { display: grid; gap: .08rem; padding: .48rem .5rem; border: 0; border-bottom: 1px solid var(--ctx-border); color: var(--ctx-ink); background: transparent; text-align: left; cursor: pointer; min-height: var(--pulse-control-min-height, 44px); }
.target-results button:hover[b-gywqae0uzo] { background: var(--ctx-soft); }
.target-results strong[b-gywqae0uzo] { font-size: .75rem; overflow-wrap: anywhere; }
.target-results small[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; }
.editor-fields[b-gywqae0uzo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .25rem .9rem .8rem; }
.editor-fields > label[b-gywqae0uzo] { display: grid; min-width: 0; gap: .28rem; color: var(--ctx-muted); font-size: .875rem; font-weight: 600; }
.editor-fields label > span b[b-gywqae0uzo] { font-size: .75rem; text-transform: uppercase; }
.editor-fields :is(input, select, textarea)[b-gywqae0uzo] { width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .5rem .55rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-ink); background: var(--ctx-surface); font: inherit; font-size: .875rem; }
.editor-fields :is(input, select, textarea):focus[b-gywqae0uzo], :is(.asset-search, .target-picker) input:focus[b-gywqae0uzo] { border-color: var(--ctx-cyan); }
.context-page :is(button, a, input, select, textarea):focus-visible[b-gywqae0uzo] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.editor-fields .wide[b-gywqae0uzo] { grid-column: 1 / -1; }
.editor-fields textarea[b-gywqae0uzo] { resize: vertical; }
.context-direction-field[b-gywqae0uzo] { min-width: 0; margin: 0; padding: .68rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-soft); }
.context-direction-field legend[b-gywqae0uzo] { padding: 0 .25rem; color: var(--ctx-ink); font-size: .75rem; font-weight: 700; }
.context-direction-field p[b-gywqae0uzo] { margin: 0 0 .55rem; font-size: .75rem; }
.direction-pad[b-gywqae0uzo] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.direction-pad button[b-gywqae0uzo], .direction-unspecified[b-gywqae0uzo] { min-width: 0; min-height: var(--pulse-control-min-height, 44px); border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--ctx-muted); background: var(--ctx-surface); font: inherit; cursor: pointer; }
.direction-pad button[b-gywqae0uzo] { display: grid; place-items: center; gap: .05rem; padding: .25rem; }
.direction-pad button span[b-gywqae0uzo] { color: var(--ctx-accent); font-size: 1rem; line-height: 1; }
.direction-pad button small[b-gywqae0uzo] { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.direction-pad button.selected[b-gywqae0uzo], .direction-unspecified.selected[b-gywqae0uzo] { border-color: var(--ctx-cyan); color: var(--ctx-accent); background: color-mix(in srgb, var(--ctx-cyan) 10%, var(--ctx-surface)); }
.direction-unspecified[b-gywqae0uzo] { width: 100%; min-height: var(--pulse-control-min-height, 44px); margin-top: .3rem; font-size: .875rem; font-weight: 600; }
.modality-pair[b-gywqae0uzo] { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .45rem; align-items: center; padding: .65rem; border: 1px solid color-mix(in srgb, var(--ctx-cyan) 35%, var(--ctx-border)); border-radius: var(--pulse-radius-sm, 8px); background: color-mix(in srgb, var(--ctx-cyan) 5%, var(--ctx-surface)); }
.modality-pair > div[b-gywqae0uzo] { display: grid; min-width: 0; gap: .18rem; }
.modality-pair span[b-gywqae0uzo] { color: var(--ctx-muted); font-size: .75rem; font-weight: 700; }
.modality-pair strong[b-gywqae0uzo] { font-size: .75rem; overflow-wrap: anywhere; }
.modality-pair select[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); }
.modality-pair .pair-link[b-gywqae0uzo] { color: var(--ctx-cyan); font-size: 1rem; }
.modality-pair > p[b-gywqae0uzo] { grid-column: 1 / -1; margin: .08rem 0 0; font-size: .75rem; }
.editor-fields .toggle-field[b-gywqae0uzo] { grid-template-columns: auto 1fr; align-items: start; padding: .52rem; border: 1px solid var(--ctx-border); border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-soft); cursor: pointer; min-height: var(--pulse-control-min-height, 44px); }
.toggle-field input[b-gywqae0uzo] { width: 1rem; min-height: 1rem; accent-color: var(--ctx-accent); }
.toggle-field strong[b-gywqae0uzo], .toggle-field small[b-gywqae0uzo] { display: block; }
.toggle-field strong[b-gywqae0uzo] { color: var(--ctx-ink); font-size: .75rem; }
.toggle-field small[b-gywqae0uzo] { margin-top: .08rem; color: var(--ctx-muted); font-size: .75rem; line-height: 1.4; }
.preview-budget[b-gywqae0uzo] { margin: 0 .9rem .75rem; padding: .6rem .65rem; border-radius: var(--pulse-radius-sm, 8px); background: var(--ctx-soft); border: 1px solid var(--ctx-border); }
.preview-budget strong[b-gywqae0uzo] { font-size: .75rem; }
.preview-budget p[b-gywqae0uzo] { font-size: .75rem; }
.context-editor footer[b-gywqae0uzo] { position: sticky; bottom: 0; z-index: 2; display: flex; gap: .4rem; justify-content: flex-end; padding: .75rem .9rem; border-top: 1px solid var(--ctx-border); background: var(--ctx-surface); flex-wrap: wrap; }
.retire-relationship[b-gywqae0uzo] { margin-right: auto; border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); background: var(--pulse-danger-soft, #fff1f1); }
.context-page :is(button, a, label, input, select, textarea)[b-gywqae0uzo] { font-size: .875rem; }
.context-page :is(button, a, label) :is(strong, small, span, b, em)[b-gywqae0uzo] { font-size: inherit; }
.context-page .context-icon[b-gywqae0uzo] { font-size: 1rem; }
.context-page .context-notice button[aria-label][b-gywqae0uzo] { font-size: 1.1rem; }
.context-page .direction-pad button > span[aria-hidden="true"][b-gywqae0uzo] { font-size: 1rem; }
.sr-only[b-gywqae0uzo] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 820px) { .context-page[b-gywqae0uzo] { margin: 0; padding: .75rem .625rem 1.75rem; border-radius: var(--pulse-radius-lg, 1.125rem); } .suggestion-principle a[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); } .context-hero[b-gywqae0uzo] { padding: 0; } .context-hero-action[b-gywqae0uzo] { display: contents; } .context-action-blocked[b-gywqae0uzo] { flex: 1 1 100%; text-align: right; } .context-hero .context-primary[b-gywqae0uzo] { min-height: 44px; } .context-summary[b-gywqae0uzo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .asset-list[b-gywqae0uzo] { max-height: 24rem; } .context-orbit[b-gywqae0uzo] { grid-template-columns: 1fr; } .context-orbit[b-gywqae0uzo]::before { display: none; } .focus-node[b-gywqae0uzo] { width: min(10rem, 100%); margin: auto; border-radius: 1rem; } }
@media (max-width: 560px) { .suggestion-principle[b-gywqae0uzo] { grid-template-columns: auto 1fr; } .suggestion-principle a[b-gywqae0uzo] { grid-column: 2; } .asset-scope[b-gywqae0uzo] { grid-template-columns: 1fr; } .asset-window-footer[b-gywqae0uzo] { align-items: stretch; flex-direction: column; } .asset-window-footer button[b-gywqae0uzo] { width: 100%; min-height: 44px; } .orbit-targets[b-gywqae0uzo] { grid-template-columns: 1fr; } .relationship-row[b-gywqae0uzo] { grid-template-columns: auto minmax(0, 1fr); } .relation-origin[b-gywqae0uzo] { grid-column: 2; } .suggestion-card[b-gywqae0uzo] { grid-template-columns: auto minmax(0, 1fr); } .suggestion-card > button[b-gywqae0uzo] { grid-column: 1 / -1; min-height: 44px; } .editor-fields[b-gywqae0uzo] { grid-template-columns: 1fr; } .editor-fields .wide[b-gywqae0uzo] { grid-column: auto; } .modality-pair[b-gywqae0uzo] { grid-template-columns: 1fr; } .modality-pair .pair-link[b-gywqae0uzo] { justify-self: center; transform: rotate(90deg); } .modality-pair > p[b-gywqae0uzo] { grid-column: auto; } .context-editor footer[b-gywqae0uzo] { flex-direction: column-reverse; } .context-editor footer button[b-gywqae0uzo] { width: 100%; min-height: 44px; } }
@media (any-pointer: coarse) { .suggestion-principle a[b-gywqae0uzo] { min-height: var(--pulse-control-min-height, 44px); } }
@media (max-width: 560px), (any-pointer: coarse) { .context-page :is(input[type="text"], input[type="search"], input[type="number"], textarea)[b-gywqae0uzo] { font-size: 16px; } }
/* Measured against the page, which is 252px of sidebar narrower than the window:
   viewport breakpoints put a 65rem floor of columns into 60rem of page and scrolled
   the whole document sideways. */
@container context-page (max-width: 68rem) { .context-workbench[b-gywqae0uzo] { grid-template-columns: clamp(15rem, 30%, 19rem) minmax(0, 1fr); } .context-editor[b-gywqae0uzo] { position: static; grid-column: 1 / -1; max-height: none; } }
@container context-page (max-width: 46rem) { .context-workbench[b-gywqae0uzo] { grid-template-columns: 1fr; } .context-editor[b-gywqae0uzo] { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .context-page *[b-gywqae0uzo], .context-page *[b-gywqae0uzo]::before, .context-page *[b-gywqae0uzo]::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-page[b-gcbblvx3ah] {
    --dashboard-panel-bg: var(--pulse-surface);
    --dashboard-panel-border: var(--pulse-border);
    --dashboard-panel-shadow: var(--pulse-shadow-sm);
    color: var(--pulse-text);
    font-size: 14px;
    line-height: 1.45;
    isolation: isolate;
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    position: relative;
    width: 100%;
}


/* The title row sits on the canvas: the view title, the last-sync read-out and
   the view switch share one control-height line. */
.dashboard-hero[b-gcbblvx3ah] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-xl, 16px);
    box-shadow: none;
    color: var(--pulse-text);
    display: flex;
    flex-wrap: wrap;
    gap: 6px clamp(14px, 2vw, 24px);
    justify-content: space-between;
    margin: 0 0 var(--pulse-workspace-gap, 12px);
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
    position: relative;
}

.dashboard-hero-copy[b-gcbblvx3ah],
.dashboard-command-card[b-gcbblvx3ah] {
    position: relative;
    z-index: 2;
}


/* Title and context share one baseline row: an extra line here is a line the
   charts lose. */
.dashboard-hero-copy[b-gcbblvx3ah] {
    align-items: baseline;
    column-gap: var(--pulse-workspace-hero-pad-y, 14px);
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    row-gap: 2px;
}

.dashboard-hero h1[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-size: var(--pulse-workspace-title-size);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: 0;
}

.control-room-launch svg[b-gcbblvx3ah],
.filter-heading-icon svg[b-gcbblvx3ah],
.filter-toggle-chevron svg[b-gcbblvx3ah],
.filter-buttons svg[b-gcbblvx3ah],
.kpi-icon svg[b-gcbblvx3ah] {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}


/* A single row of controls, not a stacked card: the old column cost the page
   ~90px it had nothing to say in. It closes the filter row on the right. */
.dashboard-command-card[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-end;
    margin-left: auto;
}

.command-secondary-actions[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
}

.dashboard-actions[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.control-room-launch[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-accent);
    /* The sidebar provides this generic destination on desktop. */
    display: none;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: flex-start;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 7px 11px;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}

.control-room-launch > span:nth-child(2)[b-gcbblvx3ah] {
    flex: 1;
}

.control-room-launch svg[b-gcbblvx3ah] {
    height: 16px;
    transition: transform .16s ease;
    width: 16px;
}

.control-room-launch:hover[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-accent);
}

.control-room-launch:hover svg[b-gcbblvx3ah] {
    transform: translateX(2px);
}

.command-secondary-actions[b-gcbblvx3ah] {
    gap: 8px;
}

.auto-refresh[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 10px;
    color: var(--pulse-text);
    cursor: pointer;
    display: inline-flex;
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 7px 10px;
    white-space: nowrap;
}

.auto-refresh input[b-gcbblvx3ah] {
    accent-color: var(--pulse-accent-bright);
    height: 14px;
    margin: 0;
    width: 14px;
}

.refresh-button[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-action);
    border: 1px solid var(--pulse-action);
    border-radius: 10px;
    color: var(--pulse-on-action);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 7px 11px;
    transition: background .16s ease, border-color .16s ease;
}

.refresh-button:hover:not(:disabled)[b-gcbblvx3ah] {
    background: var(--pulse-action-hover);
    border-color: var(--pulse-action-hover);
}

.refresh-button:disabled[b-gcbblvx3ah] {
    cursor: wait;
    opacity: .7;
}

.refresh-icon[b-gcbblvx3ah] {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.refresh-icon.is-spinning[b-gcbblvx3ah] {
    animation: spin-b-gcbblvx3ah .8s linear infinite;
}

.last-updated[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: var(--pulse-workspace-lede-size, 13px);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.dashboard-tabs[b-gcbblvx3ah] {
    align-items: center;
    background: var(--dashboard-panel-bg);
    border: 1px solid var(--dashboard-panel-border);
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex: 0 1 auto;
    gap: 4px;
    margin-left: auto;
    margin-top: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;
}

.dashboard-tabs[b-gcbblvx3ah]::-webkit-scrollbar {
    display: none;
}

.dashboard-tabs a[b-gcbblvx3ah] {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 7px 10px;
    position: relative;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    white-space: nowrap;
}

.dashboard-tabs a:hover[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    color: var(--pulse-accent);
}

.dashboard-tabs a.active[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-accent);
}

.dashboard-tabs a:focus-visible[b-gcbblvx3ah],
.control-room-launch:focus-visible[b-gcbblvx3ah],
.refresh-button:focus-visible[b-gcbblvx3ah],
.time-presets button:focus-visible[b-gcbblvx3ah],
.filter-buttons button:focus-visible[b-gcbblvx3ah] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.filter-panel[b-gcbblvx3ah] {
    background: var(--dashboard-panel-bg);
    border: 1px solid var(--dashboard-panel-border);
    border-radius: var(--pulse-radius-lg);
    box-shadow: var(--dashboard-panel-shadow);
    margin-top: 0;
    /* The camera-group disclosure is an anchored popup below this panel. */
    overflow: visible;
    padding: 8px 12px 12px;
    position: relative;
}

.filter-heading[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: space-between;
    margin-bottom: 13px;
}


/* Closed, this row IS the filter panel, so it carries no bottom margin. */
.filter-panel[data-expanded="false"][b-gcbblvx3ah] {
    padding-bottom: 8px;
}

.filter-panel[data-expanded="false"] .filter-heading[b-gcbblvx3ah] {
    margin-bottom: 0;
}

.filter-heading-title[b-gcbblvx3ah] {
    flex: 1 1 280px;
    min-width: 0;
}

.filter-heading-flags[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* The whole heading is the disclosure control: a chevron alone is a 16px
   target for the one thing this panel does at 3am. */
.filter-toggle[b-gcbblvx3ah] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 11px;
    min-width: 0;
    /* Vertical padding only: horizontal padding on a 100%-wide button would
       depend on the box model and could push the panel's own padding out. */
    padding: 2px 0;
    text-align: left;
    width: 100%;
}

.filter-toggle:hover .filter-toggle-title[b-gcbblvx3ah],
.filter-toggle:hover .filter-toggle-chevron[b-gcbblvx3ah] {
    color: var(--pulse-accent);
}

.filter-toggle:focus-visible[b-gcbblvx3ah] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.filter-toggle-copy[b-gcbblvx3ah] {
    align-items: baseline;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 1px 10px;
    min-width: 0;
}

.filter-toggle-title[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}


/* One line, ellipsised, with the full text in the title attribute: a summary
   that wrapped to three lines would give back the height the collapse bought. */
.filter-toggle-summary[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    /* Shrinks on the title's line first and only drops below it when even
       240px is gone. */
    flex: 1 1 240px;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-toggle-chevron[b-gcbblvx3ah] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    transition: transform .15s ease;
}

.filter-toggle-chevron svg[b-gcbblvx3ah] {
    height: 16px;
    width: 16px;
}

.filter-panel[data-expanded="true"] .filter-toggle-chevron[b-gcbblvx3ah] {
    transform: rotate(180deg);
}

.filter-hint[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: 12px;
    margin: 0 0 12px;
}

.filter-heading-icon[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 10px;
    color: var(--pulse-accent);
    display: flex;
    flex: 0 0 auto;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.filter-heading-icon svg[b-gcbblvx3ah] {
    height: 19px;
    width: 19px;
}


/* The heading is a heading and the disclosure button at once, so the type ramp
   lives on the spans inside the button rather than on the h2 around it. */
.filter-heading h2[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-size: 15px;
    letter-spacing: -.01em;
    margin: 0;
}

.filter-count[b-gcbblvx3ah],
.panel-badge[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    border: 1px solid var(--pulse-accent-border);
    border-radius: 999px;
    color: var(--pulse-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    white-space: nowrap;
}

.filter-grid[b-gcbblvx3ah] {
    align-items: end;
    display: grid;
    gap: 12px;
    /* The last track holds Apply + Reset, which cannot shrink below their
       label text; a 1fr track narrower than that pushed Reset off the panel. */
    grid-template-columns: repeat(7, minmax(115px, 1fr)) max-content;
}

/* The picker's standalone minimum is wider than a filter track; inside this
   grid it must shrink like the selects beside it (its own popup keeps a
   readable width regardless). */
.filter-field[b-gcbblvx3ah]  .group-filter {
    min-width: 0;
}

.time-presets[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 5px;
    width: fit-content;
}

.time-presets button[b-gcbblvx3ah] {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--pulse-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.time-presets button:hover:not(:disabled)[b-gcbblvx3ah],
.time-presets button.selected[b-gcbblvx3ah] {
    background: var(--pulse-surface);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-accent);
}

.time-presets button:disabled[b-gcbblvx3ah] {
    cursor: wait;
    opacity: .6;
}

.filter-field[b-gcbblvx3ah] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    /* The camera-group picker is a child component, so the select chrome below
       cannot reach it; it reads its toolbar chrome from these properties. */
    --group-filter-height: var(--pulse-control-compact-height);
    --group-filter-radius: var(--pulse-radius-sm);
    --group-filter-font-size: 14px;
    --group-filter-surface: var(--pulse-surface-soft);
    --group-filter-border: var(--pulse-border-strong);
}

.filter-field > span[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}

.filter-field small[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.filter-field input[b-gcbblvx3ah],
.filter-field select[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border-strong);
    border-radius: 9px;
    color: var(--pulse-text);
    font-family: inherit;
    font-size: 14px;
    height: 38px;
    min-width: 0;
    padding: 7px 9px;
    width: 100%;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.filter-field input:focus[b-gcbblvx3ah],
.filter-field select:focus[b-gcbblvx3ah] {
    border-color: var(--pulse-accent-bright);
    box-shadow: 0 0 0 3px var(--pulse-focus-ring-soft);
}

.filter-field input:disabled[b-gcbblvx3ah] {
    cursor: not-allowed;
    opacity: .55;
}

.resource-filter[b-gcbblvx3ah] {
    position: relative;
}

.resource-combobox[b-gcbblvx3ah] {
    min-width: 0;
    position: relative;
}

.resource-combobox > input[b-gcbblvx3ah] {
    padding-right: 36px;
}

.resource-clear[b-gcbblvx3ah] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--pulse-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 20px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 30px;
}

.resource-clear:hover:not(:disabled)[b-gcbblvx3ah] {
    background: var(--pulse-surface-inset, #eef2f7);
    color: var(--pulse-text, #172033);
}

.resource-clear:focus-visible[b-gcbblvx3ah],
.resource-option:focus-visible[b-gcbblvx3ah],
.resource-state button:focus-visible[b-gcbblvx3ah],
.resource-pager button:focus-visible[b-gcbblvx3ah] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 1px;
}

.resource-popover[b-gcbblvx3ah] {
    background: var(--pulse-surface-overlay, #fff);
    border: 1px solid var(--pulse-control-border, #cbd5e1);
    border-radius: 12px;
    box-shadow: var(--pulse-shadow-lg, 0 20px 48px rgba(15, 23, 42, .18));
    color: var(--pulse-text, #172033);
    left: 0;
    max-width: min(430px, calc(100vw - 32px));
    overflow: hidden;
    position: absolute;
    top: calc(100% + 6px);
    width: clamp(300px, 31vw, 430px);
    z-index: 40;
}


/* Camera key is the last field in the row, so a list anchored to its left edge
   hangs off the panel's right edge. Anchored to the right it opens inwards,
   over the fields it belongs with rather than over nothing. */
.camera-key-filter .resource-popover[b-gcbblvx3ah] {
    left: auto;
    right: 0;
}

.resource-options[b-gcbblvx3ah] {
    max-height: min(320px, 48vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}


/* The list stays mounted while the next search is in flight: tearing it out per
   keystroke collapsed and re-expanded the popover under the pointer. */
.resource-options.is-stale[b-gcbblvx3ah] {
    opacity: .55;
}

.resource-option[b-gcbblvx3ah] {
    align-items: flex-start;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--pulse-text, #172033);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    gap: 2px;
    min-height: 48px;
    padding: 8px 10px;
    text-align: left;
    width: 100%;
}

.resource-option + .resource-option[b-gcbblvx3ah] {
    margin-top: 2px;
}

.resource-option:hover[b-gcbblvx3ah],
.resource-option.is-active[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft, #ecfdf5);
    border-color: var(--pulse-accent-border, #99f6e4);
}

.resource-option.is-selected[b-gcbblvx3ah] {
    box-shadow: inset 3px 0 0 var(--pulse-action, #0f766e);
}

.resource-option > span[b-gcbblvx3ah] {
    font-size: 14px;
    font-weight: 700;
    min-height: var(--pulse-control-compact-height, 38px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.resource-option > small[b-gcbblvx3ah],
.filter-field .resource-selection[b-gcbblvx3ah] {
    color: var(--pulse-muted, #64748b);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.filter-field .resource-selection[b-gcbblvx3ah] {
    display: block;
    min-height: 16px;
}

.resource-state[b-gcbblvx3ah] {
    color: var(--pulse-muted, #64748b);
    font-size: 12px;
    line-height: 1.45;
    padding: 14px;
}

.resource-state-error[b-gcbblvx3ah] {
    align-items: center;
    color: var(--pulse-danger-text, #991b1b);
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.resource-state button[b-gcbblvx3ah],
.resource-pager button[b-gcbblvx3ah] {
    background: var(--pulse-control-surface, #f8fafc);
    border: 1px solid var(--pulse-control-border, #cbd5e1);
    border-radius: 8px;
    color: var(--pulse-control-text, #172033);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 6px 9px;
}

.resource-pager[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface-inset, #f8fafc);
    border-top: 1px solid var(--pulse-border, #e2e8f0);
    color: var(--pulse-muted, #64748b);
    display: flex;
    font-size: 12px;
    gap: 10px;
    justify-content: space-between;
    padding: 7px 9px;
}

.resource-pager > div[b-gcbblvx3ah] {
    display: flex;
    gap: 6px;
}

.resource-pager button:disabled[b-gcbblvx3ah],
.resource-clear:disabled[b-gcbblvx3ah] {
    cursor: default;
    opacity: var(--pulse-disabled-opacity, .5);
}


/* Pinned to the last track rather than to a child count: the camera-key and
   operations fields are conditional, so on the aggregate and overview tabs the
   actions used to land in a 1fr track and overflow the panel's right edge. */
.filter-buttons[b-gcbblvx3ah] {
    display: flex;
    gap: 7px;
    grid-column: -2 / -1;
}


/* Whenever a conditional field pushes the grid past its single row - Camera key
   on the aggregate tabs, Alarm type plus Status on operations - the actions wrap
   into the last track one row down, and a resource popover above them drops
   straight onto Apply and Reset: clicks meant for Apply were landing on the list
   instead. Giving the actions the whole row moves them out from under it. Keyed
   on the wrap, not on Camera key, because Camera or device is unconditional and
   covers the actions on operations exactly the same way. Both narrow-viewport
   grids are 1 or 2 columns wide, where this resolves to the span those overrides
   already ask for. */
.filter-grid.has-wrapped-actions .filter-buttons[b-gcbblvx3ah] {
    grid-column: 1 / -1;
}

.filter-buttons button[b-gcbblvx3ah] {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    height: 38px;
    padding: 0 11px;
    white-space: nowrap;
}

.filter-buttons svg[b-gcbblvx3ah] {
    height: 14px;
    width: 14px;
}

.filter-buttons button:disabled[b-gcbblvx3ah] {
    cursor: wait;
    opacity: .6;
}

.apply-button[b-gcbblvx3ah] {
    background: var(--pulse-action);
    border: 1px solid var(--pulse-action);
    color: var(--pulse-on-action);
}

.apply-button:hover:not(:disabled)[b-gcbblvx3ah] {
    background: var(--pulse-action-hover);
    border-color: var(--pulse-action-hover);
}


/* Three controls in this panel only take effect on Apply, so when they differ
   from what the panels below describe the action says so. */
.apply-button.is-dirty[b-gcbblvx3ah] {
    box-shadow: 0 0 0 3px var(--pulse-accent-soft);
}

.filter-pending[b-gcbblvx3ah] {
    background: var(--pulse-warning-soft);
    border: 1px solid var(--pulse-warning-border);
    border-radius: 999px;
    color: var(--pulse-warning-text);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    white-space: nowrap;
}

.reset-button[b-gcbblvx3ah] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border-strong);
    color: #475569;
}

.reset-button:hover:not(:disabled)[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: #94a3b8;
}

.validation-banner[b-gcbblvx3ah] {
    background: var(--pulse-warning-soft);
    border: 1px solid var(--pulse-warning-border);
    border-radius: 8px;
    color: var(--pulse-warning-text);
    font-size: 12px;
    margin-top: 12px;
    padding: 8px 10px;
}


/* Standing in for a control inside a filter cell: aligned with the selects
   beside it, with a retry sized like a link, not the page's primary action. */
.filter-field .validation-banner[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 0;
    min-height: 38px;
}

.filter-field .validation-banner button[b-gcbblvx3ah] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 7px;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 4px 8px;
    white-space: nowrap;
}

.filter-field .validation-banner button:disabled[b-gcbblvx3ah] {
    cursor: default;
    opacity: .55;
}

.dashboard-error[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-danger-soft);
    border: 1px solid var(--pulse-danger-border);
    border-radius: 14px;
    color: var(--pulse-danger-text);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px 11px;
    margin: var(--pulse-workspace-gap, 12px) 0;
    padding: 8px 12px;
}

.dashboard-error > span[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-danger);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-weight: 700;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.dashboard-error > div[b-gcbblvx3ah] {
    align-items: baseline;
    display: flex;
    flex: 1 1 20rem;
    flex-wrap: wrap;
    gap: 0 8px;
    min-width: 0;
}

.dashboard-error strong[b-gcbblvx3ah] {
    display: inline;
    margin: 0;
}

.dashboard-error button[b-gcbblvx3ah] {
    background: var(--pulse-danger);
    border: 0;
    border-radius: 999px;
    color: var(--pulse-on-action);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 7px 10px;
}

.applied-window[b-gcbblvx3ah] {
    align-items: start;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 12px;
    color: var(--pulse-muted);
    display: grid;
    font-size: 13px;
    gap: var(--pulse-workspace-gap, 12px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    margin: 12px 0;
    padding: 12px 16px;
}

.applied-context[b-gcbblvx3ah] { display: grid; gap: 10px; min-width: 0; }
.applied-range[b-gcbblvx3ah] { align-items: start; display: flex; gap: 9px; }
.applied-range-copy[b-gcbblvx3ah] { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.applied-range-label[b-gcbblvx3ah] { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.applied-range-copy strong[b-gcbblvx3ah] { color: var(--pulse-text); font-size: 14px; line-height: 1.5; }
.applied-time-zone[b-gcbblvx3ah] { font-size: 12px; }
.applied-filter-chips[b-gcbblvx3ah] { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.window-icon[b-gcbblvx3ah] {
    color: var(--pulse-accent);
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.filter-chip[b-gcbblvx3ah] {
    background: var(--pulse-surface-inset);
    border-radius: 999px;
    color: var(--pulse-text);
    font-weight: 600;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 3px 8px;
    white-space: normal;
}

.kpi-grid[b-gcbblvx3ah] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 12px;
}

.loading-grid[b-gcbblvx3ah] {
    margin-top: 17px;
}

.kpi-card[b-gcbblvx3ah] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    box-shadow: var(--dashboard-panel-shadow);
    min-height: 112px;
    min-width: 0;
    padding: 12px 14px;
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}


/* Only the tiles that filter carry an interactive surface treatment. */
button.kpi-card[b-gcbblvx3ah] {
    color: inherit;
    display: block;
    font: inherit;
    text-align: left;
    width: 100%;
}

button.kpi-card:hover[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-accent-border);
    cursor: pointer;
}

button.kpi-card[aria-pressed="true"][b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    border-color: var(--pulse-accent);
    box-shadow: inset 0 0 0 1px var(--pulse-accent);
}

button.kpi-card:focus-visible[b-gcbblvx3ah] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.kpi-active[b-gcbblvx3ah] { --kpi-color: var(--pulse-danger); }
.kpi-total[b-gcbblvx3ah] { --kpi-color: var(--pulse-blue); }
.kpi-occurrences[b-gcbblvx3ah] { --kpi-color: var(--pulse-violet, #7c3aed); }
.kpi-ended[b-gcbblvx3ah] { --kpi-color: var(--pulse-success); }
.kpi-modules[b-gcbblvx3ah] { --kpi-color: var(--pulse-info); }

.events-export-warning[b-gcbblvx3ah] {
    color: var(--pulse-warning-text, #92400e);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    max-width: 34rem;
}

.kpi-topline[b-gcbblvx3ah] {
    align-items: center;
    color: var(--pulse-muted);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: .02em;
    text-transform: none;
    position: relative;
    z-index: 1;
}

.kpi-icon[b-gcbblvx3ah] {
    align-items: center;
    background: color-mix(in srgb, var(--kpi-color) 11%, var(--pulse-surface));
    border: 1px solid color-mix(in srgb, var(--kpi-color) 15%, transparent);
    border-radius: 9px;
    color: var(--kpi-color);
    display: inline-flex;
    flex: 0 0 auto;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.kpi-icon svg[b-gcbblvx3ah] {
    height: 16px;
    width: 16px;
}

.kpi-value[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-size: clamp(28px, 3.2vw, 36px);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.kpi-detail[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: 12px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}

.dashboard-grid[b-gcbblvx3ah] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-grid > *[b-gcbblvx3ah] {
    min-width: 0;
}

.dashboard-panel[b-gcbblvx3ah] {
    background: var(--dashboard-panel-bg);
    border: 1px solid var(--dashboard-panel-border);
    border-radius: var(--pulse-radius-lg);
    box-shadow: var(--dashboard-panel-shadow);
    min-width: 0;
    padding: 14px;
}

.span-3[b-gcbblvx3ah] { grid-column: span 3; }
.span-4[b-gcbblvx3ah] { grid-column: span 4; }
.span-5[b-gcbblvx3ah] { grid-column: span 5; }
.span-6[b-gcbblvx3ah] { grid-column: span 6; }
.span-8[b-gcbblvx3ah] { grid-column: span 8; }
.span-12[b-gcbblvx3ah] { grid-column: span 12; }


/* Wrapping is not a phone-only concern: a span-3 panel is narrow at any
   viewport, and non-wrapping export buttons pushed straight out of the card. */
.panel-header[b-gcbblvx3ah] {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.panel-header > div[b-gcbblvx3ah] {
    min-width: 0;
}

.panel-header h2[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0;
}

.panel-header p[b-gcbblvx3ah] {
    color: var(--pulse-muted);
    font-size: 12.5px;
    line-height: 1.45;
    margin: 4px 0 0;
}

.panel-tools[b-gcbblvx3ah] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}


/* The export wrapper is what the PNG writer looks inside for the chart's own
   <svg>, so it must not add a second one of its own. */
.panel-chart[b-gcbblvx3ah] {
    min-width: 0;
}


/* The same object as a chart panel's CSV button, so the alarm panel's export is
   not a third button rank on one page. */
.events-export-link[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 9px;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 5px;
    letter-spacing: .02em;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;
}

.events-export-link:hover[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-text);
}

.events-export-link:focus-visible[b-gcbblvx3ah] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.events-export-link svg[b-gcbblvx3ah] {
    fill: none;
    height: 12px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 12px;
}

.table-scroll[b-gcbblvx3ah] {
    overflow: auto;
    width: 100%;
}


/* A text-only scroller has nothing focusable inside it, so the container takes
   the focus itself and answers the arrow keys. */
.table-scroll:focus-visible[b-gcbblvx3ah] {
    border-radius: var(--pulse-radius-sm);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.compact-table-scroll[b-gcbblvx3ah] {
    max-height: 300px;
}

.mix-table-scroll[b-gcbblvx3ah] {
    max-height: 360px;
}

.dashboard-table[b-gcbblvx3ah] {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.dashboard-table th[b-gcbblvx3ah],
.dashboard-table td[b-gcbblvx3ah] {
    border-bottom: 1px solid var(--pulse-border);
    padding: 9px 8px;
    text-align: left;
    vertical-align: top;
}

.dashboard-table th[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    color: var(--pulse-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    position: sticky;
    text-transform: none;
    top: 0;
    white-space: nowrap;
    z-index: 2;
}

.dashboard-table tbody tr:hover[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
}

.dashboard-table .number-cell[b-gcbblvx3ah] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.strong-number[b-gcbblvx3ah] {
    color: var(--pulse-text);
    font-weight: 700;
}


/* The peer of .module-link in the same row: the alarm type the chart legend
   beside it already filters by. */
.message-filter[b-gcbblvx3ah] {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    width: 100%;
}

.message-filter:hover[b-gcbblvx3ah] {
    color: var(--pulse-accent);
    text-decoration: underline;
}

.message-filter:focus-visible[b-gcbblvx3ah] {
    border-radius: var(--pulse-radius-sm);
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.module-link[b-gcbblvx3ah] {
    color: var(--pulse-accent);
    font-weight: 700;
    text-decoration: none;
}

.module-link:hover[b-gcbblvx3ah] {
    text-decoration: underline;
}

.active-pill[b-gcbblvx3ah] {
    border-radius: 999px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 7px;
    white-space: nowrap;
}

.active-pill[b-gcbblvx3ah] {
    background: var(--pulse-danger-soft);
    color: var(--pulse-danger-text);
}

.message-cell[b-gcbblvx3ah] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-no-data[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
    padding: 45px 20px;
    text-align: center;
}

.dashboard-no-data strong[b-gcbblvx3ah] {
    color: var(--pulse-text);
}

.skeleton-card span[b-gcbblvx3ah] {
    animation: pulse-b-gcbblvx3ah 1.35s ease-in-out infinite;
    background: #e8eef5;
    border-radius: 6px;
    display: block;
    height: 11px;
    margin: 5px 0 14px;
    width: 46%;
}

.skeleton-card span:nth-child(2)[b-gcbblvx3ah] {
    height: 34px;
    width: 61%;
}

.skeleton-card span:nth-child(3)[b-gcbblvx3ah] {
    margin-bottom: 0;
    width: 35%;
}

.skeleton-panel[b-gcbblvx3ah] {
    animation: pulse-b-gcbblvx3ah 1.35s ease-in-out infinite;
    background: linear-gradient(110deg, #fff 8%, #edf2f7 18%, #fff 33%);
    background-size: 200% 100%;
    min-height: 330px;
}

html[data-theme="dark"] .filter-panel[b-gcbblvx3ah],
html[data-theme="dark"] .dashboard-tabs[b-gcbblvx3ah],
html[data-theme="dark"] .dashboard-panel[b-gcbblvx3ah],
html[data-theme="dark"] .dashboard-no-data[b-gcbblvx3ah] {
    background: var(--dashboard-panel-bg);
    border-color: var(--dashboard-panel-border);
    box-shadow: var(--dashboard-panel-shadow);
    color: var(--pulse-text);
}

html[data-theme="dark"] .dashboard-tabs a.active[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    color: var(--pulse-accent);
}

html[data-theme="dark"] .time-presets[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border);
}

html[data-theme="dark"] .filter-heading-icon[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border);
}

html[data-theme="dark"] .filter-field > span[b-gcbblvx3ah] {
    color: var(--pulse-muted);
}

html[data-theme="dark"] .filter-field input[b-gcbblvx3ah],
html[data-theme="dark"] .filter-field select[b-gcbblvx3ah] {
    color-scheme: dark;
}

html[data-theme="dark"] .time-presets button[b-gcbblvx3ah],
html[data-theme="dark"] .reset-button[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-text);
}

html[data-theme="dark"] .time-presets button:hover:not(:disabled)[b-gcbblvx3ah],
html[data-theme="dark"] .time-presets button.selected[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    border-color: var(--pulse-action);
    color: var(--pulse-accent);
}

html[data-theme="dark"] .filter-chip[b-gcbblvx3ah] {
    background: var(--pulse-surface-soft);
    color: var(--pulse-text);
}

html[data-theme="dark"] .filter-count[b-gcbblvx3ah],
html[data-theme="dark"] .panel-badge[b-gcbblvx3ah] {
    background: var(--pulse-accent-soft);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-accent);
}

html[data-theme="dark"] .active-pill[b-gcbblvx3ah] {
    background: var(--pulse-danger-soft);
    color: var(--pulse-danger-text);
}

html[data-theme="dark"] .skeleton-card span[b-gcbblvx3ah] {
    background: #26334a;
}

html[data-theme="dark"] .skeleton-panel[b-gcbblvx3ah] {
    background: linear-gradient(110deg, #111a2e 8%, #1b2940 18%, #111a2e 33%);
    background-size: 200% 100%;
}

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

@keyframes pulse-b-gcbblvx3ah {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes status-breathe-b-gcbblvx3ah {
    0%, 100% { opacity: .55; transform: scale(.88); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 1250px) {
    .filter-grid[b-gcbblvx3ah] {
        grid-template-columns: repeat(3, minmax(140px, 1fr)) max-content;
    }

    .span-3[b-gcbblvx3ah],
    .span-4[b-gcbblvx3ah],
    .span-5[b-gcbblvx3ah],
    .span-8[b-gcbblvx3ah] {
        grid-column: span 6;
    }

    .dashboard-grid > .span-8:first-child[b-gcbblvx3ah] {
        grid-column: span 12;
    }
}

.trend-coverage[b-gcbblvx3ah] {
    background: var(--pulse-surface-inset, #f8fafc);
    border: 1px solid var(--pulse-border, #e2e8f0);
    border-radius: 9px;
    color: var(--pulse-muted, #64748b);
    display: grid;
    font-size: 12px;
    gap: 1px;
    line-height: 1.3;
    max-width: 320px;
    padding: 6px 9px;
}

.trend-coverage strong[b-gcbblvx3ah] {
    color: var(--pulse-text, #172033);
    font-size: 12px;
    font-weight: 700;
}

/* With the full navigation rail visible, four 140px filters are wider than
   the dashboard between roughly 820px and 960px. Two fluid tracks keep every
   field and both actions inside the panel at those tablet widths. */
@media (max-width: 980px) {
    .filter-grid[b-gcbblvx3ah] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-buttons[b-gcbblvx3ah] {
        grid-column: span 2;
    }

    /* Two tracks wide there is nowhere sideways left to move anything: both
       lookup fields land in the last row of fields and the actions span the row
       straight beneath them, so the row move .has-wrapped-actions makes above
       resolves to the span this block already asks for and buys nothing - a
       floating results list still opened onto Apply and Reset and ate the click.
       In the flow the list pushes the actions down instead of covering them.
       The field takes the whole row first: a list stretching a two-track row
       would drop the field beside it to the bottom of that row (the grid is
       align-items: end) while the operator is still typing. */
    .filter-grid .resource-filter[b-gcbblvx3ah] {
        grid-column: 1 / -1;
    }

    .resource-popover[b-gcbblvx3ah] {
        /* Replaces top: calc(100% + 6px), which a static box ignores. */
        margin-top: 6px;
        position: static;
    }
}

@media (max-width: 880px) {

    /* The hero is a flex strip, not a grid: grid-template-columns here was
       inert, and the 24px gap re-inflated the row this redesign compacted. */
    .dashboard-hero[b-gcbblvx3ah] {
        gap: 10px 16px;
    }

    /* Seven views no longer share the title's line: the switch takes its own
       scrollable strip directly under it. */
    .dashboard-tabs[b-gcbblvx3ah] {
        flex-basis: 100%;
        margin-left: 0;
    }

    .dashboard-command-card[b-gcbblvx3ah] {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .kpi-grid[b-gcbblvx3ah] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-grid > :last-child:nth-child(odd)[b-gcbblvx3ah] {
        grid-column: 1 / -1;
    }

    .span-4[b-gcbblvx3ah],
    .span-3[b-gcbblvx3ah],
    .span-5[b-gcbblvx3ah],
    .span-6[b-gcbblvx3ah],
    .span-8[b-gcbblvx3ah] {
        grid-column: span 12;
    }
}

/* Match the shell's drawer breakpoint; refresh remains the primary action. */
@media (max-width: 820px) {
    .control-room-launch[b-gcbblvx3ah] { display: inline-flex; order: 2; }
}

@media (max-width: 650px) {
    .filter-panel[b-gcbblvx3ah],
    .dashboard-panel[b-gcbblvx3ah] {
        border-radius: var(--pulse-radius-lg);
    }

    .filter-grid[b-gcbblvx3ah] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-buttons[b-gcbblvx3ah] {
        grid-column: span 2;
    }

    .filter-buttons button[b-gcbblvx3ah] {
        flex: 1;
    }

    .filter-field input[b-gcbblvx3ah],
    .filter-field select[b-gcbblvx3ah] {
        font-size: 16px;
        height: 44px;
    }

    .resource-clear[b-gcbblvx3ah] {
        height: 36px;
        top: 4px;
        width: 36px;
    }

    /* The overhang that bought a floating list a readable width here would only
       push the panel sideways now that the list sits in the flow - and it no
       longer buys anything, because the field it belongs to spans the row. */
    .resource-popover[b-gcbblvx3ah] {
        max-width: 100%;
        width: 100%;
    }

    .resource-pager button[b-gcbblvx3ah],
    .resource-state button[b-gcbblvx3ah] {
        min-height: 44px;
    }

    .kpi-card[b-gcbblvx3ah] {
        min-height: 108px;
        padding: 12px;
    }

    .kpi-value[b-gcbblvx3ah] {
        font-size: 28px;
    }

    .dashboard-error[b-gcbblvx3ah] {
        align-items: flex-start;
        flex-wrap: wrap;
    }


    /* A title plus its export buttons no longer fit on one line here, so the
       buttons drop under the heading instead of squeezing it. */
    .panel-header[b-gcbblvx3ah] {
        flex-wrap: wrap;
    }

    .panel-tools[b-gcbblvx3ah] {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .filter-grid[b-gcbblvx3ah] {
        grid-template-columns: 1fr;
    }

    .filter-buttons[b-gcbblvx3ah] {
        grid-column: auto;
    }

    .resource-popover[b-gcbblvx3ah] {
        max-width: 100%;
        width: 100%;
    }

    .camera-key-filter .resource-popover[b-gcbblvx3ah] {
        left: 0;
        right: auto;
    }


    /* The command card is a bare row of controls now - it has no box of its
       own, so the old inset padding only pushed the controls off-centre. */
    .command-secondary-actions[b-gcbblvx3ah] {
        flex-wrap: wrap;
    }
}

@media (pointer: coarse) {
    .control-room-launch[b-gcbblvx3ah],
    .auto-refresh[b-gcbblvx3ah],
    .refresh-button[b-gcbblvx3ah],
    .dashboard-tabs a[b-gcbblvx3ah],
    .filter-toggle[b-gcbblvx3ah],
    .time-presets button[b-gcbblvx3ah],
    .filter-buttons button[b-gcbblvx3ah],
    .filter-field .validation-banner button[b-gcbblvx3ah],
    .dashboard-error button[b-gcbblvx3ah],
    .events-export-link[b-gcbblvx3ah],
    .report-actions a[b-gcbblvx3ah],
    .report-actions button[b-gcbblvx3ah],
    .resource-clear[b-gcbblvx3ah],
    .resource-pager button[b-gcbblvx3ah],
    .resource-state button[b-gcbblvx3ah] {
        min-height: 44px;
    }

    .resource-clear[b-gcbblvx3ah],
    .resource-pager button[b-gcbblvx3ah],
    .resource-state button[b-gcbblvx3ah] {
        min-width: 44px;
    }

    .filter-field[b-gcbblvx3ah] {
        --group-filter-height: 44px;
    }

    .filter-field input[b-gcbblvx3ah],
    .filter-field select[b-gcbblvx3ah] {
        height: 44px;
    }
}

.report-actions[b-gcbblvx3ah] {
    border-left: 1px solid var(--pulse-border);
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-left: var(--pulse-workspace-gap, 12px);
}

.report-toolbar[b-gcbblvx3ah] { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.report-actions a[b-gcbblvx3ah],
.report-actions button[b-gcbblvx3ah] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 8px;
    color: var(--pulse-text);
    display: inline-flex;
    font: inherit;
    justify-content: center;
    min-height: var(--pulse-control-compact-height, 38px);
    padding: 6px 10px;
    text-decoration: none;
}
.report-actions button:disabled[b-gcbblvx3ah] { cursor: not-allowed; opacity: .55; }
.report-actions button:focus-visible[b-gcbblvx3ah],
.report-actions select:focus-visible[b-gcbblvx3ah] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.report-scope[b-gcbblvx3ah] {
    display: grid;
    flex: 1 1 180px;
    gap: 4px;
    min-width: 0;
}
.report-scope select[b-gcbblvx3ah] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: 8px;
    color: var(--pulse-text);
    font: inherit;
    font-size: 14px;
    min-height: var(--pulse-control-compact-height, 38px);
    min-width: 0;
    padding: 6px 30px 6px 8px;
    width: 100%;
}
.report-scope > span[b-gcbblvx3ah] { font-size: 12px; font-weight: 700; }
.report-scope-help[b-gcbblvx3ah] { color: var(--pulse-muted); font-size: 12px; line-height: 1.5; margin: 0; }
.report-actions > span[b-gcbblvx3ah] { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.report-result[b-gcbblvx3ah] { color: var(--pulse-success-text, #18794e); }

@media (max-width: 1100px) {
    .applied-window[b-gcbblvx3ah] { grid-template-columns: minmax(0, 1fr); }
    .report-actions[b-gcbblvx3ah] { border-left: 0; border-top: 1px solid var(--pulse-border); padding: 12px 0 0; }
}

@media (max-width: 700px) {
    .applied-window[b-gcbblvx3ah] { padding: 12px; }
    .report-toolbar > button[b-gcbblvx3ah] { flex: 1 1 120px; }
    .report-scope[b-gcbblvx3ah] { flex: 1 1 100%; }
    .report-actions button[b-gcbblvx3ah],
    .report-scope select[b-gcbblvx3ah] { min-height: var(--pulse-control-min-height, 44px); }
}

@media (prefers-reduced-motion: reduce) {
    .refresh-icon.is-spinning[b-gcbblvx3ah],
.filter-toggle-chevron[b-gcbblvx3ah],
.skeleton-card span[b-gcbblvx3ah],
.skeleton-panel[b-gcbblvx3ah],
.kpi-card[b-gcbblvx3ah],
.dashboard-panel[b-gcbblvx3ah],
.control-room-launch[b-gcbblvx3ah],
.control-room-launch svg[b-gcbblvx3ah] {
        animation: none;
        transition: none;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.system-state-page[b-goeraej6gy] {
    --state-accent: var(--pulse-danger-text);
    --state-accent-soft: var(--pulse-danger-soft);
    --state-accent-border: var(--pulse-danger-border);
    align-items: flex-start;
    background: var(--pulse-canvas);
    box-sizing: border-box;
    color: var(--pulse-text);
    display: flex;
    justify-content: center;
    min-height: calc(100vh - var(--pulse-commandbar-height));
    min-height: calc(100dvh - var(--pulse-commandbar-height));
    padding: clamp(24px, 4vw, 48px) var(--pulse-workspace-pad-x);
}

.system-state-card[b-goeraej6gy] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-xl);
    box-sizing: border-box;
    max-width: 700px;
    padding: clamp(24px, 3vw, 36px);
    position: relative;
    text-align: left;
    width: 100%;
}

.state-symbol[b-goeraej6gy] {
    align-items: center;
    background: var(--state-accent-soft);
    border: 1px solid var(--state-accent-border);
    border-radius: var(--pulse-radius-md);
    color: var(--state-accent);
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 0 0 1rem;
    width: 48px;
}

.state-symbol svg[b-goeraej6gy] {
    fill: none;
    height: 28px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 28px;
}

.state-eyebrow[b-goeraej6gy] {
    color: var(--state-accent);
    font-size: max(.75rem, var(--pulse-workspace-eyebrow-size));
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.system-state-card h1[b-goeraej6gy] {
    color: var(--pulse-text);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: .5rem 0 .75rem;
    max-width: 590px;
}

.system-state-card > p[b-goeraej6gy] {
    color: var(--pulse-muted);
    font-size: .9375rem;
    line-height: 1.45;
    margin: 0;
    max-width: 560px;
}

.state-actions[b-goeraej6gy] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
    margin-top: 1.25rem;
}

.state-actions a[b-goeraej6gy] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    box-sizing: border-box;
    color: var(--pulse-text);
    display: inline-flex;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem 1rem;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease;
}

.state-actions a.primary[b-goeraej6gy] {
    background: var(--pulse-action);
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
}

.state-actions a:hover[b-goeraej6gy] {
    border-color: var(--state-accent);
}

.state-actions a:focus-visible[b-goeraej6gy],
.technical-guidance summary:focus-visible[b-goeraej6gy] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 3px;
}

.request-reference[b-goeraej6gy] {
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    display: grid;
    gap: .35rem;
    margin: 1.25rem 0 0;
    padding: .75rem;
    text-align: left;
}

.request-reference span[b-goeraej6gy] {
    color: var(--pulse-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.request-reference code[b-goeraej6gy] {
    color: var(--pulse-text);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.technical-guidance[b-goeraej6gy] {
    border-top: 1px solid var(--pulse-border);
    color: var(--pulse-muted);
    font-size: .8125rem;
    margin-top: 1.25rem;
    padding-top: .5rem;
    text-align: left;
}

.technical-guidance summary[b-goeraej6gy] {
    border-radius: 6px;
    color: var(--pulse-text);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .8rem .15rem;
}

.technical-guidance p[b-goeraej6gy] {
    line-height: 1.45;
    margin: .65rem 0 0;
}

html[data-theme="dark"] .system-state-page[b-goeraej6gy] {
    --state-accent: var(--pulse-danger-text);
    --state-accent-soft: var(--pulse-danger-soft);
    --state-accent-border: var(--pulse-danger-border);
    background: var(--pulse-canvas);
}

@media (max-width: 560px) {
    .system-state-page[b-goeraej6gy] {
        min-height: calc(100vh - 112px);
        min-height: calc(100dvh - 112px);
        padding: 16px 10px 24px;
    }

    .system-state-card[b-goeraej6gy] {
        border-radius: var(--pulse-radius-lg);
        padding: 24px 18px;
    }

    .state-actions[b-goeraej6gy] {
        align-items: stretch;
        flex-direction: column;
    }

    .state-actions a[b-goeraej6gy] {
        width: 100%;
    }

    .technical-guidance summary[b-goeraej6gy] {
        min-height: var(--pulse-control-min-height, 44px);
    }
}

@media (any-pointer: coarse) {
    .technical-guidance summary[b-goeraej6gy] {
        min-height: var(--pulse-control-min-height, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .state-actions a[b-goeraej6gy] {
        transition: none;
    }

    .state-actions a:hover[b-goeraej6gy] {
        transform: none;
    }
}
/* /Components/Pages/Federation.razor.rz.scp.css */
.settings-page[b-k049rwot8u] {
    container-type: inline-size;
    container-name: federation-page;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, .75rem) var(--pulse-workspace-pad-x, 1rem) var(--pulse-workspace-pad-bottom, 1rem);
    color: var(--pulse-text);
    font-size: .875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.settings-hero[b-k049rwot8u] {
    display: flex;
    align-items: center;
    min-height: var(--pulse-control-min-height, 44px);
    margin-bottom: .65rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.settings-hero h1[b-k049rwot8u] {
    margin: 0;
    color: var(--pulse-text);
    font-size: var(--pulse-workspace-title-size, 1.55rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.settings-hint[b-k049rwot8u] {
    max-width: 58rem;
    margin: .45rem 0 0;
    color: var(--pulse-muted);
    font-size: var(--pulse-workspace-lede-size, .875rem);
    line-height: 1.45;
}

.config-card[b-k049rwot8u] {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, .875rem);
    background: var(--pulse-surface);
}

.config-card h2[b-k049rwot8u],
.config-card h3[b-k049rwot8u] {
    color: var(--pulse-text);
    font-weight: 600;
    line-height: 1.3;
}

.config-card h2[b-k049rwot8u] { margin: 0 0 .75rem; font-size: 1.1rem; }
.config-card h3[b-k049rwot8u] { margin: 1.25rem 0 .4rem; font-size: 1rem; }
.config-card > p:not(.settings-alert)[b-k049rwot8u],
.federation-user-directory > p:not(.settings-alert)[b-k049rwot8u],
.federation-account-actions p[b-k049rwot8u] { margin: 0 0 .75rem; color: var(--pulse-muted); line-height: 1.45; }

.federation-facts[b-k049rwot8u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 1rem;
}

.federation-facts > div[b-k049rwot8u] {
    display: grid;
    grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr);
    gap: .5rem;
    align-items: start;
    min-width: 0;
    padding: .65rem .75rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    background: var(--pulse-surface-soft);
}

.federation-facts dt[b-k049rwot8u],
.federation-facts dd[b-k049rwot8u] { min-width: 0; margin: 0; }
.federation-facts dt[b-k049rwot8u] { color: var(--pulse-muted); font-size: .75rem; font-weight: 500; }
.federation-facts dd[b-k049rwot8u] { color: var(--pulse-text); font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
.federation-facts .recovery-fact[b-k049rwot8u] { border-inline-start: 3px solid var(--pulse-warning-border); }
.federation-facts .recovery-fact dd[b-k049rwot8u] { color: var(--pulse-warning-text); }
.federation-facts .recovery-fact.verified[b-k049rwot8u] { border-inline-start-color: var(--pulse-success-border); }
.federation-facts .recovery-fact.verified dd[b-k049rwot8u] { color: var(--pulse-success-text); }

.config-card code[b-k049rwot8u] { color: var(--pulse-text); font-size: .8125rem; overflow-wrap: anywhere; }
.config-card details[b-k049rwot8u] { margin: .75rem 0 1rem; padding: 0 .75rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-sm, .5rem); }
.config-card summary[b-k049rwot8u] { min-height: 44px; align-content: center; font-weight: 600; cursor: pointer; }
.config-card details[open] code[b-k049rwot8u] { display: block; padding: .15rem 0 .75rem; }
.federation-test[b-k049rwot8u] { display: flex; flex-wrap: wrap; gap: .65rem 1rem; align-items: center; margin-bottom: 1rem; }
.federation-test p[b-k049rwot8u] { flex: 1 1 22rem; margin: 0; }

.settings-alert[b-k049rwot8u] {
    margin: .75rem 0;
    padding: .7rem .8rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.45;
}
.config-card > .settings-alert:first-child[b-k049rwot8u] { margin-top: 0; }
.settings-alert.success[b-k049rwot8u] { border-color: var(--pulse-success-border); color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.settings-alert.danger[b-k049rwot8u] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }

.federation-user-catalog[b-k049rwot8u] {
    display: grid;
    gap: .5rem;
    max-height: 22rem;
    margin: .75rem 0 1rem;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.federation-user-catalog li[b-k049rwot8u] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .75rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    background: var(--pulse-surface);
}

.federation-user-catalog li > span:first-child[b-k049rwot8u] { display: grid; min-width: 0; flex: 1 1 12rem; }
.federation-user-catalog strong[b-k049rwot8u] { font-weight: 600; }
.federation-user-catalog small[b-k049rwot8u] { color: var(--pulse-muted); font-size: .75rem; }
.federation-user-catalog .settings-alert[b-k049rwot8u] { flex: 0 1 auto; margin: 0; padding: .25rem .5rem; }

.federation-account-workbench[b-k049rwot8u] { display: grid; gap: .85rem; margin-top: 1rem; align-items: start; }
.federation-user-directory[b-k049rwot8u], .federation-account-actions[b-k049rwot8u], .federation-account-actions > section[b-k049rwot8u] { min-width: 0; }
.federation-account-workbench h3[b-k049rwot8u] { margin-top: 0; }
.federation-account-actions[b-k049rwot8u] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }
.account-form[b-k049rwot8u] { display: grid; gap: .7rem; padding: .85rem; border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-md, .75rem); background: var(--pulse-surface-soft); }
.account-form label[b-k049rwot8u],
.account-field[b-k049rwot8u] { display: grid; gap: .35rem; color: var(--pulse-text); font-size: .875rem; font-weight: 500; }
.account-field[b-k049rwot8u] { max-width: 46rem; }

.account-form input:not([type="checkbox"])[b-k049rwot8u],
.account-form select[b-k049rwot8u],
.account-input[b-k049rwot8u] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .6rem .7rem;
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-control-text);
    background: var(--pulse-control-surface);
    font: inherit;
    font-size: .875rem;
}

.account-form .account-check[b-k049rwot8u] { display: flex; gap: .6rem; min-height: 44px; align-items: center; font-weight: 400; }
.account-check input[b-k049rwot8u] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin: 0; accent-color: var(--pulse-action); }

.account-form button[b-k049rwot8u],
.account-submit[b-k049rwot8u] {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .6rem .9rem;
    border: 1px solid var(--pulse-action);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.account-form button:hover[b-k049rwot8u],
.account-submit:hover[b-k049rwot8u] { border-color: var(--pulse-action-hover); background: var(--pulse-action-hover); }
.account-form[action="/settings/federation/unlink"] button[b-k049rwot8u] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-surface); }
.account-form[action="/settings/federation/unlink"] button:hover[b-k049rwot8u] { background: var(--pulse-danger-soft); }
.settings-page :is(input, select, button, a, summary):focus-visible[b-k049rwot8u] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

@media (max-width: 900px) {
    .federation-account-actions[b-k049rwot8u] { grid-template-columns: 1fr; }
}

@container federation-page (min-width: 60rem) {
    .federation-facts[b-k049rwot8u] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container federation-page (min-width: 68rem) {
    .federation-account-workbench[b-k049rwot8u] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.8fr); }
}

@container federation-page (min-width: 80rem) {
    .federation-facts[b-k049rwot8u] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .settings-page[b-k049rwot8u] { padding: .7rem; }
    .config-card[b-k049rwot8u] { padding: .85rem; }
    .federation-facts[b-k049rwot8u] { grid-template-columns: 1fr; }
    .federation-facts > div[b-k049rwot8u] { grid-template-columns: minmax(6rem, .8fr) minmax(0, 1.2fr); padding: .55rem .65rem; }
    .account-form[b-k049rwot8u] { padding: .8rem; }
    .account-form button[b-k049rwot8u],
    .account-submit[b-k049rwot8u] { width: 100%; }
}

@media (any-pointer: coarse) {
    .account-form input:not([type="checkbox"])[b-k049rwot8u],
    .account-form select[b-k049rwot8u],
    .account-input[b-k049rwot8u] { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-form button[b-k049rwot8u],
    .account-submit[b-k049rwot8u] { transition: none; }
}
/* /Components/Pages/FieldActions.razor.rz.scp.css */
.fieldactions-page[b-zyv057ii2x] {
    --fa-indigo: var(--pulse-accent, #0f766e);
    --fa-teal: var(--pulse-accent, #0f766e);
    --fa-green: var(--pulse-success-text, #047857);
    --fa-amber: var(--pulse-warning-text, #9a3412);
    --fa-ink: var(--pulse-text, #17262d);
    --fa-muted: var(--pulse-muted, #687980);
    --fa-border: var(--pulse-border, #dbe5e5);
    --fa-surface: var(--pulse-surface, #fff);
    --fa-soft: var(--pulse-surface-soft, #f3f7f7);
    color: var(--fa-ink);
    display: grid;
    line-height: 1.45;
    min-width: 0;
    gap: var(--pulse-workspace-gap, 20px);
    margin: 0 auto;
    max-width: var(--pulse-workspace-max, 1600px);
    padding: var(--pulse-workspace-pad-top, 22px)
        var(--pulse-workspace-pad-x, 32px)
        var(--pulse-workspace-pad-bottom, 44px);
}

.fa-breadcrumbs[b-zyv057ii2x] { align-items: center; color: var(--fa-muted); display: flex; flex-wrap: wrap; font-size: .875rem; gap: 4px 8px; }
.fa-breadcrumbs a[b-zyv057ii2x] { align-items: center; color: inherit; display: inline-flex; min-height: var(--pulse-control-min-height, 44px); padding-inline: 4px; text-decoration: none; }
.fa-breadcrumbs a:hover[b-zyv057ii2x] { color: var(--fa-indigo); }
.fa-scope-hint a[b-zyv057ii2x] { display: inline-flex; min-height: var(--pulse-control-min-height, 44px); align-items: center; }

.fa-hero[b-zyv057ii2x] { align-items: center; background: transparent; border: 0; border-radius: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); padding: 0; }

.fa-title[b-zyv057ii2x] { align-items: center; display: flex; flex: 1 1 24rem; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.fa-hero h1[b-zyv057ii2x] { font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.fa-kicker[b-zyv057ii2x] { color: var(--fa-teal); font-size: max(.75rem, var(--pulse-workspace-eyebrow-size, .75rem)); font-weight: 700; letter-spacing: normal; text-transform: none; }
.hero-actions[b-zyv057ii2x] { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.fa-state[b-zyv057ii2x] { align-items: center; display: flex; gap: 9px; min-width: 0; padding: 2px 0; }
.fa-state > span:last-child[b-zyv057ii2x] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fa-state strong[b-zyv057ii2x] { font-size: .8125rem; line-height: 1.3; }
.fa-state small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.fa-state-dot[b-zyv057ii2x] { background: var(--fa-green); border-radius: 50%; flex: 0 0 8px; height: 8px; width: 8px; }
.fa-state.loading .fa-state-dot[b-zyv057ii2x] { background: var(--fa-indigo); }
.fa-state.empty .fa-state-dot[b-zyv057ii2x] { background: var(--fa-muted); }

.primary-action[b-zyv057ii2x],
.secondary-action[b-zyv057ii2x],
.danger-action[b-zyv057ii2x],
.fa-library header button[b-zyv057ii2x],
.fa-receipts header button[b-zyv057ii2x] {
    align-items: center;
    border-radius: 11px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 9px 15px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background-color .16s ease, border-color .16s ease;
}

.primary-action[b-zyv057ii2x] { background: var(--pulse-action, #0f766e); border: 1px solid var(--pulse-action, #0f766e); color: var(--pulse-on-action, #fff); }
.primary-action:hover[b-zyv057ii2x] { background: var(--pulse-action-hover, #115e59); border-color: var(--pulse-action-hover, #115e59); }
.secondary-action[b-zyv057ii2x],
.fa-library header button[b-zyv057ii2x],
.fa-receipts header button[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); color: var(--fa-ink); }
.danger-action[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--pulse-danger-border, #fecdd3); color: var(--pulse-danger-text, #b91c1c); }
.secondary-action:hover[b-zyv057ii2x],
.danger-action:hover[b-zyv057ii2x],
.fa-library header button:hover[b-zyv057ii2x],
.fa-receipts header button:hover[b-zyv057ii2x] { background: var(--fa-soft); border-color: var(--pulse-border-strong, #cbd5e1); }
button:disabled[b-zyv057ii2x] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); transform: none !important; }

.fa-notice[b-zyv057ii2x] { align-items: center; border: 1px solid; border-radius: var(--pulse-radius-md, 13px); display: grid; font-size: .75rem; gap: 10px; grid-template-columns: auto 1fr auto; padding: 11px 14px; }
.fa-notice p[b-zyv057ii2x] { margin: 0; }
.fa-notice button[b-zyv057ii2x] { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.25rem; min-height: 44px; min-width: 44px; }
.fa-notice.error[b-zyv057ii2x] { background: var(--pulse-danger-soft, #fff1f1); border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); }
.fa-notice.success[b-zyv057ii2x] { background: var(--pulse-success-soft, #edf9f3); border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); }
.fa-notice.warning[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-amber) 10%, var(--fa-surface)); border-color: color-mix(in srgb, var(--fa-amber) 48%, var(--fa-border)); color: color-mix(in srgb, var(--fa-amber) 78%, var(--fa-ink)); margin: 0 18px 18px; }
.notice-retry[b-zyv057ii2x] { background: transparent; border: 1px solid currentColor; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); padding: 5px 10px; }

.fa-scope-hint[b-zyv057ii2x] { color: var(--fa-muted); font-size: .8125rem; line-height: 1.5; margin: 6px 0 0; max-width: 46rem; }
.fa-scope-hint em[b-zyv057ii2x] { font-style: normal; font-weight: 700; }
.fa-scope-hint a[b-zyv057ii2x] { color: var(--fa-indigo); font-weight: 700; }

/* Same overview strip as Response playbooks and the Incident desk, in this
   page's own token set: the settings workspaces should read as one product,
   and a catalogue page with no counts was the odd one out. */
.fa-overview[b-zyv057ii2x] { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-overview article[b-zyv057ii2x] { align-items: center; background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: var(--pulse-radius-md, 12px); display: flex; gap: 10px; min-height: 64px; min-width: 0; padding: 10px 12px; }
.overview-mark[b-zyv057ii2x],
.lineage-icon[b-zyv057ii2x] { align-items: center; background: color-mix(in srgb, var(--fa-indigo) 10%, var(--fa-soft)); border-radius: 10px; color: var(--fa-indigo); display: flex; flex: 0 0 auto; height: 36px; justify-content: center; line-height: 0; width: 36px; }
.overview-mark.live[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-green) 10%, var(--fa-soft)); color: var(--fa-green); }
.overview-mark.steps[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-teal) 10%, var(--fa-soft)); color: var(--fa-teal); }
.overview-mark.targeted[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-amber) 11%, var(--fa-soft)); color: var(--fa-amber); }
.overview-mark.is-zero[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-muted) 10%, var(--fa-soft)); color: var(--fa-muted); }
.fa-overview article div[b-zyv057ii2x] { display: grid; gap: 1px; min-width: 0; }
.fa-overview strong[b-zyv057ii2x] { font-size: 1.375rem; font-variant-numeric: tabular-nums; line-height: 1; }
.lineage-card strong[b-zyv057ii2x] { font-size: .75rem; }
.fa-overview small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.3; }
.fa-overview small.metric-flag[b-zyv057ii2x] { color: var(--fa-amber); font-weight: 700; }

@media (max-width: 1180px) {
    .fa-overview[b-zyv057ii2x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .fa-overview[b-zyv057ii2x] { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fa-overview article[b-zyv057ii2x] { align-items: flex-start; flex-direction: column; gap: 6px; }
    .overview-mark[b-zyv057ii2x], .lineage-icon[b-zyv057ii2x] { display: none; }
    .fa-hero[b-zyv057ii2x] { align-items: stretch; flex-direction: column; gap: 8px; padding: 0; }
    .fa-hero > div:first-child[b-zyv057ii2x] { flex-basis: auto; }
    .hero-actions[b-zyv057ii2x] { display: flex; flex-basis: auto; flex-wrap: wrap; }
    .hero-actions > *[b-zyv057ii2x] { flex: 1 1 145px; }
    .fa-editor > header[b-zyv057ii2x] { align-items: flex-start; flex-direction: column; }
}

.fa-safety-state[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-amber) 7%, var(--fa-surface)); border: 1px solid color-mix(in srgb, var(--fa-amber) 34%, var(--fa-border)); border-radius: 15px; display: grid; gap: 8px 18px; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); padding: 15px 18px; }
.fa-safety-state h2[b-zyv057ii2x] { font-size: 1rem; line-height: 1.3; margin: 4px 0 0; }
.fa-safety-state ul[b-zyv057ii2x] { color: var(--fa-muted); display: grid; font-size: .8125rem; gap: .45rem; line-height: 1.55; margin: 0; min-width: 0; padding-left: 1.2rem; }
.fa-safety-state strong[b-zyv057ii2x] { color: color-mix(in srgb, var(--fa-amber) 72%, var(--fa-ink)); }

.fa-receipts[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: var(--pulse-radius-lg, 14px); min-width: 0; }
.fa-receipts > header[b-zyv057ii2x] { align-items: center; border-bottom: 1px solid var(--fa-border); display: flex; gap: 12px; justify-content: space-between; padding: 15px 18px; }
.fa-receipts h2[b-zyv057ii2x] { font-size: 1rem; margin: 3px 0 0; }
.fa-receipts header button[b-zyv057ii2x] { border-radius: 9px; gap: 6px; min-height: var(--pulse-control-min-height, 44px); padding: 6px 11px; }
.fa-receipts-empty[b-zyv057ii2x] { color: var(--fa-muted); font-size: .8125rem; margin: 0; padding: 20px 18px; }
.fa-receipts-empty.is-failed[b-zyv057ii2x] { color: var(--pulse-danger-text, #9b2929); }
.fa-receipt-list[b-zyv057ii2x] { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; max-height: 420px; overflow: auto; padding: 12px; }
.fa-receipt[b-zyv057ii2x] { border: 1px solid var(--fa-border); border-left: 4px solid var(--fa-muted); border-radius: 11px; display: grid; gap: 8px; min-width: 0; padding: 11px 12px; }
.fa-receipt.is-delivered[b-zyv057ii2x] { border-left-color: var(--fa-green); }
.fa-receipt.is-failed[b-zyv057ii2x],
.fa-receipt.is-cancelled[b-zyv057ii2x] { border-left-color: var(--pulse-danger-text, #9b2929); }
.fa-receipt.is-outcome_unknown[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-amber) 8%, var(--fa-surface)); border-color: color-mix(in srgb, var(--fa-amber) 50%, var(--fa-border)); border-left-color: var(--fa-amber); }
.fa-receipt.is-requested[b-zyv057ii2x] { box-shadow: 0 0 0 3px var(--pulse-focus-ring, rgba(13, 148, 136, .28)); }
.fa-receipt-primary[b-zyv057ii2x] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 5px 9px; min-width: 0; }
.fa-receipt-primary strong[b-zyv057ii2x] { font-size: .8125rem; overflow-wrap: anywhere; }
.fa-receipt-primary > span:last-child[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; }
.fa-receipt-state[b-zyv057ii2x] { background: var(--fa-soft); border-radius: 999px; color: var(--fa-muted); font-size: .75rem; font-weight: 700; padding: 3px 7px; }
.is-delivered .fa-receipt-state[b-zyv057ii2x] { background: var(--pulse-success-soft, #edf9f3); color: var(--pulse-success-text, #176341); }
.is-failed .fa-receipt-state[b-zyv057ii2x],
.is-cancelled .fa-receipt-state[b-zyv057ii2x] { background: var(--pulse-danger-soft, #fff1f1); color: var(--pulse-danger-text, #9b2929); }
.is-outcome_unknown .fa-receipt-state[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-amber) 14%, var(--fa-surface)); color: color-mix(in srgb, var(--fa-amber) 78%, var(--fa-ink)); }
.fa-receipt-meta[b-zyv057ii2x] { color: var(--fa-muted); display: flex; flex-wrap: wrap; font-size: .75rem; gap: 4px 12px; }
.fa-receipt p[b-zyv057ii2x] { color: color-mix(in srgb, var(--fa-amber) 78%, var(--fa-ink)); font-size: .75rem; line-height: 1.5; margin: 0; }
.fa-receipt p.fa-receipt-reason[b-zyv057ii2x] { color: var(--fa-muted); }
.fa-receipt details[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; min-width: 0; }
.fa-receipt summary[b-zyv057ii2x] { align-content: center; cursor: pointer; font-weight: 600; min-height: var(--pulse-control-min-height, 44px); padding-block: 8px; }
.fa-receipt dl[b-zyv057ii2x] { display: grid; gap: 4px 8px; grid-template-columns: auto minmax(0, 1fr); margin: 8px 0 0; }
.fa-receipt dt[b-zyv057ii2x] { font-weight: 700; }
.fa-receipt dd[b-zyv057ii2x] { margin: 0; min-width: 0; }
.fa-receipt code[b-zyv057ii2x] { overflow-wrap: anywhere; }

.fa-workbench[b-zyv057ii2x] { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(270px, .8fr) minmax(0, 2.2fr); }
.fa-library[b-zyv057ii2x],
.fa-editor[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: var(--pulse-radius-lg, 14px); min-width: 0; }
.fa-library[b-zyv057ii2x] { max-height: calc(100vh - 90px); position: sticky; top: var(--pulse-sticky-top); }
.fa-library > header[b-zyv057ii2x],
.fa-editor > header[b-zyv057ii2x] { align-items: center; border-bottom: 1px solid var(--fa-border); display: flex; gap: 12px; justify-content: space-between; padding: 16px 18px; }
.fa-library h2[b-zyv057ii2x],
.fa-editor h2[b-zyv057ii2x] { font-size: 1.125rem; margin: 3px 0 0; overflow-wrap: anywhere; }
.fa-library header button[b-zyv057ii2x] { border-radius: 9px; gap: 6px; min-height: var(--pulse-control-min-height, 44px); padding: 6px 11px; }

.fa-empty[b-zyv057ii2x] { color: var(--fa-muted); display: grid; font-size: .8125rem; gap: 7px; justify-items: center; padding: 24px 16px; text-align: center; }
.fa-empty > span[b-zyv057ii2x] { font-size: 1.5rem; }
.fa-empty strong[b-zyv057ii2x] { color: var(--fa-ink); }
.fa-empty p[b-zyv057ii2x] { line-height: 1.5; margin: 0; max-width: 24rem; }
.empty-action[b-zyv057ii2x] { background: transparent; border: 1px solid var(--fa-border); border-radius: 9px; color: var(--fa-indigo); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); padding: 7px 12px; }

.fa-list[b-zyv057ii2x] { display: grid; gap: 6px; max-height: calc(100vh - 190px); overflow: auto; padding: 10px; }
.fa-row[b-zyv057ii2x] { align-items: flex-start; background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 12px; cursor: pointer; display: flex; font: inherit; gap: 10px; padding: 11px 12px; text-align: left; width: 100%; }
.fa-row:hover[b-zyv057ii2x] { border-color: color-mix(in srgb, var(--fa-teal) 45%, var(--fa-border)); }
.fa-row.selected[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-teal) 7%, var(--fa-surface)); border-color: var(--fa-teal); }
.fa-row-state[b-zyv057ii2x] { border-radius: 50%; flex: 0 0 auto; height: 9px; margin-top: 5px; width: 9px; }
.fa-row-state.enabled[b-zyv057ii2x] { background: var(--fa-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fa-green) 13%, transparent); }
.fa-row-state.draft[b-zyv057ii2x] { background: var(--fa-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fa-muted) 11%, transparent); }
.fa-row-copy[b-zyv057ii2x] { display: grid; gap: 3px; min-width: 0; }
.fa-row-copy > span[b-zyv057ii2x] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.fa-row-copy strong[b-zyv057ii2x] { font-size: .875rem; overflow-wrap: anywhere; }
.fa-row-copy em[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fa-row-copy small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; overflow-wrap: anywhere; }
.fa-row-copy code[b-zyv057ii2x] { background: var(--fa-soft); border-radius: 5px; font-size: .75rem; padding: 1px 5px; }
.fa-row-copy b[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; font-weight: 600; }

.publish-toggle[b-zyv057ii2x] { align-items: center; background: var(--fa-soft); border: 1px solid var(--fa-border); border-radius: 12px; cursor: pointer; display: flex; flex: 0 0 auto; gap: 10px; padding: 9px 12px; }
.publish-toggle input[b-zyv057ii2x] { accent-color: var(--fa-green); height: 18px; width: 18px; }
.publish-toggle span[b-zyv057ii2x] { display: grid; gap: 1px; }
.publish-toggle strong[b-zyv057ii2x] { font-size: .8125rem; }
.publish-toggle small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; }

.fa-section[b-zyv057ii2x] { border-bottom: 1px solid var(--fa-border); display: grid; gap: 14px; padding: 18px; }
.editor-heading[b-zyv057ii2x] { align-items: flex-start; display: flex; gap: 12px; }
.editor-heading > span[b-zyv057ii2x] { align-items: center; background: color-mix(in srgb, var(--fa-teal) 11%, var(--fa-soft)); border-radius: 9px; color: var(--fa-teal); display: flex; flex: 0 0 auto; font-size: .8125rem; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.editor-heading h3[b-zyv057ii2x] { font-size: .9375rem; margin: 2px 0 0; }
.editor-heading p[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.55; margin: 4px 0 0; max-width: 44rem; }

.fa-grid[b-zyv057ii2x] { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-grid > label:not(.fa-toggle)[b-zyv057ii2x] { display: grid; gap: 5px; }
.fa-grid > label > span[b-zyv057ii2x] { font-size: .75rem; font-weight: 700; }
/* select belongs here with the rest. Leaving it out gave every dropdown in this
   editor - "What it does", and the camera picker underneath it - raw browser
   chrome next to fully styled text boxes: a different border, a different
   height, a different font. */
.fa-grid input[type="text"][b-zyv057ii2x],
.fa-grid input:not([type])[b-zyv057ii2x],
.fa-grid input[type="number"][b-zyv057ii2x],
.fa-grid select[b-zyv057ii2x],
.fa-grid textarea[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 10px; color: inherit; font: inherit; font-size: .875rem; min-height: var(--pulse-control-min-height, 44px); padding: 9px 12px; width: 100%; }
.fa-grid :is(input, select, textarea)[b-zyv057ii2x], .fa-quick-camera select[b-zyv057ii2x], .fa-quick-fields :is(input, textarea)[b-zyv057ii2x], .fa-quick-options input[b-zyv057ii2x] { box-sizing: border-box; min-width: 0; }
.fa-grid select[b-zyv057ii2x] { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fa-muted) 50%), linear-gradient(135deg, var(--fa-muted) 50%, transparent 50%); background-position: right 17px center, right 12px center; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 32px; }
.fa-grid optgroup[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.fa-grid option[b-zyv057ii2x] { color: var(--fa-ink); font-size: .875rem; font-weight: 500; }
.fa-grid textarea[b-zyv057ii2x] { min-height: 76px; resize: vertical; }

/* The editor had no focus treatment at all, so a keyboard operator had only
   the browser default to tell them where they were. Same shape as the sibling
   settings workspaces. */
.fa-grid input:focus[b-zyv057ii2x],
.fa-grid select:focus[b-zyv057ii2x],
.fa-grid textarea:focus[b-zyv057ii2x] { border-color: var(--fa-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-teal) 13%, transparent); outline: none; }
.fieldactions-page :is(button, a, input, select, textarea, summary):focus-visible[b-zyv057ii2x] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.fa-grid small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.45; }
.fa-grid code[b-zyv057ii2x] { background: var(--fa-soft); border-radius: 5px; font-size: .75rem; padding: 1px 5px; }
.fa-wide[b-zyv057ii2x] { grid-column: 1 / -1; }
.fa-toggle[b-zyv057ii2x] { align-items: center; background: var(--fa-soft); border: 1px solid var(--fa-border); border-radius: 12px; cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; }
.fa-toggle input[b-zyv057ii2x] { accent-color: var(--fa-teal); height: 18px; width: 18px; }
.fa-toggle span[b-zyv057ii2x] { display: grid; gap: 1px; }
.fa-toggle strong[b-zyv057ii2x] { font-size: .8125rem; }
.fa-toggle small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.4; }

.fa-servers[b-zyv057ii2x] { border: 1px solid var(--fa-border); border-radius: 12px; display: grid; gap: 4px; grid-column: 1 / -1; margin: 0; padding: 10px 12px 12px; }
.fa-servers legend[b-zyv057ii2x] { font-size: .75rem; font-weight: 700; padding-inline: 4px; }
.fa-servers-empty[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; margin: 4px 0 0; }
.fa-server-option[b-zyv057ii2x] { align-items: center; border-radius: 9px; cursor: pointer; display: flex; gap: 9px; min-height: var(--pulse-control-min-height, 44px); padding: 5px 8px; }
.fa-server-option:hover[b-zyv057ii2x] { background: var(--fa-soft); }
.fa-server-option input[b-zyv057ii2x] { accent-color: var(--fa-teal); height: 16px; width: 16px; }
.fa-server-option span[b-zyv057ii2x] { display: grid; font-size: .8125rem; gap: 0; }
.fa-server-option small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; }

.fa-contract[b-zyv057ii2x] { background: color-mix(in srgb, var(--fa-indigo) 6%, var(--fa-surface)); border: 1px solid color-mix(in srgb, var(--fa-indigo) 28%, var(--fa-border)); border-radius: 13px; display: grid; gap: 6px; margin: 18px; padding: 13px 15px; }
.fa-contract strong[b-zyv057ii2x] { font-size: .8125rem; }
.fa-contract p[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.6; margin: 0; }
.fa-contract code[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 5px; font-size: .75rem; padding: 1px 5px; }

.editor-actions[b-zyv057ii2x] { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 16px 18px; }

@media (max-width: 1100px) {
    .fa-workbench[b-zyv057ii2x] { grid-template-columns: 1fr; }
    .fa-library[b-zyv057ii2x] { max-height: none; position: static; }
    .fa-grid[b-zyv057ii2x] { grid-template-columns: 1fr; }
    .fa-receipt-list[b-zyv057ii2x] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .fa-safety-state[b-zyv057ii2x] { grid-template-columns: 1fr; }
    .fa-receipts > header[b-zyv057ii2x] { align-items: flex-start; flex-direction: column; }
    .fa-receipts header button[b-zyv057ii2x] { width: 100%; }
    .fa-receipt-list[b-zyv057ii2x] { max-height: none; }
}

.fa-quick[b-zyv057ii2x] {
    background: var(--fa-surface);
    border: 1px solid var(--fa-border);
    border-radius: var(--pulse-radius-lg, 14px);
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.fa-quick-header[b-zyv057ii2x] { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.fa-quick-header h2[b-zyv057ii2x] { font-size: 1.15rem; margin: 0; }

.fa-quick-camera[b-zyv057ii2x] { display: grid; gap: 6px; }
.fa-quick-camera > label[b-zyv057ii2x],
.fa-quick-fields label > span[b-zyv057ii2x],
.fa-quick-options label > span[b-zyv057ii2x] { font-size: .75rem; font-weight: 700; }
.fa-quick-camera select[b-zyv057ii2x],
.fa-quick-fields input[b-zyv057ii2x],
.fa-quick-fields textarea[b-zyv057ii2x],
.fa-quick-options input[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 10px; color: inherit; font: inherit; font-size: .875rem; min-height: var(--pulse-control-min-height, 44px); padding: 9px 12px; width: 100%; }
.fa-quick-camera select[b-zyv057ii2x] { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fa-muted) 50%), linear-gradient(135deg, var(--fa-muted) 50%, transparent 50%); background-position: right 17px center, right 12px center; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 34px; }
.fa-quick-camera :is(select):focus[b-zyv057ii2x],
.fa-quick-fields :is(input, textarea):focus[b-zyv057ii2x],
.fa-quick-options input:focus[b-zyv057ii2x] { border-color: var(--fa-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-teal) 13%, transparent); outline: none; }

.fa-quick-notice[b-zyv057ii2x] { border: 1px solid; border-radius: 10px; font-size: .8125rem; font-weight: 700; padding: 10px 12px; }
.fa-quick-notice.is-failed[b-zyv057ii2x] { background: var(--pulse-danger-soft, #fff1f1); border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); }
.fa-quick-notice.is-success[b-zyv057ii2x] { background: var(--pulse-success-soft, #edf9f3); border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); }
.fa-quick-empty[b-zyv057ii2x],
.fa-quick-prompt[b-zyv057ii2x] { color: var(--fa-muted); font-size: .8125rem; line-height: 1.5; margin: 0; }
.fa-quick-empty.is-failed[b-zyv057ii2x] { color: var(--pulse-danger-text, #9b2929); }
.fa-quick-prompt[b-zyv057ii2x] { background: var(--fa-soft); border: 1px solid var(--fa-border); border-radius: var(--pulse-radius-sm, 8px); padding: 12px; }

.fa-quick-layout[b-zyv057ii2x] { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
.fa-quick-list[b-zyv057ii2x],
.fa-quick-editor[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 14px; min-width: 0; }
.fa-quick-list > header[b-zyv057ii2x],
.fa-quick-editor > header[b-zyv057ii2x] { align-items: center; border-bottom: 1px solid var(--fa-border); display: flex; gap: 12px; justify-content: space-between; padding: 14px; }
.fa-quick-list h3[b-zyv057ii2x],
.fa-quick-editor h3[b-zyv057ii2x] { font-size: 1rem; margin: 3px 0 0; }
.fa-quick-list > .fa-quick-empty[b-zyv057ii2x] { padding: 20px 14px; }
.fa-quick-buttons[b-zyv057ii2x] { display: grid; gap: 8px; max-height: 430px; overflow: auto; padding: 10px; }
.fa-quick-button-card[b-zyv057ii2x] { align-items: center; border: 1px solid var(--fa-border); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: minmax(135px, .65fr) minmax(0, 1fr) auto; padding: 10px; }
.fa-quick-button-card.is-selected[b-zyv057ii2x] { border-color: var(--fa-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fa-teal) 14%, transparent); }
.fa-quick-button-preview[b-zyv057ii2x] { background: var(--fa-soft); border: 1px solid var(--fa-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--fa-ink); display: grid; gap: 2px; min-height: 48px; padding: 8px 11px; }
.fa-quick-button-preview strong[b-zyv057ii2x] { font-size: .8125rem; overflow-wrap: anywhere; }
.fa-quick-button-preview small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.fa-quick-button-copy[b-zyv057ii2x] { display: grid; gap: 3px; min-width: 0; }
.fa-quick-button-copy > span[b-zyv057ii2x] { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fa-quick-button-copy > span.is-live[b-zyv057ii2x] { color: var(--fa-green); }
.fa-quick-button-copy > span.is-draft[b-zyv057ii2x] { color: var(--fa-muted); }
.fa-quick-button-copy code[b-zyv057ii2x] { font-size: .75rem; overflow-wrap: anywhere; }
.fa-quick-button-copy small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.35; }
.fa-quick-card-actions[b-zyv057ii2x] { display: grid; gap: 5px; }
.fa-quick-card-actions button[b-zyv057ii2x] { background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: 8px; color: var(--fa-ink); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); overflow-wrap: anywhere; padding: 6px 10px; }
.fa-quick-card-actions button:hover[b-zyv057ii2x] { border-color: var(--fa-teal); color: var(--fa-teal); }

.fa-quick-editor > header[b-zyv057ii2x] { display: block; }
.fa-quick-fields[b-zyv057ii2x] { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
.fa-quick-fields > label:not(.fa-quick-toggle)[b-zyv057ii2x] { display: grid; gap: 5px; }
.fa-quick-fields textarea[b-zyv057ii2x] { min-height: 72px; resize: vertical; }
.fa-quick-fields small[b-zyv057ii2x] { color: var(--fa-muted); font-size: .75rem; line-height: 1.4; }
.fa-quick-wide[b-zyv057ii2x] { grid-column: 1 / -1; }
.fa-quick-toggle[b-zyv057ii2x] { align-items: center; background: var(--fa-soft); border: 1px solid var(--fa-border); border-radius: 10px; cursor: pointer; display: flex; gap: 9px; padding: 9px 10px; }
.fa-quick-toggle input[b-zyv057ii2x] { accent-color: var(--fa-teal); flex: 0 0 auto; height: 17px; min-height: 0; padding: 0; width: 17px; }
.fa-quick-toggle > span[b-zyv057ii2x] { display: grid; gap: 1px; }
.fa-quick-toggle strong[b-zyv057ii2x] { font-size: .78rem; }
.fa-quick-toggle small[b-zyv057ii2x] { font-size: .75rem; }
.fa-quick-options[b-zyv057ii2x] { border-top: 1px solid var(--fa-border); color: var(--fa-muted); font-size: .75rem; padding: 11px 14px; }
.fa-quick-options summary[b-zyv057ii2x] { cursor: pointer; font-size: .8125rem; font-weight: 700; line-height: 1.5; min-height: var(--pulse-control-min-height, 44px); padding-block: .5rem; }
.fa-quick-options label[b-zyv057ii2x] { display: grid; gap: 5px; margin-top: 10px; max-width: 280px; }
.fa-quick-editor-actions[b-zyv057ii2x] { border-top: 1px solid var(--fa-border); display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 13px 14px; }
.fa-quick-editor-actions button[b-zyv057ii2x] { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.fa-quick-list > header > div[b-zyv057ii2x], .fa-quick-editor > header[b-zyv057ii2x] { min-width: 0; overflow-wrap: anywhere; }
.fa-quick-card-actions[b-zyv057ii2x] { min-width: 0; }

@media (pointer: coarse) {
    .fa-quick-card-actions button[b-zyv057ii2x], .fa-quick-options summary[b-zyv057ii2x] { min-height: var(--pulse-control-min-height, 44px); }
}

@media (max-width: 1050px) {
    .fa-quick-layout[b-zyv057ii2x] { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .fa-quick-header[b-zyv057ii2x] { align-items: flex-start; flex-direction: column; }
    .fa-quick-fields[b-zyv057ii2x] { grid-template-columns: 1fr; }
    .fa-quick-wide[b-zyv057ii2x] { grid-column: auto; }
    .fa-quick-button-card[b-zyv057ii2x] { grid-template-columns: 1fr; }
    .fa-quick-card-actions[b-zyv057ii2x] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .fieldactions-page *[b-zyv057ii2x], .fieldactions-page *[b-zyv057ii2x]::before, .fieldactions-page *[b-zyv057ii2x]::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* /Components/Pages/Incidents.razor.rz.scp.css */
.incidents-page[b-ja5hgziwgq] {
    --incident-accent: var(--pulse-accent, #087f78);
    --incident-blue: var(--pulse-info-strong, #2563eb);
    --incident-amber: var(--pulse-warning-text, #d97706);
    --incident-red: var(--pulse-danger-text, #dc2626);
    --incident-ink: var(--pulse-text, #17262d);
    --incident-muted: var(--pulse-muted, #687980);
    --incident-border: var(--pulse-border, #dbe5e5);
    --incident-surface: var(--pulse-surface, #fff);
    --incident-soft: var(--pulse-surface-soft, #f3f7f7);
    box-sizing: border-box;
    color: var(--incident-ink);
    display: grid;
    gap: var(--pulse-workspace-gap, 20px);
    margin: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: var(--pulse-workspace-pad-top, 24px)
        var(--pulse-workspace-pad-x, 32px)
        var(--pulse-workspace-pad-bottom, 44px);
}

.incidents-hero[b-ja5hgziwgq] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-xl, 16px);
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--pulse-workspace-hero-pad-y, 14px);
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
    position: relative;
}

.incidents-hero > *[b-ja5hgziwgq] { min-width: 0; }
.incidents-title[b-ja5hgziwgq] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.incidents-hero h1[b-ja5hgziwgq] { font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.incidents-kicker[b-ja5hgziwgq] { color: var(--incident-accent); font-size: max(.75rem, var(--pulse-workspace-eyebrow-size, .75rem)); font-weight: 700; letter-spacing: normal; text-transform: none; }
.hero-actions[b-ja5hgziwgq] { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; }
.live-sync[b-ja5hgziwgq] { align-items: center; background: transparent; display: flex; gap: 9px; padding: 0 2px; }
.live-sync > span:last-child[b-ja5hgziwgq] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 6px; }
.live-sync strong[b-ja5hgziwgq] { font-size: .8125rem; line-height: 1.3; }
.live-sync small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: var(--pulse-workspace-lede-size, .8125rem); line-height: 1.45; overflow-wrap: anywhere; }
.live-pulse[b-ja5hgziwgq] { background: var(--incident-accent); border-radius: 50%; flex: none; height: 8px; width: 8px; }
.live-sync.connecting .live-pulse[b-ja5hgziwgq],
.live-sync.stale .live-pulse[b-ja5hgziwgq] { background: var(--incident-amber); }
.live-sync.stale strong[b-ja5hgziwgq] { color: var(--incident-amber); }

.primary-button[b-ja5hgziwgq],
.secondary-button[b-ja5hgziwgq],
.case-command-bar a[b-ja5hgziwgq],
.case-command-bar button[b-ja5hgziwgq],
.suggestion-list button[b-ja5hgziwgq],
.response-grid button[b-ja5hgziwgq] {
    align-items: center;
    border-radius: var(--pulse-radius-sm, 8px);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 7px 12px;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.primary-button[b-ja5hgziwgq],
.case-command-bar .primary[b-ja5hgziwgq] {
    background: var(--incident-accent);
    border: 1px solid var(--incident-accent);
    box-shadow: none;
    color: #fff;
}

.secondary-button[b-ja5hgziwgq],
.case-command-bar a[b-ja5hgziwgq],
.case-command-bar button[b-ja5hgziwgq],
.response-grid button[b-ja5hgziwgq] {
    background: var(--incident-surface);
    border: 1px solid var(--incident-border);
    color: var(--incident-ink);
}

.primary-button:hover[b-ja5hgziwgq],
.secondary-button:hover[b-ja5hgziwgq],
.case-command-bar a:hover[b-ja5hgziwgq],
.case-command-bar button:hover[b-ja5hgziwgq],
.suggestion-list button:hover[b-ja5hgziwgq],
.response-grid button:hover[b-ja5hgziwgq] { filter: brightness(.97); }
button:disabled[b-ja5hgziwgq] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); transform: none !important; }
.incidents-page :is(button, input, select, summary)[b-ja5hgziwgq] { min-height: var(--pulse-control-min-height, 44px); }
.incidents-page :is(button, input, select, textarea, a, summary):focus-visible[b-ja5hgziwgq] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.incident-notice[b-ja5hgziwgq] {
    align-items: center;
    border: 1px solid;
    border-radius: var(--pulse-radius-md, 13px);
    display: grid;
    font-size: .8125rem;
    gap: 5px 12px;
    grid-template-columns: auto 1fr auto;
    padding: 12px 14px;
}
.incident-notice.error[b-ja5hgziwgq] { background: var(--pulse-danger-soft, #fff1f2); border-color: var(--pulse-danger-border, #fecdd3); color: var(--pulse-danger-text, #b91c1c); }
.incident-notice.success[b-ja5hgziwgq] { background: var(--pulse-success-soft, #ecfdf5); border-color: var(--pulse-success-border, #a7f3d0); color: var(--pulse-success-text, #047857); }
/* Amber on this page means the desk is degraded (live updates delayed). Which
   part of a case record is on screen is a neutral fact, not a fault, so it gets
   the plain surface tone; the completed read gets .success like every other
   answered request. */
.incident-notice.refresh-warning[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-amber) 11%, var(--incident-surface)); border-color: color-mix(in srgb, var(--incident-amber) 42%, var(--incident-border)); color: var(--incident-ink); }
.incident-notice.record-scope[b-ja5hgziwgq] { background: var(--incident-soft); border-color: var(--incident-border); color: var(--incident-ink); }
.incident-notice button[b-ja5hgziwgq] { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.25rem; min-width: 44px; }
.notice-retry[b-ja5hgziwgq] { background: transparent; border: 1px solid currentColor; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; min-height: 44px; padding: 5px 10px; }

.incident-metrics[b-ja5hgziwgq] {
    align-items: center;
    background: var(--incident-surface);
    border: 1px solid var(--incident-border);
    border-radius: var(--pulse-radius-lg, 14px);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 4px 12px;
}
.incident-metrics article[b-ja5hgziwgq],
.incident-metrics .metric-tile[b-ja5hgziwgq] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    padding: 0;
}
.incident-metrics article div[b-ja5hgziwgq],
.incident-metrics .metric-tile div[b-ja5hgziwgq] { align-items: baseline; display: flex; gap: 5px; min-width: 0; }
.incident-metrics strong[b-ja5hgziwgq] { font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.incident-metrics small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .8125rem; }
.incident-metrics .metric-tile[b-ja5hgziwgq] { border: 1px solid var(--incident-border); color: var(--incident-ink); cursor: pointer; font: inherit; min-width: 0; padding: 0 10px; text-align: left; transition: border-color .16s ease, box-shadow .16s ease; width: auto; }
.incident-metrics .metric-tile:hover[b-ja5hgziwgq] { border-color: color-mix(in srgb, var(--incident-accent) 45%, var(--incident-border)); }
.incident-metrics .metric-tile[aria-pressed="true"][b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-accent) 7%, var(--incident-surface)); border-color: var(--incident-accent); }
.metric-mark[b-ja5hgziwgq] { background: var(--incident-accent); border-radius: 50%; flex: none; height: 8px; width: 8px; }
.metric-mark.critical[b-ja5hgziwgq] { background: var(--incident-red); }
.metric-mark.breach[b-ja5hgziwgq] { background: var(--incident-amber); }
.metric-mark.suggestion[b-ja5hgziwgq] { background: var(--incident-blue); }
.metric-mark.is-zero[b-ja5hgziwgq] { background: var(--incident-muted); }

.alarm-intake[b-ja5hgziwgq] {
    align-items: center;
    background: var(--incident-surface);
    border: 1px solid color-mix(in srgb, var(--incident-accent) 40%, var(--incident-border));
    border-radius: var(--pulse-radius-lg, 14px);
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(220px, .8fr) minmax(480px, 1.5fr);
    padding: 14px;
}
.intake-icon[b-ja5hgziwgq] { align-items: center; background: var(--incident-accent); border-radius: 14px; color: #fff; display: flex; font-size: 1.6875rem; font-weight: 300; height: 50px; justify-content: center; width: 50px; }
.alarm-intake h2[b-ja5hgziwgq] { font-size: 1.125rem; margin: 3px 0; }
.alarm-intake p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; margin: 0; }
.intake-fields[b-ja5hgziwgq] { align-items: end; display: grid; gap: 9px; grid-template-columns: 130px 130px minmax(170px, 1fr) auto; }
.intake-existing[b-ja5hgziwgq] { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.3fr) auto; gap: 10px; align-items: end; margin-top: 4px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--incident-accent) 20%, var(--incident-border)); }
.intake-existing > div[b-ja5hgziwgq] { align-self: center; }
.intake-existing > div strong[b-ja5hgziwgq], .intake-existing > div span[b-ja5hgziwgq] { display: block; }
.intake-existing > div strong[b-ja5hgziwgq] { font-size: .75rem; }
.intake-existing > div span[b-ja5hgziwgq] { margin-top: 2px; color: var(--incident-muted); font-size: .75rem; line-height: 1.45; }
.intake-existing label[b-ja5hgziwgq] { display: grid; gap: 4px; color: var(--incident-muted); font-size: .75rem; font-weight: 700; }
.intake-existing select[b-ja5hgziwgq] { width: 100%; min-height: 44px; padding: 7px 9px; border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-ink); background: var(--incident-surface); font: inherit; font-size: .875rem; }
.intake-existing > button[b-ja5hgziwgq] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--incident-accent); border-radius: 8px; color: var(--incident-accent); background: var(--incident-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.link-target-search[b-ja5hgziwgq] { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr) auto; }
.link-target-search input[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-ink); font: inherit; font-size: .875rem; min-height: 44px; min-width: 0; padding: 7px 9px; }
.link-target-search button[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-ink); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; min-height: 44px; padding: 7px 10px; }
.link-target-picker small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; font-weight: 600; }
.intake-fields label[b-ja5hgziwgq],
.response-grid label[b-ja5hgziwgq] { color: var(--incident-muted); display: grid; font-size: .75rem; font-weight: 700; gap: 5px; }
.intake-fields input[b-ja5hgziwgq],
.intake-fields select[b-ja5hgziwgq],
.response-grid input[b-ja5hgziwgq],
.response-grid select[b-ja5hgziwgq],
.response-grid textarea[b-ja5hgziwgq],
.incident-index select[b-ja5hgziwgq] {
    background: var(--incident-surface);
    border: 1px solid var(--incident-border);
    border-radius: 9px;
    color: var(--incident-ink);
    font: inherit;
    font-size: .875rem;
    min-height: 44px;
    padding: 8px 10px;
}

.suggestion-strip[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-blue) 5%, var(--incident-surface)); border: 1px solid color-mix(in srgb, var(--incident-blue) 23%, var(--incident-border)); border-radius: var(--pulse-radius-lg, 14px); padding: 14px; }
.suggestion-strip > header[b-ja5hgziwgq],
.incident-index > header[b-ja5hgziwgq],
.evidence-panel > header[b-ja5hgziwgq],
.timeline-panel > header[b-ja5hgziwgq] { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.suggestion-strip h2[b-ja5hgziwgq],
.incident-index h2[b-ja5hgziwgq],
.evidence-panel h3[b-ja5hgziwgq],
.timeline-panel h3[b-ja5hgziwgq] { font-size: 1.125rem; margin: 3px 0 0; }
.suggestion-strip > header > span[b-ja5hgziwgq],
.evidence-panel > header > span[b-ja5hgziwgq],
.timeline-panel > header > span[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.evidence-panel > .incident-notice[b-ja5hgziwgq],
.timeline-panel > .incident-notice[b-ja5hgziwgq] { margin-top: 12px; }
.suggestion-list[b-ja5hgziwgq] { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 12px; }
.suggestion-list article[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 13px; display: grid; gap: 5px; min-width: 0; padding: 13px; }
.suggestion-rule[b-ja5hgziwgq] { color: var(--incident-blue); font-size: .75rem; font-weight: 700; letter-spacing: normal; text-transform: none; }
.suggestion-list strong[b-ja5hgziwgq] { line-height: 1.45; overflow-wrap: anywhere; }
.suggestion-list p[b-ja5hgziwgq] { color: var(--incident-muted); display: -webkit-box; font-size: .75rem; line-height: 1.45; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.suggestion-evidence[b-ja5hgziwgq] { align-items: center; display: flex; gap: 9px; margin-top: 3px; min-width: 0; }
.suggestion-list .evidence-image[b-ja5hgziwgq] { flex: none; height: 44px; width: 62px; }
.suggestion-evidence a[b-ja5hgziwgq] { align-items: center; color: var(--incident-blue); display: inline-flex; font-size: .75rem; font-weight: 700; min-height: 44px; text-decoration: none; }
.suggestion-evidence a:hover[b-ja5hgziwgq] { text-decoration: underline; }
.suggestion-list footer[b-ja5hgziwgq] { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-top: 6px; }
.suggestion-list time[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.suggestion-list button[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-blue) 10%, var(--incident-surface)); border: 1px solid color-mix(in srgb, var(--incident-blue) 30%, var(--incident-border)); color: var(--incident-blue); min-height: 44px; padding: 6px 9px; }
.suggestion-pager[b-ja5hgziwgq] { align-items: center; border-top: 1px solid color-mix(in srgb, var(--incident-blue) 20%, var(--incident-border)); color: var(--incident-muted); display: flex; font-size: .75rem; gap: 8px; justify-content: space-between; margin-top: 12px; padding-top: 10px; }
.suggestion-pager > div[b-ja5hgziwgq] { align-items: center; display: flex; gap: 6px; }
.suggestion-pager strong[b-ja5hgziwgq] { color: var(--incident-ink); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suggestion-pager > span[b-ja5hgziwgq] { font-variant-numeric: tabular-nums; }
.suggestion-pager button[b-ja5hgziwgq] { align-items: center; background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-blue); cursor: pointer; display: inline-flex; font: inherit; font-size: .875rem; height: 44px; justify-content: center; width: 44px; }
.suggestion-pager button:disabled[b-ja5hgziwgq] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }

.incident-workspace[b-ja5hgziwgq] { align-items: start; display: grid; gap: 12px; grid-template-columns: clamp(17rem, 24%, 22rem) minmax(0, 1fr); min-width: 0; }
.incident-index[b-ja5hgziwgq],
.incident-detail[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: var(--pulse-radius-lg, 14px); min-width: 0; }
.incident-index[b-ja5hgziwgq] { position: sticky; top: var(--pulse-sticky-top, 78px); }
.incident-index > header[b-ja5hgziwgq] { align-items: center; border-bottom: 1px solid var(--incident-border); display: flex; gap: 14px; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); padding: 8px 15px; }
.incident-index select[b-ja5hgziwgq] { min-height: 44px; padding: 5px 8px; }
.incident-lineage-filter[b-ja5hgziwgq] { align-items: baseline; background: color-mix(in srgb, var(--incident-indigo, #4f46c7) 8%, var(--incident-surface)); border-bottom: 1px solid var(--incident-border); display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; justify-content: space-between; line-height: 1.4; padding: 8px 10px; }
.incident-lineage-filter strong[b-ja5hgziwgq] { font-weight: 700; }
.incident-lineage-filter a[b-ja5hgziwgq] { color: var(--incident-indigo, #4f46c7); font-weight: 700; white-space: nowrap; }

.incident-query[b-ja5hgziwgq] { border-bottom: 1px solid var(--incident-border); display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) auto auto; padding: 9px 10px; }
.incident-query input[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 9px; color: var(--incident-ink); font: inherit; font-size: .875rem; min-height: 44px; min-width: 0; padding: 7px 9px; width: 100%; }
.incident-query button[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: 9px; color: var(--incident-ink); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; min-height: 44px; padding: 7px 10px; }
.incident-query button.clear[b-ja5hgziwgq] { color: var(--incident-red); font-size: 1.125rem; padding-inline: 11px; }
/* Hidden by the shared .visually-hidden-focusable utility until a keyboard
   reaches it; when it is focused it takes flow above the queue so a sighted
   keyboard operator can see where the jump goes. */
.queue-skip-link:focus[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: 9px; color: var(--incident-ink); cursor: pointer; display: block; font: inherit; font-size: .8125rem; font-weight: 700; margin: 8px 10px 0; min-height: 44px; padding: 8px 10px; text-align: left; width: calc(100% - 20px); }
.incident-detail:focus-visible[b-ja5hgziwgq] { outline: 3px solid var(--pulse-focus-ring); outline-offset: -3px; }
.incident-list[b-ja5hgziwgq] { display: grid; max-height: max(280px, calc(100dvh - 300px)); overflow: auto; overscroll-behavior: contain; padding: 6px; scrollbar-gutter: stable; }
.incident-pager[b-ja5hgziwgq] { align-items: center; border-top: 1px solid var(--incident-border); color: var(--incident-muted); display: flex; font-size: .75rem; gap: 8px; justify-content: space-between; padding: 9px 11px; }
.incident-pager > div[b-ja5hgziwgq] { align-items: center; display: flex; gap: 6px; }
.incident-pager strong[b-ja5hgziwgq] { color: var(--incident-ink); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.incident-pager > span[b-ja5hgziwgq] { font-variant-numeric: tabular-nums; }
.incident-pager button[b-ja5hgziwgq] { align-items: center; background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-accent); cursor: pointer; display: inline-flex; font: inherit; font-size: .875rem; height: 44px; justify-content: center; width: 44px; }
.incident-pager button:disabled[b-ja5hgziwgq] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); }
.incident-row[b-ja5hgziwgq] { background: transparent; border: 0; border-radius: 12px; color: inherit; cursor: pointer; display: grid; gap: 10px; grid-template-columns: 3px minmax(0, 1fr); padding: 10px; text-align: left; width: 100%; }
.incident-row:hover[b-ja5hgziwgq] { background: var(--incident-soft); }
.incident-row.selected[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-accent) 9%, var(--incident-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--incident-accent) 30%, transparent); }
.incident-row.focused[b-ja5hgziwgq] { box-shadow: inset 0 0 0 2px var(--incident-accent); }
.severity-rail[b-ja5hgziwgq] { background: #94a3b8; border-radius: 4px; }
.severity-rail.medium[b-ja5hgziwgq] { background: var(--incident-blue); }
.severity-rail.high[b-ja5hgziwgq] { background: var(--incident-amber); }
.severity-rail.critical[b-ja5hgziwgq] { background: var(--incident-red); }
.incident-row-copy[b-ja5hgziwgq] { display: grid; gap: 5px; min-width: 0; }
.incident-row-top[b-ja5hgziwgq],
.incident-row-bottom[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.incident-row-top[b-ja5hgziwgq] { justify-content: space-between; }
.incident-row-top b[b-ja5hgziwgq] { color: var(--incident-accent); font-size: .75rem; letter-spacing: .05em; }
.incident-row-top time[b-ja5hgziwgq],
.incident-row-copy small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.incident-row-copy > strong[b-ja5hgziwgq] { font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }
.status-chip[b-ja5hgziwgq],
.owner-chip[b-ja5hgziwgq],
.sla-chip[b-ja5hgziwgq] { border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 3px 6px; }
.status-chip[b-ja5hgziwgq] { background: var(--pulse-info-soft, #eff6ff); color: var(--incident-blue); }
.status-chip.resolved[b-ja5hgziwgq],
.status-chip.closed[b-ja5hgziwgq] { background: var(--incident-soft); color: var(--incident-muted); }
.owner-chip[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-accent) 9%, transparent); color: var(--incident-accent); }
.sla-chip[b-ja5hgziwgq] { background: var(--pulse-danger-soft, #fff1f2); color: var(--incident-red); }

.incident-detail[b-ja5hgziwgq] { padding: 16px; }
.detail-header[b-ja5hgziwgq] { align-items: start; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: space-between; }
.detail-header > div:first-child[b-ja5hgziwgq] { flex: 1 1 18rem; min-width: 0; }
.detail-header h2[b-ja5hgziwgq] { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 5px 0 7px; overflow-wrap: anywhere; }
.detail-header p[b-ja5hgziwgq] { color: var(--incident-muted); line-height: 1.55; margin: 0; max-width: 760px; }
.detail-badges[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.status-badge[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-accent) 10%, transparent); border-radius: 999px; color: var(--incident-accent); font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: 6px 9px; text-transform: uppercase; }
.case-command-bar[b-ja5hgziwgq] { border-bottom: 1px solid var(--incident-border); border-top: 1px solid var(--incident-border); display: grid; gap: 8px; margin: 12px 0; padding: 10px 0; }
.case-primary-actions[b-ja5hgziwgq],
.case-navigation-actions[b-ja5hgziwgq],
.case-record-actions[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.case-primary-actions[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: var(--pulse-radius-md, 10px); padding: 8px; }
.case-primary-actions > label[b-ja5hgziwgq] { color: var(--incident-muted); display: grid; flex: 1 1 220px; font-size: .75rem; font-weight: 700; gap: 5px; min-width: 0; }
.case-primary-actions input[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 9px; color: var(--incident-ink); font: inherit; min-height: 44px; min-width: 0; padding: 7px 9px; width: 100%; }
.case-primary-actions .primary[b-ja5hgziwgq] { background: var(--incident-accent); border-color: var(--incident-accent); color: #fff; }
.case-utilities[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; min-width: 0; }
.case-record-actions[b-ja5hgziwgq] { gap: 6px; }
.case-custody-status[b-ja5hgziwgq] { display: grid; gap: 8px; min-width: 0; }
.case-command-bar a[b-ja5hgziwgq],
.case-command-bar button[b-ja5hgziwgq] { min-height: 44px; padding: 7px 11px; }
.case-command-bar .case-record-actions button[b-ja5hgziwgq] { background: transparent; border-color: transparent; box-shadow: none; color: var(--incident-blue); gap: 6px; padding-inline: 6px; }
.case-command-bar .case-record-actions button:hover[b-ja5hgziwgq] { background: var(--incident-soft); border-color: var(--incident-border); }
.case-command-bar :is(a, button, input):focus-visible[b-ja5hgziwgq],
.case-record-heading:focus-visible[b-ja5hgziwgq] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 3px; }
.case-record-heading[b-ja5hgziwgq] { border-radius: 4px; scroll-margin-block-start: 6rem; }
.case-closed-notice[b-ja5hgziwgq] { align-items: center; color: var(--incident-muted); display: flex; font-size: .75rem; min-height: 44px; }
.command-blocked-reason[b-ja5hgziwgq] { align-items: center; color: var(--incident-amber); display: flex; flex-basis: 100%; font-size: .75rem; font-weight: 700; line-height: 1.5; min-height: 44px; }

.case-facts[b-ja5hgziwgq] { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.case-facts article[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid color-mix(in srgb, var(--incident-border) 75%, transparent); border-radius: var(--pulse-radius-md, 10px); display: grid; align-content: start; gap: 3px; min-width: 0; padding: 9px; }
.case-facts article.breached[b-ja5hgziwgq] { background: var(--pulse-danger-soft, #fff1f2); border-color: var(--pulse-danger-border, #fecdd3); }
.case-facts small[b-ja5hgziwgq],
.case-facts span[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.case-facts strong[b-ja5hgziwgq] { font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }

.evidence-export[b-ja5hgziwgq] { border-color: color-mix(in srgb, var(--incident-blue) 35%, var(--incident-border)) !important; color: var(--incident-blue) !important; }
.evidence-custody[b-ja5hgziwgq] { align-items: center; border: 1px solid var(--incident-border); border-radius: 9px; display: flex; flex-wrap: wrap; font-size: .75rem; gap: 5px 10px; line-height: 1.5; padding: 9px 11px; overflow-wrap: anywhere; }
.evidence-custody small[b-ja5hgziwgq] { color: var(--incident-muted); }
.evidence-custody.ready[b-ja5hgziwgq] { border-color: color-mix(in srgb, var(--incident-accent) 45%, var(--incident-border)); color: var(--incident-accent); }
.evidence-custody.has-omissions[b-ja5hgziwgq] { border-color: color-mix(in srgb, var(--incident-red) 45%, var(--incident-border)); color: var(--incident-red); }

.response-runbook[b-ja5hgziwgq] {
    background: var(--incident-surface);
    border: 1px solid var(--incident-border);
    border-radius: var(--pulse-radius-lg, 14px);
    margin-top: 12px;
}

.response-runbook > header[b-ja5hgziwgq] { align-items: center; border-bottom: 1px solid var(--incident-border); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.response-runbook h3[b-ja5hgziwgq] { font-size: .9375rem; margin: 3px 0; }
.response-runbook header p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; line-height: 1.45; margin: 0; max-width: 620px; }
.runbook-progress[b-ja5hgziwgq] { display: grid; gap: 2px; justify-items: end; min-width: 125px; }
.runbook-progress strong[b-ja5hgziwgq] { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.runbook-progress span[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.runbook-progress progress[b-ja5hgziwgq] { accent-color: var(--incident-accent); height: 5px; width: 120px; }

.runbook-empty[b-ja5hgziwgq] { align-items: center; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; padding: 14px; }
.runbook-empty > span[b-ja5hgziwgq] { align-items: center; background: color-mix(in srgb, var(--incident-blue) 10%, var(--incident-soft)); border-radius: 11px; color: var(--incident-blue); display: flex; font-weight: 700; height: 38px; justify-content: center; width: 38px; }
.runbook-empty div[b-ja5hgziwgq] { display: grid; gap: 3px; }
.runbook-empty strong[b-ja5hgziwgq] { font-size: .75rem; }
.runbook-empty p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; margin: 0; }
.runbook-empty a[b-ja5hgziwgq] { color: var(--incident-blue); font-size: .875rem; font-weight: 700; text-decoration: none; }

.playbook-recommendations[b-ja5hgziwgq] { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding: 12px; }
.playbook-recommendations article[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 12px; display: grid; gap: 6px; padding: 12px; }
.recommendation-score[b-ja5hgziwgq] { color: var(--incident-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.playbook-recommendations strong[b-ja5hgziwgq] { font-size: .75rem; }
.playbook-recommendations p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; line-height: 1.4; margin: 0; }
.playbook-recommendations small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.playbook-recommendations button[b-ja5hgziwgq] { align-self: end; background: var(--incident-blue); border: 0; border-radius: 9px; color: #fff; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; min-height: 44px; margin-top: 4px; padding: 7px 10px; }

.runbook-steps[b-ja5hgziwgq] { display: grid; gap: 0; list-style: none; margin: 0; padding: 7px 13px; }
.runbook-steps li[b-ja5hgziwgq] { align-items: start; border-bottom: 1px solid var(--incident-border); display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr); padding: 12px 3px; }
.runbook-steps li:last-child[b-ja5hgziwgq] { border-bottom: 0; }
.runbook-steps li.completed[b-ja5hgziwgq] { opacity: .72; }
.step-check[b-ja5hgziwgq] { align-items: center; background: var(--incident-surface); border: 1px solid color-mix(in srgb, var(--incident-accent) 45%, var(--incident-border)); border-radius: 8px; color: var(--incident-accent); cursor: pointer; display: flex; font: inherit; height: 44px; justify-content: center; margin-top: 2px; padding: 0; width: 44px; }
.completed .step-check[b-ja5hgziwgq] { background: var(--incident-accent); border-color: var(--incident-accent); color: var(--pulse-on-action, #fff); }
.step-check span[b-ja5hgziwgq] { font-size: .8125rem; font-weight: 700; }
.step-check.action-step[b-ja5hgziwgq] { cursor: default; }
.step-copy[b-ja5hgziwgq] { display: grid; gap: 4px; min-width: 0; }
.step-copy > strong[b-ja5hgziwgq] { font-size: .75rem; }
.completed .step-copy > strong[b-ja5hgziwgq] { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--incident-muted) 55%, transparent); }
.step-copy > p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; line-height: 1.45; margin: 0; }
.step-meta[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.step-meta em[b-ja5hgziwgq] { color: var(--incident-blue); font-size: .75rem; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.step-meta b[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-amber) 10%, var(--incident-soft)); border-radius: 99px; color: var(--incident-amber); font-size: .75rem; padding: 3px 6px; text-transform: uppercase; }
.step-meta small[b-ja5hgziwgq],
.completion-meta[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.step-meta small.target-overdue[b-ja5hgziwgq] { color: var(--incident-red); font-weight: 700; }
.suggestion-actions[b-ja5hgziwgq] { display: inline-flex; gap: 6px; }
.suggestion-dismiss[b-ja5hgziwgq] { background: transparent !important; border-color: var(--incident-border) !important; color: var(--incident-muted) !important; }
.step-note-input[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-ink); font: inherit; font-size: .875rem; max-width: 30rem; padding: 6px 8px; }
.step-action-controls[b-ja5hgziwgq] { align-items: end; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.step-action-controls label[b-ja5hgziwgq] { display: grid; gap: 3px; }
.step-action-controls label span[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.step-action-controls select[b-ja5hgziwgq] { background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 8px; color: var(--incident-ink); font: inherit; max-width: 24rem; padding: 6px 8px; }
.step-action-controls button[b-ja5hgziwgq] { background: var(--incident-accent); border: 0; border-radius: 8px; color: var(--pulse-on-action, #fff); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; padding: 8px 11px; }
.step-action-controls button:disabled[b-ja5hgziwgq] { cursor: not-allowed; opacity: .55; }
.action-receipt[b-ja5hgziwgq] { border-left: 3px solid var(--incident-border); color: var(--incident-muted); display: block; line-height: 1.45; margin-top: 4px; padding-left: 8px; }
.action-receipt.delivered[b-ja5hgziwgq] { border-left-color: var(--incident-accent); }
.action-receipt.queued[b-ja5hgziwgq], .action-receipt.dispatching[b-ja5hgziwgq] { border-left-color: var(--incident-amber); }
.action-receipt.failed[b-ja5hgziwgq], .action-receipt.refused[b-ja5hgziwgq], .action-receipt.unknown[b-ja5hgziwgq] { border-left-color: var(--incident-red); }
.fact-tags .tag-chips[b-ja5hgziwgq] { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: 999px; color: var(--incident-muted); font-size: .75rem; font-weight: 700; padding: 3px 8px; }

.additional-playbooks[b-ja5hgziwgq] { border-top: 1px solid var(--incident-border); padding: 10px 14px 13px; }
.additional-playbooks summary[b-ja5hgziwgq] { color: var(--incident-blue); cursor: pointer; font-size: .875rem; font-weight: 700; }
.additional-playbooks > div[b-ja5hgziwgq] { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; }
.additional-playbooks button[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: 9px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 2px; min-height: 46px; padding: 8px 10px; text-align: left; }
.additional-playbooks button strong[b-ja5hgziwgq] { font-size: .875rem; }
.additional-playbooks button span[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }

.response-console[b-ja5hgziwgq] { background: color-mix(in srgb, var(--incident-accent) 4%, var(--incident-surface)); border: 1px solid var(--incident-border); border-radius: 14px; margin-top: 16px; }
.response-console summary[b-ja5hgziwgq] { cursor: pointer; font-size: .875rem; font-weight: 700; padding: 13px 15px; }
.response-grid[b-ja5hgziwgq] { border-top: 1px solid var(--incident-border); display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; }
.response-grid :is(label, input, select, textarea)[b-ja5hgziwgq] { min-width: 0; }
.response-grid .wide[b-ja5hgziwgq] { grid-column: span 3; }
.response-grid textarea[b-ja5hgziwgq] { min-height: 68px; resize: vertical; }
.response-grid button[b-ja5hgziwgq] { align-self: end; min-height: 44px; }

.case-columns[b-ja5hgziwgq] { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 12px; }
.evidence-panel[b-ja5hgziwgq],
.timeline-panel[b-ja5hgziwgq] { border: 1px solid var(--incident-border); border-radius: 14px; min-width: 0; padding: 14px; }
.evidence-list[b-ja5hgziwgq] { display: grid; gap: 9px; margin-top: 12px; }
.evidence-list article[b-ja5hgziwgq] { background: var(--incident-soft); border: 1px solid var(--incident-border); border-radius: var(--pulse-radius-sm, 8px); display: grid; gap: 11px; grid-template-columns: 100px minmax(0, 1fr); padding: 10px; }
.evidence-image[b-ja5hgziwgq] { background: #122126; border-radius: 8px; display: block; height: 78px; overflow: hidden; }
.evidence-image img[b-ja5hgziwgq] { height: 100%; object-fit: cover; width: 100%; }
.evidence-image.placeholder[b-ja5hgziwgq] { align-items: center; color: #91a2a9; display: flex; font-size: .75rem; justify-content: center; }
.evidence-list article > div[b-ja5hgziwgq] { display: grid; gap: 3px; min-width: 0; }
.evidence-list span[b-ja5hgziwgq] { color: var(--incident-red); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.evidence-list strong[b-ja5hgziwgq] { font-size: .75rem; }
.evidence-list p[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.evidence-list small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; }
.evidence-actions[b-ja5hgziwgq] { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.evidence-actions a[b-ja5hgziwgq] { align-items: center; color: var(--incident-blue); display: inline-flex; font-size: .75rem; font-weight: 700; min-height: 44px; text-decoration: none; }
.evidence-actions a:hover[b-ja5hgziwgq] { text-decoration: underline; }

.case-timeline[b-ja5hgziwgq] { display: grid; gap: 0; list-style: none; margin: 12px 0 0; padding: 0; }
.case-timeline li[b-ja5hgziwgq] { display: grid; gap: 10px; grid-template-columns: 12px minmax(0, 1fr); padding-bottom: 14px; position: relative; }
.case-timeline li:not(:last-child)[b-ja5hgziwgq]::before { background: var(--incident-border); content: ""; height: calc(100% - 5px); left: 5px; position: absolute; top: 12px; width: 1px; }
.timeline-dot[b-ja5hgziwgq] { background: var(--incident-accent); border: 3px solid var(--incident-surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--incident-border); height: 11px; margin-top: 3px; position: relative; width: 11px; z-index: 1; }
.timeline-dot.automationexecuted[b-ja5hgziwgq] { background: var(--incident-blue); }
.timeline-dot.statuschanged[b-ja5hgziwgq] { background: var(--incident-amber); }
/* A field action moved something physical at the site; its dot carries the
   warning tone the send button carried. */
.timeline-dot.fieldactionsent[b-ja5hgziwgq] { background: var(--incident-amber); }
.case-timeline li > div[b-ja5hgziwgq] { min-width: 0; }
.case-timeline li > div > span[b-ja5hgziwgq] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 3px 8px; justify-content: space-between; }
.case-timeline strong[b-ja5hgziwgq] { font-size: .8125rem; }
.case-timeline time[b-ja5hgziwgq],
.case-timeline small[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; white-space: nowrap; }
.case-timeline p[b-ja5hgziwgq] { color: var(--incident-ink); font-size: .8125rem; line-height: 1.5; margin: 4px 0; overflow-wrap: anywhere; }

.incident-empty[b-ja5hgziwgq] { color: var(--incident-muted); display: grid; gap: 5px; justify-items: center; padding: 34px 18px; text-align: center; }
.incident-empty strong[b-ja5hgziwgq] { color: var(--incident-ink); }
.incident-empty p[b-ja5hgziwgq] { font-size: .75rem; margin: 0; max-width: 340px; }
.empty-action[b-ja5hgziwgq] { align-items: center; background: var(--incident-surface); border: 1px solid var(--incident-border); border-radius: 10px; color: var(--incident-accent); display: inline-flex; font-size: .875rem; font-weight: 700; justify-content: center; margin-top: 7px; min-height: 44px; padding: 8px 13px; text-decoration: none; }
.empty-action:hover[b-ja5hgziwgq] { border-color: var(--incident-accent); }
.detail-empty[b-ja5hgziwgq] { min-height: 310px; place-content: center; }
.empty-radar[b-ja5hgziwgq] { border: 1px solid color-mix(in srgb, var(--incident-accent) 35%, transparent); border-radius: 50%; height: 55px; position: relative; width: 55px; }
.empty-radar[b-ja5hgziwgq]::before,
.empty-radar[b-ja5hgziwgq]::after { border: 1px solid color-mix(in srgb, var(--incident-accent) 25%, transparent); border-radius: 50%; content: ""; inset: 9px; position: absolute; }
.empty-radar[b-ja5hgziwgq]::after { background: var(--incident-accent); border: 0; height: 7px; inset: 23px; width: 7px; }

.transition-confirm[b-ja5hgziwgq] {
    align-items: center;
    background: color-mix(in srgb, var(--pulse-navy-950, #07111f) 58%, transparent);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 18px;
    position: fixed;
    z-index: 1100;
}
.transition-confirm > div[b-ja5hgziwgq] {
    background: var(--incident-surface);
    border: 1px solid var(--incident-border);
    border-radius: 16px;
    box-shadow: var(--pulse-shadow-lg);
    display: grid;
    gap: 12px;
    max-height: calc(100dvh - 36px);
    max-width: 560px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    scrollbar-gutter: stable;
    width: min(100%, 560px);
}
.transition-confirm h3[b-ja5hgziwgq],
.transition-confirm p[b-ja5hgziwgq] { margin: 0; }
.transition-confirm p[b-ja5hgziwgq] { color: var(--incident-muted); line-height: 1.5; }
.transition-confirm label[b-ja5hgziwgq] { display: grid; font-size: .8rem; font-weight: 700; gap: 6px; }
.transition-confirm textarea[b-ja5hgziwgq] { min-height: 110px; resize: vertical; }
.transition-error[b-ja5hgziwgq] { background: var(--pulse-danger-soft, #fff1f2); border: 1px solid var(--pulse-danger-border, #fecdd3); border-radius: 10px; color: var(--pulse-danger-text, #b91c1c); display: grid; font-size: .875rem; gap: 5px; line-height: 1.5; overflow-wrap: anywhere; padding: 11px 13px; }
.transition-confirm :is(textarea, button):focus-visible[b-ja5hgziwgq] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 3px; }
.transition-actions[b-ja5hgziwgq] { display: flex; gap: 9px; justify-content: flex-end; }
.transition-actions button[b-ja5hgziwgq] { min-height: 44px; }
.reopen-command[b-ja5hgziwgq] { border-color: var(--incident-amber) !important; }

html[data-theme="dark"] .incidents-page[b-ja5hgziwgq] {
    --incident-accent: var(--pulse-accent);
    --incident-blue: var(--pulse-info-strong);
    --incident-amber: var(--pulse-warning-text);
    --incident-red: var(--pulse-danger-text);
}
html[data-theme="dark"] .incidents-page :is(.primary-button, .case-command-bar .primary, .intake-icon, .completed .step-check, .playbook-recommendations button)[b-ja5hgziwgq] { color: var(--pulse-navy-950); }

@media (max-width: 1180px) {
    .alarm-intake[b-ja5hgziwgq] { grid-template-columns: auto 1fr; }
    .intake-fields[b-ja5hgziwgq] { grid-column: 1 / -1; }
    .intake-existing[b-ja5hgziwgq] { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .incident-workspace[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .incident-index[b-ja5hgziwgq] { position: static; }
    .incident-list[b-ja5hgziwgq] { max-height: 380px; }
}

@media (max-width: 680px) {
    .incidents-page[b-ja5hgziwgq] { gap: var(--pulse-workspace-gap, 13px); padding: 12px 10px 28px; }
    .incidents-hero[b-ja5hgziwgq] { align-items: center; border-radius: var(--pulse-radius-lg, 14px); gap: 6px 12px; padding: 0; }
    .hero-actions[b-ja5hgziwgq] { grid-template-columns: minmax(0, 1fr) auto; }
    .incident-metrics[b-ja5hgziwgq] { gap: 4px 14px; padding: 4px 10px; }
    .alarm-intake[b-ja5hgziwgq] { align-items: start; border-radius: 14px; grid-template-columns: auto 1fr; padding: 13px; }
    .intake-fields[b-ja5hgziwgq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intake-existing[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .link-target-search input[b-ja5hgziwgq],
    .link-target-search button[b-ja5hgziwgq],
    .incident-query input[b-ja5hgziwgq],
    .incident-query button[b-ja5hgziwgq],
    .incident-pager button[b-ja5hgziwgq] { min-height: 44px; }
    .incident-pager button[b-ja5hgziwgq] { height: 44px; width: 44px; }
    .intake-fields .intake-title[b-ja5hgziwgq],
    .intake-fields .primary-button[b-ja5hgziwgq] { grid-column: 1 / -1; }
    .suggestion-list[b-ja5hgziwgq] { display: flex; margin-inline: -2px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
    .suggestion-list article[b-ja5hgziwgq] { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
    .suggestion-pager[b-ja5hgziwgq] { align-items: stretch; flex-direction: column; }
    .suggestion-pager > div[b-ja5hgziwgq] { justify-content: space-between; }
    .incident-index[b-ja5hgziwgq],
    .incident-detail[b-ja5hgziwgq] { border-radius: 14px; }
    .incident-detail[b-ja5hgziwgq] { padding: 14px; }
    .detail-header[b-ja5hgziwgq] { flex-direction: column; gap: 11px; }
    .detail-header > div:first-child[b-ja5hgziwgq] { flex-basis: auto; }
    .detail-badges[b-ja5hgziwgq] { justify-content: flex-start; }
    .case-primary-actions > button[b-ja5hgziwgq],
    .case-navigation-actions > *[b-ja5hgziwgq] { flex: 1 1 calc(50% - 5px); }
    .case-utilities[b-ja5hgziwgq] { align-items: stretch; flex-direction: column; }
    .case-command-bar a[b-ja5hgziwgq],
    .case-command-bar button[b-ja5hgziwgq],
    .case-primary-actions input[b-ja5hgziwgq] { min-height: var(--pulse-control-min-height, 44px); }
    .response-grid[b-ja5hgziwgq] { grid-template-columns: minmax(0, 1fr) auto; }
    .response-grid .wide[b-ja5hgziwgq] { grid-column: 1 / -1; }
    .case-columns[b-ja5hgziwgq] { margin-top: 12px; }
    .response-runbook > header[b-ja5hgziwgq] { align-items: flex-start; }
    .playbook-recommendations[b-ja5hgziwgq] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .playbook-recommendations article[b-ja5hgziwgq] { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }
    .additional-playbooks > div[b-ja5hgziwgq] { grid-template-columns: 1fr; }
}

.immutable-link-confirmation[b-ja5hgziwgq],
.physical-confirmation[b-ja5hgziwgq] { background: color-mix(in srgb, var(--pulse-warning-surface) 72%, var(--pulse-surface)); border: 1px solid var(--pulse-warning-border); border-radius: 12px; display: grid; gap: 10px; padding: 14px; }
.immutable-link-confirmation p[b-ja5hgziwgq],
.physical-confirmation p[b-ja5hgziwgq] { margin: 0; }
.immutable-link-confirmation > div[b-ja5hgziwgq],
.physical-confirmation > div[b-ja5hgziwgq] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.physical-confirmation dl[b-ja5hgziwgq] { display: grid; gap: 7px; margin: 0; }
.physical-confirmation dl div[b-ja5hgziwgq] { display: grid; gap: 6px; grid-template-columns: minmax(130px, .3fr) 1fr; }
.physical-confirmation dt[b-ja5hgziwgq] { color: var(--incident-muted); font-size: .75rem; font-weight: 700; }
.physical-confirmation dd[b-ja5hgziwgq] { margin: 0; overflow-wrap: anywhere; }
.reviewed-command-summary[b-ja5hgziwgq] { background: var(--pulse-surface-soft); border: 1px solid var(--pulse-border); border-radius: 9px; display: grid; gap: 3px; padding: 9px; }
.checklist-pager[b-ja5hgziwgq] { align-items: center; display: flex; gap: 10px; justify-content: space-between; padding-top: 12px; }
.checklist-pager button[b-ja5hgziwgq] { min-height: 44px; }
.export-error[b-ja5hgziwgq] { align-items: center; color: var(--pulse-danger-text); display: inline-flex; flex-wrap: wrap; gap: 6px; }
.escalation-disclosure[b-ja5hgziwgq] { color: var(--incident-muted); }

@media (max-width: 430px) {
    .incidents-hero[b-ja5hgziwgq] { align-items: stretch; flex-direction: column; }
    .incident-metrics small[b-ja5hgziwgq] { font-size: .75rem; }
    .metric-mark[b-ja5hgziwgq] { display: none; }
    .intake-fields[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .intake-fields > *[b-ja5hgziwgq] { grid-column: 1 !important; }
    .intake-existing[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .incident-query[b-ja5hgziwgq] { grid-template-columns: minmax(0, 1fr) auto; }
    .incident-query .clear[b-ja5hgziwgq] { grid-column: 1 / -1; }
    .incident-pager[b-ja5hgziwgq] { align-items: stretch; flex-direction: column; }
    .incident-pager > div[b-ja5hgziwgq] { justify-content: space-between; }
    .case-facts[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .case-primary-actions > button[b-ja5hgziwgq],
    .case-navigation-actions > *[b-ja5hgziwgq] { flex-basis: 100%; }
    .transition-confirm[b-ja5hgziwgq] { padding: 10px; }
    .transition-confirm > div[b-ja5hgziwgq] { max-height: calc(100dvh - 20px); padding: 17px; }
    .transition-actions[b-ja5hgziwgq] { align-items: stretch; flex-direction: column-reverse; }
    .response-grid[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .response-grid > *[b-ja5hgziwgq] { grid-column: 1 !important; }
    .evidence-list article[b-ja5hgziwgq] { grid-template-columns: 78px minmax(0, 1fr); }
    .evidence-image[b-ja5hgziwgq] { height: 68px; }
    .response-runbook > header[b-ja5hgziwgq] { display: grid; }
    .runbook-progress[b-ja5hgziwgq] { justify-items: start; width: 100%; }
    .runbook-progress progress[b-ja5hgziwgq] { width: 100%; }
    .runbook-empty[b-ja5hgziwgq] { grid-template-columns: auto 1fr; }
    .runbook-empty a[b-ja5hgziwgq] { grid-column: 1 / -1; min-height: 44px; padding-left: 50px; }
    .physical-confirmation dl div[b-ja5hgziwgq] { grid-template-columns: 1fr; }
    .checklist-pager[b-ja5hgziwgq] { align-items: stretch; flex-direction: column; }
}

@media (pointer: coarse) {
    .case-command-bar a[b-ja5hgziwgq],
    .case-command-bar button[b-ja5hgziwgq],
    .case-primary-actions input[b-ja5hgziwgq],
    .transition-actions button[b-ja5hgziwgq],
    .link-target-search input[b-ja5hgziwgq],
    .link-target-search button[b-ja5hgziwgq],
    .incident-query input[b-ja5hgziwgq],
    .incident-query button[b-ja5hgziwgq],
    .incident-pager button[b-ja5hgziwgq] { min-height: 44px; }
    .suggestion-pager button[b-ja5hgziwgq] { height: 44px; min-height: 44px; width: 44px; }
    .incident-pager button[b-ja5hgziwgq] { height: 44px; width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .incidents-page *[b-ja5hgziwgq], .incidents-page *[b-ja5hgziwgq]::before, .incidents-page *[b-ja5hgziwgq]::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .live-pulse[b-ja5hgziwgq] { animation: none; }
}
/* /Components/Pages/Integra.razor.rz.scp.css */
/* The Integra bridge.

   The page is drawn as the chain it configures - Integra, the mapping, then
   DetecNext - because the only question anyone opens it with is "which of the
   three is broken". Everything else on the screen is the answer to that
   question, in the order you would fix it.

   CSS isolation limits selector reach, but the product's semantic custom
   properties still inherit into the component. Keep this page on that shared
   palette so light, dark and accessibility changes apply everywhere. */

.integra-page[b-2t0ife5f8s] {
    --itg-surface: var(--pulse-surface);
    --itg-soft: var(--pulse-surface-soft);
    --itg-border: var(--pulse-border);
    --itg-control-border: var(--pulse-border-strong);
    --itg-ink: var(--pulse-text);
    --itg-muted: var(--pulse-muted);
    --itg-accent: var(--pulse-accent);
    --itg-good: var(--pulse-success-text);
    --itg-bad: var(--pulse-danger-text);
    --itg-warn: var(--pulse-warning-text);
    --itg-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: integra-workspace / inline-size;
    color: var(--itg-ink);
    line-height: 1.45;
    min-width: 0;
}

.integra-page[aria-busy="true"][b-2t0ife5f8s] { cursor: progress; }

.integra-page button[b-2t0ife5f8s] { font-family: inherit; font-size: .875rem; cursor: pointer; }
.integra-page button:disabled[b-2t0ife5f8s] { cursor: not-allowed; opacity: .55; }

.integra-page :is(button, input, select):focus-visible[b-2t0ife5f8s] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* ---- the chain ------------------------------------------------------- */

.itg-chain[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .4rem;
    align-items: stretch;
    padding: .85rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--pulse-surface);
    box-shadow: none;
}

.itg-link[b-2t0ife5f8s] {
    display: grid;
    align-content: start;
    gap: .18rem;
    min-width: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--itg-border);
    border-left: 3px solid var(--itg-muted);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--itg-soft);
}

.itg-link-role[b-2t0ife5f8s] {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--itg-muted);
}

.itg-link-state[b-2t0ife5f8s] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.itg-link-detail[b-2t0ife5f8s] {
    font-size: .8rem;
    line-height: 1.45;
    color: var(--itg-muted);
    overflow-wrap: anywhere;
}

.itg-link.is-good[b-2t0ife5f8s] { border-left-color: var(--itg-good); }
.itg-link.is-good .itg-link-state[b-2t0ife5f8s] { color: var(--itg-good); }
.itg-link.is-broken[b-2t0ife5f8s] { border-left-color: var(--itg-bad); }
.itg-link.is-broken .itg-link-state[b-2t0ife5f8s] { color: var(--itg-bad); }
.itg-link.is-working[b-2t0ife5f8s] { border-left-color: var(--itg-warn); }
.itg-link.is-working .itg-link-state[b-2t0ife5f8s] { color: var(--itg-warn); }
.itg-link.is-off[b-2t0ife5f8s] { border-left-color: var(--itg-border); }
.itg-link.is-off .itg-link-state[b-2t0ife5f8s] { color: var(--itg-muted); }

/* The arrows are the only decoration on the page, and they carry a fact: an
   arrow only lights up when events can actually cross it. */
.itg-arrow[b-2t0ife5f8s] {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .25rem;
    padding: 0 .1rem;
    color: var(--itg-border);
}

.itg-arrow svg[b-2t0ife5f8s] {
    width: 2.6rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.itg-arrow.is-live[b-2t0ife5f8s] { color: var(--itg-good); }

.itg-arrow-count[b-2t0ife5f8s] {
    font-family: var(--itg-mono);
    font-size: .75rem;
    color: var(--itg-muted);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .itg-chain[b-2t0ife5f8s] { grid-template-columns: minmax(0, 1fr); }
    .itg-arrow[b-2t0ife5f8s] { padding: .3rem 0; }
    .itg-arrow svg[b-2t0ife5f8s] {
        margin: .8rem 0;
        transform: rotate(90deg);
    }
}

/* The appliance strip reads as a row of tabs because that is what it is: a
   site with two panels has two of everything below it, and the selection is
   the first thing the rest of the page depends on. */
.itg-appliances[b-2t0ife5f8s] {
    display: grid;
    gap: .55rem;
}

.itg-appliance-list[b-2t0ife5f8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.itg-appliance-list > li[b-2t0ife5f8s] {
    display: flex;
    align-items: center;
    gap: .15rem;
    min-width: 0;
    max-width: 100%;
}

.itg-appliance[b-2t0ife5f8s] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--itg-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-height: var(--pulse-control-min-height, 44px);
    max-width: 100%;
    flex-wrap: wrap;
}

.itg-appliance:hover:not(:disabled)[b-2t0ife5f8s] {
    border-color: var(--pulse-accent-border, var(--itg-border));
}

/* Solid, not soft: which panel you are editing decides which door a mapping
   opens, so the selection must be unmistakable at a glance. */
.itg-appliance.is-selected[b-2t0ife5f8s] {
    border-color: var(--pulse-accent, currentColor);
    box-shadow: inset 0 0 0 1px var(--pulse-accent, currentColor);
}

.itg-appliance-icon[b-2t0ife5f8s] {
    font-size: .78rem;
    opacity: .7;
}

.itg-appliance-name[b-2t0ife5f8s] {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.itg-appliance-primary[b-2t0ife5f8s] {
    padding: .05rem .35rem;
    border-radius: var(--pulse-radius-sm, 8px);
    /* --itg-surface-muted is not defined anywhere; the fallback must be a real
       surface so the badge never renders as bare text on the button. */
    background: var(--itg-surface-muted, var(--itg-soft));
    font-size: .75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .75;
}

.itg-appliance-form[b-2t0ife5f8s] {
    padding: .75rem .85rem;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--itg-surface);
}

/* Two compact lanes make both directions, their health and their ownership
   visible without a wide process diagram. */
.itg-directions[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.itg-direction[b-2t0ife5f8s] {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--itg-surface);
    box-shadow: none;
}

.itg-direction > header[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    align-items: center;
}

.itg-direction-kicker[b-2t0ife5f8s] {
    grid-column: 1;
    color: var(--itg-muted);
    font-size: .75rem;
    font-weight: 600;
}

.itg-direction h2[b-2t0ife5f8s] {
    grid-column: 1;
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.015em;
    line-height: 1.3;
    font-weight: 700;
}

.itg-direction > p[b-2t0ife5f8s] {
    min-height: 2.15rem;
    margin: .4rem 0 .55rem;
    color: var(--itg-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.itg-state-pill[b-2t0ife5f8s] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: .25rem .5rem;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-muted);
    background: var(--itg-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.itg-state-pill.is-good[b-2t0ife5f8s] { color: var(--itg-good); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.itg-state-pill.is-broken[b-2t0ife5f8s] { color: var(--itg-bad); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.itg-state-pill.is-working[b-2t0ife5f8s] { color: var(--itg-warn); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }

/* Read-only is a mode the operator chose, not a state the bridge is in, so it
   wears an outline instead of a filled state colour. */
.itg-state-pill.is-off[b-2t0ife5f8s] { border-style: dashed; background: transparent; }

/* One glance answers "is anything wrong": counters read value-first in the
   data face, problems carry their tint only while they are non-zero, and a
   zero recedes to a whisper instead of standing shoulder to shoulder with the
   number that needs acting on. */
.itg-metrics[b-2t0ife5f8s] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.itg-metric[b-2t0ife5f8s] {
    display: grid;
    justify-items: start;
    gap: .12rem;
    /* Wide enough that a counter rolling into a new digit count does not
       reflow the whole strip once a second. */
    min-width: 6.25rem;
    padding: .42rem .55rem .38rem;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--itg-surface);
}

.itg-metric dd[b-2t0ife5f8s] {
    order: -1;
    margin: 0;
    font-family: var(--itg-mono);
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.itg-metric dt[b-2t0ife5f8s] {
    color: var(--itg-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.itg-metric.is-zero[b-2t0ife5f8s] { border-color: transparent; background: var(--itg-soft); }
.itg-metric.is-zero dd[b-2t0ife5f8s] { color: var(--itg-muted); font-weight: 600; }
.itg-metric.is-good dd[b-2t0ife5f8s] { color: var(--itg-good); }
.itg-metric.is-warn[b-2t0ife5f8s] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.itg-metric.is-warn dd[b-2t0ife5f8s] { color: var(--itg-warn); }
.itg-metric.is-bad[b-2t0ife5f8s] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.itg-metric.is-bad dd[b-2t0ife5f8s] { color: var(--itg-bad); }

/* ---- notices --------------------------------------------------------- */

.itg-alert[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .8rem;
    font-weight: 600;
}

.itg-alert.error[b-2t0ife5f8s] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* The blocked-deliveries list opens inside the alert's `auto` grid track;
   without a full-width home of its own it expanded past the page and painted
   over the appliance strip below. */
.itg-alert > details[b-2t0ife5f8s] {
    grid-column: 1 / -1;
    min-width: 0;
}

.itg-alert summary[b-2t0ife5f8s] { cursor: pointer; }

.itg-alert ul[b-2t0ife5f8s] {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    overflow-wrap: anywhere;
}

/* ---- panels ---------------------------------------------------------- */

.itg-workspace[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}

.itg-mappings[b-2t0ife5f8s] { display: grid; gap: .7rem; align-content: start; min-width: 0; }

/* The inbound mapping and source catalog can share a row on a large desktop;
   physical-action rules retain the full mapping column for their evidence. */
@container integra-workspace (min-width: 88rem) {
    .itg-mappings[b-2t0ife5f8s] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .itg-mappings > .itg-clients[b-2t0ife5f8s],
    .itg-mappings > .itg-outbound[b-2t0ife5f8s] { grid-column: 1 / -1; }
}

@container integra-workspace (max-width: 60rem) {
    .itg-workspace[b-2t0ife5f8s] { grid-template-columns: minmax(0, 1fr); }
}

.itg-panel[b-2t0ife5f8s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--itg-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--itg-surface);
    box-shadow: none;
    overflow: visible;
}

.itg-panel-head[b-2t0ife5f8s] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--itg-border);
    background: var(--itg-surface);
    border-radius: var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px) 0 0;
    flex-wrap: wrap;
}

.itg-panel-head h2[b-2t0ife5f8s] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.itg-count[b-2t0ife5f8s] {
    font-family: var(--itg-mono);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--itg-muted);
    white-space: nowrap;
}

.itg-switch[b-2t0ife5f8s] {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.25rem;
    padding: .2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--itg-muted);
    cursor: pointer;
}

.itg-switch input[b-2t0ife5f8s] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--itg-accent);
}

.itg-hint[b-2t0ife5f8s] {
    margin: 0;
    padding: 0 .85rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--itg-muted);
}

.itg-panel > .itg-hint:first-of-type[b-2t0ife5f8s] { padding-top: .6rem; }

/* ---- forms ----------------------------------------------------------- */

.itg-form[b-2t0ife5f8s] {
    display: grid;
    gap: .7rem;
    padding: .75rem .85rem .9rem;
}

.itg-form label[b-2t0ife5f8s] {
    display: grid;
    gap: .3rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--itg-muted);
}

/* Equal columns, aligned from the top: the 2:1 split stretched the username
   box to the height of the password field plus its saved-password note, which
   read as a broken form rather than a deliberate one. */
.itg-field-pair[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    align-items: start;
}

.itg-form small[b-2t0ife5f8s] {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--itg-muted);
}

.itg-field-trio[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr);
    gap: .5rem;
}

.itg-scheme select[b-2t0ife5f8s] { min-width: 5rem; }

.integra-page select[b-2t0ife5f8s],
.integra-page input[type="search"][b-2t0ife5f8s],
.integra-page input[type="text"][b-2t0ife5f8s],
.integra-page input[type="password"][b-2t0ife5f8s],
.integra-page input:not([type])[b-2t0ife5f8s] {
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    box-sizing: border-box;
    padding: .48rem .65rem;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-ink);
    background: var(--itg-surface);
    font-family: inherit;
    font-size: .875rem;
}

.itg-form .itg-hint[b-2t0ife5f8s] { padding: 0; margin-top: -.25rem; }

.itg-actions[b-2t0ife5f8s] { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }

.itg-actions button[b-2t0ife5f8s] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .48rem .85rem;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-ink);
    background: var(--itg-surface);
    font-size: .875rem;
    font-weight: 700;
}

.itg-actions button:hover:not(:disabled)[b-2t0ife5f8s] { border-color: var(--itg-accent); }

.itg-actions .itg-primary-button[b-2t0ife5f8s] {
    border-color: transparent;
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.itg-primary-button:hover:not(:disabled)[b-2t0ife5f8s] { filter: none; background: var(--pulse-action-hover); }

.itg-probe[b-2t0ife5f8s] {
    margin: .1rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.itg-probe.ok[b-2t0ife5f8s] { color: var(--itg-good); }
.itg-probe.bad[b-2t0ife5f8s] { color: var(--itg-bad); }

/* ---- mapping rows ---------------------------------------------------- */

.itg-mapping-search[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .75rem;
    align-items: end;
    padding: .65rem .85rem 0;
}

.itg-mapping-search label[b-2t0ife5f8s] {
    display: grid;
    gap: .25rem;
    min-width: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--itg-muted);
}

.itg-mapping-search small[b-2t0ife5f8s] {
    padding-bottom: .55rem;
    color: var(--itg-muted);
    font-size: .75rem;
    line-height: 1.45;
    text-align: right;
}

.itg-mapping-search small span[b-2t0ife5f8s] { display: block; }

.itg-rows[b-2t0ife5f8s] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .85rem;
    list-style: none;
}

.itg-rows li[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: .35rem;
    align-items: center;
}

.itg-rows-arrow[b-2t0ife5f8s] { color: var(--itg-muted); font-size: .9rem; }

.itg-rows .itg-new[b-2t0ife5f8s] { padding-top: .35rem; border-top: 1px dashed var(--itg-border); }

.itg-tiny-button[b-2t0ife5f8s] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--itg-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.itg-tiny-button:hover:not(:disabled)[b-2t0ife5f8s] {
    color: var(--itg-accent);
    background: var(--itg-soft);
}

.itg-alert .itg-tiny-button[b-2t0ife5f8s] { color: inherit; }

.itg-rows .itg-tiny-button:hover:not(:disabled)[b-2t0ife5f8s] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.itg-add-button[b-2t0ife5f8s] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .75rem;
    border: 1px solid var(--itg-accent);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-accent);
    background: var(--itg-surface);
    font-size: .875rem;
    font-weight: 700;
}

.itg-add-button:hover:not(:disabled)[b-2t0ife5f8s] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

/* ---- browsing Integra ------------------------------------------------ */

.itg-browse[b-2t0ife5f8s] {
    display: grid;
    gap: .45rem;
    padding: .7rem .85rem .9rem;
    border-top: 1px solid var(--itg-border);
}

.itg-browse > button[b-2t0ife5f8s] {
    justify-self: start;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .45rem .8rem;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-ink);
    background: var(--itg-soft);
    font-size: .875rem;
    font-weight: 700;
}

.itg-browse > button:hover:not(:disabled)[b-2t0ife5f8s] { border-color: var(--itg-accent); }

.itg-objects[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .3rem;
    /* Deliberately no max-height: a definite height turns the grid into a
       fit-to-box that squeezes rows instead of scrolling them. The catalog
       list learned this the hard way and had to neutralise the cap; removing
       it here keeps the next consumer from inheriting the squeeze bug. */
    margin: 0;
    padding: 0;
    list-style: none;
}

.itg-objects button[b-2t0ife5f8s] {
    display: grid;
    gap: .3rem;
    align-content: start;
    width: 100%;
    min-height: 2.75rem;
    padding: .52rem .6rem .5rem;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-ink);
    background: var(--itg-surface);
    text-align: left;
}

.itg-objects button:hover:not(:disabled)[b-2t0ife5f8s] { border-color: var(--itg-accent); background: var(--itg-soft); }

/* Card anatomy: what kind of thing it is and its wire ID first, then the
   name people actually recognize, then how much it can do. */
.itg-object-head[b-2t0ife5f8s] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.itg-object-type[b-2t0ife5f8s] {
    padding: .08rem .44rem;
    border: 1px solid color-mix(in srgb, var(--itg-accent) 40%, transparent);
    border-radius: 999px;
    color: var(--itg-accent);
    background: color-mix(in srgb, var(--itg-accent) 9%, transparent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.itg-object-id[b-2t0ife5f8s] {
    margin-left: auto;
    color: var(--itg-muted);
    font-family: var(--itg-mono);
    font-size: .75rem;
    font-weight: 700;
}

/* Says which catalog objects the inbound mapping already covers, so "find the
   unmapped ones" stops being manual cross-referencing on a 500-object panel. */
.itg-object-mapped[b-2t0ife5f8s] {
    flex: none;
    padding: .08rem .38rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: 999px;
    color: var(--itg-good);
    background: var(--pulse-success-soft);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Every line is single-line and ellipsized. Wrapped text feeds the grid's
   circular intrinsic row sizing — rows measured before the final column
   width under-count wrapped lines, and the card bottom (actions, status)
   silently clips. Fixed-height lines make every card the same shape; the
   button tooltip and the search box carry the full name. */
.itg-object-name[b-2t0ife5f8s] {
    overflow: hidden;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.itg-object-actions[b-2t0ife5f8s] {
    overflow: hidden;
    color: var(--itg-muted);
    font-family: var(--itg-mono);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- durable catalog and reverse rules ------------------------------ */

.itg-panel-head > div[b-2t0ife5f8s] { min-width: 0; }
.itg-panel-head > div .itg-count[b-2t0ife5f8s] { display: block; margin-top: .08rem; }

.itg-panel-head > button[b-2t0ife5f8s],
.itg-rule-form > button[b-2t0ife5f8s] {
    min-height: 2.35rem;
    padding: .42rem .72rem;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--itg-ink);
    background: var(--itg-surface);
    font-size: .875rem;
    font-weight: 700;
}

.itg-rule-form > .itg-primary-button[b-2t0ife5f8s] {
    border-color: transparent;
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.itg-catalog-tools[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
    gap: .45rem;
    padding: .6rem .85rem .45rem;
}

.itg-catalog-list[b-2t0ife5f8s] {
    /* No height cap anywhere in this list: the search box, the type filter and
       the 160-card display limit already bound it; the page scrolls honestly. */
    grid-auto-rows: max-content;
    padding: 0 .85rem;
    align-items: stretch;
}

/* One card, one anatomy: name and identity in the pressable area, the live
   status pinned as a footer inside the same border. The status used to hang
   below a separately outlined button, orphaned in the grid gutter, which made
   every row ragged and the status look unrelated to its object. */
.itg-catalog-list li[b-2t0ife5f8s] {
    /* Column flex, not a nested grid: an outer auto-fill grid measuring a
       child grid's 1fr row under-counts it, and the card bottom (the status
       footer) silently clipped. Flex sums its children honestly, and since
       every card line is fixed-height the cards come out identical anyway. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--itg-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--itg-surface);
    overflow: hidden;
}

.itg-catalog-list li > button[b-2t0ife5f8s] {
    flex: 1 1 auto;
    min-height: auto;
    border: 0;
    border-radius: 0;
    align-content: start;
}

.itg-catalog-list .itg-object-status[b-2t0ife5f8s] { flex: none; }

.itg-catalog-list li:hover:not(:has(button:disabled))[b-2t0ife5f8s] { border-color: var(--itg-accent); }
.itg-catalog-list li:hover:not(:has(button:disabled)) > button[b-2t0ife5f8s] { background: var(--itg-soft); }

.itg-catalog-list li.is-missing[b-2t0ife5f8s] { opacity: .62; }
.itg-object-status[b-2t0ife5f8s] {
    overflow: hidden;
    margin: 0 .45rem;
    padding: .3rem .15rem .38rem;
    border-top: 1px dashed var(--itg-border);
    color: var(--itg-muted);
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.itg-object-status.is-gone[b-2t0ife5f8s] { color: var(--itg-warn); }

.itg-catalog-state[b-2t0ife5f8s] {
    margin: .55rem .85rem .75rem;
    color: var(--itg-muted);
    font-size: .75rem;
}

.itg-empty[b-2t0ife5f8s] {
    margin: .7rem .85rem;
    padding: .7rem;
    border: 1px dashed var(--itg-border);
    border-radius: .6rem;
    color: var(--itg-muted);
    background: var(--itg-soft);
    font-size: .78rem;
}

.itg-safety-note[b-2t0ife5f8s] {
    display: grid;
    gap: .1rem;
    margin: .7rem .85rem 0;
    padding: .55rem .65rem;
    border-left: 3px solid var(--itg-warn);
    border-radius: .45rem;
    background: var(--pulse-warning-soft);
    color: var(--pulse-warning-text);
    font-size: .75rem;
    line-height: 1.4;
}

.itg-enable-confirm[b-2t0ife5f8s] {
    display: grid;
    gap: .35rem;
    margin: .55rem .85rem 0;
    padding: .7rem;
    border: 2px solid var(--itg-warn);
    border-radius: .65rem;
    background: var(--pulse-warning-soft);
    color: var(--pulse-warning-text);
}

.itg-enable-confirm p[b-2t0ife5f8s] { margin: 0; font-size: .75rem; line-height: 1.45; }

/* The ancestor panel clips overflow, so an unbreakable module name in this
   confirmation was CUT OFF - the operator confirmed a door rule they could not
   fully read. Same pattern as .itg-probe and .itg-rule-route. */
.itg-enable-confirm p[b-2t0ife5f8s],
.itg-enable-confirm strong[b-2t0ife5f8s] {
    overflow-wrap: anywhere;
}

.itg-enable-confirm .itg-actions[b-2t0ife5f8s] { margin: .2rem 0 0; }

.itg-intervention-evidence[b-2t0ife5f8s] {
    display: grid;
    gap: .3rem;
    min-width: 0;
    font-size: .75rem;
    font-weight: 700;
}

.itg-intervention-evidence textarea[b-2t0ife5f8s] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    resize: vertical;
}

.itg-reconciliation[b-2t0ife5f8s] {
    display: block;
    overflow-wrap: anywhere;
}

.itg-insecure-warning[b-2t0ife5f8s] {
    display: flex !important;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .65rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: .45rem;
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
    font-size: .75rem;
    line-height: 1.4;
}
.itg-insecure-warning input[b-2t0ife5f8s] { flex: 0 0 auto; margin-top: .12rem; }

.itg-rule-form[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .7rem .85rem;
}

.itg-rule-form label[b-2t0ife5f8s] {
    display: grid;
    gap: .2rem;
    min-width: 0;
    color: var(--itg-muted);
    font-size: .875rem;
    font-weight: 700;
}

.itg-rule-form .itg-rule-source[b-2t0ife5f8s] { grid-column: 1 / -1; }
.itg-rule-form > button[b-2t0ife5f8s] { grid-column: 1 / -1; justify-self: start; }
.itg-optional[b-2t0ife5f8s] { font-weight: 500; }
/* What a greyed Create button is still waiting for, and what an empty
   authorized-source list means. Both read as faults without a sentence. */
.itg-rule-blocked[b-2t0ife5f8s] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--itg-muted);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
}
.itg-field-blocked[b-2t0ife5f8s] { color: var(--pulse-warning-text); font-weight: 600; }

.itg-rule-list[b-2t0ife5f8s] {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0 .85rem .75rem;
    list-style: none;
}

.itg-rule-list li[b-2t0ife5f8s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid var(--itg-border);
    border-radius: .65rem;
    background: var(--itg-soft);
}

.itg-rule-toggle[b-2t0ife5f8s] {
    display: grid;
    min-width: 3.6rem;
    min-height: 2.1rem;
    place-items: center;
    padding: .25rem .4rem;
    border: 1px solid var(--itg-control-border);
    border-radius: 999px;
    color: var(--itg-muted);
    background: var(--itg-surface);
    font-size: .875rem;
    font-weight: 700;
}
.itg-rule-toggle[aria-pressed="true"][b-2t0ife5f8s] { border-color: var(--pulse-success-border); color: var(--itg-good); background: var(--pulse-success-soft); }
.itg-rule-route[b-2t0ife5f8s] { display: grid; gap: .08rem; min-width: 0; }
.itg-rule-route strong[b-2t0ife5f8s] { font-size: .78rem; overflow-wrap: anywhere; }
.itg-rule-route small[b-2t0ife5f8s] { color: var(--itg-muted); font-family: var(--itg-mono); font-size: .75rem; overflow-wrap: anywhere; }
.itg-rule-arrow[b-2t0ife5f8s] { color: var(--itg-muted); }

.itg-dispatches[b-2t0ife5f8s] { margin: 0 .85rem .8rem; border-top: 1px solid var(--itg-border); padding-top: .55rem; }
.itg-ambiguous[b-2t0ife5f8s] {
    margin: 0 .85rem .6rem;
    padding: .55rem .65rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: .55rem;
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}
.itg-dispatches summary[b-2t0ife5f8s] { color: var(--itg-muted); cursor: pointer; font-size: .875rem; font-weight: 700; }
.itg-dispatches ul[b-2t0ife5f8s] { display: grid; gap: .25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.itg-dispatches li[b-2t0ife5f8s] { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; color: var(--itg-muted); font-size: .75rem; }
.itg-dispatches time[b-2t0ife5f8s] { margin-left: auto; }
.itg-dispatch-status[b-2t0ife5f8s] { padding: .1rem .3rem; border-radius: .3rem; background: var(--itg-soft); font-weight: 700; }
.itg-dispatch-status.is-good[b-2t0ife5f8s] { color: var(--itg-good); }
.itg-dispatch-status.is-broken[b-2t0ife5f8s] { color: var(--itg-bad); }
.itg-dispatch-status.is-working[b-2t0ife5f8s] { color: var(--itg-warn); }

/* The durable held-state ledger, on screen. Warning-toned rather than danger:
   a held door is a working state; only an uncertain one is a problem. */
.itg-held-targets[b-2t0ife5f8s] {
    display: grid;
    gap: .5rem;
    margin: 0 .85rem .75rem;
    padding: .65rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: .55rem;
    background: var(--pulse-warning-soft);
}

.itg-held-targets h3[b-2t0ife5f8s],
.itg-held-targets p[b-2t0ife5f8s] { margin: 0; }
.itg-held-targets p[b-2t0ife5f8s] { color: var(--itg-muted); font-size: .75rem; line-height: 1.4; }
.itg-held-targets .itg-panel-head[b-2t0ife5f8s] { padding: 0; border: 0; background: transparent; }

.itg-held-list[b-2t0ife5f8s] { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.itg-held-list > li[b-2t0ife5f8s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .4rem;
    border-radius: .4rem;
    color: var(--itg-ink);
    background: var(--itg-surface);
    font-size: .75rem;
}

.itg-held-list time[b-2t0ife5f8s] { margin-left: auto; color: var(--itg-muted); }

.itg-held-name[b-2t0ife5f8s] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.itg-held-state[b-2t0ife5f8s] {
    flex: none;
    padding: .1rem .38rem;
    border: 1px solid var(--itg-border);
    border-radius: 999px;
    background: var(--itg-soft);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.itg-held-state.is-working[b-2t0ife5f8s] { border-color: var(--pulse-warning-border); color: var(--itg-warn); background: var(--pulse-warning-soft); }
.itg-held-state.is-broken[b-2t0ife5f8s] { border-color: var(--pulse-danger-border); color: var(--itg-bad); background: var(--pulse-danger-soft); }
.itg-held-state.is-off[b-2t0ife5f8s] { color: var(--itg-muted); }

/* The same pill inside a rule row sits beside the target name. */
.itg-rule-route .itg-held-state[b-2t0ife5f8s] { margin-left: .3rem; }

.itg-interventions[b-2t0ife5f8s] {
    display: grid;
    gap: .5rem;
    margin: 0 .85rem .75rem;
    padding: .65rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: .55rem;
    background: var(--pulse-danger-soft);
}

.itg-interventions > .itg-hint[b-2t0ife5f8s] { padding: 0; }

.itg-interventions h3[b-2t0ife5f8s],
.itg-interventions p[b-2t0ife5f8s] { margin: 0; }
.itg-interventions p[b-2t0ife5f8s] { color: var(--itg-muted); font-size: .75rem; line-height: 1.4; }
.itg-interventions input[b-2t0ife5f8s] { min-width: min(19rem, 100%); }
.itg-dispatch-list[b-2t0ife5f8s] { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
/* --itg-surface, not the never-defined --itg-panel: the unresolved-command
   queue is the highest-stakes text on this page, and an unresolved variable
   left it with no surface at all on the danger tint. */
.itg-dispatch-list > li[b-2t0ife5f8s] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .4rem; border-radius: .4rem; color: var(--itg-ink); background: var(--itg-surface); font-size: .75rem; }
.itg-dispatch-list time[b-2t0ife5f8s] { margin-left: auto; }
.itg-intervention-actions[b-2t0ife5f8s] { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; }
.itg-intervention-actions button[b-2t0ife5f8s] { min-height: 2rem; }

@media (max-width: 640px) {
    .integra-page[b-2t0ife5f8s] {
        gap: .75rem;
        padding: .75rem;
    }

    .itg-chain[b-2t0ife5f8s],
    .itg-form[b-2t0ife5f8s],
    .itg-rows[b-2t0ife5f8s],
    .itg-browse[b-2t0ife5f8s] {
        padding-right: .7rem;
        padding-left: .7rem;
    }

    .itg-directions[b-2t0ife5f8s] { grid-template-columns: minmax(0, 1fr); }
    .itg-direction > p[b-2t0ife5f8s] { min-height: 0; }

    .itg-panel-head[b-2t0ife5f8s] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .itg-field-pair[b-2t0ife5f8s],
    .itg-field-trio[b-2t0ife5f8s] {
        grid-template-columns: minmax(0, 1fr);
    }

    .itg-scheme select[b-2t0ife5f8s] { min-width: 0; }

    .integra-page select[b-2t0ife5f8s],
    .integra-page input[type="search"][b-2t0ife5f8s],
    .integra-page input[type="text"][b-2t0ife5f8s],
    .integra-page input[type="password"][b-2t0ife5f8s],
    .integra-page input:not([type])[b-2t0ife5f8s] {
        font-size: 1rem;
    }

    .itg-actions[b-2t0ife5f8s] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .itg-actions button[b-2t0ife5f8s] {
        width: 100%;
        min-height: 2.75rem;
    }

    .itg-catalog-tools[b-2t0ife5f8s],
    .itg-mapping-search[b-2t0ife5f8s],
    .itg-rule-form[b-2t0ife5f8s] {
        grid-template-columns: minmax(0, 1fr);
    }

    .itg-mapping-search small[b-2t0ife5f8s] {
        padding-bottom: 0;
        text-align: left;
    }

    .itg-rule-form .itg-rule-source[b-2t0ife5f8s],
    .itg-rule-form > button[b-2t0ife5f8s] { grid-column: auto; }

    .itg-rule-form > button[b-2t0ife5f8s] { width: 100%; min-height: 2.75rem; }

    .itg-interventions .itg-panel-head[b-2t0ife5f8s] { align-items: stretch; }
    .itg-interventions input[b-2t0ife5f8s] { width: 100%; min-width: 0; }
    .itg-intervention-actions button[b-2t0ife5f8s] { flex: 1 1 9rem; min-height: 2.65rem; }

    .itg-rule-list li[b-2t0ife5f8s] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
    }

    .itg-rule-list .itg-rule-arrow[b-2t0ife5f8s] { display: none; }
    .itg-rule-list .itg-rule-route:nth-of-type(2)[b-2t0ife5f8s] { grid-column: 2; }
    .itg-rule-list .itg-tiny-button[b-2t0ife5f8s] { grid-column: 3; grid-row: 1; }

    .itg-rows li[b-2t0ife5f8s] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem;
    }

    .itg-rows li > :first-child[b-2t0ife5f8s] { grid-column: 1 / -1; }
    .itg-rows-arrow[b-2t0ife5f8s] { display: none; }
    .itg-rows li > :nth-child(3)[b-2t0ife5f8s] { grid-column: 1; }
    .itg-rows li > :last-child[b-2t0ife5f8s] { grid-column: 2; }

    .itg-rows .itg-new[b-2t0ife5f8s] {
        margin-top: .2rem;
        padding-top: .65rem;
    }

    .itg-rows .itg-tiny-button[b-2t0ife5f8s],
    .itg-rows .itg-add-button[b-2t0ife5f8s] {
        align-self: stretch;
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 100%;
    }
}

/* Touch targets on any coarse pointer, not only narrow screens: a wide tablet
   still taps the appliance-remove, rule-remove and alert-dismiss circles, and
   app.css deliberately leaves checkbox inputs alone, so the switch LABEL
   carries the 44px target. */
@media (any-pointer: coarse) {
    .itg-tiny-button[b-2t0ife5f8s] {
        width: 44px;
        height: 44px;
    }

    .itg-switch[b-2t0ife5f8s] {
        min-height: 44px;
    }

    .itg-intervention-actions button[b-2t0ife5f8s] {
        min-height: 44px;
    }
}
/* /Components/Pages/Integrations.razor.rz.scp.css */
.integration-page[b-bp4j9cketo] {
    container-type: inline-size;
    container-name: hub-page;
    --hub-accent: var(--pulse-accent, #0c807b);
    --hub-ink: var(--pulse-text, #16242b);
    --hub-muted: var(--pulse-muted, #66767d);
    --hub-border: var(--pulse-border, #dce5e5);
    --hub-surface: var(--pulse-surface, #fff);
    --hub-soft: var(--pulse-surface-soft, #f3f7f7);
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    gap: var(--pulse-workspace-gap, .75rem);
    margin: 0;
    padding: var(--pulse-workspace-pad-top, .75rem) var(--pulse-workspace-pad-x, 1rem) var(--pulse-workspace-pad-bottom, 1rem);
    color: var(--hub-ink);
}
.integration-page > *[b-bp4j9cketo] { min-width: 0; }
.integration-breadcrumbs[b-bp4j9cketo] { display: flex; gap: .28rem; align-items: center; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--hub-muted); background: transparent; font-size: .875rem; }
.integration-breadcrumbs a[b-bp4j9cketo] { display: inline-flex; min-height: 36px; align-items: center; margin-left: -.42rem; padding: 0 .42rem; border-radius: 999px; color: var(--hub-accent); font-weight: 700; text-decoration: none; }
.integration-breadcrumbs a:hover[b-bp4j9cketo] { background: var(--hub-soft); }
.integration-hero[b-bp4j9cketo] { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; min-height: var(--pulse-control-min-height, 44px); padding: calc(var(--pulse-workspace-hero-pad-y, 14px) / 4) 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.integration-hero > *[b-bp4j9cketo] { position: relative; z-index: 1; min-width: 0; }
.integration-hero h1[b-bp4j9cketo] { margin: 0; font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.integration-hero p[b-bp4j9cketo] { margin: 0; color: var(--hub-muted); font-size: var(--pulse-workspace-lede-size, .82rem); line-height: 1.45; }
.integration-hero > div:first-child[b-bp4j9cketo] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; }
.integration-eyebrow[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.primary-action[b-bp4j9cketo], .secondary-action[b-bp4j9cketo], .icon-action[b-bp4j9cketo], .retry-action[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); border: 1px solid transparent; border-radius: .68rem; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.primary-action[b-bp4j9cketo] { padding: .65rem .92rem; color: var(--pulse-on-action); background: var(--pulse-action); box-shadow: none; }
.secondary-action[b-bp4j9cketo] { padding: .62rem .82rem; border-color: var(--hub-border); color: var(--hub-ink); background: var(--hub-surface); }
.danger-action[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); padding: .62rem .82rem; border: 1px solid var(--pulse-danger-border, #fecdd3); border-radius: .68rem; color: var(--pulse-danger-text, #b91c1c); background: var(--hub-surface); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.danger-action:disabled[b-bp4j9cketo] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }
.icon-action[b-bp4j9cketo] { width: var(--pulse-control-min-height, 44px); color: var(--hub-accent); background: var(--hub-soft); }
.retry-action[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); padding: .35rem .65rem; border-color: var(--hub-border); color: var(--hub-accent); background: transparent; }
.requeue-hint[b-bp4j9cketo] { display: inline-flex; align-items: center; min-height: var(--pulse-control-min-height, 44px); color: var(--hub-muted); font-size: .75rem; }
:is(.primary-action, .secondary-action, .icon-action, .retry-action):disabled[b-bp4j9cketo] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; box-shadow: none; }
.integration-notice[b-bp4j9cketo] { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding: .72rem .8rem; border: 1px solid; border-radius: .68rem; font-size: .8rem; }
.integration-notice p[b-bp4j9cketo] { margin: 0; }
.integration-notice > button[b-bp4j9cketo] { border: 0; color: inherit; background: transparent; font-size: 1.1rem; cursor: pointer; min-width: var(--pulse-control-min-height, 44px); min-height: var(--pulse-control-min-height, 44px); }
.integration-notice.error[b-bp4j9cketo] { border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); background: var(--pulse-danger-soft, #fff1f1); }
.integration-notice.success[b-bp4j9cketo] { border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); background: var(--pulse-success-soft, #edf9f3); }
.connector-catalog[b-bp4j9cketo], .delivery-ledger[b-bp4j9cketo] { padding: 1rem; border: 1px solid var(--hub-border); border-radius: .85rem; background: var(--hub-surface); }
.connector-catalog > header[b-bp4j9cketo], .delivery-ledger > header[b-bp4j9cketo] { display: flex; align-items: end; justify-content: space-between; margin-bottom: .7rem; }
:is(.connector-catalog, .delivery-ledger) h2[b-bp4j9cketo], :is(.connection-index, .connection-editor) h2[b-bp4j9cketo] { margin: .12rem 0; font-size: .9rem; }
:is(.connector-catalog, .delivery-ledger) p[b-bp4j9cketo], :is(.connection-index, .connection-editor) p[b-bp4j9cketo] { margin: .15rem 0 0; color: var(--hub-muted); font-size: .8rem; line-height: 1.5; }
.catalog-grid[b-bp4j9cketo] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.catalog-card[b-bp4j9cketo] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; min-width: 0; padding: .75rem; border: 1px solid var(--hub-border); border-radius: .7rem; color: inherit; background: var(--hub-soft); text-decoration: none; }
.catalog-card.reference[b-bp4j9cketo] { grid-template-columns: auto minmax(0, 1fr) auto; grid-column: 1 / -1; align-items: center; border-style: dashed; background: var(--hub-surface); }
.catalog-card.reference b[b-bp4j9cketo] { grid-column: 3; padding: 0; border-radius: 0; color: var(--hub-muted); background: none; font-weight: 700; }
.catalog-card b[b-bp4j9cketo] { grid-column: 2; width: fit-content; padding: .15rem 0; border-radius: var(--pulse-radius-sm, 8px); color: var(--hub-accent); background: transparent; font-size: .875rem; }
.catalog-card strong[b-bp4j9cketo] { display: block; font-size: .875rem; }
.catalog-card p[b-bp4j9cketo] { overflow-wrap: anywhere; }
.catalog-icon[b-bp4j9cketo] { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .58rem; color: var(--hub-muted); background: var(--hub-soft); font-size: .75rem; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--hub-border); }
.catalog-icon.inbound[b-bp4j9cketo] { background: var(--hub-soft); }
.integration-workbench[b-bp4j9cketo] { display: grid; grid-template-columns: minmax(16rem, .65fr) minmax(0, 1.35fr); gap: .75rem; align-items: start; }
.connection-index[b-bp4j9cketo], .connection-editor[b-bp4j9cketo] { min-width: 0; border: 1px solid var(--hub-border); border-radius: .85rem; background: var(--hub-surface); }
.connection-editor[b-bp4j9cketo] { container-type: inline-size; container-name: hub-editor; }
.connection-index > header[b-bp4j9cketo], .connection-editor > header[b-bp4j9cketo] { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .75rem .85rem; border-bottom: 1px solid var(--hub-border); }
.connection-list[b-bp4j9cketo] { display: grid; gap: .28rem; max-height: 32rem; padding: .48rem; overflow-y: auto; overscroll-behavior: contain; }
.connection-row[b-bp4j9cketo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem; align-items: center; width: 100%; min-width: 0; min-height: 4rem; padding: .62rem .7rem; border: 1px solid transparent; border-radius: .66rem; color: var(--hub-ink); background: transparent; text-align: left; cursor: pointer; }
.connection-row:hover[b-bp4j9cketo], .connection-row.selected[b-bp4j9cketo] { border-color: color-mix(in srgb, var(--hub-accent) 38%, var(--hub-border)); background: color-mix(in srgb, var(--hub-accent) 6%, var(--hub-surface)); }
.connection-row strong[b-bp4j9cketo], .connection-row small[b-bp4j9cketo] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-row strong[b-bp4j9cketo] { font-size: .875rem; white-space: normal; overflow-wrap: anywhere; }
.connection-row small[b-bp4j9cketo] { margin-top: .15rem; color: var(--hub-muted); font-size: .75rem; }
.connection-mark[b-bp4j9cketo] { width: .65rem; height: .65rem; border-radius: 50%; background: var(--hub-muted); }
.connection-mark.healthy[b-bp4j9cketo] { background: var(--pulse-success, #16a34a); box-shadow: none; }
.connection-mark.degraded[b-bp4j9cketo] { background: var(--pulse-danger, #dc2626); box-shadow: none; }
.connection-mark.nottested[b-bp4j9cketo] { background: var(--pulse-warning, #d97706); }
.connection-mark.disabled[b-bp4j9cketo] { background: var(--hub-muted); }
.state-chip[b-bp4j9cketo], .credential-state[b-bp4j9cketo], .delivery-state[b-bp4j9cketo] { width: fit-content; padding: .22rem .45rem; border-radius: 999px; color: var(--hub-muted); background: var(--hub-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.state-chip.healthy[b-bp4j9cketo], .credential-state.saved[b-bp4j9cketo], .delivery-state.delivered[b-bp4j9cketo] { color: var(--pulse-success-text, #176341); background: var(--pulse-success-soft, #edf9f3); }
.state-chip.degraded[b-bp4j9cketo], .credential-state.missing[b-bp4j9cketo], .delivery-state.failed[b-bp4j9cketo] { color: var(--pulse-danger-text, #9b2929); background: var(--pulse-danger-soft, #fff1f1); }
.state-chip.nottested[b-bp4j9cketo], .delivery-state.retryscheduled[b-bp4j9cketo], .delivery-state.sending[b-bp4j9cketo] { color: var(--pulse-warning-text, #855d12); background: var(--pulse-warning-soft, #fff7df); }
.delivery-state.pending[b-bp4j9cketo] { color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 9%, transparent); }
.delivery-state.cancelled[b-bp4j9cketo] { color: var(--hub-muted); background: var(--hub-soft); }
.integration-empty[b-bp4j9cketo] { padding: 1.3rem 1rem; color: var(--hub-muted); font-size: .8rem; line-height: 1.55; text-align: center; }
.integration-empty strong[b-bp4j9cketo] { display: block; color: var(--hub-ink); font-size: .9rem; }
.setup-steps[b-bp4j9cketo] { display: grid; gap: 1rem; padding: .85rem; }
.setup-step[b-bp4j9cketo] { min-width: 0; margin: 0; padding: 0; border: 0; }
.setup-step legend[b-bp4j9cketo] { display: flex; gap: .55rem; align-items: center; width: 100%; margin: 0 0 .65rem; padding: 0; color: var(--hub-ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.step-number[b-bp4j9cketo] { display: inline-grid; flex: 0 0 auto; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid var(--hub-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--hub-muted); background: var(--hub-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }
.connection-editor .credential-guidance[b-bp4j9cketo] { margin: .65rem 0 0; color: var(--hub-muted); font-size: .75rem; font-weight: 400; line-height: 1.45; }
.editor-fields[b-bp4j9cketo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .75rem; padding: 0; }
.editor-fields label[b-bp4j9cketo] { display: grid; gap: .3rem; min-width: 0; color: var(--hub-muted); font-size: .875rem; font-weight: 600; }
.editor-fields label.wide[b-bp4j9cketo] { grid-column: 1 / -1; }
.editor-fields :is(input, select)[b-bp4j9cketo] { width: 100%; min-height: 2.75rem; padding: .55rem .62rem; border: 1px solid var(--hub-border); border-radius: .58rem; color: var(--hub-ink); background: var(--hub-surface); font: inherit; font-size: .875rem; }
.editor-fields :is(input, select):focus[b-bp4j9cketo] { border-color: var(--hub-accent); }
.editor-fields input[readonly][b-bp4j9cketo] { color: var(--hub-muted); background: var(--hub-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.editor-fields select:disabled[b-bp4j9cketo] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity, .62); }
.editor-fields small[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; font-weight: 500; line-height: 1.45; }
.editor-fields .field-error[b-bp4j9cketo] { color: var(--pulse-danger-text, #b91c1c); font-weight: 700; }
.editor-fields [aria-invalid="true"][b-bp4j9cketo] { border-color: var(--pulse-danger-border, #fca5a5); }
.secret-field[b-bp4j9cketo] { display: flex; flex-wrap: wrap; gap: .4rem; }
.secret-field input[b-bp4j9cketo] { flex: 1 1 12rem; width: auto; min-width: 0; }
.secret-field button[b-bp4j9cketo] { flex: 0 0 auto; min-width: 5rem; min-height: var(--pulse-control-min-height, 44px); border: 1px solid var(--hub-border); border-radius: .58rem; color: var(--hub-accent); background: var(--hub-soft); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.enable-row[b-bp4j9cketo] { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; margin: .7rem 0 0; padding: .7rem; border: 1px solid var(--hub-border); border-radius: .65rem; background: var(--hub-soft); cursor: pointer; }
.enable-row input[b-bp4j9cketo] { width: 1rem; height: 1rem; accent-color: var(--hub-accent); }
.enable-row strong[b-bp4j9cketo], .enable-row small[b-bp4j9cketo] { display: block; }
.enable-row strong[b-bp4j9cketo] { font-size: .875rem; }
.enable-row small[b-bp4j9cketo] { margin-top: .1rem; color: var(--hub-muted); font-size: .75rem; line-height: 1.45; }
.signature-contract[b-bp4j9cketo] { display: grid; gap: .28rem; margin: 0 1rem .8rem; padding: .72rem; border-left: .2rem solid var(--hub-accent); border-radius: .2rem .58rem .58rem .2rem; color: var(--hub-muted); background: color-mix(in srgb, var(--hub-accent) 6%, var(--hub-soft)); font-size: .75rem; line-height: 1.45; }
.signature-contract strong[b-bp4j9cketo] { color: var(--hub-ink); font-size: .875rem; }
.replay-confirmation[b-bp4j9cketo] { margin: 0 0 .7rem; }
.replay-confirmation .editor-actions[b-bp4j9cketo] { padding: .45rem 0 0; border-top: 0; justify-content: flex-start; }
.credential-ceremony[b-bp4j9cketo] { border-color: var(--pulse-info-border, #bae6fd); background: var(--pulse-info-soft, #e0f2fe); }
.destructive[b-bp4j9cketo] { border-color: var(--pulse-danger-border, #fecaca); color: var(--pulse-danger-text, #b91c1c); }
.editor-actions[b-bp4j9cketo] { display: flex; gap: .45rem; justify-content: flex-start; padding: .8rem 1rem; border-top: 1px solid var(--hub-border); flex-wrap: wrap; }
/* Silent mirror of the page banner, drawn where the operator pressed Save or
   Send connection test. Same tokens as .integration-notice so the two copies of
   one sentence cannot come to look like two different verdicts. */
.editor-outcome[b-bp4j9cketo] { margin: 0; padding: .55rem 1rem .8rem; font-size: .8rem; font-weight: 600; line-height: 1.5; }
.editor-outcome.is-success[b-bp4j9cketo] { color: var(--pulse-success-text, #176341); }
.editor-outcome.is-error[b-bp4j9cketo] { color: var(--pulse-danger-text, #9b2929); }
.connection-editor .draft-notice[b-bp4j9cketo] { margin: .65rem 0 0; color: var(--pulse-warning-text, #9a3412); font-size: .8125rem; font-weight: 600; }
.event-choices[b-bp4j9cketo] { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: .4rem; }
.event-choices button[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); padding: .45rem .75rem; border: 1px solid var(--hub-border); border-radius: var(--pulse-radius-sm, 8px); color: var(--hub-ink); background: var(--hub-surface); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.event-choices button[aria-pressed="true"][b-bp4j9cketo] { border-color: var(--hub-accent); color: var(--hub-accent); background: color-mix(in srgb, var(--hub-accent) 7%, var(--hub-surface)); }
.event-choices button:disabled[b-bp4j9cketo] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }
.field-help[b-bp4j9cketo] { grid-column: 1 / -1; min-width: 0; }
.field-help > summary[b-bp4j9cketo] { width: fit-content; min-height: var(--pulse-control-min-height, 44px); padding: .65rem .25rem; border-radius: var(--pulse-radius-sm, 8px); color: var(--hub-muted); font-size: .8125rem; cursor: pointer; }
.field-help > summary[b-bp4j9cketo]::marker { color: var(--hub-muted); }
.field-help p[b-bp4j9cketo] { margin: .2rem 0 0; font-size: .8125rem; line-height: 1.5; }
.integration-advanced[b-bp4j9cketo] { display: grid; min-width: 0; gap: .65rem; }
.advanced-heading[b-bp4j9cketo] { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .75rem .1rem .25rem; }
.advanced-heading h2[b-bp4j9cketo] { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.advanced-heading p[b-bp4j9cketo] { margin: .25rem 0 0; color: var(--hub-muted); font-size: .8125rem; line-height: 1.45; }
.integration-disclosure[b-bp4j9cketo] { min-width: 0; border: 1px solid var(--hub-border); border-radius: var(--pulse-radius-lg, 14px); background: var(--hub-surface); }
.integration-disclosure > summary[b-bp4j9cketo] { display: flex; gap: .75rem; align-items: center; min-height: var(--pulse-control-min-height, 44px); padding: .85rem 1rem; border-radius: inherit; color: var(--hub-ink); cursor: pointer; list-style: none; }
.integration-disclosure > summary[b-bp4j9cketo]::-webkit-details-marker { display: none; }
.integration-disclosure > summary[b-bp4j9cketo]::before { flex: 0 0 auto; width: .45rem; height: .45rem; border-right: 2px solid var(--hub-muted); border-bottom: 2px solid var(--hub-muted); transform: rotate(-45deg); content: ""; }
.integration-disclosure[open] > summary[b-bp4j9cketo]::before { transform: rotate(45deg); }
.integration-disclosure > summary:hover[b-bp4j9cketo] { background: var(--hub-soft); }
.integration-disclosure > summary > span:first-child[b-bp4j9cketo] { flex: 1 1 auto; min-width: 0; }
.integration-disclosure > summary strong[b-bp4j9cketo], .integration-disclosure > summary small[b-bp4j9cketo] { display: block; overflow-wrap: anywhere; }
.integration-disclosure > summary strong[b-bp4j9cketo] { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.integration-disclosure > summary small[b-bp4j9cketo] { margin-top: .15rem; color: var(--hub-muted); font-size: .8125rem; line-height: 1.45; }
.integration-disclosure[open] > summary[b-bp4j9cketo] { border-bottom: 1px solid var(--hub-border); border-radius: var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px) 0 0; }
.integration-disclosure > :is(.delivery-ledger, .delivery-command, .connector-catalog)[b-bp4j9cketo] { border: 0; border-radius: 0; }
.disclosure-status[b-bp4j9cketo] { flex: 0 0 auto; min-width: 4ch; max-width: 45%; color: var(--hub-muted); font-size: .75rem; text-align: right; overflow-wrap: normal; }
.signing-disclosure[b-bp4j9cketo] { margin: 0 1rem 1rem; border-radius: var(--pulse-radius-sm, 8px); }
.signing-disclosure > summary[b-bp4j9cketo] { padding: .65rem .75rem; }
.signing-disclosure[open] > summary[b-bp4j9cketo] { border-radius: var(--pulse-radius-sm, 8px) var(--pulse-radius-sm, 8px) 0 0; }
.signing-disclosure .signature-contract[b-bp4j9cketo] { margin: .7rem; }
.ledger-retention[b-bp4j9cketo] { display: grid; justify-items: end; padding: .4rem .55rem; border: 1px solid var(--hub-border); border-radius: .6rem; color: var(--hub-ink); background: var(--hub-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ledger-retention small[b-bp4j9cketo] { margin-top: .08rem; color: var(--hub-muted); font-size: .75rem; font-weight: 600; }
.ledger-filters[b-bp4j9cketo] { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(10rem, 1fr) minmax(8rem, .72fr) minmax(10rem, 1fr) auto; gap: .55rem; align-items: end; margin-bottom: .6rem; padding: .75rem; border: 1px solid var(--hub-border); border-radius: .72rem; background: var(--hub-soft); }
.ledger-filters label[b-bp4j9cketo] { display: grid; gap: .24rem; min-width: 0; color: var(--hub-muted); font-size: .875rem; font-weight: 700; }
.ledger-filters :is(input, select)[b-bp4j9cketo] { width: 100%; min-width: 0; max-width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .48rem .58rem; border: 1px solid var(--hub-border); border-radius: .56rem; color: var(--hub-ink); background: var(--hub-surface); font: inherit; font-size: .875rem; }
.ledger-filters :is(input, select):focus-visible[b-bp4j9cketo] { border-color: var(--hub-accent); outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.ledger-filter-actions[b-bp4j9cketo] { display: flex; gap: .4rem; }
.ledger-filter-actions button[b-bp4j9cketo] { white-space: nowrap; }
.ledger-result-bar[b-bp4j9cketo] { display: flex; gap: .7rem; align-items: center; justify-content: space-between; min-height: 1.8rem; margin-bottom: .45rem; color: var(--hub-muted); font-size: .75rem; }
.ledger-progress[b-bp4j9cketo] { display: inline-flex; gap: .35rem; align-items: center; color: var(--pulse-info-strong, #0369a1); }
.ledger-progress[b-bp4j9cketo]::before { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; animation: hub-refresh-pulse-b-bp4j9cketo 1.1s ease-in-out infinite; content: ""; }
.ledger-pending[b-bp4j9cketo] { padding: .2rem .4rem; border-radius: 999px; color: var(--pulse-warning-text, #9a3412); background: var(--pulse-warning-soft, #fff7ed); font-weight: 700; }
.ledger-error[b-bp4j9cketo] { display: flex; gap: .65rem; align-items: center; justify-content: space-between; margin-bottom: .55rem; padding: .55rem .65rem; border: 1px solid var(--pulse-danger-border, #fecaca); border-radius: .62rem; color: var(--pulse-danger-text, #b91c1c); background: var(--pulse-danger-soft, #fee2e2); font-size: .75rem; }
.ledger-error button[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); padding: .3rem .55rem; border: 1px solid currentColor; border-radius: .48rem; color: inherit; background: var(--hub-surface); font: inherit; font-weight: 700; cursor: pointer; }
.delivery-table-wrap[b-bp4j9cketo] { overflow-x: auto; border: 1px solid var(--hub-border); border-radius: .68rem; }
.delivery-table-wrap table[b-bp4j9cketo] { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .75rem; }
.delivery-table-wrap th[b-bp4j9cketo], .delivery-table-wrap td[b-bp4j9cketo] { padding: .62rem .68rem; border-bottom: 1px solid var(--hub-border); text-align: left; vertical-align: top; }
.delivery-table-wrap th[b-bp4j9cketo] { color: var(--hub-muted); background: var(--hub-soft); font-size: .75rem; letter-spacing: .02em; text-transform: uppercase; }
.delivery-table-wrap tr:last-child td[b-bp4j9cketo] { border-bottom: 0; }
.delivery-table-wrap td strong[b-bp4j9cketo], .delivery-table-wrap td small[b-bp4j9cketo] { display: block; max-width: 21rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-table-wrap td small[b-bp4j9cketo] { margin-top: .18rem; color: var(--hub-muted); font-size: .75rem; }
.ledger-paging[b-bp4j9cketo] { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding-top: .7rem; color: var(--hub-muted); font-size: .75rem; }
.delivery-command[b-bp4j9cketo] { overflow: visible; border: 1px solid var(--hub-border); border-radius: var(--pulse-radius-xl, 16px); color: var(--hub-ink); background: var(--hub-surface); box-shadow: none; }
.delivery-command > header[b-bp4j9cketo] { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .85rem; border-bottom: 1px solid var(--hub-border); }
.delivery-command h2[b-bp4j9cketo] { margin: .12rem 0; color: var(--hub-ink); font-size: 1.05rem; letter-spacing: -.02em; }
.delivery-command > header p[b-bp4j9cketo] { margin: 0; color: var(--hub-muted); font-size: .8rem; line-height: 1.5; }
.telemetry-controls[b-bp4j9cketo] { display: grid; grid-template-columns: auto auto auto; gap: .5rem; align-items: end; min-width: 0; }
.window-select[b-bp4j9cketo] { display: grid; min-width: 0; gap: .16rem; color: var(--hub-muted); font-size: .875rem; font-weight: 700; }
.window-select > span[b-bp4j9cketo] { padding-left: .12rem; letter-spacing: .02em; text-transform: uppercase; }
.window-select select[b-bp4j9cketo] { width: 100%; min-width: 0; max-width: 100%; min-height: var(--pulse-control-min-height, 44px); padding: .45rem 1.75rem .45rem .58rem; border: 1px solid var(--hub-border); border-radius: .62rem; color: var(--hub-ink); background: var(--hub-surface); font: inherit; font-size: .875rem; font-weight: 700; }
.telemetry-refresh[b-bp4j9cketo] { display: inline-flex; gap: .35rem; align-items: center; justify-content: center; min-height: var(--pulse-control-min-height, 44px); padding: .45rem .68rem; border: 1px solid var(--hub-border); border-radius: .62rem; color: var(--hub-accent); background: var(--hub-soft); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.telemetry-refresh > span:first-child[b-bp4j9cketo] { font-size: .9rem; line-height: 1; }
.telemetry-refresh:disabled[b-bp4j9cketo] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }
.telemetry-status[b-bp4j9cketo] { display: grid; gap: .15rem; justify-items: start; }
.telemetry-status > small[b-bp4j9cketo] { padding-left: .15rem; color: var(--hub-muted); font-size: .75rem; white-space: nowrap; }
.telemetry-state[b-bp4j9cketo] { display: inline-flex; gap: .42rem; align-items: center; min-height: 2.2rem; padding: .35rem .58rem; border: 1px solid var(--hub-border); border-radius: 999px; color: var(--hub-muted); background: var(--hub-soft); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.telemetry-state i[b-bp4j9cketo] { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: none; }
.telemetry-state.healthy[b-bp4j9cketo] { border-color: var(--pulse-success-border, #a7f3d0); color: var(--pulse-success-text, #047857); background: var(--pulse-success-soft, #ecfdf5); }
.telemetry-state.attention[b-bp4j9cketo], .telemetry-state.stale[b-bp4j9cketo], .telemetry-state.unavailable[b-bp4j9cketo] { border-color: var(--pulse-danger-border, #fecaca); color: var(--pulse-danger-text, #b91c1c); background: var(--pulse-danger-soft, #fee2e2); }
.telemetry-state.idle[b-bp4j9cketo], .telemetry-state.paused[b-bp4j9cketo] { border-color: var(--pulse-warning-border, #fed7aa); color: var(--pulse-warning-text, #9a3412); background: var(--pulse-warning-soft, #fff7ed); }
.telemetry-state.active[b-bp4j9cketo], .telemetry-state.refreshing[b-bp4j9cketo] { border-color: var(--pulse-info-border, #bae6fd); color: var(--pulse-info-strong, #0369a1); background: var(--pulse-info-soft, #e0f2fe); }
.telemetry-state.refreshing i[b-bp4j9cketo] { animation: hub-refresh-pulse-b-bp4j9cketo 1.1s ease-in-out infinite; }
.observability-empty[b-bp4j9cketo] { display: grid; justify-items: center; min-height: 11rem; padding: 1.5rem; color: var(--hub-muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.observability-empty strong[b-bp4j9cketo] { margin-top: .5rem; color: var(--hub-ink); font-size: .9rem; }
.observability-empty p[b-bp4j9cketo] { max-width: 32rem; margin: .25rem 0 .7rem; }
.empty-state-mark[b-bp4j9cketo] { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid var(--pulse-info-border, #bae6fd); border-radius: .72rem; color: var(--pulse-info-strong, #0369a1); background: var(--pulse-info-soft, #e0f2fe); font-size: .75rem; font-weight: 700; }
.telemetry-warning[b-bp4j9cketo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; margin: .7rem 1.1rem 0; padding: .58rem .68rem; border: 1px solid var(--pulse-danger-border, #fecaca); border-radius: .65rem; color: var(--pulse-danger-text, #b91c1c); background: var(--pulse-danger-soft, #fee2e2); font-size: .75rem; }
.telemetry-warning p[b-bp4j9cketo] { margin: 0; }
.telemetry-warning button[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); padding: .3rem .55rem; border: 1px solid currentColor; border-radius: .5rem; color: inherit; background: var(--hub-surface); font: inherit; font-weight: 700; cursor: pointer; }
.command-metrics[b-bp4j9cketo] { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(18rem, 1.35fr) repeat(3, minmax(8rem, .7fr)); gap: .55rem; padding: .75rem 1.1rem .7rem; }
.command-metrics > article[b-bp4j9cketo] { min-width: 0; min-height: 6.25rem; border: 1px solid var(--hub-border); border-radius: .8rem; background: var(--hub-soft); }
.slo-card[b-bp4j9cketo] { --slo-tone: var(--pulse-success, #16a34a); display: flex; gap: .8rem; align-items: center; padding: .72rem .82rem; }
.slo-card.slo-missed[b-bp4j9cketo] { --slo-tone: var(--pulse-danger, #dc2626); border-color: var(--pulse-danger-border, #fecaca); background: var(--pulse-danger-soft, #fee2e2); }
.slo-card.no-data[b-bp4j9cketo] { --slo-tone: var(--hub-muted); }
.slo-gauge[b-bp4j9cketo] { display: grid; flex: 0 0 auto; width: 4.7rem; height: 4.7rem; place-items: center; border-radius: 50%; background: conic-gradient(var(--slo-tone) var(--slo-value), var(--hub-border) 0); }
.slo-gauge[b-bp4j9cketo]::before { grid-area: 1 / 1; width: 3.75rem; height: 3.75rem; border: 1px solid var(--hub-border); border-radius: 50%; background: var(--hub-surface); content: ""; }
.slo-gauge > span[b-bp4j9cketo] { z-index: 1; grid-area: 1 / 1; text-align: center; }
.slo-gauge strong[b-bp4j9cketo], .slo-gauge small[b-bp4j9cketo] { display: block; }
.slo-gauge strong[b-bp4j9cketo] { color: var(--hub-ink); font-size: .98rem; font-variant-numeric: tabular-nums; }
.slo-gauge small[b-bp4j9cketo] { margin-top: .08rem; color: var(--hub-muted); font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.slo-card > div:last-child[b-bp4j9cketo], :is(.latency-card, .queue-card) > div[b-bp4j9cketo] { min-width: 0; }
.slo-card > div:last-child > span[b-bp4j9cketo], :is(.latency-card, .queue-card) > div > span[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.slo-card > div:last-child > strong[b-bp4j9cketo], :is(.latency-card, .queue-card) > div > strong[b-bp4j9cketo] { display: block; margin: .12rem 0; color: var(--hub-ink); font-size: .9rem; }
.slo-card > div:last-child > small[b-bp4j9cketo], :is(.latency-card, .queue-card) > div > small[b-bp4j9cketo] { display: block; color: var(--hub-muted); font-size: .75rem; line-height: 1.45; }
.latency-card[b-bp4j9cketo], .queue-card[b-bp4j9cketo] { display: flex; gap: .7rem; align-items: center; padding: .75rem; }
.queue-card.has-pressure[b-bp4j9cketo] { border-color: var(--pulse-danger-border, #fecaca); background: var(--pulse-danger-soft, #fee2e2); }
/* The stored outbox diagnostic is an exception message capped at 2000 characters. Every metric card shares one grid row, so an unclamped one would stretch the SLO, latency and backlog cards with it exactly when something is wrong; clamping it to a line makes the title attribute the real overflow affordance and gives it the same danger treatment as .health-error. */
.outbox-card .outbox-error[b-bp4j9cketo], .outbox-card .outbox-stale[b-bp4j9cketo] { display: block; overflow: hidden; margin-top: .1rem; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.outbox-card .outbox-error[b-bp4j9cketo] { color: var(--pulse-danger-text, #b91c1c); }
.outbox-card .outbox-stale[b-bp4j9cketo] { color: var(--hub-muted); }
.metric-symbol[b-bp4j9cketo] { display: grid; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--pulse-info-border, #bae6fd); border-radius: .625rem; color: var(--hub-muted); background: var(--hub-surface); font-size: .75rem; font-weight: 700; letter-spacing: .02em; border-color: var(--hub-border); }
.metric-symbol.queue[b-bp4j9cketo] { border-color: var(--hub-border); color: var(--hub-muted); background: var(--hub-surface); font-size: .75rem; }
.throughput-panel[b-bp4j9cketo] { display: grid; grid-template-columns: auto minmax(12rem, 1fr) auto; gap: .9rem; align-items: center; margin: 0 1.1rem .7rem; padding: .75rem .82rem; border: 1px solid var(--hub-border); border-radius: .8rem; background: var(--hub-soft); }
.throughput-panel h3[b-bp4j9cketo] { margin: .08rem 0; color: var(--hub-ink); font-size: .875rem; }
.chart-legend[b-bp4j9cketo] { display: flex; gap: .55rem; margin-top: .16rem; }
.chart-legend small[b-bp4j9cketo] { display: inline-flex; gap: .24rem; align-items: center; color: var(--hub-muted); font-size: .75rem; }
.chart-legend i[b-bp4j9cketo] { width: .38rem; height: .38rem; border-radius: .12rem; }
.chart-legend i.delivered[b-bp4j9cketo] { background: var(--pulse-success, #16a34a); }
.chart-legend i.failed[b-bp4j9cketo] { background: var(--pulse-danger, #dc2626); }
.throughput-chart[b-bp4j9cketo] { position: relative; display: flex; gap: .22rem; align-items: end; min-width: 0; height: 3.4rem; padding: .25rem .1rem .15rem; border-bottom: 1px solid var(--hub-border); background: repeating-linear-gradient(to top, transparent 0 .98rem, color-mix(in srgb, var(--hub-border) 55%, transparent) 1rem 1.03rem); }
.throughput-chart.is-empty[b-bp4j9cketo] { border: 1px dashed var(--hub-border); border-radius: .55rem; background: var(--hub-surface); }
.throughput-column[b-bp4j9cketo] { display: flex; flex: 1 1 0; gap: 1px; align-items: end; justify-content: center; height: 100%; min-width: 4px; }
.throughput-column i[b-bp4j9cketo] { width: min(.36rem, 42%); height: var(--bar-height); min-height: 0; border-radius: .18rem .18rem 0 0; }
.throughput-column i.delivered[b-bp4j9cketo] { background: var(--pulse-success, #16a34a); }
.throughput-column i.failed[b-bp4j9cketo] { background: var(--pulse-danger, #dc2626); }
.chart-empty[b-bp4j9cketo] { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hub-muted); font-size: .75rem; }
.throughput-total[b-bp4j9cketo] { color: var(--hub-ink); font-size: 1.18rem; font-variant-numeric: tabular-nums; text-align: right; }
.throughput-total small[b-bp4j9cketo] { display: block; color: var(--hub-muted); font-size: .75rem; font-weight: 600; }
.observability-detail-grid[b-bp4j9cketo] { display: grid; grid-template-columns: minmax(22rem, 1.2fr) minmax(19rem, .8fr); border-top: 1px solid var(--hub-border); }
.connector-health[b-bp4j9cketo], .event-coverage[b-bp4j9cketo] { min-width: 0; padding: .85rem 1.1rem 1rem; }
.connector-health[b-bp4j9cketo] { border-right: 1px solid var(--hub-border); }
:is(.connector-health, .event-coverage) > header[b-bp4j9cketo] { display: flex; gap: .7rem; align-items: end; justify-content: space-between; margin-bottom: .55rem; }
:is(.connector-health, .event-coverage) h3[b-bp4j9cketo] { margin: .1rem 0 0; color: var(--hub-ink); font-size: .875rem; }
:is(.connector-health, .event-coverage) > header > small[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; }
.connector-health-list[b-bp4j9cketo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem; }
.connector-health-card[b-bp4j9cketo] { --health-tone: var(--hub-muted); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; min-width: 0; min-height: 4.7rem; padding: .55rem .62rem; border: 1px solid color-mix(in srgb, var(--health-tone) 28%, var(--hub-border)); border-radius: .68rem; color: var(--hub-ink); background: var(--hub-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.connector-health-card:hover[b-bp4j9cketo] { border-color: color-mix(in srgb, var(--health-tone) 55%, var(--hub-border)); background: color-mix(in srgb, var(--health-tone) 5%, var(--hub-surface)); transform: translateY(-1px); }
.connector-health-card:focus-visible[b-bp4j9cketo], .telemetry-refresh:focus-visible[b-bp4j9cketo], .window-select select:focus-visible[b-bp4j9cketo] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.integration-page :is(button, a, input, select, textarea, summary):focus-visible[b-bp4j9cketo] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.connector-health-card.health-healthy[b-bp4j9cketo] { --health-tone: var(--pulse-success, #16a34a); }
.connector-health-card.health-watch[b-bp4j9cketo] { --health-tone: var(--pulse-warning, #d97706); }
.connector-health-card.health-critical[b-bp4j9cketo] { --health-tone: var(--pulse-danger, #dc2626); }
.connector-health-card.health-idle[b-bp4j9cketo] { --health-tone: var(--pulse-info, #0ea5e9); }
.health-orb[b-bp4j9cketo] { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 1px solid color-mix(in srgb, var(--health-tone) 45%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--health-tone) 9%, transparent); }
.health-orb i[b-bp4j9cketo] { width: .42rem; height: .42rem; border-radius: 50%; background: var(--health-tone); }
.health-copy[b-bp4j9cketo] { display: block; min-width: 0; }
.health-copy small[b-bp4j9cketo] { color: var(--health-tone); font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.health-copy strong[b-bp4j9cketo], .health-copy span[b-bp4j9cketo] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-copy strong[b-bp4j9cketo] { margin: .06rem 0; color: var(--hub-ink); font-size: .875rem; }
.health-copy span[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; }
.health-copy .health-error[b-bp4j9cketo] { display: block; overflow: hidden; margin-top: .1rem; color: var(--pulse-danger-text, #b91c1c); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.health-stats[b-bp4j9cketo] { text-align: right; }
.health-stats b[b-bp4j9cketo], .health-stats small[b-bp4j9cketo] { display: block; white-space: nowrap; }
.health-stats b[b-bp4j9cketo] { color: var(--hub-ink); font-size: .75rem; }
.health-stats small[b-bp4j9cketo] { color: var(--hub-muted); font-size: .75rem; }
.event-coverage-list[b-bp4j9cketo] { display: grid; gap: .32rem; }
.event-coverage-list article[b-bp4j9cketo] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; min-height: 3.45rem; padding: .42rem .5rem; border: 1px solid var(--hub-border); border-radius: .58rem; background: var(--hub-soft); }
.event-family-icon[b-bp4j9cketo] { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: .48rem; color: var(--pulse-info-strong, #0369a1); background: var(--pulse-info-soft, #e0f2fe); font-size: .75rem; font-weight: 700; }
.event-coverage-list article > span:nth-child(2)[b-bp4j9cketo] { min-width: 0; }
.event-coverage-list strong[b-bp4j9cketo], .event-coverage-list small[b-bp4j9cketo] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-coverage-list strong[b-bp4j9cketo] { color: var(--hub-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; }
.event-coverage-list small[b-bp4j9cketo] { margin-top: .08rem; color: var(--hub-muted); font-size: .75rem; }
.event-success[b-bp4j9cketo] { padding: .2rem .36rem; border-radius: 999px; color: var(--hub-muted); background: var(--hub-surface); font-size: .75rem; }
.event-success.healthy[b-bp4j9cketo] { color: var(--pulse-success-text, #047857); background: var(--pulse-success-soft, #ecfdf5); }
.event-success.watch[b-bp4j9cketo] { color: var(--pulse-warning-text, #9a3412); background: var(--pulse-warning-soft, #fff7ed); }
.event-success.critical[b-bp4j9cketo] { color: var(--pulse-danger-text, #b91c1c); background: var(--pulse-danger-soft, #fee2e2); }
.catalog-card.recipe[b-bp4j9cketo], a.catalog-card[b-bp4j9cketo] { width: 100%; font: inherit; text-align: left; cursor: pointer; }
:is(.catalog-card.recipe, a.catalog-card):hover[b-bp4j9cketo] { border-color: color-mix(in srgb, var(--hub-accent) 55%, var(--hub-border)); transform: none; background: var(--hub-surface); }
.catalog-icon.soc[b-bp4j9cketo] { background: var(--hub-soft); }
.catalog-icon.alarm[b-bp4j9cketo] { background: var(--hub-soft); }
.catalog-icon.itsm[b-bp4j9cketo] { background: var(--hub-soft); }
.catalog-icon.flow[b-bp4j9cketo] { background: var(--hub-soft); }
@keyframes hub-refresh-pulse-b-bp4j9cketo { 50% { opacity: .35; transform: scale(.72); } }
.sr-only[b-bp4j9cketo] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 1100px) { .command-metrics[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slo-card[b-bp4j9cketo] { grid-column: 1 / -1; } .observability-detail-grid[b-bp4j9cketo] { grid-template-columns: 1fr; } .connector-health[b-bp4j9cketo] { border-right: 0; border-bottom: 1px solid var(--hub-border); } }
@media (max-width: 920px) { .catalog-grid[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .command-metrics[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slo-card[b-bp4j9cketo] { grid-column: 1 / -1; } .throughput-panel[b-bp4j9cketo] { grid-template-columns: 1fr auto; } .throughput-chart[b-bp4j9cketo] { grid-column: 1 / -1; grid-row: 2; } .connector-health-list[b-bp4j9cketo] { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .integration-page[b-bp4j9cketo] { padding: .75rem .625rem 1.75rem; } .integration-breadcrumbs[b-bp4j9cketo], .integration-breadcrumbs a[b-bp4j9cketo] { min-height: 44px; } .integration-hero[b-bp4j9cketo] { padding: 0; } .integration-hero .primary-action[b-bp4j9cketo] { width: 100%; } .delivery-command > header[b-bp4j9cketo] { align-items: stretch; flex-direction: column; padding: .9rem; } .telemetry-controls[b-bp4j9cketo] { grid-template-columns: minmax(0, 1fr) auto; width: 100%; } .window-select select[b-bp4j9cketo] { width: 100%; } .telemetry-status[b-bp4j9cketo] { grid-column: 1 / -1; } .telemetry-state[b-bp4j9cketo] { min-height: 2.25rem; } .telemetry-warning[b-bp4j9cketo] { grid-template-columns: auto minmax(0, 1fr); margin: .6rem .7rem 0; } .telemetry-warning button[b-bp4j9cketo] { grid-column: 2; width: fit-content; min-height: var(--pulse-control-min-height, 44px); } .command-metrics[b-bp4j9cketo] { grid-template-columns: 1fr; padding: .7rem .7rem .6rem; } .slo-card[b-bp4j9cketo] { grid-column: auto; min-height: 7rem; } .latency-card[b-bp4j9cketo], .queue-card[b-bp4j9cketo] { min-height: 4.8rem; } .throughput-panel[b-bp4j9cketo] { margin: 0 .7rem .6rem; padding: .65rem; } .throughput-chart[b-bp4j9cketo] { height: 3.8rem; } .connector-health[b-bp4j9cketo], .event-coverage[b-bp4j9cketo] { padding: .75rem .7rem .85rem; } .connector-health-list[b-bp4j9cketo] { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } .connector-health-card[b-bp4j9cketo] { flex: 0 0 min(88vw, 22rem); min-height: 5.1rem; scroll-snap-align: start; } .catalog-grid[b-bp4j9cketo] { grid-template-columns: 1fr; } .catalog-card[b-bp4j9cketo] { min-height: 5.2rem; } .catalog-card.reference[b-bp4j9cketo] { grid-template-columns: auto minmax(0, 1fr); } .catalog-card.reference b[b-bp4j9cketo] { grid-column: 2; } .editor-fields[b-bp4j9cketo] { grid-template-columns: 1fr; } .editor-fields label.wide[b-bp4j9cketo] { grid-column: auto; } .connection-row[b-bp4j9cketo] { grid-template-columns: auto minmax(0, 1fr); min-height: 4.25rem; } .connection-row .state-chip[b-bp4j9cketo] { grid-column: 2; } .editor-actions[b-bp4j9cketo] { flex-direction: column; } .editor-actions button[b-bp4j9cketo] { width: 100%; min-height: 44px; } .secret-field[b-bp4j9cketo] { display: grid; grid-template-columns: 1fr; } .secret-field input[b-bp4j9cketo] { width: 100%; } .secret-field button[b-bp4j9cketo] { min-height: 44px; } .delivery-ledger > header[b-bp4j9cketo] { align-items: flex-start; flex-direction: column; } .ledger-retention[b-bp4j9cketo] { justify-items: start; } .ledger-filter-actions button[b-bp4j9cketo] { flex: 1 1 0; } .ledger-error[b-bp4j9cketo], .ledger-paging[b-bp4j9cketo] { align-items: stretch; flex-direction: column; } .ledger-error button[b-bp4j9cketo], .ledger-paging button[b-bp4j9cketo] { width: 100%; min-height: var(--pulse-control-min-height, 44px); } .delivery-table-wrap[b-bp4j9cketo] { overflow: visible; margin-inline: 0; border: 0; } .delivery-table-wrap table[b-bp4j9cketo] { min-width: 0; } .delivery-table-wrap thead[b-bp4j9cketo] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .delivery-table-wrap tbody[b-bp4j9cketo] { display: grid; gap: .65rem; } .delivery-table-wrap tr[b-bp4j9cketo] { display: grid; padding: .55rem; border: 1px solid var(--hub-border); border-radius: .7rem; background: var(--hub-surface); } .delivery-table-wrap td[b-bp4j9cketo] { display: grid; grid-template-columns: minmax(6.5rem, .4fr) minmax(0, 1fr); gap: .5rem; padding: .45rem; border-bottom: 1px solid var(--hub-border); overflow-wrap: anywhere; } .delivery-table-wrap td[b-bp4j9cketo]::before { color: var(--hub-muted); font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; content: attr(data-label); } .delivery-table-wrap td:last-child[b-bp4j9cketo] { border-bottom: 0; } .delivery-table-wrap td strong[b-bp4j9cketo], .delivery-table-wrap td small[b-bp4j9cketo] { max-width: 100%; white-space: normal; } .event-coverage-list article[b-bp4j9cketo] { min-height: 3.8rem; } }
/* Measured against the page, which is 252px of sidebar narrower than the window:
   viewport breakpoints left these grids wider than the space they render in and
   scrolled the whole document sideways. */
@container hub-page (min-width: 42rem) and (max-width: 60rem) { .command-metrics[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slo-card[b-bp4j9cketo] { grid-column: 1 / -1; } }
@container hub-page (max-width: 58rem) { .ledger-filters[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger-filter-actions[b-bp4j9cketo] { grid-column: 1 / -1; justify-content: flex-end; } }
@container hub-page (max-width: 46rem) { .integration-workbench[b-bp4j9cketo] { grid-template-columns: 1fr; } }
@container hub-editor (min-width: 52rem) {
    .setup-steps[b-bp4j9cketo] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: start; }
    .setup-step .editor-fields[b-bp4j9cketo] { grid-template-columns: minmax(0, 1fr); }
}
@container hub-page (max-width: 30rem) { .ledger-filters[b-bp4j9cketo] { grid-template-columns: minmax(0, 1fr); } .ledger-filter-actions[b-bp4j9cketo] { grid-column: auto; } }
@media (any-pointer: coarse) { .integration-breadcrumbs[b-bp4j9cketo], .integration-breadcrumbs a[b-bp4j9cketo] { min-height: var(--pulse-control-min-height, 44px); } }
@media (prefers-reduced-motion: reduce) { .integration-page *[b-bp4j9cketo], .integration-page *[b-bp4j9cketo]::before, .integration-page *[b-bp4j9cketo]::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* /Components/Pages/MqttBridge.razor.rz.scp.css */
/* The MQTT sensor bridge.

   Drawn as the pipeline it configures - the broker, the mappings, then the
   topics the broker has actually heard - because the only question anyone
   opens it with is "why is my sensor not raising an alarm". Same bones and
   finish as the Integra bridge page, so an administrator who knows one bridge
   screen knows them all.

   CSS isolation limits selector reach, but the product's semantic custom
   properties still inherit into the component. Keep this page on that shared
   palette so light, dark and accessibility changes apply everywhere. */

.mqtt-page[b-hazyzlinp6] {
    --mqb-surface: var(--pulse-surface);
    --mqb-soft: var(--pulse-surface-soft);
    --mqb-border: var(--pulse-border);
    --mqb-control-border: var(--pulse-border-strong);
    --mqb-ink: var(--pulse-text);
    --mqb-muted: var(--pulse-muted);
    --mqb-accent: var(--pulse-accent);
    --mqb-good: var(--pulse-success-text);
    --mqb-bad: var(--pulse-danger-text);
    --mqb-warn: var(--pulse-warning-text);
    --mqb-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: mqtt-workspace / inline-size;
    color: var(--mqb-ink);
    line-height: 1.45;
    min-width: 0;
}

.mqtt-page[aria-busy="true"][b-hazyzlinp6] { cursor: progress; }

.mqtt-page button[b-hazyzlinp6] { font-family: inherit; font-size: .875rem; cursor: pointer; }
.mqtt-page button:disabled[b-hazyzlinp6] { cursor: not-allowed; opacity: .55; }

.mqtt-page :is(button, input, select):focus-visible[b-hazyzlinp6] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.mqtt-page code[b-hazyzlinp6] {
    font-family: var(--mqb-mono);
    font-size: .95em;
}

/* ---- the direction card ---------------------------------------------- */

.mqb-directions[b-hazyzlinp6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.mqb-direction[b-hazyzlinp6] {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--mqb-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--mqb-surface);
    box-shadow: none;
}

.mqb-direction > header[b-hazyzlinp6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    align-items: center;
}

.mqb-direction-kicker[b-hazyzlinp6] {
    grid-column: 1;
    color: var(--mqb-muted);
    font-size: .75rem;
    font-weight: 600;
}

.mqb-direction h2[b-hazyzlinp6] {
    grid-column: 1;
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.015em;
    line-height: 1.3;
    font-weight: 700;
}

.mqb-direction > p[b-hazyzlinp6] {
    margin: .4rem 0 .55rem;
    color: var(--mqb-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.mqb-state-pill[b-hazyzlinp6] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: .25rem .5rem;
    border: 1px solid var(--mqb-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--mqb-muted);
    background: var(--mqb-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mqb-state-pill.is-good[b-hazyzlinp6] { color: var(--mqb-good); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.mqb-state-pill.is-broken[b-hazyzlinp6] { color: var(--mqb-bad); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.mqb-state-pill.is-working[b-hazyzlinp6] { color: var(--mqb-warn); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }

/* Off is a mode the operator chose, not a state the bridge fell into, so it
   wears an outline instead of a filled state colour. */
.mqb-state-pill.is-off[b-hazyzlinp6] { border-style: dashed; background: transparent; }

/* One glance answers "is anything wrong": counters read value-first in the
   data face, problems carry their tint only while they are non-zero, and a
   zero recedes to a whisper instead of standing shoulder to shoulder with the
   number that needs acting on. */
.mqb-metrics[b-hazyzlinp6] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.mqb-metric[b-hazyzlinp6] {
    display: grid;
    justify-items: start;
    gap: .12rem;
    /* Wide enough that a counter rolling from 9 to 10 (or 99 to 100) does not
       resize the tile and make the whole row jitter on live traffic. */
    min-width: 6.25rem;
    padding: .42rem .55rem .38rem;
    border: 1px solid var(--mqb-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--mqb-surface);
}

.mqb-metric dd[b-hazyzlinp6] {
    order: -1;
    margin: 0;
    font-family: var(--mqb-mono);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    /* Digits keep one width, so a ticking counter does not wobble. */
    font-variant-numeric: tabular-nums;
}

.mqb-metric dt[b-hazyzlinp6] {
    color: var(--mqb-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* Broker diagnostics are a second read, not a peer of the delivery six: same
   widget, quieter. Twelve tiles at one weight in one row was the densest first
   paint in the section. */
.mqb-metrics-caption[b-hazyzlinp6] {
    margin: .55rem 0 .25rem;
    color: var(--mqb-muted);
    font-size: .75rem;
    font-weight: 700;
}

.mqb-metrics.is-secondary[b-hazyzlinp6] { gap: .3rem; }

.mqb-metrics.is-secondary .mqb-metric[b-hazyzlinp6] {
    min-width: 5.5rem;
    padding: .32rem .45rem .3rem;
}

.mqb-metrics.is-secondary .mqb-metric dd[b-hazyzlinp6] { font-size: .9rem; }

.mqb-metric.is-zero[b-hazyzlinp6] { border-color: transparent; background: var(--mqb-soft); }
.mqb-metric.is-zero dd[b-hazyzlinp6] { color: var(--mqb-muted); font-weight: 600; }
.mqb-metric.is-good dd[b-hazyzlinp6] { color: var(--mqb-good); }
.mqb-metric.is-warn[b-hazyzlinp6] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.mqb-metric.is-warn dd[b-hazyzlinp6] { color: var(--mqb-warn); }
.mqb-metric.is-bad[b-hazyzlinp6] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.mqb-metric.is-bad dd[b-hazyzlinp6] { color: var(--mqb-bad); }

/* ---- notices --------------------------------------------------------- */

.mqb-alert[b-hazyzlinp6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .8rem;
    font-weight: 600;
}

/* The notice quotes operator input (topic filters can be arbitrarily long
   unbroken strings); the text cell must shrink and break rather than push the
   page wide. */
.mqb-alert > span[b-hazyzlinp6] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mqb-alert.error[b-hazyzlinp6] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* The open-broker posture is a standing condition, not a dismissable notice:
   it stays on screen for as long as the bridge listens without credentials. */
.mqb-open-warning[b-hazyzlinp6] {
    display: grid;
    gap: .25rem;
    padding: .65rem .85rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--mqb-warn);
    background: var(--pulse-warning-soft);
    font-size: .78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mqb-open-warning strong[b-hazyzlinp6] { font-weight: 700; }
.mqb-open-warning code[b-hazyzlinp6] { font-family: var(--mqb-mono); font-size: .95em; }

/* The unmet Production requirements are the other standing condition on this
   page: same shape as the open-broker box, drawn as a plain list because every
   row is a key to set, not a status to read - nothing here is carried by
   colour alone. */
.mqb-posture[b-hazyzlinp6] {
    display: grid;
    gap: .35rem;
    padding: .65rem .85rem;
    border: 1px solid var(--mqb-border);
    border-left: .25rem solid var(--pulse-warning-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--mqb-soft);
    font-size: .78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mqb-posture strong[b-hazyzlinp6] { font-weight: 700; }
.mqb-posture > span[b-hazyzlinp6] { color: var(--mqb-muted); }
.mqb-posture code[b-hazyzlinp6] { font-family: var(--mqb-mono); font-size: .95em; }

.mqb-posture-list[b-hazyzlinp6] {
    display: grid;
    gap: .3rem;
    margin: .15rem 0 0;
    padding: 0;
    list-style: none;
}

.mqb-posture-list li[b-hazyzlinp6] {
    display: grid;
    /* The key column is wide enough for AllowedSourceAddresses to stay on one
       line, and collapses on a narrow rail rather than hyphenating it. */
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: .1rem .6rem;
    padding: .3rem .45rem;
    border: 1px solid var(--mqb-border);
    border-radius: .5rem;
    background: var(--mqb-surface);
}

.mqb-posture-list li > span[b-hazyzlinp6] { color: var(--mqb-muted); }

/* The standing-condition notes sit inside the broker panel now, directly
   above the settings they concern, so the workspace is the first block. */
.mqb-panel > .mqb-open-warning[b-hazyzlinp6],
.mqb-panel > .mqb-posture[b-hazyzlinp6] { margin: .65rem .85rem 0; }

@container mqtt-workspace (max-width: 42rem) {
    .mqb-posture-list li[b-hazyzlinp6] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- panels ---------------------------------------------------------- */

.mqb-workspace[b-hazyzlinp6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}

.mqb-stack[b-hazyzlinp6] { display: grid; gap: .7rem; align-content: start; min-width: 0; }

.mqb-panel[b-hazyzlinp6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mqb-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--mqb-surface);
    box-shadow: none;
    overflow: visible;
}

.mqb-panel-head[b-hazyzlinp6] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--mqb-border);
    background: var(--mqb-surface);
    border-radius: var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px) 0 0;
    flex-wrap: wrap;
}

.mqb-panel-head h2[b-hazyzlinp6] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mqb-panel-head > div[b-hazyzlinp6] { min-width: 0; }
.mqb-panel-head > div .mqb-count[b-hazyzlinp6] { display: block; margin-top: .08rem; }

.mqb-count[b-hazyzlinp6] {
    font-family: var(--mqb-mono);
    font-size: .75rem;
    color: var(--mqb-muted);
    white-space: nowrap;
}

.mqb-switch[b-hazyzlinp6] {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.25rem;
    padding: .2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--mqb-muted);
    cursor: pointer;
}

.mqb-switch input[b-hazyzlinp6] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--mqb-accent);
}

.mqb-hint[b-hazyzlinp6] {
    margin: 0;
    padding: 0 .85rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--mqb-muted);
}

.mqb-panel > .mqb-hint:first-of-type[b-hazyzlinp6] { padding-top: .6rem; }

/* The panel is a gapless column, so a second hint under the first would sit on
   its baseline and read as one run-on paragraph. */
.mqb-panel > .mqb-hint + .mqb-hint[b-hazyzlinp6] { margin-top: .4rem; }

.mqb-reference[b-hazyzlinp6] {
    margin: .5rem .85rem .85rem;
    border: 1px solid var(--mqb-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--mqb-surface);
}

.mqb-reference > summary[b-hazyzlinp6],
.mqb-setup-details > summary[b-hazyzlinp6] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .65rem .75rem;
    border-radius: inherit;
    color: var(--mqb-ink);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.mqb-reference > summary:focus-visible[b-hazyzlinp6],
.mqb-setup-details > summary:focus-visible[b-hazyzlinp6] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.mqb-reference-body[b-hazyzlinp6] { display: grid; gap: .6rem; padding: 0 0 .75rem; }

.mqb-setup-details[b-hazyzlinp6] { min-width: 0; }
.mqb-setup-details > summary[b-hazyzlinp6] { padding: .5rem 0; }
.mqb-setup-copy[b-hazyzlinp6] { display: block; color: var(--mqb-muted); }
.mqb-setup-details[open] > .mqb-posture-list[b-hazyzlinp6] { margin-top: .5rem; }

.mqb-empty[b-hazyzlinp6] {
    margin: .7rem .85rem;
    padding: .7rem;
    border: 1px dashed var(--mqb-border);
    border-radius: .6rem;
    color: var(--mqb-muted);
    background: var(--mqb-soft);
    font-size: .78rem;
    line-height: 1.45;
}

/* A failed read is not an empty list: it is solid-bordered, tinted, and it
   carries the only way out of the state. */
.mqb-empty[role="alert"][b-hazyzlinp6] {
    border-style: solid;
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* ---- the removal confirmation ---------------------------------------- */

.mqb-confirm[b-hazyzlinp6] {
    display: grid;
    gap: .4rem;
    min-width: 0;
    padding: .6rem;
    border-top: 1px solid var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.mqb-confirm strong[b-hazyzlinp6] { font-size: .78rem; }

.mqb-confirm p[b-hazyzlinp6] {
    margin: 0;
    color: var(--mqb-ink);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mqb-confirm-actions[b-hazyzlinp6] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.mqb-secondary-button[b-hazyzlinp6],
.mqb-danger-button[b-hazyzlinp6] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .4rem .7rem;
    border: 1px solid var(--mqb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--mqb-ink);
    background: var(--mqb-surface);
    font-size: .875rem;
    font-weight: 700;
}

.mqb-danger-button[b-hazyzlinp6] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
}

.mqb-secondary-button:hover:not(:disabled)[b-hazyzlinp6] { background: var(--mqb-soft); }
.mqb-danger-button:hover:not(:disabled)[b-hazyzlinp6] { background: color-mix(in srgb, var(--pulse-danger-text) 12%, var(--mqb-surface)); }

/* ---- the last refusal ------------------------------------------------ */

.mqb-direction > p.mqb-refusal-line[b-hazyzlinp6] {
    margin: .5rem 0 0;
    color: var(--mqb-bad);
    font-size: .76rem;
    line-height: 1.4;
}

.mqb-refusal-line a[b-hazyzlinp6] { color: inherit; }

/* ---- the broker form (read-only in v1) ------------------------------- */

.mqb-form[b-hazyzlinp6] {
    display: grid;
    gap: .7rem 1rem;
    align-items: start;
    padding: .75rem .85rem .9rem;
}

.mqb-form label[b-hazyzlinp6] {
    display: grid;
    gap: .3rem;
    min-width: 0;
    align-content: start;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mqb-muted);
}

.mqb-form small[b-hazyzlinp6] {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--mqb-muted);
    overflow-wrap: anywhere;
}

.mqb-form .mqb-hint[b-hazyzlinp6] { padding: 0; margin-top: .1rem; }

/* Effective settings use the width of the workspace. Keeping this reference
   in a narrow rail made its security guidance taller than the mapping list. */
@container mqtt-workspace (min-width: 48rem) {
    .mqb-form[b-hazyzlinp6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mqb-form > label:first-child[b-hazyzlinp6],
    .mqb-form > .mqb-hint[b-hazyzlinp6] { grid-column: 1 / -1; }
}

@container mqtt-workspace (min-width: 80rem) {
    .mqb-form[b-hazyzlinp6] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mqb-stack[b-hazyzlinp6] { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.mqtt-page select[b-hazyzlinp6],
.mqtt-page input[type="text"][b-hazyzlinp6],
.mqtt-page input:not([type])[b-hazyzlinp6] {
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    box-sizing: border-box;
    padding: .48rem .65rem;
    border: 1px solid var(--mqb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--mqb-ink);
    background: var(--mqb-surface);
    font-family: inherit;
    font-size: .875rem;
}

/* Effective values, not editable ones: quieter surface, no input affordance. */
.mqtt-page input[readonly][b-hazyzlinp6] {
    background: var(--mqb-soft);
    color: var(--mqb-muted);
    cursor: default;
}

.mqtt-page input.mqb-mono[b-hazyzlinp6] { font-family: var(--mqb-mono); }

/* ---- recent refusals ------------------------------------------------- */

/* Devices that knocked and were turned away. Lives inside the broker panel:
   the first question after "why is my gateway silent" is answered here. */
.mqb-refusals[b-hazyzlinp6] {
    display: grid;
    gap: .35rem;
    padding: 0 .85rem .85rem;
}

.mqb-refusals h3[b-hazyzlinp6] {
    margin: 0;
    color: var(--mqb-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mqb-refusals ul[b-hazyzlinp6] {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mqb-refusals li[b-hazyzlinp6] {
    display: grid;
    gap: .06rem;
    padding: .4rem .55rem;
    border: 1px solid var(--pulse-warning-border);
    border-radius: .5rem;
    background: var(--pulse-warning-soft);
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mqb-refusal-client[b-hazyzlinp6] {
    font-family: var(--mqb-mono);
    font-weight: 700;
    color: var(--mqb-ink);
}

.mqb-refusal-why[b-hazyzlinp6] { color: var(--mqb-warn); }

/* ---- mapping rows ---------------------------------------------------- */

.mqb-rows[b-hazyzlinp6] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .85rem;
    list-style: none;
}

.mqb-rows li[b-hazyzlinp6] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, .7fr) auto auto;
    gap: .2rem .35rem;
    align-items: center;
}

.mqb-rows li.is-disabled :is(input.mqb-mono, select)[b-hazyzlinp6] { opacity: .6; }

/* The evidence line under each mapping row: match proof, and the decode
   failure when there is one. Full-width so long topics and payload excerpts
   wrap instead of colliding with the row's controls. */
.mqb-row-note[b-hazyzlinp6] {
    display: grid;
    grid-column: 1 / -1;
    gap: .12rem;
    padding: 0 .1rem .3rem;
    font-size: .75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mqb-row-matches[b-hazyzlinp6] { color: var(--mqb-muted); }

/* "Never matched" recedes further: it is an absence, not an alarm. */
.mqb-row-matches.is-never[b-hazyzlinp6] { font-style: italic; opacity: .8; }

.mqb-row-failure[b-hazyzlinp6] {
    color: var(--mqb-warn);
    font-weight: 600;
}

.mqb-row-failure code[b-hazyzlinp6],
.mqb-row-failure .mqb-row-failure-topic[b-hazyzlinp6] {
    font-family: var(--mqb-mono);
    font-weight: 600;
}

.mqb-rows-arrow[b-hazyzlinp6] { color: var(--mqb-muted); font-size: .9rem; }

.mqb-row-enabled[b-hazyzlinp6] {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    color: var(--mqb-muted);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.mqb-row-enabled input[b-hazyzlinp6] {
    width: 1rem;
    height: 1rem;
    min-height: 0;
    accent-color: var(--mqb-accent);
}

/* The add row: the observed-topic picker and the free-text filter stack in
   the first column - pick or type, both land in the same filter. */
.mqb-rows .mqb-new[b-hazyzlinp6] {
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, .7fr) auto;
    padding-top: .35rem;
    border-top: 1px dashed var(--mqb-border);
}

.mqb-new-filter[b-hazyzlinp6] { display: grid; gap: .25rem; min-width: 0; }

.mqb-tiny-button[b-hazyzlinp6] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--mqb-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.mqb-tiny-button:hover:not(:disabled)[b-hazyzlinp6] {
    color: var(--mqb-accent);
    background: var(--mqb-soft);
}

.mqb-alert .mqb-tiny-button[b-hazyzlinp6] { color: inherit; }

.mqb-rows .mqb-tiny-button:hover:not(:disabled)[b-hazyzlinp6] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.mqb-add-button[b-hazyzlinp6] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .75rem;
    border: 1px solid var(--mqb-accent);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--mqb-accent);
    background: var(--mqb-surface);
    font-size: .875rem;
    font-weight: 700;
}

.mqb-add-button:hover:not(:disabled)[b-hazyzlinp6] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

/* The empty state carries the only way out of itself, so its button owns the
   full width of the notice. Placed after the base rule it derives from. */
.mqb-empty .mqb-add-button[b-hazyzlinp6] {
    display: block;
    margin-top: .55rem;
}

/* ---- observed topics ------------------------------------------------- */

.mqb-topics[b-hazyzlinp6] {
    /* No height cap on this card grid: a definite max-height turns it into a
       fit-to-box grid that squeezes every row and clips the card footers
       (the documented trap). The 500-topic store cap already bounds the list;
       the page scrolls honestly. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    grid-auto-rows: max-content;
    gap: .3rem;
    margin: 0;
    padding: .6rem .85rem .75rem;
    list-style: none;
    align-items: stretch;
}

/* One card, one anatomy: topic and count in the pressable area, the mapping
   status pinned as a footer inside the same border. Column flex, not a nested
   grid - an auto-fill grid measuring a child grid's rows under-counts them
   and silently clips the card bottom. */
.mqb-topics li[b-hazyzlinp6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mqb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--mqb-surface);
    overflow: hidden;
}

.mqb-topics li > button[b-hazyzlinp6] {
    display: grid;
    flex: 1 1 auto;
    gap: .3rem;
    align-content: start;
    width: 100%;
    padding: .52rem .6rem .5rem;
    border: 0;
    color: var(--mqb-ink);
    background: var(--mqb-surface);
    text-align: left;
}

.mqb-topics li:hover:not(:has(button:disabled))[b-hazyzlinp6] { border-color: var(--mqb-accent); }
.mqb-topics li:hover:not(:has(button:disabled)) > button[b-hazyzlinp6] { background: var(--mqb-soft); }

.mqb-topic-head[b-hazyzlinp6] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* The topic name stays single-line and ellipsized: unbounded wrapping feeds
   the grid's circular intrinsic row sizing and the card bottom silently
   clips. The button tooltip carries the full topic. */
.mqb-topic-name[b-hazyzlinp6] {
    overflow: hidden;
    font-family: var(--mqb-mono);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mqb-topic-count[b-hazyzlinp6] {
    flex: none;
    margin-left: auto;
    padding: .08rem .44rem;
    border: 1px solid color-mix(in srgb, var(--mqb-accent) 40%, transparent);
    border-radius: 999px;
    color: var(--mqb-accent);
    background: color-mix(in srgb, var(--mqb-accent) 9%, transparent);
    font-family: var(--mqb-mono);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* The payload preview is the raise/clear-deciding value, so it earns two full
   lines before clamping. The clamp keeps the height bounded, which keeps the
   auto-fill grid's row sizing deterministic (unbounded wrapping is what feeds
   the circular-sizing clip trap); the title attribute carries the full text. */
.mqb-topic-payload[b-hazyzlinp6] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--mqb-muted);
    font-family: var(--mqb-mono);
    font-size: .75rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mqb-topic-foot[b-hazyzlinp6] {
    display: flex;
    flex: none;
    gap: .3rem;
    align-items: center;
    min-width: 0;
    margin: 0 .45rem;
    padding: .18rem .15rem .24rem;
    border-top: 1px dashed var(--mqb-border);
    color: var(--mqb-warn);
    font-size: .75rem;
    font-weight: 600;
}

.mqb-topic-foot-text[b-hazyzlinp6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The forget affordance sits in the footer, outside the card's main button
   (nesting buttons is invalid HTML and steals the click). */
.mqb-topic-foot .mqb-tiny-button[b-hazyzlinp6] {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .95rem;
}

.mqb-topic-foot .mqb-tiny-button:hover:not(:disabled)[b-hazyzlinp6] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* An unmapped topic is the warning; a mapped one recedes to neutral. */
.mqb-topic-foot.is-mapped[b-hazyzlinp6] { color: var(--mqb-muted); }

/* ---- touch ----------------------------------------------------------- */

/* Coarse pointers get 44px targets regardless of viewport width: a wall
   tablet is wide AND finger-driven. Checkboxes are excluded from the global
   sizing rule, so their label wrappers carry the hit height instead. */
@media (any-pointer: coarse) {
    .mqb-tiny-button[b-hazyzlinp6] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .mqb-switch[b-hazyzlinp6],
    .mqb-row-enabled[b-hazyzlinp6] {
        min-height: 2.75rem;
    }
}

/* ---- small screens --------------------------------------------------- */

@media (max-width: 640px) {
    .mqtt-page[b-hazyzlinp6] {
        gap: .75rem;
        padding: .75rem;
    }

    .mqtt-page select[b-hazyzlinp6],
    .mqtt-page input[type="text"][b-hazyzlinp6],
    .mqtt-page input:not([type])[b-hazyzlinp6] {
        font-size: 1rem;
    }

    .mqb-panel-head[b-hazyzlinp6] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Each row folds into a stack: filter, module, JSON field full-width,
       then the enabled toggle and the remove button side by side. */
    .mqb-rows li[b-hazyzlinp6],
    .mqb-rows .mqb-new[b-hazyzlinp6] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem;
    }

    .mqb-rows-arrow[b-hazyzlinp6] { display: none; }

    .mqb-rows li > input[b-hazyzlinp6],
    .mqb-rows li > select[b-hazyzlinp6],
    .mqb-rows li > .mqb-new-filter[b-hazyzlinp6] { grid-column: 1 / -1; }

    .mqb-rows li > .mqb-row-enabled[b-hazyzlinp6] { grid-column: 1; justify-self: start; }
    .mqb-rows li > .mqb-tiny-button[b-hazyzlinp6] { grid-column: 2; }

    .mqb-rows .mqb-tiny-button[b-hazyzlinp6] { min-width: 2.75rem; min-height: 2.75rem; }

    .mqb-rows .mqb-add-button[b-hazyzlinp6] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 2.75rem;
    }

    .mqb-rows .mqb-new[b-hazyzlinp6] {
        margin-top: .2rem;
        padding-top: .65rem;
    }

    .mqb-topics[b-hazyzlinp6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.system-state-page[b-msvkqm6qn1] {
    --state-accent: var(--pulse-accent);
    --state-accent-soft: var(--pulse-accent-soft);
    --state-accent-border: var(--pulse-border);
    align-items: flex-start;
    background: var(--pulse-canvas);
    box-sizing: border-box;
    color: var(--pulse-text);
    display: flex;
    justify-content: center;
    min-height: calc(100vh - var(--pulse-commandbar-height));
    min-height: calc(100dvh - var(--pulse-commandbar-height));
    padding: clamp(24px, 4vw, 48px) var(--pulse-workspace-pad-x);
}

.system-state-card[b-msvkqm6qn1] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-xl);
    box-sizing: border-box;
    max-width: 700px;
    padding: clamp(24px, 3vw, 36px);
    position: relative;
    text-align: left;
    width: 100%;
}

.state-symbol[b-msvkqm6qn1] {
    align-items: center;
    background: var(--state-accent-soft);
    border: 1px solid var(--state-accent-border);
    border-radius: var(--pulse-radius-md);
    color: var(--state-accent);
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 0 0 1rem;
    width: 48px;
}

.state-symbol svg[b-msvkqm6qn1] {
    fill: none;
    height: 28px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 28px;
}

.state-eyebrow[b-msvkqm6qn1] {
    color: var(--state-accent);
    font-size: max(.75rem, var(--pulse-workspace-eyebrow-size));
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.system-state-card h1[b-msvkqm6qn1] {
    color: var(--pulse-text);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin: .5rem 0 .75rem;
    max-width: 590px;
}

.system-state-card > p[b-msvkqm6qn1] {
    color: var(--pulse-muted);
    font-size: .9375rem;
    line-height: 1.45;
    margin: 0;
    max-width: 560px;
}

.state-actions[b-msvkqm6qn1] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
    margin-top: 1.25rem;
}

.state-actions a[b-msvkqm6qn1] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    box-sizing: border-box;
    color: var(--pulse-text);
    display: inline-flex;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .55rem 1rem;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease;
}

.state-actions a.primary[b-msvkqm6qn1] {
    background: var(--pulse-action);
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
}

.state-actions a:hover[b-msvkqm6qn1] {
    border-color: var(--state-accent);
}

.state-actions a:focus-visible[b-msvkqm6qn1] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 3px;
}

.state-footnote[b-msvkqm6qn1] {
    align-items: center;
    border-top: 1px solid var(--pulse-border);
    color: var(--pulse-muted);
    display: flex;
    font-size: .75rem;
    gap: .5rem;
    justify-content: flex-start;
    line-height: 1.45;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.state-footnote span[b-msvkqm6qn1] {
    background: var(--pulse-success);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
}

html[data-theme="dark"] .system-state-page[b-msvkqm6qn1] {
    --state-accent: var(--pulse-accent);
    --state-accent-soft: var(--pulse-accent-soft);
    --state-accent-border: var(--pulse-border);
    background: var(--pulse-canvas);
}

@media (max-width: 560px) {
    .system-state-page[b-msvkqm6qn1] {
        min-height: calc(100vh - 112px);
        min-height: calc(100dvh - 112px);
        padding: 16px 10px 24px;
    }

    .system-state-card[b-msvkqm6qn1] {
        border-radius: var(--pulse-radius-lg);
        padding: 24px 18px;
    }

    .state-actions[b-msvkqm6qn1] {
        align-items: stretch;
        flex-direction: column;
    }

    .state-actions a[b-msvkqm6qn1] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .state-actions a[b-msvkqm6qn1] {
        transition: none;
    }

    .state-actions a:hover[b-msvkqm6qn1] {
        transform: none;
    }
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
.notifications-page[b-wveo7cicj6] {
    box-sizing: border-box;
    display: grid;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    min-width: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    color: var(--pulse-text);
    font-size: .875rem;
    line-height: 1.45;
}

.notification-card[b-wveo7cicj6] {
    min-width: 0;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    background: var(--pulse-surface);
    padding: .75rem 1rem;
}

.notifications-hero[b-wveo7cicj6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    min-height: var(--pulse-control-min-height);
    padding: 0;
}

.notification-title-line[b-wveo7cicj6] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.notifications-hero h1[b-wveo7cicj6] { margin: 0; color: var(--pulse-text); font-size: var(--pulse-workspace-title-size); font-weight: 700; line-height: 1.3; }
.notifications-hero .notification-unread-summary[b-wveo7cicj6] { margin: 0; padding: .15rem .5rem; border: 1px solid var(--pulse-border); border-radius: 999px; color: var(--pulse-muted); background: var(--pulse-surface-soft); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.notification-filters[b-wveo7cicj6] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding: .5rem .75rem;
}

.notification-filters label[b-wveo7cicj6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 1 auto;
    min-width: 0;
}

.notification-filters label > span[b-wveo7cicj6],
.notification-kind[b-wveo7cicj6] {
    color: var(--pulse-muted);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.notification-filters select[b-wveo7cicj6] {
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    font: inherit;
    font-size: .875rem;
    min-height: var(--pulse-control-min-height);
    padding: .45rem .65rem;
    width: auto;
    min-width: 8rem;
}

.notification-operation-status[b-wveo7cicj6] {
    margin: 0;
    min-height: 1.25rem;
    outline-offset: .2rem;
}

.notification-operation-status:empty[b-wveo7cicj6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.notification-list[b-wveo7cicj6] {
    display: grid;
    gap: .5rem;
}

.notification-card[b-wveo7cicj6] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; }
.notification-card.unread[b-wveo7cicj6] {
    border-inline-start: .2rem solid var(--pulse-accent);
}

.notification-card.read[b-wveo7cicj6] { border-inline-start: .2rem solid var(--pulse-border); }

.notification-card-heading[b-wveo7cicj6],
.notification-actions[b-wveo7cicj6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.notification-card-heading[b-wveo7cicj6] { grid-column: 1 / -1; }
.notification-card-content[b-wveo7cicj6] { min-width: 0; display: grid; gap: .25rem; }
.notification-card-metadata[b-wveo7cicj6] { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; min-width: 0; }
.notification-read-state[b-wveo7cicj6] { padding: .15rem .5rem; border: 1px solid var(--pulse-border); border-radius: 999px; color: var(--pulse-muted); font-size: .75rem; font-weight: 600; }
.notification-card.unread .notification-read-state[b-wveo7cicj6] { border-color: var(--pulse-info-border); color: var(--pulse-info-strong); background: var(--pulse-info-soft); }
.notification-card time[b-wveo7cicj6] { margin-inline-start: auto; font-size: .8125rem; font-variant-numeric: tabular-nums; }

.notification-card h2[b-wveo7cicj6] {
    margin: 0;
    color: var(--pulse-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.notification-card.unread h2[b-wveo7cicj6] { font-weight: 700; }

.notification-card p[b-wveo7cicj6],
.notification-card time[b-wveo7cicj6] {
    color: var(--pulse-muted);
}

.notification-body[b-wveo7cicj6] { min-width: 0; margin: 0; line-height: 1.45; overflow-wrap: anywhere; }

.notification-actions[b-wveo7cicj6] {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-content: flex-start;
    gap: .5rem;
    margin: 0;
}

.notification-actions a[b-wveo7cicj6],
.notification-actions button[b-wveo7cicj6],
.notifications-hero button[b-wveo7cicj6],
.notification-error button[b-wveo7cicj6],
.notification-more button[b-wveo7cicj6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--pulse-control-min-height);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    background: var(--pulse-control-surface);
    color: var(--pulse-control-text);
    cursor: pointer;
    padding: .55rem .8rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.notification-actions a[b-wveo7cicj6] { border-color: var(--pulse-accent-border); color: var(--pulse-link); background: var(--pulse-accent-soft); }
.notification-actions a:hover[b-wveo7cicj6] { border-color: var(--pulse-accent); background: var(--pulse-control-surface-hover); }
.notifications-page button:hover:not(:disabled)[b-wveo7cicj6] { border-color: var(--pulse-accent); background: var(--pulse-control-surface-hover); }
.notifications-page :is(a, button, select):focus-visible[b-wveo7cicj6] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 3px; }
.notification-action-spinner[b-wveo7cicj6] { width: 1rem; height: 1rem; flex: 0 0 1rem; border: 2px solid var(--pulse-border-strong); border-top-color: currentColor; border-radius: 50%; animation: notification-action-spin-b-wveo7cicj6 .75s linear infinite; }
@keyframes notification-action-spin-b-wveo7cicj6 { to { transform: rotate(360deg); } }

.notification-actions button:disabled[b-wveo7cicj6],
.notifications-hero button:disabled[b-wveo7cicj6],
.notification-more button:disabled[b-wveo7cicj6] {
    cursor: progress;
    opacity: var(--pulse-disabled-opacity);
}

.notification-empty[b-wveo7cicj6],
.notification-error[b-wveo7cicj6] {
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    padding: 1rem;
}

.notification-empty[b-wveo7cicj6] { color: var(--pulse-muted); background: var(--pulse-surface-soft); }
.notification-error[b-wveo7cicj6] {
    align-items: center;
    border-color: var(--pulse-danger-border);
    background: var(--pulse-danger-soft);
    color: var(--pulse-danger-text);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.notification-more[b-wveo7cicj6] {
    display: flex;
    justify-content: center;
}

.notification-history-end[b-wveo7cicj6] {
    margin: 0;
    color: var(--pulse-muted);
    font-size: .8rem;
    text-align: center;
}

@media (min-width: 1200px) {
    .notification-card[b-wveo7cicj6] { grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 1rem; }
    .notification-card-heading[b-wveo7cicj6] { grid-column: 1; display: grid; justify-content: start; gap: .35rem; align-self: start; }
    .notification-card time[b-wveo7cicj6] { margin-inline-start: 0; }
    .notification-actions[b-wveo7cicj6] { grid-column: 3; grid-row: 1; }
}

@media (any-pointer: coarse) {
    .notification-actions a[b-wveo7cicj6],
    .notification-actions button[b-wveo7cicj6],
    .notifications-hero button[b-wveo7cicj6],
    .notification-error button[b-wveo7cicj6],
    .notification-more button[b-wveo7cicj6],
    .notification-filters select[b-wveo7cicj6] {
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    .notifications-page[b-wveo7cicj6] { padding: .75rem .625rem 1.75rem; }
    .notification-filters[b-wveo7cicj6] { padding: .75rem; gap: .625rem; }
    .notification-filters label[b-wveo7cicj6] { flex: 1 1 100%; }
    .notification-filters select[b-wveo7cicj6] { flex: 1 1 auto; width: 100%; min-width: 0; }
    .notification-card[b-wveo7cicj6] { grid-template-columns: minmax(0, 1fr); padding: .75rem; }
    .notification-actions[b-wveo7cicj6] { grid-column: 1; grid-row: auto; margin-top: .2rem; }
    .notification-card time[b-wveo7cicj6] { margin-inline-start: 0; }
    .notification-actions > :is(a, button)[b-wveo7cicj6] { flex: 1 1 8rem; }

    .notifications-hero button[b-wveo7cicj6],
    .notification-actions a[b-wveo7cicj6],
    .notification-actions button[b-wveo7cicj6] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-action-spinner[b-wveo7cicj6] { animation: none; }
}
/* /Components/Pages/OnvifBridge.razor.rz.scp.css */
/* The ONVIF camera-event bridge.

   The page is drawn as the pipeline it configures - cameras, the mapping,
   then the observed catalog that feeds it - because the only question anyone
   opens it with is "why is this camera's event not an alarm". Everything on
   the screen is the answer to that question, in the order you would fix it.

   CSS isolation limits selector reach, but the product's semantic custom
   properties still inherit into the component. Keep this page on that shared
   palette so light, dark and accessibility changes apply everywhere. */

.onvif-page[b-gqg6iya791] {
    --ovb-surface: var(--pulse-surface);
    --ovb-soft: var(--pulse-surface-soft);
    --ovb-border: var(--pulse-border);
    --ovb-control-border: var(--pulse-border-strong);
    --ovb-ink: var(--pulse-text);
    --ovb-muted: var(--pulse-muted);
    --ovb-accent: var(--pulse-accent);
    --ovb-good: var(--pulse-success-text);
    --ovb-bad: var(--pulse-danger-text);
    --ovb-warn: var(--pulse-warning-text);
    --ovb-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: onvif-workspace / inline-size;
    color: var(--ovb-ink);
    line-height: 1.45;
    min-width: 0;
}

.onvif-page[aria-busy="true"][b-gqg6iya791] { cursor: progress; }

.onvif-page button[b-gqg6iya791] { font-family: inherit; font-size: .875rem; cursor: pointer; }
.onvif-page button:disabled[b-gqg6iya791] { cursor: not-allowed; opacity: .55; }

.onvif-page :is(button, input, select):focus-visible[b-gqg6iya791] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* ---- the direction card ---------------------------------------------- */

.ovb-directions[b-gqg6iya791] { display: grid; gap: .65rem; }

.ovb-direction[b-gqg6iya791] {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--ovb-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--ovb-surface);
    box-shadow: none;
}

.ovb-direction > header[b-gqg6iya791] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    align-items: center;
}

.ovb-direction-kicker[b-gqg6iya791] {
    grid-column: 1;
    color: var(--ovb-muted);
    font-size: .75rem;
    font-weight: 600;
}

.ovb-direction h2[b-gqg6iya791] {
    grid-column: 1;
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.015em;
    line-height: 1.3;
    font-weight: 700;
}

.ovb-direction > p[b-gqg6iya791] {
    margin: .4rem 0 .55rem;
    color: var(--ovb-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.ovb-direction > p.ovb-refusal-line[b-gqg6iya791] {
    margin: .5rem 0 0;
    color: var(--ovb-bad);
    overflow-wrap: anywhere;
}

.ovb-refusal-line a[b-gqg6iya791] { color: inherit; }

.ovb-state-pill[b-gqg6iya791] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: .25rem .5rem;
    border: 1px solid var(--ovb-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--ovb-muted);
    background: var(--ovb-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ovb-state-pill.is-good[b-gqg6iya791] { color: var(--ovb-good); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.ovb-state-pill.is-broken[b-gqg6iya791] { color: var(--ovb-bad); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.ovb-state-pill.is-working[b-gqg6iya791] { color: var(--ovb-warn); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }

/* Switched off is a mode the operator chose, not a state the bridge is in, so
   it wears an outline instead of a filled state colour. */
.ovb-state-pill.is-off[b-gqg6iya791] { border-style: dashed; background: transparent; }

/* One glance answers "is anything wrong": counters read value-first in the
   data face, problems carry their tint only while they are non-zero, and a
   zero recedes to a whisper instead of standing shoulder to shoulder with the
   number that needs acting on. */
.ovb-metrics[b-gqg6iya791] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.ovb-metric[b-gqg6iya791] {
    display: grid;
    justify-items: start;
    gap: .12rem;
    /* Wide enough that a counter rolling into a new digit count does not
       reflow the whole strip once a second. */
    min-width: 6.25rem;
    padding: .42rem .55rem .38rem;
    border: 1px solid var(--ovb-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--ovb-surface);
}

.ovb-metric dd[b-gqg6iya791] {
    order: -1;
    margin: 0;
    font-family: var(--ovb-mono);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ovb-metric dt[b-gqg6iya791] {
    color: var(--ovb-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.ovb-metric.is-zero[b-gqg6iya791] { border-color: transparent; background: var(--ovb-soft); }
.ovb-metric.is-zero dd[b-gqg6iya791] { color: var(--ovb-muted); font-weight: 600; }
.ovb-metric.is-good dd[b-gqg6iya791] { color: var(--ovb-good); }
.ovb-metric.is-warn[b-gqg6iya791] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.ovb-metric.is-warn dd[b-gqg6iya791] { color: var(--ovb-warn); }
.ovb-metric.is-bad[b-gqg6iya791] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.ovb-metric.is-bad dd[b-gqg6iya791] { color: var(--ovb-bad); }

/* ---- notices --------------------------------------------------------- */

.ovb-alert[b-gqg6iya791] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .8rem;
    font-weight: 600;
}

/* Notices quote raw ONVIF topics and camera fault text; an unbroken token
   must wrap anywhere rather than push the dismiss button off the card. */
.ovb-alert > span[b-gqg6iya791] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ovb-alert.error[b-gqg6iya791] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.ovb-alert .ovb-tiny-button[b-gqg6iya791] { color: inherit; }

/* ---- panels ---------------------------------------------------------- */

.ovb-workspace[b-gqg6iya791] { display: grid; gap: .7rem; }

.ovb-mappings[b-gqg6iya791] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: .7rem;
    align-items: start;
}

@container onvif-workspace (max-width: 68rem) {
    .ovb-mappings[b-gqg6iya791] { grid-template-columns: minmax(0, 1fr); }
}

.ovb-panel[b-gqg6iya791] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--ovb-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--ovb-surface);
    box-shadow: none;
    overflow: visible;
}

.ovb-panel-head[b-gqg6iya791] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--ovb-border);
    background: var(--ovb-surface);
    border-radius: var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px) 0 0;
    flex-wrap: wrap;
}

.ovb-panel-head h2[b-gqg6iya791] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ovb-panel-head > div[b-gqg6iya791] { min-width: 0; }
.ovb-panel-head > div .ovb-count[b-gqg6iya791] { display: block; margin-top: .08rem; }

.ovb-count[b-gqg6iya791] {
    font-family: var(--ovb-mono);
    font-size: .75rem;
    color: var(--ovb-muted);
    white-space: nowrap;
}

.ovb-switch[b-gqg6iya791] {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.25rem;
    padding: .2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ovb-muted);
    cursor: pointer;
}

.ovb-switch input[b-gqg6iya791] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--ovb-accent);
}

.ovb-hint[b-gqg6iya791] {
    margin: 0;
    padding: 0 .85rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ovb-muted);
}

.ovb-panel > .ovb-hint:first-of-type[b-gqg6iya791] { padding-top: .6rem; }

.ovb-empty[b-gqg6iya791] {
    margin: .7rem .85rem;
    padding: .7rem;
    border: 1px dashed var(--ovb-border);
    border-radius: .6rem;
    color: var(--ovb-muted);
    background: var(--ovb-soft);
    font-size: .78rem;
}

.onvif-page select[b-gqg6iya791],
.onvif-page input[type="search"][b-gqg6iya791],
.onvif-page input[type="text"][b-gqg6iya791],
.onvif-page input[type="password"][b-gqg6iya791],
.onvif-page input:not([type])[b-gqg6iya791] {
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    box-sizing: border-box;
    padding: .48rem .65rem;
    border: 1px solid var(--ovb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--ovb-ink);
    background: var(--ovb-surface);
    font-family: inherit;
    font-size: .875rem;
}

/* ---- camera rows ------------------------------------------------------ */

.ovb-camera-rows[b-gqg6iya791] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .85rem;
    list-style: none;
}

/* Nine tracks: name, host, port, user, password, enabled, status, test,
   remove. The name is an input now — renaming in place keeps the camera's
   mappings and catalog, where delete-and-recreate cascades them away. */
.ovb-camera-rows li[b-gqg6iya791] {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1.1fr) 4.4rem minmax(0, .85fr)
        minmax(0, 1.1fr) auto minmax(0, 1.1fr) auto auto;
    gap: .35rem;
    align-items: center;
}

.ovb-camera-rows .ovb-new[b-gqg6iya791] {
    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1.1fr) 4.4rem minmax(0, .85fr)
        minmax(0, 1.1fr) auto auto;
    padding-top: .35rem;
    border-top: 1px dashed var(--ovb-border);
}

/* The identity field keeps the old label's weight so the row still reads
   name-first. */
.onvif-page input.ovb-cam-name[b-gqg6iya791] { font-weight: 700; }

.ovb-cam-port[b-gqg6iya791] { text-align: center; }

.ovb-cam-enabled[b-gqg6iya791] {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    color: var(--ovb-muted);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ovb-cam-enabled input[b-gqg6iya791] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ovb-accent);
}

/* The row's live truth: what the worker last managed with this camera. It is
   written by the pull loop, so it earns the data face. */
.ovb-cam-status[b-gqg6iya791] {
    overflow: hidden;
    color: var(--ovb-muted);
    font-family: var(--ovb-mono);
    font-size: .75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-cam-status.is-good[b-gqg6iya791] { color: var(--ovb-good); }
.ovb-cam-status.is-bad[b-gqg6iya791] { color: var(--ovb-bad); }
.ovb-cam-status.is-off[b-gqg6iya791] { color: var(--ovb-muted); }

/* One click answers "can Pulse reach this camera with these credentials":
   quieter than Add, louder than the remove cross. */
.ovb-test-button[b-gqg6iya791] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .6rem;
    border: 1px solid var(--ovb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--ovb-muted);
    background: var(--ovb-surface);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.ovb-test-button:hover:not(:disabled)[b-gqg6iya791] {
    border-color: var(--ovb-accent);
    color: var(--ovb-accent);
    background: var(--ovb-soft);
}

/* The armed removal: the cross becomes a named Remove and a way back out, in
   the same track the cross occupied. */
.ovb-confirm[b-gqg6iya791] {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.ovb-danger-button[b-gqg6iya791] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .6rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.ovb-confirm .ovb-tiny-button[b-gqg6iya791] {
    width: auto;
    padding: 0 .5rem;
    border-radius: var(--pulse-radius-sm, 8px);
    font-size: .8rem;
    font-weight: 700;
}

/* ---- mapping rows ----------------------------------------------------- */

.ovb-rows[b-gqg6iya791] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .85rem;
    list-style: none;
}

/* Five tracks: route, arrow, target (module + match evidence), the mute
   switch, remove. */
.ovb-rows li[b-gqg6iya791] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) auto auto;
    gap: .35rem;
    align-items: center;
}

/* A muted mapping stays present and editable; it just recedes. The switch
   and the remove button keep full weight — they are how it comes back. */
.ovb-rows li.is-disabled :is(.ovb-map-route, .ovb-map-target)[b-gqg6iya791] { opacity: .55; }

.ovb-rows-arrow[b-gqg6iya791] { color: var(--ovb-muted); font-size: .9rem; }

.ovb-rows .ovb-new[b-gqg6iya791] { padding-top: .35rem; border-top: 1px dashed var(--ovb-border); }

.ovb-map-route[b-gqg6iya791] { display: grid; gap: .08rem; min-width: 0; }

.ovb-map-route strong[b-gqg6iya791] {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-map-route small[b-gqg6iya791] {
    overflow: hidden;
    color: var(--ovb-muted);
    font-family: var(--ovb-mono);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-map-target[b-gqg6iya791] { display: grid; gap: .12rem; min-width: 0; }

/* The mapping's proof it works: delivered matches and when the last one
   happened, in the data face like every other worker-written line. */
.ovb-map-evidence[b-gqg6iya791] {
    overflow: hidden;
    color: var(--ovb-muted);
    font-family: var(--ovb-mono);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-row-enabled[b-gqg6iya791] {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    color: var(--ovb-muted);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ovb-row-enabled input[b-gqg6iya791] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--ovb-accent);
}

.ovb-map-new[b-gqg6iya791] { align-items: start; }
.ovb-map-new .ovb-rows-arrow[b-gqg6iya791] { align-self: center; }
.ovb-map-source[b-gqg6iya791] { display: grid; gap: .35rem; min-width: 0; }

/* The add row has no switch or remove: route, arrow, module, Add. */
.ovb-rows .ovb-map-new[b-gqg6iya791] { grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) auto; }

.ovb-tiny-button[b-gqg6iya791] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--ovb-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.ovb-tiny-button:hover:not(:disabled)[b-gqg6iya791] {
    color: var(--ovb-accent);
    background: var(--ovb-soft);
}

.ovb-camera-rows .ovb-tiny-button:hover:not(:disabled)[b-gqg6iya791],
.ovb-rows .ovb-tiny-button:hover:not(:disabled)[b-gqg6iya791] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.ovb-add-button[b-gqg6iya791] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .75rem;
    border: 1px solid var(--ovb-accent);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--ovb-accent);
    background: var(--ovb-surface);
    font-size: .875rem;
    font-weight: 700;
}

.ovb-add-button:hover:not(:disabled)[b-gqg6iya791] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

/* ---- observed events -------------------------------------------------- */

/* The window disclosure is the panel hint's own voice, so it needs nothing but
   the gap that separates it from the paragraph above. */
.ovb-observed-window[b-gqg6iya791] { padding-top: .35rem; }

.ovb-observed-list[b-gqg6iya791] {
    /* No height cap: a definite max-height turns an auto-fill grid into a
       fit-to-box grid that squeezes every row and clips the card footers.
       The store's 500-row window already bounds the list; the page scrolls
       honestly. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-auto-rows: max-content;
    gap: .3rem;
    margin: 0;
    padding: .6rem .85rem .75rem;
    list-style: none;
    align-items: stretch;
}

/* Card, then forget strip, then the armed confirmation. The card takes the free
   height so every card in a row still ends level; the strip and the
   confirmation keep their own natural height instead of being stretched into a
   gap. The confirmation lands in an implicit third row, which is auto. */
.ovb-observed-list li[b-gqg6iya791] { min-width: 0; display: grid; grid-template-rows: 1fr auto; }

/* Direct children only: the card is the select button, and the forget control
   in the footer below it must keep the page's own remove vocabulary rather
   than being dressed as a second card. */
.ovb-observed-list > li > button[b-gqg6iya791] {
    display: grid;
    gap: .3rem;
    align-content: start;
    width: 100%;
    min-height: 2.75rem;
    padding: .52rem .6rem .5rem;
    border: 1px solid var(--ovb-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--ovb-ink);
    background: var(--ovb-surface);
    text-align: left;
}

.ovb-observed-list > li > button:hover:not(:disabled)[b-gqg6iya791] {
    border-color: var(--ovb-accent);
    background: var(--ovb-soft);
}

/* The forget strip. Its floor is the armed height (.ovb-danger-button is
   2.5rem), so the cross keeps one pointer-sized home whether or not the row
   below it is armed. */
.ovb-event-foot[b-gqg6iya791] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--pulse-control-min-height, 44px);
}

/* The cross only, not the Keep in the confirmation below it: the way back out
   of a destructive confirm must never wear the destructive colour. */
.ovb-event-foot > .ovb-tiny-button:hover:not(:disabled)[b-gqg6iya791] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* The armed confirmation, in the row and not only in the page-top banner: that
   banner is a static block above two other panels, so it is scrolled out of the
   viewport by the time this catalog is on screen. Stacked, not the camera row's
   inline strip — a 12rem card cannot hold a sentence and two buttons side by
   side. The later rule wins over .ovb-confirm's flex at equal specificity. */
.ovb-event-confirm[b-gqg6iya791] {
    display: grid;
    gap: .35rem;
    min-width: 0;
    padding: .5rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--pulse-danger-soft);
}

.ovb-event-confirm strong[b-gqg6iya791] {
    color: var(--pulse-danger-text);
    font-size: .78rem;
}

/* Raw ONVIF topics have no spaces to break at, so the sentence wraps anywhere
   rather than pushing the buttons out of the card. */
.ovb-event-confirm p[b-gqg6iya791] {
    margin: 0;
    color: var(--ovb-ink);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ovb-confirm-actions[b-gqg6iya791] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

/* Auto width against the .onvif-page select rule's 100%: the filter shares the
   panel header with the heading and must not push it out. */
.onvif-page select.ovb-observed-filter[b-gqg6iya791] {
    width: auto;
    max-width: 11rem;
    flex: 0 1 auto;
}

/* Card anatomy: which topic family it is and how often it fires first, then
   the topic tail people recognise, then whose camera said it and what it last
   said. Every line is single-line and ellipsized: wrapped text feeds the
   grid's circular intrinsic row sizing, and the card bottom silently clips.
   The button tooltip carries the full topic. */
.ovb-event-head[b-gqg6iya791] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* No width cap and modest tracking: the chip is uppercase topic vocabulary
   ("RULEENGINE"), and clipping it to a fraction of the card made it
   unreadable exactly when the family name mattered. The count keeps its
   width; the chip is the flexible one. */
.ovb-event-chip[b-gqg6iya791] {
    overflow: hidden;
    min-width: 0;
    padding: .08rem .44rem;
    border: 1px solid color-mix(in srgb, var(--ovb-accent) 40%, transparent);
    border-radius: 999px;
    color: var(--ovb-accent);
    background: color-mix(in srgb, var(--ovb-accent) 9%, transparent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ovb-event-count[b-gqg6iya791] {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--ovb-muted);
    font-family: var(--ovb-mono);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ovb-event-topic[b-gqg6iya791] {
    overflow: hidden;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-event-camera[b-gqg6iya791] {
    overflow: hidden;
    color: var(--ovb-muted);
    font-size: .75rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ovb-event-state[b-gqg6iya791] {
    overflow: hidden;
    color: var(--ovb-muted);
    font-family: var(--ovb-mono);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- narrow workspaces ------------------------------------------------ */

/* Account for the navigation rail as well as the window. A laptop can have
   room for two readable camera cards without room for nine field columns. */
@container onvif-workspace (min-width: 44rem) and (max-width: 62rem) {
    .ovb-camera-rows[b-gqg6iya791] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ovb-camera-rows .ovb-new[b-gqg6iya791] { grid-column: 1 / -1; }
}

@container onvif-workspace (max-width: 62rem) {
    /* The nine-column camera row cannot survive a phone; it becomes a card
       with EXPLICIT areas, not auto-placement: the name-and-status header
       first, the credential fields two-up, and a footer where the enable
       switch, the test button, and the destructive remove cross each have a
       fixed home — the status line never ends up orphaned beside the remove
       button when a field wraps. */
    .ovb-camera-rows li[b-gqg6iya791] {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
        grid-template-areas:
            "name    name   name"
            "status  status status"
            "host    host   port"
            "user    pass   pass"
            "enabled test   remove";
        gap: .45rem;
        padding: .55rem;
        border: 1px solid var(--ovb-border);
        border-radius: .65rem;
        background: var(--ovb-soft);
    }

    .ovb-camera-rows li > .ovb-cam-name[b-gqg6iya791] { grid-area: name; }
    /* Full-row, fr-constrained: a long fault reason ellipsizes instead of
       stretching an auto track and crushing the name beside it. */
    .ovb-camera-rows li > .ovb-cam-status[b-gqg6iya791] { grid-area: status; }
    .ovb-camera-rows li > .ovb-cam-host[b-gqg6iya791] { grid-area: host; }
    .ovb-camera-rows li > .ovb-cam-port[b-gqg6iya791] { grid-area: port; text-align: left; }
    .ovb-camera-rows li > .ovb-cam-user[b-gqg6iya791] { grid-area: user; }
    .ovb-camera-rows li > .ovb-cam-pass[b-gqg6iya791] { grid-area: pass; }
    .ovb-camera-rows li > .ovb-cam-enabled[b-gqg6iya791] { grid-area: enabled; }
    .ovb-camera-rows li > .ovb-test-button[b-gqg6iya791] { grid-area: test; justify-self: end; }
    .ovb-camera-rows li > .ovb-tiny-button[b-gqg6iya791],
    .ovb-camera-rows li > .ovb-confirm[b-gqg6iya791] { grid-area: remove; justify-self: end; }

    .ovb-camera-rows .ovb-new[b-gqg6iya791] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "name name"
            "host port"
            "user pass"
            "test add";
        background: transparent;
        border: 0;
        border-top: 1px dashed var(--ovb-border);
        border-radius: 0;
        padding: .65rem 0 0;
    }

    .ovb-camera-rows .ovb-new > .ovb-test-button[b-gqg6iya791] {
        grid-area: test;
        justify-self: stretch;
        min-height: 2.75rem;
    }

    .ovb-camera-rows .ovb-new > .ovb-add-button[b-gqg6iya791] { grid-area: add; min-height: 2.75rem; }
}

@media (max-width: 640px) {
    .onvif-page[b-gqg6iya791] {
        gap: .75rem;
        padding: .75rem;
    }

    .ovb-panel-head[b-gqg6iya791] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .onvif-page select[b-gqg6iya791],
    .onvif-page input[type="search"][b-gqg6iya791],
    .onvif-page input[type="text"][b-gqg6iya791],
    .onvif-page input[type="password"][b-gqg6iya791],
    .onvif-page input:not([type])[b-gqg6iya791] {
        font-size: 1rem;
    }

    /* Route on its own line, then target beside the mute switch and the
       remove cross. The add row has no switch, so it stays two-up. */
    .ovb-rows li[b-gqg6iya791] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: .45rem;
    }

    .ovb-rows li > :first-child[b-gqg6iya791] { grid-column: 1 / -1; }
    .ovb-rows-arrow[b-gqg6iya791] { display: none; }
    .ovb-rows li > :nth-child(3)[b-gqg6iya791] { grid-column: 1; }

    .ovb-rows .ovb-map-new[b-gqg6iya791] { grid-template-columns: minmax(0, 1fr) auto; }

    .ovb-rows .ovb-new[b-gqg6iya791] {
        margin-top: .2rem;
        padding-top: .65rem;
    }

    .ovb-rows .ovb-tiny-button[b-gqg6iya791],
    .ovb-rows .ovb-add-button[b-gqg6iya791] {
        align-self: stretch;
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 100%;
    }

    .ovb-observed-list[b-gqg6iya791] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- touch --------------------------------------------------------- */

/* Fingers, not cursors: every small control meets the 44px target without
   changing the pointer-precise desktop density. */
@media (any-pointer: coarse) {
    .ovb-tiny-button[b-gqg6iya791] {
        width: 44px;
        height: 44px;
    }

    .ovb-switch[b-gqg6iya791],
    .ovb-cam-enabled[b-gqg6iya791],
    .ovb-row-enabled[b-gqg6iya791] {
        min-height: 44px;
    }

    .ovb-test-button[b-gqg6iya791],
    .ovb-danger-button[b-gqg6iya791],
    .ovb-confirm .ovb-tiny-button[b-gqg6iya791] { min-height: 44px; }
}
/* /Components/Pages/Playbooks.razor.rz.scp.css */
.playbooks-page[b-n68g7mj9d8] {
    --guide-indigo: var(--pulse-accent, #0f766e);
    --guide-teal: var(--pulse-accent, #0f766e);
    --guide-green: var(--pulse-success-text, #047857);
    --guide-amber: var(--pulse-warning-text, #9a3412);
    --guide-red: var(--pulse-danger-text, #b91c1c);
    --guide-ink: var(--pulse-text, #17262d);
    --guide-muted: var(--pulse-muted, #687980);
    --guide-border: var(--pulse-border, #dbe5e5);
    --guide-surface: var(--pulse-surface, #fff);
    --guide-soft: var(--pulse-surface-soft, #f3f7f7);
    box-sizing: border-box;
    color: var(--guide-ink);
    display: grid;
    line-height: 1.45;
    min-width: 0;
    gap: var(--pulse-workspace-gap, 20px);
    margin: 0;
    max-width: none;
    width: 100%;
    padding: var(--pulse-workspace-pad-top, 22px)
        var(--pulse-workspace-pad-x, 32px)
        var(--pulse-workspace-pad-bottom, 44px);
}

.playbook-breadcrumbs[b-n68g7mj9d8] { align-items: center; color: var(--guide-muted); display: flex; flex-wrap: wrap; font-size: .875rem; gap: 4px 8px; }
.playbook-breadcrumbs a[b-n68g7mj9d8] { align-items: center; color: inherit; display: inline-flex; min-height: var(--pulse-control-min-height, 44px); padding-inline: 4px; text-decoration: none; }
.playbook-breadcrumbs a:hover[b-n68g7mj9d8] { color: var(--guide-indigo); }

.playbooks-hero[b-n68g7mj9d8] {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-xl, 16px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    padding: calc(var(--pulse-workspace-hero-pad-y, 14px) / 4) 0;
}

.playbooks-hero > div:first-child[b-n68g7mj9d8] { align-items: baseline; display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.playbooks-hero h1[b-n68g7mj9d8] { font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0; }
.playbooks-kicker[b-n68g7mj9d8] { color: var(--guide-muted); font-size: max(.75rem, var(--pulse-workspace-eyebrow-size, .75rem)); font-weight: 600; letter-spacing: 0; text-transform: none; }
.hero-actions[b-n68g7mj9d8] { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; min-width: 0; }
.library-state[b-n68g7mj9d8] { align-items: center; display: flex; gap: 9px; min-width: 0; padding: 2px 0; }
.library-state > span:last-child[b-n68g7mj9d8] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 .4rem; }
.library-state strong[b-n68g7mj9d8] { font-size: .75rem; line-height: 1.3; }
.library-state small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: var(--pulse-workspace-lede-size, .82rem); line-height: 1.45; overflow-wrap: anywhere; }
.library-state-dot[b-n68g7mj9d8] { background: var(--guide-green); border-radius: 50%; flex: 0 0 8px; height: 8px; width: 8px; }
.library-state.loading .library-state-dot[b-n68g7mj9d8] { background: var(--guide-indigo); }
.library-state.empty .library-state-dot[b-n68g7mj9d8] { background: var(--guide-muted); }

.primary-action[b-n68g7mj9d8],
.secondary-action[b-n68g7mj9d8],
.danger-action[b-n68g7mj9d8],
.playbook-library header button[b-n68g7mj9d8],
.add-step[b-n68g7mj9d8] {
    align-items: center;
    border-radius: var(--pulse-radius-sm, 8px);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 9px 15px;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: background-color .16s ease, border-color .16s ease;
}

.primary-action[b-n68g7mj9d8] { background: var(--pulse-action, #0f766e); border: 1px solid var(--pulse-action, #0f766e); color: var(--pulse-on-action, #fff); }
.primary-action:hover[b-n68g7mj9d8] { background: var(--pulse-action-hover, #115e59); border-color: var(--pulse-action-hover, #115e59); }
.secondary-action[b-n68g7mj9d8],
.playbook-library header button[b-n68g7mj9d8],
.add-step[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); color: var(--guide-ink); }
.danger-action[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--pulse-danger-border, #fecdd3); color: var(--pulse-danger-text, #b91c1c); }
.danger-action:hover[b-n68g7mj9d8] { background: var(--pulse-danger-soft, #fff1f1); }
.secondary-action:hover[b-n68g7mj9d8],
.playbook-library header button:hover[b-n68g7mj9d8],
.add-step:hover[b-n68g7mj9d8] { background: var(--guide-soft); border-color: var(--pulse-border-strong, #cbd5e1); }
button:disabled[b-n68g7mj9d8] { cursor: not-allowed; opacity: var(--pulse-disabled-opacity); transform: none !important; }

.playbook-notice[b-n68g7mj9d8] { align-items: center; border: 1px solid; border-radius: var(--pulse-radius-md, 13px); display: grid; font-size: .75rem; gap: 10px; grid-template-columns: auto 1fr auto; padding: 11px 14px; }
.playbook-notice p[b-n68g7mj9d8] { margin: 0; }
.playbook-notice button[b-n68g7mj9d8] { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.25rem; min-height: 44px; min-width: 44px; }
.playbook-notice.error[b-n68g7mj9d8] { background: var(--pulse-danger-soft, #fff1f1); border-color: var(--pulse-danger-border, #efb5b5); color: var(--pulse-danger-text, #9b2929); }
.playbook-notice.success[b-n68g7mj9d8] { background: var(--pulse-success-soft, #edf9f3); border-color: var(--pulse-success-border, #a7d8c3); color: var(--pulse-success-text, #176341); }
.notice-retry[b-n68g7mj9d8] { background: transparent; border: 1px solid currentColor; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); padding: 5px 10px; }

.playbook-overview[b-n68g7mj9d8] { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.playbook-overview article[b-n68g7mj9d8] { align-items: center; background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: var(--pulse-radius-md, 12px); display: flex; gap: 10px; min-height: 64px; min-width: 0; padding: 10px 12px; }
.overview-mark[b-n68g7mj9d8],
.lineage-icon[b-n68g7mj9d8] { align-items: center; background: color-mix(in srgb, var(--guide-indigo) 10%, var(--guide-soft)); border-radius: 10px; color: var(--guide-indigo); display: flex; flex: 0 0 auto; font-size: .75rem; font-weight: 700; height: 36px; justify-content: center; letter-spacing: .05em; line-height: 0; width: 36px; }
.overview-mark.live[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-green) 10%, var(--guide-soft)); color: var(--guide-green); }
.overview-mark.steps[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-teal) 10%, var(--guide-soft)); color: var(--guide-teal); }
.overview-mark.targeted[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-amber) 11%, var(--guide-soft)); color: var(--guide-amber); }
.overview-mark.is-zero[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-muted) 10%, var(--guide-soft)); color: var(--guide-muted); }
.lineage-icon[b-n68g7mj9d8] { font-size: 1.1875rem; }
.playbook-overview article div[b-n68g7mj9d8] { display: grid; gap: 1px; }
.playbook-overview strong[b-n68g7mj9d8] { font-size: 1.375rem; font-variant-numeric: tabular-nums; line-height: 1; }
.lineage-card strong[b-n68g7mj9d8] { font-size: .75rem; }
.playbook-overview small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; line-height: 1.3; }

.playbook-workbench[b-n68g7mj9d8] { align-items: start; display: grid; gap: 14px; grid-template-columns: clamp(248px, 22%, 320px) minmax(0, 1fr); }
.playbook-library[b-n68g7mj9d8],
.playbook-editor[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: var(--pulse-radius-lg, 14px); min-width: 0; }
.playbook-editor[b-n68g7mj9d8] { container: playbook-editor / inline-size; }
.playbook-library[b-n68g7mj9d8] { max-height: calc(100vh - 90px); position: sticky; top: var(--pulse-sticky-top); }
.playbook-library > header[b-n68g7mj9d8],
.playbook-editor > header[b-n68g7mj9d8] { align-items: center; border-bottom: 1px solid var(--guide-border); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 14px 16px; }
.playbook-editor > header > div[b-n68g7mj9d8] { min-width: 0; }
.playbook-library h2[b-n68g7mj9d8],
.playbook-editor h2[b-n68g7mj9d8] { font-size: 1.125rem; line-height: 1.3; margin: 3px 0 0; overflow-wrap: anywhere; }
.playbook-usage[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; line-height: 1.4; margin: 5px 0 0; max-width: 34rem; }
.playbook-usage a[b-n68g7mj9d8] { color: var(--guide-indigo); font-weight: 700; }
.playbook-library header button[b-n68g7mj9d8] { border-radius: 9px; gap: 6px; min-height: var(--pulse-control-min-height, 44px); padding: 6px 11px; }
.template-list[b-n68g7mj9d8] { max-height: calc(100vh - 188px); overflow: auto; padding: 8px; }
.template-row[b-n68g7mj9d8] { background: transparent; border: 1px solid transparent; border-radius: 12px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 9px; grid-template-columns: 7px minmax(0, 1fr); margin-bottom: 4px; padding: 11px; text-align: left; width: 100%; }
.template-row:hover[b-n68g7mj9d8] { background: var(--guide-soft); }
.template-row.selected[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-indigo) 8%, var(--guide-surface)); border-color: color-mix(in srgb, var(--guide-indigo) 34%, var(--guide-border)); }
.template-state[b-n68g7mj9d8] { background: var(--guide-muted); border-radius: 99px; height: 7px; margin-top: 5px; width: 7px; }
.template-state.enabled[b-n68g7mj9d8] { background: var(--guide-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--guide-green) 12%, transparent); }
.template-copy[b-n68g7mj9d8] { display: grid; gap: 5px; min-width: 0; }
.template-copy > span[b-n68g7mj9d8] { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 7px; justify-content: space-between; }
.template-copy strong[b-n68g7mj9d8] { font-size: .875rem; overflow-wrap: anywhere; }
.template-copy em[b-n68g7mj9d8] { background: var(--guide-soft); border-radius: 99px; color: var(--guide-muted); font-size: .75rem; font-style: normal; font-weight: 700; padding: 4px 6px; text-transform: uppercase; }
.template-copy small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; line-height: 1.4; }
.template-target[b-n68g7mj9d8] { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.template-copy b[b-n68g7mj9d8] { color: var(--guide-indigo); font-size: .75rem; text-transform: uppercase; }
.template-change[b-n68g7mj9d8] { color: var(--guide-amber) !important; font-weight: 700; }

.editor-state[b-n68g7mj9d8] { align-items: flex-end; display: grid; flex: 0 1 auto; gap: 2px; justify-items: end; min-width: 0; text-align: right; }
.editor-state strong[b-n68g7mj9d8] { font-size: .875rem; }
.editor-state small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; }
.draft-state[b-n68g7mj9d8] { border-radius: 99px; font-size: .75rem; font-weight: 700; padding: 4px 8px; }
.draft-state.saved[b-n68g7mj9d8] { background: var(--pulse-success-soft, #edf9f3); color: var(--pulse-success-text, #176341); }
.draft-state.dirty[b-n68g7mj9d8] { background: var(--pulse-warning-soft, #fff8e7); color: var(--pulse-warning-text, #81520b); }
.template-settings[b-n68g7mj9d8] { display: grid; min-width: 0; }
.playbook-editor > section[b-n68g7mj9d8],
.template-settings > section[b-n68g7mj9d8] { border-bottom: 1px solid var(--guide-border); min-width: 0; padding: 14px 16px; }
.conflict-panel[b-n68g7mj9d8],
.publication-validation[b-n68g7mj9d8] { background: color-mix(in srgb, var(--pulse-warning-soft, #fff8e7) 72%, var(--guide-surface)); display: grid; gap: 12px; }
.conflict-panel h3[b-n68g7mj9d8],
.publication-validation h3[b-n68g7mj9d8] { font-size: 1rem; margin: 4px 0; }
.conflict-panel p[b-n68g7mj9d8],
.publication-validation p[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .8125rem; line-height: 1.45; margin: 0; }
.conflict-compare[b-n68g7mj9d8] { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conflict-compare > span[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 10px; display: grid; gap: 3px; min-width: 0; padding: 10px; }
.conflict-compare small[b-n68g7mj9d8],
.conflict-compare em[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; font-style: normal; }
.conflict-compare strong[b-n68g7mj9d8] { overflow-wrap: anywhere; }
.conflict-actions[b-n68g7mj9d8] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.publication-validation ul[b-n68g7mj9d8] { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.publication-validation li[b-n68g7mj9d8] { align-items: start; background: var(--guide-surface); border: 1px solid color-mix(in srgb, var(--guide-amber) 35%, var(--guide-border)); border-radius: 9px; display: grid; gap: 4px; padding: 9px 11px; }
.publication-validation code[b-n68g7mj9d8] { color: var(--guide-amber); font-size: .75rem; font-weight: 700; overflow-wrap: anywhere; }
.publication-validation li span[b-n68g7mj9d8] { font-size: .8125rem; line-height: 1.4; }
.editor-heading[b-n68g7mj9d8] { align-items: center; display: flex; gap: 11px; }
.editor-heading > span[b-n68g7mj9d8] { align-items: center; background: color-mix(in srgb, var(--guide-indigo) 11%, var(--guide-soft)); border-radius: 9px; color: var(--guide-indigo); display: flex; font-size: .75rem; font-weight: 700; height: 31px; justify-content: center; width: 31px; }
.editor-heading h3[b-n68g7mj9d8] { font-size: .875rem; margin: 0; }
.editor-heading p[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; margin: 2px 0 0; }
.identity-grid[b-n68g7mj9d8],
.targeting-grid[b-n68g7mj9d8] { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.playbook-editor label[b-n68g7mj9d8] { color: var(--guide-muted); display: grid; font-size: .75rem; font-weight: 700; gap: 6px; }
.playbook-editor input:not([type="checkbox"])[b-n68g7mj9d8],
.playbook-editor select[b-n68g7mj9d8],
.playbook-editor textarea[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 9px; box-sizing: border-box; color: var(--guide-ink); font: inherit; font-size: .875rem; min-height: var(--pulse-control-min-height, 44px); min-width: 0; padding: 8px 10px; width: 100%; }
.playbook-editor textarea[b-n68g7mj9d8] { min-height: 70px; resize: vertical; }
.playbook-editor input:focus[b-n68g7mj9d8],
.playbook-editor select:focus[b-n68g7mj9d8],
.playbook-editor textarea:focus[b-n68g7mj9d8] { border-color: var(--guide-indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--guide-indigo) 13%, transparent); outline: none; }
.playbook-editor label small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; font-weight: 500; }

.starter-library[b-n68g7mj9d8] {
    background: var(--guide-soft);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.starter-library > div[b-n68g7mj9d8] { grid-column: 1 / -1; }
.starter-library h3[b-n68g7mj9d8] { font-size: .9375rem; margin: 4px 0; }
.starter-library p[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; margin: 0; }
.starter-library > button[b-n68g7mj9d8] {
    background: var(--guide-surface);
    border: 1px solid var(--guide-border);
    border-radius: 12px;
    color: var(--guide-ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 5px;
    min-height: 80px;
    min-width: 0;
    padding: 11px;
    text-align: left;
    transition: background-color .16s ease, border-color .16s ease;
}
.starter-library > button:hover[b-n68g7mj9d8],
.starter-library > button:focus-visible[b-n68g7mj9d8] { background: var(--guide-soft); border-color: var(--guide-indigo); }
.starter-library > button span[b-n68g7mj9d8] { color: var(--guide-indigo); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.starter-library > button strong[b-n68g7mj9d8] { font-size: .875rem; }
.starter-library > button small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; line-height: 1.45; }
.playbooks-page :is(button, a, input, select, textarea, summary):focus-visible[b-n68g7mj9d8] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.steps-header[b-n68g7mj9d8] { align-items: center; display: flex; gap: 15px; justify-content: space-between; }
.add-step[b-n68g7mj9d8] { min-height: var(--pulse-control-min-height, 44px); padding: 7px 12px; }
.step-list[b-n68g7mj9d8] { display: grid; gap: 9px; list-style: none; margin: 15px 0 0; padding: 0; }
.step-list li[b-n68g7mj9d8] { align-items: start; background: var(--guide-soft); border: 1px solid color-mix(in srgb, var(--guide-border) 75%, transparent); border-radius: 13px; display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px; }
.step-order[b-n68g7mj9d8] { display: grid; gap: 7px; justify-items: center; }
.step-order > span[b-n68g7mj9d8] { align-items: center; background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 8px; color: var(--guide-muted); display: flex; font-size: .75rem; font-weight: 600; height: 28px; justify-content: center; width: 44px; }
.step-order > div[b-n68g7mj9d8] { display: grid; gap: 3px; }
.step-order button[b-n68g7mj9d8],
.remove-step[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 8px; color: var(--guide-muted); cursor: pointer; font: inherit; min-height: var(--pulse-control-min-height, 44px); padding: 0; width: 44px; }
.step-fields[b-n68g7mj9d8] { display: grid; gap: 9px; grid-template-columns: minmax(0, 1.5fr) minmax(105px, .5fr); }
.step-guidance[b-n68g7mj9d8] { grid-column: 1 / -1; }
.step-guidance textarea[b-n68g7mj9d8] { min-height: 58px; }
/* The select carrying a reference that no longer resolves is marked invalid,
   and the warning under it says so; the border has to agree with both. */
.step-guidance select[aria-invalid="true"][b-n68g7mj9d8] { border-color: var(--pulse-warning-border, #eacb7a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pulse-warning-text, #81520b) 12%, transparent); }
.unresolved-reference[b-n68g7mj9d8] { background: var(--pulse-warning-soft, #fff8e7); border: 1px solid var(--pulse-warning-border, #eacb7a); border-radius: 8px; color: var(--pulse-warning-text, #81520b); font-size: .75rem; line-height: 1.4; padding: 7px 9px; }
.required-toggle[b-n68g7mj9d8] { align-items: center; background: var(--guide-surface); border-radius: 9px; display: flex !important; gap: 8px !important; grid-column: 1 / -1; padding: 8px 10px; }
.required-toggle input[b-n68g7mj9d8] { accent-color: var(--guide-indigo); height: 16px; width: 16px; }
.required-toggle > span[b-n68g7mj9d8] { display: grid; gap: 1px; }
.required-toggle strong[b-n68g7mj9d8] { color: var(--guide-ink); font-size: .875rem; }
.remove-step[b-n68g7mj9d8] { color: var(--guide-red); font-size: 1.0625rem; }
.step-limit[b-n68g7mj9d8] { color: var(--guide-muted); display: flex; font-size: .75rem; gap: 12px; justify-content: space-between; margin-top: 10px; }
.step-limit span[b-n68g7mj9d8] { font-variant-numeric: tabular-nums; }
.steps-empty[b-n68g7mj9d8] { background: var(--guide-soft); border: 1px dashed var(--guide-border); border-radius: 11px; display: grid; gap: 3px; margin-top: 14px; padding: 16px; text-align: center; }
.steps-empty p[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .8125rem; margin: 0; }
.catalogue-warning[b-n68g7mj9d8] { align-items: center; background: var(--pulse-warning-soft, #fff8e7); border-bottom: 1px solid var(--pulse-warning-border, #eacb7a); display: flex; gap: 12px; justify-content: space-between; padding: 13px 20px; }
.catalogue-warning p[b-n68g7mj9d8] { color: var(--pulse-warning-text, #81520b); font-size: .75rem; line-height: 1.4; margin: 3px 0 0; }
.editor-actions[b-n68g7mj9d8] { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; padding: 15px 20px; }
.save-draft-action[b-n68g7mj9d8] { border-color: color-mix(in srgb, var(--guide-indigo) 45%, var(--guide-border)); color: var(--guide-indigo); }
.playbook-empty[b-n68g7mj9d8] { color: var(--guide-muted); display: grid; gap: 5px; justify-items: center; padding: 24px 16px; text-align: center; }
.playbook-empty > span[b-n68g7mj9d8] { align-items: center; background: color-mix(in srgb, var(--guide-indigo) 10%, var(--guide-soft)); border-radius: 50%; color: var(--guide-indigo); display: flex; font-size: 1.125rem; height: 38px; justify-content: center; width: 38px; }
.playbook-empty strong[b-n68g7mj9d8] { color: var(--guide-ink); }
.playbook-empty p[b-n68g7mj9d8] { font-size: .75rem; margin: 0; max-width: 290px; }
.empty-action[b-n68g7mj9d8] { align-items: center; background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 10px; color: var(--guide-indigo); display: inline-flex; font: inherit; font-size: .875rem; font-weight: 700; justify-content: center; margin-top: 7px; min-height: var(--pulse-control-min-height, 44px); padding: 8px 13px; text-decoration: none; }
.empty-action:hover[b-n68g7mj9d8] { border-color: var(--guide-indigo); }

@container playbook-editor (min-width: 680px) {
    .step-fields[b-n68g7mj9d8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step-guidance[b-n68g7mj9d8] { grid-column: auto; }
}

@container playbook-editor (min-width: 880px) {
    .template-settings[b-n68g7mj9d8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .template-identity[b-n68g7mj9d8] { border-inline-end: 1px solid var(--guide-border); }
}

@media (max-width: 980px) {
    .playbook-workbench[b-n68g7mj9d8] { grid-template-columns: minmax(235px, .68fr) minmax(0, 1.5fr); }
    .identity-grid[b-n68g7mj9d8] { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .playbook-overview[b-n68g7mj9d8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .playbook-workbench[b-n68g7mj9d8] { grid-template-columns: 1fr; }
    .playbook-library[b-n68g7mj9d8] { max-height: none; position: static; }
    .template-list[b-n68g7mj9d8] { display: flex; max-height: none; overflow-x: auto; padding-bottom: 11px; scroll-snap-type: x mandatory; }
    .template-row[b-n68g7mj9d8] { flex: 0 0 min(74vw, 290px); margin: 0 5px 0 0; scroll-snap-align: start; }
    .starter-library[b-n68g7mj9d8] { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .playbooks-page[b-n68g7mj9d8] { gap: var(--pulse-workspace-gap, 13px); padding: 10px 10px 28px; }
    .playbook-breadcrumbs[b-n68g7mj9d8] { display: none; }
    .playbooks-hero[b-n68g7mj9d8] { gap: 8px 12px; padding: 0; }
    .playbooks-hero > div:first-child[b-n68g7mj9d8] { flex-basis: auto; }
    .hero-actions[b-n68g7mj9d8] { display: contents; }
    .library-state[b-n68g7mj9d8] { flex: 0 1 auto; }
    .library-state small[b-n68g7mj9d8] { display: none; }
    .playbooks-hero .primary-action[b-n68g7mj9d8] { margin-left: auto; }
    .playbook-overview[b-n68g7mj9d8] { gap: 7px; }
    .playbook-overview article[b-n68g7mj9d8] { min-height: 66px; padding: 10px; }
    .playbook-overview strong[b-n68g7mj9d8] { font-size: 1.1875rem; }
    .lineage-card strong[b-n68g7mj9d8] { font-size: .75rem; }
    .playbook-library[b-n68g7mj9d8],
    .playbook-editor[b-n68g7mj9d8] { border-radius: 14px; }
    .playbook-editor > header[b-n68g7mj9d8] { align-items: flex-start; flex-direction: column; }
    .editor-state[b-n68g7mj9d8] { align-items: start; justify-items: start; text-align: left; width: 100%; }
    .playbook-editor > section[b-n68g7mj9d8],
    .template-settings > section[b-n68g7mj9d8] { padding: 15px 14px; }
    .conflict-compare[b-n68g7mj9d8] { grid-template-columns: 1fr; }
    .conflict-actions[b-n68g7mj9d8] { display: grid; grid-template-columns: 1fr; }
    .targeting-grid[b-n68g7mj9d8] { grid-template-columns: 1fr; }
    .steps-header[b-n68g7mj9d8] { align-items: stretch; flex-direction: column; }
    .add-step[b-n68g7mj9d8] { width: 100%; }
    .step-list li[b-n68g7mj9d8] { grid-template-columns: auto minmax(0, 1fr); }
    .remove-step[b-n68g7mj9d8] { grid-column: 1 / -1; min-height: var(--pulse-control-min-height, 44px); width: 100%; }
    .step-fields[b-n68g7mj9d8] { grid-template-columns: 1fr; }
    .step-fields > *[b-n68g7mj9d8] { grid-column: 1 !important; }
    .step-limit[b-n68g7mj9d8] { align-items: flex-start; flex-direction: column; gap: 3px; }
    .catalogue-warning[b-n68g7mj9d8] { align-items: stretch; flex-direction: column; padding: 13px 14px; }
    .editor-actions[b-n68g7mj9d8] { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); padding: 13px 14px; }
    .playbooks-archived li[b-n68g7mj9d8] { grid-template-columns: minmax(0, 1fr); }
    .playbooks-archived li button[b-n68g7mj9d8] { width: 100%; }
}

@media (max-width: 390px) {
    .overview-mark[b-n68g7mj9d8],
    .lineage-icon[b-n68g7mj9d8] { display: none; }
}

@media (pointer: coarse) {
    .playbook-breadcrumbs a[b-n68g7mj9d8] { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .playbooks-page *[b-n68g7mj9d8], .playbooks-page *[b-n68g7mj9d8]::before, .playbooks-page *[b-n68g7mj9d8]::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Archived playbooks are kept out of the working library but never out of
   reach, so the drawer is styled like the library rows it restores into
   rather than falling back to a bulleted list. */
.playbooks-archived[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 14px; padding: 11px 16px; }
.playbooks-archived > summary[b-n68g7mj9d8] { align-items: center; color: var(--guide-ink); cursor: pointer; display: flex; font-size: .875rem; font-weight: 700; gap: 8px; min-height: var(--pulse-control-min-height, 44px); }
.playbooks-archived > summary:focus-visible[b-n68g7mj9d8] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
.archived-tally[b-n68g7mj9d8] { background: color-mix(in srgb, var(--guide-muted) 12%, transparent); border-radius: 999px; color: var(--guide-muted); font-size: .75rem; font-weight: 700; padding: 3px 7px; white-space: nowrap; }
.archived-note[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; line-height: 1.45; margin: 8px 0 10px; }
.playbooks-archived ul[b-n68g7mj9d8] { display: grid; gap: 7px; list-style: none; margin: 0 0 4px; padding: 0; }
.playbooks-archived li[b-n68g7mj9d8] { align-items: center; background: var(--guide-soft); border: 1px solid var(--guide-border); border-radius: 10px; display: grid; gap: 11px; grid-template-columns: minmax(0, 1fr) auto; padding: 9px 11px; }
.playbooks-archived li > div[b-n68g7mj9d8] { display: grid; min-width: 0; }
.playbooks-archived strong[b-n68g7mj9d8] { font-size: .875rem; overflow-wrap: anywhere; }
.playbooks-archived small[b-n68g7mj9d8] { color: var(--guide-muted); font-size: .75rem; overflow-wrap: anywhere; }
.playbooks-archived li button[b-n68g7mj9d8] { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 8px; color: var(--guide-indigo); cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; min-height: var(--pulse-control-min-height, 44px); padding: 5px 11px; white-space: nowrap; }
.playbooks-archived li button:hover:not(:disabled)[b-n68g7mj9d8] { border-color: var(--guide-indigo); }
/* A drawer that failed to load is not a drawer holding nothing: the chip has
   to stop reading like a tally, and the failure inside it wears the same red
   alert treatment as every other failure on this page. */
.archived-tally.unknown[b-n68g7mj9d8] { background: var(--pulse-danger-soft, #fff1f1); color: var(--pulse-danger-text, #9b2929); }
.playbooks-archived .playbook-notice[b-n68g7mj9d8] { margin: 8px 0 4px; }
.playbook-overview small.metric-flag[b-n68g7mj9d8] { color: var(--guide-amber); font-weight: 700; }
/* /Components/Pages/PulseModulesPage.razor.rz.scp.css */
/* Modules Pulse owns itself.

   The screen is a list of things, not a machine to configure, so it is drawn
   as cards: one glyph, one name, and the two edits anyone opens this page to
   make. CSS isolation limits selector reach, but the product's semantic custom
   properties still inherit into the component - keep this page on that shared
   palette so light, dark and accessibility changes apply everywhere. */

.pulse-modules-page[b-dhkhr2qxge] {
    --pm-surface: var(--pulse-surface);
    --pm-soft: var(--pulse-surface-soft);
    --pm-border: var(--pulse-border);
    --pm-control-border: var(--pulse-border-strong);
    --pm-ink: var(--pulse-text);
    --pm-muted: var(--pulse-muted);
    --pm-accent: var(--pulse-accent);
    --pm-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: modules-workspace / inline-size;
    color: var(--pm-ink);
    line-height: 1.45;
}

.pulse-modules-page[aria-busy="true"][b-dhkhr2qxge] { cursor: progress; }

.pulse-modules-page button[b-dhkhr2qxge] { font-family: inherit; cursor: pointer; }
.pulse-modules-page button:disabled[b-dhkhr2qxge] { cursor: not-allowed; opacity: .55; }

.pulse-modules-page :is(a, button, input, select):focus-visible[b-dhkhr2qxge],
.pm-confirm:focus-visible[b-dhkhr2qxge] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The heading, the lede and the section bar belong to AccessControlHero, so
   this file deliberately styles nothing above the first panel: the five pages
   in the section have to open identically. */

/* ---- notices --------------------------------------------------------- */

.pm-alert[b-dhkhr2qxge] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, .75rem);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .8rem;
    font-weight: 500;
}

.pm-alert.error[b-dhkhr2qxge] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* The alert can contain two long module names; wrap them within the page. */
.pm-alert > span[b-dhkhr2qxge] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pm-alert .pm-tiny-button[b-dhkhr2qxge] { color: inherit; }

/* ---- the panel ------------------------------------------------------- */

.pm-panel[b-dhkhr2qxge] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--pm-border);
    border-radius: var(--pulse-radius-lg, 1.05rem);
    background: var(--pm-surface);
}

.pm-panel-head[b-dhkhr2qxge] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--pm-border);
    border-radius: var(--pulse-radius-lg) var(--pulse-radius-lg) 0 0;
    background: var(--pm-surface);
}

.pm-panel-head > div[b-dhkhr2qxge] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; min-width: 0; }

.pm-panel-head h2[b-dhkhr2qxge] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.pm-count[b-dhkhr2qxge] {
    display: block;
    margin-top: 0;
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    color: var(--pm-muted);
    white-space: nowrap;
}

.pm-empty[b-dhkhr2qxge] {
    margin: .85rem 1rem;
    padding: .85rem;
    border: 1px dashed var(--pm-border);
    border-radius: .6rem;
    color: var(--pm-muted);
    background: var(--pm-soft);
    font-size: .875rem;
    line-height: 1.45;
}

.pm-reference[b-dhkhr2qxge] { padding: .25rem .85rem; }
.pm-reference > summary[b-dhkhr2qxge] { min-height: 44px; padding: .65rem 0; box-sizing: border-box; color: var(--pm-ink); font-weight: 500; cursor: pointer; }
.pm-reference > summary[b-dhkhr2qxge]::marker { color: var(--pm-muted); }
.pm-reference > summary:focus-visible[b-dhkhr2qxge] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; border-radius: var(--pulse-radius-sm); }
.pm-reference > p[b-dhkhr2qxge] { margin: 0 0 .65rem; }

/* ---- the cards -------------------------------------------------------

   No max-height anywhere in here, deliberately: a definite height on a grid
   squeezes its rows rather than scrolling them, and a long module list would
   render as a stack of unreadable slivers. The page scrolls instead, and names
   wrap so real operational objects remain identifiable on a phone. */

.pm-cards[b-dhkhr2qxge] {
    display: grid;
    /* 20rem floor: at 16rem the three-column action row left the rename input
       about 95px wide, and renaming is the page's primary action. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: .65rem;
    padding: .85rem;
}

.pm-card[b-dhkhr2qxge] {
    display: grid;
    gap: .4rem;
    align-content: start;
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--pm-border);
    border-radius: var(--pulse-radius-md);
    background: var(--pm-surface);
}

.pm-card-head[b-dhkhr2qxge] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    align-items: center;
    min-width: 0;
}

.pm-card-icon[b-dhkhr2qxge] {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border: 1px solid var(--pm-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pm-muted);
    background: var(--pm-soft);
}

/* No sizing rule for the glyph itself: it is drawn by the shared icon
   component, which carries its own scope and its own Size parameter. A plain
   descendant selector here would be rewritten to match an element that does
   not exist in this component and quietly do nothing. */

.pm-card-identity[b-dhkhr2qxge] {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.pm-card-name[b-dhkhr2qxge] {
    display: block;
    min-width: 0;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pm-chip[b-dhkhr2qxge] {
    justify-self: start;
    padding: .06rem 0;
    color: var(--pm-muted);
    font-size: .75rem;
    font-weight: 400;
}

.pm-card-meta[b-dhkhr2qxge],
.pm-card-alarms[b-dhkhr2qxge] {
    min-width: 0;
    margin: 0;
    color: var(--pm-muted);
    overflow-wrap: anywhere;
}

.pm-card-meta[b-dhkhr2qxge] { font-family: var(--pm-mono); font-size: .75rem; }
.pm-card-alarms[b-dhkhr2qxge] { font-size: .875rem; font-weight: 500; }

/* Only the counted card links out: the list it opens is scoped to this module
   on the reserved Pulse server, so an unlinked zero stays a plain sentence. */
a.pm-card-alarms[b-dhkhr2qxge] {
    display: flex;
    min-height: 44px;
    align-items: center;
    color: var(--pm-accent);
    text-decoration: none;
}

a.pm-card-alarms:hover[b-dhkhr2qxge] { text-decoration: underline; }

/* Two rows, not three columns: the rename input owns the first row beside the
   remove control, and the icon select stretches under them. Squeezing name,
   icon and delete into one row made the input unusably narrow. */
.pm-card-actions[b-dhkhr2qxge] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
    min-width: 0;
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pm-border);
}

.pm-card-actions .pm-field:first-child[b-dhkhr2qxge] { grid-column: 1; grid-row: 1; }
.pm-card-actions .pm-field:nth-child(2)[b-dhkhr2qxge] { grid-column: 1 / -1; grid-row: 2; }

.pm-card-actions > .pm-tiny-button[b-dhkhr2qxge] {
    grid-column: 2;
    grid-row: 1;
}

.pm-card-actions > .pm-confirm[b-dhkhr2qxge] { grid-column: 1 / -1; grid-row: 3; }

/* Desktop modules read as compact records: identity beside its edits. The
   minimum record width preserves a useful rename field with the remove step
   visible, while smaller workspaces keep the stacked card layout. */
@container modules-workspace (min-width: 64rem) {
    .pm-cards[b-dhkhr2qxge] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    }

    .pm-card[b-dhkhr2qxge] {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 1.3fr);
        column-gap: .85rem;
        align-content: start;
    }

    .pm-card-head[b-dhkhr2qxge] { grid-column: 1; grid-row: 1; }
    .pm-card-meta[b-dhkhr2qxge] { grid-column: 1; grid-row: 2; }
    .pm-card-alarms[b-dhkhr2qxge] { grid-column: 1; grid-row: 3; }

    .pm-card-actions[b-dhkhr2qxge] {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-content: start;
        margin: 0;
        padding: 0 0 0 .85rem;
        border-top: 0;
        border-left: 1px solid var(--pm-border);
    }
}

/* ---- controls -------------------------------------------------------- */

.pm-field[b-dhkhr2qxge] {
    display: grid;
    gap: .35rem;
    min-width: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pm-ink);
}

.pulse-modules-page :is(input, select)[b-dhkhr2qxge] {
    min-width: 0;
    min-height: 44px;
    padding: .5rem .65rem;
    border: 1px solid var(--pm-control-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pm-ink);
    background: var(--pm-surface);
    font: inherit;
    font-size: .875rem;
    font-weight: 400;
    text-overflow: ellipsis;
}

.pm-tiny-button[b-dhkhr2qxge] {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: var(--pulse-radius-sm);
    color: var(--pm-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.pm-card-actions .pm-tiny-button:hover:not(:disabled)[b-dhkhr2qxge] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.pm-confirm[b-dhkhr2qxge] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.pm-danger-button[b-dhkhr2qxge] {
    min-height: 44px;
    padding: .3rem .55rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.pm-confirm .pm-tiny-button[b-dhkhr2qxge] {
    width: auto;
    padding: 0 .45rem;
    border-radius: var(--pulse-radius-sm, .5rem);
    font-size: .875rem;
    font-weight: 600;
}

/* ---- adding one ------------------------------------------------------ */

.pm-new[b-dhkhr2qxge] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
    gap: .65rem;
    align-items: end;
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--pm-border);
    background: var(--pm-soft);
}

/* Why the form above it is closed. Sits under the divider the form already
   draws, so the reason belongs visibly to the form and not to the card list. */
.pm-new-blocked[b-dhkhr2qxge] {
    margin: .65rem 1rem 0;
    color: var(--pulse-warning-text);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.45;
}

.pm-new-preview[b-dhkhr2qxge] {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--pm-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pm-accent);
    background: var(--pm-surface);
}

.pm-add-button[b-dhkhr2qxge] {
    min-height: 44px;
    padding: .42rem .8rem;
    border: 1px solid var(--pulse-action);
    border-radius: var(--pulse-radius-sm, .55rem);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.pm-add-button:hover:not(:disabled)[b-dhkhr2qxge] {
    border-color: var(--pulse-action-hover);
    color: var(--pulse-on-action);
    background: var(--pulse-action-hover);
}

/* The recovery button in the failed-read state. It carries a label, so it must
   not borrow the icon-only circle the dismiss and remove glyphs use - the same
   secondary shape the other bridge pages retry with. */
.pm-retry-button[b-dhkhr2qxge] {
    min-height: 44px;
    padding: .42rem .75rem;
    border: 1px solid var(--pm-control-border);
    border-radius: var(--pulse-radius-sm, .55rem);
    color: var(--pm-ink);
    background: var(--pm-surface);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.pm-retry-button:hover:not(:disabled)[b-dhkhr2qxge] { background: var(--pm-soft); }

@media (max-width: 640px) {
    .pm-new[b-dhkhr2qxge] { grid-template-columns: minmax(0, 1fr) auto; }
    .pm-new > .pm-field:first-child[b-dhkhr2qxge] { grid-column: 1 / -1; }
    .pm-new > .pm-field:nth-child(2)[b-dhkhr2qxge] { grid-column: 1; }
    .pm-new-preview[b-dhkhr2qxge] { grid-column: 2; }
    .pulse-modules-page :is(input, select)[b-dhkhr2qxge] { min-height: 2.75rem; font-size: 1rem; }
    .pm-tiny-button[b-dhkhr2qxge] { width: 2.75rem; height: 2.75rem; }
    .pm-danger-button[b-dhkhr2qxge], .pm-add-button[b-dhkhr2qxge], .pm-retry-button[b-dhkhr2qxge] { min-height: 2.75rem; }
    .pm-add-button[b-dhkhr2qxge] { grid-column: 1 / -1; }
}

/* Touch targets on any coarse pointer, not only narrow screens: these buttons
   flank a destructive two-step removal, and a wide tablet gets no help from
   the max-width block above. */
@media (any-pointer: coarse) {
    .pm-tiny-button[b-dhkhr2qxge] {
        width: 44px;
        height: 44px;
    }

    .pm-confirm .pm-tiny-button[b-dhkhr2qxge] {
        width: auto;
        min-width: 44px;
        min-height: 44px;
    }

    .pm-danger-button[b-dhkhr2qxge],
    .pm-retry-button[b-dhkhr2qxge] {
        min-height: 44px;
    }
}
/* /Components/Pages/Reliability.razor.rz.scp.css */
.reliability-page[b-96l5of1hzv] {
    --hub-accent: var(--pulse-accent, #0c807b);
    --hub-accent-strong: var(--pulse-accent-strong, var(--pulse-accent));
    --hub-ink: var(--pulse-text, #16242b);
    --hub-muted: var(--pulse-muted, #66767d);
    --hub-line: var(--pulse-border, #dce5e5);
    --hub-surface: var(--pulse-surface, #fff);
    --hub-soft: var(--pulse-surface-soft, #f3f7f7);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--hub-ink);
    font-size: .875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.reliability-breadcrumb[b-96l5of1hzv] { display: inline-flex; align-items: center; min-height: var(--pulse-control-min-height, 44px); padding: 0 .25rem; border-radius: var(--pulse-radius-sm, .5rem); color: var(--hub-muted); font-size: .875rem; font-weight: 500; text-decoration: none; }
.reliability-breadcrumb:hover[b-96l5of1hzv] { color: var(--hub-accent-strong); text-decoration: underline; }
.reliability-breadcrumb-separator[b-96l5of1hzv] { color: var(--hub-muted); font-size: .875rem; }

header[b-96l5of1hzv] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; min-height: var(--pulse-control-min-height, 44px); margin-bottom: .85rem; }
header > div[b-96l5of1hzv] { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; min-width: 0; }
h1[b-96l5of1hzv] { margin: 0; font-size: var(--pulse-workspace-title-size, 1.55rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.reliability-header-actions[b-96l5of1hzv] { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .5rem; align-items: center; }
.recovery-link[b-96l5of1hzv] { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .75rem; border-radius: var(--pulse-radius-sm, .5rem); color: var(--hub-accent-strong); font-size: .875rem; font-weight: 600; text-decoration: none; }
.recovery-link:hover[b-96l5of1hzv] { background: var(--hub-soft); text-decoration: underline; }

button[b-96l5of1hzv] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .5rem .85rem;
    border: 1px solid var(--hub-line);
    border-radius: var(--pulse-radius-sm, .5rem);
    color: var(--hub-ink);
    background: var(--hub-surface);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
button:hover:not(:disabled)[b-96l5of1hzv] { border-color: var(--hub-accent); color: var(--hub-accent-strong); }
button.primary[b-96l5of1hzv] { border-color: var(--pulse-action); color: var(--pulse-on-action); background: var(--pulse-action); }
button.primary:hover:not(:disabled)[b-96l5of1hzv] { border-color: var(--pulse-action-hover); color: var(--pulse-on-action); background: var(--pulse-action-hover); }
button.danger[b-96l5of1hzv] { color: var(--pulse-danger-text); }
button.danger:hover:not(:disabled)[b-96l5of1hzv] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
button:disabled[b-96l5of1hzv] { cursor: wait; opacity: .58; }
.reliability-page :is(a, button, input):focus-visible[b-96l5of1hzv] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.reliability-workspace[b-96l5of1hzv] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pulse-workspace-gap); align-items: start; }

section[b-96l5of1hzv] {
    min-width: 0;
    margin: 0;
    padding: .875rem 1rem;
    border: 1px solid var(--hub-line);
    border-radius: var(--pulse-radius-lg, .875rem);
    background: var(--hub-surface);
}
section h2[b-96l5of1hzv] { margin: 0 0 .6rem; color: var(--hub-ink); font-size: 1rem; font-weight: 600; line-height: 1.3; }

.cards[b-96l5of1hzv] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .65rem; }
.cards article[b-96l5of1hzv] { display: grid; min-width: 0; gap: .45rem; padding: .8rem; border: 1px solid var(--hub-line); border-radius: var(--pulse-radius-md, .75rem); background: var(--hub-surface); }
.cards article > strong[b-96l5of1hzv] { font-weight: 600; }
.metric-values[b-96l5of1hzv] { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-variant-numeric: tabular-nums; }
.metric-values span[b-96l5of1hzv] { font-size: .875rem; }
.cards small[b-96l5of1hzv], .ledger small[b-96l5of1hzv], .empty[b-96l5of1hzv] { color: var(--hub-muted); font-size: .8125rem; }
.empty[b-96l5of1hzv] { margin: .55rem 0; line-height: 1.45; }

.ledger[b-96l5of1hzv] { display: grid; gap: .6rem; margin-top: .65rem; }
.ledger article[b-96l5of1hzv] { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: .75rem; padding: .8rem; border: 1px solid var(--hub-line); border-inline-start-width: 3px; border-radius: var(--pulse-radius-md, .75rem); background: var(--hub-surface); }
.ledger[aria-label="Dependency alert history"] article:not(.recovered)[b-96l5of1hzv] { border-inline-start-color: var(--pulse-danger-text, #c43d3d); }
.ledger article.recovered[b-96l5of1hzv] { border-inline-start-color: var(--pulse-success-text, #23845b); }
.ledger article > div[b-96l5of1hzv] { min-width: 0; }
.ledger strong[b-96l5of1hzv] { font-weight: 600; }
.state[b-96l5of1hzv] { align-self: start; font-weight: 600; font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.ledger p[b-96l5of1hzv] { margin: .3rem 0; white-space: pre-line; }
.ledger small[b-96l5of1hzv] { display: block; }
.ledger label[b-96l5of1hzv] { display: grid; gap: .35rem; margin-top: .85rem; font-size: .875rem; font-weight: 500; }
.ledger input[b-96l5of1hzv] { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--pulse-control-min-height, 44px); padding: .55rem .7rem; border: 1px solid var(--pulse-control-border, var(--hub-line)); border-radius: var(--pulse-radius-sm, .5rem); color: var(--pulse-control-text, var(--hub-ink)); background: var(--pulse-control-surface, var(--hub-surface)); font: inherit; }
.ledger input:disabled[b-96l5of1hzv] { opacity: .6; }
.ledger-actions[b-96l5of1hzv] { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.ledger:focus[b-96l5of1hzv] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.notice[b-96l5of1hzv] { margin: .65rem 0; padding: .7rem .8rem; border: 1px solid var(--pulse-warning-border, #f3d9a5); border-radius: var(--pulse-radius-sm, .5rem); color: var(--pulse-warning-text, #92400e); background: var(--pulse-warning-soft, #fff1d6); font-size: .8125rem; line-height: 1.45; }
.notice.neutral[b-96l5of1hzv] { border-color: var(--hub-line); color: var(--hub-muted); background: var(--hub-soft); }
.notice code[b-96l5of1hzv] { font-family: "Cascadia Code", Consolas, monospace; font-size: .8125rem; overflow-wrap: anywhere; }
.notice > button[b-96l5of1hzv] { margin: .4rem 0 .1rem; }
.notice.action-result[b-96l5of1hzv] { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.notice.action-result button[b-96l5of1hzv] { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: 0; padding: .25rem .5rem; border: 0; color: inherit; background: transparent; font-size: 1.2rem; }
.source-state[b-96l5of1hzv] { display: inline-block; max-width: 100%; box-sizing: border-box; margin: 0 0 .35rem; padding: .4rem .6rem; border: 1px solid var(--hub-line); border-radius: var(--pulse-radius-sm, .5rem); background: var(--hub-soft); font-size: .8125rem; }
.source-state.loading[b-96l5of1hzv] { color: var(--pulse-info-strong, #075985); }
.source-state.confirmed[b-96l5of1hzv] { color: var(--pulse-success-text, #166534); }
.source-state.stale[b-96l5of1hzv] { border-color: var(--pulse-warning-border); color: var(--pulse-warning-text, #92400e); background: var(--pulse-warning-soft, #fef3c7); }
.source-state.unavailable[b-96l5of1hzv] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text, #9f1239); background: var(--pulse-danger-soft, #ffe4e6); }
.recovery-controls[b-96l5of1hzv] { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: .35rem 0 .6rem; }
.recovery-controls .empty[b-96l5of1hzv] { margin: 0; }

@media (min-width: 1100px) {
    .reliability-workspace[b-96l5of1hzv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    section[aria-labelledby="latency-title"][b-96l5of1hzv] { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .reliability-page[b-96l5of1hzv] { padding: .75rem; }
}

@media (max-width: 640px) {
    header[b-96l5of1hzv] { flex-direction: column; align-items: flex-start; gap: .6rem; }
    header button[b-96l5of1hzv] { flex: 0 0 auto; padding-inline: .7rem; }
    .reliability-header-actions[b-96l5of1hzv] { width: 100%; justify-content: space-between; }
    section[b-96l5of1hzv] { padding: .8rem; }
    .ledger article[b-96l5of1hzv] { grid-template-columns: 1fr; gap: .35rem; }
    .ledger-actions[b-96l5of1hzv] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
    .ledger-actions button[b-96l5of1hzv], .recovery-controls button[b-96l5of1hzv] { width: 100%; }
    .recovery-controls[b-96l5of1hzv] { align-items: stretch; }
    .recovery-controls > *[b-96l5of1hzv] { width: 100%; }
}

@media (any-pointer: coarse) {
    .ledger input[b-96l5of1hzv] { font-size: 16px; }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
.scheduled-reports-page[b-y0o2aedfha] {
    box-sizing: border-box;
    container-name: reports-workspace;
    container-type: inline-size;
    color: var(--pulse-text, #172033);
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    max-width: none;
    padding: var(--pulse-workspace-pad-top, 1.5rem) var(--pulse-workspace-pad-x, 1.25rem) var(--pulse-workspace-pad-bottom, 3rem);
    width: 100%;
}

.report-library[b-y0o2aedfha],
.report-editor[b-y0o2aedfha],
.report-history[b-y0o2aedfha] {
    background: var(--pulse-surface, #fff);
    border: 1px solid var(--pulse-border, #d7ddea);
    border-radius: var(--pulse-radius-lg, 14px);
    box-shadow: var(--pulse-shadow-sm);
}

.reports-hero[b-y0o2aedfha] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    justify-content: space-between;
    margin-bottom: var(--pulse-workspace-gap, 12px);
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
}

.reports-hero h1[b-y0o2aedfha],
.report-library h2[b-y0o2aedfha],
.report-editor h2[b-y0o2aedfha],
.report-history h2[b-y0o2aedfha] {
    color: var(--pulse-text, #172033);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: .15rem 0 .25rem;
}

.reports-hero h1[b-y0o2aedfha] { font-size: var(--pulse-workspace-title-size, 22px); margin: 0; }
.report-history header p[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: var(--pulse-workspace-lede-size, 13px); line-height: 1.45; margin: 0; max-width: 72ch; }
.reports-kicker[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.reports-hero-copy[b-y0o2aedfha] { align-items: baseline; display: flex; flex-wrap: wrap; gap: .15rem .6rem; min-width: 0; }
.reports-hero-note[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: var(--pulse-workspace-lede-size, 13px); font-weight: 500; line-height: 1.45; }

.reports-notice[b-y0o2aedfha] { align-items: center; border-radius: .7rem; display: flex; gap: .75rem; justify-content: space-between; margin: .7rem 0; padding: .75rem 1rem; }
.reports-notice.error[b-y0o2aedfha] { background: var(--pulse-danger-soft, #fff1f2); border: 1px solid var(--pulse-danger-border, #fecdd3); color: var(--pulse-danger-text, #9f1239); }
.reports-notice.success[b-y0o2aedfha] { background: var(--pulse-success-soft, #ecfdf5); border: 1px solid var(--pulse-success-border, #a7f3d0); color: var(--pulse-success-text, #065f46); }
.reports-notice.warning[b-y0o2aedfha] { background: var(--pulse-warning-soft, #fffbeb); border: 1px solid var(--pulse-warning-border, #fde68a); color: var(--pulse-warning-text, #92400e); }
.reports-notice button[b-y0o2aedfha] { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.2rem; }
/* The banner takes focus when a refusal names no field of its own, so it has to
   show where focus went. */
.reports-notice.error:focus[b-y0o2aedfha] { outline: 3px solid var(--pulse-focus-ring, #0284c7); outline-offset: 2px; }
.reports-notice-actions[b-y0o2aedfha] { align-items: center; display: flex; flex: 0 0 auto; gap: .5rem; }
/* The way out of a refused mutation sits in the banner that reports it, and
   stays the banner's colour rather than introducing a second accent. */
.reports-notice.error .link-button[b-y0o2aedfha] { border-color: currentColor; color: inherit; font-size: .82rem; font-weight: 700; min-height: 2rem; padding: .3rem .6rem; text-decoration: none; white-space: nowrap; }

.reports-workbench[b-y0o2aedfha] { align-items: start; display: grid; gap: var(--pulse-workspace-gap, 12px); grid-template-columns: clamp(17rem, 25%, 22rem) minmax(0, 1fr); }
.report-editor[b-y0o2aedfha] { container-name: report-editor; container-type: inline-size; }
.report-library[b-y0o2aedfha],
.report-editor[b-y0o2aedfha],
.report-history[b-y0o2aedfha] { min-width: 0; padding: 1rem; }
.report-library > header[b-y0o2aedfha],
.report-editor > header[b-y0o2aedfha],
.report-history > header[b-y0o2aedfha] { align-items: start; display: flex; gap: .75rem; justify-content: space-between; }
.editor-header-actions[b-y0o2aedfha] { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.report-library h2[b-y0o2aedfha],
.report-editor h2[b-y0o2aedfha],
.report-history h2[b-y0o2aedfha] { font-size: 16px; }
.icon-button[b-y0o2aedfha],
.secondary-action[b-y0o2aedfha],
.danger-action[b-y0o2aedfha],
.primary-action[b-y0o2aedfha],
.link-button[b-y0o2aedfha] { border: 1px solid var(--pulse-border, #cbd5e1); border-radius: var(--pulse-radius-sm, 8px); cursor: pointer; font: inherit; font-size: 14px; min-height: var(--pulse-control-compact-height, 38px); padding: .4rem .7rem; }
.icon-button[b-y0o2aedfha] { background: transparent; color: var(--pulse-muted, #5b667a); font-size: 1.15rem; }
.primary-action[b-y0o2aedfha] { background: var(--pulse-action, #0f766e); border-color: var(--pulse-action, #0f766e); color: var(--pulse-on-action, #fff); font-weight: 700; }
.secondary-action[b-y0o2aedfha] { background: var(--pulse-surface, #fff); color: var(--pulse-text, #172033); }
.danger-action[b-y0o2aedfha] { background: var(--pulse-danger-soft, #fff1f2); border-color: var(--pulse-danger-border, #fecdd3); color: var(--pulse-danger-text, #9f1239); }
.link-button[b-y0o2aedfha] { background: transparent; color: var(--pulse-accent, #0f766e); }
button:focus-visible[b-y0o2aedfha],
a:focus-visible[b-y0o2aedfha],
input:focus-visible[b-y0o2aedfha],
select:focus-visible[b-y0o2aedfha] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }
button:disabled[b-y0o2aedfha] { cursor: not-allowed; opacity: .58; }

.report-list[b-y0o2aedfha] { display: grid; gap: .45rem; margin-top: 1rem; }
.report-search[b-y0o2aedfha] { display: grid; gap: .3rem; margin-top: .85rem; }
.report-search > label[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; font-weight: 700; }
.report-search > div[b-y0o2aedfha] { display: flex; gap: .35rem; }
.report-search input[b-y0o2aedfha] { background: var(--pulse-surface, #fff); border: 1px solid var(--pulse-border, #cbd5e1); border-radius: .5rem; color: var(--pulse-text, #172033); min-width: 0; padding: .45rem .55rem; width: 100%; }
.report-page-summary[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; margin: .7rem 0 .35rem; }
.load-more[b-y0o2aedfha] { width: 100%; }
.report-row[b-y0o2aedfha] { align-items: center; background: transparent; border: 1px solid transparent; border-radius: .75rem; color: inherit; cursor: pointer; display: flex; gap: .75rem; padding: .7rem; text-align: left; width: 100%; }
.report-row:hover[b-y0o2aedfha] { background: var(--pulse-surface-soft, #f6f8fb); border-color: var(--pulse-border, #d7ddea); }
.report-row.selected[b-y0o2aedfha] { background: var(--pulse-accent-soft); border-color: var(--pulse-accent-border); }
.report-row-mark[b-y0o2aedfha] { align-items: center; border-radius: .55rem; display: inline-flex; flex: 0 0 2rem; font-size: .75rem; font-weight: 700; height: 2rem; justify-content: center; }
.report-row-mark.intelligence[b-y0o2aedfha] { background: var(--pulse-info-soft); color: var(--pulse-info-strong); }
.report-row-mark.executive[b-y0o2aedfha] { background: var(--pulse-accent-soft); color: var(--pulse-accent); }
.report-row-mark.sla[b-y0o2aedfha] { background: var(--pulse-warning-soft); color: var(--pulse-warning-text); }
.report-row-copy[b-y0o2aedfha] { display: grid; gap: .15rem; min-width: 0; }
.report-row-title[b-y0o2aedfha] { align-items: center; display: flex; flex-wrap: wrap; gap: .3rem .45rem; min-width: 0; }
.report-row-copy strong[b-y0o2aedfha] { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.report-row-copy small[b-y0o2aedfha],
.report-row-copy em[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; font-style: normal; overflow-wrap: anywhere; }
.report-state[b-y0o2aedfha] { border-radius: 999px; flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: .12rem .42rem; text-transform: none; }
.report-state.is-active[b-y0o2aedfha] { background: var(--pulse-success-soft, #dcfce7); color: var(--pulse-success-text, #166534); }
.report-state.is-paused[b-y0o2aedfha] { background: var(--pulse-surface-inset, #f1f5f9); color: var(--pulse-text, #475569); }
.reports-empty[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); display: grid; gap: .35rem; margin: 1.25rem 0 .2rem; }
.report-library .reports-empty[b-y0o2aedfha] { background: var(--pulse-surface-soft); border: 1px dashed var(--pulse-border); border-radius: .75rem; font-size: .875rem; line-height: 1.5; padding: 1rem; }
.report-library .reports-empty strong[b-y0o2aedfha] { color: var(--pulse-text); font-size: .95rem; }
.report-library .reports-empty.is-unavailable[b-y0o2aedfha] { border-color: var(--pulse-warning-border); border-style: solid; }
.report-library .reports-empty > button[b-y0o2aedfha] { justify-self: start; margin-top: .35rem; }
.report-search-context[b-y0o2aedfha] { color: var(--pulse-muted); font-size: .8125rem; line-height: 1.5; margin: .75rem 0 0; overflow-wrap: anywhere; }
.reports-empty .report-search-context[b-y0o2aedfha] { margin: 0; }
.report-search input[b-y0o2aedfha],
.report-search button[b-y0o2aedfha],
.report-library .reports-empty > button[b-y0o2aedfha] { min-height: var(--pulse-control-compact-height, 38px); }
.report-library input:focus-visible[b-y0o2aedfha],
.report-library button:focus-visible[b-y0o2aedfha],
.history-table-wrap:focus-visible[b-y0o2aedfha],
.history-table-wrap a:focus-visible[b-y0o2aedfha],
.history-table-wrap button:focus-visible[b-y0o2aedfha] { outline: 3px solid var(--pulse-focus-ring); outline-offset: 2px; }

.scope-chip[b-y0o2aedfha] { background: var(--pulse-surface-soft, #f6f8fb); border: 1px solid var(--pulse-border, #d7ddea); border-radius: 999px; color: var(--pulse-muted, #5b667a); font-size: .76rem; padding: .4rem .65rem; white-space: nowrap; }
.dirty-chip[b-y0o2aedfha] { background: var(--pulse-warning-soft, #fffbeb); border: 1px solid var(--pulse-warning-border, #fde68a); border-radius: 999px; color: var(--pulse-warning-text, #92400e); font-size: .75rem; font-weight: 700; padding: .35rem .6rem; }
/* Four labelled groups instead of one 15-control strip. A fieldset needs
   min-width: 0 or its intrinsic minimum width stops the grid inside it from
   shrinking, and the whole editor overflows on a narrow column. */
.report-form-sections[b-y0o2aedfha] { display: grid; gap: var(--pulse-workspace-gap, 12px); margin-top: .85rem; }
.report-form-section[b-y0o2aedfha] { border: 0; margin: 0; min-width: 0; padding: 0; }
.report-form-section + .report-form-section[b-y0o2aedfha] { border-top: 1px solid var(--pulse-border, #e2e8f0); padding-top: var(--pulse-workspace-gap, 12px); }
.report-form-section > legend[b-y0o2aedfha] { float: left; padding: 0; width: 100%; }
.report-form-section > legend .reports-kicker[b-y0o2aedfha] { color: var(--pulse-text); font-size: 14px; letter-spacing: normal; }
.report-form-section > legend + *[b-y0o2aedfha] { clear: both; }
.report-form-section .section-hint[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .76rem; line-height: 1.45; margin: .2rem 0 0; max-width: 46rem; }
.report-form-section .report-form-help[b-y0o2aedfha] { margin: .55rem 0 0; }

.report-form-grid[b-y0o2aedfha] { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .75rem; }
.report-form-grid label[b-y0o2aedfha] { display: grid; gap: .35rem; min-width: 0; }
.report-form-grid label > span[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; font-weight: 700; }
.report-form-grid label small[b-y0o2aedfha] { font-weight: 400; }
.report-form-grid .wide[b-y0o2aedfha] { grid-column: 1 / -1; }
.report-form-grid input[b-y0o2aedfha],
.report-form-grid select[b-y0o2aedfha] { background: var(--pulse-surface, #fff); border: 1px solid var(--pulse-border, #cbd5e1); border-radius: .5rem; color: inherit; font: inherit; min-height: 2.35rem; min-width: 0; padding: .45rem .6rem; width: 100%; }
.report-picker[b-y0o2aedfha] { display: grid; gap: .35rem; }
.report-picker > label[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .75rem; font-weight: 700; }
.report-picker-options[b-y0o2aedfha] { background: var(--pulse-surface-soft, #f6f8fb); border: 1px solid var(--pulse-border, #d7ddea); border-radius: .55rem; display: grid; gap: .2rem; max-height: 13rem; overflow-y: auto; padding: .35rem; }
.report-picker-options > label[b-y0o2aedfha] { align-items: start; background: var(--pulse-surface, #fff); border-radius: .4rem; display: flex; gap: .5rem; padding: .45rem; }
.report-picker-options > label input[b-y0o2aedfha] { flex: 0 0 auto; min-height: 1rem; width: 1rem; }
.report-picker-options > label span[b-y0o2aedfha] { display: grid; gap: .1rem; }
.report-picker-options small[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); }
.report-picker-options p[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .78rem; margin: .5rem; }
/* The save alert names one field; this is what makes that field findable
   without rereading the whole editor. */
.report-form-grid input[aria-invalid="true"][b-y0o2aedfha],
.report-form-grid select[aria-invalid="true"][b-y0o2aedfha] {
    border-color: var(--pulse-danger-text, #b91c1c);
    box-shadow: 0 0 0 3px var(--pulse-danger-soft, #fee2e2);
}
.number-with-unit[b-y0o2aedfha] { align-items: center; display: flex; gap: .4rem; }
.number-with-unit input[b-y0o2aedfha] { min-width: 0; }
.number-with-unit span[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .76rem; }
.report-form-help[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .78rem; line-height: 1.5; margin: 1rem 0; max-width: 72ch; }
.report-form-help.inline[b-y0o2aedfha] { display: inline-block; margin: 0; }
.report-editor-actions[b-y0o2aedfha] { align-items: center; border-top: 1px solid var(--pulse-border, #e2e8f0); display: flex; gap: 1rem; justify-content: space-between; padding-top: 1rem; }
.enable-toggle[b-y0o2aedfha] { align-items: center; display: flex; gap: .55rem; }
.enable-toggle span[b-y0o2aedfha] { display: grid; gap: .1rem; }
.enable-toggle small[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); }

/* Use the editor's available width, including the navigation and library.
   Keep decision groups together instead of stretching every input across
   a wide desktop. Their DOM and keyboard order remain identity to delivery. */
@container report-editor (min-width: 52rem) {
    .report-form-sections[b-y0o2aedfha] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-form-section + .report-form-section[b-y0o2aedfha] { border-top: 0; padding-top: 0; }
    .report-form-section:nth-child(2n)[b-y0o2aedfha] { border-inline-start: 1px solid var(--pulse-border); padding-inline-start: var(--pulse-workspace-gap, 12px); }
    .report-form-section:nth-child(n + 3)[b-y0o2aedfha] { border-top: 1px solid var(--pulse-border); padding-top: var(--pulse-workspace-gap, 12px); }
    .report-form-grid[b-y0o2aedfha] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .report-time-zone[b-y0o2aedfha] { grid-column: 1 / -1; }
}

@container report-editor (min-width: 104rem) {
    .report-form-sections[b-y0o2aedfha] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .report-form-section:nth-child(n + 2)[b-y0o2aedfha] { border-top: 0; border-inline-start: 1px solid var(--pulse-border); padding-top: 0; padding-inline-start: var(--pulse-workspace-gap, 12px); }
}

@container reports-workspace (max-width: 52rem) {
    .reports-workbench[b-y0o2aedfha] { grid-template-columns: minmax(0, 1fr); }
    .report-list[b-y0o2aedfha] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.report-history[b-y0o2aedfha] { margin-top: 1rem; }
.history-actions[b-y0o2aedfha] { display: flex; flex-wrap: wrap; gap: .5rem; }
.report-history[b-y0o2aedfha] { container-name: report-history; container-type: inline-size; }
.report-history > header > div:first-child[b-y0o2aedfha] { min-width: 0; overflow-wrap: anywhere; }
.history-table-wrap[b-y0o2aedfha] { margin-top: 1rem; overflow-x: auto; }
.history-table-wrap table[b-y0o2aedfha] { border-collapse: collapse; font-size: 13px; min-width: 52rem; table-layout: fixed; width: 100%; }
.history-table-wrap th:nth-child(1)[b-y0o2aedfha] { width: 23%; }
.history-table-wrap th:nth-child(2)[b-y0o2aedfha] { width: 13%; }
.history-table-wrap th:nth-child(3)[b-y0o2aedfha] { width: 20%; }
.history-table-wrap th:nth-child(4)[b-y0o2aedfha] { width: 33%; }
.history-table-wrap th:nth-child(5)[b-y0o2aedfha] { width: 11%; }
.history-table-wrap th[b-y0o2aedfha],
.history-table-wrap td[b-y0o2aedfha] { border-bottom: 1px solid var(--pulse-border, #e2e8f0); line-height: 1.5; overflow-wrap: anywhere; padding: .7rem .55rem; text-align: left; vertical-align: top; }
.history-table-wrap th[b-y0o2aedfha] { background: var(--pulse-surface-soft); color: var(--pulse-muted, #5b667a); font-size: .75rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.history-table-wrap td small[b-y0o2aedfha],
.artifact-meta[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); display: block; font-size: .75rem; margin-top: .2rem; }
.history-table-wrap code[b-y0o2aedfha] { font-size: .75rem; overflow-wrap: anywhere; white-space: normal; }
.history-schedule-cell[b-y0o2aedfha] { font-variant-numeric: tabular-nums; }
.ledger-error[b-y0o2aedfha] { color: var(--pulse-danger-text, #b91c1c) !important; max-width: 18rem; overflow-wrap: anywhere; white-space: normal; }
.delivery-list[b-y0o2aedfha] { display: grid; gap: .5rem; min-width: 0; }
.delivery-chip[b-y0o2aedfha] { border-radius: 999px; display: inline-block; font-size: .75rem; padding: .28rem .48rem; white-space: nowrap; }
.history-table-wrap .delivery-chip[b-y0o2aedfha] { border-radius: .6rem; display: grid; gap: .15rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: .5rem .6rem; white-space: normal; }
.history-table-wrap .delivery-chip strong[b-y0o2aedfha] { font-size: .8125rem; }
.history-table-wrap .delivery-chip small[b-y0o2aedfha] { margin-top: 0; }
.history-table-wrap .download-action[b-y0o2aedfha],
.history-table-wrap .link-button[b-y0o2aedfha] { align-items: center; display: inline-flex; justify-content: center; min-height: var(--pulse-control-compact-height, 38px); }
.delivery-chip.delivered[b-y0o2aedfha] { background: var(--pulse-success-soft, #dcfce7); color: var(--pulse-success-text, #166534); }
.delivery-chip.notconfigured[b-y0o2aedfha],
.delivery-chip.queued[b-y0o2aedfha] { background: var(--pulse-info-soft); color: var(--pulse-info-strong); }
/* DeliveryTone() lowercases the enum name, so every state needs a tone or the
   chip paints as bare text next to coloured neighbours. */
.delivery-chip.retryscheduled[b-y0o2aedfha],
.delivery-chip.outcomeunknown[b-y0o2aedfha] { background: var(--pulse-warning-soft); color: var(--pulse-warning-text); }
.delivery-chip.unauthorized[b-y0o2aedfha],
.delivery-chip.failed[b-y0o2aedfha],
.delivery-chip.deadletter[b-y0o2aedfha] { background: var(--pulse-danger-soft); color: var(--pulse-danger-text); }
.delivery-chip.cancelled[b-y0o2aedfha] { background: var(--pulse-surface-inset, #f1f5f9); color: var(--pulse-muted, #64748b); }
.download-action[b-y0o2aedfha] { color: var(--pulse-accent, #0f766e); font-size: .82rem; font-weight: 700; white-space: nowrap; }

/* The repair queue for the ledger above. Deliberately quieter than the four
   primary panels: muted surface, no shadow, narrower measure. */
.delivery-recovery-panel[b-y0o2aedfha] {
    background: var(--pulse-surface-soft, #f6f8fb);
    border: 1px dashed var(--pulse-border, #d7ddea);
    border-radius: var(--pulse-radius-xl, 1.2rem);
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding: clamp(.85rem, 1.4vw, 1.1rem);
}
.delivery-recovery-panel > header[b-y0o2aedfha] { display: grid; gap: .15rem; }
.delivery-recovery-panel > header strong[b-y0o2aedfha] { font-size: .92rem; }
.delivery-recovery-panel > header small[b-y0o2aedfha] { color: var(--pulse-muted, #5b667a); font-size: .76rem; }
.delivery-recovery-list[b-y0o2aedfha] { display: grid; gap: .35rem; list-style: none; margin: 0; max-width: 58rem; padding: 0; }
.delivery-recovery-list li[b-y0o2aedfha] {
    align-items: center;
    background: var(--pulse-surface, #fff);
    border: 1px solid var(--pulse-border, #e2e8f0);
    border-radius: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .45rem .6rem;
}
.delivery-recovery-name[b-y0o2aedfha] { flex: 1 1 12rem; font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-recovery-list .link-button[b-y0o2aedfha] { flex: 0 0 auto; font-size: .8rem; min-height: 2rem; padding: .3rem .55rem; }

/* The ledger responds to its available width, including the navigation rail.
   Every field keeps its table header; the same labels accompany stacked cells. */
@container report-history (max-width: 56rem) {
    .history-table-wrap[b-y0o2aedfha] { overflow: visible; }
    .history-table-wrap table[b-y0o2aedfha],
    .history-table-wrap tbody[b-y0o2aedfha] { display: block; min-width: 0; width: 100%; }
    .history-table-wrap thead[b-y0o2aedfha] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
    .history-table-wrap tbody[b-y0o2aedfha] { display: grid; gap: 1rem; }
    .history-table-wrap tr[b-y0o2aedfha] {
        background: var(--pulse-surface-soft);
        border: 1px solid var(--pulse-border);
        border-radius: .8rem;
        display: grid;
        grid-template-areas: "schedule generation" "artifact actions" "delivery delivery";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .history-table-wrap td[b-y0o2aedfha] { border-bottom: 1px solid var(--pulse-border); display: block; min-width: 0; padding: .8rem; }
    .history-table-wrap td[b-y0o2aedfha]::before { color: var(--pulse-muted); content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; margin-bottom: .4rem; }
    .history-schedule-cell[b-y0o2aedfha] { grid-area: schedule; }
    .history-generation-cell[b-y0o2aedfha] { grid-area: generation; }
    .history-artifact-cell[b-y0o2aedfha] { grid-area: artifact; }
    .history-actions-cell[b-y0o2aedfha] { grid-area: actions; }
    .history-table-wrap .history-delivery-cell[b-y0o2aedfha] { border-bottom: 0; grid-area: delivery; }
}

@container report-history (max-width: 36rem) {
    .history-table-wrap tr[b-y0o2aedfha] { grid-template-areas: "schedule" "generation" "artifact" "delivery" "actions"; grid-template-columns: minmax(0, 1fr); }
    .history-table-wrap .history-delivery-cell[b-y0o2aedfha] { border-bottom: 1px solid var(--pulse-border); }
    .history-table-wrap .history-actions-cell[b-y0o2aedfha] { border-bottom: 0; }
    .history-table-wrap .download-action[b-y0o2aedfha],
    .history-table-wrap .link-button[b-y0o2aedfha] { min-height: var(--pulse-control-min-height, 44px); }
}

@media (max-width: 950px) {
    .reports-workbench[b-y0o2aedfha] { grid-template-columns: 1fr; }
    .report-list[b-y0o2aedfha] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .scheduled-reports-page[b-y0o2aedfha] { padding-left: .75rem; padding-right: .75rem; }
    .report-form-grid[b-y0o2aedfha] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-form-grid .wide[b-y0o2aedfha] { grid-column: 1 / -1; }
    .report-list[b-y0o2aedfha] { grid-template-columns: 1fr; }
    .report-editor-actions[b-y0o2aedfha] { align-items: stretch; flex-direction: column; }
    .primary-action[b-y0o2aedfha] { width: 100%; }
    .report-history > header[b-y0o2aedfha] { flex-direction: column; }
    .history-actions[b-y0o2aedfha] { width: 100%; }
    .history-actions > button[b-y0o2aedfha] { flex: 1; }
    .report-search input[b-y0o2aedfha],
    .report-search button[b-y0o2aedfha],
    .report-library .reports-empty > button[b-y0o2aedfha] { min-height: var(--pulse-control-min-height, 44px); }
    .icon-button[b-y0o2aedfha],
    .secondary-action[b-y0o2aedfha],
    .danger-action[b-y0o2aedfha],
    .primary-action[b-y0o2aedfha],
    .link-button[b-y0o2aedfha] { min-height: var(--pulse-control-min-height, 44px); }
    .reports-notice[b-y0o2aedfha] { align-items: flex-start; flex-wrap: wrap; }
    .reports-notice-actions[b-y0o2aedfha] { flex-wrap: wrap; }
    .reports-notice button[b-y0o2aedfha] { min-height: 44px; min-width: 44px; }
    .report-picker-options > label[b-y0o2aedfha],
    .enable-toggle[b-y0o2aedfha] { min-height: 44px; }
    .report-form-grid input[b-y0o2aedfha],
    .report-form-grid select[b-y0o2aedfha] { font-size: 16px; min-height: 44px; }
    .report-picker-options > label input[b-y0o2aedfha] { min-height: 1rem; }
}

@media (max-width: 430px) {
    .report-form-grid[b-y0o2aedfha] { grid-template-columns: 1fr; }
    .report-form-grid .wide[b-y0o2aedfha] { grid-column: auto; }
    .scope-chip[b-y0o2aedfha] { white-space: normal; }
}
/* /Components/Pages/ResponseManagement.razor.rz.scp.css */
.response-management-page[b-bbvekcydy4] {
    box-sizing: border-box;
    color: var(--pulse-text);
    display: grid;
    gap: var(--pulse-workspace-gap);
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    width: 100%;
}

.response-management-heading[b-bbvekcydy4] {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-height: var(--pulse-control-min-height);
}

.response-management-heading h1[b-bbvekcydy4] {
    font-size: var(--pulse-workspace-title-size);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0;
}

.response-management-choices[b-bbvekcydy4] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.response-management-card[b-bbvekcydy4] {
    align-content: start;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    display: grid;
    gap: .75rem;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-width: 0;
    padding: 1rem;
}

.response-management-icon[b-bbvekcydy4] {
    align-items: center;
    background: color-mix(in srgb, var(--pulse-accent) 8%, var(--pulse-surface));
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-accent);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.response-management-copy[b-bbvekcydy4] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.response-management-copy h2[b-bbvekcydy4] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: .1rem 0 .4rem;
}

.response-management-copy p[b-bbvekcydy4] {
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
}

.response-management-open[b-bbvekcydy4] {
    align-items: center;
    background: var(--pulse-control-surface);
    border: 1px solid var(--pulse-control-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-control-text);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: .6rem;
    grid-column: 1 / -1;
    justify-content: space-between;
    line-height: 1.3;
    min-height: var(--pulse-control-min-height, 44px);
    overflow-wrap: anywhere;
    padding: .6rem .85rem;
    text-decoration: none;
}

.response-management-open svg[b-bbvekcydy4] {
    fill: none;
    flex: 0 0 auto;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 18px;
}

.response-management-open:hover[b-bbvekcydy4] {
    background: var(--pulse-control-surface-hover);
    border-color: var(--pulse-border-strong);
    color: var(--pulse-control-text);
}

.response-management-open:focus-visible[b-bbvekcydy4] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 3px;
}

.response-management-unavailable[b-bbvekcydy4] {
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    padding: 1rem;
}

@media (max-width: 640px) {
    .response-management-choices[b-bbvekcydy4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-jvbo1gzoxc] {
    --sp-surface: var(--pulse-surface);
    --sp-soft: var(--pulse-surface-soft);
    --sp-border: var(--pulse-border);
    --sp-ink: var(--pulse-text);
    --sp-muted: var(--pulse-muted);
    --sp-accent: var(--pulse-accent);
    --sp-accent-strong: color-mix(in srgb, var(--pulse-accent) 78%, var(--pulse-text));
    --sp-header-offset: var(--pulse-commandbar-height);
    width: min(var(--pulse-workspace-max, 1600px), 100%);
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    min-height: calc(100vh - 6rem);
    margin: 0 auto;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--sp-ink);
    background: transparent;
    line-height: 1.45;
}

/* Keep administration surfaces quiet; selection and validation carry colour.
   The title row is the left half of the sticky action bar: the h1 and the
   configuration-file disclosure sit on the canvas, no card around them, and
   the shared control token gives the row its 44px height. */
.settings-hero[b-jvbo1gzoxc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    gap: .15rem .75rem;
    margin-right: auto;
    min-width: 0;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0;
    border: 0;
    color: var(--pulse-text);
    background: transparent;
}

.settings-hero h1[b-jvbo1gzoxc] { margin: 0; color: var(--pulse-text); font-size: var(--pulse-workspace-title-size, 1.55rem); line-height: 1.3; letter-spacing: -.015em; font-weight: 700; }

.config-path-details[b-jvbo1gzoxc] { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; color: var(--sp-muted); font-size: var(--pulse-workspace-lede-size, .82rem); }
.config-path-details[open][b-jvbo1gzoxc] { flex: 1 0 100%; }
.config-path-details summary[b-jvbo1gzoxc] { min-height: var(--pulse-control-compact-height, 38px); align-content: center; cursor: pointer; font-weight: 600; }
.config-path-details code[b-jvbo1gzoxc] { display:block; margin:.25rem 0 .35rem; color:var(--sp-muted); font-family:"Cascadia Code",Consolas,monospace; font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; white-space:normal; }

/* A 40px strip directly under the title row: fifteen links are too many for
   the title row itself, and nothing else sits between the strip and the
   first panel. */
.settings-section-nav[b-jvbo1gzoxc] {
    grid-column: 1 / -1;
    display: flex;
    gap: .125rem;
    margin: 0;
    padding: 0;
    min-height: 40px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.settings-section-nav a[b-jvbo1gzoxc] {
    display: inline-flex;
    min-height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .25rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sp-muted);
    background: transparent;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    scroll-snap-align: start;
}

.settings-section-nav a:hover[b-jvbo1gzoxc],
.settings-section-nav a:focus-visible[b-jvbo1gzoxc] { border-color: var(--sp-accent); color: var(--sp-accent-strong); background: var(--sp-surface); }

/* The preferences component owns its controls and surface. Keep its anchor
   clear of this page's configuration action bar. */
.settings-general[b-jvbo1gzoxc] { display: block; margin: 0; }
.settings-general[b-jvbo1gzoxc]  .settings-panel { scroll-margin-top: calc(var(--sp-header-offset) + 5.5rem); }

.settings-grid[b-jvbo1gzoxc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pulse-workspace-gap, 1rem); align-items: start; }
.settings-panel-wide[b-jvbo1gzoxc], .settings-panel-bridge[b-jvbo1gzoxc], .settings-panel-snapshots[b-jvbo1gzoxc], .settings-panel-cleanup[b-jvbo1gzoxc] { grid-column:1 / -1; }
.settings-panel-snapshots[b-jvbo1gzoxc], .settings-panel-cleanup[b-jvbo1gzoxc] { grid-column: auto; }
.settings-field-grid[b-jvbo1gzoxc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .875rem; min-width: 0; align-items: end; }

.settings-panel[b-jvbo1gzoxc], .settings-alert[b-jvbo1gzoxc] {
    position: relative;
    border: 1px solid var(--sp-border);
    border-radius: var(--pulse-radius-lg, 14px);
    color: var(--sp-ink);
    background: var(--sp-surface);
    box-shadow: none;
    min-width: 0;
}

.settings-panel[b-jvbo1gzoxc] { padding: 1rem; scroll-margin-top: calc(var(--sp-header-offset) + 5.5rem); }
.settings-panel h2[b-jvbo1gzoxc] { margin:0 0 .75rem; color:var(--sp-ink); font-size: 1.0625rem; letter-spacing:-.015em; line-height: 1.3; font-weight: 700; }
.panel-heading[b-jvbo1gzoxc], .server-card-heading[b-jvbo1gzoxc], .server-actions[b-jvbo1gzoxc] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.panel-heading[b-jvbo1gzoxc] { align-items:flex-start; margin-bottom:1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--sp-border); }
.panel-heading h2[b-jvbo1gzoxc] { margin-bottom:.2rem; }
.settings-hint[b-jvbo1gzoxc] { color:var(--sp-muted); font-size:.75rem; }
/* Explanatory text under a control. Without a rule these paragraphs rendered at
   full body size in near-black, reading louder than the setting they explain. */
.field-note[b-jvbo1gzoxc] { margin:.15rem 0 .6rem; color:var(--sp-muted); font-size:.75rem; line-height:1.5; }
.settings-help[b-jvbo1gzoxc] { min-width:0; margin:0 0 .75rem; }
.settings-help > summary[b-jvbo1gzoxc] { min-height:var(--pulse-control-min-height, 44px); width:fit-content; max-width:100%; align-content:center; padding:.375rem .5rem; border-radius:var(--pulse-radius-sm, 8px); color:var(--sp-accent-strong); font-size:.8125rem; font-weight:600; cursor:pointer; }
.settings-help > summary:focus-visible[b-jvbo1gzoxc] { outline:3px solid var(--pulse-focus-ring); outline-offset:2px; }
.settings-help > .field-note[b-jvbo1gzoxc] { max-width:72ch; margin:.25rem .5rem .75rem; }
.retention-safety-lock[b-jvbo1gzoxc] {
    display:flex;
    align-items:flex-start;
    gap:.7rem;
    margin:.1rem 0 .8rem;
    padding:.8rem .9rem;
    border:1px solid color-mix(in srgb,var(--pulse-success-text) 25%,var(--sp-border));
    border-radius:.75rem;
    color:var(--sp-muted);
    background:color-mix(in srgb,var(--pulse-success-soft) 72%,var(--sp-surface));
    font-size:.75rem;
    line-height:1.5;
}
.retention-safety-lock strong[b-jvbo1gzoxc] { display:block; margin-bottom:.12rem; color:var(--sp-ink); font-size:.75rem; }
.retention-safety-icon[b-jvbo1gzoxc] { display:grid; flex:0 0 1.7rem; height:1.7rem; place-items:center; border-radius:50%; color:var(--pulse-success-text); background:var(--pulse-success-soft); font-weight: 700; }
.snapshot-storage-manager[b-jvbo1gzoxc] {
    display:grid;
    gap:.8rem;
    margin:.9rem 0 1rem;
    padding:1rem;
    border:1px solid var(--sp-border);
    border-radius:.9rem;
    background:var(--sp-soft);
}
.snapshot-storage-heading[b-jvbo1gzoxc] { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.snapshot-storage-heading > div[b-jvbo1gzoxc] { flex: 1 1 15rem; min-width: 0; }
.snapshot-storage-heading > button[b-jvbo1gzoxc] { flex: 0 0 auto; }
.snapshot-storage-heading h3[b-jvbo1gzoxc] { margin:0; color:var(--sp-ink); font-size:.95rem; }
.snapshot-storage-heading p[b-jvbo1gzoxc] { margin:.2rem 0 0; color:var(--sp-muted); font-size:.75rem; line-height:1.5; }
.snapshot-storage-message[b-jvbo1gzoxc] { padding:.65rem .75rem; border:1px solid var(--sp-border); border-radius:.65rem; font-size:.78rem; font-weight: 600; line-height:1.45; }
.snapshot-storage-message.error[b-jvbo1gzoxc] { color:var(--pulse-danger-text); border-color:var(--pulse-danger-border); background:var(--pulse-danger-soft); }
.snapshot-storage-message.success[b-jvbo1gzoxc] { color:var(--pulse-success-text); border-color:var(--pulse-success-border); background:var(--pulse-success-soft); }
.snapshot-storage-usage[b-jvbo1gzoxc] { display:grid; gap:.65rem; padding:.85rem; border:1px solid var(--sp-border); border-radius:.75rem; background:var(--sp-surface); }
.snapshot-storage-usage.is-over-limit[b-jvbo1gzoxc] { border-color:var(--pulse-danger-border); }
.snapshot-storage-total[b-jvbo1gzoxc] { display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
.snapshot-storage-total strong[b-jvbo1gzoxc] { color:var(--sp-ink); font-size:1.35rem; letter-spacing:-.03em; }
.snapshot-storage-total span[b-jvbo1gzoxc] { color:var(--sp-muted); font-size:.8rem; }
.snapshot-storage-usage.is-over-limit .snapshot-storage-total strong[b-jvbo1gzoxc] { color:var(--pulse-danger-text); }
.snapshot-storage-usage progress[b-jvbo1gzoxc] { width:100%; height:.7rem; overflow:hidden; border:0; border-radius:999px; color:var(--sp-accent); background:var(--sp-border); accent-color:var(--sp-accent); }
.snapshot-storage-usage progress[b-jvbo1gzoxc]::-webkit-progress-bar { border-radius:999px; background:var(--sp-border); }
.snapshot-storage-usage progress[b-jvbo1gzoxc]::-webkit-progress-value { border-radius:999px; background: var(--sp-accent); }
.snapshot-storage-usage progress[b-jvbo1gzoxc]::-moz-progress-bar { border-radius:999px; background: var(--sp-accent); }
.snapshot-storage-usage.is-over-limit progress[b-jvbo1gzoxc] { accent-color:var(--pulse-danger); }
.snapshot-storage-usage.is-over-limit progress[b-jvbo1gzoxc]::-webkit-progress-value { background:var(--pulse-danger); }
.snapshot-storage-usage.is-over-limit progress[b-jvbo1gzoxc]::-moz-progress-bar { background:var(--pulse-danger); }
.snapshot-storage-facts[b-jvbo1gzoxc] { display:flex; gap:.45rem 1rem; flex-wrap:wrap; color:var(--sp-muted); font-size:.75rem; }
.snapshot-cleanup-controls[b-jvbo1gzoxc] { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:end; }
.snapshot-cleanup-controls label[b-jvbo1gzoxc] { margin:0; }
.snapshot-cleanup-controls button[b-jvbo1gzoxc] { min-height:var(--pulse-control-min-height, 44px); }
.snapshot-cleanup-confirm[b-jvbo1gzoxc] { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.85rem; border:1px solid var(--pulse-danger-border); border-radius:.75rem; background:color-mix(in srgb,var(--pulse-danger-soft) 55%,var(--sp-surface)); }
.snapshot-cleanup-confirm > div:first-child[b-jvbo1gzoxc] { flex: 1 1 20rem; min-width: 0; }
.snapshot-cleanup-confirm strong[b-jvbo1gzoxc] { color:var(--pulse-danger-text); font-size:.85rem; }
.snapshot-cleanup-confirm p[b-jvbo1gzoxc] { margin:.25rem 0 0; max-width:66rem; color:var(--sp-muted); font-size:.78rem; line-height:1.55; }
.snapshot-cleanup-confirm-actions[b-jvbo1gzoxc] { display:flex; flex:0 0 auto; gap:.5rem; flex-wrap:wrap; }
.snapshot-cleanup-progress[b-jvbo1gzoxc] { align-items:center; background:var(--pulse-info-soft); border:1px solid var(--pulse-info-border); border-radius:.7rem; color:var(--pulse-info-strong); display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.7rem; padding:.65rem; }
.snapshot-cleanup-progress progress[b-jvbo1gzoxc] { flex:1 1 12rem; }
.snapshot-cleanup-progress span[b-jvbo1gzoxc] { flex:2 1 22rem; font-size:.78rem; }
.settings-hint code[b-jvbo1gzoxc] { padding:.12rem .35rem; border:1px solid var(--sp-border); border-radius:.35rem; color:var(--sp-accent-strong); background:var(--sp-soft); }

.transport-policy-warning[b-jvbo1gzoxc] {
    display: grid;
    gap: .375rem;
    margin: 0 0 1rem;
    padding: .75rem .875rem;
    border: 1px solid color-mix(in srgb, var(--pulse-danger-text) 44%, var(--sp-border));
    border-radius: .875rem;
    background: color-mix(in srgb, var(--pulse-danger-soft) 72%, var(--sp-surface));
}

.transport-policy-warning p[b-jvbo1gzoxc] {
    margin: 0;
    color: var(--pulse-danger-text);
    font-size: .82rem;
    line-height: 1.5;
}

.server-list[b-jvbo1gzoxc] { display:grid; gap:.75rem; }
.server-card[b-jvbo1gzoxc] {
    padding: 1rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--sp-soft);
    box-shadow: none;
}

.server-card.server-disabled[b-jvbo1gzoxc] { opacity:.64; filter:saturate(.55); }
.server-card-heading[b-jvbo1gzoxc] { justify-content:flex-start; margin-bottom:.875rem; padding-bottom:.72rem; border-bottom:1px solid var(--sp-border); }
.server-toggle[b-jvbo1gzoxc], .primary-toggle[b-jvbo1gzoxc] { margin:0 !important; }
.server-fields[b-jvbo1gzoxc] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: .25rem .875rem; padding-top: .25rem; align-items: start; }
.server-actions[b-jvbo1gzoxc] { justify-content:flex-end; padding-top: .75rem; flex-wrap: wrap; margin-top: .25rem; border-top: 1px solid var(--sp-border); }

.connection-state[b-jvbo1gzoxc] { margin-left:auto; padding:.3rem .625rem; border:1px solid var(--sp-border); border-radius:999px; color:var(--sp-muted); background:var(--sp-soft); font-size:.75rem; font-weight: 700; letter-spacing:.035em; }
.connection-state.success[b-jvbo1gzoxc] { border-color:var(--pulse-success-border); color:var(--pulse-success-text); background:var(--pulse-success-soft); }
.connection-state.warning[b-jvbo1gzoxc] { border-color:var(--pulse-warning-border); color:var(--pulse-warning-text); background:var(--pulse-warning-soft); }
.connection-state.error[b-jvbo1gzoxc] { border-color:var(--pulse-danger-border); color:var(--pulse-danger-text); background:var(--pulse-danger-soft); }

.conditional-fields[b-jvbo1gzoxc] { padding-top:.125rem; }
.conditional-fields > :last-child[b-jvbo1gzoxc] { margin-bottom:0; }
.snapshot-fields[b-jvbo1gzoxc] { margin-top:.25rem; padding-top:.875rem; border-top:1px solid var(--sp-border); }

.settings-panel label[b-jvbo1gzoxc] { display:grid; gap:.38rem; margin:0 0 .72rem; color: var(--sp-ink); font-size:.875rem; font-weight: 600; min-width: 0; }
.settings-panel input[b-jvbo1gzoxc], .settings-panel select[b-jvbo1gzoxc] {
    width:100%;
    min-height: var(--pulse-control-min-height, 44px);
    padding:.52rem .68rem;
    border:1px solid var(--sp-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color:var(--sp-ink);
    background:var(--sp-soft);
    font:inherit;
    transition:border-color .14s ease,background .14s ease;
    min-width: 0;
    font-size: .875rem;
    font-weight: 400;
}

.settings-panel input[type="number"][b-jvbo1gzoxc] { max-width: 15rem; font-variant-numeric: tabular-nums; }

.settings-panel input:hover[b-jvbo1gzoxc], .settings-panel select:hover[b-jvbo1gzoxc] { border-color:color-mix(in srgb,var(--sp-accent) 40%,transparent); }
.settings-panel input:focus[b-jvbo1gzoxc], .settings-panel select:focus[b-jvbo1gzoxc] { border-color:var(--sp-accent); background:var(--sp-surface); box-shadow:0 0 0 .2rem var(--pulse-focus-ring-soft); outline:0; }
.settings-panel input[type="checkbox"][b-jvbo1gzoxc], .settings-panel input[type="radio"][b-jvbo1gzoxc] { accent-color:var(--sp-accent); }

.check-row[b-jvbo1gzoxc] {
    display:flex !important;
    align-items:center;
    gap:.625rem !important;
    min-height: var(--pulse-control-min-height, 44px);
    margin-bottom:.45rem !important;
    padding:.42rem .55rem;
    border:1px solid var(--sp-border);
    border-radius:.62rem;
    color:var(--sp-ink) !important;
    background:var(--sp-soft);
    font-weight: 500;
}
.check-row input[b-jvbo1gzoxc] { width:auto; min-height:auto; }

.inline-action[b-jvbo1gzoxc] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: var(--pulse-control-min-height, 44px);
    padding:0 .75rem;
    border-radius: var(--pulse-radius-sm, 8px);
    color:var(--sp-ink);
    background:var(--sp-surface);
    font-size:.875rem;
    font-weight: 600;
    cursor:pointer;
    transition:border-color .14s ease,color .14s ease;
    border: 1px solid var(--sp-border);
}

.inline-action:hover:not(:disabled)[b-jvbo1gzoxc] { border-color:var(--sp-accent); color:var(--sp-accent-strong); }
.inline-action.danger-outline[b-jvbo1gzoxc] { color:var(--pulse-danger-text); }
.inline-action:disabled[b-jvbo1gzoxc] { cursor:wait; opacity:.58; }
.server-empty[b-jvbo1gzoxc] { padding:1.125rem; border:1px dashed var(--sp-border); border-radius:.875rem; color:var(--sp-muted); background:var(--sp-soft); text-align:center; }

.ghost-servers[b-jvbo1gzoxc] { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--sp-border); }
.ghost-servers h3[b-jvbo1gzoxc] { margin:0; font-size:1rem; }
.ghost-server-list[b-jvbo1gzoxc] { list-style:none; margin:.75rem 0 0; padding:0; display:flex; flex-direction:column; gap:.625rem; }
.ghost-server-list > li[b-jvbo1gzoxc] { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:.75rem .875rem; border:1px dashed var(--sp-border); border-radius:.875rem; background:var(--sp-soft); }
.ghost-server-summary[b-jvbo1gzoxc] { display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; min-width:0; }
.ghost-server-summary code[b-jvbo1gzoxc] { font-size:.8rem; color:var(--sp-muted); }
.ghost-server-summary span[b-jvbo1gzoxc] { color:var(--sp-muted); font-size:.85rem; }
.ghost-server-confirm[b-jvbo1gzoxc] { flex-basis:100%; padding:.625rem .75rem; border:1px solid var(--pulse-danger-text); border-radius:.75rem; }
.ghost-server-confirm p[b-jvbo1gzoxc] { margin:0 0 .55rem; line-height:1.5; }
.ghost-server-confirm-actions[b-jvbo1gzoxc] { display:flex; gap:.55rem; flex-wrap:wrap; }

.settings-hint[b-jvbo1gzoxc] { margin:.375rem 0 0; line-height:1.55; }

/* The sticky action bar doubles as the page's title row. It is painted on the
   canvas (opaque, hairline bottom border, no card) so it still reads as a
   title row when the page is at the top and stays legible when stuck. */
.settings-actions[b-jvbo1gzoxc] {
    position:sticky;
    top:calc(var(--sp-header-offset) + 12px);
    z-index:35;
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.55rem;
    flex-wrap:wrap;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .25rem 0 .5rem;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-ink);
    background: var(--pulse-canvas);
    box-shadow: none;
}

.settings-action-state[b-jvbo1gzoxc] { display:inline-flex; align-items:center; gap:.55rem; margin-right:0; padding: .375rem .25rem; border-radius:.55rem; background: transparent; color:var(--sp-muted); font-size:.75rem; font-weight: 600; }
.settings-action-state i[b-jvbo1gzoxc] { width:.55rem; height:.55rem; flex:0 0 auto; border-radius:50%; background:var(--pulse-success-text); box-shadow: none; }
.settings-action-state.pending[b-jvbo1gzoxc] { color:var(--pulse-warning-text); }
.settings-action-state.pending i[b-jvbo1gzoxc] { background:var(--pulse-warning-text); box-shadow: none; }
.settings-action-state.working[b-jvbo1gzoxc] { color:var(--sp-accent-strong); }
.settings-action-state.working i[b-jvbo1gzoxc] { background:var(--sp-accent); box-shadow: none; }
.settings-action-state.unavailable i[b-jvbo1gzoxc] { background:var(--sp-muted); box-shadow:none; }

.settings-actions button[b-jvbo1gzoxc] {
    min-height: var(--pulse-control-min-height, 44px);
    padding:0 .95rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm, 8px);
    color:var(--pulse-on-action);
    background: var(--pulse-action);
    font-size:.875rem;
    font-weight: 600;
    cursor:pointer;
    transition:filter .14s ease,border-color .14s ease;
}

.settings-actions button.secondary[b-jvbo1gzoxc] { color:var(--sp-ink); border:1px solid var(--sp-border); background:var(--sp-soft); }
.settings-actions button.danger[b-jvbo1gzoxc] { background: var(--pulse-danger); }
.settings-actions button:hover:not(:disabled)[b-jvbo1gzoxc] { filter:brightness(1.04); }
.settings-actions button:disabled[b-jvbo1gzoxc] { cursor:default; opacity:.65; }
.settings-page[aria-busy="true"] .settings-actions button:disabled[b-jvbo1gzoxc] { cursor:progress; }
.settings-actions button.is-unavailable[b-jvbo1gzoxc] { color:var(--sp-muted); border:1px solid var(--sp-border); background:var(--sp-soft); }

/* Save reads as settled rather than merely unavailable, so "nothing to save"
   is not mistaken for "the button is broken". */
.settings-actions button.is-saved[b-jvbo1gzoxc] {
    color:var(--pulse-success-text);
    border-color:var(--pulse-success-border);
    background:var(--pulse-success-soft);
    opacity:1;
}

.settings-actions button.is-dirty[b-jvbo1gzoxc] { box-shadow: none; }

.settings-alert[b-jvbo1gzoxc] { margin-bottom:.85rem; padding:.75rem .9rem; border-radius:.75rem; box-shadow:none; font-size:.78rem; font-weight: 600; }
.settings-alert.success[b-jvbo1gzoxc] { color:var(--pulse-success-text); border-color:var(--pulse-success-border); background:var(--pulse-success-soft); }
.settings-alert.error[b-jvbo1gzoxc] { color:var(--pulse-danger-text); border-color:var(--pulse-danger-border); background:var(--pulse-danger-soft); }
/* The step-up notice carrying the only way back in, and the outstanding-restart
   reminder, both ask this class for warning weight. Without a rule they took the
   neutral panel surface from the shared base above and read as ordinary boxes
   next to the coloured save results they sit beside. */
.settings-alert.warning[b-jvbo1gzoxc] { color:var(--pulse-warning-text); border-color:var(--pulse-warning-border); background:var(--pulse-warning-soft); }
.settings-actions .settings-alert[b-jvbo1gzoxc] { order:-1; flex:1 0 100%; grid-column:1 / -1; margin:0 0 .15rem; }
.settings-actions .settings-alert:focus-visible[b-jvbo1gzoxc] { outline:3px solid var(--pulse-focus-ring); outline-offset:2px; }

.settings-panel :is(button,input,select):focus-visible[b-jvbo1gzoxc],
.settings-actions button:focus-visible[b-jvbo1gzoxc] { outline:3px solid var(--pulse-focus-ring); outline-offset:2px; }

html[data-theme="dark"] .settings-page[b-jvbo1gzoxc] { background: transparent; }
html[data-theme="dark"] .settings-panel[b-jvbo1gzoxc] { color:var(--sp-ink); border-color:var(--sp-border); background:var(--sp-surface); }
html[data-theme="dark"] .settings-actions[b-jvbo1gzoxc] { background: var(--pulse-canvas); }
html[data-theme="dark"] .server-card[b-jvbo1gzoxc], html[data-theme="dark"] .check-row[b-jvbo1gzoxc], html[data-theme="dark"] .settings-panel input[b-jvbo1gzoxc], html[data-theme="dark"] .settings-panel select[b-jvbo1gzoxc] { color:var(--sp-ink); border-color:var(--sp-border); background:var(--sp-soft); color-scheme:dark; box-shadow:none; }
html[data-theme="dark"] .settings-panel h2[b-jvbo1gzoxc], html[data-theme="dark"] .check-row[b-jvbo1gzoxc] { color:var(--sp-ink) !important; }
html[data-theme="dark"] .settings-hint[b-jvbo1gzoxc] { color: var(--sp-muted); }
html[data-theme="dark"] .retention-safety-lock[b-jvbo1gzoxc] { border-color:var(--pulse-success-border); }

@media (max-width:1180px) {
    .settings-grid[b-jvbo1gzoxc] { grid-template-columns:1fr; }
    .server-fields[b-jvbo1gzoxc] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px) {
    .settings-page[b-jvbo1gzoxc] { margin:0; padding:.75rem; border-radius:1.1rem; }
    .server-fields[b-jvbo1gzoxc] { grid-template-columns:repeat(2,minmax(0,1fr)); }
    /* Row 1: title + status pill. Row 2: Reload, Check ports and servers, Save. */
    .settings-actions[b-jvbo1gzoxc] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.4rem .5rem; padding:.375rem 0 .5rem; }
    .settings-hero[b-jvbo1gzoxc] { grid-column:1 / 3; margin-right:0; }
    .settings-action-state[b-jvbo1gzoxc] { grid-column:3; justify-self:end; margin-right:0; }
    .settings-actions button[b-jvbo1gzoxc] { width:100%; min-width:0; padding:0 .5rem; white-space:normal; }
    .settings-actions button[type="submit"][b-jvbo1gzoxc] { grid-column:auto; }
    .panel-heading[b-jvbo1gzoxc], .server-card-heading[b-jvbo1gzoxc] { align-items:flex-start; flex-wrap:wrap; }
    .connection-state[b-jvbo1gzoxc] { margin-left:0; }
}

@media (max-width:560px) {
    .settings-page[b-jvbo1gzoxc] {
        min-height:calc(100dvh - 4rem);
        padding:.75rem max(.75rem,env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));
    }
    .settings-actions[b-jvbo1gzoxc] {
        position:static;
        top:auto;
        gap:.4rem .5rem;
        padding:.375rem 0 .5rem;
        border-radius:0;
    }
    .server-fields[b-jvbo1gzoxc], .settings-field-grid[b-jvbo1gzoxc] { grid-template-columns:1fr; }
    .settings-panel[b-jvbo1gzoxc], .settings-general[b-jvbo1gzoxc]  .settings-panel { scroll-margin-top:calc(var(--sp-header-offset) + 1rem); }
    .settings-panel[b-jvbo1gzoxc] { border-radius:1rem; }
    .settings-panel input[b-jvbo1gzoxc], .settings-panel select[b-jvbo1gzoxc], .settings-actions button[b-jvbo1gzoxc] { min-height:44px; font-size:16px; }
    .snapshot-storage-heading[b-jvbo1gzoxc], .snapshot-cleanup-confirm[b-jvbo1gzoxc] { align-items:stretch; flex-direction:column; }
    .snapshot-storage-heading > div[b-jvbo1gzoxc], .snapshot-cleanup-confirm > div:first-child[b-jvbo1gzoxc] { flex:0 1 auto; }
    .snapshot-storage-heading button[b-jvbo1gzoxc], .snapshot-cleanup-confirm-actions[b-jvbo1gzoxc], .snapshot-cleanup-confirm-actions button[b-jvbo1gzoxc] { width:100%; }
    .snapshot-cleanup-controls[b-jvbo1gzoxc] { grid-template-columns:1fr; }
}

@media (hover:none), (pointer:coarse), (any-pointer:coarse) {
    .settings-section-nav a[b-jvbo1gzoxc],
    .config-path-details summary[b-jvbo1gzoxc],
    .inline-action[b-jvbo1gzoxc],
    .check-row[b-jvbo1gzoxc],
    .settings-actions button[b-jvbo1gzoxc],
    .settings-panel input:not([type="checkbox"]):not([type="radio"])[b-jvbo1gzoxc],
    .settings-panel select[b-jvbo1gzoxc] { min-height:44px; }
    .settings-panel input:not([type="checkbox"]):not([type="radio"])[b-jvbo1gzoxc],
    .settings-panel select[b-jvbo1gzoxc] { font-size:16px; }
}

@media (prefers-reduced-motion:reduce) {
    .settings-panel input[b-jvbo1gzoxc], .settings-panel select[b-jvbo1gzoxc], .inline-action[b-jvbo1gzoxc], .settings-actions button[b-jvbo1gzoxc] { transition:none; }
}

@media (max-height:520px) and (orientation:landscape) {
    .settings-actions[b-jvbo1gzoxc] { display:grid; grid-template-columns:minmax(0,1fr) auto repeat(3,auto); }
    .settings-hero[b-jvbo1gzoxc], .settings-action-state[b-jvbo1gzoxc], .settings-actions button[type="submit"][b-jvbo1gzoxc] { grid-column:auto; }
    .settings-actions button[b-jvbo1gzoxc] { width:auto; }
}
/* /Components/Pages/SiaBridge.razor.rz.scp.css */
/* The SIA DC-09 receiver.

   Drawn in the Integra bridge's language - direction card, state pill,
   tone-tinted counters, panel workspace - because an operator who has set one
   bridge up must recognise the second one on sight. The receiver differs from
   Integra in one honest way: it is inbound-only, so there is exactly one
   direction card and no connection form, just the port the panels dial.

   CSS isolation limits selector reach, but the product's semantic custom
   properties still inherit into the component. Keep this page on that shared
   palette so light, dark and accessibility changes apply everywhere. */

.sia-page[b-dutmf5qeyo] {
    --sia-surface: var(--pulse-surface);
    --sia-soft: var(--pulse-surface-soft);
    --sia-border: var(--pulse-border);
    --sia-control-border: var(--pulse-border-strong);
    --sia-ink: var(--pulse-text);
    --sia-muted: var(--pulse-muted);
    --sia-accent: var(--pulse-accent);
    --sia-good: var(--pulse-success-text);
    --sia-bad: var(--pulse-danger-text);
    --sia-warn: var(--pulse-warning-text);
    --sia-mono: "Cascadia Code", Consolas, ui-monospace, monospace;
    display: flex;
    flex-direction: column;
    gap: var(--pulse-workspace-gap);
    width: 100%;
    margin: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
    box-sizing: border-box;
    container: sia-workspace / inline-size;
    color: var(--sia-ink);
    line-height: 1.45;
    min-width: 0;
}

.sia-page[aria-busy="true"][b-dutmf5qeyo] { cursor: progress; }

.sia-page button[b-dutmf5qeyo] {
    font-family: inherit;
    font-size: .875rem;
    cursor: pointer;
}
.sia-page button:disabled[b-dutmf5qeyo] { cursor: not-allowed; opacity: .55; }

.sia-page :is(button, input, select):focus-visible[b-dutmf5qeyo] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* ---- the direction card ---------------------------------------------- */

.sia-directions[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
}

.sia-direction[b-dutmf5qeyo] {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--sia-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--sia-surface);
    box-shadow: none;
}

.sia-direction > header[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem .6rem;
    align-items: center;
}

.sia-direction-kicker[b-dutmf5qeyo] {
    grid-column: 1;
    color: var(--sia-muted);
    font-size: .75rem;
    font-weight: 600;
}

.sia-direction h2[b-dutmf5qeyo] {
    grid-column: 1;
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.015em;
    line-height: 1.3;
    font-weight: 700;
}

.sia-direction > p[b-dutmf5qeyo] {
    margin: .4rem 0 .55rem;
    color: var(--sia-muted);
    font-size: .76rem;
    line-height: 1.45;
}

.sia-state-pill[b-dutmf5qeyo] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: .25rem .5rem;
    border: 1px solid var(--sia-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sia-muted);
    background: var(--sia-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sia-state-pill.is-good[b-dutmf5qeyo] { color: var(--sia-good); border-color: var(--pulse-success-border); background: var(--pulse-success-soft); }
.sia-state-pill.is-broken[b-dutmf5qeyo] { color: var(--sia-bad); border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.sia-state-pill.is-working[b-dutmf5qeyo] { color: var(--sia-warn); border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }

/* Off is a mode the operator chose, not a state the receiver is in, so it
   wears an outline instead of a filled state colour. */
.sia-state-pill.is-off[b-dutmf5qeyo] { border-style: dashed; background: transparent; }

/* One glance answers "is anything wrong": counters read value-first in the
   data face, problems carry their tint only while they are non-zero, and a
   zero recedes to a whisper instead of standing shoulder to shoulder with the
   number that needs acting on. */
.sia-metrics[b-dutmf5qeyo] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.sia-metric[b-dutmf5qeyo] {
    display: grid;
    justify-items: start;
    gap: .12rem;
    min-width: 6.25rem;
    padding: .42rem .55rem .38rem;
    border: 1px solid var(--sia-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--sia-surface);
}

.sia-metric dd[b-dutmf5qeyo] {
    order: -1;
    margin: 0;
    font-family: var(--sia-mono);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1;
    /* Tabular figures and a width that fits six digits: a counter that
       changes width every report reflowed the whole metric strip. */
    font-variant-numeric: tabular-nums;
}

.sia-metric dt[b-dutmf5qeyo] {
    color: var(--sia-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.sia-metric.is-zero[b-dutmf5qeyo] { border-color: transparent; background: var(--sia-soft); }
.sia-metric.is-zero dd[b-dutmf5qeyo] { color: var(--sia-muted); font-weight: 600; }
.sia-metric.is-good dd[b-dutmf5qeyo] { color: var(--sia-good); }
.sia-metric.is-warn[b-dutmf5qeyo] { border-color: var(--pulse-warning-border); background: var(--pulse-warning-soft); }
.sia-metric.is-warn dd[b-dutmf5qeyo] { color: var(--sia-warn); }
.sia-metric.is-bad[b-dutmf5qeyo] { border-color: var(--pulse-danger-border); background: var(--pulse-danger-soft); }
.sia-metric.is-bad dd[b-dutmf5qeyo] { color: var(--sia-bad); }

/* ---- notices --------------------------------------------------------- */

.sia-alert[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .8rem;
    font-weight: 600;
}

.sia-alert.error[b-dutmf5qeyo] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* A notice carries panel-supplied text and module names, which have no length
   bound in the store. It also sits outside the panels whose overflow:hidden
   would have contained it, so an unbroken 512-character name used to widen the
   page and paint over the workspace. */
.sia-alert > span[b-dutmf5qeyo] { min-width: 0; overflow-wrap: anywhere; }
.sia-alert .sia-tiny-button[b-dutmf5qeyo] { color: inherit; }

/* ---- panels ---------------------------------------------------------- */

.sia-workspace[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}

/* Each column flows independently, so a long mapping catalog cannot open a
   large blank gap between the receiver and its supervision settings. */
.sia-rail[b-dutmf5qeyo],
.sia-mappings[b-dutmf5qeyo] { display: grid; gap: .7rem; align-content: start; min-width: 0; }

@container sia-workspace (max-width: 60rem) {
    .sia-workspace[b-dutmf5qeyo] { grid-template-columns: minmax(0, 1fr); }
}

.sia-panel[b-dutmf5qeyo] {
    display: flex;
    flex-direction: column;
    /* The delivery-custody block inside asks the panel how wide it is, not the
       viewport: it lives in the rail on a wall display and full width on a
       phone, and the viewport says nothing about which. */
    container-type: inline-size;
    min-width: 0;
    border: 1px solid var(--sia-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--sia-surface);
    box-shadow: none;
    overflow: visible;
}

.sia-panel-head[b-dutmf5qeyo] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--sia-border);
    background: var(--sia-surface);
    border-radius: var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px) 0 0;
    flex-wrap: wrap;
}

.sia-panel-head h2[b-dutmf5qeyo] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sia-panel-head > div[b-dutmf5qeyo] { min-width: 0; }
.sia-panel-head > div .sia-count[b-dutmf5qeyo] { display: block; margin-top: .08rem; }

.sia-count[b-dutmf5qeyo] {
    font-family: var(--sia-mono);
    font-size: .75rem;
    color: var(--sia-muted);
    white-space: nowrap;
}

.sia-switch[b-dutmf5qeyo] {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.25rem;
    padding: .2rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--sia-muted);
    cursor: pointer;
}

.sia-switch input[b-dutmf5qeyo] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--sia-accent);
}

.sia-hint[b-dutmf5qeyo] {
    margin: 0;
    padding: 0 .85rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--sia-muted);
}

.sia-panel > .sia-hint:first-of-type[b-dutmf5qeyo] { padding-top: .6rem; }

/* ---- the receiver form ----------------------------------------------- */

.sia-form[b-dutmf5qeyo] {
    display: grid;
    gap: .7rem;
    padding: .75rem .85rem .9rem;
}

.sia-form label[b-dutmf5qeyo] {
    display: grid;
    gap: .3rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sia-muted);
}

.sia-form small[b-dutmf5qeyo] {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--sia-muted);
}

.sia-page select[b-dutmf5qeyo],
.sia-page input[type="text"][b-dutmf5qeyo],
.sia-page input[type="number"][b-dutmf5qeyo],
.sia-page input:not([type])[b-dutmf5qeyo] {
    width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    box-sizing: border-box;
    padding: .48rem .65rem;
    border: 1px solid var(--sia-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sia-ink);
    background: var(--sia-surface);
    font-family: inherit;
    font-size: .875rem;
}

/* The port is a fact, not a field: shown in the data face, not editable. */
.sia-form input[readonly][b-dutmf5qeyo] {
    color: var(--sia-muted);
    background: var(--sia-soft);
    font-family: var(--sia-mono);
    font-weight: 700;
    cursor: default;
}

.sia-endpoint[b-dutmf5qeyo] {
    margin: 0;
    padding: .55rem .65rem;
    border-left: 3px solid var(--sia-accent);
    border-radius: .45rem;
    background: var(--sia-soft);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sia-endpoint strong[b-dutmf5qeyo] { font-family: var(--sia-mono); }

/* Every reachable address, so an installer configuring a communicator by IP
   does not have to guess which interface answers. */
.sia-endpoint-addresses[b-dutmf5qeyo] {
    display: block;
    margin-top: .25rem;
    color: var(--sia-muted);
    font-family: var(--sia-mono);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.sia-form .sia-hint[b-dutmf5qeyo] { padding: 0; }

.sia-optional[b-dutmf5qeyo] { font-weight: 500; }

/* ---- durable delivery custody ---------------------------------------- */

.sia-inbox[b-dutmf5qeyo] {
    display: grid;
    gap: .65rem;
    margin: .2rem .85rem .85rem;
    border: 1px solid var(--sia-border);
    border-radius: .75rem;
    padding: .75rem;
    background: var(--sia-soft);
}

/* This block lives inside the 22rem rail on every viewport, so the stacked form
   is the default rather than a phone-only exception: a side-by-side header
   right-aligned a 78-character sentence into the ~70px that were left. The row
   form returns only when the container itself can afford it. */
.sia-inbox > header[b-dutmf5qeyo] {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: .35rem;
}

.sia-inbox > header > div[b-dutmf5qeyo] { display: flex; align-items: center; gap: .5rem; }
.sia-inbox h3[b-dutmf5qeyo] { margin: 0; color: var(--sia-ink); font-size: .9rem; }
.sia-inbox > header p[b-dutmf5qeyo] { max-width: 34rem; margin: 0; color: var(--sia-muted); font-size: .75rem; line-height: 1.45; text-align: left; }

@container (min-width: 40rem) {
    .sia-inbox > header[b-dutmf5qeyo] {
        align-items: start;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }

    .sia-inbox > header p[b-dutmf5qeyo] { text-align: right; }
}

/* "Oldest pending" carries a phrase rather than a count, so it is the one tile
   allowed to grow past the six-digit floor the numeric ones share. */
.sia-metric-span dd[b-dutmf5qeyo] { font-size: .875rem; }

.sia-dead-letters[b-dutmf5qeyo] { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sia-dead-letters > li[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: .65rem;
    padding: .65rem;
    background: var(--pulse-danger-soft);
}

.sia-dead-letter-copy[b-dutmf5qeyo] { display: grid; min-width: 0; gap: .15rem; }
.sia-dead-letter-copy > span[b-dutmf5qeyo],
.sia-dead-letter-copy > small[b-dutmf5qeyo] { color: var(--sia-muted); font-size: .75rem; }
.sia-dead-letter-copy > strong[b-dutmf5qeyo] { color: var(--pulse-danger-text); font-size: .875rem; }
.sia-dead-letter-copy > p[b-dutmf5qeyo] { margin: .2rem 0 0; color: var(--sia-ink); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.sia-dead-letter-actions[b-dutmf5qeyo] { display: flex; align-items: start; gap: .4rem; }
.sia-dead-letters .sia-confirm[b-dutmf5qeyo] { grid-column: 1 / -1; }

/* The "Needs decision" count above the list is unbounded, so the list pages.
   The pager lives inside the same 22rem rail as the rows it walks, so it wraps
   rather than assuming a row will fit. */
.sia-dead-letter-pager[b-dutmf5qeyo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem .6rem;
}

.sia-dead-letter-pager > span[b-dutmf5qeyo] { color: var(--sia-muted); font-size: .75rem; }
.sia-dead-letter-pager > div[b-dutmf5qeyo] { display: flex; align-items: center; gap: .35rem; }
.sia-dead-letter-pager > div > strong[b-dutmf5qeyo] { color: var(--sia-ink); font-size: .75rem; }

/* ---- mapping rows ---------------------------------------------------- */

.sia-rows[b-dutmf5qeyo] {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .7rem .85rem .4rem;
    list-style: none;
}

.sia-rows li[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto auto;
    gap: .35rem;
    align-items: center;
}

.sia-rows li.is-muted[b-dutmf5qeyo] {
    border-left: 3px solid var(--sia-muted);
    border-radius: .45rem;
    padding: .35rem .45rem;
    background: var(--sia-soft);
}

.sia-row-enabled[b-dutmf5qeyo] {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    color: var(--sia-muted);
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

.sia-row-enabled input[b-dutmf5qeyo] { accent-color: var(--sia-accent); }

/* Match evidence sits under the destination so "is this mapping working?" is
   answerable without triggering a sensor. */
.sia-row-evidence[b-dutmf5qeyo] {
    display: block;
    overflow: hidden;
    color: var(--sia-muted);
    font-size: .75rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- supervision ------------------------------------------------------ */

.sia-mapping-rows li[b-dutmf5qeyo] {
    grid-template-columns: minmax(8rem, .8fr) auto minmax(12rem, 1.4fr) auto auto;
}

.sia-supervision-rows li[b-dutmf5qeyo] {
    grid-template-columns: minmax(8rem, 1fr) minmax(9.5rem, .8fr) minmax(10rem, 1fr) auto;
    padding: .48rem .55rem;
    border: 1px solid var(--sia-border);
    border-left-width: 3px;
    border-radius: .6rem;
    background: var(--sia-surface);
}

.sia-supervision-rows li.is-overdue[b-dutmf5qeyo] {
    border-color: var(--pulse-danger-border);
    background: var(--pulse-danger-soft);
}

.sia-supervision-rows li.is-unroutable[b-dutmf5qeyo] {
    border-color: var(--pulse-warning-border);
    background: var(--pulse-warning-soft);
}

.sia-supervision-rows li.is-healthy[b-dutmf5qeyo] { border-left-color: var(--pulse-success-text); }
.sia-supervision-rows li.is-unsupervised[b-dutmf5qeyo] { border-left-color: var(--sia-border); }

.sia-supervision-window[b-dutmf5qeyo] {
    display: grid;
    gap: .1rem;
    min-width: 0;
    color: var(--sia-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.sia-supervision-window strong[b-dutmf5qeyo] {
    color: var(--sia-ink);
    font-family: var(--sia-mono);
    font-size: .76rem;
}

.sia-supervision-window small[b-dutmf5qeyo],
.sia-supervision-route small[b-dutmf5qeyo] {
    overflow: hidden;
    color: var(--sia-muted);
    font-size: .75rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-supervision-route[b-dutmf5qeyo] {
    display: grid;
    gap: .1rem;
    min-width: 0;
    color: var(--sia-ink);
    font-size: .76rem;
}

.is-overdue .sia-supervision-route strong[b-dutmf5qeyo] { color: var(--pulse-danger-text); }
.is-unroutable .sia-supervision-route strong[b-dutmf5qeyo] { color: var(--pulse-warning-text); }
.is-healthy .sia-supervision-route strong[b-dutmf5qeyo] { color: var(--pulse-success-text); }

.sia-row-action[b-dutmf5qeyo] {
    min-height: 2.35rem;
    padding: .35rem .65rem;
    border: 1px solid var(--sia-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sia-accent);
    background: var(--sia-surface);
    font-size: .875rem;
    font-weight: 700;
}

.sia-row-action:hover:not(:disabled)[b-dutmf5qeyo] {
    border-color: var(--sia-accent);
    background: var(--sia-soft);
}

.sia-supervision-evidence[b-dutmf5qeyo] {
    grid-column: 1 / -1;
    min-width: 0;
    padding-top: .35rem;
    border-top: 1px dashed var(--sia-border);
    color: var(--sia-muted);
    font-size: .75rem;
}

.sia-supervision-evidence summary[b-dutmf5qeyo] {
    width: fit-content;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 700;
}

.sia-supervision-evidence code[b-dutmf5qeyo] {
    display: block;
    max-height: 7rem;
    margin-top: .35rem;
    padding: .5rem;
    border: 1px solid var(--sia-border);
    border-radius: .45rem;
    color: var(--sia-ink);
    background: var(--sia-soft);
    font-family: var(--sia-mono);
    font-size: .75rem;
    line-height: 1.4;
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.sia-row-source[b-dutmf5qeyo] {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.sia-row-source strong[b-dutmf5qeyo] {
    overflow: hidden;
    font-family: var(--sia-mono);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-row-source small[b-dutmf5qeyo] {
    overflow: hidden;
    color: var(--sia-muted);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-row-module[b-dutmf5qeyo] {
    min-width: 0;
    overflow: hidden;
    font-size: .82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-rows-arrow[b-dutmf5qeyo] { color: var(--sia-muted); font-size: .9rem; }

.sia-rows li.sia-rows-empty[b-dutmf5qeyo] {
    display: block;
    padding: .5rem .1rem;
    color: var(--sia-muted);
    font-size: .75rem;
}

.sia-tiny-button[b-dutmf5qeyo] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--sia-muted);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
}

.sia-tiny-button:hover:not(:disabled)[b-dutmf5qeyo] {
    color: var(--sia-accent);
    background: var(--sia-soft);
}

.sia-rows .sia-tiny-button:hover:not(:disabled)[b-dutmf5qeyo] {
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

/* ---- the add-mapping form -------------------------------------------- */

.sia-new-form[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    align-items: end;
    padding: .55rem .85rem .85rem;
    border-top: 1px dashed var(--sia-border);
}

.sia-new-form label[b-dutmf5qeyo] {
    display: grid;
    gap: .2rem;
    min-width: 0;
    color: var(--sia-muted);
    font-size: .875rem;
    font-weight: 700;
}

.sia-new-form .sia-new-observed[b-dutmf5qeyo] { grid-column: 1 / -1; }

/* A blocked creation needs its full explanation; existing row evidence keeps
   its compact presentation. */
.sia-new-form .sia-row-evidence[role="status"][b-dutmf5qeyo] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sia-new-form .sia-new-module[b-dutmf5qeyo] { grid-column: 1; }

.sia-add-button[b-dutmf5qeyo] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .42rem .75rem;
    border: 1px solid var(--sia-accent);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sia-accent);
    background: var(--sia-surface);
    font-size: .875rem;
    font-weight: 700;
}

.sia-add-button:hover:not(:disabled)[b-dutmf5qeyo] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}

.sia-new-form .sia-add-button[b-dutmf5qeyo] { justify-self: start; min-width: 6rem; }

/* Destructive changes are confirmed in context. The copy names the exact row
   and, importantly, the data classes the operation cannot touch. */
.sia-confirm[b-dutmf5qeyo] {
    grid-column: 1 / -1;
    display: grid;
    gap: .4rem;
    min-width: 0;
    padding: .65rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: .6rem;
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

.sia-confirm strong[b-dutmf5qeyo] { font-size: .78rem; }

.sia-confirm p[b-dutmf5qeyo] {
    margin: 0;
    color: var(--sia-ink);
    font-size: .75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sia-confirm-actions[b-dutmf5qeyo] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sia-secondary-button[b-dutmf5qeyo],
.sia-danger-button[b-dutmf5qeyo] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .4rem .7rem;
    border: 1px solid var(--sia-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--sia-ink);
    background: var(--sia-surface);
    font-size: .875rem;
    font-weight: 700;
}

.sia-danger-button[b-dutmf5qeyo] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
}

.sia-secondary-button:hover:not(:disabled)[b-dutmf5qeyo] { background: var(--sia-soft); }
.sia-danger-button:hover:not(:disabled)[b-dutmf5qeyo] { background: color-mix(in srgb, var(--pulse-danger-text) 12%, var(--sia-surface)); }

/* ---- the observed catalog -------------------------------------------- */

.sia-cards[b-dutmf5qeyo] {
    /* No height cap, deliberately: a definite max-height turns an auto-fill
       grid into a fit-to-box grid that squeezes every row and clips the card
       footers. The store's own 500-row window bounds the list; the page
       scrolls honestly. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-auto-rows: max-content;
    gap: .3rem;
    margin: .55rem 0 0;
    padding: 0 .85rem .8rem;
    list-style: none;
    align-items: stretch;
}

/* One card, one anatomy: code chip and wire identity first, then the
   description people recognise, then how often and how recently. Column
   flex, not a nested grid: an outer auto-fill grid measuring a child grid's
   rows under-counts them and silently clips the footer. */
.sia-cards li[b-dutmf5qeyo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--sia-control-border);
    border-radius: var(--pulse-radius-sm, 8px);
    background: var(--sia-surface);
    overflow: hidden;
}

.sia-cards li > .sia-card-select[b-dutmf5qeyo] {
    display: grid;
    flex: 1 1 auto;
    gap: .3rem;
    align-content: start;
    width: 100%;
    padding: .52rem .6rem .5rem;
    border: 0;
    color: var(--sia-ink);
    background: var(--sia-surface);
    text-align: left;
}

.sia-cards li:has(.sia-card-select:hover:not(:disabled))[b-dutmf5qeyo] { border-color: var(--sia-accent); }
.sia-cards li > .sia-card-select:hover:not(:disabled)[b-dutmf5qeyo] { background: var(--sia-soft); }

.sia-card-head[b-dutmf5qeyo] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* The wire code is the most diagnostic value on the card (BA, FA, OP): it is
   data, not a decorative kicker, so it stays at readable size. */
.sia-card-chip[b-dutmf5qeyo] {
    padding: .08rem .44rem;
    border: 1px solid color-mix(in srgb, var(--sia-accent) 40%, transparent);
    border-radius: 999px;
    color: var(--sia-accent);
    background: color-mix(in srgb, var(--sia-accent) 9%, transparent);
    font-family: var(--sia-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sia-card-id[b-dutmf5qeyo] {
    overflow: hidden;
    margin-left: auto;
    color: var(--sia-muted);
    font-family: var(--sia-mono);
    font-size: .75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Every line is single-line and ellipsized: wrapped text feeds the grid's
   circular intrinsic row sizing, and the card bottom silently clips. The
   button tooltip carries the full identity. */
.sia-card-name[b-dutmf5qeyo] {
    overflow: hidden;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-card-meta[b-dutmf5qeyo] {
    overflow: hidden;
    color: var(--sia-muted);
    font-family: var(--sia-mono);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The raw DC-09 block: single-line and ellipsized like every other card line
   (wrapped text feeds the grid's circular row sizing and clips the footer),
   with the full value on the title. */
.sia-card-raw[b-dutmf5qeyo] {
    overflow: hidden;
    color: var(--sia-muted);
    font-family: var(--sia-mono);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-card-action[b-dutmf5qeyo] {
    color: var(--sia-accent);
    font-size: .875rem;
    font-weight: 700;
}

.sia-card-footer[b-dutmf5qeyo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem;
    align-items: center;
    min-width: 0;
    margin: 0 .45rem;
    border-top: 1px dashed var(--sia-border);
}

.sia-card-state[b-dutmf5qeyo] {
    flex: none;
    overflow: hidden;
    margin: 0;
    padding: .3rem .15rem .38rem;
    border-top: 0;
    color: var(--sia-muted);
    font-size: .75rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sia-card-state.is-restore[b-dutmf5qeyo] { color: var(--sia-good); }
.sia-card-state.is-event[b-dutmf5qeyo] { color: var(--sia-warn); }
.sia-card-footer .sia-card-remove[b-dutmf5qeyo] { width: 2.25rem; height: 2.25rem; }
.sia-card-confirm[b-dutmf5qeyo] { margin: 0 .45rem .45rem; }

.sia-empty[b-dutmf5qeyo] {
    margin: .7rem .85rem;
    padding: .7rem;
    border: 1px dashed var(--sia-border);
    border-radius: .6rem;
    color: var(--sia-muted);
    background: var(--sia-soft);
    font-size: .78rem;
}

/* ---- small screens --------------------------------------------------- */

@media (max-width: 640px) {
    .sia-page[b-dutmf5qeyo] {
        gap: .75rem;
        padding: .75rem;
    }

    .sia-form[b-dutmf5qeyo],
    .sia-rows[b-dutmf5qeyo],
    .sia-new-form[b-dutmf5qeyo] {
        padding-right: .7rem;
        padding-left: .7rem;
    }

    .sia-panel-head[b-dutmf5qeyo] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .sia-page select[b-dutmf5qeyo],
    .sia-page input[type="text"][b-dutmf5qeyo],
    .sia-page input[type="number"][b-dutmf5qeyo],
    .sia-page input:not([type])[b-dutmf5qeyo] {
        font-size: 1rem;
    }

    .sia-new-form[b-dutmf5qeyo] { grid-template-columns: minmax(0, 1fr); }
    .sia-new-form .sia-new-module[b-dutmf5qeyo] { grid-column: auto; }
    .sia-new-form .sia-add-button[b-dutmf5qeyo] { width: 100%; min-height: 2.75rem; }

    .sia-rows li[b-dutmf5qeyo] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem;
    }

    .sia-rows li > .sia-row-source[b-dutmf5qeyo] { grid-column: 1 / -1; }
    .sia-rows-arrow[b-dutmf5qeyo] { display: none; }
    .sia-rows li > .sia-row-module[b-dutmf5qeyo] { grid-column: 1; }
    .sia-rows li > .sia-row-enabled[b-dutmf5qeyo] { grid-column: 1; }
    .sia-rows li > .sia-supervision-window[b-dutmf5qeyo] { grid-column: 1; }
    .sia-rows li > .sia-supervision-route[b-dutmf5qeyo] { grid-column: 1; }
    .sia-rows li > .sia-row-action[b-dutmf5qeyo] { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
    .sia-rows li > .sia-supervision-evidence[b-dutmf5qeyo],
    .sia-rows li > .sia-confirm[b-dutmf5qeyo] { grid-column: 1 / -1; }
    .sia-rows li > .sia-tiny-button[b-dutmf5qeyo] { grid-column: 2; }

    .sia-rows .sia-tiny-button[b-dutmf5qeyo] {
        align-self: stretch;
        min-width: 2.75rem;
        min-height: 2.75rem;
        height: 100%;
    }

    .sia-confirm-actions > button[b-dutmf5qeyo] { flex: 1 1 8rem; }
    .sia-dead-letter-actions[b-dutmf5qeyo] { flex-wrap: wrap; }
}


/* Touch targets, last so these overrides win. The global coarse-pointer rule
   in app.css deliberately excludes checkboxes, so the label wrapper has to
   carry the height - and the dismiss/remove buttons need width as well. */
@media (any-pointer: coarse) {
    .sia-page :is(button, input:not([type="checkbox"]), select, summary)[b-dutmf5qeyo] {
        min-height: var(--pulse-control-min-height, 44px);
    }

    .sia-tiny-button[b-dutmf5qeyo] {
        min-width: var(--pulse-control-min-height, 44px);
        min-height: var(--pulse-control-min-height, 44px);
    }

    .sia-switch[b-dutmf5qeyo],
    .sia-row-enabled[b-dutmf5qeyo] {
        min-height: var(--pulse-control-min-height, 44px);
    }

    .sia-switch input[b-dutmf5qeyo],
    .sia-row-enabled input[b-dutmf5qeyo] {
        width: 1.4rem;
        height: 1.4rem;
    }

    .sia-supervision-evidence summary[b-dutmf5qeyo] {
        display: flex;
        align-items: center;
        min-height: var(--pulse-control-min-height, 44px);
    }
}
/* /Components/Pages/SiteManagement.razor.rz.scp.css */
.site-management-page[b-92vfvzvp5c] {
    box-sizing: border-box;
    color: var(--pulse-text);
    display: grid;
    gap: var(--pulse-workspace-gap);
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: var(--pulse-workspace-pad-top) var(--pulse-workspace-pad-x) var(--pulse-workspace-pad-bottom);
}

.site-management-heading h1[b-92vfvzvp5c] {
    font-size: var(--pulse-workspace-title-size);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Keep destination cards local to this overview; other pages use the same
   component for their permission-aware section tabs. */
.site-management-page[b-92vfvzvp5c]  .site-management-choices ul {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--pulse-workspace-gap, .75rem);
}

.site-management-page[b-92vfvzvp5c]  .site-management-choice {
    min-height: 88px;
    padding: .75rem;
}

@media (max-width: 680px) {
    .site-management-page[b-92vfvzvp5c]  .site-management-choices ul {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Users.razor.rz.scp.css */
.users-page[b-byitgcmu8k] {
    --users-surface: var(--pulse-surface);
    --users-surface-soft: var(--pulse-surface-soft);
    --users-border: var(--pulse-border);
    --users-ink: var(--pulse-text);
    --users-muted: var(--pulse-muted);
    --users-accent: var(--pulse-accent);
    --users-accent-strong: var(--pulse-action-hover);
    box-sizing: border-box;
    width: min(var(--pulse-workspace-max, 1600px), 100%);
    margin: 0 auto;
    padding: var(--pulse-workspace-pad-top, 1rem) var(--pulse-workspace-pad-x, 2rem) var(--pulse-workspace-pad-bottom, 2.75rem);
    color: var(--users-ink);
    line-height: 1.45;
}

html[data-theme="dark"] .users-page[b-byitgcmu8k] {
    --users-accent-strong: var(--pulse-accent);
}

.users-breadcrumbs[b-byitgcmu8k] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0;
    color: var(--users-muted);
    font-size: .875rem;
}

.users-breadcrumbs a[b-byitgcmu8k] {
    display: inline-flex;
    min-height: var(--pulse-control-min-height, 44px);
    align-items: center;
    color: var(--users-accent);
    font-weight: 600;
    text-decoration: none;
}

.users-hero[b-byitgcmu8k] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    min-height: var(--pulse-control-min-height, 44px);
    margin-bottom: var(--pulse-workspace-hero-pad-y, 14px);
    padding: 0;
    border: 0;
    border-radius: var(--pulse-radius-lg, 14px);
    background: transparent;
}

.users-hero > div:first-child[b-byitgcmu8k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .6rem;
    min-width: 0;
}

.users-eyebrow[b-byitgcmu8k] {
    margin: 0 0 0.4rem;
    color: var(--users-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.users-hero h1[b-byitgcmu8k] {
    margin: 0;
    color: var(--users-ink);
    font-size: var(--pulse-workspace-title-size, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.users-hero > div > p:last-child[b-byitgcmu8k] {
    max-width: none;
    margin: 0;
    color: var(--users-muted);
    font-size: var(--pulse-workspace-lede-size, .82rem);
    line-height: 1.45;
}

.users-primary[b-byitgcmu8k] {
    display: inline-flex;
    min-height: 2.8rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 1px solid var(--pulse-action);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.users-primary svg[b-byitgcmu8k] {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.users-primary:hover:not(:disabled)[b-byitgcmu8k] { background: var(--pulse-action-hover); border-color: var(--pulse-action-hover); }
.users-primary:disabled[b-byitgcmu8k] { cursor: wait; opacity: 0.58; }
.users-hero-actions[b-byitgcmu8k] { display: flex; flex: 0 0 auto; gap: .65rem; align-items: center; }
.users-secondary-link[b-byitgcmu8k] { display: inline-flex; min-height: 2.8rem; gap: .5rem; align-items: center; justify-content: center; padding: .65rem 1rem; border: 1px solid var(--users-border); border-radius: .68rem; color: var(--users-accent-strong); background: var(--users-surface-soft); font-size: .76rem; font-weight: 600; text-decoration: none; }
.users-secondary-link:hover[b-byitgcmu8k] { border-color: var(--users-accent); color: var(--users-accent); background: var(--users-surface); }
.users-secondary-link svg[b-byitgcmu8k] { width: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.users-notice[b-byitgcmu8k] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--pulse-success-border);
    border-radius: 0.75rem;
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
    font-size: .875rem;
}

.users-notice.error[b-byitgcmu8k] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}

html[data-theme="dark"] .users-notice.success[b-byitgcmu8k] { color: var(--pulse-success-text); background: var(--pulse-success-soft); border-color: var(--pulse-success-border); }
html[data-theme="dark"] .users-notice.error[b-byitgcmu8k] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); border-color: var(--pulse-danger-border); }

.users-notice > span[b-byitgcmu8k] {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: currentColor;
    background: transparent;
    font-weight: 700;
}

.users-notice p[b-byitgcmu8k] { margin: 0; overflow-wrap: anywhere; }
/* The bare-glyph treatment is for the dismiss "×" only; an action like
   "Try again" needs button chrome or it reads as oversized stray text. */
.users-notice button[aria-label][b-byitgcmu8k] { border: 0; color: inherit; background: transparent; font-size: 1.2rem; cursor: pointer; }

/* One recovery affordance for this page: the same outlined button in the inline
   banner and in the failed-read empty state, so retrying never reads as the
   page's primary action. */
.notice-retry[b-byitgcmu8k] {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    color: inherit;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}

.notice-retry:disabled[b-byitgcmu8k] { cursor: default; opacity: 0.55; }
.users-empty .notice-retry[b-byitgcmu8k] { color: var(--users-ink); }

.access-summary[b-byitgcmu8k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1rem 0 0;
}

.access-summary article[b-byitgcmu8k] {
    display: flex;
    min-width: 0;
    gap: 0.8rem;
    align-items: center;
    padding: .8rem;
    border: 1px solid var(--users-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--users-surface);
}

.summary-icon[b-byitgcmu8k] {
    display: grid;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--users-muted);
    background: var(--users-surface-soft);
}

.summary-icon.enabled[b-byitgcmu8k] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
.summary-icon.admin[b-byitgcmu8k] { color: var(--users-muted); background: var(--users-surface-soft); }
.summary-icon.locked[b-byitgcmu8k] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }

html[data-theme="dark"] .summary-icon.total[b-byitgcmu8k] { color: var(--users-muted); background: var(--users-surface-soft); }
html[data-theme="dark"] .summary-icon.enabled[b-byitgcmu8k] { color: var(--pulse-success-text); background: var(--pulse-success-soft); }
html[data-theme="dark"] .summary-icon.admin[b-byitgcmu8k] { color: var(--users-muted); background: var(--users-surface-soft); }
html[data-theme="dark"] .summary-icon.locked[b-byitgcmu8k] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }

.summary-icon svg[b-byitgcmu8k] {
    width: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.access-summary article > div[b-byitgcmu8k] { display: grid; min-width: 0; }
.access-summary strong[b-byitgcmu8k] { font-size: 1.25rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.access-summary small[b-byitgcmu8k] { margin-top: .15rem; color: var(--users-muted); font-size: .75rem; overflow-wrap: anywhere; }

.users-panel[b-byitgcmu8k],
.role-guide[b-byitgcmu8k] {
    border: 1px solid var(--users-border);
    border-radius: var(--pulse-radius-lg, 14px);
    background: var(--users-surface);
}

.users-panel[b-byitgcmu8k] { container: users-list / inline-size; }

.users-toolbar[b-byitgcmu8k] {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--users-border);
}

.users-toolbar > div[b-byitgcmu8k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    min-width: 0;
}

.users-toolbar h2[b-byitgcmu8k],
.role-guide h2[b-byitgcmu8k] {
    margin: 0;
    color: var(--users-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.users-toolbar p[b-byitgcmu8k],
.role-guide header p[b-byitgcmu8k] {
    margin: 0.25rem 0 0;
    color: var(--users-muted);
    font-size: 0.75rem;
}

.users-toolbar p[b-byitgcmu8k] { margin: 0; }

.users-search[b-byitgcmu8k] {
    display: flex;
    width: clamp(19rem, 30%, 30rem);
    max-width: 100%;
    flex: 0 1 auto;
    min-height: var(--pulse-control-min-height, 44px);
    gap: 0.5rem;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--users-border);
    border-radius: 0.65rem;
    background: var(--users-surface-soft);
}

.users-search:focus-within[b-byitgcmu8k] { border-color: var(--users-accent); box-shadow: 0 0 0 0.18rem rgba(13, 148, 136, 0.1); }
.users-search svg[b-byitgcmu8k] { width: 1rem; fill: none; stroke: var(--users-muted); stroke-linecap: round; stroke-width: 1.8; }
.users-search input[b-byitgcmu8k] { width: 100%; min-height: 24px; border: 0; outline: 0; color: var(--users-ink); background: transparent; font: inherit; font-size: 0.78rem; }

.users-table-wrap[b-byitgcmu8k] { overflow: auto; max-height: min(62vh, 48rem); border-radius: 0 0 var(--pulse-radius-lg, 14px) var(--pulse-radius-lg, 14px); }

.users-table[b-byitgcmu8k] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.users-table th[b-byitgcmu8k] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.7rem 0.9rem;
    color: var(--users-muted);
    background: var(--users-surface-soft);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: left;
    border-bottom: 1px solid var(--users-border);
}

.users-table td[b-byitgcmu8k] {
    padding: 0.82rem 0.9rem;
    border-top: 1px solid var(--users-border);
    color: var(--users-ink);
    vertical-align: middle;
}

.users-table tbody tr:first-child td[b-byitgcmu8k] { border-top: 0; }
.users-table tbody tr.is-disabled[b-byitgcmu8k] { opacity: 0.66; }

.user-identity[b-byitgcmu8k] { display: flex; min-width: 12rem; gap: 0.7rem; align-items: center; }
.user-avatar[b-byitgcmu8k] { display: grid; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--pulse-accent-border); border-radius: 0.65rem; color: var(--pulse-accent); background: var(--pulse-accent-soft); font-size: 0.75rem; font-weight: 700; }
html[data-theme="dark"] .user-avatar[b-byitgcmu8k] { border-color: var(--pulse-accent-border); color: var(--pulse-accent); background: var(--pulse-accent-soft); }
.user-identity > span:last-child[b-byitgcmu8k] { display: grid; min-width: 0; }
.user-identity strong[b-byitgcmu8k] { font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.user-identity small[b-byitgcmu8k] { margin-top: 0.13rem; color: var(--users-muted); font-size: 0.75rem; }

.role-editor[b-byitgcmu8k] { display: flex; min-width: 12.5rem; gap: 0.4rem; align-items: center; }
.role-editor select[b-byitgcmu8k] { min-height: 2.15rem; padding: 0.3rem 1.8rem 0.3rem 0.55rem; border: 1px solid var(--users-border); border-radius: 0.5rem; outline: 0; color: var(--users-ink); background: var(--users-surface-soft); font: inherit; font-size: 0.875rem; }
.role-editor select:focus[b-byitgcmu8k] { border-color: var(--users-accent); }
/* One box for the whole name correction, the way .role-editor holds the role
   one: the responsive card layout below gives each cell a label column and a
   content column, and anything the cell holds loose after the first child lands
   in the 6rem label track. */
.users-table td .name-editor[b-byitgcmu8k] { display: flex; margin-top: 0.35rem; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.users-table td .name-editor input[type="text"][b-byitgcmu8k] { flex: 1 1 11rem; min-width: 9rem; margin-top: 0; }
.users-table td input[type="text"][b-byitgcmu8k] { min-height: 2.15rem; margin-top: 0.35rem; padding: 0.3rem 0.55rem; border: 1px solid var(--users-border); border-radius: 0.5rem; outline: 0; color: var(--users-ink); background: var(--users-surface-soft); font: inherit; font-size: 0.875rem; }
.users-table td input[type="text"]:focus[b-byitgcmu8k] { border-color: var(--users-accent); }
.users-table td input[type="text"]:disabled[b-byitgcmu8k] { cursor: wait; opacity: 0.55; }

.access-summary-button[b-byitgcmu8k] { display: flex; min-width: 10.5rem; gap: .55rem; align-items: center; padding: .28rem; border: 0; border-radius: .62rem; color: var(--users-ink); background: transparent; text-align: left; cursor: pointer; }
.access-summary-button:hover:not(:disabled)[b-byitgcmu8k] { background: var(--users-surface-soft); }
.access-summary-button:disabled[b-byitgcmu8k] { cursor: wait; opacity: .55; }
.access-summary-button > span:last-child[b-byitgcmu8k] { display: grid; min-width: 0; }
.access-summary-button strong[b-byitgcmu8k] { overflow: hidden; max-width: 10.5rem; font-size: .875rem; text-overflow: ellipsis; white-space: nowrap; }
.access-summary-button small[b-byitgcmu8k] { margin-top: .1rem; color: var(--users-muted); font-size: .875rem; }
.access-summary-icon[b-byitgcmu8k] { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: .58rem; color: var(--users-accent); background: color-mix(in srgb, var(--users-accent) 9%, transparent); }
.access-summary-icon.restricted[b-byitgcmu8k] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.access-summary-icon.none[b-byitgcmu8k] { color: var(--pulse-danger-text); background: var(--pulse-danger-soft); }
.access-summary-icon.unknown[b-byitgcmu8k] { color: var(--users-muted); background: var(--users-surface-soft); }
.access-summary-icon svg[b-byitgcmu8k] { width: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.status-stack[b-byitgcmu8k] { display: grid; gap: 0.25rem; justify-items: start; }
.account-state[b-byitgcmu8k] { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.75rem; font-weight: 600; }
.account-state > span[b-byitgcmu8k] { width: .46rem; height: .46rem; border-radius: 50%; background: var(--pulse-success); }
.account-state.disabled > span[b-byitgcmu8k] { background: var(--users-muted); }
.lock-state[b-byitgcmu8k] { padding: 0.13rem 0.38rem; border-radius: 999px; color: var(--pulse-danger-text); background: var(--pulse-danger-soft); font-size: 0.75rem; font-weight: 700; }
.change-state[b-byitgcmu8k] { padding: 0.13rem 0.38rem; border-radius: 999px; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: 0.75rem; font-weight: 700; }
html[data-theme="dark"] .change-state[b-byitgcmu8k] { color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }

/* Four actions fit here on a locked-out row, so the cell wraps instead of
   pushing the table into a horizontal scroll; each action stays unbroken. */
.user-actions[b-byitgcmu8k] { min-width: 14rem; text-align: right; }
.table-action[b-byitgcmu8k] { min-height: 2.05rem; margin-left: 0.25rem; padding: 0.3rem 0.55rem; border: 1px solid var(--users-border); border-radius: 0.48rem; color: var(--users-ink); background: var(--users-surface); font: inherit; font-size: 0.875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.table-action:hover:not(:disabled)[b-byitgcmu8k] { border-color: var(--users-accent); color: var(--users-accent-strong); }
.table-action.danger[b-byitgcmu8k] { color: var(--pulse-danger-text); }
.table-action.enable[b-byitgcmu8k], .table-action.save[b-byitgcmu8k] { color: var(--users-accent-strong); }
.table-action:disabled[b-byitgcmu8k] { cursor: wait; opacity: 0.5; }
a.table-action[b-byitgcmu8k] { display: inline-flex; align-items: center; text-decoration: none; }

.users-loading[b-byitgcmu8k],
.users-empty[b-byitgcmu8k] { display: grid; min-height: 14rem; place-items: center; align-content: center; gap: 0.6rem; color: var(--users-muted); font-size: 0.78rem; text-align: center; }
.users-loading span[b-byitgcmu8k] { width: 1.5rem; height: 1.5rem; border: 2px solid var(--users-border); border-top-color: var(--users-accent); border-radius: 50%; animation: users-spin-b-byitgcmu8k 700ms linear infinite; }
.users-empty svg[b-byitgcmu8k] { width: 2rem; fill: none; stroke: var(--users-muted); stroke-linecap: round; stroke-width: 1.5; }
.users-empty h3[b-byitgcmu8k] { margin: 0; color: var(--users-ink); font-size: 0.9rem; }
.users-empty p[b-byitgcmu8k] { margin: 0; }

.role-guide[b-byitgcmu8k] { margin-top: 1rem; padding: 1rem 1.15rem; }
.role-guide > div[b-byitgcmu8k] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.8rem; }
.role-guide article[b-byitgcmu8k] { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.65rem; padding: 0.75rem; border: 1px solid var(--users-border); border-radius: 0.72rem; background: var(--users-surface-soft); }
.role-guide article strong[b-byitgcmu8k] { align-self: center; font-size: 0.75rem; }
.role-guide article p[b-byitgcmu8k] { grid-column: 2; margin: 0; color: var(--users-muted); font-size: 0.75rem; line-height: 1.45; }
.role-mark[b-byitgcmu8k] { display: grid; grid-row: 1 / span 2; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--users-border); border-radius: .5rem; color: var(--users-muted); background: var(--users-surface); font-size: .75rem; font-weight: 600; }

/* The dialog reads the same aliases as the page behind it, so a modal never
   opens in a private white/teal that the workspace does not use. */
.users-modal[b-byitgcmu8k] { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: clamp(.65rem, 2vw, 1.35rem); --modal-pad: clamp(1rem, 2vw, 1.45rem); --users-surface: var(--pulse-surface); --users-surface-soft: var(--pulse-surface-soft); --users-border: var(--pulse-border); --users-ink: var(--pulse-text); --users-muted: var(--pulse-muted); --users-accent: var(--pulse-accent); --users-accent-strong: var(--pulse-action-hover); }
.users-modal-backdrop[b-byitgcmu8k] { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; background: var(--pulse-overlay, rgba(4, 12, 22, .58)); cursor: default; backdrop-filter: blur(2px); }
.modal-card[b-byitgcmu8k] { position: relative; z-index: 1; width: min(31rem, 100%); max-height: calc(100dvh - 2rem); padding: var(--modal-pad); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--users-border); border-radius: 1rem; color: var(--users-ink); background: var(--users-surface); box-shadow: var(--pulse-shadow-lg); scrollbar-color: rgba(104, 121, 147, .45) transparent; }
.modal-card-create[b-byitgcmu8k] { width: min(55rem, 100%); }
.modal-card-compact[b-byitgcmu8k] { width: min(31rem, 100%); }
.modal-card > header[b-byitgcmu8k] { display: flex; gap: .85rem; align-items: center; justify-content: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--users-border); }
.modal-card h2[b-byitgcmu8k] { margin: 0; color: var(--users-ink); font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: -.02em; line-height: 1.3; }
.modal-heading-icon[b-byitgcmu8k] { display: grid; flex: 0 0 2.65rem; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgba(15, 130, 125, .18); border-radius: .82rem; color: var(--users-accent); background: rgba(15, 130, 125, .09); }
.modal-heading-icon svg[b-byitgcmu8k] { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.modal-card-header > div[b-byitgcmu8k] { min-width: 0; }
.modal-card-header .users-eyebrow[b-byitgcmu8k] { margin-bottom: .15rem; color: var(--users-accent); }
.modal-close[b-byitgcmu8k] { display: grid; flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; margin-left: auto; place-items: center; border: 1px solid transparent; border-radius: .65rem; color: var(--users-muted); background: transparent; font: inherit; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.modal-close:hover:not(:disabled)[b-byitgcmu8k] { border-color: var(--users-border); color: var(--users-ink); background: var(--users-surface-soft); }
.modal-close:disabled[b-byitgcmu8k] { cursor: wait; opacity: .5; }
.modal-intro[b-byitgcmu8k] { max-width: 46rem; margin: .85rem 0 1rem; color: var(--users-muted); font-size: .82rem; line-height: 1.55; }
/* EditForm and its inputs render inside child components. Anchor their styles
   to an element owned by this page so CSS isolation reaches the actual form. */
.users-modal[b-byitgcmu8k]  .modal-form { display: grid; gap: 1rem; min-width: 0; }
.form-field[b-byitgcmu8k] { display: grid; gap: .4rem; min-width: 0; }
.form-field > label[b-byitgcmu8k] { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; color: var(--users-ink); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.form-field > label em[b-byitgcmu8k] { margin-left: auto; color: var(--users-muted); font-size: .75rem; font-style: normal; font-weight: 600; }
.form-field > small[b-byitgcmu8k] { color: var(--users-muted); font-size: .875rem; line-height: 1.45; }
.form-field[b-byitgcmu8k]  :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--pulse-control-min-height, 44px); padding: .62rem .75rem; border: 1px solid var(--users-border); border-radius: .62rem; outline: 0; color: var(--users-ink); background: var(--users-surface); box-shadow: inset 0 1px 2px rgba(20, 36, 60, .025); font: inherit; font-size: .9375rem; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.form-field[b-byitgcmu8k]  input::placeholder { color: var(--users-muted); }
.form-field[b-byitgcmu8k]  :is(input, select):hover { border-color: color-mix(in srgb, var(--users-accent) 42%, var(--users-border)); }
.form-field[b-byitgcmu8k]  :is(input, select):focus { border-color: var(--users-accent); background: var(--users-surface); box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .11); }
.form-field[b-byitgcmu8k]  [aria-invalid="true"] { border-color: var(--pulse-danger-text); }
.field-validation:empty[b-byitgcmu8k] { display: none; }
.field-validation[b-byitgcmu8k]  .validation-message { color: var(--pulse-danger-text); font-size: .8125rem; font-weight: 600; line-height: 1.45; }
.form-section[b-byitgcmu8k] { min-width: 0; padding: clamp(.85rem, 2vw, 1.05rem); border: 1px solid var(--users-border); border-radius: .9rem; background: color-mix(in srgb, var(--users-surface-soft) 68%, var(--users-surface)); }
.form-section-heading[b-byitgcmu8k] { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; }
.form-section-heading > span[b-byitgcmu8k] { display: grid; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: .5rem; color: var(--pulse-on-action); background: var(--pulse-action); font-size: .75rem; font-weight: 700; }
.form-section-heading h3[b-byitgcmu8k] { margin: 0; color: var(--users-ink); font-size: .84rem; }
.form-section-heading p[b-byitgcmu8k] { margin: .17rem 0 0; color: var(--users-muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
.section-link[b-byitgcmu8k] { margin-left: auto; padding: .32rem .52rem; border: 1px solid var(--users-border); border-radius: .5rem; color: var(--users-accent-strong); background: var(--users-surface); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-link:hover[b-byitgcmu8k] { border-color: var(--users-accent); }
.form-field-grid[b-byitgcmu8k] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.form-field-wide[b-byitgcmu8k] { grid-column: 1 / -1; }
.password-policy[b-byitgcmu8k] { display: flex; gap: .55rem; align-items: flex-start; margin: .85rem 0 0; padding: .68rem .75rem; border-radius: .68rem; color: var(--users-muted); background: rgba(15, 130, 125, .07); font-size: .75rem; line-height: 1.48; }
.password-policy svg[b-byitgcmu8k] { flex: 0 0 1rem; width: 1rem; margin-top: .05rem; fill: none; stroke: var(--users-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.administrator-access-note[b-byitgcmu8k] { margin: .65rem 0 0; padding: .65rem .75rem; border: 1px solid var(--pulse-info-border); border-radius: .65rem; color: var(--pulse-info-strong); background: var(--pulse-info-soft); font-size: .75rem; line-height: 1.48; }
.administrator-access-note strong[b-byitgcmu8k] { font-weight: 700; }
/* The bleed follows the card's clamped padding rather than assuming its 1.45rem
   maximum, which only holds at viewports of 1160px and wider. Below that the
   footer overhung the card and gave the dialog its own horizontal scrollbar. */
.modal-form footer[b-byitgcmu8k], .modal-actions[b-byitgcmu8k] { position: sticky; bottom: calc(-1 * var(--modal-pad)); z-index: 2; display: flex; gap: .65rem; justify-content: flex-end; margin: .2rem calc(-1 * var(--modal-pad)) calc(-1 * var(--modal-pad)); padding: 1rem var(--modal-pad); border-top: 1px solid var(--users-border); background: color-mix(in srgb, var(--users-surface) 94%, transparent); backdrop-filter: blur(10px); }
.modal-secondary[b-byitgcmu8k] { min-height: 2.7rem; padding: .6rem 1rem; border: 1px solid var(--users-border); border-radius: .65rem; color: var(--users-ink); background: var(--users-surface); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.modal-secondary:hover:not(:disabled)[b-byitgcmu8k] { border-color: var(--users-accent); color: var(--users-accent-strong); background: var(--users-surface-soft); }
.modal-secondary:disabled[b-byitgcmu8k] { cursor: wait; opacity: .55; }
.users-modal[b-byitgcmu8k]  .modal-validation { margin: 0; padding: .75rem .9rem; border-radius: 0.55rem; color: var(--pulse-danger-text); background: var(--pulse-danger-soft); font-size: .875rem; line-height: 1.45; }
.users-modal[b-byitgcmu8k]  .modal-validation ul { margin: 0; padding-left: 1.1rem; }
.modal-error[b-byitgcmu8k] { margin: 0.75rem 0; padding: 0.7rem 0.8rem; border: 1px solid var(--pulse-danger-border); border-radius: 0.55rem; color: var(--pulse-danger-text); background: var(--pulse-danger-soft); font-size: .875rem; line-height: 1.45; }
.reset-warning[b-byitgcmu8k] { display: grid; gap: 0.18rem; margin: 0.9rem 0 1rem; padding: 0.75rem; border: 1px solid var(--pulse-warning-border); border-radius: 0.65rem; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .875rem; line-height: 1.45; }
html[data-theme="dark"] .users-modal[b-byitgcmu8k] { --users-accent-strong: var(--pulse-accent); }
.modal-card-access[b-byitgcmu8k] { width: min(48rem, 100%); }
.users-modal-discard[b-byitgcmu8k] { z-index: 150; }
.modal-card-discard[b-byitgcmu8k] { display: grid; width: min(29rem, 100%); gap: .7rem; justify-items: center; padding: 1.35rem; text-align: center; }
.discard-dialog-icon[b-byitgcmu8k] { display: grid; width: 3.15rem; height: 3.15rem; place-items: center; border-radius: .9rem; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); }
.discard-dialog-icon svg[b-byitgcmu8k] { width: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.modal-card-discard h2[b-byitgcmu8k] { margin: .15rem 0 0; font-size: 1.2rem; }
.modal-card-discard p[b-byitgcmu8k] { max-width: 25rem; margin: 0; color: var(--users-muted); font-size: .76rem; line-height: 1.55; }
.discard-dialog-actions[b-byitgcmu8k] { display: flex; gap: .6rem; margin-top: .35rem; }
.discard-confirm[b-byitgcmu8k] { min-height: 2.7rem; padding: .6rem 1rem; border: 1px solid var(--pulse-danger); border-radius: .65rem; color: #fff; background: var(--pulse-danger); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.discard-confirm:hover:not(:disabled)[b-byitgcmu8k] { filter: brightness(1.06); }
.access-loading[b-byitgcmu8k] { display: grid; min-height: 12rem; gap: .65rem; place-items: center; align-content: center; color: var(--users-muted); font-size: .75rem; }
.access-loading > span[b-byitgcmu8k] { width: 1.6rem; height: 1.6rem; border: 2px solid var(--users-border); border-top-color: var(--users-accent); border-radius: 50%; animation: users-spin-b-byitgcmu8k 700ms linear infinite; }
.access-load-failed[b-byitgcmu8k] { display: grid; min-height: 9rem; gap: .75rem; place-items: center; align-content: center; padding: 1rem; border: 1px dashed var(--users-border); border-radius: .8rem; text-align: center; }
.access-load-failed p[b-byitgcmu8k] { margin: 0; color: var(--users-muted); font-size: .75rem; }
.access-retired-note[b-byitgcmu8k] { margin-bottom: .65rem; padding: .62rem .7rem; border: 1px solid var(--pulse-warning-border); border-radius: .62rem; color: var(--pulse-warning-text); background: var(--pulse-warning-soft); font-size: .75rem; line-height: 1.45; }
.saved-access-note[b-byitgcmu8k] { display: flex; gap: .65rem; align-items: center; margin-top: .75rem; padding: .72rem .8rem; border: 1px solid var(--users-border); border-radius: .72rem; background: var(--users-surface-soft); }
.saved-access-note svg[b-byitgcmu8k] { flex: 0 0 1.25rem; width: 1.25rem; fill: none; stroke: var(--users-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.saved-access-note > span[b-byitgcmu8k] { display: grid; gap: .12rem; }
.saved-access-note strong[b-byitgcmu8k] { color: var(--users-ink); font-size: .75rem; }
.saved-access-note small[b-byitgcmu8k] { color: var(--users-muted); font-size: .75rem; line-height: 1.4; }
.standalone-actions[b-byitgcmu8k] { bottom: calc(-1 * var(--modal-pad)); }

/* Commercial readability floor: preserve oversized icon-only affordances while
   keeping every text-bearing action and form control at 14px or above. */
.users-page :is(a, button:not([aria-label]), input, select, textarea, label, summary)[b-byitgcmu8k],
.users-modal :is(a, button:not([aria-label]), input, select, textarea, label, summary)[b-byitgcmu8k],
.users-page :is(a, button:not([aria-label]), label, summary) :is(span, strong, small, em)[b-byitgcmu8k],
.users-modal :is(a, button:not([aria-label]), label, summary) :is(span, strong, small, em)[b-byitgcmu8k] {
    font-size: .875rem;
}

@keyframes users-spin-b-byitgcmu8k { to { transform: rotate(360deg); } }

@media (min-width: 1100px) {
    .modal-card-create[b-byitgcmu8k] { width: min(72rem, 100%); }
    .modal-card-create[b-byitgcmu8k]  .modal-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .create-account-details[b-byitgcmu8k] { grid-column: 1; }
    .create-camera-access[b-byitgcmu8k] { grid-column: 2; grid-row: span 2; }
    .create-temporary-password[b-byitgcmu8k] { grid-column: 1; }
    .modal-card-create[b-byitgcmu8k]  .modal-validation,
    .modal-card-create .modal-actions[b-byitgcmu8k] { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
    .access-summary[b-byitgcmu8k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-guide > div[b-byitgcmu8k] { grid-template-columns: 1fr; }
}

@container users-list (max-width: 1080px) {
    .users-table-wrap[b-byitgcmu8k] { contain: none; max-height: none; overflow: visible; }
    .users-table thead[b-byitgcmu8k] { display: none; }
    .users-table[b-byitgcmu8k], .users-table tbody[b-byitgcmu8k], .users-table tr[b-byitgcmu8k], .users-table td[b-byitgcmu8k] { display: block; width: 100%; }
    .users-table tbody[b-byitgcmu8k] { display: grid; gap: .75rem; padding: .75rem; background: var(--users-surface-soft); }
    .users-table tr[b-byitgcmu8k] { padding: .7rem; border: 1px solid var(--users-border); border-radius: var(--pulse-radius-md, 12px); background: var(--users-surface); }
    .users-table tbody tr:first-child[b-byitgcmu8k] { border-top: 1px solid var(--users-border); }
    .users-table td[b-byitgcmu8k] { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.7rem; align-items: center; padding: 0.4rem; border: 0; }
    .users-table td[b-byitgcmu8k]::before { color: var(--users-muted); content: attr(data-label); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    .user-actions[b-byitgcmu8k] { display: flex; min-width: 0; gap: .4rem; flex-wrap: wrap; text-align: left; white-space: normal; }
    /* The User cell is the only body cell holding two children - the identity
       and the name editor - so under the grid above the editor auto-places into
       the 6rem label track and renders a 160-character field 96px wide with its
       buttons on other rows. Flexed for the same reason .user-actions is, with
       the label kept at the width of the column it replaces so the cards still
       line up. */
    .users-table td[data-label="User"][b-byitgcmu8k] { display: flex; min-width: 0; gap: .7rem; flex-wrap: wrap; align-items: center; }
    .users-table td[data-label="User"][b-byitgcmu8k]::before { flex: 0 0 5.3rem; }
    .users-table td .name-editor[b-byitgcmu8k] { flex: 1 1 100%; }
    .role-editor[b-byitgcmu8k], .user-identity[b-byitgcmu8k] { min-width: 0; }
    .role-editor select[b-byitgcmu8k] { min-width: 0; }
    .access-summary-button[b-byitgcmu8k] { width: 100%; min-width: 0; }
    .table-action[b-byitgcmu8k] { margin: 0; }
}

@container users-list (min-width: 960px) and (max-width: 1080px) {
    .users-table tbody[b-byitgcmu8k] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 780px) {
    .users-toolbar[b-byitgcmu8k] { align-items: stretch; flex-direction: column; }
    .users-hero-actions[b-byitgcmu8k] { flex: 1 1 100%; }
    .users-search[b-byitgcmu8k] { width: 100%; }
}

@media (max-width: 520px) {
    .access-summary[b-byitgcmu8k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .users-table td[b-byitgcmu8k] { grid-template-columns: 1fr; }
    .users-table td[b-byitgcmu8k]::before { margin-top: 0.2rem; }
    /* The label stacks above its content here like every other cell's does; the
       User cell is flex rather than grid, so it takes a full row instead. */
    .users-table td[data-label="User"][b-byitgcmu8k]::before { flex: 1 1 100%; }
    .modal-form footer[b-byitgcmu8k], .modal-actions[b-byitgcmu8k], .discard-dialog-actions[b-byitgcmu8k] { flex-direction: column-reverse; }
    .modal-form footer[b-byitgcmu8k], .modal-actions[b-byitgcmu8k] { width: auto; }
    .discard-dialog-actions[b-byitgcmu8k] { width: 100%; }
    .modal-form footer > *[b-byitgcmu8k], .modal-actions > *[b-byitgcmu8k], .discard-dialog-actions > *[b-byitgcmu8k] { width: 100%; }
    .users-hero-actions > *[b-byitgcmu8k] { flex: 1 1 0; min-width: 0; }
    .form-section-heading[b-byitgcmu8k] { flex-wrap: wrap; }
    .section-link[b-byitgcmu8k] { margin-left: 2.3rem; }
    .form-field-grid[b-byitgcmu8k] { grid-template-columns: 1fr; }
    .form-field-wide[b-byitgcmu8k] { grid-column: auto; }
    .users-modal[b-byitgcmu8k] { --modal-pad: .9rem; }
    .modal-card[b-byitgcmu8k] { max-height: calc(100dvh - 1.25rem); }
}

.users-page :is(button, a, input, select):focus-visible[b-byitgcmu8k],
.users-modal :is(button, a, input, select):focus-visible[b-byitgcmu8k],
.form-field[b-byitgcmu8k]  :is(input, select):focus-visible {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The outcome notice takes focus after a row action that removed its own
   button, so it has to show where the keyboard went. Plain :focus, because the
   move is programmatic. */
.users-notice:focus[b-byitgcmu8k],
.modal-error:focus[b-byitgcmu8k] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 780px) {
    .users-page[b-byitgcmu8k] { margin: 0; padding: .75rem; }
    .users-breadcrumbs a[b-byitgcmu8k] { min-height: var(--pulse-control-min-height, 44px); }
}

@media (max-width: 560px), (any-pointer: coarse) {
    .users-breadcrumbs a[b-byitgcmu8k],
    .users-secondary-link[b-byitgcmu8k],
    .users-notice button[b-byitgcmu8k],
    .notice-retry[b-byitgcmu8k],
    .users-search[b-byitgcmu8k],
    .role-editor select[b-byitgcmu8k],
    .access-summary-button[b-byitgcmu8k],
    .table-action[b-byitgcmu8k],
    .modal-close[b-byitgcmu8k],
    .section-link[b-byitgcmu8k],
    .modal-secondary[b-byitgcmu8k],
    .users-primary[b-byitgcmu8k],
    .discard-confirm[b-byitgcmu8k],
    .users-modal[b-byitgcmu8k]  .selection-actions button,
    .users-modal[b-byitgcmu8k]  .group-check {
        min-height: 44px;
    }

    .users-breadcrumbs a[b-byitgcmu8k],
    .users-notice button[b-byitgcmu8k],
    .modal-close[b-byitgcmu8k],
    .section-link[b-byitgcmu8k] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .users-notice button[aria-label][b-byitgcmu8k],
    .modal-close[b-byitgcmu8k] {
        min-width: 44px;
    }

    .users-search input[b-byitgcmu8k],
    .role-editor select[b-byitgcmu8k],
    .form-field[b-byitgcmu8k]  :is(input, select) {
        font-size: 16px;
    }

    /* Stated separately because the row-height rule for table inputs is more
       specific than the lists above: the rename field is a text input inside
       the table and needs the same touch floor - and the same 16px, below
       which iOS zooms the whole page on focus - as the role select beside it. */
    .users-table td .name-editor input[type="text"][b-byitgcmu8k] {
        min-height: 44px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .users-primary[b-byitgcmu8k], .users-search[b-byitgcmu8k], .users-table tbody tr[b-byitgcmu8k], .table-action[b-byitgcmu8k] { transition: none; }
    .users-loading span[b-byitgcmu8k] { animation: none; }
}
/* /Components/Shared/AccessControlHero.razor.rz.scp.css */
/* The shared Connected systems page top.

   Quiet on purpose: the pages under it are dense configuration, and every
   vertical pixel spent restating the title is a mapping row the operator has
   to scroll for. No panel, no tint, no border - the section bar underneath
   provides the only horizontal rule the top of the page needs. */

/* One row: the muted parent crumb, the page name and its context fragment read
   as a single line, with whatever actions the page owns at the right end. A
   separate crumb row above the title cost every page in the section 49px of
   chrome before its first mapping row. */
.ac-hero[b-u2h8ywo4kj] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .6rem;
    min-height: var(--pulse-control-min-height, 44px);
    min-width: 0;
}

/* The crumb sits in front of the heading now, so it carries no vertical space
   of its own and its own flow is inline. */
.ac-hero .breadcrumbs[b-u2h8ywo4kj] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ac-hero .breadcrumbs a[b-u2h8ywo4kj] {
    display: inline-flex;
    align-items: center;
    min-height: var(--pulse-control-min-height, 44px);
}

.ac-hero .breadcrumbs a:focus-visible[b-u2h8ywo4kj] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The last crumb names the page the h1 beside it already names. It stays in the
   accessibility tree - it is the only aria-current="page" in the trail - but
   printing the same words twice on one line reads as a duplicate heading. */
.ac-hero .breadcrumbs [aria-current="page"][b-u2h8ywo4kj] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ac-hero-section[b-u2h8ywo4kj] {
    color: var(--pulse-muted);
    font-weight: 600;
}

.ac-hero-row[b-u2h8ywo4kj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    min-width: 0;
    /* Takes the slack the crumb in front of it leaves. */
    flex: 1 1 auto;
}

.ac-hero-copy[b-u2h8ywo4kj] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
    min-width: 0;
}

.ac-hero h1[b-u2h8ywo4kj] {
    margin: 0;
    color: var(--pulse-text);
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* A context fragment beside the title, not a paragraph under it. */
.ac-hero-lede[b-u2h8ywo4kj] {
    margin: 0;
    color: var(--pulse-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.ac-hero-actions[b-u2h8ywo4kj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    /* Actions keep their own width and sit right; the copy takes the slack. */
    flex: none;
    margin-inline-start: auto;
}

.ac-hero-actions[b-u2h8ywo4kj]  :is(a, button) {
    min-height: var(--pulse-control-min-height, 44px);
}

@media (max-width: 640px) {
    .ac-hero[b-u2h8ywo4kj] {
        min-height: 0;
    }

    .ac-hero-row[b-u2h8ywo4kj] {
        align-items: stretch;
    }

    .ac-hero-actions[b-u2h8ywo4kj] {
        width: 100%;
        margin-inline-start: 0;
    }

    .ac-hero .breadcrumbs a[b-u2h8ywo4kj] {
        min-height: 2.75rem;
    }
}

@media (any-pointer: coarse) {
    .ac-hero .breadcrumbs a[b-u2h8ywo4kj] {
        min-height: 2.75rem;
    }
}
/* /Components/Shared/AccessControlTabs.razor.rz.scp.css */
/* The Connected systems section bar.

   One bounded navigation strip with a clear current position. The links keep
   their own width and scroll within the strip on smaller screens.

   Everything is drawn from the shared semantic palette, so light, dark and
   contrast changes reach it without a second definition. */

.ac-tabs[b-7ewlfgw4xu] {
    /* The section is one strip; it never widens its page. Without the zero
       minimum a nowrap row of five tabs can force the whole column wider than
       the workspace and take the page body sideways with it. */
    min-width: 0;
    max-width: 100%;
}

.ac-tablist[b-7ewlfgw4xu] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .25rem;
    margin: 0;
    /* The strip is the only chrome between the title row and the workspace, so
       it keeps its frame and gives back the padding. */
    padding: .15rem;
    list-style: none;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md, 12px);
    background: var(--pulse-surface-soft);
    /* The overflow makes this a scroll container, which is also what stops its
       content from contributing a minimum width to the page. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pulse-border-strong) transparent;
}

.ac-tablist[b-7ewlfgw4xu]::-webkit-scrollbar {
    height: 6px;
}

.ac-tablist[b-7ewlfgw4xu]::-webkit-scrollbar-thumb {
    background: var(--pulse-border-strong);
    border-radius: 999px;
}

.ac-tablist > li[b-7ewlfgw4xu] {
    display: flex;
    /* The row scrolls on a phone. Each item must keep the width of its label;
       allowing the flex item to shrink made every nowrap link paint over the
       next one even though the page itself did not report horizontal overflow. */
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: center;
}

.ac-tab[b-7ewlfgw4xu] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    position: relative;
    /* A pointed tab is a click target, not a finger target: 40px here and the
       full 44px back on any coarse pointer (below) and on a phone. */
    min-height: 40px;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s var(--pulse-ease-out, ease),
                color .16s var(--pulse-ease-out, ease),
                border-color .16s var(--pulse-ease-out, ease);
}

.ac-tab:hover[b-7ewlfgw4xu] {
    background: var(--pulse-surface);
    border-color: var(--pulse-border);
    color: var(--pulse-text);
    text-decoration: none;
}

/* One solid ring, from the token every screen in the product focuses with. */
.ac-tab:focus-visible[b-7ewlfgw4xu] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

/* The current tab has an accent rule and a solid border. Colour alone would
   leave the current position to a hue
   difference an operator has to hunt for on a projector or in daylight. */
.ac-tab.is-current[b-7ewlfgw4xu] {
    background: var(--pulse-surface);
    border-color: var(--pulse-border);
    color: var(--pulse-text);
    font-weight: 700;
}

.ac-tab.is-current[b-7ewlfgw4xu]::after {
    content: "";
    position: absolute;
    left: .65rem;
    right: .65rem;
    bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--pulse-accent);
}

/* The icon belongs to PulseIcon, so it carries that component's scope and only
   ::deep reaches it from here. */
.ac-tab[b-7ewlfgw4xu]  .ac-tab-icon {
    flex: none;
    color: var(--pulse-muted);
    transition: color .16s var(--pulse-ease-out, ease);
}

.ac-tab:hover[b-7ewlfgw4xu]  .ac-tab-icon,
.ac-tab.is-current[b-7ewlfgw4xu]  .ac-tab-icon {
    color: var(--pulse-accent);
}

.ac-tab-label[b-7ewlfgw4xu] {
    min-width: 0;
}

.ac-tab-state[b-7ewlfgw4xu] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pulse-border-strong);
}

.ac-tab-state.is-live[b-7ewlfgw4xu] {
    background: var(--pulse-success);
}

.ac-tab-count[b-7ewlfgw4xu] {
    display: inline-block;
    flex: none;
    /* Reserves the common digit widths so a live counter rolling over does not
       change the tab's width and shift every following tab while the strip is
       a horizontal scroll container under the operator's finger. */
    min-width: 3.5ch;
    padding: .05rem .38rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pulse-muted) 14%, transparent);
    color: var(--pulse-muted);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ac-tab.is-current .ac-tab-count[b-7ewlfgw4xu] {
    background: var(--pulse-accent-soft);
    color: var(--pulse-accent);
}

@media (max-width: 640px) {
    .ac-tab[b-7ewlfgw4xu] {
        padding: .45rem .6rem;
        font-size: .82rem;
        min-height: 44px;
    }

    .ac-tab.is-current[b-7ewlfgw4xu]::after {
        left: .6rem;
        right: .6rem;
    }
}

/* any-pointer, not pointer: a wall panel driven by both a mouse and a finger
   reports a fine primary pointer and would keep the 40px strip. */
@media (any-pointer: coarse) {
    .ac-tab[b-7ewlfgw4xu] {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-tab[b-7ewlfgw4xu],
    .ac-tab[b-7ewlfgw4xu]  .ac-tab-icon {
        transition: none;
    }
}
/* /Components/Shared/BridgeCustodyPanel.razor.rz.scp.css */
/* Match the bridge workspace without relying on its isolated page CSS.
   All surfaces and feedback colors follow the active Pulse theme. */
.bridge-custody-panel[b-jk5p1lsvqv] {
    min-width: 0;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    box-shadow: none;
    overflow: visible;
}

.bridge-custody-head[b-jk5p1lsvqv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--pulse-border);
    background: var(--pulse-surface);
    border-radius: var(--pulse-radius-lg) var(--pulse-radius-lg) 0 0;
}
.bridge-custody-head h3[b-jk5p1lsvqv] {
    min-width: 0;
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.bridge-custody-body[b-jk5p1lsvqv] { display: grid; min-width: 0; gap: .7rem; padding: .85rem; }
.bridge-custody-panel p[b-jk5p1lsvqv] { margin: 0; overflow-wrap: anywhere; }
.bridge-custody-description[b-jk5p1lsvqv] { color: var(--pulse-muted); font-size: .8rem; line-height: 1.45; }

.bridge-custody-panel button[b-jk5p1lsvqv] {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    max-width: 100%;
    padding: .45rem .75rem;
    border: 1px solid var(--pulse-border-strong);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.bridge-custody-panel button:hover:not(:disabled)[b-jk5p1lsvqv] {
    border-color: var(--pulse-accent);
    color: var(--pulse-accent);
    background: var(--pulse-surface-soft);
}
.bridge-custody-panel button.is-accent[b-jk5p1lsvqv] { border-color: var(--pulse-accent); color: var(--pulse-accent); }
.bridge-custody-panel button.is-danger[b-jk5p1lsvqv] { border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); }
.bridge-custody-panel button.is-danger:hover:not(:disabled)[b-jk5p1lsvqv] { background: var(--pulse-danger-soft); }
.bridge-custody-panel button:disabled[b-jk5p1lsvqv] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }

.bridge-custody-notice[b-jk5p1lsvqv] {
    display: block;
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    font-size: .8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.bridge-custody-notice.is-empty[b-jk5p1lsvqv] {
    border-style: solid;
    color: var(--pulse-muted);
    background: transparent;
    border-color: transparent;
}
.bridge-custody-notice.is-error[b-jk5p1lsvqv] {
    border-color: var(--pulse-danger-border);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
}
.bridge-custody-notice.is-warning[b-jk5p1lsvqv] {
    border-color: var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}
.bridge-custody-notice.is-info[b-jk5p1lsvqv] {
    border-color: var(--pulse-info-border);
    color: var(--pulse-info-strong);
    background: var(--pulse-info-soft);
}
.bridge-custody-notice button[b-jk5p1lsvqv] { margin-inline-start: .45rem; color: inherit; }

.bridge-custody-rows[b-jk5p1lsvqv] {
    display: grid;
    gap: .7rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bridge-custody-row[b-jk5p1lsvqv] {
    display: grid;
    min-width: 0;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
}
.bridge-custody-summary[b-jk5p1lsvqv] { font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.bridge-custody-summary strong[b-jk5p1lsvqv] { font-weight: 700; }
.bridge-custody-meta[b-jk5p1lsvqv] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--pulse-muted); font-size: .75rem; }
.bridge-custody-reason[b-jk5p1lsvqv] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .5rem .65rem;
    border: 1px solid var(--pulse-border-strong);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    font-family: inherit;
    font-size: .875rem;
}
.bridge-custody-actions[b-jk5p1lsvqv] { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }

.bridge-custody-evidence[b-jk5p1lsvqv] {
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    background: var(--pulse-surface-soft);
}
.bridge-custody-evidence ol[b-jk5p1lsvqv] { display: grid; gap: .65rem; margin: 0; padding-inline-start: 1.25rem; }
.bridge-custody-evidence li[b-jk5p1lsvqv] { font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.bridge-custody-evidence :is(small, span)[b-jk5p1lsvqv] { display: block; }
.bridge-custody-evidence small[b-jk5p1lsvqv] { color: var(--pulse-muted); }

.bridge-custody-confirmation[b-jk5p1lsvqv] {
    display: grid;
    gap: .65rem;
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--pulse-danger-border);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-danger-text);
    background: var(--pulse-danger-soft);
    font-size: .85rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.bridge-custody-pager[b-jk5p1lsvqv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.bridge-custody-pager strong[b-jk5p1lsvqv] { color: var(--pulse-muted); font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.bridge-custody-panel :is(button, input, [tabindex]):focus-visible[b-jk5p1lsvqv] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}
.bridge-custody-panel[aria-busy="true"][b-jk5p1lsvqv] { cursor: progress; }

@media (max-width: 600px) {
    .bridge-custody-head[b-jk5p1lsvqv] { align-items: stretch; }
    .bridge-custody-head h3[b-jk5p1lsvqv] { flex-basis: 100%; }
    .bridge-custody-head button[b-jk5p1lsvqv] { width: 100%; }
    .bridge-custody-actions[b-jk5p1lsvqv] { display: grid; grid-template-columns: minmax(0, 1fr); }
    .bridge-custody-actions button[b-jk5p1lsvqv] { width: 100%; }
    .bridge-custody-reason[b-jk5p1lsvqv] { font-size: 1rem; }
    .bridge-custody-notice button[b-jk5p1lsvqv] { display: flex; width: 100%; margin: .6rem 0 0; }
    .bridge-custody-pager[b-jk5p1lsvqv] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bridge-custody-pager strong[b-jk5p1lsvqv] { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}
/* /Components/Shared/BridgeLifecycleRecoveryPanel.razor.rz.scp.css */
/* Shared children do not inherit the host page's isolated selectors.
   Use the same semantic palette and card geometry in both bridge pages. */
.bridge-recovery-panel[b-88k4gqwnmg] {
    min-width: 0;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    box-shadow: none;
    overflow: visible;
}

.bridge-recovery-head[b-88k4gqwnmg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--pulse-border);
    background: var(--pulse-surface);
    border-radius: var(--pulse-radius-lg) var(--pulse-radius-lg) 0 0;
}

.bridge-recovery-head h2[b-88k4gqwnmg] {
    min-width: 0;
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.bridge-recovery-body[b-88k4gqwnmg],
.bridge-recovery-review[b-88k4gqwnmg] {
    display: grid;
    min-width: 0;
    gap: .7rem;
}

.bridge-recovery-body[b-88k4gqwnmg] { padding: .85rem; }
.bridge-recovery-review[b-88k4gqwnmg] { padding-top: .85rem; border-top: 1px solid var(--pulse-border); }

.bridge-recovery-panel p[b-88k4gqwnmg] { margin: 0; overflow-wrap: anywhere; }
.bridge-recovery-description[b-88k4gqwnmg],
.bridge-recovery-hint[b-88k4gqwnmg],
.bridge-recovery-counts[b-88k4gqwnmg] {
    color: var(--pulse-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.bridge-recovery-notice[b-88k4gqwnmg] {
    padding: .7rem .8rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    font-size: .8rem;
    line-height: 1.45;
}
.bridge-recovery-notice.is-empty[b-88k4gqwnmg] {
    border-style: solid;
    color: var(--pulse-muted);
    background: transparent;
    border-color: transparent;
}
.bridge-recovery-notice.is-warning[b-88k4gqwnmg] {
    border-color: var(--pulse-warning-border);
    color: var(--pulse-warning-text);
    background: var(--pulse-warning-soft);
}
.bridge-recovery-notice.is-success[b-88k4gqwnmg] {
    border-color: var(--pulse-success-border);
    color: var(--pulse-success-text);
    background: var(--pulse-success-soft);
}

.bridge-recovery-button[b-88k4gqwnmg] {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--pulse-control-min-height, 44px);
    max-width: 100%;
    padding: .45rem .75rem;
    border: 1px solid var(--pulse-border-strong);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.bridge-recovery-button:hover:not(:disabled)[b-88k4gqwnmg] {
    border-color: var(--pulse-accent);
    color: var(--pulse-accent);
    background: var(--pulse-surface-soft);
}
.bridge-recovery-button.is-primary[b-88k4gqwnmg] {
    border-color: var(--pulse-action);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
}
.bridge-recovery-button.is-primary:hover:not(:disabled)[b-88k4gqwnmg] {
    border-color: var(--pulse-action-hover);
    color: var(--pulse-on-action);
    background: var(--pulse-action-hover);
}
.bridge-recovery-button:disabled[b-88k4gqwnmg] { opacity: var(--pulse-disabled-opacity); cursor: not-allowed; }

.bridge-recovery-source[b-88k4gqwnmg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .6rem;
}
.bridge-recovery-field[b-88k4gqwnmg] { display: grid; min-width: 0; gap: .35rem; }
.bridge-recovery-field > label[b-88k4gqwnmg] { font-size: .875rem; font-weight: 600; }
.bridge-recovery-field :is(input, select)[b-88k4gqwnmg] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--pulse-control-min-height, 44px);
    padding: .5rem .65rem;
    border: 1px solid var(--pulse-border-strong);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    font: inherit;
    font-size: .875rem;
}
.bridge-recovery-field :is(input, select):disabled[b-88k4gqwnmg] {
    color: var(--pulse-muted);
    background: var(--pulse-surface-soft);
    cursor: not-allowed;
}
.bridge-recovery-field input[b-88k4gqwnmg]::placeholder { color: var(--pulse-placeholder); }

.bridge-recovery-check[b-88k4gqwnmg] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    background: var(--pulse-surface-soft);
    font-size: .85rem;
    line-height: 1.45;
}
.bridge-recovery-check input[b-88k4gqwnmg] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .12rem;
    accent-color: var(--pulse-accent);
}
.bridge-recovery-check span[b-88k4gqwnmg] { min-width: 0; overflow-wrap: anywhere; }

.bridge-recovery-reference[b-88k4gqwnmg] { font-size: .8rem; color: var(--pulse-muted); }
.bridge-recovery-reference code[b-88k4gqwnmg] { color: var(--pulse-text); overflow-wrap: anywhere; }
.bridge-recovery-table[b-88k4gqwnmg] {
    min-width: 0;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    overflow: hidden;
}
.bridge-recovery-table table[b-88k4gqwnmg] { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bridge-recovery-table caption[b-88k4gqwnmg] {
    caption-side: top;
    padding: .65rem;
    color: var(--pulse-text);
    background: var(--pulse-surface-soft);
    font-size: .8rem;
    font-weight: 700;
    text-align: start;
}
.bridge-recovery-table :is(th, td)[b-88k4gqwnmg] {
    padding: .6rem;
    border-top: 1px solid var(--pulse-border);
    font-size: .78rem;
    line-height: 1.5;
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.bridge-recovery-table th[b-88k4gqwnmg] { color: var(--pulse-muted); background: var(--pulse-surface-soft); font-weight: 700; }

.bridge-recovery-route[b-88k4gqwnmg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-sm);
    background: var(--pulse-surface-soft);
}
.bridge-recovery-route p[b-88k4gqwnmg] { flex: 1 1 16rem; min-width: 0; font-size: .8rem; line-height: 1.45; }
.bridge-recovery-actions[b-88k4gqwnmg] { display: flex; justify-content: flex-end; min-width: 0; }
.bridge-recovery-panel :is(button, input, select):focus-visible[b-88k4gqwnmg] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}
.bridge-recovery-panel[aria-busy="true"][b-88k4gqwnmg] { cursor: progress; }

@media (max-width: 600px) {
    .bridge-recovery-head[b-88k4gqwnmg] { align-items: stretch; }
    .bridge-recovery-head h2[b-88k4gqwnmg] { flex-basis: 100%; }
    .bridge-recovery-head .bridge-recovery-button[b-88k4gqwnmg],
    .bridge-recovery-source .bridge-recovery-button[b-88k4gqwnmg],
    .bridge-recovery-route .bridge-recovery-button[b-88k4gqwnmg],
    .bridge-recovery-actions .bridge-recovery-button[b-88k4gqwnmg] { width: 100%; }
    .bridge-recovery-source[b-88k4gqwnmg] { grid-template-columns: minmax(0, 1fr); }
    .bridge-recovery-field :is(input, select)[b-88k4gqwnmg] { font-size: 1rem; }
    .bridge-recovery-table :is(th, td)[b-88k4gqwnmg] { padding: .5rem .4rem; }
}
/* /Components/Shared/CameraManagementTabs.razor.rz.scp.css */
/* One section strip: a single row on fine pointers, no card chrome around the
   tabs, one bottom hairline separating the strip from the content below. */
.camera-management-tabs[b-m1q189f6x9] {
    border-bottom: 1px solid var(--pulse-border);
    min-width: 0;
}

.camera-management-tabs ul[b-m1q189f6x9] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.camera-management-tabs li[b-m1q189f6x9] {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.camera-management-tabs[b-m1q189f6x9]  .camera-management-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-sm) var(--pulse-radius-sm) 0 0;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0 .75rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Coarse pointers keep the 44px target above; a mouse gets the compact row. */
@media (pointer: fine) {
    .camera-management-tabs[b-m1q189f6x9]  .camera-management-tab {
        min-height: var(--pulse-control-compact-height, 38px);
    }
}

.camera-management-tabs[b-m1q189f6x9]  .camera-management-tab:hover {
    color: var(--pulse-text);
}

.camera-management-tabs[b-m1q189f6x9]  .camera-management-tab.is-current,
.camera-management-tabs[b-m1q189f6x9]  .camera-management-tab.active {
    background: var(--pulse-info-soft);
    box-shadow: inset 0 -2px 0 var(--pulse-info-strong);
    color: var(--pulse-info-strong);
    font-weight: 700;
}

/* The strip can scroll, so the ring is drawn inside the tab instead of being
   clipped by the scroll container. */
.camera-management-tabs[b-m1q189f6x9]  .camera-management-tab:focus-visible {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: -3px;
}

/* Narrow screens scroll the strip sideways instead of wrapping to a second row. */
@media (max-width: 900px) {
    .camera-management-tabs[b-m1q189f6x9] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .camera-management-tabs[b-m1q189f6x9]::-webkit-scrollbar {
        display: none;
    }

    .camera-management-tabs ul[b-m1q189f6x9] {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .camera-management-tabs li[b-m1q189f6x9] {
        scroll-snap-align: start;
    }
}
/* /Components/Shared/OperatorPreferencesPanel.razor.rz.scp.css */
.operator-preferences-panel[b-2bv8uiojhm] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg, 14px);
    color: var(--pulse-text);
    background: var(--pulse-surface);
    line-height: 1.45;
}

.operator-preferences-panel .panel-heading[b-2bv8uiojhm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.operator-preferences-panel .panel-heading > div[b-2bv8uiojhm] {
    min-width: 0;
}

.operator-preferences-panel .panel-heading :is(h1, h2)[b-2bv8uiojhm] {
    margin: 0;
    color: var(--pulse-text);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.operator-preferences-panel .panel-heading h1[b-2bv8uiojhm] {
    font-size: var(--pulse-workspace-title-size, 1.5rem);
}

.operator-preferences-panel .panel-heading p[b-2bv8uiojhm] {
    max-width: 62ch;
    margin: .4rem 0 0;
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
}

.operator-preferences-fields[b-2bv8uiojhm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.operator-preferences-fields label[b-2bv8uiojhm] {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.operator-preferences-fields label > span[b-2bv8uiojhm] {
    font-size: .875rem;
    font-weight: 600;
}

.operator-preferences-fields select[b-2bv8uiojhm] {
    box-sizing: border-box;
    max-width: 100%;
    min-height: var(--pulse-control-min-height, 44px);
    min-width: 0;
    padding: .55rem .7rem;
    width: 100%;
    border: 1px solid var(--pulse-control-border, var(--pulse-border));
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-control-text, var(--pulse-text));
    background: var(--pulse-control-surface, var(--pulse-surface));
    font: inherit;
    font-size: .875rem;
}

.operator-preferences-fields small[b-2bv8uiojhm] {
    color: var(--pulse-muted);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.operator-preferences-action[b-2bv8uiojhm] {
    grid-column: 1 / -1;
    display: flex;
    gap: .8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pulse-border);
}

.operator-preferences-action .inline-action[b-2bv8uiojhm] {
    min-height: var(--pulse-control-min-height, 44px);
    padding: .6rem .85rem;
    border: 1px solid var(--pulse-action);
    border-radius: var(--pulse-radius-sm, 8px);
    color: var(--pulse-on-action);
    background: var(--pulse-action);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.operator-preferences-action .inline-action:hover:not(:disabled)[b-2bv8uiojhm] {
    border-color: var(--pulse-action-hover);
    background: var(--pulse-action-hover);
}

.operator-preferences-panel :is(select, button):focus-visible[b-2bv8uiojhm] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.operator-preferences-panel :is(select, button):disabled[b-2bv8uiojhm] {
    cursor: wait;
    opacity: var(--pulse-disabled-opacity, .58);
}

.operator-preferences-action .settings-hint[b-2bv8uiojhm] {
    max-width: 62ch;
    font-size: .875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.operator-preferences-scope[b-2bv8uiojhm] {
    max-width: 22rem;
    color: var(--pulse-muted);
    font-size: .75rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.operator-preferences-error[b-2bv8uiojhm] {
    color: var(--pulse-danger-text);
}

.operator-preferences-saved[b-2bv8uiojhm] {
    color: var(--pulse-success-text);
}

.operator-preferences-warning[b-2bv8uiojhm] {
    color: var(--pulse-warning-text, #92400e);
    overflow-wrap: anywhere;
}

@media (max-width: 680px) {
    .operator-preferences-panel[b-2bv8uiojhm] { padding: 1rem; }
    .operator-preferences-panel .panel-heading[b-2bv8uiojhm] { flex-direction: column; gap: .75rem; }

    .operator-preferences-fields[b-2bv8uiojhm] {
        grid-template-columns: 1fr;
    }

    .operator-preferences-scope[b-2bv8uiojhm] {
        text-align: left;
    }

    .operator-preferences-fields select[b-2bv8uiojhm] { font-size: 16px; }

    .operator-preferences-action[b-2bv8uiojhm],
    .operator-preferences-action .inline-action[b-2bv8uiojhm] {
        width: 100%;
    }

    .operator-preferences-action .inline-action[b-2bv8uiojhm] {
        min-height: var(--pulse-control-min-height, 44px);
    }
}
/* /Components/Shared/ResponseManagementTabs.razor.rz.scp.css */
/* One section strip: a single row on fine pointers, no card chrome around the
   tabs, one bottom hairline separating the strip from the content below. */
.response-management-tabs[b-k3ybq2jjbu] {
    border-bottom: 1px solid var(--pulse-border);
    min-width: 0;
}

.response-management-tabs ul[b-k3ybq2jjbu] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.response-management-tabs li[b-k3ybq2jjbu] {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.response-management-tabs[b-k3ybq2jjbu]  .response-management-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-sm) var(--pulse-radius-sm) 0 0;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0 .75rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Coarse pointers keep the 44px target above; a mouse gets the compact row. */
@media (pointer: fine) {
    .response-management-tabs[b-k3ybq2jjbu]  .response-management-tab {
        min-height: var(--pulse-control-compact-height, 38px);
    }
}

.response-management-tabs[b-k3ybq2jjbu]  .response-management-tab:hover {
    color: var(--pulse-text);
}

.response-management-tabs[b-k3ybq2jjbu]  .response-management-tab.is-current,
.response-management-tabs[b-k3ybq2jjbu]  .response-management-tab.active {
    background: var(--pulse-info-soft);
    box-shadow: inset 0 -2px 0 var(--pulse-info-strong);
    color: var(--pulse-info-strong);
    font-weight: 700;
}

/* The strip can scroll, so the ring is drawn inside the tab instead of being
   clipped by the scroll container. */
.response-management-tabs[b-k3ybq2jjbu]  .response-management-tab:focus-visible {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: -3px;
}

/* Narrow screens scroll the strip sideways instead of wrapping to a second row. */
@media (max-width: 900px) {
    .response-management-tabs[b-k3ybq2jjbu] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .response-management-tabs[b-k3ybq2jjbu]::-webkit-scrollbar {
        display: none;
    }

    .response-management-tabs ul[b-k3ybq2jjbu] {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .response-management-tabs li[b-k3ybq2jjbu] {
        scroll-snap-align: start;
    }
}
/* /Components/Shared/SeverityBadge.razor.rz.scp.css */
.severity-badge[b-l7n4q3pm5l] {
    align-items: center;
    background: var(--pulse-surface-soft);
    border: 1px solid var(--pulse-border);
    border-radius: 999px;
    color: var(--pulse-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .2rem .5rem;
    white-space: nowrap;
}

.severity-badge.medium[b-l7n4q3pm5l] { background: var(--pulse-info-soft); border-color: var(--pulse-info-border); color: var(--pulse-info-strong); }
.severity-badge.high[b-l7n4q3pm5l] { background: var(--pulse-warning-soft); border-color: var(--pulse-warning-border); color: var(--pulse-warning-text); }
.severity-badge.critical[b-l7n4q3pm5l] { background: var(--pulse-danger-soft); border-color: var(--pulse-danger-border); color: var(--pulse-danger-text); }
/* /Components/Shared/SiteManagementTabs.razor.rz.scp.css */
/* One section strip: a single row on fine pointers, no card chrome around the
   tabs, one bottom hairline separating the strip from the content below. */
.site-management-tabs[b-p43zun6zug] {
    border-bottom: 1px solid var(--pulse-border);
    min-width: 0;
}

.site-management-choices[b-p43zun6zug] {
    min-width: 0;
}

.site-management-tabs ul[b-p43zun6zug] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-management-tabs li[b-p43zun6zug] {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.site-management-tabs[b-p43zun6zug]  .site-management-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--pulse-radius-sm) var(--pulse-radius-sm) 0 0;
    color: var(--pulse-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.2;
    min-height: var(--pulse-control-min-height, 44px);
    padding: 0 .75rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Coarse pointers keep the 44px target above; a mouse gets the compact row. */
@media (pointer: fine) {
    .site-management-tabs[b-p43zun6zug]  .site-management-tab {
        min-height: var(--pulse-control-compact-height, 38px);
    }
}

.site-management-tabs[b-p43zun6zug]  .site-management-tab:hover {
    color: var(--pulse-text);
}

.site-management-tabs[b-p43zun6zug]  .site-management-tab.is-current,
.site-management-tabs[b-p43zun6zug]  .site-management-tab.active {
    background: var(--pulse-info-soft);
    box-shadow: inset 0 -2px 0 var(--pulse-info-strong);
    color: var(--pulse-info-strong);
    font-weight: 700;
}

/* The strip can scroll, so the ring is drawn inside the tab instead of being
   clipped by the scroll container. */
.site-management-tabs[b-p43zun6zug]  .site-management-tab:focus-visible {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: -3px;
}

/* Narrow screens scroll the strip sideways instead of wrapping to a second row. */
@media (max-width: 900px) {
    .site-management-tabs[b-p43zun6zug] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .site-management-tabs[b-p43zun6zug]::-webkit-scrollbar {
        display: none;
    }

    .site-management-tabs ul[b-p43zun6zug] {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .site-management-tabs li[b-p43zun6zug] {
        scroll-snap-align: start;
    }
}

.site-management-choices ul[b-p43zun6zug] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 4px;
}

.site-management-choices li[b-p43zun6zug] {
    display: flex;
    min-width: 0;
}

.site-management-choice[b-p43zun6zug] {
    align-items: center;
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-lg);
    color: var(--pulse-text);
    display: grid;
    flex: 1;
    gap: .8rem;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    min-height: 108px;
    padding: 1rem;
    text-decoration: none;
}

.site-management-choice:hover[b-p43zun6zug] {
    background: var(--pulse-surface-soft);
    border-color: var(--pulse-accent-border);
    color: var(--pulse-text);
}

.site-management-icon[b-p43zun6zug] {
    align-items: center;
    background: var(--pulse-accent-soft);
    border-radius: var(--pulse-radius-sm);
    color: var(--pulse-accent);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.site-management-icon svg[b-p43zun6zug],
.site-management-arrow[b-p43zun6zug] {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 20px;
}

.site-management-arrow[b-p43zun6zug] {
    color: var(--pulse-accent);
}

.site-management-copy[b-p43zun6zug] {
    display: grid;
    gap: .3rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-management-copy strong[b-p43zun6zug] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.site-management-copy small[b-p43zun6zug] {
    color: var(--pulse-muted);
    font-size: .8125rem;
    line-height: 1.45;
}

.site-management-choice:focus-visible[b-p43zun6zug] {
    outline: 3px solid var(--pulse-focus-ring);
    outline-offset: 2px;
}

.site-management-unavailable[b-p43zun6zug] {
    background: var(--pulse-surface);
    border: 1px solid var(--pulse-border);
    border-radius: var(--pulse-radius-md);
    color: var(--pulse-muted);
    font-size: .875rem;
    line-height: 1.45;
    margin: 0;
    padding: 1rem;
}

@media (max-width: 680px) {
    .site-management-choices ul[b-p43zun6zug] {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-management-choice[b-p43zun6zug] {
        min-height: 88px;
        padding: .8rem;
    }
}