@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Features/Access/AccessCheckPanel.razor.rz.scp.css */
/* UA6 (#831): the access checker panel. Tokens only (style guide §11); the verdict pills mirror
   the TX7 explainer's so the two read as one vocabulary — every colour paired with a word. */

.acx[b-q45d37drba] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.acx-head[b-q45d37drba] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.acx-title[b-q45d37drba] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.acx-badge[b-q45d37drba] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.acx-form[b-q45d37drba] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.85rem;
}

.acx-field[b-q45d37drba] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 14rem;
    flex: 1 1 14rem;
    max-width: 24rem;
}

.acx-label[b-q45d37drba] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.acx-picked[b-q45d37drba] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.acx-hint[b-q45d37drba],
.acx-muted[b-q45d37drba] {
    margin: 0;
    color: var(--color-text-secondary);
}

.acx-status[b-q45d37drba] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
}

.acx-status--warn[b-q45d37drba] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.acx-result[b-q45d37drba] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.acx-headline[b-q45d37drba] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

.acx-verdict[b-q45d37drba] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
}

.acx-verdict-summary[b-q45d37drba] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

.acx-pills[b-q45d37drba] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acx-pill[b-q45d37drba] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.78rem;
}

.acx-pill-label[b-q45d37drba] { color: var(--color-text-secondary); }
.acx-pill-mark[b-q45d37drba] { display: inline-flex; }
.acx-pill-word[b-q45d37drba] { font-weight: 700; }

.acx-pill--yes[b-q45d37drba] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.acx-pill--no[b-q45d37drba] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.acx-partial[b-q45d37drba] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8rem;
}

.acx-link[b-q45d37drba] {
    align-self: flex-start;
    font-size: 0.8125rem;
}

.acx-disclaimer[b-q45d37drba] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Access/CompareUsersPanel.razor.rz.scp.css */
/* UA6 (#831): compare two users. Tokens only (style guide §11). The three-column diff (only A /
   both / only B) collapses to one column on a narrow screen; every side is labelled in words. */

.cmp[b-o5uf1shb9e] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cmp-head[b-o5uf1shb9e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.cmp-title[b-o5uf1shb9e] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cmp-badge[b-o5uf1shb9e] {
    display: inline-flex;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 0.7rem;
    font-weight: 600;
}

.cmp-form[b-o5uf1shb9e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.85rem;
}

.cmp-field[b-o5uf1shb9e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 13rem;
    min-width: 13rem;
    max-width: 22rem;
}

.cmp-label[b-o5uf1shb9e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cmp-picked[b-o5uf1shb9e],
.cmp-muted[b-o5uf1shb9e],
.cmp-hint[b-o5uf1shb9e] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.cmp-status[b-o5uf1shb9e] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
}

.cmp-status--warn[b-o5uf1shb9e] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.cmp-result[b-o5uf1shb9e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cmp-sides[b-o5uf1shb9e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cmp-side[b-o5uf1shb9e] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
}

.cmp-side-tag[b-o5uf1shb9e] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.cmp-side-name[b-o5uf1shb9e] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.cmp-side-sub[b-o5uf1shb9e] {
    font-size: 0.78rem;
}

.cmp-section[b-o5uf1shb9e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cmp-h3[b-o5uf1shb9e] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cmp-columns[b-o5uf1shb9e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 900px) {
    .cmp-columns[b-o5uf1shb9e],
    .cmp-sides[b-o5uf1shb9e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cmp-col[b-o5uf1shb9e] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-top-width: 3px;
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
    min-width: 0;
}

.cmp-col--a[b-o5uf1shb9e] { border-top-color: var(--status-info-border); }
.cmp-col--both[b-o5uf1shb9e] { border-top-color: var(--status-neutral-border); }
.cmp-col--b[b-o5uf1shb9e] { border-top-color: var(--status-warning-border); }

.cmp-col-head[b-o5uf1shb9e] {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.cmp-count[b-o5uf1shb9e] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.cmp-list[b-o5uf1shb9e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cmp-list li[b-o5uf1shb9e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.4rem;
    overflow-wrap: anywhere;
}

.cmp-via[b-o5uf1shb9e] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.cmp-table[b-o5uf1shb9e] {
    width: 100%;
    max-width: 44rem;
    border-collapse: collapse;
}

.cmp-table th[b-o5uf1shb9e],
.cmp-table td[b-o5uf1shb9e] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    color: var(--color-text-primary);
}

.cmp-table thead th[b-o5uf1shb9e] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.cmp-differs th[b-o5uf1shb9e],
.cmp-differs td[b-o5uf1shb9e] {
    background: var(--status-warning-bg);
}

.cmp-pill[b-o5uf1shb9e] {
    display: inline-flex;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.75rem;
    font-weight: 700;
}

.cmp-pill--yes[b-o5uf1shb9e] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.cmp-pill--no[b-o5uf1shb9e] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.cmp-plan[b-o5uf1shb9e] {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
}

.cmp-plan p[b-o5uf1shb9e] {
    margin: 0;
}

.cmp-make-like[b-o5uf1shb9e] {
    align-self: flex-start;
}

.cmp-disclaimer[b-o5uf1shb9e] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Access/GlobalRoleHoldersTab.razor.rz.scp.css */
/* UA7 (#832): the global role Holders tab. */

.grh-title[b-5lfaml5ifl] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.grh-lead[b-5lfaml5ifl] {
    margin: 0 0 0.875rem;
    max-width: 48rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.grh-status[b-5lfaml5ifl],
.grh-muted[b-5lfaml5ifl] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.grh-health[b-5lfaml5ifl] {
    margin: 0 0 1rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.85rem;
}

.grh-health--ok[b-5lfaml5ifl] {
    border-color: color-mix(in srgb, var(--color-healthy) 35%, var(--color-surface));
    background: color-mix(in srgb, var(--color-healthy) 7%, var(--color-surface));
}

.grh-health--warn[b-5lfaml5ifl] {
    border-color: color-mix(in srgb, var(--color-degraded) 40%, var(--color-surface));
    background: color-mix(in srgb, var(--color-degraded) 9%, var(--color-surface));
}

.grh-partial[b-5lfaml5ifl] {
    margin: 0 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.grh-block[b-5lfaml5ifl] {
    margin: 0 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.grh-block-head[b-5lfaml5ifl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.grh-block-title[b-5lfaml5ifl] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.grh-resolve-btn[b-5lfaml5ifl] {
    flex: none;
    font-size: 0.8rem;
}

.grh-table[b-5lfaml5ifl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.grh-table th[b-5lfaml5ifl],
.grh-table td[b-5lfaml5ifl] {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.grh-table thead th[b-5lfaml5ifl] {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.grh-table tbody tr:last-child th[b-5lfaml5ifl],
.grh-table tbody tr:last-child td[b-5lfaml5ifl] {
    border-bottom: none;
}

.grh-role[b-5lfaml5ifl] {
    font-weight: 500;
}

.grh-role a[b-5lfaml5ifl] {
    color: var(--color-brand);
}

.grh-num[b-5lfaml5ifl] {
    width: 7rem;
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.grh-special[b-5lfaml5ifl] {
    display: block;
}

.grh-sub[b-5lfaml5ifl] {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
}

.grh-guid[b-5lfaml5ifl] {
    font-size: 0.78rem;
}

.grh-ok[b-5lfaml5ifl] {
    color: var(--color-text-secondary);
}

.grh-issues[b-5lfaml5ifl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grh-issue[b-5lfaml5ifl] {
    padding: 0.08rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, var(--color-surface));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    font-size: 0.75rem;
    cursor: help;
}

.grh-actions[b-5lfaml5ifl] {
    width: 6rem;
    text-align: right !important;
}

.grh-drill[b-5lfaml5ifl] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font: inherit;
    cursor: pointer;
}

.grh-drill:hover[b-5lfaml5ifl] {
    text-decoration: underline;
}

.grh-drill:focus-visible[b-5lfaml5ifl] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.grh-delete-note[b-5lfaml5ifl] {
    margin: 1rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.grh-drawer-link[b-5lfaml5ifl] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
}

.grh-drawer-link a[b-5lfaml5ifl] {
    color: var(--color-brand);
}
/* /Components/Features/Access/GlobalRoleResolverTab.razor.rz.scp.css */
/* UA7 (#832): the global role Resolve tab — "who would be assigned at location X". */

.grr-title[b-2gu7srad30] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.grr-lead[b-2gu7srad30] {
    margin: 0 0 1rem;
    max-width: 52rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.grr-computed[b-2gu7srad30] {
    display: inline-block;
    padding: 0 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: 600;
}

.grr-layout[b-2gu7srad30] {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .grr-layout[b-2gu7srad30] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.grr-picker[b-2gu7srad30] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.grr-tree-wrap[b-2gu7srad30] {
    max-height: 26rem;
    overflow: auto;
}

.grr-tree[b-2gu7srad30] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.grr-matches[b-2gu7srad30] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grr-match[b-2gu7srad30] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.6);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.grr-match:hover[b-2gu7srad30] {
    background: var(--color-surface-raised);
}

.grr-match--on[b-2gu7srad30] {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
}

.grr-has-rows[b-2gu7srad30] {
    flex: none;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface));
    color: var(--color-brand);
    font-size: 0.7rem;
    font-weight: 600;
}

.grr-status[b-2gu7srad30],
.grr-empty[b-2gu7srad30] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.grr-at[b-2gu7srad30] {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.grr-partial[b-2gu7srad30],
.grr-note[b-2gu7srad30] {
    margin: 0 0 0.6rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

.grr-none[b-2gu7srad30] {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.grr-none p[b-2gu7srad30] {
    margin: 0;
}

.grr-hint[b-2gu7srad30] {
    margin-top: 0.5rem !important;
    color: var(--color-text-secondary);
}

.grr-inline[b-2gu7srad30] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.grr-roles[b-2gu7srad30] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.grr-role[b-2gu7srad30] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    font-size: 0.85rem;
}

.grr-role-name[b-2gu7srad30] {
    font-weight: 600;
}

.grr-role-count[b-2gu7srad30] {
    color: var(--color-text-secondary);
}

.grr-issue[b-2gu7srad30] {
    padding: 0.05rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, var(--color-surface));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    font-size: 0.72rem;
    cursor: help;
}

.grr-members-head[b-2gu7srad30] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
}

.grr-totals[b-2gu7srad30] {
    margin: 0;
    font-size: 0.85rem;
}

.grr-totals span[b-2gu7srad30] {
    color: var(--color-text-secondary);
}

.grr-q[b-2gu7srad30] {
    width: min(22rem, 100%);
}

.grr-user[b-2gu7srad30] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.grr-via[b-2gu7srad30] {
    font-size: 0.82rem;
}
/* /Components/Features/Access/RoleGlobalRolesTab.razor.rz.scp.css */
/* UA3 (#828): the role Global roles tab. */

.rgr-title[b-ckintsm7kh] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.rgr-lead[b-ckintsm7kh] {
    margin: 0 0 0.875rem;
    max-width: 44rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rgr-status[b-ckintsm7kh],
.rgr-empty[b-ckintsm7kh] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.rgr-partial[b-ckintsm7kh] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    font-size: 0.8rem;
}

.rgr-list[b-ckintsm7kh] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rgr-item[b-ckintsm7kh] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.rgr-head[b-ckintsm7kh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.rgr-name[b-ckintsm7kh] {
    font-weight: 600;
}

.rgr-count[b-ckintsm7kh] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.rgr-desc[b-ckintsm7kh] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rgr-locations[b-ckintsm7kh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.rgr-location[b-ckintsm7kh] {
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
}

.rgr-location--unknown[b-ckintsm7kh] {
    border-style: dashed;
    border-color: var(--color-degraded);
    color: var(--color-text-secondary);
}

.rgr a[b-ckintsm7kh] {
    color: var(--color-brand);
}
/* /Components/Features/Access/RoleGrantsTab.razor.rz.scp.css */
/* UA3 (#828): the role Grants tab. */

.rgt[b-205dthfjae] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rgt-lead[b-205dthfjae] {
    margin: 0;
    max-width: 44rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}
/* /Components/Features/Access/RoleMembersTab.razor.rz.scp.css */
/* UA3 (#828): the role's paged Members tab. Form and table vocabulary come from app.css. */

.rmt[b-lx01b5zjsi] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.rmt-toolbar[b-lx01b5zjsi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
}

.rmt-search[b-lx01b5zjsi] {
    flex: 1 1 18rem;
    max-width: 28rem;
}

.rmt-status[b-lx01b5zjsi] {
    display: inline-flex;
    gap: 0.25rem;
}

.rmt-pill[b-lx01b5zjsi] {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.rmt-pill:hover[b-lx01b5zjsi] {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.rmt-pill--on[b-lx01b5zjsi] {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
    color: var(--color-brand);
    font-weight: 600;
}

.rmt-totals[b-lx01b5zjsi] {
    margin: 0 0 0 auto;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.rmt-selection[b-lx01b5zjsi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    font-size: 0.85rem;
}

.rmt-name[b-lx01b5zjsi] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.rmt-name:hover .rmt-name-text[b-lx01b5zjsi],
.rmt-name:focus-visible .rmt-name-text[b-lx01b5zjsi] {
    color: var(--color-brand);
    text-decoration: underline;
}

.rmt-name-text[b-lx01b5zjsi] {
    font-weight: 600;
}

.rmt-user[b-lx01b5zjsi] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.rmt-email[b-lx01b5zjsi],
.rmt-when[b-lx01b5zjsi] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rmt-badges[b-lx01b5zjsi] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rmt-edit[b-lx01b5zjsi] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.rmt-add[b-lx01b5zjsi] {
    max-width: 32rem;
}

.rmt-pending[b-lx01b5zjsi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.rmt-pending-title[b-lx01b5zjsi] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.rmt-pending-label[b-lx01b5zjsi] {
    margin: 0.25rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rmt-chips[b-lx01b5zjsi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rmt-chip[b-lx01b5zjsi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem 0.15rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.8rem;
}

.rmt-chip--add[b-lx01b5zjsi] {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, var(--color-border));
}

.rmt-chip--remove[b-lx01b5zjsi] {
    border-color: color-mix(in srgb, var(--color-down) 45%, var(--color-border));
}

.rmt-chip-x[b-lx01b5zjsi] {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.rmt-chip-x:hover:not(:disabled)[b-lx01b5zjsi] {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.rmt-actions[b-lx01b5zjsi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rmt-hint[b-lx01b5zjsi] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.rmt-confirm[b-lx01b5zjsi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 7%, var(--color-surface));
}

.rmt-confirm-title[b-lx01b5zjsi] {
    margin: 0;
    font-weight: 600;
}

.rmt-confirm-line[b-lx01b5zjsi],
.rmt-confirm-note[b-lx01b5zjsi],
.rmt-confirm-warning[b-lx01b5zjsi] {
    margin: 0;
    font-size: 0.85rem;
}

.rmt-confirm-note[b-lx01b5zjsi] {
    color: var(--color-text-secondary);
}

.rmt-confirm-warning[b-lx01b5zjsi] {
    color: var(--color-text-primary);
}

/* ── UA4 (#829): safety rails ───────────────────────────────────────────── */

.rmt-guard[b-lx01b5zjsi] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-down);
    border-radius: 6px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.rmt-typed[b-lx01b5zjsi] {
    margin-top: 0.5rem;
}
/* /Components/Features/Access/RoleOverviewTab.razor.rz.scp.css */
/* UA3 (#828): the role Overview tab. */

.rov[b-7rnrxpe8f7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rov-partial[b-7rnrxpe8f7] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    font-size: 0.8rem;
}

.rov-grid[b-7rnrxpe8f7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.rov-card[b-7rnrxpe8f7] {
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.rov-card-title[b-7rnrxpe8f7] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rov-facts[b-7rnrxpe8f7] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.rov-facts dt[b-7rnrxpe8f7] {
    color: var(--color-text-secondary);
}

.rov-facts dd[b-7rnrxpe8f7] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rov-muted[b-7rnrxpe8f7] {
    color: var(--color-text-secondary);
}

.rov-usedby[b-7rnrxpe8f7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.rov-kind[b-7rnrxpe8f7] {
    display: inline-block;
    min-width: 7.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.rov a[b-7rnrxpe8f7] {
    color: var(--color-brand);
}
/* /Components/Features/Access/RoleTaskManagersTab.razor.rz.scp.css */
/* UA3 (#828): the role Task managers tab. */

.rtm-title[b-l50oe8avvj] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.rtm-lead[b-l50oe8avvj] {
    margin: 0 0 0.875rem;
    max-width: 44rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rtm-status[b-l50oe8avvj] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.rtm-refresh[b-l50oe8avvj] {
    margin: 0 0 0.875rem;
}
/* /Components/Features/Access/SodCallout.razor.rz.scp.css */
/* GOV1 (#956): the separation-of-duties callout — the §3.4 warning pair, an error pair for Block. */
.sodc[b-mhffufw4g8] {
    margin: 0.6rem 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid #FDE68A;
    border-left: 3px solid var(--color-degraded);
    border-radius: var(--radius);
    background: #FFFBEB;
    color: #78350F;
}

.sodc--block[b-mhffufw4g8] {
    border-color: #FCA5A5;
    border-left-color: var(--color-down);
    background: #FEF2F2;
    color: #991B1B;
}

.sodc-title[b-mhffufw4g8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.sodc-icon[b-mhffufw4g8] {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.sodc-list[b-mhffufw4g8] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
}

.sodc-item + .sodc-item[b-mhffufw4g8] {
    margin-top: 0.25rem;
}

.sodc-item--unchecked[b-mhffufw4g8] {
    color: var(--color-text-secondary);
}

.sodc-foot[b-mhffufw4g8] {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
}

.sodc-foot a[b-mhffufw4g8] {
    color: inherit;
    font-weight: 600;
}
/* /Components/Features/Access/SodRuleEditor.razor.rz.scp.css */
/* GOV1 (#956): the separation-of-duties rule editor. */
.sre[b-ozvj8ny4zp] {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.sre-title[b-ozvj8ny4zp] {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.sre-desc[b-ozvj8ny4zp] {
    resize: vertical;
    min-height: 3.2rem;
}

.sre-fieldset[b-ozvj8ny4zp] {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sre-radio[b-ozvj8ny4zp] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.sre-radio-hint[b-ozvj8ny4zp] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.sre-chips[b-ozvj8ny4zp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.sre-chip[b-ozvj8ny4zp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem 0.2rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
}

.sre-chip-x[b-ozvj8ny4zp] {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.sre-chip-x:hover[b-ozvj8ny4zp],
.sre-chip-x:focus-visible[b-ozvj8ny4zp] {
    opacity: 1;
    color: var(--color-text-primary);
}

.sre-problems[b-ozvj8ny4zp] {
    margin: 0.75rem 0 0;
    padding-left: 1.5rem;
}

.sre-actions[b-ozvj8ny4zp] {
    margin-top: 1rem;
}
/* /Components/Features/Access/UserBulkConsole.razor.rz.scp.css */
/* UA5 (#830) — the bulk console under the users directory's selection bar. */

.ubc-muted[b-gyww8i9whe] {
    margin: 0.25rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ubc-extra[b-gyww8i9whe] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ubc-subject[b-gyww8i9whe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.ubc-subject-label[b-gyww8i9whe] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.ubc-chip[b-gyww8i9whe] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ubc-chip--danger[b-gyww8i9whe] {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.ubc-link-btn[b-gyww8i9whe] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}

.ubc-link-btn:disabled[b-gyww8i9whe] {
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.ubc-seats-label[b-gyww8i9whe] {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ubc-issues[b-gyww8i9whe] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
}

.ubc-issues--error[b-gyww8i9whe] {
    color: var(--status-error-fg);
}

.ubc-issues--warn[b-gyww8i9whe] {
    color: var(--status-warning-fg);
}

/* The global .form-input is content-box: at width 100% its padding pushes it past the dialog. */
.ubc-extra .form-input[b-gyww8i9whe] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
/* /Components/Features/AccessEvidence/EvidenceChangesTable.razor.rz.scp.css */
/* GOV5 (#960): a staff-changes table in the access evidence pack. */
.ept-wrap[b-h2b5a3bpcz] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ept[b-h2b5a3bpcz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ept th[b-h2b5a3bpcz] {
    padding: 0.5rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.ept td[b-h2b5a3bpcz] {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.ept tbody tr:last-child td[b-h2b5a3bpcz] {
    border-bottom: none;
}

.ect-target[b-h2b5a3bpcz],
.ect-note[b-h2b5a3bpcz] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ect-none[b-h2b5a3bpcz] {
    color: var(--color-text-secondary);
}

.ect-more[b-h2b5a3bpcz] {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

@media print {
    .ept-wrap[b-h2b5a3bpcz] {
        overflow: visible;
        border-color: #cbd5e1;
    }

    .ept th[b-h2b5a3bpcz] {
        background: #ffffff;
    }

    .ept tr[b-h2b5a3bpcz] {
        break-inside: avoid;
    }
}
/* /Components/Features/AccessEvidence/EvidencePeopleTable.razor.rz.scp.css */
/* GOV5 (#960): a list of people in the access evidence pack. */
.ept-wrap[b-0ogpdi0msd] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ept[b-0ogpdi0msd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ept th[b-0ogpdi0msd] {
    padding: 0.5rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.ept td[b-0ogpdi0msd] {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.ept tbody tr:last-child td[b-0ogpdi0msd] {
    border-bottom: none;
}

.ept-mono[b-0ogpdi0msd] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.75rem;
}

.ept-status[b-0ogpdi0msd] {
    font-weight: 600;
}

.ept-status--off[b-0ogpdi0msd] {
    color: #991b1b;
}

.ept-status--locked[b-0ogpdi0msd] {
    color: #92400e;
}

.ept-empty[b-0ogpdi0msd],
.ept-more[b-0ogpdi0msd] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ept-more[b-0ogpdi0msd] {
    margin-top: 0.4rem;
}

@media print {
    .ept-wrap[b-0ogpdi0msd] {
        overflow: visible;
        border-color: #cbd5e1;
    }

    .ept th[b-0ogpdi0msd] {
        background: #ffffff;
    }

    .ept tr[b-0ogpdi0msd] {
        break-inside: avoid;
    }
}
/* /Components/Features/AccessEvidence/EvidenceStateNote.razor.rz.scp.css */
.esn[b-brdlb8df9g] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.esn--missing[b-brdlb8df9g] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    background: #FFFBEB;
    color: #78350F;
}

@media print {
    .esn--missing[b-brdlb8df9g] {
        background: #ffffff;
        border-color: #cbd5e1;
        color: #000000;
    }
}
/* /Components/Features/AccessOverview/AccessAttentionList.razor.rz.scp.css */
.aal[b-kinfcje0yz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.aal-row[b-kinfcje0yz] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    border-left: 3px solid transparent;
}

.aal-row:first-child[b-kinfcje0yz] {
    border-top: none;
}

.aal-row--act.aal-sev--high[b-kinfcje0yz] { border-left-color: var(--color-down); }
.aal-row--act.aal-sev--medium[b-kinfcje0yz] { border-left-color: var(--color-degraded); }
.aal-row--act.aal-sev--low[b-kinfcje0yz] { border-left-color: var(--color-brand-teal); }

.aal-head[b-kinfcje0yz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aal-sev[b-kinfcje0yz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 5.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.aal-row--act.aal-sev--high .aal-sev[b-kinfcje0yz] { color: var(--color-down); }
.aal-row--act.aal-sev--medium .aal-sev[b-kinfcje0yz] { color: #b45309; }
.aal-sev--clear[b-kinfcje0yz] { color: #15803d; }

.aal-title[b-kinfcje0yz] {
    margin: 0;
    flex: 1 1 12rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.aal-row--clear .aal-title[b-kinfcje0yz] {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.aal-count[b-kinfcje0yz] {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
    color: var(--color-text-primary);
}

.aal-row--clear .aal-count[b-kinfcje0yz],
.aal-row--unknown .aal-count[b-kinfcje0yz] {
    color: var(--color-text-secondary);
}

.aal-link[b-kinfcje0yz] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-brand);
    white-space: nowrap;
}

.aal-why[b-kinfcje0yz],
.aal-note[b-kinfcje0yz] {
    margin: 0.25rem 0 0 6.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.aal-note[b-kinfcje0yz] {
    font-style: italic;
}

.aal-links[b-kinfcje0yz] {
    list-style: none;
    margin: 0.375rem 0 0 6.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.8125rem;
}

.aal-links a[b-kinfcje0yz] {
    color: var(--color-brand);
}

.aal-link-count[b-kinfcje0yz] {
    margin-left: 0.25rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.aal-more[b-kinfcje0yz] {
    color: var(--color-text-secondary);
}

@media (max-width: 720px) {
    .aal-why[b-kinfcje0yz],
    .aal-note[b-kinfcje0yz],
    .aal-links[b-kinfcje0yz] {
        margin-left: 0;
    }
}
/* /Components/Features/AccessOverview/AccessKpiTile.razor.rz.scp.css */
.akt[b-0pjpwc0ynf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-sizing: border-box;
    height: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-primary);
    text-decoration: none;
}

.akt--link:hover[b-0pjpwc0ynf],
.akt--link:focus-visible[b-0pjpwc0ynf] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.akt--link:focus-visible[b-0pjpwc0ynf] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.akt-label[b-0pjpwc0ynf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.akt-value[b-0pjpwc0ynf] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.akt--missing .akt-value[b-0pjpwc0ynf] {
    color: var(--color-text-secondary);
}

.akt-sub[b-0pjpwc0ynf],
.akt-note[b-0pjpwc0ynf] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/AccessOverview/AccountStatusDonut.razor.rz.scp.css */
.asd[b-0osas4tkn1] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.asd-caption[b-0osas4tkn1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.asd-empty[b-0osas4tkn1] {
    margin: 0;
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.asd-body[b-0osas4tkn1] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.asd-chart[b-0osas4tkn1] {
    width: 8rem;
    height: 8rem;
    flex: 0 0 auto;
}

.asd-track[b-0osas4tkn1] {
    fill: none;
    stroke: var(--color-surface-raised);
    stroke-width: 14;
}

.asd-seg[b-0osas4tkn1] {
    fill: none;
    stroke-width: 14;
}

.asd-total[b-0osas4tkn1] {
    font-size: 1.125rem;
    font-weight: 600;
    fill: var(--color-text-primary);
}

.asd-total-sub[b-0osas4tkn1] {
    font-size: 0.625rem;
    fill: var(--color-text-secondary);
}

.asd-legend[b-0osas4tkn1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.asd-legend li[b-0osas4tkn1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.asd-legend a[b-0osas4tkn1] {
    color: var(--color-brand);
}

.asd-count[b-0osas4tkn1] {
    margin-left: auto;
    padding-left: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.asd-swatch[b-0osas4tkn1] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
}

.asd-seg--active[b-0osas4tkn1] { stroke: var(--color-healthy); background: var(--color-healthy); }
.asd-seg--locked[b-0osas4tkn1] { stroke: var(--color-degraded); background: var(--color-degraded); }
.asd-seg--disabled[b-0osas4tkn1] { stroke: var(--color-unknown); background: var(--color-unknown); }
/* /Components/Features/AccessOverview/RecentAccessChanges.razor.rz.scp.css */
.rac-status[b-ge53rsnobz],
.rac-note[b-ge53rsnobz] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.rac-note[b-ge53rsnobz] {
    font-style: italic;
}

.rac-table[b-ge53rsnobz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.rac-table th[b-ge53rsnobz] {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.rac-table td[b-ge53rsnobz] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.rac-outcome[b-ge53rsnobz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.375rem;
    color: var(--color-down);
    font-size: 0.75rem;
}

.rac-more[b-ge53rsnobz] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-brand);
}
/* /Components/Features/AccessOverview/SignInHistogram.razor.rz.scp.css */
.sih[b-two2ymk17o] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sih-caption[b-two2ymk17o] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sih-empty[b-two2ymk17o] {
    margin: 0;
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.sih-chart[b-two2ymk17o] {
    display: block;
    width: 100%;
    height: 7rem;
}

.sih-base[b-two2ymk17o] {
    stroke: var(--color-border);
    stroke-width: 1;
}

.sih-bar[b-two2ymk17o] {
    fill: var(--color-brand-teal);
}

.sih-bar--stale[b-two2ymk17o] {
    fill: var(--color-brand);
}

.sih-bar:hover[b-two2ymk17o] {
    opacity: 0.8;
}

.sih-bins[b-two2ymk17o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.sih-bins li[b-two2ymk17o] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sih-count[b-two2ymk17o] {
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.sih-bins a[b-two2ymk17o] {
    color: var(--color-brand);
}
/* /Components/Features/Administration/AdminAreaShell.razor.rz.scp.css */
/*  The frame around every Administration page. Tokens only. */

.ad-shell[b-dgzb75pnqk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
}

.ad-header[b-dgzb75pnqk] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ad-header > div[b-dgzb75pnqk] {
    flex: 1;
    min-width: 0;
}

.ad-title[b-dgzb75pnqk] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ad-title--embedded[b-dgzb75pnqk] {
    font-size: 1.05rem;
}

.ad-status[b-dgzb75pnqk] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.ad-status--denied[b-dgzb75pnqk] {
    color: var(--color-down);
}

.ad-readonly[b-dgzb75pnqk] {
    align-self: center;
}

.ad-readonly-why[b-dgzb75pnqk] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Taxonomy TX0 (#800): subtitle + actions row under the shell heading. */
.ad-subhead[b-dgzb75pnqk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: -0.25rem;
}

.ad-subtitle[b-dgzb75pnqk] {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.ad-actions[b-dgzb75pnqk] {
    display: flex;
    flex: none;
    gap: 0.5rem;
}
/* /Components/Features/Administration/BulkImportDialog.razor.rz.scp.css */
.ubi-lede[b-lk6h36yjon] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ubi-template[b-lk6h36yjon] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.ubi-notice[b-lk6h36yjon] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 40%, var(--color-border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.8125rem;
}
/* /Components/Features/Administration/EntityVisibilityEditor.razor.rz.scp.css */
/*  Entity visibility rules on one object (category 3005) — generic across
    every object type that mounts this editor (E4, #366).

    Shares the shape TransferSecurityTab's sibling used deliberately: same
    head, same status line, same add-row, so a screen that composes both a
    security and a visibility panel does not read as two products. The one
    thing that is different is the word beside the Inclusive box — a polarity
    a tick cannot express on its own.

    Tokens only — no raw hex. */

.evis[b-3waqabqgb9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.evis-head[b-3waqabqgb9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.evis-title[b-3waqabqgb9] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.evis-pill[b-3waqabqgb9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.evis-note[b-3waqabqgb9] {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.evis-note--quiet[b-3waqabqgb9] {
    font-style: italic;
}

.evis-error[b-3waqabqgb9] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 40%, var(--color-border));
    border-left: 3px solid var(--color-down);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--color-down) 6%, var(--color-surface));
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.evis-status[b-3waqabqgb9] {
    margin: 0.6rem 0 0;
    min-height: 1.1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ── Rules ──────────────────────────────────────────────────────────────── */

.evis-entity[b-3waqabqgb9] {
    font-weight: 500;
    color: var(--color-text-primary);
}

/*  The entity picker sits in a row-header cell, so it is deliberately quieter
    than a form field: no heavy border until it is hovered or focused, and the
    weight of the text is the row's name weight rather than an input's. */
.evis-entity-select[b-3waqabqgb9] {
    width: 100%;
    min-width: 8rem;
    max-width: 16rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
}

/*  ::deep — DataTable renders the cells, so a column's CssClass does not carry
    this component's scope. */
[b-3waqabqgb9] .evis-cell-flag {
    width: 7rem;
    white-space: nowrap;
}

[b-3waqabqgb9] .evis-cell-remove {
    width: 2.5rem;
}

.evis-flag[b-3waqabqgb9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/*  The rule in words. "Inclusive, ticked" is not self-explanatory; "Included"
    is, and it keeps the meaning off colour and off the tick alone. */
.evis-flag-word[b-3waqabqgb9] {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
}

.evis-check[b-3waqabqgb9] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.evis-check:disabled[b-3waqabqgb9] {
    cursor: default;
    opacity: 0.55;
}

.evis-check:focus-visible[b-3waqabqgb9] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.evis-remove[b-3waqabqgb9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.evis-remove:hover:not(:disabled)[b-3waqabqgb9] {
    border-color: color-mix(in srgb, var(--color-down) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down);
}

.evis-remove:focus-visible[b-3waqabqgb9] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.evis-remove:disabled[b-3waqabqgb9] {
    cursor: default;
    opacity: 0.5;
}

/* ── Add an entity ──────────────────────────────────────────────────────── */

.evis-add[b-3waqabqgb9] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.evis-add-row[b-3waqabqgb9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.evis-add-select[b-3waqabqgb9] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 26rem;
}

.evis-add-btn[b-3waqabqgb9] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
/* /Components/Features/Administration/GlobalRoleEditor.razor.rz.scp.css */
/* Global role create / rename editor (G1, #361) */

.gre-status[b-v801z7bnnf] {
    padding: 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.gre-form[b-v801z7bnnf] {
    margin-top: 0.5rem;
}

.gre-textarea[b-v801z7bnnf] {
    resize: vertical;
    min-height: 4.5rem;
}

.gre-danger[b-v801z7bnnf] {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-down, #f1a9a9);
    border-radius: 10px;
    background: var(--color-surface-raised);
}

.gre-danger-title[b-v801z7bnnf] {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gre-danger-lede[b-v801z7bnnf] {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Administration/GlobalRoleExpansionEditor.razor.rz.scp.css */
/*  Expansion editor (G2, #362, part of epic AD4 #328). Row cards mirror the
    Families rule editor's card shape (fam-linkbtn for the per-row tools);
    the drawer and review dialog reuse the shared Drawer/ConfirmDialog kit,
    so only the parts unique to this editor need their own rules here. */

.gre-status[b-grxmxvhen8] {
    padding: 1rem 0;
    color: var(--color-text-secondary);
}

.gxe-empty[b-grxmxvhen8] {
    color: var(--color-text-secondary);
    padding: 0.5rem 0 1rem;
}

.gxe-list[b-grxmxvhen8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gxe-row[b-grxmxvhen8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    flex-wrap: wrap;
}

.gxe-row--error[b-grxmxvhen8] {
    border-color: var(--color-danger, #dc2626);
}

.gxe-row-body[b-grxmxvhen8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-width: 0;
}

.gxe-row-location[b-grxmxvhen8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.gxe-loc-name[b-grxmxvhen8] {
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.gxe-loc-path[b-grxmxvhen8] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28rem;
}

.gxe-row-tools[b-grxmxvhen8] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.gxe-row-error[b-grxmxvhen8] {
    flex-basis: 100%;
    margin: 0.25rem 0 0;
}

.gxe-add-row[b-grxmxvhen8] {
    margin-top: 0.75rem;
}

/* ── Drawer body ──────────────────────────────────────────────────────── */

.gxe-drawer[b-grxmxvhen8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gxe-drawer-chosen[b-grxmxvhen8] {
    margin: 0.35rem 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.gxe-drawer-tree[b-grxmxvhen8] {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
}

/* ── Review dialog content ────────────────────────────────────────────── */

.gxe-review-stats[b-grxmxvhen8] {
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.gxe-review-section[b-grxmxvhen8] {
    margin: 0 0 0.85rem;
}

.gxe-review-section h4[b-grxmxvhen8] {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.gxe-review-section--danger h4[b-grxmxvhen8] {
    color: var(--color-danger, #dc2626);
}

.gxe-review-section ul[b-grxmxvhen8] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gxe-review-names[b-grxmxvhen8] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}
/* /Components/Features/Administration/RoleEditor.razor.rz.scp.css */
/* Role create / property editor (R1, #357) */

.rle-status[b-ell416szdz] {
    padding: 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.rle-back-link[b-ell416szdz] {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}

.rle-back-link:hover[b-ell416szdz] {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.rle-form[b-ell416szdz] {
    margin-top: 0.5rem;
}

.rle-fact[b-ell416szdz] {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: var(--color-surface-raised);
    font-size: 0.875rem;
}

.rle-danger[b-ell416szdz] {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-down, #f1a9a9);
    border-radius: 10px;
    background: var(--color-surface-raised);
}

.rle-conflicts[b-ell416szdz] {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.rle-conflicts li + li[b-ell416szdz] {
    margin-top: 0.35rem;
}

.rle-conflict-line[b-ell416szdz] {
    display: block;
    color: var(--color-text-secondary);
}
/* /Components/Features/Administration/RoleGrantPanel.razor.rz.scp.css */
/*  One role's own grants on document types or containers — R3, #359. The mirror of
    SecurityGrantMatrix.razor.css (D2, #368 / C2, #380): same six narrow flag columns, same
    add-row and status-line shapes, just one DataTable per instance instead of two (Roles/Users),
    because this panel already scopes to one kind of object per mount.

    Tokens only — no raw hex. */

.rgp[b-as07gyhwld] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* .form-section supplies the card and the title band only; content pads itself (as .form-grid does). */
.rgp-body[b-as07gyhwld] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1.25rem 1.25rem;
}

.rgp-readonly[b-as07gyhwld] {
    align-self: flex-start;
    margin-bottom: 0.35rem;
}

[b-as07gyhwld] .rgp-cell-flag {
    width: 3.4rem;
    white-space: nowrap;
}

[b-as07gyhwld] .rgp-cell-remove {
    width: 2.5rem;
}

.rgp-check[b-as07gyhwld] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.rgp-check:disabled[b-as07gyhwld] {
    cursor: default;
    opacity: 0.55;
}

.rgp-check:focus-visible[b-as07gyhwld] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.rgp-remove[b-as07gyhwld] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.rgp-remove:hover:not(:disabled)[b-as07gyhwld] {
    border-color: color-mix(in srgb, var(--color-down) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down);
}

.rgp-remove:focus-visible[b-as07gyhwld] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.rgp-remove:disabled[b-as07gyhwld] {
    cursor: default;
    opacity: 0.5;
}

/* ── Add a document type or a container ────────────────────────────────── */

.rgp-add[b-as07gyhwld] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.rgp-add-row[b-as07gyhwld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rgp-add-select[b-as07gyhwld] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 26rem;
}

.rgp-add-btn[b-as07gyhwld] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.rgp-status[b-as07gyhwld] {
    margin: 0.6rem 0 0;
    min-height: 1.1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Administration/SecurityGrantMatrix.razor.rz.scp.css */
/*  The generic 4200/4201/4202 security-grant matrix — D2, #368. Reused unmodified by C2
    (#380, containers).

    Deliberately the same shape as EntityVisibilityEditor.razor.css (head, note, status line,
    add-row) so a page composing a Security section alongside a Visibility one does not read as
    two products — the difference here is two DataTable sections (Roles, Users) instead of one,
    and six narrow flag columns instead of two wider ones.

    Tokens only — no raw hex. */

.sgm[b-gakpg8a68z] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sgm-head[b-gakpg8a68z] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sgm-title[b-gakpg8a68z] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sgm-pill[b-gakpg8a68z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.sgm-note[b-gakpg8a68z] {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.sgm-note--quiet[b-gakpg8a68z] {
    font-style: italic;
}

.sgm-error[b-gakpg8a68z] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 40%, var(--color-border));
    border-left: 3px solid var(--color-down);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--color-down) 6%, var(--color-surface));
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.sgm-status[b-gakpg8a68z] {
    margin: 0.6rem 0 0;
    min-height: 1.1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.sgm-section[b-gakpg8a68z] {
    margin-top: 0.6rem;
}

.sgm-section-title[b-gakpg8a68z] {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sgm-principal[b-gakpg8a68z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.sgm-principal-dangling[b-gakpg8a68z] {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-down);
}

/*  ::deep — DataTable renders the cells, so a column's CssClass does not carry this
    component's scope. Six flag columns need to be narrower than EntityVisibilityEditor's two
    wider ones or the table overflows a normal editor width. */
[b-gakpg8a68z] .sgm-cell-flag {
    width: 3.4rem;
    white-space: nowrap;
}

[b-gakpg8a68z] .sgm-cell-remove {
    width: 2.5rem;
}

.sgm-check[b-gakpg8a68z] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.sgm-check:disabled[b-gakpg8a68z] {
    cursor: default;
    opacity: 0.55;
}

.sgm-check:focus-visible[b-gakpg8a68z] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.sgm-remove[b-gakpg8a68z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.sgm-remove:hover:not(:disabled)[b-gakpg8a68z] {
    border-color: color-mix(in srgb, var(--color-down) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down);
}

.sgm-remove:focus-visible[b-gakpg8a68z] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.sgm-remove:disabled[b-gakpg8a68z] {
    cursor: default;
    opacity: 0.5;
}

/* ── Add a role or a user ──────────────────────────────────────────────── */

.sgm-add[b-gakpg8a68z] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.sgm-add-row[b-gakpg8a68z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.sgm-add-btn[b-gakpg8a68z] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* UA0 (#825): the role picker and the user typeahead side by side. */
.sgm-add-grid[b-gakpg8a68z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.sgm-add-col[b-gakpg8a68z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sgm-add-chosen[b-gakpg8a68z] {
    margin: 0;
    flex: 1;
    color: var(--color-text-secondary);
}
/* /Components/Features/Administration/TaskManagerGrantsTable.razor.rz.scp.css */
/*  Shared 4203 task-manager grant table (D3 #369 / R4 #360). Table look and feel matches
    DocumentTypeWorkflowSection.razor.css's dtwf-table rules — copied rather than shared, per that
    file's own remark: Blazor's CSS isolation scopes each .razor.css to its own component and a
    cross-component class reference would silently do nothing. */

.tmg-muted[b-nccblntkm6] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.tmg-muted-mono[b-nccblntkm6] {
    margin-left: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.tmg-flow-name[b-nccblntkm6] {
    font-weight: 500;
}

.tmg-table-scroll[b-nccblntkm6] {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.tmg-table[b-nccblntkm6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.tmg-table thead th[b-nccblntkm6] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    z-index: 1;
}

.tmg-table tbody td[b-nccblntkm6] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.tmg-table tbody tr:last-child td[b-nccblntkm6] {
    border-bottom: none;
}

.tmg-table--clickable .tmg-row[b-nccblntkm6] {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.tmg-table--clickable .tmg-row:hover[b-nccblntkm6],
.tmg-table--clickable .tmg-row:focus-visible[b-nccblntkm6] {
    background: var(--color-surface-raised);
    outline: none;
}

.tmg-table--clickable .tmg-row:focus-visible[b-nccblntkm6] {
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

.tmg-th-actions[b-nccblntkm6] {
    width: 1.5rem;
}

.tmg-chevron[b-nccblntkm6] {
    color: var(--color-text-secondary);
    text-align: right;
    width: 1.5rem;
    padding-right: 0.75rem !important;
}

.tmg-table--clickable .tmg-row:hover .tmg-chevron[b-nccblntkm6] {
    color: var(--color-brand);
}

.tmg-perm-table th:first-child[b-nccblntkm6],
.tmg-perm-table td:first-child[b-nccblntkm6] {
    width: 240px;
}

.tmg-perm-col[b-nccblntkm6] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.tmg-perm-icon[b-nccblntkm6] {
    color: var(--color-text-secondary);
    opacity: 0.4;
    vertical-align: middle;
}

.tmg-perm-icon--on[b-nccblntkm6] {
    color: #16a34a;
    opacity: 1;
}
/* /Components/Features/Administration/UserActivityCheckPanel.razor.rz.scp.css */
/* Activity check (GOV3, #958). Self-contained, scoped to this component. Paired status
   palettes from docs/docmx-style-guide.md §3.4. */

.uac[b-hc2oqz22he] {
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 0.5rem);
}

.uac-head[b-hc2oqz22he] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.uac-title[b-hc2oqz22he] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
}

.uac-lede[b-hc2oqz22he] {
    margin: 0.25rem 0 0;
    max-width: 44rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #64748b);
}

.uac-controls[b-hc2oqz22he] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.uac-label[b-hc2oqz22he] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
}

.uac-days[b-hc2oqz22he] {
    width: 4rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.uac-status[b-hc2oqz22he] {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #64748b);
}

.uac-result[b-hc2oqz22he] {
    margin-top: 0.75rem;
}

.uac-banner[b-hc2oqz22he] {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid;
    border-radius: var(--radius, 0.5rem);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.uac-result > .uac-banner:first-child[b-hc2oqz22he] {
    margin-top: 0;
}

.uac-banner--success[b-hc2oqz22he] { background: #f0fdf4; color: #166534; border-color: #86efac; }
.uac-banner--warning[b-hc2oqz22he] { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.uac-banner--error[b-hc2oqz22he]   { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.uac-banner--neutral[b-hc2oqz22he] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

.uac-facts[b-hc2oqz22he] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0.75rem 0 0;
}

.uac-facts dt[b-hc2oqz22he] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.uac-facts dd[b-hc2oqz22he] {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary, #0f172a);
}

.uac-num[b-hc2oqz22he] {
    font-variant-numeric: tabular-nums;
}

.uac-summary[b-hc2oqz22he] {
    margin: 0.875rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary, #64748b);
}

.uac-findings[b-hc2oqz22he] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uac-finding[b-hc2oqz22he] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.375rem;
    background: var(--color-surface-raised, #f8fafc);
}

.uac-finding-head[b-hc2oqz22he] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.uac-finding-title[b-hc2oqz22he] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #0f172a);
}

.uac-finding-detail[b-hc2oqz22he] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-primary, #0f172a);
}

.uac-badge[b-hc2oqz22he] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.uac-badge--info[b-hc2oqz22he]    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.uac-badge--warning[b-hc2oqz22he] { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.uac-badge--error[b-hc2oqz22he]   { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.uac-badge--neutral[b-hc2oqz22he] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

.uac-evidence[b-hc2oqz22he] {
    margin-top: 0.5rem;
}

.uac-evidence summary[b-hc2oqz22he] {
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--color-brand, #074684);
}

.uac-table[b-hc2oqz22he] {
    width: 100%;
    margin-top: 0.375rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
    background: var(--color-surface, #fff);
}

.uac-table th[b-hc2oqz22he] {
    text-align: left;
    padding: 0.375rem 0.625rem;
    background: var(--color-surface-raised, #f8fafc);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.uac-table td[b-hc2oqz22he] {
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    vertical-align: top;
}

.uac-when[b-hc2oqz22he] {
    white-space: nowrap;
    color: var(--color-text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

.uac-message[b-hc2oqz22he] {
    line-height: 1.5;
}
/* /Components/Features/Administration/UserActivityTab.razor.rz.scp.css */
/* Audit tab (U6, #356). Self-contained: Blazor CSS isolation scopes these
   rules to this component alone, so nothing here borrows Users.razor's own
   "um-*" classes — they would not match a child component's markup. */

.uat-toolbar[b-o4am4lvn56] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.uat-periods[b-o4am4lvn56] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.uat-period[b-o4am4lvn56] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.75rem;
    cursor: pointer;
}

.uat-period:hover:not(:disabled)[b-o4am4lvn56] {
    background: var(--color-surface-raised, #f8fafc);
}

.uat-period--active[b-o4am4lvn56] {
    border-color: var(--color-brand, #074684);
    background: var(--color-brand, #074684);
    color: #fff;
    font-weight: 600;
}

/* The hover rule above outranks .uat-period--active, so an active pill under the pointer kept
   white text on the pale hover background. Keep the active look on hover. */
.uat-period--active:hover:not(:disabled)[b-o4am4lvn56] {
    background: var(--color-brand, #074684);
}

.uat-period:disabled[b-o4am4lvn56] {
    opacity: 0.5;
    cursor: default;
}

.uat-custom[b-o4am4lvn56] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 0.75rem;
    padding: 0.5rem 0.625rem;
    background: var(--color-surface-raised, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.375rem;
}

.uat-custom-label[b-o4am4lvn56] {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748b);
}

.uat-custom-input[b-o4am4lvn56] {
    width: 4.5rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}


.uat-status[b-o4am4lvn56] {
    padding: 1rem 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875rem;
    margin: 0;
}

.uat-empty[b-o4am4lvn56] {
    padding: 0.75rem 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.8125rem;
    margin: 0;
}

.uat-table[b-o4am4lvn56] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.uat-table th[b-o4am4lvn56] {
    text-align: left;
    padding: 0.375rem 0.625rem 0.375rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.uat-table td[b-o4am4lvn56] {
    padding: 0.4375rem 0.625rem 0.4375rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    vertical-align: top;
}

/* The date is the column people scan, so it never wraps. */
.uat-date[b-o4am4lvn56] {
    white-space: nowrap;
    color: var(--color-text-secondary, #64748b);
}

.uat-message[b-o4am4lvn56] {
    line-height: 1.5;
    color: var(--color-text-primary, #0f172a);
}

.uat-count[b-o4am4lvn56],
.uat-hint[b-o4am4lvn56] {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-text-secondary, #94a3b8);
    font-size: 0.75rem;
}

/* On-demand search (2026-10-05). */
.uat-search[b-o4am4lvn56] {
    flex: none;
}

.uat-stale[b-o4am4lvn56] {
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--color-surface-muted, #eef2f6);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* /Components/Features/Administration/UserCredentialsPanel.razor.rz.scp.css */
/* One user's credentials (U2, #352). Form vocabulary comes from app.css; only what
   is particular to this panel lives here. */

.ucp-fact[b-wm064r2ykc] {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #64748b);
    font-size: 0.8125rem;
}

.ucp-password-row[b-wm064r2ykc] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.ucp-password-row .form-input[b-wm064r2ykc] {
    flex: 1 1 auto;
    min-width: 0;
    /* A password is read character by character when it is checked against a
       note or read aloud, and a proportional face makes that harder than it
       needs to be. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ucp-btn[b-wm064r2ykc] {
    flex: 0 0 auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* The one place a password is ever displayed. Deliberately loud: this is the
   only moment it exists outside the operator's head, and a quiet treatment
   would invite scrolling past it. */
.ucp-generated[b-wm064r2ykc] {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--warn-border, #fcd34d);
    border-radius: 6px;
    background: var(--warn-surface, #fffbeb);
}

.ucp-generated-label[b-wm064r2ykc] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--warn-text, #92400e);
}

.ucp-generated-value[b-wm064r2ykc] {
    display: block;
    padding: 0.5rem 0.625rem;
    border-radius: 4px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    /* Selectable in one gesture, and never wrapped mid-token. */
    user-select: all;
    word-break: break-all;
}

.ucp-generated-done[b-wm064r2ykc] {
    margin-top: 0.625rem;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
}

.ucp-actions[b-wm064r2ykc] {
    margin-top: 0.5rem;
}

/* The two affordances that exist to explain an upstream gap rather than to be
   used. Separated by a rule so they read as their own statement. */
.ucp-force[b-wm064r2ykc],
.ucp-reset[b-wm064r2ykc] {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

/* Confirmation, in place. Not a ConfirmDialog: this panel lives inside a Drawer
   whose panel carries a transform, which makes it the containing block for
   position:fixed descendants — a modal nested here would size against the
   drawer, not the viewport, and the drawer's overflow:hidden would clip it.
   Confirming beside the field is also simply better here. */
.ucp-confirm[b-wm064r2ykc] {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--danger-border, #fecaca);
    border-radius: 6px;
    background: var(--danger-surface, #fef2f2);
}

.ucp-confirm-text[b-wm064r2ykc] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text, #0f172a);
}

.ucp-confirm-actions[b-wm064r2ykc] {
    display: flex;
    gap: 0.5rem;
}

.ucp-confirm-actions .btn[b-wm064r2ykc] {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

/* A reset link changes nothing until the recipient acts on it, so it gets the
   ordinary surface rather than the danger one. */
.ucp-confirm--neutral[b-wm064r2ykc] {
    border-color: var(--border, #e2e8f0);
    background: var(--surface-muted, #f8fafc);
}
/* /Components/Features/Administration/UserLicensesPanel.razor.rz.scp.css */
/* One user's licences (U5, #355). Form vocabulary comes from app.css; only what
   is particular to this panel lives here. */

.ulp-status[b-lu8k7d6qop],
.ulp-muted[b-lu8k7d6qop] {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #64748b);
    font-size: 0.8125rem;
}

.ulp-subtitle[b-lu8k7d6qop] {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #64748b);
}

.ulp-count[b-lu8k7d6qop] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.ulp-assigned[b-lu8k7d6qop] {
    margin-bottom: 1rem;
}

.ulp-table[b-lu8k7d6qop] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ulp-table th[b-lu8k7d6qop] {
    text-align: left;
    padding: 0.375rem 0.625rem 0.375rem 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}

.ulp-table td[b-lu8k7d6qop] {
    padding: 0.4375rem 0.625rem 0.4375rem 0;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    vertical-align: middle;
}

.ulp-table tr:last-child td[b-lu8k7d6qop] {
    border-bottom: none;
}

.ulp-type[b-lu8k7d6qop] {
    color: var(--text-muted, #64748b);
    font-size: 0.75rem;
}

.ulp-actions[b-lu8k7d6qop] {
    text-align: right;
    white-space: nowrap;
}

.ulp-link-btn[b-lu8k7d6qop] {
    background: transparent;
    border: none;
    padding: 0.125rem 0.375rem;
    color: var(--color-brand-teal, var(--color-brand));
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    border-radius: 4px;
}

.ulp-link-btn:hover:not(:disabled)[b-lu8k7d6qop] {
    background: var(--color-surface-raised);
    text-decoration: underline;
}

.ulp-remove:hover:not(:disabled)[b-lu8k7d6qop] {
    color: var(--danger-text, #991b1b);
}

/* Screen-reader-only column heading for the actions column, which has no visible
   label but still needs one. */
.ulp-sr[b-lu8k7d6qop] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Inline confirmation, not a ConfirmDialog — see this component's own remarks:
   UserAccountEditor's Drawer carries a transform for its slide-in, which makes
   it the containing block for position:fixed descendants. */
.ulp-confirm[b-lu8k7d6qop] {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--danger-border, #fecaca);
    border-radius: 6px;
    background: var(--danger-surface, #fef2f2);
}

.ulp-confirm-title[b-lu8k7d6qop] {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.ulp-confirm-text[b-lu8k7d6qop] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text, #0f172a);
}

.ulp-confirm-actions[b-lu8k7d6qop] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.ulp-confirm-actions .btn[b-lu8k7d6qop] {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.ulp-assign-row[b-lu8k7d6qop] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-width: 40rem;
}

.ulp-picker[b-lu8k7d6qop] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Features/AiChatPanel.razor.rz.scp.css */
/* ── Overlay ───────────────────────────────────────────── */

.chat-overlay[b-pnxunnh2bo] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.chat-overlay.open[b-pnxunnh2bo] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Panel ─────────────────────────────────────────────── */

.chat-panel[b-pnxunnh2bo] {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100dvh;
    background: var(--color-surface);
    box-shadow: -4px 0 24px rgba(7, 70, 132, 0.12);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-panel.open[b-pnxunnh2bo] {
    transform: translateX(0);
}

/* ── Header ────────────────────────────────────────────── */

.chat-header[b-pnxunnh2bo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background: var(--color-brand);
    color: white;
    flex-shrink: 0;
}

.chat-header-left[b-pnxunnh2bo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-header-icon[b-pnxunnh2bo] {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

.chat-title[b-pnxunnh2bo] {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.chat-subtitle[b-pnxunnh2bo] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    opacity: 0.75;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.session-dot[b-pnxunnh2bo] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-healthy);
    display: inline-block;
}

.chat-header-actions[b-pnxunnh2bo] {
    display: flex;
    gap: 0.25rem;
}

.chat-header-btn[b-pnxunnh2bo] {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.chat-header-btn:hover[b-pnxunnh2bo] {
    background: rgba(255, 255, 255, 0.22);
}

/* ── Messages area ─────────────────────────────────────── */

.chat-messages[b-pnxunnh2bo] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-behavior: smooth;
}

/* Empty state */
.chat-empty[b-pnxunnh2bo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.chat-empty-icon[b-pnxunnh2bo] {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.chat-empty-title[b-pnxunnh2bo] {
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.chat-empty-text[b-pnxunnh2bo] {
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

/* Message bubble */
.chat-msg[b-pnxunnh2bo] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.chat-msg-user[b-pnxunnh2bo] {
    flex-direction: row-reverse;
}

.chat-msg-avatar[b-pnxunnh2bo] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-msg-body[b-pnxunnh2bo] {
    max-width: 85%;
}

.chat-msg-content[b-pnxunnh2bo] {
    font-size: 0.875rem;
    line-height: 1.65;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.chat-msg-content p[b-pnxunnh2bo] {
    margin: 0 0 0.5rem 0;
}

.chat-msg-content p:last-child[b-pnxunnh2bo] {
    margin-bottom: 0;
}

.chat-msg-content code[b-pnxunnh2bo] {
    background: rgba(7, 70, 132, 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.chat-msg-user .chat-msg-content[b-pnxunnh2bo] {
    background: var(--color-brand);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.chat-msg-assistant .chat-msg-content[b-pnxunnh2bo] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-bottom-left-radius: 0.25rem;
}

/* ── CONFIRM rendering ─────────────────────────────────── */

.chat-confirm-question[b-pnxunnh2bo] {
    font-weight: 600;
    margin: 0.75rem 0 0 0 !important;
    color: var(--color-brand);
}

.chat-confirm-bar[b-pnxunnh2bo] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    flex-wrap: wrap;
}

.chat-confirm-btn[b-pnxunnh2bo] {
    background: var(--color-surface);
    border: 1.5px solid var(--color-brand);
    color: var(--color-brand);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.chat-confirm-btn:hover:not(:disabled)[b-pnxunnh2bo] {
    background: var(--color-brand);
    color: white;
}

.chat-confirm-btn:disabled[b-pnxunnh2bo] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Typing indicator ──────────────────────────────────── */

.chat-typing[b-pnxunnh2bo] {
    display: flex;
    gap: 4px;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    border-bottom-left-radius: 0.25rem;
    width: fit-content;
}

.chat-typing span[b-pnxunnh2bo] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    opacity: 0.4;
    animation: chatTyping-b-pnxunnh2bo 1.4s infinite;
}

.chat-typing span:nth-child(2)[b-pnxunnh2bo] { animation-delay: 0.2s; }
.chat-typing span:nth-child(3)[b-pnxunnh2bo] { animation-delay: 0.4s; }

@keyframes chatTyping-b-pnxunnh2bo {
    0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ── Error bar ─────────────────────────────────────────── */

.chat-error[b-pnxunnh2bo] {
    padding: 0.5rem 1rem;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    color: var(--color-down);
    font-size: 0.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.chat-error-dismiss[b-pnxunnh2bo] {
    background: none;
    border: none;
    color: var(--color-down);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Input bar ─────────────────────────────────────────── */

.chat-input-bar[b-pnxunnh2bo] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}

.chat-input[b-pnxunnh2bo] {
    flex: 1;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    resize: none;
    min-height: 38px;
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s;
}

.chat-input:focus[b-pnxunnh2bo] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(7, 70, 132, 0.1);
}

.chat-input[b-pnxunnh2bo]::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.chat-send-btn[b-pnxunnh2bo] {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius);
    background: var(--color-brand);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}

.chat-send-btn:hover:not(:disabled)[b-pnxunnh2bo] {
    background: #053565;
}

.chat-send-btn:disabled[b-pnxunnh2bo] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Unavailable notice ────────────────────────────────── */

.chat-unavailable-notice[b-pnxunnh2bo] {
    margin: 0;
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 480px) {
    .chat-panel[b-pnxunnh2bo] {
        width: 100vw;
    }
}
/* /Components/Features/AnalysisDesigner/AnalysisDocumentSourcePanel.razor.rz.scp.css */
/* ── The document search panel (CC8.2b) ──────────────────────────────────────
   Only this panel's own classes. Panels, facts, fields, chips and banners all
   come from AnalysisDesignerPage through ::deep, so this file must not restate
   them — a second definition would win or lose by specificity depending on where
   the scoped bundle happened to concatenate it, and the two designers would
   drift.

   .cc-linkbtn is the one exception, and it is a copy for the same reason the SQL
   panel copies it: it is published by the control centre designer page, whose
   subtree this is not in.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-doc-sub[b-omktwzstyj] {
    margin: 1rem 0 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-title);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-doc-choice[b-omktwzstyj] {
    font-weight: 600;
}

/* The line under a fact that says what the runtime does with it. Its own block so
   a long sentence does not push the value out of the definition list's column. */
.cc-doc-note[b-omktwzstyj] {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-doc-dupes[b-omktwzstyj],
.cc-doc-others[b-omktwzstyj] {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
    font-size: 0.75rem;
}

.cc-doc-others > li[b-omktwzstyj] {
    margin-bottom: 0.375rem;
}

.cc-doc-effect[b-omktwzstyj] {
    display: block;
    margin: 0.125rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* One OR group. Indented by its border rather than by margin so the conditions
   inside line up with the global ones above them. */
.cc-doc-group[b-omktwzstyj] {
    margin: 0 0 0.75rem;
    padding-left: 0.625rem;
    border-left: 2px solid var(--color-border);
}

.cc-doc-group-head[b-omktwzstyj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cc-doc-group-title[b-omktwzstyj] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-doc-add[b-omktwzstyj] {
    margin: 0.25rem 0 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-linkbtn[b-omktwzstyj] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-omktwzstyj] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-omktwzstyj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/AnalysisDesigner/AnalysisDocumentTagConditions.razor.rz.scp.css */
/* ── One sub-group's tag conditions (CC8.2b) ─────────────────────────────────
   Everything here is prefixed cc-doc- and belongs to this component alone.
   Inputs, chips, microlabels and field help come from AnalysisDesignerPage
   through ::deep and are not restated; .cc-linkbtn is copied for the reason the
   sibling panels give.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-doc-terms[b-yutfnhvyo5] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A condition is a card rather than a table row: the designer's centre column is
   narrow, and four controls side by side wrap into something unreadable. */
.cc-doc-term[b-yutfnhvyo5] {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
}

.cc-doc-term-head[b-yutfnhvyo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

/* Two columns while there is room for two; one on a narrow rail. The value and
   the "applies to" row always take the full width — the value carries a token
   panel under it and the group select carries the longest labels. */
.cc-doc-term-grid[b-yutfnhvyo5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.375rem 0.5rem;
}

.cc-doc-field[b-yutfnhvyo5] {
    margin-bottom: 0.375rem;
}

.cc-doc-field--applies[b-yutfnhvyo5] {
    max-width: 16rem;
}

.cc-doc-readonly[b-yutfnhvyo5] {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.75rem;
}

.cc-doc-effect[b-yutfnhvyo5] {
    display: block;
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-doc-effect--warn[b-yutfnhvyo5] {
    color: var(--color-text-primary);
}

.cc-doc-add[b-yutfnhvyo5] {
    margin: 0.25rem 0 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-linkbtn[b-yutfnhvyo5] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-yutfnhvyo5] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-yutfnhvyo5] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/AnalysisDesigner/AnalysisDocumentTokenField.razor.rz.scp.css */
/* ── The tag value box and its token picker (CC8.2b) ─────────────────────────
   Inputs, microlabels and field help come from AnalysisDesignerPage through
   ::deep; only this component's own classes are here. .cc-linkbtn is copied for
   the reason the sibling panels give.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-tok-entry[b-bjjg2vc5vs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cc-tok-value[b-bjjg2vc5vs] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
}

.cc-tok-toggle[b-bjjg2vc5vs] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cc-tok-readonly[b-bjjg2vc5vs] {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* The picker sits under the box rather than over it: it is short, it is only ever
   opened deliberately, and a popover would need JS to place and dismiss. */
.cc-tok-panel[b-bjjg2vc5vs] {
    margin-top: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
}

.cc-tok-offset[b-bjjg2vc5vs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cc-tok-n[b-bjjg2vc5vs] {
    width: 4.5rem;
    font-size: 0.75rem;
}

.cc-tok-unit[b-bjjg2vc5vs] {
    width: auto;
    min-width: 9rem;
    font-size: 0.75rem;
}

.cc-tok-insert[b-bjjg2vc5vs],
.cc-tok-date[b-bjjg2vc5vs] {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}

.cc-tok-dates[b-bjjg2vc5vs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cc-tok-date[b-bjjg2vc5vs] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cc-tok-resolved[b-bjjg2vc5vs] {
    margin: 0.25rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cc-tok-resolved-label[b-bjjg2vc5vs] {
    font-weight: 600;
}

.cc-tok-resolved-value[b-bjjg2vc5vs] {
    margin: 0 0.25rem;
    padding: 0.0625rem 0.25rem;
    background: var(--color-surface-raised);
    border-radius: calc(var(--radius) * 0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.cc-tok-asof[b-bjjg2vc5vs] {
    white-space: nowrap;
}

.cc-tok-warn[b-bjjg2vc5vs] {
    margin: 0.25rem 0 0;
    color: var(--color-text-primary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-linkbtn[b-bjjg2vc5vs] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-bjjg2vc5vs] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-bjjg2vc5vs] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/AnalysisDesigner/AnalysisGraphPanel.razor.rz.scp.css */
/* ── Definition JSON panel ───────────────────────────────────────────────────
   Full width under the toolbar, because a graph document is wide and reading it
   in a rail means reading it four words at a time.

   .cc-json is defined HERE and not in the page's ::deep register, even though the
   name is in the cc- vocabulary: this is its only user, and two rules of equal
   specificity for one class would leave which of them wins to the order of the
   scoped-CSS bundle rather than to anything anyone wrote down.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-json-panel .cc-panel-note[b-wzwqlh8nd3] {
    margin-bottom: 0.5rem;
}

/* Scrolls rather than wraps: a wrapped JSON document loses the indentation that
   is the only structure it has, and this one is nested five deep. */
.cc-json[b-wzwqlh8nd3] {
    margin: 0;
    max-height: 26rem;
    padding: 0.625rem 0.75rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

/* It is focusable so it can be scrolled from the keyboard, so it needs to say
   when it has focus. */
.cc-json:focus-visible[b-wzwqlh8nd3] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}
/* /Components/Features/AnalysisDesigner/AnalysisIdentityPanel.razor.rz.scp.css */
/* ── Analysis identity panel ─────────────────────────────────────────────────
   Two columns on a wide host and one on a narrow one, with the fields that need
   the room spanning both. Everything else — the fields, the facts list, the
   findings — is the page's shared vocabulary.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-identity-grid[b-285riceute] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.875rem;
}

@media (max-width: 900px) {
    .cc-identity-grid[b-285riceute] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cc-identity-grid > .cc-field--wide[b-285riceute],
.cc-identity-grid > .cc-inspect[b-285riceute] {
    grid-column: 1 / -1;
}

.cc-check[b-285riceute] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* The findings that are about the analysis itself rather than about a step, so
   they sit under the fields that can fix them. */
.cc-identity-findings[b-285riceute] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}
/* /Components/Features/AnalysisDesigner/AnalysisPreviewRail.razor.rz.scp.css */
/* ── Preview rail ────────────────────────────────────────────────────────────
   The rail's own chrome and the trust panel. The tiles themselves are the CC6
   renderer's and carry their own stylesheets; nothing here reaches into them,
   because a card that looked different in the designer from how it looks on a
   dashboard would defeat the point of previewing it.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-rail[b-dboq1utyat] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.cc-rail-head[b-dboq1utyat] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cc-rail-title[b-dboq1utyat] {
    margin: 0;
    flex: 1;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-rail-status[b-dboq1utyat] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* ── Trust panel ─────────────────────────────────────────────────────────────
   Quiet by default and quiet when it disagrees. This is a statement about how
   much of the port is pinned by captured data, not an error, and dressing it as
   one would train people to dismiss it. */

.cc-trust[b-dboq1utyat] {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.cc-trust--ok[b-dboq1utyat] {
    border-left-color: var(--color-healthy);
}

.cc-trust--warn[b-dboq1utyat] {
    border-left-color: var(--color-degraded);
}

.cc-trust-line[b-dboq1utyat] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
}

.cc-trust-list[b-dboq1utyat] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.cc-trust-list code[b-dboq1utyat] {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
}

.cc-trust-note[b-dboq1utyat] {
    margin: 0.5rem 0 0;
}

.cc-trust-notes[b-dboq1utyat] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.cc-trust-notes > li[b-dboq1utyat] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cc-trust-note-subject[b-dboq1utyat] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.cc-trust-note-where[b-dboq1utyat] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

/* ── Tiles ───────────────────────────────────────────────────────────────── */

.cc-preview-tiles[b-dboq1utyat] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* One card per row, full width of the rail. An analysis's tiles are drawn side
   by side on a dashboard because a panel gives them widths; here there is no
   placement to take a width from, and inventing one would preview a layout
   nobody has authored. */
.cc-preview-tile[b-dboq1utyat] {
    min-width: 0;
}

.cc-empty[b-dboq1utyat] {
    margin: 0;
    padding: 1rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}
/* /Components/Features/AnalysisDesigner/AnalysisRunStep.razor.rz.scp.css */
/* ── Run and test step (CC8.4) ───────────────────────────────────────────────
   The step's layout plus the few primitives its three components share,
   published through ::deep exactly as the Shape step publishes its own.

   One stylesheet for three components on purpose, and for the reason the Shape
   step gives: scoped CSS is per component, so the alternative is three files that
   have to agree about what a table row looks like — and the first time they
   stopped agreeing, one step would look like two products.

   Panels, fields, chips, banners, toggles and the icon button all still come from
   AnalysisDesignerPage above; nothing here restates one. Tokens only, and tints
   are colour-mixes over the brand tokens so a theme change carries.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-run[b-7z9n0u4s88] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

/* The same two-up-at-least grid the Shape step uses, so a form on one step and a
   form on the other line up at the same breakpoints. */
[b-7z9n0u4s88] .cc-run-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 0.75rem;
    align-items: start;
}

[b-7z9n0u4s88] .cc-run-clear,
[b-7z9n0u4s88] .cc-run-add {
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
}

[b-7z9n0u4s88] .cc-run-subhead {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0 0.375rem;
}

/* The button sits on the baseline of the label above it rather than stretching
   with the grid cell it shares. */
[b-7z9n0u4s88] .cc-run-clock-reset {
    justify-content: flex-end;
    padding-bottom: 0.875rem;
}

/* ── Quick ranges ────────────────────────────────────────────────────────── */

[b-7z9n0u4s88] .cc-run-ranges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
}

[b-7z9n0u4s88] .cc-run-chip {
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
}

[b-7z9n0u4s88] .cc-run-chip:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

[b-7z9n0u4s88] .cc-run-chip:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* ── Custom filters ──────────────────────────────────────────────────────── */

[b-7z9n0u4s88] .cc-run-customs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

[b-7z9n0u4s88] .cc-run-custom {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0 0.5rem;
    align-items: end;
}

/* The refusal spans the row rather than sitting under one input: it is about the
   pair, and a message under the key alone reads as a validation error on a text
   box rather than as "this filter reaches nothing". */
[b-7z9n0u4s88] .cc-run-custom > .cc-run-refusal {
    grid-column: 1 / -1;
    margin: -0.5rem 0 0.5rem;
}

[b-7z9n0u4s88] .cc-run-remove {
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
    line-height: 1;
}

/* ── The two actions ─────────────────────────────────────────────────────── */

/* Side by side where there is room and stacked where there is not — never in a
   row that makes one look like the confirmation of the other. They answer
   different questions and neither is the default. */
[b-7z9n0u4s88] .cc-run-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

[b-7z9n0u4s88] .cc-run-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

[b-7z9n0u4s88] .cc-run-action-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

[b-7z9n0u4s88] .cc-run-action-body {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* ── Result tables ───────────────────────────────────────────────────────── */

[b-7z9n0u4s88] .cc-run-table {
    width: 100%;
    margin: 0.375rem 0 0.75rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}

[b-7z9n0u4s88] .cc-run-table th,
[b-7z9n0u4s88] .cc-run-table td {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

[b-7z9n0u4s88] .cc-run-table thead th {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-7z9n0u4s88] .cc-run-table tbody th {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* A tint, not a colour: a row that differs is a FINDING and not a fault, and
   dressing one as an error is how a panel stops being read. */
[b-7z9n0u4s88] .cc-run-differs > * {
    background: color-mix(in srgb, var(--color-warning, #f8a31c) 8%, transparent);
}

[b-7z9n0u4s88] .cc-run-note-row > td {
    padding-top: 0;
    border-bottom: 1px solid var(--color-border);
}

[b-7z9n0u4s88] .cc-run-note {
    display: block;
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, var(--color-warning, #f8a31c) 60%, transparent);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

[b-7z9n0u4s88] .cc-run-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

[b-7z9n0u4s88] .cc-run-warning-subject {
    display: block;
    color: var(--color-text-primary);
    font-weight: 600;
}

[b-7z9n0u4s88] .cc-run-empty {
    margin: 0;
    padding: 1rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Raw JSON ────────────────────────────────────────────────────────────── */

/* Capped rather than unbounded: a run can carry PreviewRowCap rows and a page
   that grows to the height of one is a page nobody can scroll past. */
[b-7z9n0u4s88] .cc-run-json {
    max-height: 26rem;
    margin: 0.375rem 0 0;
    padding: 0.625rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.5;
    tab-size: 2;
}

/* ── Screen-reader only ──────────────────────────────────────────────────── */

/* Table captions. Each table already has a visible sentence above it explaining
   what it is; the caption is the association a screen reader needs and would be
   a duplicate on screen. */
[b-7z9n0u4s88] .cc-run-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Features/AnalysisDesigner/AnalysisShapeStep.razor.rz.scp.css */
/* ── Shape step ──────────────────────────────────────────────────────────────
   The step's own layout, plus the few primitives its seven panels share,
   published through ::deep exactly as the page publishes the designer's
   vocabulary to the panes.

   It is one stylesheet for eight components on purpose. Scoped CSS is per
   component, so the alternative is eight files that have to agree about what a
   table row looks like — and the first time they stopped agreeing, the step
   would look like two products. Panels, fields, chips, banners and findings all
   still come from the page above; nothing here restates one.

   Tokens only, and tints are colour-mixes over the brand tokens.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-shape[b-8xng1rb0sy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Panel furniture ─────────────────────────────────────────────────────── */

/* Pushes the "Add…" button to the right of a panel head, past the count chip. */
[b-8xng1rb0sy] .cc-sh-add {
    margin-left: auto;
}

[b-8xng1rb0sy] .cc-sh-empty {
    margin: 0.25rem 0 0;
    padding: 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

[b-8xng1rb0sy] .cc-sh-muted {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

[b-8xng1rb0sy] .cc-sh-plain {
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* A consequence rather than a fault: the same weight as help text, in the
   warning tint, so it reads as "and this is what that does" rather than as an
   error the author has to clear. */
[b-8xng1rb0sy] .cc-sh-warn {
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, var(--color-warning, #f8a31c) 60%, transparent);
    color: var(--color-text-primary);
}

[b-8xng1rb0sy] .cc-sh-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Fields and rows ─────────────────────────────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 0.75rem;
    align-items: end;
}

[b-8xng1rb0sy] .cc-sh-grid > .cc-field--wide {
    grid-column: 1 / -1;
}

[b-8xng1rb0sy] .cc-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* A button that reads as a link: used for the one-click repairs, which are
   offers rather than primary actions. */
[b-8xng1rb0sy] .cc-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent, #0ea5c6);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

[b-8xng1rb0sy] .cc-linkbtn:hover {
    text-decoration: none;
}

[b-8xng1rb0sy] .cc-sh-rowbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[b-8xng1rb0sy] .cc-sh-num {
    max-width: 9rem;
}

[b-8xng1rb0sy] .cc-sh-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    resize: vertical;
}

[b-8xng1rb0sy] .cc-sh-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

[b-8xng1rb0sy] .cc-sh-scope {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

[b-8xng1rb0sy] .cc-sh-scopesel {
    width: auto;
    min-width: 9rem;
    padding-block: 0.1875rem;
    font-size: 0.75rem;
}

[b-8xng1rb0sy] .cc-sh-find {
    margin-top: 0.5rem;
}

/* ── Tiles ───────────────────────────────────────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-tile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-8xng1rb0sy] .cc-sh-tilehead {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

[b-8xng1rb0sy] .cc-sh-tilename {
    flex: 1 1 auto;
    min-width: 0;
}

/* The shape picker: seven equal targets, so the eye compares shapes rather than
   reading a list of words. */
[b-8xng1rb0sy] .cc-sh-shapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 0.375rem;
}

[b-8xng1rb0sy] .cc-sh-shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

[b-8xng1rb0sy] .cc-sh-shape:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-accent, #0ea5c6) 45%, var(--color-border));
    color: var(--color-text-primary);
}

[b-8xng1rb0sy] .cc-sh-shape:disabled {
    cursor: default;
    opacity: 0.6;
}

[b-8xng1rb0sy] .cc-sh-shape--on {
    border-color: var(--color-accent, #0ea5c6);
    background: color-mix(in srgb, var(--color-accent, #0ea5c6) 8%, transparent);
    color: var(--color-text-primary);
}

[b-8xng1rb0sy] .cc-sh-shapeicon svg {
    width: 20px;
    height: 20px;
}

[b-8xng1rb0sy] .cc-sh-shapelabel {
    text-align: center;
}

/* ── Aggregation and the tile-level settings ─────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-agg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-8xng1rb0sy] .cc-sh-outcome {
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

[b-8xng1rb0sy] .cc-sh-outcome:first-of-type {
    border-top: 0;
}

[b-8xng1rb0sy] .cc-sh-outcomehead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[b-8xng1rb0sy] .cc-sh-outcomefields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.5rem;
}

/* ── The columns table ───────────────────────────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

[b-8xng1rb0sy] .cc-sh-caption {
    padding-bottom: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-align: left;
}

[b-8xng1rb0sy] .cc-sh-table th {
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

[b-8xng1rb0sy] .cc-sh-table td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
    vertical-align: middle;
}

[b-8xng1rb0sy] .cc-sh-table .cc-field {
    margin: 0;
}

/* A column the run reported that no rule names: present, and quieter than the
   rules, because it is a fact about the data rather than part of the design. */
[b-8xng1rb0sy] .cc-sh-unruled td {
    background: color-mix(in srgb, var(--color-border) 18%, transparent);
}

[b-8xng1rb0sy] .cc-sh-more td {
    padding: 0.5rem 0 0.75rem;
}

[b-8xng1rb0sy] .cc-sh-loose {
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

/* ── Bands ───────────────────────────────────────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-sev {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* A readout, not a picker. The border is the web app's paired text colour, so
   the chip carries both halves of the pairing rather than only the fill. */
[b-8xng1rb0sy] .cc-sh-swatch {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid transparent;
    border-radius: 4px;
}

/* ── Links and raw rows ──────────────────────────────────────────────────── */

[b-8xng1rb0sy] .cc-sh-target {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

[b-8xng1rb0sy] .cc-sh-linkfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

[b-8xng1rb0sy] .cc-sh-rawhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[b-8xng1rb0sy] .cc-sh-type {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
}

[b-8xng1rb0sy] .cc-sh-rawhead .cc-sh-rowbar {
    margin-left: auto;
}
/* /Components/Features/AnalysisDesigner/AnalysisSourceStep.razor.rz.scp.css */
/* ── The Source step (CC8.2a) ────────────────────────────────────────────────
   The step renders sibling .cc-panel sections into the host's flex column, so the
   spacing between them is the host's gap and nothing here restates it. Panels,
   cards, chips, findings and field help all come from AnalysisDesignerPage
   through ::deep; only the one button this step owns is here.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-step-btn[b-0gyt53o1r0] {
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}
/* /Components/Features/AnalysisDesigner/AnalysisSqlMappingTable.razor.rz.scp.css */
/* ── The SQL parameter mapping table (CC8.2a) ────────────────────────────────
   .cc-tbl is a COPY of the control centre designer page's register rather than a
   reference to it. Scoped CSS is per component: that page publishes its table
   rules through ::deep to its own subtree, and the analysis designer page — the
   host here — publishes panels, fields, chips and findings but no table. Copying
   the six rules is the only way a table inside this designer looks like the ones
   in the other, short of a global stylesheet neither designer has.

   Everything else is prefixed cc-map- and belongs to this component alone, so
   nothing here depends on the order the scoped bundle happens to concatenate in.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-tbl[b-foy903n4r2] {
    width: 100%;
    margin: 0 0 0.75rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.cc-tbl th[b-foy903n4r2],
.cc-tbl td[b-foy903n4r2] {
    padding: 0.375rem 0.375rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.cc-tbl thead th[b-foy903n4r2] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cc-tbl tbody th[b-foy903n4r2] {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* The parameter column stays narrow enough that the effect column — the one that
   is actually read — gets the width. The middle column is sized by its select. */
.cc-map-tbl th:first-child[b-foy903n4r2] {
    width: 26%;
    min-width: 8rem;
}

.cc-map-caption[b-foy903n4r2] {
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
    text-align: left;
}

.cc-map-name[b-foy903n4r2] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.cc-map-facts[b-foy903n4r2] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.1875rem;
}

.cc-map-fact[b-foy903n4r2] {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: 0.6875rem;
    line-height: 1.4;
}

/* The select and its literal box stack rather than sit side by side: the centre
   column of the designer is narrow, and a number box beside a ten-word option
   label wraps into an unreadable pair. */
.cc-map-kind[b-foy903n4r2],
.cc-map-value[b-foy903n4r2] {
    width: 100%;
    max-width: 14rem;
    font-size: 0.75rem;
}

.cc-map-value[b-foy903n4r2] {
    margin-top: 0.25rem;
}

.cc-map-readonly[b-foy903n4r2] {
    color: var(--color-text-primary);
}

.cc-map-effect[b-foy903n4r2] {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.cc-map-effect--warn[b-foy903n4r2] {
    color: var(--color-text-primary);
}

/* Matches the inspectors' link button (CC5.2a onwards). Copied for the same
   reason as .cc-tbl: this component is not inside that page's subtree. */
.cc-linkbtn[b-foy903n4r2] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-foy903n4r2] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-foy903n4r2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/AnalysisDesigner/AnalysisSqlSourcePanel.razor.rz.scp.css */
/* ── The SQL source panel (CC8.2a) ───────────────────────────────────────────
   Only this panel's own classes. Panels, facts, fields, chips and banners all
   come from AnalysisDesignerPage through ::deep, so this file must not restate
   them — a second definition would win or lose by specificity depending on where
   the scoped bundle happened to concatenate it, and the two designers would drift.

   .cc-linkbtn is the one exception, and it is a copy for the same reason the
   mapping table copies .cc-tbl: it is published by the control centre designer
   page, whose subtree this is not in.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-src-sub[b-9kbksz3nsr] {
    margin: 1rem 0 0.375rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-title);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* The chosen source's own line — its name, id, kind chip, link out and the button
   that changes it — moved to CcDataSourceField with the markup in CC9.4, and so
   did .cc-src-name, .cc-src-id, .cc-src-link and .cc-src-btn. Deleted rather than
   left behind: a scoped rule for markup that no longer exists is how a stale
   selector survives long enough for somebody to write a test against it. */

.cc-src-status[b-9kbksz3nsr] {
    margin: 0 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* The query. Scrollable rather than wrapped: a stored-procedure name is short and
   a DM 1.0 query is SQL, where a soft wrap in the middle of a predicate is harder
   to read than a scrollbar. */
.cc-src-query[b-9kbksz3nsr] {
    max-height: 14rem;
    margin: 0 0 0.75rem;
    padding: 0.625rem;
    overflow: auto;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre;
    color: var(--color-text-primary);
}

.cc-src-note[b-9kbksz3nsr] {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-src-dupes[b-9kbksz3nsr] {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
    font-size: 0.75rem;
}

.cc-linkbtn[b-9kbksz3nsr] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-9kbksz3nsr] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-9kbksz3nsr] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/AnalysisDesigner/AnalysisStepHost.razor.rz.scp.css */
/* ── Step host ───────────────────────────────────────────────────────────────
   The centre column: the identity panel, then the step. Only the column's own
   stacking and the placeholder's few classes are here; every shared primitive —
   panels, fields, chips, findings — comes from the page through ::deep so the
   identity panel and the step panel cannot end up looking like two products.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-host[b-ehkibjx7lo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.cc-step-lead[b-ehkibjx7lo] {
    margin: 0 0 0.875rem;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* The last line of an unbuilt step. Separated from the scope list above it,
   because it is about what to do NOW rather than about what is coming. */
.cc-step-meanwhile[b-ehkibjx7lo] {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
/* /Components/Features/AnalysisDesigner/AnalysisStepRail.razor.rz.scp.css */
/* ── Step rail ───────────────────────────────────────────────────────────────
   A numbered vertical list with a spine down the left, so the three steps read
   as stages of one build rather than as three unrelated panels. The chips and
   micro-labels come from the page through ::deep; only the rail's own layout is
   here.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-steps[b-608lnwb0g9] {
    padding: 0.75rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cc-step-list[b-608lnwb0g9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-step[b-608lnwb0g9] {
    position: relative;
}

/* The spine: a hairline between one step's number and the next, drawn on the
   list item rather than as a border so it stops at the last step. */
.cc-step:not(:last-child)[b-608lnwb0g9]::after {
    content: "";
    position: absolute;
    left: 1.4375rem;
    top: 2.5rem;
    bottom: -0.25rem;
    width: 1px;
    background: var(--color-border);
}

.cc-step-btn[b-608lnwb0g9] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.cc-step-btn:hover[b-608lnwb0g9] {
    background: var(--color-surface-raised);
}

.cc-step-btn:focus-visible[b-608lnwb0g9] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-step--on .cc-step-btn[b-608lnwb0g9] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-teal) 8%, var(--color-surface));
}

.cc-step-index[b-608lnwb0g9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

.cc-step--on .cc-step-index[b-608lnwb0g9] {
    border-color: var(--color-brand-teal);
    background: var(--color-brand-teal);
    color: #fff;
}

.cc-step-body[b-608lnwb0g9] {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
}

.cc-step-title[b-608lnwb0g9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cc-step-summary[b-608lnwb0g9] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.cc-step-counts[b-608lnwb0g9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.125rem;
}
/* /Components/Features/AnalysisDesigner/AnalysisToolbar.razor.rz.scp.css */
/* ── Analysis designer toolbar ───────────────────────────────────────────────
   The same strip as the control centre designer's toolbar, minus the data
   toggle and the "open in the web app" link — an analysis has no page in the
   DocMX web app to open — and plus the dirty dot.

   Deliberately a copy rather than a shared stylesheet: scoped CSS is per
   component, and the two toolbars are siblings that will drift as their surfaces
   do. Publishing one through ::deep from a page would tie each toolbar to a
   particular host, which is the thing scoped CSS exists to avoid.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-toolbar[b-r1nvor2615] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cc-back[b-r1nvor2615] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}

.cc-back svg[b-r1nvor2615] { width: 16px; height: 16px; }

.cc-back:hover[b-r1nvor2615] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.cc-back:focus-visible[b-r1nvor2615] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-title[b-r1nvor2615] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cc-name[b-r1nvor2615] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-subtitle[b-r1nvor2615] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-id[b-r1nvor2615] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cc-meta[b-r1nvor2615],
.cc-actions[b-r1nvor2615],
.cc-history[b-r1nvor2615] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.cc-history[b-r1nvor2615] {
    gap: 0.25rem;
}

/* ── Save ────────────────────────────────────────────────────────────────── */

.cc-dirty[b-r1nvor2615] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

/* The dot is decoration for the word beside it, never the signal on its own:
   colour alone would leave the state invisible to a reader who cannot see it,
   and the pill already says "Unsaved changes" in text. */
.cc-dot[b-r1nvor2615] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.cc-save[b-r1nvor2615] {
    flex: none;
    white-space: nowrap;
}

/* A Save that cannot be pressed is a fact about the definition, not a dead
   control, so it stays legible rather than fading to the point of looking
   broken. */
.cc-save:disabled[b-r1nvor2615] {
    opacity: 0.55;
    cursor: default;
}

/* ── Overflow menu ───────────────────────────────────────────────────────── */

.cc-overflow[b-r1nvor2615] {
    position: relative;
}

.cc-menu[b-r1nvor2615] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    min-width: 19rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.cc-menu-item[b-r1nvor2615] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cc-menu-item:hover:not(:disabled)[b-r1nvor2615],
.cc-menu-item:focus-visible[b-r1nvor2615] {
    background: var(--color-surface-raised);
}

/* A disabled item keeps its help text at full contrast: the help IS the reason
   it is disabled, and fading it hides the only useful thing on the row. */
.cc-menu-item:disabled[b-r1nvor2615] {
    cursor: default;
}

.cc-menu-item:disabled .cc-menu-label[b-r1nvor2615] {
    color: var(--color-text-secondary);
}

.cc-menu-item--danger:not(:disabled) .cc-menu-label[b-r1nvor2615] {
    color: var(--color-down);
}

.cc-menu-label[b-r1nvor2615] {
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cc-menu-help[b-r1nvor2615] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}
/* /Components/Features/AnalysisDesigner/AnalysisTransferPanel.razor.rz.scp.css */
/* ── Export and import panel ─────────────────────────────────────────────────
   Full width under the toolbar, beside the JSON view and for the same reason: a
   graph document, its warnings and a drop zone are all wide, and a rail would
   show them four words at a time.

   Only the classes this panel invents are here. The vocabulary it shares with the
   rest of the designer — cc-panel, cc-facts, cc-banner, cc-find, cc-microlabel —
   is published once by AnalysisDesignerPage through ::deep, and re-declaring any
   of it here would leave which rule wins to the order of the scoped-CSS bundle
   rather than to anything anyone wrote down.
   ───────────────────────────────────────────────────────────────────────────── */

.cc-transfer .cc-panel-note[b-jwirbry4do] {
    margin-bottom: 0.75rem;
}

.cc-transfer-body[b-jwirbry4do] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 78ch;
}

/* ── The export choices ──────────────────────────────────────────────────── */

/* A fieldset so the two radios are announced as one question. Its own border is
   removed because the panel already draws one and a box inside a box reads as
   two groups. */
.cc-transfer-choice[b-jwirbry4do] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.cc-transfer-choice > legend[b-jwirbry4do] {
    padding: 0;
    margin-bottom: 0.375rem;
}

.cc-transfer-option[b-jwirbry4do],
.cc-transfer-switch[b-jwirbry4do] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    cursor: pointer;
}

.cc-transfer-option > input[b-jwirbry4do],
.cc-transfer-switch > input[b-jwirbry4do] {
    grid-row: 1;
    margin: 0;
    accent-color: var(--color-brand-teal);
}

.cc-transfer-option-label[b-jwirbry4do] {
    grid-column: 2;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cc-transfer-option-help[b-jwirbry4do] {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* A radio whose input is disabled still gets the pointer cursor from the label,
   which promises something the control will not do. */
.cc-transfer-option:has(> input:disabled)[b-jwirbry4do] {
    cursor: default;
}

.cc-transfer-option:has(> input:disabled) .cc-transfer-option-label[b-jwirbry4do] {
    color: var(--color-text-secondary);
}

.cc-transfer-switch-help[b-jwirbry4do] {
    margin: 0;
    padding-left: 1.375rem;
    max-width: 70ch;
}

/* ── The document ────────────────────────────────────────────────────────── */

.cc-transfer-facts[b-jwirbry4do] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

.cc-transfer-warning + .cc-transfer-warning[b-jwirbry4do] {
    margin-top: -0.375rem;
}

.cc-transfer-finds[b-jwirbry4do] {
    margin: 0;
}

.cc-transfer-status[b-jwirbry4do] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.cc-transfer-actions[b-jwirbry4do] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* The sentence under a pair of buttons is doing the work of a confirmation
   dialog — which of these two writes, and what it replaces — so it is a
   paragraph rather than a tooltip. */
.cc-transfer-actions + .cc-field-help[b-jwirbry4do] {
    margin: -0.25rem 0 0;
    max-width: 70ch;
}

.cc-transfer-actions .cc-field-help[b-jwirbry4do] {
    flex: 1 1 22ch;
    margin: 0;
}
/* /Components/Features/Automation/AdminChangeReportPanel.razor.rz.scp.css */
/*  The result of one administration-bus run.

    Four tones, and every one of them pairs a word and an icon with its colour —
    "partly applied" is the state that most needs reading, and it must survive a
    monochrome screen and a colour-blind reader intact.

    Tokens only — no raw hex. */

.acr[b-ssfnwm8s0r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.acr-banner[b-ssfnwm8s0r] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.acr-banner-icon[b-ssfnwm8s0r] {
    flex: none;
    margin-top: 0.1rem;
}

.acr-banner-body[b-ssfnwm8s0r] {
    flex: 1;
    min-width: 0;
}

.acr-banner-title[b-ssfnwm8s0r] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.acr-banner-message[b-ssfnwm8s0r] {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.acr-banner--ok[b-ssfnwm8s0r] {
    border-left-color: var(--color-healthy);
    background: color-mix(in srgb, var(--color-healthy) 8%, var(--color-surface));
    color: var(--color-healthy);
}

.acr-banner--warn[b-ssfnwm8s0r] {
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
}

.acr-banner--bad[b-ssfnwm8s0r] {
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down);
}

.acr-banner--quiet[b-ssfnwm8s0r] {
    border-left-color: var(--color-border);
    color: var(--color-text-secondary);
}

.acr-dismiss[b-ssfnwm8s0r] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.acr-dismiss:hover[b-ssfnwm8s0r] {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.acr-dismiss:focus-visible[b-ssfnwm8s0r] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ── Plan issues ────────────────────────────────────────────────────────── */

.acr-issues[b-ssfnwm8s0r] {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.acr-issues--error[b-ssfnwm8s0r] {
    border-color: color-mix(in srgb, var(--color-down) 40%, var(--color-border));
}

.acr-issues--warn[b-ssfnwm8s0r] {
    border-color: color-mix(in srgb, var(--color-degraded) 40%, var(--color-border));
}

.acr-issues-title[b-ssfnwm8s0r] {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.acr-issues-list[b-ssfnwm8s0r] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.acr-issues-list li[b-ssfnwm8s0r] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/*  The stable code, shown deliberately: it is what a support conversation and a
    log line have in common, and it does not change when the sentence does. */
.acr-issue-code[b-ssfnwm8s0r] {
    flex: none;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.3rem;
}
/* /Components/Features/Automation/AgentCommandConsole.razor.rz.scp.css */
/*  Maintenance and agent commands for one upload service.

    Reading order is the design: liveness, then whether uploads are paused, then
    the controls, then what the last command did, then everything the agent has
    said. A command console that put the buttons first would be inviting somebody
    to press one at a machine that has been off for a month.

    The "still queued" state uses the degraded treatment rather than the failure
    one on purpose. Nothing failed. Nothing succeeded either, and there is no
    colour for that — so it gets the one that means "look at this", not the one
    that means "this went wrong".

    Tokens only — no raw hex. */

.agc[b-yr7hlg5ei4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Liveness ───────────────────────────────────────────────────────────── */

.agc-live[b-yr7hlg5ei4] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface);
}

.agc-live--ok[b-yr7hlg5ei4] {
    border-left-color: var(--color-healthy);
}

.agc-live--warn[b-yr7hlg5ei4] {
    border-left-color: var(--color-degraded);
}

.agc-live--cold[b-yr7hlg5ei4] {
    border-left-color: var(--color-text-muted);
}

.agc-live-text[b-yr7hlg5ei4] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.agc-live-text strong[b-yr7hlg5ei4] {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.agc-live-text span[b-yr7hlg5ei4] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.agc-refresh[b-yr7hlg5ei4] {
    flex-shrink: 0;
}

.agc-spin[b-yr7hlg5ei4] {
    animation: agc-rotate-b-yr7hlg5ei4 1s linear infinite;
}

@keyframes agc-rotate-b-yr7hlg5ei4 {
    to { transform: rotate(360deg); }
}

/* ── Paused ─────────────────────────────────────────────────────────────── */

.agc-paused[b-yr7hlg5ei4] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.agc-paused-text[b-yr7hlg5ei4] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.agc-paused-text strong[b-yr7hlg5ei4] {
    font-size: 0.86rem;
    font-weight: 600;
}

.agc-paused-text span[b-yr7hlg5ei4] {
    font-size: 0.8rem;
    line-height: 1.45;
}

.agc-resume[b-yr7hlg5ei4] {
    flex-shrink: 0;
}

/* ── Sending ────────────────────────────────────────────────────────────── */

.agc-send[b-yr7hlg5ei4] {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.agc-title[b-yr7hlg5ei4] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.agc-note[b-yr7hlg5ei4],
.agc-status[b-yr7hlg5ei4] {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.agc-status[b-yr7hlg5ei4] {
    color: var(--color-text-muted);
}

.agc-fields[b-yr7hlg5ei4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.85rem;
}

.agc-field[b-yr7hlg5ei4] {
    min-width: 0;
}

.agc-what[b-yr7hlg5ei4] {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.agc-caveat[b-yr7hlg5ei4] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.agc-caveat--warn[b-yr7hlg5ei4] {
    color: var(--color-degraded);
}

.agc-caveat--danger[b-yr7hlg5ei4] {
    color: var(--color-down);
}

.agc-actions[b-yr7hlg5ei4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.agc-actions-note[b-yr7hlg5ei4] {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* ── The last command ───────────────────────────────────────────────────── */

.agc-run[b-yr7hlg5ei4] {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.agc-run--waiting[b-yr7hlg5ei4] {
    border-left-color: var(--color-text-muted);
}

.agc-run--replied[b-yr7hlg5ei4] {
    border-left-color: var(--color-healthy);
}

.agc-run--stillqueued[b-yr7hlg5ei4] {
    border-left-color: var(--color-degraded);
}

.agc-run--notsent[b-yr7hlg5ei4] {
    border-left-color: var(--color-down);
}

.agc-run-head[b-yr7hlg5ei4] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.agc-run-what[b-yr7hlg5ei4] {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.agc-run-count[b-yr7hlg5ei4] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.agc-run-line[b-yr7hlg5ei4] {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.agc-run-notice[b-yr7hlg5ei4] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.agc-reply[b-yr7hlg5ei4] {
    margin-top: 0.7rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.agc-reply-head[b-yr7hlg5ei4] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-primary);
}

.agc-reply-when[b-yr7hlg5ei4] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── The log ────────────────────────────────────────────────────────────── */

.agc-log[b-yr7hlg5ei4] {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.agc-log-list[b-yr7hlg5ei4] {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agc-log-item[b-yr7hlg5ei4] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.agc-log-item--problem[b-yr7hlg5ei4] {
    border-color: var(--status-error-border);
}

.agc-log-head[b-yr7hlg5ei4] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.agc-log-when[b-yr7hlg5ei4] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.agc-log-title[b-yr7hlg5ei4] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.agc-log-raw[b-yr7hlg5ei4],
.agc-log-status[b-yr7hlg5ei4],
.agc-log-code[b-yr7hlg5ei4] {
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.agc-log-code[b-yr7hlg5ei4] {
    color: var(--color-down);
    border-color: var(--status-error-border);
}

/*  Payloads are whatever the agent sent — JSON objects, sentences, directory
    listings. Monospace and scrollable rather than reformatted: this is the raw
    reply, and the point of showing it is that it has not been interpreted. */
.agc-body[b-yr7hlg5ei4] {
    margin: 0.45rem 0 0;
    padding: 0.5rem 0.6rem;
    max-height: 16rem;
    overflow: auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.agc-withheld[b-yr7hlg5ei4] {
    margin: 0.45rem 0 0;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    border: 1px dashed var(--color-border);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
/* /Components/Features/Automation/AutomationFieldGrid.razor.rz.scp.css */
/*  The Automation area's field vocabulary, published once for every form in it.

    Everything under ::deep styles markup this component does not own — the
    Edit* primitives' .fd-field and .fd-switch — which is the arrangement those
    primitives are built for. Tokens only, no raw hex. */

.afg[b-e8zkrd800q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
    align-items: start;
}

.afg--wide[b-e8zkrd800q] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.afg[b-e8zkrd800q]  .afg-row {
    min-width: 0;

    /*  Pages in this area put a save bar against their bottom edge. Without this,
        a field scrolled into view by keyboard focus lands under that bar and
        cannot be clicked. */
    scroll-margin-bottom: 5.5rem;
}

/*  Paths, descriptions and anything else that is unreadable in a 240px column. */
.afg[b-e8zkrd800q]  .afg-row--wide {
    grid-column: 1 / -1;
}

/* ── The Edit* field vocabulary ──────────────────────────────────────────── */

.afg[b-e8zkrd800q]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.afg[b-e8zkrd800q]  .fd-field .form-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
}

.afg[b-e8zkrd800q]  .fd-field .form-hint,
.afg[b-e8zkrd800q]  .fd-field .form-error {
    margin-top: 0;
    max-width: 60ch;
}

.afg[b-e8zkrd800q]  .fd-field-textarea {
    resize: vertical;
    min-height: 3.25rem;
    line-height: 1.45;
}

.afg[b-e8zkrd800q]  .fd-field-number {
    max-width: 9rem;
}

.afg[b-e8zkrd800q]  .fd-field-select {
    appearance: auto;
}

/* ── Switch ─────────────────────────────────────────────────────────────── */

/*  position: relative so the visually-hidden checkbox inside is positioned
    against its own switch rather than the initial containing block. */
.afg[b-e8zkrd800q]  .fd-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.afg[b-e8zkrd800q]  .fd-switch--off {
    cursor: not-allowed;
    opacity: 0.6;
}

/*  Visually hidden, not display:none — the checkbox is still the control, and it
    still has to be focusable and reachable by a screen reader. */
.afg[b-e8zkrd800q]  .fd-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.afg[b-e8zkrd800q]  .fd-switch-track {
    position: relative;
    flex: none;
    width: 2rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    transition: background 0.12s, border-color 0.12s;
}

.afg[b-e8zkrd800q]  .fd-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transform: translate(0, -50%);
    transition: transform 0.12s, background 0.12s;
}

.afg[b-e8zkrd800q]  .fd-switch-input:checked + .fd-switch-track {
    background: color-mix(in srgb, var(--color-brand-teal) 22%, white);
    border-color: var(--color-brand-teal);
}

.afg[b-e8zkrd800q]  .fd-switch-input:checked + .fd-switch-track .fd-switch-thumb {
    background: var(--color-brand-teal);
    transform: translate(0.8125rem, -50%);
}

/*  The focus ring lives on the track because the input itself is clipped to a
    pixel; without this the switch has no visible focus at all. */
.afg[b-e8zkrd800q]  .fd-switch-input:focus-visible + .fd-switch-track {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.afg[b-e8zkrd800q]  .fd-switch-state {
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .afg[b-e8zkrd800q]  .fd-switch-track,
    .afg[b-e8zkrd800q]  .fd-switch-thumb { transition: none; }
}
/* /Components/Features/Automation/AutomationKpiTile.razor.rz.scp.css */
/*  Automation KPI tile.

    Shares the visual language of the home dashboard's .kpi-tile, with two
    states that one does not have: stale and unknown. Both are dimmed and both
    carry a small glyph, so a missing figure never reads as a confident one. */

.akt[b-1kzpxxs20t] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.akt:hover[b-1kzpxxs20t] {
    border-color: var(--color-brand);
}

.akt:focus-visible[b-1kzpxxs20t] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.akt-label[b-1kzpxxs20t] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.akt-value[b-1kzpxxs20t] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-title);
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.akt-flag[b-1kzpxxs20t] {
    display: inline-flex;
    color: var(--color-text-secondary);
}

.akt-sub[b-1kzpxxs20t] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/*  Attention: a left rule, not a red number. The figure itself is a fact; the
    rule is the editorial. */
.akt--attention[b-1kzpxxs20t] {
    border-left: 3px solid var(--color-degraded);
}

.akt--attention .akt-value[b-1kzpxxs20t] {
    color: #92400e;
}

/*  Stale and unknown both mute the figure. Unknown mutes it hardest — there is
    no figure, and the tile should not look like it is reporting one. */
.akt--stale .akt-value[b-1kzpxxs20t] {
    color: var(--color-text-secondary);
}

.akt--unknown[b-1kzpxxs20t] {
    background: var(--status-neutral-bg);
    border-style: dashed;
}

.akt--unknown .akt-value[b-1kzpxxs20t] {
    color: var(--color-unknown);
}

.akt--unknown .akt-sub[b-1kzpxxs20t],
.akt--stale .akt-sub[b-1kzpxxs20t] {
    color: #92400e;
}
/* /Components/Features/Automation/ClientKeyOnce.razor.rz.scp.css */
/*  The show-once key panel. Loud on purpose: it is the only moment the operator
    can capture a credential, and a calm panel would be the wrong kind of calm.
    Tokens only. */

.cko[b-w7hkz15qy2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-brand-teal);
    border-radius: var(--radius, 0.5rem);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface, white));
}

.cko-head[b-w7hkz15qy2] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.cko-icon[b-w7hkz15qy2] {
    flex: none;
    margin-top: 0.125rem;
    color: var(--color-brand-teal);
}

.cko-title[b-w7hkz15qy2] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cko-lede[b-w7hkz15qy2] {
    margin: 0.25rem 0 0;
    max-width: 70ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cko-value-row[b-w7hkz15qy2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cko-value[b-w7hkz15qy2] {
    flex: 1 1 22rem;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.cko-copy[b-w7hkz15qy2],
.cko-done[b-w7hkz15qy2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}
/* /Components/Features/Automation/ImportAssistantPanel.razor.rz.scp.css */
/*  The import assistant panel. Calm rather than flashy: this is a management
    surface that happens to have a model behind it, not an AI product.

    Confidence is a word first and a colour second, so the claim reads the same
    in greyscale — and so that "high" can never look like a verdict.

    Tokens only — no raw hex. */

.iap[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt, var(--color-surface));
}

.iap-head[b-6mxrxfzwwm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.iap-title-block[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 18rem;
    flex: 1 1 22rem;
}

.iap-title[b-6mxrxfzwwm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.iap-title-icon[b-6mxrxfzwwm] {
    color: var(--color-accent, var(--color-text-secondary));
}

.iap-lede[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.iap-run[b-6mxrxfzwwm] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.iap-status[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.iap-error[b-6mxrxfzwwm] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
    font-size: 0.83rem;
    line-height: 1.5;
}

.iap-prose[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 60rem;
}

.iap-prose p[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.6;
}

.iap-empty[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* ── The review list ──────────────────────────────────────────────────── */

.iap-review[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.iap-review-head[b-6mxrxfzwwm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iap-review-title[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.iap-review-blocked[b-6mxrxfzwwm] {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.iap-bulk[b-6mxrxfzwwm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.iap-bulk:hover:not(:disabled)[b-6mxrxfzwwm] {
    border-color: var(--color-border-strong, var(--color-border));
}

.iap-bulk:disabled[b-6mxrxfzwwm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.iap-caveat[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.iap-rows[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iap-row[b-6mxrxfzwwm] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.iap-row--accepted[b-6mxrxfzwwm] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
}

.iap-row--skipped[b-6mxrxfzwwm] {
    opacity: 0.6;
}

.iap-row-main[b-6mxrxfzwwm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.iap-row-target[b-6mxrxfzwwm] {
    font-weight: 600;
}

.iap-row-arrow[b-6mxrxfzwwm] {
    color: var(--color-text-secondary);
}

.iap-row-source[b-6mxrxfzwwm] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.iap-confidence[b-6mxrxfzwwm] {
    margin-left: auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

/*  Deliberately restrained. "High" is the model's own claim and gates a
    convenience action; a green badge would read as a verdict. */
.iap-confidence--high[b-6mxrxfzwwm] {
    border-color: var(--color-border-strong, var(--color-border));
    color: var(--color-text);
}

.iap-row-reason[b-6mxrxfzwwm],
.iap-row-state[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.iap-row-state[b-6mxrxfzwwm] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.iap-row-blocked[b-6mxrxfzwwm],
.iap-row-warn[b-6mxrxfzwwm] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.iap-row-blocked[b-6mxrxfzwwm] {
    color: var(--status-error-fg);
}

.iap-row-warn[b-6mxrxfzwwm] {
    color: var(--status-warning-fg);
}

.iap-row-actions[b-6mxrxfzwwm] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

.iap-accept[b-6mxrxfzwwm],
.iap-skip[b-6mxrxfzwwm] {
    padding: 0.22rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.iap-accept:hover:not(:disabled)[b-6mxrxfzwwm],
.iap-skip:hover:not(:disabled)[b-6mxrxfzwwm] {
    border-color: var(--color-border-strong, var(--color-border));
}

.iap-accept:disabled[b-6mxrxfzwwm],
.iap-skip:disabled[b-6mxrxfzwwm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.iap-usage[b-6mxrxfzwwm] {
    margin: 0;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.iap-usage-link[b-6mxrxfzwwm] {
    color: inherit;
    text-decoration: underline;
}
/* /Components/Features/Automation/ImportPackageDialog.razor.rz.scp.css */
/* Inside Drawer's body, so no frame of its own — just the rhythm of the three
   steps: what was read, what it would create, and what happened. */

.ipd-lede[b-rrgi8uauck] {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.ipd-head[b-rrgi8uauck] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ipd-head .ipd-lede[b-rrgi8uauck] {
    flex: 1;
    min-width: 14rem;
}

.ipd-change[b-rrgi8uauck] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
}

.ipd-prefix[b-rrgi8uauck] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ipd-status[b-rrgi8uauck] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ipd-error[b-rrgi8uauck] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--status-error-fg);
}

/* ── One definition ──────────────────────────────────────────────────────── */

.ipd-entries[b-rrgi8uauck] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ipd-entry[b-rrgi8uauck] {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ipd-entry-head[b-rrgi8uauck] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ipd-entry-name[b-rrgi8uauck] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    word-break: break-word;
}

.ipd-entry-meta[b-rrgi8uauck] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ipd-dot[b-rrgi8uauck] {
    margin: 0 0.3rem;
    color: var(--color-border);
}

.ipd-entry-path[b-rrgi8uauck] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0.5rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    word-break: break-all;
}

.ipd-plan[b-rrgi8uauck] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

/* The provenance line on an entry whose rules came from a snapshot rather than
   from DocMX. Informational, not a warning: it is a normal thing for the export
   of a disabled import to be, and it only needs to be known. */
.ipd-note[b-rrgi8uauck] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--color-surface-raised);
    border-left: 3px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ipd-issues[b-rrgi8uauck] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.8125rem;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ipd-issues--error[b-rrgi8uauck] {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.ipd-issues--warn[b-rrgi8uauck] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.ipd-code[b-rrgi8uauck] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    opacity: 0.8;
    margin-right: 0.3rem;
}

/* Collapsed by default: the rules are the detail behind the plan line, and a
   file of eleven definitions should open as eleven headings rather than as a
   wall of tables. */
.ipd-rules > summary[b-rrgi8uauck] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ipd-rules > summary:focus-visible[b-rrgi8uauck] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.ipd-rules[open] > summary[b-rrgi8uauck] {
    margin-bottom: 0.5rem;
}
/* /Components/Features/Automation/ImportRulesTable.razor.rz.scp.css */
/*  The mapping rules of one import.

    Six columns of stored values — and, when editable, six columns of inputs —
    in a detail pane that is about 900px wide on a large laptop and 500px on a
    small one. The target and delimiter cells stack two controls so the table
    stays six columns wide rather than eight; what it must not lose is the
    focus ring on any input or the word beside any marker.

    Tokens only — no raw hex. */

.irt[b-u2tppfmqkr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.irt-head[b-u2tppfmqkr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.irt-title[b-u2tppfmqkr] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.irt-pill[b-u2tppfmqkr] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.irt-count[b-u2tppfmqkr] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.irt-add[b-u2tppfmqkr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
}

.irt-note[b-u2tppfmqkr] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 72ch;
}

.irt-empty[b-u2tppfmqkr] {
    margin: 0.25rem 0 0;
    padding: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ── The table ──────────────────────────────────────────────────────────── */

/*  overflow-x is a last resort: the columns are sized to fit, and this only
    stops an unusually long delimiter from being cropped invisibly. */
.irt-wrap[b-u2tppfmqkr] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.irt-table[b-u2tppfmqkr] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 640px;
    font-size: 0.82rem;
}

.irt-table th[b-u2tppfmqkr],
.irt-table td[b-u2tppfmqkr] {
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    min-width: 0;
}

.irt-table thead th[b-u2tppfmqkr] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
}

.irt-table tbody tr:last-child th[b-u2tppfmqkr],
.irt-table tbody tr:last-child td[b-u2tppfmqkr] {
    border-bottom: none;
}

.irt-table tbody th[b-u2tppfmqkr] {
    font-weight: 500;
    color: var(--color-text-primary);
}

/*  A row that can never set anything reads quieter, and says why in words. */
.irt-row--inert td[b-u2tppfmqkr],
.irt-row--inert th[b-u2tppfmqkr] {
    color: var(--color-text-secondary);
}

.irt-col-n[b-u2tppfmqkr]       { width: 6rem; }
.irt-col-target[b-u2tppfmqkr]  { width: 20%; }
.irt-col-mode[b-u2tppfmqkr]    { width: 15%; }
.irt-col-delims[b-u2tppfmqkr]  { width: 24%; }
.irt-col-lookup[b-u2tppfmqkr]  { width: 15%; }
.irt-col-remove[b-u2tppfmqkr]  { width: 2.75rem; }

/* ── Cells ──────────────────────────────────────────────────────────────── */

.irt-n[b-u2tppfmqkr] {
    font-variant-numeric: tabular-nums;
}

.irt-id[b-u2tppfmqkr] {
    display: block;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

.irt-tag[b-u2tppfmqkr] {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-teal) 12%, var(--color-surface));
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brand);
}

.irt-stack[b-u2tppfmqkr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.irt-main[b-u2tppfmqkr] {
    color: var(--color-text-primary);
}

.irt-sub[b-u2tppfmqkr] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.irt-delim[b-u2tppfmqkr] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.irt-delim-k[b-u2tppfmqkr] {
    flex: none;
    width: 2.2rem;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.irt-delim code[b-u2tppfmqkr],
.irt-default[b-u2tppfmqkr] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.3rem;
}

/*  A stored value the portal cannot name, or the legacy literal. Words, in the
    degraded tone, on a pill: the same treatment wherever it appears. */
.irt-marker[b-u2tppfmqkr] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
    white-space: nowrap;
}

.irt-marker--inert[b-u2tppfmqkr] {
    display: block;
    width: fit-content;
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */

.irt-input[b-u2tppfmqkr] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
}

.irt-input--mono[b-u2tppfmqkr] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.irt-input--num[b-u2tppfmqkr] {
    max-width: 8rem;
}

select.irt-input[b-u2tppfmqkr] {
    appearance: auto;
}

.irt-remove[b-u2tppfmqkr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.irt-remove:hover:not(:disabled)[b-u2tppfmqkr] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-down);
}

.irt-remove:focus-visible[b-u2tppfmqkr] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.irt-remove:disabled[b-u2tppfmqkr] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Features/Automation/ImportSegmentView.razor.rz.scp.css */
/*  The source record of one import run, with each rule's reading marked.

    Six highlight colours, each of which pairs a background with a left border,
    so a rule is identifiable in greyscale by its position in the legend as well
    as by its colour. The one highlight that carries meaning on its own — the
    engine reading from the wrong place because a start delimiter was missing —
    is additionally marked with a word and an icon in the legend beside it.

    Tokens only, except the six palette hues: there is no semantic token for
    "the third of six arbitrary highlights", and inventing six global ones for a
    single panel would be worse than keeping them here. */

.seg[b-d119l8m1vd] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;

    /*  The six hues, named once. They are used twice — on the marks inside the
        record and on the swatch beside each rule in the legend — and those two
        need different selectors (see below), so the values must not be. */
    --seg-c0-bg: #dbeafe; --seg-c0-fg: #2563eb;
    --seg-c1-bg: #dcfce7; --seg-c1-fg: #16a34a;
    --seg-c2-bg: #fef3c7; --seg-c2-fg: #d97706;
    --seg-c3-bg: #ede9fe; --seg-c3-fg: #7c3aed;
    --seg-c4-bg: #fce7f3; --seg-c4-fg: #db2777;
    --seg-c5-bg: #ccfbf1; --seg-c5-fg: #0d9488;
}

.seg-empty[b-d119l8m1vd] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.seg-doc[b-d119l8m1vd] {
    max-height: 22rem;
    overflow: auto;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.55;

    /* The record is shown as it is stored: whitespace preserved, long lines
       wrapped rather than scrolled off, because an XML source file is one very
       long line as often as not. */
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
}

/*  ── The marks inside the record ──────────────────────────────────────
    Reached through ::deep, and that is not a style choice. The marks are built
    from a RenderFragment in code so the record is reproduced character for
    character (see the component), and Blazor injects its scoped-CSS attribute
    only into Razor-compiled markup — an element created by hand never carries
    one. ::deep compiles to ".seg-doc[b-xxx] <selector>", which matches a
    descendant whatever its own scope, and is the mechanism for exactly this.
    Without it the browser's default yellow mark styling wins and every rule
    looks alike. */

.seg-doc[b-d119l8m1vd]  mark {
    color: inherit;
}

.seg-doc[b-d119l8m1vd]  .seg-hit {
    padding: 0.05rem 0;
    border-bottom: 2px solid currentColor;
    border-radius: 2px;
    background: transparent;
}

.seg-doc[b-d119l8m1vd]  .seg-hit--bad {
    text-decoration: underline wavy var(--color-down);
    text-underline-offset: 0.2rem;
}

.seg-doc[b-d119l8m1vd]  .seg-c0 { background: var(--seg-c0-bg); border-bottom-color: var(--seg-c0-fg); }
.seg-doc[b-d119l8m1vd]  .seg-c1 { background: var(--seg-c1-bg); border-bottom-color: var(--seg-c1-fg); }
.seg-doc[b-d119l8m1vd]  .seg-c2 { background: var(--seg-c2-bg); border-bottom-color: var(--seg-c2-fg); }
.seg-doc[b-d119l8m1vd]  .seg-c3 { background: var(--seg-c3-bg); border-bottom-color: var(--seg-c3-fg); }
.seg-doc[b-d119l8m1vd]  .seg-c4 { background: var(--seg-c4-bg); border-bottom-color: var(--seg-c4-fg); }
.seg-doc[b-d119l8m1vd]  .seg-c5 { background: var(--seg-c5-bg); border-bottom-color: var(--seg-c5-fg); }

.seg-doc[b-d119l8m1vd]  .seg-c-none {
    background: var(--status-neutral-bg);
    border-bottom-color: var(--color-unknown);
}

/* ── The legend swatches — ordinary Razor markup, so ordinary selectors ── */

.seg-rule-swatch.seg-c0[b-d119l8m1vd] { background: var(--seg-c0-bg); border-bottom-color: var(--seg-c0-fg); }
.seg-rule-swatch.seg-c1[b-d119l8m1vd] { background: var(--seg-c1-bg); border-bottom-color: var(--seg-c1-fg); }
.seg-rule-swatch.seg-c2[b-d119l8m1vd] { background: var(--seg-c2-bg); border-bottom-color: var(--seg-c2-fg); }
.seg-rule-swatch.seg-c3[b-d119l8m1vd] { background: var(--seg-c3-bg); border-bottom-color: var(--seg-c3-fg); }
.seg-rule-swatch.seg-c4[b-d119l8m1vd] { background: var(--seg-c4-bg); border-bottom-color: var(--seg-c4-fg); }
.seg-rule-swatch.seg-c5[b-d119l8m1vd] { background: var(--seg-c5-bg); border-bottom-color: var(--seg-c5-fg); }

.seg-rule-swatch.seg-c-none[b-d119l8m1vd] {
    background: var(--status-neutral-bg);
    border-bottom-color: var(--color-unknown);
}

.seg-note[b-d119l8m1vd] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* ── The legend ─────────────────────────────────────────────────────── */

.seg-legend[b-d119l8m1vd] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seg-rule[b-d119l8m1vd] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.seg-rule--bad[b-d119l8m1vd] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

.seg-rule-swatch[b-d119l8m1vd] {
    flex: none;
    width: 0.55rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    border-radius: 2px;
    border-bottom: 2px solid currentColor;
}

.seg-rule-body[b-d119l8m1vd] {
    flex: 1;
    min-width: 0;
}

.seg-rule-head[b-d119l8m1vd] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0 0 0.25rem;
}

.seg-rule-name[b-d119l8m1vd] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.seg-rule-value[b-d119l8m1vd] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.8rem;
}

.seg-rule-value code[b-d119l8m1vd] {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--status-neutral-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.seg-rule-value--none[b-d119l8m1vd] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.seg-rule-label[b-d119l8m1vd] {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.seg-rule-raw[b-d119l8m1vd] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.seg-rule-note[b-d119l8m1vd] {
    margin: 0.3rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}
/* /Components/Features/Automation/ImportSettingsEditor.razor.rz.scp.css */
/*  The import settings editor's layout, and the field vocabulary the designer's
    Edit* primitives expect.

    The Edit* components render .fd-field / .fd-switch markup and carry no CSS of
    their own: their host publishes the rules through ::deep. This is the same
    arrangement TransferDestinationEditor uses, sized for a two-column pane.

    Tokens only — no raw hex. */

.ise-fields[b-2ej1i5gfrx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
    align-items: start;
}

.ise-row[b-2ej1i5gfrx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    /*  The host pane has a save bar stuck to its bottom edge. Without this, a
        field scrolled into view by keyboard focus lands under that bar. */
    scroll-margin-bottom: 5.5rem;
}

/*  Name and the two paths run the full width: a Windows path in a 240px column
    is unreadable. */
.ise-row--wide[b-2ej1i5gfrx] {
    grid-column: 1 / -1;
}

/*  A stored value the portal cannot name. role="note" and words, not a colour:
    the point is to say what will happen to it. */
.ise-marker[b-2ej1i5gfrx] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
    max-width: 60ch;
}

.ise-marker code[b-2ej1i5gfrx] {
    font-size: 0.72rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.25rem;
}

/*  The engine-never-reads-this pill. Quiet, but always there: the hint text
    says it too, and the pill survives a skim. */
.ise-not-honoured[b-2ej1i5gfrx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

/* ── The Edit* field vocabulary ──────────────────────────────────────────── */

.ise-row[b-2ej1i5gfrx]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ise-row[b-2ej1i5gfrx]  .fd-field .form-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
}

.ise-row[b-2ej1i5gfrx]  .fd-field .form-hint,
.ise-row[b-2ej1i5gfrx]  .fd-field .form-error {
    margin-top: 0;
    max-width: 60ch;
}

.ise-row[b-2ej1i5gfrx]  .fd-field-select {
    appearance: auto;
}

/* ── Switch ─────────────────────────────────────────────────────────────── */

.ise-row[b-2ej1i5gfrx]  .fd-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.ise-row[b-2ej1i5gfrx]  .fd-switch--off {
    cursor: not-allowed;
    opacity: 0.6;
}

/*  Visually hidden, not display:none — the checkbox is still the control. */
.ise-row[b-2ej1i5gfrx]  .fd-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-track {
    position: relative;
    flex: none;
    width: 2rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    transition: background 0.12s, border-color 0.12s;
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transform: translate(0, -50%);
    transition: transform 0.12s, background 0.12s;
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-input:checked + .fd-switch-track {
    background: color-mix(in srgb, var(--color-brand-teal) 22%, white);
    border-color: var(--color-brand-teal);
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-input:checked + .fd-switch-track .fd-switch-thumb {
    background: var(--color-brand-teal);
    transform: translate(0.8125rem, -50%);
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-input:focus-visible + .fd-switch-track {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.ise-row[b-2ej1i5gfrx]  .fd-switch-state {
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .ise-row[b-2ej1i5gfrx]  .fd-switch-track,
    .ise-row[b-2ej1i5gfrx]  .fd-switch-thumb { transition: none; }
}
/* /Components/Features/Automation/PipelineMap.razor.rz.scp.css */
/*  The pipeline map.

    Two layers at identical coordinates: an SVG of edges underneath, and real
    anchors on top. The geometry comes from the component, so nothing here may
    change a size — only how it looks. */

.pm[b-wof2v6ypm1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.pm-empty[b-wof2v6ypm1] {
    margin: 0;
    padding: 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* ── Column headers ─────────────────────────────────────────────────────── */

.pm-headers[b-wof2v6ypm1] {
    display: grid;
    align-items: baseline;
    gap: 0;
    min-width: max-content;
}

.pm-col-header[b-wof2v6ypm1] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.pm-col-link[b-wof2v6ypm1] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.pm-col-link:hover[b-wof2v6ypm1],
.pm-col-link:focus-visible[b-wof2v6ypm1] {
    color: var(--color-brand);
    text-decoration: underline;
}

.pm-col-count[b-wof2v6ypm1] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    background: var(--status-neutral-bg);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

/* ── The canvas ─────────────────────────────────────────────────────────── */

.pm-canvas[b-wof2v6ypm1] {
    position: relative;
    min-width: max-content;
}

.pm-edges[b-wof2v6ypm1] {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.pm-edge[b-wof2v6ypm1] {
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
}

/*  Solid, brand-coloured, confident: DocMX stores this value. */
.pm-edge--recorded[b-wof2v6ypm1] {
    stroke: var(--color-brand);
}

/*  Dashed, amber, deliberately unlike the one above: nothing upstream records
    this, and an operator has to be able to see that at a glance rather than by
    reading a tooltip. */
.pm-edge--convention[b-wof2v6ypm1] {
    stroke: var(--color-degraded);
    stroke-dasharray: 6 5;
}

.pm-arrow--recorded[b-wof2v6ypm1] {
    fill: var(--color-brand);
}

.pm-arrow--convention[b-wof2v6ypm1] {
    fill: var(--color-degraded);
}

/*  Edge labels sit on the same layer as the node cards, at the midpoint of
    their curve. A chip rather than bare text so the line behind them does not
    strike through the words. */
.pm-edge-label[b-wof2v6ypm1] {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    background: var(--color-surface);
    white-space: nowrap;
    pointer-events: none;
}

.pm-edge-label--recorded[b-wof2v6ypm1] {
    color: var(--color-brand);
}

/*  Italic as well as amber: the difference between the two edge kinds must
    survive a monochrome print and a colour-blind reader. */
.pm-edge-label--convention[b-wof2v6ypm1] {
    color: #92400e;
    font-style: italic;
}

/* ── Node cards ─────────────────────────────────────────────────────────── */

.pm-node[b-wof2v6ypm1] {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.pm-node:hover[b-wof2v6ypm1] {
    border-color: var(--color-brand);
}

.pm-node:focus-visible[b-wof2v6ypm1] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.pm-node--attention[b-wof2v6ypm1] {
    border-left: 3px solid var(--color-degraded);
}

.pm-node-name[b-wof2v6ypm1] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-node-detail[b-wof2v6ypm1] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /*  Folders read left-to-right but identify right-to-left, so the tail is
        what matters when one is cropped. The full path is in the title. */
    direction: rtl;
    text-align: left;
}

.pm-node-status[b-wof2v6ypm1] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.pm-node--attention .pm-node-status[b-wof2v6ypm1] {
    color: #92400e;
    font-weight: 600;
}

/* ── Legend and notes ───────────────────────────────────────────────────── */

.pm-legend[b-wof2v6ypm1] {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 60rem;
}

.pm-legend li[b-wof2v6ypm1] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.pm-legend strong[b-wof2v6ypm1] {
    color: var(--color-text-primary);
}

.pm-legend code[b-wof2v6ypm1] {
    font-size: 0.7rem;
    background: var(--status-neutral-bg);
    border-radius: 3px;
    padding: 0 0.2rem;
}

.pm-key[b-wof2v6ypm1] {
    flex: 0 0 auto;
    overflow: visible;
}

.pm-note[b-wof2v6ypm1] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    max-width: 60rem;
}
/* /Components/Features/Automation/TransferDestinationEditor.razor.rz.scp.css */
/*  The destination editor's layout, and the field vocabulary the designer's
    Edit* primitives expect.

    The Edit* components render .fd-field / .fd-switch markup and carry no CSS of
    their own: their host publishes the rules through ::deep. InspectorShell does
    it for the inspectors and TriggerEditor does it for the trigger form; this is
    the same arrangement for the Automation area, sized for a two-column pane
    rather than a 320px rail.

    Tokens only — no raw hex. */

.tde-fields[b-wbzl8rhvxo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
    align-items: start;
}

.tde-row[b-wbzl8rhvxo] {
    min-width: 0;

    /*  The host pane has a save bar stuck to its bottom edge. Without this, a
        field scrolled into view by keyboard focus (or by a test's
        scrollIntoView) lands directly under that bar and cannot be clicked. */
    scroll-margin-bottom: 5.5rem;
}

/*  Name, Path and Description run the full width: a Windows path in a 240px
    column is unreadable, and the description is prose. */
.tde-row--wide[b-wbzl8rhvxo] {
    grid-column: 1 / -1;
}

/* ── The Edit* field vocabulary ──────────────────────────────────────────── */

.tde-row[b-wbzl8rhvxo]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.tde-row[b-wbzl8rhvxo]  .fd-field .form-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
}

.tde-row[b-wbzl8rhvxo]  .fd-field .form-hint,
.tde-row[b-wbzl8rhvxo]  .fd-field .form-error {
    margin-top: 0;
    max-width: 60ch;
}

.tde-row[b-wbzl8rhvxo]  .fd-field-textarea {
    resize: vertical;
    min-height: 3.25rem;
    line-height: 1.45;
}

/*  Wider than the inspector's 11rem: this pane has the room, and an icon
    ordinal beside a full-width select looks stranded when it is too narrow. */
.tde-row[b-wbzl8rhvxo]  .fd-field-number {
    max-width: 9rem;
}

.tde-row[b-wbzl8rhvxo]  .fd-field-select {
    appearance: auto;
}

/* ── Switch ─────────────────────────────────────────────────────────────── */

/*  position: relative so the visually-hidden checkbox inside is positioned
    against its own switch. Without a positioned ancestor an absolutely
    positioned element resolves against the initial containing block, which puts
    the (1px, clipped) input at the top-left of the document — far from the
    control it belongs to, and in the way of whatever is actually there. */
.tde-row[b-wbzl8rhvxo]  .fd-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.tde-row[b-wbzl8rhvxo]  .fd-switch--off {
    cursor: not-allowed;
    opacity: 0.6;
}

/*  Visually hidden, not display:none — the checkbox is still the control, and it
    still has to be focusable and reachable by a screen reader. */
.tde-row[b-wbzl8rhvxo]  .fd-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tde-row[b-wbzl8rhvxo]  .fd-switch-track {
    position: relative;
    flex: none;
    width: 2rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    transition: background 0.12s, border-color 0.12s;
}

.tde-row[b-wbzl8rhvxo]  .fd-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transform: translate(0, -50%);
    transition: transform 0.12s, background 0.12s;
}

.tde-row[b-wbzl8rhvxo]  .fd-switch-input:checked + .fd-switch-track {
    background: color-mix(in srgb, var(--color-brand-teal) 22%, white);
    border-color: var(--color-brand-teal);
}

.tde-row[b-wbzl8rhvxo]  .fd-switch-input:checked + .fd-switch-track .fd-switch-thumb {
    background: var(--color-brand-teal);
    transform: translate(0.8125rem, -50%);
}

/*  The focus ring lives on the track because the input itself is clipped to a
    pixel; without this the switch has no visible focus at all. */
.tde-row[b-wbzl8rhvxo]  .fd-switch-input:focus-visible + .fd-switch-track {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.tde-row[b-wbzl8rhvxo]  .fd-switch-state {
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .tde-row[b-wbzl8rhvxo]  .fd-switch-track,
    .tde-row[b-wbzl8rhvxo]  .fd-switch-thumb { transition: none; }
}
/* /Components/Features/Automation/TransferSecurityTab.razor.rz.scp.css */
/*  Security grants on one transfer destination.

    A permission grid earns its density: five boolean columns beside a name, in a
    detail pane about 500px wide on a 1280px laptop. What it must not lose in
    getting tight is the focus ring on a checkbox or the word beside a status —
    both are the only signal a keyboard or a screen-reader user has.

    Tokens only — no raw hex. */

.tsec[b-rv7fpt2acj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tsec-head[b-rv7fpt2acj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tsec-title[b-rv7fpt2acj] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tsec-pill[b-rv7fpt2acj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.tsec-note[b-rv7fpt2acj] {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.tsec-note--quiet[b-rv7fpt2acj] {
    font-style: italic;
}

/*  A failure is announced by role="alert" and shown as an icon plus words, never
    as a colour on its own. */
.tsec-error[b-rv7fpt2acj] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 40%, var(--color-border));
    border-left: 3px solid var(--color-down);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--color-down) 6%, var(--color-surface));
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.tsec-status[b-rv7fpt2acj] {
    margin: 0.6rem 0 0;
    min-height: 1.1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* ── The grid ───────────────────────────────────────────────────────────── */

.tsec-principal[b-rv7fpt2acj] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tsec-principal-top[b-rv7fpt2acj] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.tsec-principal-name[b-rv7fpt2acj] {
    font-weight: 500;
    color: var(--color-text-primary);
}

/*  Role or user, as a word. The two behave differently and the difference is not
    inferable from a name. */
.tsec-kind[b-rv7fpt2acj] {
    flex: none;
    padding: 0 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tsec-principal-sub[b-rv7fpt2acj] {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--color-degraded) 65%, var(--color-text-secondary));
}

.tsec-principal-sub code[b-rv7fpt2acj] {
    font-size: 0.68rem;
    word-break: break-all;
}

/*  ::deep — DataTable renders the cells, so a column's CssClass does not carry
    this component's scope. */
[b-rv7fpt2acj] .tsec-cell-perm {
    width: 4.4rem;
    white-space: nowrap;
}

[b-rv7fpt2acj] .tsec-cell-remove {
    width: 2.5rem;
}

.tsec-check[b-rv7fpt2acj] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.tsec-check:disabled[b-rv7fpt2acj] {
    cursor: default;
    opacity: 0.55;
}

.tsec-check:focus-visible[b-rv7fpt2acj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.tsec-remove[b-rv7fpt2acj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.tsec-remove:hover:not(:disabled)[b-rv7fpt2acj] {
    border-color: color-mix(in srgb, var(--color-down) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
    color: var(--color-down);
}

.tsec-remove:focus-visible[b-rv7fpt2acj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.tsec-remove:disabled[b-rv7fpt2acj] {
    cursor: default;
    opacity: 0.5;
}

/* ── Add a grant ────────────────────────────────────────────────────────── */

.tsec-add[b-rv7fpt2acj] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-border);
}

.tsec-add-row[b-rv7fpt2acj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* A role picker and a user typeahead side by side — never one <select> holding
   the site's every role and user (~60k on a production site). */
.tsec-add-grid[b-rv7fpt2acj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.tsec-add-col[b-rv7fpt2acj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tsec-add-chosen[b-rv7fpt2acj] {
    margin: 0;
    flex: 1;
    color: var(--color-text-secondary);
}

.tsec-add-btn[b-rv7fpt2acj] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
/* /Components/Features/Automation/UploadPathForm.razor.rz.scp.css */
/*  The path editor's own layout. The field vocabulary comes from
    AutomationFieldGrid; everything here is the scaffolding around it.
    Tokens only. */

.upf-summary[b-u1y6l78jng] {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.875rem;
    border-left: 3px solid var(--color-brand-teal);
    border-radius: 0 0.25rem 0.25rem 0;
    background: var(--color-surface-raised, #f8fafc);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    max-width: 90ch;
}

.upf-section[b-u1y6l78jng] {
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 1.25rem;
}

.upf-section:last-of-type[b-u1y6l78jng] {
    border-bottom: none;
    margin-bottom: 0;
}

.upf-section-title[b-u1y6l78jng] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #64748b);
}

.upf-section-lede[b-u1y6l78jng] {
    margin: 0.375rem 0 0;
    max-width: 70ch;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.upf-note[b-u1y6l78jng] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.875rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.upf-note--warn[b-u1y6l78jng] {
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

.upf-note code[b-u1y6l78jng] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
}

.upf-lists[b-u1y6l78jng] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.upf-list[b-u1y6l78jng] {
    min-width: 0;
}

.upf-list-hint[b-u1y6l78jng] {
    margin: 0.125rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
}

/*  What the pending save will do to the credential, in words. A password that
    is about to change and a password that is not look identical otherwise —
    SecretInput never shows a value, so this line is the only difference. */
.upf-pending[b-u1y6l78jng] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.upf-undo[b-u1y6l78jng] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-brand-teal);
    text-decoration: underline;
    cursor: pointer;
}

.upf-undo:disabled[b-u1y6l78jng] {
    color: var(--color-text-muted, #64748b);
    cursor: not-allowed;
}

/*  The walk-through to the destination this path feeds. Sits under the picker
    rather than beside it so it re-reads as the current selection changes. */
.upf-destination-link[b-u1y6l78jng] {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
}

.upf-link[b-u1y6l78jng] {
    color: var(--color-brand);
    text-decoration: none;
}

.upf-link:hover[b-u1y6l78jng] {
    text-decoration: underline;
}

.upf-link:focus-visible[b-u1y6l78jng] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 2px;
}
/* /Components/Features/Automation/UploadPathTriggersPanel.razor.rz.scp.css */
/*  Alert rules stored against one watched path — read-only.

    A list of cards rather than a table, because a trigger is six short facts and
    a sentence, and a six-column grid of two rows would be harder to read than the
    thing it describes. The "Read-only" pill sits in the heading rather than over
    a disabled form: there is no form here to disable.

    Tokens only — no raw hex. */

.uptg[b-pbtu94a08z] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.uptg-head[b-pbtu94a08z] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.uptg-title[b-pbtu94a08z] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.uptg-pill[b-pbtu94a08z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.uptg-note[b-pbtu94a08z],
.uptg-status[b-pbtu94a08z] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.uptg-status[b-pbtu94a08z] {
    padding: 0.6rem 0;
    color: var(--color-text-muted);
}

.uptg-error[b-pbtu94a08z] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    border: 1px solid var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.uptg-list[b-pbtu94a08z] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.uptg-item[b-pbtu94a08z] {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

/*  A trigger that is switched off is not doing anything today, however it is
    configured — it recedes rather than disappearing. */
.uptg-item--off[b-pbtu94a08z] {
    background: var(--color-surface-raised);
}

.uptg-item--off .uptg-name[b-pbtu94a08z],
.uptg-item--off .uptg-summary[b-pbtu94a08z] {
    color: var(--color-text-muted);
}

.uptg-item-head[b-pbtu94a08z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uptg-name[b-pbtu94a08z] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.uptg-summary[b-pbtu94a08z] {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.uptg-facts[b-pbtu94a08z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.65rem 0 0;
}

.uptg-fact[b-pbtu94a08z] {
    min-width: 0;
}

.uptg-fact--wide[b-pbtu94a08z] {
    grid-column: 1 / -1;
}

.uptg-fact dt[b-pbtu94a08z] {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.uptg-fact dd[b-pbtu94a08z] {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.uptg-code[b-pbtu94a08z] {
    font-size: 0.76rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}
/* /Components/Features/Automation/UploadQueuePanel.razor.rz.scp.css */
/* The upload file queue: a filter bar over the shared DataTable, and a
   definition-list drawer beside it.

   Nothing here restyles the table, the bulk bar or the drawer — those come from
   the shared kit and are meant to look the same wherever they appear. This
   stylesheet is the filter row, the two-line source cell and the drawer's own
   list. */

.uq[b-83halog2yv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

.uq-filters[b-83halog2yv] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
}

.uq-filter-row[b-83halog2yv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.uq-field[b-83halog2yv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
    flex: 1 1 10rem;
}

.uq-field--wide[b-83halog2yv] {
    flex: 2 1 14rem;
}

.uq-field--date[b-83halog2yv] {
    flex: 0 1 9.5rem;
    min-width: 9.5rem;
}

.uq-field--narrow[b-83halog2yv] {
    flex: 0 1 6rem;
    min-width: 6rem;
}

.uq-input[b-83halog2yv] {
    width: 100%;
}

.uq-filter-actions[b-83halog2yv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.uq-refresh[b-83halog2yv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Says what it counts. It sits beside the controls rather than over the table,
   because the table's own count line is the live region. */
.uq-window[b-83halog2yv] {
    margin: 0 0 0 auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-align: right;
}

.uq-spin[b-83halog2yv] {
    animation: uq-spin-b-83halog2yv 0.9s linear infinite;
}

@keyframes uq-spin-b-83halog2yv {
    to { transform: rotate(360deg); }
}

/* ── Messages ────────────────────────────────────────────────────────────── */

.uq-error[b-83halog2yv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--status-error-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
    font-size: 0.875rem;
}

.uq-note[b-83halog2yv] {
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Cells ───────────────────────────────────────────────────────────────── */

.uq-file[b-83halog2yv] {
    font-weight: 500;
    word-break: break-all;
}

/* Two lines rather than one "a › b" string: the service and the folder are
   different facts, and at this width one of them would always be truncated. */
.uq-source[b-83halog2yv] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

/* Both lines are links where there is somewhere to go (A8.3), styled as text
   until hovered so the grid does not turn into a wall of blue. */
.uq-source-client[b-83halog2yv] {
    color: var(--color-text-primary);
    text-decoration: none;
    align-self: flex-start;
}

.uq-source-path[b-83halog2yv] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    align-self: flex-start;
}

a.uq-source-client:hover[b-83halog2yv],
a.uq-source-client:focus-visible[b-83halog2yv],
a.uq-source-path:hover[b-83halog2yv],
a.uq-source-path:focus-visible[b-83halog2yv] {
    color: var(--color-brand);
    text-decoration: underline;
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */

.uq-detail[b-83halog2yv] {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.uq-detail-row[b-83halog2yv] {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.uq-detail-row:last-child[b-83halog2yv] {
    border-bottom: none;
}

.uq-detail dt[b-83halog2yv] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    padding-top: 0.1rem;
}

.uq-detail dd[b-83halog2yv] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    word-break: break-word;
}

.uq-detail-mono[b-83halog2yv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.uq-detail-note[b-83halog2yv] {
    margin: 1rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .uq-spin[b-83halog2yv] { animation: none; }
}
/* /Components/Features/Automation/Wizard/WizardCheckPanel.razor.rz.scp.css */
/*  The Check step. Severity is carried by a word and a glyph as well as a
    colour; the panel reads the same in greyscale.

    Tokens only — no raw hex. */

.wcp[b-8ftwkhkujs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 68rem;
}

.wcp-summary[b-8ftwkhkujs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wcp-pill[b-8ftwkhkujs] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.78rem;
    font-weight: 500;
}

.wcp-pill--error[b-8ftwkhkujs] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.wcp-pill--warn[b-8ftwkhkujs] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wcp-pill--notice[b-8ftwkhkujs] {
    color: var(--color-text-secondary);
}

.wcp-verdict[b-8ftwkhkujs] {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.wcp-clean[b-8ftwkhkujs] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--status-success-border);
    border-radius: var(--radius);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: 0.85rem;
    line-height: 1.5;
}

.wcp-group[b-8ftwkhkujs] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wcp-group-title[b-8ftwkhkujs] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wcp-group-note[b-8ftwkhkujs] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.wcp-list[b-8ftwkhkujs] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.wcp-finding[b-8ftwkhkujs] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.wcp-finding--error[b-8ftwkhkujs] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

.wcp-finding--warn[b-8ftwkhkujs] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
}

.wcp-finding--notice[b-8ftwkhkujs] {
    background: var(--color-surface-raised);
}

.wcp-glyph[b-8ftwkhkujs] {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.wcp-finding--error .wcp-glyph[b-8ftwkhkujs] { color: var(--status-error-fg); }
.wcp-finding--warn  .wcp-glyph[b-8ftwkhkujs] { color: var(--status-warning-fg); }
.wcp-finding--notice .wcp-glyph[b-8ftwkhkujs] { color: var(--color-text-secondary); }

.wcp-finding-body[b-8ftwkhkujs] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.wcp-finding-text[b-8ftwkhkujs] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.wcp-code[b-8ftwkhkujs] {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.02rem 0.3rem;
    border-radius: 3px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.wcp-jump[b-8ftwkhkujs] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wcp-jump:hover[b-8ftwkhkujs] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.wcp-where code[b-8ftwkhkujs] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Automation/Wizard/WizardMappingTable.razor.rz.scp.css */
/*  The mapping table.

    Four columns in the middle pane of a three-pane surface: the target, the
    source, and the value the engine extracts — which must never be the column
    that scrolls out of sight. Each row's settings sit on a second line and its
    findings on a third, all inside one <tbody>, which is what lets them belong
    to the row without pretending to be columns of the table.

    Tokens only — no raw hex. */

.wmt[b-h98s2813w7] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.wmt-head[b-h98s2813w7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.wmt-title[b-h98s2813w7] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wmt-count[b-h98s2813w7] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wmt-tools[b-h98s2813w7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.wmt-tool[b-h98s2813w7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wmt-tool:hover[b-h98s2813w7] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.wmt-empty[b-h98s2813w7] {
    margin: 0;
    padding: 1.5rem 1rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.wmt-wrap[b-h98s2813w7] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.wmt-table[b-h98s2813w7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.wmt-table thead th[b-h98s2813w7] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wmt-body[b-h98s2813w7] {
    border-bottom: 1px solid var(--color-border);
}

.wmt-body--selected[b-h98s2813w7] {
    background: var(--status-info-bg);
}

.wmt-table td[b-h98s2813w7],
.wmt-table tbody th[b-h98s2813w7] {
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    text-align: left;
}

/* ── Columns ────────────────────────────────────────────────────────────── */

.wmt-c-target[b-h98s2813w7]    { min-width: 8.5rem; }
.wmt-c-source[b-h98s2813w7]    { min-width: 10rem; }
.wmt-c-value[b-h98s2813w7]     { min-width: 8rem; }
.wmt-c-actions[b-h98s2813w7]   { width: 2.2rem; }

.wmt-target[b-h98s2813w7] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wmt-target-sub[b-h98s2813w7] {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.wmt-id[b-h98s2813w7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wmt-flag[b-h98s2813w7] {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.02rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.66rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.wmt-row--verbatim[b-h98s2813w7] {
    background: var(--color-surface-raised);
}

.wmt-verbatim[b-h98s2813w7] {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

/* ── Controls ───────────────────────────────────────────────────────────── */

.wmt-source[b-h98s2813w7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wmt-input[b-h98s2813w7] {
    width: 100%;
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
}

.wmt-input--mono[b-h98s2813w7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wmt-input--num[b-h98s2813w7] {
    margin-top: 0.2rem;
}

.wmt-markers[b-h98s2813w7] {
    display: flex;
    gap: 0.2rem;
}

.wmt-pick[b-h98s2813w7] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wmt-path[b-h98s2813w7] {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wmt-pick-btn[b-h98s2813w7] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.wmt-pick-btn:hover:not(:disabled)[b-h98s2813w7] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.wmt-pick-btn--armed[b-h98s2813w7] {
    border-color: var(--color-brand);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.wmt-note[b-h98s2813w7] {
    margin: 0;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/*  The second line of a row: the settings that belong to it, each labelled, in
    one strip. They are per-row choices rather than a column to scan down, which
    is why they are here and not squeezing the extracted value off the screen. */
.wmt-options-row td[b-h98s2813w7] {
    padding-top: 0;
    padding-bottom: 0.4rem;
}

.wmt-options[b-h98s2813w7] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.wmt-option[b-h98s2813w7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.wmt-option-label[b-h98s2813w7] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.wmt-option-note[b-h98s2813w7] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.wmt-input--tf[b-h98s2813w7] { width: 8rem; }
.wmt-input--def[b-h98s2813w7] { width: 8rem; }
.wmt-input--lk[b-h98s2813w7] { width: 8.5rem; }

.wmt-check[b-h98s2813w7] {
    margin: 0;
    cursor: pointer;
}

.wmt-remove[b-h98s2813w7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wmt-remove:hover:not(:disabled)[b-h98s2813w7] {
    border-color: var(--status-error-border);
    color: var(--status-error-fg);
}

/* ── The extracted value ────────────────────────────────────────────────── */

.wmt-value[b-h98s2813w7] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    word-break: break-word;
}

.wmt-value--ok[b-h98s2813w7]    { color: var(--color-text-primary); }
.wmt-value--empty[b-h98s2813w7] { color: var(--color-text-secondary); }
.wmt-value--bad[b-h98s2813w7]   { color: var(--status-error-fg); }

.wmt-value-status[b-h98s2813w7] {
    display: block;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

.wmt-value-none[b-h98s2813w7],
.wmt-value-wait[b-h98s2813w7] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/* ── Findings ───────────────────────────────────────────────────────────── */

.wmt-findings-row td[b-h98s2813w7] {
    padding-top: 0;
}

.wmt-findings[b-h98s2813w7] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wmt-finding[b-h98s2813w7] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.73rem;
    line-height: 1.4;
}

.wmt-finding--error[b-h98s2813w7] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.wmt-finding--warn[b-h98s2813w7] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wmt-finding--notice[b-h98s2813w7] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.wmt-finding-code[b-h98s2813w7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Features/Automation/Wizard/WizardPreviewPane.razor.rz.scp.css */
/*  The preview pane: what the engine does with the selected row, and the
    document the whole mapping would produce.

    Tokens only — no raw hex. */

.wpp[b-9leouasc9c] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.wpp-head[b-9leouasc9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.wpp-title[b-9leouasc9c] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wpp-wait[b-9leouasc9c] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.wpp-body[b-9leouasc9c] {
    flex: 1;
    min-height: 0;
    padding: 0.75rem;
    overflow: auto;
}

.wpp-empty[b-9leouasc9c] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.wpp-section + .wpp-section[b-9leouasc9c] {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.wpp-sub[b-9leouasc9c] {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wpp-facts[b-9leouasc9c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    margin: 0 0 0.6rem;
}

.wpp-fact[b-9leouasc9c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wpp-fact dt[b-9leouasc9c] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wpp-fact dd[b-9leouasc9c] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    text-align: right;
    overflow-wrap: anywhere;
}

.wpp-fact dd code[b-9leouasc9c] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
}

.wpp-label[b-9leouasc9c] {
    margin: 0.55rem 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.wpp-value[b-9leouasc9c] {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 12rem;
    overflow: auto;
}

.wpp-value--bad[b-9leouasc9c] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.wpp-value--quiet[b-9leouasc9c] {
    color: var(--color-text-secondary);
}

.wpp-notes[b-9leouasc9c] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.wpp-notes li[b-9leouasc9c] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.wpp-note[b-9leouasc9c] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wpp-error[b-9leouasc9c] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
    font-size: 0.75rem;
    line-height: 1.45;
}

.wpp-tags[b-9leouasc9c] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpp-tags li[b-9leouasc9c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0.35rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
}

.wpp-tag-name[b-9leouasc9c] {
    font-size: 0.73rem;
    color: var(--color-text-secondary);
}

.wpp-tag-value[b-9leouasc9c] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.73rem;
    color: var(--color-text-primary);
    text-align: right;
    overflow-wrap: anywhere;
}
/* /Components/Features/Automation/Wizard/WizardReviewPanel.razor.rz.scp.css */
/*  The Review step. The + ~ - = markers are decorative; the word beside each
    one is what carries the meaning, so the table reads the same in greyscale and
    to a screen reader.

    Tokens only — no raw hex. */

.wrp[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 76rem;
}

.wrp-empty[b-1o210phu2u],
.wrp-none[b-1o210phu2u] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.wrp-summary[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wrp-headline[b-1o210phu2u] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wrp-sub[b-1o210phu2u] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.wrp-banner[b-1o210phu2u] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.83rem;
    line-height: 1.55;
}

.wrp-banner--warn[b-1o210phu2u] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wrp-issues[b-1o210phu2u] {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.wrp-issues--error[b-1o210phu2u] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.wrp-issues--warn[b-1o210phu2u] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wrp-issues-title[b-1o210phu2u] {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.wrp-issues ul[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrp-issues li[b-1o210phu2u] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.wrp-code[b-1o210phu2u] {
    padding: 0.02rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wrp-section[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wrp-section-title[b-1o210phu2u] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wrp-fields[b-1o210phu2u],
.wrp-notes[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.wrp-notes li[b-1o210phu2u] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.5;
}

/* ── The rule table ─────────────────────────────────────────────────────── */

.wrp-wrap[b-1o210phu2u] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: auto;
}

.wrp-table[b-1o210phu2u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.wrp-table thead th[b-1o210phu2u] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wrp-table td[b-1o210phu2u],
.wrp-table tbody th[b-1o210phu2u] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    text-align: left;
}

.wrp-table tbody tr:last-child td[b-1o210phu2u],
.wrp-table tbody tr:last-child th[b-1o210phu2u] {
    border-bottom: none;
}

.wrp-c-kind[b-1o210phu2u]   { width: 7.5rem; }
.wrp-c-target[b-1o210phu2u] { min-width: 11rem; }
.wrp-c-rule[b-1o210phu2u]   { min-width: 16rem; }
.wrp-c-detail[b-1o210phu2u] { min-width: 14rem; }

.wrp-marker[b-1o210phu2u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.35rem;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.wrp-word[b-1o210phu2u] {
    font-size: 0.78rem;
    font-weight: 500;
}

.wrp-row--added .wrp-marker[b-1o210phu2u] {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.wrp-row--updated .wrp-marker[b-1o210phu2u] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wrp-row--removed .wrp-marker[b-1o210phu2u] {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.wrp-row--same .wrp-marker[b-1o210phu2u] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.wrp-row--same[b-1o210phu2u] {
    color: var(--color-text-secondary);
}

.wrp-target[b-1o210phu2u] {
    display: block;
    font-weight: 500;
    color: var(--color-text-primary);
}

.wrp-row--same .wrp-target[b-1o210phu2u] {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.wrp-id[b-1o210phu2u] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.wrp-delims[b-1o210phu2u] {
    display: block;
    margin-bottom: 0.15rem;
}

.wrp-delims code[b-1o210phu2u] {
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.73rem;
    overflow-wrap: anywhere;
}

.wrp-delims--gone code[b-1o210phu2u] {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.wrp-sep[b-1o210phu2u] {
    margin: 0 0.25rem;
    color: var(--color-text-secondary);
}

.wrp-meta[b-1o210phu2u] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.wrp-meta code[b-1o210phu2u] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wrp-dot[b-1o210phu2u] {
    margin: 0 0.25rem;
}

.wrp-diff[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.wrp-detail-note[b-1o210phu2u] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wrp-jump[b-1o210phu2u] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wrp-jump:hover[b-1o210phu2u] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

/* ── How it is written ──────────────────────────────────────────────────── */

.wrp-toggle[b-1o210phu2u] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    cursor: pointer;
}

.wrp-toggle input[b-1o210phu2u] {
    margin-top: 0.15rem;
}

.wrp-toggle-body[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wrp-toggle-label[b-1o210phu2u] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wrp-toggle-note[b-1o210phu2u] {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.wrp-order[b-1o210phu2u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
/* /Components/Features/Automation/Wizard/WizardSampleStep.razor.rz.scp.css */
/*  The Sample step. Two columns on a laptop, one on anything narrower.

    Tokens only — no raw hex. */

.wss[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62rem;
}

.wss-intro[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wss-title[b-rf8e801h1m] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wss-lede[b-rf8e801h1m] {
    margin: 0;
    max-width: 62ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── The sample in hand ─────────────────────────────────────────────────── */

.wss-current[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.wss-current-head[b-rf8e801h1m] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wss-current-icon[b-rf8e801h1m] {
    margin-top: 0.1rem;
    color: var(--color-text-secondary);
}

.wss-current-body[b-rf8e801h1m] {
    flex: 1;
    min-width: 0;
}

.wss-current-name[b-rf8e801h1m] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.wss-detected[b-rf8e801h1m] {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.wss-remove[b-rf8e801h1m] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wss-remove:hover:not(:disabled)[b-rf8e801h1m] {
    border-color: var(--status-error-border);
    color: var(--status-error-fg);
}

.wss-banner[b-rf8e801h1m] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    line-height: 1.55;
}

.wss-banner--good[b-rf8e801h1m] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.wss-banner--warn[b-rf8e801h1m] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wss-banner--bad[b-rf8e801h1m] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

/* ── The two sources ────────────────────────────────────────────────────── */

.wss-sources[b-rf8e801h1m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .wss-sources[b-rf8e801h1m] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wss-source[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wss-source-title[b-rf8e801h1m] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wss-recent-note[b-rf8e801h1m] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.wss-recent[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 22rem;
    overflow: auto;
}

.wss-run[b-rf8e801h1m] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
}

.wss-run:hover:not(:disabled)[b-rf8e801h1m] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.wss-run-top[b-rf8e801h1m] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wss-run-name[b-rf8e801h1m] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wss-run-status[b-rf8e801h1m] {
    flex: 0 0 auto;
    padding: 0.02rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

.wss-run-when[b-rf8e801h1m] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.wss-dot[b-rf8e801h1m] {
    margin: 0 0.25rem;
}
/* /Components/Features/Automation/Wizard/WizardStructurePane.razor.rz.scp.css */
/*  The structure pane: the export field list, or the tree.

    The tree is a real role="tree" with one tab stop, so the focus ring has to be
    unmistakable — it is the only thing telling a keyboard operator where they
    are in a list that can run to hundreds of rows. Selection is drawn as a left
    rule plus a tint, never as colour alone.

    Tokens only — no raw hex. */

.wsp[b-t05qgiqw7q] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}

.wsp-head[b-t05qgiqw7q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.wsp-title[b-t05qgiqw7q] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wsp-count[b-t05qgiqw7q] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wsp-switch[b-t05qgiqw7q] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wsp-switch:hover[b-t05qgiqw7q] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

/* ── The armed line ─────────────────────────────────────────────────────── */

.wsp-arm[b-t05qgiqw7q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 0.78rem;
}

.wsp-cancel[b-t05qgiqw7q] {
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--status-info-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wsp-empty[b-t05qgiqw7q] {
    margin: 0;
    padding: 1.25rem 0.9rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* ── Export fields ──────────────────────────────────────────────────────── */

.wsp-fields[b-t05qgiqw7q] {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    overflow: auto;
}

.wsp-field[b-t05qgiqw7q] {
    padding: 0.15rem 0;
}

.wsp-field-btn[b-t05qgiqw7q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    text-align: left;
    cursor: pointer;
}

.wsp-field-btn:hover:not(:disabled)[b-t05qgiqw7q] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.wsp-field-btn:disabled[b-t05qgiqw7q] {
    cursor: not-allowed;
    opacity: 0.75;
}

.wsp-field-top[b-t05qgiqw7q] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wsp-field-name[b-t05qgiqw7q] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wsp-field-value[b-t05qgiqw7q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wsp-field-note[b-t05qgiqw7q] {
    margin: 0 0 0.2rem 0.5rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.wsp-markers[b-t05qgiqw7q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    padding: 0.05rem 0.2rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.wsp-markers-sep[b-t05qgiqw7q] {
    margin: 0 0.2rem;
    color: var(--color-text-muted, var(--color-text-secondary));
}

.wsp-blocked[b-t05qgiqw7q] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    color: var(--status-warning-fg);
}

.wsp-field--blocked .wsp-field-name[b-t05qgiqw7q] {
    color: var(--color-text-secondary);
}

/* ── The tree ───────────────────────────────────────────────────────────── */

.wsp-tree[b-t05qgiqw7q],
.wsp-group[b-t05qgiqw7q],
.wsp-attrs[b-t05qgiqw7q] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wsp-tree[b-t05qgiqw7q] {
    flex: 1;
    min-height: 0;
    padding: 0.3rem 0;
    overflow: auto;
}

.wsp-item[b-t05qgiqw7q] {
    outline: none;
}

.wsp-item:focus-visible > .wsp-row[b-t05qgiqw7q] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
    border-radius: 3px;
}

.wsp-row[b-t05qgiqw7q] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.18rem;
    padding-bottom: 0.18rem;
    padding-right: 0.5rem;
    border-left: 2px solid transparent;
    cursor: pointer;
}

.wsp-row:hover[b-t05qgiqw7q] {
    background: var(--color-surface-raised);
}

.wsp-row--selected[b-t05qgiqw7q] {
    border-left-color: var(--color-brand);
    background: var(--status-info-bg);
}

.wsp-row--used .wsp-name[b-t05qgiqw7q] {
    color: var(--color-brand);
}

.wsp-twisty[b-t05qgiqw7q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--color-text-secondary);
}

.wsp-twisty--leaf[b-t05qgiqw7q] {
    visibility: hidden;
}

.wsp-name[b-t05qgiqw7q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.wsp-attr-name[b-t05qgiqw7q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wsp-value[b-t05qgiqw7q] {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wsp-chip[b-t05qgiqw7q] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.02rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.66rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wsp-chip--repeat[b-t05qgiqw7q] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.wsp-chip--used[b-t05qgiqw7q] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.wsp-note[b-t05qgiqw7q] {
    margin: 0 0.5rem 0.2rem 2rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .wsp-row[b-t05qgiqw7q],
    .wsp-field-btn[b-t05qgiqw7q] {
        transition: none;
    }
}

/* ── "Use it for…" ──────────────────────────────────────────────────────────

   The other direction of mapping: nothing is armed, so activating a place in
   the sample asks which row should read it. It sits under the thing it is
   about rather than in a floating menu, so it needs no positioning maths and
   nothing can cover the node it refers to. */

.wsp-hint[b-t05qgiqw7q] {
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.wsp-offer[b-t05qgiqw7q] {
    margin: 0.2rem 0.5rem 0.35rem 1.6rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.wsp-offer-head[b-t05qgiqw7q] {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.wsp-offer-none[b-t05qgiqw7q] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.wsp-offer-list[b-t05qgiqw7q] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 13rem;
    overflow: auto;
}

.wsp-offer-btn[b-t05qgiqw7q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    text-align: left;
    cursor: pointer;
}

.wsp-offer-btn:hover[b-t05qgiqw7q] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.wsp-offer-label[b-t05qgiqw7q] {
    font-size: 0.76rem;
    color: var(--color-text-primary);
}

.wsp-offer-taken[b-t05qgiqw7q] {
    flex: 0 0 auto;
    font-size: 0.66rem;
    color: var(--status-warning-fg);
}

.wsp-offer-close[b-t05qgiqw7q] {
    margin-top: 0.3rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}
/* /Components/Features/Automation/Wizard/WizardTargetStep.razor.rz.scp.css */
/*  The Target step.

    Tokens only — no raw hex. */

.wts[b-rmnoi9vg19] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 56rem;
}

.wts-intro[b-rmnoi9vg19] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wts-title[b-rmnoi9vg19] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wts-lede[b-rmnoi9vg19] {
    margin: 0;
    max-width: 60ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.wts-section[b-rmnoi9vg19] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wts-section-title[b-rmnoi9vg19] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wts-field[b-rmnoi9vg19] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 26rem;
}

.wts-label[b-rmnoi9vg19] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wts-select[b-rmnoi9vg19] {
    width: 100%;
}

.wts-help[b-rmnoi9vg19] {
    margin: 0;
    max-width: 58ch;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.wts-help--tight[b-rmnoi9vg19] {
    font-size: 0.73rem;
}

/* ── What was seeded ────────────────────────────────────────────────────── */

.wts-seeded[b-rmnoi9vg19] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.wts-seeded-line[b-rmnoi9vg19] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.wts-tags[b-rmnoi9vg19] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wts-tags li[b-rmnoi9vg19] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.74rem;
}

.wts-tag-name[b-rmnoi9vg19] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.wts-tag-type[b-rmnoi9vg19],
.wts-tag-group[b-rmnoi9vg19] {
    color: var(--color-text-secondary);
}

.wts-tag-group[b-rmnoi9vg19]::before {
    content: "·";
    margin-right: 0.25rem;
}

/* ── Defaults ───────────────────────────────────────────────────────────── */

.wts-grid[b-rmnoi9vg19] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.9rem;
}

.wts-grid .wts-field[b-rmnoi9vg19] {
    max-width: none;
}
/* /Components/Features/ControlCentreDesigner/CcAssistantPanel.razor.rz.scp.css */
/* ── Assistant tab (CC10.3) ────────────────────────────────────────────────────
   The rail is a narrow column with a lot of states in it — idle, busy, a soft
   error, findings, a proposal that can apply, a proposal that cannot, and the
   moment after Apply — so this stylesheet spends its effort on hierarchy rather
   than on density: one accent colour (the verdict), one surface tint (the
   proposal card), and everything else quiet.

   Findings reuse the Checks tab's .cc-find vocabulary, which the designer page
   publishes through ::deep — a review finding and a lint finding look the same
   because they are the same kind of thing to the reader. Only what is genuinely
   new to this panel is styled here.

   Selectors are single-class and specific enough to stand on their own: the
   scoped-CSS bundle carries each component twice and not in file order, so
   nothing here may depend on cascade position to win. */

.cc-asst[b-366jbnxxmg] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ── Head ─────────────────────────────────────────────────────────────────── */

.cc-asst-head[b-366jbnxxmg] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cc-asst-spark[b-366jbnxxmg] {
    flex: none;
    margin-top: 0.125rem;
    color: var(--color-brand);
}

.cc-asst-head-text[b-366jbnxxmg] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.cc-asst-subject[b-366jbnxxmg] {
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── Action pills and preset chips ────────────────────────────────────────── */

.cc-asst-pills[b-366jbnxxmg],
.cc-asst-chips[b-366jbnxxmg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cc-asst-pill[b-366jbnxxmg],
.cc-asst-chip[b-366jbnxxmg] {
    padding: 0.25rem 0.5625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-asst-chip[b-366jbnxxmg] {
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
}

.cc-asst-pill:hover:not(:disabled)[b-366jbnxxmg],
.cc-asst-chip:hover:not(:disabled)[b-366jbnxxmg] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
}

.cc-asst-pill--on[b-366jbnxxmg],
.cc-asst-pill--on:hover:not(:disabled)[b-366jbnxxmg] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.cc-asst-chip--on[b-366jbnxxmg],
.cc-asst-chip--on:hover:not(:disabled)[b-366jbnxxmg] {
    border-color: var(--color-brand);
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

.cc-asst-pill:disabled[b-366jbnxxmg],
.cc-asst-chip:disabled[b-366jbnxxmg] {
    cursor: default;
    opacity: 0.55;
}

.cc-asst-pill:focus-visible[b-366jbnxxmg],
.cc-asst-chip:focus-visible[b-366jbnxxmg] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.2);
}

/* ── The ask ──────────────────────────────────────────────────────────────── */

.cc-asst-hint[b-366jbnxxmg],
.cc-asst-note[b-366jbnxxmg] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.5;
}

.cc-asst-note[b-366jbnxxmg] {
    padding: 0.375rem 0.5rem;
    border-left: 2px solid var(--color-degraded);
    background: var(--color-surface-raised);
}

.cc-asst-instruction[b-366jbnxxmg] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
}

.cc-asst-instruction:focus-visible[b-366jbnxxmg] {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-asst-send[b-366jbnxxmg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.cc-asst-kbd[b-366jbnxxmg] {
    margin-left: auto;
    color: var(--color-unknown);
    font-size: 0.625rem;
}

/* ── Working ──────────────────────────────────────────────────────────────── */

.cc-asst-typing[b-366jbnxxmg] {
    display: flex;
    gap: 0.25rem;
    padding: 0.125rem 0;
}

.cc-asst-typing span[b-366jbnxxmg] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-brand-teal);
    animation: cc-asst-blink-b-366jbnxxmg 1.2s infinite ease-in-out;
}

.cc-asst-typing span:nth-child(2)[b-366jbnxxmg] {
    animation-delay: 0.18s;
}

.cc-asst-typing span:nth-child(3)[b-366jbnxxmg] {
    animation-delay: 0.36s;
}

@keyframes cc-asst-blink-b-366jbnxxmg {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-asst-typing span[b-366jbnxxmg] {
        animation: none;
        opacity: 0.6;
    }
}

/* ── Status, errors and prose ─────────────────────────────────────────────── */

/* NEVER display:none, even when it has nothing to say. A live region has to be
   in the accessibility tree BEFORE its text changes, or the change is not a
   change to anything: a region that appears already populated is unreliably
   announced across screen readers. So it sits here empty, taking no height, and
   only its text ever changes. */
.cc-asst-status[b-366jbnxxmg] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.cc-asst-status:empty[b-366jbnxxmg] {
    line-height: 0;
}

.cc-asst-status--ok[b-366jbnxxmg] {
    color: var(--status-success-fg);
    font-weight: 600;
}

.cc-asst-error[b-366jbnxxmg],
.cc-asst-refused[b-366jbnxxmg] {
    margin: 0;
    padding: 0.4375rem 0.5625rem;
    border: 1px solid var(--status-error-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cc-asst-prose[b-366jbnxxmg] {
    /* Model prose, rendered as TEXT: the newlines it wrote are kept by the
       white-space rule rather than by turning its words into markup. */
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cc-asst-clear[b-366jbnxxmg] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.cc-asst-raw > summary[b-366jbnxxmg] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
}

.cc-asst-pre[b-366jbnxxmg] {
    max-height: 18rem;
    margin: 0.375rem 0 0;
    padding: 0.5rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Findings ─────────────────────────────────────────────────────────────── */

.cc-asst-findings[b-366jbnxxmg] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* An element-qualified selector on purpose: .cc-find-where comes from the page's
   ::deep block and would otherwise tie with this one on specificity, and the
   scoped bundle's order is not something to bet a colour on. */
button.cc-asst-goto[b-366jbnxxmg] {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button.cc-asst-goto:hover[b-366jbnxxmg] {
    text-decoration: underline;
}

.cc-asst-fix[b-366jbnxxmg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.cc-asst-fix-btn[b-366jbnxxmg] {
    margin-left: auto;
}

/* ── Proposal card ────────────────────────────────────────────────────────── */

.cc-asst-card[b-366jbnxxmg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.cc-asst-summary[b-366jbnxxmg] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* The card's verdict is a BLOCK with a left accent rather than a pill, because a
   rejection's verdict is a whole sentence — "Blocked: operations[2] (addPanel):
   the row … does not resolve" — and a sentence wrapped inside a rounded capsule
   reads as a mistake. The small pill is kept for a fix's verdict, which sits on
   one line beside its button. */
.cc-asst-verdict-line[b-366jbnxxmg] {
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-left: 3px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.cc-asst-verdict[b-366jbnxxmg] {
    max-width: 100%;
    margin: 0;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cc-asst-verdict-line.cc-asst-verdict--ok[b-366jbnxxmg] {
    border-left-color: var(--color-healthy);
}

.cc-asst-verdict-line.cc-asst-verdict--warn[b-366jbnxxmg] {
    border-left-color: var(--color-degraded);
}

.cc-asst-verdict-line.cc-asst-verdict--bad[b-366jbnxxmg] {
    border-left-color: var(--color-down);
}

/* The status palette's own foreground tokens, not the health colours: #ef4444 as
   bold 11px text is under 4.5:1 on white. The health colours stay where they are
   legible — on the borders. */
.cc-asst-verdict--ok[b-366jbnxxmg] {
    border-color: var(--status-success-border);
    color: var(--status-success-fg);
}

.cc-asst-verdict--warn[b-366jbnxxmg] {
    border-color: var(--status-warning-border);
    color: var(--status-warning-fg);
}

.cc-asst-verdict--bad[b-366jbnxxmg] {
    border-color: var(--status-error-border);
    color: var(--status-error-fg);
}

.cc-asst-verdict--wait[b-366jbnxxmg] {
    color: var(--color-text-secondary);
}

.cc-asst-actions[b-366jbnxxmg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── Diff ─────────────────────────────────────────────────────────────────── */

.cc-asst-diff[b-366jbnxxmg] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-asst-diff-row[b-366jbnxxmg] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.1875rem 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.cc-asst-diff-row:first-child[b-366jbnxxmg] {
    border-top: none;
}

.cc-asst-sign[b-366jbnxxmg] {
    width: 0.75rem;
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.cc-asst-diff--added > .cc-asst-sign[b-366jbnxxmg] {
    color: var(--status-success-fg);
}

.cc-asst-diff--removed > .cc-asst-sign[b-366jbnxxmg] {
    color: var(--status-error-fg);
}

/* The sign is decoration — the kind is also written out for a screen reader
   beside it — but it is small bold text, so it takes a legible foreground
   rather than a health colour. */
.cc-asst-diff--changed > .cc-asst-sign[b-366jbnxxmg],
.cc-asst-diff--moved > .cc-asst-sign[b-366jbnxxmg] {
    color: var(--color-brand);
}

.cc-asst-diff-row > strong[b-366jbnxxmg] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cc-asst-detail[b-366jbnxxmg] {
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.cc-asst-diff--inline[b-366jbnxxmg] {
    flex-basis: 100%;
}

/* ── Foot ─────────────────────────────────────────────────────────────────── */

.cc-asst-foot[b-366jbnxxmg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.625rem;
}

.cc-asst-foot:empty[b-366jbnxxmg] {
    display: none;
}
/* /Components/Features/ControlCentreDesigner/CcCanvas.razor.rz.scp.css */
/* ── Read-only canvas ───────────────────────────────────────────────────────
   The layout mirrors the web app's: a sticky band, then flex strips. Heights
   are drawn against a stated reference (--cc-body-h) because a stored height
   is a percentage of a dashboard body this page does not have.
   ────────────────────────────────────────────────────────────────────────── */

.cc-canvas[b-jmljpy79l0] {
    --cc-body-h: 220px;

    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-height: 24rem;
    padding: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-card);
}

.cc-canvas-head[b-jmljpy79l0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-canvas-note[b-jmljpy79l0] {
    margin: 0;
    flex: 1;
    text-align: right;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cc-canvas-empty[b-jmljpy79l0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.cc-canvas-empty-lead[b-jmljpy79l0] {
    margin: 0;
}

.cc-canvas-empty-note[b-jmljpy79l0] {
    max-width: 34rem;
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.5;
}

/* ── Header band ─────────────────────────────────────────────────────────── */

.cc-band[b-jmljpy79l0] {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

/* Empty band: dashed, because nothing is drawn here at run time — and the
   Filters button lives nowhere else. */
.cc-band--empty[b-jmljpy79l0] {
    border-style: dashed;
    background: transparent;
}

.cc-band-head[b-jmljpy79l0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-band-filters[b-jmljpy79l0] {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cc-band--empty .cc-band-filters[b-jmljpy79l0] {
    border-color: color-mix(in srgb, var(--color-degraded) 55%, var(--color-border));
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
    text-decoration: line-through;
}

.cc-band-warning[b-jmljpy79l0] {
    margin: 0.5rem 0 0;
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
    font-size: 0.75rem;
    line-height: 1.5;
}

.cc-band-strip[b-jmljpy79l0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.625rem;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.cc-row[b-jmljpy79l0] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.cc-row-head[b-jmljpy79l0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cc-row-title[b-jmljpy79l0] {
    padding: 0.125rem 0.25rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-row-title:hover[b-jmljpy79l0] {
    background: var(--color-surface-raised);
}

.cc-row-title[aria-pressed="true"][b-jmljpy79l0] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-teal) 9%, var(--color-surface));
}

.cc-row-title:focus-visible[b-jmljpy79l0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-row-ruler[b-jmljpy79l0] {
    margin-left: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cc-cycle[b-jmljpy79l0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-teal) 9%, var(--color-surface));
    color: var(--color-brand);
    font-size: 0.6875rem;
    font-weight: 600;
}

.cc-row-banner[b-jmljpy79l0],
.cc-row-empty[b-jmljpy79l0] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.cc-row--collapsed[b-jmljpy79l0] {
    background: var(--color-surface);
    border-style: dashed;
}

.cc-row--disabled .cc-row-title[b-jmljpy79l0] {
    color: var(--color-unknown);
}

/* A second Header row and every Footer row: stored, editable, never drawn.
   Hatched so that reads as a property of the row rather than of the tiles. */
.cc-row--ignored[b-jmljpy79l0],
.cc-row--footer[b-jmljpy79l0] {
    border-style: dashed;
    background:
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 7px,
            color-mix(in srgb, var(--color-unknown) 12%, transparent) 7px,
            color-mix(in srgb, var(--color-unknown) 12%, transparent) 14px),
        var(--color-surface);
}

.cc-row--ignored .cc-row-title[b-jmljpy79l0],
.cc-row--footer .cc-row-title[b-jmljpy79l0] {
    color: var(--color-unknown);
}

/* ── Strips ──────────────────────────────────────────────────────────────── */

.cc-strip[b-jmljpy79l0] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.625rem;
}

/* A Cycle row shows one tile at a time at run time; the canvas shows them all
   with a rail down the side so the rotation is legible rather than implied. */
.cc-strip--cycle[b-jmljpy79l0] {
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
}

.cc-strip--ghost[b-jmljpy79l0] {
    opacity: 0.55;
}

/* The "Add panel…" row for a strip that is drawn faded. Opacity opens a stacking
   context its children cannot climb out of, so the ghost sits beside the faded
   strip rather than inside it: a half-transparent button reads as a disabled one. */
.cc-strip--add[b-jmljpy79l0] {
    margin-top: 0.625rem;
}

/* ── Reordering (CC4.3) ──────────────────────────────────────────────────────
   The strip that says "and this is where it would land", drawn only while a tile is
   being dragged over the canvas — so the canvas at rest is exactly what it was. */
.cc-row-drop[b-jmljpy79l0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin-top: 0.625rem;
    padding: 0.375rem;
    border: 1px dashed color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-brand-teal) 4%, transparent);
}

.cc-row-drop-text[b-jmljpy79l0] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Add ghosts (CC4.2) ──────────────────────────────────────────────────── */

.cc-ghost[b-jmljpy79l0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.cc-ghost:hover[b-jmljpy79l0] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, transparent);
}

.cc-ghost:focus-visible[b-jmljpy79l0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* Sized to sit beside the tiles without pretending to be one. */
.cc-ghost--panel[b-jmljpy79l0] {
    flex: none;
    min-width: 7.5rem;
    min-height: 4rem;
    padding: 0.5rem 0.75rem;
}

.cc-ghost--row[b-jmljpy79l0] {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.75rem;
}

.cc-ghost-plus[b-jmljpy79l0] {
    font-size: 1rem;
    line-height: 1;
}

/* ── Tabs (?tabs=true) ───────────────────────────────────────────────────── */

.cc-tabs[b-jmljpy79l0] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-tab[b-jmljpy79l0] {
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: calc(var(--radius) * 0.5) calc(var(--radius) * 0.5) 0 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-tab--on[b-jmljpy79l0] {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.cc-tabpanel[b-jmljpy79l0] {
    padding-top: 0.75rem;
}
/* /Components/Features/ControlCentreDesigner/CcDataSourceField.razor.rz.scp.css */
/* The shared data-source field (CC9.4).

   Everything here is layout and tone for this component's own markup. The tokens
   it borrows from its hosts — cc-microlabel, cc-chip, cc-banner, cc-field-help —
   are declared ::deep by both the control-centre designer page and the analysis
   designer page, so they hold whichever surface this renders on. Anything only
   one of those pages declares is NOT used here: a shared component that looked
   right on one page and plain on the other is the failure mode this file exists
   to avoid, which is why the catalogue-error line carries cc-dsp-warn rather than
   the designer's cc-prop-warning. */

.cc-dsp[b-r4qxyprpyw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

/* The chosen source on one line: name, id, kind, and the way out to its own page. */
.cc-dsp-chosen[b-r4qxyprpyw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.cc-dsp-name[b-r4qxyprpyw] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.cc-dsp-id[b-r4qxyprpyw] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cc-dsp-link[b-r4qxyprpyw],
.cc-dsp-toggle[b-r4qxyprpyw] {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 600;
}

.cc-dsp-link:hover[b-r4qxyprpyw],
.cc-dsp-toggle:hover[b-r4qxyprpyw] {
    text-decoration: underline;
}

.cc-dsp-actions[b-r4qxyprpyw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cc-dsp-change[b-r4qxyprpyw] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-dsp-toggle[b-r4qxyprpyw] {
    background: none;
    border: 0;
    padding: 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-dsp-link:focus-visible[b-r4qxyprpyw],
.cc-dsp-toggle:focus-visible[b-r4qxyprpyw] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Quiet, not alarming: an unreadable catalogue costs the browsing and never the
   naming, and the id box below it is the whole remedy. */
.cc-dsp-warn[b-r4qxyprpyw] {
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}
/* /Components/Features/ControlCentreDesigner/CcDrillThrough.razor.rz.scp.css */
/* ── Drill-through (CC6.4) ───────────────────────────────────────────────────
   Under the tile, not over it: what a click WOULD do is secondary to what the
   tile shows, and the designer never performs the navigation itself. */

.cc-drill[b-3636o0j2oa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--color-border);
}

.cc-drill-row[b-3636o0j2oa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.6875rem;
}

.cc-drill-outcome[b-3636o0j2oa] {
    flex: none;
}

.cc-drill-link[b-3636o0j2oa] {
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
}

.cc-drill-link:hover[b-3636o0j2oa] {
    text-decoration: underline;
}

.cc-drill-btn[b-3636o0j2oa] {
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-drill-btn:disabled[b-3636o0j2oa] {
    opacity: 0.55;
    cursor: default;
}

.cc-drill-text[b-3636o0j2oa] {
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* "Stored and reaching nothing" — the same dashed, muted treatment the canvas
   gives a Footer row and a shape the web app never draws. */
.cc-drill-text--dead[b-3636o0j2oa] {
    color: var(--color-unknown);
    font-style: italic;
}

.cc-drill-none[b-3636o0j2oa] {
    margin: 0.375rem 0 0;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}
/* /Components/Features/ControlCentreDesigner/CcFilterBar.razor.rz.scp.css */
/* ── Filter bar (CC6.4) ──────────────────────────────────────────────────────
   A calm strip: one row of chips, then whatever the run had to say. It sits above
   the three panes, so it must never grow tall enough to push the canvas off the
   fold — everything below the first row is conditional and everything long is a
   <details>. */

.cc-fbar[b-rftta4p5wc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-fbar-row[b-rftta4p5wc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cc-fbar-spacer[b-rftta4p5wc] {
    flex: 1 1 auto;
}

.cc-fbar-open[b-rftta4p5wc] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.cc-fbar-open:hover[b-rftta4p5wc],
.cc-fbar-open:focus-visible[b-rftta4p5wc] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* A chip is a button because in the web app every one of them opens the dialog. */
.cc-fchip[b-rftta4p5wc] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    cursor: pointer;
}

.cc-fchip:hover[b-rftta4p5wc],
.cc-fchip:focus-visible[b-rftta4p5wc] {
    border-color: var(--color-brand-teal);
}

.cc-fchip-name[b-rftta4p5wc] {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.cc-fchip-value[b-rftta4p5wc] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.cc-fbar-ran[b-rftta4p5wc] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.cc-fbar-notes[b-rftta4p5wc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-fbar-note[b-rftta4p5wc] {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-left: 3px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.375);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-fbar-note--error[b-rftta4p5wc] {
    border-left-color: var(--color-down);
}

.cc-fbar-note--warn[b-rftta4p5wc] {
    border-left-color: var(--color-degraded);
}

.cc-fbar-note-subject[b-rftta4p5wc] {
    flex: none;
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}

.cc-fbar-retry[b-rftta4p5wc] {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-fbar-retry:disabled[b-rftta4p5wc] {
    opacity: 0.55;
    cursor: default;
}

.cc-fbar-params > summary[b-rftta4p5wc] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-fbar-params > summary[b-rftta4p5wc]::marker {
    color: var(--color-text-secondary);
}

.cc-fbar-params .cc-facts[b-rftta4p5wc] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}

.cc-fbar-params code[b-rftta4p5wc] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* /Components/Features/ControlCentreDesigner/CcFiltersDialog.razor.rz.scp.css */
/* ── Filters dialog (CC6.4) ──────────────────────────────────────────────────
   Same frame as the designer's other modals: a backdrop that cancels, a panel
   that scrolls its body and keeps its actions in view. */

.cc-dlg-backdrop[b-rfzgm4sdvj] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.35);
}

.cc-dlg[b-rfzgm4sdvj] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(40rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
}

.cc-dlg-head[b-rfzgm4sdvj] {
    padding: 1rem 1.125rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-dlg-title[b-rfzgm4sdvj] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-dlg-hint[b-rfzgm4sdvj] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.cc-dlg-body[b-rfzgm4sdvj] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem 1.125rem 0.25rem;
}

.cc-dlg-label[b-rfzgm4sdvj] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.cc-dlg-foot[b-rfzgm4sdvj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--color-border);
}

.cc-dlg-spacer[b-rfzgm4sdvj] {
    flex: 1 1 auto;
}

.cc-quick[b-rfzgm4sdvj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cc-quick-btn[b-rfzgm4sdvj] {
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-quick-btn:hover[b-rfzgm4sdvj],
.cc-quick-btn:focus-visible[b-rfzgm4sdvj] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.cc-dlg code[b-rfzgm4sdvj] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
}
/* /Components/Features/ControlCentreDesigner/CcGlobalFilterChips.razor.rz.scp.css */
/* ── Global filter chips (CC6.4) ─────────────────────────────────────────────
   The web app draws these as warning-coloured labels above the tiles; the portal
   keeps the colour so the strip is recognisable, and adds one thing the web app
   has no way to show — which chips are seeded, and therefore inert there. */

.cc-gfilters[b-lt68g6406h] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cc-gfilter[b-lt68g6406h] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.25rem 0.0625rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Dashed, like every "stored and not reaching a screen" mark on this surface. */
.cc-gfilter--seeded[b-lt68g6406h] {
    border-style: dashed;
}

.cc-gfilter-x[b-lt68g6406h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
}

.cc-gfilter-x:hover[b-lt68g6406h],
.cc-gfilter-x:focus-visible[b-lt68g6406h] {
    background: color-mix(in srgb, var(--color-degraded) 25%, transparent);
}

.cc-gfilter-clear[b-lt68g6406h] {
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-gfilter-clear:hover[b-lt68g6406h] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.cc-gfilter-note[b-lt68g6406h] {
    margin: 0.375rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.cc-gfilter-note code[b-lt68g6406h] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
}
/* /Components/Features/ControlCentreDesigner/CcInspectorRail.razor.rz.scp.css */
/* ── Inspector rail ─────────────────────────────────────────────────────── */

.cc-rail[b-n7wucyhg75] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-rail-head[b-n7wucyhg75] {
    padding: 0.75rem 0.875rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-crumbs[b-n7wucyhg75] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}

.cc-crumb[b-n7wucyhg75] {
    padding: 0 0.125rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
}

.cc-crumb:hover[b-n7wucyhg75] {
    color: var(--color-brand);
    text-decoration: underline;
}

.cc-crumb-sep[b-n7wucyhg75] {
    color: var(--color-unknown);
    font-size: 0.6875rem;
}

.cc-rail-title[b-n7wucyhg75] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.cc-rail-name[b-n7wucyhg75] {
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-rail-id[b-n7wucyhg75] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cc-railtabs[b-n7wucyhg75] {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cc-railtab[b-n7wucyhg75] {
    padding: 0.375rem 0.625rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: calc(var(--radius) * 0.5) calc(var(--radius) * 0.5) 0 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-railtab--on[b-n7wucyhg75] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.cc-railtab:focus-visible[b-n7wucyhg75] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-rail-body[b-n7wucyhg75] {
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
}

.cc-rail-empty[b-n7wucyhg75] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.cc-rail-foot[b-n7wucyhg75] {
    padding: 0.5rem 0.875rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
}
/* /Components/Features/ControlCentreDesigner/CcOutline.razor.rz.scp.css */
/* ── Outline tree ───────────────────────────────────────────────────────── */

.cc-outline[b-ce108owtm7] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12rem);
    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-outline-head[b-ce108owtm7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem 0.5rem;
}

.cc-outline-count[b-ce108owtm7] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* Structure actions (CC4.1): a quiet strip under the header, not a call to action. */
.cc-outline-actions[b-ce108owtm7] {
    display: flex;
    gap: 0.375rem;
    padding: 0 0.25rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}

.cc-outline-btn[b-ce108owtm7] {
    flex: 1;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-outline-btn:not(:disabled):hover[b-ce108owtm7] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.cc-outline-btn:disabled[b-ce108owtm7] {
    cursor: not-allowed;
    opacity: 0.45;
}

.cc-outline-btn--danger:not(:disabled):hover[b-ce108owtm7] {
    border-color: color-mix(in srgb, var(--color-down) 50%, var(--color-border));
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
}

.cc-tree[b-ce108owtm7],
.cc-tree ul[b-ce108owtm7] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-tree[b-ce108owtm7] {
    overflow-y: auto;
}

.cc-tree-item[b-ce108owtm7] {
    outline: none;
}

/* position: relative so the CC4.3 drop bands, which are an inset overlay, have this
   row to size themselves against. Nothing is drawn there at rest. */
.cc-tree-row[b-ce108owtm7] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.375rem 0.25rem calc(0.375rem + var(--cc-level, 0) * 0.875rem);
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.5);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.cc-tree-row:hover[b-ce108owtm7] {
    background: var(--color-surface-raised);
}

.cc-tree-item--selected > .cc-tree-row[b-ce108owtm7] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-teal) 9%, var(--color-surface));
}

.cc-tree-item:focus-visible > .cc-tree-row[b-ce108owtm7] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* A Footer row is fully editable here and never reaches a viewer; the outline
   greys it so that is visible before the canvas explains it. */
.cc-tree-item--dead > .cc-tree-row .cc-tree-label[b-ce108owtm7] {
    color: var(--color-unknown);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ── Reordering (CC4.3) ─────────────────────────────────────────────────────
   The handle is quiet until the row is hovered or holds focus, so a tree of forty
   rows does not read as forty grab targets. */
.cc-tree-grip[b-ce108owtm7] {
    display: inline-flex;
    flex: none;
    width: 12px;
    margin-left: -0.125rem;
    color: var(--color-unknown);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}

.cc-tree-handle[b-ce108owtm7] {
    display: inline-flex;
    cursor: grab;
}

.cc-tree-handle:active[b-ce108owtm7] {
    cursor: grabbing;
}

.cc-tree-grip svg[b-ce108owtm7] {
    width: 12px;
    height: 12px;
}

.cc-tree-grip:hover[b-ce108owtm7] {
    color: var(--color-text-secondary);
}

.cc-tree-row:hover .cc-tree-grip[b-ce108owtm7],
.cc-tree-item:focus-within > .cc-tree-row .cc-tree-grip[b-ce108owtm7] {
    opacity: 1;
}

/* The node in flight reads as a copy of itself. */
.cc-tree-item--dragging > .cc-tree-row[b-ce108owtm7] {
    opacity: 0.5;
}

.cc-tree-chevron[b-ce108owtm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: transform 0.12s;
}

.cc-tree-chevron--open[b-ce108owtm7] {
    transform: rotate(90deg);
}

.cc-tree-spacer[b-ce108owtm7] {
    width: 16px;
    flex: none;
}

.cc-tree-icon[b-ce108owtm7] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.cc-tree-icon svg[b-ce108owtm7] {
    width: 14px;
    height: 14px;
}

.cc-tree-label[b-ce108owtm7] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.cc-tree-chips[b-ce108owtm7] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
}

.cc-tree-size[b-ce108owtm7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

.cc-tree-size--beaten[b-ce108owtm7] {
    text-decoration: line-through;
}

.cc-tree-count[b-ce108owtm7] {
    min-width: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cc-tree-row[b-ce108owtm7],
    .cc-tree-grip[b-ce108owtm7] { transition: none; }
}
/* /Components/Features/ControlCentreDesigner/CcPanelCard.razor.rz.scp.css */
/* ── Panel card ─────────────────────────────────────────────────────────────
   Sizing is the point of this stylesheet, so it is spelled out:

     --cc-w      the stored 8002 Width column, as a percentage. Always present.
     --cc-w-css  the panel Data blob's own CSS width, when it has one. The blob
                 wins in the web app (the parsed blob is spread last), so it
                 wins here — that is the whole reason the card can show a
                 "Blob wins" chip and be telling the truth.
     --cc-h      the stored Height column, UNITLESS, so it can be multiplied by
                 the canvas's stated reference height. A stored height is a
                 percentage of the dashboard body, which this page does not have.
     --cc-h-css  as --cc-w-css, for height.
     --cc-drag-w the live pointer preview (CC4.4), written by
                 js/control-centre-resize.js and by nothing else. It is the only
                 one of these Blazor does not render, which is what makes it safe
                 for a script to write: the style attribute Blazor owns replaces
                 it wholesale the moment the committed width comes back.

   A fixed-size shape gets neither: Value, PieChart, Image and Report are drawn
   at 280x200 in the web app whatever the columns or the blob say.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The slot (CC4.3) ───────────────────────────────────────────────────────
   The card used to be the strip's flex child; the slot is now, so the drag handle
   and the drop bands have something to position against without the card giving up
   its place in the row. Every width rule that was on .cc-panel moved here verbatim,
   and the card fills the slot. The custom properties are published on both, so
   neither has to reach for the other's. */
.cc-panel-slot[b-hfjnw01bjm] {
    position: relative;
    display: flex;

    /* The drag preview sits INSIDE --cc-w-css, in the stored column's place rather
       than in front of the blob's. That one nesting is what keeps a pointer resize
       honest on the 58-of-142 tiles whose blob fixes their size: the drag runs, the
       number moves, and the tile does not — which is exactly what the committed
       value will do. A preview that beat the blob would look better and lie. */
    flex: 0 1 var(--cc-w-css, var(--cc-drag-w, var(--cc-w, 100%)));

    max-width: 100%;
    min-width: 9rem;

    /* A single arrow press is one percent, which on most rows is a couple of pixels;
       easing it makes the step visible as a movement rather than a flicker. */
    transition: flex-basis 0.12s ease-out;
}

/* …and while the pointer is holding the grip, that same easing is what would make
   the tile trail the cursor, so it comes off for the duration of the drag. */
.cc-panel-slot.cc-resizing[b-hfjnw01bjm] {
    transition: none;
}

.cc-panel-slot--fixed[b-hfjnw01bjm] {
    flex: 0 0 280px;
    width: 280px;
}

.cc-panel-slot--band[b-hfjnw01bjm] {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
}

/* The tile in flight reads as a copy. */
.cc-panel-slot--dragging[b-hfjnw01bjm] {
    opacity: 0.5;
}

/* Handle: over the card's own padding, so showing it costs no layout. */
.cc-panel-grip[b-hfjnw01bjm] {
    position: absolute;
    top: 0.4375rem;
    left: 0.25rem;
    z-index: 1;
    display: inline-flex;
    color: var(--color-unknown);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}

.cc-panel-handle[b-hfjnw01bjm] {
    display: inline-flex;
    cursor: grab;
}

.cc-panel-handle:active[b-hfjnw01bjm] {
    cursor: grabbing;
}

.cc-panel-grip svg[b-hfjnw01bjm] {
    width: 13px;
    height: 13px;
}

.cc-panel-grip:hover[b-hfjnw01bjm] {
    color: var(--color-text-secondary);
}

.cc-panel-slot:hover .cc-panel-grip[b-hfjnw01bjm],
.cc-panel-slot:focus-within .cc-panel-grip[b-hfjnw01bjm] {
    opacity: 1;
}

/* Room for the handle, only on a card that has one. */
.cc-panel-slot--drag > .cc-panel[b-hfjnw01bjm] {
    padding-left: 1.375rem;
}

.cc-panel[b-hfjnw01bjm] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--cc-h-css, calc(var(--cc-h, 100) * var(--cc-body-h, 220px) / 100));
    min-height: 6rem;
    max-height: 26rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.cc-panel:hover[b-hfjnw01bjm] {
    border-color: var(--color-brand-teal);
}

.cc-panel:focus-visible[b-hfjnw01bjm] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-panel--selected[b-hfjnw01bjm] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 7%, var(--color-surface));
}

/* Drawn to scale, so the disproportion between a KPI card and a full-width
   chart is visible rather than described. */
.cc-panel--fixed[b-hfjnw01bjm] {
    flex: 0 0 280px;
    width: 280px;
    height: 200px;
    max-height: 200px;
}

/* The band's tiles are mini stats in the web app, not full cards. */
.cc-panel--band[b-hfjnw01bjm] {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
    height: auto;
    min-height: 0;
    padding: 0.375rem 0.625rem;
}

.cc-panel--band .cc-panel-body[b-hfjnw01bjm] {
    display: none;
}

/* Nothing reaches the screen for these shapes; the card says so and looks it. */
.cc-panel--dead[b-hfjnw01bjm],
.cc-panel--placeholder[b-hfjnw01bjm] {
    border-style: dashed;
    background: transparent;
}

.cc-panel-head[b-hfjnw01bjm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.cc-panel-icon[b-hfjnw01bjm] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.cc-panel-icon svg[b-hfjnw01bjm] {
    width: 14px;
    height: 14px;
}

.cc-panel-name[b-hfjnw01bjm] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cc-panel-body[b-hfjnw01bjm] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    text-align: center;
}

.cc-panel-ghost[b-hfjnw01bjm] {
    padding: 0.25rem 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.cc-panel-ghost--dead[b-hfjnw01bjm] {
    color: var(--color-unknown);
}

.cc-panel-foot[b-hfjnw01bjm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.cc-panel-size[b-hfjnw01bjm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The columns lost to the blob. Struck through, because "50%" is not what this
   panel is: it is what somebody typed and the renderer discarded. */
.cc-panel-size--beaten[b-hfjnw01bjm] {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* A reader who has asked for less motion is asking about the SMOOTHING, not about
   the resize: the tile still lands on the width they chose, it simply arrives there
   instead of travelling there. The pointer drag is unaffected either way — it had
   its transition removed already, because tracking a cursor is not an animation. */
@media (prefers-reduced-motion: reduce) {
    .cc-panel[b-hfjnw01bjm],
    .cc-panel-slot[b-hfjnw01bjm],
    .cc-panel-grip[b-hfjnw01bjm] { transition: none; }
}

/* ── Live data (CC6.4) ───────────────────────────────────────────────────────
   With a source on, the slot stacks: the card's head and chips on top, the
   renderer's own tile under it. The button gives up its height — a card with a
   tile beneath it needs no body — and the preview takes the height rule the card
   used to carry, so a stored height still means what it meant. */

.cc-panel-slot--preview[b-hfjnw01bjm] {
    flex-direction: column;
    gap: 0.375rem;
}

.cc-panel-slot--preview > .cc-panel[b-hfjnw01bjm] {
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
}

.cc-panel--compact[b-hfjnw01bjm] {
    gap: 0.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.cc-panel-preview[b-hfjnw01bjm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}

/* The card's own sizing rule, moved down to the thing that now fills it. A fixed
   shape is 280x200 inside .cc-tile--fixed, so it is left alone. */
.cc-panel-slot--preview:not(.cc-panel-slot--fixed) .cc-panel-preview[b-hfjnw01bjm] >  .cc-tile {
    height: var(--cc-h-css, calc(var(--cc-h, 100) * var(--cc-body-h, 220px) / 100));
    min-height: 6rem;
    max-height: 26rem;
}

.cc-panel-extra[b-hfjnw01bjm],
.cc-panel-standin[b-hfjnw01bjm] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.cc-panel-standin[b-hfjnw01bjm] {
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
}
/* /Components/Features/ControlCentreDesigner/CcSaveReport.razor.rz.scp.css */
/* ── Save report (CC3.2) ─────────────────────────────────────────────────────
   A band under the toolbar rather than a dialog. A partial commit is something
   the author has to be able to read while looking at the canvas it describes —
   a modal would force them to dismiss the explanation to see the thing being
   explained, and the outcome that most needs reading is the one with the most
   to say. */

.cc-saved[b-hy7gdwvjom] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-saved--ok[b-hy7gdwvjom] {
    border-left-color: var(--color-healthy);
}

.cc-saved--quiet[b-hy7gdwvjom] {
    border-left-color: var(--color-border);
}

/* Partial gets its own colour. It is neither a success nor a failure, and
   painting it as either is the single most misleading thing this panel could
   do: green hides the blocks that did not land, red hides the ones that did. */
.cc-saved--partial[b-hy7gdwvjom] {
    border-left-color: var(--color-degraded);
}

.cc-saved--bad[b-hy7gdwvjom] {
    border-left-color: var(--color-down);
}

.cc-saved-head[b-hy7gdwvjom] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cc-saved-title[b-hy7gdwvjom] {
    margin: 0;
    flex: 1;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-saved-close[b-hy7gdwvjom] {
    align-self: flex-start;
    flex: none;
}

.cc-saved-message[b-hy7gdwvjom] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.cc-saved-note[b-hy7gdwvjom] {
    margin: 0;
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cc-saved-actions[b-hy7gdwvjom] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Blocks ──────────────────────────────────────────────────────────────── */

.cc-blocks[b-hy7gdwvjom] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cc-block[b-hy7gdwvjom] {
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

.cc-block-head[b-hy7gdwvjom] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.cc-block-mark[b-hy7gdwvjom] {
    font-weight: 700;
}

.cc-block--ok .cc-block-mark[b-hy7gdwvjom] {
    color: var(--color-healthy);
}

.cc-block--bad .cc-block-mark[b-hy7gdwvjom] {
    color: var(--color-down);
}

.cc-block-purpose[b-hy7gdwvjom] {
    flex: 1;
    min-width: 12rem;
}

.cc-block-where[b-hy7gdwvjom],
.cc-block-id[b-hy7gdwvjom] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cc-block-message[b-hy7gdwvjom] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cc-block-message--silent[b-hy7gdwvjom] {
    font-style: italic;
}
/* /Components/Features/ControlCentreDesigner/CcToolbar.razor.rz.scp.css */
/* ── Designer toolbar ───────────────────────────────────────────────────── */

.cc-toolbar[b-81phealt7x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cc-back[b-81phealt7x] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s;
}

.cc-back svg[b-81phealt7x] { width: 16px; height: 16px; }

.cc-back:hover[b-81phealt7x] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.cc-back:focus-visible[b-81phealt7x] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-title[b-81phealt7x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cc-name[b-81phealt7x] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-subtitle[b-81phealt7x] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-id[b-81phealt7x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cc-meta[b-81phealt7x],
.cc-actions[b-81phealt7x],
.cc-history[b-81phealt7x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.cc-history[b-81phealt7x] {
    gap: 0.25rem;
}

.cc-weblink[b-81phealt7x] {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cc-weblink:hover[b-81phealt7x] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ── Save (CC3.2) ────────────────────────────────────────────────────────── */

.cc-dirty[b-81phealt7x] {
    white-space: nowrap;
}

.cc-save[b-81phealt7x] {
    flex: none;
    white-space: nowrap;
}

/* A Save that cannot be pressed is a fact about the design, not a dead control,
   so it stays legible rather than fading to the point of looking broken. */
.cc-save:disabled[b-81phealt7x] {
    opacity: 0.55;
    cursor: default;
}

/* ── Overflow menu ───────────────────────────────────────────────────────── */

.cc-overflow[b-81phealt7x] {
    position: relative;
}

.cc-menu[b-81phealt7x] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    min-width: 17rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.cc-menu-item[b-81phealt7x] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cc-menu-item:hover[b-81phealt7x],
.cc-menu-item:focus-visible[b-81phealt7x] {
    background: var(--color-surface-raised);
}

.cc-menu-label[b-81phealt7x] {
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cc-menu-help[b-81phealt7x] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}

/* ── Data (CC6.4) ────────────────────────────────────────────────────────────
   The toggle, the Refresh beside it, and the polite region under both. Stacked
   rather than strung along the strip: the status is a sentence, and a sentence in
   a row of buttons either wraps the toolbar or squeezes the title out of it. */

.cc-data[b-81phealt7x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
    flex: none;
    min-width: 0;
    max-width: 20rem;
}

.cc-data-row[b-81phealt7x] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cc-data-refresh[b-81phealt7x] {
    width: 26px;
    height: 26px;
}

/* One line, and the whole sentence in the title. A live region has to carry the
   full text for a screen reader; the strip has room for about forty characters. */
.cc-data-status[b-81phealt7x] {
    margin: 0;
    max-width: 100%;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcAccessEditor.razor.rz.scp.css */
/* The access grants table (CC5.4). The page stylesheet already owns .cc-tbl,
   .cc-chip, .cc-banner and .cc-inv-lead under ::deep, so nothing here restates
   them — these are the parts only this tab has. */

.cc-ax-caption[b-6gv23ioaoc] {
    caption-side: top;
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    text-align: left;
}

/* The principal column carries a name and up to one verdict chip. It wraps rather
   than pushing the guid off the rail, which is 22rem wide at its widest. */
.cc-ax-tbl th[scope="row"][b-6gv23ioaoc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.cc-ax-who[b-6gv23ioaoc] {
    overflow-wrap: anywhere;
}

/* The stored characters, then what upstream will make of them. The value is the
   security fact on this row, so it is the emphasised half and the reading of it is
   the quiet one — never the other way round. */
.cc-ax-wire[b-6gv23ioaoc] {
    font-size: 0.75rem;
}

.cc-ax-reads[b-6gv23ioaoc],
.cc-ax-row[b-6gv23ioaoc] {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.35;
}

.cc-ax-guid[b-6gv23ioaoc] {
    font-size: 0.6875rem;
    overflow-wrap: anywhere;
}

.cc-ax-actions[b-6gv23ioaoc] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Removing a grant takes access away from somebody, so it is coloured as the
   consequence it is rather than as another link. */
.cc-ax-remove[b-6gv23ioaoc] {
    color: var(--color-down);
}

.cc-ax-add[b-6gv23ioaoc] {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

.cc-ax-busy[b-6gv23ioaoc] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* The blob repair list inside the blocking banner: one row per offending key, each
   with what it stores and the two ways out. */
.cc-ax-repairs[b-6gv23ioaoc] {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.cc-ax-repairs li[b-6gv23ioaoc] {
    margin-bottom: 0.375rem;
}

.cc-ax-repair[b-6gv23ioaoc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

/* The only banner tone this tab adds. The page stylesheet has --warn and --error
   and no success state, because until now nothing in the rail could succeed at
   anything: every other tab stages its edit for the page's Save. */
.cc-ax-ok[b-6gv23ioaoc] {
    border-left-color: var(--color-up, var(--color-brand-teal));
}

/* Visually hidden, still announced: the actions column has no visible heading. */
.cc-ax-sr[b-6gv23ioaoc] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The quiet remove control and the Add button, as CcOtherKeysEditor and
   LabelColourEditor declare them: scoped CSS is per component, so the pair is
   restated rather than hoisted into a shared sheet nobody owns. */
.cc-linkbtn[b-6gv23ioaoc] {
    background: none;
    border: 0;
    padding: 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-6gv23ioaoc] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-6gv23ioaoc] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-linkbtn:disabled[b-6gv23ioaoc] {
    opacity: 0.5;
    cursor: default;
    text-decoration: none;
}

.cc-addbtn[b-6gv23ioaoc] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-addbtn:disabled[b-6gv23ioaoc] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcCustomFilterEditor.razor.rz.scp.css */
/* The card head: the micro-label, the stored key and the remove control on one line. */
.cc-custom-head[b-0or77hjksj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-custom-head code[b-0or77hjksj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Key/value rows: two fields and the button that removes the pair. The button is
   pushed down past the field labels so it sits beside the inputs, not the labels. */
.cc-kvrow[b-0or77hjksj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.cc-kvrow[b-0or77hjksj]  .fd-field {
    flex: 1 1 6rem;
    min-width: 0;
}

.cc-kvrow .cc-linkbtn[b-0or77hjksj],
.cc-kvrow .cc-addbtn[b-0or77hjksj] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
}

.cc-linkbtn[b-0or77hjksj] {
    background: none;
    border: 0;
    padding: 0.375rem 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-0or77hjksj] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-0or77hjksj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-addbtn[b-0or77hjksj] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-addbtn:disabled[b-0or77hjksj] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcDataSourceFilterEditor.razor.rz.scp.css */
/* The card head: the micro-label, the stored key and the remove control on one line. */
.cc-dsf-head[b-4adtl864t9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-dsf-head code[b-4adtl864t9] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The Test button and the link out to the source it runs. */
.cc-dsf-test[b-4adtl864t9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
}

.cc-dsf-link[b-4adtl864t9] {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Key/value rows: the fields and the button that removes them. The button is pushed
   down past the field labels so it sits beside the inputs, not the labels.

   Re-declared rather than shared with the sibling editors: scoped CSS is scoped per
   component, so CcCustomFilterEditor's copy of .cc-kvrow carries its own scope
   attribute and cannot reach this markup. Same rules, deliberately.

   The two buttons keep their OWN names — cc-dsf-link and cc-dsf-add rather than the
   cc-linkbtn and cc-addbtn the sibling editors use — because this editor renders
   inside CcCustomFilterEditor's markup and the two are addressed separately: by a
   stylesheet, by a bUnit query, by a Playwright locator. Sharing a class across a
   component boundary makes "the last Add button" mean something different depending
   on what is stored, which is exactly the sort of selector that breaks quietly. */
.cc-kvrow[b-4adtl864t9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.cc-kvrow[b-4adtl864t9]  .fd-field {
    flex: 1 1 6rem;
    min-width: 0;
}

.cc-kvrow .cc-dsf-link[b-4adtl864t9],
.cc-kvrow .cc-dsf-add[b-4adtl864t9] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
}

.cc-dsf-link[b-4adtl864t9] {
    background: none;
    border: 0;
    padding: 0.375rem 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-dsf-link:hover[b-4adtl864t9] {
    text-decoration: underline;
}

.cc-dsf-link:focus-visible[b-4adtl864t9] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-dsf-add[b-4adtl864t9] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-dsf-add:disabled[b-4adtl864t9] {
    opacity: 0.5;
    cursor: default;
}

/* cc-dsf-addrow and cc-dsf-where carry no style of their own: the first marks the
   "add a value" row apart from the stored ones and the second is the accessible
   grouping around them, and both exist so a locator can name one without counting. */
/* /Components/Features/ControlCentreDesigner/Inspectors/CcDataSourceFilterTestResult.razor.rz.scp.css */
.cc-dsf-result[b-c223ihms38] {
    margin: 0.75rem 0 0;
}

.cc-dsf-caption[b-c223ihms38] {
    caption-side: top;
    text-align: left;
    font-size: 0.75rem;
    color: var(--color-text-muted, #5b6b82);
    padding: 0 0 0.375rem;
}

/* The choices table stays narrow: two columns, the shown text first because that is
   what an author is checking, and the key beside it because that is what the tiles
   receive. */
.cc-dsf-tbl[b-c223ihms38] {
    width: 100%;
}

.cc-dsf-tbl code[b-c223ihms38] {
    overflow-wrap: anywhere;
}

.cc-dsf-raw[b-c223ihms38] {
    margin: 0.75rem 0 0;
}

.cc-dsf-raw summary[b-c223ihms38] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
}

.cc-dsf-stored[b-c223ihms38] {
    display: block;
    padding: 0.5rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-sunken, #f4f6f9);
    font-size: 0.6875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcFilterSlotField.razor.rz.scp.css */
/* One slot: the select, the optional literal box and the lint's note stack with
   the gap the surrounding .cc-fields uses, so a slot showing all three does not
   read as three separate fields. */
.cc-slot[b-2d7fhqqdal] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.cc-slot .cc-banner[b-2d7fhqqdal] {
    margin: 0;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcGlobalFilterEditor.razor.rz.scp.css */
/* Key/value rows: two fields and the button that removes the pair. The button is
   pushed down past the field labels so it sits beside the inputs, not the labels. */
.cc-kvrow[b-dunf7ja6or] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.cc-kvrow[b-dunf7ja6or]  .fd-field {
    flex: 1 1 6rem;
    min-width: 0;
}

.cc-kvrow .cc-linkbtn[b-dunf7ja6or],
.cc-kvrow .cc-addbtn[b-dunf7ja6or] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
}

.cc-linkbtn[b-dunf7ja6or] {
    background: none;
    border: 0;
    padding: 0.375rem 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-dunf7ja6or] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-dunf7ja6or] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-addbtn[b-dunf7ja6or] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-addbtn:disabled[b-dunf7ja6or] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcOtherKeysEditor.razor.rz.scp.css */
/* Key/value rows: a field and the button that removes it. The button is pushed
   down past the field label so it sits beside the input, not the label. */
.cc-kvrow[b-szgvq7gng2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.cc-kvrow[b-szgvq7gng2]  .fd-field {
    flex: 1 1 6rem;
    min-width: 0;
}

.cc-kvrow .cc-linkbtn[b-szgvq7gng2],
.cc-kvrow .cc-addbtn[b-szgvq7gng2] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
}

/* An earlier spelling of a case-duplicated key: shown, not edited. */
.cc-superseded[b-szgvq7gng2] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
}

.cc-superseded code[b-szgvq7gng2] {
    margin-right: 0.5rem;
}

.cc-superseded span[b-szgvq7gng2] {
    overflow-wrap: anywhere;
}

.cc-linkbtn[b-szgvq7gng2] {
    background: none;
    border: 0;
    padding: 0.375rem 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-szgvq7gng2] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-szgvq7gng2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-addbtn[b-szgvq7gng2] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-addbtn:disabled[b-szgvq7gng2] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/CcPanelInspector.razor.rz.scp.css */
/* The Analysis tab reuses the forms designer's ReadOnlyUpstreamBlock rather than
   cloning it. That component's vocabulary — fd-sec, fd-banner, fd-hint, fd-empty,
   fd-facts — is published by InspectorShell under `.fd-insp ::deep`, which this
   surface is not inside, so it is restated here in the control centre's own tokens.
   Same arrangement as TriggerEditor.razor.css, and for the same reason.

   `.cc-upstream ::deep` rather than a bare `::deep`: the block is a child COMPONENT,
   so its elements never carry this component's scope id — only the wrapper does. */

.cc-upstream[b-7081fp4rkc]  .fd-sec {
    margin: 0;
}

.cc-upstream[b-7081fp4rkc]  .fd-banner {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-left-color: var(--color-unknown);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cc-upstream[b-7081fp4rkc]  .fd-banner svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.cc-upstream[b-7081fp4rkc]  .fd-hint {
    margin: 0 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

.cc-upstream[b-7081fp4rkc]  .fd-empty {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.cc-upstream[b-7081fp4rkc]  .fd-facts {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.75rem;
}

.cc-upstream[b-7081fp4rkc]  .fd-facts dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.cc-upstream[b-7081fp4rkc]  .fd-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/ColourSwatchPicker.razor.rz.scp.css */
/* The swatch picker (CC5.3). Positioned by its wrapper so the popover can hang off
   the trigger without a portal; the rail scrolls, so the menu is capped and scrolls
   with its own overflow rather than pushing the inspector taller than the viewport. */

.cc-swp[b-qzljaanw1c] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */

.cc-swp-btn[b-qzljaanw1c] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.cc-swp-btn:hover:not(:disabled)[b-qzljaanw1c] {
    border-color: var(--color-brand-teal);
}

.cc-swp-btn:focus-visible[b-qzljaanw1c] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.cc-swp-btn:disabled[b-qzljaanw1c] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    cursor: default;
}

.cc-swp-btn--on[b-qzljaanw1c] {
    border-color: var(--color-brand-teal);
}

.cc-swp-name[b-qzljaanw1c] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-swp-caret[b-qzljaanw1c] {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

/* ── The fill, and the contrast dot on it ────────────────────────────────── */

/* The chip is the web app's background colour; the dot inside it is the text
   colour the web app pairs with that background. Together they show the pairing a
   viewer will actually see — but they are a colour-only signal, so every option
   also prints the name, the hex and the contrast ratio as text. */
.cc-swp-chip[b-qzljaanw1c] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--cc-swp-fill, transparent);
}

.cc-swp-chip--none[b-qzljaanw1c] {
    border-style: dashed;
    border-color: var(--color-unknown);
    background: transparent;
}

.cc-swp-dot[b-qzljaanw1c] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-swp-ink, transparent);
}

/* ── Popover ─────────────────────────────────────────────────────────────── */

.cc-swp-menu[b-qzljaanw1c] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 17rem;
    max-width: 22rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 10px 24px rgb(23 43 77 / 14%);
}

.cc-swp-note[b-qzljaanw1c] {
    margin: 0.125rem 0.375rem 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.cc-swp-group + .cc-swp-group[b-qzljaanw1c] {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--color-border);
}

.cc-swp-grouptitle[b-qzljaanw1c] {
    margin: 0 0 0.1875rem 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Two rows per option: the fill, the name and the hex on the first; the contrast
   sentence, indented past the fill, on the second. */
.cc-swp-item[b-qzljaanw1c] {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 0.125rem 0.5rem;
    width: 100%;
    padding: 0.3125rem 0.375rem;
    border: 0;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.cc-swp-item:hover[b-qzljaanw1c] {
    background: var(--color-surface-raised);
}

.cc-swp-item:focus-visible[b-qzljaanw1c] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
}

.cc-swp-item[aria-checked="true"][b-qzljaanw1c] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    font-weight: 600;
}

.cc-swp-itemname[b-qzljaanw1c] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-swp-hex[b-qzljaanw1c] {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.cc-swp-contrast[b-qzljaanw1c] {
    grid-column: 2 / -1;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.35;
}

.cc-swp-item--clear .cc-swp-itemname[b-qzljaanw1c] {
    font-style: italic;
}
/* /Components/Features/ControlCentreDesigner/Inspectors/LabelColourEditor.razor.rz.scp.css */
/* The label-colour table (CC5.3). The page stylesheet already owns .cc-tbl,
   .cc-chip, .cc-facts and .cc-swatch under ::deep, so nothing here restates them —
   these are the parts only this tab has. */

.cc-lc-caption[b-tkshe786u2] {
    caption-side: top;
    margin-bottom: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    text-align: left;
}

/* The label column carries the text plus up to four state chips; it wraps rather
   than pushing the picker off the rail, which is 22rem wide at its widest. */
.cc-lc-tbl th[scope="row"][b-tkshe786u2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.cc-lc-label[b-tkshe786u2] {
    overflow-wrap: anywhere;
}

/* An empty label reads as a label called "(no label)" without this. */
.cc-lc-tbl tr:has(.cc-chip--dead) .cc-lc-label[b-tkshe786u2] {
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: 400;
}

.cc-lc-actions[b-tkshe786u2] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* A row a write cannot address: the colour is shown, and the reason it is not
   editable is shown under it rather than in a tooltip nobody opens. */
.cc-lc-locked[b-tkshe786u2] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.cc-lc-locked .cc-field-help[b-tkshe786u2] {
    margin-top: 0.1875rem;
}

/* Visually hidden, still announced: the actions column has no visible heading. */
.cc-lc-sr[b-tkshe786u2] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The quiet remove control and the Add button, as CcGlobalFilterEditor and
   CcOtherKeysEditor declare them: scoped CSS is per component, so the three-rule
   pair is restated rather than hoisted into a shared sheet nobody owns. */
.cc-linkbtn[b-tkshe786u2] {
    background: none;
    border: 0;
    padding: 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-linkbtn:hover[b-tkshe786u2] {
    text-decoration: underline;
}

.cc-linkbtn:focus-visible[b-tkshe786u2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.cc-addbtn[b-tkshe786u2] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.cc-addbtn:disabled[b-tkshe786u2] {
    opacity: 0.5;
    cursor: default;
}

/* ── Add a label ─────────────────────────────────────────────────────────── */

.cc-lc-addrow[b-tkshe786u2] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cc-lc-addfield[b-tkshe786u2] {
    flex: 1 1 10rem;
    min-width: 0;
}

.cc-lc-addpick[b-tkshe786u2] {
    flex: 0 1 11rem;
    min-width: 0;
}

/* The picker has no label element of its own, so its micro-label is aligned with
   the EditText label beside it by hand. */
.cc-lc-addpick .cc-microlabel[b-tkshe786u2] {
    display: block;
    margin-bottom: 0.25rem;
}

.cc-lc-addrow .cc-addbtn[b-tkshe786u2] {
    flex: 0 0 auto;
    margin-top: 1.5rem;
}

/* ── Chips from the last run ─────────────────────────────────────────────── */

.cc-lc-chipgroup + .cc-lc-chipgroup[b-tkshe786u2] {
    margin-top: 0.625rem;
}

.cc-lc-chiptitle[b-tkshe786u2] {
    margin: 0 0 0.25rem;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.cc-lc-chiprule[b-tkshe786u2] {
    margin-left: 0.375rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 400;
}

.cc-lc-chips[b-tkshe786u2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A chip is a button, not a tag: one click adds the row. The fill square shows
   which colour the click will use, and the accessible name says it in words. */
.cc-lc-chip[b-tkshe786u2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    max-width: 100%;
    padding: 0.1875rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-lc-chip:hover[b-tkshe786u2] {
    border-style: solid;
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
}

.cc-lc-chip:focus-visible[b-tkshe786u2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.cc-lc-chipfill[b-tkshe786u2] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--cc-lc-fill, transparent);
}

/* ── The assistant seam ────────────────────────────────────────────────────── */

.cc-lc-suggest[b-tkshe786u2] {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.cc-lc-suggest .cc-field-help[b-tkshe786u2] {
    margin-top: 0.375rem;
}

/* ── An unreadable Colour value ──────────────────────────────────────────── */

.cc-lc-raw[b-tkshe786u2] {
    overflow-wrap: anywhere;
}

.cc-lc-repair[b-tkshe786u2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* /Components/Features/ControlCentreRenderer/CcBandStat.razor.rz.scp.css */
/* ── Header-band mini stat ──────────────────────────────────────────────────
   The web app's ValueSummaryStatUI is a 180px column with a hairline on its
   left edge, the value set large and semi-bold over a secondary-coloured name.
   Reproduced with this repository's own tokens rather than its hex values: the
   arrangement is upstream's, the palette is ours.

   Every rule is written against .cc-bandstat rather than inherited from a
   parent, because the scoped-CSS bundle emits each component twice and out of
   file order — an override has to win by specificity, never by position.
   ────────────────────────────────────────────────────────────────────────── */

.cc-bandstat[b-efj9epnqmg] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    width: 180px;
    padding-left: 0.75rem;
    border-left: 1px solid var(--color-border);
}

.cc-bandstat-value[b-efj9epnqmg] {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-bandstat-name[b-efj9epnqmg] {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Features/ControlCentreRenderer/CcPanelState.razor.rz.scp.css */
/* The frame basics again, because scoped CSS is per component and this one draws
   its own card rather than going through CcTileFrame — a state has no result, no
   description and no notes, so borrowing the frame would mean passing it four
   parameters that mean nothing. */
.cc-tile-state[b-yvoq40v5yc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 10px);
    background: var(--color-surface);
    color: var(--color-text-primary);
    overflow: hidden;
}

.cc-tile-state.cc-tile--fixed[b-yvoq40v5yc] {
    flex: 0 0 280px;
    width: 280px;
    height: 200px;
}

.cc-tile-state .cc-tile-head[b-yvoq40v5yc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.cc-tile-state .cc-tile-title[b-yvoq40v5yc] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-tile-state .cc-tile-body[b-yvoq40v5yc] {
    flex: 1 1 auto;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.cc-tile-state-body[b-yvoq40v5yc] {
    align-items: flex-start;
}

.cc-state-text[b-yvoq40v5yc] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.cc-tile-state--error[b-yvoq40v5yc] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

.cc-tile-state--error .cc-state-text[b-yvoq40v5yc] {
    color: var(--status-error-fg);
}

.cc-state-retry[b-yvoq40v5yc] {
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--status-error-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--status-error-fg);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-state-retry:hover[b-yvoq40v5yc] {
    background: var(--status-error-bg);
}

.cc-state-retry:focus-visible[b-yvoq40v5yc] {
    outline: 2px solid var(--status-error-fg);
    outline-offset: 1px;
}

/* Skeleton. The shimmer is decorative and is dropped entirely under
   prefers-reduced-motion — a pulsing block is exactly the kind of thing that
   setting exists for. */
.cc-skeleton[b-yvoq40v5yc] {
    display: block;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 0%,
        var(--color-border) 50%,
        var(--color-surface-raised) 100%);
    background-size: 200% 100%;
    animation: cc-skeleton-shimmer-b-yvoq40v5yc 1.4s linear infinite;
}

.cc-skeleton--title[b-yvoq40v5yc] {
    width: 45%;
    height: 0.7rem;
}

.cc-skeleton--body[b-yvoq40v5yc] {
    width: 100%;
    height: 3.5rem;
}

@keyframes cc-skeleton-shimmer-b-yvoq40v5yc {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-skeleton[b-yvoq40v5yc] {
        animation: none;
        background: var(--color-surface-raised);
    }
}

.cc-sr-only[b-yvoq40v5yc] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* /Components/Features/ControlCentreRenderer/CcSrTable.razor.rz.scp.css */
/* Visually hidden, and NOT display:none — a display:none table is out of the
   accessibility tree too, which would defeat the whole purpose. This is the
   clip-rect pattern app.css already uses for .visually-hidden, repeated here so
   the component works wherever it is mounted rather than relying on a global. */
.cc-sr-table[b-a0l4rec9qj] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* /Components/Features/ControlCentreRenderer/CcTileFrame.razor.rz.scp.css */
/* ── The tile frame ─────────────────────────────────────────────────────────
   One stylesheet for the whole renderer. It lives on the frame because every
   tile is wrapped by one, so ::deep reaches each tile's own markup from here —
   which keeps the shared tokens in a single place without needing a global
   stylesheet the app would have to link separately.

   Two looks come out of the same DOM:
     .cc-tile           the portal's card — this repo's tokens, notes visible;
     .cc-tile--webapp   the DocMX web app's flatter panel, notes suppressed by
                        the component rather than by CSS, so "web app look" is
                        never a class someone can defeat with a devtools toggle.
   ────────────────────────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7] {
    --cc-tile-pad: 0.75rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: var(--cc-tile-pad);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 10px);
    background: var(--color-surface);
    color: var(--color-text-primary);
    overflow: hidden;
}

/* Value, PieChart, Image and Report are 280x200 in the web app whatever the
   sizing columns say, so they are 280x200 here — a preview that honoured a
   percentage the renderer ignores would be worse than no preview. */
.cc-tile--fixed[b-5ndro27pc7] {
    flex: 0 0 280px;
    width: 280px;
    height: 200px;
}

.cc-tile--webapp[b-5ndro27pc7] {
    border-color: transparent;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

/* The Viewer page (CC6.5). The card keeps the portal's own look, because the
   viewer keeps the portal's own annotations — it lifts off the page a little
   instead, so a wall of tiles with no selection chrome around them still reads
   as a set of cards rather than as one grey field. */
.cc-tile--viewer[b-5ndro27pc7] {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.cc-tile--ghost[b-5ndro27pc7] {
    background:
        repeating-linear-gradient(
            135deg,
            var(--color-surface) 0 8px,
            var(--color-surface-raised) 8px 16px);
}

/* ── Head ─────────────────────────────────────────────────────────────────── */

.cc-tile-head[b-5ndro27pc7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.cc-tile-title[b-5ndro27pc7] {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-tile-badge[b-5ndro27pc7] {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: help;
}

.cc-tile-badge--sample[b-5ndro27pc7] {
    border-color: var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.cc-tile-refresh[b-5ndro27pc7] {
    margin-left: auto;
    display: inline-flex;
    flex-shrink: 0;
    padding: 0.15rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* The badge already took the auto margin, so a refresh button beside one must
   not take it again or the two separate. */
.cc-tile-badge + .cc-tile-refresh[b-5ndro27pc7] {
    margin-left: 0;
}

.cc-tile-refresh svg[b-5ndro27pc7] {
    width: 15px;
    height: 15px;
}

.cc-tile-refresh:disabled[b-5ndro27pc7] {
    cursor: default;
    opacity: 0.45;
}

.cc-tile-refresh:not(:disabled):hover[b-5ndro27pc7] {
    color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.cc-tile-body[b-5ndro27pc7] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-tile-desc[b-5ndro27pc7] {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-secondary);

    /* Two lines and then an ellipsis, as the web app's TwoLineText does. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Notes ────────────────────────────────────────────────────────────────── */

.cc-tile-notes[b-5ndro27pc7] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-tile-note[b-5ndro27pc7] {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.68rem;
    cursor: help;
}

.cc-tile-note--warn[b-5ndro27pc7] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

/* ── Shared tile internals (::deep — defined in the individual tiles) ─────── */

/* Text that is present for a screen reader and not for a sighted reader — the
   table captions, mostly. Not display:none, which would take it out of the
   accessibility tree as well. */
.cc-tile[b-5ndro27pc7]  .cc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The chart canvas. role="img" sits here and nowhere else: it hides its own
   descendants from the accessibility tree, which is right for an SVG nobody can
   read and would be wrong for the data table, so the table is a SIBLING. */
.cc-tile[b-5ndro27pc7]  .cc-chart {
    flex: 1 1 auto;
    min-height: 7rem;
    min-width: 0;
}

.cc-tile--fixed[b-5ndro27pc7]  .cc-chart {
    min-height: 0;
}

/* A ghost chart: the shape's silhouette, so the proportions are visible without
   inventing numbers. */
.cc-tile[b-5ndro27pc7]  .cc-chart-ghost {
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    height: 100%;
    min-height: 4.5rem;
    padding-top: 0.25rem;
}

.cc-tile[b-5ndro27pc7]  .cc-chart-ghost span {
    flex: 1 1 0;
    border-radius: 2px 2px 0 0;
    background: var(--color-border);
}

.cc-tile[b-5ndro27pc7]  .cc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 3rem;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-align: center;
}

/*  An empty chart that also says WHY (#507): title above, explanation below. The
    stretch and the centring move to the wrapper, and .cc-empty stops claiming the
    height it claims when it is the only thing in the body. Written to win on
    SPECIFICITY (three classes against two) rather than on order — the scoped
    styles bundle emits each component twice and not in file order, so an override
    that depends on coming later is an override that stops working. */
.cc-tile[b-5ndro27pc7]  .cc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 100%;
    min-height: 3rem;
    padding: 0 0.75rem;
}

.cc-tile[b-5ndro27pc7]  .cc-empty-state .cc-empty {
    height: auto;
    min-height: 0;
}

.cc-tile[b-5ndro27pc7]  .cc-empty-why {
    max-width: 42ch;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: center;
    text-wrap: pretty;
}

/* ── The KPI number ───────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-value {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-brand-teal);

    /* A KPI can be arbitrarily long (an unformatted Currency sum, say) and the
       card is 280px wide whatever happens, so it shrinks rather than spills. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-tile[b-5ndro27pc7]  .cc-value-unit {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: help;
}

.cc-tile[b-5ndro27pc7]  .cc-value-ghost {
    width: 60%;
    height: 3.4rem;
    border-radius: 6px;
    background: var(--color-border);
}

/* ── Donut legend ─────────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-donut {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    height: 100%;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-legend {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 100px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.72rem;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-legend li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-legend button {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    padding: 0.05rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-legend button:disabled {
    cursor: default;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 2px;

    /* The bar path passes a stored colour NAME straight through as CSS, so this
       background is sometimes an invalid keyword and paints black. That is what
       a viewer sees; the outline is here so an author can tell a black swatch
       from a missing one. */
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.cc-tile[b-5ndro27pc7]  .cc-donut-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-value {
    flex-shrink: 0;
    font-weight: 600;
}

/* The donut's own box is radius*2 square, as recharts draws it, so it is sized
   inline rather than by this stylesheet — the number comes from the panel. */
.cc-tile[b-5ndro27pc7]  .cc-donut-chart {
    min-height: 0;
}

.cc-tile[b-5ndro27pc7]  .cc-donut-ghost {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-border);

    /* The 15px ring, at the default radius of 50. */
    mask: radial-gradient(circle, transparent 34px, #000 35px);
    -webkit-mask: radial-gradient(circle, transparent 34px, #000 35px);
}

/* The area ghost is the bar ghost with its tops joined, so the two silhouettes
   are not mistaken for each other. */
.cc-tile[b-5ndro27pc7]  .cc-chart-ghost--area span {
    border-radius: 2px;
}

/* ── Filter links inside a grid ───────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-grid-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-brand-teal);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cc-tile[b-5ndro27pc7]  .cc-grid-link:hover {
    text-decoration: underline;
}

/* ── Image placeholder ────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-image-ghost {
    flex-direction: column;
    gap: 0.4rem;
}

.cc-tile[b-5ndro27pc7]  .cc-image-ghost svg {
    width: 28px;
    height: 28px;
    opacity: 0.5;
}

/* ── Data tables (Table and Dictionary) ───────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.cc-tile[b-5ndro27pc7]  .cc-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.cc-tile[b-5ndro27pc7]  .cc-grid th,
.cc-tile[b-5ndro27pc7]  .cc-grid td {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.cc-tile[b-5ndro27pc7]  .cc-grid thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  .cc-grid tbody tr:last-child th,
.cc-tile[b-5ndro27pc7]  .cc-grid tbody tr:last-child td {
    border-bottom: 0;
}

.cc-tile[b-5ndro27pc7]  .cc-grid td.cc-grid-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-tile[b-5ndro27pc7]  .cc-grid-row-button {
    display: contents;
}

.cc-tile[b-5ndro27pc7]  .cc-grid tbody tr.cc-grid-selectable {
    cursor: pointer;
}

.cc-tile[b-5ndro27pc7]  .cc-grid tbody tr.cc-grid-selectable:hover {
    background: var(--color-surface-raised);
}

/* ── Image ────────────────────────────────────────────────────────────────── */

.cc-tile--image[b-5ndro27pc7] {
    padding: 0;
    position: relative;
}

.cc-tile--image .cc-tile-head[b-5ndro27pc7],
.cc-tile--image .cc-tile-desc[b-5ndro27pc7],
.cc-tile--image .cc-tile-notes[b-5ndro27pc7] {
    padding-left: var(--cc-tile-pad);
    padding-right: var(--cc-tile-pad);
}

.cc-tile--image .cc-tile-head[b-5ndro27pc7] {
    padding-top: 0.5rem;
}

.cc-tile[b-5ndro27pc7]  .cc-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-surface-raised);
}

/* ── Data grid (CC6.3) ────────────────────────────────────────────────────────
   The QuickGrid brings its own scoped stylesheet through the package's RCL, so
   what is here is only the tile's own chrome and the cell decorations: the
   banner, the export link, the group disclosures and the two pill shapes. The
   ::deep prefix reaches through CcDataGrid and CcDataGridTable to QuickGrid's
   own table, because ::deep compiles to a plain descendant selector.
   ────────────────────────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-dg {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 0.7rem;
    line-height: 1.3;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-banner a,
.cc-tile[b-5ndro27pc7]  .cc-dg-export a {
    color: inherit;
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-export {
    margin: 0;
    font-size: 0.72rem;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-export a {
    color: var(--color-brand-teal);
}

.cc-tile[b-5ndro27pc7]  .cc-dg-table {
    width: 100%;
    font-size: 0.75rem;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-head {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* The sort control. QuickGrid's own <button class="col-title"> is not rendered
   for a column with a HeaderTemplate — the default header returns early — so this
   is that button, rebuilt, calling the same SortByColumnAsync. */
.cc-tile[b-5ndro27pc7]  .cc-dg-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-sort:hover .cc-dg-head {
    text-decoration: underline;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-sort:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* Drawn rather than written, as QuickGrid's .sort-indicator is: the state is
   already in aria-sort on the th and in the button's accessible name, and a
   third copy in text would be read out twice. */
.cc-tile[b-5ndro27pc7]  .cc-dg-sort-mark {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-sort-mark--none {
    /* Held open so the heading does not shift sideways on first sort. */
    visibility: hidden;
    border-bottom: 5px solid currentColor;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-sort-mark--asc {
    border-bottom: 5px solid currentColor;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-sort-mark--desc {
    border-top: 5px solid currentColor;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-col--auto {
    white-space: normal;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-link {
    color: var(--color-brand-teal);
    font-weight: 600;
    text-decoration: underline;
}

/* A RAG pill. The value and the severity are two spans so the severity can be
   set apart typographically without being hidden — it is text a reader needs,
   not decoration, and colour alone would fail WCAG 1.4.1. */
.cc-tile[b-5ndro27pc7]  .cc-dg-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;

    /* The web app uppercases these with CSS, so the DOM text — and therefore the
       accessible name and the CSV — stays the value as stored. */
    text-transform: uppercase;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-pill-severity {
    opacity: 0.85;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-pill-severity::before {
    content: "· ";
}

.cc-tile[b-5ndro27pc7]  .cc-dg-groups {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-group > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    background: var(--color-surface-raised);
    font-size: 0.74rem;
    cursor: pointer;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-group-key {
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  .cc-dg-group-count {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
}

/* ── Pivot placeholder (CC6.3) ────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-pivot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    overflow: auto;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--color-text-secondary);
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-head svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    opacity: 0.55;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-text {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-fields {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0;
    font-size: 0.75rem;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-fields > div {
    display: contents;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-fields dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-fields dd {
    margin: 0;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-link {
    margin: 0;
    font-size: 0.75rem;
}

.cc-tile[b-5ndro27pc7]  .cc-pivot-link a {
    color: var(--color-brand-teal);
    font-weight: 600;
}

/* ── Month calendar (CC6.3) ──────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-cal {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
    font-size: 0.7rem;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-grid thead th {
    padding: 0.15rem 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-grid thead abbr {
    text-decoration: none;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-cell {
    height: 3.4rem;
    padding: 0.15rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    vertical-align: top;
    overflow: hidden;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-cell--filler {
    border-color: transparent;
    background: var(--color-surface-raised);
}

.cc-tile[b-5ndro27pc7]  .cc-cal-day {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-num {
    flex-shrink: 0;
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  a.cc-cal-num {
    color: var(--color-brand-teal);
}

.cc-tile[b-5ndro27pc7]  .cc-cal-stage {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.62rem;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: 0.62rem;
    line-height: 1.25;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-count {
    font-weight: 600;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-line,
.cc-tile[b-5ndro27pc7]  .cc-cal-icon-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-icons {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-icon {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    min-width: 0;
}

/* The icons the web app resolves to no glyph at all: named, struck through, so
   an author can see which ones a viewer is losing rather than seeing nothing. */
.cc-tile[b-5ndro27pc7]  .cc-cal-icon--missing {
    opacity: 0.7;
    text-decoration: line-through;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-icon-glyph {
    flex-shrink: 0;
    font-weight: 700;
}

.cc-tile[b-5ndro27pc7]  .cc-cal-broken {
    color: var(--status-warning-fg);
    font-size: 0.62rem;
    font-style: italic;
}

/* ── Unsupported ──────────────────────────────────────────────────────────── */

.cc-tile[b-5ndro27pc7]  .cc-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 100%;
    min-height: 4rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.cc-tile[b-5ndro27pc7]  .cc-unsupported svg {
    width: 26px;
    height: 26px;
    opacity: 0.55;
}

.cc-tile[b-5ndro27pc7]  .cc-unsupported-text {
    font-size: 0.75rem;
    line-height: 1.35;
    max-width: 22rem;
}
/* /Components/Features/ControlPlaneLifecyclePanel.razor.rz.scp.css */
.lc-panel[b-ms3qf4deup] {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.lc-panel .page-title[b-ms3qf4deup] {
    font-size: 1.25rem;
}

/* Toolbar */
.lc-toolbar[b-ms3qf4deup] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}

.lc-toolbar label[b-ms3qf4deup] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.lc-toolbar select[b-ms3qf4deup],
.lc-toolbar input[b-ms3qf4deup],
.lc-action-form input[b-ms3qf4deup],
.lc-action-form textarea[b-ms3qf4deup] {
    padding: 0.45rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    min-width: 16rem;
    background: #fff;
}

/* Buttons */
.lc-btn[b-ms3qf4deup] {
    padding: 0.45rem 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.lc-btn:hover:not(:disabled)[b-ms3qf4deup] { background: #f3f4f6; }
.lc-btn:disabled[b-ms3qf4deup] { opacity: 0.5; cursor: not-allowed; }

.lc-link[b-ms3qf4deup] {
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.75rem;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.lc-link:hover:not(:disabled)[b-ms3qf4deup] { text-decoration: underline; }
.lc-link:disabled[b-ms3qf4deup] { opacity: 0.5; cursor: not-allowed; }
.lc-link.lc-danger[b-ms3qf4deup] { color: #b91c1c; }

/* Tables */
.lc-table[b-ms3qf4deup] {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.5rem;
    font-size: 0.875rem;
}

.lc-table th[b-ms3qf4deup],
.lc-table td[b-ms3qf4deup] {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #eef0f2;
}

.lc-table th[b-ms3qf4deup] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 700;
}

.lc-row-active[b-ms3qf4deup] { background: #f0fdf4; }
.lc-actions[b-ms3qf4deup] { white-space: nowrap; }

.lc-state[b-ms3qf4deup] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.72rem;
    font-weight: 700;
}

.lc-h3[b-ms3qf4deup] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 1.25rem 0 0.5rem;
}

.lc-active[b-ms3qf4deup] { font-size: 0.875rem; color: #374151; }
.lc-muted[b-ms3qf4deup] { color: #6b7280; font-weight: 400; }
.lc-req[b-ms3qf4deup] { color: #b91c1c; font-weight: 600; }

code[b-ms3qf4deup] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

/* Action form */
.lc-action-form[b-ms3qf4deup] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: #fafafa;
    margin: 0.5rem 0 1.5rem;
    max-width: 40rem;
}

.lc-action-form label[b-ms3qf4deup] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
}

.lc-action-form textarea[b-ms3qf4deup] { min-width: 24rem; resize: vertical; }
.lc-action-buttons[b-ms3qf4deup] { display: flex; align-items: center; gap: 1rem; }

/* Alerts */
.lc-alert[b-ms3qf4deup] {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin: 0.75rem 0;
}

.lc-alert-error[b-ms3qf4deup] { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.lc-alert-ok[b-ms3qf4deup] { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
/* /Components/Features/ControlPlaneRuleDesigner.razor.rz.scp.css */
.rd[b-kaw90gj03z] { margin-top: 1.5rem; }
.rd .page-title[b-kaw90gj03z] { font-size: 1.35rem; }

/* Toolbar */
.rd-toolbar[b-kaw90gj03z] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 10px;
}

.rd-toolbar label[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: #374151; }
.rd-toolbar input[b-kaw90gj03z], .rd-toolbar select[b-kaw90gj03z] { padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.875rem; background: #fff; min-width: 12rem; }
.rd-version[b-kaw90gj03z] { min-width: 6rem !important; }

/* Two-column layout */
.rd-grid[b-kaw90gj03z] { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .rd-grid[b-kaw90gj03z] { grid-template-columns: 1fr; } }

.rd-canvas-head[b-kaw90gj03z] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }

/* Rule cards */
.rd-card[b-kaw90gj03z] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.05s;
}

.rd-card:hover[b-kaw90gj03z] { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); }
.rd-card-default[b-kaw90gj03z] { background: #fbfbfd; border-style: dashed; }
.rd-card-fires[b-kaw90gj03z] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

.rd-card-top[b-kaw90gj03z] { display: flex; align-items: center; gap: 0.6rem; }
.rd-handle[b-kaw90gj03z] { cursor: grab; color: #9ca3af; font-size: 1.1rem; user-select: none; }
.rd-handle:active[b-kaw90gj03z] { cursor: grabbing; }

.rd-name[b-kaw90gj03z] { flex: 1; padding: 0.4rem 0.55rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.9rem; font-weight: 600; }
.rd-x[b-kaw90gj03z] { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.9rem; padding: 0.25rem; }
.rd-x:hover:not(:disabled)[b-kaw90gj03z] { color: #b91c1c; }

/* Card body grid */
.rd-card-body[b-kaw90gj03z] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 0.75rem; margin-top: 0.75rem; }
.rd-card-body label[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; color: #6b7280; }
.rd-card-body .rd-wide[b-kaw90gj03z] { grid-column: span 2; }
.rd-card-body input[b-kaw90gj03z], .rd-card-body select[b-kaw90gj03z] { padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; background: #fff; }
.rd-card-body input:disabled[b-kaw90gj03z], .rd-card-body select:disabled[b-kaw90gj03z] { background: #f3f4f6; color: #9ca3af; }

.rd-default-note[b-kaw90gj03z] { margin: 0.5rem 0 0; font-size: 0.8rem; color: #6b7280; }

/* Outcome colour coding */
.rd-outcome[b-kaw90gj03z] { padding: 0.35rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.78rem; font-weight: 700; }
.rd-outcome-pass[b-kaw90gj03z] { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.rd-outcome-exception[b-kaw90gj03z] { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.rd-outcome-escalate[b-kaw90gj03z] { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.rd-outcome-notapplicable[b-kaw90gj03z] { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }

.rd-outcome-badge[b-kaw90gj03z] { padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.rd-outcome-badge.rd-outcome-pass[b-kaw90gj03z] { color: #166534; background: #dcfce7; }
.rd-outcome-badge.rd-outcome-exception[b-kaw90gj03z] { color: #991b1b; background: #fee2e2; }
.rd-outcome-badge.rd-outcome-escalate[b-kaw90gj03z] { color: #92400e; background: #fef3c7; }

.rd-fires-badge[b-kaw90gj03z] { color: #2563eb; font-size: 0.72rem; font-weight: 700; }

/* Right rail panels */
.rd-rail[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.rd-panel[b-kaw90gj03z] { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 0.9rem 1rem; }
.rd-panel-head[b-kaw90gj03z] { display: flex; align-items: center; justify-content: space-between; }
.rd-panel-actions[b-kaw90gj03z] { margin-top: 0.6rem; }
.rd-h3[b-kaw90gj03z] { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0 0 0.5rem; }

.rd-json[b-kaw90gj03z] { margin: 0; padding: 0.75rem; background: #0f172a; color: #e2e8f0; border-radius: 8px; font-size: 0.75rem; line-height: 1.5; overflow: auto; max-height: 22rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rd-raw[b-kaw90gj03z] { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; resize: vertical; }

.rd-lint[b-kaw90gj03z] { list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 0.8rem; }
.rd-lint li[b-kaw90gj03z] { padding: 0.3rem 0; border-bottom: 1px solid #f3f4f6; }
.rd-lint-warn[b-kaw90gj03z] { color: #92400e; }
.rd-lint-err[b-kaw90gj03z] { color: #991b1b; }
.rd-lint-err code[b-kaw90gj03z] { background: #fef2f2; padding: 0.05rem 0.3rem; border-radius: 4px; }
.rd-ok-line[b-kaw90gj03z] { color: #166534; font-size: 0.82rem; font-weight: 600; margin: 0.25rem 0 0; }

.rd-sim-field[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.rd-sim-field input[b-kaw90gj03z] { padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.rd-sim-result[b-kaw90gj03z] { font-size: 0.85rem; margin: 0.6rem 0 0; }
.rd-sim-note[b-kaw90gj03z] { font-size: 0.78rem; color: #92400e; margin: 0.4rem 0 0; }

/* Typed sample inputs + AI sample generator */
.rd-sim-ai[b-kaw90gj03z] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.rd-sim-gen[b-kaw90gj03z] { white-space: nowrap; }
.rd-sim-aihint[b-kaw90gj03z] { font-size: 0.72rem; }
.rd-sim-empty[b-kaw90gj03z], .rd-sim-refhint[b-kaw90gj03z] { font-size: 0.72rem; margin: 0.2rem 0 0.4rem; }

.rd-scenarios[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 0.7rem; }
.rd-scenario[b-kaw90gj03z] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.6rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fbfaff;
    cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; }
.rd-scenario:hover[b-kaw90gj03z] { border-color: #c7d2fe; background: #f5f3ff; }
.rd-scenario-label[b-kaw90gj03z] { font-size: 0.78rem; font-weight: 600; color: #374151; }

.rd-simfield[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.65rem; }
.rd-simfield-head[b-kaw90gj03z] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
    font-size: 0.75rem; }
.rd-simfield-name[b-kaw90gj03z] { font-weight: 700; color: #111827; }
.rd-simfield .rd-sim-val[b-kaw90gj03z] { width: 100%; }
select.rd-sim-val[b-kaw90gj03z] { background: #fff; }

.rd-chips[b-kaw90gj03z] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rd-chip[b-kaw90gj03z] { padding: 0.15rem 0.5rem; border: 1px solid #d1d5db; border-radius: 999px; background: #f9fafb;
    font-size: 0.72rem; color: #374151; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.rd-chip:hover[b-kaw90gj03z] { border-color: #94a3b8; background: #f1f5f9; }

.rd-publish[b-kaw90gj03z] { text-align: center; }
.rd-publish .rd-muted[b-kaw90gj03z] { margin: 0.5rem 0 0; font-size: 0.75rem; }

/* Buttons */
.rd-btn[b-kaw90gj03z] { padding: 0.45rem 0.9rem; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; font-size: 0.83rem; font-weight: 600; color: #111827; cursor: pointer; }
.rd-btn:hover:not(:disabled)[b-kaw90gj03z] { background: #f9fafb; }
.rd-btn:disabled[b-kaw90gj03z] { opacity: 0.5; cursor: not-allowed; }
.rd-primary[b-kaw90gj03z] { background: #2563eb; border-color: #2563eb; color: #fff; }
.rd-primary:hover:not(:disabled)[b-kaw90gj03z] { background: #1d4ed8; }
.rd-lg[b-kaw90gj03z] { width: 100%; padding: 0.6rem; font-size: 0.9rem; }
.rd-link[b-kaw90gj03z] { background: none; border: none; padding: 0; color: #2563eb; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.rd-link:hover:not(:disabled)[b-kaw90gj03z] { text-decoration: underline; }

.rd-muted[b-kaw90gj03z] { color: #6b7280; font-weight: 400; }

/* Alerts */
.rd-alert[b-kaw90gj03z] { padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.875rem; margin: 0.5rem 0 1rem; }
.rd-alert-error[b-kaw90gj03z] { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.rd-alert-ok[b-kaw90gj03z] { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* ── View bar + tabs (Canvas | Form | JSON) ─────────────────────────── */
.rd-viewbar[b-kaw90gj03z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.rd-tabs[b-kaw90gj03z], .rd-railtabs[b-kaw90gj03z] { display: flex; gap: 0.25rem; background: #f1f5f9; border-radius: 8px; padding: 3px; }

.rd-tab[b-kaw90gj03z] {
    padding: 0.35rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.rd-tab--on[b-kaw90gj03z] { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }

.rd-actions[b-kaw90gj03z] { display: flex; gap: 0.6rem; align-items: center; }

/* ── Canvas layout: canvas + right rail ─────────────────────────────── */
.rd-canvas-layout[b-kaw90gj03z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1200px) { .rd-canvas-layout[b-kaw90gj03z] { grid-template-columns: 1fr; } }

.rd-rail--canvas[b-kaw90gj03z] { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.rd-railtabs[b-kaw90gj03z] { align-self: flex-start; }

.rd-h4[b-kaw90gj03z] { font-size: 0.8rem; font-weight: 700; color: #111827; margin: 0.5rem 0 0.4rem; }
.rd-danger[b-kaw90gj03z] { color: #b91c1c !important; }

/* ── Form / JSON views ──────────────────────────────────────────────── */
.rd-formview[b-kaw90gj03z] { max-width: 56rem; }
.rd-jsonview .rd-raw[b-kaw90gj03z] { width: 100%; }

/* ── Simulate rail ──────────────────────────────────────────────────── */
.rd-sim-row[b-kaw90gj03z] { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.rd-sim-key[b-kaw90gj03z] { flex: 1; min-width: 0 !important; padding: 0.35rem 0.5rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.8rem; background: #f9fafb; }
.rd-sim-val[b-kaw90gj03z] { flex: 1; min-width: 0 !important; padding: 0.35rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.8rem; }
.rd-sim-binding[b-kaw90gj03z] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.rd-sim-binding textarea[b-kaw90gj03z] { min-width: 0 !important; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.4rem; resize: vertical; }
.rd-sim-rationale[b-kaw90gj03z] { font-size: 0.8rem; color: #374151; margin: 0.4rem 0; }

/* ── Trace step list ────────────────────────────────────────────────── */
.rd-trace[b-kaw90gj03z] { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.76rem; color: #475569; }
.rd-trace li[b-kaw90gj03z] { margin-bottom: 0.3rem; }
.rd-trace--satisfied[b-kaw90gj03z] { color: #166534; }
.rd-trace--violated[b-kaw90gj03z] { color: #991b1b; }
.rd-trace--skipped[b-kaw90gj03z], .rd-trace--notapplicable[b-kaw90gj03z] { color: #94a3b8; }

/* Assistant trigger */
.rd-assistant[b-kaw90gj03z] { color: #074684; border-color: #b6d4f0; background: #f0f7ff; }
.rd-assistant:hover:not(:disabled)[b-kaw90gj03z] { background: #e3f0fc; }
/* /Components/Features/DataSources/LookupUploadMappingTable.razor.rz.scp.css */
/*  The mapping grid: one row per column of the target table. */

.lum[b-ewoeq9kbwa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lum-settings[b-ewoeq9kbwa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.lum-field[b-ewoeq9kbwa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.lum-settings .form-input[b-ewoeq9kbwa] {
    width: 100%;
    box-sizing: border-box;
}

.lum-label[b-ewoeq9kbwa] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.lum-hint[b-ewoeq9kbwa] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted, #5b6472);
}

.lum-hint--warn[b-ewoeq9kbwa] {
    color: var(--tone-warning, #c47f17);
}

/* ── The grid ─────────────────────────────────────────────────────────── */

.lum-table[b-ewoeq9kbwa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.lum-table th[b-ewoeq9kbwa],
.lum-table td[b-ewoeq9kbwa] {
    padding: 0.375rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #dfe3e8);
    vertical-align: middle;
}

.lum-table thead th[b-ewoeq9kbwa] {
    font-weight: 600;
    white-space: nowrap;
    border-bottom-width: 2px;
}

.lum-row--scope[b-ewoeq9kbwa] {
    background: var(--surface-2, #f7f8fa);
}

.lum-col[b-ewoeq9kbwa] {
    font-weight: 500;
    white-space: nowrap;
}

.lum-col-name[b-ewoeq9kbwa] {
    display: block;
}

.lum-col-type[b-ewoeq9kbwa] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted, #5b6472);
}

/*  Both selects are given room to show a real column name rather than an
    ellipsis, which is the whole point of the step. */
.lum-table select[b-ewoeq9kbwa],
.lum-table input[type="text"][b-ewoeq9kbwa],
.lum-table .form-input[b-ewoeq9kbwa] {
    width: 100%;
    min-width: 11rem;

    /* The global .form-input is content-box, so a width of 100% plus its own
       padding would overflow the cell. Scoped here rather than changed there. */
    box-sizing: border-box;
}

.lum-fixed[b-ewoeq9kbwa] {
    color: var(--text-muted, #5b6472);
}

.lum-key-head[b-ewoeq9kbwa],
.lum-key-cell[b-ewoeq9kbwa] {
    text-align: center;
    width: 3.5rem;
}

.lum-key-cell input[b-ewoeq9kbwa] {
    margin: 0;
}

/* ── Cross-table rules ─────────────────────────────────────────────────────
   Collapsed by default: most loads want none, and the one that does is a
   specific case (a GL code whose account must already exist). */

.lum-rules[b-ewoeq9kbwa] {
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
}

.lum-rules > summary[b-ewoeq9kbwa] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
}

.lum-rules > summary + *[b-ewoeq9kbwa] {
    margin-top: 0.625rem;
}

.lum-rule-list[b-ewoeq9kbwa] {
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lum-rule-list li[b-ewoeq9kbwa] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 4px;
    font-size: 0.8125rem;
}

.lum-rule-remove[b-ewoeq9kbwa] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem;
    border: 0;
    background: none;
    color: var(--text-muted, #5b6472);
    cursor: pointer;
}

.lum-rule-remove:hover[b-ewoeq9kbwa] {
    color: var(--tone-danger, #c0392b);
}

.lum-rule-add[b-ewoeq9kbwa] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.lum-rule-add .lum-field[b-ewoeq9kbwa] {
    flex: 1 1 11rem;
    min-width: 0;
}

.lum-rule-add .form-input[b-ewoeq9kbwa] {
    width: 100%;
    box-sizing: border-box;
}

.lum-rule-btn[b-ewoeq9kbwa] {
    flex: 0 0 auto;
}
/* /Components/Features/DataSources/LookupUploadPreview.razor.rz.scp.css */
/*  The preview: the counts, the fraud banner, and the per-row detail. */

.lup[b-mfm4vtsuni] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Count tiles ──────────────────────────────────────────────────────── */

.lup-tiles[b-mfm4vtsuni] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lup-tile[b-mfm4vtsuni] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 7.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border, #dfe3e8);
    border-top-width: 3px;
    border-radius: 6px;
    background: var(--surface-1, #fff);
}

.lup-tile--new[b-mfm4vtsuni]      { border-top-color: var(--tone-success, #1f9d55); }
.lup-tile--changed[b-mfm4vtsuni]  { border-top-color: var(--tone-info, #3b7ddd); }
.lup-tile--invalid[b-mfm4vtsuni]  { border-top-color: var(--tone-danger, #c0392b); }

.lup-count[b-mfm4vtsuni] {
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.lup-tile-label[b-mfm4vtsuni] {
    font-size: 0.75rem;
    color: var(--text-muted, #5b6472);
}

/* ── Alerts ───────────────────────────────────────────────────────────── */

.lup-alert[b-mfm4vtsuni] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border, #dfe3e8);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.lup-alert p[b-mfm4vtsuni] {
    margin: 0;
    max-width: 78ch;
}

.lup-alert-title[b-mfm4vtsuni] {
    font-weight: 600;
}

.lup-alert--info[b-mfm4vtsuni]    { border-left-color: var(--tone-info, #3b7ddd); }
.lup-alert--warn[b-mfm4vtsuni]    { border-left-color: var(--tone-warning, #c47f17); }
.lup-alert--danger[b-mfm4vtsuni]  { border-left-color: var(--tone-danger, #c0392b); }

/* ── Filters ──────────────────────────────────────────────────────────── */

.lup-filters[b-mfm4vtsuni] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.lup-filter[b-mfm4vtsuni] {
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 999px;
    background: var(--surface-1, #fff);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.lup-filter--on[b-mfm4vtsuni] {
    border-color: var(--accent, #2f6fd0);
    background: var(--accent-soft, #eaf1fc);
    font-weight: 600;
}

.lup-empty[b-mfm4vtsuni] {
    margin: 0;
    color: var(--text-muted, #5b6472);
}

/* ── The row table ────────────────────────────────────────────────────── */

/*  Scrolls inside its own box rather than pushing the page sideways. */
.lup-scroll[b-mfm4vtsuni] {
    overflow-x: auto;
    max-height: 32rem;
    overflow-y: auto;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
}

.lup-table[b-mfm4vtsuni] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.lup-table th[b-mfm4vtsuni],
.lup-table td[b-mfm4vtsuni] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #dfe3e8);
    vertical-align: top;
}

.lup-table thead th[b-mfm4vtsuni] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2, #f7f8fa);
    font-weight: 600;
    white-space: nowrap;
}

.lup-num[b-mfm4vtsuni] {
    width: 4rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, #5b6472);
}

.lup-key[b-mfm4vtsuni] {
    font-weight: 500;
}

.lup-detail[b-mfm4vtsuni] {
    max-width: 48ch;
}

.lup-message[b-mfm4vtsuni] {
    color: var(--text-muted, #5b6472);
}

/* ── Verdicts ─────────────────────────────────────────────────────────── */

.lup-verdict[b-mfm4vtsuni] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2, #f7f8fa);
}

.lup-verdict--new[b-mfm4vtsuni] {
    background: var(--tone-success-soft, #e6f5ec);
    color: var(--tone-success-ink, #16653a);
}

.lup-verdict--changed[b-mfm4vtsuni] {
    background: var(--tone-info-soft, #eaf1fc);
    color: var(--tone-info-ink, #1c4f9c);
}

.lup-verdict--invalid[b-mfm4vtsuni] {
    background: var(--tone-danger-soft, #fbeae8);
    color: var(--tone-danger-ink, #91291d);
}

/* ── Cell diffs ───────────────────────────────────────────────────────── */

.lup-diffs[b-mfm4vtsuni] {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.lup-diff[b-mfm4vtsuni] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: baseline;
    font-size: 0.8125rem;
}

.lup-diff-col[b-mfm4vtsuni] {
    font-weight: 600;
    min-width: 9rem;
}

.lup-diff-from[b-mfm4vtsuni] {
    color: var(--text-muted, #5b6472);
    text-decoration: line-through;
}

.lup-diff-to[b-mfm4vtsuni]::before {
    content: "→ ";
    color: var(--text-muted, #5b6472);
}

/*  A bank or account change is the one an operator must not skim past. */
.lup-diff--sensitive[b-mfm4vtsuni] {
    padding-left: 0.5rem;
    border-left: 3px solid var(--tone-danger, #c0392b);
}

.lup-diff--sensitive .lup-diff-col[b-mfm4vtsuni] {
    color: var(--tone-danger-ink, #91291d);
}
/* /Components/Features/DataSources/LookupUploadWizard.razor.rz.scp.css */
/*  The upload wizard's own frame: the step panel, its alerts, and the
    outcome table. The two children carry their own styles. */

.luw[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.luw-panel[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.luw-lede[b-020mzqfcxa] {
    margin: 0;
    max-width: 68ch;
    color: var(--text-muted, #5b6472);
}

.luw-hint[b-020mzqfcxa] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #5b6472);
}

/* ── Alerts ───────────────────────────────────────────────────────────── */

.luw-alert[b-020mzqfcxa] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border, #dfe3e8);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.luw-alert p[b-020mzqfcxa] {
    margin: 0;
    max-width: 78ch;
}

.luw-alert-title[b-020mzqfcxa] {
    font-weight: 600;
}

.luw-alert--info[b-020mzqfcxa]    { border-left-color: var(--tone-info, #3b7ddd); }
.luw-alert--ok[b-020mzqfcxa]      { border-left-color: var(--tone-success, #1f9d55); }
.luw-alert--warn[b-020mzqfcxa]    { border-left-color: var(--tone-warning, #c47f17); }
.luw-alert--danger[b-020mzqfcxa]  { border-left-color: var(--tone-danger, #c0392b); }

/* ── The chosen file ──────────────────────────────────────────────────── */

.luw-file[b-020mzqfcxa] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.luw-file-meta[b-020mzqfcxa] {
    font-size: 0.8125rem;
    color: var(--text-muted, #5b6472);
}

/* ── Provenance ───────────────────────────────────────────────────────── */

.luw-provenance[b-020mzqfcxa] {
    margin: 0;
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
}

.luw-provenance legend[b-020mzqfcxa] {
    padding: 0 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.luw-provenance-fields[b-020mzqfcxa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.luw-field[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Content-box globally, so give it a border-box of its own before setting a
   width — otherwise the padding pushes it out of its grid cell. */
.luw-field .form-input[b-020mzqfcxa] {
    width: 100%;
    box-sizing: border-box;
}

.luw-label[b-020mzqfcxa] {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── Actions ──────────────────────────────────────────────────────────── */

.luw-actions[b-020mzqfcxa] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

/* ── Confirm dialog contents ──────────────────────────────────────────── */

.luw-confirm-list[b-020mzqfcxa] {
    margin: 0.5rem 0;
    padding-left: 1.1rem;
}

.luw-confirm-danger[b-020mzqfcxa] {
    color: var(--tone-danger, #c0392b);
    font-weight: 600;
}

.luw-confirm-note[b-020mzqfcxa] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #5b6472);
}

/* ── Outcome table ────────────────────────────────────────────────────── */

/*  Wide content scrolls inside its own box rather than pushing the page
    sideways. */
.luw-scroll[b-020mzqfcxa] {
    overflow-x: auto;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
}

.luw-table[b-020mzqfcxa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.luw-table th[b-020mzqfcxa],
.luw-table td[b-020mzqfcxa] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #dfe3e8);
    vertical-align: top;
}

.luw-table thead th[b-020mzqfcxa] {
    position: sticky;
    top: 0;
    background: var(--surface-2, #f7f8fa);
    font-weight: 600;
    white-space: nowrap;
}

.luw-table tbody tr:last-child th[b-020mzqfcxa],
.luw-table tbody tr:last-child td[b-020mzqfcxa] {
    border-bottom: 0;
}

/* ── Saved mappings ────────────────────────────────────────────────────────
   Above the mapping grid, because choosing a starting point comes before
   correcting one. */

.luw-saved[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.luw-saved-row[b-020mzqfcxa] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.luw-saved-pick[b-020mzqfcxa] {
    flex: 1 1 20rem;
    min-width: 12rem;
}

.luw-saved-name[b-020mzqfcxa] {
    padding-top: 0.25rem;
    border-top: 1px solid var(--border, #dfe3e8);
}

/* ── Load history ──────────────────────────────────────────────────────────
   What the batch id on the outcome screen refers to. */

.luw-history[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #dfe3e8);
}

.luw-history-title[b-020mzqfcxa] {
    margin: 0;
    font-size: 0.9375rem;
}

/* The batch id is the handle for the whole load, so it reads as a link. */
.luw-batch[b-020mzqfcxa] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--accent, #2f6fd0);
    text-decoration: underline;
    cursor: pointer;
}

.luw-batch:hover[b-020mzqfcxa] {
    color: var(--accent-strong, #1d4f9c);
}

.luw-history-detail[b-020mzqfcxa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 6px;
    background: var(--surface-2, #f7f8fa);
}

.luw-history-head[b-020mzqfcxa] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

.luw-history-head h4[b-020mzqfcxa] {
    margin: 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Features/DocumentTypes/DocumentTypeOverviewTab.razor.rz.scp.css */
/*  Overview tab (Taxonomy TX2, #802): map + health + quick actions, the Used-by rail beside. */

/*  The map takes the whole pane — at a 1280px viewport the detail pane is only ~600px wide
    once the nav and the rail have theirs, so a map squeezed into a column beside the Used-by
    rail overlapped its own hub. Health, quick actions and the rail share the row below. */
.dto[b-ipql0y4h33] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dto-map[b-ipql0y4h33] {
    min-width: 0;
}

.dto-grid[b-ipql0y4h33] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
}

.dto-main[b-ipql0y4h33] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.dto-rail[b-ipql0y4h33] {
    position: sticky;
    top: 1rem;
    min-width: 0;
}

.dto-section[b-ipql0y4h33] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dto-title[b-ipql0y4h33] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dto-muted[b-ipql0y4h33] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.dto-partial[b-ipql0y4h33] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--status-warning-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8rem;
}

.dto-ok[b-ipql0y4h33] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--status-success-border);
    border-radius: var(--radius);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: 0.85rem;
}

.dto-findings[b-ipql0y4h33] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dto-finding[b-ipql0y4h33] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.dto-finding-label[b-ipql0y4h33] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.dto-finding-message[b-ipql0y4h33] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dto-actions[b-ipql0y4h33] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.dto-action[b-ipql0y4h33] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.dto-action-note[b-ipql0y4h33] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

@media (max-width: 1180px) {
    .dto-grid[b-ipql0y4h33] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dto-rail[b-ipql0y4h33] {
        position: static;
    }
}
/* /Components/Features/DocumentTypes/DocumentTypePropertiesEditor.razor.rz.scp.css */
/*  Properties tab (Taxonomy TX2, #802) — D1's editor sections inline. Mirrors the shell, flag
    grid and danger-zone tokens EntityEditor.razor.css established; .dtp- prefix. */

.dtp-status[b-a2j72flx4b] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.dtp-readonly[b-a2j72flx4b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dtp-sections[b-a2j72flx4b] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dtp-section[b-a2j72flx4b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dtp-title[b-a2j72flx4b] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dtp-textarea[b-a2j72flx4b] {
    resize: vertical;
    min-height: 3.5rem;
}

.dtp-number[b-a2j72flx4b] {
    max-width: 7rem;
}

.dtp-fact[b-a2j72flx4b] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.dtp-chip-row[b-a2j72flx4b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0.35rem 0 0;
}

.dtp-chip-note[b-a2j72flx4b] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.dtp-change-location[b-a2j72flx4b] {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* ── Document options / owner overrides flag grid ──────────────────────── */

.dtp-flag-grid[b-a2j72flx4b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.dtp-flag-cell[b-a2j72flx4b] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dtp-flag-cell--input[b-a2j72flx4b] {
    cursor: pointer;
}

.dtp-flag-cell--on[b-a2j72flx4b] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, var(--color-surface-raised));
}

.dtp-flag-cell--fixed[b-a2j72flx4b] {
    opacity: 0.7;
}

.dtp-flag-dot[b-a2j72flx4b] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-border);
    flex-shrink: 0;
}

.dtp-flag-cell--on .dtp-flag-dot[b-a2j72flx4b] {
    background: var(--color-brand-teal);
}

.dtp-flag-fixed-note[b-a2j72flx4b] {
    margin-left: auto;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
}

.dtp-thumbnails[b-a2j72flx4b] {
    max-width: 16rem;
}

/* ── Retention age fields ───────────────────────────────────────────────── */

.dtp-age-row[b-a2j72flx4b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dtp-age-field[b-a2j72flx4b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Location drawer ────────────────────────────────────────────────────── */

.dtp-drawer[b-a2j72flx4b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dtp-drawer-tree[b-a2j72flx4b] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 24rem;
    overflow-y: auto;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.dtp-danger[b-a2j72flx4b] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius);
    background: var(--status-error-bg);
}

.dtp-danger-title[b-a2j72flx4b] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--status-error-fg);
}

.dtp-danger-lede[b-a2j72flx4b] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Features/DocumentTypes/DocumentTypeRelatedTab.razor.rz.scp.css */
/*  Related tab (Taxonomy TX2, #802). Tokens only. */

.dtr[b-9xhq3y0iow] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.dtr-section[b-9xhq3y0iow] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dtr-title[b-9xhq3y0iow] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dtr-lede[b-9xhq3y0iow] {
    margin: 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.dtr-row[b-9xhq3y0iow] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.dtr-label[b-9xhq3y0iow] {
    min-width: 8rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.dtr-muted[b-9xhq3y0iow] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.dtr-detach[b-9xhq3y0iow] {
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}

.dtr-attach[b-9xhq3y0iow] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.dtr-attach-row[b-9xhq3y0iow] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.dtr-attach-field[b-9xhq3y0iow] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 16rem;
}

.dtr-list[b-9xhq3y0iow] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dtr-item[b-9xhq3y0iow] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.dtr-criteria[b-9xhq3y0iow] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/*  An assist is not a taxonomy entity, so it is not a TaxonomyRef chip — this restates the chip's
    look locally (a component's scoped styles never reach another component's markup). */
.dtr-chip[b-9xhq3y0iow] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.dtr-chip:hover[b-9xhq3y0iow],
.dtr-chip:focus-visible[b-9xhq3y0iow] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    outline: none;
}

.dtr-chip-icon[b-9xhq3y0iow] {
    display: inline-flex;
    color: var(--color-text-secondary);
    flex: none;
}

.dtr-chip-detail[b-9xhq3y0iow] {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

.dtr-chip-detail[b-9xhq3y0iow]::before {
    content: "·";
    margin-right: 0.35rem;
}
/* /Components/Features/DocumentTypes/DocumentTypeSecurityTab.razor.rz.scp.css */
/*  Security tab (Taxonomy TX2, #802). Tokens only. */

.dts[b-n6ob9szj1n] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dts-section[b-n6ob9szj1n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dts-title[b-n6ob9szj1n] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dts-facts[b-n6ob9szj1n] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: 0.9rem;
}

.dts-facts dt[b-n6ob9szj1n] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.dts-facts dd[b-n6ob9szj1n] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    color: var(--color-text-primary);
}

.dts-meaning[b-n6ob9szj1n] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.dts-note[b-n6ob9szj1n] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.dts-note .ui-icon[b-n6ob9szj1n] {
    flex: none;
    margin-top: 0.15rem;
}

.dts-warning[b-n6ob9szj1n] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--status-warning-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.85rem;
    line-height: 1.5;
}

.dts-warning .ui-icon[b-n6ob9szj1n] {
    flex: none;
    margin-top: 0.1rem;
}

.dts-status[b-n6ob9szj1n] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.dts-status--error p[b-n6ob9szj1n] {
    margin: 0 0 0.5rem;
}

.dts-muted[b-n6ob9szj1n] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.dts-explainer[b-n6ob9szj1n] {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}
/* /Components/Features/DocumentTypes/DocumentTypeTagsTab.razor.rz.scp.css */
/*  Tags tab — the placement editor (Taxonomy TX1, #801; hosted here since TX2, #802): available
    tag types on the left, the placement tree (or the index-panel preview) on the right. The tree,
    drawer and preview carry their own scoped styles (Features/Taxonomy). Class names are the
    ones TX1 established (dt-pl-*), so its tests and specs still find them. */

.dt-tags[b-9a74lkh2ri] {
    container-type: inline-size;
    min-width: 0;
}

.dt-rail-status[b-9a74lkh2ri] {
    padding: 1rem 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.dt-rail-error[b-9a74lkh2ri] {
    color: var(--color-down);
}

.dt-muted[b-9a74lkh2ri] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.dt-pl-layout[b-9a74lkh2ri] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    min-height: 320px;
}

.dt-pl-available[b-9a74lkh2ri] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    min-width: 0;
}

.dt-pl-pane-title[b-9a74lkh2ri] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dt-pl-filter[b-9a74lkh2ri] {
    width: 100%;
    box-sizing: border-box;
}

.dt-pl-available-list[b-9a74lkh2ri] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

.dt-pl-available-item[b-9a74lkh2ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.25rem;
    border-top: 1px solid var(--color-border);
}

.dt-pl-available-item:first-child[b-9a74lkh2ri] {
    border-top: 0;
}

.dt-pl-available-body[b-9a74lkh2ri] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dt-pl-available-name[b-9a74lkh2ri] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-pl-available-sub[b-9a74lkh2ri] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.dt-pl-add[b-9a74lkh2ri] {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.dt-pl-main[b-9a74lkh2ri] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.dt-pl-toolbar[b-9a74lkh2ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dt-pl-summary[b-9a74lkh2ri] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dt-pl-retry[b-9a74lkh2ri] {
    margin-left: 0.75rem;
}

.dt-pl-readonly-note[b-9a74lkh2ri] {
    margin: 0 0 0.75rem;
}

/*  Two panes need room: on a narrow viewport, or whenever the pane the tab sits in is under
    ~40rem (at a 1280px viewport the detail pane is about 570px), the available list sits
    above the tree instead of beside it. */
@media (max-width: 900px) {
    .dt-pl-layout[b-9a74lkh2ri] {
        grid-template-columns: 1fr;
    }
    .dt-pl-available[b-9a74lkh2ri] {
        position: static;
    }
}

@container (max-width: 40rem) {
    .dt-pl-layout[b-9a74lkh2ri] {
        grid-template-columns: 1fr;
    }
    .dt-pl-available[b-9a74lkh2ri] {
        position: static;
    }
    .dt-pl-available-list[b-9a74lkh2ri] {
        max-height: 14rem;
    }
}
/* /Components/Features/DocumentTypes/DocumentTypeWorkflowSection.razor.rz.scp.css */
/*  D3 (#369): the read-only Workflow section on DocumentTypeEditor.razor. Table look and feel
    is deliberately the same as DocumentTypes.razor.css's .dt-table rules — copied rather than
    shared, because Blazor's CSS isolation scopes each .razor.css to its own component and a
    cross-component class reference would silently do nothing. */

.dtwf-section[b-preoffe9j4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dtwf-hint[b-preoffe9j4] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dtwf-hint a[b-preoffe9j4] {
    color: var(--color-brand-teal, var(--color-brand));
    font-weight: 500;
}

.dtwf-block + .dtwf-block[b-preoffe9j4] {
    margin-top: 1.5rem;
}

.dtwf-subtitle[b-preoffe9j4] {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.dtwf-count[b-preoffe9j4] {
    font-weight: 500;
    opacity: 0.7;
    text-transform: none;
    letter-spacing: normal;
}

.dtwf-muted[b-preoffe9j4] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.dtwf-muted-mono[b-preoffe9j4] {
    margin-left: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.dtwf-flow-name[b-preoffe9j4] {
    font-weight: 500;
}

.dtwf-table-scroll[b-preoffe9j4] {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.dtwf-table[b-preoffe9j4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.dtwf-table thead th[b-preoffe9j4] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    z-index: 1;
}

.dtwf-table tbody td[b-preoffe9j4] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.dtwf-table tbody tr:last-child td[b-preoffe9j4] {
    border-bottom: none;
}

.dtwf-table--clickable .dtwf-row[b-preoffe9j4] {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.dtwf-table--clickable .dtwf-row:hover[b-preoffe9j4],
.dtwf-table--clickable .dtwf-row:focus-visible[b-preoffe9j4] {
    background: var(--color-surface-raised);
    outline: none;
}

.dtwf-table--clickable .dtwf-row:focus-visible[b-preoffe9j4] {
    box-shadow: inset 0 0 0 2px var(--color-brand);
}

.dtwf-th-actions[b-preoffe9j4] {
    width: 1.5rem;
}

.dtwf-chevron[b-preoffe9j4] {
    color: var(--color-text-secondary);
    text-align: right;
    width: 1.5rem;
    padding-right: 0.75rem !important;
}

.dtwf-table--clickable .dtwf-row:hover .dtwf-chevron[b-preoffe9j4] {
    color: var(--color-brand);
}

/* Task managers has its own table now — see Administration/TaskManagerGrantsTable.razor.css,
   shared with R4's role-scoped view (#360, part of epic AD3 #327). */

/* Taxonomy TX2 (#802): a task-wide aging row (DocumentTypeId -1) shown as inherited, not dropped. */
.dtwf-pill[b-preoffe9j4] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
/* /Components/Features/DocumentTypes/DuplicateDocumentTypeDialog.razor.rz.scp.css */
/* Same shape as DuplicateWorkflowDialog (and the portal's other form dialogs):
   fixed backdrop, centred card, sticky head and foot so a long plan scrolls in
   its own body rather than the whole card. Tokens only. */

.ddt-overlay[b-4wmgf1gntt] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
}

.ddt[b-4wmgf1gntt] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(42rem, calc(100vw - 2rem));
    max-height: min(50rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.ddt:focus[b-4wmgf1gntt] {
    outline: none;
}

.ddt-head[b-4wmgf1gntt] {
    padding: 1.125rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.ddt-title[b-4wmgf1gntt] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ddt-hint[b-4wmgf1gntt] {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* The global .form-field grid rules indent every even field and draw a left
   border (they are written for a two-column form grid); inside this single
   column dialog every field sits flush, whatever its position. */
.ddt-body > .ddt-field[b-4wmgf1gntt] {
    padding: 0.25rem 0;
    border: none;
}

.ddt-stepper[b-4wmgf1gntt] {
    padding: 0.75rem 1.25rem 0;
}

.ddt-body[b-4wmgf1gntt] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.ddt-actions[b-4wmgf1gntt] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.ddt-actions-spacer[b-4wmgf1gntt] {
    flex: 1 1 auto;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.ddt-section[b-4wmgf1gntt] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0;
    margin: 0;
    border: none;
}

.ddt-section-title[b-4wmgf1gntt] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.ddt-fieldset[b-4wmgf1gntt] {
    padding: 0;
}

.ddt-fixed[b-4wmgf1gntt] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ddt-check[b-4wmgf1gntt] {
    margin-top: 0.25rem;
}

.ddt-check-hint[b-4wmgf1gntt] {
    display: block;
    margin: -0.25rem 0 0 1.75rem;
    line-height: 1.5;
}

.ddt-muted[b-4wmgf1gntt] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ddt-optional[b-4wmgf1gntt] {
    font-weight: 400;
    color: var(--color-text-secondary);
}

.ddt-textarea[b-4wmgf1gntt] {
    resize: vertical;
    min-height: 3rem;
}

/* ── The honest note ─────────────────────────────────────────────────────── */

.ddt-note[b-4wmgf1gntt] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ── Plan steps ──────────────────────────────────────────────────────────── */

.ddt-steps[b-4wmgf1gntt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ddt-step[b-4wmgf1gntt] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.ddt-step--off[b-4wmgf1gntt] {
    opacity: 0.72;
}

.ddt-step-head[b-4wmgf1gntt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ddt-step-label[b-4wmgf1gntt] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ddt-step-count[b-4wmgf1gntt] {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.ddt-step-detail[b-4wmgf1gntt] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ddt-warnings[b-4wmgf1gntt] {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--status-warning-fg);
}

.ddt-lines[b-4wmgf1gntt] {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* ── Change plan ─────────────────────────────────────────────────────────── */

.ddt-plan[b-4wmgf1gntt] {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
}

.ddt-plan summary[b-4wmgf1gntt] {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ddt-plan-purpose[b-4wmgf1gntt] {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ddt-plan-json[b-4wmgf1gntt] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    white-space: pre;
}

/* ── Result ──────────────────────────────────────────────────────────────── */

.ddt-pair[b-4wmgf1gntt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ddt-arrow[b-4wmgf1gntt] {
    color: var(--color-text-secondary);
}

.ddt-open[b-4wmgf1gntt] {
    align-self: flex-start;
    text-decoration: none;
}
/* /Components/Features/Families/FamiliesGateHost.razor.rz.scp.css */
/*  The closed states of the Families gate. Same shapes as the Control Centres
    and Settings gates; tokens only, so a palette change lands here too. */

.page-title[b-lcxqpvsbsl] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-lcxqpvsbsl] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.gate-checking[b-lcxqpvsbsl],
.gate-denied[b-lcxqpvsbsl] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
}

.gate-checking[b-lcxqpvsbsl] {
    text-align: center;
}

/*  Denied is an error state and is coloured as one — but the words carry the
    meaning; the tint only reinforces them. --color-down is a badge fill, so it
    is mixed down for the border and the wash rather than used raw. */
.gate-denied[b-lcxqpvsbsl] {
    max-width: 40rem;
    margin-top: 1.5rem;
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
    color: var(--color-text-primary);
}

.gate-denied p[b-lcxqpvsbsl] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.gate-denied code[b-lcxqpvsbsl] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}
/* /Components/Features/Families/FamilyDocumentTypesPanel.razor.rz.scp.css */
/*  The document types that point at a family, and the attach row. Tokens only. */

.fam-types-panel[b-82mm4t11jg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fam-note[b-82mm4t11jg] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fam-note--quiet[b-82mm4t11jg] {
    border-left-color: var(--color-brand-teal);
}

.fam-types-empty[b-82mm4t11jg] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fam-types[b-82mm4t11jg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fam-type[b-82mm4t11jg] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
}

.fam-type-link[b-82mm4t11jg] {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

.fam-type-link:hover[b-82mm4t11jg] {
    text-decoration: underline;
}

.fam-type-id[b-82mm4t11jg] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.fam-type-detach[b-82mm4t11jg] {
    margin-left: auto;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

/* ── Attach row ─────────────────────────────────────────────────────────── */

.fam-attach[b-82mm4t11jg] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.fam-attach-row[b-82mm4t11jg] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fam-attach-field[b-82mm4t11jg] {
    flex: 1 1 18rem;
    max-width: 32rem;
    min-width: 0;
}

.fam-attach-field .form-input[b-82mm4t11jg] {
    box-sizing: border-box;
}

.fam-attach-btn[b-82mm4t11jg] {
    white-space: nowrap;
}

.fam-attach-hint[b-82mm4t11jg] {
    margin: 0;
}
/* /Components/Features/Families/FamilyExplainTable.razor.rz.scp.css */
/*  The explain table. A skipped row is greyed AND worded — the grey is a
    reinforcement, never the message. Tokens only. */

.fam-explain-none[b-6u5xmli36l] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.fam-explain-wrap[b-6u5xmli36l] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
}

.fam-explain[b-6u5xmli36l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fam-explain thead th[b-6u5xmli36l] {
    text-align: left;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fam-explain-group-head[b-6u5xmli36l] {
    text-align: left;
    padding: 0.5rem 0.875rem;
    background: var(--color-surface-raised);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fam-explain-group--skipped .fam-explain-group-head[b-6u5xmli36l] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.fam-explain td[b-6u5xmli36l] {
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    color: var(--color-text-primary);
}

.fam-explain tbody tr:last-child td[b-6u5xmli36l] {
    border-bottom: none;
}

.fam-explain-row--skipped td[b-6u5xmli36l] {
    color: var(--color-text-muted);
}

.fam-explain-id[b-6u5xmli36l],
.fam-explain-num[b-6u5xmli36l] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fam-explain-num[b-6u5xmli36l] {
    text-align: right;
}

.fam-explain-literal[b-6u5xmli36l] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
}

.fam-explain-empty[b-6u5xmli36l],
.fam-explain-absent[b-6u5xmli36l] {
    font-style: italic;
}

.fam-explain-empty[b-6u5xmli36l] {
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

.fam-explain-scope[b-6u5xmli36l] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/Families/FamilyPropertiesForm.razor.rz.scp.css */
/*  The family properties form. The grid, labels, inputs, hints and errors are
    the shared vocabulary in app.css; only the read-only facts and two box-model
    fixes live here. */

/*  The global .form-input is content-box at width 100%, so with padding it
    overflows a grid cell by its horizontal padding. Won by specificity, not by
    order — the styles bundle repeats each scoped file out of file order. */
.fam-props .form-input[b-31prd1j2d4] {
    box-sizing: border-box;
}

.fam-textarea[b-31prd1j2d4] {
    resize: vertical;
    min-height: 4.5rem;
}

.fam-number[b-31prd1j2d4] {
    max-width: 10rem;
}

.fam-icon-fact[b-31prd1j2d4] {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ── Read-only facts ─────────────────────────────────────────────────────── */

.fam-facts[b-31prd1j2d4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
}

.fam-fact[b-31prd1j2d4] {
    min-width: 0;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.625rem 0.75rem;
}

.fam-fact--wide[b-31prd1j2d4] {
    grid-column: 1 / -1;
}

.fam-fact dt[b-31prd1j2d4] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fam-fact dd[b-31prd1j2d4] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}
/* /Components/Features/Families/FamilyResultsList.razor.rz.scp.css */
/*  The live results, one section per target type. The table itself is the
    shared DataTable; only the section chrome and the honest empty copy are here. */

.fam-results[b-pezsrlopq3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fam-note[b-pezsrlopq3] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fam-note--warn[b-pezsrlopq3] {
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

.fam-results-group[b-pezsrlopq3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fam-results-head[b-pezsrlopq3] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}

.fam-results-title[b-pezsrlopq3] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fam-results-count[b-pezsrlopq3] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fam-results-skipped[b-pezsrlopq3],
.fam-results-empty[b-pezsrlopq3],
.fam-results-honest[b-pezsrlopq3] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fam-results-skipped[b-pezsrlopq3] {
    font-style: italic;
}

.fam-results-honest[b-pezsrlopq3] {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

[b-pezsrlopq3] .fam-match-name {
    font-weight: 600;
}

[b-pezsrlopq3] .fam-match-id {
    margin-left: 0.3rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

[b-pezsrlopq3] .fam-match-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* /Components/Features/Families/FamilyRuleEditor.razor.rz.scp.css */
/*  The family rule editor. Cards, not rows: five controls across a table would
    wrap into something unreadable, and the sentence under each card is the
    part an operator actually checks. Tokens only. */

.fam-re[b-o9uli7cspc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fam-rules-hint[b-o9uli7cspc],
.fam-rules-empty[b-o9uli7cspc] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fam-rules-error[b-o9uli7cspc] {
    margin: 0;
}

.fam-note[b-o9uli7cspc] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/*  A caution pairs its colour with a sentence that says what is wrong; the
    tint alone never carries it. --color-degraded is a badge fill, mixed down. */
.fam-note--warn[b-o9uli7cspc] {
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

/* ── Groups ─────────────────────────────────────────────────────────────── */

.fam-group[b-o9uli7cspc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.875rem 1rem 1rem;
}

.fam-group-title[b-o9uli7cspc] {
    margin: 0 0 0.625rem;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fam-group-or[b-o9uli7cspc] {
    align-self: center;
    padding: 0.125rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* ── Rule cards ─────────────────────────────────────────────────────────── */

.fam-rules[b-o9uli7cspc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fam-rule[b-o9uli7cspc] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.625rem 0.75rem 0.75rem;
}

.fam-rule-head[b-o9uli7cspc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fam-rule-number[b-o9uli7cspc] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fam-rule-tools[b-o9uli7cspc] {
    display: flex;
    gap: 0.25rem;
}

.fam-linkbtn[b-o9uli7cspc] {
    background: none;
    border: 0;
    padding: 0.1875rem 0.375rem;
    border-radius: calc(var(--radius) * 0.5);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.fam-linkbtn:hover:not(:disabled)[b-o9uli7cspc] {
    text-decoration: underline;
}

.fam-linkbtn:focus-visible[b-o9uli7cspc] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.fam-linkbtn:disabled[b-o9uli7cspc] {
    color: var(--color-text-muted);
    cursor: default;
}

.fam-linkbtn--danger[b-o9uli7cspc] {
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.fam-rule-grid[b-o9uli7cspc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem 0.75rem;
}

.fam-rule-cell[b-o9uli7cspc] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fam-rule-cell--group[b-o9uli7cspc] {
    max-width: 7rem;
}

.fam-microlabel[b-o9uli7cspc] {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/*  The global .form-input is content-box at width 100%; in a grid cell that
    overflows by the padding. Specificity wins here, not order — the styles
    bundle repeats each scoped file out of file order. */
.fam-rule-grid .form-input[b-o9uli7cspc] {
    box-sizing: border-box;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
}

.fam-rule-static[b-o9uli7cspc] {
    margin-top: 0.375rem;
}

.fam-rule-sentence[b-o9uli7cspc] {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.fam-rule-sentence--incomplete[b-o9uli7cspc] {
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
    font-style: italic;
}

.fam-add-rule[b-o9uli7cspc],
.fam-add-group[b-o9uli7cspc] {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
}

.fam-add-rule[b-o9uli7cspc] {
    margin-top: 0.625rem;
}

.fam-add-group-row[b-o9uli7cspc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── Read-only sentences ───────────────────────────────────────────────── */

.fam-rules-readonly[b-o9uli7cspc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fam-rules-readonly-group[b-o9uli7cspc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.875rem 1rem;
}

.fam-rules-readonly-group .fam-group-title[b-o9uli7cspc] {
    margin: 0;
}

.fam-rules-readonly-rules[b-o9uli7cspc] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fam-rules-readonly-rules .fam-rule-sentence[b-o9uli7cspc] {
    margin: 0;
}

.fam-conj[b-o9uli7cspc] {
    margin-left: 0.4rem;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.fam-rules-readonly-group .fam-group-or[b-o9uli7cspc] {
    align-self: flex-start;
    margin-top: 0.25rem;
}
/* /Components/Features/Families/FamilyTestPanel.razor.rz.scp.css */
/*  The Test tab. The explain table and the results list carry their own
    scoped styles; this file is the input row, the sample card and the notes. */

.fam-test[b-1sfg1rmt3d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fam-note[b-1sfg1rmt3d] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fam-note--warn[b-1sfg1rmt3d] {
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

/* ── Input row ──────────────────────────────────────────────────────────── */

.fam-test-input[b-1sfg1rmt3d] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.fam-test-field[b-1sfg1rmt3d] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fam-test-field--id[b-1sfg1rmt3d] {
    flex: 0 1 11rem;
}

.fam-test-field--recent[b-1sfg1rmt3d] {
    flex: 1 1 16rem;
    max-width: 26rem;
}

.fam-test-field .form-input[b-1sfg1rmt3d] {
    box-sizing: border-box;
}

.fam-test-run[b-1sfg1rmt3d] {
    white-space: nowrap;
}

.fam-test-samples-note[b-1sfg1rmt3d] {
    margin: 0 0 0.6rem;
    max-width: 24rem;
}

.fam-test-status[b-1sfg1rmt3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.fam-spin[b-1sfg1rmt3d] {
    animation: fam-spin-b-1sfg1rmt3d 0.9s linear infinite;
}

@keyframes fam-spin-b-1sfg1rmt3d {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fam-spin[b-1sfg1rmt3d] { animation: none; }
}

.fam-test-problem[b-1sfg1rmt3d] {
    margin: 0;
}

/* ── Result ─────────────────────────────────────────────────────────────── */

.fam-test-result[b-1sfg1rmt3d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fam-sample-card[b-1sfg1rmt3d] {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.fam-sample-name[b-1sfg1rmt3d] {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fam-sample-id[b-1sfg1rmt3d] {
    margin-left: 0.4rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.fam-sample-facts[b-1sfg1rmt3d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.fam-sample-fact dt[b-1sfg1rmt3d] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fam-sample-fact dd[b-1sfg1rmt3d] {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ── Warnings ───────────────────────────────────────────────────────────── */

.fam-warnings[b-1sfg1rmt3d] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fam-warning-code[b-1sfg1rmt3d] {
    margin-right: 0.35rem;
    font-size: 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 0.2rem;
    padding: 0.05rem 0.3rem;
}
/* /Components/Features/FormDesigner/AssistEditor.razor.rz.scp.css */
/* ── Assist editor ─────────────────────────────────────────────────────────
   The TriggerEditor frame (a fixed right-hand panel over a translucent
   overlay, or inline on the assist library page), republished under its own
   root for the same reason that editor republishes it: scoped CSS cannot be
   shared between components, and this one is mounted from an inspector, from
   a page that is not inside one, and as a drawer over either.
   ────────────────────────────────────────────────────────────────────────── */

.fd-ae-overlay[b-vo19hh7mb9] {
    position: fixed;
    inset: var(--top-bar-height, 56px) 0 0 0;
    z-index: 199;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fd-ae-overlay--on[b-vo19hh7mb9] {
    opacity: 1;
    pointer-events: auto;
}

.fd-ae--drawer[b-vo19hh7mb9] {
    /* Opens from the inspector rail, which is position: sticky and so a
       stacking context of its own: nothing inside it can paint over the app's
       top bar whatever its z-index. So the drawer and its overlay start
       below the bar instead of under it — the drawer's own header (title,
       Test…, close) was unreachable at every width. */
    position: fixed;
    top: var(--top-bar-height, 56px);
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(46rem, 100vw);
    height: calc(100dvh - var(--top-bar-height, 56px));
    background: var(--color-surface);
    box-shadow: -8px 0 28px rgba(7, 70, 132, 0.14);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.fd-ae--drawer.fd-ae--on[b-vo19hh7mb9] { transform: translateX(0); }

.fd-ae--drawer:focus[b-vo19hh7mb9] { outline: none; }

.fd-ae--inline[b-vo19hh7mb9] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Frame ───────────────────────────────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-heading {
    flex: 1;
    min-width: 0;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-close:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

/* A flex child defaults to min-width:auto, so one long nowrap token — a
   stored JSON string, a unique name — widened the body and put a horizontal
   scrollbar under every section. */
.fd-ae[b-vo19hh7mb9]  .fd-ae-body > * { min-width: 0; }

/* ── Tabs: the row, its rows, and (triggers) the live fire panel ──────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.5rem 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem 0.55rem;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-tab:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-surface) 60%, var(--color-surface-raised));
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-tab--on {
    color: var(--color-text-primary);
    font-weight: 600;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-bottom-color: var(--color-brand-teal);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-tab:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Two columns of fields where there is room for them ─────────────────
   The drawer is 46rem and the library page's middle column is wider, so
   the short fields pair up; the first field of a group (the name) and any
   multi-line field keep the full width. */

/* Qualified with the body so it outranks the flex default by specificity,
   not by order: the bundled stylesheet does not preserve this file's order. */
@media (min-width: 64rem) {
    .fd-ae[b-vo19hh7mb9]  .fd-ae-body .fd-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.25rem;
        align-items: start;
    }

    .fd-ae[b-vo19hh7mb9]  .fd-ae-body .fd-fields > .fd-field:first-child,
    .fd-ae[b-vo19hh7mb9]  .fd-ae-body .fd-fields > .fd-field:has(textarea) {
        grid-column: 1 / -1;
    }
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    flex-shrink: 0;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* The note is the flexible part of the footer; the buttons never wrap. */
.fd-ae[b-vo19hh7mb9]  .fd-ae-actions > button {
    flex: none;
    white-space: nowrap;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-error {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 75%, black);
    font-size: 0.85rem;
}

/* ── Fields, chips and the rest of the shared inspector vocabulary ───────── */

.fd-ae[b-vo19hh7mb9]  .fd-sec {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-sec-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fd-ae[b-vo19hh7mb9]  .fd-field .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-field .form-input {
    width: 100%;
    box-sizing: border-box; /* the global input is content-box, so 100% + padding overflowed its column */
}

.fd-ae[b-vo19hh7mb9]  .fd-field .form-hint,
.fd-ae[b-vo19hh7mb9]  .fd-field .form-error {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-field .form-error { color: var(--color-down); }

.fd-ae[b-vo19hh7mb9]  .fd-field-textarea { resize: vertical; }

.fd-ae[b-vo19hh7mb9]  .fd-field-number { max-width: 11rem; }

.fd-ae[b-vo19hh7mb9]  .fd-field-select { appearance: auto; }

.fd-ae[b-vo19hh7mb9]  .fd-field--toggle { gap: 0.3rem; }

.fd-ae[b-vo19hh7mb9]  .fd-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.fd-ae[b-vo19hh7mb9]  .fd-switch-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand);
}

.fd-ae[b-vo19hh7mb9]  .fd-switch-track { display: none; }

.fd-ae[b-vo19hh7mb9]  .fd-switch-state {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-ae[b-vo19hh7mb9]  .fd-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-empty {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-chip-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fd-ae[b-vo19hh7mb9]  .fd-chip--t {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-ae[b-vo19hh7mb9]  .fd-chip--warn {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-ae[b-vo19hh7mb9]  .fd-chip--quiet {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.fd-ae[b-vo19hh7mb9]  .fd-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.fd-ae[b-vo19hh7mb9]  .fd-badge--on {
    background: color-mix(in srgb, var(--color-healthy) 12%, white);
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
    border-color: color-mix(in srgb, var(--color-healthy) 30%, white);
}

.fd-ae[b-vo19hh7mb9]  .fd-badge--warn {
    background: color-mix(in srgb, var(--color-degraded) 15%, white);
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 35%, white);
}

.fd-ae[b-vo19hh7mb9]  .fd-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fd-ae[b-vo19hh7mb9]  .fd-banner svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.1rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-banner--warn {
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, white);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-ae[b-vo19hh7mb9]  .fd-banner code {
    font-size: 0.75rem;
    white-space: nowrap;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-fix { flex: none; }

.fd-ae[b-vo19hh7mb9]  .fd-details {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-details summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    list-style: none;
}

.fd-ae[b-vo19hh7mb9]  .fd-details summary::-webkit-details-marker { display: none; }
.fd-ae[b-vo19hh7mb9]  .fd-details summary::before { content: "▸ "; }
.fd-ae[b-vo19hh7mb9]  .fd-details[open] summary::before { content: "▾ "; }
.fd-ae[b-vo19hh7mb9]  .fd-details[open] { padding-bottom: 0.5rem; }
.fd-ae[b-vo19hh7mb9]  .fd-details > *:not(summary) { margin-top: 0.5rem; }

.fd-ae[b-vo19hh7mb9]  .fd-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-value-chip {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.fd-ae[b-vo19hh7mb9]  code {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Type / action badge rows ────────────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged > .fd-field { flex: 1 1 auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged > .fd-chip { margin-bottom: 0.35rem; }

/* ── Parameter rows ──────────────────────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-params-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-params-head .fd-sec-title { flex: 0 0 auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-addrow { margin-left: auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    overflow: hidden;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-rowbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-rowbtn:hover:not(:disabled) {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-rowbtn--danger:hover:not(:disabled) { color: var(--color-down); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-rowbtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.7rem 0.75rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-matches { margin-top: -0.25rem; }

/* ── Save report ─────────────────────────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-report {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-report--ok { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-report--bad { border-color: color-mix(in srgb, var(--color-degraded) 45%, white); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-report-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-report-msg {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-report-dismiss {
    flex: none;
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-report-issue {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-report-issue--warn { color: color-mix(in srgb, var(--color-degraded) 65%, black); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-block {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-block-mark { flex: none; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-block--ok .fd-ae-block-mark { color: var(--color-healthy); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-block--fail .fd-ae-block-mark { color: var(--color-down); }

.fd-ae[b-vo19hh7mb9]  .fd-ae-block-text {
    display: flex;
    flex-direction: column;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-block-msg { color: var(--color-down); }

/* ── Motion / narrow screens ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fd-ae-overlay[b-vo19hh7mb9] { backdrop-filter: none; transition: none; }
    .fd-ae--drawer[b-vo19hh7mb9] { transition: none; }
    .fd-ae[b-vo19hh7mb9]  .fd-ae-seg-btn { transition: none; }
}

@media (max-width: 48rem) {
    .fd-ae--drawer[b-vo19hh7mb9] { width: 100vw; }
}

/* ── Parameter slots ─────────────────────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 0.75rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-slots > .fd-field:first-child,
.fd-ae[b-vo19hh7mb9]  .fd-ae-slots > .fd-field:last-child { grid-column: 1 / -1; }

.fd-ae[b-vo19hh7mb9]  .fd-details summary .fd-chip { margin-left: 0.4rem; }

@media (max-width: 40rem) {
    .fd-ae[b-vo19hh7mb9]  .fd-ae-slots { grid-template-columns: 1fr; }
}

/* ── Schema-driven parameters page ──────────────────────────────────────── */

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged > .fd-field { flex: 1 1 auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-badged > .fd-chip { margin-bottom: 0.35rem; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-type {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-type-help { font-size: 0.8125rem; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-subkind-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-lint {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-lint-item {
    padding: 0.4rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 40%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-lint-item--error {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 7%, white);
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-kind-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-kind-head .fd-sec-title { flex: 0 0 auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-kind-head .fd-ae-addrow { margin-left: auto; }

.fd-ae[b-vo19hh7mb9]  .fd-ae-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    align-items: start;
}

.fd-ae[b-vo19hh7mb9]  .fd-ae-fld { min-width: 0; }

@media (min-width: 64rem) {
    .fd-ae[b-vo19hh7mb9]  .fd-ae-body .fd-ae-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fd-ae[b-vo19hh7mb9]  .fd-ae-body .fd-ae-grid > .fd-ae-fld--wide { grid-column: 1 / -1; }
}
/* /Components/Features/FormDesigner/FauxControl.razor.rz.scp.css */
/* Faux controls — input silhouettes per §6.2, drawn with spans. */

.fd-fx[b-oboirnhv8o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 2rem;
    padding: 0.3rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-fx--compact[b-oboirnhv8o] {
    min-height: 1.75rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.fd-fx-ph[b-oboirnhv8o] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-unknown);
}

.fd-fx-val[b-oboirnhv8o] {
    flex: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fd-fx-prefix[b-oboirnhv8o] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.fd-fx-glyph[b-oboirnhv8o] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-fx-glyph svg[b-oboirnhv8o] { width: 14px; height: 14px; }
.fd-fx-glyph--end[b-oboirnhv8o] { margin-left: auto; }

/* Description box: three lines tall */
.fd-fx-area[b-oboirnhv8o] {
    align-items: flex-start;
    min-height: 4.5rem;
}

.fd-fx-area.fd-fx--compact[b-oboirnhv8o] { min-height: 2.75rem; }

/* Multi-select tokens */
.fd-fx-multi[b-oboirnhv8o] {
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fd-fx-token[b-oboirnhv8o] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
}

/* Check boxes / radios */
.fd-fx-list[b-oboirnhv8o] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-fx-list--inline[b-oboirnhv8o] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.fd-fx-opt[b-oboirnhv8o] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fd-fx-box[b-oboirnhv8o] {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 1.5px solid var(--color-unknown);
    border-radius: 3px;
    background: var(--color-surface);
}

.fd-fx-radio[b-oboirnhv8o] { border-radius: 50%; }

.fd-fx-box--on[b-oboirnhv8o] {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 15%, white);
}

/* Yes / No segmented */
.fd-fx-seg[b-oboirnhv8o] {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.75rem;
    font-weight: 600;
}

.fd-fx-seg-btn[b-oboirnhv8o] {
    padding: 0.3rem 0.875rem;
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.fd-fx-seg-btn + .fd-fx-seg-btn[b-oboirnhv8o] { border-left: 1px solid var(--color-border); }

.fd-fx-seg-btn--on[b-oboirnhv8o] {
    background: color-mix(in srgb, var(--color-brand) 10%, white);
    color: var(--color-brand);
}

/* User picker */
.fd-fx-avatar[b-oboirnhv8o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.fd-fx-avatar svg[b-oboirnhv8o] { width: 12px; height: 12px; }

/* Upload dropzone */
.fd-fx-drop[b-oboirnhv8o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    border: 1px dashed var(--color-unknown);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-fx-drop--compact[b-oboirnhv8o] { padding: 0.375rem 0.5rem; }

/* Rating */
.fd-fx-stars[b-oboirnhv8o] {
    display: inline-flex;
    gap: 0.2rem;
    color: var(--color-unknown);
}

.fd-fx-stars svg[b-oboirnhv8o] { width: 18px; height: 18px; }

/* Label = info band */
.fd-fx-band[b-oboirnhv8o] {
    display: block;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--color-brand-teal);
    border-radius: 0 calc(var(--radius) * 0.75) calc(var(--radius) * 0.75) 0;
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* Button */
.fd-fx-btn[b-oboirnhv8o] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-brand);
}

/* Line */
.fd-fx-line[b-oboirnhv8o] {
    display: block;
    height: 1px;
    margin: 0.5rem 0;
    background: var(--color-border);
}

/* Nested table marker / unsupported */
.fd-fx-tablemini[b-oboirnhv8o] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-fx-unsupported[b-oboirnhv8o] {
    display: block;
    padding: 0.4rem 0.625rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/FormDesigner/FormAssistantPanel.razor.rz.scp.css */
/* ── Assistant tab (F11.3) ───────────────────────────────────────────────────
   The rail's third tab. The same restraint as Inspect and Checks: tokens
   only, hairline borders, the brand teal for the chosen chip and the focus
   halo, and severity carried by a glyph and a left rule as well as a tint so
   it survives greyscale. The proposal card borrows the policy assistant's diff
   list; the findings borrow the checks panel's rows.
   ────────────────────────────────────────────────────────────────────────── */

.fd-cp[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* ── Header: what the ask is grounded on ─────────────────────────────────── */

.fd-asst-head[b-zekua0x9du] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fd-asst-head svg[b-zekua0x9du] {
    flex: none;
    margin-top: 0.15rem;
    color: var(--color-brand);
}

.fd-asst-head-text[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.fd-asst-subject[b-zekua0x9du] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* ── Action chips: one at a time, so a radio group drawn as pills (§6.6) ── */

.fd-asst-chips[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-asst-chip[b-zekua0x9du] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.fd-asst-chip:hover:not(:disabled)[b-zekua0x9du] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
}

.fd-asst-chip--on[b-zekua0x9du] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand);
}

.fd-asst-chip:focus-visible[b-zekua0x9du] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-asst-chip:disabled[b-zekua0x9du] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── The ask ─────────────────────────────────────────────────────────────── */

.fd-asst-hint[b-zekua0x9du] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-asst-instruction[b-zekua0x9du] {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-primary);
    resize: vertical;
}

.fd-asst-instruction[b-zekua0x9du]::placeholder { color: var(--color-text-muted, var(--color-text-secondary)); }

.fd-asst-instruction:focus-visible[b-zekua0x9du] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-asst-instruction:disabled[b-zekua0x9du] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.fd-asst-send[b-zekua0x9du] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fd-asst-send-btn[b-zekua0x9du] { min-width: 8rem; }

.fd-asst-kbd[b-zekua0x9du] {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--color-text-muted, var(--color-text-secondary));
    white-space: nowrap;
}

.fd-asst-note[b-zekua0x9du] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* The size note's smaller ask (F11.4): pick a section, draft into it. */

.fd-asst-scope[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.fd-asst-scope-row[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fd-asst-scope-select[b-zekua0x9du] {
    flex: 1 1 8rem;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.fd-asst-scope-select:focus-visible[b-zekua0x9du] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* Thinking dots — the AI chat panel's, in the rail's palette. */
.fd-asst-typing[b-zekua0x9du] {
    display: flex;
    gap: 5px;
    padding: 0.25rem 0.125rem;
}

.fd-asst-typing span[b-zekua0x9du] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    opacity: 0.4;
    animation: fd-asst-bounce-b-zekua0x9du 1.4s infinite;
}

.fd-asst-typing span:nth-child(2)[b-zekua0x9du] { animation-delay: 0.2s; }
.fd-asst-typing span:nth-child(3)[b-zekua0x9du] { animation-delay: 0.4s; }

@keyframes fd-asst-bounce-b-zekua0x9du {
    0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ── Status blocks ───────────────────────────────────────────────────────── */

.fd-asst-error[b-zekua0x9du],
.fd-asst-refused[b-zekua0x9du] {
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.fd-asst-applied[b-zekua0x9du],
.fd-asst-clear[b-zekua0x9du] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-healthy) 6%, white);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
}

.fd-asst-applied svg[b-zekua0x9du],
.fd-asst-clear svg[b-zekua0x9du] { flex: none; margin-top: 0.05rem; }

/* ── Explain: prose, the way the chat panel draws assistant text ─────────── */

.fd-asst-prose[b-zekua0x9du] {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    border-top-left-radius: 0.25rem;
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--color-text-primary);
}

/* The prose arrives as markup, outside the scope attribute, hence ::deep. */
.fd-asst-prose[b-zekua0x9du]  p { margin: 0 0 0.5rem; }
.fd-asst-prose[b-zekua0x9du]  p:last-child { margin-bottom: 0; }

.fd-asst-prose[b-zekua0x9du]  code {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: color-mix(in srgb, var(--color-brand) 8%, white);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
}

/* Raw replies and the proposal JSON, behind a disclosure. */
.fd-asst-raw[b-zekua0x9du] {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.fd-asst-raw summary[b-zekua0x9du] {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-asst-raw summary:focus-visible[b-zekua0x9du] {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-asst-pre[b-zekua0x9du] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 18rem;
    overflow: auto;
}

/* ── Findings: review findings and the checks a proposal would introduce ── */

.fd-asst-findings[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-asst-finding[b-zekua0x9du] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.fd-asst-finding--error[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-down) 30%, white);
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fd-asst-finding--warn[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-degraded) 35%, white);
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 6%, white);
}

.fd-asst-finding--info[b-zekua0x9du] {
    border-left-color: var(--color-unknown);
}

.fd-asst-mark[b-zekua0x9du] {
    display: inline-flex;
    flex: none;
    margin-top: 0.1rem;
}

.fd-asst-finding--error .fd-asst-mark[b-zekua0x9du] { color: var(--color-down); }
.fd-asst-finding--warn  .fd-asst-mark[b-zekua0x9du] { color: color-mix(in srgb, var(--color-degraded) 70%, black); }
.fd-asst-finding--info  .fd-asst-mark[b-zekua0x9du] { color: var(--color-text-secondary); }

.fd-asst-text[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fd-asst-message[b-zekua0x9du] {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.fd-asst-suggestion[b-zekua0x9du] {
    font-size: 0.75rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--color-text-secondary);
}

.fd-asst-row[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.fd-asst-cat[b-zekua0x9du],
.fd-asst-target[b-zekua0x9du] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.fd-asst-code[b-zekua0x9du] {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

.fd-asst-goto[b-zekua0x9du] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.1rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s;
}

.fd-asst-goto:hover[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-asst-goto:focus-visible[b-zekua0x9du] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

.fd-asst-goto svg[b-zekua0x9du] { flex: none; }

/* A finding's own fix: verdict, its one diff line, and the button. */
.fd-asst-fix[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.125rem;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--color-border);
}

.fd-asst-fix-diff[b-zekua0x9du] {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.75rem;
}

.fd-asst-fix-btn[b-zekua0x9du] {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}

/* ── Verdicts ────────────────────────────────────────────────────────────── */

.fd-asst-verdict[b-zekua0x9du],
.fd-asst-verdict-line[b-zekua0x9du] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.fd-asst-verdict-line[b-zekua0x9du] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    align-self: flex-start;
}

.fd-asst-verdict--ok[b-zekua0x9du]   { color: color-mix(in srgb, var(--color-healthy) 60%, black); }
.fd-asst-verdict--warn[b-zekua0x9du] { color: color-mix(in srgb, var(--color-degraded) 65%, black); }
.fd-asst-verdict--bad[b-zekua0x9du]  { color: color-mix(in srgb, var(--color-down) 70%, black); }
.fd-asst-verdict--wait[b-zekua0x9du] { color: var(--color-text-secondary); }

.fd-asst-verdict-line.fd-asst-verdict--ok[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-healthy) 30%, white);
    background: color-mix(in srgb, var(--color-healthy) 8%, white);
}

.fd-asst-verdict-line.fd-asst-verdict--warn[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-asst-verdict-line.fd-asst-verdict--bad[b-zekua0x9du] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
}

/* ── Proposal card ───────────────────────────────────────────────────────── */

.fd-asst-card[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.fd-asst-summary[b-zekua0x9du] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* The diff list — the policy assistant's asst-diff, in tokens. (F14.7 renamed that
   class from cop-diff; this comment pointed at the old name.) */
.fd-asst-diff[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
}

.fd-asst-diff li[b-zekua0x9du] {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.fd-asst-diff-sign[b-zekua0x9du] {
    flex: none;
    width: 0.9rem;
    font-weight: 800;
    text-align: center;
}

.fd-asst-diff-detail[b-zekua0x9du] { color: var(--color-text-secondary); }

.fd-asst-diff--added   .fd-asst-diff-sign[b-zekua0x9du] { color: color-mix(in srgb, var(--color-healthy) 70%, black); }
.fd-asst-diff--removed .fd-asst-diff-sign[b-zekua0x9du] { color: var(--color-down); }
.fd-asst-diff--removed strong[b-zekua0x9du] { text-decoration: line-through; color: color-mix(in srgb, var(--color-down) 70%, black); }
.fd-asst-diff--changed .fd-asst-diff-sign[b-zekua0x9du] { color: color-mix(in srgb, var(--color-degraded) 70%, black); }
.fd-asst-diff--moved   .fd-asst-diff-sign[b-zekua0x9du] { color: var(--color-brand); }

/* A draft's diff, a section at a time, each with a checkbox (F11.4). The
   unchecked ones stay in the list, dimmed, so what is being left out is as
   visible as what is being taken. */

.fd-asst-groups[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-asst-group[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.fd-asst-group--off[b-zekua0x9du] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.fd-asst-group-head[b-zekua0x9du] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    cursor: pointer;
}

.fd-asst-group-head input[b-zekua0x9du] {
    flex: none;
    align-self: center;
    accent-color: var(--color-brand-teal);
    cursor: pointer;
}

.fd-asst-group-title[b-zekua0x9du] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-asst-group--off .fd-asst-group-title[b-zekua0x9du] { color: var(--color-text-secondary); }

.fd-asst-group-count[b-zekua0x9du] {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-asst-group .fd-asst-diff[b-zekua0x9du] { padding-left: 1.35rem; }

.fd-asst-actions[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

/* ── Usage line ──────────────────────────────────────────────────────────── */

.fd-asst-foot[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.fd-asst-foot:empty[b-zekua0x9du] { display: none; }

/* Screen-reader-only text: the diff sign is a glyph, the kind is the word. */
.fd-sr-only[b-zekua0x9du] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .fd-asst-chip[b-zekua0x9du],
    .fd-asst-goto[b-zekua0x9du] { transition: none; }
    .fd-asst-typing span[b-zekua0x9du] { animation: none; opacity: 0.7; }
}

/* ── The thread (F14.3) ───────────────────────────────────────────────────────
   History, above the live turn. Deliberately quieter than the proposal card:
   what the author acts on is below, and a thread that competes with it for
   attention makes the rail harder to read, not richer. The two speakers are
   told apart by alignment and a hairline, not by a pair of coloured bubbles. */
.fd-asst-thread[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-asst-turn[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.fd-asst-turn .fd-microlabel[b-zekua0x9du] {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
}

.fd-asst-turn-text[b-zekua0x9du] {
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-asst-turn-detail[b-zekua0x9du] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-asst-turn--you[b-zekua0x9du] {
    align-items: flex-end;
    text-align: right;
}

.fd-asst-turn--you .fd-asst-turn-text[b-zekua0x9du] {
    padding: 0.375rem 0.625rem;
    border-radius: 0.75rem;
    border-bottom-right-radius: 0.25rem;
    background: var(--color-surface-raised);
}

.fd-asst-turn--asst .fd-asst-turn-text[b-zekua0x9du] {
    padding-left: 0.625rem;
    border-left: 2px solid color-mix(in srgb, var(--color-brand-teal) 45%, transparent);
}

/* Not speech — the ground moved. A centred rule so it reads as a divider
   between two stretches of conversation rather than as a third speaker. */
.fd-asst-turn--context[b-zekua0x9du] {
    align-items: center;
    margin: 0.125rem 0;
}

.fd-asst-turn--context .fd-asst-turn-text[b-zekua0x9du] {
    display: inline-block;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

/* ── A question back (F14.1 / F14.2) ─────────────────────────────────────────
   This one IS loud: the assistant is blocked until the author answers, so it
   should be the thing the eye lands on. */
.fd-asst-ask[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 40%, var(--color-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface));
}

.fd-asst-ask-prompt[b-zekua0x9du] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.fd-asst-ask-why[b-zekua0x9du] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-asst-ask-pills[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fd-asst-pill[b-zekua0x9du] {
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-asst-pill:hover[b-zekua0x9du] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.fd-asst-pill:focus-visible[b-zekua0x9du] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.fd-asst-ask-row[b-zekua0x9du] {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}

/* The global .form-input is content-box, so a width here would overflow its
   own row once padding and border are added; flex sizing avoids the question. */
.fd-asst-ask-input[b-zekua0x9du] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-asst-ask-input:focus-visible[b-zekua0x9du] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -1px;
    border-color: var(--color-brand-teal);
}

.fd-asst-ask-btn[b-zekua0x9du] {
    flex: 0 0 auto;
    font-size: 0.8125rem;
}

/* ── Routing (F14.4) ─────────────────────────────────────────────────────────
   The reading is a caption, not a control: quiet, one line, and always there on
   a routed turn so a wrong read is visible before the author reads the answer. */
.fd-asst-reading[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-asst-reading-text[b-zekua0x9du] {
    color: var(--color-text-primary);
}

.fd-asst-reading-fix[b-zekua0x9du] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fd-asst-reading-fix:focus-visible[b-zekua0x9du] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

/* The Auto chip reads as the resting state, so it is marked by weight rather
   than by another colour — the chip row already carries one. */
.fd-asst-chip--auto[b-zekua0x9du] {
    font-weight: 600;
}

.fd-asst-elsewhere[b-zekua0x9du] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-raised);
}

.fd-asst-elsewhere-text[b-zekua0x9du] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.fd-asst-elsewhere-row[b-zekua0x9du] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fd-asst-elsewhere-btn[b-zekua0x9du] {
    font-size: 0.8125rem;
}

/* Session AI warning limit: the question-back block's shape, in the warning palette. */
.fd-asst-limit[b-zekua0x9du] {
    border-color: var(--status-warning-border, color-mix(in srgb, var(--color-degraded) 45%, var(--color-border)));
    background: var(--status-warning-bg, color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface)));
}

.fd-asst-limit-actions[b-zekua0x9du] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Features/FormDesigner/FormCanvas.razor.rz.scp.css */
.fd-canvas[b-umx70zvxan] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-height: calc(100vh - 160px);
    padding: 1.25rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

/* Tab strip for sections that carry a tab name */
.fd-strip[b-umx70zvxan] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.fd-tab[b-umx70zvxan] {
    margin-bottom: -1px;
    padding: 0.5rem 0.875rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.fd-tab:hover[b-umx70zvxan] { color: var(--color-text-primary); }
.fd-tab--on[b-umx70zvxan] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}
.fd-tab:focus-visible[b-umx70zvxan] {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* Empty form */
.fd-canvas-empty[b-umx70zvxan] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.fd-canvas-empty p[b-umx70zvxan] { margin: 0; font-size: 0.875rem; }
.fd-canvas-empty-title[b-umx70zvxan] { color: var(--color-text-primary); font-weight: 600; }
.fd-canvas-empty-icon[b-umx70zvxan] { display: inline-flex; margin-bottom: 0.5rem; color: var(--color-unknown); }
.fd-canvas-empty-icon svg[b-umx70zvxan] { width: 28px; height: 28px; }

@media (prefers-reduced-motion: reduce) {
    .fd-tab[b-umx70zvxan] { transition: none; }
}

/* ── Add section (F3.2) ──────────────────────────────────────────────────── */

.fd-canvas-add[b-umx70zvxan] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: -0.5rem;
}

.fd-addsection[b-umx70zvxan] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.fd-addsection:hover[b-umx70zvxan] {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, white);
}

.fd-addsection:focus-visible[b-umx70zvxan] {
    outline: none;
    border-style: solid;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-addsection--quiet[b-umx70zvxan] {
    border-style: none;
    font-weight: 500;
}

.fd-canvas-empty .fd-addsection[b-umx70zvxan] { margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
    .fd-addsection[b-umx70zvxan] { transition: none; }
}

/* F14.5: the blank form's two doors, side by side and equal — composing by hand and
   describing it are both first-class ways to start, and making one of them the quiet
   secondary would be a claim about which is right that we have no basis for. */
.fd-canvas-empty-actions[b-umx70zvxan] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.fd-describe[b-umx70zvxan] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-describe:hover[b-umx70zvxan] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.fd-describe:focus-visible[b-umx70zvxan] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}
/* /Components/Features/FormDesigner/FormCanvasGroup.razor.rz.scp.css */
/* The card deliberately does not clip its children: the group's own "Add
   question" menu is the last thing inside it and has to open past the bottom
   edge. Everything that paints to an edge carries the card's radius itself. */
.fd-group[b-baxos2ozlf] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}

.fd-group--selected[b-baxos2ozlf] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

/* Header (selects the group). The row around it anchors the handle and the drop
   bands; it is a plain block, so the header still fills the card. */
.fd-group-headrow[b-baxos2ozlf] { position: relative; }

.fd-group-head[b-baxos2ozlf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--color-surface-raised);
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s;
}

.fd-group-head:hover[b-baxos2ozlf] {
    background: color-mix(in srgb, var(--color-brand-teal) 6%, var(--color-surface-raised));
}

.fd-group-head:focus-visible[b-baxos2ozlf] {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-group-icon[b-baxos2ozlf] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-group-name[b-baxos2ozlf] {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-group-count[b-baxos2ozlf] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Reordering (F3.5): the handle sits over the header's own padding. */
.fd-group-grip[b-baxos2ozlf] {
    position: absolute;
    top: 50%;
    left: 0.375rem;
    z-index: 1;
    display: inline-flex;
    transform: translateY(-50%);
    color: var(--color-unknown);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}

.fd-group-handle[b-baxos2ozlf] {
    display: inline-flex;
    cursor: grab;
}

.fd-group-handle:active[b-baxos2ozlf] { cursor: grabbing; }
.fd-group-grip svg[b-baxos2ozlf] { width: 14px; height: 14px; }
.fd-group-grip:hover[b-baxos2ozlf] { color: var(--color-text-secondary); }

.fd-group-headrow:hover .fd-group-grip[b-baxos2ozlf],
.fd-group-headrow:focus-within .fd-group-grip[b-baxos2ozlf] { opacity: 1; }

.fd-group-head--drag[b-baxos2ozlf] { padding-left: 1.75rem; }

.fd-group--dragging[b-baxos2ozlf] { opacity: 0.5; }

/* An empty group is itself the place a question lands. */
.fd-empty-zone[b-baxos2ozlf] { position: relative; }

/* Bodies */
.fd-group-body[b-baxos2ozlf],
.fd-repeater[b-baxos2ozlf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
}

.fd-row[b-baxos2ozlf] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.fd-repeater-row[b-baxos2ozlf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.fd-ghost-row[b-baxos2ozlf] {
    padding: 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-empty-zone[b-baxos2ozlf] {
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Table groups */
.fd-table-wrap[b-baxos2ozlf] { overflow-x: auto; }

/* Read-only groups have no add row, so the table is what meets the bottom
   corners; the wrap already clips, so the radius is enough. */
.fd-group > .fd-table-wrap:last-child[b-baxos2ozlf] {
    border-radius: 0 0 var(--radius) var(--radius);
}

.fd-table[b-baxos2ozlf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fd-table th[b-baxos2ozlf] {
    padding: 0.375rem 0.5rem;
    text-align: left;
    vertical-align: top;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.fd-table td[b-baxos2ozlf] {
    padding: 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.fd-table tfoot td[b-baxos2ozlf] {
    background: var(--color-surface-raised);
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    font-weight: 700;
    text-align: right;
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .fd-group[b-baxos2ozlf],
    .fd-group-head[b-baxos2ozlf],
    .fd-group-grip[b-baxos2ozlf] { transition: none; }
}

/* The group's own add affordance, inside the card so it reads as "add to this
   group" rather than "add to the section" — the quiet twin of the section's. */
.fd-group-add[b-baxos2ozlf] {
    display: flex;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-surface);
}
/* /Components/Features/FormDesigner/FormCanvasQuestion.razor.rz.scp.css */
/* The slot the card sits in: it takes the card's place in the row so the layout
   is unchanged, and gives the handle and the drop bands something to position
   against. */
.fd-qcard[b-b6m8spks65] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    transition: opacity 0.12s;
}

.fd-qcard--cell[b-b6m8spks65] { width: 100%; }

/* The card in flight reads as a copy. */
.fd-qcard--dragging[b-b6m8spks65] { opacity: 0.5; }

/* Handle: over the card's own padding, so showing it costs no layout. */
.fd-qcard-grip[b-b6m8spks65] {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    z-index: 1;
    display: inline-flex;
    color: var(--color-unknown);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}

.fd-qcard-handle[b-b6m8spks65] {
    display: inline-flex;
    cursor: grab;
}

.fd-qcard-handle:active[b-b6m8spks65] { cursor: grabbing; }
.fd-qcard-grip svg[b-b6m8spks65] { width: 14px; height: 14px; }
.fd-qcard-grip:hover[b-b6m8spks65] { color: var(--color-text-secondary); }

.fd-qcard:hover .fd-qcard-grip[b-b6m8spks65],
.fd-qcard:focus-within .fd-qcard-grip[b-b6m8spks65] { opacity: 1; }

/* Room for the handle, only when there is one. */
.fd-qcard--drag > .fd-q[b-b6m8spks65] { padding-left: 1.5rem; }
.fd-qcard--drag > .fd-q--cell[b-b6m8spks65] { padding-left: 1.25rem; }
.fd-qcard--cell .fd-qcard-grip[b-b6m8spks65] { top: 0.3125rem; left: 0.125rem; }

/* Question card — white surface, hairline border, standard shadow. The surface
   is a div: the select button sits inside it beside the facet pills, which are
   buttons of their own. */
.fd-q[b-b6m8spks65] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}

.fd-q:hover[b-b6m8spks65] { box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1); }

/* Selection raises the shadow and shifts the hairline to teal; no outline colour. */
.fd-q--selected[b-b6m8spks65] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

/* The select target: head and control, as a bare button so the surface stays
   one shape. Keyboard focus on it lights the surface, not the button. */
.fd-q-select[b-b6m8spks65] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.fd-q-select:focus-visible[b-b6m8spks65] { outline: none; }

.fd-q:has(> .fd-q-select:focus-visible)[b-b6m8spks65] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15), var(--shadow-card);
}

.fd-q--selected:has(> .fd-q-select:focus-visible)[b-b6m8spks65] {
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15), 0 4px 12px rgba(7, 70, 132, 0.1);
}

/* Head: icon + micro-label + badges */
.fd-q-head[b-b6m8spks65] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.fd-q-icon[b-b6m8spks65] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-q-label[b-b6m8spks65] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.fd-q-label--quiet[b-b6m8spks65] { color: var(--color-text-secondary); }

.fd-q-req[b-b6m8spks65] {
    margin-left: 0.125rem;
    color: var(--color-down);
}

.fd-q-control[b-b6m8spks65] { display: block; min-width: 0; }

/* Foot: the facet pills, wrapping, with the control type pinned to the right. */
.fd-q-foot[b-b6m8spks65] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}

.fd-facets[b-b6m8spks65] {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.fd-q-type[b-b6m8spks65] {
    flex: none;
    margin-left: auto;
    align-self: center;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* HalfSplit: label beside control (50/50), pills underneath */
.fd-q--split .fd-q-select[b-b6m8spks65] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
    align-items: center;
}

/* Value states */
.fd-q--hidden[b-b6m8spks65] { opacity: 0.45; }

.fd-q--readonly[b-b6m8spks65]  .fd-fx,
.fd-q--readonly[b-b6m8spks65]  .fd-fx-seg,
.fd-q--readonly[b-b6m8spks65]  .fd-fx-drop {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

/* Table header cell mode */
.fd-q--cell[b-b6m8spks65] {
    width: 100%;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.fd-q--cell .fd-q-select[b-b6m8spks65] { gap: 0.25rem; }

.fd-q--cell:hover[b-b6m8spks65] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    box-shadow: none;
}

.fd-q--cell.fd-q--selected[b-b6m8spks65] {
    background: var(--color-surface);
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .fd-q[b-b6m8spks65],
    .fd-qcard[b-b6m8spks65],
    .fd-qcard-grip[b-b6m8spks65] { transition: none; }
}
/* /Components/Features/FormDesigner/FormCanvasSection.razor.rz.scp.css */
.fd-section[b-9ka1j1lz60] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: opacity 0.15s;
}

.fd-section--disabled[b-9ka1j1lz60] { opacity: 0.6; }

/* Divider heading */
.fd-section-head[b-9ka1j1lz60] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.fd-section-name[b-9ka1j1lz60] {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    min-width: 0;
}

.fd-section-title[b-9ka1j1lz60] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin-left: -0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.fd-section-title > span:last-child[b-9ka1j1lz60] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-section-title:hover[b-9ka1j1lz60] {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.fd-section--selected .fd-section-title[b-9ka1j1lz60] {
    background: var(--color-surface);
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.fd-section-title:focus-visible[b-9ka1j1lz60] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-section-icon[b-9ka1j1lz60] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-section-chips[b-9ka1j1lz60] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: none;
}

.fd-section-rule[b-9ka1j1lz60] {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Rows of question cards */
.fd-section-body[b-9ka1j1lz60] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fd-row[b-9ka1j1lz60] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.fd-empty-zone[b-9ka1j1lz60] {
    position: relative;
    padding: 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* The section's own add affordance: quiet, and set apart from the content it
   follows so it reads as the end of the section rather than part of it. */
.fd-section-add[b-9ka1j1lz60] {
    display: flex;
    margin-top: 0.25rem;
}

/* Reordering (F3.5): the strip that says "and this is where it would land",
   drawn only while something is being dragged over the canvas. */
.fd-section-drop[b-9ka1j1lz60] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.375rem;
    border: 1px dashed color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-brand-teal) 4%, transparent);
}

.fd-section-drop-text[b-9ka1j1lz60] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .fd-section[b-9ka1j1lz60],
    .fd-section-title[b-9ka1j1lz60] { transition: none; }
}
/* /Components/Features/FormDesigner/FormChecksPanel.razor.rz.scp.css */
/* ── Checks panel (F7.4) ───────────────────────────────────────────────────
   A scanning list inside the rail: severity is carried by a glyph and a left
   rule as well as a tint, so it survives greyscale and colour-blindness.
   ────────────────────────────────────────────────────────────────────────── */

.fd-ck[b-0o7nemhefs] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fd-ck-clear[b-0o7nemhefs] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-healthy) 30%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-healthy) 6%, white);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
}

.fd-ck-clear svg[b-0o7nemhefs] { flex: none; margin-top: 0.05rem; }

.fd-ck-summary[b-0o7nemhefs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fd-ck-note[b-0o7nemhefs] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-ck-list[b-0o7nemhefs] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-ck-item[b-0o7nemhefs] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.fd-ck-item--error[b-0o7nemhefs] {
    border-color: color-mix(in srgb, var(--color-down) 30%, white);
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fd-ck-item--warn[b-0o7nemhefs] {
    border-color: color-mix(in srgb, var(--color-degraded) 35%, white);
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 6%, white);
}

.fd-ck-mark[b-0o7nemhefs] {
    display: inline-flex;
    flex: none;
    margin-top: 0.1rem;
}

.fd-ck-item--error .fd-ck-mark[b-0o7nemhefs] { color: var(--color-down); }
.fd-ck-item--warn  .fd-ck-mark[b-0o7nemhefs] { color: color-mix(in srgb, var(--color-degraded) 70%, black); }

.fd-ck-text[b-0o7nemhefs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fd-ck-message[b-0o7nemhefs] {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.fd-ck-foot[b-0o7nemhefs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* The kind of finding (Structure, Rules, Triggers, Security, Translations),
   in words — the lint's own code names are for the code, not the author. */
.fd-ck-kind[b-0o7nemhefs] {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.fd-ck-goto[b-0o7nemhefs] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.1rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s;
}

.fd-ck-goto:hover[b-0o7nemhefs] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-ck-goto:focus-visible[b-0o7nemhefs] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

.fd-ck-goto svg[b-0o7nemhefs] { flex: none; }

/* "Review with assistant" (F11.3): a quiet chip below the list, in the goto
   button's own vocabulary, so it reads as one more way to look at the form. */
.fd-ck-actions[b-0o7nemhefs] {
    display: flex;
    padding-top: 0.25rem;
}

.fd-ck-assistant[b-0o7nemhefs] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.fd-ck-assistant:hover[b-0o7nemhefs] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-ck-assistant:focus-visible[b-0o7nemhefs] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

.fd-ck-assistant svg[b-0o7nemhefs] { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .fd-ck-goto[b-0o7nemhefs],
    .fd-ck-assistant[b-0o7nemhefs] { transition: none; }
}

/* ── Filter chips (one per kind of finding present) ──────────────────────── */

.fd-ck-filter[b-0o7nemhefs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
}

.fd-ck-filter-btn[b-0o7nemhefs] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.fd-ck-filter-btn:hover[b-0o7nemhefs] { color: var(--color-text-primary); }

.fd-ck-filter-btn--on[b-0o7nemhefs] {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-surface);
}

.fd-ck-filter-btn:focus-visible[b-0o7nemhefs] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-ck-filter-n[b-0o7nemhefs] {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .fd-ck-filter-btn[b-0o7nemhefs] { transition: none; }
}
/* /Components/Features/FormDesigner/FormConfirmDialog.razor.rz.scp.css */
/* ── Confirmation dialog ───────────────────────────────────────────────────
   Deliberately the same frame as NewFormDialog (scoped CSS cannot be shared
   between components, so the frame rules are repeated rather than diverged):
   centred card over a translucent backdrop, raised action bar. Only the body
   copy is different — a confirmation is one sentence, not a form.
   ────────────────────────────────────────────────────────────────────────── */

.fd-dialog-backdrop[b-gidcaoll34] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-dialog[b-gidcaoll34] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-dialog-head[b-gidcaoll34] {
    padding: 1.25rem 1.5rem 0.5rem;
}

.fd-dialog-title[b-gidcaoll34] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-dialog-body[b-gidcaoll34] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.25rem 1.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-confirm-message[b-gidcaoll34] {
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-dialog-actions[b-gidcaoll34] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

@media (prefers-reduced-motion: reduce) {
    .fd-dialog-backdrop[b-gidcaoll34] { backdrop-filter: none; }
}
/* /Components/Features/FormDesigner/FormDesigner.razor.rz.scp.css */
/* ── Form designer shell ────────────────────────────────────────────────────
   Chrome (toolbar, three-pane grid, JSON view, alerts, skeleton) plus the
   shared primitives every pane uses — micro-labels, chips and badges — which
   are published to child components through ::deep so the vocabulary is
   defined once. Tokens only; tints come from color-mix over the brand tokens.
   ────────────────────────────────────────────────────────────────────────── */

.fd-shell[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.fd-toolbar[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.fd-back[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.fd-back svg[b-s8kod64sa0] { width: 16px; height: 16px; }
.fd-back:hover[b-s8kod64sa0] { border-color: var(--color-brand-teal); background: var(--color-surface-raised); }
.fd-back:focus-visible[b-s8kod64sa0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* The name is the one thing in this bar that must always be readable, and it
   was the one thing that gave: every other group is `flex: none`, so with
   `flex: 1; min-width: 0` the title absorbed the whole shortfall and collapsed
   to ZERO width at 1280x720 — a very common laptop size (#559). The floor keeps
   it legible; it also still permits the ellipsis on .fd-name, because what
   truncation needs is any min-width other than the flex default of `auto`, not
   specifically zero. Past the floor the bar wraps a trailing group onto a
   second row rather than squeezing the title away. */
.fd-title[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    flex: 1;
}

.fd-name[b-s8kod64sa0] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-standard[b-s8kod64sa0] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-meta[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.fd-id[b-s8kod64sa0] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-pill[b-s8kod64sa0] {
    padding: 0.2rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* "Not the master" (F7.2): the row is editable, but it is not the row Publish
   reads from — the version badge alone does not say that loudly enough. */
.fd-pill--warn[b-s8kod64sa0] {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

/* Design | Preview toggle — same silhouette as the workflow designer's mode toggle. */
.fd-toggle[b-s8kod64sa0] {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.fd-toggle-btn[b-s8kod64sa0] {
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.fd-toggle-btn:hover[b-s8kod64sa0] { color: var(--color-text-primary); }
.fd-toggle-btn--on[b-s8kod64sa0] {
    background: var(--color-surface);
    color: var(--color-brand);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.fd-toggle-btn:focus-visible[b-s8kod64sa0] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* ── Three-pane body ─────────────────────────────────────────────────────── */

.fd-body[b-s8kod64sa0] {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr) 26rem;
    gap: 1rem;
    align-items: start;
    min-height: calc(100vh - 160px);
}

.fd-pane[b-s8kod64sa0] { min-width: 0; }

.fd-pane--outline[b-s8kod64sa0],
.fd-pane--rail[b-s8kod64sa0] {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 160px);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.fd-pane--canvas[b-s8kod64sa0] { min-height: calc(100vh - 160px); }

@media (max-width: 1400px) {
    .fd-body[b-s8kod64sa0] { grid-template-columns: 16rem minmax(0, 1fr) 22rem; }
    /* At laptop widths the title gives way first (it keeps its ellipsis and
       its tooltip), so Save and Publish stay on the toolbar's one row. */
    .fd-toolbar[b-s8kod64sa0] { gap: 0.5rem 0.625rem; }
    .fd-title[b-s8kod64sa0] { min-width: 6rem; }
}

@media (max-width: 1100px) {
    .fd-body[b-s8kod64sa0] { grid-template-columns: 1fr; }
    .fd-pane--outline[b-s8kod64sa0],
    .fd-pane--rail[b-s8kod64sa0] { position: static; max-height: none; }
}

/* ── JSON view ───────────────────────────────────────────────────────────── */

.fd-jsonview[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* "← Back to design" beside the explanation: the view reached from the overflow
   menu has no toggle button lit, so it carries its own way back. */
.fd-jsonview-head[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fd-note[b-s8kod64sa0] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-raw[b-s8kod64sa0] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
}

.fd-raw:focus-visible[b-s8kod64sa0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-json-actions[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fd-json-status[b-s8kod64sa0] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Change plan ─────────────────────────────────────────────────────────── */

.fd-plan[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.fd-plan-head[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.fd-plan-title[b-s8kod64sa0] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fd-plan-stats[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-plan-issues[b-s8kod64sa0] {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.fd-plan-issues ul[b-s8kod64sa0] { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.fd-plan-issues li[b-s8kod64sa0] { margin: 0.2rem 0; }

.fd-plan-issues--error[b-s8kod64sa0] {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.06);
}

.fd-plan-issues--warn[b-s8kod64sa0] {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.06);
}

.fd-plan-issues-title[b-s8kod64sa0] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* F12.2 — translations a save would remove; confirmed per save, never remembered. */
.fd-translation-removals[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.fd-translation-removals ul[b-s8kod64sa0] { margin: 0; }

.fd-translation-removals .btn-primary[b-s8kod64sa0] { align-self: flex-start; }

.fd-check[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-check input[b-s8kod64sa0] { margin: 0; }

.fd-plan-code[b-s8kod64sa0] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
}

.fd-plan-batch[b-s8kod64sa0] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.fd-plan-batch > summary[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
}

.fd-plan-batch > summary:focus-visible[b-s8kod64sa0] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.fd-plan-batch-name[b-s8kod64sa0] { font-weight: 600; }
.fd-plan-batch-purpose[b-s8kod64sa0] { color: var(--color-text-primary); }

.fd-plan-pre[b-s8kod64sa0] {
    margin: 0;
    padding: 0.75rem;
    max-height: 32rem;
    overflow: auto;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre;
}

/* ── Save (F2.3) ─────────────────────────────────────────────────────────── */

.fd-actions[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
}

.fd-dirty[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-dirty-dot[b-s8kod64sa0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 20%, white);
}

.fd-save-btn[b-s8kod64sa0] { min-width: 5.5rem; }

.fd-save[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.fd-save--ok[b-s8kod64sa0]   { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }
.fd-save--warn[b-s8kod64sa0] { border-color: color-mix(in srgb, var(--color-degraded) 45%, white); }
.fd-save--bad[b-s8kod64sa0]  { border-color: color-mix(in srgb, var(--color-down) 35%, white); }

.fd-save-head[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fd-save-message[b-s8kod64sa0] {
    flex: 1;
    min-width: 12rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.fd-save-actions[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.fd-save-dismiss[b-s8kod64sa0] {
    padding: 0.2rem 0.45rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-save-dismiss:hover[b-s8kod64sa0] { color: var(--color-text-primary); background: var(--color-surface-raised); }
.fd-save-dismiss:focus-visible[b-s8kod64sa0] { outline: 2px solid var(--color-brand-teal); outline-offset: 1px; }

.fd-save-blocks[b-s8kod64sa0] {
    margin: 0;
    padding: 0.5rem 0.75rem 0.75rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.8125rem;
}

.fd-save-block[b-s8kod64sa0] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.fd-save-mark[b-s8kod64sa0] {
    flex: none;
    width: 1.1rem;
    text-align: center;
    font-weight: 700;
}

.fd-save-block--ok .fd-save-mark[b-s8kod64sa0] { color: color-mix(in srgb, var(--color-healthy) 70%, black); }
.fd-save-block--fail .fd-save-mark[b-s8kod64sa0] { color: var(--color-down); }

.fd-save-block-text[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.fd-save-block-message[b-s8kod64sa0] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    word-break: break-word;
}

.fd-save-goto[b-s8kod64sa0] {
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

/* ── Publish (F2.4) ──────────────────────────────────────────────────────── */

.fd-publish-btn[b-s8kod64sa0] { white-space: nowrap; }

/* ── Assistant (F11.3) ─────────────────────────────────────────────────────── */

/* The toolbar's way into the rail's Assistant tab: the undo button's chrome,
   standing alone, with the brand colour on hover so it reads as the one
   button here that asks rather than saves. */
.fd-assistant-btn[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.fd-assistant-btn:hover[b-s8kod64sa0] {
    background: var(--color-surface);
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.fd-assistant-btn:focus-visible[b-s8kod64sa0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .fd-assistant-btn[b-s8kod64sa0] { transition: none; }
}

/* ── Undo / redo (F7.4) ──────────────────────────────────────────────────── */

.fd-history[b-s8kod64sa0] {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.fd-history-btn[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.7);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.fd-history-btn:hover:not(:disabled)[b-s8kod64sa0] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.fd-history-btn:focus-visible[b-s8kod64sa0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

.fd-history-btn:disabled[b-s8kod64sa0] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.fd-alert[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.fd-alert-error[b-s8kod64sa0] {
    background: color-mix(in srgb, var(--color-down) 8%, white);
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-alert-muted[b-s8kod64sa0] { color: var(--color-text-secondary); }

/* #562 — Duplicate could not carry a shared trigger's wiring. Not an error (the
   copy is fine, its automation is not) and not information either, so it sits
   between fd-alert-error and fd-alert-info, on the same warn token the
   inspectors use. */
.fd-alert-warn[b-s8kod64sa0] {
    background: color-mix(in srgb, var(--color-warn, #b45309) 7%, white);
    border-color: color-mix(in srgb, var(--color-warn, #b45309) 35%, white);
    color: color-mix(in srgb, var(--color-warn, #b45309) 80%, black);
}

/* F12.2 — a writable language did not load; label editing is off until a reload. */
.fd-alert-languages[b-s8kod64sa0] { margin: 0 0 0.75rem; }

.fd-alert-info[b-s8kod64sa0] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 7%, white);
    color: var(--color-text-primary);
}

.fd-alert-link[b-s8kod64sa0] {
    flex: none;
    color: var(--color-brand);
    font-weight: 600;
    text-decoration: none;
}

.fd-alert-link:hover[b-s8kod64sa0] { text-decoration: underline; }

.fd-alert-btn[b-s8kod64sa0] {
    flex: none;
    padding: 0.2rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-alert-btn:hover[b-s8kod64sa0] { border-color: var(--color-brand-teal); background: var(--color-surface-raised); }

.fd-alert-btn:focus-visible[b-s8kod64sa0] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */

.fd-skeleton[b-s8kod64sa0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fd-skel[b-s8kod64sa0] {
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface-raised) 50%, var(--color-border) 100%);
    background-size: 200% 100%;
    animation: fd-shimmer-b-s8kod64sa0 1.6s ease-in-out infinite;
}

.fd-skel--toolbar[b-s8kod64sa0] { height: 3.25rem; }

.fd-skel-grid[b-s8kod64sa0] {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr) 26rem;
    gap: 1rem;
}

.fd-skel--pane[b-s8kod64sa0],
.fd-skel--canvas[b-s8kod64sa0] { height: 24rem; }

@keyframes fd-shimmer-b-s8kod64sa0 {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── Shared primitives (published to child panes) ────────────────────────── */

.fd-shell[b-s8kod64sa0]  .fd-microlabel {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fd-shell[b-s8kod64sa0]  .fd-muted { color: var(--color-text-secondary); }

.fd-shell[b-s8kod64sa0]  .fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-shell[b-s8kod64sa0]  .fd-chip-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fd-shell[b-s8kod64sa0]  .fd-chip--v,
.fd-shell[b-s8kod64sa0]  .fd-chip--ds {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 30%, white);
    background: color-mix(in srgb, var(--color-brand) 6%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-chip--t {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-chip--warn {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-chip--quiet {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* ── Facet pills (what is set on a question) ─────────────────────────────── */

/* One pill per concern on a canvas card (icon · name · count · summary) or,
   compact, on an outline row and a table header cell (icon · count). A pill
   that opens an inspector tab is a button; the rest are spans. */
.fd-shell[b-s8kod64sa0]  .fd-facet {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.125rem 0.5rem 0.125rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font: inherit;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.fd-shell[b-s8kod64sa0]  .fd-facet--compact {
    gap: 0.2rem;
    padding: 0.05rem 0.35rem 0.05rem 0.3rem;
}

.fd-shell[b-s8kod64sa0]  button.fd-facet { cursor: pointer; }

.fd-shell[b-s8kod64sa0]  button.fd-facet:hover {
    background: var(--color-surface);
    border-color: color-mix(in srgb, currentColor 45%, white);
    box-shadow: var(--shadow-card);
}

.fd-shell[b-s8kod64sa0]  button.fd-facet:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-shell[b-s8kod64sa0]  .fd-facet-icon {
    display: inline-flex;
    flex: none;
}

.fd-shell[b-s8kod64sa0]  .fd-facet-icon svg {
    width: 12px;
    height: 12px;
}

.fd-shell[b-s8kod64sa0]  .fd-facet-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fd-shell[b-s8kod64sa0]  .fd-facet-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The one-line summary: the part that lets a form be scanned for what is
   right or wrong. Truncates; the tooltip carries the whole of it. */
.fd-shell[b-s8kod64sa0]  .fd-facet-text {
    min-width: 0;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--color-text-primary);
}

.fd-shell[b-s8kod64sa0]  .fd-facet-text::before {
    content: "·";
    margin-right: 0.3rem;
    color: var(--color-text-secondary);
}

/* The compact pill's name and summary, for the screen reader only. */
.fd-shell[b-s8kod64sa0]  .fd-facet-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fd-shell[b-s8kod64sa0]  .fd-facet--validation,
.fd-shell[b-s8kod64sa0]  .fd-facet--datasource {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 30%, white);
    background: color-mix(in srgb, var(--color-brand) 6%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-facet--triggers {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-facet--security {
    color: color-mix(in srgb, var(--color-healthy) 55%, black);
    border-color: color-mix(in srgb, var(--color-healthy) 40%, white);
    background: color-mix(in srgb, var(--color-healthy) 8%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-facet--warn {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-facet--bad {
    color: color-mix(in srgb, var(--color-down) 70%, black);
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
}

.fd-shell[b-s8kod64sa0]  .fd-facet--warn .fd-facet-text,
.fd-shell[b-s8kod64sa0]  .fd-facet--bad .fd-facet-text { color: inherit; }

.fd-shell[b-s8kod64sa0]  .fd-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
}

.fd-shell[b-s8kod64sa0]  .fd-badge--master,
.fd-shell[b-s8kod64sa0]  .fd-badge--off,
.fd-shell[b-s8kod64sa0]  .fd-badge--state {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.fd-shell[b-s8kod64sa0]  .fd-badge--version {
    background: color-mix(in srgb, var(--color-brand) 10%, white);
    color: var(--color-brand);
}

.fd-shell[b-s8kod64sa0]  .fd-badge--mock,
.fd-shell[b-s8kod64sa0]  .fd-badge--warn {
    background: color-mix(in srgb, var(--color-degraded) 15%, white);
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
}

.fd-shell[b-s8kod64sa0]  .fd-badge--on {
    background: color-mix(in srgb, var(--color-healthy) 12%, white);
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
}

.fd-shell[b-s8kod64sa0]  .fd-badge--bad {
    background: color-mix(in srgb, var(--color-down) 12%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fd-skel[b-s8kod64sa0] { animation: none; }
    .fd-back[b-s8kod64sa0],
    .fd-toggle-btn[b-s8kod64sa0],
    .fd-history-btn[b-s8kod64sa0],
    .fd-raw[b-s8kod64sa0] { transition: none; }
}

/* F12.3 — Translations panel: export, import plan, snapshots. */
.fd-translations-row[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.fd-translations-row .form-label[b-s8kod64sa0] { margin: 0; min-width: 3.5rem; }
.fd-translations-select[b-s8kod64sa0] { max-width: 14rem; }
.fd-translations-file[b-s8kod64sa0] { font-size: 0.8125rem; }

.fd-translations-plan[b-s8kod64sa0] {
    margin: 0.5rem 0;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
}

.fd-translations-table-wrap[b-s8kod64sa0] { overflow-x: auto; max-height: 18rem; overflow-y: auto; }

.fd-translations-table[b-s8kod64sa0] { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.fd-translations-table th[b-s8kod64sa0], .fd-translations-table td[b-s8kod64sa0] {
    text-align: left;
    vertical-align: top;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.fd-translations-table th[b-s8kod64sa0] { font-weight: 600; color: var(--color-text-secondary); }
.fd-tx-unknownobject td[b-s8kod64sa0], .fd-tx-unknownfield td[b-s8kod64sa0], .fd-tx-unwritabletag td[b-s8kod64sa0] { color: var(--color-text-secondary); }

.fd-translations-snapshots[b-s8kod64sa0] { list-style: none; margin: 0.25rem 0; padding: 0; font-size: 0.8125rem; }
.fd-translations-snapshots li[b-s8kod64sa0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border);
}

.fd-translations-status[b-s8kod64sa0] { margin: 0.25rem 0 0; }

/* F12.4 — working language: fallback labels, chips, the switcher, the Languages panel. */
.fd-label--fallback[b-s8kod64sa0] { color: var(--color-text-secondary); font-style: italic; }

.fd-lang-chip[b-s8kod64sa0] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    vertical-align: middle;
}

.fd-lang[b-s8kod64sa0] { position: relative; }

.fd-lang-btn[b-s8kod64sa0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-lang-btn:hover[b-s8kod64sa0] { border-color: color-mix(in srgb, var(--color-brand-teal) 50%, white); }
.fd-lang-btn:disabled[b-s8kod64sa0] { opacity: 0.6; cursor: default; }
.fd-lang-code[b-s8kod64sa0] { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-secondary); text-transform: uppercase; }
.fd-lang-dir[b-s8kod64sa0] { font-size: 0.625rem; font-weight: 600; color: var(--color-text-secondary); }
.fd-lang-english[b-s8kod64sa0] { font-size: 0.75rem; color: var(--color-text-secondary); }

.fd-lang-pop[b-s8kod64sa0] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.35rem);
    left: 0;
    width: 20rem;
    max-height: 22rem;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.fd-lang-search[b-s8kod64sa0] { width: 100%; margin-bottom: 0.4rem; }
.fd-lang-list[b-s8kod64sa0] { list-style: none; margin: 0; padding: 0; }
.fd-lang-group[b-s8kod64sa0] { padding: 0.5rem 0.4rem 0.2rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.fd-lang-empty[b-s8kod64sa0] { padding: 0.4rem; font-size: 0.8125rem; color: var(--color-text-secondary); }

.fd-lang-item[b-s8kod64sa0] {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.4rem;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-lang-item .fd-lang-native[b-s8kod64sa0] { grid-column: 1; }
.fd-lang-item .fd-lang-code[b-s8kod64sa0] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.fd-lang-item .fd-lang-english[b-s8kod64sa0] { grid-column: 1; }
.fd-lang-item:hover[b-s8kod64sa0], .fd-lang-item:focus-visible[b-s8kod64sa0] { background: color-mix(in srgb, var(--color-brand-teal) 8%, white); }
.fd-lang-item--current[b-s8kod64sa0] { background: color-mix(in srgb, var(--color-brand-teal) 12%, white); }
.fd-lang-item:disabled[b-s8kod64sa0] { opacity: 0.6; cursor: default; }

.fd-ml-badge[b-s8kod64sa0] {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text-secondary);
}

.fd-ml-badge--gap[b-s8kod64sa0] { cursor: pointer; border-color: rgba(217, 119, 6, 0.45); color: rgb(146, 64, 14); }
.fd-ml-badge--gap:hover[b-s8kod64sa0] { background: rgba(217, 119, 6, 0.08); }

.fd-mlfield-source[b-s8kod64sa0] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-mlfield-source-empty[b-s8kod64sa0] { font-style: italic; }

.fd-badge--machine[b-s8kod64sa0] { background: color-mix(in srgb, var(--color-brand-teal) 14%, white); color: var(--color-text-primary); }
.fd-badge--outdated[b-s8kod64sa0] { background: rgba(217, 119, 6, 0.14); color: rgb(146, 64, 14); }

.fd-languages-table td[b-s8kod64sa0] { vertical-align: middle; }
.fd-languages-row--current[b-s8kod64sa0] { background: color-mix(in srgb, var(--color-brand-teal) 6%, white); }
.fd-languages-actions[b-s8kod64sa0] { white-space: nowrap; }
.fd-languages-actions .btn-secondary[b-s8kod64sa0] { margin-right: 0.25rem; }
.fd-languages-confirm[b-s8kod64sa0] { margin: 0.5rem 0; }
.fd-languages-note[b-s8kod64sa0] { margin-top: 0.75rem; }

/* F12.5 — auto-translate panel. */
.fd-translate-targets[b-s8kod64sa0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    border: 0;
}

.fd-translate-targets legend[b-s8kod64sa0] { padding: 0; margin-bottom: 0.25rem; }
.fd-translate-result[b-s8kod64sa0] { margin-top: 0.75rem; }
.fd-translate-row--warn td[b-s8kod64sa0] { background: rgba(217, 119, 6, 0.06); }
.fd-translate-result .form-input[b-s8kod64sa0] { min-width: 12rem; }

.fd-approve[b-s8kod64sa0] {
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.6875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-approve:hover[b-s8kod64sa0] { border-color: color-mix(in srgb, var(--color-brand-teal) 50%, white); }
/* /Components/Features/FormDesigner/FormDropZones.razor.rz.scp.css */
/* Drop bands: an overlay over the row or card being dragged onto, split along
   one axis. Present only while a drag is in flight, so nothing here affects the
   designer at rest. */
.fd-dz-layer[b-5bcn97r3mr] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.fd-dz-layer--x[b-5bcn97r3mr] { flex-direction: row; }

.fd-dz[b-5bcn97r3mr] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

/* The middle band is the container band and takes the larger share, so the two
   edge bands stay easy to hit without swallowing the row. */
.fd-dz--into[b-5bcn97r3mr] {
    flex: 2 1 0;
    border-radius: calc(var(--radius) * 0.75);
    transition: background 0.12s;
}

.fd-dz--into.fd-dz--over[b-5bcn97r3mr] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
}

/* The insertion line: 2px of brand teal on the edge the drop would insert at. */
.fd-dz--over[b-5bcn97r3mr]::after {
    content: "";
    position: absolute;
    background: var(--color-brand-teal);
    border-radius: 1px;
}

.fd-dz--before.fd-dz--over[b-5bcn97r3mr]::after,
.fd-dz--after.fd-dz--over[b-5bcn97r3mr]::after {
    left: 0;
    right: 0;
    height: 2px;
}

.fd-dz--before.fd-dz--over[b-5bcn97r3mr]::after { top: 0; }
.fd-dz--after.fd-dz--over[b-5bcn97r3mr]::after { bottom: 0; }

.fd-dz-layer--x .fd-dz--before.fd-dz--over[b-5bcn97r3mr]::after,
.fd-dz-layer--x .fd-dz--after.fd-dz--over[b-5bcn97r3mr]::after {
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    width: 2px;
    height: auto;
}

.fd-dz-layer--x .fd-dz--before.fd-dz--over[b-5bcn97r3mr]::after { left: 0; }
.fd-dz-layer--x .fd-dz--after.fd-dz--over[b-5bcn97r3mr]::after { right: 0; }

@media (prefers-reduced-motion: reduce) {
    .fd-dz--into[b-5bcn97r3mr] { transition: none; }
}
/* /Components/Features/FormDesigner/FormInspectorRail.razor.rz.scp.css */
.fd-rail[b-kkx08spn0l] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.fd-rail-head[b-kkx08spn0l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Breadcrumb */
.fd-crumbs[b-kkx08spn0l] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-crumb[b-kkx08spn0l] {
    max-width: 11rem;
    padding: 0 0.125rem;
    border: none;
    border-radius: 3px;
    background: none;
    font: inherit;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s;
}

.fd-crumb:hover[b-kkx08spn0l] {
    color: var(--color-brand);
    text-decoration: underline;
}

.fd-crumb:focus-visible[b-kkx08spn0l] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-crumb-sep[b-kkx08spn0l] { color: var(--color-unknown); }

/* Title block */
.fd-rail-title[b-kkx08spn0l] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fd-rail-name[b-kkx08spn0l] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-rail-id[b-kkx08spn0l] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Inspect | Checks */
.fd-railtabs[b-kkx08spn0l] {
    display: flex;
    gap: 0.25rem;
    margin: 0.75rem 1rem 0;
    padding: 3px;
    background: var(--color-surface-raised);
    border-radius: 8px;
}

.fd-railtab[b-kkx08spn0l] {
    flex: 1;
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.fd-railtab--on[b-kkx08spn0l] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.fd-railtab:focus-visible[b-kkx08spn0l] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-rail-body[b-kkx08spn0l] {
    flex: 1;
    padding: 0.875rem 1rem 1rem;
}

.fd-rail-empty[b-kkx08spn0l] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-rail-note[b-kkx08spn0l] {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-rail-foot[b-kkx08spn0l] {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .fd-crumb[b-kkx08spn0l],
    .fd-railtab[b-kkx08spn0l] { transition: none; }
}

/* Count pill on the Checks tab (F7.4): the rail says how much there is to look
   at without being opened. Colour is doubled by the number itself, so it never
   carries meaning alone. */
.fd-railtab-count[b-kkx08spn0l] {
    display: inline-block;
    min-width: 1.1rem;
    margin-left: 0.3rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    text-align: center;
}

.fd-railtab-count--error[b-kkx08spn0l] {
    background: color-mix(in srgb, var(--color-down) 14%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-railtab-count--warn[b-kkx08spn0l] {
    background: color-mix(in srgb, var(--color-degraded) 18%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}
/* /Components/Features/FormDesigner/FormOutline.razor.rz.scp.css */
.fd-outline[b-0evd70571t] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.fd-outline-head[b-0evd70571t] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.fd-outline-count[b-0evd70571t] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-tree[b-0evd70571t] {
    list-style: none;
    margin: 0;
    padding: 0.375rem;
}

/* Move announcements (F3.5). The designer's only live region: it is here rather
   than on the shell because the outline is where the keyboard moves happen, and
   a canvas drop re-renders this pane anyway. Off-screen, never empty of purpose. */
.fd-outline-live[b-0evd70571t] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* /Components/Features/FormDesigner/FormOutlineNode.razor.rz.scp.css */
.fd-tree-item[b-0kwm6glgjj] {
    list-style: none;
    margin: 0;
    padding: 0;
    outline: none;
}

.fd-tree-row[b-0kwm6glgjj] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.875rem;
    padding: 0.125rem 0.5rem 0.125rem calc(0.375rem + var(--fd-level, 0) * 0.875rem);
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.fd-tree-row:hover[b-0kwm6glgjj] { background: var(--color-surface-raised); }

.fd-tree-item--selected > .fd-tree-row[b-0kwm6glgjj] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, white);
}

.fd-tree-item:focus-visible > .fd-tree-row[b-0kwm6glgjj] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-tree-chevron[b-0kwm6glgjj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: transform 0.15s, color 0.12s;
}

.fd-tree-chevron:hover[b-0kwm6glgjj] { color: var(--color-text-primary); }
.fd-tree-chevron--open[b-0kwm6glgjj] { transform: rotate(90deg); }
.fd-tree-chevron:focus-visible[b-0kwm6glgjj] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-tree-spacer[b-0kwm6glgjj] {
    flex: none;
    width: 1rem;
}

.fd-tree-icon[b-0kwm6glgjj] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-tree-label[b-0kwm6glgjj] {
    /* Keeps at least a word of the name before the chips take the rest: a row
       that read "C." beside three chips said nothing. The full name is in the
       row's tooltip. */
    flex: 1 1 auto;
    min-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-tree-item--form > .fd-tree-row .fd-tree-label[b-0kwm6glgjj] {
    font-family: var(--font-title);
    font-weight: 600;
}

.fd-tree-item--section > .fd-tree-row .fd-tree-label[b-0kwm6glgjj] { font-weight: 600; }
.fd-tree-item--group > .fd-tree-row .fd-tree-label[b-0kwm6glgjj] { font-weight: 500; }

.fd-tree-item--disabled > .fd-tree-row[b-0kwm6glgjj] { color: var(--color-text-secondary); }
.fd-tree-item--hidden > .fd-tree-row .fd-tree-label[b-0kwm6glgjj] { opacity: 0.6; }

.fd-tree-chips[b-0kwm6glgjj] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.fd-tree-count[b-0kwm6glgjj] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    padding-left: 0.2rem;
}

.fd-tree-children[b-0kwm6glgjj] {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fd-tree-row[b-0kwm6glgjj],
    .fd-tree-chevron[b-0kwm6glgjj] { transition: none; }
}

/* ── Reordering (F3.5) ───────────────────────────────────────────────────── */

/* The row anchors the drop bands, which are an overlay over it. */
.fd-tree-row[b-0kwm6glgjj] { position: relative; }

/* The handle keeps its slot at all times so nothing shifts on hover; it only
   fades in. The slot carries the Blazor drag handlers, the handle inside it is
   what the browser actually drags. */
.fd-tree-grip[b-0kwm6glgjj] {
    display: inline-flex;
    align-items: center;
    flex: none;
    width: 0.875rem;
    margin-left: -0.125rem;
    color: var(--color-unknown);
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
}

.fd-tree-handle[b-0kwm6glgjj] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
}

.fd-tree-handle:active[b-0kwm6glgjj] { cursor: grabbing; }
.fd-tree-grip svg[b-0kwm6glgjj] { width: 14px; height: 14px; }

.fd-tree-item:hover > .fd-tree-row .fd-tree-grip[b-0kwm6glgjj],
.fd-tree-item:focus-within > .fd-tree-row .fd-tree-grip[b-0kwm6glgjj],
.fd-tree-item--selected > .fd-tree-row .fd-tree-grip[b-0kwm6glgjj] { opacity: 1; }

.fd-tree-item:hover > .fd-tree-row .fd-tree-grip:hover[b-0kwm6glgjj] { color: var(--color-text-secondary); }

/* The row being dragged reads as a copy in flight. */
.fd-tree-item--dragging > .fd-tree-row[b-0kwm6glgjj] { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
    .fd-tree-grip[b-0kwm6glgjj] { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/CalculatedFieldBuilder.razor.rz.scp.css */
/* ── Calculated field builder ───────────────────────────────────────────────
   Four operand lists, the result check, and the preview. The expression line
   and the verdict are the two things an author reads first, so both are given
   weight; everything else stays quiet.
   ────────────────────────────────────────────────────────────────────────── */

.fd-cf[b-xu173fj907] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.fd-cf-expression[b-xu173fj907] {
    margin: 0 0 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ── Operands ─────────────────────────────────────────────────────────────── */

.fd-cf-operand[b-xu173fj907] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

.fd-cf-operand-head[b-xu173fj907] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.fd-cf-symbol[b-xu173fj907] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 4px;
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--color-text-secondary);
}

.fd-cf-operand-label[b-xu173fj907] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fd-cf-count[b-xu173fj907] {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-cf-chips[b-xu173fj907] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fd-cf-chip[b-xu173fj907] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.3rem 0.15rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.75rem;
}

/* An operand the runtime will have to convert before it can add it. */
.fd-cf-chip--warn[b-xu173fj907] {
    border-color: color-mix(in srgb, var(--color-warn, #b45309) 40%, white);
    background: color-mix(in srgb, var(--color-warn, #b45309) 7%, white);
}

.fd-cf-chip-label[b-xu173fj907] { font-weight: 500; }

.fd-cf-chip-x[b-xu173fj907] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.fd-cf-chip-x:hover[b-xu173fj907] { background: var(--color-surface-raised); color: var(--color-down); }

.fd-cf-chip-x:focus-visible[b-xu173fj907] { outline: 2px solid var(--color-brand); outline-offset: 1px; }

/* ── Preview ──────────────────────────────────────────────────────────────── */

.fd-cf-samples[b-xu173fj907] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.fd-cf-sample .form-input[b-xu173fj907] { width: 100%; }

.fd-cf-working[b-xu173fj907] { margin-top: 0.4rem; }

.fd-cf-verdict[b-xu173fj907] {
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.45;
    background: var(--color-surface-raised);
}

.fd-cf-verdict--pass[b-xu173fj907] {
    border-color: color-mix(in srgb, var(--color-up, #15803d) 35%, white);
    background: color-mix(in srgb, var(--color-up, #15803d) 8%, white);
    color: color-mix(in srgb, var(--color-up, #15803d) 80%, black);
}

.fd-cf-verdict--fail[b-xu173fj907] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 78%, black);
}

.fd-cf-note[b-xu173fj907] { margin-top: 0.25rem; }

.fd-cf-warnings[b-xu173fj907] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-warn, #b45309) 80%, black);
}
/* /Components/Features/FormDesigner/Inspectors/DataSourceTestPanel.razor.rz.scp.css */
/* ── Test lookup panel ──────────────────────────────────────────────────────
   Its own elements only: the section frame, the field stack, the results grid.
   Everything it sits in — fd-sec, fd-field, fd-hint, fd-empty, fd-banner,
   fd-tbl — comes from InspectorShell, and the head row (fd-ds-values-head)
   from the Data source tab, which is this panel's parent. Tokens only (§3.4).
   ────────────────────────────────────────────────────────────────────────── */

.fd-dstest[b-y1fqjwp2ww] {
    padding-top: 0.125rem;
}

/* One sample input per where row; the same rhythm as the where editor's rows. */
.fd-dstest-fields[b-y1fqjwp2ww] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* The run button sits in the section head, so it must not stretch. */
.fd-dstest-run[b-y1fqjwp2ww] { flex: none; }

.fd-dstest-count[b-y1fqjwp2ww] {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The grid: bounded height with its own scroll, so a hundred rows cannot push
   the rest of the inspector off screen. */
.fd-dstest-grid[b-y1fqjwp2ww] {
    max-height: 17rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.fd-dstest-grid .fd-dstest-tbl[b-y1fqjwp2ww] { width: 100%; }

/* Sticky headings survive the scroll; the raised background is InspectorShell's,
   the layer is this panel's business. */
.fd-dstest-grid .fd-dstest-tbl thead th[b-y1fqjwp2ww] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Zebra and hover are declared here — with the wrapper in the selector — so they
   beat InspectorShell's row-hover rule rather than tying with it. */
.fd-dstest-grid .fd-dstest-tbl tbody tr:nth-child(even) td[b-y1fqjwp2ww] {
    background: color-mix(in srgb, var(--color-surface-raised) 55%, transparent);
}

.fd-dstest-grid .fd-dstest-tbl tbody tr:hover td[b-y1fqjwp2ww] {
    background: var(--color-surface-raised);
}

.fd-dstest-grid .fd-dstest-tbl tbody tr:last-child td[b-y1fqjwp2ww] { border-bottom: 0; }

/* Values are data, not prose: monospace, so columns line up and a stray space is
   visible. Not <code>, which is a bordered chip in this inspector. */
.fd-dstest-val[b-y1fqjwp2ww] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    white-space: pre-wrap;
}

.fd-dstest-null[b-y1fqjwp2ww] { color: var(--color-text-secondary); }

/* The one-line note for a kind that cannot be tested at all. */
.fd-ds-note[b-y1fqjwp2ww] {
    margin: 0;
    font-style: italic;
}
/* /Components/Features/FormDesigner/Inspectors/DefinedListEditor.razor.rz.scp.css */
/* ── Custom-values chip list ────────────────────────────────────────────────
   Its own elements only, so no ::deep is needed; the field, hint, banner and
   pre vocabulary comes from InspectorShell, which is an ancestor wherever this
   editor is used. Tokens only (§3.4).
   ────────────────────────────────────────────────────────────────────────── */

.fd-defined[b-vlfc4b2w4c] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.fd-defined-list[b-vlfc4b2w4c] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-defined-chip[b-vlfc4b2w4c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
}

.fd-defined-chip--warn[b-vlfc4b2w4c] {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
}

.fd-defined-pos[b-vlfc4b2w4c] {
    flex: none;
    min-width: 1rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fd-defined-text[b-vlfc4b2w4c] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-defined-actions[b-vlfc4b2w4c] {
    display: inline-flex;
    flex: none;
    gap: 0.125rem;
}

.fd-defined-add[b-vlfc4b2w4c] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fd-defined-add .form-input[b-vlfc4b2w4c] { flex: 1 1 auto; min-width: 0; }

.fd-defined-btn[b-vlfc4b2w4c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.fd-defined-btn:hover:not(:disabled)[b-vlfc4b2w4c] {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.fd-defined-btn:focus-visible[b-vlfc4b2w4c] {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

.fd-defined-btn:disabled[b-vlfc4b2w4c] {
    cursor: not-allowed;
    opacity: 0.35;
}

.fd-defined-btn--remove:hover:not(:disabled)[b-vlfc4b2w4c] {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

@media (prefers-reduced-motion: reduce) {
    .fd-defined-btn[b-vlfc4b2w4c] { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/FormVersionsPanel.razor.rz.scp.css */
/* ── Versions panel (F7.2) ─────────────────────────────────────────────────
   The table, badge and chip vocabulary comes from InspectorShell's ::deep
   rules; only the row emphasis and the action column are here.
   ────────────────────────────────────────────────────────────────────────── */

.fd-fv-tbl td[b-gy6fz8hxo2] { vertical-align: middle; }

.fd-fv-tbl td:first-child[b-gy6fz8hxo2] {
    display: table-cell;
    white-space: nowrap;
}

.fd-fv-row--current > td[b-gy6fz8hxo2] {
    background: color-mix(in srgb, var(--color-brand-teal) 6%, white);
}

.fd-fv-actions[b-gy6fz8hxo2] {
    white-space: nowrap;
    text-align: right;
}

.fd-fv-actions > * + *[b-gy6fz8hxo2] { margin-left: 0.375rem; }

.fd-fv-actions--start[b-gy6fz8hxo2] { text-align: left; margin-top: 0.5rem; }

.fd-fv-actions--start > :first-child[b-gy6fz8hxo2] { margin-left: 0; }

.fd-fv-mock[b-gy6fz8hxo2] { margin-top: 0.75rem; }

.fd-fv-note[b-gy6fz8hxo2] { margin-top: 0.75rem; }

.fd-fv-note code[b-gy6fz8hxo2] {
    padding: 0 0.2rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
}
/* /Components/Features/FormDesigner/Inspectors/GrantPicker.razor.rz.scp.css */
/* ── Add-grant drawer (F7.1) ───────────────────────────────────────────────
   A right-hand drawer rather than the centred LibraryPicker dialog: the grid it
   adds to stays visible beside it, which is what makes "already granted" read
   as a fact about the row you are looking at. Same frame vocabulary otherwise —
   backdrop-as-cancel, hairline border, §5.3 elevation, tokens only.
   ────────────────────────────────────────────────────────────────────────── */

.fd-gp-backdrop[b-fv6w9q07xq] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-gp[b-fv6w9q07xq] {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(26rem, calc(100vw - 2rem));
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -18px 0 45px rgba(15, 23, 42, 0.18);
}

.fd-gp-head[b-fv6w9q07xq] {
    position: relative;
    padding: 1.125rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.fd-gp-title[b-fv6w9q07xq] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-gp-sub[b-fv6w9q07xq] {
    margin: 0.25rem 2rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.fd-gp-close[b-fv6w9q07xq] {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-gp-close:hover[b-fv6w9q07xq] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.fd-gp-close:focus-visible[b-fv6w9q07xq] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

/* ── Tabs (§6.6 pills) ───────────────────────────────────────────────────── */

.fd-gp-tabs[b-fv6w9q07xq] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem 0;
}

.fd-gp-tab[b-fv6w9q07xq] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.fd-gp-tab:hover[b-fv6w9q07xq] { color: var(--color-text-primary); }

.fd-gp-tab--on[b-fv6w9q07xq] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
    color: var(--color-brand);
}

.fd-gp-tab:focus-visible[b-fv6w9q07xq] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.fd-gp-body[b-fv6w9q07xq] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fd-gp-note[b-fv6w9q07xq],
.fd-gp-status[b-fv6w9q07xq] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-gp-error[b-fv6w9q07xq] {
    margin: 0;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-gp-search[b-fv6w9q07xq] { display: flex; flex-direction: column; gap: 0.25rem; }

.fd-gp-search .form-label[b-fv6w9q07xq] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fd-gp-list[b-fv6w9q07xq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fd-gp-item[b-fv6w9q07xq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-gp-item:hover:not(:disabled)[b-fv6w9q07xq] { background: var(--color-surface-raised); }

.fd-gp-item:focus-visible[b-fv6w9q07xq] {
    outline: none;
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-gp-item--taken[b-fv6w9q07xq] { cursor: not-allowed; opacity: 0.6; }

.fd-gp-item-main[b-fv6w9q07xq] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.fd-gp-item-name[b-fv6w9q07xq] {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-gp-item-sub[b-fv6w9q07xq] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.fd-gp-manual-actions[b-fv6w9q07xq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Foot ────────────────────────────────────────────────────────────────── */

.fd-gp-foot[b-fv6w9q07xq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.fd-gp-count[b-fv6w9q07xq] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

/* The inspector vocabulary is scoped to InspectorShell, and the drawer renders
   outside it — so the two rules it borrows are restated here. */
.fd-gp[b-fv6w9q07xq]  .fd-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.75rem;
    line-height: 1.5;
}

.fd-gp[b-fv6w9q07xq]  .fd-banner svg { flex: none; width: 14px; height: 14px; margin-top: 0.1rem; }

.fd-gp[b-fv6w9q07xq]  .fd-banner--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-gp[b-fv6w9q07xq]  .fd-fields {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fd-gp[b-fv6w9q07xq]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fd-gp[b-fv6w9q07xq]  .fd-field .form-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fd-gp[b-fv6w9q07xq]  .fd-field .form-hint,
.fd-gp[b-fv6w9q07xq]  .fd-field .form-error { font-size: 0.6875rem; }

.fd-gp[b-fv6w9q07xq]  .fd-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .fd-gp-tab[b-fv6w9q07xq] { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/InspectorShell.razor.rz.scp.css */
/* ── Inspector frame ────────────────────────────────────────────────────────
   Identity strip, pill sub-tabs (§6.6) and the panel, plus the vocabulary the
   inspectors share — published through ::deep so it is defined once. Tokens
   only; tints are color-mix over the brand and health tokens (§3.4).
   ────────────────────────────────────────────────────────────────────────── */

.fd-insp[b-7i6xnzu7o1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Identity strip ──────────────────────────────────────────────────────── */

.fd-insp-head[b-7i6xnzu7o1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-insp-icon[b-7i6xnzu7o1] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-insp-id[b-7i6xnzu7o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.fd-insp-idlabel[b-7i6xnzu7o1] { color: var(--color-text-muted, var(--color-text-secondary)); }

.fd-insp-badges[b-7i6xnzu7o1] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

/* ── Pill sub-tabs ───────────────────────────────────────────────────────── */

.fd-insp-tabs[b-7i6xnzu7o1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-insp-tab[b-7i6xnzu7o1] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.fd-insp-tab:hover[b-7i6xnzu7o1] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
}

.fd-insp-tab--on[b-7i6xnzu7o1] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 12%, transparent);
    color: var(--color-brand);
}

.fd-insp-tab:focus-visible[b-7i6xnzu7o1] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-insp-body[b-7i6xnzu7o1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ── Shared vocabulary (published to inspectors and helpers) ─────────────── */

/* Section inside a tab: micro-label heading + content */
.fd-insp[b-7i6xnzu7o1]  .fd-sec {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.fd-insp[b-7i6xnzu7o1]  .fd-sec-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Facts: dt micro-label / dd value grid */
.fd-insp[b-7i6xnzu7o1]  .fd-facts {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) 1fr;
    gap: 0.5rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-facts dt {
    padding-top: 0.1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-facts dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.375rem;
    margin: 0;
    min-width: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-insp[b-7i6xnzu7o1]  .fd-facts dd.fd-facts-num { font-variant-numeric: tabular-nums; }

.fd-insp[b-7i6xnzu7o1]  code,
.fd-insp[b-7i6xnzu7o1]  .fd-mono {
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-insp[b-7i6xnzu7o1]  .fd-hint {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* A value upstream will not tell us. Distinct from .fd-hint, which explains a
   field that IS known — this one says the designer cannot see the stored value,
   so the control shows intent rather than state. See issue #166. */
.fd-insp[b-7i6xnzu7o1]  .fd-unknown {
    margin: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.75rem;
    line-height: 1.45;
}

.fd-insp[b-7i6xnzu7o1]  .fd-unknown code {
    font-size: 0.7rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-unknown-action {
    display: block;
    margin-top: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--status-warning-fg);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.fd-insp[b-7i6xnzu7o1]  .fd-unknown-action:disabled {
    opacity: 0.5;
    cursor: default;
    text-decoration: none;
}

.fd-insp[b-7i6xnzu7o1]  .fd-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Cards (rule, trigger, master question) */
.fd-insp[b-7i6xnzu7o1]  .fd-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.fd-insp[b-7i6xnzu7o1]  .fd-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-insp[b-7i6xnzu7o1]  .fd-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-insp[b-7i6xnzu7o1]  .fd-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-card-summary {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Compact tables (§6.5) */
.fd-insp[b-7i6xnzu7o1]  .fd-tbl-wrap { overflow-x: auto; }

.fd-insp[b-7i6xnzu7o1]  .fd-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-tbl th {
    padding: 0.375rem 0.5rem;
    text-align: left;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-insp[b-7i6xnzu7o1]  .fd-tbl td {
    padding: 0.375rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-insp[b-7i6xnzu7o1]  .fd-tbl tbody tr:hover td { background: var(--color-surface-raised); }
.fd-insp[b-7i6xnzu7o1]  .fd-tbl td.fd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Banners (§6.7) */
.fd-insp[b-7i6xnzu7o1]  .fd-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-banner svg {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 0.1rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-banner--info {
    background: color-mix(in srgb, var(--color-brand) 6%, white);
    border-color: color-mix(in srgb, var(--color-brand) 25%, white);
    color: color-mix(in srgb, var(--color-brand) 85%, black);
}

.fd-insp[b-7i6xnzu7o1]  .fd-banner--warn {
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

/* Token chips ({Date} in a default value) and link chips (select another question) */
.fd-insp[b-7i6xnzu7o1]  .fd-token {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 40%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    white-space: nowrap;
}

.fd-insp[b-7i6xnzu7o1]  .fd-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.fd-insp[b-7i6xnzu7o1]  .fd-link-chip svg { flex: none; width: 12px; height: 12px; }

.fd-insp[b-7i6xnzu7o1]  .fd-link-chip:hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.fd-insp[b-7i6xnzu7o1]  .fd-link-chip:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* Value chips (defined-list values, flags) */
.fd-insp[b-7i6xnzu7o1]  .fd-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-value-chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* Raw JSON disclosure */
.fd-insp[b-7i6xnzu7o1]  .fd-details {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.fd-insp[b-7i6xnzu7o1]  .fd-details summary {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
}

.fd-insp[b-7i6xnzu7o1]  .fd-details summary::-webkit-details-marker { display: none; }
.fd-insp[b-7i6xnzu7o1]  .fd-details summary::before { content: "▸ "; }
.fd-insp[b-7i6xnzu7o1]  .fd-details[open] summary::before { content: "▾ "; }

.fd-insp[b-7i6xnzu7o1]  .fd-details summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* Folded groups that hold fields or facts rather than a <pre>: give the
   contents the same inset the summary has. */
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-fields,
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-facts,
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-card,
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-empty,
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-hint {
    margin: 0.25rem 0.625rem 0.625rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-hint + .fd-fields,
.fd-insp[b-7i6xnzu7o1]  .fd-details > .fd-card + .fd-hint {
    margin-top: 0;
}

/* "Not confirmed by DocMX": settings written but never read back. Dashed, so
   the group reads as provisional before a word is read. */
.fd-insp[b-7i6xnzu7o1]  .fd-details--unconfirmed { border-style: dashed; }

/* "Stored by DocMX": a padlock in the summary, inline with the caret. */
.fd-insp[b-7i6xnzu7o1]  .fd-details--stored summary svg {
    vertical-align: -1px;
    margin-right: 0.25rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-pre {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 22rem;
    overflow: auto;
}

.fd-insp[b-7i6xnzu7o1]  .fd-pre--bare {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
}

/* Operand breakdown for calculation rules */
.fd-insp[b-7i6xnzu7o1]  .fd-operands {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.78rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-operands dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-operands dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .fd-insp-tab[b-7i6xnzu7o1],
    .fd-insp[b-7i6xnzu7o1]  .fd-link-chip { transition: none; }
}

/* ── Editable fields (F3.1) ──────────────────────────────────────────────────
   The inspectors' write surface: EditText / EditNumber / EditToggle /
   EditSelect / EditMlText. Controls reuse the global form-* vocabulary; only
   the stacking, the switch and the multi-language row live here. Published
   through ::deep like the rest of the inspector vocabulary.
   ────────────────────────────────────────────────────────────────────────── */

.fd-insp[b-7i6xnzu7o1]  .fd-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

/* .form-label already carries the micro-label look; the stack owns the spacing. */
.fd-insp[b-7i6xnzu7o1]  .fd-field .form-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
}

.fd-insp[b-7i6xnzu7o1]  .fd-field .form-input {
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-field .form-hint,
.fd-insp[b-7i6xnzu7o1]  .fd-field .form-error {
    margin-top: 0;
}

.fd-insp[b-7i6xnzu7o1]  p.fd-hint { margin: 0; }

.fd-insp[b-7i6xnzu7o1]  .fd-field-textarea {
    resize: vertical;
    min-height: 3.25rem;
    line-height: 1.45;
}

.fd-insp[b-7i6xnzu7o1]  .fd-field-number { max-width: 11rem; }

.fd-insp[b-7i6xnzu7o1]  .fd-field-select { appearance: auto; }

.fd-insp[b-7i6xnzu7o1]  .fd-field-lang {
    margin-left: auto;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, var(--color-text-secondary));
}

/* Multi-language row: the English box, then the read-only language dots. */
.fd-insp[b-7i6xnzu7o1]  .fd-mlfield {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.fd-insp[b-7i6xnzu7o1]  .fd-mlfield > .form-input { flex: 1 1 auto; min-width: 0; }

.fd-insp[b-7i6xnzu7o1]  .fd-mlfield > .fd-ml { flex: none; padding-top: 0.5rem; }

.fd-insp[b-7i6xnzu7o1]  .fd-mlfield-others { margin-top: 0.1rem; }

.fd-insp[b-7i6xnzu7o1]  .fd-mlfield-list {
    padding: 0.5rem 0.625rem 0;
    font-size: 0.78rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-mlfield-note {
    padding: 0.375rem 0.625rem 0.5rem;
    color: var(--color-text-secondary);
}

/* ── Switch ──────────────────────────────────────────────────────────────── */

.fd-insp[b-7i6xnzu7o1]  .fd-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch--off { cursor: not-allowed; opacity: 0.6; }

.fd-insp[b-7i6xnzu7o1]  .fd-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-track {
    position: relative;
    flex: none;
    width: 2rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    transition: background 0.12s, border-color 0.12s;
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transform: translate(0, -50%);
    transition: transform 0.12s, background 0.12s;
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-input:checked + .fd-switch-track {
    background: color-mix(in srgb, var(--color-brand-teal) 22%, white);
    border-color: var(--color-brand-teal);
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-input:checked + .fd-switch-track .fd-switch-thumb {
    background: var(--color-brand-teal);
    transform: translate(0.8125rem, -50%);
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-input:focus-visible + .fd-switch-track {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-insp[b-7i6xnzu7o1]  .fd-switch-state {
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .fd-insp[b-7i6xnzu7o1]  .fd-switch-track,
    .fd-insp[b-7i6xnzu7o1]  .fd-switch-thumb { transition: none; }
}

/* ── Order stepper (F3.2) ────────────────────────────────────────────────── */

.fd-insp[b-7i6xnzu7o1]  .fd-order {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-order-value {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    min-width: 4.5rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.fd-insp[b-7i6xnzu7o1]  .fd-order-btn:hover:not(:disabled) {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.fd-insp[b-7i6xnzu7o1]  .fd-order-btn:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-insp[b-7i6xnzu7o1]  .fd-order-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Location row (which section or group a question sits in) ────────────── */

.fd-insp[b-7i6xnzu7o1]  .fd-locate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fd-insp[b-7i6xnzu7o1]  .fd-locate-value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    flex: 1 1 auto;
}

.fd-insp[b-7i6xnzu7o1]  .fd-locate-icon {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-insp[b-7i6xnzu7o1]  .fd-locate-name {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-insp[b-7i6xnzu7o1]  .fd-locate-move {
    flex: none;
    padding: 0.3rem 0.625rem;
    font-size: 0.75rem;
}

/* ── A field with a menu beside it (the default value's token list) ──────── */

.fd-insp[b-7i6xnzu7o1]  .fd-field-with-menu {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.fd-insp[b-7i6xnzu7o1]  .fd-field-with-menu > .fd-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* The menu button lines up with the input, not with the label above it. */
.fd-insp[b-7i6xnzu7o1]  .fd-field-with-menu > .fd-menu-wrap { margin-top: 1.55rem; }

/* ── Inspector action bar (destructive actions live at the bottom) ───────── */

.fd-insp[b-7i6xnzu7o1]  .fd-insp-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
    .fd-insp[b-7i6xnzu7o1]  .fd-order-btn { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/MlValue.razor.rz.scp.css */
.fd-ml[b-mvzxpwdu5r] {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
    max-width: 100%;
}

.fd-ml-text[b-mvzxpwdu5r] {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.fd-ml-text--empty[b-mvzxpwdu5r] { color: var(--color-text-secondary); }

.fd-ml-lang[b-mvzxpwdu5r] {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.fd-ml-dots[b-mvzxpwdu5r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: center;
    cursor: help;
}

.fd-ml-dot[b-mvzxpwdu5r] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--color-unknown);
    background: transparent;
    box-sizing: border-box;
}

.fd-ml-dot--on[b-mvzxpwdu5r] {
    border-color: var(--color-brand-teal);
    background: var(--color-brand-teal);
}
/* /Components/Features/FormDesigner/Inspectors/OptionsEditor.razor.rz.scp.css */
/* ── Options editor ─────────────────────────────────────────────────────────
   The character meter is the only unusual thing here: it is a budget, not a
   decoration, so it sits above the fields and turns into an error rather than
   a colour change when the budget is gone.
   ────────────────────────────────────────────────────────────────────────── */

.fd-oe[b-h1eo67r0ie] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.fd-oe-meter[b-h1eo67r0ie] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
}

.fd-oe-meter-bar[b-h1eo67r0ie] {
    flex: 1 1 8rem;
    min-width: 6rem;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 60%, white);
    overflow: hidden;
}

.fd-oe-meter-fill[b-h1eo67r0ie] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-brand);
    transition: width 120ms ease-out;
}

.fd-oe-meter-text[b-h1eo67r0ie] {
    flex: none;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-oe-meter-note[b-h1eo67r0ie] {
    flex: 1 1 100%;
    font-size: 0.75rem;
    line-height: 1.45;
}

.fd-oe-meter--over[b-h1eo67r0ie] {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 78%, black);
}

.fd-oe-meter--over .fd-oe-meter-fill[b-h1eo67r0ie] { background: var(--color-down); }

.fd-oe-meter--over .fd-oe-meter-text[b-h1eo67r0ie] { color: inherit; font-weight: 600; }

.fd-oe-warn[b-h1eo67r0ie] {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-warn, #b45309) 30%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-warn, #b45309) 7%, white);
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-warn, #b45309) 80%, black);
}

@media (prefers-reduced-motion: reduce) {
    .fd-oe-meter-fill[b-h1eo67r0ie] { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/QuestionAssistsTab.razor.rz.scp.css */
/* ── Assists tab ────────────────────────────────────────────────────────────
   The tab's own frame only. Everything else it renders (fd-card, fd-chip,
   fd-badge, fd-empty, fd-hint, fd-details, fd-pre …) comes from
   InspectorShell, which is this tab's ancestor; the drawer it opens carries
   its own stylesheet because it is also mounted from the library page.
   ────────────────────────────────────────────────────────────────────────── */

.fd-qa[b-aegenlxrgo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.fd-qa-actions[b-aegenlxrgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fd-qa-error[b-aegenlxrgo] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 75%, black);
    font-size: 0.8125rem;
}

.fd-qa-summary[b-aegenlxrgo] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-qa-card-actions[b-aegenlxrgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.fd-qa-detach:not(:disabled):hover[b-aegenlxrgo] {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    color: var(--color-down);
}

.fd-qa[b-aegenlxrgo]  .fd-hint a { color: var(--color-brand); }
/* /Components/Features/FormDesigner/Inspectors/QuestionDataSourceTab.razor.rz.scp.css */
/* ── Data source tab ────────────────────────────────────────────────────────
   The tab's own frame plus the vocabulary its child editors share, published
   through ::deep from the tab's root so the external editor and the where
   editor can use it without repeating it. Everything else (fd-sec, fd-field,
   fd-chip, fd-facts …) comes from InspectorShell, which is this tab's ancestor.
   Tokens only; tints are color-mix over the brand and health tokens (§3.4).
   ────────────────────────────────────────────────────────────────────────── */

.fd-ds[b-96tzl5uad9] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

/* ── Summary strip ───────────────────────────────────────────────────────── */

.fd-ds-summary[b-96tzl5uad9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-ds-summary .fd-ds-fact[b-96tzl5uad9] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.fd-ds-summary .fd-ds-fact-label[b-96tzl5uad9] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Mode selector ───────────────────────────────────────────────────────── */

.fd-ds-modes[b-96tzl5uad9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fd-ds-mode[b-96tzl5uad9] {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.fd-ds-mode:hover:not(:disabled)[b-96tzl5uad9] {
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
    color: var(--color-text-primary);
}

.fd-ds-mode:focus-visible[b-96tzl5uad9] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.fd-ds-mode--on[b-96tzl5uad9] {
    border-color: color-mix(in srgb, var(--color-brand) 45%, white);
    background: color-mix(in srgb, var(--color-brand) 8%, white);
    color: var(--color-brand);
    font-weight: 600;
}

.fd-ds-mode:disabled[b-96tzl5uad9] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Shared by this tab and its child editors ────────────────────────────── */

/* The "what is bound" row: name, id, kind, and the button that changes it. */
.fd-ds[b-96tzl5uad9]  .fd-ds-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.fd-ds[b-96tzl5uad9]  .fd-ds-pick-value {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.8125rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-pick-name {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-link {
    color: var(--color-brand);
    text-decoration: none;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-link:hover { text-decoration: underline; }

.fd-ds[b-96tzl5uad9]  .fd-ds-link:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 3px;
}

/* A section title with an action beside it (refresh, add a field). */
.fd-ds[b-96tzl5uad9]  .fd-ds-values-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-values-head .fd-sec-title {
    flex: 1 1 auto;
    margin: 0;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-refresh:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.fd-ds[b-96tzl5uad9]  .fd-ds-refresh:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-refresh:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--color-brand);
    cursor: pointer;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-more:hover { text-decoration: underline; }

.fd-ds[b-96tzl5uad9]  .fd-ds-more:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 3px;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-addrow { flex: none; }

/* ── Where rows ──────────────────────────────────────────────────────────── */

.fd-ds[b-96tzl5uad9]  .fd-ds-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-row-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-ds[b-96tzl5uad9]  .fd-ds-row-field {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.5rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-row-target {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-lint {
    margin: 0;
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, var(--color-degraded) 45%, white);
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
}

.fd-ds[b-96tzl5uad9]  .fd-ds-cascade {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-cascade .fd-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fd-ds-mode[b-96tzl5uad9] { transition: none; }
    .fd-ds[b-96tzl5uad9]  .fd-ds-refresh { transition: none; }
}

/* The where row's remove button; the same shape as the chip buttons in the
   custom-values editor, but owned here because it is the where editor's. */
.fd-ds[b-96tzl5uad9]  .fd-ds-rowbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid transparent;
    border-radius: 5px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.fd-ds[b-96tzl5uad9]  .fd-ds-rowbtn:hover {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-ds[b-96tzl5uad9]  .fd-ds-rowbtn:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .fd-ds[b-96tzl5uad9]  .fd-ds-rowbtn { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/QuestionTriggersTab.razor.rz.scp.css */
/* ── Triggers tab ───────────────────────────────────────────────────────────
   The tab's own frame only. Everything else it renders (fd-card, fd-chip,
   fd-badge, fd-empty, fd-hint …) comes from InspectorShell, which is this
   tab's ancestor; the drawer it opens carries its own stylesheet because it is
   also mounted from a page that is not inside an inspector.
   ────────────────────────────────────────────────────────────────────────── */

.fd-tt[b-sft2mno0i6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.fd-tt-actions[b-sft2mno0i6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The empty state's "Ask assistant" (F11.3), as on the Validation tab. */
.fd-tt-empty[b-sft2mno0i6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
}

/* The write-once rule is the single most surprising thing on this tab, so the
   sentence that explains it is given room rather than being a tooltip. */
.fd-tt-blocked[b-sft2mno0i6] {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
}

.fd-tt-blocked a[b-sft2mno0i6] { color: var(--color-brand); }

.fd-tt-error[b-sft2mno0i6] {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 75%, black);
    font-size: 0.8125rem;
}

.fd-tt-badges[b-sft2mno0i6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fd-tt-summary[b-sft2mno0i6] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-tt-rules[b-sft2mno0i6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fd-tt-rules li[b-sft2mno0i6] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.fd-tt-card-actions[b-sft2mno0i6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.fd-tt-detach:not(:disabled):hover[b-sft2mno0i6] {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    color: var(--color-down);
}
/* /Components/Features/FormDesigner/Inspectors/QuestionValidationTab.razor.rz.scp.css */
/* ── Validation tab ─────────────────────────────────────────────────────────
   The tab's frame, its Add menu and the rule card's own trimmings. Everything
   else it draws (fd-card, fd-chip, fd-order-btn, fd-facts, fd-empty …) comes
   from InspectorShell, which is this tab's ancestor.
   ────────────────────────────────────────────────────────────────────────── */

.fd-vt[b-89ubqk4u71] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.fd-vt-bar[b-89ubqk4u71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fd-vt-count[b-89ubqk4u71] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The empty state's "Ask assistant" (F11.3) wraps onto its own line when the
   rail is narrow rather than squeezing the sentence. */
.fd-vt-empty[b-89ubqk4u71] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
}

/* ── Add menu ─────────────────────────────────────────────────────────────── */

.fd-vt-add[b-89ubqk4u71] {
    position: relative;
}

/* Anchored to the button and scrollable: every authorable type is listed, and
   there are 27 of them — the menu must never need the panel to grow. */
.fd-vt-menu[b-89ubqk4u71] {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(24rem, 78vw);
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgb(15 23 42 / 12%);
}

.fd-vt-menu-group + .fd-vt-menu-group[b-89ubqk4u71] { margin-top: 0.35rem; }

.fd-vt-menu-title[b-89ubqk4u71] {
    margin: 0;
    padding: 0.3rem 0.5rem 0.2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, var(--color-text-secondary));
}

.fd-vt-type[b-89ubqk4u71] {
    display: block;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 6px;
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.fd-vt-type:hover[b-89ubqk4u71] { background: var(--color-surface-raised); }

.fd-vt-type:focus-visible[b-89ubqk4u71] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.fd-vt-type-label[b-89ubqk4u71] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
}

.fd-vt-type-help[b-89ubqk4u71] {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* ── Rule cards ───────────────────────────────────────────────────────────── */

.fd-vt-card--open[b-89ubqk4u71] {
    border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border));
}

/* Pushed to the end of the card head so the type and its chips read first. */
.fd-vt-rowactions[b-89ubqk4u71] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

.fd-vt-rowactions .btn-secondary[b-89ubqk4u71] {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
}

.fd-vt-remove:not(:disabled):hover[b-89ubqk4u71] {
    border-color: color-mix(in srgb, var(--color-down) 40%, white);
    color: var(--color-down);
}

.fd-vt-message[b-89ubqk4u71] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.fd-vt-caveat[b-89ubqk4u71] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-warn, #b45309) 30%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-warn, #b45309) 7%, white);
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-warn, #b45309) 80%, black);
}
/* /Components/Features/FormDesigner/Inspectors/SecurityGrants.razor.rz.scp.css */
/* ── Security grants (F7.1) ────────────────────────────────────────────────
   The grid sits inside the inspector, so the table, banner and chip rules come
   from InspectorShell's ::deep vocabulary; only what is particular to a grant
   row is here. Tokens only (§11); no raw hex.
   ────────────────────────────────────────────────────────────────────────── */

.fd-sg-tbl td[b-0dvk7uufr6] { vertical-align: top; }

.fd-sg-principal[b-0dvk7uufr6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.fd-sg-name[b-0dvk7uufr6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sg-guid[b-0dvk7uufr6] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* The column header is the visible label, so the field's own is for assistive
   technology only — two selects in one grid must not share an accessible name,
   which is why it is hidden rather than dropped. */
.fd-sg-perm[b-0dvk7uufr6]  .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.fd-sg-perm[b-0dvk7uufr6]  .fd-field { gap: 0.15rem; }

.fd-sg-perm[b-0dvk7uufr6]  .form-input {
    min-width: 8.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.fd-sg-perm[b-0dvk7uufr6]  .form-hint { font-size: 0.625rem; }

.fd-sg-actions[b-0dvk7uufr6] {
    white-space: nowrap;
    text-align: right;
}

.fd-sg-btn[b-0dvk7uufr6] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.fd-sg-btn + .fd-sg-btn[b-0dvk7uufr6] { margin-left: 0.25rem; }

.fd-sg-btn:hover[b-0dvk7uufr6] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.fd-sg-btn:focus-visible[b-0dvk7uufr6] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 22%, transparent);
}

.fd-sg-btn--danger:hover[b-0dvk7uufr6] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: color-mix(in srgb, var(--color-down) 70%, black);
    background: color-mix(in srgb, var(--color-down) 8%, white);
}

.fd-sg-add[b-0dvk7uufr6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .fd-sg-btn[b-0dvk7uufr6] { transition: none; }
}
/* /Components/Features/FormDesigner/Inspectors/ValidationRuleEditor.razor.rz.scp.css */
/* ── One rule's editor ──────────────────────────────────────────────────────
   Only what the per-type editors add: the date/token row, the regex tester's
   verdict, the roles list and the inline errors. Fields, labels and hints come
   from InspectorShell through the Edit* primitives.
   ────────────────────────────────────────────────────────────────────────── */

.fd-vr[b-2hkx9udg4x] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border);
}

.fd-vr-help[b-2hkx9udg4x] {
    margin: 0;
}

/* A date and a runtime token are alternatives, so they sit on one line with the
   "or" between them rather than reading as two separate settings. */
.fd-vr-daterow[b-2hkx9udg4x] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fd-vr-daterow input[type="date"][b-2hkx9udg4x] { flex: 0 0 auto; width: 10rem; }

.fd-vr-daterow input[type="text"][b-2hkx9udg4x] { flex: 1 1 8rem; min-width: 0; }

.fd-vr-or[b-2hkx9udg4x] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-vr-tokens[b-2hkx9udg4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.fd-vr-token[b-2hkx9udg4x] {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.6875rem;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.fd-vr-token:hover[b-2hkx9udg4x] {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* ── Verdicts ─────────────────────────────────────────────────────────────── */

.fd-vr-result[b-2hkx9udg4x] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.fd-vr-result--match[b-2hkx9udg4x] {
    border-color: color-mix(in srgb, var(--color-up, #15803d) 35%, white);
    background: color-mix(in srgb, var(--color-up, #15803d) 8%, white);
    color: color-mix(in srgb, var(--color-up, #15803d) 80%, black);
}

.fd-vr-result--nomatch[b-2hkx9udg4x],
.fd-vr-result--bad[b-2hkx9udg4x] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 78%, black);
}

.fd-vr-error[b-2hkx9udg4x] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-down) 8%, white);
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-down) 78%, black);
}

/* The chosen roles: names as chips, each removable. New ones come from the
   RolePicker's server-side search below them, never a full list. */
.fd-vr-chips[b-2hkx9udg4x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
}

.fd-vr-chip[b-2hkx9udg4x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.25rem 0.1rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
}

.fd-vr-chip-x[b-2hkx9udg4x] {
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0 0.25rem;
    border-radius: 999px;
}

.fd-vr-chip-x:hover[b-2hkx9udg4x],
.fd-vr-chip-x:focus-visible[b-2hkx9udg4x] {
    color: var(--color-brand);
}

.fd-vr-none[b-2hkx9udg4x] {
    margin: 0 0 0.4rem;
}

.fd-vr-type[b-2hkx9udg4x] {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* A rule this build saves but never evaluates. Same contract as an option the
   renderer does not read: it is honest about doing nothing, rather than letting
   an author believe the form is protected. */
.fd-vr-inert[b-2hkx9udg4x] {
    margin: 0 0 0.5rem;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid rgba(217, 119, 6, 0.5);
    background: rgba(217, 119, 6, 0.06);
    font-size: 0.75rem;
    color: var(--color-text-primary);
}
/* /Components/Features/FormDesigner/LibraryPicker.razor.rz.scp.css */
/* ── Library picker ────────────────────────────────────────────────────────
   The ConfirmDialog / NewFormDialog frame again (scoped CSS cannot be shared
   between components, so the frame rules are repeated rather than diverged),
   widened and given a fixed-height scrolling result list so the dialog does
   not resize as the search narrows it.
   ────────────────────────────────────────────────────────────────────────── */

.fd-pick-backdrop[b-me5qv2n2hi] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-pick[b-me5qv2n2hi] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-pick-head[b-me5qv2n2hi] {
    padding: 1.25rem 1.5rem 0.25rem;
}

.fd-pick-title[b-me5qv2n2hi] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-pick-hint[b-me5qv2n2hi] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-pick-search[b-me5qv2n2hi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1.5rem 0.75rem;
}

.fd-pick-search .form-label[b-me5qv2n2hi] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Caller-supplied filters (scope toggles, kind selects) beside the search. */
.fd-pick-filters[b-me5qv2n2hi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-pick-filters[b-me5qv2n2hi]  label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.fd-pick-body[b-me5qv2n2hi] {
    flex: 1 1 auto;
    min-height: 6rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0 0.75rem 0.5rem;
}

.fd-pick-status[b-me5qv2n2hi] {
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-pick-status--error[b-me5qv2n2hi] { color: var(--color-down); }

.fd-pick-list[b-me5qv2n2hi] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Grouped rows: a quiet, sticky category heading over each run, so a long
   library still says which family the row under the cursor belongs to. */
.fd-pick-group[b-me5qv2n2hi] { display: block; }

.fd-pick-heading[b-me5qv2n2hi] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: 0.375rem 0.625rem 0.25rem;
    background: var(--color-surface);
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-pick-group + .fd-pick-group .fd-pick-heading[b-me5qv2n2hi] { margin-top: 0.25rem; }

.fd-pick-sublist[b-me5qv2n2hi] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-pick-item-icon[b-me5qv2n2hi] {
    display: inline-flex;
    flex: none;
    color: var(--color-text-secondary);
}

.fd-pick-item[b-me5qv2n2hi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.fd-pick-item:hover[b-me5qv2n2hi] { background: var(--color-surface-raised); }

.fd-pick-item--active[b-me5qv2n2hi],
.fd-pick-item:focus-visible[b-me5qv2n2hi] {
    outline: none;
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
    border-color: var(--color-brand-teal);
}

.fd-pick-item-main[b-me5qv2n2hi] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fd-pick-item-name[b-me5qv2n2hi] {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-pick-item-sub[b-me5qv2n2hi] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-pick-item-id[b-me5qv2n2hi] {
    flex: none;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-pick-actions[b-me5qv2n2hi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-pick-count[b-me5qv2n2hi] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .fd-pick-backdrop[b-me5qv2n2hi] { backdrop-filter: none; }
    .fd-pick-item[b-me5qv2n2hi] { transition: none; }
}
/* /Components/Features/FormDesigner/NewFormDialog.razor.rz.scp.css */
/* ── New-form dialog ───────────────────────────────────────────────────────
   A small centred modal over a translucent backdrop. Fields reuse the global
   form-* classes; only the frame, stacking and the in-dialog alert live here.
   ────────────────────────────────────────────────────────────────────────── */

.fd-dialog-backdrop[b-nkw0rf6uxp] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-dialog[b-nkw0rf6uxp] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-dialog-form[b-nkw0rf6uxp] {
    display: flex;
    flex-direction: column;
}

.fd-dialog-head[b-nkw0rf6uxp] {
    padding: 1.25rem 1.5rem 0.75rem;
}

.fd-dialog-title[b-nkw0rf6uxp] {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-dialog-sub[b-nkw0rf6uxp] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-dialog-body[b-nkw0rf6uxp] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.5rem 1.5rem 1rem;
}

.fd-dialog-field[b-nkw0rf6uxp] {
    display: flex;
    flex-direction: column;
}

.fd-dialog-textarea[b-nkw0rf6uxp] {
    resize: vertical;
    min-height: 3.5rem;
}

.fd-dialog-actions[b-nkw0rf6uxp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* In-dialog failure: the report's message, plan errors and failed blocks. */
.fd-dialog-alert[b-nkw0rf6uxp] {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 6%, white);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-dialog-alert-message[b-nkw0rf6uxp] {
    margin: 0;
    font-weight: 500;
}

.fd-dialog-alert-message + .fd-dialog-alert-message[b-nkw0rf6uxp] { margin-top: 0.5rem; }

.fd-dialog-issues[b-nkw0rf6uxp] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.fd-dialog-issues li[b-nkw0rf6uxp] { margin: 0.2rem 0; }

.fd-dialog-code[b-nkw0rf6uxp] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
}

.fd-dialog-mark[b-nkw0rf6uxp] {
    margin-right: 0.35rem;
    font-weight: 700;
    color: var(--color-down);
}

.fd-dialog-block-message[b-nkw0rf6uxp] { color: var(--color-text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .fd-dialog-backdrop[b-nkw0rf6uxp] { backdrop-filter: none; }
}

/* F14.5: the optional brief. Taller than a single-line field because a useful one is a
   sentence or two, and the global .form-input is content-box, so height rather than
   width does the sizing here. */
.fd-newform-brief[b-nkw0rf6uxp] {
    min-height: 4.5rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.fd-dialog-help[b-nkw0rf6uxp] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
/* /Components/Features/FormDesigner/NewMasterQuestionDialog.razor.rz.scp.css */
/* ── New master question dialog ────────────────────────────────────────────
   The NewFormDialog frame once more (scoped CSS cannot be shared between
   components, so the frame rules are repeated rather than diverged): centred
   card over a translucent backdrop, raised action bar, fields on the global
   form-* classes. Only the renderer warning under the type field is new.
   ────────────────────────────────────────────────────────────────────────── */

.fd-dialog-backdrop[b-eufkvdzhmg] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-dialog[b-eufkvdzhmg] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-dialog-form[b-eufkvdzhmg] {
    display: flex;
    flex-direction: column;
}

.fd-dialog-head[b-eufkvdzhmg] {
    padding: 1.25rem 1.5rem 0.75rem;
}

.fd-dialog-title[b-eufkvdzhmg] {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-dialog-sub[b-eufkvdzhmg] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-dialog-body[b-eufkvdzhmg] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.5rem 1.5rem 1rem;
}

.fd-dialog-field[b-eufkvdzhmg] {
    display: flex;
    flex-direction: column;
}

.fd-dialog-textarea[b-eufkvdzhmg] {
    resize: vertical;
    min-height: 3.5rem;
}

.fd-dialog-actions[b-eufkvdzhmg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}


/* Choosing a type the web form cannot draw is allowed — the library has to be
   able to hold one — but it is never silent. */
.fd-dialog-warn[b-eufkvdzhmg] { color: color-mix(in srgb, var(--color-degraded) 80%, #78350f); }

@media (prefers-reduced-motion: reduce) {
    .fd-dialog-backdrop[b-eufkvdzhmg] { backdrop-filter: none; }
}
/* /Components/Features/FormDesigner/OutlineAddMenu.razor.rz.scp.css */
/* ── Outline row "+" menu ──────────────────────────────────────────────────
   A quiet glyph that only gains presence on hover, focus or while its menu is
   open — the outline is a scanning surface, and a row of loud buttons would
   compete with the structure it exists to show.
   ────────────────────────────────────────────────────────────────────────── */

.fd-menu-wrap[b-tb1rhyqz54] {
    position: relative;
    flex: none;
    display: inline-flex;
}

.fd-menu-btn[b-tb1rhyqz54] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.fd-menu-btn:hover[b-tb1rhyqz54] {
    opacity: 1;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.fd-menu-btn:focus-visible[b-tb1rhyqz54] {
    outline: none;
    opacity: 1;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.fd-menu-btn--on[b-tb1rhyqz54] {
    opacity: 1;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* Ghost variant: the same menu on the canvas, where it has to read as an
   invitation rather than a glyph that appears on hover. */
.fd-menu-btn--ghost[b-tb1rhyqz54] {
    width: auto;
    height: auto;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    opacity: 1;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
}

.fd-menu-btn--ghost:hover[b-tb1rhyqz54] {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand-teal) 55%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 6%, white);
}

.fd-menu-btn--ghost:focus-visible[b-tb1rhyqz54] {
    border-style: solid;
}

.fd-menu[b-tb1rhyqz54] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 12.5rem;
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

/* The ghost button sits at the start of its row, so its menu does too. */
.fd-menu--start[b-tb1rhyqz54] {
    right: auto;
    left: 0;
}

.fd-menu-item[b-tb1rhyqz54] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fd-menu-item:hover[b-tb1rhyqz54] { background: var(--color-surface-raised); }

.fd-menu-item:focus-visible[b-tb1rhyqz54] {
    outline: none;
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-menu-item-label[b-tb1rhyqz54] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fd-menu-item-hint[b-tb1rhyqz54] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .fd-menu-btn[b-tb1rhyqz54] { transition: none; }
}

/* Overflow variant: the same menu as a toolbar "…". Always visible (a toolbar
   affordance that hides until hover is a toolbar nobody finds) and sized to sit
   beside the toolbar's buttons. */
.fd-menu-btn--more[b-tb1rhyqz54] {
    width: 1.9rem;
    height: 1.9rem;
    border-color: var(--color-border);
    background: var(--color-surface);
    opacity: 1;
}

.fd-menu-btn--more:hover[b-tb1rhyqz54] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}
/* /Components/Features/FormDesigner/Preview/FormPreview.razor.rz.scp.css */
/* F10.2 — the in-portal preview. Deliberately plain: this is meant to read as a
   form, not as the designer, so there is no card chrome, no accent borders and
   no badges. Prefix `fp-`. */

.fp[b-930t11m7gf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 46rem;
    padding: 1.5rem 0;
    color: var(--color-text-primary);
}

.fp-note[b-930t11m7gf] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--color-border);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fp-note code[b-930t11m7gf] { font-size: 0.75rem; }

/* ── Sections and tabs ─────────────────────────────────────────────────── */

.fp-tabs[b-930t11m7gf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.fp-tab[b-930t11m7gf] {
    padding: 0.45rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fp-tab:hover[b-930t11m7gf] { color: var(--color-text-primary); }

.fp-tab--on[b-930t11m7gf] {
    border-bottom-color: var(--color-brand-teal);
    color: var(--color-text-primary);
    font-weight: 600;
}

.fp-section[b-930t11m7gf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fp-section-name[b-930t11m7gf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fp-section-note[b-930t11m7gf] {
    margin: -0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Rows ──────────────────────────────────────────────────────────────── */

.fp-row[b-930t11m7gf] { display: flex; flex-direction: column; gap: 1rem; }

/* Questions sharing a row index sit side by side, as the runtime lays them out. */
.fp-row--multi[b-930t11m7gf] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.fp-row--multi > .fp-q[b-930t11m7gf] { flex: 1 1 14rem; min-width: 0; }

/* ── Questions ─────────────────────────────────────────────────────────── */

.fp-q[b-930t11m7gf] { display: flex; flex-direction: column; gap: 0.3rem; }

/* HalfSplit: label beside the control, as the runtime renders that view type. */
.fp--split .fp-q[b-930t11m7gf] {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    align-items: start;
    column-gap: 1rem;
}

.fp--split .fp-q > .fp-label[b-930t11m7gf] { padding-top: 0.4rem; }
.fp--split .fp-help[b-930t11m7gf],
.fp--split .fp-error[b-930t11m7gf],
.fp--split .fp-runtime[b-930t11m7gf] { grid-column: 2; }

.fp-label[b-930t11m7gf] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fp-req[b-930t11m7gf] { margin-left: 0.15rem; color: var(--color-down, #b91c1c); }

.fp-help[b-930t11m7gf],
.fp-hint[b-930t11m7gf] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fp-error[b-930t11m7gf] {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

/* Not a pass and not a failure — the engine could not judge this one here. */
.fp-runtime[b-930t11m7gf] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-text-secondary);
}

.fp-unsupported[b-930t11m7gf] {
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Controls ──────────────────────────────────────────────────────────── */

.fp-input[b-930t11m7gf] {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.fp-input:focus-visible[b-930t11m7gf] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.fp-input:disabled[b-930t11m7gf] {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.fp-q--invalid .fp-input[b-930t11m7gf] { border-color: color-mix(in srgb, var(--color-down) 55%, white); }

.fp-textarea[b-930t11m7gf] { resize: vertical; min-height: 3.5rem; }
.fp-input--num[b-930t11m7gf] { max-width: 12rem; }
.fp-select[b-930t11m7gf] { min-height: 2.1rem; }

.fp-currency[b-930t11m7gf] { display: inline-flex; align-items: center; gap: 0.35rem; }
.fp-currency-symbol[b-930t11m7gf] { font-size: 0.875rem; color: var(--color-text-secondary); }

.fp-choice[b-930t11m7gf] { display: flex; flex-direction: column; gap: 0.35rem; }
.fp-choice--inline[b-930t11m7gf] { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1rem; }

.fp-radio[b-930t11m7gf],
.fp-check[b-930t11m7gf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.fp-radio input:disabled + span[b-930t11m7gf],
.fp-check input:disabled + span[b-930t11m7gf] { color: var(--color-text-secondary); cursor: not-allowed; }

.fp-static[b-930t11m7gf] { margin: 0; font-size: 0.875rem; }

.fp-rule[b-930t11m7gf] {
    width: 100%;
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.fp-btn[b-930t11m7gf] {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.875rem;
    cursor: not-allowed;
    color: var(--color-text-secondary);
}

.fp-upload[b-930t11m7gf] { display: flex; flex-direction: column; gap: 0.25rem; }
.fp-file[b-930t11m7gf] { font-size: 0.8125rem; }

.fp-rating[b-930t11m7gf] { display: inline-flex; gap: 0.15rem; }

.fp-star[b-930t11m7gf] {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-border);
    cursor: pointer;
}

.fp-star--on[b-930t11m7gf] { color: #d97706; }
.fp-star input:disabled[b-930t11m7gf] { cursor: not-allowed; }

/* ── Groups ────────────────────────────────────────────────────────────── */

.fp-group[b-930t11m7gf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.fp-group-name[b-930t11m7gf] {
    padding: 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ── Empty states ──────────────────────────────────────────────────────── */

.fp-empty[b-930t11m7gf] {
    margin: 0;
    padding: 1.25rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.fp-empty--section[b-930t11m7gf] { padding: 0.5rem 0; font-style: italic; }

/* Screen-reader-only text — the rating's numeric value, for one. */
.fp-sr[b-930t11m7gf] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── F10.3: the author's own controls ──────────────────────────────────────
   Deliberately not styled like the form. These belong to the person designing
   it, and must not read as fields the person filling it in would see. */

.fp-tools[b-930t11m7gf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
    font-size: 0.8125rem;
}

.fp-tool[b-930t11m7gf] { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.fp-tool-btn[b-930t11m7gf] {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.fp-tool-btn:hover:not(:disabled)[b-930t11m7gf] { border-color: color-mix(in srgb, var(--color-brand-teal) 50%, white); }
.fp-tool-btn:disabled[b-930t11m7gf] { opacity: 0.55; cursor: not-allowed; }
.fp-tool-note[b-930t11m7gf] { color: var(--color-text-secondary); }

/* A question the author has revealed: never seen by the person filling it in. */
.fp-q--hidden[b-930t11m7gf] { opacity: 0.75; }

.fp-hidden-mark[b-930t11m7gf] {
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ── Repeating groups ─────────────────────────────────────────────────── */

.fp-group--rows[b-930t11m7gf] { gap: 0.75rem; }

.fp-grid-wrap[b-930t11m7gf] { overflow-x: auto; }

.fp-grid[b-930t11m7gf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fp-grid th[b-930t11m7gf],
.fp-grid td[b-930t11m7gf] {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.fp-grid th[b-930t11m7gf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* A cell's control fills its column; the label lives in the header. */
.fp-grid .fp-q[b-930t11m7gf] { gap: 0.15rem; }
.fp-grid .fp-input[b-930t11m7gf] { min-width: 7rem; }

.fp-total[b-930t11m7gf] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid var(--color-border);
}

.fp-total--count[b-930t11m7gf] { font-weight: 500; color: var(--color-text-secondary); }

.fp-rowactions[b-930t11m7gf] { width: 1%; white-space: nowrap; }

.fp-rowbtn[b-930t11m7gf] {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.fp-rowbtn:hover[b-930t11m7gf] { color: var(--color-text-primary); border-color: color-mix(in srgb, var(--color-down) 40%, white); }

.fp-addbtn[b-930t11m7gf] {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.fp-addbtn:hover[b-930t11m7gf] { border-color: color-mix(in srgb, var(--color-brand-teal) 50%, white); }

.fp-groupactions[b-930t11m7gf] { display: flex; gap: 0.5rem; }

/* Repeater entries: the same rows, stacked. */
.fp-entry[b-930t11m7gf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.fp-entry-head[b-930t11m7gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.fp-entry-n[b-930t11m7gf] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.fp-totals[b-930t11m7gf] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0.2rem 1rem;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 2px solid var(--color-border);
    font-size: 0.8125rem;
}

.fp-totals dt[b-930t11m7gf] { color: var(--color-text-secondary); }
.fp-totals dd[b-930t11m7gf] { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A group total pushed into a question outside the group. */
.fp-copysums[b-930t11m7gf] { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.75rem; color: var(--color-text-secondary); }
.fp-copysum--stuck[b-930t11m7gf] { color: color-mix(in srgb, var(--color-down) 70%, black); }
/* /Components/Features/FormDesigner/RemoveGroupDialog.razor.rz.scp.css */
/* ── Remove-group dialog ───────────────────────────────────────────────────
   The remove-section dialog's frame again, verbatim: scoped CSS cannot be
   shared between components, and the two dialogs are deliberately the same
   object at two levels of the tree — the reversible action next to Cancel, the
   irreversible one pushed to the far right.
   ────────────────────────────────────────────────────────────────────────── */

.fd-rm-backdrop[b-yu22h2ntvl] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-rm[b-yu22h2ntvl] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-rm-head[b-yu22h2ntvl] { padding: 1.25rem 1.5rem 0.5rem; }

.fd-rm-title[b-yu22h2ntvl] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-rm-body[b-yu22h2ntvl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 1.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-rm-line[b-yu22h2ntvl] { margin: 0; }
.fd-rm-muted[b-yu22h2ntvl] { color: var(--color-text-secondary); }

.fd-rm-warn[b-yu22h2ntvl] {
    padding: 0.5rem 0.625rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, white);
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-rm-forms[b-yu22h2ntvl] {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 9rem;
    overflow-y: auto;
    font-size: 0.8125rem;
}

.fd-rm-forms li[b-yu22h2ntvl] { margin: 0.15rem 0; }

.fd-rm-forms a[b-yu22h2ntvl] { color: var(--color-brand); }

.fd-rm-formid[b-yu22h2ntvl] {
    margin-left: 0.35rem;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-rm-self[b-yu22h2ntvl] { color: var(--color-text-primary); font-weight: 600; }

.fd-rm-actions[b-yu22h2ntvl] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-rm-actions .btn-secondary[b-yu22h2ntvl] { margin-right: auto; }

.fd-rm-nuke:disabled[b-yu22h2ntvl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fd-rm-blocked[b-yu22h2ntvl] {
    margin: 0;
    padding: 0 1.5rem 1rem;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-rm-ack[b-yu22h2ntvl] {
    padding: 0 1.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-rm-ack label[b-yu22h2ntvl] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.fd-rm-ack input[b-yu22h2ntvl] { margin-top: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
    .fd-rm-backdrop[b-yu22h2ntvl] { backdrop-filter: none; }
}
/* /Components/Features/FormDesigner/RemoveSectionDialog.razor.rz.scp.css */
/* ── Remove-section dialog ─────────────────────────────────────────────────
   The shared dialog frame once more (scoped CSS cannot be shared between
   components), with an action bar that carries two destructive buttons: the
   reversible one sits next to Cancel, the irreversible one is pushed to the
   far right so they are never a slip apart.
   ────────────────────────────────────────────────────────────────────────── */

.fd-rm-backdrop[b-bc30icqf88] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-rm[b-bc30icqf88] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-rm-head[b-bc30icqf88] { padding: 1.25rem 1.5rem 0.5rem; }

.fd-rm-title[b-bc30icqf88] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-rm-body[b-bc30icqf88] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 1.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-rm-line[b-bc30icqf88] { margin: 0; }
.fd-rm-muted[b-bc30icqf88] { color: var(--color-text-secondary); }

.fd-rm-warn[b-bc30icqf88] {
    padding: 0.5rem 0.625rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 45%, white);
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-rm-forms[b-bc30icqf88] {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 9rem;
    overflow-y: auto;
    font-size: 0.8125rem;
}

.fd-rm-forms li[b-bc30icqf88] { margin: 0.15rem 0; }

.fd-rm-forms a[b-bc30icqf88] { color: var(--color-brand); }

.fd-rm-formid[b-bc30icqf88] {
    margin-left: 0.35rem;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fd-rm-self[b-bc30icqf88] { color: var(--color-text-primary); font-weight: 600; }

.fd-rm-actions[b-bc30icqf88] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-rm-actions .btn-secondary[b-bc30icqf88] { margin-right: auto; }

.fd-rm-nuke:disabled[b-bc30icqf88] {
    opacity: 0.5;
    cursor: not-allowed;
}

.fd-rm-blocked[b-bc30icqf88] {
    margin: 0;
    padding: 0 1.5rem 1rem;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-rm-ack[b-bc30icqf88] {
    padding: 0 1.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-rm-ack label[b-bc30icqf88] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.fd-rm-ack input[b-bc30icqf88] { margin-top: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
    .fd-rm-backdrop[b-bc30icqf88] { backdrop-filter: none; }
}
/* /Components/Features/FormDesigner/RuntimeCheckPanel.razor.rz.scp.css */
/* ── Runtime check panel (F7.3) ────────────────────────────────────────────
   A banner-shaped card under the toolbar, tinted by outcome from the §3.4
   paired palette. Every status colour is carried by a badge or a sentence as
   well as the tint, so the panel does not depend on colour alone.
   ────────────────────────────────────────────────────────────────────────── */

.fd-rc[b-cye2ydakyb] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.fd-rc--ok[b-cye2ydakyb]   { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }
.fd-rc--warn[b-cye2ydakyb] { border-color: color-mix(in srgb, var(--color-degraded) 45%, white); }
.fd-rc--bad[b-cye2ydakyb]  { border-color: color-mix(in srgb, var(--color-down) 35%, white); }

/* ── Head ────────────────────────────────────────────────────────────────── */

.fd-rc-head[b-cye2ydakyb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fd-rc-check[b-cye2ydakyb] { flex: none; }

.fd-rc-spacer[b-cye2ydakyb] { flex: 1 1 auto; }

.fd-rc-status[b-cye2ydakyb] {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fd-rc-open[b-cye2ydakyb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
    white-space: nowrap;
}

.fd-rc-open:hover[b-cye2ydakyb] { text-decoration: underline; }

.fd-rc-open:focus-visible[b-cye2ydakyb] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── The four states ─────────────────────────────────────────────────────── */

.fd-rc-idle[b-cye2ydakyb] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-rc-state[b-cye2ydakyb] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.fd-rc-state--idle[b-cye2ydakyb] { border-left-color: var(--color-border); }

.fd-rc-state--warn[b-cye2ydakyb] {
    border-color: color-mix(in srgb, var(--color-degraded) 40%, white);
    border-left-color: var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
}

.fd-rc-state--bad[b-cye2ydakyb] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 7%, white);
}

.fd-rc-headline[b-cye2ydakyb] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-rc-detail[b-cye2ydakyb] {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-rc-detail code[b-cye2ydakyb] {
    padding: 0 0.2rem;
    border-radius: 3px;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9em;
}

.fd-rc-fix[b-cye2ydakyb] { margin-top: 0.5rem; }

/* ── Facts ───────────────────────────────────────────────────────────────── */

.fd-rc-facts[b-cye2ydakyb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}

.fd-rc-facts dt[b-cye2ydakyb] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.fd-rc-facts dd[b-cye2ydakyb] {
    margin: 0.1rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-rc-facts dd.fd-rc-num[b-cye2ydakyb] { font-variant-numeric: tabular-nums; }

.fd-rc-drift[b-cye2ydakyb] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

/* ── Disclosure lists ────────────────────────────────────────────────────── */

.fd-rc-lists[b-cye2ydakyb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.fd-rc-list[b-cye2ydakyb] { font-size: 0.75rem; }

.fd-rc-list > summary[b-cye2ydakyb] {
    cursor: pointer;
    color: var(--color-brand);
    font-weight: 600;
    list-style: none;
}

.fd-rc-list > summary[b-cye2ydakyb]::-webkit-details-marker { display: none; }
.fd-rc-list > summary[b-cye2ydakyb]::before { content: "▸ "; }
.fd-rc-list[open] > summary[b-cye2ydakyb]::before { content: "▾ "; }

.fd-rc-list > summary:focus-visible[b-cye2ydakyb] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

.fd-rc-list[open][b-cye2ydakyb] { flex-basis: 100%; }

.fd-rc-ul[b-cye2ydakyb] {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--color-text-secondary);
}

.fd-rc-ul code[b-cye2ydakyb] {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--color-text-primary);
}

.fd-rc-selname[b-cye2ydakyb] { font-weight: 600; color: var(--color-text-primary); }

.fd-rc-sample[b-cye2ydakyb] { color: var(--color-text-secondary); }
/* /Components/Features/FormDesigner/TriggerEditor.razor.rz.scp.css */
/* ── Trigger editor ────────────────────────────────────────────────────────
   The RoleMemberDrawer frame (fixed right-hand panel over a translucent
   overlay), plus an inline variant for the trigger library page's detail pane.

   The inspector vocabulary this editor renders — fd-sec, fd-field, fd-chip,
   fd-banner … — is published by InspectorShell under `.fd-insp ::deep`, and by
   the designer shell under `.fd-shell ::deep`. This editor is opened from both
   and from a page that is inside neither, so it republishes the rules it uses
   under its own root rather than depending on an ancestor. Scoped CSS cannot be
   shared between components; the dialogs in this folder repeat their frame for
   the same reason.
   ────────────────────────────────────────────────────────────────────────── */

.fd-te-overlay[b-b4ew2u4bv6] {
    position: fixed;
    inset: var(--top-bar-height, 56px) 0 0 0;
    z-index: 199;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fd-te-overlay--on[b-b4ew2u4bv6] {
    opacity: 1;
    pointer-events: auto;
}

.fd-te--drawer[b-b4ew2u4bv6] {
    /* Opens from the inspector rail, which is position: sticky and so a
       stacking context of its own: nothing inside it can paint over the app's
       top bar whatever its z-index. So the drawer and its overlay start
       below the bar instead of under it — the drawer's own header (title,
       Test…, close) was unreachable at every width. */
    position: fixed;
    top: var(--top-bar-height, 56px);
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(46rem, 100vw);
    height: calc(100dvh - var(--top-bar-height, 56px));
    background: var(--color-surface);
    box-shadow: -8px 0 28px rgba(7, 70, 132, 0.14);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.fd-te--drawer.fd-te--on[b-b4ew2u4bv6] { transform: translateX(0); }

.fd-te--drawer:focus[b-b4ew2u4bv6] { outline: none; }

.fd-te--inline[b-b4ew2u4bv6] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Frame ───────────────────────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-heading {
    flex: 1;
    min-width: 0;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-test {
    flex-shrink: 0;
    align-self: center;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-close:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

/* A flex child defaults to min-width:auto, so one long nowrap token — a
   stored JSON string, a unique name — widened the body and put a horizontal
   scrollbar under every section. */
.fd-te[b-b4ew2u4bv6]  .fd-te-body > * { min-width: 0; }

/* ── Tabs: the row, its rows, and (triggers) the live fire panel ──────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.5rem 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem 0.55rem;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-tab:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-surface) 60%, var(--color-surface-raised));
}

.fd-te[b-b4ew2u4bv6]  .fd-te-tab--on {
    color: var(--color-text-primary);
    font-weight: 600;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-bottom-color: var(--color-brand-teal);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-tab:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Two columns of fields where there is room for them ─────────────────
   The drawer is 46rem and the library page's middle column is wider, so
   the short fields pair up; the first field of a group (the name) and any
   multi-line field keep the full width. */

/* Qualified with the body so it outranks the flex default by specificity,
   not by order: the bundled stylesheet does not preserve this file's order. */
@media (min-width: 64rem) {
    .fd-te[b-b4ew2u4bv6]  .fd-te-body .fd-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1.25rem;
        align-items: start;
    }

    .fd-te[b-b4ew2u4bv6]  .fd-te-body .fd-fields > .fd-field:first-child,
    .fd-te[b-b4ew2u4bv6]  .fd-te-body .fd-fields > .fd-field:has(textarea) {
        grid-column: 1 / -1;
    }
}

.fd-te[b-b4ew2u4bv6]  .fd-te-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    flex-shrink: 0;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* The note is the flexible part of the footer; the buttons never wrap. */
.fd-te[b-b4ew2u4bv6]  .fd-te-actions > button {
    flex: none;
    white-space: nowrap;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-applied {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-healthy) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-healthy) 8%, white);
    color: color-mix(in srgb, var(--color-healthy) 75%, black);
    font-size: 0.85rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-error {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-down) 8%, white);
    color: color-mix(in srgb, var(--color-down) 75%, black);
    font-size: 0.85rem;
}

/* ── Fields, chips and the rest of the shared inspector vocabulary ───────── */

.fd-te[b-b4ew2u4bv6]  .fd-sec {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-sec-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fd-te[b-b4ew2u4bv6]  .fd-field .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-field .form-input {
    width: 100%;
    box-sizing: border-box; /* the global input is content-box, so 100% + padding overflowed its column */
}

.fd-te[b-b4ew2u4bv6]  .fd-field .form-hint,
.fd-te[b-b4ew2u4bv6]  .fd-field .form-error {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-field .form-error { color: var(--color-down); }

.fd-te[b-b4ew2u4bv6]  .fd-field-textarea { resize: vertical; }

.fd-te[b-b4ew2u4bv6]  .fd-field-number { max-width: 11rem; }

.fd-te[b-b4ew2u4bv6]  .fd-field-select { appearance: auto; }

.fd-te[b-b4ew2u4bv6]  .fd-field--toggle { gap: 0.3rem; }

.fd-te[b-b4ew2u4bv6]  .fd-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.fd-te[b-b4ew2u4bv6]  .fd-switch-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-brand);
}

.fd-te[b-b4ew2u4bv6]  .fd-switch-track { display: none; }

.fd-te[b-b4ew2u4bv6]  .fd-switch-state {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-te[b-b4ew2u4bv6]  .fd-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-empty {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-chip-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fd-te[b-b4ew2u4bv6]  .fd-chip--t {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-te[b-b4ew2u4bv6]  .fd-chip--warn {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-te[b-b4ew2u4bv6]  .fd-chip--quiet {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.fd-te[b-b4ew2u4bv6]  .fd-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.fd-te[b-b4ew2u4bv6]  .fd-badge--on {
    background: color-mix(in srgb, var(--color-healthy) 12%, white);
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
    border-color: color-mix(in srgb, var(--color-healthy) 30%, white);
}

.fd-te[b-b4ew2u4bv6]  .fd-badge--warn {
    background: color-mix(in srgb, var(--color-degraded) 15%, white);
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 35%, white);
}

.fd-te[b-b4ew2u4bv6]  .fd-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fd-te[b-b4ew2u4bv6]  .fd-banner svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.1rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-banner--warn {
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, white);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

.fd-te[b-b4ew2u4bv6]  .fd-banner code {
    font-size: 0.75rem;
    white-space: nowrap;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-fix { flex: none; }

.fd-te[b-b4ew2u4bv6]  .fd-details {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-details summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    list-style: none;
}

.fd-te[b-b4ew2u4bv6]  .fd-details summary::-webkit-details-marker { display: none; }
.fd-te[b-b4ew2u4bv6]  .fd-details summary::before { content: "▸ "; }
.fd-te[b-b4ew2u4bv6]  .fd-details[open] summary::before { content: "▾ "; }
.fd-te[b-b4ew2u4bv6]  .fd-details[open] { padding-bottom: 0.5rem; }
.fd-te[b-b4ew2u4bv6]  .fd-details > *:not(summary) { margin-top: 0.5rem; }

.fd-te[b-b4ew2u4bv6]  .fd-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-value-chip {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    color: var(--color-text-primary);
}

.fd-te[b-b4ew2u4bv6]  code {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Type / action badge rows ────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-badged {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-badged > .fd-field { flex: 1 1 auto; }

.fd-te[b-b4ew2u4bv6]  .fd-te-badged > .fd-chip { margin-bottom: 0.35rem; }

/* ── Segmented choice (row source, value mode) ───────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-seg-btn {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-seg-btn:hover:not(:disabled) { background: var(--color-surface-raised); }

.fd-te[b-b4ew2u4bv6]  .fd-te-seg-btn--on {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    font-weight: 600;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-seg-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Rules strip ─────────────────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-rulelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-rule {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-rule-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

/* ── Attribute rows ──────────────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-attrs-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-attrs-head .fd-sec-title { flex: 0 0 auto; }

.fd-te[b-b4ew2u4bv6]  .fd-te-addrow { margin-left: auto; }

.fd-te[b-b4ew2u4bv6]  .fd-te-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    overflow: hidden;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-rowbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-rowbtn:hover:not(:disabled) {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-rowbtn--danger:hover:not(:disabled) { color: var(--color-down); }

.fd-te[b-b4ew2u4bv6]  .fd-te-rowbtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.7rem 0.75rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-matches { margin-top: -0.25rem; }

/* ── Value picker ────────────────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-pick-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Save report ─────────────────────────────────────────────────────────── */

.fd-te[b-b4ew2u4bv6]  .fd-te-report {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-report--ok { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }

.fd-te[b-b4ew2u4bv6]  .fd-te-report--bad { border-color: color-mix(in srgb, var(--color-degraded) 45%, white); }

.fd-te[b-b4ew2u4bv6]  .fd-te-report-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-report-msg {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-report-dismiss {
    flex: none;
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-report-issue {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-report-issue--warn { color: color-mix(in srgb, var(--color-degraded) 65%, black); }

.fd-te[b-b4ew2u4bv6]  .fd-te-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-block {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-te[b-b4ew2u4bv6]  .fd-te-block-mark { flex: none; }

.fd-te[b-b4ew2u4bv6]  .fd-te-block--ok .fd-te-block-mark { color: var(--color-healthy); }

.fd-te[b-b4ew2u4bv6]  .fd-te-block--fail .fd-te-block-mark { color: var(--color-down); }

.fd-te[b-b4ew2u4bv6]  .fd-te-block-text {
    display: flex;
    flex-direction: column;
}

.fd-te[b-b4ew2u4bv6]  .fd-te-block-msg { color: var(--color-down); }

/* ── Motion / narrow screens ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fd-te-overlay[b-b4ew2u4bv6] { backdrop-filter: none; transition: none; }
    .fd-te--drawer[b-b4ew2u4bv6] { transition: none; }
    .fd-te[b-b4ew2u4bv6]  .fd-te-seg-btn { transition: none; }
}

@media (max-width: 48rem) {
    .fd-te--drawer[b-b4ew2u4bv6] { width: 100vw; }
}
/* /Components/Features/FormDesigner/TriggerFirePanel.razor.rz.scp.css */
/* ── Fire trigger panel ─────────────────────────────────────────────────────
   Its own elements only: the head row, the field stack, the results table.
   Everything it sits in — fd-sec, fd-field, fd-hint, fd-empty, fd-banner,
   fd-details, fd-chip, fd-values — is published by TriggerEditor under
   `.fd-te ::deep`, which is the only place this panel is rendered (the trigger
   library page reaches it through the same editor, inline). Tokens only (§3.4).
   ────────────────────────────────────────────────────────────────────────── */

.fd-tf[b-f63d9p9n9j] {
    padding-top: 0.125rem;
}

/* Title and the run button on one line, the way the data-source panel does it. */
.fd-tf-head[b-f63d9p9n9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.fd-tf-run[b-f63d9p9n9j] { flex: none; }

/* One field per row; the same rhythm as the attribute rows above. */
.fd-tf-fields[b-f63d9p9n9j] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* The four context ids are short and belong together, so they wrap in pairs
   rather than each taking a full row of an already tall drawer. */
.fd-tf-context[b-f63d9p9n9j] {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
}

.fd-tf-context > *[b-f63d9p9n9j] {
    flex: 1 1 9rem;
    min-width: 8rem;
}

/* A row the run cannot supply a value for: shown as text, not a dead input,
   because a disabled box invites the author to wonder what would happen. */
.fd-tf-fixed[b-f63d9p9n9j] {
    display: inline-block;
    padding: 0.1rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.fd-tf-count[b-f63d9p9n9j] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

/* The same figure inside a cell: a plain line, not the status row's flex. */
.fd-tf-selcount[b-f63d9p9n9j] {
    display: block;
    font-variant-numeric: tabular-nums;
}

/* The results: bounded height with its own scroll, so a trigger with many
   outputs cannot push the editor's footer off screen. */
.fd-tf-grid[b-f63d9p9n9j] {
    max-height: 17rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    margin-top: 0.5rem;
}

.fd-tf-tbl[b-f63d9p9n9j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.fd-tf-tbl th[b-f63d9p9n9j],
.fd-tf-tbl td[b-f63d9p9n9j] {
    padding: 0.4rem 0.55rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

/* Sticky headings survive the scroll. */
.fd-tf-tbl thead th[b-f63d9p9n9j] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface-raised);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-tf-tbl tbody tr:last-child td[b-f63d9p9n9j] { border-bottom: 0; }

.fd-tf-tbl tbody tr:hover td[b-f63d9p9n9j] { background: var(--color-surface-raised); }

.fd-tf-name[b-f63d9p9n9j] { display: block; }

.fd-tf-sub[b-f63d9p9n9j] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

/* Values are data, not prose: monospace, so a stray space is visible. */
.fd-tf-val[b-f63d9p9n9j] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.fd-tf-none[b-f63d9p9n9j] { color: var(--color-text-secondary); }

.fd-tf-sel[b-f63d9p9n9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

/* The reply verbatim, under a <details> — the same affordance the rest of the
   editor offers. Bounded, because a selection list can be thousands of lines. */
.fd-tf-raw[b-f63d9p9n9j] {
    max-height: 14rem;
    overflow: auto;
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}
/* /Components/Features/FormDesigner/TriggerTestDialog.razor.rz.scp.css */
/* ── Test-trigger dialog ───────────────────────────────────────────────────
   The ConfirmDialog frame (scoped CSS cannot be shared, so the frame rules are
   repeated rather than diverged), a size up: wide enough for a working table,
   tall enough to scroll one. Sits above the trigger editor's drawer (z 200).

   The inspector vocabulary it uses — fd-field, fd-chip, fd-banner, fd-hint,
   fd-empty — is republished here under its own root, because the dialog is
   rendered from the editor (inside .fd-te) and from the question's Triggers
   tab (inside .fd-insp), and must look the same from both. Tokens only.
   ────────────────────────────────────────────────────────────────────────── */

.fd-dialog-backdrop[b-xv4t5grepz] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(1px);
}

.fd-dialog[b-xv4t5grepz] {
    position: fixed;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: min(46rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.fd-dialog-head[b-xv4t5grepz] {
    flex: none;
    padding: 1.25rem 1.5rem 0.75rem;
}

.fd-dialog-title[b-xv4t5grepz] {
    margin: 0 0 0.3rem;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-dialog-sub[b-xv4t5grepz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-dialog-body[b-xv4t5grepz] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 1.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-dialog-actions[b-xv4t5grepz] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fd-tst-note[b-xv4t5grepz] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.fd-tst-sec[b-xv4t5grepz] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fd-tst-sec-title[b-xv4t5grepz] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-tst-result[b-xv4t5grepz] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* ── Rows: one card per answer the trigger reads ────────────────────────── */

.fd-tst-rows[b-xv4t5grepz] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.fd-tst-row[b-xv4t5grepz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-raised);
}

.fd-tst-row-head[b-xv4t5grepz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.fd-tst-row-name[b-xv4t5grepz] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.fd-tst-row-rule[b-xv4t5grepz] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-tst-select[b-xv4t5grepz] { appearance: auto; }

/* The four context ids are short and belong together. */
.fd-tst-context[b-xv4t5grepz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 0.75rem;
    margin-top: 0.5rem;
}

.fd-tst-context > *[b-xv4t5grepz] {
    flex: 1 1 9rem;
    min-width: 8rem;
}

.fd-tst-details[b-xv4t5grepz] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}

.fd-tst-details > summary[b-xv4t5grepz] {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-tst-details > .fd-hint[b-xv4t5grepz] { margin-top: 0.375rem; }

/* ── The result ──────────────────────────────────────────────────────────── */

.fd-tst-verdict[b-xv4t5grepz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
}

/* Bounded, with its own scroll: a Function with many rows should not push the
   footer off screen. */
.fd-tst-grid[b-xv4t5grepz] {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.fd-tst-tbl[b-xv4t5grepz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}

.fd-tst-tbl th[b-xv4t5grepz],
.fd-tst-tbl td[b-xv4t5grepz] {
    padding: 0.4rem 0.55rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.fd-tst-tbl thead th[b-xv4t5grepz] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface-raised);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fd-tst-tbl tbody tr:last-child td[b-xv4t5grepz] { border-bottom: 0; }

.fd-tst-step[b-xv4t5grepz] {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.fd-tst-name[b-xv4t5grepz] { display: block; }

.fd-tst-sub[b-xv4t5grepz] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}

/* Values are data, not prose. */
.fd-tst-val[b-xv4t5grepz] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.fd-tst-none[b-xv4t5grepz] { color: var(--color-text-secondary); }

.fd-tst-notes[b-xv4t5grepz] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ── Shared inspector vocabulary, republished ────────────────────────────── */

.fd-tst[b-xv4t5grepz]  .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fd-tst[b-xv4t5grepz]  .fd-field .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fd-tst[b-xv4t5grepz]  .fd-field .form-input { width: 100%; }

.fd-tst[b-xv4t5grepz]  .fd-field .form-hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.fd-tst[b-xv4t5grepz]  .fd-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-tst[b-xv4t5grepz]  .fd-hint code { font-size: 0.72rem; }

.fd-tst[b-xv4t5grepz]  .fd-empty {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fd-tst[b-xv4t5grepz]  .fd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.fd-tst[b-xv4t5grepz]  .fd-chip--t {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fd-tst[b-xv4t5grepz]  .fd-chip--ok {
    color: color-mix(in srgb, var(--color-healthy) 60%, black);
    border-color: color-mix(in srgb, var(--color-healthy) 30%, white);
    background: color-mix(in srgb, var(--color-healthy) 12%, white);
}

.fd-tst[b-xv4t5grepz]  .fd-chip--warn {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

.fd-tst[b-xv4t5grepz]  .fd-chip--quiet {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.fd-tst[b-xv4t5grepz]  .fd-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fd-tst[b-xv4t5grepz]  .fd-banner svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 0.1rem;
}

.fd-tst[b-xv4t5grepz]  .fd-banner--warn {
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, white);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    color: color-mix(in srgb, var(--color-degraded) 65%, black);
}

@media (prefers-reduced-motion: reduce) {
    .fd-dialog-backdrop[b-xv4t5grepz] { backdrop-filter: none; }
}
/* /Components/Features/GlobalRoleLocationTree.razor.rz.scp.css */
/*  Moved off GlobalRoles.razor.css's `.gr-tree ::deep` indirection (G2, #362,
    part of epic AD4 #328): this component now has its own scoped stylesheet,
    so both the read-only Overview → Tree tab (GlobalRoles.razor) and the
    expansion editor's location picker (GlobalRoleExpansionEditor.razor) get
    the same look with no cross-file `::deep` reach and no duplicated rules.
    The outer `<ul class="gr-tree">` wrapper each caller renders around its
    root nodes stays in that caller's own stylesheet — only what this
    component itself renders (from `.gr-tree-node` down) lives here. */

.gr-tree-children[b-xh1i7qw3pp] {
    list-style: none;
    margin: 0 0 0 1.25rem;
    padding: 0 0 0 0.85rem;
    border-left: 1px dashed var(--color-border);
}

.gr-tree-node[b-xh1i7qw3pp] {
    margin: 0.15rem 0;
}

.gr-tree-row[b-xh1i7qw3pp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.gr-tree-row:hover[b-xh1i7qw3pp] {
    background: var(--color-surface-raised);
}

.gr-tree-loc[b-xh1i7qw3pp] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

/* Picker mode: the location name becomes a button. */
button.gr-tree-loc--pick[b-xh1i7qw3pp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font: inherit;
}

button.gr-tree-loc--pick:hover[b-xh1i7qw3pp] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
}

button.gr-tree-loc--pick:focus-visible[b-xh1i7qw3pp] {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}

button.gr-tree-loc--selected[b-xh1i7qw3pp] {
    background: var(--color-primary-subtle, #eff6ff);
    border-color: var(--color-primary, #2563eb);
    color: var(--color-primary, #2563eb);
    font-weight: 600;
}

.gr-tree-loc-check[b-xh1i7qw3pp] {
    flex-shrink: 0;
}

.gr-tree-pills[b-xh1i7qw3pp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gr-tree-pill[b-xh1i7qw3pp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem 0.15rem 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    font-size: 0.74rem;
    color: var(--color-text-primary);
    max-width: 100%;
}

.gr-tree-pill-icon[b-xh1i7qw3pp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

.gr-tree-pill-icon svg[b-xh1i7qw3pp] {
    width: 12px;
    height: 12px;
}

.gr-tree-pill-name[b-xh1i7qw3pp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22rem;
}

.gr-tree-pill--security[b-xh1i7qw3pp] { background: #fee2e2; border-color: #fecaca; }
.gr-tree-pill--security .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #991b1b; }

.gr-tree-pill--approval[b-xh1i7qw3pp] { background: #fef3c7; border-color: #fde68a; }
.gr-tree-pill--approval .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #92400e; }

.gr-tree-pill--job[b-xh1i7qw3pp]      { background: #ede9fe; border-color: #ddd6fe; }
.gr-tree-pill--job      .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #5b21b6; }

.gr-tree-pill--property[b-xh1i7qw3pp] { background: #e0f7f6; border-color: #b6ece8; }
.gr-tree-pill--property .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #115e59; }

.gr-tree-pill--entity[b-xh1i7qw3pp]   { background: #e0f2fe; border-color: #bae6fd; }
.gr-tree-pill--entity   .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #075985; }

.gr-tree-pill--global[b-xh1i7qw3pp]   { background: #dcfce7; border-color: #bbf7d0; }
.gr-tree-pill--global   .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #166534; }

.gr-tree-pill--system[b-xh1i7qw3pp]   { background: #e2e8f0; border-color: #cbd5e1; }
.gr-tree-pill--system   .gr-tree-pill-icon[b-xh1i7qw3pp] { color: #334155; }
/* /Components/Features/HandOffs/DocumentTypeHandOffIntake.razor.rz.scp.css */
.dth-status[b-xegx5nmfo1] {
    color: var(--text-muted, #6b7280);
}

.dth-warnings[b-xegx5nmfo1] {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}

.dth-existing[b-xegx5nmfo1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--surface-muted, #f3f4f6);
}

.dth-existing p[b-xegx5nmfo1],
.dth-hint[b-xegx5nmfo1] {
    margin: 0;
}

.dth-hint[b-xegx5nmfo1] {
    color: var(--text-secondary, #374151);
}
/* /Components/Features/HandOffs/FormHandOffLaunch.razor.rz.scp.css */
.whl-status[b-18fk5w8r9m],
.whl-hint[b-18fk5w8r9m] {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-secondary, #374151);
}

.whl-problems[b-18fk5w8r9m] {
    flex-basis: 100%;
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}
/* /Components/Features/HandOffs/FormHandOffPanel.razor.rz.scp.css */
.whp[b-3u847wocef] {
    margin: 0 0 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.whp-status[b-3u847wocef],
.whp-hint[b-3u847wocef] {
    margin: 0;
    color: var(--text-secondary, #374151);
}

.whp-head[b-3u847wocef] {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.whp-diff[b-3u847wocef] {
    margin: 0;
    padding-left: 1.4rem;
}

.whp-problems[b-3u847wocef],
.whp-errors[b-3u847wocef] {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}

.whp-actions[b-3u847wocef] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.whp-strip[b-3u847wocef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: var(--surface-muted, #f3f4f6);
}
/* /Components/Features/HandOffs/HandOffCard.razor.rz.scp.css */
.hoc[b-r0esytaa5c] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    max-width: 52rem;
}

.hoc-eyebrow[b-r0esytaa5c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted, #6b7280);
}

.hoc-title[b-r0esytaa5c] {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.3;
}

.hoc-summary[b-r0esytaa5c] {
    margin: 0.4rem 0 0;
    color: var(--text-secondary, #374151);
}

.hoc-notice[b-r0esytaa5c],
.hoc-applied[b-r0esytaa5c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--surface-muted, #f3f4f6);
}

.hoc-blockers[b-r0esytaa5c] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}

.hoc-blockers ul[b-r0esytaa5c],
.hoc-lines[b-r0esytaa5c],
.hoc-provenance[b-r0esytaa5c],
.hoc-deps[b-r0esytaa5c] {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.hoc-deps[b-r0esytaa5c] {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hoc-dep[b-r0esytaa5c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hoc-dep-kind[b-r0esytaa5c] {
    margin-right: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
}

.hoc-subhead[b-r0esytaa5c] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.hoc-why summary[b-r0esytaa5c] {
    cursor: pointer;
}

.hoc-citation[b-r0esytaa5c] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
}
/* /Components/Features/HandOffs/HandOffPairingsSection.razor.rz.scp.css */
.hps[b-af814v34fo] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

.hps-title[b-af814v34fo] {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.hps-sub[b-af814v34fo],
.hps-empty[b-af814v34fo] {
    margin: 0 0 1rem;
    color: var(--text-secondary, #374151);
}

.hps-list[b-af814v34fo] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hps-item[b-af814v34fo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
}

.hps-main[b-af814v34fo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hps-detail[b-af814v34fo] {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
}

.hps-problem[b-af814v34fo] {
    flex-basis: 100%;
    margin: 0;
    color: #92400e;
}

.hps-problems[b-af814v34fo] {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}
/* /Components/Features/HandOffs/HandOffResultNotice.razor.rz.scp.css */
.hrn[b-mvrjbk5mc9] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.hrn--ok[b-mvrjbk5mc9] {
    background: #ecfdf5;
    color: #065f46;
}

.hrn--failed[b-mvrjbk5mc9] {
    background: #fef3c7;
    color: #78350f;
}

.hrn-text[b-mvrjbk5mc9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
/* /Components/Features/HandOffs/HandOffRoleList.razor.rz.scp.css */
.hrl-head[b-d96wbe0e3h] {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.hrl-list[b-d96wbe0e3h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hrl-role[b-d96wbe0e3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hrl-name[b-d96wbe0e3h] {
    font-weight: 500;
}

.hrl-problem[b-d96wbe0e3h] {
    flex-basis: 100%;
    color: #92400e;
}
/* /Components/Features/HandOffs/WorkflowHandOffLaunch.razor.rz.scp.css */
.whl-status[b-671v1nkq1n],
.whl-hint[b-671v1nkq1n] {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-secondary, #374151);
}

.whl-problems[b-671v1nkq1n] {
    flex-basis: 100%;
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}
/* /Components/Features/HandOffs/WorkflowHandOffPanel.razor.rz.scp.css */
.whp[b-eiuzfeb5vm] {
    margin: 0 0 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.whp-status[b-eiuzfeb5vm],
.whp-hint[b-eiuzfeb5vm] {
    margin: 0;
    color: var(--text-secondary, #374151);
}

.whp-head[b-eiuzfeb5vm] {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.whp-diff[b-eiuzfeb5vm] {
    margin: 0;
    padding-left: 1.4rem;
}

.whp-problems[b-eiuzfeb5vm],
.whp-errors[b-eiuzfeb5vm] {
    margin: 0;
    padding: 0.75rem 1rem 0.75rem 2rem;
    border-radius: 8px;
    background: #fef3c7;
    color: #78350f;
}

.whp-actions[b-eiuzfeb5vm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.whp-strip[b-eiuzfeb5vm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: var(--surface-muted, #f3f4f6);
}
/* /Components/Features/MemoCard.razor.rz.scp.css */
.memo-card[b-56d6f640k0] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
    text-align: left;
    padding: 1.125rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.memo-card:hover[b-56d6f640k0] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 4px 12px rgba(7, 70, 132, 0.1);
}

.memo-card:active[b-56d6f640k0] {
    transform: translateY(1px);
}

.memo-card:focus-visible[b-56d6f640k0] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.memo-card-icon[b-56d6f640k0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--color-brand-accent);
    color: var(--color-brand);
}

.memo-card-body[b-56d6f640k0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.memo-card-title[b-56d6f640k0] {
    font-family: var(--font-subtitle);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memo-card-meta[b-56d6f640k0] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Features/MemoEditor.razor.rz.scp.css */
/* react-editor-kit styles its own internals via styled-components, and the
   document/toolbar/dropdown styling ships inside the bundle (injected globally,
   because the dropdown panels portal to <body>). Here we own only the container
   chrome — the "page". */

.memo-editor-surface[b-7829naou2a] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: visible; /* let the sticky toolbar stick rather than clip */
}

/* The editable surface should feel like a document page. */
.memo-editor-surface[b-7829naou2a]  [data-slate-editor="true"] {
    min-height: 26rem;
    padding: 1.5rem 1.75rem 2rem;
    line-height: 1.6;
}

/* The read-only viewer drops the border so it reads as content, not a field. */
.memo-editor-surface--readonly[b-7829naou2a] {
    border: none;
    background: transparent;
    box-shadow: none;
}

.memo-editor-surface--readonly[b-7829naou2a]  [data-slate-editor="true"] {
    padding: 0;
    min-height: 0;
}
/* /Components/Features/Monitor/DataImportsPanel.razor.rz.scp.css */
/*  Data imports (Imports hub tab, slice MON7). Filter card, read-state banner, KPI tiles
    that double as status filters, Source/Type facet chips, the shared DataTable, and the
    shared Drawer. Tokens only. */

.di[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Filters ────────────────────────────────────────────────────────── */

.di-filters[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.di-row[b-qi66uoebm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
}

.di-row--secondary[b-qi66uoebm9] {
    align-items: center;
    gap: 0.5rem;
}

.di-field[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.di-field--grow[b-qi66uoebm9] {
    flex: 1;
    min-width: 200px;
}

.di-label[b-qi66uoebm9] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.di-status[b-qi66uoebm9] {
    min-width: 140px;
}

.di-num-input[b-qi66uoebm9] {
    max-width: 160px;
}

.di-refresh[b-qi66uoebm9] {
    margin-left: auto;
}

.di-pills[b-qi66uoebm9] {
    display: flex;
    gap: 0.4rem;
}

.di-pill[b-qi66uoebm9] {
    padding: 0.42rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.di-pill:hover[b-qi66uoebm9],
.di-pill--active[b-qi66uoebm9] {
    border-color: var(--color-brand-teal);
}

.di-pill--active[b-qi66uoebm9] {
    box-shadow: 0 0 0 1px var(--color-brand-teal) inset;
}

.di-more[b-qi66uoebm9],
.di-clear[b-qi66uoebm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.di-more[b-qi66uoebm9] {
    color: var(--color-text-secondary);
}

.di-more:hover[b-qi66uoebm9] {
    color: var(--color-text-primary);
}

.di-clear[b-qi66uoebm9] {
    color: var(--color-brand);
}

.di-clear:hover[b-qi66uoebm9] {
    text-decoration: underline;
}

/* ── Errors and quiet text ──────────────────────────────────────────── */

.di-error[b-qi66uoebm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-down);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.di-muted[b-qi66uoebm9] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* ── KPI tiles ──────────────────────────────────────────────────────── */

.di-kpis[b-qi66uoebm9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.di-kpi[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-unknown);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

button.di-kpi:hover[b-qi66uoebm9] {
    border-color: var(--color-brand-teal);
}

.di-kpi--bad[b-qi66uoebm9] {
    border-left-color: var(--color-down);
}

.di-kpi--good[b-qi66uoebm9] {
    border-left-color: var(--color-healthy);
}

.di-kpi--active[b-qi66uoebm9] {
    box-shadow: 0 0 0 1px var(--color-brand-teal) inset;
}

.di-kpi--static[b-qi66uoebm9] {
    cursor: default;
}

.di-kpi-n[b-qi66uoebm9] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.di-kpi-l[b-qi66uoebm9] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Facets ─────────────────────────────────────────────────────────── */

.di-facets[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.di-facet-group[b-qi66uoebm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.di-facet-title[b-qi66uoebm9] {
    min-width: 4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.di-chip[b-qi66uoebm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-surface);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.di-chip:hover[b-qi66uoebm9] {
    border-color: var(--color-brand-teal);
}

.di-chip--on[b-qi66uoebm9] {
    border-color: var(--color-brand);
    background: var(--color-surface-raised);
    box-shadow: 0 0 0 1px var(--color-brand) inset;
}

.di-chip-n[b-qi66uoebm9] {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Grid cells ─────────────────────────────────────────────────────── */

.di-date[b-qi66uoebm9] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.di-file[b-qi66uoebm9] {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ── Drawer ─────────────────────────────────────────────────────────── */

.di-section[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.di-section-title[b-qi66uoebm9] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.di-facts[b-qi66uoebm9] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.4rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.di-facts dt[b-qi66uoebm9] {
    color: var(--color-text-secondary);
}

.di-facts dd[b-qi66uoebm9] {
    margin: 0;
    color: var(--color-text-primary);
}

.di-facts--compact[b-qi66uoebm9] {
    grid-template-columns: 6rem 1fr;
}

.di-break[b-qi66uoebm9] {
    word-break: break-all;
}

.di-guid[b-qi66uoebm9] {
    font-size: 0.75rem;
}

.di-sev-list[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.di-sev[b-qi66uoebm9] {
    display: grid;
    grid-template-columns: minmax(9rem, 1.2fr) 1fr 2.5rem;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
}

.di-sev-label[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
}

.di-sev-bar[b-qi66uoebm9] {
    height: 0.5rem;
    border-radius: 100px;
    background: var(--color-surface-raised);
    overflow: hidden;
}

.di-sev-fill[b-qi66uoebm9] {
    display: block;
    height: 100%;
    border-radius: 100px;
}

.di-sev-fill--none[b-qi66uoebm9],
.di-sev-fill--info[b-qi66uoebm9] {
    background: var(--color-unknown);
}

.di-sev-fill--warn[b-qi66uoebm9] {
    background: var(--color-degraded);
}

.di-sev-fill--bad[b-qi66uoebm9] {
    background: var(--color-down);
}

.di-sev-n[b-qi66uoebm9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.di-error-list[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.di-error-card[b-qi66uoebm9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.8125rem;
}

.di-error-top[b-qi66uoebm9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
}

.di-error-chips[b-qi66uoebm9] {
    display: inline-flex;
    gap: 0.3rem;
}

.di-tag[b-qi66uoebm9] {
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.di-error-proc[b-qi66uoebm9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.di-error-message[b-qi66uoebm9] {
    color: var(--color-text-primary);
}

.di-error-more summary[b-qi66uoebm9] {
    cursor: pointer;
    color: var(--color-text-secondary);
}

.di-errors-footer[b-qi66uoebm9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
/* /Components/Features/Monitor/FileImportsPanel.razor.rz.scp.css */
/*  File imports (Imports hub tab; formerly Import Activity).

    The page is a filter bar, a set of banners that say what is NOT on screen,
    a counts strip, a "needs a look" list and a grid. The banners come first on
    purpose: on this surface the most misleading thing possible is an empty grid
    that looks like "nothing happened" when it really means "outside the window",
    "you are not an administrator" or "one deleted import failed the query".

    Tokens only — no raw hex. */

.ia-shell[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ia-lede[b-wqcpy3zc3e] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* ── Filters ────────────────────────────────────────────────────────── */

.ia-filters[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.ia-filter-row[b-wqcpy3zc3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.ia-field[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 9rem;
}

.ia-field--wide[b-wqcpy3zc3e] { min-width: 15rem; flex: 1 1 15rem; }
.ia-field--date[b-wqcpy3zc3e] { min-width: 9.5rem; }
.ia-field--narrow[b-wqcpy3zc3e] { min-width: 6rem; }

.ia-hint[b-wqcpy3zc3e] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}

.ia-filter-actions[b-wqcpy3zc3e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ia-refresh[b-wqcpy3zc3e],
.ia-runnow[b-wqcpy3zc3e] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ia-runnow[b-wqcpy3zc3e] { margin-left: auto; }

/* One turn per second while a read is in flight, and none at all for a reader
   who has asked for reduced motion. */
.ia-spin[b-wqcpy3zc3e] { animation: ia-spin-b-wqcpy3zc3e 1s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .ia-spin[b-wqcpy3zc3e] { animation: none; }
}

/* ── Banners ────────────────────────────────────────────────────────── */

.ia-banner[b-wqcpy3zc3e] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.83rem;
    line-height: 1.5;
}

.ia-banner--info[b-wqcpy3zc3e] {
    border-color: var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.ia-banner--warn[b-wqcpy3zc3e] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.ia-banner--error[b-wqcpy3zc3e] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.ia-banner--ok[b-wqcpy3zc3e] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.ia-note[b-wqcpy3zc3e] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.45;
}

.ia-note--warn[b-wqcpy3zc3e] { color: var(--status-warning-fg); }

/* ── Counts ─────────────────────────────────────────────────────────── */

.ia-counts[b-wqcpy3zc3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ia-count[b-wqcpy3zc3e] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ia-count-n[b-wqcpy3zc3e] {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ia-count-l[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Colour is a second cue only: the word is always there. */
.ia-count--bad[b-wqcpy3zc3e] { border-color: var(--status-error-border); background: var(--status-error-bg); }
.ia-count--busy[b-wqcpy3zc3e] { border-color: var(--status-info-border); background: var(--status-info-bg); }
.ia-count--ok[b-wqcpy3zc3e] { border-color: var(--status-success-border); background: var(--status-success-bg); }

/* ── Needs a look ───────────────────────────────────────────────────── */

.ia-health[b-wqcpy3zc3e] {
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.ia-section-title[b-wqcpy3zc3e],
.ia-health-title[b-wqcpy3zc3e] {
    margin: 0 0 0.65rem;
    font-family: var(--font-subtitle);
    font-size: 0.95rem;
    font-weight: 600;
}

.ia-health-caveat[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 400;
}

.ia-health-list[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ia-health-item[b-wqcpy3zc3e] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
}

.ia-health-item:first-child[b-wqcpy3zc3e] {
    padding-top: 0;
    border-top: none;
}

.ia-health-body[b-wqcpy3zc3e] { flex: 1; min-width: 0; }

.ia-health-name[b-wqcpy3zc3e] {
    margin: 0 0 0.15rem;
    font-size: 0.86rem;
    font-weight: 600;
}

.ia-health-reason[b-wqcpy3zc3e] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.45;
}

.ia-health-link[b-wqcpy3zc3e] {
    flex: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-brand);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.ia-health-link:hover[b-wqcpy3zc3e] { background: var(--color-surface-raised); }

/* ── Grid cells ─────────────────────────────────────────────────────── */

.ia-file[b-wqcpy3zc3e] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
}

.ia-import[b-wqcpy3zc3e] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A run whose import has been deleted. Marked, never hidden: it is real work
   that happened, and the id is the only handle anyone has left on it. */
.ia-import--orphan[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-style: italic;
}

.ia-mono[b-wqcpy3zc3e] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* ── Drawer ─────────────────────────────────────────────────────────── */

.ia-detail[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.ia-detail-row[b-wqcpy3zc3e] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.6rem;
    align-items: baseline;
}

.ia-detail-row dt[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ia-detail-row dd[b-wqcpy3zc3e] {
    margin: 0;
    font-size: 0.85rem;
    word-break: break-word;
}

.ia-detail-hint[b-wqcpy3zc3e] {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-text-secondary);
    font-size: 0.77rem;
    line-height: 1.45;
}

.ia-detail-status[b-wqcpy3zc3e] {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.ia-index[b-wqcpy3zc3e],
.ia-segment[b-wqcpy3zc3e] {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.ia-index-list[b-wqcpy3zc3e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ia-index-list li[b-wqcpy3zc3e] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.ia-index-list span[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ia-index-list strong[b-wqcpy3zc3e] {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.ia-foot-note[b-wqcpy3zc3e] {
    color: var(--color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.4;
}
/* /Components/Features/PolicyAssistantPanel.razor.rz.scp.css */
/* Drawer chrome — the AiChatPanel visual language (overlay + right slide-in aside). */
.asst-overlay[b-wsw4ggplto] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 60;
}

.asst-overlay.open[b-wsw4ggplto] { opacity: 1; pointer-events: auto; }

.asst-panel[b-wsw4ggplto] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 30rem;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -8px 0 28px rgba(15, 23, 42, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 61;
    display: flex;
    flex-direction: column;
}

.asst-panel.open[b-wsw4ggplto] { transform: translateX(0); }

.asst-header[b-wsw4ggplto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef0f2;
}

.asst-header-left[b-wsw4ggplto] { display: flex; align-items: center; gap: 0.7rem; }
.asst-icon[b-wsw4ggplto] { width: 26px; height: 26px; color: #074684; }
.asst-header h3[b-wsw4ggplto] { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.asst-sub[b-wsw4ggplto] { margin: 0; font-size: 0.75rem; color: #64748b; }
.asst-close[b-wsw4ggplto] { background: none; border: none; color: #94a3b8; font-size: 0.95rem; cursor: pointer; padding: 0.35rem; }
.asst-close:hover[b-wsw4ggplto] { color: #0f172a; }

.asst-body[b-wsw4ggplto] { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }

/* Actions */
.asst-actions[b-wsw4ggplto] { display: flex; gap: 0.3rem; background: #f1f5f9; border-radius: 8px; padding: 3px; margin-bottom: 0.75rem; }
.asst-action[b-wsw4ggplto] {
    flex: 1;
    padding: 0.4rem 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}
.asst-action--on[b-wsw4ggplto] { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }

.asst-instruction[b-wsw4ggplto] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.6rem;
}

.asst-run[b-wsw4ggplto] {
    width: 100%;
    padding: 0.55rem;
    border: 1px solid #074684;
    border-radius: 8px;
    background: #074684;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.asst-run:hover:not(:disabled)[b-wsw4ggplto] { background: #06386a; }
.asst-run:disabled[b-wsw4ggplto] { opacity: 0.5; cursor: not-allowed; }

.asst-hint[b-wsw4ggplto] { font-size: 0.8rem; color: #64748b; margin: 0.35rem 0 0.6rem; }
.asst-ok[b-wsw4ggplto] { color: #166534; font-size: 0.85rem; font-weight: 600; }
.asst-error[b-wsw4ggplto] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.82rem;
}

/* Typing dots */
.asst-typing[b-wsw4ggplto] { display: flex; gap: 5px; padding: 0.9rem 0.2rem; }
.asst-typing span[b-wsw4ggplto] {
    width: 7px; height: 7px; border-radius: 50%;
    background: #94a3b8;
    animation: asst-bounce-b-wsw4ggplto 1.2s infinite ease-in-out;
}
.asst-typing span:nth-child(2)[b-wsw4ggplto] { animation-delay: 0.15s; }
.asst-typing span:nth-child(3)[b-wsw4ggplto] { animation-delay: 0.3s; }
@keyframes asst-bounce-b-wsw4ggplto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Result */
.asst-message[b-wsw4ggplto] {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    font-size: 0.84rem;
    color: #0f172a;
    white-space: pre-wrap;
}

/* Findings */
.asst-findings[b-wsw4ggplto] { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.asst-finding[b-wsw4ggplto] { border: 1px solid #e5e7eb; border-left-width: 3px; border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 0.8rem; }
.asst-finding p[b-wsw4ggplto] { margin: 0.25rem 0 0; color: #1f2937; }
.asst-finding-badge[b-wsw4ggplto] { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.4rem; }
.asst-finding-cat[b-wsw4ggplto] { font-size: 0.72rem; color: #64748b; }
.asst-finding--critical[b-wsw4ggplto] { border-left-color: #dc2626; }
.asst-finding--critical .asst-finding-badge[b-wsw4ggplto] { color: #dc2626; }
.asst-finding--warning[b-wsw4ggplto] { border-left-color: #d97706; }
.asst-finding--warning .asst-finding-badge[b-wsw4ggplto] { color: #d97706; }
.asst-finding--info[b-wsw4ggplto] { border-left-color: #64748b; }
.asst-finding--info .asst-finding-badge[b-wsw4ggplto] { color: #64748b; }
.asst-suggestion[b-wsw4ggplto] { color: #475569 !important; font-style: italic; }

/* Proposal + diff */
.asst-proposal[b-wsw4ggplto] { margin-top: 1rem; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.8rem 0.95rem; }
.asst-proposal h4[b-wsw4ggplto] { margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700; color: #0f172a; }
.asst-diff[b-wsw4ggplto] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; }
.asst-diff li[b-wsw4ggplto] { display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap; }
.asst-diff-sign[b-wsw4ggplto] { font-weight: 800; width: 0.9rem; text-align: center; }
.asst-diff-detail[b-wsw4ggplto] { color: #64748b; }
.asst-diff--added .asst-diff-sign[b-wsw4ggplto] { color: #16a34a; }
.asst-diff--removed .asst-diff-sign[b-wsw4ggplto] { color: #dc2626; }
.asst-diff--removed strong[b-wsw4ggplto] { text-decoration: line-through; color: #991b1b; }
.asst-diff--changed .asst-diff-sign[b-wsw4ggplto] { color: #d97706; }
.asst-diff--moved .asst-diff-sign[b-wsw4ggplto] { color: #2563eb; }

.asst-proposal-actions[b-wsw4ggplto] { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.7rem; }
.asst-apply[b-wsw4ggplto] {
    padding: 0.45rem 1rem;
    border: 1px solid #16a34a;
    border-radius: 7px;
    background: #16a34a;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.asst-apply:hover[b-wsw4ggplto] { background: #15803d; }
.asst-link[b-wsw4ggplto] { background: none; border: none; padding: 0; color: #2563eb; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.asst-link:hover[b-wsw4ggplto] { text-decoration: underline; }
.asst-json[b-wsw4ggplto] {
    margin: 0.6rem 0 0;
    padding: 0.7rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 0.7rem;
    line-height: 1.5;
    overflow: auto;
    max-height: 16rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.asst-footer[b-wsw4ggplto] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid #eef0f2;
    font-size: 0.72rem;
    color: #64748b;
}
/* /Components/Features/RoleNameTag.razor.rz.scp.css */
/* Inline role tag: small type icon + cleaned name. */

.rnt[b-ucf2mk3rbz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.rnt-icon[b-ucf2mk3rbz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.rnt-name[b-ucf2mk3rbz] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Per-category tints: subtle background + matching foreground icon. */

.rnt--security .rnt-icon[b-ucf2mk3rbz] { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.rnt--approval .rnt-icon[b-ucf2mk3rbz] { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.rnt--job      .rnt-icon[b-ucf2mk3rbz] { background: #ede9fe; border-color: #ddd6fe; color: #5b21b6; }
.rnt--property .rnt-icon[b-ucf2mk3rbz] { background: #e0f7f6; border-color: #b6ece8; color: #115e59; }
.rnt--entity   .rnt-icon[b-ucf2mk3rbz] { background: #e0f2fe; border-color: #bae6fd; color: #075985; }
.rnt--global   .rnt-icon[b-ucf2mk3rbz] { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.rnt--system   .rnt-icon[b-ucf2mk3rbz] { background: #e2e8f0; border-color: #cbd5e1; color: #334155; }
.rnt--default  .rnt-icon[b-ucf2mk3rbz] { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
/* /Components/Features/Taxonomy/AccessExplainer.razor.rz.scp.css */
/* Taxonomy TX7 (#807): the access explainer. Tokens only (style guide §11); every result colour
   is paired with an icon and a word, never colour alone. A bordered inset like ImpactPreview,
   since it sits inside a tab or a page section rather than being a card of its own. */

.axp[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ── Head ────────────────────────────────────────────────────────────────── */

.axp-head[b-f79fc4r78q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.axp-title[b-f79fc4r78q] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.axp-badge[b-f79fc4r78q] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.axp-lead[b-f79fc4r78q] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ── Picker ──────────────────────────────────────────────────────────────── */

.axp-form[b-f79fc4r78q] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.85rem;
}

.axp-kind[b-f79fc4r78q] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    overflow: hidden;
    background: var(--color-surface);
}

.axp-kind-btn[b-f79fc4r78q] {
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.axp-kind-btn + .axp-kind-btn[b-f79fc4r78q] {
    border-left: 1px solid var(--color-border);
}

.axp-kind-btn--on[b-f79fc4r78q] {
    background: var(--color-brand);
    color: var(--color-surface);
    font-weight: 600;
}

.axp-kind-btn:focus-visible[b-f79fc4r78q] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.axp-field[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 18rem;
    min-width: 0;
}

.axp-label[b-f79fc4r78q] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.axp-explain[b-f79fc4r78q] {
    flex: none;
}

/* ── Status lines ────────────────────────────────────────────────────────── */

.axp-status[b-f79fc4r78q],
.axp-note[b-f79fc4r78q] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--color-text-muted);
}

.axp-status--warn[b-f79fc4r78q],
.axp-note[b-f79fc4r78q] {
    color: var(--status-warning-fg);
}

.axp-status--warn strong[b-f79fc4r78q] {
    color: inherit;
    font-weight: 600;
}

.axp-muted[b-f79fc4r78q] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.axp-spin[b-f79fc4r78q] {
    animation: axp-spin-b-f79fc4r78q 1s linear infinite;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .axp-spin[b-f79fc4r78q] { animation: none; }
}

/* ── Result ──────────────────────────────────────────────────────────────── */

.axp-result[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.axp-headline[b-f79fc4r78q] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* The chain: a vertical stepper with a rail down the marks. */

.axp-steps[b-f79fc4r78q] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.axp-step[b-f79fc4r78q] {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.55rem 0 0.75rem;
}

.axp-step[b-f79fc4r78q]::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    top: 1.9rem;
    bottom: -0.1rem;
    width: 2px;
    background: var(--color-border);
}

.axp-step:last-child[b-f79fc4r78q]::before {
    display: none;
}

.axp-mark[b-f79fc4r78q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: currentColor;
    z-index: 1;
}

.axp-half[b-f79fc4r78q] {
    display: block;
}

.axp-step-body[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.axp-step-head[b-f79fc4r78q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    margin: 0;
}

.axp-word[b-f79fc4r78q] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.axp-step-title[b-f79fc4r78q] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.axp-step-text[b-f79fc4r78q] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Result colours — always beside the word and the icon above. */

.axp-step--grants .axp-mark[b-f79fc4r78q],
.axp-step--grants .axp-word[b-f79fc4r78q],
.axp-legend-item.axp-step--grants[b-f79fc4r78q] { color: var(--status-success-fg); }

.axp-step--grants .axp-mark[b-f79fc4r78q] { border-color: var(--status-success-border); background: var(--status-success-bg); }

.axp-step--denies .axp-mark[b-f79fc4r78q],
.axp-step--denies .axp-word[b-f79fc4r78q],
.axp-legend-item.axp-step--denies[b-f79fc4r78q] { color: var(--status-error-fg); }

.axp-step--denies .axp-mark[b-f79fc4r78q] { border-color: var(--status-error-border); background: var(--status-error-bg); }

.axp-step--narrows .axp-mark[b-f79fc4r78q],
.axp-step--narrows .axp-word[b-f79fc4r78q],
.axp-legend-item.axp-step--narrows[b-f79fc4r78q] { color: var(--status-warning-fg); }

.axp-step--narrows .axp-mark[b-f79fc4r78q] { border-color: var(--status-warning-border); background: var(--status-warning-bg); }

.axp-step--not-applicable .axp-mark[b-f79fc4r78q],
.axp-step--not-applicable .axp-word[b-f79fc4r78q],
.axp-legend-item.axp-step--not-applicable[b-f79fc4r78q] { color: var(--color-text-muted); }

.axp-step--unknown .axp-mark[b-f79fc4r78q],
.axp-step--unknown .axp-word[b-f79fc4r78q],
.axp-legend-item.axp-step--unknown[b-f79fc4r78q] { color: var(--status-info-fg); }

.axp-step--unknown .axp-mark[b-f79fc4r78q] { border-color: var(--status-info-border); background: var(--status-info-bg); }

/* Evidence chips */

.axp-evidence[b-f79fc4r78q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.1rem 0 0;
    padding: 0;
    list-style: none;
}

.axp-evidence-item[b-f79fc4r78q] {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.axp-evidence-item[b-f79fc4r78q]  .txr {
    max-width: 100%;
    white-space: normal;
}

.axp-step-link[b-f79fc4r78q] {
    align-self: flex-start;
    font-size: 0.8rem;
    color: var(--color-brand);
    text-decoration: none;
}

.axp-step-link:hover[b-f79fc4r78q],
.axp-step-link:focus-visible[b-f79fc4r78q] {
    text-decoration: underline;
    outline: none;
}

/* ── Verdict strip ───────────────────────────────────────────────────────── */

.axp-verdict[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
}

.axp-verdict-summary[b-f79fc4r78q] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

.axp-pills[b-f79fc4r78q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.axp-pill[b-f79fc4r78q] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.78rem;
}

.axp-pill-label[b-f79fc4r78q] {
    color: var(--color-text-secondary);
}

.axp-pill-mark[b-f79fc4r78q] {
    display: inline-flex;
}

.axp-pill-word[b-f79fc4r78q] {
    font-weight: 700;
}

.axp-pill--yes[b-f79fc4r78q] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.axp-pill--no[b-f79fc4r78q] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

/* ── Partial, legend, disclaimer ─────────────────────────────────────────── */

.axp-partial[b-f79fc4r78q] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8rem;
}

.axp-legend[b-f79fc4r78q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.axp-legend-item[b-f79fc4r78q] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.axp-legend-half[b-f79fc4r78q] {
    font-size: 0.8rem;
    line-height: 1;
}

.axp-disclaimer[b-f79fc4r78q] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.axp-disclaimer .ui-icon[b-f79fc4r78q] {
    flex: none;
    margin-top: 0.1rem;
}

/* UA6 (#831): the step list folds under the AccessPath diagram. */
.axp-fold[b-f79fc4r78q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.axp-fold-summary[b-f79fc4r78q] {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
}
/* /Components/Features/Taxonomy/DefaultValueField.razor.rz.scp.css */
/*  Taxonomy TX3 (#803): the default-value token builder, moved here from
    TagSetupEditor.razor.css when the control was extracted. Scoped CSS follows the component
    that renders the elements, so these rules had to move with the markup; the class names are
    the ones TagSetupEditor always rendered, so TX1's tests and specs see what they did. Tokens only. */

.tse-default-row[b-3z21zpt168] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tse-default-row .form-input[b-3z21zpt168] {
    flex: 1 1 auto;
    min-width: 0;
}

.tse-token-btn[b-3z21zpt168] {
    white-space: nowrap;
    flex-shrink: 0;
}

.tse-token-panel[b-3z21zpt168] {
    margin-top: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.tse-token-grid[b-3z21zpt168] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.7fr) auto;
    gap: 0.625rem;
    align-items: end;
}

.tse-token-insert[b-3z21zpt168] {
    display: flex;
    align-items: flex-end;
}

.tse-token-panel code[b-3z21zpt168],
.tse-preview code[b-3z21zpt168] {
    font-size: 0.8125rem;
}

.tse-preview[b-3z21zpt168] {
    margin-top: 0.5rem;
}

.tse-disabled-switch[b-3z21zpt168] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}
/* /Components/Features/Taxonomy/ImpactPreview.razor.rz.scp.css */
/* Taxonomy TX6 (#806): the impact preview. Tokens only (style guide §11); every status colour
   is paired with an icon and a word, never colour alone. Sits inside a ConfirmDialog's message
   or a danger zone, so it is a bordered inset rather than a card of its own. */

.imp[b-os9kvsm7r3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ── Status lines ────────────────────────────────────────────────────────── */

.imp-status[b-os9kvsm7r3] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--color-text-muted);
}

.imp-status--warn[b-os9kvsm7r3] {
    color: var(--status-warning-fg);
}

.imp-status--warn strong[b-os9kvsm7r3] {
    color: inherit;
    font-weight: 600;
}

.imp-muted[b-os9kvsm7r3] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.imp-spin[b-os9kvsm7r3] {
    animation: imp-spin-b-os9kvsm7r3 1s linear infinite;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .imp-spin[b-os9kvsm7r3] { animation: none; }
}

/* ── Headline ────────────────────────────────────────────────────────────── */

.imp-headline[b-os9kvsm7r3] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Blockers: red, with an icon and the word ───────────────────────────── */

.imp-blockers[b-os9kvsm7r3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.imp-blocker[b-os9kvsm7r3] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--status-error-border);
    border-radius: 6px;
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.imp-blocker-mark[b-os9kvsm7r3] {
    display: inline-flex;
    margin-top: 0.1rem;
}

.imp-blocker-word[b-os9kvsm7r3] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.imp-blocker-text[b-os9kvsm7r3] {
    color: var(--color-text-primary);
}

/* ── Groups ──────────────────────────────────────────────────────────────── */

.imp-group[b-os9kvsm7r3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.imp-group-title[b-os9kvsm7r3] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.imp-group-count[b-os9kvsm7r3] {
    font-weight: 700;
    color: var(--color-text-primary);
}

.imp-list[b-os9kvsm7r3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.imp-item[b-os9kvsm7r3] {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.imp-item[b-os9kvsm7r3]  .txr {
    max-width: 100%;
    white-space: normal;
}

.imp-more[b-os9kvsm7r3] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font-size: 0.8rem;
    cursor: pointer;
}

.imp-more:hover[b-os9kvsm7r3],
.imp-more:focus-visible[b-os9kvsm7r3] {
    text-decoration: underline;
    outline: none;
}

/* ── Notes ───────────────────────────────────────────────────────────────── */

.imp-notes[b-os9kvsm7r3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.imp-note[b-os9kvsm7r3] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.imp-note-mark[b-os9kvsm7r3] {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--status-info-fg);
}

/* ── Partial ─────────────────────────────────────────────────────────────── */

.imp-partial[b-os9kvsm7r3] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.imp-foot[b-os9kvsm7r3] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
/* /Components/Features/Taxonomy/IndexPanelPreview.razor.rz.scp.css */
/*  Taxonomy TX1 (#801): the read-only index-panel preview. Same visual language as the form
    designer's preview — a calm form surface, folders as fieldsets, inert controls. Tokens only. */

.ipp[b-9ib2rr9zmw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ipp-lede[b-9ib2rr9zmw] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ipp-empty[b-9ib2rr9zmw] {
    padding: 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    text-align: center;
}

.ipp-empty p[b-9ib2rr9zmw] {
    margin: 0;
}

.ipp-muted[b-9ib2rr9zmw] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── Folders ──────────────────────────────────────────────────────────────── */

.ipp-folder[b-9ib2rr9zmw] {
    margin: 0;
    padding: 0.875rem 1.125rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    min-width: 0;
}

.ipp-folder .ipp-folder[b-9ib2rr9zmw] {
    margin-top: 0.875rem;
    background: var(--color-surface-raised);
}

.ipp-folder--general[b-9ib2rr9zmw] {
    border-style: dashed;
}

.ipp-folder--folded[b-9ib2rr9zmw] {
    padding-bottom: 0.5rem;
}

.ipp-folder-legend[b-9ib2rr9zmw] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0 0.4rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.ipp-folder-meta[b-9ib2rr9zmw] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ipp-unfold[b-9ib2rr9zmw] {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font: inherit;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-brand);
    cursor: pointer;
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

.ipp-fields[b-9ib2rr9zmw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.875rem 1.25rem;
}

.ipp-field[b-9ib2rr9zmw] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ipp-field--hidden[b-9ib2rr9zmw] {
    opacity: 0.6;
}

.ipp-label[b-9ib2rr9zmw] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.ipp-label-text[b-9ib2rr9zmw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ipp-required[b-9ib2rr9zmw] {
    color: var(--color-down);
    font-weight: 700;
}

.ipp-state[b-9ib2rr9zmw] {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.ipp-control[b-9ib2rr9zmw] {
    width: 100%;
    box-sizing: border-box; /* the global .form-input is content-box; without this the control overflows its card */
    opacity: 1;
    cursor: default;
}

.ipp-control--readonly[b-9ib2rr9zmw] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.ipp-tooltip[b-9ib2rr9zmw] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ipp-chip[b-9ib2rr9zmw] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.ipp-chip--hidden[b-9ib2rr9zmw] {
    font-style: italic;
}

/* ── Group tag table ──────────────────────────────────────────────────────── */

.ipp-group[b-9ib2rr9zmw] {
    padding: 0.875rem 1.125rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ipp-group-title[b-9ib2rr9zmw] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.ipp-table-scroll[b-9ib2rr9zmw] {
    overflow-x: auto;
}

.ipp-table[b-9ib2rr9zmw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ipp-table th[b-9ib2rr9zmw],
.ipp-table td[b-9ib2rr9zmw] {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.ipp-table thead th[b-9ib2rr9zmw] {
    font-family: var(--font-subtitle);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.ipp-table-actions[b-9ib2rr9zmw] {
    width: 4rem;
    text-align: right;
}

.ipp-cell[b-9ib2rr9zmw] {
    color: var(--color-text-secondary);
}

.ipp-cell--hidden[b-9ib2rr9zmw] {
    text-decoration: line-through;
    opacity: 0.6;
}

.ipp-summary-row td[b-9ib2rr9zmw] {
    font-weight: 600;
    background: var(--color-surface-raised);
}
/* /Components/Features/Taxonomy/PlacementTreeEditor.razor.rz.scp.css */
/*  Taxonomy TX1 (#801): the placement tree on the document type's Tags tab. Folders as calm
    sectioned cards, rows as a numbered list, explicit controls on the right. Tokens only. */

.pte[b-waousnqz8i] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.pte-head[b-waousnqz8i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.pte-title[b-waousnqz8i] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pte-lede[b-waousnqz8i] {
    margin: 0.3rem 0 0;
    max-width: 70ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.pte-new-folder[b-waousnqz8i] {
    white-space: nowrap;
    flex-shrink: 0;
}

.pte-folder-notice[b-waousnqz8i] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

.pte-muted[b-waousnqz8i] {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* ── Folders ──────────────────────────────────────────────────────────────── */

.pte-folder[b-waousnqz8i] {
    padding: 0.75rem 1rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    min-width: 0;
}

.pte-folder .pte-folder[b-waousnqz8i] {
    margin-top: 0.75rem;
    margin-left: 1.25rem;
    background: var(--color-surface-raised);
}

.pte-folder--general[b-waousnqz8i] {
    border-style: dashed;
}

.pte-folder-head[b-waousnqz8i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.pte-folder-name[b-waousnqz8i] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pte-folder-icon[b-waousnqz8i] {
    color: var(--color-text-muted);
}

.pte-meta[b-waousnqz8i] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.pte-folder-actions[b-waousnqz8i] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.pte-text-btn[b-waousnqz8i] {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    padding: 0.2rem 0.55rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
}

.pte-text-btn:hover:not(:disabled)[b-waousnqz8i] {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
}

.pte-text-btn:disabled[b-waousnqz8i] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.pte-text-btn--danger:hover:not(:disabled)[b-waousnqz8i] {
    color: var(--color-down);
}

/* ── Inline create / rename forms ────────────────────────────────────────── */

.pte-inline-form[b-waousnqz8i] {
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.625rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.pte-inline-row[b-waousnqz8i] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.pte-inline-row .form-input[b-waousnqz8i] {
    flex: 1 1 14rem;
    min-width: 0;
}

.pte-inline-row--rename[b-waousnqz8i] {
    flex: 1 1 auto;
}

/* ── Rows ─────────────────────────────────────────────────────────────────── */

.pte-rows[b-waousnqz8i] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pte-row[b-waousnqz8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
}

.pte-row--open[b-waousnqz8i] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 18%, transparent);
}

.pte-row--error[b-waousnqz8i] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
}

.pte-row-order[b-waousnqz8i] {
    width: 1.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pte-row-name[b-waousnqz8i] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-brand);
    cursor: pointer;
    text-align: left;
}

.pte-row-name:hover[b-waousnqz8i] {
    text-decoration: underline;
}

.pte-chip[b-waousnqz8i] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.pte-chip--required[b-waousnqz8i] {
    color: var(--color-down);
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 6%, white);
}

.pte-chip--new[b-waousnqz8i] {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 35%, white);
    background: color-mix(in srgb, var(--color-brand) 6%, white);
}

.pte-row-error[b-waousnqz8i] {
    font-size: 0.78rem;
    color: var(--color-down);
}

.pte-row-actions[b-waousnqz8i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.pte-move[b-waousnqz8i] {
    max-width: 11rem;
    box-sizing: border-box;
    font-size: 0.8125rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.pte-icon-btn[b-waousnqz8i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.pte-icon-btn:hover:not(:disabled)[b-waousnqz8i] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.pte-icon-btn:disabled[b-waousnqz8i] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pte-icon-btn--danger:hover:not(:disabled)[b-waousnqz8i] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: var(--color-down);
}
/* /Components/Features/Taxonomy/TagSetupEditor.razor.rz.scp.css */
/*  Taxonomy TX1 (#801): the shared tag-setup / placement editor. Moved here from
    GroupTags.razor.css's drawer rules so both owners render it identically. Tokens only. */

.tse[b-sql4owu9q2] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tse-section-title[b-sql4owu9q2] {
    margin: 0 0 0.75rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tse-hint[b-sql4owu9q2] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tse-muted[b-sql4owu9q2] {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* The default-value token builder and the validation-rule grid live in
   DefaultValueField.razor.css and ValidationRulesEditor.razor.css since TX3 (#803) —
   scoped CSS follows the component that renders the elements. */

/* ── Triggers ───────────────────────────────────────────────────────────── */

.tse-triggers[b-sql4owu9q2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tse-trigger-type[b-sql4owu9q2] {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tse-unlisted[b-sql4owu9q2] {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ── Per-entity visibility grid (group-tag mode) ───────────────────────── */

.tse-toggle-grid[b-sql4owu9q2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tse-toggle-grid th[b-sql4owu9q2],
.tse-toggle-grid td[b-sql4owu9q2] {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.tse-toggle-grid thead th[b-sql4owu9q2] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tse-toggle-grid tbody th[b-sql4owu9q2] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.tse-toggle-grid select[b-sql4owu9q2] {
    min-width: 12rem;
}
/* /Components/Features/Taxonomy/TaxonomyMap.razor.rz.scp.css */
/*  Taxonomy TX2 (#802): the hub-and-spoke map. Tokens only — every colour is a theme token, so
    a dark theme that redefines the tokens restyles the lines and chips with everything else. */

.txm[b-flqkjvmwdh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    container-type: inline-size;
}

.txm-status[b-flqkjvmwdh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.txm-status--error[b-flqkjvmwdh] {
    color: var(--color-text-primary);
}

.txm-muted[b-flqkjvmwdh] {
    color: var(--color-text-secondary);
}

.txm-spin[b-flqkjvmwdh] {
    animation: txm-spin-b-flqkjvmwdh 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .txm-spin[b-flqkjvmwdh] { animation: none; }
}

.txm-partial[b-flqkjvmwdh] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.8rem;
}

/* ── The stage: an SVG for the lines, HTML chips on the same grid ───────── */

.txm-stage[b-flqkjvmwdh] {
    position: relative;
    width: 100%;
    aspect-ratio: var(--txm-aspect, 1000 / 720);
    max-height: 32rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-brand-teal) 7%, transparent) 0, transparent 46%),
        var(--color-surface-raised);
    overflow: visible;
}

.txm-lines[b-flqkjvmwdh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.txm-line[b-flqkjvmwdh] {
    stroke: var(--color-brand-teal);
    stroke-width: 1.5;
    opacity: 0.7;
    vector-effect: non-scaling-stroke;
}

.txm-line--in[b-flqkjvmwdh] {
    stroke: var(--color-text-secondary);
    stroke-dasharray: 5 4;
    opacity: 0.6;
}

.txm-hub[b-flqkjvmwdh] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 240px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--color-brand);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.txm-hub-icon[b-flqkjvmwdh] {
    display: inline-flex;
    color: var(--color-brand);
    flex: none;
}

.txm-hub-body[b-flqkjvmwdh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.txm-hub-name[b-flqkjvmwdh] {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txm-role[b-flqkjvmwdh] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.txm-node[b-flqkjvmwdh] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 190px;
    z-index: 1;
}

.txm-node[b-flqkjvmwdh]  .txr {
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    font-size: 0.78rem;
    max-width: 190px;
}

.txm-node[b-flqkjvmwdh]  .txr-detail {
    display: none;
}

/*  The two folded spokes (tags, access) are not entities, so they are not TaxonomyRef chips —
    and a chip's scoped styles never reach another component — so this is the chip's look,
    restated: icon, name, a dotted detail, pill border, link hover. */
.txm-fold[b-flqkjvmwdh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 190px;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    font-size: 0.78rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.txm-fold:hover[b-flqkjvmwdh],
.txm-fold:focus-visible[b-flqkjvmwdh] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    outline: none;
}

.txm-fold-icon[b-flqkjvmwdh] {
    display: inline-flex;
    color: var(--color-text-secondary);
    flex: none;
}

.txm-fold:hover .txm-fold-icon[b-flqkjvmwdh],
.txm-fold:focus-visible .txm-fold-icon[b-flqkjvmwdh] {
    color: var(--color-brand);
}

.txm-fold-name[b-flqkjvmwdh] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.txm-fold-detail[b-flqkjvmwdh] {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.txm-fold-detail[b-flqkjvmwdh]::before {
    content: "·";
    margin-right: 0.35rem;
}

.txm-node .txm-fold-detail[b-flqkjvmwdh] {
    display: none;
}

.txm-empty[b-flqkjvmwdh] {
    position: absolute;
    left: 50%;
    top: 78%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* ── The list form: the same spokes, one per row ────────────────────────── */

.txm-list[b-flqkjvmwdh] {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0.4rem;
}

.txm-list-item[b-flqkjvmwdh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.txm-list-item .txm-role[b-flqkjvmwdh] {
    min-width: 9rem;
}

.txm-list-item[b-flqkjvmwdh]  .txr,
.txm-list-item .txm-fold[b-flqkjvmwdh] {
    white-space: normal;
    max-width: 100%;
    font-size: 0.85rem;
}

.txm-list-item[b-flqkjvmwdh]  .txr-name,
.txm-list-item .txm-fold-name[b-flqkjvmwdh] {
    overflow: visible;
    white-space: normal;
}

.txm-list-empty[b-flqkjvmwdh] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/*  The picture needs room: below a 900px viewport, or whenever the pane the map sits in is
    narrower than ~30rem (a container query — the pane can be narrow on a wide screen too),
    the same spokes render as the list instead. */
@media (max-width: 900px) {
    .txm-stage[b-flqkjvmwdh] { display: none; }
    .txm-list[b-flqkjvmwdh] { display: flex; }
}

@container (max-width: 30rem) {
    .txm-stage[b-flqkjvmwdh] { display: none; }
    .txm-list[b-flqkjvmwdh] { display: flex; }
}

/* ── Legend ─────────────────────────────────────────────────────────────── */

.txm-foot[b-flqkjvmwdh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.txm-legend[b-flqkjvmwdh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.txm-swatch[b-flqkjvmwdh] {
    display: inline-block;
    width: 1.4rem;
    height: 0;
    border-top: 2px solid var(--color-brand-teal);
}

.txm-swatch--in[b-flqkjvmwdh] {
    border-top-style: dashed;
    border-top-color: var(--color-text-secondary);
}

.txm-legend-note[b-flqkjvmwdh] {
    margin-left: auto;
    font-style: italic;
}
/* /Components/Features/Taxonomy/UsedByRail.razor.rz.scp.css */
/* Taxonomy TX0 (#800): the Used-by rail. Tokens only (style guide §11). */

.ubr[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    min-width: 0;
}

.ubr-head[b-vintfxhu1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ubr-title[b-vintfxhu1y] {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ubr-refresh[b-vintfxhu1y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.ubr-refresh:hover[b-vintfxhu1y],
.ubr-refresh:focus-visible[b-vintfxhu1y] {
    border-color: var(--color-border);
    color: var(--color-brand);
    outline: none;
}

.ubr-status[b-vintfxhu1y] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.ubr-status--error[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: var(--color-text-primary);
}

.ubr-status--error p[b-vintfxhu1y] {
    margin: 0;
}

.ubr-muted[b-vintfxhu1y] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.ubr-retry[b-vintfxhu1y] {
    align-self: flex-start;
}

.ubr-partial[b-vintfxhu1y] {
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--color-warn-bg, #fff7e6);
    color: var(--color-warn-text, #7a4b00);
    font-size: 0.8rem;
}

.ubr-section[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ubr-body[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ubr-section + .ubr-section[b-vintfxhu1y] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.ubr--inline .ubr-body[b-vintfxhu1y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.ubr--inline .ubr-section + .ubr-section[b-vintfxhu1y] {
    padding-top: 0;
    padding-left: 1.25rem;
    border-top: none;
    border-left: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .ubr--inline .ubr-body[b-vintfxhu1y] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ubr--inline .ubr-section + .ubr-section[b-vintfxhu1y] {
        padding-top: 0.75rem;
        padding-left: 0;
        border-top: 1px solid var(--color-border);
        border-left: none;
    }
}

.ubr-section-title[b-vintfxhu1y] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ubr-count[b-vintfxhu1y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-muted, #eef2f6);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.ubr-empty[b-vintfxhu1y] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.ubr-group[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ubr-group-title[b-vintfxhu1y] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ubr-list[b-vintfxhu1y] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ubr-item[b-vintfxhu1y] {
    display: flex;
    min-width: 0;
}

.ubr-item[b-vintfxhu1y]  .txr {
    max-width: 100%;
    white-space: normal;
}

.ubr-more[b-vintfxhu1y] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font-size: 0.8rem;
    cursor: pointer;
}

.ubr-more:hover[b-vintfxhu1y],
.ubr-more:focus-visible[b-vintfxhu1y] {
    text-decoration: underline;
    outline: none;
}

.ubr-foot[b-vintfxhu1y] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
/* /Components/Features/Taxonomy/ValidationRulesEditor.razor.rz.scp.css */
/*  Taxonomy TX3 (#803): the validation-rule grid, moved here from TagSetupEditor.razor.css when
    the control was extracted. Scoped CSS follows the component that renders the elements, so
    these rules had to move with the markup. Tokens only. */

.tse-rules-editor[b-b3tzf68rp0] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tse-rules[b-b3tzf68rp0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0.75rem 0 0;
}

.tse-rules th[b-b3tzf68rp0],
.tse-rules td[b-b3tzf68rp0] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.tse-rules thead th[b-b3tzf68rp0] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tse-rule-readonly[b-b3tzf68rp0] {
    color: var(--color-text-secondary);
}

.tse-rule-actions[b-b3tzf68rp0] {
    width: 2.5rem;
    text-align: right;
}

.tse-unconfirmed[b-b3tzf68rp0] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: help;
}

.tse-add-rule[b-b3tzf68rp0] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.tse-add-rule .form-input[b-b3tzf68rp0] {
    min-width: 14rem;
    flex: 0 1 auto;
}

.tse-message[b-b3tzf68rp0] {
    margin-top: 0.875rem;
}

.tse-icon-btn[b-b3tzf68rp0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.tse-icon-btn:hover:not(:disabled)[b-b3tzf68rp0] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.tse-icon-btn:disabled[b-b3tzf68rp0] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tse-icon-btn--danger:hover:not(:disabled)[b-b3tzf68rp0] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: var(--color-down);
}
/* /Components/Features/UserDetail/CopyRolesFromUser.razor.rz.scp.css */
/* UA4 (#829): "Copy roles from user…" inside the Roles tab's editor. Tokens only. */

.crf[b-te9j84ya0s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    margin-bottom: 0.5rem;
}

.crf-head[b-te9j84ya0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.crf-title[b-te9j84ya0s] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.crf-status[b-te9j84ya0s],
.crf-empty[b-te9j84ya0s],
.crf-hint[b-te9j84ya0s] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.crf-set[b-te9j84ya0s] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: none;
}

.crf-legend[b-te9j84ya0s] {
    margin-bottom: 0.35rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.crf-count[b-te9j84ya0s] {
    margin-left: 0.25rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.crf-row[b-te9j84ya0s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

.crf-row:hover[b-te9j84ya0s] {
    background: var(--color-surface);
}

.crf-row--blocked[b-te9j84ya0s] {
    cursor: not-allowed;
    opacity: 0.75;
}

.crf-flag[b-te9j84ya0s] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.crf-why[b-te9j84ya0s] {
    font-size: 0.75rem;
    color: var(--status-error-fg);
}

.crf-actions[b-te9j84ya0s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* The red "privileged" chip — the same look as the Roles tab's own (scoped CSS does not cross components). */
.crf-privileged[b-te9j84ya0s] {
    display: inline-flex;
    align-items: center;
    padding: 0 0.4rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 45%, var(--color-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-down) 9%, var(--color-surface));
    color: var(--color-down);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* /Components/Features/UserDetail/UserAccessTab.razor.rz.scp.css */
/* UA2 (#827): the user page's Access tab. Tokens only. */

.uat[b-3puo18bk9j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uat-muted[b-3puo18bk9j] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.uat-warn[b-3puo18bk9j],
.uat-gaps[b-3puo18bk9j] {
    padding: 0.6rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.85rem;
}

.uat-gaps ul[b-3puo18bk9j] {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.uat-cards[b-3puo18bk9j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.uat-card[b-3puo18bk9j] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.uat-card-label[b-3puo18bk9j] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.uat-card-value[b-3puo18bk9j] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.uat-section[b-3puo18bk9j] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.uat-h2[b-3puo18bk9j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.uat-count[b-3puo18bk9j] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}

.uat-filter[b-3puo18bk9j] {
    max-width: 22rem;
    margin-bottom: 0.6rem;
}

.uat-rows[b-3puo18bk9j],
.uat-globals[b-3puo18bk9j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.uat-row[b-3puo18bk9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.uat-row:last-child[b-3puo18bk9j] {
    border-bottom: none;
}

.uat-name[b-3puo18bk9j] {
    font-weight: 500;
    color: var(--color-text-primary);
}

a.uat-name[b-3puo18bk9j] {
    text-decoration: none;
}

a.uat-name:hover[b-3puo18bk9j],
a.uat-name:focus-visible[b-3puo18bk9j] {
    color: var(--color-brand);
    text-decoration: underline;
}

.uat-sub[b-3puo18bk9j],
.uat-via[b-3puo18bk9j] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.uat-sources[b-3puo18bk9j] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: auto;
}

.uat-source[b-3puo18bk9j] {
    padding: 0 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    text-decoration: none;
}

a.uat-source:hover[b-3puo18bk9j],
a.uat-source:focus-visible[b-3puo18bk9j] {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.uat-source--global[b-3puo18bk9j] {
    border-style: dashed;
}

.uat-global[b-3puo18bk9j] {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.uat-global:last-child[b-3puo18bk9j] {
    border-bottom: none;
}

.uat-global-head[b-3puo18bk9j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.uat-global-rows[b-3puo18bk9j] {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--color-text-primary);
}

.uat-at[b-3puo18bk9j] {
    margin: 0 0.3rem;
    color: var(--color-text-secondary);
}

/* UA6 (#831): the inline "Why can / can't they…?" checker. */
.uat-check[b-3puo18bk9j] {
    margin-top: 0.5rem;
}
/* /Components/Features/UserDetail/UserAccountSections.razor.rz.scp.css */
/* UA2 (#827): the user page's inline Account tab. Form vocabulary from app.css; only what is
   particular to the sectioned layout lives here. */

.uas[b-p3e8cgxl9i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
}

.uas-status[b-p3e8cgxl9i] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.uas-section[b-p3e8cgxl9i] {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.uas-title[b-p3e8cgxl9i] {
    margin: 0 0 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.uas-facts[b-p3e8cgxl9i] {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: 0.375rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
}

.uas-facts dt[b-p3e8cgxl9i] {
    color: var(--color-text-secondary);
}

.uas-facts dd[b-p3e8cgxl9i] {
    margin: 0;
    color: var(--color-text-primary);
}

.uas-fact-note[b-p3e8cgxl9i] {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.uas-danger[b-p3e8cgxl9i] {
    background: transparent;
}

.uas-muted[b-p3e8cgxl9i] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.uas-subprofiles[b-p3e8cgxl9i] {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.uas-subprofile[b-p3e8cgxl9i] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
}

.uas-subprofile-name[b-p3e8cgxl9i] {
    color: var(--color-text-primary);
}

.uas-subprofile-note[b-p3e8cgxl9i] {
    padding: 0 0.375rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-degraded) 14%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.uas-subprofile-remove[b-p3e8cgxl9i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
}

.uas-subprofile-remove:hover:not(:disabled)[b-p3e8cgxl9i] {
    background: color-mix(in srgb, var(--color-down) 12%, var(--color-surface));
    color: var(--color-down);
}

.uas-subprofile-remove:disabled[b-p3e8cgxl9i] {
    opacity: 0.4;
    cursor: not-allowed;
}

.uas-subprofile-add[b-p3e8cgxl9i] {
    margin-top: 0.25rem;
}

.uas-conflicts[b-p3e8cgxl9i] {
    margin: 0.75rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.uas-conflict-line[b-p3e8cgxl9i] {
    display: block;
    color: var(--color-text-secondary);
}
/* /Components/Features/UserDetail/UserHealthCard.razor.rz.scp.css */
/* UA2 (#827): the account-health card. Tokens only; status is words + icon, colour only reinforces. */

.uhc[b-12p7rhq3e2] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.uhc-title[b-12p7rhq3e2] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.uhc-facts[b-12p7rhq3e2] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.uhc-fact[b-12p7rhq3e2] {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) 1fr;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.85rem;
}

.uhc-fact dt[b-12p7rhq3e2] {
    color: var(--color-text-secondary);
}

.uhc-fact dd[b-12p7rhq3e2] {
    margin: 0;
}

.uhc-value[b-12p7rhq3e2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-primary);
}

.uhc-value--ok[b-12p7rhq3e2] { color: var(--color-healthy); }
.uhc-value--warn[b-12p7rhq3e2] { color: var(--color-degraded); font-weight: 600; }
.uhc-value--bad[b-12p7rhq3e2] { color: var(--color-down); font-weight: 600; }
.uhc-value--muted[b-12p7rhq3e2] { color: var(--color-text-secondary); }
/* /Components/Features/UserDetail/UserRolesTab.razor.rz.scp.css */
/* UA2 (#827): the user page's Roles tab. Tokens only. */

.urt[b-bz5anu1m3a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.urt-status[b-bz5anu1m3a],
.urt-note[b-bz5anu1m3a],
.urt-lede[b-bz5anu1m3a],
.urt-empty[b-bz5anu1m3a] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.urt-unavailable[b-bz5anu1m3a] {
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.urt-toolbar[b-bz5anu1m3a] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.urt-lede[b-bz5anu1m3a] {
    max-width: 46rem;
}

.urt-h2[b-bz5anu1m3a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.urt-h3[b-bz5anu1m3a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.urt-count[b-bz5anu1m3a] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}

.urt-group[b-bz5anu1m3a] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.urt-chips[b-bz5anu1m3a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.urt-chip[b-bz5anu1m3a] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    font-size: 0.85rem;
}

.urt-chip--off[b-bz5anu1m3a] {
    opacity: 0.75;
}

.urt-chip--added[b-bz5anu1m3a] {
    border-color: color-mix(in srgb, var(--color-healthy) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-healthy) 7%, var(--color-surface));
}

.urt-chip-link[b-bz5anu1m3a] {
    color: inherit;
    text-decoration: none;
}

.urt-chip-link:hover[b-bz5anu1m3a],
.urt-chip-link:focus-visible[b-bz5anu1m3a] {
    color: var(--color-brand);
    text-decoration: underline;
}

.urt-flag[b-bz5anu1m3a] {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.urt-flag--privileged[b-bz5anu1m3a] {
    border-color: color-mix(in srgb, var(--color-down) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 9%, var(--color-surface));
    color: var(--color-down);
}

.urt-flag--added[b-bz5anu1m3a] {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, var(--color-border));
    color: var(--color-text-primary);
}

.urt-via[b-bz5anu1m3a],
.urt-grants[b-bz5anu1m3a] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.urt-via[b-bz5anu1m3a]::before,
.urt-grants[b-bz5anu1m3a]::before {
    content: "·";
    margin-right: 0.35rem;
}

.urt-chip-remove[b-bz5anu1m3a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.urt-chip-remove:hover:not(:disabled)[b-bz5anu1m3a],
.urt-chip-remove:focus-visible[b-bz5anu1m3a] {
    background: color-mix(in srgb, var(--color-down) 12%, var(--color-surface));
    color: var(--color-down);
}

/* ── Editor ─────────────────────────────────────────────────────────────── */

.urt-editor[b-bz5anu1m3a] {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.urt-editor-grid[b-bz5anu1m3a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .urt-editor-grid[b-bz5anu1m3a] { grid-template-columns: 1fr; }
}

.urt-footer[b-bz5anu1m3a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.urt-delta[b-bz5anu1m3a] {
    min-height: 1.25rem;
}

.urt-delta-none[b-bz5anu1m3a] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.urt-delta-line[b-bz5anu1m3a] {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
}

.urt-delta-line--add strong[b-bz5anu1m3a] {
    color: var(--color-healthy);
}

.urt-delta-line--remove strong[b-bz5anu1m3a] {
    color: var(--color-down);
}

.urt-reason[b-bz5anu1m3a] {
    max-width: 36rem;
}

.urt-actions[b-bz5anu1m3a] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.urt-warning[b-bz5anu1m3a] {
    margin: 0.4rem 0;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--color-degraded);
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    font-size: 0.85rem;
}

.urt-warning--strong[b-bz5anu1m3a] {
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 8%, var(--color-surface));
}

.urt-confirm-reason[b-bz5anu1m3a] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

/* ── Change summary ─────────────────────────────────────────────────────── */

.urt-summary[b-bz5anu1m3a] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.urt-summary-head[b-bz5anu1m3a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.urt-summary-text[b-bz5anu1m3a] {
    margin: 0;
    padding: 0.75rem;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── UA4 (#829): safety rails ───────────────────────────────────────────── */

.urt-guard[b-bz5anu1m3a] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-down);
    border-radius: 6px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.urt-toolbar-actions[b-bz5anu1m3a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.urt-editor-head[b-bz5anu1m3a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* /Components/Features/Workflows/Designer/ReviewChangesDialog.razor.rz.scp.css */
/* Same shell as DuplicateWorkflowDialog: fixed backdrop, centred card, sticky
   head and foot so a long plan scrolls in its own body rather than the whole
   card. Scoped classes cannot be shared across components, so the shape is
   copied rather than the selectors. */

.rcd-overlay[b-pxou7phqmf] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
}

.rcd[b-pxou7phqmf] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(36rem, calc(100vw - 2rem));
    max-height: min(44rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.rcd:focus[b-pxou7phqmf] {
    outline: none;
}

.rcd-head[b-pxou7phqmf] {
    padding: 1.125rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.rcd-title[b-pxou7phqmf] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rcd-body[b-pxou7phqmf] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rcd-actions[b-pxou7phqmf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.rcd-empty[b-pxou7phqmf] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Counts ──────────────────────────────────────────────────────────────── */

.rcd-section[b-pxou7phqmf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rcd-section-title[b-pxou7phqmf] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.rcd-counts[b-pxou7phqmf] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rcd-counts li[b-pxou7phqmf] {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.rcd-counts b[b-pxou7phqmf] {
    font-weight: 600;
}

/* ── Callouts: the orphan and binding warnings, above the fold ─────────────── */

.rcd-callout[b-pxou7phqmf] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.rcd-callout p[b-pxou7phqmf] {
    margin: 0;
}

.rcd-callout p + p[b-pxou7phqmf] {
    margin-top: 0.375rem;
}

.rcd-callout--warn[b-pxou7phqmf] {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-fg);
}

/* ── Change plan ─────────────────────────────────────────────────────────── */

.rcd-plan[b-pxou7phqmf] {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
}

.rcd-plan summary[b-pxou7phqmf] {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rcd-plan-list[b-pxou7phqmf] {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── Warnings ────────────────────────────────────────────────────────────── */

.rcd-warnings[b-pxou7phqmf] {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--status-warning-fg);
}
/* /Components/Features/Workflows/Designer/WorkflowSaveReport.razor.rz.scp.css */
.wsr[b-4cux4yfxqk] {
    margin: 0.75rem 1.5rem 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.wsr-message[b-4cux4yfxqk] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.wsr-plain[b-4cux4yfxqk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wsr-headline[b-4cux4yfxqk] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.wsr-dismiss[b-4cux4yfxqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.wsr-dismiss:hover[b-4cux4yfxqk] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.wsr-goto-list[b-4cux4yfxqk] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wsr-goto[b-4cux4yfxqk] {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.wsr-goto:hover[b-4cux4yfxqk] {
    border-color: var(--color-brand-teal);
}
/* /Components/Features/Workflows/DuplicateWorkflowDialog.razor.rz.scp.css */
/* Same shape as the portal's other form dialogs (ControlCentres' New, the
   confirm register): fixed backdrop, centred card, sticky head and foot so a
   long form scrolls in its own body rather than the whole card. */

.dwd-overlay[b-9jzzs5trsn] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
}

.dwd[b-9jzzs5trsn] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(46rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.dwd:focus[b-9jzzs5trsn] {
    outline: none;
}

.dwd-head[b-9jzzs5trsn] {
    padding: 1.125rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.dwd-title[b-9jzzs5trsn] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dwd-hint[b-9jzzs5trsn] {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.dwd-body[b-9jzzs5trsn] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.dwd-actions[b-9jzzs5trsn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.dwd-section[b-9jzzs5trsn] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0;
    margin: 0;
    border: none;
}

.dwd-section-title[b-9jzzs5trsn] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.dwd-fieldset[b-9jzzs5trsn] {
    padding: 0;
}

/* ── Counts ──────────────────────────────────────────────────────────────── */

.dwd-counts[b-9jzzs5trsn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.dwd-count[b-9jzzs5trsn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.dwd-count dt[b-9jzzs5trsn] {
    color: var(--color-text-secondary);
}

.dwd-count dd[b-9jzzs5trsn] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── References ──────────────────────────────────────────────────────────── */

.dwd-empty[b-9jzzs5trsn] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dwd-ref-group[b-9jzzs5trsn] {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

.dwd-ref-group + .dwd-ref-group[b-9jzzs5trsn] {
    margin-top: 0.625rem;
}

.dwd-ref-group-head[b-9jzzs5trsn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.dwd-ref-kind[b-9jzzs5trsn] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dwd-ref-choice[b-9jzzs5trsn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
}

.dwd-ref-list[b-9jzzs5trsn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dwd-ref-item[b-9jzzs5trsn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
}

.dwd-ref-name[b-9jzzs5trsn] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.dwd-ref-uses[b-9jzzs5trsn] {
    color: var(--color-text-secondary);
    text-align: right;
}

/* ── Radios and checkboxes ───────────────────────────────────────────────── */

.dwd-radio[b-9jzzs5trsn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.dwd-radio--inline[b-9jzzs5trsn] {
    font-size: 0.75rem;
    gap: 0.3rem;
}

.dwd-radio input[type="radio"]:disabled + *[b-9jzzs5trsn] ,
.dwd-radio:has(input:disabled)[b-9jzzs5trsn] {
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.dwd-hint-inline[b-9jzzs5trsn] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.dwd-warning[b-9jzzs5trsn] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--status-warning-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.dwd-checks[b-9jzzs5trsn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dwd-note[b-9jzzs5trsn] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.dwd-warnings[b-9jzzs5trsn] {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--status-warning-fg);
}

/* ── Change plan ─────────────────────────────────────────────────────────── */

.dwd-plan[b-9jzzs5trsn] {
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    padding: 0.5rem 0.75rem;
}

.dwd-plan summary[b-9jzzs5trsn] {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dwd-plan-list[b-9jzzs5trsn] {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── Create result ───────────────────────────────────────────────────────── */

.dwd-report-banner[b-9jzzs5trsn] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.dwd-report-banner--ok[b-9jzzs5trsn] {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-fg);
}

.dwd-report-banner--warn[b-9jzzs5trsn] {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-fg);
}

.dwd-report-banner--bad[b-9jzzs5trsn] {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-fg);
}

.dwd-report-banner--quiet[b-9jzzs5trsn] {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--status-neutral-fg);
}

.dwd-report-headline[b-9jzzs5trsn] {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.dwd-report-message[b-9jzzs5trsn] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.dwd-created[b-9jzzs5trsn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dwd-created-group h4[b-9jzzs5trsn] {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.dwd-created-group ul[b-9jzzs5trsn] {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.dwd-cleanup-result[b-9jzzs5trsn] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.dwd-cleanup-result p[b-9jzzs5trsn] {
    margin: 0 0 0.25rem;
}

.dwd-cleanup-result p:last-child[b-9jzzs5trsn] {
    margin-bottom: 0;
}
/* /Components/Features/Workflows/NewWorkflowDialog.razor.rz.scp.css */
/* Same shape as DuplicateWorkflowDialog's: fixed backdrop, centred card, sticky
   head and foot so a long body scrolls in its own area rather than the whole
   card. Deliberately smaller than the duplicate dialog — there is no dry run,
   no reference list, nothing to read before the form can be shown. */

.nwd-overlay[b-7tbaget8du] {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
}

.nwd[b-7tbaget8du] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(38rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.nwd:focus[b-7tbaget8du] {
    outline: none;
}

.nwd-head[b-7tbaget8du] {
    padding: 1.125rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.nwd-title[b-7tbaget8du] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.nwd-hint[b-7tbaget8du] {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.nwd-body[b-7tbaget8du] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.nwd-actions[b-7tbaget8du] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.nwd-note[b-7tbaget8du] {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.nwd-failure-headline[b-7tbaget8du] {
    margin: 0 0 0.25rem;
    font-weight: 600;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-qmarc3y01b] {
    height: 100vh;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--top-bar-height, 56px) 1fr;
    grid-template-areas:
        "top  top"
        "side main";
    background: var(--color-surface-raised);
    overflow: hidden;
}

.app-main[b-qmarc3y01b] {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1.5rem 2rem;
}

#blazor-error-ui[b-qmarc3y01b] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-qmarc3y01b] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Session-expiry toast ─────────────────────────────────────────────────
   Slides in from the right when the DocMX token is within ~2 min of expiry.
   The user can dismiss or click "Sign in" to round-trip through OAuth and
   land back on the same page. */
.session-toast[b-qmarc3y01b] {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 1100;
    pointer-events: none;
    transform: translateX(calc(100% + 32px));
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 240ms ease-out;
    opacity: 0;
}

.session-toast.show[b-qmarc3y01b] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.session-toast-card[b-qmarc3y01b] {
    display: flex;
    gap: 0.85rem;
    width: 360px;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12),
                0  2px  6px rgba(15, 23, 42, 0.06);
}

.session-toast-icon[b-qmarc3y01b] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.12);
    color: #b45309;
}

.session-toast-body[b-qmarc3y01b] {
    flex: 1 1 auto;
    min-width: 0;
}

.session-toast-title[b-qmarc3y01b] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.session-toast-text[b-qmarc3y01b] {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.session-toast-actions[b-qmarc3y01b] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-bar[b-wruiblphif] {
    grid-area: top;
    background-color: var(--color-brand);
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem;
    height: var(--top-bar-height, 56px);
    box-shadow: 0 2px 8px rgba(7, 70, 132, 0.15);
    border-bottom: 3px solid var(--system-colour, transparent);
    z-index: 20;
}

.brand[b-wruiblphif] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
}

.brand-icon[b-wruiblphif] {
    display: block;
}

.top-bar-spacer[b-wruiblphif] {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 1rem;
}

/* ── AI chat toggle ────────────────────────────────────── */

.chat-toggle-btn[b-wruiblphif] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    color: white;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.chat-toggle-btn:hover[b-wruiblphif] {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.38);
}

.chat-toggle-btn:disabled[b-wruiblphif] {
    cursor: not-allowed;
}

.chat-toggle-btn--off[b-wruiblphif] {
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-toggle-btn--off:hover[b-wruiblphif] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-toggle-label[b-wruiblphif] {
    letter-spacing: 0.02em;
}

/* ── Sign-in link ──────────────────────────────────────── */

.signin-link[b-wruiblphif] {
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    color: white;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.signin-link:hover[b-wruiblphif] {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.38);
}

/* ── User menu dropdown ────────────────────────────────── */

.user-menu[b-wruiblphif] {
    position: relative;
}

.user-menu-trigger[b-wruiblphif] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.35rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    color: white;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.user-menu-trigger:hover[b-wruiblphif],
.user-menu--open .user-menu-trigger[b-wruiblphif] {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.38);
}

.user-menu-avatar[b-wruiblphif] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-brand-teal);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: var(--font-title);
}

.user-menu-name[b-wruiblphif] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-chev[b-wruiblphif] {
    opacity: 0.75;
    transition: transform 0.15s;
}

.user-menu--open .user-menu-chev[b-wruiblphif] {
    transform: rotate(180deg);
}

.user-menu-backdrop[b-wruiblphif] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.user-menu-panel[b-wruiblphif] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card), 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 0.375rem;
    z-index: 50;
    overflow: hidden;
}

.user-menu-header[b-wruiblphif] {
    padding: 0.625rem 0.75rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.375rem;
}

.user-menu-header-name[b-wruiblphif] {
    font-family: var(--font-title);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-header-sub[b-wruiblphif] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}

.user-menu-item[b-wruiblphif] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) * 0.75);
    color: var(--color-text-primary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.12s;
}

.user-menu-item:hover[b-wruiblphif] {
    background: var(--color-surface-raised);
}
/* /Components/Layout/SettingsAdminLayout.razor.rz.scp.css */
/* Mirrors the control-plane gate styling so denied states read consistently. */
.gate-checking[b-cyo8j80yjo] {
    color: var(--text-muted, #6b7280);
    padding: 2rem 0;
}

.gate-denied[b-cyo8j80yjo] {
    max-width: 32rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fef2f2;
}

.gate-denied h2[b-cyo8j80yjo] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #991b1b;
}

.gate-denied p[b-cyo8j80yjo] {
    margin: 0;
    font-size: 0.9rem;
    color: #7f1d1d;
}
/* /Components/Layout/SideNav.razor.rz.scp.css */
.side-nav[b-xz7d7geijb] {
    grid-area: side;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* A grid item's min-height defaults to its content, so without this the aside grew past
       the viewport and the shell's overflow:hidden clipped the bottom of the menu instead of
       letting .side-nav-body scroll. */
    min-height: 0;
    overflow: hidden;
    width: 240px;
    transition: width 0.2s ease;
}

.side-nav--collapsed[b-xz7d7geijb] {
    width: 68px;
}

.side-nav-body[b-xz7d7geijb] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    /* Keeps the links from shifting sideways when the bar appears. */
    scrollbar-gutter: stable;
}

/* A slim scrollbar that stays visible whenever the menu overflows.
   Styling ::-webkit-scrollbar is what opts Chromium and Safari out of macOS overlay
   scrollbars, which otherwise reserve the gutter but paint nothing until a scroll is in
   flight — a long menu then looks cut off with no bar to drag.
   The standard scrollbar-width / scrollbar-color properties are deliberately NOT set
   alongside them: Chromium ignores every ::-webkit-scrollbar rule on an element that uses
   either one, so setting both silently disabled the custom bar and handed us the overlay
   behaviour back. Firefox, which has no ::-webkit-scrollbar, gets them below instead. */
@supports not selector(::-webkit-scrollbar) {
    .side-nav-body[b-xz7d7geijb] {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
}

.side-nav-body[b-xz7d7geijb]::-webkit-scrollbar {
    width: 10px;
}

.side-nav-body[b-xz7d7geijb]::-webkit-scrollbar-track {
    background: transparent;
}

.side-nav-body[b-xz7d7geijb]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid var(--color-surface);
}

.side-nav-body[b-xz7d7geijb]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.side-nav--collapsed .side-nav-body[b-xz7d7geijb] {
    padding: 1rem 0.5rem;
}

.side-nav-list[b-xz7d7geijb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Each group of areas is its own list; a hairline divider separates the groups. */
.side-nav-list + .side-nav-list[b-xz7d7geijb] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

[b-xz7d7geijb] .side-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) * 0.75);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    position: relative;
    transition: background 0.12s, color 0.12s;
}

[b-xz7d7geijb] .side-nav-link:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

[b-xz7d7geijb] .side-nav-link--active {
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    color: var(--color-brand);
    font-weight: 600;
}

[b-xz7d7geijb] .side-nav-link--active::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-brand);
}

.side-nav--collapsed[b-xz7d7geijb]  .side-nav-link {
    justify-content: center;
    padding: 0.5rem;
}

.side-nav--collapsed[b-xz7d7geijb]  .side-nav-link--active::before {
    left: -0.5rem;
}

[b-xz7d7geijb] .side-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

[b-xz7d7geijb] .side-nav-icon svg {
    width: 18px;
    height: 18px;
}

[b-xz7d7geijb] .side-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-nav--collapsed[b-xz7d7geijb]  .side-nav-text {
    display: none;
}

/* ── Footer / collapse toggle ────────────────────────────── */

.side-nav-footer[b-xz7d7geijb] {
    border-top: 1px solid var(--color-border);
    padding: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

.side-nav--collapsed .side-nav-footer[b-xz7d7geijb] {
    justify-content: center;
}

.side-nav-collapse[b-xz7d7geijb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.side-nav-collapse:hover[b-xz7d7geijb] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.side-nav-collapse-icon[b-xz7d7geijb] {
    transition: transform 0.2s ease;
}

.side-nav--collapsed .side-nav-collapse-icon[b-xz7d7geijb] {
    transform: rotate(180deg);
}

/* ── Area badge (alerts needing attention, software update available) ───── */
/* A small amber pill after the label; collapses to a dot on the icon when the
   rail is collapsed so "there is an update" survives losing the text. */
[b-xz7d7geijb] .side-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    color: #7c4a03;
    background: #fdecc8;
    border: 1px solid #f3cf8b;
}

.side-nav--collapsed[b-xz7d7geijb]  .side-nav-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #f59e0b;
    border-color: #fff;
    font-size: 0;
    overflow: hidden;
}

/* ── Expandable areas ───────────────────────────────────────────────────── */
/* The area link fills the row; the chevron button sits at its right edge. */
.side-nav-row[b-xz7d7geijb] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.side-nav-row[b-xz7d7geijb]  .side-nav-link,
.side-nav-row .side-nav-link[b-xz7d7geijb] {
    flex: 1;
    min-width: 0;
}

.side-nav-expander[b-xz7d7geijb] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) * 0.75);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.side-nav-expander:hover[b-xz7d7geijb] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.side-nav-expander:focus-visible[b-xz7d7geijb] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.side-nav-expander svg[b-xz7d7geijb] {
    transition: transform 0.15s ease;
}

.side-nav-expander--open svg[b-xz7d7geijb] {
    transform: rotate(90deg);
}

/* The area holds the current page, which is shown lit in its own sub-list below. */
.side-nav-link--within[b-xz7d7geijb] {
    color: var(--color-brand);
    font-weight: 600;
}

/* Pages of an open area: indented under the area's icon, with a hairline guide. */
.side-nav-sublist[b-xz7d7geijb] {
    list-style: none;
    margin: 0.125rem 0 0.375rem 1.6rem;
    padding: 0 0 0 0.5rem;
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.side-nav-sublink[b-xz7d7geijb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: calc(var(--radius) * 0.75);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background 0.12s, color 0.12s;
}

.side-nav-sublink:hover[b-xz7d7geijb] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.side-nav-sublink--active[b-xz7d7geijb] {
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    color: var(--color-brand);
    font-weight: 600;
}
/* /Components/Monitor/AlertRulesEditor.razor.rz.scp.css */
.are-rule[b-8hpigr66pn] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 16rem;
    max-width: 34rem;
}

.are-title[b-8hpigr66pn] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.are-desc[b-8hpigr66pn] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.are-meta[b-8hpigr66pn] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.are-check[b-8hpigr66pn] {
    width: 1rem;
    height: 1rem;
}

.are-select[b-8hpigr66pn] {
    min-width: 7rem;
}

.are-threshold[b-8hpigr66pn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.are-number[b-8hpigr66pn] {
    width: 6rem;
}

.are-unit[b-8hpigr66pn],
.are-none[b-8hpigr66pn] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.are-actions[b-8hpigr66pn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.are-btn[b-8hpigr66pn] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.are-btn:disabled[b-8hpigr66pn] {
    opacity: 0.55;
    cursor: not-allowed;
}

.are-reset[b-8hpigr66pn] {
    background: none;
    border: none;
    padding: 0.25rem 0.25rem;
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Monitor/AuditEntryDrawer.razor.rz.scp.css */
.aed-fields[b-xxe3dzqm1r] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
}

.aed-fields dt[b-xxe3dzqm1r] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.aed-fields dd[b-xxe3dzqm1r] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
}

.aed-mono[b-xxe3dzqm1r] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
}

.aed-muted[b-xxe3dzqm1r] {
    color: var(--color-text-secondary);
}

.aed-pre[b-xxe3dzqm1r] {
    white-space: pre-wrap;
}

.aed-links[b-xxe3dzqm1r] {
    list-style: none;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
}
/* /Components/Monitor/AuditIntegrityBadge.razor.rz.scp.css */
.aib[b-n20pmc4nvc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.aib-text[b-n20pmc4nvc] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}
/* /Components/Monitor/AuditSubject.razor.rz.scp.css */
.as-muted[b-07so52j0fj] {
    color: var(--color-text-secondary);
}
/* /Components/Monitor/AuditTimelinePanel.razor.rz.scp.css */
.atp-facets[b-iufiow8kau] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.atp-chips[b-iufiow8kau] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.atp-chip[b-iufiow8kau] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
}

.atp-chip[aria-pressed="true"][b-iufiow8kau] {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-fg);
    font-weight: 600;
}

.atp-chip:disabled[b-iufiow8kau] {
    cursor: not-allowed;
    opacity: 0.7;
}

.atp-chip-count[b-iufiow8kau] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.atp-filters[b-iufiow8kau] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.atp-field[b-iufiow8kau] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 14rem;
}

.atp-field--grow[b-iufiow8kau] {
    flex: 1 1 16rem;
}

.atp-field-label[b-iufiow8kau] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.atp-user-chip[b-iufiow8kau] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.atp-chip-clear[b-iufiow8kau] {
    padding: 0 0.25rem;
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.atp-note[b-iufiow8kau] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.atp-muted[b-iufiow8kau] {
    color: var(--color-text-secondary);
}

.atp-mono[b-iufiow8kau] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
}

.atp-source[b-iufiow8kau] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    border: 1px solid var(--status-neutral-border);
}

.atp-source--docmxadminchange[b-iufiow8kau] {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-color: var(--status-info-border);
}

.atp-detail[b-iufiow8kau] {
    display: block;
    max-width: 32rem;
    overflow-wrap: anywhere;
}

.atp-values[b-iufiow8kau] {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* GOV4 (#959): the accountability column — a verdict pill, and the reason the change was made. */
.atp-recon[b-iufiow8kau] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.atp-reason[b-iufiow8kau] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}
/* /Components/Monitor/CaptureServiceCard.razor.rz.scp.css */
.cap-card[b-6v331vzt4z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.cap-card-head[b-6v331vzt4z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cap-card-title[b-6v331vzt4z] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.cap-stages[b-6v331vzt4z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cap-stage;
}

.cap-stage[b-6v331vzt4z] {
    counter-increment: cap-stage;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
}

.cap-stage[b-6v331vzt4z]::before {
    content: counter(cap-stage) ". ";
    color: var(--color-text-secondary);
}

.cap-facts[b-6v331vzt4z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}

.cap-facts dt[b-6v331vzt4z] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.cap-facts dd[b-6v331vzt4z] {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}
/* /Components/Monitor/CollectorHealthPanel.razor.rz.scp.css */
.chp[b-utio72j65r] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.chp-head[b-utio72j65r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chp-h2[b-utio72j65r] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.chp-reason[b-utio72j65r] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.chp-facts[b-utio72j65r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0;
}

.chp-facts dt[b-utio72j65r] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.chp-facts dd[b-utio72j65r] {
    margin: 0.1rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.chp-issues[b-utio72j65r] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.chp-issues ul[b-utio72j65r] {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.chp-actions[b-utio72j65r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chp-why[b-utio72j65r] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
/* /Components/Monitor/FunnelBar.razor.rz.scp.css */
.fb[b-q05w1we6vb] {
    display: flex;
    gap: 2px;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-surface-raised);
}

.fb--compact[b-q05w1we6vb] {
    height: 8px;
    min-width: 120px;
}

.fb-empty[b-q05w1we6vb] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fb-seg[b-q05w1we6vb] {
    flex-basis: 0;
    min-width: 3px;
}

.fb-intake[b-q05w1we6vb] { background: var(--status-info-border); }
.fb-reading[b-q05w1we6vb] { background: var(--status-info-fg); }
.fb-understanding[b-q05w1we6vb] { background: var(--color-brand-teal); }
.fb-delivering[b-q05w1we6vb] { background: var(--color-brand); }
.fb-exceptions[b-q05w1we6vb] { background: var(--color-degraded); }
.fb-processed[b-q05w1we6vb] { background: var(--color-healthy); }
.fb-rejected[b-q05w1we6vb] { background: var(--color-down); }
.fb-cancelled[b-q05w1we6vb] { background: var(--color-unknown); }
.fb-other[b-q05w1we6vb] { background: var(--status-neutral-border); }
/* /Components/Monitor/MonitorDomainTileCard.razor.rz.scp.css */
.mdt[b-zc1eco8h78] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-unknown);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

a.mdt:hover[b-zc1eco8h78] {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

a.mdt:focus-visible[b-zc1eco8h78] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.mdt--healthy[b-zc1eco8h78],
.mdt--running[b-zc1eco8h78] { border-top-color: var(--color-healthy); }
.mdt--warning[b-zc1eco8h78] { border-top-color: var(--color-degraded); }
.mdt--failed[b-zc1eco8h78],
.mdt--offline[b-zc1eco8h78] { border-top-color: var(--color-down); }
.mdt--waiting[b-zc1eco8h78],
.mdt--cancelled[b-zc1eco8h78],
.mdt--disabled[b-zc1eco8h78],
.mdt--unknown[b-zc1eco8h78],
.mdt--nodata[b-zc1eco8h78],
.mdt--planned[b-zc1eco8h78] { border-top-color: var(--color-unknown); }

.mdt--planned[b-zc1eco8h78] {
    background: var(--color-surface-raised);
    border-style: dashed;
    border-top-style: solid;
    box-shadow: none;
}

.mdt-head[b-zc1eco8h78] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.mdt-title[b-zc1eco8h78] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mdt-planned[b-zc1eco8h78] {
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border: 1px solid var(--status-neutral-border);
    border-radius: 999px;
}

.mdt-figure[b-zc1eco8h78] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

.mdt-number[b-zc1eco8h78] {
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.mdt-figure--none .mdt-number[b-zc1eco8h78] { color: var(--color-unknown); }

.mdt-label[b-zc1eco8h78] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.mdt-detail[b-zc1eco8h78] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.mdt-state[b-zc1eco8h78] {
    align-self: flex-start;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--status-warning-fg);
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
}

.mdt-state--noaccess[b-zc1eco8h78],
.mdt-state--notonthissite[b-zc1eco8h78] {
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.mdt-state--unavailable[b-zc1eco8h78] {
    color: var(--status-error-fg);
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
}

.mdt--compact[b-zc1eco8h78] { padding: 0.7rem 0.8rem; gap: 0.35rem; }
.mdt--compact .mdt-number[b-zc1eco8h78] { font-size: 1.25rem; }
.mdt--compact .mdt-title[b-zc1eco8h78] { font-size: 0.85rem; }
.mdt--compact .mdt-head[b-zc1eco8h78] { flex-direction: column; gap: 0.3rem; }
/* /Components/Monitor/MonitorSparkline.razor.rz.scp.css */
.msp[b-klxhxne0b1] { line-height: 0; }

.msp-chart[b-klxhxne0b1] {
    display: block;
    width: 100%;
    height: 28px;
}

.msp-bar[b-klxhxne0b1] { fill: var(--color-unknown); }
.msp-bar--failed[b-klxhxne0b1] { fill: var(--color-down); }

.msp-note[b-klxhxne0b1] {
    margin: 0;
    min-height: 28px;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Monitor/MonitorStatusBoard.razor.rz.scp.css */
.msb-grid[b-fgc5u8hp77] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msb--compact .msb-grid[b-fgc5u8hp77] {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.msb-cell[b-fgc5u8hp77] {
    display: flex;
    min-width: 0;
}

.msb-cell[b-fgc5u8hp77]  .mdt { flex: 1; }
/* /Components/Monitor/MonitorStatusWidget.razor.rz.scp.css */
.msw-body[b-b3m97o677n] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.msw-line[b-b3m97o677n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--color-text-primary);
}

.msw-error[b-b3m97o677n] {
    margin: 0;
    color: var(--status-error-fg);
}
/* /Components/Monitor/ServiceCard.razor.rz.scp.css */
.svc-card[b-svlnn62vaw] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-unknown);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.svc-card--idle[b-svlnn62vaw],
.svc-card--running[b-svlnn62vaw] { border-left-color: var(--color-healthy); }
.svc-card--stuck[b-svlnn62vaw] { border-left-color: var(--color-degraded); }
.svc-card--silent[b-svlnn62vaw] { border-left-color: var(--color-down); }
.svc-card--due[b-svlnn62vaw],
.svc-card--disabled[b-svlnn62vaw] { border-left-color: var(--color-unknown); }

.svc-card-head[b-svlnn62vaw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.svc-card-title[b-svlnn62vaw] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.svc-functions[b-svlnn62vaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.svc-chips[b-svlnn62vaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-chip[b-svlnn62vaw] {
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
}

.svc-chip--sub[b-svlnn62vaw] {
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.svc-runs[b-svlnn62vaw] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.svc-tick[b-svlnn62vaw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.svc-tick-text[b-svlnn62vaw],
.svc-check[b-svlnn62vaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.svc-k[b-svlnn62vaw] {
    min-width: 7.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.svc-v[b-svlnn62vaw] {
    color: var(--color-text-primary);
}

.svc-bar[b-svlnn62vaw] {
    position: relative;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    overflow: hidden;
}

.svc-bar-fill[b-svlnn62vaw] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--color-healthy);
}

.svc-bar--late .svc-bar-fill[b-svlnn62vaw] { background: var(--color-degraded); }
.svc-bar--silent .svc-bar-fill[b-svlnn62vaw] { background: var(--color-down); }

/* A disabled service is expected to be quiet: its old heartbeat is not an alarm. */
.svc-card--disabled .svc-bar .svc-bar-fill[b-svlnn62vaw] { background: var(--color-unknown); }

.svc-bar-poll[b-svlnn62vaw] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-text-secondary);
    opacity: 0.6;
}

.svc-tick-caption[b-svlnn62vaw] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.svc-facts[b-svlnn62vaw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
}

.svc-facts dt[b-svlnn62vaw] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.svc-facts dd[b-svlnn62vaw] {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.svc-fact--warn dd[b-svlnn62vaw] {
    color: var(--status-warning-fg);
    font-weight: 600;
}

.svc-check-v[b-svlnn62vaw] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.svc-check--ok .svc-check-v[b-svlnn62vaw] { color: var(--status-success-fg); }
.svc-check--fail .svc-check-v[b-svlnn62vaw] { color: var(--status-error-fg); }
.svc-check--none .svc-check-v[b-svlnn62vaw] { color: var(--color-text-secondary); }

.svc-check-msg[b-svlnn62vaw] {
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.svc-actions[b-svlnn62vaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}

.svc-actions .svc-action[disabled][b-svlnn62vaw] {
    cursor: not-allowed;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border-style: dashed;
}

.svc-actions .svc-action[disabled]:hover[b-svlnn62vaw] {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}
/* /Components/Monitor/ServiceHeartbeatStrip.razor.rz.scp.css */
.hbs[b-ss94epdqlq] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hbs-head[b-ss94epdqlq] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.hbs-uptime[b-ss94epdqlq] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.hbs-track[b-ss94epdqlq] {
    display: block;
    width: 100%;
    height: 0.75rem;
    border-radius: 3px;
}

.hbs-track--empty[b-ss94epdqlq] {
    border: 1px dashed var(--color-border);
    background: transparent;
}

.hbs-b--up[b-ss94epdqlq] { fill: var(--color-healthy); }
.hbs-b--degraded[b-ss94epdqlq] { fill: var(--color-degraded); }
.hbs-b--down[b-ss94epdqlq] { fill: var(--color-down); }
.hbs-b--nodata[b-ss94epdqlq] { fill: var(--color-border); }

.hbs-reason[b-ss94epdqlq] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Monitor/SignInsPanel.razor.rz.scp.css */
.sip-grid[b-weixa3yqk5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1000px) {
    .sip-grid[b-weixa3yqk5] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sip-card[b-weixa3yqk5] {
    min-width: 0;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.sip-card--wide[b-weixa3yqk5] {
    grid-column: 1 / -1;
}

.sip-title[b-weixa3yqk5] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sip-note[b-weixa3yqk5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.sip-muted[b-weixa3yqk5] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.sip-unavailable[b-weixa3yqk5] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.sip-summary[b-weixa3yqk5] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.sip-table[b-weixa3yqk5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sip-table th[b-weixa3yqk5],
.sip-table td[b-weixa3yqk5] {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.sip-table thead th[b-weixa3yqk5] {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.sip-table tbody th[b-weixa3yqk5] {
    font-weight: 500;
}

.sip-num[b-weixa3yqk5] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.sip-mono[b-weixa3yqk5] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
}

.sip-link[b-weixa3yqk5] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-brand);
    text-decoration: underline;
    cursor: pointer;
}

.sip-tag[b-weixa3yqk5] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--status-error-fg);
    background: var(--status-error-bg);
    border-radius: 999px;
}

.sip-list[b-weixa3yqk5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sip-list-row[b-weixa3yqk5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.sip-list-detail[b-weixa3yqk5] {
    grid-column: 2 / -1;
    color: var(--color-text-secondary);
}
/* /Components/Monitor/TraceChainView.razor.rz.scp.css */
.tc[b-18trsdgp33] {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.tc-head[b-18trsdgp33] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}

.tc-title[b-18trsdgp33] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.tc-kind[b-18trsdgp33] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tc-inferred-tag[b-18trsdgp33] {
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px dashed var(--status-info-border);
    border-radius: 999px;
}

.tc-when[b-18trsdgp33] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── The steps: left to right, wrapping; stacked on narrow screens ── */

.tc-nodes[b-18trsdgp33] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-step[b-18trsdgp33] {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.tc-link[b-18trsdgp33] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.5rem;
    flex: 0 0 auto;
}

.tc-line[b-18trsdgp33] {
    display: block;
    width: 100%;
    height: 0;
    border-top: 2px solid var(--color-text-secondary);
}

.tc-line[b-18trsdgp33]::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--color-text-secondary);
    border-right: 2px solid var(--color-text-secondary);
    transform: translateY(-50%) rotate(45deg);
}

.tc-link--inferred .tc-line[b-18trsdgp33] {
    border-top-style: dashed;
    border-top-color: var(--status-info-fg);
}

.tc-link--inferred .tc-line[b-18trsdgp33]::after {
    border-color: var(--status-info-fg);
}

.tc-link-label[b-18trsdgp33] {
    position: absolute;
    top: calc(50% + 0.35rem);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--status-info-fg);
}

.tc-node[b-18trsdgp33] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 15rem;
    max-width: 100%;
    padding: 0.65rem 0.8rem;
    background: var(--color-surface-raised, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}

.tc-node--matched[b-18trsdgp33] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand);
}

.tc-stage[b-18trsdgp33] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.tc-node-title[b-18trsdgp33] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.tc-node-title a[b-18trsdgp33] {
    color: var(--color-brand);
    text-decoration: none;
}

.tc-node-title a:hover[b-18trsdgp33],
.tc-node-title a:focus-visible[b-18trsdgp33] {
    text-decoration: underline;
}

.tc-sub[b-18trsdgp33] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.tc-meta[b-18trsdgp33] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tc-matched[b-18trsdgp33] {
    align-self: flex-start;
    margin: 0.15rem 0 0;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: 999px;
}

.tc-facts[b-18trsdgp33] {
    margin: 0.2rem 0 0;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.tc-link-note[b-18trsdgp33] {
    margin: 0.3rem 0 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px dashed var(--status-info-border);
    border-radius: var(--radius);
}

.tc-note[b-18trsdgp33] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

@media (max-width: 720px) {
    .tc-nodes[b-18trsdgp33] { flex-direction: column; }
    .tc-step[b-18trsdgp33] { flex-direction: column; width: 100%; }
    .tc-node[b-18trsdgp33] { width: 100%; }
    .tc-link[b-18trsdgp33] { width: auto; height: 1.75rem; }
    .tc-line[b-18trsdgp33] { width: 0; height: 100%; border-top: 0; border-left: 2px solid var(--color-text-secondary); }
    .tc-link--inferred .tc-line[b-18trsdgp33] { border-left-style: dashed; border-left-color: var(--status-info-fg); }
    .tc-line[b-18trsdgp33]::after { display: none; }
    .tc-link-label[b-18trsdgp33] { top: auto; left: calc(50% + 0.5rem); }
}
/* /Components/Monitor/TraceSearchBox.razor.rz.scp.css */
.tsb[b-hiv5sfis4e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.tsb-label[b-hiv5sfis4e] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.tsb-input[b-hiv5sfis4e] {
    flex: 1 1 20rem;
    min-width: 0;
}
/* /Components/Monitor/TransferActivityPanel.razor.rz.scp.css */
.tap[b-lwvj90kcey] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.tap-head[b-lwvj90kcey] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.tap-h2[b-lwvj90kcey] {
    margin: 0;
    font-size: 1.125rem;
}

.tap-h3[b-lwvj90kcey] {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.tap-controls[b-lwvj90kcey] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.tap-path[b-lwvj90kcey] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* The global .form-input is tall and content-box; this sits beside the window pills. */
.tap .tap-path select.form-input[b-lwvj90kcey] {
    min-width: 12rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
}

.tap-kpis[b-lwvj90kcey] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.tap-kpi[b-lwvj90kcey] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.tap-kpi--failed[b-lwvj90kcey] {
    border-top: 3px solid var(--color-down);
}

.tap-kpi-n[b-lwvj90kcey] {
    font-family: var(--font-title);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tap-kpi-l[b-lwvj90kcey] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.tap-table[b-lwvj90kcey] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

.tap-table th[b-lwvj90kcey] {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.tap-table td[b-lwvj90kcey] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.tap-table tbody tr:last-child td[b-lwvj90kcey] {
    border-bottom: none;
}

.tap-num[b-lwvj90kcey] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tap-table th.tap-num[b-lwvj90kcey] {
    text-align: right;
}

.tap-status[b-lwvj90kcey] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.tap-status--ok[b-lwvj90kcey] {
    color: var(--status-success-fg);
}
/* /Components/Monitor/TransferAgentHealthPanel.razor.rz.scp.css */
.tah[b-u5ru7dp3ja] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.tah-h2[b-u5ru7dp3ja] {
    margin: 0;
    font-size: 1.125rem;
}

.tah-h3[b-u5ru7dp3ja] {
    margin: 0;
    font-size: 0.9375rem;
}

.tah-timeline[b-u5ru7dp3ja] {
    padding: 0.75rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.tah-card[b-u5ru7dp3ja] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.tah-card-head[b-u5ru7dp3ja] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.tah-reported[b-u5ru7dp3ja] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.tah-facts[b-u5ru7dp3ja] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.tah-fact--wide[b-u5ru7dp3ja] {
    grid-column: span 2;
}

.tah-fact dt[b-u5ru7dp3ja] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.tah-fact dd[b-u5ru7dp3ja] {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tah-meter[b-u5ru7dp3ja] {
    display: block;
    height: 0.4rem;
    margin-top: 0.35rem;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.tah-meter-fill[b-u5ru7dp3ja] {
    display: block;
    height: 100%;
    background: var(--color-brand-teal);
}

.tah-meter--high .tah-meter-fill[b-u5ru7dp3ja] {
    background: var(--color-degraded);
}

.tah-status[b-u5ru7dp3ja] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .tah-fact--wide[b-u5ru7dp3ja] {
        grid-column: auto;
    }
}
/* /Components/Monitor/TransferFilesChart.razor.rz.scp.css */
.tfc-chart[b-4p20wftr0w] {
    min-height: 15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem 0.25rem;
}

.tfc-empty[b-4p20wftr0w] {
    margin: 0;
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}
/* /Components/Pages/Access/AccessCheck.razor.rz.scp.css */
/* UA6 (#831): the access checker page. */

.acc[b-7mxreo2gb9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.acc-panel[b-7mxreo2gb9] {
    min-width: 0;
}
/* /Components/Pages/Access/AccessOverviewPage.razor.rz.scp.css */
.ao[b-rz8fqkl2xd] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.ao-status[b-rz8fqkl2xd],
.ao-note[b-rz8fqkl2xd] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ao-fresh[b-rz8fqkl2xd] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    align-self: center;
}

.ao-section h2[b-rz8fqkl2xd] {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ao-section-head[b-rz8fqkl2xd] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ao-section-sub[b-rz8fqkl2xd] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ao-kpis[b-rz8fqkl2xd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.ao-charts[b-rz8fqkl2xd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.ao-card[b-rz8fqkl2xd] {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ao-card-title[b-rz8fqkl2xd] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ao-seat-list[b-rz8fqkl2xd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.ao-seat-list a[b-rz8fqkl2xd],
.ao-more[b-rz8fqkl2xd] {
    color: var(--color-brand);
}

.ao-more[b-rz8fqkl2xd] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}
/* /Components/Pages/Access/RoleOverlap.razor.rz.scp.css */
.ro-page[b-upq6u6cato] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    max-width: 1280px;
}

.ro-crumbs[b-upq6u6cato] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ro-crumbs a[b-upq6u6cato] {
    color: var(--color-text-secondary);
}
/* /Components/Pages/Access/SeparationOfDutiesRules.razor.rz.scp.css */
/* GOV1 (#956): the separation-of-duties rules page. */
.sod[b-2o9dp83sq0] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sod-status[b-2o9dp83sq0],
.sod-meta[b-2o9dp83sq0] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.sod-banner[b-2o9dp83sq0] {
    padding: 0.75rem 1rem;
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    background: #FFFBEB;
    color: #78350F;
    font-size: 0.875rem;
}

.sod-list[b-2o9dp83sq0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sod-rule[b-2o9dp83sq0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem) auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem 1.25rem;
}

.sod-rule--off .sod-rule-main[b-2o9dp83sq0] {
    opacity: 0.7;
}

.sod-rule-head[b-2o9dp83sq0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sod-rule-name[b-2o9dp83sq0] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.sod-rule-combo[b-2o9dp83sq0] {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.sod-micro[b-2o9dp83sq0] {
    margin-right: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sod-rule-desc[b-2o9dp83sq0],
.sod-rule-stamp[b-2o9dp83sq0] {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.sod-rule-check[b-2o9dp83sq0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.8125rem;
}

.sod-check-count[b-2o9dp83sq0] {
    margin: 0;
}

.sod-check-groups[b-2o9dp83sq0] {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.sod-check-groups li[b-2o9dp83sq0] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--color-border);
}

.sod-check-n[b-2o9dp83sq0] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.sod-check-note[b-2o9dp83sq0] {
    margin: 0;
    color: var(--color-text-secondary);
}

.sod-check-note--warn[b-2o9dp83sq0] {
    color: #78350F;
}

.sod-rule-actions[b-2o9dp83sq0] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sod-delete:hover:not(:disabled)[b-2o9dp83sq0] {
    border-color: var(--color-down);
    color: #991B1B;
}

@media (max-width: 1100px) {
    .sod-rule[b-2o9dp83sq0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sod-rule-actions[b-2o9dp83sq0] {
        flex-direction: row;
    }
}
/* /Components/Pages/Access/UserPage.razor.rz.scp.css */
/* UA2 (#827): the user page. Tokens only. */

.upg[b-g1swy8xcf7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 2rem 3rem;
    max-width: 90rem;
}

.upg-back[b-g1swy8xcf7] {
    align-self: flex-start;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
}

.upg-back:hover[b-g1swy8xcf7],
.upg-back:focus-visible[b-g1swy8xcf7] {
    color: var(--color-brand);
    text-decoration: underline;
}

.upg-status[b-g1swy8xcf7],
.upg-muted[b-g1swy8xcf7] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.upg-empty p[b-g1swy8xcf7] {
    color: var(--color-text-secondary);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.upg-header[b-g1swy8xcf7] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.upg-avatar[b-g1swy8xcf7] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface));
    color: var(--color-brand);
    font-size: 1.15rem;
    font-weight: 600;
}

.upg-heading[b-g1swy8xcf7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.upg-name[b-g1swy8xcf7] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.upg-sub[b-g1swy8xcf7] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.upg-chips[b-g1swy8xcf7] {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.upg-chip[b-g1swy8xcf7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
}

.upg-chip--ok[b-g1swy8xcf7] {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, var(--color-border));
    color: var(--color-healthy);
}

.upg-chip--warn[b-g1swy8xcf7] {
    border-color: color-mix(in srgb, var(--color-degraded) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
}

.upg-chip--bad[b-g1swy8xcf7] {
    border-color: color-mix(in srgb, var(--color-down) 45%, var(--color-border));
    color: var(--color-down);
}

.upg-chip--quiet[b-g1swy8xcf7] {
    border-style: dashed;
    color: var(--color-text-secondary);
}

.upg-actions[b-g1swy8xcf7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */

.upg-panel[b-g1swy8xcf7] {
    min-width: 0;
}

.upg-overview[b-g1swy8xcf7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .upg-overview[b-g1swy8xcf7] { grid-template-columns: 1fr; }
}

.upg-overview-side[b-g1swy8xcf7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upg-reach[b-g1swy8xcf7] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.upg-h2[b-g1swy8xcf7] {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.upg-reach-list[b-g1swy8xcf7] {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.upg-link[b-g1swy8xcf7] {
    color: var(--color-brand);
    font-size: 0.85rem;
}

@media (max-width: 720px) {
    .upg[b-g1swy8xcf7] { padding: 1rem; }
    .upg-header[b-g1swy8xcf7] { flex-direction: column; }
    .upg-actions[b-g1swy8xcf7] { justify-content: flex-start; }
}
/* /Components/Pages/AreaLanding.razor.rz.scp.css */
/* The main column already pads every page; this only caps the grid's width. */
.area-shell[b-jpgons29zj] {
    max-width: 1200px;
}

.area-status[b-jpgons29zj] {
    color: var(--color-text-muted);
}

.area-grid[b-jpgons29zj] {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.area-grid > li[b-jpgons29zj] {
    display: flex;
}

.area-card[b-jpgons29zj] {
    flex: 1;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.area-card:hover[b-jpgons29zj] {
    border-color: var(--color-brand-teal);
    box-shadow: 0 6px 16px -8px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.area-card:focus-visible[b-jpgons29zj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.area-card-icon[b-jpgons29zj] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-brand-teal) 10%, transparent);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-card-icon[b-jpgons29zj]  svg {
    width: 22px;
    height: 22px;
}

.area-card-body[b-jpgons29zj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.area-card-title[b-jpgons29zj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.area-card-desc[b-jpgons29zj] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Same amber pill the side nav uses for alerts and updates. */
.area-card-badge[b-jpgons29zj] {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    color: #7c4a03;
    background: #fdecc8;
    border: 1px solid #f3cf8b;
}
/* /Components/Pages/Automation/AutomationOverviewPage.razor.rz.scp.css */
/*  /automation — the landing page for the area.

    Follows the home dashboard's card language rather than inventing a second
    one: the same .dashboard-card shell, the same header row, the same alert
    list. What is new here is the KPI states and the pipeline map, both of which
    live in their own components. */

.ao-shell[b-l75tjtvl94] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2rem;
}

.ao-header-actions[b-l75tjtvl94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ao-status[b-l75tjtvl94] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.ao-banner[b-l75tjtvl94] {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ao-empty[b-l75tjtvl94] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.ao-empty h2[b-l75tjtvl94] {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    color: var(--color-text-primary);
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */

.ao-kpis[b-l75tjtvl94] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

/* ── The two-up row ─────────────────────────────────────────────────────── */

.ao-grid[b-l75tjtvl94] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 70rem) {
    .ao-grid[b-l75tjtvl94] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ao-card[b-l75tjtvl94] {
    min-width: 0;
}

.ao-card-note[b-l75tjtvl94] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    max-width: 34rem;
    text-align: right;
    line-height: 1.4;
}

.ao-alerts[b-l75tjtvl94] {
    max-height: 26rem;
    overflow-y: auto;
}

.ao-none[b-l75tjtvl94] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Recent runs ────────────────────────────────────────────────────────── */

.ao-runs[b-l75tjtvl94] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ao-run + .ao-run[b-l75tjtvl94] {
    border-top: 1px solid var(--color-border);
}

.ao-run-link[b-l75tjtvl94] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.25rem;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
}

.ao-run-link:hover[b-l75tjtvl94] {
    background: var(--color-surface-raised);
}

.ao-run-link:focus-visible[b-l75tjtvl94] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.ao-run-dot[b-l75tjtvl94] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-unknown);
}

.ao-run-dot--ok[b-l75tjtvl94] { background: var(--color-healthy); }
.ao-run-dot--bad[b-l75tjtvl94] { background: var(--color-down); }
.ao-run-dot--busy[b-l75tjtvl94] { background: var(--color-degraded); }

.ao-run-body[b-l75tjtvl94] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ao-run-file[b-l75tjtvl94] {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-run-meta[b-l75tjtvl94] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ao-run-when[b-l75tjtvl94] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ── The provenance strip ───────────────────────────────────────────────── */

/*  Not decoration. Six independent reads sit behind this page, and without this
    strip "the imports figure is missing" and "the whole page is broken" look
    identical. */
.ao-reads[b-l75tjtvl94] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
}

.ao-reads-title[b-l75tjtvl94] {
    margin: 0 0 0.5rem;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ao-reads-list[b-l75tjtvl94] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.ao-read[b-l75tjtvl94] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.ao-read--fresh[b-l75tjtvl94] { color: var(--color-text-secondary); }
.ao-read--fresh svg[b-l75tjtvl94] { color: var(--color-healthy); }
.ao-read--stale svg[b-l75tjtvl94],
.ao-read--stale[b-l75tjtvl94] { color: #92400e; }
.ao-read--unavailable svg[b-l75tjtvl94],
.ao-read--unavailable[b-l75tjtvl94] { color: var(--status-error-fg); }

.ao-read-label[b-l75tjtvl94] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.ao-reads-foot[b-l75tjtvl94] {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Automation/Imports.razor.rz.scp.css */
/*  Imports — master/detail.

    The shell follows Transfers.razor.css so the two Automation surfaces read as
    one product; what is new here is the filter row in the rail, the type and
    service chips, the ledger banner a disabled import wears, and the rule
    ledger card on the overview.

    Tokens only — no raw hex. */

.im-shell[b-cnlv0t5wgo] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.im-rail[b-cnlv0t5wgo] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.im-rail-header[b-cnlv0t5wgo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.im-rail-title-row[b-cnlv0t5wgo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.im-rail-title[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.im-rail-tools[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
}

.im-new-btn[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
}

.im-refresh-btn[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.im-refresh-btn:hover:not(:disabled)[b-cnlv0t5wgo] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.im-refresh-btn:focus-visible[b-cnlv0t5wgo] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.im-refresh-btn:disabled[b-cnlv0t5wgo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.im-spin[b-cnlv0t5wgo] {
    animation: im-spin-b-cnlv0t5wgo 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .im-spin[b-cnlv0t5wgo] { animation: none; }
}

.im-search[b-cnlv0t5wgo] {
    width: 100%;
}

/*  Two quiet selects under the search: what state, what kind. */
.im-filters[b-cnlv0t5wgo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.im-filter[b-cnlv0t5wgo] {
    width: 100%;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    appearance: auto;
}

.im-rail-meta[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1rem;
}

.im-rail-status[b-cnlv0t5wgo] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.im-rail-error[b-cnlv0t5wgo] {
    color: var(--color-down);
}

.im-list[b-cnlv0t5wgo] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.im-list > li[b-cnlv0t5wgo] {
    min-width: 0;
}

.im-list-item[b-cnlv0t5wgo] {
    display: flex;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 1rem 0.6rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.im-list-item:hover[b-cnlv0t5wgo] {
    background: var(--color-surface-raised);
}

.im-list-item:focus-visible[b-cnlv0t5wgo] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
}

.im-list-item--selected[b-cnlv0t5wgo] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    border-left-color: var(--color-brand-teal);
}

.im-list-item--selected .im-list-item-name[b-cnlv0t5wgo] {
    font-weight: 600;
}

.im-list-item-body[b-cnlv0t5wgo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.2rem;
}

.im-list-item-top[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.im-list-item-name[b-cnlv0t5wgo] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

/*  The path or the mailbox. Reversed ellipsis keeps the leaf folder visible,
    which is the part that tells two imports apart. */
.im-list-item-path[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.im-path-text[b-cnlv0t5wgo] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}

.im-list-item-sub[b-cnlv0t5wgo] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.im-id[b-cnlv0t5wgo] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--color-text-secondary);
}

/*  A stored value as a chip. The odd variant is a value the portal cannot
    name — shown as itself, in the degraded tone, never rewritten. */
.im-chip[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    padding: 0 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-chip--odd[b-cnlv0t5wgo] {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}

.im-rules[b-cnlv0t5wgo] {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.im-rules--ledger[b-cnlv0t5wgo] {
    color: color-mix(in srgb, var(--color-degraded) 65%, var(--color-text-secondary));
}

.im-badge[b-cnlv0t5wgo] {
    flex: none;
    gap: 0.25rem;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.im-detail[b-cnlv0t5wgo] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.im-empty[b-cnlv0t5wgo] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
    margin: auto;
}

.im-empty h2[b-cnlv0t5wgo] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.im-empty p[b-cnlv0t5wgo] {
    margin: 0 auto;
    font-size: 0.875rem;
    max-width: 460px;
}

.im-detail-header[b-cnlv0t5wgo] {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.im-detail-header-row[b-cnlv0t5wgo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.im-detail-heading[b-cnlv0t5wgo] {
    min-width: 0;
}

.im-detail-lede[b-cnlv0t5wgo] {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.im-detail-actions[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.im-action-btn[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.im-detail-heading h2[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.im-detail-sub[b-cnlv0t5wgo] {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.im-detail-sub code[b-cnlv0t5wgo] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.im-dot[b-cnlv0t5wgo] {
    color: var(--color-text-muted);
}

.im-detail-path[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    min-width: 0;
}

/*  The disabled import's banner. Deliberate, not alarming: a neutral tone,
    an icon, a sentence with a date. It is the page's normal state for a
    disabled import and it must not read as a fault. */
.im-ledger-banner[b-cnlv0t5wgo] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-brand-teal) 7%, var(--color-surface));
}

.im-ledger-icon[b-cnlv0t5wgo] {
    flex: none;
    margin-top: 0.1rem;
    color: var(--color-brand);
}

.im-ledger-body[b-cnlv0t5wgo] {
    min-width: 0;
}

.im-ledger-title[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.im-ledger-text[b-cnlv0t5wgo] {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 80ch;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */

.im-panel[b-cnlv0t5wgo] {
    padding-top: 1.25rem;
}

.im-panel--editable[b-cnlv0t5wgo] {
    padding-bottom: 5rem;
}

.im-panel:focus-visible[b-cnlv0t5wgo] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.im-section[b-cnlv0t5wgo] {
    margin-top: 1.25rem;
}

.im-section--spaced[b-cnlv0t5wgo] {
    margin-top: 2rem;
}

.im-section-head[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.im-section-head--spaced[b-cnlv0t5wgo] {
    margin-top: 2.25rem;
}

.im-section-title[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.im-section-note[b-cnlv0t5wgo] {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    max-width: 72ch;
    line-height: 1.5;
}

.im-section-note--quiet[b-cnlv0t5wgo] {
    font-style: italic;
}

.im-pill[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

/* ── Facts ──────────────────────────────────────────────────────────────── */

.im-facts[b-cnlv0t5wgo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
}

.im-facts--tight[b-cnlv0t5wgo] {
    margin-top: 0.5rem;
}

.im-fact[b-cnlv0t5wgo] {
    min-width: 0;
}

.im-fact--wide[b-cnlv0t5wgo] {
    grid-column: 1 / -1;
}

.im-fact dt[b-cnlv0t5wgo] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.im-fact dd[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.im-fact-note[b-cnlv0t5wgo] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.im-fact-note code[b-cnlv0t5wgo] {
    font-size: 0.72rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.25rem;
}

.im-mono[b-cnlv0t5wgo] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
}

/*  The engine-never-reads-this pill, beside the two facts it applies to. */
.im-not-honoured[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-family: var(--font-sans, inherit);
}

.im-ledger-none[b-cnlv0t5wgo] {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.im-restore-btn[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.9rem;
}

/*  The one-line result on the overview, where there is no save bar to carry
    it. A failure is an icon plus words under role="alert"; never a colour alone. */
.im-inline-error[b-cnlv0t5wgo],
.im-inline-ok[b-cnlv0t5wgo] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-primary);
}

.im-inline-error[b-cnlv0t5wgo] {
    border-left-color: var(--color-down);
    background: color-mix(in srgb, var(--color-down) 6%, var(--color-surface));
}

.im-inline-ok[b-cnlv0t5wgo] {
    border-left-color: var(--color-healthy);
    background: color-mix(in srgb, var(--color-healthy) 6%, var(--color-surface));
}

.im-link[b-cnlv0t5wgo] {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}

.im-link:hover[b-cnlv0t5wgo] {
    text-decoration: underline;
}

.im-link:focus-visible[b-cnlv0t5wgo] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Narrow laptops ─────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
    .im-shell[b-cnlv0t5wgo] {
        grid-template-columns: 296px 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 1100px) {
    .im-shell[b-cnlv0t5wgo] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .im-list[b-cnlv0t5wgo] {
        max-height: 320px;
    }
}

/* The wizard call to action on the Mapping tab. */

.im-wizard-cta[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.im-wizard-cta-body[b-cnlv0t5wgo] {
    flex: 1;
    min-width: 18rem;
}

.im-wizard-cta-title[b-cnlv0t5wgo] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.im-wizard-cta-text[b-cnlv0t5wgo] {
    margin: 0.15rem 0 0;
    max-width: 64ch;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.im-wizard-cta-btn[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ── Multi-select (A9.1) and the bulk panel (A9.1 / A9.5) ─────────────────── */

/*  The pressed state of the select toggle. Same button as Refresh beside it, so
    the rail's tool row stays one row of identical affordances. */
.im-tool--on[b-cnlv0t5wgo] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, var(--color-surface));
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.im-selectbar[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.im-selectall[b-cnlv0t5wgo] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.im-selectcount[b-cnlv0t5wgo] {
    margin-left: auto;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/*  The checkbox sits outside the link rather than inside it: a control inside an
    <a> is reachable but its click has to fight the navigation, and a checkbox
    that sometimes navigates is worse than one more tab stop. */
.im-list-row[b-cnlv0t5wgo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.im-check[b-cnlv0t5wgo] {
    flex: none;
    margin: 0 0 0 1rem;
    cursor: pointer;
}

.im-list-row .im-list-item[b-cnlv0t5wgo] {
    padding-left: 0.5rem;
}

/*  The whole selection, above the actions. The confirm repeats the first five;
    this has room for all of them. */
.im-bulk-names[b-cnlv0t5wgo] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    word-break: break-word;
}

.im-bulk-error[b-cnlv0t5wgo] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--status-error-fg);
}
/* /Components/Pages/Automation/ImportWizard.razor.rz.scp.css */
/*  The Import Wizard: a full-screen surface with its own bar, its own stepper
    and its own footer.

    The Map step is the only three-pane layout in the area, and it is why the
    shell owns the page's height: the tree, the table and the preview each scroll
    on their own, so an operator working through forty tags never loses the
    stepper or the Next button off the bottom.

    Tokens only — no raw hex. */

.iw-shell[b-chrtxf9fa9] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2rem);
    min-height: 34rem;
    gap: 0.75rem;
}

/* ── The bar ────────────────────────────────────────────────────────────── */

.iw-bar[b-chrtxf9fa9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.iw-back[b-chrtxf9fa9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.iw-back:hover[b-chrtxf9fa9] {
    color: var(--color-brand);
}

.iw-title[b-chrtxf9fa9] {
    min-width: 0;
}

.iw-eyebrow[b-chrtxf9fa9] {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.iw-name[b-chrtxf9fa9] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iw-bar-tools[b-chrtxf9fa9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.iw-dirty[b-chrtxf9fa9] {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 999px;
    background: var(--status-warning-bg);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--status-warning-fg);
}

.iw-sample[b-chrtxf9fa9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 22rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.74rem;
    color: var(--color-text-secondary);
}

.iw-sample span[b-chrtxf9fa9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Status and empty states ────────────────────────────────────────────── */

.iw-status[b-chrtxf9fa9] {
    margin: 0;
    padding: 2rem 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.iw-empty[b-chrtxf9fa9] {
    max-width: 44rem;
    padding: 2rem 0;
}

.iw-empty h2[b-chrtxf9fa9] {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.iw-empty p[b-chrtxf9fa9] {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.iw-link[b-chrtxf9fa9] {
    color: var(--color-brand);
    font-weight: 500;
}

/* ── Drift ──────────────────────────────────────────────────────────────── */

.iw-drift[b-chrtxf9fa9] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.iw-drift-icon[b-chrtxf9fa9] {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.iw-drift-body[b-chrtxf9fa9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.iw-drift-title[b-chrtxf9fa9] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
}

.iw-drift-text[b-chrtxf9fa9],
.iw-drift-note[b-chrtxf9fa9] {
    margin: 0;
    max-width: 76ch;
    font-size: 0.82rem;
    line-height: 1.55;
}

.iw-drift-note[b-chrtxf9fa9] {
    color: var(--color-text-secondary);
}

.iw-drift-actions[b-chrtxf9fa9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.iw-drift-btn[b-chrtxf9fa9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

/* ── Steps and panels ───────────────────────────────────────────────────── */

.iw-steps[b-chrtxf9fa9] {
    flex: 0 0 auto;
}

.iw-panels[b-chrtxf9fa9] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.iw-panel[b-chrtxf9fa9] {
    flex: 1;
    min-height: 0;
    padding: 0.25rem 0.15rem 0.75rem;
    overflow: auto;
}

.iw-panel:focus-visible[b-chrtxf9fa9] {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.iw-panel--map[b-chrtxf9fa9] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0;
    overflow: hidden;
}

/*  The assistant sits above the three panes rather than inside one: it proposes
    for the whole mapping, not for a row. It is allowed to take up to half the
    step and then scrolls, so a forty-row proposal can never squeeze the mapping
    table it is proposing into. */
.iw-assistant[b-chrtxf9fa9] {
    flex: 0 1 auto;
    max-height: 50%;
    overflow-y: auto;
}

.iw-panel-head[b-chrtxf9fa9] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.iw-panel-title[b-chrtxf9fa9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.iw-panel-lede[b-chrtxf9fa9] {
    margin: 0;
    max-width: 68ch;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── The Map step's three panes ─────────────────────────────────────────── */

.iw-map[b-chrtxf9fa9] {
    display: grid;
    grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr) minmax(17rem, 22rem);
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1400px) {
    .iw-map[b-chrtxf9fa9] {
        grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(15rem, 19rem);
    }
}

@media (max-width: 1150px) {
    /*  Below this the third pane stops being useful next to a table with eight
        columns, so the preview moves under the tree and the table keeps the
        width it needs. */
    .iw-map[b-chrtxf9fa9] {
        grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 14rem);
    }

    .iw-map > :nth-child(2)[b-chrtxf9fa9] {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}

/* ── The footer ─────────────────────────────────────────────────────────── */

.iw-foot[b-chrtxf9fa9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}

.iw-foot-note[b-chrtxf9fa9] {
    flex: 1;
    min-width: 0;
}

.iw-foot-hint[b-chrtxf9fa9] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.iw-note-field[b-chrtxf9fa9] {
    display: block;
    max-width: 34rem;
}

.iw-note[b-chrtxf9fa9] {
    width: 100%;
    font-size: 0.82rem;
}

.iw-foot-actions[b-chrtxf9fa9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.iw-btn[b-chrtxf9fa9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* ── Inline outcomes ────────────────────────────────────────────────────── */

.iw-inline-error[b-chrtxf9fa9],
.iw-inline-ok[b-chrtxf9fa9] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.83rem;
    line-height: 1.5;
}

.iw-inline-error[b-chrtxf9fa9] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.iw-inline-ok[b-chrtxf9fa9] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.iw-after[b-chrtxf9fa9] {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .iw-back[b-chrtxf9fa9],
    .iw-drift-btn[b-chrtxf9fa9],
    .iw-btn[b-chrtxf9fa9] {
        transition: none;
    }
}
/* /Components/Pages/Automation/Transfers.razor.rz.scp.css */
/*  Transfer destinations — master/detail.

    The shell follows DataSources.razor.css so the two browse-and-drill surfaces
    read as one product; the parts that are new here are the path line (which the
    legacy screen has nowhere to put), the "fed by" count in the rail, and the
    convention-based warning on the imports block.

    Tokens only — no raw hex. */

.tr-shell[b-2wwer4dlva] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.tr-rail[b-2wwer4dlva] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.tr-rail-header[b-2wwer4dlva] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.tr-rail-title-row[b-2wwer4dlva] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.tr-rail-title[b-2wwer4dlva] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-rail-tools[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
}

/*  An <a>, not a <button>: creating a destination is a route, so it should be
    ctrl-clickable and own a history entry like every other navigation here. It
    borrows the primary button's look because it is the primary action of the
    rail. */
.tr-new-btn[b-2wwer4dlva] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
}

.tr-refresh-btn[b-2wwer4dlva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tr-refresh-btn:hover:not(:disabled)[b-2wwer4dlva] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.tr-refresh-btn:focus-visible[b-2wwer4dlva] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.tr-refresh-btn:disabled[b-2wwer4dlva] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tr-spin[b-2wwer4dlva] {
    animation: tr-spin-b-2wwer4dlva 0.9s linear infinite;
}

@keyframes tr-spin-b-2wwer4dlva {
    to { transform: rotate(360deg); }
}

/* Motion is decoration here; the disabled state already says "busy". */
@media (prefers-reduced-motion: reduce) {
    .tr-spin[b-2wwer4dlva] { animation: none; }
}

.tr-search[b-2wwer4dlva] {
    width: 100%;
}

.tr-rail-meta[b-2wwer4dlva] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1rem;
}

.tr-rail-status[b-2wwer4dlva] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.tr-rail-error[b-2wwer4dlva] {
    color: var(--color-down);
}

.tr-list[b-2wwer4dlva] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/*  min-width: 0 all the way down. Without it the list items refuse to shrink
    below the min-content width of a long Windows path, and the rail scrolls
    sideways instead of ellipsising. */
.tr-list > li[b-2wwer4dlva] {
    min-width: 0;
}

.tr-list-item[b-2wwer4dlva] {
    display: flex;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    gap: 0.5rem;
    width: 100%;

    /*  A <button> gets border-box from the UA stylesheet and an <a> does not, so
        without this the padding is added to the 100% and every row is wider than
        the rail. */
    box-sizing: border-box;
    padding: 0.55rem 1rem 0.6rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.tr-list-item:hover[b-2wwer4dlva] {
    background: var(--color-surface-raised);
}

.tr-list-item:focus-visible[b-2wwer4dlva] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
}

.tr-list-item--selected[b-2wwer4dlva] {
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    border-left-color: var(--color-brand-teal);
}

.tr-list-item--selected .tr-list-item-name[b-2wwer4dlva] {
    font-weight: 600;
}

.tr-list-item-body[b-2wwer4dlva] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.2rem;
}

.tr-list-item-top[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.tr-list-item-name[b-2wwer4dlva] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

/*  The path in the list. Reversed ellipsis (direction: rtl) keeps the leaf
    folder visible when the path is too long, because the tail is the part that
    tells two destinations apart. */
.tr-list-item-path[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

.tr-path-text[b-2wwer4dlva] {
    /*  min-width: 0 because the text is nowrap: without it this flex item's
        automatic minimum size is the whole path, and it pushes out of the rail
        instead of ellipsising. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}

.tr-list-item-sub[b-2wwer4dlva] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tr-id[b-2wwer4dlva] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--color-text-secondary);
}

.tr-fed[b-2wwer4dlva] {
    color: var(--color-text-muted);
}

.tr-fed--some[b-2wwer4dlva] {
    color: var(--color-brand);
    font-weight: 500;
}

.tr-badge[b-2wwer4dlva] {
    flex: none;
    gap: 0.25rem;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.tr-detail[b-2wwer4dlva] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tr-empty[b-2wwer4dlva] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
    margin: auto;
}

.tr-empty h2[b-2wwer4dlva] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.tr-empty p[b-2wwer4dlva] {
    margin: 0 auto;
    font-size: 0.875rem;
    max-width: 460px;
}

.tr-detail-header[b-2wwer4dlva] {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.tr-detail-header-row[b-2wwer4dlva] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.tr-detail-heading[b-2wwer4dlva] {
    min-width: 0;
}

/*  The create form's standfirst. Not .tr-detail-sub, which is a flex row of
    chips and would set a sentence as one unwrapped line. */
.tr-detail-lede[b-2wwer4dlva] {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.tr-detail-actions[b-2wwer4dlva] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex: none;
    max-width: 22rem;
}

.tr-delete-btn[b-2wwer4dlva] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/*  Why the delete is unavailable, as text rather than only as a tooltip: a
    disabled button cannot be focused, so a tooltip on it is unreachable from the
    keyboard and invisible to a screen reader. aria-describedby points here. */
.tr-delete-why[b-2wwer4dlva] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
    text-align: left;
}

.tr-detail-heading h2[b-2wwer4dlva] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-detail-sub[b-2wwer4dlva] {
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tr-detail-sub code[b-2wwer4dlva] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.tr-dot[b-2wwer4dlva] {
    color: var(--color-text-muted);
}

.tr-detail-path[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    min-width: 0;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */

.tr-panel[b-2wwer4dlva] {
    padding-top: 1.25rem;
}

/*  Room under an editable panel for the save bar.

    The bar is sticky to the bottom of .tr-detail, which is the scrolling
    container, so at the end of the scroll it sits on top of whatever the form's
    last field is — visible, but not clickable, because the bar is above it in
    the stacking order. Reserving its height gives the content somewhere to
    scroll clear to; .tde-row's scroll-margin-bottom is the other half, so a
    field scrolled to by focus or by scrollIntoView lands above the bar rather
    than under it. */
.tr-panel--editable[b-2wwer4dlva] {
    padding-bottom: 5rem;
}

/* The panel takes focus when a tab is activated; say so visibly. */
.tr-panel:focus-visible[b-2wwer4dlva] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.tr-section-head[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.tr-section-head--spaced[b-2wwer4dlva] {
    margin-top: 2.25rem;
}

.tr-section-title[b-2wwer4dlva] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-section-note[b-2wwer4dlva] {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    max-width: 68ch;
    line-height: 1.5;
}

.tr-section-note code[b-2wwer4dlva] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.25rem;
    font-size: 0.75rem;
}

.tr-section-note--warn[b-2wwer4dlva] {
    border-left: 3px solid var(--color-degraded);
    padding: 0.5rem 0 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--color-degraded) 6%, var(--color-surface));
    border-radius: 0 var(--radius) var(--radius) 0;
    max-width: none;
}

.tr-readonly-pill[b-2wwer4dlva],
.tr-convention-pill[b-2wwer4dlva] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.tr-convention-pill[b-2wwer4dlva] {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}

/* ── Properties ─────────────────────────────────────────────────────────── */

.tr-facts[b-2wwer4dlva] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
}

.tr-fact[b-2wwer4dlva] {
    min-width: 0;
}

.tr-fact--wide[b-2wwer4dlva] {
    grid-column: 1 / -1;
}

.tr-fact dt[b-2wwer4dlva] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.tr-fact dd[b-2wwer4dlva] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.tr-mono[b-2wwer4dlva] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
}

/*  A two-line cell: what the thing is called, and the folder it points at. */
.tr-stack[b-2wwer4dlva] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tr-stack-main[b-2wwer4dlva] {
    font-weight: 600;
    color: var(--color-text-primary);
}

/*  A step smaller than .tr-mono's default: the folder is supporting detail, and
    the narrower glyphs are what let the column fit beside a status badge in a
    500px pane. */
.tr-stack-sub[b-2wwer4dlva] {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}

/*  Paths are long and the pane is narrow, so the cell caps itself and shows the
    full value in a title. The cap is in ch of the monospace face, which is what
    the text is actually set in. */
.tr-cell-path[b-2wwer4dlva] {
    display: inline-block;
    max-width: min(24ch, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/*  Tables live inside a ~500px pane on a 1280px laptop, so they run tighter here
    than on a full-width page. ::deep because the table is a child component and
    does not carry this page's scope.

    overflow-x is a last resort, not the layout: the columns are chosen to fit,
    and this only stops an unusually long value from being cropped invisibly by
    the shared wrapper's overflow:hidden. */
.tr-panel[b-2wwer4dlva]  .dt-wrap {
    overflow-x: auto;
}

.tr-panel[b-2wwer4dlva]  .dt-td,
.tr-panel[b-2wwer4dlva]  .dt-th {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/*  A status column must never be the one that gets clipped: the shared wrapper
    hides its overflow, so a badge pushed past the edge would disappear silently
    and take the row's meaning with it. ::deep because DataTable puts a column's
    CssClass on cells it renders itself, which do not carry this page's scope. */
.tr-panel[b-2wwer4dlva]  .tr-cell-state {
    white-space: nowrap;
}

.tr-link[b-2wwer4dlva] {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}

.tr-link:hover[b-2wwer4dlva] {
    text-decoration: underline;
}

.tr-link:focus-visible[b-2wwer4dlva] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Narrow laptops ─────────────────────────────────────────────────────── */

/*  Give the detail pane back the width the rail does not need: at 1280px the
    side nav and a 340px rail leave the tables about 500px, which is where a
    status column starts getting pushed off the edge. */
@media (max-width: 1400px) {
    .tr-shell[b-2wwer4dlva] {
        grid-template-columns: 296px 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 1100px) {
    .tr-shell[b-2wwer4dlva] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tr-list[b-2wwer4dlva] {
        max-height: 320px;
    }
}

/*  The folder comparison behind a convention-matched import row. Italic and
    muted on purpose: it is a statement about two strings, not a status. */
.tr-match[b-2wwer4dlva] {
    font-size: 0.8125rem;
    font-style: italic;
    color: #92400e;
}

/* ── Multi-select (A9.2) ──────────────────────────────────────────────────── */

/*  The pressed state of the select toggle. Same button as Refresh beside it, so
    the rail's tool row stays one row of identical affordances. */
.tr-tool--on[b-2wwer4dlva] {
    background: color-mix(in srgb, var(--color-brand-teal) 12%, var(--color-surface));
    border-color: var(--color-brand-teal);
    color: var(--color-brand-teal);
}

.tr-selectbar[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.tr-selectall[b-2wwer4dlva] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.tr-selectcount[b-2wwer4dlva] {
    margin-left: auto;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/*  The checkbox sits outside the link rather than inside it: a control inside an
    <a> is reachable but its click has to fight the navigation, and a checkbox
    that sometimes navigates is worse than one more tab stop. */
.tr-list-row[b-2wwer4dlva] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.tr-check[b-2wwer4dlva] {
    flex: none;
    margin: 0 0 0 1rem;
    cursor: pointer;
}

.tr-list-row .tr-list-item[b-2wwer4dlva] {
    padding-left: 0.5rem;
}

/*  The names of everything in the selection, above the actions. The confirm
    repeats the first five; this is the whole list, because the panel has room
    for it and the confirm does not. */
.tr-bulk-names[b-2wwer4dlva] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    word-break: break-word;
}
/* /Components/Pages/ControlCentres/Analyses.razor.rz.scp.css */
/* ── Analysis catalogue (CC7.1) ────────────────────────────────────────────
   Scoped CSS, so the shell, toolbar, table and state classes the control
   centres list defines do not reach this component and are restated here. The
   restatement is deliberately identical where the two pages are identical: the
   catalogue is the same kind of surface and should be indistinguishable from
   the list beside it in the nav.
   ────────────────────────────────────────────────────────────────────────── */

.cc-list-shell[b-nwgeacoxh7] {
    padding: 2rem 1.5rem 4rem;
}

.page-header[b-nwgeacoxh7] {
    margin-bottom: 2rem;
}

.cc-page-head[b-nwgeacoxh7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cc-page-head .page-header[b-nwgeacoxh7] {
    margin-bottom: 0;
}

.cc-head-action[b-nwgeacoxh7] {
    flex: none;
    white-space: nowrap;
}

.page-title[b-nwgeacoxh7] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-nwgeacoxh7] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 46rem;
}

/* Gate states */

.gate-checking[b-nwgeacoxh7],
.gate-denied[b-nwgeacoxh7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
}

.gate-checking[b-nwgeacoxh7] {
    text-align: center;
}

.gate-denied[b-nwgeacoxh7] {
    color: var(--color-text-primary);
}

.gate-denied code[b-nwgeacoxh7] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* Toolbar */

.cc-toolbar[b-nwgeacoxh7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cc-filters[b-nwgeacoxh7] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    flex: 1;
}

.cc-search-input[b-nwgeacoxh7] {
    max-width: 22rem;
    min-width: 14rem;
}

.cc-filter-select[b-nwgeacoxh7] {
    min-width: 10rem;
    max-width: 13rem;
}

.cc-count[b-nwgeacoxh7] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cc-hint-pill[b-nwgeacoxh7] {
    display: block;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* The one hint that is a warning rather than a note: the catalogue and the run
   coming from different stores, which is the development default. */
.cc-hint-pill--warn[b-nwgeacoxh7] {
    border-color: color-mix(in srgb, var(--color-degraded, #f59e0b) 40%, white);
    background: color-mix(in srgb, var(--color-degraded, #f59e0b) 8%, white);
    color: var(--color-text-primary);
}

/* Data table */

.cc-table-wrap[b-nwgeacoxh7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.cc-table[b-nwgeacoxh7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.cc-th[b-nwgeacoxh7] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.cc-th:hover[b-nwgeacoxh7] {
    color: var(--color-text-primary);
}

.cc-th--sorted[b-nwgeacoxh7] {
    color: var(--color-brand);
}

.cc-th--sorted:hover[b-nwgeacoxh7] {
    color: var(--color-brand);
}

/* Columns that cannot be sorted must not look as though they can. */
.cc-th--shape[b-nwgeacoxh7],
.cc-th--period[b-nwgeacoxh7],
.cc-th--definition[b-nwgeacoxh7],
.cc-th--action[b-nwgeacoxh7] {
    cursor: default;
}

.cc-th--shape:hover[b-nwgeacoxh7],
.cc-th--period:hover[b-nwgeacoxh7],
.cc-th--definition:hover[b-nwgeacoxh7] {
    color: var(--color-text-secondary);
}

.cc-sort-icon[b-nwgeacoxh7] {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.5rem;
    vertical-align: middle;
}

.cc-th--name[b-nwgeacoxh7]       { width: 24%; }
.cc-th--kind[b-nwgeacoxh7]       { width: 10%; }
.cc-th--shape[b-nwgeacoxh7]      { width: 13%; }
.cc-th--period[b-nwgeacoxh7]     { width: 10%; }
.cc-th--status[b-nwgeacoxh7]     { width: 9%; }
.cc-th--lastran[b-nwgeacoxh7]    { width: 11%; }
.cc-th--used[b-nwgeacoxh7]       { width: 8%; }
.cc-th--definition[b-nwgeacoxh7] { width: 10%; }
.cc-th--action[b-nwgeacoxh7]     { width: 5%; }

.cc-row[b-nwgeacoxh7] {
    cursor: default;
    transition: background 0.1s;
}

.cc-row:hover[b-nwgeacoxh7] {
    background: var(--color-surface-raised);
}

.cc-row:not(:last-child) .cc-td[b-nwgeacoxh7] {
    border-bottom: 1px solid var(--color-border);
}

.cc-td[b-nwgeacoxh7] {
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-td--name[b-nwgeacoxh7] {
    font-weight: 500;
    white-space: normal;
}

/* The description under the name: present for most analyses and the only place
   the catalogue can say what one is for, so it earns a second line. */
.cc-sub[b-nwgeacoxh7] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cc-td--kind[b-nwgeacoxh7],
.cc-td--period[b-nwgeacoxh7],
.cc-td--lastran[b-nwgeacoxh7] {
    color: var(--color-text-secondary);
}

.cc-td--used[b-nwgeacoxh7] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-td--action[b-nwgeacoxh7] {
    text-align: right;
    white-space: nowrap;
}

/* Two actions from CC8.1. Spaced with a margin rather than by making the cell a
   flex container, which would take it out of the table's column layout. */
.cc-td--action > .cc-link + .cc-link[b-nwgeacoxh7] {
    margin-left: 0.75rem;
}

.cc-link[b-nwgeacoxh7] {
    color: var(--color-brand);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s;
}

.cc-link:hover[b-nwgeacoxh7] {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

.cc-link--strong[b-nwgeacoxh7] {
    font-weight: 600;
}

/* Muted, warned and pilled values */

.cc-muted[b-nwgeacoxh7] {
    color: var(--color-text-secondary);
    opacity: 0.75;
}

.cc-warn[b-nwgeacoxh7] {
    color: color-mix(in srgb, var(--color-degraded, #f59e0b) 75%, black);
    font-weight: 500;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.cc-pill[b-nwgeacoxh7] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.cc-pill--shape[b-nwgeacoxh7] {
    border-color: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 35%, white);
    background: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 8%, white);
    color: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 70%, black);
}

/* "Definition not available" is the normal state on every live site, so it is a
   quiet fact rather than an alarm. */
.cc-pill--muted[b-nwgeacoxh7] {
    border-style: dashed;
    color: var(--color-text-secondary);
    cursor: help;
}

/* Badges */

.badge[b-nwgeacoxh7] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-healthy[b-nwgeacoxh7] {
    background: #f0fdf4;
    color: #166534;
}

.badge-unknown[b-nwgeacoxh7] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Loading, empty and error states ──────────────────────────────
   One shape for all three, matching the control centres list: a centred block
   with a heading, a sentence and the action that resolves it. The loading case
   is a skeleton of the list rather than a spinner, so the layout does not jump
   when the rows arrive.
   ──────────────────────────────────────────────────────────────── */

.cc-list-skeleton[b-nwgeacoxh7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-skel[b-nwgeacoxh7] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-analyses-shimmer-b-nwgeacoxh7 1.4s ease-in-out infinite;
}

.cc-skel--toolbar[b-nwgeacoxh7] { height: 2.75rem; margin-bottom: 0.5rem; }
.cc-skel--row[b-nwgeacoxh7] { height: 2.5rem; }

@keyframes cc-analyses-shimmer-b-nwgeacoxh7 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.cc-state[b-nwgeacoxh7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.cc-state--error[b-nwgeacoxh7] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.cc-state-title[b-nwgeacoxh7] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-nwgeacoxh7] {
    margin: 0;
    max-width: 38rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.cc-state-hint[b-nwgeacoxh7] {
    opacity: 0.85;
}

.cc-state-actions[b-nwgeacoxh7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cc-state-actions .btn-secondary[b-nwgeacoxh7] { text-decoration: none; }

/* Visually hidden labels for the toolbar controls, which are identified by
   their placeholder to a sighted reader and by nothing at all otherwise. */
.sr-only[b-nwgeacoxh7] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-nwgeacoxh7] { animation: none; }
}
/* /Components/Pages/ControlCentres/AnalysisDesignerPage.razor.rz.scp.css */
/* ── Analysis designer shell ─────────────────────────────────────────────────
   Chrome (three-column grid, load states, skeleton) plus the primitives every
   pane uses — micro-labels, chips, badges, fields, panels, findings — published
   to the child components through ::deep so the vocabulary is defined once.

   It is the same register the control centre designer publishes, and it is a
   COPY rather than a shared file. Scoped CSS is per component: a ::deep rule only
   reaches descendants of the component that declares it, so a second host needs
   its own copy or the panes render unstyled. Keeping them separate also means the
   two designers can diverge where their surfaces genuinely differ — this one has
   a step rail and a trust panel and no canvas — without either dragging the other.

   Tokens only; tints are colour-mixes over the brand tokens.
   ────────────────────────────────────────────────────────────────────────────── */

.cc-shell[b-2x0ftql5cx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 3rem;
}

/* Steps · host · preview. The host takes the slack; the two rails stay readable
   rather than proportional, exactly as the dashboard designer's do. */
.cc-grid[b-2x0ftql5cx] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(300px, 380px);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1280px) {
    .cc-grid[b-2x0ftql5cx] {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    }

    /* The preview drops under the two columns rather than being squeezed: a tile
       narrower than its own minimum is not a preview of anything. */
    .cc-grid[b-2x0ftql5cx] >  .cc-rail {
        grid-column: 1 / -1;
    }
}

/* ── Shared primitives (published to the panes) ──────────────────────────── */

[b-2x0ftql5cx] .cc-microlabel {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

[b-2x0ftql5cx] .cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-2x0ftql5cx] .cc-chip--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}

[b-2x0ftql5cx] .cc-chip--error {
    border-color: color-mix(in srgb, var(--color-down) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-down) 75%, var(--color-text-primary));
}

/* "A branch of the port that a captured production graph drives." Green because
   it is the claim being made, not because anything is healthy. */
[b-2x0ftql5cx] .cc-chip--verified {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-healthy) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-healthy) 75%, var(--color-text-primary));
}

/* "Described, and not here yet." Dashed and grey rather than coloured: an unbuilt
   step is not a fault and must not read as one. */
[b-2x0ftql5cx] .cc-chip--dead {
    border-style: dashed;
    border-color: var(--color-unknown);
    background: transparent;
    color: var(--color-unknown);
}

[b-2x0ftql5cx] .cc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

[b-2x0ftql5cx] .cc-badge--off {
    border-color: var(--color-unknown);
    color: var(--color-unknown);
}

[b-2x0ftql5cx] .cc-badge--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
}

[b-2x0ftql5cx] .cc-badge--error {
    border-color: color-mix(in srgb, var(--color-down) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
}

[b-2x0ftql5cx] .cc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
}

[b-2x0ftql5cx] .cc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

[b-2x0ftql5cx] .cc-toggle-label {
    padding: 0 0.25rem 0 0.375rem;
}

[b-2x0ftql5cx] .cc-toggle-btn {
    padding: 0.1875rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

[b-2x0ftql5cx] .cc-toggle-btn--on {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

[b-2x0ftql5cx] .cc-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-2x0ftql5cx] .cc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

[b-2x0ftql5cx] .cc-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

[b-2x0ftql5cx] .cc-icon-btn:not(:disabled):hover {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

[b-2x0ftql5cx] .cc-panel {
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

[b-2x0ftql5cx] .cc-panel-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

[b-2x0ftql5cx] .cc-panel-title {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

[b-2x0ftql5cx] .cc-panel-note {
    flex: 1 1 100%;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

[b-2x0ftql5cx] .cc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.875rem;
}

[b-2x0ftql5cx] .cc-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
}

[b-2x0ftql5cx] .cc-input:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

[b-2x0ftql5cx] .cc-field-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

[b-2x0ftql5cx] .cc-facts {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

[b-2x0ftql5cx] .cc-facts dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

[b-2x0ftql5cx] .cc-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* ── Cards, banners and disclosures ──────────────────────────────────────── */

[b-2x0ftql5cx] .cc-card {
    margin: 0 0 0.875rem;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
}

[b-2x0ftql5cx] .cc-props {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

[b-2x0ftql5cx] .cc-banner {
    margin: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

[b-2x0ftql5cx] .cc-banner--ok {
    border-left-color: var(--color-healthy);
}

[b-2x0ftql5cx] .cc-banner--warn {
    border-left-color: var(--color-degraded);
}

[b-2x0ftql5cx] .cc-banner--error {
    border-left-color: var(--color-down);
}

[b-2x0ftql5cx] .cc-banner-line {
    margin: 0 0 0.25rem;
}

[b-2x0ftql5cx] .cc-banner .btn-secondary {
    margin-top: 0.375rem;
}

[b-2x0ftql5cx] .cc-inspect {
    margin: 0 0 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
}

[b-2x0ftql5cx] .cc-inspect > summary {
    padding: 0.375rem 0.625rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

[b-2x0ftql5cx] .cc-inspect > *:not(summary) {
    padding: 0 0.625rem 0.625rem;
}

/* ── Findings ────────────────────────────────────────────────────────────── */

[b-2x0ftql5cx] .cc-find-group {
    margin-top: 0.875rem;
}

[b-2x0ftql5cx] .cc-find-title {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

[b-2x0ftql5cx] .cc-find-help {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.45;
}

[b-2x0ftql5cx] .cc-find-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-2x0ftql5cx] .cc-find {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    line-height: 1.45;
}

[b-2x0ftql5cx] .cc-find--error {
    border-left-color: var(--color-down);
}

[b-2x0ftql5cx] .cc-find--warn {
    border-left-color: var(--color-degraded);
}

[b-2x0ftql5cx] .cc-find--notice {
    border-left-color: var(--color-unknown);
}

[b-2x0ftql5cx] .cc-find-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

[b-2x0ftql5cx] .cc-find-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
}

[b-2x0ftql5cx] .cc-find-where {
    color: var(--color-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
}

[b-2x0ftql5cx] .cc-find-message {
    color: var(--color-text-primary);
}

[b-2x0ftql5cx] .cc-find-remedy {
    color: var(--color-text-secondary);
}

/* ── Confirmations ───────────────────────────────────────────────────────── */

.cc-confirm-list[b-2x0ftql5cx] {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    line-height: 1.5;
}

.cc-confirm-list > li + li[b-2x0ftql5cx] {
    margin-top: 0.375rem;
}

/* ── Load, denial and fault states ───────────────────────────────────────── */

.cc-state[b-2x0ftql5cx] {
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cc-state--error[b-2x0ftql5cx] {
    border-left-color: var(--color-down);
}

/* Not an error. The request worked; what this API build stores cannot be
   expressed, and that has a specific answer — which is why the remedy is the
   loudest thing on the panel. */
.cc-state--fault[b-2x0ftql5cx] {
    border-left-color: var(--color-degraded);
}

.cc-state-title[b-2x0ftql5cx] {
    margin: 0 0 0.375rem;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-2x0ftql5cx] {
    margin: 0 0 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.55;
    max-width: 68ch;
}

.cc-remedy[b-2x0ftql5cx] {
    margin: 0.75rem 0;
    padding: 0.625rem 0.75rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

.cc-remedy p[b-2x0ftql5cx] {
    margin: 0.25rem 0 0;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    line-height: 1.55;
    max-width: 68ch;
}

.cc-state-actions[b-2x0ftql5cx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cc-state-link[b-2x0ftql5cx] {
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cc-state-link:hover[b-2x0ftql5cx] {
    text-decoration: underline;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */

.cc-skeleton[b-2x0ftql5cx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cc-skel-grid[b-2x0ftql5cx] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(300px, 380px);
    gap: 1rem;
}

.cc-skel[b-2x0ftql5cx] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-border) 45%, var(--color-surface-raised)) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-shimmer-b-2x0ftql5cx 1.4s ease infinite;
}

.cc-skel--toolbar[b-2x0ftql5cx] { height: 56px; }
.cc-skel--rail[b-2x0ftql5cx] { height: 380px; }
.cc-skel--host[b-2x0ftql5cx] { height: 380px; }

@keyframes cc-shimmer-b-2x0ftql5cx {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-2x0ftql5cx] {
        animation: none;
    }
}

/* ── The single live region ──────────────────────────────────────────────── */

/* Visually hidden, not display:none — a hidden region is not announced at all.
   One per surface, on the page, for the reason the control centre designer
   states: two polite regions describing the same thing talk over each other. */
.cc-live[b-2x0ftql5cx] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/ControlCentres/AnalysisDetail.razor.rz.scp.css */
/* ── One analysis: header, derived facts, placements (CC7.1) ───────────────
   Two columns on a laptop: the form on the left, what a run reveals and where
   the analysis is placed on the right. The form is the narrow one on purpose —
   it is six fields, and the facts panel is the part somebody reads.
   ────────────────────────────────────────────────────────────────────────── */

.cc-detail-shell[b-4hc1lumxdi] {
    padding: 2rem 1.5rem 4rem;
}

.page-header[b-4hc1lumxdi] {
    margin-bottom: 0;
}

.cc-page-head[b-4hc1lumxdi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-title[b-4hc1lumxdi] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-4hc1lumxdi] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 46rem;
}

/* Breadcrumb */

.cc-crumbs[b-4hc1lumxdi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

.cc-crumb-sep[b-4hc1lumxdi] {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.cc-crumb-current[b-4hc1lumxdi] {
    color: var(--color-text-secondary);
}

/* Gate states */

.gate-checking[b-4hc1lumxdi],
.gate-denied[b-4hc1lumxdi] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
}

.gate-checking[b-4hc1lumxdi] {
    text-align: center;
}

.gate-denied[b-4hc1lumxdi] {
    color: var(--color-text-primary);
}

.gate-denied code[b-4hc1lumxdi] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* Layout */

.cc-detail-grid[b-4hc1lumxdi] {
    display: grid;
    grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.cc-detail-side[b-4hc1lumxdi] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

@media (max-width: 1100px) {
    .cc-detail-grid[b-4hc1lumxdi] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Panels */

.cc-panel[b-4hc1lumxdi] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    min-width: 0;
}

.cc-panel-title[b-4hc1lumxdi] {
    margin: 0 0 0.375rem;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-panel-note[b-4hc1lumxdi] {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cc-panel-note--warn[b-4hc1lumxdi] {
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded, #f59e0b) 40%, white);
    background: color-mix(in srgb, var(--color-degraded, #f59e0b) 8%, white);
    border-radius: var(--radius);
    color: var(--color-text-primary);
}

.cc-panel-note code[b-4hc1lumxdi] {
    font-size: 0.75rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* Form */

.cc-field[b-4hc1lumxdi] {
    margin-bottom: 1rem;
    min-width: 0;
}

.cc-field-row[b-4hc1lumxdi] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cc-field-row .cc-field[b-4hc1lumxdi] {
    flex: 1 1 10rem;
}

.cc-field--narrow[b-4hc1lumxdi] {
    flex: 0 1 7.5rem;
}

/* The global .form-input is content-box, so a width has to be stated rather than
   inherited or the fields overflow their column. */
.cc-field .form-input[b-4hc1lumxdi] {
    width: 100%;
    box-sizing: border-box;
}

.cc-textarea[b-4hc1lumxdi] {
    resize: vertical;
    min-height: 3.5rem;
    font-family: inherit;
}

.cc-actions[b-4hc1lumxdi] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.cc-actions .btn-secondary[b-4hc1lumxdi] {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.cc-actions-note[b-4hc1lumxdi] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Fact lists */

.cc-facts[b-4hc1lumxdi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem 1rem;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--color-border);
}

.cc-facts--dense[b-4hc1lumxdi] {
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    gap: 0.5rem 1rem;
}

.cc-fact dt[b-4hc1lumxdi] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: 0.125rem;
}

.cc-fact dd[b-4hc1lumxdi] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

/* Run form */

.cc-run-form[b-4hc1lumxdi] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-run-form .cc-field[b-4hc1lumxdi] {
    margin-bottom: 0;
}

.cc-run-button[b-4hc1lumxdi] {
    flex: none;
}

.cc-run-meta[b-4hc1lumxdi] {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* One output */

.cc-output[b-4hc1lumxdi] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface-raised);
    min-width: 0;
}

.cc-output:last-child[b-4hc1lumxdi] {
    margin-bottom: 0;
}

.cc-output-head[b-4hc1lumxdi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cc-output-name[b-4hc1lumxdi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Sample rows */

.cc-sample-wrap[b-4hc1lumxdi] {
    margin-top: 0.75rem;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.cc-sample[b-4hc1lumxdi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.cc-sample-caption[b-4hc1lumxdi] {
    caption-side: bottom;
    padding: 0.375rem 0.625rem;
    text-align: left;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cc-sample th[b-4hc1lumxdi],
.cc-sample td[b-4hc1lumxdi] {
    padding: 0.375rem 0.625rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}

.cc-sample th[b-4hc1lumxdi] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
}

/* The DMModel.DataType number the grid would coerce this column as. A number
   rather than a name on purpose: only three of the values do anything, and
   naming the rest would imply behaviour that is not there. */
.cc-col-type[b-4hc1lumxdi] {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.25rem;
    border-radius: 0.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.5625rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.cc-sample tbody tr:last-child td[b-4hc1lumxdi] {
    border-bottom: none;
}

/* Keyed series — the chart, dictionary and calendar shapes carry everything here
   and nothing in the row data. */
.cc-items[b-4hc1lumxdi] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.25rem 0.75rem;
}

.cc-items li[b-4hc1lumxdi] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.1875rem 0;
    border-bottom: 1px dotted var(--color-border);
}

.cc-item-key[b-4hc1lumxdi] {
    color: var(--color-text-secondary);
}

.cc-item-value[b-4hc1lumxdi] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

/* Placements */

.cc-placed[b-4hc1lumxdi] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-placed li[b-4hc1lumxdi] {
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-placed li:last-child[b-4hc1lumxdi] {
    border-bottom: none;
}

/* Banners */

.cc-banner[b-4hc1lumxdi] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface-raised);
}

.cc-banner--ok[b-4hc1lumxdi] {
    border-color: color-mix(in srgb, var(--color-healthy, #2cb778) 35%, white);
    background: color-mix(in srgb, var(--color-healthy, #2cb778) 7%, white);
}

.cc-banner--error[b-4hc1lumxdi] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 6%, white);
}

.cc-banner-line[b-4hc1lumxdi] {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.cc-banner-line:last-child[b-4hc1lumxdi] {
    margin-bottom: 0;
}

/* Confirm dialog content */

.cc-confirm-list[b-4hc1lumxdi] {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.cc-confirm-list li[b-4hc1lumxdi] {
    margin-bottom: 0.375rem;
}

/* Shared small pieces */

.cc-link[b-4hc1lumxdi] {
    color: var(--color-brand);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s;
}

.cc-link:hover[b-4hc1lumxdi] {
    color: var(--color-brand-teal);
    text-decoration: underline;
}

.cc-muted[b-4hc1lumxdi] {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.cc-warn[b-4hc1lumxdi] {
    color: color-mix(in srgb, var(--color-degraded, #f59e0b) 75%, black);
    font-weight: 500;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

.cc-empty[b-4hc1lumxdi] {
    margin: 0;
    padding: 1rem 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cc-pill[b-4hc1lumxdi] {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.cc-pill--shape[b-4hc1lumxdi] {
    border-color: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 35%, white);
    background: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 10%, white);
    color: color-mix(in srgb, var(--color-brand-teal, #0ea5c6) 70%, black);
}

.cc-pill--muted[b-4hc1lumxdi] {
    border-style: dashed;
}

/* States */

.cc-detail-skeleton[b-4hc1lumxdi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cc-skel[b-4hc1lumxdi] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-detail-shimmer-b-4hc1lumxdi 1.4s ease-in-out infinite;
}

.cc-skel--title[b-4hc1lumxdi] { height: 2.5rem; width: 22rem; max-width: 100%; }
.cc-skel--panel[b-4hc1lumxdi] { height: 12rem; }

@keyframes cc-detail-shimmer-b-4hc1lumxdi {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.cc-state[b-4hc1lumxdi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.cc-state--error[b-4hc1lumxdi] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.cc-state-title[b-4hc1lumxdi] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-4hc1lumxdi] {
    margin: 0;
    max-width: 38rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.cc-state-actions[b-4hc1lumxdi] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cc-state-actions .btn-secondary[b-4hc1lumxdi] { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-4hc1lumxdi] { animation: none; }
}
/* /Components/Pages/ControlCentres/ControlCentreDesignerPage.razor.rz.scp.css */
/* ── Control centre designer shell ──────────────────────────────────────────
   Chrome (three-pane grid, load states, skeleton) plus the primitives every
   pane uses — micro-labels, chips, badges, toggles, fact lists — published to
   the child components through ::deep so the vocabulary is defined once.
   Tokens only; tints are colour-mixes over the brand tokens.
   ────────────────────────────────────────────────────────────────────────── */

.cc-shell[b-7hgjovrf9u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 3rem;
}

/* Outline · canvas · rail. The canvas takes the slack; the two rails stay
   readable rather than proportional. */
.cc-grid[b-7hgjovrf9u] {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1280px) {
    .cc-grid[b-7hgjovrf9u] {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    }

    .cc-grid[b-7hgjovrf9u] >  .cc-rail {
        grid-column: 1 / -1;
    }
}

/* ── Shared primitives (published to the panes) ──────────────────────────── */

[b-7hgjovrf9u] .cc-microlabel {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-7hgjovrf9u] .cc-chip--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}

/* "Stored, editable, and never reaching a screen" — the one state the canvas
   must never make look normal. */
[b-7hgjovrf9u] .cc-chip--dead {
    border-style: dashed;
    border-color: var(--color-unknown);
    background: transparent;
    color: var(--color-unknown);
}

[b-7hgjovrf9u] .cc-chip--override,
[b-7hgjovrf9u] .cc-chip--fixed {
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand-teal) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-brand) 80%, var(--color-text-primary));
}

[b-7hgjovrf9u] .cc-chip--trigger {
    border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
    color: var(--color-brand);
    font-variant-numeric: tabular-nums;
}

[b-7hgjovrf9u] .cc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

[b-7hgjovrf9u] .cc-badge--off {
    border-color: var(--color-unknown);
    color: var(--color-unknown);
}

[b-7hgjovrf9u] .cc-badge--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 12%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary));
}

[b-7hgjovrf9u] .cc-badge--error {
    border-color: color-mix(in srgb, var(--color-down) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-down) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
}

[b-7hgjovrf9u] .cc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
}

[b-7hgjovrf9u] .cc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
}

[b-7hgjovrf9u] .cc-toggle-label {
    padding: 0 0.25rem 0 0.375rem;
}

[b-7hgjovrf9u] .cc-toggle-btn {
    padding: 0.1875rem 0.5rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

[b-7hgjovrf9u] .cc-toggle-btn--on {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-toggle-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

[b-7hgjovrf9u] .cc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

[b-7hgjovrf9u] .cc-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

[b-7hgjovrf9u] .cc-icon-btn:not(:disabled):hover {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

/* ── Editable fields (CC3.2) ─────────────────────────────────────────────────
   One field today. It sits above the facts list rather than inside it, because a
   <dl> of read-only facts with one editable row in the middle reads as a bug —
   the eye has no way to tell which of them it may touch. */

[b-7hgjovrf9u] .cc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.875rem;
}

[b-7hgjovrf9u] .cc-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
}

[b-7hgjovrf9u] .cc-input:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* The assistant's way in from an inspector tab (CC10.3): the tile inspector's
   "Ask assistant" and the Filters tab's "Propose filters…", in the same shape as
   the Colours tab's own seam — a secondary button, separated from the tab above
   it, with one line saying what pressing it does. Two components draw it, so it
   is published here rather than scoped to either. */
[b-7hgjovrf9u] .cc-insp-ask {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

[b-7hgjovrf9u] .cc-insp-ask .cc-field-help {
    margin-top: 0.375rem;
}

[b-7hgjovrf9u] .cc-field-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

[b-7hgjovrf9u] .cc-facts {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
}

[b-7hgjovrf9u] .cc-facts dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

[b-7hgjovrf9u] .cc-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-banner {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

[b-7hgjovrf9u] .cc-banner ul {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
}

[b-7hgjovrf9u] .cc-banner--warn {
    border-left-color: var(--color-degraded);
}

[b-7hgjovrf9u] .cc-banner--error {
    border-left-color: var(--color-down);
}

/* The bottom margin arrived with CC5.1, where a card is no longer always the last
   thing in a tab: the dashboard's Entity scope card is followed by the rows/tiles
   facts, and without it the two shared an edge. Every earlier card is last in its
   panel, where the rail's own padding already provides the gap. */
[b-7hgjovrf9u] .cc-card {
    margin: 0 0 0.875rem;
    padding: 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
}

[b-7hgjovrf9u] .cc-card p {
    margin: 0.375rem 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

[b-7hgjovrf9u] .cc-props {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
}

[b-7hgjovrf9u] .cc-prop-warning {
    color: color-mix(in srgb, var(--color-degraded) 75%, var(--color-text-primary)) !important;
}

[b-7hgjovrf9u] .cc-inspect {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
}

[b-7hgjovrf9u] .cc-inspect > summary {
    padding: 0.5rem 0.625rem;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

[b-7hgjovrf9u] .cc-inspect > *:not(summary) {
    margin: 0 0.625rem 0.625rem;
}

/* ── Inspector tabs (CcTabs) ─────────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-itabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

[b-7hgjovrf9u] .cc-itab {
    padding: 0.1875rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

[b-7hgjovrf9u] .cc-itab--on {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-itab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

/* ── Inventory and the other read-only sections ──────────────────────────── */

[b-7hgjovrf9u] .cc-inv {
    margin: 0 0 1rem;
}

[b-7hgjovrf9u] .cc-inv-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-inv-lead,
[b-7hgjovrf9u] .cc-inv-note {
    margin: 0 0 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-7hgjovrf9u] .cc-inv-danger {
    margin: 0 0 0.5rem;
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-7hgjovrf9u] .cc-inv-list,
[b-7hgjovrf9u] .cc-inv-flat {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

[b-7hgjovrf9u] .cc-inv-row {
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

[b-7hgjovrf9u] .cc-inv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

[b-7hgjovrf9u] .cc-inv-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-inv-icon svg {
    width: 100%;
    height: 100%;
}

[b-7hgjovrf9u] .cc-inv-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-inv-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-inv-members {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-inv-flat > li {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 0.25rem 0.75rem;
    padding: 0.1875rem 0;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-inv-flat code {
    color: var(--color-text-secondary);
}

/* ── Read-only tables ────────────────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-tbl {
    width: 100%;
    margin: 0 0 0.75rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}

[b-7hgjovrf9u] .cc-tbl th,
[b-7hgjovrf9u] .cc-tbl td {
    padding: 0.3125rem 0.375rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-tbl thead th {
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-7hgjovrf9u] .cc-tbl tbody th {
    font-weight: 600;
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-tbl-row--off {
    color: var(--color-unknown);
}

[b-7hgjovrf9u] .cc-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--cc-swatch, transparent);
    vertical-align: baseline;
}

[b-7hgjovrf9u] .cc-swatch--none {
    border-style: dashed;
    border-color: var(--color-unknown);
}

/* ── Checks panel ────────────────────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-find-group,
[b-7hgjovrf9u] .cc-find-dormant {
    margin: 0 0 1rem;
}

[b-7hgjovrf9u] .cc-find-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.25rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .cc-find-help {
    margin: 0 0 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

[b-7hgjovrf9u] .cc-find-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-7hgjovrf9u] .cc-find {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

[b-7hgjovrf9u] .cc-find--error {
    border-left-color: var(--color-down);
}

[b-7hgjovrf9u] .cc-find--warn {
    border-left-color: var(--color-degraded);
}

[b-7hgjovrf9u] .cc-find--notice,
[b-7hgjovrf9u] .cc-find--dormant {
    border-left-color: var(--color-unknown);
}

[b-7hgjovrf9u] .cc-find-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

[b-7hgjovrf9u] .cc-find-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-find-where {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-find-message {
    margin: 0.25rem 0 0;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-7hgjovrf9u] .cc-find-remedy {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-7hgjovrf9u] .cc-find-codes {
    margin: 0.25rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--color-unknown);
    overflow-wrap: anywhere;
}

[b-7hgjovrf9u] .cc-find-goto {
    margin-top: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-brand);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
}

[b-7hgjovrf9u] .cc-find-goto:hover {
    border-color: var(--color-brand-teal);
}

[b-7hgjovrf9u] .cc-find-goto:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

[b-7hgjovrf9u] .cc-json {
    display: block;
    width: calc(100% - 1.25rem);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    line-height: 1.45;
    resize: vertical;
}

/* ── Change envelope (CC3.1) ─────────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

[b-7hgjovrf9u] .cc-plan-mode {
    margin: 0 0 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
}

[b-7hgjovrf9u] .cc-plan-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

[b-7hgjovrf9u] .cc-plan-error {
    margin: 0 0 0.5rem;
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ── Editable inspectors (CC4.2) ─────────────────────────────────────────────
   The Edit{Text,Number,Select,Toggle} primitives are the forms designer's, and
   they render the fd- field vocabulary that InspectorShell publishes under
   `.fd-insp ::deep` — a scope this surface is not inside. Restated here in the
   control centre's own tokens rather than forking four components to carry a
   second set of class names, which is the arrangement CcPanelInspector.razor.css
   and TriggerEditor.razor.css already use, for the same reason. */

[b-7hgjovrf9u] .fd-fields,
[b-7hgjovrf9u] .cc-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

[b-7hgjovrf9u] .fd-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* .form-label already carries the micro-label look; the stack owns the spacing. */
[b-7hgjovrf9u] .fd-field .form-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
}

[b-7hgjovrf9u] .fd-field .form-input {
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
}

[b-7hgjovrf9u] .fd-field .form-hint,
[b-7hgjovrf9u] .fd-field .form-error {
    margin-top: 0;
    line-height: 1.45;
}

[b-7hgjovrf9u] .fd-field-textarea {
    resize: vertical;
    min-height: 3.25rem;
    line-height: 1.45;
}

[b-7hgjovrf9u] .fd-field-number { max-width: 7rem; }

[b-7hgjovrf9u] .fd-field-select { appearance: auto; }

[b-7hgjovrf9u] .fd-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

[b-7hgjovrf9u] .fd-switch--off { cursor: not-allowed; opacity: 0.6; }

[b-7hgjovrf9u] .fd-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[b-7hgjovrf9u] .fd-switch-track {
    position: relative;
    flex: none;
    width: 2rem;
    height: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    transition: background 0.12s, border-color 0.12s;
}

[b-7hgjovrf9u] .fd-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transform: translate(0, -50%);
    transition: transform 0.12s, background 0.12s;
}

[b-7hgjovrf9u] .fd-switch-input:checked + .fd-switch-track {
    background: color-mix(in srgb, var(--color-brand-teal) 22%, white);
    border-color: var(--color-brand-teal);
}

[b-7hgjovrf9u] .fd-switch-input:checked + .fd-switch-track .fd-switch-thumb {
    background: var(--color-brand-teal);
    transform: translate(0.8125rem, -50%);
}

[b-7hgjovrf9u] .fd-switch-input:focus-visible + .fd-switch-track {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

[b-7hgjovrf9u] .fd-switch-state {
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* ── Pick row: a value and the button that changes it ────────────────────── */

[b-7hgjovrf9u] .cc-pickrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

[b-7hgjovrf9u] .cc-pickvalue {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* ── Sizing (CC4.2) ──────────────────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-sizing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

[b-7hgjovrf9u] .cc-sizerow {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

[b-7hgjovrf9u] .cc-sizerow > .fd-field { flex: 1 1 auto; min-width: 0; }

/* The resize handle. It looks like a splitter because it is one — role="separator"
   — and CC4.4 added pointer dragging to it. Every .cc-grip rule lives in this one
   file, including the canvas card's edge variant below: the two are one component
   drawn two ways, and splitting their styling across two stylesheets would leave
   the cascade between them decided by bundle order. */
[b-7hgjovrf9u] .cc-grip {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.9rem;
    margin-top: 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
}

[b-7hgjovrf9u] .cc-grip--v { cursor: ew-resize; }

[b-7hgjovrf9u] .cc-grip--h { cursor: ns-resize; }

[b-7hgjovrf9u] .cc-grip--off { cursor: not-allowed; opacity: 0.6; }

[b-7hgjovrf9u] .cc-grip:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

[b-7hgjovrf9u] .cc-grip-bar {
    width: 2px;
    height: 0.875rem;
    border-radius: 1px;
    background: var(--color-text-secondary);
}

/* ── The canvas card's edge grip (CC4.4) ──────────────────────────────────────
   The same component as the rail's, drawn as the tile's right-hand edge instead of
   a button in a form row: no box, no border, just the bar, sitting half over the
   gap between two tiles the way a window splitter does.

   Every rule here overrides one above by being LATER in this file at equal
   specificity, which is only safe because both blocks are in the same stylesheet —
   the reason the comment on .cc-grip says to keep them together.

   Hidden until the tile is hovered or something inside it has focus, exactly like
   the reorder handle: a canvas of a dozen tiles each with a permanent teal edge
   would read as a diagram of its own controls. :focus-within is what keeps it from
   being an invisible tab stop — the grip's own focus reveals it. */
[b-7hgjovrf9u] .cc-grip--edge {
    position: absolute;
    top: 0.25rem;
    right: -0.4375rem;
    bottom: 0.25rem;
    z-index: 2;
    width: 0.875rem;
    height: auto;
    margin-top: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    opacity: 0;
    transition: opacity 0.12s;
}

[b-7hgjovrf9u] .cc-grip--edge .cc-grip-bar {
    width: 3px;
    height: 100%;
    max-height: 3rem;
    background: color-mix(in srgb, var(--color-brand-teal) 65%, var(--color-border));
}

[b-7hgjovrf9u] .cc-panel-slot:hover .cc-grip--edge,
[b-7hgjovrf9u] .cc-panel-slot:focus-within .cc-grip--edge,
[b-7hgjovrf9u] .cc-panel-slot.cc-resizing .cc-grip--edge {
    opacity: 1;
}

[b-7hgjovrf9u] .cc-panel-slot.cc-resizing .cc-grip-bar {
    background: var(--color-brand-teal);
}

/* The ring goes on the bar, not on the 14px hit area: the hit area is transparent
   and deliberately overhangs the card, so a box-shadow on it would draw a rounded
   rectangle floating in the gap between two tiles. */
[b-7hgjovrf9u] .cc-grip--edge:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
    opacity: 1;
}

[b-7hgjovrf9u] .cc-grip--edge:focus-visible .cc-grip-bar {
    background: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    [b-7hgjovrf9u] .cc-grip--edge { transition: none; }
}

[b-7hgjovrf9u] .cc-ruler {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-ruler-of { margin-left: auto; }

/* One Data-blob key, with the button that removes it. */
[b-7hgjovrf9u] .cc-keyrow {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

[b-7hgjovrf9u] .cc-keyrow > .fd-field { flex: 1 1 auto; min-width: 0; }

[b-7hgjovrf9u] .cc-keyclear { flex: none; margin-top: 1.2rem; }

/* ── Drill-through list (CC4.2) ──────────────────────────────────────────── */

[b-7hgjovrf9u] .cc-triggers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

[b-7hgjovrf9u] .cc-triggers > li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
}

[b-7hgjovrf9u] .cc-triggers > li > span {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text-secondary);
}

[b-7hgjovrf9u] .cc-triggers-remove {
    flex: none;
    padding: 0 0.125rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.6875rem;
    cursor: pointer;
}

[b-7hgjovrf9u] .cc-triggers-remove:hover {
    color: color-mix(in srgb, var(--color-down) 80%, var(--color-text-primary));
    text-decoration: underline;
}

[b-7hgjovrf9u] .cc-triggers-addrow {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

[b-7hgjovrf9u] .cc-triggers-addrow .cc-input { flex: 1 1 auto; min-width: 0; }

/* ── Picker filters (CC4.2) ──────────────────────────────────────────────── */

/* LibraryPicker already lays its Filters slot out as a flex row of labels; only
   the select needs sizing down to the dialog's scale. */
[b-7hgjovrf9u] .cc-pick-filter-label { font-weight: 600; }

[b-7hgjovrf9u] .cc-pick-kind {
    width: auto;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
}

/* ── Load states ─────────────────────────────────────────────────────────── */

.cc-state[b-7hgjovrf9u] {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-state--error[b-7hgjovrf9u] {
    border-left: 3px solid var(--color-down);
}

/* The contract fault is not a failure page: the request worked and there is a
   fix, so it reads as an advisory with the remedy pulled out. */
.cc-state--fault[b-7hgjovrf9u] {
    border-left: 3px solid var(--color-degraded);
}

.cc-state-title[b-7hgjovrf9u] {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-7hgjovrf9u] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.cc-remedy[b-7hgjovrf9u] {
    margin: 0 0 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--color-healthy) 35%, var(--color-border));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-healthy) 7%, var(--color-surface));
}

.cc-remedy p[b-7hgjovrf9u] {
    margin: 0.25rem 0 0;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.cc-upstream[b-7hgjovrf9u] {
    margin: 0;
    padding: 0.5rem;
    overflow-x: auto;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    white-space: pre-wrap;
}

.cc-state-actions[b-7hgjovrf9u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-state-link[b-7hgjovrf9u] {
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cc-state-link:hover[b-7hgjovrf9u] {
    text-decoration: underline;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */

.cc-skeleton[b-7hgjovrf9u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cc-skel-grid[b-7hgjovrf9u] {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
}

.cc-skel[b-7hgjovrf9u] {
    border-radius: var(--radius);
    background: linear-gradient(90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-border) 55%, var(--color-surface-raised)) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-shimmer-b-7hgjovrf9u 1.4s ease-in-out infinite;
}

.cc-skel--toolbar[b-7hgjovrf9u] { height: 56px; }
.cc-skel--pane[b-7hgjovrf9u] { height: 420px; }
.cc-skel--canvas[b-7hgjovrf9u] { height: 420px; }

@keyframes cc-shimmer-b-7hgjovrf9u {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Live region ─────────────────────────────────────────────────────────── */

/* Announced, not shown: the visible surfaces already say which node is
   selected — this exists for the reader who cannot see them. */
.cc-live[b-7hgjovrf9u] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-7hgjovrf9u] {
        animation: none;
    }

    [b-7hgjovrf9u] * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
/* /Components/Pages/ControlCentres/ControlCentres.razor.rz.scp.css */
/* Control Centres list page styles */

.cc-list-shell[b-q2w1qhqyqz] {
    padding: 2rem 1.5rem 4rem;
}

.page-header[b-q2w1qhqyqz] {
    margin-bottom: 2rem;
}

/* Header row: title block */
.cc-page-head[b-q2w1qhqyqz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cc-page-head .page-header[b-q2w1qhqyqz] {
    margin-bottom: 0;
}

.page-title[b-q2w1qhqyqz] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-q2w1qhqyqz] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Gate states */

.gate-checking[b-q2w1qhqyqz],
.gate-denied[b-q2w1qhqyqz] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
}

.gate-checking[b-q2w1qhqyqz] {
    text-align: center;
}

.gate-denied[b-q2w1qhqyqz] {
    color: var(--color-text-primary);
}

.gate-denied code[b-q2w1qhqyqz] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* Toolbar */

.cc-toolbar[b-q2w1qhqyqz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cc-filters[b-q2w1qhqyqz] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    flex: 1;
}

.cc-search-input[b-q2w1qhqyqz] {
    max-width: 22rem;
    min-width: 14rem;
}

.cc-filter-select[b-q2w1qhqyqz] {
    min-width: 10rem;
    max-width: 12rem;
}

.cc-count[b-q2w1qhqyqz] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cc-hint-pill[b-q2w1qhqyqz] {
    display: inline-block;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Data table */

.cc-table-wrap[b-q2w1qhqyqz] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cc-table[b-q2w1qhqyqz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.cc-th[b-q2w1qhqyqz] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.cc-th:hover[b-q2w1qhqyqz] {
    color: var(--color-text-primary);
}

.cc-th--sorted[b-q2w1qhqyqz] {
    color: var(--color-brand);
}

.cc-th--sorted:hover[b-q2w1qhqyqz] {
    color: var(--color-brand);
}

.cc-sort-icon[b-q2w1qhqyqz] {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.5rem;
    vertical-align: middle;
}

.cc-th--name[b-q2w1qhqyqz] { width: 22%; }
.cc-th--group[b-q2w1qhqyqz] { width: 13%; }
.cc-th--owner[b-q2w1qhqyqz] { width: 13%; }
.cc-th--status[b-q2w1qhqyqz] { width: 9%; }
.cc-th--tiles[b-q2w1qhqyqz] { width: 10%; }
.cc-th--grants[b-q2w1qhqyqz] { width: 9%; }
.cc-th--action[b-q2w1qhqyqz] { width: 24%; }

.cc-row[b-q2w1qhqyqz] {
    cursor: default;
    transition: background 0.1s;
}

.cc-row:hover[b-q2w1qhqyqz] {
    background: var(--color-surface-raised);
}

.cc-row:not(:last-child) .cc-td[b-q2w1qhqyqz] {
    border-bottom: 1px solid var(--color-border);
}

.cc-td[b-q2w1qhqyqz] {
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-td--name[b-q2w1qhqyqz] {
    font-weight: 500;
}

.cc-td--group[b-q2w1qhqyqz],
.cc-td--owner[b-q2w1qhqyqz] {
    color: var(--color-text-secondary);
}

.cc-td--tiles[b-q2w1qhqyqz] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cc-tile-count[b-q2w1qhqyqz] {
    display: inline-block;
}

.cc-td--grants[b-q2w1qhqyqz] {
    text-align: right;
}

.cc-grants-normal[b-q2w1qhqyqz] {
    display: inline-block;
    font-weight: 500;
}

.cc-grants-warning[b-q2w1qhqyqz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: color-mix(in srgb, var(--color-down) 10%, white);
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-down) 70%, black);
}

.cc-warning-icon[b-q2w1qhqyqz] {
    font-size: 0.875rem;
    line-height: 1;
}

.cc-td--action[b-q2w1qhqyqz] {
    text-align: right;
}

/* Row actions: Design, Open, Duplicate, Delete — one row, right aligned, in
   ascending order of consequence so the destructive one is never the first thing
   the pointer lands on coming in from the left. */

.cc-actions[b-q2w1qhqyqz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.875rem;
}

.cc-link[b-q2w1qhqyqz] {
    color: var(--color-brand);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s;
}

.cc-link:hover[b-q2w1qhqyqz] {
    color: var(--color-brand-teal);
}

/* The two actions that are buttons rather than links, styled to match them: they
   do something rather than go somewhere, and a link that writes is a lie to
   anybody using a screen reader or a middle click. */
.cc-link-btn[b-q2w1qhqyqz] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.cc-link-btn:disabled[b-q2w1qhqyqz] {
    opacity: 0.5;
    cursor: default;
}

.cc-link-btn--danger[b-q2w1qhqyqz] {
    color: var(--color-down);
}

.cc-link-btn--danger:hover:not(:disabled)[b-q2w1qhqyqz] {
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.cc-new-btn[b-q2w1qhqyqz] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The row a create just produced. Fades rather than pulses: the point is "it is
   this one", and the list is a calm surface. */
.cc-row--new[b-q2w1qhqyqz],
.cc-row--new:hover[b-q2w1qhqyqz] {
    background: color-mix(in srgb, var(--color-brand-teal) 8%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--color-brand-teal);
}

/* Badges */

.badge[b-q2w1qhqyqz] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-healthy[b-q2w1qhqyqz] {
    background: #f0fdf4;
    color: #166534;
}

.badge-unknown[b-q2w1qhqyqz] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Loading, empty and error states ──────────────────────────────
   One shape for all three: a centred block with a heading, a sentence and the
   action that resolves it. The loading case is a skeleton of the list rather
   than a spinner, so the layout does not jump when the rows arrive.
   ──────────────────────────────────────────────────────────────── */

.cc-list-skeleton[b-q2w1qhqyqz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-skel[b-q2w1qhqyqz] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-list-shimmer-b-q2w1qhqyqz 1.4s ease-in-out infinite;
}

.cc-skel--toolbar[b-q2w1qhqyqz] { height: 2.75rem; margin-bottom: 0.5rem; }
.cc-skel--row[b-q2w1qhqyqz] { height: 2.5rem; }

@keyframes cc-list-shimmer-b-q2w1qhqyqz {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.cc-state[b-q2w1qhqyqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.cc-state--error[b-q2w1qhqyqz] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.cc-state-title[b-q2w1qhqyqz] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-q2w1qhqyqz] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.cc-state-actions[b-q2w1qhqyqz] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cc-state-actions .btn-secondary[b-q2w1qhqyqz] { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-q2w1qhqyqz] { animation: none; }
}

/* ── The last action's report ──────────────────────────────────────
   Above the list, not a toast. A partial create names the rows that landed and
   a create with no grant explains why nobody can see the result — neither
   survives being shown for four seconds and taken away.
   ────────────────────────────────────────────────────────────────── */

.cc-result[b-q2w1qhqyqz] {
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface);
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.cc-result--ok[b-q2w1qhqyqz]      { border-left-color: var(--color-up, #2cb778); }
.cc-result--partial[b-q2w1qhqyqz] { border-left-color: #f8a31c; }
.cc-result--bad[b-q2w1qhqyqz]     { border-left-color: var(--color-down); }
.cc-result--quiet[b-q2w1qhqyqz]   { border-left-color: var(--color-border); }

.cc-result-head[b-q2w1qhqyqz] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.cc-result-title[b-q2w1qhqyqz] {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-result-close[b-q2w1qhqyqz] {
    flex: 0 0 auto;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.cc-result-close:hover[b-q2w1qhqyqz] {
    color: var(--color-text-primary);
}

.cc-result-body[b-q2w1qhqyqz] {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.cc-result-issue[b-q2w1qhqyqz] {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cc-result-issue code[b-q2w1qhqyqz] {
    margin-right: 0.375rem;
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 0.2rem;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.6875rem;
}

.cc-result-issue--error code[b-q2w1qhqyqz] { border-color: color-mix(in srgb, var(--color-down) 40%, white); }
.cc-result-issue--warn code[b-q2w1qhqyqz]  { border-color: #f8a31c; }

.cc-result-actions[b-q2w1qhqyqz] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cc-result-actions .btn-secondary[b-q2w1qhqyqz] {
    text-decoration: none;
}

/* ── The New dialog ────────────────────────────────────────────────
   Same shape as the designer's own dialogs (backdrop, centred card, sticky
   head and foot), reproduced here rather than shared: scoped CSS is per
   component, and the two have no other reason to be coupled.
   ────────────────────────────────────────────────────────────────── */

.cc-dlg-backdrop[b-q2w1qhqyqz] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.35);
}

.cc-dlg[b-q2w1qhqyqz] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(44rem, calc(100vh - 4rem));
    transform: translate(-50%, -50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.cc-dlg-head[b-q2w1qhqyqz] {
    padding: 1rem 1.125rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
}

.cc-dlg-title[b-q2w1qhqyqz] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-dlg-hint[b-q2w1qhqyqz] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

.cc-dlg-body[b-q2w1qhqyqz] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem 1.125rem 0.25rem;
}

.cc-dlg-label[b-q2w1qhqyqz] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

/* The global .form-input is content-box, so a 100%-wide field with padding
   would overflow its container. Stated here rather than inherited. */
.cc-dlg-input[b-q2w1qhqyqz] {
    box-sizing: border-box;
    width: 100%;
}

.cc-field[b-q2w1qhqyqz] {
    margin-bottom: 0.875rem;
}

.cc-field-help[b-q2w1qhqyqz] {
    margin: 0.3125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cc-field-help code[b-q2w1qhqyqz],
.cc-dlg-note code[b-q2w1qhqyqz] {
    padding: 0.05rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.2rem;
    background: var(--color-surface-raised);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.6875rem;
}

.cc-check[b-q2w1qhqyqz] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.cc-check input[b-q2w1qhqyqz] {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.cc-check-help[b-q2w1qhqyqz] {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cc-dlg-note[b-q2w1qhqyqz] {
    margin: 0 0 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand-teal);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cc-dlg-error[b-q2w1qhqyqz] {
    margin: 0 0 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 6%, white);
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.cc-dlg-foot[b-q2w1qhqyqz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--color-border);
}

.cc-dlg-spacer[b-q2w1qhqyqz] {
    flex: 1 1 auto;
}

/* ── Inside the Duplicate and Delete confirms ──────────────────────
   ::deep, because these render into ConfirmDialog's MessageContent and scoped
   CSS otherwise stops at this component's own markup.
   ────────────────────────────────────────────────────────────────── */

[b-q2w1qhqyqz] .cc-confirm-list {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

[b-q2w1qhqyqz] .cc-confirm-aside {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

[b-q2w1qhqyqz] .cc-confirm-bad {
    margin: 0.625rem 0 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 6%, white);
    font-size: 0.75rem;
    line-height: 1.55;
}
/* /Components/Pages/ControlCentres/ControlCentreViewerPage.razor.rz.scp.css */
/* ── Control centre viewer (CC6.5) ──────────────────────────────────────────
   The reading surface: a page header, the dashboard's own header band, then
   the body rows as strips of tiles. No outline, no rail, no selection — every
   pixel of chrome the designer has is a pixel this page does not need.

   TWO THINGS ABOUT THIS FILE ARE NOT OPTIONAL.

   1. It republishes the shared cc- primitives through ::deep. Scoped CSS is
      per-component, and CcFilterBar, CcFiltersDialog and CcGlobalFilterChips
      deliberately define only their own classes and inherit .cc-banner,
      .cc-facts, .cc-field, .cc-input and .cc-field-help from whichever page
      hosts them. Without these blocks the filter bar renders unstyled here and
      correctly one page away, which is the kind of bug that takes an afternoon.
      They are the designer page's own values, copied rather than shared,
      because a shared file would have to be global and nothing else in this
      repository publishes cc- globally.

   2. Every override wins by SPECIFICITY, never by order. The scoped-CSS bundle
      emits each component twice and out of file order, so a rule that relies on
      coming later in the file is a rule that works until the next component is
      added.

   Sizing mirrors the panel card's, and uses the same custom-property names on
   purpose — a reader who has understood one has understood both:

     --cc-w      the stored 8002 Width column, as a percentage;
     --cc-w-css  the panel Data blob's own CSS width, which the web app spreads
                 last and therefore wins;
     --cc-h      the stored Height column, UNITLESS, multiplied by a stated
                 reference height because a stored height is a percentage of a
                 dashboard body this page does not have;
     --cc-h-css  as --cc-w-css, for height.
   ────────────────────────────────────────────────────────────────────────── */

.cc-viewer-shell[b-aelkmp2vfj] {
    --cc-body-h: 240px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 3rem;
}

/* ── Page header ─────────────────────────────────────────────────────────── */

.cc-viewer-head[b-aelkmp2vfj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cc-viewer-titles[b-aelkmp2vfj] {
    min-width: 0;
    max-width: 52rem;
}

.cc-viewer-crumb[b-aelkmp2vfj] {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cc-viewer-crumb a[b-aelkmp2vfj] {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.cc-viewer-crumb a:hover[b-aelkmp2vfj] {
    color: var(--color-brand);
    text-decoration: underline;
}

.page-title[b-aelkmp2vfj] {
    margin: 0 0 0.375rem;
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

/* The subtitle is the sentence that stops this page being mistaken for the
   product, so it is set to be read rather than skimmed past. */
.page-subtitle[b-aelkmp2vfj] {
    margin: 0;
    max-width: 46rem;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.cc-viewer-desc[b-aelkmp2vfj] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.cc-viewer-actions[b-aelkmp2vfj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cc-viewer-link[b-aelkmp2vfj] {
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cc-viewer-link:hover[b-aelkmp2vfj] {
    text-decoration: underline;
}

/* ── Header band ─────────────────────────────────────────────────────────── */

.cc-viewer-band[b-aelkmp2vfj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/* No band in the web app means no Filters button in the web app. Dashed, so it
   reads as an absence rather than as a panel that happens to be short. */
.cc-viewer-band--empty[b-aelkmp2vfj] {
    border-style: dashed;
    background: var(--color-surface-raised);
    box-shadow: none;
}

.cc-viewer-stats[b-aelkmp2vfj] {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
    overflow-x: auto;
}

/* ── Notes ───────────────────────────────────────────────────────────────── */

.cc-viewer-note[b-aelkmp2vfj] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cc-viewer-note--quiet[b-aelkmp2vfj] {
    font-size: 0.75rem;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.cc-viewer-row[b-aelkmp2vfj] {
    padding: 0.75rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-viewer-row--disabled[b-aelkmp2vfj] {
    border-left: 3px solid var(--color-degraded);
}

.cc-viewer-row-head[b-aelkmp2vfj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.cc-viewer-row-title[b-aelkmp2vfj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.25rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.5);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-subtitle);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.cc-viewer-row-title:hover[b-aelkmp2vfj] {
    background: var(--color-surface-raised);
}

.cc-viewer-row-title:focus-visible[b-aelkmp2vfj] {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

.cc-viewer-caret[b-aelkmp2vfj] {
    display: inline-block;
    color: var(--color-text-secondary);
    transition: transform 0.12s ease-out;
}

.cc-viewer-caret--open[b-aelkmp2vfj] {
    transform: rotate(90deg);
}

/* ── Strips and slots ────────────────────────────────────────────────────── */

.cc-viewer-strip[b-aelkmp2vfj] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cc-viewer-slot[b-aelkmp2vfj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    /* The blob's CSS width first, exactly as the web app applies it. */
    flex: 0 1 var(--cc-w-css, var(--cc-w, 100%));
    max-width: 100%;
    min-width: 14rem;
}

/* Value, PieChart, Image and Report are drawn at 280x200 in the web app
   whatever the columns or the blob say. */
.cc-viewer-slot--fixed[b-aelkmp2vfj] {
    flex: 0 0 280px;
    width: 280px;
}

/* A placement the run produced nothing for. The web app draws no gap at all
   here; this page does, because a silent hole is indistinguishable from a tile
   that was never placed. */
.cc-viewer-slot--empty[b-aelkmp2vfj] {
    flex: 0 1 18rem;
    opacity: 0.85;
}

/* The tile fills its slot. Height is the stored percentage against a stated
   reference, and a blob height beats it — as it does in the web app. */
.cc-viewer-slot[b-aelkmp2vfj] >  .cc-tile {
    height: var(--cc-h-css, calc(var(--cc-h, 40) * var(--cc-body-h) / 100));
    min-height: 8rem;
}

.cc-viewer-slot--fixed[b-aelkmp2vfj] >  .cc-tile,
.cc-viewer-slot--empty[b-aelkmp2vfj] >  .cc-tile {
    height: auto;
}

/* ── Shared cc- primitives, republished for the hosted components ────────── */

[b-aelkmp2vfj] .cc-microlabel {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

[b-aelkmp2vfj] .cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

[b-aelkmp2vfj] .cc-chip--warn {
    border-color: color-mix(in srgb, var(--color-degraded) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-degraded) 10%, var(--color-surface));
    color: color-mix(in srgb, var(--color-degraded) 70%, var(--color-text-primary));
}

[b-aelkmp2vfj] .cc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0 0 0.875rem;
}

[b-aelkmp2vfj] .cc-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
}

[b-aelkmp2vfj] .cc-input:focus-visible {
    outline: none;
    border-color: var(--color-brand-teal);
    box-shadow: 0 0 0 3px rgba(14, 165, 198, 0.15);
}

[b-aelkmp2vfj] .cc-field-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.45;
}

[b-aelkmp2vfj] .cc-facts {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
}

[b-aelkmp2vfj] .cc-facts dt {
    color: var(--color-text-secondary);
    font-weight: 600;
}

[b-aelkmp2vfj] .cc-facts dd {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

[b-aelkmp2vfj] .cc-banner {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.45;
}

[b-aelkmp2vfj] .cc-banner ul {
    margin: 0.375rem 0 0;
    padding-left: 1rem;
}

[b-aelkmp2vfj] .cc-banner--warn {
    border-left-color: var(--color-degraded);
}

[b-aelkmp2vfj] .cc-banner--error {
    border-left-color: var(--color-down);
}

/* ── Load, fault and denial states ───────────────────────────────────────── */

.gate-checking[b-aelkmp2vfj],
.gate-denied[b-aelkmp2vfj] {
    max-width: 40rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.gate-checking[b-aelkmp2vfj] {
    margin: 1.5rem;
    text-align: center;
}

.gate-denied[b-aelkmp2vfj] {
    color: var(--color-text-primary);
}

.gate-denied h2[b-aelkmp2vfj] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.gate-denied p[b-aelkmp2vfj] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cc-state[b-aelkmp2vfj] {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cc-state--error[b-aelkmp2vfj] {
    border-left: 3px solid var(--color-down);
}

.cc-state--fault[b-aelkmp2vfj] {
    border-left: 3px solid var(--color-degraded);
}

.cc-state-title[b-aelkmp2vfj] {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cc-state-body[b-aelkmp2vfj] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.cc-state-actions[b-aelkmp2vfj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-state-link[b-aelkmp2vfj] {
    color: var(--color-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.cc-state-link:hover[b-aelkmp2vfj] {
    text-decoration: underline;
}

.cc-remedy[b-aelkmp2vfj] {
    margin: 0 0 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--color-healthy) 35%, var(--color-border));
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-healthy) 7%, var(--color-surface));
}

.cc-remedy p[b-aelkmp2vfj] {
    margin: 0.25rem 0 0;
    color: var(--color-text-primary);
    font-size: 0.875rem;
    line-height: 1.55;
}

.cc-microlabel[b-aelkmp2vfj] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.cc-inspect[b-aelkmp2vfj] {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface);
}

.cc-inspect > summary[b-aelkmp2vfj] {
    padding: 0.5rem 0.625rem;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.cc-inspect > *:not(summary)[b-aelkmp2vfj] {
    margin: 0 0.625rem 0.625rem;
}

.cc-upstream[b-aelkmp2vfj] {
    margin: 0;
    padding: 0.5rem;
    overflow-x: auto;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    white-space: pre-wrap;
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */

.cc-viewer-skeleton[b-aelkmp2vfj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cc-viewer-skeleton-strip[b-aelkmp2vfj] {
    display: flex;
    gap: 0.75rem;
}

.cc-skel[b-aelkmp2vfj] {
    border-radius: var(--radius);
    background: linear-gradient(90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-border) 55%, var(--color-surface-raised)) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: cc-viewer-shimmer-b-aelkmp2vfj 1.4s ease-in-out infinite;
}

.cc-skel--toolbar[b-aelkmp2vfj] { height: 72px; }
.cc-skel--band[b-aelkmp2vfj] { height: 88px; }
.cc-skel--tile[b-aelkmp2vfj] { flex: 1 1 0; height: 240px; }

@keyframes cc-viewer-shimmer-b-aelkmp2vfj {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── The page's one live region ──────────────────────────────────────────── */

.cc-live[b-aelkmp2vfj] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .cc-skel[b-aelkmp2vfj] {
        animation: none;
    }

    .cc-viewer-caret[b-aelkmp2vfj] {
        transition: none;
    }

    [b-aelkmp2vfj] * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}
/* /Components/Pages/ControlPlaneDesignerPage.razor.rz.scp.css */
.gate-checking[b-82ao4r672k] {
    color: var(--text-muted, #6b7280);
    padding: 2rem 0;
}

.gate-denied[b-82ao4r672k] {
    max-width: 32rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    background: #fef2f2;
}

.gate-denied h2[b-82ao4r672k] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #991b1b;
}

.gate-denied p[b-82ao4r672k] {
    margin: 0;
    font-size: 0.9rem;
    color: #7f1d1d;
}
/* /Components/Pages/DataSources.razor.rz.scp.css */
/* Data Sources — first-cut master/detail browser for DocMX data tables.
   Visual language mirrors DocumentTypes.razor.css (.dt-*) but rebrand-
   prefixed (.ds-*) so the styles are scoped without leaking. */

.ds-shell[b-q921fdnkmt] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.ds-rail[b-q921fdnkmt] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.ds-rail-header[b-q921fdnkmt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.ds-rail-title-row[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-rail-title[b-q921fdnkmt] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ds-refresh-btn[b-q921fdnkmt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ds-refresh-btn:hover:not(:disabled)[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.ds-refresh-btn:disabled[b-q921fdnkmt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ds-refresh-spin[b-q921fdnkmt] {
    animation: ds-spin-b-q921fdnkmt 0.9s linear infinite;
}

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

.ds-search[b-q921fdnkmt] {
    width: 100%;
}

.ds-rail-meta[b-q921fdnkmt] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1rem;
}

.ds-rail-status[b-q921fdnkmt] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.ds-rail-error[b-q921fdnkmt] {
    color: var(--color-down);
}

.ds-list[b-q921fdnkmt] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ds-list-item[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.ds-list-item:hover[b-q921fdnkmt] {
    background: var(--color-surface-raised);
}

.ds-list-item:focus-visible[b-q921fdnkmt] {
    outline: 2px solid var(--color-brand-teal, var(--color-brand));
    outline-offset: -2px;
}

.ds-list-item--selected[b-q921fdnkmt] {
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 10%, var(--color-surface));
    border-left-color: var(--color-brand-teal, var(--color-brand));
}

.ds-list-item--selected .ds-list-item-name[b-q921fdnkmt] {
    font-weight: 600;
}

.ds-list-item-body[b-q921fdnkmt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.1rem;
}

.ds-list-item-name[b-q921fdnkmt] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.ds-list-item-sub[b-q921fdnkmt] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ds-id[b-q921fdnkmt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text-secondary);
}

.ds-type-tag[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.ds-detail[b-q921fdnkmt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ds-empty[b-q921fdnkmt] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
    margin: auto;
}

.ds-empty h2[b-q921fdnkmt] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.ds-empty p[b-q921fdnkmt] {
    margin: 0;
    font-size: 0.875rem;
    max-width: 420px;
}

.ds-detail-header[b-q921fdnkmt] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.ds-detail-heading[b-q921fdnkmt] {
    flex: 1;
    min-width: 0;
}

.ds-detail-heading h2[b-q921fdnkmt] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ds-detail-sub[b-q921fdnkmt] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.ds-detail-sub code[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

/* Tabs come from the shared <TabStrip>, which brings its own styles. */

.ds-tab-panel[b-q921fdnkmt] {
    padding: 0.25rem 0;
}

.ds-muted[b-q921fdnkmt] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Sections */

.ds-section + .ds-section[b-q921fdnkmt] {
    margin-top: 1.5rem;
}

.ds-section-title[b-q921fdnkmt] {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* Tables (Parameters + Data tab) */

.ds-table-scroll[b-q921fdnkmt] {
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.ds-table-scroll--data[b-q921fdnkmt] {
    max-height: calc(100vh - 380px);
}

.ds-table[b-q921fdnkmt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.ds-table thead th[b-q921fdnkmt] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    z-index: 1;
    white-space: nowrap;
}

.ds-table tbody td[b-q921fdnkmt] {
    padding: 0.45rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
    white-space: nowrap;
}

.ds-table--data tbody td[b-q921fdnkmt] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-table tbody tr:last-child td[b-q921fdnkmt] {
    border-bottom: none;
}

.ds-table tbody tr:hover[b-q921fdnkmt] {
    background: var(--color-surface-raised);
}

/* Sortable headers */

.ds-th--sortable[b-q921fdnkmt] {
    cursor: pointer;
    user-select: none;
}

.ds-th--sortable:hover[b-q921fdnkmt] {
    color: var(--color-text-primary);
}

.ds-th-sort-indicator[b-q921fdnkmt] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
    display: inline-block;
    min-width: 0.8em;
}

.ds-th--sorted .ds-th-sort-indicator[b-q921fdnkmt] {
    opacity: 1;
    color: var(--color-brand-teal, var(--color-brand));
}

/* Per-row Edit / Delete actions on the Data tab (L2, #383) */

.ds-th--actions[b-q921fdnkmt] {
    text-align: right;
}

.ds-row-actions[b-q921fdnkmt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
    white-space: nowrap;
}

.ds-row-action[b-q921fdnkmt] {
    padding: 0.25rem 0.625rem;
    font-size: 0.8rem;
}

/* Per-column filter row inside thead, sticky just under the header row. */

.ds-filter-row th[b-q921fdnkmt] {
    position: sticky;
    top: 2.4rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.4rem 0.5rem;
    text-transform: none;
    font-weight: 400;
    z-index: 1;
}

.ds-filter-input[b-q921fdnkmt] {
    width: 100%;
    min-width: 6.5rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-sizing: border-box;
}

.ds-filter-input:focus[b-q921fdnkmt] {
    outline: none;
    border-color: var(--color-brand-teal, var(--color-brand));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 22%, transparent);
}

.ds-table-empty[b-q921fdnkmt] {
    text-align: center;
    padding: 1.25rem !important;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Pagination bar */

.ds-pagination[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.ds-pagination-controls[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ds-pagination-pagesize-label[b-q921fdnkmt] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.6rem;
}

.ds-pagination-pagesize[b-q921fdnkmt] {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.ds-pagination-btn[b-q921fdnkmt] {
    min-width: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.ds-pagination-btn:hover:not(:disabled)[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    border-color: var(--color-text-secondary);
}

.ds-pagination-btn:disabled[b-q921fdnkmt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ds-pagination-page[b-q921fdnkmt] {
    padding: 0 0.6rem;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Data toolbar */

.ds-data-toolbar[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ds-data-search-input[b-q921fdnkmt] {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.ds-data-toolbar-actions[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* ── Rail: scope switch and the create action ───────────────────────────── */

.ds-scope[b-q921fdnkmt] {
    display: flex;
    gap: 0.25rem;
}

.ds-scope-btn[b-q921fdnkmt] {
    flex: 1;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ds-scope-btn:hover:not(:disabled)[b-q921fdnkmt] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.ds-scope-btn--on[b-q921fdnkmt] {
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 12%, var(--color-surface));
    border-color: var(--color-brand-teal, var(--color-brand));
    color: var(--color-brand);
    font-weight: 600;
}

.ds-scope-btn:disabled[b-q921fdnkmt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ds-new-btn[b-q921fdnkmt] {
    width: 100%;
    margin-bottom: 0.25rem;
}

/* ── Detail header ─────────────────────────────────────────────────────── */

.ds-detail-actions[b-q921fdnkmt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

/*  Two columns on a wide pane, one on a narrow one. A field that carries a long
    explanation (connection, query) spans both so the hint is not a column of
    single words. */
.ds-fields[b-q921fdnkmt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem 1.5rem;
    max-width: 60rem;
}

.ds-field[b-q921fdnkmt] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ds-field--wide[b-q921fdnkmt] {
    grid-column: 1 / -1;
}

/*  The global .form-input is content-box, so a width has to carry its own
    box-sizing or the padding pushes the control out of its column. Specificity
    rather than order: the bundle emits components twice and out of file order. */
.ds-field .form-input[b-q921fdnkmt] {
    width: 100%;
    box-sizing: border-box;
}

.ds-textarea[b-q921fdnkmt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
}

.ds-readonly[b-q921fdnkmt] {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
}

.ds-readonly code[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.ds-check[b-q921fdnkmt] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ds-check input[b-q921fdnkmt] {
    margin: 0;
}

/* ── Notes, banners, disclosure ─────────────────────────────────────────── */

.ds-note[b-q921fdnkmt] {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 62rem;
}

.ds-note code[b-q921fdnkmt],
.ds-facts code[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    font-size: 0.78rem;
}

.ds-withheld[b-q921fdnkmt] {
    margin: 0.75rem 0 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-secondary);
    border-radius: 6px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ds-banner[b-q921fdnkmt] {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.55;
}

.ds-banner--warn[b-q921fdnkmt] {
    background: color-mix(in srgb, var(--color-warn, #f8a31c) 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-warn, #f8a31c) 45%, var(--color-border));
    color: var(--color-text-primary);
}

.ds-details[b-q921fdnkmt] {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

.ds-details > summary[b-q921fdnkmt] {
    cursor: pointer;
    color: var(--color-brand);
    width: fit-content;
}

.ds-facts[b-q921fdnkmt] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    line-height: 1.55;
    max-width: 62rem;
}

.ds-pre[b-q921fdnkmt] {
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.5;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Parameters grid ───────────────────────────────────────────────────── */

.ds-params-head[b-q921fdnkmt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.ds-params-head .ds-section-title[b-q921fdnkmt] {
    margin-bottom: 0.25rem;
}

.ds-table--params tbody td[b-q921fdnkmt] {
    padding: 0.35rem 0.5rem;
}

/*  Eight editable columns will not fit a laptop pane whatever is done, so the
    wrapper scrolls — but the minimums are kept tight enough that the common case
    does not. */
.ds-cell-input[b-q921fdnkmt] {
    width: 100%;
    min-width: 7.5rem;
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.82rem;
}

.ds-cell-input--short[b-q921fdnkmt] {
    min-width: 6rem;
}

.ds-cell-input--num[b-q921fdnkmt] {
    min-width: 4.5rem;
}

.ds-cell-input:focus[b-q921fdnkmt] {
    outline: none;
    border-color: var(--color-brand-teal, var(--color-brand));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 22%, transparent);
}

.ds-cell-input:disabled[b-q921fdnkmt] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/*  A staged removal stays legible — it is undoable until Save, so it is not
    struck out to the point of being unreadable. */
.ds-row--removed td[b-q921fdnkmt] {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: var(--color-text-secondary);
}

.ds-row--removed .ds-link-btn[b-q921fdnkmt] {
    opacity: 1;
    text-decoration: none;
}

.ds-row-actions[b-q921fdnkmt] {
    text-align: right;
    white-space: nowrap;
}

.ds-link-btn[b-q921fdnkmt] {
    border: none;
    background: none;
    padding: 0.2rem 0.15rem;
    font: inherit;
    font-size: 0.82rem;
    color: var(--color-brand);
    cursor: pointer;
    text-decoration: underline;
}

.ds-link-btn:disabled[b-q921fdnkmt] {
    color: var(--color-text-secondary);
    cursor: not-allowed;
    text-decoration: none;
}

/*  "Not reported" is a fact about the API, not a value — it must not read as
    one, so it is quiet and italic wherever it appears. */
.ds-unreported[b-q921fdnkmt] {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

/* ── Test query ────────────────────────────────────────────────────────── */

.ds-test-fields[b-q921fdnkmt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.9rem 1.5rem;
    max-width: 60rem;
    margin-top: 0.5rem;
}

/*  What a create or a delete did, shown on the empty pane it left behind. */
.ds-flash[b-q921fdnkmt] {
    margin: 0 0 1rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-up, #2cb778) 40%, var(--color-border));
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-up, #2cb778) 8%, var(--color-surface));
    color: var(--color-text-primary);
    font-size: 0.85rem;
}

/* ── Upload to a table by name ─────────────────────────────────────────────
   The wizard's second entry point, on the empty pane. A lookup table written
   by a scheduled feed often has no data-source row, so it never appears in the
   rail — and that is exactly the kind of table a client sends a spreadsheet
   for. */

.ds-by-name[b-q921fdnkmt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, #dfe3e8);
    width: 100%;
    max-width: 60rem;
    text-align: left;
}

.ds-by-name-row[b-q921fdnkmt] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.ds-by-name-row .form-input[b-q921fdnkmt] {
    flex: 1 1 18rem;
    min-width: 12rem;
    box-sizing: border-box;
}

.ds-by-name-label[b-q921fdnkmt] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.ds-by-name-hint[b-q921fdnkmt] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #5b6472);
}

.ds-by-name-head[b-q921fdnkmt] {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
}

.ds-by-name-head h3[b-q921fdnkmt] {
    margin: 0;
    font-size: 1rem;
}

/* ── Kind chips ────────────────────────────────────────────────────────────
   Deliberately a different shape from .ds-scope above: those pick which list
   is read from DocMX, these narrow the list already in hand. Making them look
   alike would say they were the same kind of control. */

.ds-kinds[b-q921fdnkmt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.ds-kind[b-q921fdnkmt] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--border, #dfe3e8);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text, #26303d);
    cursor: pointer;
    white-space: nowrap;
}

.ds-kind:hover[b-q921fdnkmt] {
    border-color: #b9c2cc;
    background: #f5f7f9;
}

.ds-kind--on[b-q921fdnkmt],
.ds-kind--on:hover[b-q921fdnkmt] {
    border-color: #0b4f9e;
    background: #eaf1fc;
    color: #0b4f9e;
    font-weight: 600;
}

/* Tabular figures so the counts do not jitter as the search box is typed. */
.ds-kind-n[b-q921fdnkmt] {
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    color: var(--text-muted, #5b6472);
}

.ds-kind--on .ds-kind-n[b-q921fdnkmt] {
    color: #0b4f9e;
}
/* /Components/Pages/DocumentTypes.razor.rz.scp.css */
/* Document Types — the one-page document type (Taxonomy TX2, #802, decision T1).
   Two-pane layout mirroring Entities.razor.css: the rail with its attribute pills and
   group-name chips, and the detail pane with its header and TabStrip. The tabs' own
   markup lives in Features/DocumentTypes/* with their own scoped styles. */

.dt-shell[b-ewuth79ozn] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* Laptop widths (TX2, #802): the detail pane carries eight tabs now, so the rail gives up 40px. */
@media (max-width: 1366px) {
    .dt-shell[b-ewuth79ozn] {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 1rem;
    }
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.dt-rail[b-ewuth79ozn] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.dt-rail-header[b-ewuth79ozn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.dt-rail-title-row[b-ewuth79ozn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dt-rail-title[b-ewuth79ozn] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dt-rail-title-actions[b-ewuth79ozn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* D1 (#367) — only rendered when AdministrationGate grants Create for this user. */
.dt-new-btn[b-ewuth79ozn] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 0.625rem;
    border-radius: 6px;
    background: var(--color-brand-teal);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.dt-new-btn:hover[b-ewuth79ozn] {
    opacity: 0.9;
}

.dt-refresh-btn[b-ewuth79ozn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dt-refresh-btn:hover:not(:disabled)[b-ewuth79ozn] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.dt-refresh-btn:disabled[b-ewuth79ozn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dt-refresh-spin[b-ewuth79ozn] {
    animation: dt-spin-b-ewuth79ozn 0.9s linear infinite;
}

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

.dt-search[b-ewuth79ozn],
.dt-group-select[b-ewuth79ozn] {
    width: 100%;
}

.dt-pill-row[b-ewuth79ozn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.dt-pill[b-ewuth79ozn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.dt-pill:hover[b-ewuth79ozn] {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.dt-pill--on[b-ewuth79ozn] {
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 14%, var(--color-surface));
    border-color: var(--color-brand-teal, var(--color-brand));
    color: var(--color-brand);
    font-weight: 500;
}

.dt-rail-meta[b-ewuth79ozn] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1rem;
}

.dt-debug[b-ewuth79ozn] {
    margin-left: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.dt-rail-status[b-ewuth79ozn] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.dt-rail-error[b-ewuth79ozn] {
    color: var(--color-down);
}

.dt-list[b-ewuth79ozn] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dt-list-item[b-ewuth79ozn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.dt-list-item:hover[b-ewuth79ozn] {
    background: var(--color-surface-raised);
}

.dt-list-item:focus-visible[b-ewuth79ozn] {
    outline: 2px solid var(--color-brand-teal, var(--color-brand));
    outline-offset: -2px;
}

.dt-list-item--selected[b-ewuth79ozn] {
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 10%, var(--color-surface));
    border-left-color: var(--color-brand-teal, var(--color-brand));
}

.dt-list-item--selected .dt-list-item-name[b-ewuth79ozn] {
    font-weight: 600;
}

.dt-list-item-body[b-ewuth79ozn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.1rem;
}

.dt-list-item-name[b-ewuth79ozn] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.dt-list-item-sub[b-ewuth79ozn] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.dt-id[b-ewuth79ozn] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text-secondary);
}

.dt-group-tag[b-ewuth79ozn] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-list-item-flags[b-ewuth79ozn] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.dt-flag[b-ewuth79ozn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 18%, var(--color-surface));
    color: var(--color-brand);
    font-size: 0.65rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.dt-detail[b-ewuth79ozn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dt-empty[b-ewuth79ozn] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
    margin: auto;
}

.dt-empty h2[b-ewuth79ozn] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.dt-empty p[b-ewuth79ozn] {
    margin: 0;
    font-size: 0.875rem;
    max-width: 420px;
}

.dt-detail-header[b-ewuth79ozn] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.dt-detail-heading[b-ewuth79ozn] {
    flex: 1;
    min-width: 0;
}

.dt-detail-heading h2[b-ewuth79ozn] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dt-detail-sub[b-ewuth79ozn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.dt-detail-sep[b-ewuth79ozn] {
    color: var(--color-border);
}

.dt-detail-description[b-ewuth79ozn] {
    min-width: 0;
}

.dt-cancel-new[b-ewuth79ozn] {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    text-decoration: none;
}

.dt-detail-sub code[b-ewuth79ozn] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.dt-detail-badges[b-ewuth79ozn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Tabs — a TabStrip (Shared) since TX2; only the spacing around it is this page's. */

.dt-detail[b-ewuth79ozn]  .ts {
    margin: 1.25rem 0 1.5rem;
    flex-wrap: wrap;
}

.dt-tab-panel[b-ewuth79ozn] {
    padding: 0.25rem 0;
}

.dt-muted[b-ewuth79ozn] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Sections in Properties / Aging */

.dt-section + .dt-section[b-ewuth79ozn] {
    margin-top: 1.5rem;
}

.dt-section-title[b-ewuth79ozn] {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.visually-hidden[b-ewuth79ozn] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Duplicate quick action (Taxonomy TX9, #809) — rendered into the Overview
   tab's slot from this page, so it carries this file's scope, not the tab's. */
.dt-duplicate-btn[b-ewuth79ozn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* /Components/Pages/Entities.razor.rz.scp.css */
/* Entities page — entity-first browsing with a filterable rail and a
   detail pane backed by the entity record, its role members, and its
   group memberships. Mirrors the visual language of Users.razor. */

.en-shell[b-q4or78qfth] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.en-rail[b-q4or78qfth] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.en-rail-header[b-q4or78qfth] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.en-rail-title-row[b-q4or78qfth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.en-rail-title[b-q4or78qfth] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.en-rail-title-actions[b-q4or78qfth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* E1 (#363) — only rendered when AdministrationGate grants Create for this user. */
.en-new-btn[b-q4or78qfth] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 0.625rem;
    border-radius: 6px;
    background: var(--color-brand-teal);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.en-new-btn:hover[b-q4or78qfth] {
    opacity: 0.9;
}

/* E1 (#363) — the read-only detail's entry point into the gated edit page. */
.en-edit-btn[b-q4or78qfth] {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
}

.en-refresh-btn[b-q4or78qfth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.en-refresh-btn:hover:not(:disabled)[b-q4or78qfth] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.en-refresh-btn:disabled[b-q4or78qfth] {
    opacity: 0.5;
    cursor: not-allowed;
}

.en-refresh-spin[b-q4or78qfth] {
    animation: en-spin-b-q4or78qfth 0.9s linear infinite;
}

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

.en-search[b-q4or78qfth] {
    width: 100%;
}

.en-rail-meta[b-q4or78qfth] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    min-height: 1rem;
}

.en-rail-status[b-q4or78qfth] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.en-rail-error[b-q4or78qfth] {
    color: var(--color-down);
}

/* List */

.en-list[b-q4or78qfth] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.en-list-item[b-q4or78qfth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 1.25rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.en-list-item:hover[b-q4or78qfth] {
    background: var(--color-surface-raised);
}

.en-list-item:focus-visible[b-q4or78qfth] {
    outline: 2px solid var(--color-brand-teal, var(--color-brand));
    outline-offset: -2px;
}

.en-list-item--selected[b-q4or78qfth] {
    background: color-mix(in srgb, var(--color-brand-teal, var(--color-brand)) 10%, var(--color-surface));
    border-left-color: var(--color-brand-teal, var(--color-brand));
}

.en-list-item--selected .en-list-item-name[b-q4or78qfth] {
    font-weight: 600;
}

.en-list-item-body[b-q4or78qfth] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.05rem;
}

.en-list-item-name[b-q4or78qfth] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.en-list-item-sub[b-q4or78qfth] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.en-detail[b-q4or78qfth] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.en-empty[b-q4or78qfth] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
    margin: auto;
}

.en-empty h2[b-q4or78qfth] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.en-empty p[b-q4or78qfth] {
    margin: 0;
    font-size: 0.875rem;
    max-width: 420px;
}

.en-detail-header[b-q4or78qfth] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.en-detail-heading[b-q4or78qfth] {
    flex: 1;
    min-width: 0;
}

.en-detail-heading h2[b-q4or78qfth] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.en-detail-sub[b-q4or78qfth] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.en-detail-sub code[b-q4or78qfth] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.en-detail-badges[b-q4or78qfth] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.en-tabs[b-q4or78qfth] {
    display: flex;
    gap: 0.25rem;
    margin: 1.25rem 0 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.en-tab[b-q4or78qfth] {
    background: transparent;
    border: none;
    padding: 0.625rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.en-tab:hover[b-q4or78qfth] {
    color: var(--color-text-primary);
}

.en-tab--active[b-q4or78qfth] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand-teal);
    font-weight: 500;
}

.en-tab-panel[b-q4or78qfth] {
    padding: 0.25rem 0;
}

.en-muted[b-q4or78qfth] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.en-muted-mono[b-q4or78qfth] {
    color: var(--color-text-secondary);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

/* Properties (legacy flat dl — kept for any callers, but Overview uses cards) */

.en-facts[b-q4or78qfth] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    align-items: center;
}

.en-facts dt[b-q4or78qfth] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.en-facts dd[b-q4or78qfth] {
    margin: 0;
    color: var(--color-text-primary);
    min-width: 0;
}

.en-facts code[b-q4or78qfth] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.85rem;
    word-break: break-all;
}

/* ── Overview cards (parity with Roles) ────────────────────────────────── */

.en-card-grid[b-q4or78qfth] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.en-card[b-q4or78qfth] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.en-card--full[b-q4or78qfth] {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.en-card-title[b-q4or78qfth] {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.en-fact-id[b-q4or78qfth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.en-fact-id code[b-q4or78qfth] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.en-copy-btn[b-q4or78qfth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.en-copy-btn:hover[b-q4or78qfth] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.en-desc[b-q4or78qfth] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Status indicator with dot ─────────────────────────────────────────── */

.en-status[b-q4or78qfth] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
}

.en-status-dot[b-q4or78qfth] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.en-status--on .en-status-dot[b-q4or78qfth] {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.en-status--off .en-status-dot[b-q4or78qfth] {
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

/* ── Stat strip ────────────────────────────────────────────────────────── */

.en-stat-strip[b-q4or78qfth] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.en-stat[b-q4or78qfth] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.en-stat:hover[b-q4or78qfth] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.en-stat:active[b-q4or78qfth] {
    transform: translateY(1px);
}

.en-stat-value[b-q4or78qfth] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-brand);
    line-height: 1;
}

.en-stat-label[b-q4or78qfth] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.en-stat-arrow[b-q4or78qfth] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* Users tab */

.en-members-toolbar[b-q4or78qfth] {
    margin-bottom: 0.5rem;
}

.en-members-scroll[b-q4or78qfth] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.en-members-table[b-q4or78qfth] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.en-members-table thead th[b-q4or78qfth] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    z-index: 1;
}

.en-members-table tbody td[b-q4or78qfth] {
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: middle;
}

.en-members-table tbody tr:last-child td[b-q4or78qfth] {
    border-bottom: none;
}

.en-members-row[b-q4or78qfth] {
    cursor: pointer;
    transition: background 0.1s ease;
}

.en-members-row:hover[b-q4or78qfth],
.en-members-row:focus-visible[b-q4or78qfth] {
    background: var(--color-surface-raised);
    outline: none;
}

.en-members-table code[b-q4or78qfth] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

/* Groups tab */

.en-group-list[b-q4or78qfth] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.en-group-row[b-q4or78qfth] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0.875rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
}

.en-group-name[b-q4or78qfth] {
    font-weight: 500;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.en-group-desc[b-q4or78qfth] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
}

/* ── Folder tree ───────────────────────────────────────────────────────── */
/* ::deep crosses the component boundary into <EntityFolderTree>. */

.ef-tree[b-q4or78qfth],
.ef-tree[b-q4or78qfth]  .ef-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ef-tree[b-q4or78qfth]  .ef-tree-children {
    margin-left: 0.65rem;
    padding-left: 0.85rem;
    border-left: 1px dashed var(--color-border);
}

.ef-tree[b-q4or78qfth]  .ef-tree-node {
    margin: 0.1rem 0;
}

.ef-tree[b-q4or78qfth]  .ef-tree-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    background: transparent;
    border: none;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    transition: background 0.12s ease;
}

.ef-tree[b-q4or78qfth]  .ef-tree-row--branch {
    cursor: pointer;
}

.ef-tree[b-q4or78qfth]  .ef-tree-row--branch:hover {
    background: var(--color-surface-raised);
}

.ef-tree[b-q4or78qfth]  .ef-tree-row--branch:focus-visible {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.ef-tree[b-q4or78qfth]  .ef-tree-chevron,
.ef-tree[b-q4or78qfth]  .ef-tree-chevron-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.ef-tree[b-q4or78qfth]  .ef-tree-chevron {
    transition: transform 0.12s ease;
}

.ef-tree[b-q4or78qfth]  .ef-tree-chevron--open {
    transform: rotate(90deg);
}

.ef-tree[b-q4or78qfth]  .ef-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.ef-tree[b-q4or78qfth]  .ef-tree-name {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UA9 (#834): the coverage matrix in the list view, and the entity's own roles. */
.en-pick-hint[b-q4or78qfth] {
    margin: 0 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.en-role-list[b-q4or78qfth] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.en-role-row[b-q4or78qfth] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.en-role-kind[b-q4or78qfth] {
    min-width: 10rem;
    color: var(--color-text-secondary);
}

.en-role-name[b-q4or78qfth] {
    color: var(--color-brand);
    font-weight: 500;
}

.en-role-count[b-q4or78qfth] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.en-role-count--empty[b-q4or78qfth],
.en-role-missing[b-q4or78qfth] {
    color: var(--status-warning-fg);
}

.en-role-basis[b-q4or78qfth] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    border-radius: 999px;
    padding: 0 0.45rem;
}
/* /Components/Pages/EntityEditor.razor.rz.scp.css */
/*  One entity's create/edit/delete lane (E1, #363). Mirrors FamilyDetail.razor.css's
    shell, state and danger-zone tokens — same visual language, .eae- prefix so
    nothing here collides with Entities.razor.css's .en- rules. */

.eae-shell[b-azgjlmclpm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.eae-back[b-azgjlmclpm] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.eae-back:hover[b-azgjlmclpm] {
    color: var(--color-brand-teal);
}

.eae-status[b-azgjlmclpm] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.eae-props[b-azgjlmclpm] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.eae-textarea[b-azgjlmclpm] {
    resize: vertical;
    min-height: 3.5rem;
}

.eae-number[b-azgjlmclpm] {
    max-width: 10rem;
}

.eae-icon-fact[b-azgjlmclpm] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* ── Visibility (E4, #366) ──────────────────────────────────────────────── */

.eae-visibility-lede[b-azgjlmclpm] {
    margin: -0.25rem 0 0.75rem;
    max-width: 68ch;
}

.eae-visibility-empty[b-azgjlmclpm] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.eae-visibility-list[b-azgjlmclpm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eae-visibility-row[b-azgjlmclpm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
}

.eae-visibility-object[b-azgjlmclpm] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.eae-visibility-flag[b-azgjlmclpm] {
    color: var(--color-text-secondary);
}

.eae-visibility-flag--off[b-azgjlmclpm] {
    font-style: italic;
}

/* ── Error state ────────────────────────────────────────────────────────── */

.eae-state[b-azgjlmclpm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.eae-state--error[b-azgjlmclpm] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.eae-state-title[b-azgjlmclpm] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.eae-state-body[b-azgjlmclpm] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.eae-state-actions[b-azgjlmclpm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.eae-danger[b-azgjlmclpm] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.eae-danger-title[b-azgjlmclpm] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.eae-danger-lede[b-azgjlmclpm] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/EntityGroupEditor.razor.rz.scp.css */
/*  One entity group's create/edit/membership/delete lane (E2, #365). Mirrors
    EntityEditor.razor.css's shell, state and danger-zone tokens, plus a new
    two-list transfer layout for membership. .ege- prefix so nothing here
    collides with EntityEditor's .eae- rules or EntityGroups.razor.css's .eg- rules. */

.ege-shell[b-rrrpbcqp0u] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ege-back[b-rrrpbcqp0u] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.ege-back:hover[b-rrrpbcqp0u] {
    color: var(--color-brand-teal);
}

.ege-status[b-rrrpbcqp0u] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}


/* The global .form-input is content-box, so width:100% plus its padding overruns the
   card's right edge. Section-qualified so it wins over the global rule by specificity. */
.ege-props .form-input[b-rrrpbcqp0u] {
    box-sizing: border-box;
}

.ege-textarea[b-rrrpbcqp0u] {
    resize: vertical;
    min-height: 3.5rem;
}

.ege-muted[b-rrrpbcqp0u] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Error state ────────────────────────────────────────────────────────── */

.ege-state[b-rrrpbcqp0u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.ege-state--error[b-rrrpbcqp0u] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.ege-state-title[b-rrrpbcqp0u] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ege-state-body[b-rrrpbcqp0u] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.ege-state-actions[b-rrrpbcqp0u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Members: two-list transfer ────────────────────────────────────────── */

.ege-members-body[b-rrrpbcqp0u] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem 1.25rem 1.25rem;
}

.ege-members-body > .form-hint[b-rrrpbcqp0u] {
    margin: 0;
    max-width: 80ch;
    line-height: 1.5;
}

.ege-transfer[b-rrrpbcqp0u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 720px) {
    .ege-transfer[b-rrrpbcqp0u] {
        grid-template-columns: 1fr;
    }
}

.ege-transfer-col[b-rrrpbcqp0u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ege-transfer-title[b-rrrpbcqp0u] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.ege-transfer-list[b-rrrpbcqp0u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
}

.ege-transfer-row[b-rrrpbcqp0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.ege-transfer-row:hover[b-rrrpbcqp0u] {
    background: var(--color-surface-hover, color-mix(in srgb, var(--color-border) 30%, white));
}

.ege-transfer-row--pending-add[b-rrrpbcqp0u] {
    background: color-mix(in srgb, var(--color-up, #2f9e44) 10%, white);
}

.ege-transfer-row--pending-remove[b-rrrpbcqp0u] {
    background: color-mix(in srgb, var(--color-down) 10%, white);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-down) 60%, transparent);
}

.ege-transfer-btn[b-rrrpbcqp0u] {
    flex: 0 0 auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

.ege-members-actions[b-rrrpbcqp0u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.ege-pending-summary[b-rrrpbcqp0u] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.ege-danger[b-rrrpbcqp0u] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.ege-danger-title[b-rrrpbcqp0u] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.ege-danger-lede[b-rrrpbcqp0u] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/EntityGroups.razor.rz.scp.css */
/* Entity Groups list — E2 (#365). A simple filterable list, since the detail (properties,
   membership, delete) all live on EntityGroupEditor rather than a rail+detail split. */

.eg-shell[b-0uqdbnklqu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.eg-header[b-0uqdbnklqu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.eg-heading h1[b-0uqdbnklqu] {
    margin: 0.25rem 0 0;
}

.eg-search[b-0uqdbnklqu] {
    max-width: 24rem;
}

.eg-status[b-0uqdbnklqu] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.eg-list[b-0uqdbnklqu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eg-row[b-0uqdbnklqu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.eg-row:hover[b-0uqdbnklqu] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.eg-row-body[b-0uqdbnklqu] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.eg-row-name[b-0uqdbnklqu] {
    font-weight: 600;
}

.eg-row-desc[b-0uqdbnklqu] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Families/Families.razor.rz.scp.css */
/*  The families list. The table is the shared DataTable; this file is the
    page chrome, the loading / error / empty states and the row cells the
    columns render (reached through ::deep — the cells are child content). */

.fam-shell[b-tk9mg6yeyp] {
    display: flex;
    flex-direction: column;
}

.page-title[b-tk9mg6yeyp] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-tk9mg6yeyp] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.fam-new-btn[b-tk9mg6yeyp] {
    white-space: nowrap;
    text-decoration: none;
}

.fam-readonly-note[b-tk9mg6yeyp] {
    margin: 0;
    max-width: 28rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: right;
    color: var(--color-text-secondary);
}

/* ── Loading ────────────────────────────────────────────────────────────── */

.fam-skeleton[b-tk9mg6yeyp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fam-skel[b-tk9mg6yeyp] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: fam-shimmer-b-tk9mg6yeyp 1.4s ease infinite;
}

.fam-skel--row[b-tk9mg6yeyp] {
    height: 2.5rem;
}

@keyframes fam-shimmer-b-tk9mg6yeyp {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fam-skel[b-tk9mg6yeyp] { animation: none; }
}

/* ── Error / empty ──────────────────────────────────────────────────────── */

.fam-state[b-tk9mg6yeyp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.fam-state--error[b-tk9mg6yeyp] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fam-state-title[b-tk9mg6yeyp] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fam-state-body[b-tk9mg6yeyp] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.fam-state-actions[b-tk9mg6yeyp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.fam-empty[b-tk9mg6yeyp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.fam-empty p[b-tk9mg6yeyp] {
    margin: 0;
    font-size: 1rem;
}

.fam-empty .btn-primary[b-tk9mg6yeyp] {
    text-decoration: none;
}

/* ── Row cells (rendered inside the DataTable) ──────────────────────────── */

[b-tk9mg6yeyp] .fam-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-tk9mg6yeyp] .fam-link:hover {
    text-decoration: underline;
}

[b-tk9mg6yeyp] .fam-muted {
    color: var(--color-text-muted);
}

[b-tk9mg6yeyp] .fam-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

[b-tk9mg6yeyp] .fam-row-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    white-space: nowrap;
}
/* /Components/Pages/Families/FamilyDetail.razor.rz.scp.css */
/*  One family. The shell mirrors UploadServiceDetail (back link, eyebrow,
    tabs, panels, save bar); the panels' own styling lives with the feature
    components. Tokens only. */

.fam-shell[b-ul0w15u2c2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fam-back[b-ul0w15u2c2] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.fam-back:hover[b-ul0w15u2c2] {
    color: var(--color-brand-teal);
}

.fam-status[b-ul0w15u2c2] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.fam-header h1[b-ul0w15u2c2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fam-readonly-pill[b-ul0w15u2c2] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.fam-readonly-note[b-ul0w15u2c2] {
    margin: -0.5rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fam-note[b-ul0w15u2c2] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/*  The created banner carries an action as well as a dismiss. */
.fam-banner-actions[b-ul0w15u2c2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.fam-banner-btn[b-ul0w15u2c2] {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}

.fam-panel[b-ul0w15u2c2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fam-panel:focus-visible[b-ul0w15u2c2] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 4px;
    border-radius: var(--radius);
}

/* ── Error state ────────────────────────────────────────────────────────── */

.fam-state[b-ul0w15u2c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.fam-state--error[b-ul0w15u2c2] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fam-state-title[b-ul0w15u2c2] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fam-state-body[b-ul0w15u2c2] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.fam-state-actions[b-ul0w15u2c2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

/*  --color-down is a badge fill; as text on a pale surface it does not clear
    4.5:1, so it is darkened here. The heading and the button say what this
    is — the tint only agrees with them. */
.fam-danger[b-ul0w15u2c2] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fam-danger-title[b-ul0w15u2c2] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.fam-danger-lede[b-ul0w15u2c2] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Forms/FormAssists.razor.rz.scp.css */
/* Assist library — master/detail over the 9000 rows, the Triggers page's
   frame (.fa-*) republished as .fa-* so nothing leaks between the two. The
   detail pane is the shared AssistEditor, which brings its own stylesheet;
   everything here is the frame around it. */

.fa-shell[b-u700j9yrr6] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* Three columns once a saved row is open: rail, the editor, and a side
   column for what is about the row as a whole (where it is used, delete). */
.fa-shell--side[b-u700j9yrr6] {
    grid-template-columns: 360px minmax(0, 1fr) 300px;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.fa-rail[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.fa-rail-head[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.fa-rail-title-row[b-u700j9yrr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fa-rail-title[b-u700j9yrr6] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fa-refresh[b-u700j9yrr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fa-refresh:hover:not(:disabled)[b-u700j9yrr6] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.fa-refresh:disabled[b-u700j9yrr6] { opacity: 0.5; cursor: not-allowed; }

.fa-search[b-u700j9yrr6] { width: 100%; }

.fa-filters[b-u700j9yrr6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fa-scope[b-u700j9yrr6] {
    display: inline-flex;
    gap: 0.25rem;
}

.fa-scope-btn[b-u700j9yrr6] {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fa-scope-btn--on[b-u700j9yrr6] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    font-weight: 600;
}

.fa-select[b-u700j9yrr6] {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.8rem;
    padding-block: 0.25rem;
}

/* Group and sort: a second row under the filters. The direction button
   shares the selects' height so the row reads as one control strip. */
.fa-arrange[b-u700j9yrr6] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.fa-arrange-label[b-u700j9yrr6] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.fa-arrange .fa-select[b-u700j9yrr6] { flex: none; width: 100%; }

.fa-dir[b-u700j9yrr6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fa-dir:hover[b-u700j9yrr6] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.fa-dir:focus-visible[b-u700j9yrr6] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.fa-rail-meta[b-u700j9yrr6] {
    min-height: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fa-status[b-u700j9yrr6] {
    margin: 0;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.fa-status--error[b-u700j9yrr6] { color: var(--color-down); }

.fa-list[b-u700j9yrr6] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fa-item[b-u700j9yrr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fa-item:hover[b-u700j9yrr6] { background: var(--color-surface-raised); }

.fa-item--on[b-u700j9yrr6] {
    background: color-mix(in srgb, var(--color-brand-teal) 7%, white);
    border-left-color: var(--color-brand-teal);
}

.fa-item-main[b-u700j9yrr6] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fa-item-name[b-u700j9yrr6] {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fa-item-sub[b-u700j9yrr6] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A group header in the rail: sticky under the rail head so the section the
   author is scrolling through keeps its name. */
.fa-group[b-u700j9yrr6] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.9rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.fa-group:first-child[b-u700j9yrr6] { margin-top: 0; }

.fa-group-count[b-u700j9yrr6] {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.fa-item-doctype[b-u700j9yrr6] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-item-chips[b-u700j9yrr6] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex: none;
}

.fa-id[b-u700j9yrr6] { font-variant-numeric: tabular-nums; }

.fa-chip[b-u700j9yrr6] {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.fa-chip--form[b-u700j9yrr6] {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.fa-chip--warn[b-u700j9yrr6] {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

/* ── Detail ─────────────────────────────────────────────────────────────── */

.fa-detail[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0;
}

.fa-detail > .gate-denied[b-u700j9yrr6],
.fa-detail > .fa-status[b-u700j9yrr6] { margin: 1.25rem; }

.fa-empty[b-u700j9yrr6] {
    margin: auto;
    max-width: 32rem;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.fa-empty h2[b-u700j9yrr6] {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.fa-empty p[b-u700j9yrr6] { margin: 0; font-size: 0.875rem; line-height: 1.6; }

/* ── Browsing grid ─────────────────────────────────────────────────────── */

/* The detail pane with nothing open: a heading strip and a grid that scrolls
   on its own under a sticky header row. The DataTable is a child component,
   so its parts are reached through ::deep. */
.fa-browse[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fa-browse-head[b-u700j9yrr6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.fa-browse-intro[b-u700j9yrr6] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 44rem;
}

.fa-browse-title[b-u700j9yrr6] {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.fa-browse-hint[b-u700j9yrr6] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fa-browse-group[b-u700j9yrr6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.fa-browse-group .fa-select[b-u700j9yrr6] { flex: none; width: 11rem; }

.fa-browse[b-u700j9yrr6]  .dt {
    flex: 1 1 auto;
    min-height: 0;
}

.fa-browse[b-u700j9yrr6]  .dt-wrap {
    height: 100%;
    overflow: auto;
    border: none;
    border-radius: 0;
    background: transparent;
}

.fa-browse[b-u700j9yrr6]  .dt-group-head { z-index: 0; }

/* The name cell is the one that is allowed to run to several lines: the
   description sits under the name, wrapped, and stops at three lines so a
   long one does not turn the row into a page. */
.fa-browse[b-u700j9yrr6]  .fa-col-name { max-width: 32rem; white-space: normal; }

.fa-browse[b-u700j9yrr6]  .fa-cell-name {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fa-browse[b-u700j9yrr6]  .fa-cell-title { font-weight: 600; }

.fa-browse[b-u700j9yrr6]  .fa-cell-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.fa-browse[b-u700j9yrr6]  .fa-col-type,
.fa-browse[b-u700j9yrr6]  .fa-col-doctype,
.fa-browse[b-u700j9yrr6]  .fa-col-severity,
.fa-browse[b-u700j9yrr6]  .fa-col-status { white-space: nowrap; }

.fa-browse[b-u700j9yrr6]  .fa-cell-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fa-browse[b-u700j9yrr6]  .fa-col-id {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* ── Side column ───────────────────────────────────────────────────────── */

.fa-side[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
}

.fa-usage[b-u700j9yrr6],
.fa-danger[b-u700j9yrr6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.fa-usage-head[b-u700j9yrr6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.fa-usage-title[b-u700j9yrr6] {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.fa-usage-hint[b-u700j9yrr6],
.fa-usage-counts[b-u700j9yrr6],
.fa-usage-incomplete[b-u700j9yrr6] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.fa-usage-counts[b-u700j9yrr6] { color: var(--color-text-primary); }

.fa-usage-incomplete[b-u700j9yrr6] { color: color-mix(in srgb, var(--color-degraded) 65%, black); }

.fa-usage-forms[b-u700j9yrr6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8125rem;
}

.fa-usage-forms a[b-u700j9yrr6] { color: var(--color-brand); }

.fa-delete-report[b-u700j9yrr6] {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fa-delete-report p[b-u700j9yrr6] { margin: 0 0 0.25rem; }

.fa-delete-report--bad[b-u700j9yrr6] { border-color: color-mix(in srgb, var(--color-down) 35%, white); }

.fa-delete-report--ok[b-u700j9yrr6] { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }

.fa-delete-block[b-u700j9yrr6] { color: var(--color-down); }

/* Narrower than three columns fit: the side column drops under the editor
   as a row of cards, still beside the rail. */
@media (max-width: 90rem) {
    .fa-shell--side[b-u700j9yrr6] {
        grid-template-columns: 360px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .fa-shell--side .fa-rail[b-u700j9yrr6] { grid-row: 1 / -1; }

    .fa-side[b-u700j9yrr6] {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
    }

    .fa-side > *[b-u700j9yrr6] { flex: 1 1 14rem; }
}

@media (max-width: 64rem) {
    .fa-shell[b-u700j9yrr6],
    .fa-shell--side[b-u700j9yrr6] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }

    .fa-shell--side .fa-rail[b-u700j9yrr6] { grid-row: auto; }

    .fa-side[b-u700j9yrr6] { grid-column: auto; }

    .fa-detail[b-u700j9yrr6] { min-height: 70vh; }
}
/* /Components/Pages/Forms/FormDesignerPage.razor.rz.scp.css */
/* Form designer gate host — same calm gate treatment as the /forms list page. */

.page-header[b-asbj3e146u] {
    margin-bottom: 1.5rem;
}

.page-title[b-asbj3e146u] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-asbj3e146u] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.gate-checking[b-asbj3e146u],
.gate-denied[b-asbj3e146u] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
    max-width: 40rem;
}

.gate-checking[b-asbj3e146u] {
    text-align: center;
}

.gate-denied[b-asbj3e146u] {
    color: var(--color-text-primary);
}

.gate-denied h2[b-asbj3e146u] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gate-denied p[b-asbj3e146u] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.gate-denied code[b-asbj3e146u] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}
/* /Components/Pages/Forms/FormPreviewPage.razor.rz.scp.css */
.fp-page-note[b-dk929zw21g] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.fp-page-note a[b-dk929zw21g] { margin-left: 0.35rem; }
/* /Components/Pages/Forms/Forms.razor.rz.scp.css */
/* Forms list page styles */

.fd-list-shell[b-pc2ufb699p] {
    padding: 2rem 1.5rem 4rem;
}

.page-header[b-pc2ufb699p] {
    margin-bottom: 2rem;
}

/* Header row: title block + the New form action (F2.4). */
.fd-page-head[b-pc2ufb699p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.fd-page-head .page-header[b-pc2ufb699p] {
    margin-bottom: 0;
}

.fd-new-btn[b-pc2ufb699p] {
    flex: none;
    margin-top: 0.25rem;
}

.page-title[b-pc2ufb699p] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-pc2ufb699p] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Gate states */

.gate-checking[b-pc2ufb699p],
.gate-denied[b-pc2ufb699p] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-secondary);
}

.gate-checking[b-pc2ufb699p] {
    text-align: center;
}

.gate-denied[b-pc2ufb699p] {
    color: var(--color-text-primary);
}

.gate-denied code[b-pc2ufb699p] {
    font-size: 0.8125rem;
    background: var(--color-surface-raised);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
    border: 1px solid var(--color-border);
}

/* Toolbar */

.fd-toolbar[b-pc2ufb699p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.fd-filters[b-pc2ufb699p] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    flex: 1;
}

.fd-search-input[b-pc2ufb699p] {
    max-width: 22rem;
    min-width: 14rem;
}

.fd-filter-select[b-pc2ufb699p] {
    min-width: 10rem;
    max-width: 12rem;
}

.fd-checkbox-label[b-pc2ufb699p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

.fd-checkbox-label input[type="checkbox"][b-pc2ufb699p] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.fd-count[b-pc2ufb699p] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fd-hint-pill[b-pc2ufb699p] {
    display: inline-block;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Empty state */

.fd-empty[b-pc2ufb699p] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

/* Data table */

.fd-table-wrap[b-pc2ufb699p] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.fd-table[b-pc2ufb699p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}

.fd-th[b-pc2ufb699p] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.fd-th:hover[b-pc2ufb699p] {
    color: var(--color-text-primary);
}

.fd-th--sorted[b-pc2ufb699p] {
    color: var(--color-brand);
}

.fd-th--sorted:hover[b-pc2ufb699p] {
    color: var(--color-brand);
}

.fd-sort-icon[b-pc2ufb699p] {
    display: inline-block;
    margin-left: 0.375rem;
    font-size: 0.5rem;
    vertical-align: middle;
}

.fd-th--name[b-pc2ufb699p] { width: 20%; }
.fd-th--standard[b-pc2ufb699p] { width: 20%; }
.fd-th--category[b-pc2ufb699p] { width: 15%; }
.fd-th--doctype[b-pc2ufb699p] { width: 15%; }
.fd-th--version[b-pc2ufb699p] { width: 15%; }
.fd-th--status[b-pc2ufb699p] { width: 10%; }
.fd-th--trailing[b-pc2ufb699p] { width: 5%; }

.fd-row[b-pc2ufb699p] {
    cursor: pointer;
    transition: background 0.1s;
}

.fd-row:hover[b-pc2ufb699p] {
    background: var(--color-surface-raised);
}

.fd-row:focus-visible[b-pc2ufb699p] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -1px;
}

.fd-row:not(:last-child) .fd-td[b-pc2ufb699p] {
    border-bottom: 1px solid var(--color-border);
}

.fd-td[b-pc2ufb699p] {
    padding: 0.625rem 1rem;
    color: var(--color-text-primary);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-td--name[b-pc2ufb699p],
.fd-td--standard[b-pc2ufb699p] {
    font-weight: 500;
}

.fd-td--category[b-pc2ufb699p],
.fd-td--doctype[b-pc2ufb699p] {
    color: var(--color-text-secondary);
}

.fd-td--trailing[b-pc2ufb699p] {
    text-align: right;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
}

.fd-chevron[b-pc2ufb699p] {
    display: inline-block;
    margin-right: 0.25rem;
}

/* Badges */

.badge[b-pc2ufb699p] {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.fd-badge-master[b-pc2ufb699p] {
    background: #f3f4f6;
    color: #374151;
}

.fd-badge-version[b-pc2ufb699p] {
    background: #dbeafe;
    color: #1e40af;
}

.fd-badge-mock[b-pc2ufb699p] {
    background: #fef3c7;
    color: #92400e;
}

.badge-healthy[b-pc2ufb699p] {
    background: #f0fdf4;
    color: #166534;
}

.badge-unknown[b-pc2ufb699p] {
    background: #f1f5f9;
    color: #475569;
}

/* ── Loading, empty and error states (F7.4) ────────────────────────────────
   One shape for all three: a centred block with a heading, a sentence and the
   action that resolves it. The loading case is a skeleton of the list rather
   than a spinner, so the layout does not jump when the rows arrive.
   ────────────────────────────────────────────────────────────────────────── */

.fd-list-skeleton[b-pc2ufb699p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fd-skel[b-pc2ufb699p] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: fd-list-shimmer-b-pc2ufb699p 1.4s ease-in-out infinite;
}

.fd-skel--toolbar[b-pc2ufb699p] { height: 2.75rem; margin-bottom: 0.5rem; }
.fd-skel--row[b-pc2ufb699p] { height: 2.5rem; }

@keyframes fd-list-shimmer-b-pc2ufb699p {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.fd-state[b-pc2ufb699p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.fd-state--error[b-pc2ufb699p] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fd-state-title[b-pc2ufb699p] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fd-state-body[b-pc2ufb699p] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.fd-state-actions[b-pc2ufb699p] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.fd-state-actions .btn-secondary[b-pc2ufb699p] { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .fd-skel[b-pc2ufb699p] { animation: none; }
}
/* /Components/Pages/Forms/FormTriggers.razor.rz.scp.css */
/* Trigger library — master/detail over the 9100 rows, in the same visual
   language as Data Sources (.ds-*), prefixed .ft-* so nothing leaks. The detail
   pane is the shared TriggerEditor, which brings its own stylesheet; everything
   here is the frame around it. */

.ft-shell[b-oa597dfeqj] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* Three columns once a saved row is open: rail, the editor, and a side
   column for what is about the row as a whole (where it is used, delete). */
.ft-shell--side[b-oa597dfeqj] {
    grid-template-columns: 360px minmax(0, 1fr) 300px;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.ft-rail[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.ft-rail-head[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.ft-rail-title-row[b-oa597dfeqj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ft-rail-title[b-oa597dfeqj] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ft-refresh[b-oa597dfeqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ft-refresh:hover:not(:disabled)[b-oa597dfeqj] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.ft-refresh:disabled[b-oa597dfeqj] { opacity: 0.5; cursor: not-allowed; }

.ft-search[b-oa597dfeqj] { width: 100%; }

.ft-filters[b-oa597dfeqj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ft-scope[b-oa597dfeqj] {
    display: inline-flex;
    gap: 0.25rem;
}

.ft-scope-btn[b-oa597dfeqj] {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ft-scope-btn--on[b-oa597dfeqj] {
    border-color: var(--color-brand-teal);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    font-weight: 600;
}

.ft-select[b-oa597dfeqj] {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.8rem;
    padding-block: 0.25rem;
}

/* Group and sort: a second row under the filters. The direction button
   shares the selects' height so the row reads as one control strip. */
.ft-arrange[b-oa597dfeqj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.ft-arrange-label[b-oa597dfeqj] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.ft-arrange .ft-select[b-oa597dfeqj] { flex: none; width: 100%; }

.ft-dir[b-oa597dfeqj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ft-dir:hover[b-oa597dfeqj] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.ft-dir:focus-visible[b-oa597dfeqj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.ft-rail-meta[b-oa597dfeqj] {
    min-height: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ft-status[b-oa597dfeqj] {
    margin: 0;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.ft-status--error[b-oa597dfeqj] { color: var(--color-down); }

.ft-list[b-oa597dfeqj] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ft-item[b-oa597dfeqj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--color-text-primary);
    cursor: pointer;
}

.ft-item:hover[b-oa597dfeqj] { background: var(--color-surface-raised); }

.ft-item--on[b-oa597dfeqj] {
    background: color-mix(in srgb, var(--color-brand-teal) 7%, white);
    border-left-color: var(--color-brand-teal);
}

.ft-item-main[b-oa597dfeqj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ft-item-name[b-oa597dfeqj] {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ft-item-sub[b-oa597dfeqj] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A group header in the rail: sticky under the rail head so the section the
   author is scrolling through keeps its name. */
.ft-group[b-oa597dfeqj] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.35rem 0.9rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.ft-group:first-child[b-oa597dfeqj] { margin-top: 0; }

.ft-group-count[b-oa597dfeqj] {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ft-item-chips[b-oa597dfeqj] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex: none;
}

.ft-id[b-oa597dfeqj] { font-variant-numeric: tabular-nums; }

.ft-chip[b-oa597dfeqj] {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-raised);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.ft-chip--form[b-oa597dfeqj] {
    color: color-mix(in srgb, var(--color-brand-teal) 70%, black);
    border-color: color-mix(in srgb, var(--color-brand-teal) 40%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 8%, white);
}

.ft-chip--warn[b-oa597dfeqj] {
    color: color-mix(in srgb, var(--color-degraded) 60%, black);
    border-color: color-mix(in srgb, var(--color-degraded) 45%, white);
    background: color-mix(in srgb, var(--color-degraded) 10%, white);
}

/* ── Detail ─────────────────────────────────────────────────────────────── */

.ft-detail[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0;
}

.ft-detail > .gate-denied[b-oa597dfeqj],
.ft-detail > .ft-status[b-oa597dfeqj] { margin: 1.25rem; }

.ft-empty[b-oa597dfeqj] {
    margin: auto;
    max-width: 32rem;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.ft-empty h2[b-oa597dfeqj] {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.ft-empty p[b-oa597dfeqj] { margin: 0; font-size: 0.875rem; line-height: 1.6; }

/* ── Browsing grid ─────────────────────────────────────────────────────── */

/* The detail pane with nothing open: a heading strip and a grid that scrolls
   on its own under a sticky header row. The DataTable is a child component,
   so its parts are reached through ::deep. */
.ft-browse[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ft-browse-head[b-oa597dfeqj] {
    display: flex;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.ft-browse-intro[b-oa597dfeqj] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 44rem;
}

.ft-browse-title[b-oa597dfeqj] {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--color-text-primary);
}

.ft-browse-hint[b-oa597dfeqj] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.ft-browse-group[b-oa597dfeqj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ft-browse-group .ft-select[b-oa597dfeqj] { flex: none; width: 11rem; }

.ft-browse[b-oa597dfeqj]  .dt {
    flex: 1 1 auto;
    min-height: 0;
}

.ft-browse[b-oa597dfeqj]  .dt-wrap {
    height: 100%;
    overflow: auto;
    border: none;
    border-radius: 0;
    background: transparent;
}

.ft-browse[b-oa597dfeqj]  .dt-group-head { z-index: 0; }

/* The name cell is the one that is allowed to run to several lines: the
   description sits under the name, wrapped, and stops at three lines so a
   long one does not turn the row into a page. */
.ft-browse[b-oa597dfeqj]  .ft-col-name { max-width: 32rem; white-space: normal; }

.ft-browse[b-oa597dfeqj]  .ft-cell-name {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ft-browse[b-oa597dfeqj]  .ft-cell-title { font-weight: 600; }

.ft-browse[b-oa597dfeqj]  .ft-cell-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.ft-browse[b-oa597dfeqj]  .ft-col-type,
.ft-browse[b-oa597dfeqj]  .ft-col-action,
.ft-browse[b-oa597dfeqj]  .ft-col-scope,
.ft-browse[b-oa597dfeqj]  .ft-col-status { white-space: nowrap; }

.ft-browse[b-oa597dfeqj]  .ft-cell-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ft-browse[b-oa597dfeqj]  .ft-col-id {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

/* ── Side column ───────────────────────────────────────────────────────── */

.ft-side[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
}

.ft-usage[b-oa597dfeqj],
.ft-danger[b-oa597dfeqj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-raised);
}

.ft-usage-head[b-oa597dfeqj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.ft-usage-title[b-oa597dfeqj] {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ft-usage-hint[b-oa597dfeqj],
.ft-usage-counts[b-oa597dfeqj],
.ft-usage-incomplete[b-oa597dfeqj] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ft-usage-counts[b-oa597dfeqj] { color: var(--color-text-primary); }

.ft-usage-incomplete[b-oa597dfeqj] { color: color-mix(in srgb, var(--color-degraded) 65%, black); }

.ft-usage-forms[b-oa597dfeqj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8125rem;
}

.ft-usage-forms a[b-oa597dfeqj] { color: var(--color-brand); }

.ft-delete-report[b-oa597dfeqj] {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ft-delete-report p[b-oa597dfeqj] { margin: 0 0 0.25rem; }

.ft-delete-report--bad[b-oa597dfeqj] { border-color: color-mix(in srgb, var(--color-down) 35%, white); }

.ft-delete-report--ok[b-oa597dfeqj] { border-color: color-mix(in srgb, var(--color-healthy) 35%, white); }

.ft-delete-block[b-oa597dfeqj] { color: var(--color-down); }

/* Narrower than three columns fit: the side column drops under the editor
   as a row of cards, still beside the rail. */
@media (max-width: 90rem) {
    .ft-shell--side[b-oa597dfeqj] {
        grid-template-columns: 360px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .ft-shell--side .ft-rail[b-oa597dfeqj] { grid-row: 1 / -1; }

    .ft-side[b-oa597dfeqj] {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
    }

    .ft-side > *[b-oa597dfeqj] { flex: 1 1 14rem; }
}

@media (max-width: 64rem) {
    .ft-shell[b-oa597dfeqj],
    .ft-shell--side[b-oa597dfeqj] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        height: auto;
    }

    .ft-shell--side .ft-rail[b-oa597dfeqj] { grid-row: auto; }

    .ft-side[b-oa597dfeqj] { grid-column: auto; }

    .ft-detail[b-oa597dfeqj] { min-height: 70vh; }
}
/* /Components/Pages/GlobalRoles.razor.rz.scp.css */
/* Global Roles page — master/detail layout */

.gr-shell[b-ss3du0o2bf] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 72px);
    padding: 0 1.5rem 1.5rem;
}

/* ── Left rail ──────────────────────────────────────────────────────────── */

.gr-rail[b-ss3du0o2bf] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
}

.gr-rail-header[b-ss3du0o2bf] {
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.gr-rail-title-row[b-ss3du0o2bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.gr-rail-title[b-ss3du0o2bf] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gr-rail-title-actions[b-ss3du0o2bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gr-new-btn[b-ss3du0o2bf] {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
}

.gr-back-link[b-ss3du0o2bf] {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
}

.gr-back-link:hover[b-ss3du0o2bf] {
    color: var(--color-text-primary);
}

.gr-edit-section[b-ss3du0o2bf] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.gr-refresh-btn[b-ss3du0o2bf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gr-refresh-btn:hover:not(:disabled)[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.gr-refresh-btn:disabled[b-ss3du0o2bf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.gr-refresh-spin[b-ss3du0o2bf] {
    animation: gr-spin-b-ss3du0o2bf 0.9s linear infinite;
}

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

.gr-search[b-ss3du0o2bf] {
    width: 100%;
}

.gr-rail-status[b-ss3du0o2bf] {
    padding: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.gr-rail-error[b-ss3du0o2bf] {
    color: var(--color-down);
}

.gr-list[b-ss3du0o2bf] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.gr-list-item[b-ss3du0o2bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.gr-list-item:hover[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
}

.gr-list-item--selected[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    border-left-color: var(--color-brand-teal);
}

.gr-list-body[b-ss3du0o2bf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.gr-list-name[b-ss3du0o2bf] {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gr-list-sub[b-ss3du0o2bf] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Right pane ─────────────────────────────────────────────────────────── */

.gr-detail[b-ss3du0o2bf] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    min-height: 0;
}

.gr-empty[b-ss3du0o2bf] {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--color-text-secondary);
}

.gr-empty h2[b-ss3du0o2bf] {
    margin: 0 0 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.gr-empty p[b-ss3du0o2bf] {
    margin: 0;
    font-size: 0.875rem;
}

.gr-empty code[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
}

.gr-detail-header[b-ss3du0o2bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.gr-detail-heading[b-ss3du0o2bf] {
    flex: 1;
    min-width: 0;
}

.gr-detail-heading h2[b-ss3du0o2bf] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gr-detail-sub[b-ss3du0o2bf] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.gr-detail-badges[b-ss3du0o2bf] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Section / table ────────────────────────────────────────────────────── */

.gr-section[b-ss3du0o2bf] {
    margin-top: 1.5rem;
}

.gr-section h3[b-ss3du0o2bf] {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gr-count[b-ss3du0o2bf] {
    font-weight: 400;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin-left: 0.25rem;
}

.gr-muted[b-ss3du0o2bf] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.gr-table[b-ss3du0o2bf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.gr-table thead th[b-ss3du0o2bf] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
}

.gr-table tbody td[b-ss3du0o2bf] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    vertical-align: top;
}

.gr-table tbody tr:last-child td[b-ss3du0o2bf] {
    border-bottom: none;
}

.gr-table code[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.gr-loc-name[b-ss3du0o2bf] {
    display: block;
    color: var(--color-text-primary);
}

.gr-loc-path[b-ss3du0o2bf] {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.gr-section-head[b-ss3du0o2bf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.gr-section-head h3[b-ss3du0o2bf] {
    margin: 0;
}

/* UA7 (#832): the detail tabs are the shared TabStrip now; only the panel spacing lives here. */
.gr-tab-panel[b-ss3du0o2bf] {
    padding: 1.25rem 0 0.25rem;
}

/* ── Tree ──────────────────────────────────────────────────────────────── */
/* The root <ul> only; everything from .gr-tree-node down is
   GlobalRoleLocationTree's own scoped stylesheet (G2, #362) — it owns those
   elements directly, so no ::deep indirection is needed here any more. */

.gr-tree[b-ss3du0o2bf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Overview cards (parity with Roles) ────────────────────────────────── */

.gr-card-grid[b-ss3du0o2bf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.gr-card[b-ss3du0o2bf] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.gr-card--full[b-ss3du0o2bf] {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.gr-card-title[b-ss3du0o2bf] {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.gr-facts[b-ss3du0o2bf] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
    align-items: center;
}

.gr-facts dt[b-ss3du0o2bf] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.gr-facts dd[b-ss3du0o2bf] {
    margin: 0;
    color: var(--color-text-primary);
    min-width: 0;
}

.gr-facts code[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.85rem;
    word-break: break-all;
}

.gr-fact-id[b-ss3du0o2bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.gr-fact-id code[b-ss3du0o2bf] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gr-copy-btn[b-ss3du0o2bf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.gr-copy-btn:hover[b-ss3du0o2bf] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.gr-type-pill[b-ss3du0o2bf] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.gr-type-pill.gr-type-global[b-ss3du0o2bf] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.gr-desc[b-ss3du0o2bf] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Stat strip (parity with Roles) ────────────────────────────────────── */

.gr-stat-strip[b-ss3du0o2bf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.gr-stat[b-ss3du0o2bf] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.gr-stat:hover[b-ss3du0o2bf] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.gr-stat:active[b-ss3du0o2bf] {
    transform: translateY(1px);
}

.gr-stat-value[b-ss3du0o2bf] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-brand);
    line-height: 1;
}

.gr-stat-label[b-ss3du0o2bf] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.gr-stat-arrow[b-ss3du0o2bf] {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* UA7 (#832): global-role delete stays blocked (R3) — shown disabled, with the reason. */
.gr-delete-card[b-ss3du0o2bf] {
    margin-top: 1rem;
}

.gr-delete-btn:disabled[b-ss3du0o2bf] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Pages/HandOffs/HandOffLanding.razor.rz.scp.css */
.hol-shell[b-35i3wmhvca] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hol-status[b-35i3wmhvca] {
    color: var(--text-muted, #6b7280);
}

.hol-empty[b-35i3wmhvca] {
    max-width: 40rem;
    padding: 1.5rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
}

.hol-empty h2[b-35i3wmhvca] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.hol-actions[b-35i3wmhvca] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

.hol-reason[b-35i3wmhvca] {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-secondary, #374151);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.system-awareness[b-gpbkt5rdlj] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.system-awareness strong[b-gpbkt5rdlj] {
    font-weight: 600;
    color: var(--color-text);
}

.system-kind-tag[b-gpbkt5rdlj] {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.375rem;
    color: var(--color-text-muted);
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login page — centered card */

.login-shell[b-vys62laoms] {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem 1.5rem;
}

.login-card[b-vys62laoms] {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem 2.25rem 2.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* System identification line (colour dot + kind tag + host) */
.login-system-line[b-vys62laoms] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.login-system-dot[b-vys62laoms] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.login-system-tag[b-vys62laoms] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.login-system-host[b-vys62laoms] {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.login-title[b-vys62laoms] {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.login-sub[b-vys62laoms] {
    margin: 0 0 1.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.login-info[b-vys62laoms] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.login-bootstrap-note[b-vys62laoms] {
    margin: 0.5rem 0 1.5rem;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    line-height: 1.4;
}

.login-bootstrap-note code[b-vys62laoms] {
    background: var(--color-surface-raised);
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
}

.login-form[b-vys62laoms] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-field[b-vys62laoms] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.login-label[b-vys62laoms] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.login-submit[b-vys62laoms] {
    margin-top: 0.5rem;
}

/* System picker — list of other profiles */
.login-picker-section[b-vys62laoms] {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.login-picker-heading[b-vys62laoms] {
    margin: 0 0 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.login-picker-buttons[b-vys62laoms] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-picker-button[b-vys62laoms] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.login-picker-button:hover:not(:disabled)[b-vys62laoms] {
    background-color: var(--color-surface-raised);
    color: var(--color-brand);
}

.login-picker-button:disabled[b-vys62laoms] {
    opacity: 0.55;
    cursor: not-allowed;
}

.login-picker-dot[b-vys62laoms] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.login-picker-name[b-vys62laoms] {
    font-weight: 500;
    flex: 1;
}

.login-picker-tag[b-vys62laoms] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Rejected token callout (API/identity mismatch) ───────────────────── */
.login-rejected[b-vys62laoms] {
    text-align: left;
}

.login-rejected p[b-vys62laoms] {
    margin: 0 0 0.5rem;
    line-height: 1.45;
}

.login-rejected p:last-child[b-vys62laoms] {
    margin-bottom: 0;
}

.login-rejected-detail[b-vys62laoms] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    opacity: 0.9;
    overflow-wrap: anywhere;
}
/* /Components/Pages/LookupEditor.razor.rz.scp.css */
/*  One lookup's create/edit/delete lane (L1, #381). Properties only — mirrors
    EntityGroupEditor.razor.css's shell, state and danger-zone tokens, minus the members/transfer
    section (a lookup has no child collection). .lue- prefix so nothing here collides with
    SavedListEditor's .sle- rules or Lookups.razor.css's .lu- rules. */

.lue-shell[b-vhsev7dkta] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lue-back[b-vhsev7dkta] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.lue-back:hover[b-vhsev7dkta] {
    color: var(--color-brand-teal);
}

.lue-status[b-vhsev7dkta] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.lue-props[b-vhsev7dkta] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.lue-checkbox-field[b-vhsev7dkta] {
    display: flex;
    align-items: center;
}

.lue-checkbox[b-vhsev7dkta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

/* ── Error state ────────────────────────────────────────────────────────── */

.lue-state[b-vhsev7dkta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.lue-state--error[b-vhsev7dkta] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.lue-state-title[b-vhsev7dkta] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.lue-state-body[b-vhsev7dkta] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.lue-state-actions[b-vhsev7dkta] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.lue-danger[b-vhsev7dkta] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.lue-danger-title[b-vhsev7dkta] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.lue-danger-lede[b-vhsev7dkta] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Lookups.razor.rz.scp.css */
/* Lookups — L1 (#381). Same shape as SavedLists.razor.css / EntityGroups.razor.css. */

.lu-shell[b-jfj6v4sak8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.lu-header[b-jfj6v4sak8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.lu-heading h1[b-jfj6v4sak8] {
    margin: 0.25rem 0 0;
}

.lu-search[b-jfj6v4sak8] {
    max-width: 24rem;
}

.lu-status[b-jfj6v4sak8] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.lu-list[b-jfj6v4sak8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lu-row[b-jfj6v4sak8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.lu-row:hover[b-jfj6v4sak8] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.lu-row-body[b-jfj6v4sak8] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-width: 0;
}

.lu-row-name[b-jfj6v4sak8] {
    font-weight: 600;
}

.lu-row-type[b-jfj6v4sak8] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* /Components/Pages/Memos/MemoEdit.razor.rz.scp.css */
.memo-edit-shell[b-lqsorw9a3j] {
    /* A centered document "page" on the grey canvas. The library's table
       insert/resize handles are positioned to the table's wrapper, so tables
       fill the editor width — which means the page width IS the table width.
       ~1080px reads as a roomy document without stretching tables absurdly. */
    padding: 0.25rem 0 3rem;
    max-width: 1080px;
    margin: 0 auto;
}

.memo-edit-header[b-lqsorw9a3j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.memo-edit-title[b-lqsorw9a3j] {
    flex: 1 1 auto;
    font-family: var(--font-title);
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.625rem 0.875rem;
}

.memo-edit-actions[b-lqsorw9a3j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 0 auto;
}

.memo-edit-dirty[b-lqsorw9a3j] {
    font-size: 0.8125rem;
    color: var(--color-degraded);
    white-space: nowrap;
}

.memo-edit-error[b-lqsorw9a3j] {
    margin-bottom: 0.875rem;
}

.memo-edit-canvas[b-lqsorw9a3j] {
    /* react-editor-kit renders its own toolbar + surface inside MemoEditor. */
}
/* /Components/Pages/Memos/Memos.razor.rz.scp.css */
.memos-shell[b-8kboxzg4jo] {
    padding: 0.25rem 0 3rem;
    max-width: 1440px;
    margin: 0 auto;
}

.memos-header[b-8kboxzg4jo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.memos-new-btn[b-8kboxzg4jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.memos-toolbar[b-8kboxzg4jo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0 1rem;
}

.memos-search[b-8kboxzg4jo] {
    max-width: 22rem;
    flex: 1 1 auto;
}

.memos-count[b-8kboxzg4jo] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.memos-grid[b-8kboxzg4jo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.memos-empty[b-8kboxzg4jo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 4rem 1rem;
    color: var(--color-text-secondary);
}

.memos-empty h2[b-8kboxzg4jo] {
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin: 0.5rem 0 0;
}

.memos-empty p[b-8kboxzg4jo] {
    margin: 0 0 0.75rem;
}

.memos-empty-art[b-8kboxzg4jo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-brand-teal);
    border: 1px solid var(--color-border);
}
/* /Components/Pages/Memos/MemoView.razor.rz.scp.css */
.memo-view-shell[b-r2ty3cj4qu] {
    padding: 0.25rem 0 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.memo-view-header[b-r2ty3cj4qu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.memo-view-heading h1[b-r2ty3cj4qu] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
}

.memo-view-sub[b-r2ty3cj4qu] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.memo-view-actions[b-r2ty3cj4qu] {
    display: flex;
    gap: 0.625rem;
    flex: 0 0 auto;
}

.memo-view-doc[b-r2ty3cj4qu] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem 2.25rem;
}

.memo-view-back[b-r2ty3cj4qu] {
    margin-top: 1rem;
}
/* /Components/Pages/Monitor/ImportsHub.razor.rz.scp.css */
.ih-panel[b-pc439ckvex] {
    margin-top: 1rem;
}

/* /Components/Pages/Monitor/ImportsRedirect.razor.rz.scp.css */
.ih-redirect[b-dkjy31q70x] {
    padding: 1.5rem 0;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Monitor/MonitorAlerts.razor.rz.scp.css */
.mal-note[b-3g0p45c7p1] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mal-flash[b-3g0p45c7p1] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: 1px solid var(--status-info-border);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.mal-flash--ok[b-3g0p45c7p1] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.mal-flash--error[b-3g0p45c7p1] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.mal-panel[b-3g0p45c7p1] {
    margin-top: 1rem;
}

.mal-why[b-3g0p45c7p1],
.mal-hint[b-3g0p45c7p1],
.mal-status[b-3g0p45c7p1] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.mal-alert[b-3g0p45c7p1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 14rem;
    max-width: 32rem;
}

.mal-alert-title[b-3g0p45c7p1] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.mal-alert-detail[b-3g0p45c7p1] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mal-alert-link[b-3g0p45c7p1] {
    font-size: 0.8125rem;
}

.mal-seen[b-3g0p45c7p1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.mal-state[b-3g0p45c7p1] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mal-state--attention[b-3g0p45c7p1] {
    color: var(--color-text-primary);
    font-weight: 600;
}

.mal-actions[b-3g0p45c7p1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mal-btn[b-3g0p45c7p1] {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.mal-btn:disabled[b-3g0p45c7p1] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mal-snooze[b-3g0p45c7p1] {
    width: auto;
    min-width: 6.5rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.8125rem;
}

.mal-mono[b-3g0p45c7p1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mal-kpis[b-3g0p45c7p1] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .mal-kpis[b-3g0p45c7p1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/Monitor/MonitorAudit.razor.rz.scp.css */
.ma-panel[b-kuovhl8533] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    min-width: 0;
}

.ma-kpis[b-kuovhl8533] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.ma-facets[b-kuovhl8533] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ma-chips[b-kuovhl8533] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ma-chip[b-kuovhl8533] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
}

.ma-chip[aria-pressed="true"][b-kuovhl8533] {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-fg);
    font-weight: 600;
}

.ma-chip-count[b-kuovhl8533] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.ma-filters[b-kuovhl8533] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.ma-field[b-kuovhl8533] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
}

.ma-field--user[b-kuovhl8533] {
    min-width: 16rem;
}

.ma-field--grow[b-kuovhl8533] {
    flex: 1 1 16rem;
}

.ma-field-label[b-kuovhl8533] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ma-doc[b-kuovhl8533] {
    width: 9rem;
}

.ma-user-chip[b-kuovhl8533] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.ma-chip-clear[b-kuovhl8533] {
    padding: 0 0.25rem;
    border: none;
    background: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ma-note[b-kuovhl8533] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.ma-toolbar[b-kuovhl8533] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.ma-unavailable[b-kuovhl8533] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.ma-mono[b-kuovhl8533] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
}

.ma-muted[b-kuovhl8533] {
    color: var(--color-text-secondary);
}

.ma-cat[b-kuovhl8533] {
    white-space: nowrap;
}

.ma-desc[b-kuovhl8533] {
    display: inline-block;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* /Components/Pages/Monitor/MonitorCapture.razor.rz.scp.css */
.cm-note[b-3z3gk5j8to] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.cm-panel[b-3z3gk5j8to] {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}

.cm-h2[b-3z3gk5j8to] {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cm-grid-h[b-3z3gk5j8to] {
    margin: 0.25rem 0 0.75rem;
}

.cm-lede[b-3z3gk5j8to] {
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.cm-empty[b-3z3gk5j8to] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.cm-legend[b-3z3gk5j8to] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: 0.625rem 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.cm-legend strong[b-3z3gk5j8to] {
    margin-left: 0.25rem;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.cm-swatch[b-3z3gk5j8to] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-right: 0.375rem;
    border-radius: 2px;
    vertical-align: baseline;
}

.cm-b-intake[b-3z3gk5j8to] { background: var(--status-info-border); }
.cm-b-reading[b-3z3gk5j8to] { background: var(--status-info-fg); }
.cm-b-understanding[b-3z3gk5j8to] { background: var(--color-brand-teal); }
.cm-b-delivering[b-3z3gk5j8to] { background: var(--color-brand); }
.cm-b-exceptions[b-3z3gk5j8to] { background: var(--color-degraded); }
.cm-b-processed[b-3z3gk5j8to] { background: var(--color-healthy); }
.cm-b-rejected[b-3z3gk5j8to] { background: var(--color-down); }
.cm-b-cancelled[b-3z3gk5j8to] { background: var(--color-unknown); }
.cm-b-other[b-3z3gk5j8to] { background: var(--status-neutral-border); }

.cm-table-wrap[b-3z3gk5j8to] {
    overflow-x: auto;
}

.cm-table[b-3z3gk5j8to] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cm-table th[b-3z3gk5j8to],
.cm-table td[b-3z3gk5j8to] {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.cm-table thead th[b-3z3gk5j8to] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.cm-table tbody th[b-3z3gk5j8to] {
    font-weight: 500;
}

.cm-table .cm-num[b-3z3gk5j8to] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-bar-col[b-3z3gk5j8to] {
    width: 28%;
    min-width: 140px;
}

.cm-row--on[b-3z3gk5j8to] {
    background: var(--color-surface-raised);
}

.cm-link[b-3z3gk5j8to] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-brand);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cm-warn[b-3z3gk5j8to] {
    color: var(--status-warning-fg);
    font-weight: 600;
}

.cm-sub[b-3z3gk5j8to] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cm-muted[b-3z3gk5j8to] {
    color: var(--color-text-secondary);
}

.cm-svc[b-3z3gk5j8to] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: 0.5rem;
}

.cm-services[b-3z3gk5j8to] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.cm-facets[b-3z3gk5j8to] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cm-chips[b-3z3gk5j8to] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cm-chip[b-3z3gk5j8to] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.cm-chip[aria-pressed="true"][b-3z3gk5j8to] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.cm-chip-count[b-3z3gk5j8to] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.cm-filters[b-3z3gk5j8to] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
}

.cm-field[b-3z3gk5j8to] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
}

.cm-field--grow[b-3z3gk5j8to] {
    flex: 1 1 260px;
}

.cm-field-label[b-3z3gk5j8to] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.cm-doc[b-3z3gk5j8to] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cm-doc-name[b-3z3gk5j8to] {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.cm-stage[b-3z3gk5j8to] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
}

.cm-mono[b-3z3gk5j8to] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.75rem;
}
/* /Components/Pages/Monitor/MonitorEmail.razor.rz.scp.css */
/* The Email page (MON4/MON5). Its two panels and their drawers are child components, so
   every rule reaches them through ::deep under the page's own .em wrapper — one stylesheet
   for both tabs. The mx-* and mxd-* rules mirror the Exports page and drawer. */

.em[b-3iw6ck3mr8]  .mx-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.em[b-3iw6ck3mr8]  .mx-insights {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .em[b-3iw6ck3mr8]  .mx-insights {
        grid-template-columns: minmax(0, 1fr);
    }
}

.em[b-3iw6ck3mr8]  .mx-rank {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}

.em[b-3iw6ck3mr8]  .mx-rank-title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.em[b-3iw6ck3mr8]  .mx-rank-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.em[b-3iw6ck3mr8]  .mx-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.375rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.em[b-3iw6ck3mr8]  .mx-rank-row:hover,
.em[b-3iw6ck3mr8]  .mx-rank-row:focus-visible {
    background: var(--color-surface-raised);
}

.em[b-3iw6ck3mr8]  .mx-rank-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em[b-3iw6ck3mr8]  .mx-rank-track {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    overflow: hidden;
}

.em[b-3iw6ck3mr8]  .mx-rank-fill {
    display: block;
    height: 100%;
    background: var(--color-brand-teal);
}

.em[b-3iw6ck3mr8]  .mx-rank-fill--failed {
    background: var(--color-down);
}

.em[b-3iw6ck3mr8]  .mx-rank-value {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-facets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.em[b-3iw6ck3mr8]  .mx-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.em[b-3iw6ck3mr8]  .mx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.em[b-3iw6ck3mr8]  .mx-chip[aria-pressed="true"] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.em[b-3iw6ck3mr8]  .mx-chip-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.em[b-3iw6ck3mr8]  .mx-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
}

.em[b-3iw6ck3mr8]  .mx-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
    max-width: 16rem;
}

.em[b-3iw6ck3mr8]  .mx-field--grow {
    flex: 1;
    max-width: 24rem;
}

.em[b-3iw6ck3mr8]  .mx-field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.em[b-3iw6ck3mr8]  .mx-unavailable {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.em[b-3iw6ck3mr8]  .mx-export {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.em[b-3iw6ck3mr8]  .mx-export-name {
    font-weight: 500;
}

.em[b-3iw6ck3mr8]  .mx-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-muted {
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.em[b-3iw6ck3mr8]  .mx-small {
    font-size: 0.75rem;
}


.em[b-3iw6ck3mr8]  .mxd-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.em[b-3iw6ck3mr8]  .mxd-section:last-child {
    border-bottom: none;
}

.em[b-3iw6ck3mr8]  .mxd-heading {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mxd-fields {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

.em[b-3iw6ck3mr8]  .mxd-fields dt {
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mxd-fields dd {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.em[b-3iw6ck3mr8]  .mxd-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.em[b-3iw6ck3mr8]  .mxd-muted {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.em[b-3iw6ck3mr8]  .mxd-related {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.em[b-3iw6ck3mr8]  .mxd-props {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.em[b-3iw6ck3mr8]  .mxd-props th,
.em[b-3iw6ck3mr8]  .mxd-props td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.em[b-3iw6ck3mr8]  .mxd-props thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mxd-props tbody th {
    font-weight: 500;
    width: 40%;
}

.em[b-3iw6ck3mr8]  .mxd-props tbody th span {
    display: block;
}

.em[b-3iw6ck3mr8]  .mxd-value {
    overflow-wrap: anywhere;
}

.em[b-3iw6ck3mr8]  .mxd-pre {
    margin: 0;
    max-height: 14rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--color-surface-raised);
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.em[b-3iw6ck3mr8]  .mxd-block {
    display: block;
    margin-top: 0.125rem;
}

.em[b-3iw6ck3mr8]  .mx-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .mx-unavailable p {
    margin: 0 0 0.5rem;
}

.em[b-3iw6ck3mr8]  .mx-unavailable p:last-child {
    margin-bottom: 0;
}

.em[b-3iw6ck3mr8]  .mx-clip {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.em[b-3iw6ck3mr8]  .mx-subject {
    display: inline-block;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-weight: 500;
}

.em[b-3iw6ck3mr8]  .mx-rank-track--split {
    display: flex;
}

.em[b-3iw6ck3mr8]  .mx-rank-track--split .mx-rank-fill {
    flex: none;
}

.em[b-3iw6ck3mr8]  .mxd-small {
    font-size: 0.75rem;
}

/* ── Received drawer ─────────────────────────────────────────────── */

.em[b-3iw6ck3mr8]  .emr-stored {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: calc(var(--radius) * 0.75);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.em[b-3iw6ck3mr8]  .emr-stored--present {
    color: var(--status-healthy-fg, var(--color-text-primary));
    background: var(--status-healthy-bg, var(--color-surface-raised));
    border-color: var(--status-healthy-border, var(--color-border));
}

.em[b-3iw6ck3mr8]  .emr-stored--missing {
    color: var(--status-degraded-fg, var(--color-text-primary));
    background: var(--status-degraded-bg, var(--color-surface-raised));
    border-color: var(--status-degraded-border, var(--color-border));
}

.em[b-3iw6ck3mr8]  .emr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.em[b-3iw6ck3mr8]  .emr-actions .btn-primary,
.em[b-3iw6ck3mr8]  .emr-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Message viewer ──────────────────────────────────────────────── */

.em[b-3iw6ck3mr8]  .emv {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.em[b-3iw6ck3mr8]  .emv-heading,
.em[b-3iw6ck3mr8]  .emv-subheading {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .emv-subheading {
    margin-top: 0.5rem;
}

.em[b-3iw6ck3mr8]  .emv-headers {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.8125rem;
}

.em[b-3iw6ck3mr8]  .emv-headers dt {
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .emv-headers dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.em[b-3iw6ck3mr8]  .emv-headers--all {
    margin-top: 0.5rem;
    max-height: 18rem;
    overflow: auto;
    font-size: 0.75rem;
}

.em[b-3iw6ck3mr8]  .emv-switch {
    display: inline-flex;
    gap: 0.25rem;
}

.em[b-3iw6ck3mr8]  .emv-pill {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.em[b-3iw6ck3mr8]  .emv-pill[aria-pressed="true"] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.em[b-3iw6ck3mr8]  .emv-safety {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.em[b-3iw6ck3mr8]  .emv-frame {
    width: 100%;
    height: 26rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: #fff;
}

.em[b-3iw6ck3mr8]  .emv-text {
    margin: 0;
    max-height: 26rem;
    overflow: auto;
    padding: 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.em[b-3iw6ck3mr8]  .emv-problems {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .emv-attachments {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.em[b-3iw6ck3mr8]  .emv-attachments th,
.em[b-3iw6ck3mr8]  .emv-attachments td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.em[b-3iw6ck3mr8]  .emv-attachments thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .emv-num {
    text-align: right !important;
}

.em[b-3iw6ck3mr8]  .emv-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.em[b-3iw6ck3mr8]  .emv-muted {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.em[b-3iw6ck3mr8]  .emv-small {
    font-size: 0.75rem;
}

.em[b-3iw6ck3mr8]  .emv-all summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Sent drawer ─────────────────────────────────────────────────── */

.em[b-3iw6ck3mr8]  .ems-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.em[b-3iw6ck3mr8]  .ems-withheld {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: 1px dashed var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
}
/* /Components/Pages/Monitor/MonitorExportDrawer.razor.rz.scp.css */
.mxd-section[b-1basruwdw1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.mxd-section:last-child[b-1basruwdw1] {
    border-bottom: none;
}

.mxd-heading[b-1basruwdw1] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mxd-fields[b-1basruwdw1] {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

.mxd-fields dt[b-1basruwdw1] {
    color: var(--color-text-secondary);
}

.mxd-fields dd[b-1basruwdw1] {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.mxd-mono[b-1basruwdw1] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.mxd-muted[b-1basruwdw1] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.mxd-related[b-1basruwdw1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.mxd-props[b-1basruwdw1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.mxd-props th[b-1basruwdw1],
.mxd-props td[b-1basruwdw1] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.mxd-props thead th[b-1basruwdw1] {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mxd-props tbody th[b-1basruwdw1] {
    font-weight: 500;
    width: 40%;
}

.mxd-props tbody th span[b-1basruwdw1] {
    display: block;
}

.mxd-value[b-1basruwdw1] {
    overflow-wrap: anywhere;
}

.mxd-pre[b-1basruwdw1] {
    margin: 0;
    max-height: 14rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--color-surface-raised);
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mxd-block[b-1basruwdw1] {
    display: block;
    margin-top: 0.125rem;
}
/* /Components/Pages/Monitor/MonitorExports.razor.rz.scp.css */
.mx-note[b-m9snesedvj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.mx-insights[b-m9snesedvj] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .mx-insights[b-m9snesedvj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mx-rank[b-m9snesedvj] {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}

.mx-rank-title[b-m9snesedvj] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mx-rank-empty[b-m9snesedvj] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mx-rank-list[b-m9snesedvj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mx-rank-row[b-m9snesedvj] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.375rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.mx-rank-row:hover[b-m9snesedvj],
.mx-rank-row:focus-visible[b-m9snesedvj] {
    background: var(--color-surface-raised);
}

.mx-rank-label[b-m9snesedvj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-rank-track[b-m9snesedvj] {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    overflow: hidden;
}

.mx-rank-fill[b-m9snesedvj] {
    display: block;
    height: 100%;
    background: var(--color-brand-teal);
}

.mx-rank-fill--failed[b-m9snesedvj] {
    background: var(--color-down);
}

.mx-rank-value[b-m9snesedvj] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.mx-facets[b-m9snesedvj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.mx-kinds[b-m9snesedvj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mx-chip[b-m9snesedvj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.mx-chip[aria-pressed="true"][b-m9snesedvj] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.mx-chip-count[b-m9snesedvj] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.mx-filters[b-m9snesedvj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
}

.mx-field[b-m9snesedvj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
    max-width: 16rem;
}

.mx-field--grow[b-m9snesedvj] {
    flex: 1;
    max-width: 24rem;
}

.mx-field-label[b-m9snesedvj] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mx-toolbar[b-m9snesedvj] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mx-unavailable[b-m9snesedvj] {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.mx-export[b-m9snesedvj] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mx-export-name[b-m9snesedvj] {
    font-weight: 500;
}

.mx-mono[b-m9snesedvj] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.mx-muted[b-m9snesedvj] {
    color: var(--color-text-secondary);
}

.mx-stack[b-m9snesedvj] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mx-small[b-m9snesedvj] {
    font-size: 0.75rem;
}
/* /Components/Pages/Monitor/MonitorJobDrawer.razor.rz.scp.css */
.mjd-section[b-7gtclftq09] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.mjd-section:last-child[b-7gtclftq09] {
    border-bottom: none;
}

.mjd-heading[b-7gtclftq09] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mjd-fields[b-7gtclftq09] {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

.mjd-fields dt[b-7gtclftq09] {
    color: var(--color-text-secondary);
}

.mjd-fields dd[b-7gtclftq09] {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.mjd-mono[b-7gtclftq09] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.mjd-muted[b-7gtclftq09] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.mjd-related[b-7gtclftq09] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.mjd-props[b-7gtclftq09] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.mjd-props th[b-7gtclftq09],
.mjd-props td[b-7gtclftq09] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.mjd-props thead th[b-7gtclftq09] {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mjd-props tbody th[b-7gtclftq09] {
    font-weight: 500;
    width: 40%;
}

.mjd-props tbody th span[b-7gtclftq09] {
    display: block;
}

.mjd-value[b-7gtclftq09] {
    overflow-wrap: anywhere;
}

.mjd-pre[b-7gtclftq09] {
    margin: 0;
    max-height: 14rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--color-surface-raised);
    border-radius: calc(var(--radius) * 0.5);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mjd-action-group[b-7gtclftq09] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.mjd-action-buttons[b-7gtclftq09] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mjd-action-buttons .mjd-action-btn:disabled[b-7gtclftq09] {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--color-border);
    background: var(--color-surface-raised);
}

.mjd-reason[b-7gtclftq09] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mjd-outcome[b-7gtclftq09] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: calc(var(--radius) * 0.75);
    font-size: 0.8125rem;
}

.mjd-outcome--ok[b-7gtclftq09] {
    color: var(--status-success-fg);
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
}

.mjd-outcome--no[b-7gtclftq09] {
    color: var(--status-warning-fg);
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
}
/* /Components/Pages/Monitor/MonitorJobs.razor.rz.scp.css */
.mj-note[b-jucfkfp82e] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: calc(var(--radius) * 0.75);
}

.mj-insights[b-jucfkfp82e] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .mj-insights[b-jucfkfp82e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mj-rank[b-jucfkfp82e] {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 0;
}

.mj-rank-title[b-jucfkfp82e] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mj-rank-empty[b-jucfkfp82e] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mj-rank-list[b-jucfkfp82e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mj-rank-row[b-jucfkfp82e] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.375rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.mj-rank-row:hover[b-jucfkfp82e],
.mj-rank-row:focus-visible[b-jucfkfp82e] {
    background: var(--color-surface-raised);
}

.mj-rank-label[b-jucfkfp82e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mj-rank-track[b-jucfkfp82e] {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    overflow: hidden;
}

.mj-rank-fill[b-jucfkfp82e] {
    display: block;
    height: 100%;
    background: var(--color-brand-teal);
}

.mj-rank-fill--failed[b-jucfkfp82e] {
    background: var(--color-down);
}

.mj-rank-value[b-jucfkfp82e] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.mj-facets[b-jucfkfp82e] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.mj-groups[b-jucfkfp82e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mj-chip[b-jucfkfp82e] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.mj-chip[aria-pressed="true"][b-jucfkfp82e] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.mj-chip-count[b-jucfkfp82e] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.mj-filters[b-jucfkfp82e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
}

.mj-field[b-jucfkfp82e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
    max-width: 16rem;
}

.mj-field--grow[b-jucfkfp82e] {
    flex: 1;
    max-width: 24rem;
}

.mj-field-label[b-jucfkfp82e] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.mj-toolbar[b-jucfkfp82e] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mj-unavailable[b-jucfkfp82e] {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.mj-job[b-jucfkfp82e] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mj-job-name[b-jucfkfp82e] {
    font-weight: 500;
}

.mj-mono[b-jucfkfp82e] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.mj-muted[b-jucfkfp82e] {
    color: var(--color-text-secondary);
}
/* /Components/Pages/Monitor/MonitorServices.razor.rz.scp.css */
.svcb-kpis[b-wadog6jwl9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
}

.svcb-kpi[b-wadog6jwl9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-unknown);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    font: inherit;
    color: var(--color-text-primary);
}

.svcb-kpi:hover[b-wadog6jwl9] {
    border-color: var(--color-brand-teal);
}

.svcb-kpi:focus-visible[b-wadog6jwl9] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.svcb-kpi--on[b-wadog6jwl9] {
    background: var(--status-info-bg);
    border-color: var(--color-brand-teal);
}

.svcb-kpi--silent[b-wadog6jwl9] { border-top-color: var(--color-down); }
.svcb-kpi--stuck[b-wadog6jwl9] { border-top-color: var(--color-degraded); }
.svcb-kpi--running[b-wadog6jwl9],
.svcb-kpi--idle[b-wadog6jwl9] { border-top-color: var(--color-healthy); }

.svcb-kpi--zero .svcb-kpi-n[b-wadog6jwl9] {
    color: var(--color-text-secondary);
}

.svcb-kpi-n[b-wadog6jwl9] {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.svcb-kpi-l[b-wadog6jwl9] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.svcb-section-head[b-wadog6jwl9] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.svcb-h2[b-wadog6jwl9] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.svcb-count[b-wadog6jwl9] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.svcb-grid[b-wadog6jwl9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.svcb-grid--capture[b-wadog6jwl9] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.svcb-capture[b-wadog6jwl9] {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.svcb-capture .svcb-section-head[b-wadog6jwl9] {
    margin-bottom: 0;
}

.svcb-why[b-wadog6jwl9] {
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.svcb-why summary[b-wadog6jwl9] {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
}

.svcb-why ul[b-wadog6jwl9] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.svcb-status[b-wadog6jwl9] {
    margin: 0;
    padding: 1rem;
    color: var(--color-text-secondary);
}

.svcb-link[b-wadog6jwl9] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-brand);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
/* /Components/Pages/Monitor/MonitorTrace.razor.rz.scp.css */
.tr-search[b-k348is39m2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 100%;
    width: 100%;
    max-width: 52rem;
}

.tr-label[b-k348is39m2] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-row[b-k348is39m2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tr-search .tr-input[b-k348is39m2] {
    flex: 1 1 22rem;
    width: auto;
    min-width: 0;
}

.tr-hint[b-k348is39m2] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tr-h2[b-k348is39m2] {
    margin: 0 0 0.6rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tr-results-h[b-k348is39m2] { margin-top: 1rem; }

.tr-intro[b-k348is39m2],
.tr-sources[b-k348is39m2] {
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.tr-examples[b-k348is39m2] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.tr-computed[b-k348is39m2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tr-tag[b-k348is39m2] {
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
}

.tr-source-list[b-k348is39m2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tr-source[b-k348is39m2] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.8125rem;
    border: 1px solid var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    border-radius: 999px;
}

.tr-source-name[b-k348is39m2] { font-weight: 600; }

.tr-source--hit[b-k348is39m2] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.tr-source--warn[b-k348is39m2] {
    border-color: var(--status-warning-border);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.tr-source--down[b-k348is39m2] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.tr-source--idle[b-k348is39m2] { border-style: dashed; }

.tr-pending[b-k348is39m2] {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tr-note[b-k348is39m2] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tr-empty[b-k348is39m2] {
    margin: 0;
    color: var(--color-text-secondary);
}

.tr-chains[b-k348is39m2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Components/Pages/Monitor/OperationsCentre.razor.rz.scp.css */
.oc-status[b-vc6c84m8j6] {
    margin: 0;
    color: var(--color-text-secondary);
}

.oc-h2[b-vc6c84m8j6] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

#oc-board-heading[b-vc6c84m8j6] { margin-bottom: 0.75rem; }

/* ── Summary (overall + today vs usual) ───────────────────────────── */

.oc-summary[b-vc6c84m8j6] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.oc-overall[b-vc6c84m8j6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.oc-overall-label[b-vc6c84m8j6] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.oc-overall-text[b-vc6c84m8j6] { color: var(--color-text-primary); }

.oc-insight[b-vc6c84m8j6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.oc-insight-text[b-vc6c84m8j6] {
    flex: 1 1 20rem;
    margin: 0;
    color: var(--color-text-primary);
}

.oc-insight-label[b-vc6c84m8j6] { font-weight: 600; }

.oc-explain[b-vc6c84m8j6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.oc-tag[b-vc6c84m8j6] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--status-info-fg);
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    border-radius: 999px;
}

/* ── Attention + timeline ────────────────────────────────────────── */

.oc-columns[b-vc6c84m8j6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

@media (max-width: 960px) {
    .oc-columns[b-vc6c84m8j6] { grid-template-columns: minmax(0, 1fr); }
}

.oc-panel[b-vc6c84m8j6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.oc-panel-head[b-vc6c84m8j6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.oc-count[b-vc6c84m8j6] {
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border-radius: 999px;
}

.oc-empty[b-vc6c84m8j6],
.oc-note[b-vc6c84m8j6] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.oc-attention[b-vc6c84m8j6],
.oc-timeline[b-vc6c84m8j6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oc-item[b-vc6c84m8j6] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-degraded);
    border-radius: var(--radius);
}

.oc-item--critical[b-vc6c84m8j6] { border-left-color: var(--color-down); }

.oc-sev[b-vc6c84m8j6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--status-warning-fg);
}

.oc-item--critical .oc-sev[b-vc6c84m8j6] { color: var(--status-error-fg); }

.oc-item-body[b-vc6c84m8j6],
.oc-event-body[b-vc6c84m8j6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.oc-item-title[b-vc6c84m8j6],
.oc-event-title[b-vc6c84m8j6] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

a.oc-item-title:hover[b-vc6c84m8j6],
a.oc-event-title:hover[b-vc6c84m8j6] { color: var(--color-brand); }

.oc-item-detail[b-vc6c84m8j6],
.oc-event-sub[b-vc6c84m8j6] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.oc-item-when[b-vc6c84m8j6] {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.oc-event[b-vc6c84m8j6] {
    display: grid;
    grid-template-columns: 7.5rem auto minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.oc-event:last-child[b-vc6c84m8j6] { border-bottom: 0; }

.oc-event-time[b-vc6c84m8j6] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

/* ── Site facts ───────────────────────────────────────────────────── */

.oc-site[b-vc6c84m8j6] { margin-top: 1rem; }

.oc-facts[b-vc6c84m8j6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.oc-facts dt[b-vc6c84m8j6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.oc-facts dd[b-vc6c84m8j6] {
    margin: 0.15rem 0 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.oc-muted[b-vc6c84m8j6] { color: var(--color-text-secondary); }
/* /Components/Pages/Reports/ReportsIndex.razor.rz.scp.css */
.rpt-card-grid[b-njh3seocmg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.rpt-card[b-njh3seocmg] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    font: inherit;
    color: inherit;
}

.rpt-card:hover[b-njh3seocmg] {
    border-color: #14b8a6;
    box-shadow: 0 6px 16px -8px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.rpt-card-icon[b-njh3seocmg] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f766e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpt-card-icon svg[b-njh3seocmg] {
    width: 22px;
    height: 22px;
}

.rpt-card-body[b-njh3seocmg] {
    flex: 1 1 auto;
    min-width: 0;
}

.rpt-card-title[b-njh3seocmg] {
    font-weight: 600;
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 6px;
}

.rpt-card-desc[b-njh3seocmg] {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}
/* /Components/Pages/Reports/WorkflowAssignmentsReport.razor.rz.scp.css */
/* All report styles live in wwwroot/app.css under .wf-rpt-* selectors
   so they cascade into nested components without needing ::deep. */
/* /Components/Pages/Reports/WorkflowAssignmentsSelect.razor.rz.scp.css */
/* Shared selector styles live in wwwroot/app.css under .wfsel-* so both
   the Workflow Assignments and Document Type Assignments selectors pick
   them up (scoped CSS would only apply to one). */
/* /Components/Pages/Reports/WorkflowReportsFromList.razor.rz.scp.css */
.rptb-step[b-3sqrdzrhtg] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.rptb-step-title[b-3sqrdzrhtg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px;
}

.rptb-step-num[b-3sqrdzrhtg] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 700;
}

.rptb-hint[b-3sqrdzrhtg] {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 10px;
}

.rptb-row[b-3sqrdzrhtg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rptb-copied[b-3sqrdzrhtg] {
    font-size: 12px;
    color: #166534;
}

.rptb-details[b-3sqrdzrhtg] {
    margin-top: 10px;
    font-size: 13px;
    color: #334155;
}

.rptb-details summary[b-3sqrdzrhtg] {
    cursor: pointer;
    color: #475569;
}

.rptb-pre[b-3sqrdzrhtg] {
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.5;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0 0;
}

.rptb-input[b-3sqrdzrhtg] {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 6px 0 12px;
    resize: vertical;
}

.rptb-td-num[b-3sqrdzrhtg] {
    color: #94a3b8;
    width: 48px;
}

.rptb-sub[b-3sqrdzrhtg] {
    font-size: 12px;
    color: #64748b;
}

.rptb-dt[b-3sqrdzrhtg] {
    font-weight: 600;
    color: #0f172a;
}

.rptb-pick[b-3sqrdzrhtg] {
    min-width: 240px;
}

.rptb-status[b-3sqrdzrhtg] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}

.rptb-status--ok[b-3sqrdzrhtg]   { background: #dcfce7; color: #166534; }
.rptb-status--pick[b-3sqrdzrhtg] { background: #fef3c7; color: #92400e; }
.rptb-status--skip[b-3sqrdzrhtg] { background: #f1f5f9; color: #475569; }

.rptb-options[b-3sqrdzrhtg] {
    display: flex;
    gap: 20px;
    margin-top: 14px;
}

.rptb-code[b-3sqrdzrhtg] {
    font-size: 12px;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 5px;
    color: #0f172a;
}
/* /Components/Pages/Roles.razor.rz.scp.css */
/* UA3 (#828): the roles catalogue and the unified role page. Table, form and badge vocabulary
   come from app.css; only what is particular to this page lives here. */

.rl-page[b-ifb6e4t6jc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 82rem;
}

.rl-back[b-ifb6e4t6jc] {
    align-self: flex-start;
    color: var(--color-brand);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.rl-back:hover[b-ifb6e4t6jc],
.rl-back:focus-visible[b-ifb6e4t6jc] {
    text-decoration: underline;
}

.rl-header[b-ifb6e4t6jc],
.rl-role-header[b-ifb6e4t6jc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rl-title[b-ifb6e4t6jc] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rl-sub[b-ifb6e4t6jc] {
    margin: 0.25rem 0 0;
    max-width: 44rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.rl-actions[b-ifb6e4t6jc],
.rl-role-badges[b-ifb6e4t6jc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rl-filters[b-ifb6e4t6jc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.rl-filter[b-ifb6e4t6jc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8rem;
}

.rl-filter--search[b-ifb6e4t6jc] {
    flex: 1 1 14rem;
    max-width: 24rem;
}

.rl-filter .form-label[b-ifb6e4t6jc] {
    margin: 0;
}

.rl-clear[b-ifb6e4t6jc] {
    align-self: flex-end;
}

.rl-note[b-ifb6e4t6jc] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.rl-note--warn[b-ifb6e4t6jc] {
    border-color: color-mix(in srgb, var(--color-degraded) 35%, var(--color-surface));
    background: color-mix(in srgb, var(--color-degraded) 8%, var(--color-surface));
    color: var(--color-text-primary);
}

.rl-name[b-ifb6e4t6jc] {
    color: inherit;
    text-decoration: none;
}

.rl-name:hover[b-ifb6e4t6jc],
.rl-name:focus-visible[b-ifb6e4t6jc] {
    color: var(--color-brand);
    text-decoration: underline;
}

.rl-type[b-ifb6e4t6jc],
.rl-muted[b-ifb6e4t6jc],
.rl-meta[b-ifb6e4t6jc] {
    color: var(--color-text-secondary);
}

.rl-meta[b-ifb6e4t6jc] {
    margin: 0;
    font-size: 0.78rem;
}

.rl-count[b-ifb6e4t6jc] {
    font-variant-numeric: tabular-nums;
}

.rl-count--zero[b-ifb6e4t6jc] {
    color: var(--color-degraded);
    font-weight: 600;
}

.rl-count--pending[b-ifb6e4t6jc],
.rl-count--unknown[b-ifb6e4t6jc] {
    color: var(--color-text-secondary);
}

.rl-status[b-ifb6e4t6jc] {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.rl-empty[b-ifb6e4t6jc] {
    padding: 2rem 0;
    color: var(--color-text-secondary);
}

.rl-role-heading[b-ifb6e4t6jc] {
    min-width: 0;
}

.rl-role-sub[b-ifb6e4t6jc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rl-type-pill[b-ifb6e4t6jc] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem 0.15rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
}

.rl-type-pill[b-ifb6e4t6jc]  svg,
.rl-type-pill svg[b-ifb6e4t6jc] {
    width: 12px;
    height: 12px;
}

.rl-type-entity[b-ifb6e4t6jc]   { background: color-mix(in srgb, #0ea5e9 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #0ea5e9 35%, var(--color-surface)); }
.rl-type-job[b-ifb6e4t6jc]      { background: color-mix(in srgb, #8b5cf6 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #8b5cf6 35%, var(--color-surface)); }
.rl-type-security[b-ifb6e4t6jc] { background: color-mix(in srgb, #ef4444 12%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #ef4444 32%, var(--color-surface)); }
.rl-type-approval[b-ifb6e4t6jc] { background: color-mix(in srgb, #f59e0b 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #f59e0b 35%, var(--color-surface)); }
.rl-type-property[b-ifb6e4t6jc] { background: color-mix(in srgb, #14b8a6 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #14b8a6 35%, var(--color-surface)); }
.rl-type-system[b-ifb6e4t6jc]   { background: color-mix(in srgb, #64748b 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #64748b 35%, var(--color-surface)); }
.rl-type-global[b-ifb6e4t6jc]   { background: color-mix(in srgb, #22c55e 14%, var(--color-surface)); color: var(--color-text-primary); border-color: color-mix(in srgb, #22c55e 35%, var(--color-surface)); }
.rl-type-default[b-ifb6e4t6jc]  { background: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-border); }

.rl-tab-panel[b-ifb6e4t6jc] {
    padding-top: 0.25rem;
    min-width: 0;
}

.rl-actions a.btn[b-ifb6e4t6jc] {
    text-decoration: none;
}

.rl-role-sub a[b-ifb6e4t6jc],
.rl-page td a:not(.rl-name)[b-ifb6e4t6jc] {
    color: var(--color-brand);
}
/* /Components/Pages/SavedListEditor.razor.rz.scp.css */
/*  One saved list's create/edit/values/delete lane (L1, #381). Mirrors
    EntityGroupEditor.razor.css's shell, state and danger-zone tokens, plus a simple ordered-list
    layout for values (a full-set text edit, not a two-list transfer picker — there is no existing
    catalogue to pick from). .sle- prefix so nothing here collides with EntityGroupEditor's .ege-
    rules or SavedLists.razor.css's .sl- rules. */

.sle-shell[b-uvfoshb13g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sle-back[b-uvfoshb13g] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.sle-back:hover[b-uvfoshb13g] {
    color: var(--color-brand-teal);
}

.sle-status[b-uvfoshb13g] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.sle-props[b-uvfoshb13g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sle-muted[b-uvfoshb13g] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ── Error state ────────────────────────────────────────────────────────── */

.sle-state[b-uvfoshb13g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.sle-state--error[b-uvfoshb13g] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.sle-state-title[b-uvfoshb13g] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sle-state-body[b-uvfoshb13g] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.sle-state-actions[b-uvfoshb13g] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Values: an explicit, numbered order ───────────────────────────────── */

.sle-values[b-uvfoshb13g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sle-values-list[b-uvfoshb13g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    /* Numbered markers make the stored order explicit rather than implied — see this
       page's own remarks: there is no separate ordering field, only creation order. */
    list-style: decimal inside;
}

.sle-value-row[b-uvfoshb13g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sle-value-input[b-uvfoshb13g] {
    flex: 1 1 auto;
    min-width: 0;
}

.sle-value-remove[b-uvfoshb13g] {
    flex: 0 0 auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.sle-add-value[b-uvfoshb13g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.sle-values-actions[b-uvfoshb13g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.sle-danger[b-uvfoshb13g] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.sle-danger-title[b-uvfoshb13g] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.sle-danger-lede[b-uvfoshb13g] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/SavedLists.razor.rz.scp.css */
/* Saved lists — L1 (#381). Same shape as EntityGroups.razor.css. */

.sl-shell[b-hn5wwpn1km] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.sl-header[b-hn5wwpn1km] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sl-heading h1[b-hn5wwpn1km] {
    margin: 0.25rem 0 0;
}

.sl-search[b-hn5wwpn1km] {
    max-width: 24rem;
}

.sl-status[b-hn5wwpn1km] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.sl-list[b-hn5wwpn1km] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-row[b-hn5wwpn1km] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.sl-row:hover[b-hn5wwpn1km] {
    border-color: var(--color-brand-teal);
    background: var(--color-surface-raised);
}

.sl-row-body[b-hn5wwpn1km] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-width: 0;
}

.sl-row-name[b-hn5wwpn1km] {
    font-weight: 600;
}

.sl-row-count[b-hn5wwpn1km] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* /Components/Pages/Schedules/ScheduleDetailPage.razor.rz.scp.css */
.sched-detail-shell[b-gf94a9r0ry] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem;
}

.sched-detail-topbar[b-gf94a9r0ry] {
    margin-bottom: 1rem;
}

.sched-back[b-gf94a9r0ry] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-brand, #074684);
    text-decoration: none;
}

.sched-detail-header[b-gf94a9r0ry] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sched-detail-status[b-gf94a9r0ry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sched-tz-caption[b-gf94a9r0ry] {
    margin: 0 0 1.25rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #64748b);
}

.sched-tabs[b-gf94a9r0ry] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 1.25rem;
}

.sched-tab[b-gf94a9r0ry] {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
}

.sched-tab:hover[b-gf94a9r0ry] {
    color: var(--color-brand, #074684);
}

.sched-tab--active[b-gf94a9r0ry] {
    color: var(--color-brand, #074684);
    border-bottom-color: var(--color-brand, #074684);
}

.sched-stat-row[b-gf94a9r0ry] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sched-stat[b-gf94a9r0ry] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
}

.sched-stat-label[b-gf94a9r0ry] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.sched-stat-value[b-gf94a9r0ry] {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sched-facts[b-gf94a9r0ry] {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.6rem 1.5rem;
    margin: 0;
}

.sched-facts dt[b-gf94a9r0ry] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
}

.sched-facts dd[b-gf94a9r0ry] {
    margin: 0;
    color: var(--color-text-primary, #1e293b);
}

.sched-facts-sub[b-gf94a9r0ry] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #64748b);
}

.sched-cron[b-gf94a9r0ry] {
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    background: var(--color-surface-raised, #f1f5f9);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--color-text-secondary, #475569);
}

.sched-chip[b-gf94a9r0ry] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    margin: 0.15rem 0.3rem 0.15rem 0;
    background: var(--color-surface-raised, #f1f5f9);
    border-radius: 999px;
    font-size: 0.82rem;
}

.sched-chip--req[b-gf94a9r0ry] {
    background: #dcfce7;
    color: #166534;
}

.sched-config-issue[b-gf94a9r0ry] {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius, 8px);
    color: #991b1b;
    font-size: 0.9rem;
}

.sched-table-wrap[b-gf94a9r0ry] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
    background: var(--color-surface, #fff);
}

.sched-table[b-gf94a9r0ry] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sched-table thead th[b-gf94a9r0ry] {
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-raised, #f8fafc);
}

.sched-table td[b-gf94a9r0ry] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--color-border, #eef2f6);
}

.sched-td-time[b-gf94a9r0ry] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-secondary, #475569);
}

.sched-row-flag[b-gf94a9r0ry] {
    background: #fff7ed;
}

.sched-actions[b-gf94a9r0ry] {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}

.sched-action-btn[b-gf94a9r0ry] {
    appearance: none;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.sched-action-btn:hover:not(:disabled)[b-gf94a9r0ry] {
    border-color: var(--color-down, #ef4444);
    color: var(--color-down, #ef4444);
}

.sched-action-btn--rerun:hover:not(:disabled)[b-gf94a9r0ry] {
    border-color: var(--color-brand, #074684);
    color: var(--color-brand, #074684);
}

.sched-action-btn:disabled[b-gf94a9r0ry] {
    opacity: 0.5;
    cursor: default;
}

.sched-edit-form[b-gf94a9r0ry] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 36rem;
}

.sched-edit-row[b-gf94a9r0ry] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sched-edit-row label[b-gf94a9r0ry] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #475569);
}

.sched-edit-form .form-input[b-gf94a9r0ry] {
    width: 100%;
    box-sizing: border-box;
}

/* Compact controls (selects, time, minute) don't need the full width. */
.sched-edit-form .sched-num[b-gf94a9r0ry] {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
}

.sched-edit-hint[b-gf94a9r0ry] {
    font-size: 0.8rem;
    color: var(--color-text-secondary, #64748b);
}

/* ── Cron builder ── */
.sched-cron-builder[b-gf94a9r0ry] {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    padding: 0.9rem 1rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sched-cron-builder legend[b-gf94a9r0ry] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
    padding: 0 0.4rem;
}

.sched-daypick[b-gf94a9r0ry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sched-day[b-gf94a9r0ry] {
    appearance: none;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.sched-day:hover[b-gf94a9r0ry] {
    border-color: var(--color-brand, #074684);
}

.sched-day.is-on[b-gf94a9r0ry] {
    background: var(--color-brand, #074684);
    border-color: var(--color-brand, #074684);
    color: #fff;
}

.sched-cron-preview[b-gf94a9r0ry] {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.sched-cron-en[b-gf94a9r0ry] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text, #0f172a);
}

.sched-cron-err[b-gf94a9r0ry] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-down, #b91c1c);
}

.form-input.is-invalid[b-gf94a9r0ry] {
    border-color: var(--color-down, #ef4444);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

.sched-edit-dates[b-gf94a9r0ry] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* ── Read-only metadata block ── */
.sched-edit-meta[b-gf94a9r0ry] {
    border-top: 1px solid var(--color-border, #e2e8f0);
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sched-edit-meta-title[b-gf94a9r0ry] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary, #475569);
}

.sched-facts--compact[b-gf94a9r0ry] {
    margin: 0;
}

.sched-edit-actions[b-gf94a9r0ry] {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.sched-edit-note[b-gf94a9r0ry] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary, #94a3b8);
}

.sched-renew[b-gf94a9r0ry] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-raised, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
}

.sched-renew label[b-gf94a9r0ry] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary, #475569);
}

.sched-renew .form-input[b-gf94a9r0ry] {
    max-width: 12rem;
}

.sched-action-msg[b-gf94a9r0ry] {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius, 8px);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 0.88rem;
}

.sched-action-msg--err[b-gf94a9r0ry] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.sched-windows[b-gf94a9r0ry] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sched-windows li[b-gf94a9r0ry] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sched-waiver-note[b-gf94a9r0ry],
.sched-status[b-gf94a9r0ry] {
    color: var(--color-text-secondary, #64748b);
    font-size: 0.9rem;
}

.sched-waiver-note[b-gf94a9r0ry] {
    margin-top: 0.75rem;
}

.dashboard-card + .dashboard-card[b-gf94a9r0ry] {
    margin-top: 1.25rem;
}

/* MONS: the page is read-only when the portal gate says so — say why, calmly. */
.sched-readonly-note[b-gf94a9r0ry] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--status-neutral-border);
    border-left: 3px solid var(--color-unknown);
    border-radius: 6px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.875rem;
}
/* /Components/Pages/Schedules/SchedulesDashboard.razor.rz.scp.css */
.schedules-insight[b-px5mgvyf8q] {
    margin: 0;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-primary, #1e293b);
}

[b-px5mgvyf8q] .dashboard-error--warn {
    background: #fffbeb;
    border-color: var(--color-degraded, #f59e0b);
    color: #92400e;
}
/* /Components/Pages/Schedules/SchedulesList.razor.rz.scp.css */
.sched-list-shell[b-hxnxjx4ar5] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.sched-toolbar[b-hxnxjx4ar5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
}

.sched-search[b-hxnxjx4ar5] {
    max-width: 22rem;
    flex: 1;
}

.sched-toolbar-right[b-hxnxjx4ar5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sched-result-count[b-hxnxjx4ar5] {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}

.sched-tz-note[b-hxnxjx4ar5] {
    margin: -0.25rem 0 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary, #64748b);
}

.sched-status[b-hxnxjx4ar5] {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-secondary, #64748b);
}

.sched-issue-banner[b-hxnxjx4ar5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius, 8px);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.sched-issue-clear[b-hxnxjx4ar5] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-brand, #074684);
    font-weight: 600;
    cursor: pointer;
}

/* ── Virtualized grid "table" ───────────────────────────────────────────── */

.sched-grid[b-hxnxjx4ar5] {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
    background: var(--color-surface, #fff);
    overflow: hidden;
    font-size: 0.9rem;
}

.sched-grid-row[b-hxnxjx4ar5] {
    display: grid;
    grid-template-columns:
        minmax(180px, 2fr) 1fr 1fr 1.4fr 1.3fr 1.3fr 1.1fr 1.5fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}

.sched-grid-head[b-hxnxjx4ar5] {
    height: 40px;
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-raised, #f8fafc);
}

/* Scroll container so <Virtualize> only renders the visible rows. */
.sched-grid-body[b-hxnxjx4ar5] {
    max-height: calc(100vh - 360px);
    min-height: 240px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.sched-grid-data[b-hxnxjx4ar5] {
    height: 46px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border, #eef2f6);
    transition: background 0.1s ease;
}

.sched-grid-data:hover[b-hxnxjx4ar5],
.sched-grid-data:focus-visible[b-hxnxjx4ar5] {
    background: #f1f5fb;
    outline: none;
}

.sched-cell[b-hxnxjx4ar5] {
    color: var(--color-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sched-cell--name[b-hxnxjx4ar5] { font-weight: 600; }

.sched-cell--time[b-hxnxjx4ar5] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #475569);
}

.sched-cell--badges[b-hxnxjx4ar5] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    overflow: visible;
}

.badge-waiver[b-hxnxjx4ar5] {
    background: #cffafe;
    color: #0e7490;
}
/* /Components/Pages/Schedules/WaiversDashboard.razor.rz.scp.css */
.sched-list-shell[b-rzqepkkov5] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.wv-filterbar[b-rzqepkkov5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
    margin: 1.25rem 0 1rem;
}

.wv-filter[b-rzqepkkov5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wv-filter label[b-rzqepkkov5],
.wv-filter-label[b-rzqepkkov5] {
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.wv-filter .form-input[b-rzqepkkov5] {
    min-width: 11rem;
}

.wv-pills[b-rzqepkkov5] {
    display: inline-flex;
    gap: 0.4rem;
}

.wv-pill[b-rzqepkkov5] {
    appearance: none;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.wv-pill:hover[b-rzqepkkov5] {
    border-color: var(--color-brand-teal, #0ea5c6);
    color: var(--color-brand, #074684);
}

.wv-pill--on[b-rzqepkkov5] {
    background: var(--color-brand, #074684);
    border-color: var(--color-brand, #074684);
    color: #fff;
}

.wv-optional[b-rzqepkkov5] {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary, #94a3b8);
    font-style: italic;
}

/* ── Toolbar + table (scoped copy) ──────────────────────────────────────── */

.sched-toolbar[b-rzqepkkov5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 1rem;
}

.sched-search[b-rzqepkkov5] { max-width: 24rem; flex: 1; }

.sched-result-count[b-rzqepkkov5] {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}

.sched-status[b-rzqepkkov5] {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-text-secondary, #64748b);
}

.sched-table-wrap[b-rzqepkkov5] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
    background: var(--color-surface, #fff);
}

.sched-table[b-rzqepkkov5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sched-table thead th[b-rzqepkkov5] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-raised, #f8fafc);
}

.sched-table tbody tr[b-rzqepkkov5] {
    border-bottom: 1px solid var(--color-border, #eef2f6);
}

.sched-table td[b-rzqepkkov5] {
    padding: 0.7rem 1rem;
    color: var(--color-text-primary, #1e293b);
    vertical-align: middle;
}

.sched-td-name[b-rzqepkkov5] { font-weight: 600; }

.sched-td-time[b-rzqepkkov5] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-secondary, #475569);
}

.badge-waiver[b-rzqepkkov5] {
    background: #cffafe;
    color: #0e7490;
}
/* /Components/Pages/SoftwareUpdates.razor.rz.scp.css */
/* Software updates page — extends the settings hub vocabulary (settings-section,
   settings-grid, settings-aws-badge) with the few pieces it needs of its own. */

.upd-header-actions[b-mk7d4sszsq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.upd-message[b-mk7d4sszsq] {
    margin: 0 0 1rem 0;
    color: var(--color-text-muted, #5b6472);
    font-size: 0.9rem;
}

.upd-muted[b-mk7d4sszsq] {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.85rem;
}

.upd-mismatch[b-mk7d4sszsq] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: #fdf3e0;
    border: 1px solid #f3d9a4;
    color: #7c4a03;
    font-size: 0.85rem;
}

.upd-result-message[b-mk7d4sszsq] {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text, #1f2937);
}

.upd-pending[b-mk7d4sszsq] {
    margin-top: 1rem;
}

/* Badge modifiers layered on .settings-aws-badge (defined globally in app.css). */
.settings-aws-badge.upd-badge--attention[b-mk7d4sszsq] {
    background: #fdecc8;
    color: #7c4a03;
    border: 1px solid #f3cf8b;
}

.settings-aws-badge.upd-badge--failed[b-mk7d4sszsq] {
    background: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f5b5b5;
}

.upd-notes[b-mk7d4sszsq] {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: var(--color-surface-muted, #f9fafb);
}

.upd-notes-title[b-mk7d4sszsq] {
    margin: 0 0 0.6rem 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.upd-notes-list[b-mk7d4sszsq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.upd-notes-head[b-mk7d4sszsq] {
    font-size: 0.9rem;
}

.upd-notes-summary[b-mk7d4sszsq] {
    margin: 0.2rem 0 0 0;
    font-size: 0.88rem;
}

.upd-notes-lines[b-mk7d4sszsq] {
    margin: 0.35rem 0 0 1.1rem;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #4b5563);
}

.upd-actions[b-mk7d4sszsq] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.upd-source[b-mk7d4sszsq] {
    margin-top: 0.6rem;
}

/* The running build in the release history — a quiet accent rail, not a highlight. */
.upd-notes-item--running[b-mk7d4sszsq] {
    border-left: 3px solid var(--color-success, #16a34a);
    padding-left: 0.6rem;
}

.upd-notes-badge[b-mk7d4sszsq] {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.upd-notes-more[b-mk7d4sszsq] {
    margin-top: 0.6rem;
}
/* /Components/Pages/Taxonomy/Classifications.razor.rz.scp.css */
/*  Taxonomy TX1 (#801, decision T2): /classifications is a redirect into the chosen document
    type's Tags tab — only the picker's own chrome remains. Tokens only. */

.cls-shell[b-ok3s1k7ft7] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cls-picker[b-ok3s1k7ft7] {
    max-width: 28rem;
}

.cls-doctype-select[b-ok3s1k7ft7] {
    width: 100%;
}

.cls-muted[b-ok3s1k7ft7] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.cls-state[b-ok3s1k7ft7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.cls-state--error[b-ok3s1k7ft7] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.cls-state p[b-ok3s1k7ft7] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Taxonomy/Containers.razor.rz.scp.css */
/*  Containers (C1, #379). One page, two panes: the tree (mirrors
    DocumentGroups.razor's list pane) and the inline detail editor (mirrors
    FamilyDetail.razor's / DocumentGroups.razor's own shell). Tokens only. */

.ct-shell[b-2b6sf5yli4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-title[b-2b6sf5yli4] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-2b6sf5yli4] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.ct-new-btn[b-2b6sf5yli4] {
    white-space: nowrap;
}

/* ── Tree: loading / error / empty ─────────────────────────────────────── */

.ct-skeleton[b-2b6sf5yli4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ct-skel[b-2b6sf5yli4] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: ct-shimmer-b-2b6sf5yli4 1.4s ease infinite;
}

.ct-skel--row[b-2b6sf5yli4] {
    height: 2.5rem;
}

@keyframes ct-shimmer-b-2b6sf5yli4 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-skel[b-2b6sf5yli4] { animation: none; }
}

.ct-state[b-2b6sf5yli4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.ct-state--error[b-2b6sf5yli4] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.ct-state-title[b-2b6sf5yli4] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ct-state-body[b-2b6sf5yli4] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.ct-state-actions[b-2b6sf5yli4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ct-empty[b-2b6sf5yli4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.ct-empty p[b-2b6sf5yli4] {
    margin: 0;
    font-size: 1rem;
}

/* ── Tree ───────────────────────────────────────────────────────────────── */
/* The root <ul> only; everything from .gr-tree-node down is
   GlobalRoleLocationTree's own scoped stylesheet (G2, #362) — reused here
   rather than duplicated, the same way GlobalRoles.razor's own .gr-tree does. */

.ct-tree[b-2b6sf5yli4] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ct-picker-tree[b-2b6sf5yli4] {
    border: none;
    padding: 0;
    background: none;
    max-height: 22rem;
    overflow-y: auto;
}

/* ── Entity scoping + filter (TX5, #805) ───────────────────────────────── */

.ct-scope-row[b-2b6sf5yli4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.875rem;
}

.ct-scope-row .form-field[b-2b6sf5yli4] {
    flex: 1 1 14rem;
    min-width: 12rem;
    margin: 0;
}

/* ── Tree node badge + lock glyph (TX5, #805) ──────────────────────────── */
/* Rendered via GlobalRoleLocationTree's NodeBadge render fragment, whose markup is declared in
   THIS file's .razor, not the shared tree component's — so the styling belongs here too. */

.ct-tree-badge[b-2b6sf5yli4] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.ct-tree-lock[b-2b6sf5yli4] {
    margin-left: 0.375rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

/* ── Detail ─────────────────────────────────────────────────────────────── */

.ct-back[b-2b6sf5yli4] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.ct-back:hover[b-2b6sf5yli4] {
    color: var(--color-brand-teal);
}

.ct-status[b-2b6sf5yli4] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.ct-header h1[b-2b6sf5yli4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ct-readonly-pill[b-2b6sf5yli4] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

/* ── Breadcrumb (TX5, #805) ────────────────────────────────────────────── */

.ct-breadcrumb[b-2b6sf5yli4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.ct-breadcrumb-sep[b-2b6sf5yli4] {
    color: var(--color-text-muted);
}

.ct-breadcrumb-item--current[b-2b6sf5yli4] {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ── Security — "no grants of its own" (TX5, #805) ─────────────────────── */

.ct-security-empty[b-2b6sf5yli4] {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ct-facts[b-2b6sf5yli4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.ct-fact--wide[b-2b6sf5yli4] {
    grid-column: 1 / -1;
}

.ct-fact dt[b-2b6sf5yli4] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.ct-fact dd[b-2b6sf5yli4] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.ct-parent-row[b-2b6sf5yli4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ct-parent-value[b-2b6sf5yli4] {
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* ── Direct children ────────────────────────────────────────────────────── */

.ct-muted[b-2b6sf5yli4] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.ct-children-list[b-2b6sf5yli4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ct-children-item[b-2b6sf5yli4] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.ct-danger[b-2b6sf5yli4] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.ct-danger-title[b-2b6sf5yli4] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.ct-danger-lede[b-2b6sf5yli4] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* Taxonomy TX7 (#807): the access explainer under the Security matrix. */
.ct-explainer[b-2b6sf5yli4] {
    margin-top: 1rem;
}
/* /Components/Pages/Taxonomy/DocumentGroups.razor.rz.scp.css */
/*  Document Groups (T1, #375). One page, two panes: the list (mirrors
    Families.razor's chrome) and the inline detail editor (mirrors
    FamilyDetail.razor's shell) — both live here because this area has one
    route, not two. Tokens only. */

.dg-shell[b-wibf52ahww] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-title[b-wibf52ahww] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-wibf52ahww] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.dg-new-btn[b-wibf52ahww] {
    white-space: nowrap;
}

/* ── List: loading / error / empty ──────────────────────────────────────── */

.dg-skeleton[b-wibf52ahww] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dg-skel[b-wibf52ahww] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: dg-shimmer-b-wibf52ahww 1.4s ease infinite;
}

.dg-skel--row[b-wibf52ahww] {
    height: 2.5rem;
}

@keyframes dg-shimmer-b-wibf52ahww {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .dg-skel[b-wibf52ahww] { animation: none; }
}

.dg-state[b-wibf52ahww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.dg-state--error[b-wibf52ahww] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.dg-state-title[b-wibf52ahww] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dg-state-body[b-wibf52ahww] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.dg-state-actions[b-wibf52ahww] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.dg-empty[b-wibf52ahww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.dg-empty p[b-wibf52ahww] {
    margin: 0;
    font-size: 1rem;
}

[b-wibf52ahww] .dg-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-wibf52ahww] .dg-link:hover {
    text-decoration: underline;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.dg-back[b-wibf52ahww] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.dg-back:hover[b-wibf52ahww] {
    color: var(--color-brand-teal);
}

.dg-status[b-wibf52ahww] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.dg-header h1[b-wibf52ahww] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.dg-readonly-pill[b-wibf52ahww] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.dg-textarea[b-wibf52ahww] {
    resize: vertical;
    min-height: 4.5rem;
}

.dg-facts[b-wibf52ahww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.dg-fact--wide[b-wibf52ahww] {
    grid-column: 1 / -1;
}

.dg-fact dt[b-wibf52ahww] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.dg-fact dd[b-wibf52ahww] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* ── Linked document types ─────────────────────────────────────────────── */

.dg-links-lede[b-wibf52ahww] {
    margin: 0 0 0.875rem;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.dg-muted[b-wibf52ahww] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.dg-linked-list[b-wibf52ahww] {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dg-linked-item[b-wibf52ahww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
}

.dg-unlink-btn[b-wibf52ahww] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.dg-link-add[b-wibf52ahww] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.dg-link-add select[b-wibf52ahww] {
    min-width: 16rem;
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.dg-danger[b-wibf52ahww] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.dg-danger-title[b-wibf52ahww] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.dg-danger-lede[b-wibf52ahww] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Taxonomy/Frequencies.razor.rz.scp.css */
/*  Frequencies (P2, #378). One page, two panes: the list and the inline
    detail editor, which itself has two independent saves — the header and
    the date rows, the latter staged locally in a plain table (one level
    deep, unlike Packs' own nested drawer). Tokens only, the same shapes
    Packs.razor.css already established for this page family. */

.fr-shell[b-psjwt6b70z] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-title[b-psjwt6b70z] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-psjwt6b70z] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.fr-new-btn[b-psjwt6b70z] {
    white-space: nowrap;
}

/* ── List: loading / error / empty ──────────────────────────────────────── */

.fr-skeleton[b-psjwt6b70z] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fr-skel[b-psjwt6b70z] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: fr-shimmer-b-psjwt6b70z 1.4s ease infinite;
}

.fr-skel--row[b-psjwt6b70z] {
    height: 2.5rem;
}

@keyframes fr-shimmer-b-psjwt6b70z {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fr-skel[b-psjwt6b70z] { animation: none; }
}

.fr-state[b-psjwt6b70z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.fr-state--error[b-psjwt6b70z] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fr-state-title[b-psjwt6b70z] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fr-state-body[b-psjwt6b70z] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.fr-state-actions[b-psjwt6b70z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.fr-empty[b-psjwt6b70z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.fr-empty p[b-psjwt6b70z] {
    margin: 0;
    font-size: 1rem;
}

[b-psjwt6b70z] .fr-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-psjwt6b70z] .fr-link:hover {
    text-decoration: underline;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.fr-back[b-psjwt6b70z] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.fr-back:hover[b-psjwt6b70z] {
    color: var(--color-brand-teal);
}

.fr-status[b-psjwt6b70z] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.fr-header h1[b-psjwt6b70z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.fr-readonly-pill[b-psjwt6b70z] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.fr-textarea[b-psjwt6b70z] {
    resize: vertical;
    min-height: 3.5rem;
}

.fr-section-spaced[b-psjwt6b70z] {
    margin-top: 1.5rem;
}

.fr-facts[b-psjwt6b70z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.fr-fact--wide[b-psjwt6b70z] {
    grid-column: 1 / -1;
}

.fr-fact dt[b-psjwt6b70z] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.fr-fact dd[b-psjwt6b70z] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.fr-cron[b-psjwt6b70z] {
    margin-left: 0.5rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-raised);
    font-family: var(--font-mono, monospace);
    font-size: 0.8125rem;
}

.fr-cron-preview[b-psjwt6b70z] {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
}

.fr-cron-en[b-psjwt6b70z] {
    color: var(--color-text-secondary);
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.fr-danger[b-psjwt6b70z] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.fr-danger-title[b-psjwt6b70z] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.fr-danger-lede[b-psjwt6b70z] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* ── Dates ──────────────────────────────────────────────────────────────── */

.fr-dates-head[b-psjwt6b70z] {
    margin-bottom: 0.875rem;
}

.fr-dates-lede[b-psjwt6b70z] {
    margin: 0.375rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.fr-muted[b-psjwt6b70z] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.fr-date-grid[b-psjwt6b70z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fr-date-grid th[b-psjwt6b70z],
.fr-date-grid td[b-psjwt6b70z] {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.fr-date-grid thead th[b-psjwt6b70z] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.fr-date-grid input[type="date"][b-psjwt6b70z] {
    min-width: 9.5rem;
}

.fr-icon-btn[b-psjwt6b70z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fr-icon-btn:hover:not(:disabled)[b-psjwt6b70z] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.fr-icon-btn:disabled[b-psjwt6b70z] {
    opacity: 0.4;
    cursor: not-allowed;
}

.fr-icon-btn--danger:hover:not(:disabled)[b-psjwt6b70z] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: var(--color-down);
}

.fr-add[b-psjwt6b70z] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}
/* /Components/Pages/Taxonomy/GroupTags.razor.rz.scp.css */
/*  Group Tags (T3, #374). One page, two panes: the list (mirrors
    DocumentGroups.razor's chrome) and the inline detail editor, which itself
    has two independent saves — the header and the tag setups, the latter
    staged locally and opened per-row in a Drawer. Tokens only. */

.gt-shell[b-0aukjla4k2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-title[b-0aukjla4k2] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-0aukjla4k2] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.gt-new-btn[b-0aukjla4k2] {
    white-space: nowrap;
}

/* ── List: loading / error / empty ──────────────────────────────────────── */

.gt-skeleton[b-0aukjla4k2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gt-skel[b-0aukjla4k2] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: gt-shimmer-b-0aukjla4k2 1.4s ease infinite;
}

.gt-skel--row[b-0aukjla4k2] {
    height: 2.5rem;
}

@keyframes gt-shimmer-b-0aukjla4k2 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .gt-skel[b-0aukjla4k2] { animation: none; }
}

.gt-state[b-0aukjla4k2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.gt-state--error[b-0aukjla4k2] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.gt-state-title[b-0aukjla4k2] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gt-state-body[b-0aukjla4k2] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.gt-state-actions[b-0aukjla4k2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gt-empty[b-0aukjla4k2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.gt-empty p[b-0aukjla4k2] {
    margin: 0;
    font-size: 1rem;
}

[b-0aukjla4k2] .gt-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-0aukjla4k2] .gt-link:hover {
    text-decoration: underline;
}

[b-0aukjla4k2] .gt-link--button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.gt-back[b-0aukjla4k2] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.gt-back:hover[b-0aukjla4k2] {
    color: var(--color-brand-teal);
}

.gt-status[b-0aukjla4k2] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.gt-header h1[b-0aukjla4k2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gt-readonly-pill[b-0aukjla4k2] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.gt-textarea[b-0aukjla4k2] {
    resize: vertical;
    min-height: 4.5rem;
}

.gt-facts[b-0aukjla4k2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.gt-fact--wide[b-0aukjla4k2] {
    grid-column: 1 / -1;
}

.gt-fact dt[b-0aukjla4k2] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.gt-fact dd[b-0aukjla4k2] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.gt-danger[b-0aukjla4k2] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.gt-danger-title[b-0aukjla4k2] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.gt-danger-lede[b-0aukjla4k2] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* ── Tag setups ─────────────────────────────────────────────────────────── */

.gt-setups-head[b-0aukjla4k2] {
    margin-bottom: 0.875rem;
}

.gt-setups-lede[b-0aukjla4k2] {
    margin: 0.375rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.gt-muted[b-0aukjla4k2] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

[b-0aukjla4k2] .gt-cell-order {
    width: 2.5rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.gt-row-actions[b-0aukjla4k2] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.gt-icon-btn[b-0aukjla4k2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.gt-icon-btn:hover:not(:disabled)[b-0aukjla4k2] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.gt-icon-btn:disabled[b-0aukjla4k2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.gt-icon-btn--danger:hover:not(:disabled)[b-0aukjla4k2] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: var(--color-down);
}

.gt-add[b-0aukjla4k2] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}

.gt-add-select[b-0aukjla4k2] {
    min-width: 16rem;
}

/* The per-tag-setup drawer body is the shared TagSetupEditor (Taxonomy TX1, #801) — its rules live in
   Features/Taxonomy/TagSetupEditor.razor.css. */
/* /Components/Pages/Taxonomy/Packs.razor.rz.scp.css */
/*  Packs (P1, #377). One page, two panes: the list (mirrors GroupTags.razor's
    chrome) and the inline detail editor, which itself has two independent
    saves — the header and the pack types, the latter staged locally and
    opened per-row in a Drawer, each with its own inline per-entity windows
    table. Tokens only. */

.pk-shell[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-title[b-39n120ou46] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-39n120ou46] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.pk-new-btn[b-39n120ou46] {
    white-space: nowrap;
}

/* ── List: loading / error / empty ──────────────────────────────────────── */

.pk-skeleton[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pk-skel[b-39n120ou46] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: pk-shimmer-b-39n120ou46 1.4s ease infinite;
}

.pk-skel--row[b-39n120ou46] {
    height: 2.5rem;
}

@keyframes pk-shimmer-b-39n120ou46 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .pk-skel[b-39n120ou46] { animation: none; }
}

.pk-state[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.pk-state--error[b-39n120ou46] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.pk-state-title[b-39n120ou46] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pk-state-body[b-39n120ou46] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.pk-state-actions[b-39n120ou46] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pk-empty[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.pk-empty p[b-39n120ou46] {
    margin: 0;
    font-size: 1rem;
}

[b-39n120ou46] .pk-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-39n120ou46] .pk-link:hover {
    text-decoration: underline;
}

[b-39n120ou46] .pk-link--button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.pk-back[b-39n120ou46] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.pk-back:hover[b-39n120ou46] {
    color: var(--color-brand-teal);
}

.pk-status[b-39n120ou46] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.pk-header h1[b-39n120ou46] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pk-readonly-pill[b-39n120ou46] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.pk-textarea[b-39n120ou46] {
    resize: vertical;
    min-height: 3.5rem;
}

.pk-facts[b-39n120ou46] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.pk-fact--wide[b-39n120ou46] {
    grid-column: 1 / -1;
}

.pk-fact dt[b-39n120ou46] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.pk-fact dd[b-39n120ou46] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.pk-waiver-badge[b-39n120ou46] {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Danger zone ────────────────────────────────────────────────────────── */

.pk-danger[b-39n120ou46] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.pk-danger-title[b-39n120ou46] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.pk-danger-lede[b-39n120ou46] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* ── Pack types ─────────────────────────────────────────────────────────── */

.pk-types-head[b-39n120ou46] {
    margin-bottom: 0.875rem;
}

.pk-types-lede[b-39n120ou46] {
    margin: 0.375rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.pk-muted[b-39n120ou46] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.pk-row-actions[b-39n120ou46] {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.pk-icon-btn[b-39n120ou46] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.pk-icon-btn:hover:not(:disabled)[b-39n120ou46] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.pk-icon-btn:disabled[b-39n120ou46] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pk-icon-btn--danger:hover:not(:disabled)[b-39n120ou46] {
    border-color: color-mix(in srgb, var(--color-down) 45%, white);
    color: var(--color-down);
}

.pk-add[b-39n120ou46] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}

.pk-add-select[b-39n120ou46] {
    min-width: 16rem;
}

/* ── Drawer: per-pack-type editor ──────────────────────────────────────── */

.pk-drawer[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pk-drawer-section-title[b-39n120ou46] {
    margin: 0 0 0.75rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pk-drawer-hint[b-39n120ou46] {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.pk-detail-grid[b-39n120ou46] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pk-detail-grid th[b-39n120ou46],
.pk-detail-grid td[b-39n120ou46] {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.pk-detail-grid thead th[b-39n120ou46] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pk-detail-grid tbody th[b-39n120ou46] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.pk-detail-grid input[type="date"][b-39n120ou46] {
    min-width: 9.5rem;
}

.pk-remove-type[b-39n120ou46] {
    align-self: flex-start;
}

/* ── Taxonomy TX4 (#804): tabs, waiver pill, criteria, Summary matrix ────── */

.pk-panel[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pk-panel:focus-visible[b-39n120ou46] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.pk-waiver-pill[b-39n120ou46] {
    padding: 0.125rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-brand-teal) 45%, white);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-brand);
}

.pk-drawer-lede[b-39n120ou46] {
    margin: -0.25rem 0 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

/* Criteria: "<tag chip> = value" in the table and the matrix */

[b-39n120ou46] .pk-criteria {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

[b-39n120ou46] .pk-criteria-static {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

[b-39n120ou46] .pk-criteria-op {
    color: var(--color-text-muted);
}

[b-39n120ou46] .pk-criteria-value {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.pk-muted-inline[b-39n120ou46] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Summary head: lede on the left, as-of + quick filters on the right */

.pk-summary-head[b-39n120ou46] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pk-summary-lede[b-39n120ou46] {
    flex: 1 1 28rem;
    max-width: 72ch;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.pk-summary-controls[b-39n120ou46] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.pk-asof[b-39n120ou46] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pk-asof-input[b-39n120ou46] {
    min-width: 10.5rem;
}

.pk-filters[b-39n120ou46] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.125rem;
}

.pk-filter[b-39n120ou46] {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.pk-filter:hover[b-39n120ou46] {
    border-color: var(--color-brand-teal);
    color: var(--color-brand);
}

.pk-filter--on[b-39n120ou46] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: white;
}

.pk-filter--on:hover[b-39n120ou46] {
    color: white;
}

.pk-filter:focus-visible[b-39n120ou46],
.pk-filter-clear:focus-visible[b-39n120ou46] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.pk-filter-clear[b-39n120ou46] {
    margin-left: 0.25rem;
    border: none;
    background: none;
    padding: 0.375rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.pk-filter-clear:hover[b-39n120ou46] {
    color: var(--color-brand);
    text-decoration: underline;
}

/* The matrix itself */

.pk-matrix-scroll[b-39n120ou46] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.pk-matrix[b-39n120ou46] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pk-matrix th[b-39n120ou46],
.pk-matrix td[b-39n120ou46] {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.pk-matrix thead th[b-39n120ou46] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-surface-raised);
}

.pk-matrix tbody tr:last-child th[b-39n120ou46],
.pk-matrix tbody tr:last-child td[b-39n120ou46] {
    border-bottom: none;
}

.pk-matrix .pk-matrix-center[b-39n120ou46] {
    text-align: center;
}

.pk-matrix-line th[b-39n120ou46] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.pk-matrix-window td[b-39n120ou46] {
    padding-left: 2.25rem;
    background: color-mix(in srgb, var(--color-surface-raised) 60%, white);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.pk-matrix-window--none td[b-39n120ou46] {
    font-style: italic;
    color: var(--color-text-muted);
}

.pk-matrix-window--current td[b-39n120ou46] {
    box-shadow: inset 3px 0 0 var(--color-healthy);
}

.pk-matrix-window--future td[b-39n120ou46] {
    box-shadow: inset 3px 0 0 var(--color-brand-teal);
}

.pk-matrix-window--past td[b-39n120ou46] {
    box-shadow: inset 3px 0 0 var(--color-unknown);
}

.pk-matrix-window--off td[b-39n120ou46] {
    box-shadow: inset 3px 0 0 var(--color-border);
}

.pk-window[b-39n120ou46] {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(12rem, 1fr) auto minmax(14rem, 1.6fr);
    align-items: center;
    gap: 0.5rem 1rem;
}

@media (max-width: 1100px) {
    .pk-window[b-39n120ou46] {
        grid-template-columns: 1fr 1fr;
    }
}

.pk-window-entity[b-39n120ou46] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pk-window-kind[b-39n120ou46] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.pk-window-name[b-39n120ou46] {
    color: var(--color-text-primary);
}

.pk-window-dates[b-39n120ou46] {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.pk-window-flags[b-39n120ou46] {
    display: inline-flex;
    gap: 0.375rem;
}

.pk-window-status[b-39n120ou46] {
    color: var(--color-text-secondary);
}

.pk-chip[b-39n120ou46] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    white-space: nowrap;
}

.pk-chip--on[b-39n120ou46] {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, white);
    color: color-mix(in srgb, var(--color-healthy) 70%, black);
}

.pk-chip--off[b-39n120ou46] {
    color: var(--color-text-muted);
}

.pk-chip--current[b-39n120ou46] {
    border-color: color-mix(in srgb, var(--color-healthy) 45%, white);
    background: color-mix(in srgb, var(--color-healthy) 10%, white);
    color: color-mix(in srgb, var(--color-healthy) 70%, black);
}

.pk-chip--future[b-39n120ou46] {
    border-color: color-mix(in srgb, var(--color-brand-teal) 45%, white);
    background: color-mix(in srgb, var(--color-brand-teal) 10%, white);
    color: var(--color-brand);
}

.pk-summary-foot[b-39n120ou46] {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Taxonomy/TagTypes.razor.rz.scp.css */
/*  Tag Types (T2, #372). One page, two panes, in the shape DocumentGroups.razor.css
    (T1) already established. Tokens only. */

.tt-shell[b-z3lcjajq94] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tt-new-btn[b-z3lcjajq94] {
    white-space: nowrap;
}

/* ── List: loading / error / empty ──────────────────────────────────────── */

.tt-skeleton[b-z3lcjajq94] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tt-skel[b-z3lcjajq94] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: tt-shimmer-b-z3lcjajq94 1.4s ease infinite;
}

.tt-skel--row[b-z3lcjajq94] {
    height: 2.5rem;
}

@keyframes tt-shimmer-b-z3lcjajq94 {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-skel[b-z3lcjajq94] { animation: none; }
}

.tt-state[b-z3lcjajq94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.tt-state--error[b-z3lcjajq94] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.tt-state-title[b-z3lcjajq94] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tt-state-body[b-z3lcjajq94] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.tt-state-actions[b-z3lcjajq94] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tt-empty[b-z3lcjajq94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
}

.tt-empty p[b-z3lcjajq94] {
    margin: 0;
    font-size: 1rem;
}

[b-z3lcjajq94] .tt-link {
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}

[b-z3lcjajq94] .tt-link:hover {
    text-decoration: underline;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.tt-back[b-z3lcjajq94] {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.tt-back:hover[b-z3lcjajq94] {
    color: var(--color-brand-teal);
}

.tt-status[b-z3lcjajq94] {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
}

.tt-header h1[b-z3lcjajq94] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tt-readonly-pill[b-z3lcjajq94] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.tt-textarea[b-z3lcjajq94] {
    resize: vertical;
    min-height: 3.5rem;
}

.tt-facts[b-z3lcjajq94] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.5rem;
    margin: 0;
}

.tt-fact--wide[b-z3lcjajq94] {
    grid-column: 1 / -1;
}

.tt-fact dt[b-z3lcjajq94] {
    font-family: var(--font-subtitle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
}

.tt-fact dd[b-z3lcjajq94] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.tt-hint[b-z3lcjajq94] {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ── Section ledes, read-only fact notes (TX3, #803) ─────────────────── */

.tt-section-lede[b-z3lcjajq94] {
    margin: 0 0 0.875rem;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.tt-section-lede code[b-z3lcjajq94],
.tt-fact dd code[b-z3lcjajq94] {
    font-size: 0.8125rem;
}

.tt-fact-note[b-z3lcjajq94] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.tt-rule-list[b-z3lcjajq94] {
    margin: 0;
    padding: 0 0 0 1.1rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ── Placements (TX3, #803; was "Linked document types") ───────────────── */

.tt-links-lede[b-z3lcjajq94] {
    margin: 0 0 0.875rem;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.tt-muted[b-z3lcjajq94] {
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.tt-linked-list[b-z3lcjajq94] {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tt-linked-item[b-z3lcjajq94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
}

.tt-placement-main[b-z3lcjajq94] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    min-width: 0;
}

.tt-placement-facts[b-z3lcjajq94] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
}

.tt-placement-facts > div[b-z3lcjajq94] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.tt-placement-facts dt[b-z3lcjajq94] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tt-placement-facts dd[b-z3lcjajq94] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.tt-placement-actions[b-z3lcjajq94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.tt-edit-placement[b-z3lcjajq94] {
    font-size: 0.8125rem;
}

.tt-pill[b-z3lcjajq94] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.tt-pill--muted[b-z3lcjajq94] {
    border-style: dashed;
    color: var(--color-text-muted);
    cursor: help;
}

.tt-placements-failed[b-z3lcjajq94] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tt-retry-btn[b-z3lcjajq94] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.65rem;
}

.tt-unlink-btn[b-z3lcjajq94] {
    font-size: 0.8125rem;
    padding: 0.3rem 0.65rem;
    white-space: nowrap;
}

.tt-link-add[b-z3lcjajq94] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

.tt-link-add select[b-z3lcjajq94] {
    min-width: 16rem;
}

/* ── Danger zone (always disabled — R4, DMXAPI-357) ────────────────────── */

.tt-danger[b-z3lcjajq94] {
    margin-top: 0.5rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
}

.tt-danger-title[b-z3lcjajq94] {
    margin: 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tt-danger-lede[b-z3lcjajq94] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/Taxonomy/TaxonomyOverview.razor.rz.scp.css */
/*  Taxonomy overview (TX8, #808). Entry cards, a health list grouped by finding
    code, and a recent-changes list. Tokens only, the same shapes Frequencies.razor.css
    and Packs.razor.css already established for this page family. */

.tov-shell[b-hp4cdli5sk] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.tov-status[b-hp4cdli5sk] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.tov-partial[b-hp4cdli5sk] {
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--color-degraded) 35%, white);
    border-radius: calc(var(--radius) * 0.75);
    background: color-mix(in srgb, var(--color-degraded) 8%, white);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* ── Loading / error states ────────────────────────────────────────────── */

.tov-skeleton[b-hp4cdli5sk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.tov-skel[b-hp4cdli5sk] {
    border-radius: var(--radius);
    background: linear-gradient(
        90deg,
        var(--color-surface-raised) 25%,
        color-mix(in srgb, var(--color-surface-raised) 60%, white) 37%,
        var(--color-surface-raised) 63%);
    background-size: 400% 100%;
    animation: tov-shimmer-b-hp4cdli5sk 1.4s ease infinite;
}

.tov-skel--card[b-hp4cdli5sk] { height: 5.5rem; }

@keyframes tov-shimmer-b-hp4cdli5sk {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .tov-skel[b-hp4cdli5sk] { animation: none; }
}

.tov-state[b-hp4cdli5sk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.tov-state--error[b-hp4cdli5sk] {
    border-color: color-mix(in srgb, var(--color-down) 35%, white);
    background: color-mix(in srgb, var(--color-down) 5%, white);
}

.tov-state-title[b-hp4cdli5sk] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tov-state-body[b-hp4cdli5sk] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── Entry cards ────────────────────────────────────────────────────────── */

.tov-cards[b-hp4cdli5sk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.tov-card[b-hp4cdli5sk] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
}

.tov-card-top[b-hp4cdli5sk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.tov-card-icon[b-hp4cdli5sk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    color: var(--color-brand);
}

.tov-card-body[b-hp4cdli5sk] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.tov-card-name[b-hp4cdli5sk] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tov-card-count[b-hp4cdli5sk] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.tov-card-flag[b-hp4cdli5sk] {
    align-self: flex-start;
    gap: 0.25rem;
    white-space: nowrap;
}

/* ── Health ─────────────────────────────────────────────────────────────── */

.tov-empty[b-hp4cdli5sk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.125rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.tov-empty--good[b-hp4cdli5sk] {
    color: color-mix(in srgb, var(--color-healthy) 70%, black);
    border-color: color-mix(in srgb, var(--color-healthy) 35%, white);
    background: color-mix(in srgb, var(--color-healthy) 6%, white);
}

.tov-finding-groups[b-hp4cdli5sk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tov-finding-group-title[b-hp4cdli5sk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.125rem;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.tov-finding-group-count[b-hp4cdli5sk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.tov-finding-group-explain[b-hp4cdli5sk] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.tov-finding-rows[b-hp4cdli5sk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tov-finding-row[b-hp4cdli5sk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.tov-finding-message[b-hp4cdli5sk] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* ── Recent changes ─────────────────────────────────────────────────────── */

.tov-recent-rows[b-hp4cdli5sk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.tov-recent-row[b-hp4cdli5sk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.tov-recent-row:last-child[b-hp4cdli5sk] {
    border-bottom: none;
}

.tov-recent-when[b-hp4cdli5sk] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tov-recent-actor[b-hp4cdli5sk] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.tov-recent-action[b-hp4cdli5sk] {
    color: var(--color-text-secondary);
}
/* /Components/Pages/UploadServiceDetail.razor.rz.scp.css */
.usd-shell[b-1d0f7ci2gf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.usd-back[b-1d0f7ci2gf] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    text-decoration: none;
    align-self: flex-start;
}

.usd-back:hover[b-1d0f7ci2gf] {
    color: var(--color-brand-teal, #0d9488);
}

.usd-header h1[b-1d0f7ci2gf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.usd-status[b-1d0f7ci2gf] {
    color: var(--color-text-muted, #64748b);
    padding: 0.5rem 0;
}

.usd-status--ok[b-1d0f7ci2gf] {
    color: #166534;
}

/* ── Warnings ───────────────────────────────────────────── */

.usd-warnings[b-1d0f7ci2gf] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: var(--radius, 8px);
    padding: 0.75rem 1rem;
}

.usd-warnings ul[b-1d0f7ci2gf] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #92400e;
    font-size: 0.875rem;
}

/* ── Fact tiles ─────────────────────────────────────────── */

.usd-facts[b-1d0f7ci2gf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.usd-fact[b-1d0f7ci2gf] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    padding: 0.75rem 0.9rem;
}

.usd-fact dt[b-1d0f7ci2gf] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #64748b);
}

.usd-fact dd[b-1d0f7ci2gf] {
    margin: 0.3rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.usd-fact-small[b-1d0f7ci2gf] {
    font-size: 0.9375rem;
}

/* ── Sections / tables ──────────────────────────────────── */

.usd-section-title[b-1d0f7ci2gf] {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}

.usd-table[b-1d0f7ci2gf] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    font-size: 0.875rem;
}

.usd-table th[b-1d0f7ci2gf] {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #64748b);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: #f8fafc;
}

.usd-table td[b-1d0f7ci2gf] {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    vertical-align: top;
}

.usd-table tbody tr:last-child td[b-1d0f7ci2gf] {
    border-bottom: none;
}

.usd-row--disabled[b-1d0f7ci2gf] {
    color: var(--color-text-muted, #94a3b8);
}

.usd-path-title[b-1d0f7ci2gf] {
    font-weight: 600;
}

.usd-path-folder[b-1d0f7ci2gf] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
}

.usd-num[b-1d0f7ci2gf] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.usd-when[b-1d0f7ci2gf] {
    white-space: nowrap;
}

.usd-message[b-1d0f7ci2gf] {
    color: var(--color-text-muted, #475569);
    overflow-wrap: anywhere;
}

/* ── Management surface (A3.1 / A3.2) ───────────────────── */

/*  The client key used to sit in the subtitle in plain text (issue #317). What
    is left is the one fact worth stating: a service with no key cannot
    authenticate at all. */
.usd-nokey[b-1d0f7ci2gf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
    font-size: 0.8125rem;
}

.usd-spin[b-1d0f7ci2gf] {
    animation: usd-spin-b-1d0f7ci2gf 0.9s linear infinite;
}

@keyframes usd-spin-b-1d0f7ci2gf {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .usd-spin[b-1d0f7ci2gf] { animation: none; }
}

.usd-section-head[b-1d0f7ci2gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.usd-section-head .usd-section-title[b-1d0f7ci2gf] {
    margin: 0;
}

.usd-section-note[b-1d0f7ci2gf] {
    margin: 0 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-muted, #64748b);
}

.usd-readonly-pill[b-1d0f7ci2gf] {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-text-muted, #64748b);
}

.usd-add-btn[b-1d0f7ci2gf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    text-decoration: none;
}

.usd-link[b-1d0f7ci2gf] {
    color: var(--color-brand-teal, #0d9488);
    font-weight: 600;
    text-decoration: none;
}

.usd-link:hover[b-1d0f7ci2gf] {
    text-decoration: underline;
}

/*  The fact that a folder is reached with stored credentials, never the value. */
.usd-haspw[b-1d0f7ci2gf] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-muted, #64748b);
}

.usd-dest[b-1d0f7ci2gf] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Client key ─────────────────────────────────────────── */

.usd-key[b-1d0f7ci2gf] {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.usd-key-controls[b-1d0f7ci2gf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}

.usd-rotate[b-1d0f7ci2gf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    margin-top: 1.4rem;
}

.usd-key-error[b-1d0f7ci2gf] {
    margin: 0.75rem 0 0;
    max-width: 80ch;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

/* ── Danger zone ────────────────────────────────────────── */

/*  --color-down and --color-degraded are badge fills; as text on a pale surface
    neither clears 4.5:1, so they are darkened here rather than used raw. Colour
    never carries the meaning on its own either — every one of these is beside a
    word or an icon. */
.usd-danger[b-1d0f7ci2gf] {
    margin-top: 1.75rem;
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius, 8px);
    background: #fef2f2;
}

.usd-danger-title[b-1d0f7ci2gf] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.usd-danger-lede[b-1d0f7ci2gf] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary, #475569);
}

/*  A disabled button cannot be focused, so its reason has to be text on the
    page rather than a tooltip — and it is what aria-describedby points at. */
.usd-delete-why[b-1d0f7ci2gf] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    max-width: 80ch;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #475569);
}

/* ── Multi-select on the Paths table (A9.3) ───────────────────────────────── */

.usd-check-cell[b-1d0f7ci2gf] {
    width: 2.25rem;
    padding-right: 0;
    text-align: center;
    vertical-align: middle;
}

.usd-check-cell input[b-1d0f7ci2gf] {
    margin: 0;
    cursor: pointer;
}

/*  The destination picker inside the confirm dialog. Full width because the
    labels are destination names and a narrow select would truncate the one
    piece of information the choice turns on. */
.usd-repoint[b-1d0f7ci2gf] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.usd-repoint select[b-1d0f7ci2gf] {
    width: 100%;
}

/* Recent problems sits below the MON8 agent-health and activity panels. */
.usd-problems[b-1d0f7ci2gf] {
    margin-top: 1.75rem;
}
/* /Components/Pages/UploadServiceNew.razor.rz.scp.css */
/*  The create page. One column, narrow enough to read, with the key panel given
    the whole width when it appears. Tokens only. */

.usn-shell[b-56ghd1q6xm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 68rem;
}

.usn-back[b-56ghd1q6xm] {
    align-self: flex-start;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
    text-decoration: none;
}

.usn-back:hover[b-56ghd1q6xm] {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.usn-panel[b-56ghd1q6xm] {
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, white);
}

.usn-status[b-56ghd1q6xm],
.usn-empty[b-56ghd1q6xm] {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, white);
    color: var(--color-text-secondary);
}

.usn-empty h2[b-56ghd1q6xm] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.usn-empty p[b-56ghd1q6xm] {
    margin: 0 0 0.5rem;
    max-width: 70ch;
}

.usn-link[b-56ghd1q6xm] {
    color: var(--color-brand-teal);
}

.usn-done[b-56ghd1q6xm] {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, white);
}

.usn-done p[b-56ghd1q6xm] {
    margin: 0 0 1rem;
    max-width: 70ch;
    color: var(--color-text-secondary);
}

.usn-done-actions[b-56ghd1q6xm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.usn-done-actions a[b-56ghd1q6xm] {
    text-decoration: none;
}
/* /Components/Pages/UploadServicePath.razor.rz.scp.css */
/*  The path editor page: one readable column, with the danger zone kept clearly
    apart from the form above it. Tokens only. */

.usp-shell[b-zp2z5aoy5g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 72rem;
}

.usp-back[b-zp2z5aoy5g] {
    align-self: flex-start;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
    text-decoration: none;
}

.usp-back:hover[b-zp2z5aoy5g] {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.usp-header h1[b-zp2z5aoy5g] {
    overflow-wrap: anywhere;
}

.usp-panel[b-zp2z5aoy5g] {
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, white);
}

.usp-status[b-zp2z5aoy5g],
.usp-empty[b-zp2z5aoy5g] {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 0.5rem);
    background: var(--color-surface, white);
    color: var(--color-text-secondary);
}

.usp-empty h2[b-zp2z5aoy5g] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.usp-empty p[b-zp2z5aoy5g] {
    margin: 0 0 0.5rem;
    max-width: 70ch;
}

.usp-link[b-zp2z5aoy5g] {
    color: var(--color-brand-teal);
}

/*  Separated from the form and stated in words rather than signalled only by a
    red button: what survives a delete is the part that surprises people. */
/*  --color-down is a badge fill; as text on a pale surface it does not clear
    4.5:1, so it is darkened here rather than used raw. */
.usp-danger[b-zp2z5aoy5g] {
    padding: 1.125rem 1.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-down) 35%, white);
    border-radius: var(--radius, 0.5rem);
    background: #fef2f2;
}

.usp-danger-title[b-zp2z5aoy5g] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-down) 75%, black);
}

.usp-danger-lede[b-zp2z5aoy5g] {
    margin: 0.5rem 0 1rem;
    max-width: 80ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* /Components/Pages/UploadServiceQueue.razor.rz.scp.css */
/* Page shell only. Everything inside the queue itself is styled by
   UploadQueuePanel, so the tab mount and this page cannot drift apart. */

.usq-shell[b-2yvgx0ei6v] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.usq-back[b-2yvgx0ei6v] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    align-self: flex-start;
}

.usq-back:hover[b-2yvgx0ei6v] {
    color: var(--color-brand-teal);
}
/* /Components/Pages/UploadServices.razor.rz.scp.css */
.us-shell[b-1wgdtfg0u0] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.us-header-actions[b-1wgdtfg0u0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Summary / filter chips ─────────────────────────────── */

.us-summary[b-1wgdtfg0u0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.us-chip[b-1wgdtfg0u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 100px;
    background: var(--color-surface, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #1e293b);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.us-chip:hover[b-1wgdtfg0u0] {
    border-color: var(--color-brand-teal, #0d9488);
}

.us-chip--active[b-1wgdtfg0u0] {
    border-color: var(--color-brand-teal, #0d9488);
    box-shadow: 0 0 0 1px var(--color-brand-teal, #0d9488) inset;
}

.us-chip-count[b-1wgdtfg0u0] {
    display: inline-flex;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 100px;
    font-variant-numeric: tabular-nums;
    background: #f1f5f9;
    color: #475569;
}

.us-chip--offline .us-chip-count[b-1wgdtfg0u0]     { background: #fee2e2; color: #991b1b; }
.us-chip--attention .us-chip-count[b-1wgdtfg0u0]   { background: #fef3c7; color: #92400e; }
.us-chip--maintenance .us-chip-count[b-1wgdtfg0u0] { background: #e0f2fe; color: #075985; }
.us-chip--healthy .us-chip-count[b-1wgdtfg0u0]     { background: #dcfce7; color: #166534; }

/* Maintenance gets its own badge colour (blue = deliberate state) so it never
   reads as either a fault (red/amber) or unknown (grey). Composes with the
   global .badge base class. */
.badge-maint[b-1wgdtfg0u0] {
    background: #e0f2fe;
    color: #075985;
}

/* ── Toolbar ────────────────────────────────────────────── */

.us-toolbar[b-1wgdtfg0u0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.us-search[b-1wgdtfg0u0] {
    max-width: 320px;
    width: 100%;
}

.us-result-count[b-1wgdtfg0u0] {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #64748b);
    white-space: nowrap;
}

.us-status[b-1wgdtfg0u0] {
    color: var(--color-text-muted, #64748b);
    padding: 1.5rem 0;
}

/* ── Table ──────────────────────────────────────────────── */

.us-table[b-1wgdtfg0u0] {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 8px);
    overflow: hidden;
    font-size: 0.875rem;
}

.us-table th[b-1wgdtfg0u0] {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #64748b);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    background: #f8fafc;
}

.us-table td[b-1wgdtfg0u0] {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border-light, #f1f5f9);
    vertical-align: top;
}

.us-table tbody tr:last-child td[b-1wgdtfg0u0] {
    border-bottom: none;
}

.us-row[b-1wgdtfg0u0] {
    cursor: pointer;
}

.us-row:hover td[b-1wgdtfg0u0] {
    background: #f8fafc;
}

.us-row:focus-visible[b-1wgdtfg0u0] {
    outline: 2px solid var(--color-brand-teal, #0d9488);
    outline-offset: -2px;
}

.us-row--flagged[b-1wgdtfg0u0] {
    background: #fffcf5;
}

.us-row--dormant[b-1wgdtfg0u0] {
    color: var(--color-text-muted, #64748b);
}

/* ── Dormant section ────────────────────────────────────── */

.us-dormant[b-1wgdtfg0u0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.us-dormant-toggle[b-1wgdtfg0u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    padding: 0.45rem 0.75rem;
    border: 1px dashed var(--color-border, #cbd5e1);
    border-radius: var(--radius, 8px);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    cursor: pointer;
}

.us-dormant-toggle:hover[b-1wgdtfg0u0] {
    border-color: var(--color-brand-teal, #0d9488);
    color: var(--color-text, #1e293b);
}

.us-dormant-chevron[b-1wgdtfg0u0] {
    transition: transform 0.15s ease;
}

.us-dormant-chevron--open[b-1wgdtfg0u0] {
    transform: rotate(90deg);
}

.us-name-main[b-1wgdtfg0u0] {
    display: block;
    font-weight: 600;
}

/*  The client key used to be printed here. It is a credential and is no longer
    carried by this page at all; only its absence is worth a line, because a
    client without one cannot authenticate. */
.us-name-nokey[b-1wgdtfg0u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-degraded) 55%, black);
}

.us-new-btn[b-1wgdtfg0u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    text-decoration: none;
}

.us-num[b-1wgdtfg0u0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.us-time[b-1wgdtfg0u0] {
    white-space: nowrap;
}

.us-notes-col[b-1wgdtfg0u0] {
    width: 34%;
}

.us-notes[b-1wgdtfg0u0] {
    color: var(--color-text-muted, #64748b);
}

.us-notes-ok[b-1wgdtfg0u0] {
    color: var(--color-border, #cbd5e1);
}

@media (max-width: 900px) {
    .us-notes-col[b-1wgdtfg0u0], .us-notes[b-1wgdtfg0u0] {
        display: none;
    }
}
/* /Components/Pages/UsersDirectory.razor.rz.scp.css */
/* UA1 (#826): the users directory. Calm, scannable, one grid. */

.ud[b-ditci711wh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ud-header[b-ditci711wh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ud-heading h1[b-ditci711wh] {
    margin: 0;
}

.ud-heading .subtitle[b-ditci711wh] {
    margin: 4px 0 0;
}

/* Right-aligned even when it wraps under the heading: the shared SavedViews and ColumnChooser
   panels open leftwards from their buttons, so a left-edge button would push them off-screen. */
.ud-actions[b-ditci711wh] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ud-export[b-ditci711wh],
.ud-import[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.ud-filters[b-ditci711wh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.ud-search-row[b-ditci711wh] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ud-search[b-ditci711wh] {
    flex: 1 1 320px;
    max-width: 520px;
}

.ud-snapshot[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.ud-facets[b-ditci711wh],
.ud-scopes[b-ditci711wh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
}

.ud-facet[b-ditci711wh] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ud-facet-label[b-ditci711wh] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.ud-facet-note[b-ditci711wh] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.ud-facet-note--error[b-ditci711wh] {
    color: var(--color-down);
}

.ud-chip[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}

.ud-chip:hover[b-ditci711wh] {
    background: var(--color-surface-raised);
}

.ud-chip--on[b-ditci711wh] {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: #fff;
}

.ud-chip--on:hover[b-ditci711wh] {
    background: var(--color-brand);
}

.ud-chip-count[b-ditci711wh] {
    font-size: 11px;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ud-scope-chip[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.ud-chip-remove[b-ditci711wh] {
    display: inline-flex;
    background: none;
    border: none;
    padding: 2px;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ud-chip-remove:hover[b-ditci711wh] {
    color: var(--color-down);
}

.ud-link-btn[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 12px;
    color: var(--color-brand);
    cursor: pointer;
}

.ud-link-btn:disabled[b-ditci711wh] {
    color: var(--color-text-secondary);
    cursor: default;
}

.ud-clear[b-ditci711wh] {
    margin-left: auto;
}

.ud-select[b-ditci711wh] {
    width: auto;
    min-width: 160px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
}

.ud-role-picker[b-ditci711wh] {
    max-width: 520px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.ud-note[b-ditci711wh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.ud-error[b-ditci711wh] {
    padding: 12px 16px;
    border: 1px solid var(--color-down);
    border-radius: 8px;
    color: var(--color-down);
}

.ud-error p[b-ditci711wh] {
    margin: 0 0 8px;
}

.ud-bulk[b-ditci711wh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ud-select-note[b-ditci711wh] {
    font-size: 13px;
    color: var(--color-text-primary);
}

.ud-muted[b-ditci711wh] {
    color: var(--color-text-secondary);
}

.ud-on[b-ditci711wh] {
    color: var(--color-healthy);
    font-weight: 500;
}

.ud-warn-text[b-ditci711wh] {
    color: var(--color-degraded);
    font-weight: 600;
}

.ud-name[b-ditci711wh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ud-avatar[b-ditci711wh] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-brand);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.ud-name-text[b-ditci711wh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ud-name-link[b-ditci711wh] {
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

.ud-name-link:hover[b-ditci711wh] {
    text-decoration: underline;
}

.ud-username[b-ditci711wh] {
    font-size: 11px;
    color: var(--color-text-secondary);
    background: none;
    padding: 0;
}

.ud-email[b-ditci711wh] {
    overflow-wrap: anywhere;
}

.ud-peek[b-ditci711wh] {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ud-peek:hover[b-ditci711wh],
.ud-peek:focus-visible[b-ditci711wh] {
    border-color: var(--color-border);
    color: var(--color-brand);
}

.ud-pagesize[b-ditci711wh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* The "info" glyph as a mask, so a 250-row page does not carry 250 inline SVGs over the circuit. */
.ud-peek[b-ditci711wh]::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* /Components/Pages/WorkflowDesignerPage.razor.rz.scp.css */
/* Workflow designer gate host — the same calm gate treatment as the form designer's host. */

.page-header[b-7mcptn3sfu] {
    margin-bottom: 1.5rem;
}

.page-title[b-7mcptn3sfu] {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.page-subtitle[b-7mcptn3sfu] {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.gate-denied[b-7mcptn3sfu] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--color-text-primary);
    max-width: 40rem;
}

.gate-denied h2[b-7mcptn3sfu] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.gate-denied p[b-7mcptn3sfu] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* /Components/Schedules/FilterBar.razor.rz.scp.css */
.sched-filterbar[b-xcz5113mzw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 10px);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04));
    margin-bottom: 1.5rem;
}

.sched-filter[b-xcz5113mzw] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.sched-filter label[b-xcz5113mzw],
.sched-filter-label[b-xcz5113mzw] {
    font-family: var(--font-subtitle, 'Hind', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
}

.sched-filter .form-input[b-xcz5113mzw] {
    min-width: 11rem;
}

/* Window + Active today stay together, pushed to the right of the row, and wrap
   as a single unit on narrow screens (never leaving Active today on its own line). */
.sched-filter-cluster[b-xcz5113mzw] {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    margin-left: auto;
}

.sched-filter--toggle[b-xcz5113mzw] {
    justify-content: flex-end;
}

.sched-pills[b-xcz5113mzw] {
    display: inline-flex;
    gap: 0.4rem;
}

.sched-pill[b-xcz5113mzw] {
    appearance: none;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sched-pill:hover[b-xcz5113mzw] {
    border-color: var(--color-brand-teal, #0ea5c6);
    color: var(--color-brand, #074684);
}

.sched-pill--on[b-xcz5113mzw] {
    background: var(--color-brand, #074684);
    border-color: var(--color-brand, #074684);
    color: #fff;
}

.sched-pill--on:hover[b-xcz5113mzw] {
    color: #fff;
}
/* /Components/Schedules/OccurrenceStrip.razor.rz.scp.css */
.occ-strip[b-c49leq0fdr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.occ-strip-head[b-c49leq0fdr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.occ-strip-title[b-c49leq0fdr] {
    margin: 0;
    font-size: 0.9375rem;
}

.occ-strip-range[b-c49leq0fdr] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.occ-strip-cells[b-c49leq0fdr],
.occ-strip-legend[b-c49leq0fdr] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.occ-strip-legend[b-c49leq0fdr] {
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.occ-strip-legend li[b-c49leq0fdr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.occ-cell[b-c49leq0fdr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--status-neutral-border);
    background: var(--color-surface-raised);
    font-size: 0.6875rem;
    line-height: 1;
}

.occ-cell--completed[b-c49leq0fdr] {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-fg);
}

.occ-cell--failed[b-c49leq0fdr] {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-fg);
    font-weight: 700;
}

.occ-cell--cancelled[b-c49leq0fdr] {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-fg);
}

.occ-cell--pending[b-c49leq0fdr] {
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
    color: var(--status-neutral-fg);
}

.occ-cell--none[b-c49leq0fdr] {
    border-style: dashed;
    background: transparent;
}

.occ-cell--today[b-c49leq0fdr] {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
}

/* The day cells share the strip's width instead of wrapping: up to 92 days stay on one line. */
.occ-strip-cells[b-c49leq0fdr] {
    flex-wrap: nowrap;
}

.occ-strip-cells .occ-cell[b-c49leq0fdr] {
    flex: 1 1 0;
    min-width: 6px;
    max-width: 20px;
    overflow: hidden;
}
/* /Components/Schedules/SchedulesNav.razor.rz.scp.css */
.sched-nav[b-z8nwa9gs1p] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 1.25rem;
}

/* NavLink renders its own <a>; ::deep pierces the child component so the
   tab styling actually lands (component-scoped CSS otherwise can't reach it). */
.sched-nav[b-z8nwa9gs1p]  .sched-nav-tab {
    display: inline-block;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sched-nav[b-z8nwa9gs1p]  .sched-nav-tab:hover {
    color: var(--color-brand, #074684);
}

.sched-nav[b-z8nwa9gs1p]  .sched-nav-tab--active {
    color: var(--color-brand, #074684);
    border-bottom-color: var(--color-brand, #074684);
}
/* /Components/Schedules/TimeZoneToggle.razor.rz.scp.css */
.tz-toggle[b-thvo0y5tbm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tz-toggle-label[b-thvo0y5tbm] {
    font-size: 0.78rem;
    color: var(--color-text-secondary, #64748b);
    margin-right: 0.15rem;
}

.tz-pill[b-thvo0y5tbm] {
    appearance: none;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #475569);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tz-pill:hover[b-thvo0y5tbm] {
    border-color: var(--color-brand-teal, #0ea5c6);
    color: var(--color-brand, #074684);
}

.tz-pill--on[b-thvo0y5tbm] {
    background: var(--color-brand, #074684);
    border-color: var(--color-brand, #074684);
    color: #fff;
}
/* /Components/Schedules/WaiverWindowBar.razor.rz.scp.css */
.ww[b-fkcstxbx7n] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 13rem;
}

.ww-track[b-fkcstxbx7n] {
    flex: 1;
    height: 7px;
    background: var(--color-surface-raised, #eef2f6);
    border-radius: 999px;
    overflow: hidden;
}

.ww-fill[b-fkcstxbx7n] {
    height: 100%;
    border-radius: 999px;
}

.ww-fill--active[b-fkcstxbx7n]   { background: var(--color-healthy, #22c55e); }
.ww-fill--upcoming[b-fkcstxbx7n] { background: var(--color-brand-teal, #0ea5c6); }
.ww-fill--finished[b-fkcstxbx7n] { background: var(--color-unknown, #94a3b8); }
.ww-fill--disabled[b-fkcstxbx7n] { background: var(--color-border, #e2e8f0); }

.ww-phrase[b-fkcstxbx7n] {
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--color-text-secondary, #64748b);
}

.ww-phrase--active[b-fkcstxbx7n]   { color: #15803d; }
.ww-phrase--upcoming[b-fkcstxbx7n] { color: #0e7490; }
/* /Components/Shared/AccessImpactPreview.razor.rz.scp.css */
/* UA4 (#829): the access impact preview — a copy of TX6 ImpactPreview's look. Tokens only (style guide §11); every status colour
   is paired with an icon and a word, never colour alone. Sits inside a ConfirmDialog's message
   or a danger zone, so it is a bordered inset rather than a card of its own. */

.aip[b-iftv3nl6mi] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

/* ── Status lines ────────────────────────────────────────────────────────── */

.aip-status[b-iftv3nl6mi] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--color-text-muted);
}

.aip-status--warn[b-iftv3nl6mi] {
    color: var(--status-warning-fg);
}

.aip-status--warn strong[b-iftv3nl6mi] {
    color: inherit;
    font-weight: 600;
}

.aip-muted[b-iftv3nl6mi] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.aip-spin[b-iftv3nl6mi] {
    animation: aip-spin-b-iftv3nl6mi 1s linear infinite;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .aip-spin[b-iftv3nl6mi] { animation: none; }
}

/* ── Headline ────────────────────────────────────────────────────────────── */

.aip-headline[b-iftv3nl6mi] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Blockers: red, with an icon and the word ───────────────────────────── */

.aip-blockers[b-iftv3nl6mi] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aip-blocker[b-iftv3nl6mi] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--status-error-border);
    border-radius: 6px;
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.aip-blocker-mark[b-iftv3nl6mi] {
    display: inline-flex;
    margin-top: 0.1rem;
}

.aip-blocker-word[b-iftv3nl6mi] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.aip-blocker-text[b-iftv3nl6mi] {
    color: var(--color-text-primary);
}

/* ── Groups ──────────────────────────────────────────────────────────────── */

.aip-group[b-iftv3nl6mi] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.aip-group-title[b-iftv3nl6mi] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.aip-group-count[b-iftv3nl6mi] {
    font-weight: 700;
    color: var(--color-text-primary);
}

.aip-list[b-iftv3nl6mi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aip-item[b-iftv3nl6mi] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.5rem;
    min-width: 0;
}

.aip-item-label[b-iftv3nl6mi] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

a.aip-item-label[b-iftv3nl6mi] {
    color: var(--color-brand);
    text-decoration: none;
}

a.aip-item-label:hover[b-iftv3nl6mi],
a.aip-item-label:focus-visible[b-iftv3nl6mi] {
    text-decoration: underline;
}

.aip-item-detail[b-iftv3nl6mi] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.aip-more[b-iftv3nl6mi] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-brand);
    font-size: 0.8rem;
    cursor: pointer;
}

.aip-more:hover[b-iftv3nl6mi],
.aip-more:focus-visible[b-iftv3nl6mi] {
    text-decoration: underline;
    outline: none;
}

/* ── Notes ───────────────────────────────────────────────────────────────── */

.aip-notes[b-iftv3nl6mi] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aip-note[b-iftv3nl6mi] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.aip-note-mark[b-iftv3nl6mi] {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--status-info-fg);
}

/* ── Partial ─────────────────────────────────────────────────────────────── */

.aip-partial[b-iftv3nl6mi] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--status-warning-border);
    border-radius: 6px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-size: 0.8rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.aip-foot[b-iftv3nl6mi] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
/* /Components/Shared/AccessPath.razor.rz.scp.css */
/* UA6 (#831): the AccessPath diagram. Tokens only (style guide §11). Granted = solid success
   arrow; Missing = dashed error arrow with the reason; Not confirmed = dashed neutral arrow.
   Every state also carries an icon and a word in the chain head — never colour alone. */

.apath[b-r9obg80zjl] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.apath-head[b-r9obg80zjl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.apath-title[b-r9obg80zjl] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.apath-view[b-r9obg80zjl] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.6);
    overflow: hidden;
    background: var(--color-surface);
    margin-left: auto;
}

.apath-view-btn[b-r9obg80zjl] {
    padding: 0.25rem 0.65rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.apath-view-btn--on[b-r9obg80zjl] {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    font-weight: 600;
}

.apath-chains[b-r9obg80zjl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.apath-chain[b-r9obg80zjl] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: calc(var(--radius) * 0.6);
    background: var(--color-surface);
    min-width: 0;
}

.apath-chain.apath-chain--granted[b-r9obg80zjl] { border-left-color: var(--status-success-border); }
.apath-chain.apath-chain--missing[b-r9obg80zjl] { border-left-color: var(--status-error-border); }
.apath-chain.apath-chain--unknown[b-r9obg80zjl] { border-left-color: var(--status-neutral-border); }

.apath-chain-head[b-r9obg80zjl] {
    margin: 0 0 0.45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    color: var(--color-text-primary);
}

.apath-state[b-r9obg80zjl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.apath-chain--granted .apath-state[b-r9obg80zjl],
.apath-state.apath-chain--granted[b-r9obg80zjl] { color: var(--status-success-fg); }
.apath-chain--missing .apath-state[b-r9obg80zjl],
.apath-state.apath-chain--missing[b-r9obg80zjl] { color: var(--status-error-fg); }
.apath-chain--unknown .apath-state[b-r9obg80zjl],
.apath-state.apath-chain--unknown[b-r9obg80zjl] { color: var(--status-neutral-fg); }

.apath-row[b-r9obg80zjl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.25rem;
    min-width: 0;
}

.apath-node[b-r9obg80zjl] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.5);
    background: var(--color-surface-raised);
    max-width: 15rem;
    min-width: 0;
}

.apath-node-icon[b-r9obg80zjl] {
    display: inline-flex;
    padding-top: 0.1rem;
    color: var(--color-text-secondary);
}

.apath-node-text[b-r9obg80zjl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apath-node-label[b-r9obg80zjl] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    text-decoration: none;
}

a.apath-node-label:hover[b-r9obg80zjl] { text-decoration: underline; }

.apath-node-detail[b-r9obg80zjl] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.apath-node--grant[b-r9obg80zjl] { background: var(--color-surface); }

.apath-flags[b-r9obg80zjl] {
    display: inline-flex;
    gap: 0.15rem;
    margin-top: 0.15rem;
}

.apath-flag[b-r9obg80zjl] {
    display: inline-flex;
    justify-content: center;
    min-width: 1.1rem;
    padding: 0 0.15rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid var(--status-neutral-border);
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

.apath-flag--yes[b-r9obg80zjl] {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.apath-flag--no[b-r9obg80zjl] {
    text-decoration: line-through;
    opacity: 0.75;
}

.apath-link[b-r9obg80zjl] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    min-width: 4.25rem;
    max-width: 10rem;
    text-align: center;
}

.apath-link--granted[b-r9obg80zjl] { color: var(--status-success-fg); }
.apath-link--missing[b-r9obg80zjl] { color: var(--status-error-fg); }
.apath-link--unknown[b-r9obg80zjl] { color: var(--status-neutral-fg); }

.apath-link-label[b-r9obg80zjl] {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.apath-arrow[b-r9obg80zjl] { display: block; }

.apath-link-reason[b-r9obg80zjl] {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.apath-table[b-r9obg80zjl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.apath-table th[b-r9obg80zjl],
.apath-table td[b-r9obg80zjl] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    color: var(--color-text-primary);
}

.apath-table th[b-r9obg80zjl] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.apath-more[b-r9obg80zjl],
.apath-empty[b-r9obg80zjl] {
    margin: 0;
    color: var(--color-text-secondary);
}

.apath-legend[b-r9obg80zjl] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.72rem;
}

.apath-legend-item[b-r9obg80zjl] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.apath-legend-item.apath-chain--granted[b-r9obg80zjl] { color: var(--status-success-fg); }
.apath-legend-item.apath-chain--missing[b-r9obg80zjl] { color: var(--status-error-fg); }
.apath-legend-item.apath-chain--unknown[b-r9obg80zjl] { color: var(--status-neutral-fg); }
/* /Components/Shared/ActiveSystemBadge.razor.rz.scp.css */
/* Active System Badge (P5.1): displays the current profile with colour dot,
   name, kind tag, and host. Unconfigured or offline states show muted text.
   Click to open a popover with capabilities and actions. */

.asb-container[b-4dst2rpi5k] {
    position: relative;
}

/* ── Badge button / link ────────────────────────────────────────
   The badge lives on the navy top bar (.top-bar: var(--color-brand), white text) in
   both themes, so it is styled for a dark ground on purpose: a translucent pill, white
   type, a white ring round the kind dot so every kind colour reads on navy, and a quiet
   translucent tag. The popover below is a white panel and keeps the surface tokens. */

.asb[b-4dst2rpi5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.asb:hover[b-4dst2rpi5k] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.asb:focus-visible[b-4dst2rpi5k] {
    outline: 2px solid var(--color-brand-accent);
    outline-offset: 2px;
}

.asb[aria-expanded="true"][b-4dst2rpi5k] {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
}

.asb--unconfigured[b-4dst2rpi5k] {
    color: rgba(255, 255, 255, 0.85);
    border-style: dashed;
}

.asb--unconfigured:hover[b-4dst2rpi5k] {
    color: #fff;
}

.asb--offline[b-4dst2rpi5k] {
    pointer-events: none;
    color: rgba(255, 255, 255, 0.85);
}

.asb-dot[b-4dst2rpi5k] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.asb-name[b-4dst2rpi5k] {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.asb-tag[b-4dst2rpi5k] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Production read-only chip (after the PROD tag). Same quiet translucent language as the tag,
   with a lock: it should read as a calm fact, not an alarm. Qualified by .asb so it wins on
   specificity whatever order the scoped bundle lands in. */
.asb .asb-readonly[b-4dst2rpi5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.asb-popover .asb-identity-readonly[b-4dst2rpi5k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
    margin-right: 0.5rem;
    vertical-align: top;
}

.asb-popover .asb-readonly-note[b-4dst2rpi5k] {
    margin: 0 0.75rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.asb-unconfigured-text[b-4dst2rpi5k] {
    color: inherit;
}

.asb-host[b-4dst2rpi5k] {
    display: none;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.15rem;
}

/* Show host on screens wider than ~900px */
@media (min-width: 900px) {
    .asb-host[b-4dst2rpi5k] {
        display: inline;
    }
}

/* ── Popover ───────────────────────────────────────────────────── */

.asb-popover-backdrop[b-4dst2rpi5k] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.asb-popover[b-4dst2rpi5k] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 22rem;
    max-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card), 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 0.75rem;
    z-index: 50;
    overflow: hidden;
}

/* Identity block: name, tag, host */
.asb-popover-identity[b-4dst2rpi5k] {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.asb-identity-name[b-4dst2rpi5k] {
    font-family: var(--font-title);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.asb-identity-tag[b-4dst2rpi5k] {
    display: inline-block;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
    margin-right: 0.5rem;
}

.asb-identity-host[b-4dst2rpi5k] {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.asb-signed-in[b-4dst2rpi5k],
.asb-not-signed-in[b-4dst2rpi5k] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    padding: 0 0.75rem;
}

/* SystemCapabilityList inside the popover */
.asb-popover :deep(.capability-list)[b-4dst2rpi5k] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.asb-popover :deep(.capability-list-heading)[b-4dst2rpi5k] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
}

.asb-popover :deep(.capability-list-items)[b-4dst2rpi5k] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.asb-popover :deep(.capability-item)[b-4dst2rpi5k] {
    padding: 0.375rem 0;
    font-size: 0.8rem;
}

.asb-popover :deep(.capability-recheck)[b-4dst2rpi5k] {
    margin-top: 0.5rem;
    padding: 0;
}

.asb-popover :deep(.capability-recheck button)[b-4dst2rpi5k] {
    width: 100%;
    font-size: 0.8rem;
    padding: 0.375rem;
}

/* Actions section */
.asb-popover-actions[b-4dst2rpi5k] {
    flex: none;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.asb-popover-action[b-4dst2rpi5k] {
    width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.asb-popover-link[b-4dst2rpi5k] {
    display: inline-block;
    color: var(--color-brand);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0;
    transition: color 0.15s;
}

.asb-popover-link:hover[b-4dst2rpi5k] {
    color: #05376a;
    text-decoration: underline;
}

.asb-popover:focus[b-4dst2rpi5k] { outline: none; }
/* /Components/Shared/AutoRefresh.razor.rz.scp.css */
/* The wrapper adds no box of its own: the label, the page's own actions and the
   button stay flex children of whichever header-actions row hosts the component. */
.auto-refresh[b-kfecgkb66q] {
    display: contents;
}

.ar-updated[b-kfecgkb66q] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ar-backoff[b-kfecgkb66q] {
    font-size: 0.8125rem;
    color: #92400e;
    white-space: nowrap;
}

.auto-refresh[b-kfecgkb66q]  .ar-spin {
    animation: ar-spin-b-kfecgkb66q 1s linear infinite;
}

@keyframes ar-spin-b-kfecgkb66q {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auto-refresh[b-kfecgkb66q]  .ar-spin {
        animation: none;
    }
}
/* /Components/Shared/BulkActionBar.razor.rz.scp.css */
/* .wfsel-actionbar (app.css) supplies the sticky positioning and the white
   gradient fade. These rules add the left-hand count and the clear control,
   and stop the bar pushing its buttons hard right when there is a count. */

.bab[b-5x5a5i32no] {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.bab-count[b-5x5a5i32no] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.bab-count strong[b-5x5a5i32no] {
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.bab-clear[b-5x5a5i32no] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.45rem;
    border: none;
    background: none;
    border-radius: calc(var(--radius) * 0.75);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.bab-clear:hover[b-5x5a5i32no] {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.bab-clear:focus-visible[b-5x5a5i32no] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.bab-actions[b-5x5a5i32no] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.bab-action[b-5x5a5i32no] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
    .bab-clear[b-5x5a5i32no] { transition: none; }
}
/* /Components/Shared/BulkConfirm.razor.rz.scp.css */
/* Body copy inside ConfirmDialog's message area. The dialog owns the frame;
   these are just the paragraphs, in reading order: what happens, what it is
   happening to, what to be careful of, how it is sent. */

.bcf-consequence[b-1rfwby9ej2] {
    margin: 0 0 0.625rem;
}

.bcf-extra[b-1rfwby9ej2] {
    margin: 0 0 0.75rem;
}

.bcf-names[b-1rfwby9ej2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
}

.bcf-names-label[b-1rfwby9ej2] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.bcf-names-value[b-1rfwby9ej2] {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    word-break: break-word;
}

.bcf-caution[b-1rfwby9ej2] {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--status-warning-fg);
}

/* Smaller and quieter: it is the same sentence every time, and after the second
   read it should be scannable rather than re-read in full. */
.bcf-mechanics[b-1rfwby9ej2] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
/* /Components/Shared/BulkOutcomePanel.razor.rz.scp.css */
/* A card in the house style (.card's surface, hairline and shadow) with a
   raised internal header bar and a micro-label title, per style guide 6.3. */

.bop[b-zfm36zf25s] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin: 1rem 0;
}

.bop-header[b-zfm36zf25s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.125rem;
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.bop-title[b-zfm36zf25s] {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.bop-summary[b-zfm36zf25s] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 12rem;
}

/* The run-level sentence. Full width under the summary rather than beside it:
   it is usually the longest thing in the header and it is the part somebody
   stopping a run needs to read. */
.bop-headline[b-zfm36zf25s] {
    margin: 0;
    flex-basis: 100%;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.bop-header-actions[b-zfm36zf25s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.bop-retry[b-zfm36zf25s] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bop-dismiss[b-zfm36zf25s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
}

.bop-dismiss:hover[b-zfm36zf25s] {
    opacity: 1;
    border-color: var(--color-border);
}

.bop-dismiss:focus-visible[b-zfm36zf25s] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ── Item rows ───────────────────────────────────────────────────────────── */

.bop-list[b-zfm36zf25s] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
}

.bop-item[b-zfm36zf25s] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 1.125rem;
    border-bottom: 1px solid var(--color-border);
}

.bop-item:last-child[b-zfm36zf25s] {
    border-bottom: none;
}

.bop-mark[b-zfm36zf25s] {
    display: inline-flex;
    flex-shrink: 0;
    padding-top: 0.05rem;
}

.bop-item--ok .bop-mark[b-zfm36zf25s] {
    color: var(--status-success-fg);
}

.bop-item--fail .bop-mark[b-zfm36zf25s] {
    color: var(--status-error-fg);
}

/* Neither green nor red on purpose: an unconfirmed item is not a quiet success
   and not a failure, and colouring it as either would answer a question the run
   could not answer. */
.bop-item--unsure .bop-mark[b-zfm36zf25s] {
    color: var(--status-warning-fg);
}

/* Grey, deliberately. An item nothing was sent for has no status of its own —
   it is neither a result nor a problem, and any of the three status colours
   would imply the run reached a conclusion about it. */
.bop-item--untried[b-zfm36zf25s] {
    opacity: 0.85;
}

.bop-item--untried .bop-mark[b-zfm36zf25s] {
    color: var(--color-text-secondary);
}

.bop-body[b-zfm36zf25s] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.bop-label[b-zfm36zf25s] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    word-break: break-word;
}

.bop-message[b-zfm36zf25s] {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-secondary);
    word-break: break-word;
}

/* The written outcome. The icon and colour repeat it; neither replaces it. */
.bop-state[b-zfm36zf25s] {
    flex-shrink: 0;
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
}

.bop-item--ok .bop-state[b-zfm36zf25s] {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.bop-item--fail .bop-state[b-zfm36zf25s] {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.bop-item--unsure .bop-state[b-zfm36zf25s] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.bop-item--untried .bop-state[b-zfm36zf25s] {
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
    .bop-dismiss[b-zfm36zf25s] { transition: none; }
}

/* UA5 (#830): the line under a capped results list. */
.bop-unlisted[b-zfm36zf25s] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Shared/BulkRunPanel.razor.rz.scp.css */
/* The in-flight half of a bulk run. Same card surface as BulkOutcomePanel, so
   the panel does not appear to move when the run finishes and the results take
   its place. */

.brp[b-cf3vi0azfc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.875rem 1.125rem 1rem;
    margin: 1rem 0;
}

.brp-head[b-cf3vi0azfc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.brp-count[b-cf3vi0azfc] {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.brp-current[b-cf3vi0azfc] {
    color: var(--color-text-secondary);
}

.brp-stop[b-cf3vi0azfc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.brp-bar[b-cf3vi0azfc] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 0.375rem;
    margin: 0.75rem 0 0.5rem;
    border: none;
    border-radius: 100px;
    background: var(--color-surface-raised);
    overflow: hidden;
}

.brp-bar[b-cf3vi0azfc]::-webkit-progress-bar {
    background: var(--color-surface-raised);
    border-radius: 100px;
}

.brp-bar[b-cf3vi0azfc]::-webkit-progress-value {
    background: var(--color-brand-teal);
    border-radius: 100px;
    transition: width 0.2s ease;
}

.brp-bar[b-cf3vi0azfc]::-moz-progress-bar {
    background: var(--color-brand-teal);
    border-radius: 100px;
}

.brp-note[b-cf3vi0azfc] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.brp-resume[b-cf3vi0azfc] {
    display: flex;
    justify-content: flex-start;
    margin: -0.5rem 0 1rem;
}

.brp-resume button[b-cf3vi0azfc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
    .brp-bar[b-cf3vi0azfc]::-webkit-progress-value { transition: none; }
}
/* /Components/Shared/ColumnChooser.razor.rz.scp.css */
.cc-chooser[b-vxhi4mi7gz] {
    position: relative;
    display: inline-block;
}

.cc-chooser-toggle[b-vxhi4mi7gz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cc-chooser-count[b-vxhi4mi7gz] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cc-chooser-panel[b-vxhi4mi7gz] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    z-index: 30;
    min-width: 15rem;
    padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.cc-chooser-fieldset[b-vxhi4mi7gz] {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cc-chooser-legend[b-vxhi4mi7gz] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}

.cc-chooser-row[b-vxhi4mi7gz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.cc-chooser-footer[b-vxhi4mi7gz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* A centred modal card. Nothing in app.css covered modals, so this is new, built
   from the card conventions: white surface, hairline border, the shared radius,
   and a raised shadow because it floats above the page. */

.cdg-overlay[b-gqudq47emg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 299;
}

.cdg[b-gqudq47emg] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.cdg:focus[b-gqudq47emg] {
    outline: none;
}

.cdg--danger[b-gqudq47emg] {
    border-top: 3px solid var(--status-error-border);
}

/* ── Head ────────────────────────────────────────────────────────────────── */

.cdg-head[b-gqudq47emg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.cdg-mark[b-gqudq47emg] {
    display: inline-flex;
    color: var(--status-error-fg);
    flex-shrink: 0;
}

.cdg-title[b-gqudq47emg] {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Message ─────────────────────────────────────────────────────────────── */

.cdg-message[b-gqudq47emg] {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cdg-message p[b-gqudq47emg] {
    margin: 0 0 0.5rem;
}

.cdg-message p:last-child[b-gqudq47emg] {
    margin-bottom: 0;
}

/* Production read-only backstop (WritesToSystem): sits after the message. */
.cdg-message p.cdg-readonly[b-gqudq47emg],
.cdg-message p.cdg-readonly:last-child[b-gqudq47emg] {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* ── Typed confirmation ──────────────────────────────────────────────────── */

.cdg-typed[b-gqudq47emg] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
}

.cdg-typed-label[b-gqudq47emg] {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.cdg-phrase[b-gqudq47emg] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    word-break: break-all;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.cdg-actions[b-gqudq47emg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-top: 0.25rem;
}
/* /Components/Shared/CoverageMatrix.razor.rz.scp.css */
/* UA9 (#834): the coverage matrix. Sequential heat from the brand token mixed into the surface —
   six fixed steps, so a colour means the same count on every page. Gaps carry a word and a glyph,
   never colour alone. */

.cvm[b-3g4ksapf4t] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.cvm-head[b-3g4ksapf4t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cvm-title[b-3g4ksapf4t] {
    margin: 0;
    font-size: 1.125rem;
}

.cvm-sub[b-3g4ksapf4t] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    max-width: 60ch;
}

.cvm-overlap-link[b-3g4ksapf4t] {
    white-space: nowrap;
    text-decoration: none;
}

.cvm-toolbar[b-3g4ksapf4t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.cvm-search[b-3g4ksapf4t] {
    flex: 1 1 16rem;
    max-width: 22rem;
}

.cvm-toggle[b-3g4ksapf4t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.cvm-totals[b-3g4ksapf4t] {
    margin: 0 0 0 auto;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.cvm-note[b-3g4ksapf4t] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    border: 1px solid var(--status-info-border);
    font-size: 0.8125rem;
}

.cvm-note--muted[b-3g4ksapf4t] {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    border-color: var(--status-neutral-border);
}

.cvm-note--warn[b-3g4ksapf4t] {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border-color: var(--status-warning-border);
}

.cvm-status[b-3g4ksapf4t] {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
}

/* The matrix scrolls sideways on sites with many role columns. macOS hides overlay
   scrollbars until a scroll is in flight, so the table looked cut off; three cues fix
   that: a scrollbar that stays painted (same recipe as SideNav.razor.css — styling
   ::-webkit-scrollbar opts Chromium/Safari out of overlay bars, and the standard
   scrollbar-* properties must NOT be set alongside it), a fade on the right edge while
   columns remain, and a shadow on the pinned Entity column once scrolled. The fade and
   shadow ride a scroll-driven animation: when the table fits, the timeline is inactive
   and neither shows; browsers without timelines simply go without them. */
.cvm-frame[b-3g4ksapf4t] {
    position: relative;
    timeline-scope: --cvm-x;
}

.cvm-frame[b-3g4ksapf4t]::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 11px;
    width: 2.5rem;
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(to right, transparent, var(--color-surface));
    opacity: 0;
    animation: cvm-fade-right-b-3g4ksapf4t linear both;
    animation-timeline: --cvm-x;
}

@keyframes cvm-fade-right-b-3g4ksapf4t {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

.cvm-scroll[b-3g4ksapf4t] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: opacity 120ms ease;
    scroll-timeline: --cvm-x inline;
}

@supports not selector(::-webkit-scrollbar) {
    .cvm-scroll[b-3g4ksapf4t] {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
}

.cvm-scroll[b-3g4ksapf4t]::-webkit-scrollbar {
    height: 10px;
}

.cvm-scroll[b-3g4ksapf4t]::-webkit-scrollbar-track {
    background: transparent;
}

.cvm-scroll[b-3g4ksapf4t]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid var(--color-surface);
}

.cvm-scroll[b-3g4ksapf4t]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.cvm-scroll--busy[b-3g4ksapf4t] {
    opacity: 0.6;
}

.cvm-table[b-3g4ksapf4t] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.cvm-table th[b-3g4ksapf4t],
.cvm-table td[b-3g4ksapf4t] {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.cvm-table tbody tr:last-child th[b-3g4ksapf4t],
.cvm-table tbody tr:last-child td[b-3g4ksapf4t] {
    border-bottom: none;
}

.cvm-table thead th[b-3g4ksapf4t] {
    position: sticky;
    top: 0;
    background: var(--color-surface-raised);
    font-weight: 600;
    color: var(--color-text-primary);
}

.cvm-th[b-3g4ksapf4t] {
    min-width: 5.5rem;
}

.cvm-th-label[b-3g4ksapf4t] {
    display: block;
}

.cvm-th-kind[b-3g4ksapf4t] {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cvm-entity[b-3g4ksapf4t] {
    font-weight: 500;
    white-space: nowrap;
    background: var(--color-surface);
    position: sticky;
    left: 0;
    z-index: 1;
}

/* The header corner stays put with the Entity column under it. */
.cvm-table thead th.cvm-th-entity[b-3g4ksapf4t] {
    left: 0;
    z-index: 2;
}

.cvm-entity[b-3g4ksapf4t],
.cvm-table thead th.cvm-th-entity[b-3g4ksapf4t] {
    animation: cvm-pinned-shadow-b-3g4ksapf4t linear both;
    animation-timeline: --cvm-x;
}

@keyframes cvm-pinned-shadow-b-3g4ksapf4t {
    0% { box-shadow: none; }
    3%, 100% { box-shadow: 6px 0 6px -6px color-mix(in srgb, var(--color-text-primary) 35%, transparent); }
}

.cvm-entity a[b-3g4ksapf4t] {
    color: var(--color-text-primary);
    text-decoration: none;
}

.cvm-entity a:hover[b-3g4ksapf4t],
.cvm-entity a:focus-visible[b-3g4ksapf4t] {
    text-decoration: underline;
}

.cvm-code[b-3g4ksapf4t] {
    margin-left: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.cvm-cell[b-3g4ksapf4t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 3.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

button.cvm-cell[b-3g4ksapf4t] {
    cursor: pointer;
}

button.cvm-cell:hover[b-3g4ksapf4t] {
    border-color: var(--color-brand);
}

button.cvm-cell:focus-visible[b-3g4ksapf4t] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

/* Sequential heat: brand blue mixed into the surface. */
.cvm-heat-0[b-3g4ksapf4t] { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.cvm-heat-1[b-3g4ksapf4t] { background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface)); color: var(--color-text-primary); }
.cvm-heat-2[b-3g4ksapf4t] { background: color-mix(in srgb, var(--color-brand) 18%, var(--color-surface)); color: var(--color-text-primary); }
.cvm-heat-3[b-3g4ksapf4t] { background: color-mix(in srgb, var(--color-brand) 32%, var(--color-surface)); color: var(--color-text-primary); }
.cvm-heat-4[b-3g4ksapf4t] { background: color-mix(in srgb, var(--color-brand) 48%, var(--color-surface)); color: var(--color-text-primary); }
.cvm-heat-5[b-3g4ksapf4t] { background: color-mix(in srgb, var(--color-brand) 85%, var(--color-surface)); color: var(--color-surface); }

.cvm-cell--inferred[b-3g4ksapf4t] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.cvm-cell--missing[b-3g4ksapf4t] {
    background: repeating-linear-gradient(135deg, var(--status-error-bg), var(--status-error-bg) 4px, var(--color-surface) 4px, var(--color-surface) 8px);
    color: var(--status-error-fg);
    border: 1px solid var(--status-error-border);
}

.cvm-cell--ambiguous[b-3g4ksapf4t] {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    border: 1px dashed var(--status-neutral-fg);
}

.cvm-cell--unknown[b-3g4ksapf4t] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
}

.cvm-foot[b-3g4ksapf4t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cvm-legend[b-3g4ksapf4t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}

.cvm-legend-label[b-3g4ksapf4t] {
    color: var(--color-text-secondary);
    margin-right: 0.25rem;
}

.cvm-swatch[b-3g4ksapf4t] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    border: 1px solid transparent;
}

.cvm-pager[b-3g4ksapf4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
/* Everything here is additive to the .wf-table* vocabulary in app.css. The
   table, its wrapper, header cells, rows and body cells all keep their existing
   global classes; these rules only cover what the hand-rolled tables never had:
   a sort control, a pager, a tri-state select-all, and alignment variants. */

.dt[b-6jcjoz57mx] {
    display: flex;
    flex-direction: column;
}

.dt-count[b-6jcjoz57mx] {
    margin: 0 0 0.5rem;
}

/* ── Headers ─────────────────────────────────────────────────────────────── */

/* .wf-th is pointer-cursored because the pages that use it made the whole cell
   the sort target. Here the button inside is the target, so the cell itself is
   inert. */
.dt-th[b-6jcjoz57mx] {
    cursor: default;
}

.dt-sort[b-6jcjoz57mx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    border-radius: calc(var(--radius) * 0.5);
    transition: color 0.15s;
}

.dt-sort:hover[b-6jcjoz57mx] {
    color: var(--color-text-primary);
}

.dt-sort:focus-visible[b-6jcjoz57mx] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* The icon is rendered by <UiIcon>, a child component, so it carries that
   component's scope and not this one's — ::deep is the only way a parent's
   isolated stylesheet can reach it. */
.dt-sort[b-6jcjoz57mx]  .dt-sort-icon {
    opacity: 0.55;
}

.dt-th[aria-sort="ascending"] .dt-sort[b-6jcjoz57mx],
.dt-th[aria-sort="descending"] .dt-sort[b-6jcjoz57mx] {
    color: var(--color-brand);
}

.dt-th[aria-sort="ascending"][b-6jcjoz57mx]  .dt-sort-icon,
.dt-th[aria-sort="descending"][b-6jcjoz57mx]  .dt-sort-icon {
    opacity: 1;
}

/* ── Alignment ───────────────────────────────────────────────────────────── */

.dt-col--end[b-6jcjoz57mx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dt-col--center[b-6jcjoz57mx] {
    text-align: center;
}

.dt-td--rowheader[b-6jcjoz57mx] {
    font-weight: 600;
    text-align: left;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

/* .wf-row assumes every row is clickable; a read-only table's rows are not. */
.dt-row[b-6jcjoz57mx] {
    cursor: default;
}

.dt-row--interactive[b-6jcjoz57mx] {
    cursor: pointer;
}

.dt-row:focus-visible[b-6jcjoz57mx] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
}

.dt-row--selected[b-6jcjoz57mx] {
    background: color-mix(in srgb, var(--color-brand) 5%, transparent);
}

.dt-row--message:hover[b-6jcjoz57mx] {
    background: transparent;
}

.dt-message[b-6jcjoz57mx] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
}

.dt-message-inner[b-6jcjoz57mx] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dt-message-inner[b-6jcjoz57mx]  .dt-spin {
    animation: dt-spin-b-6jcjoz57mx 1s linear infinite;
}

@keyframes dt-spin-b-6jcjoz57mx {
    to { transform: rotate(360deg); }
}

/* ── Selection ───────────────────────────────────────────────────────────── */

.dt-check-input[b-6jcjoz57mx] {
    width: 16px;
    height: 16px;
    padding: 0;
    cursor: pointer;
    accent-color: var(--color-brand);
}

.dt-check[b-6jcjoz57mx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.dt-check:disabled[b-6jcjoz57mx] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Sized and coloured to sit beside the native row checkboxes without looking
   like a different control. */
.dt-check-box[b-6jcjoz57mx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-text-secondary);
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--color-surface);
    transition: background 0.12s, border-color 0.12s;
}

.dt-check[aria-checked="true"] .dt-check-box[b-6jcjoz57mx],
.dt-check[aria-checked="mixed"] .dt-check-box[b-6jcjoz57mx] {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.dt-check:focus-visible .dt-check-box[b-6jcjoz57mx] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ── Pager ───────────────────────────────────────────────────────────────── */

.dt-pager[b-6jcjoz57mx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    padding: 0.625rem 0;
}

.dt-pager-info[b-6jcjoz57mx] {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    margin-right: 0.375rem;
}

.dt-pager-btn[b-6jcjoz57mx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.dt-pager-btn:hover:not(:disabled)[b-6jcjoz57mx] {
    border-color: var(--color-brand-teal);
    color: var(--color-text-primary);
}

.dt-pager-btn:disabled[b-6jcjoz57mx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.dt-pager-btn:focus-visible[b-6jcjoz57mx] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dt-message-inner[b-6jcjoz57mx]  .dt-spin { animation: none; }
    .dt-sort[b-6jcjoz57mx],
    .dt-check-box[b-6jcjoz57mx],
    .dt-pager-btn[b-6jcjoz57mx] { transition: none; }
}

/* ── Groups ──────────────────────────────────────────────────────────────── */

/* A group header is a section title inside the table, not a row of data: it
   sits on the raised surface the column headers use, under them in the stack
   so it scrolls beneath the sticky header row. */
.dt-group-head[b-6jcjoz57mx] {
    padding: 0.45rem 1rem 0.35rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.dt-group:first-of-type .dt-group-head[b-6jcjoz57mx] {
    border-top: none;
}

.dt-group-label[b-6jcjoz57mx] {
    color: var(--color-text-primary);
}

.dt-group-count[b-6jcjoz57mx] {
    margin-left: 0.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.dt-group-row:hover[b-6jcjoz57mx] {
    background: transparent;
}
/* /Components/Shared/Drawer.razor.rz.scp.css */
/* The geometry and motion are ImportLogDrawer's, generalised: same overlay
   tint, same panel shadow, same slide curve, with the width now a parameter. */

.dw-overlay[b-vnht28i42l] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dw-overlay--open[b-vnht28i42l] {
    opacity: 1;
    pointer-events: auto;
}

.dw-panel[b-vnht28i42l] {
    position: fixed;
    top: 0;
    right: 0;
    max-width: 100vw;
    height: 100dvh;
    background: var(--color-surface);
    box-shadow: -8px 0 28px rgba(7, 70, 132, 0.14);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dw-panel--open[b-vnht28i42l] {
    transform: translateX(0);
}

.dw-panel:focus[b-vnht28i42l] {
    outline: none;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.dw-header[b-vnht28i42l] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    flex-shrink: 0;
}

.dw-heading[b-vnht28i42l] {
    flex: 1;
    min-width: 0;
}

.dw-title[b-vnht28i42l] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-subtitle[b-vnht28i42l] {
    margin: 0.15rem 0 0;
    font-family: var(--font-subtitle);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dw-header-extra[b-vnht28i42l] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.dw-close[b-vnht28i42l] {
    width: 32px;
    height: 32px;
    border-radius: calc(var(--radius) * 0.75);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dw-close:hover[b-vnht28i42l] {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.dw-close:focus-visible[b-vnht28i42l] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

/* ── Body and footer ─────────────────────────────────────────────────────── */

.dw-body[b-vnht28i42l] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
}

.dw-footer[b-vnht28i42l] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

@media (max-width: 520px) {
    .dw-panel[b-vnht28i42l] {
        width: 100vw !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dw-overlay[b-vnht28i42l],
    .dw-panel[b-vnht28i42l] {
        transition: none;
    }
}
/* /Components/Shared/FileDropZone.razor.rz.scp.css */
/*  The drop zone.

    The file input is stretched over the whole zone at zero opacity so a drop
    anywhere on it lands on the input — that is what removes the JavaScript. It
    is still a real focusable control, so the focus ring is drawn on the label
    when the input has focus, using :focus-within on the zone.

    Tokens only — no raw hex. */

.fdz[b-ksb4pspslx] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fdz-zone[b-ksb4pspslx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.6rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    text-align: center;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.fdz--dragging .fdz-zone[b-ksb4pspslx] {
    border-color: var(--color-brand-teal);
    background: var(--status-info-bg);
}

.fdz--disabled .fdz-zone[b-ksb4pspslx] {
    opacity: 0.6;
}

.fdz-icon[b-ksb4pspslx] {
    color: var(--color-text-secondary);
}

.fdz-lede[b-ksb4pspslx] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/*  A label styled as a button. It is not one: clicking it opens the picker via
    the input it names, which is what keeps this working with no script. */
.fdz-choose[b-ksb4pspslx] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
}

.fdz-choose:hover[b-ksb4pspslx] {
    border-color: var(--color-brand-teal);
}

/*  Invisible, but present and focusable. */
.fdz-input[b-ksb4pspslx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fdz-input:disabled[b-ksb4pspslx] {
    cursor: not-allowed;
}

/*  The focus ring belongs on something visible. */
.fdz-zone:focus-within[b-ksb4pspslx] {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--status-info-bg);
}

.fdz-hint[b-ksb4pspslx] {
    margin: 0;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    max-width: 46ch;
}

.fdz-alt[b-ksb4pspslx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fdz-toggle[b-ksb4pspslx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.15rem 0;
    border: none;
    background: none;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fdz-toggle:hover[b-ksb4pspslx] {
    color: var(--color-brand);
}

.fdz-paste[b-ksb4pspslx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fdz-label[b-ksb4pspslx] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.fdz-text[b-ksb4pspslx] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    resize: vertical;
}

.fdz-paste-actions[b-ksb4pspslx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fdz-use[b-ksb4pspslx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

.fdz-size[b-ksb4pspslx] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.fdz-error[b-ksb4pspslx] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    .fdz-zone[b-ksb4pspslx] {
        transition: none;
    }
}
/* /Components/Shared/HealthBadge.razor.rz.scp.css */
/* .badge and .badge-* in app.css already give the pill its shape, weight and
   paired colours. All that is added here is room for the icon. */

.hbg[b-96k4i8b82v] {
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.hbg-text[b-96k4i8b82v] {
    line-height: 1.2;
}
/* /Components/Shared/HistoryTimeline.razor.rz.scp.css */
/* The shared History timeline (users, document types, roles). Scoped to HistoryTimeline alone. */

.ht-toolbar[b-k332gl7mqf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.ht-lead[b-k332gl7mqf] {
    margin: 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 34rem;
}

.ht-link-btn[b-k332gl7mqf] {
    border: none;
    background: none;
    color: var(--color-brand, #074684);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    white-space: nowrap;
}

.ht-link-btn:hover:not(:disabled)[b-k332gl7mqf] {
    text-decoration: underline;
}

.ht-link-btn:disabled[b-k332gl7mqf] {
    opacity: 0.5;
    cursor: default;
}

.ht-status[b-k332gl7mqf] {
    padding: 1rem 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875rem;
    margin: 0;
}

.ht-empty[b-k332gl7mqf] {
    padding: 0.75rem 0;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.8125rem;
    margin: 0;
}

.ht-timeline[b-k332gl7mqf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ht-event[b-k332gl7mqf] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.ht-event:last-child[b-k332gl7mqf] {
    border-bottom: none;
}

.ht-avatar[b-k332gl7mqf] {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-brand-accent, #a0edf7);
    color: var(--color-brand, #074684);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.ht-body[b-k332gl7mqf] {
    min-width: 0;
    flex: 1 1 auto;
}

.ht-headline[b-k332gl7mqf] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.1875rem;
    font-size: 0.8125rem;
}

.ht-when[b-k332gl7mqf] {
    color: var(--color-text-secondary, #94a3b8);
    font-size: 0.75rem;
    white-space: nowrap;
}

.ht-message[b-k332gl7mqf] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-primary, #0f172a);
}

.ht-meta[b-k332gl7mqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
}

.ht-tag[b-k332gl7mqf] {
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--color-surface-raised, #f1f5f9);
    color: var(--color-text-secondary, #475569);
    font-size: 0.6875rem;
}

.ht-tag--quiet[b-k332gl7mqf] {
    background: transparent;
    border: 1px solid var(--color-border, #e2e8f0);
}

/* Distinguishes a row the portal itself recorded from one read straight out of DocMX's own log. */
.ht-tag--portal[b-k332gl7mqf] {
    background: var(--color-brand-accent, #a0edf7);
    color: var(--color-brand, #074684);
    font-weight: 600;
}

.ht-toggle[b-k332gl7mqf] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

.ht-values[b-k332gl7mqf] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0 0 0.75rem;
    border-left: 2px solid var(--color-border, #e2e8f0);
}

.ht-values li[b-k332gl7mqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.1875rem 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.ht-value-type[b-k332gl7mqf] {
    font-weight: 600;
    color: var(--color-text-secondary, #475569);
}

.ht-value-action[b-k332gl7mqf] {
    color: var(--color-text-secondary, #64748b);
}

.ht-value-message[b-k332gl7mqf] {
    color: var(--color-text-primary, #0f172a);
}

/* What happened — the row's primary label, so it reads first. */
.ht-tag--change[b-k332gl7mqf] {
    color: var(--color-text-primary, #0f172a);
    font-weight: 600;
}

.ht-filters[b-k332gl7mqf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ht-filter[b-k332gl7mqf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
}

.ht-filter-label[b-k332gl7mqf] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #475569);
}

.ht-control[b-k332gl7mqf] {
    box-sizing: border-box;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.375rem;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #0f172a);
    font-size: 0.8125rem;
}

.ht-control:focus[b-k332gl7mqf] {
    outline: 2px solid var(--color-brand, #074684);
    outline-offset: 1px;
}

.ht-clear[b-k332gl7mqf] {
    height: 2rem;
}

.ht-count[b-k332gl7mqf] {
    margin: 0 0 0.25rem;
    color: var(--color-text-secondary, #64748b);
    font-size: 0.75rem;
}

.ht-day + .ht-day[b-k332gl7mqf] {
    margin-top: 0.5rem;
}

.ht-day-heading[b-k332gl7mqf] {
    margin: 0;
    padding: 0.5rem 0 0.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    color: var(--color-text-secondary, #475569);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ht-more[b-k332gl7mqf] {
    margin-top: 0.75rem;
}
/* /Components/Shared/ListEditor.razor.rz.scp.css */
/* Chips for the entries, the shared .form-input for the add field. The chip
   shape follows the badge convention in app.css — pill radius, small type —
   without borrowing .badge itself, which is uppercase and meant for status. */

.lst[b-cjmsl1a6vv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lst-items[b-cjmsl1a6vv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lst-item[b-cjmsl1a6vv] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.35rem 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: var(--color-surface-raised);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    max-width: 100%;
}

.lst-item-text[b-cjmsl1a6vv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lst-remove[b-cjmsl1a6vv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.lst-remove:hover[b-cjmsl1a6vv] {
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.lst-remove:focus-visible[b-cjmsl1a6vv] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.lst-empty[b-cjmsl1a6vv] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.lst-add[b-cjmsl1a6vv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lst-input[b-cjmsl1a6vv] {
    flex: 1 1 12rem;
    min-width: 8rem;
    font-size: 0.875rem;
}

.lst-add-btn[b-cjmsl1a6vv] {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
    .lst-remove[b-cjmsl1a6vv] { transition: none; }
}
/* /Components/Shared/LookupSelect.razor.rz.scp.css */
/* The global .form-input strips the native chevron from selects; a picker
   needs it, or it reads as a text box that refuses to be typed in. */
select.lookup-select[b-slw98iu0xe] {
    appearance: auto;
    cursor: pointer;
}

select.lookup-select:disabled[b-slw98iu0xe] {
    cursor: default;
}

.lookup-note[b-slw98iu0xe] {
    display: block;
    margin-top: 0.25rem;
}
/* /Components/Shared/MembershipOverlap.razor.rz.scp.css */
/* UA9 (#834): membership overlap — a small set diagram (decorative) beside an accessible region
   list, then one page of the chosen region's people. Set colours are token-based and translucent. */

.mov[b-eor55tq4gj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mov-title[b-eor55tq4gj] {
    margin: 0;
    font-size: 1.125rem;
}

.mov-sub[b-eor55tq4gj],
.mov-hint[b-eor55tq4gj] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.mov-grid[b-eor55tq4gj] {
    display: grid;
    /* Side pane width comes from the PaneSplitter between the two panes (--pane-split, set in
       the browser and remembered per browser); 22rem until the user drags it. */
    grid-template-columns: var(--pane-split, 22rem) auto minmax(0, 1fr);
    gap: 0.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .mov-grid[b-eor55tq4gj] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .mov-grid[b-eor55tq4gj]  .psp {
        display: none;
    }
}

.mov-pickers[b-eor55tq4gj] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mov-card[b-eor55tq4gj],
.mov-result[b-eor55tq4gj] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.mov-card-title[b-eor55tq4gj] {
    margin: 0;
    font-size: 0.9375rem;
}

.mov-chips[b-eor55tq4gj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mov-chip[b-eor55tq4gj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem 0.3rem 0.3rem;
    border-radius: 0.4rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
}

.mov-letter[b-eor55tq4gj] {
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    color: var(--color-surface);
    font-weight: 600;
    font-size: 0.75rem;
}

.mov-chip--a .mov-letter[b-eor55tq4gj] { background: var(--color-brand); }
.mov-chip--b .mov-letter[b-eor55tq4gj] { background: var(--color-brand-teal); }
.mov-chip--c .mov-letter[b-eor55tq4gj] { background: var(--color-degraded); }

.mov-chip-name[b-eor55tq4gj] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mov-chip-x[b-eor55tq4gj] {
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.mov-chip-x:hover[b-eor55tq4gj],
.mov-chip-x:focus-visible[b-eor55tq4gj] {
    color: var(--color-text-primary);
}

.mov-preset-run[b-eor55tq4gj] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.mov-preset-msg[b-eor55tq4gj] {
    margin: 0;
    font-size: 0.8125rem;
}

.mov-preset-msg--warn[b-eor55tq4gj] {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    border: 1px solid var(--status-warning-border);
}

.mov-empty[b-eor55tq4gj] {
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
}

.mov-diagram-row[b-eor55tq4gj] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
}

.mov-venn[b-eor55tq4gj] {
    width: 300px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.mov-set[b-eor55tq4gj] {
    stroke-width: 1.5;
    fill-opacity: 0.16;
}

.mov-set--a[b-eor55tq4gj] { fill: var(--color-brand); stroke: var(--color-brand); }
.mov-set--b[b-eor55tq4gj] { fill: var(--color-brand-teal); stroke: var(--color-brand-teal); }
.mov-set--c[b-eor55tq4gj] { fill: var(--color-degraded); stroke: var(--color-degraded); }

.mov-set-letter[b-eor55tq4gj] {
    font-size: 12px;
    font-weight: 600;
    fill: var(--color-text-secondary);
}

.mov-spot[b-eor55tq4gj] {
    font-size: 13px;
    font-weight: 500;
    fill: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.mov-spot--on[b-eor55tq4gj] {
    font-weight: 700;
    text-decoration: underline;
}

.mov-regions[b-eor55tq4gj] {
    flex: 1 1 18rem;
    min-width: 0;
}

.mov-regions ul[b-eor55tq4gj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mov-union[b-eor55tq4gj],
.mov-readat[b-eor55tq4gj] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mov-readat[b-eor55tq4gj] {
    margin: 0.5rem 0 0;
}

.mov-region[b-eor55tq4gj] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.4rem;
    background: var(--color-surface);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.mov-region:hover[b-eor55tq4gj] {
    border-color: var(--color-brand);
}

.mov-region:focus-visible[b-eor55tq4gj] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 1px;
}

.mov-region--on[b-eor55tq4gj] {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
}

.mov-region-key[b-eor55tq4gj] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    min-width: 2rem;
}

.mov-region-label[b-eor55tq4gj] {
    flex: 1;
    min-width: 0;
}

.mov-region-count[b-eor55tq4gj] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mov-members[b-eor55tq4gj] {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mov-members-head[b-eor55tq4gj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.mov-q[b-eor55tq4gj] {
    flex: 1 1 14rem;
    max-width: 20rem;
}

.mov-members-total[b-eor55tq4gj] {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.mov-table[b-eor55tq4gj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mov-table th[b-eor55tq4gj],
.mov-table td[b-eor55tq4gj] {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.mov-table thead th[b-eor55tq4gj] {
    background: var(--color-surface-raised);
    font-weight: 600;
}

.mov-person[b-eor55tq4gj] {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-brand);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.mov-person:hover[b-eor55tq4gj],
.mov-person:focus-visible[b-eor55tq4gj] {
    text-decoration: underline;
}

.mov-pager[b-eor55tq4gj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}
/* /Components/Shared/MonitorPage.razor.rz.scp.css */
.mp[b-ajmcpplmjz] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mp-header[b-ajmcpplmjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mp-actions[b-ajmcpplmjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.mp-kpis[b-ajmcpplmjz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.mp-trend[b-ajmcpplmjz],
.mp-grid[b-ajmcpplmjz] {
    min-width: 0;
}

.mp-facets[b-ajmcpplmjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* MON4/MON5: an optional tab strip under the header. */
.mp-tabs[b-ajmcpplmjz] {
    margin-top: -0.25rem;
}
/* /Components/Shared/MonitorStatusTrend.razor.rz.scp.css */
.mst[b-6nzw9w65h6] {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mst-caption[b-6nzw9w65h6] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mst-empty[b-6nzw9w65h6] {
    margin: 0;
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.mst-chart[b-6nzw9w65h6] {
    display: block;
    width: 100%;
    height: 7.5rem;
}

.mst-axis[b-6nzw9w65h6] {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.mst-legend[b-6nzw9w65h6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.mst-legend-item[b-6nzw9w65h6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mst-swatch[b-6nzw9w65h6] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
}

.mst-seg--healthy[b-6nzw9w65h6] { fill: var(--color-healthy); background: var(--color-healthy); }
.mst-seg--running[b-6nzw9w65h6] { fill: var(--color-brand-teal); background: var(--color-brand-teal); }
.mst-seg--waiting[b-6nzw9w65h6] { fill: var(--color-brand-accent); background: var(--color-brand-accent); }
.mst-seg--warning[b-6nzw9w65h6] { fill: var(--color-degraded); background: var(--color-degraded); }
.mst-seg--failed[b-6nzw9w65h6] { fill: var(--color-down); background: var(--color-down); }
.mst-seg--cancelled[b-6nzw9w65h6] { fill: var(--color-unknown); background: var(--color-unknown); }
.mst-seg--other[b-6nzw9w65h6] { fill: var(--color-border); background: var(--color-border); }
/* /Components/Shared/PaneSplitter.razor.rz.scp.css */
/* The draggable divider. A 12px hit area with a slim visible grip; tokens only. */

.psp[b-980bpojx7e] {
    position: relative;
    align-self: stretch;
    width: 12px;
    min-height: 3rem;
    cursor: col-resize;
    touch-action: none;
    border-radius: 6px;
    outline: none;
}

.psp-grip[b-980bpojx7e] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 2.5rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--color-border, #e2e8f0);
    transition: background-color 120ms ease, height 120ms ease;
}

.psp:hover .psp-grip[b-980bpojx7e],
.psp:focus-visible .psp-grip[b-980bpojx7e],
.psp.psp--dragging .psp-grip[b-980bpojx7e] {
    height: 4rem;
    background: var(--color-brand, #074684);
}

.psp:focus-visible[b-980bpojx7e] {
    box-shadow: 0 0 0 2px var(--color-brand-soft, rgba(7, 70, 132, 0.2));
}

@media (prefers-reduced-motion: reduce) {
    .psp-grip[b-980bpojx7e] {
        transition: none;
    }
}
/* /Components/Shared/ReadOnlyReason.razor.rz.scp.css */
.ro-reason[b-mnrqiyloxg] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ro-reason[b-mnrqiyloxg]  svg {
    flex: none;
    margin-top: 0.15rem;
}

.ro-reason a[b-mnrqiyloxg] {
    color: var(--color-brand);
    text-decoration: underline;
}
/* /Components/Shared/ReadStateBanner.razor.rz.scp.css */
.rsb[b-qrlurncu7b] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.rsb-text[b-qrlurncu7b] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.rsb-text span[b-qrlurncu7b] {
    color: var(--color-text-secondary);
}

.rsb--stale[b-qrlurncu7b],
.rsb--capped[b-qrlurncu7b] {
    border-left-color: var(--color-degraded);
}

.rsb--unavailable[b-qrlurncu7b] {
    border-left-color: var(--color-down);
}

.rsb--noaccess[b-qrlurncu7b],
.rsb--notonthissite[b-qrlurncu7b] {
    border-left-color: var(--color-unknown);
}
/* /Components/Shared/RelationshipMap.razor.rz.scp.css */
/*  UA3 (#828): the relationship map. Tokens only, so a dark theme that redefines the tokens
    restyles the lines and chips with everything else. Same look as TaxonomyMap on purpose. */

.rmap[b-jghakuqobz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    container-type: inline-size;
}

.rmap-status[b-jghakuqobz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.rmap-muted[b-jghakuqobz] {
    color: var(--color-text-secondary);
}

.rmap-spin[b-jghakuqobz] {
    animation: rmap-spin-b-jghakuqobz 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .rmap-spin[b-jghakuqobz] { animation: none; }
}

.rmap-stage[b-jghakuqobz] {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 620;
    max-height: 26rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-brand-teal) 7%, transparent) 0, transparent 46%),
        var(--color-surface-raised);
}

.rmap-lines[b-jghakuqobz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rmap-line[b-jghakuqobz] {
    stroke: var(--color-brand-teal);
    stroke-width: 1.5;
    opacity: 0.7;
    vector-effect: non-scaling-stroke;
}

.rmap-line--in[b-jghakuqobz] {
    stroke: var(--color-text-secondary);
    stroke-dasharray: 5 4;
    opacity: 0.6;
}

.rmap-line--unavailable[b-jghakuqobz] {
    stroke: var(--color-degraded);
    stroke-dasharray: 2 4;
}

.rmap-hub[b-jghakuqobz] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 260px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--color-brand);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.rmap-hub-icon[b-jghakuqobz] {
    display: inline-flex;
    color: var(--color-brand);
    flex: none;
}

.rmap-hub-body[b-jghakuqobz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rmap-hub-name[b-jghakuqobz] {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rmap-role[b-jghakuqobz] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.rmap-node[b-jghakuqobz] {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 210px;
    z-index: 1;
}

.rmap-chip[b-jghakuqobz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 210px;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
    font-size: 0.78rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

a.rmap-chip:hover[b-jghakuqobz],
a.rmap-chip:focus-visible[b-jghakuqobz] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    outline: none;
}

.rmap-chip--unavailable[b-jghakuqobz] {
    border-style: dashed;
    border-color: var(--color-degraded);
    color: var(--color-text-secondary);
}

.rmap-chip-icon[b-jghakuqobz] {
    display: inline-flex;
    color: var(--color-text-secondary);
    flex: none;
}

.rmap-chip-name[b-jghakuqobz] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rmap-chip-detail[b-jghakuqobz] {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.rmap-chip-detail[b-jghakuqobz]::before {
    content: "·";
    margin-right: 0.35rem;
}

.rmap-node .rmap-chip-detail[b-jghakuqobz] {
    display: none;
}

.rmap-empty[b-jghakuqobz] {
    position: absolute;
    left: 50%;
    top: 78%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.rmap-list[b-jghakuqobz] {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 0.4rem;
}

.rmap-list-item[b-jghakuqobz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface);
}

.rmap-list-item .rmap-role[b-jghakuqobz] {
    min-width: 9rem;
}

.rmap-list-item .rmap-chip[b-jghakuqobz] {
    white-space: normal;
    max-width: 100%;
    font-size: 0.85rem;
    box-shadow: none;
}

.rmap-list-empty[b-jghakuqobz] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .rmap-stage[b-jghakuqobz] { display: none; }
    .rmap-list[b-jghakuqobz] { display: flex; }
}

@container (max-width: 30rem) {
    .rmap-stage[b-jghakuqobz] { display: none; }
    .rmap-list[b-jghakuqobz] { display: flex; }
}

.rmap-foot[b-jghakuqobz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.rmap-legend[b-jghakuqobz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rmap-swatch[b-jghakuqobz] {
    display: inline-block;
    width: 1.4rem;
    height: 0;
    border-top: 2px solid var(--color-brand-teal);
}

.rmap-swatch--in[b-jghakuqobz] {
    border-top: 2px dashed var(--color-text-secondary);
}

.rmap-legend-note[b-jghakuqobz] {
    margin-left: auto;
    font-style: italic;
}
/* /Components/Shared/RolePicker.razor.rz.scp.css */
/* UA0 (#825): the shared role picker — search, type chips, a virtualised list in a bounded box. */

.rpk[b-otcbd4jdz1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rpk-search[b-otcbd4jdz1] {
    width: 100%;
}

.rpk-types[b-otcbd4jdz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rpk-type[b-otcbd4jdz1] {
    padding: 2px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.rpk-type--on[b-otcbd4jdz1] {
    border-color: var(--color-brand);
    background: var(--color-surface-raised);
    color: var(--color-brand);
    font-weight: 600;
}

.rpk-list[b-otcbd4jdz1] {
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    padding: 4px;
}

.rpk-option[b-otcbd4jdz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}

.rpk-option--active[b-otcbd4jdz1] {
    background: var(--color-surface-raised);
    outline: 1px solid var(--color-brand-teal);
}

.rpk-option--selected[b-otcbd4jdz1] {
    background: var(--color-surface-raised);
}

.rpk-option--taken[b-otcbd4jdz1] {
    cursor: default;
    opacity: 0.65;
}

.rpk-check[b-otcbd4jdz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-brand);
    font-size: 12px;
}

.rpk-meta[b-otcbd4jdz1] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.rpk-taken[b-otcbd4jdz1] {
    font-style: italic;
}

.rpk-empty[b-otcbd4jdz1] {
    margin: 0;
    padding: 8px;
    color: var(--color-text-secondary);
}

.rpk-status[b-otcbd4jdz1] {
    margin: 0;
}

.rpk-status--error[b-otcbd4jdz1] {
    color: var(--color-down);
}

.rpk-empty--error[b-otcbd4jdz1] {
    color: var(--color-down);
}
/* /Components/Shared/SaveBar.razor.rz.scp.css */
/* Sticky commit bar. Same footprint as .wfsel-actionbar in app.css — sticky to
   the bottom of the scroll container with a white fade beneath it — but carrying
   state and a note rather than only buttons. */

.sbar[b-stuxpd7t3t] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

.sbar-state[b-stuxpd7t3t] {
    flex: 0 1 auto;
    min-width: 0;
}

.sbar-status[b-stuxpd7t3t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

.sbar-status--dirty[b-stuxpd7t3t] {
    color: var(--color-text-secondary);
}

.sbar-status--busy[b-stuxpd7t3t] {
    color: var(--color-brand);
}

.sbar-status--ok[b-stuxpd7t3t] {
    color: var(--status-success-fg);
}

.sbar-status--error[b-stuxpd7t3t] {
    color: var(--status-error-fg);
}

.sbar-status--busy[b-stuxpd7t3t]  .sbar-spin {
    animation: sbar-spin-b-stuxpd7t3t 1s linear infinite;
}

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

/* ── Note ────────────────────────────────────────────────────────────────── */

.sbar-note[b-stuxpd7t3t] {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.sbar-note-input[b-stuxpd7t3t] {
    width: 100%;
    font-size: 0.875rem;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */

.sbar-actions[b-stuxpd7t3t] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
    flex-shrink: 0;
}

.sbar-save[b-stuxpd7t3t] {
    min-width: 8rem;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .sbar-status--busy[b-stuxpd7t3t]  .sbar-spin { animation: none; }
}
/* /Components/Shared/SavedViews.razor.rz.scp.css */
.sv[b-kcxwrz3ng6] {
    position: relative;
    display: inline-block;
}

.sv-toggle[b-kcxwrz3ng6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sv-count[b-kcxwrz3ng6] {
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.sv-panel[b-kcxwrz3ng6] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.375rem);
    z-index: 30;
    width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sv-empty[b-kcxwrz3ng6] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.sv-list[b-kcxwrz3ng6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 14rem;
    overflow-y: auto;
}

.sv-item[b-kcxwrz3ng6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sv-apply[b-kcxwrz3ng6] {
    flex: 1;
    text-align: left;
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-brand);
    cursor: pointer;
}

.sv-apply:hover[b-kcxwrz3ng6],
.sv-apply:focus-visible[b-kcxwrz3ng6] {
    background: var(--color-surface-raised);
}

.sv-delete[b-kcxwrz3ng6] {
    display: inline-flex;
    padding: 0.375rem;
    border: none;
    border-radius: calc(var(--radius) * 0.5);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.sv-delete:hover[b-kcxwrz3ng6],
.sv-delete:focus-visible[b-kcxwrz3ng6] {
    color: var(--color-down);
    background: var(--status-error-bg);
}

.sv-save[b-kcxwrz3ng6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}

.sv-save-label[b-kcxwrz3ng6] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.sv-save-row[b-kcxwrz3ng6] {
    display: flex;
    gap: 0.5rem;
}

.sv-message[b-kcxwrz3ng6] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--status-success-fg);
}

.sv-message--error[b-kcxwrz3ng6] {
    color: var(--status-error-fg);
}
/* /Components/Shared/SeatBar.razor.rz.scp.css */
/* UA8 (#833): licence seat bar. */

.sb[b-q23i14vaoo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
    min-width: 0;
}

.sb .sb-track[b-q23i14vaoo] {
    position: relative;
    flex: 0 0 10rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.sb.sb--compact .sb-track[b-q23i14vaoo] {
    flex-basis: 6rem;
}

.sb .sb-fill[b-q23i14vaoo] {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--color-brand-teal);
}

.sb.sb--full .sb-fill[b-q23i14vaoo] {
    background: var(--color-degraded);
}

.sb.sb--overallocated .sb-fill[b-q23i14vaoo] {
    background: var(--color-down);
}

.sb .sb-text[b-q23i14vaoo] {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sb.sb--overallocated .sb-text[b-q23i14vaoo] {
    color: #b91c1c;
    font-weight: 600;
}

.sb.sb--unknown .sb-text[b-q23i14vaoo],
.sb.sb--uncounted .sb-text[b-q23i14vaoo] {
    color: var(--color-text-secondary);
}

.sb .sb-stored[b-q23i14vaoo] {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}
/* /Components/Shared/SecretInput.razor.rz.scp.css */
/* Uses the shared .form-label, .form-input, .form-hint and button classes from
   app.css; only the state line and the row layout are new. */

.sec[b-ke9fsimu5r] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sec-row[b-ke9fsimu5r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sec-input[b-ke9fsimu5r] {
    flex: 1 1 14rem;
    min-width: 10rem;
}

.sec-btn[b-ke9fsimu5r] {
    flex-shrink: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
}

.sec-btn--clear[b-ke9fsimu5r] {
    color: var(--status-error-fg);
}

.sec-state[b-ke9fsimu5r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--color-surface-raised);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.sec-state--set[b-ke9fsimu5r] {
    color: var(--color-text-primary);
}

.sec-state--unset[b-ke9fsimu5r] {
    color: var(--color-text-secondary);
}
/* /Components/Shared/Stepper.razor.rz.scp.css */
/* A horizontal progress rail. Nothing in app.css covered multi-step tasks, so
   this is new CSS — but it borrows the surface, hairline and micro-label
   conventions the rest of the app uses. */

.stp[b-wn61sa2ozv] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
}

.stp-list[b-wn61sa2ozv] {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stp-item[b-wn61sa2ozv] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 9rem;
}

.stp-step[b-wn61sa2ozv] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) * 0.75);
    background: none;
    font-family: var(--font-body);
    text-align: left;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stp-step:hover:not([aria-disabled="true"])[b-wn61sa2ozv] {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}

.stp-step:focus-visible[b-wn61sa2ozv] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: 2px;
}

.stp-step[aria-disabled="true"][b-wn61sa2ozv] {
    cursor: not-allowed;
}

/* ── The numbered / ticked marker ────────────────────────────────────────── */

.stp-marker[b-wn61sa2ozv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.stp-text[b-wn61sa2ozv] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.stp-label[b-wn61sa2ozv] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The written state — the icon and the colour both repeat it, never replace it. */
.stp-state[b-wn61sa2ozv] {
    font-family: var(--font-subtitle);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* ── States ──────────────────────────────────────────────────────────────── */

.stp-step--complete .stp-marker[b-wn61sa2ozv] {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-fg);
}

.stp-step--complete .stp-state[b-wn61sa2ozv] {
    color: var(--status-success-fg);
}

.stp-step--current[b-wn61sa2ozv] {
    background: color-mix(in srgb, var(--color-brand) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-brand) 25%, transparent);
}

.stp-step--current .stp-marker[b-wn61sa2ozv] {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-surface);
}

.stp-step--current .stp-state[b-wn61sa2ozv] {
    color: var(--color-brand);
}

.stp-step--blocked .stp-marker[b-wn61sa2ozv] {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-fg);
}

.stp-step--blocked .stp-label[b-wn61sa2ozv] {
    color: var(--color-text-secondary);
}

.stp-step--blocked .stp-state[b-wn61sa2ozv] {
    color: var(--status-warning-fg);
}

/* Visible next to the step and referenced by aria-describedby, so the reason a
   step cannot be entered is available whichever way you are reading. */
.stp-reason[b-wn61sa2ozv] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--status-warning-fg);
    padding: 0 0.625rem 0.25rem 2.55rem;
}

@media (prefers-reduced-motion: reduce) {
    .stp-step[b-wn61sa2ozv] { transition: none; }
}
/* /Components/Shared/SwitchSystemDialog.razor.rz.scp.css */
/* Sits inside ConfirmDialog's message area; borrows its type and spacing. */

.ssd-muted[b-kfowuisxaj] { color: var(--color-text-secondary); margin: 0; }

.ssd-picker[b-kfowuisxaj] { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }

.ssd-pick[b-kfowuisxaj] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--color-text-primary);
}
.ssd-pick:hover[b-kfowuisxaj], .ssd-pick:focus-visible[b-kfowuisxaj] { border-color: var(--color-brand-teal); outline: none; }

.ssd-fromto[b-kfowuisxaj] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem;
    background: var(--color-bg, #F3F5F7);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}
.ssd-system[b-kfowuisxaj] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ssd-label[b-kfowuisxaj] { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.ssd-badge[b-kfowuisxaj] { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ssd-arrow[b-kfowuisxaj] { align-self: center; color: var(--color-text-secondary); font-size: 1.1rem; }
.ssd-dot[b-kfowuisxaj] { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.ssd-name[b-kfowuisxaj] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssd-tag[b-kfowuisxaj] { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.05rem 0.35rem; border-radius: 3px; background: var(--color-border); color: var(--color-text-primary); }
.ssd-host[b-kfowuisxaj] { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ssd-ack[b-kfowuisxaj] { border-left: 3px solid var(--status-error-border, #A3312E); padding: 0.5rem 0.75rem; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ssd-prod-note[b-kfowuisxaj] { margin: 0; }
.ssd-ack-row[b-kfowuisxaj] { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.ssd-ack-row input[b-kfowuisxaj] { margin-top: 0.2rem; }

.ssd-link[b-kfowuisxaj] { background: none; border: none; padding: 0; color: var(--color-brand-teal); cursor: pointer; font: inherit; text-decoration: underline; }
/* /Components/Shared/SystemCapabilityList.razor.rz.scp.css */
.capability-list[b-mnrq2bp91f] {
    padding: 0;
    margin: 0;
}

.capability-list-heading[b-mnrq2bp91f] {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.capability-list-empty[b-mnrq2bp91f] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
    font-style: italic;
}

.capability-list-items[b-mnrq2bp91f] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.capability-item[b-mnrq2bp91f] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.875rem;
}

.capability-glyph[b-mnrq2bp91f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.capability-glyph--available[b-mnrq2bp91f] {
    color: var(--color-brand-teal);
}

.capability-glyph--unavailable[b-mnrq2bp91f] {
    color: var(--color-text-secondary);
}

.capability-glyph--unknown[b-mnrq2bp91f] {
    color: var(--color-degraded);
}

.capability-content[b-mnrq2bp91f] {
    flex: 1;
    min-width: 0;
}

.capability-name[b-mnrq2bp91f] {
    color: var(--color-text-primary);
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.capability-reason[b-mnrq2bp91f] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

.capability-checked[b-mnrq2bp91f] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.capability-recheck[b-mnrq2bp91f] {
    margin-top: 1rem;
}

/* ── Compact (the badge popover) ─────────────────────────────────────
   One dense line per capability: the reason is truncated with the full text
   in the row's title, and the checked-time is folded into the tooltip. */

.capability-list--compact .capability-list-items[b-mnrq2bp91f] {
    gap: 0.1rem;
    margin-bottom: 0.5rem;
}

.capability-list--compact .capability-item[b-mnrq2bp91f] {
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.8125rem;
}

.capability-list--compact .capability-name[b-mnrq2bp91f] {
    margin-bottom: 0;
}

.capability-list--compact .capability-reason[b-mnrq2bp91f] {
    margin-top: 0;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capability-list--compact .capability-checked[b-mnrq2bp91f] {
    display: none;
}
/* /Components/Shared/TabStrip.razor.rz.scp.css */
/* Primary tabs, style guide 6.6: 2px navy indicator, secondary text when
   inactive, primary text on hover. Modelled on the .usage-tab rules in app.css,
   which are the same pattern named for one feature. */

.ts[b-7jcq8a9sxp] {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;

    /* Never let the strip be the thing that gives.
       `overflow-x: auto` makes overflow-y compute to `auto` as well, and a flex
       item whose overflow is not `visible` loses its content-based automatic
       minimum size — it may shrink to zero. Inside a column flex container that
       has to fit a fixed height (an import detail page with a tall Overview,
       say), the strip was then the only sibling allowed to shrink past its
       content and was crushed to its 1px border, with the panel painting over
       it. It still read correctly to assistive tech and to a scripted click, so
       only a real mouse could tell: hit-testing the "Mapping" tab resolved to
       the panel underneath and tabs could not be changed at all. */
    flex-shrink: 0;
}

.ts-tab[b-7jcq8a9sxp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: var(--font-subtitle);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.ts-tab:hover:not([aria-disabled="true"])[b-7jcq8a9sxp] {
    color: var(--color-text-primary);
}

.ts-tab:focus-visible[b-7jcq8a9sxp] {
    outline: 2px solid var(--color-brand-teal);
    outline-offset: -2px;
}

.ts-tab--active[b-7jcq8a9sxp] {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
}

.ts-tab[aria-disabled="true"][b-7jcq8a9sxp] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ts-count[b-7jcq8a9sxp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ts-tab--active .ts-count[b-7jcq8a9sxp] {
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
}

@media (prefers-reduced-motion: reduce) {
    .ts-tab[b-7jcq8a9sxp] { transition: none; }
}
/* /Components/Shared/TaxonomyRef.razor.rz.scp.css */
/* Taxonomy TX0 (#800): the reference chip. Tokens only (style guide §11). */

.txr[b-8p2xldy9zr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.1rem 0.5rem 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 0.85rem;
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}

.txr--link:hover[b-8p2xldy9zr],
.txr--link:focus-visible[b-8p2xldy9zr] {
    border-color: var(--color-brand);
    color: var(--color-brand);
    box-shadow: 0 0 0 2px var(--color-brand-soft, rgba(14, 138, 138, 0.15));
    outline: none;
}

.txr-icon[b-8p2xldy9zr] {
    display: inline-flex;
    color: var(--color-text-muted);
    flex: none;
}

.txr--link:hover .txr-icon[b-8p2xldy9zr],
.txr--link:focus-visible .txr-icon[b-8p2xldy9zr] {
    color: var(--color-brand);
}

.txr-name[b-8p2xldy9zr] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.txr-detail[b-8p2xldy9zr] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.txr-detail[b-8p2xldy9zr]::before {
    content: "·";
    margin-right: 0.35rem;
}

.txr--unset[b-8p2xldy9zr] {
    border: none;
    padding: 0;
    background: none;
    color: var(--color-text-muted);
}

.txr--unknown[b-8p2xldy9zr] {
    border-style: dashed;
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
}

.txr-note[b-8p2xldy9zr] {
    font-family: var(--font-sans, inherit);
}

.txr--pending[b-8p2xldy9zr] {
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
}
/* /Components/Shared/TimeWindowPicker.razor.rz.scp.css */
.twp[b-nj2c2glgnh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.twp-presets[b-nj2c2glgnh] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
}

.twp-pill[b-nj2c2glgnh] {
    border: 0;
    border-right: 1px solid var(--color-border);
    background: transparent;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.twp-pill:last-child[b-nj2c2glgnh] {
    border-right: 0;
}

.twp-pill:hover[b-nj2c2glgnh] {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.twp-pill:focus-visible[b-nj2c2glgnh] {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.twp-pill--on[b-nj2c2glgnh] {
    background: var(--color-brand);
    color: #ffffff;
}

.twp-pill--on:hover[b-nj2c2glgnh] {
    background: var(--color-brand);
    color: #ffffff;
}

.twp-custom[b-nj2c2glgnh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.twp-field[b-nj2c2glgnh] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.twp-field input[b-nj2c2glgnh] {
    font-size: 0.8125rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.twp-note[b-nj2c2glgnh] {
    font-size: 0.75rem;
    color: #92400e;
}
/* /Components/Shared/UiIcon.razor.rz.scp.css */
.ui-icon[b-hue2y8milj] {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
/* /Components/Shared/UserPeek.razor.rz.scp.css */
/* UA1 (#826): the read-only user quick look, inside the shared Drawer. */

.up-identity[b-xya57ugyhd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.up-avatar[b-xya57ugyhd] {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-brand);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
}

.up-identity-text[b-xya57ugyhd] {
    font-size: 13px;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.up-badges[b-xya57ugyhd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.up-section[b-xya57ugyhd] {
    margin-bottom: 20px;
}

.up-section-title[b-xya57ugyhd] {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.up-section-count[b-xya57ugyhd] {
    font-weight: 400;
}

.up-facts[b-xya57ugyhd] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
}

.up-facts dt[b-xya57ugyhd] {
    color: var(--color-text-secondary);
}

.up-facts dd[b-xya57ugyhd] {
    margin: 0;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.up-inline-badge[b-xya57ugyhd] {
    margin-left: 6px;
}

.up-status[b-xya57ugyhd] {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.up-error[b-xya57ugyhd] {
    margin: 0;
    font-size: 13px;
    color: var(--color-down);
}

.up-role-list[b-xya57ugyhd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.up-role-row[b-xya57ugyhd] {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
}

.up-role-row:hover[b-xya57ugyhd] {
    background: var(--color-surface-raised);
}

.up-role-row--static:hover[b-xya57ugyhd] {
    background: none;
}

.up-open-full[b-xya57ugyhd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
/* /Components/Shared/UserPicker.razor.rz.scp.css */
/* UA0 (#825): the shared user typeahead. A dropdown under the input, never a page-length list. */

.upk[b-87wjpkah7k] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.upk-input[b-87wjpkah7k] {
    width: 100%;
}

/* In flow, not an absolutely positioned dropdown: the picker lives inside cards, drawers and
   inspector panels that clip overflow, and a clipped suggestion list is worse than one that
   pushes the content below it down. */
.upk-list[b-87wjpkah7k] {
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.upk-option[b-87wjpkah7k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.upk-option--active[b-87wjpkah7k] {
    background: var(--color-surface-raised);
    outline: 1px solid var(--color-brand-teal);
}

.upk-option--taken[b-87wjpkah7k] {
    cursor: default;
    opacity: 0.7;
}

.upk-option-main[b-87wjpkah7k] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.upk-option-name[b-87wjpkah7k] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upk-option-user[b-87wjpkah7k] {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.upk-option-meta[b-87wjpkah7k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.upk-option-taken[b-87wjpkah7k] {
    font-style: italic;
}

.upk-status[b-87wjpkah7k] {
    margin: 0;
    min-height: 1.2em;
}

.upk-status--error[b-87wjpkah7k] {
    color: var(--color-down);
}