/* /Components/Layout/BmTweaksPanel.razor.rz.scp.css */
/* Floating-tweaks-panel scoped styles. Most visual tokens are defined in
   wwwroot/app.css under the .bm-* family; this file only handles layout +
   positioning + the swatch chips. */

.bm-tweaks-root[b-iou91ao8re] {
    /* Anchor under the topbar (avatar lives there) so the panel drops down
       from the upper-right corner. The FAB has been retired — opening is
       now driven by the avatar menu via TweaksUiState. */
    position: fixed;
    right: 14px;
    top: 56px;
    z-index: 200;
    font-family: var(--bm-font-display, var(--font-sans));
    color: var(--bm-ink);
}

.bm-tweaks-fab[b-iou91ao8re] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--bm-line-2, var(--border-strong));
    background: var(--bm-surface, var(--surface-card));
    color: var(--bm-ink-2, var(--ink-secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--bm-shadow-md, var(--shadow-md));
    transition: transform .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}

.bm-tweaks-fab:hover[b-iou91ao8re] {
    color: var(--bm-ink, var(--ink-primary));
    border-color: var(--bm-accent, var(--accent));
    transform: translateY(-1px);
}

.bm-tweaks-fab:focus-visible[b-iou91ao8re] {
    outline: none;
    box-shadow: 0 0 0 3px var(--bm-accent-soft, var(--accent-ring));
    border-color: var(--bm-accent, var(--accent));
}

.bm-tweaks-root.open .bm-tweaks-fab[b-iou91ao8re] {
    color: var(--bm-accent, var(--accent));
    border-color: var(--bm-accent, var(--accent));
}

.bm-tweaks-panel[b-iou91ao8re] {
    position: absolute;
    right: 0;
    top: 0;
    width: 280px;
    background: var(--bm-surface, var(--surface-card));
    border: 1px solid var(--bm-line-2, var(--border-strong));
    border-radius: var(--bm-radius, var(--radius-lg));
    box-shadow: var(--bm-shadow-md, var(--shadow-lg));
    padding: 14px 14px 12px;
    animation: bm-tweaks-rise-b-iou91ao8re .12s ease-out;
}

@keyframes bm-tweaks-rise-b-iou91ao8re {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bm-tweaks-header[b-iou91ao8re] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bm-tweaks-title[b-iou91ao8re] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bm-ink-3, var(--ink-muted));
}

.bm-tweaks-close[b-iou91ao8re] {
    background: transparent;
    border: 0;
    color: var(--bm-ink-3, var(--ink-muted));
    cursor: pointer;
    padding: 2px;
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bm-tweaks-close:hover[b-iou91ao8re] { color: var(--bm-ink, var(--ink-primary)); }

.bm-tweaks-row[b-iou91ao8re] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.bm-tweaks-row:last-of-type[b-iou91ao8re] { margin-bottom: 0; }

.bm-tweaks-label[b-iou91ao8re] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--bm-ink-2, var(--ink-secondary));
}

.bm-tweaks-segments[b-iou91ao8re] {
    display: inline-flex;
    background: var(--bm-bg-2, var(--surface-muted));
    border: 1px solid var(--bm-line, var(--border-soft));
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    padding: 2px;
    width: 100%;
}

.bm-tweaks-segment[b-iou91ao8re] {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--bm-ink-2, var(--ink-secondary));
    font: inherit;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: calc(var(--bm-radius-sm, var(--radius-sm)) - 2px);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.bm-tweaks-segment:hover[b-iou91ao8re] { color: var(--bm-ink, var(--ink-primary)); }

.bm-tweaks-segment.active[b-iou91ao8re] {
    background: var(--bm-surface, var(--surface-card));
    color: var(--bm-ink, var(--ink-primary));
    box-shadow: var(--bm-shadow-sm, var(--shadow-sm));
    font-weight: 500;
}

.bm-tweaks-swatches[b-iou91ao8re] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bm-tweaks-swatch[b-iou91ao8re] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s ease, transform .12s ease;
}

.bm-tweaks-swatch:hover[b-iou91ao8re] { transform: scale(1.05); }

.bm-tweaks-swatch.active[b-iou91ao8re] {
    border-color: var(--bm-ink, var(--ink-primary));
}

.bm-tweaks-swatch-dot[b-iou91ao8re] {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--bm-line-2, var(--border-soft));
}

/* Per-accent swatch dot fills — the actual app accent override lives in
   app.css under [data-accent="…"] and is what drives every other surface. */
.bm-tweaks-swatch.indigo .bm-tweaks-swatch-dot[b-iou91ao8re] { background: #3b3df0; }
.bm-tweaks-swatch.rust   .bm-tweaks-swatch-dot[b-iou91ao8re] { background: #C2410C; }
.bm-tweaks-swatch.forest .bm-tweaks-swatch-dot[b-iou91ao8re] { background: #15803D; }
.bm-tweaks-swatch.violet .bm-tweaks-swatch-dot[b-iou91ao8re] { background: #7E22CE; }

.bm-tweaks-foot[b-iou91ao8re] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--bm-line, var(--border-soft));
    display: flex;
    justify-content: flex-end;
}

.bm-tweaks-reset[b-iou91ao8re] {
    background: transparent;
    border: 0;
    color: var(--bm-ink-3, var(--ink-muted));
    font: inherit;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--bm-radius-sm, var(--radius-sm));
    cursor: pointer;
}

.bm-tweaks-reset:hover[b-iou91ao8re] {
    color: var(--bm-ink, var(--ink-primary));
    background: var(--bm-bg-2, var(--surface-muted));
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.bm-app[b-ym4ngsdczp] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bm-bg);
    color: var(--bm-ink);
    font-family: var(--bm-font-display);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bm-main[b-ym4ngsdczp] {
    flex: 1;
    overflow-y: auto;
    background: var(--bm-bg);
}

#blazor-error-ui[b-ym4ngsdczp] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-ym4ngsdczp] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bo12b4gzpv],
.components-reconnect-repeated-attempt-visible[b-bo12b4gzpv],
.components-reconnect-failed-visible[b-bo12b4gzpv],
.components-pause-visible[b-bo12b4gzpv],
.components-resume-failed-visible[b-bo12b4gzpv],
.components-rejoining-animation[b-bo12b4gzpv] {
    display: none;
}

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


#components-reconnect-modal[b-bo12b4gzpv] {
    background-color: var(--surface-card);
    color: var(--ink-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bo12b4gzpv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bo12b4gzpv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bo12b4gzpv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bo12b4gzpv]::backdrop {
    background-color: var(--surface-overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-bo12b4gzpv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bo12b4gzpv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bo12b4gzpv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bo12b4gzpv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bo12b4gzpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bo12b4gzpv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bo12b4gzpv] {
    border: 0;
    background-color: var(--accent);
    color: var(--ink-on-accent);
    padding: 4px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
}

    #components-reconnect-modal button:hover[b-bo12b4gzpv] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-bo12b4gzpv] {
        background-color: var(--accent-strong);
    }

.components-rejoining-animation[b-bo12b4gzpv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bo12b4gzpv] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bo12b4gzpv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bo12b4gzpv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bo12b4gzpv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ComponentDiff.razor.rz.scp.css */
/* ===== Component Diff — Reference Design Styles ===== */

/* Page-level: full-width workspace sized to the viewport below the sticky
   chrome so the document never scrolls — only the canvas inside the shell
   does. Unlike list pages this deliberately skips the 1440px container:
   the diff canvas should use every pixel, with just slim gutters. Dialog
   hosts override height/padding via ::deep. */
.cd-page[b-ocisc6iskd] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--bm-chrome-h, 94px));
    overflow: hidden;
    padding: 8px 14px 12px;
}

/* ===== Comparison-bar layout — the bar itself is the global .bm-wsbar; the exit
   button / title / type badge / Load Diff / stats are global primitives
   (.bm-btn, .bm-wsbar-title, .bm-pill, .bm-btn-accent, .bm-badge). ===== */
.cd-exit-meta[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ===== Workspace shell: one bm-card holding comparison bar + diff content ===== */
.cd-shell[b-ocisc6iskd] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Focus / Max mode: the shell takes over the whole viewport so the comparison
   bar + canvas are all that's visible, with a floating exit button. ===== */
.cd-shell--max[b-ocisc6iskd] {
    position: fixed;
    inset: 0;
    z-index: 900;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.cd-max-exit[b-ocisc6iskd] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-float);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--surface-float-border);
    color: var(--ink-secondary);
    cursor: pointer;
    box-shadow: var(--surface-float-shadow);
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.cd-max-exit:hover[b-ocisc6iskd] {
    color: var(--ink-primary);
    background: var(--surface-card);
    transform: scale(1.06);
}

.cd-bar-left[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: var(--bar-gap);
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.cd-bar-right[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: var(--bar-gap);
    flex-shrink: 0;
}

/* ===== Single-row version control (Source · in · → · Target · in · Load) =====
   Replaces the old stacked label-over-input pill so the bar stays one --bar-h row. */
.cd-version-pick[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Inspector header button: icon + an always-visible change count. */
.cd-inspector-btn[b-ocisc6iskd] {
    width: auto;
    padding: 0 9px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}
.cd-inspector-btn.active[b-ocisc6iskd] {
    background: var(--bm-surface);
    color: var(--bm-ink);
}
.cd-inspector-count[b-ocisc6iskd] {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent, #6366f1);
    background: var(--accent-soft, #eef0ff);
    border-radius: var(--radius-pill);
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}

/* Diff summary badges at the top of the Change Inspector panel. */
.cd-inspector-summary[b-ocisc6iskd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
}

.cd-ver-cap[b-ocisc6iskd] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.cd-ver-input[b-ocisc6iskd] {
    width: 52px;
    height: var(--bm-control-h);
    text-align: center;
    font-weight: 700;
    padding: 0 6px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.cd-ver-input[b-ocisc6iskd]::-webkit-inner-spin-button,
.cd-ver-input[b-ocisc6iskd]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.cd-ver-arrow[b-ocisc6iskd] { color: var(--ink-muted); flex-shrink: 0; }

.cd-stats-group[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Segmented toggle (Visual/XML, Source/Target) — sized to the shared control height */
.cd-view-toggle[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    height: var(--bm-control-h);
    background: var(--surface-muted);
    padding: 3px;
    border-radius: var(--radius-md);
    border: .5px solid var(--bm-line-2);
}

.cd-view-btn[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.cd-view-btn:hover[b-ocisc6iskd] {
    color: var(--ink-primary);
}

.cd-view-btn.active[b-ocisc6iskd] {
    background: var(--bm-surface);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Error Alert */
.cd-error-alert[b-ocisc6iskd] {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border: 1px solid var(--deleted-border);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Panel Tabs ===== */
.cd-panel-tabs[b-ocisc6iskd] {
    display: flex;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-page);
    padding: 0 0.5rem;
}

.cd-panel-tab[b-ocisc6iskd] {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.cd-panel-tab:hover[b-ocisc6iskd] {
    color: var(--ink-primary);
    background: var(--surface-muted);
}

.cd-panel-tab.active[b-ocisc6iskd] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: transparent;
}

/* ===== Change Inspector List ===== */
.cd-change-list[b-ocisc6iskd] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
}

.cd-change-item[b-ocisc6iskd] {
    padding: 11px 13px 11px 16px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}

/* Left accent bar colored by category */
.cd-change-item[b-ocisc6iskd]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.cd-change-item:has(.cd-change-addition)[b-ocisc6iskd]::before    { background: var(--added-fg); }
.cd-change-item:has(.cd-change-deletion)[b-ocisc6iskd]::before    { background: var(--deleted-fg); }
.cd-change-item:has(.cd-change-modification)[b-ocisc6iskd]::before { background: var(--modified-fg); }

.cd-change-item:hover[b-ocisc6iskd] {
    border-color: var(--accent-border);
    box-shadow: 0 2px 8px var(--accent-ring);
}

.cd-change-item.highlighted[b-ocisc6iskd] {
    background: var(--modified-bg);
    border-color: var(--modified-border);
}

.cd-change-item.highlighted[b-ocisc6iskd]::before {
    background: var(--modified-fg);
}

.cd-change-item-title-row[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.cd-change-item-title[b-ocisc6iskd] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-primary);
    line-height: 1.3;
}

.cd-change-item:hover .cd-change-item-title[b-ocisc6iskd] {
    color: var(--accent-strong);
}

.cd-change-item-desc[b-ocisc6iskd] {
    font-size: 11px;
    color: var(--ink-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

/* ── Inline from → to (short values) ── */
.cd-val-row[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.cd-val-from[b-ocisc6iskd] {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--ink-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    word-break: break-all;
    max-width: 45%;
}

.cd-val-arrow[b-ocisc6iskd] {
    color: var(--ink-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    font-weight: 700;
}

.cd-val-to[b-ocisc6iskd] {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--ink-primary);
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    word-break: break-all;
    max-width: 45%;
}

/* ── Stacked Was / Now (long values or add/delete) ── */
.cd-val-stack[b-ocisc6iskd] {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cd-val-was[b-ocisc6iskd],
.cd-val-now[b-ocisc6iskd] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    word-break: break-all;
}

.cd-val-label[b-ocisc6iskd] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: inherit;
    padding: 1px 5px;
    border-radius: 3px;
}

.cd-val-was .cd-val-label[b-ocisc6iskd] {
    color: var(--ink-secondary);
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
}

.cd-val-now .cd-val-label[b-ocisc6iskd] {
    color: var(--ink-primary);
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
}

.cd-val-was code[b-ocisc6iskd] { color: var(--ink-secondary); }
.cd-val-now code[b-ocisc6iskd] { color: var(--ink-primary); }

.cd-val-summary[b-ocisc6iskd] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.68rem;
}

.cd-change-val-pre[b-ocisc6iskd] {
    margin: 4px 0 0;
    padding: 6px;
    max-height: 120px;
    overflow: auto;
    font-size: 0.65rem;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    border: 1px solid var(--border-soft);
}

/* ── Process-level group header ── */
.cd-change-group-header[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 4px;
}

.cd-change-group-header svg[b-ocisc6iskd] {
    flex-shrink: 0;
    color: var(--ink-muted);
}

.cd-group-count[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    background: var(--border-soft);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    margin-left: auto;
}

/* ── Shape card (group container) ── */
.cd-shape-card[b-ocisc6iskd] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cd-shape-card--active[b-ocisc6iskd] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}

.cd-shape-card-header[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}

.cd-shape-card-header:hover[b-ocisc6iskd] {
    background: var(--accent-soft);
}

.cd-shape-card--active .cd-shape-card-header[b-ocisc6iskd] {
    background: var(--accent-soft);
    border-bottom-color: var(--accent-border);
}

.cd-shape-card-type[b-ocisc6iskd] {
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: 0.01em;
}

.cd-shape-card-label[b-ocisc6iskd] {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-secondary);
}

.cd-shape-card-label[b-ocisc6iskd]::before {
    content: '\2014\00a0';
    color: var(--border-strong);
}

.cd-shape-card-name[b-ocisc6iskd] {
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

/* ── Shape row (change inside a shape card) ── */
.cd-shape-row[b-ocisc6iskd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--surface-muted);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
}

.cd-shape-row:last-child[b-ocisc6iskd] {
    border-bottom: none;
}

.cd-shape-row:hover[b-ocisc6iskd] {
    background: var(--surface-page);
}

.cd-shape-row--addition[b-ocisc6iskd]    { border-left-color: var(--added-fg); }
.cd-shape-row--deletion[b-ocisc6iskd]    { border-left-color: var(--deleted-fg); }
.cd-shape-row--modification[b-ocisc6iskd] { border-left-color: var(--modified-fg); }

.cd-shape-row-body[b-ocisc6iskd] {
    flex: 1;
    min-width: 0;
}

.cd-change-badge[b-ocisc6iskd] {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    border: 1px solid transparent;
    flex-shrink: 0;
    white-space: nowrap;
}

.cd-change-addition[b-ocisc6iskd] {
    color: var(--added-fg);
    background: var(--added-bg);
    border-color: var(--added-border);
}

.cd-change-deletion[b-ocisc6iskd] {
    color: var(--deleted-fg);
    background: var(--deleted-bg);
    border-color: var(--deleted-border);
}

.cd-change-modification[b-ocisc6iskd] {
    color: var(--modified-fg);
    background: var(--modified-bg);
    border-color: var(--modified-border);
}

/* Count badge inside change-list buttons. */
.cd-badge-count[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--border-soft);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
}

/* ===== Process Wrapper & Split Panel Overrides ===== */
.cd-process-wrapper[b-ocisc6iskd] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cd-process-wrapper[b-ocisc6iskd]  .split-container {
    height: 100%;
    align-items: stretch;
}

.cd-process-wrapper[b-ocisc6iskd]  .split-right-header {
    padding: 12px 16px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
}

.cd-process-wrapper[b-ocisc6iskd]  .split-right {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-soft);
    box-shadow: -4px 0 15px rgba(0,0,0,0.03);
    max-height: none;
    overflow-y: auto;
}

.cd-process-wrapper[b-ocisc6iskd]  .split-right-body {
    overflow-y: auto;
    height: calc(100% - 50px);
}

.cd-process-wrapper[b-ocisc6iskd]  .split-left {
    overflow: hidden;
    position: relative;
    /* Flat white canvas in light mode (dark surface in dark mode); no dot grid. */
    background-color: var(--surface-card);
}

/* Make ProcessDiagram container transparent so the canvas surface shows through */
.cd-process-wrapper[b-ocisc6iskd]  .border.rounded.bg-white {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Non-process diff modernization */
.cd-np-card[b-ocisc6iskd] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cd-np-card-header[b-ocisc6iskd] {
    padding: 12px 16px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Right-side cluster in the XML-diff card header: copy buttons + view toggle. */
.cd-xml-card-actions[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cd-np-card-body[b-ocisc6iskd] {
    padding: 0;
}

/* Empty state */
.cd-empty-state[b-ocisc6iskd] {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

/* Custom scrollbar for change list */
.cd-change-list[b-ocisc6iskd]::-webkit-scrollbar {
    width: 5px;
}

.cd-change-list[b-ocisc6iskd]::-webkit-scrollbar-track {
    background: transparent;
}

.cd-change-list[b-ocisc6iskd]::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: var(--radius-lg);
}

.cd-change-list[b-ocisc6iskd]::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ===== Gear Settings Dropdown (lives in the floating canvas bar) ===== */
.cd-gear-wrap[b-ocisc6iskd] {
    position: relative;
}

.cd-settings-dropdown[b-ocisc6iskd] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04);
    z-index: 100;
    padding: 12px;
    animation: cd-dropdown-in-b-ocisc6iskd 0.15s ease-out;
}

/* Opens upward + left-aligned when anchored to the bottom-left floating bar */
.cd-settings-dropdown.cd-settings-dropdown-up[b-ocisc6iskd] {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 0;
}

@keyframes cd-dropdown-in-b-ocisc6iskd {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cd-settings-title[b-ocisc6iskd] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--surface-muted);
}

.cd-settings-item[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.cd-settings-label[b-ocisc6iskd] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

.cd-view-toggle-sm[b-ocisc6iskd] {
    padding: 2px;
    border-radius: var(--radius-md);
}

.cd-view-btn-sm[b-ocisc6iskd] {
    padding: 3px 10px;
    font-size: 0.72rem;
    border-radius: var(--radius-md);
}

/* ===== Floating Canvas Controls ===== */
/* Floating bar positioning lives in app.css (global) — the bar's root is rendered
   by the CanvasFloatBar component, so a scoped rule here wouldn't reach it. */

.cd-float-group[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cd-float-group-border[b-ocisc6iskd] {
    padding-right: 0.75rem;
    border-right: 1px solid var(--surface-float-border);
}

.cd-float-btn[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cd-float-btn:hover[b-ocisc6iskd] {
    background: var(--surface-muted);
    color: var(--ink-primary);
}

.cd-float-btn:active[b-ocisc6iskd] {
    background: var(--border-soft);
}

.cd-float-zoom[b-ocisc6iskd] {
    width: 40px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: -0.03em;
}

/* Toggle switches */
.cd-float-toggle[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.cd-float-toggle input[b-ocisc6iskd] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cd-float-toggle-track[b-ocisc6iskd] {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
    background: var(--border-strong);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.cd-float-toggle-track[b-ocisc6iskd]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--bm-surface);
    border-radius: 50%;
    transition: transform 0.2s;
}

.cd-float-toggle input:checked ~ .cd-float-toggle-track[b-ocisc6iskd] {
    background: var(--accent);
}

.cd-float-toggle input:checked ~ .cd-float-toggle-track[b-ocisc6iskd]::after {
    transform: translateX(14px);
}

.cd-float-toggle-label[b-ocisc6iskd] {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
    transition: color 0.15s;
}

.cd-float-toggle:hover .cd-float-toggle-label[b-ocisc6iskd] {
    color: var(--ink-primary);
}

/* ===== Vertical divider between comparison-bar groups ===== */
.cd-bar-divider[b-ocisc6iskd] {
    width: 1px;
    height: 22px;
    background: var(--border-soft);
    flex-shrink: 0;
}

/* ===== Copy Diff XML Button ===== */
.cd-copy-xml-btn[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cd-copy-xml-btn:hover[b-ocisc6iskd] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}
.cd-copy-xml-btn--copied[b-ocisc6iskd] {
    background: var(--added-bg);
    border-color: var(--added-border);
    color: var(--added-fg);
}

/* ===== Canvas diff legend ===== */
.cd-legend[b-ocisc6iskd] {
    position: absolute;
    /* Vertical list, bottom-right; the control bar is bottom-left so they never overlap. */
    bottom: 32px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-float);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--surface-float-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--surface-float-shadow);
    z-index: 40;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-secondary);
}

.cd-legend-chip[b-ocisc6iskd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cd-legend-dot[b-ocisc6iskd] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cd-legend-hint[b-ocisc6iskd] {
    font-weight: 500;
    color: var(--ink-muted);
}

.cd-legend-muted[b-ocisc6iskd] {
    color: var(--ink-muted);
    font-weight: 500;
    width: 100%;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--surface-float-border);
}

/* ===== Collapsed layout-noise group in the inspector ===== */
.cd-layout-group[b-ocisc6iskd] {
    margin: 4px 8px 8px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.cd-layout-group summary[b-ocisc6iskd] {
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
    user-select: none;
}

.cd-layout-group[open] summary[b-ocisc6iskd] {
    border-bottom: 1px dashed var(--border-soft);
}

.cd-layout-row[b-ocisc6iskd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--ink-secondary);
}

.cd-layout-row-title[b-ocisc6iskd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Non-process diff: scrollable page wrapper (fixes clipping under .cd-page overflow:hidden) ===== */
.cd-np-scroll[b-ocisc6iskd] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* ===== Semantic map change list ===== */
.cd-map-change-list[b-ocisc6iskd] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cd-map-counts[b-ocisc6iskd] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cd-map-count[b-ocisc6iskd] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}

.cd-map-count-add[b-ocisc6iskd] {
    background: var(--added-bg);
    color: var(--added-fg);
    border-color: var(--added-border);
}

.cd-map-count-del[b-ocisc6iskd] {
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border-color: var(--deleted-border);
}

.cd-map-count-mod[b-ocisc6iskd] {
    background: var(--modified-bg);
    color: var(--modified-fg);
    border-color: var(--modified-border);
}

.cd-map-field[b-ocisc6iskd] {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ink-primary);
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline script code-diff (map functions, data-process scripts) */
.cd-script-diff[b-ocisc6iskd] {
    margin-top: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bm-surface);
}

/* Raw-changes collapsed group on the non-process page */
.cd-np-raw[b-ocisc6iskd] {
    margin: 0 0 1rem;
    background: var(--bm-surface);
}

.cd-np-raw > summary[b-ocisc6iskd] {
    padding: 10px 16px;
    font-size: 0.8rem;
}

.cd-np-raw[open][b-ocisc6iskd] {
    overflow-x: auto;
}
/* /Components/Pages/Components.razor.rz.scp.css */
/* ===== Code explorer header ===== */
.cx-head[b-u0bls8305a] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* Segmented control (Source) */
.cx-seg[b-u0bls8305a] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bm-surface-2);
    border: .5px solid var(--bm-line);
    border-radius: var(--radius-md);
    padding: 3px;
}

.cx-seg-label[b-u0bls8305a] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bm-ink-4);
    padding: 0 6px 0 4px;
}

.cx-seg button[b-u0bls8305a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bm-ink-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.cx-seg button:hover:not(:disabled):not(.active)[b-u0bls8305a] {
    color: var(--bm-ink);
}

.cx-seg button.active[b-u0bls8305a] {
    background: var(--bm-surface);
    color: var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
}

.cx-seg button:disabled[b-u0bls8305a] {
    opacity: .45;
    cursor: not-allowed;
}

/* Header "search inside code" box (prunes the tree to matching components) */
.cx-codesearch[b-u0bls8305a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cx-codesearch .cx-field[b-u0bls8305a] {
    flex: 0 0 250px;
    width: 250px;
}

/* ===== Explorer shell: rail + drag gutter + content, sized to the viewport so only the inner
   panes scroll (the viewer's canvas needs a bounded box to scroll inside). ===== */
.cx-shell[b-u0bls8305a] {
    padding: 0;
    overflow: hidden;
}

.cx-shell.with-rail[b-u0bls8305a] {
    display: grid;
    /* grid-template-columns set inline: {railWidth}px 6px minmax(0,1fr) */
    align-items: stretch;
    height: calc(100dvh - 190px);
    min-height: 460px;
}

.cx-rail[b-u0bls8305a] {
    border-right: .5px solid var(--bm-line);
    background: var(--bm-surface);
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

/* Sticky rail header holding the name/id filter (+ Boomi Load/Refresh). */
.cx-rail-head[b-u0bls8305a] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: var(--bm-surface);
    border-bottom: .5px solid var(--bm-line);
}

.cx-rail-note[b-u0bls8305a] {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--bm-ink-3);
    border-bottom: .5px solid var(--bm-line);
}

.cx-rail-note-err[b-u0bls8305a] {
    color: var(--bm-danger, #dc2626);
}

/* Drag gutter (the grid's middle track). */
.cx-gutter[b-u0bls8305a] {
    cursor: col-resize;
    background: transparent;
    position: relative;
}

.cx-gutter[b-u0bls8305a]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--bm-line);
    transform: translateX(-.5px);
}

.cx-gutter:hover[b-u0bls8305a]::before {
    width: 2px;
    background: var(--bm-ink-3);
}

.cx-main[b-u0bls8305a] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Embedded viewer / diff: neutralize their full-viewport sizing so they fill the content pane. */
.cx-main[b-u0bls8305a]  .cv-page,
.cx-main[b-u0bls8305a]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 12px 12px;
}

/* Flatten the viewer/diff inner card so it blends into the pane (the shell card already frames it). */
.cx-main[b-u0bls8305a]  .cv-card,
.cx-main[b-u0bls8305a]  .cv-shell,
.cx-main[b-u0bls8305a]  .cd-shell {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Clear-scope / clear-search affordance */
.cx-scope-x[b-u0bls8305a] {
    border: 0;
    background: transparent;
    color: var(--bm-ink-3);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 50%;
}

.cx-scope-x:hover[b-u0bls8305a] {
    color: var(--bm-ink);
}

/* ===== Content-pane list ===== */
.cx-list-head[b-u0bls8305a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: .5px solid var(--bm-line);
    flex-shrink: 0;
}

.cx-list-title[b-u0bls8305a] {
    font-size: 13px;
    font-weight: 700;
    color: var(--bm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

.cx-list-scroll[b-u0bls8305a] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Leading per-type icon in a list row */
.cx-type-ic[b-u0bls8305a] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 8px;
}

.cx-tbl td[b-u0bls8305a] {
    vertical-align: middle;
}

/* Whole row opens the component; the Analyze action only appears on hover so it doesn't compete. */
.cx-row-click[b-u0bls8305a] {
    cursor: pointer;
}

.cx-row-act-h[b-u0bls8305a],
.cx-row-act[b-u0bls8305a] {
    width: 7rem;
}

.cx-row-act[b-u0bls8305a] {
    text-align: right;
    white-space: nowrap;
}

.cx-row-act .bm-btn[b-u0bls8305a] {
    opacity: 0;
    transition: opacity .12s;
}

.cx-tbl tbody tr:hover .cx-row-act .bm-btn[b-u0bls8305a] {
    opacity: 1;
}

/* ===== Shared search/filter input boxes ===== */
.cx-field[b-u0bls8305a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--bm-line);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
    transition: border-color .12s, box-shadow .12s;
}

.cx-field:focus-within[b-u0bls8305a] {
    border-color: var(--bm-ink-3);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .10);
}

.cx-field input[b-u0bls8305a] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bm-ink);
    font-family: inherit;
    font-size: 13px;
}

.cx-field input[b-u0bls8305a]::placeholder {
    color: var(--bm-ink-4);
}

.cx-field-sm[b-u0bls8305a] {
    padding: 5px 9px;
}

.cx-field-sm input[b-u0bls8305a] {
    font-size: 12.5px;
}
/* /Components/Pages/ComponentViewer.razor.rz.scp.css */
/* ===== Component Viewer — Matching ComponentDiff Design ===== */

/* Page-level: full-width workspace sized to the viewport below the sticky
   chrome so the document never scrolls — only the canvas inside the shell
   does. Unlike list pages this deliberately skips the 1440px container:
   the diagram canvas should use every pixel, with just slim gutters. */
.cv-page[b-b7y29cymhn] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--bm-chrome-h, 94px));
    overflow: hidden;
    padding: 8px 14px 12px;
}

/* ===== Header-bar layout wrappers — the bar itself is the global .bm-wsbar;
   the back arrow / title / type+branch badges / buttons are global primitives. ===== */
.cv-bar-main[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    gap: var(--bar-gap);
    min-width: 0;
    flex: 1 1 auto;   /* lets the name shrink + ellipsis, pushing actions to the right */
}

.cv-bar-actions[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    gap: var(--bar-gap);
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* ===== Responsive action toolbar (shared .ws-* classes; container is the global .bm-wsbar-tight).
   With four actions, drop labels a touch earlier than the default, then collapse History/Compare/
   Analyze into the ⌄ menu when tight — "Test" (.ws-keep) stays pinned. ===== */
@container wsbar (max-width: 820px) {
    .ws-act-label[b-b7y29cymhn] { display: none; }
}
@container wsbar (max-width: 560px) {
    .ws-act:not(.ws-keep)[b-b7y29cymhn] { display: none; }
    .ws-overflow[b-b7y29cymhn] { display: inline-flex; }
    .ws-menu-item[b-b7y29cymhn] { display: flex; }
}

/* ===== Workspace shell: one bm-card holding the header bar, content + floating controls.
   position:relative so the floating canvas controls anchor to it. ===== */
.cv-shell[b-b7y29cymhn] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== Focus / Max mode: the shell takes over the whole viewport so the menubar +
   canvas are all that's visible. The shell is already a flex column, so going fixed
   inset:0 keeps the header pinned on top and lets the canvas fill the rest. ===== */
.cv-shell--max[b-b7y29cymhn] {
    position: fixed;
    inset: 0;
    z-index: 900;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* Floating exit button (top-right), shown only while in max mode. */
.cv-max-exit[b-b7y29cymhn] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-float);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--surface-float-border);
    color: var(--ink-secondary);
    cursor: pointer;
    box-shadow: var(--surface-float-shadow);
    transition: transform 0.15s, background 0.15s, color 0.15s;
}

.cv-max-exit:hover[b-b7y29cymhn] {
    color: var(--ink-primary);
    background: var(--surface-card);
    transform: scale(1.06);
}

/* Gear dropdown (lives in the floating canvas bar) */
.cv-gear-wrap[b-b7y29cymhn] {
    position: relative;
}

.cv-settings-dropdown[b-b7y29cymhn] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 12px 16px;
    min-width: 220px;
    z-index: 999;
}

/* Opens upward + left-aligned when anchored to the bottom-left floating bar */
.cv-settings-dropdown.cv-settings-dropdown-up[b-b7y29cymhn] {
    top: auto;
    bottom: 100%;
    right: auto;
    left: 0;
    margin-top: 0;
    margin-bottom: 8px;
}

.cv-settings-title[b-b7y29cymhn] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cv-settings-item[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--surface-muted);
}

.cv-settings-label[b-b7y29cymhn] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-secondary);
}

/* ===== Action buttons (shared by the header bar) ===== */
/* ===== Version spinner (in the header bar) ===== */
.cv-version-nav[b-b7y29cymhn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--bm-control-h);
    background: var(--bm-surface);
    border: .5px solid var(--bm-line-2);
    border-radius: var(--radius-lg);
    padding: 0 6px;
}

.cv-ver-btn[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--ink-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
}

.cv-ver-btn:hover:not(:disabled)[b-b7y29cymhn] {
    background: var(--surface-muted);
    color: var(--accent);
}

.cv-ver-btn:disabled[b-b7y29cymhn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cv-ver-label[b-b7y29cymhn] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.cv-ver-max[b-b7y29cymhn] {
    font-size: 0.68rem;
    color: var(--ink-muted);
}

/* ===== Error Alert ===== */
.cv-error-alert[b-b7y29cymhn] {
    margin: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--deleted-bg);
    color: var(--deleted-fg);
    border: 1px solid var(--deleted-border);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 500;
    flex-shrink: 0;
}

/* ===== Process Wrapper (full-height, flat canvas) ===== */
.cv-process-wrapper[b-b7y29cymhn] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cv-process-wrapper[b-b7y29cymhn]  .split-container {
    height: 100%;
    align-items: stretch;
}

.cv-process-wrapper[b-b7y29cymhn]  .split-right-header {
    padding: 12px 16px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--border-soft);
}

.cv-process-wrapper[b-b7y29cymhn]  .split-right {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-soft);
    box-shadow: -4px 0 15px rgba(0,0,0,0.03);
    max-height: none;
    overflow-y: auto;
}

.cv-process-wrapper[b-b7y29cymhn]  .split-right-body {
    overflow-y: auto;
    height: calc(100% - 50px);
}

.cv-process-wrapper[b-b7y29cymhn]  .split-left {
    overflow: hidden;
    position: relative;
    /* Flat white canvas in light mode (dark surface in dark mode); no dot grid. */
    background-color: var(--surface-card);
}

/* Make ProcessDiagram container transparent so the canvas surface shows through */
.cv-process-wrapper[b-b7y29cymhn]  .border.rounded.bg-white {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ===== Content Area (non-process, scrollable) ===== */
.cv-content-area[b-b7y29cymhn] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

/* ===== Floating Canvas Controls ===== */
/* Floating bar positioning lives in app.css (global) — the bar's root is rendered
   by the CanvasFloatBar component, so a scoped rule here wouldn't reach it. */

.cv-float-group[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cv-float-group-border[b-b7y29cymhn] {
    padding-right: 0.75rem;
    border-right: 1px solid var(--surface-float-border);
}

.cv-float-btn[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all 0.12s;
}

.cv-float-btn:hover[b-b7y29cymhn] {
    background: var(--surface-muted);
    color: var(--ink-primary);
}

.cv-float-btn:active[b-b7y29cymhn] {
    background: var(--border-soft);
}

.cv-float-btn.active[b-b7y29cymhn] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Wide variant — icon + text label (e.g. the XML toggle) */
.cv-float-btn-wide[b-b7y29cymhn] {
    width: auto;
    gap: 5px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
}

.cv-float-zoom[b-b7y29cymhn] {
    width: 40px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: -0.03em;
}

/* Toggle switch */
.cv-float-toggle[b-b7y29cymhn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.cv-float-toggle input[b-b7y29cymhn] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cv-toggle-track[b-b7y29cymhn] {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background: var(--border-strong);
    border-radius: 999px;
    transition: all 0.2s;
}

.cv-float-toggle input:checked + .cv-toggle-track[b-b7y29cymhn] {
    background: var(--accent);
}

.cv-toggle-track[b-b7y29cymhn]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--bm-surface);
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cv-float-toggle input:checked + .cv-toggle-track[b-b7y29cymhn]::after {
    transform: translateX(12px);
}

.cv-toggle-label[b-b7y29cymhn] {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-secondary);
}

/* View toggle (for icon style) */
.cv-view-toggle[b-b7y29cymhn] {
    display: inline-flex;
    align-items: center;
    background: var(--surface-muted);
    padding: 3px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
}

.cv-view-toggle-sm[b-b7y29cymhn] {
    padding: 2px;
    border-radius: var(--radius-md);
}

.cv-view-btn[b-b7y29cymhn] {
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.cv-view-btn-sm[b-b7y29cymhn] {
    padding: 3px 10px;
    font-size: 0.68rem;
}

.cv-view-btn:hover[b-b7y29cymhn] {
    color: var(--ink-primary);
}

.cv-view-btn.active[b-b7y29cymhn] {
    background: var(--bm-surface);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--border-soft);
}

/* ===== Shape Detail Panel ===== */
.cv-shape-detail[b-b7y29cymhn] {
    padding: 16px;
}

.cv-detail-table[b-b7y29cymhn] {
    width: 100%;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

.cv-detail-table td[b-b7y29cymhn] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--surface-muted);
}

.cv-detail-table td:first-child[b-b7y29cymhn] {
    font-weight: 700;
    color: var(--ink-secondary);
    width: 90px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cv-section-title[b-b7y29cymhn] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-soft);
}

.cv-conn-table[b-b7y29cymhn] {
    width: 100%;
    font-size: 0.78rem;
}

.cv-conn-table th[b-b7y29cymhn] {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-soft);
}

.cv-conn-table td[b-b7y29cymhn] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--surface-muted);
}

/* ===== Content area card improvements ===== */
.cv-content-area .card[b-b7y29cymhn] {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cv-content-area .card-header[b-b7y29cymhn] {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
}

/* Raw XML card */
.cv-xml-card[b-b7y29cymhn] {
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cv-xml-card-header[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-primary);
}

.cv-copy-btn[b-b7y29cymhn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    background: var(--bm-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.cv-copy-btn:hover[b-b7y29cymhn] {
    background: var(--surface-muted);
    color: var(--accent);
    border-color: var(--accent-border);
}

.cv-xml-card pre[b-b7y29cymhn] {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--surface-muted);
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ===== Content-search highlight (matched rows / profile nodes) ===== */
tr.cv-search-hit > td[b-b7y29cymhn] {
    background: #fff6da;
}

div.cv-search-hit[b-b7y29cymhn] {
    background: #fff6da;
    border-radius: 3px;
}

/* Raw-XML pane search navigation (find next/prev) */
.cv-xml-actions[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cv-xml-counter[b-b7y29cymhn] {
    font-family: var(--bm-font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    white-space: nowrap;
}

/* ===== Search bar (active query + match navigation) ===== */
.cv-search-bar[b-b7y29cymhn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-page);
}

.cv-search-term[b-b7y29cymhn] {
    font-family: var(--bm-font-mono, monospace);
    font-weight: 700;
    color: #3a2a00;
    background: #ffe08a;
    border-radius: var(--radius-sm);
    padding: 1px 8px;
}

.cv-search-info[b-b7y29cymhn] {
    font-size: 0.78rem;
    color: var(--ink-secondary);
    white-space: nowrap;
}

.cv-match-line[b-b7y29cymhn] {
    margin: 4px 0 0;
    padding: 6px 8px;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    font-family: var(--bm-font-mono, monospace);
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Keep the XML find next/prev header visible while scrolling a long document. */
.cv-xml-card-header[b-b7y29cymhn] {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Bound the raw-XML body so it scrolls internally — keeps the sticky header (find next/prev)
   visible instead of the whole card scrolling out of the content area. */
.cv-xml-card pre[b-b7y29cymhn] {
    max-height: 70vh;
}

/* References panel — clickable chips for the components this component references
   (a map's profiles, a cache's profile, …). Opens each in this viewer. */
.cv-refs[b-b7y29cymhn] {
    margin-bottom: 14px;
}
.cv-refs-body[b-b7y29cymhn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}
.cv-ref-link[b-b7y29cymhn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 11px;
    background: var(--bm-surface, #fff);
    border: 1px solid var(--border-soft, #dcdce3);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--accent, #3b3df0);
    transition: border-color .12s, background .12s;
}
.cv-ref-link:hover[b-b7y29cymhn] {
    border-color: var(--accent, #3b3df0);
    background: var(--accent-soft, #eef0ff);
}
.cv-ref-kind[b-b7y29cymhn] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted, #8a8a94);
    flex-shrink: 0;
}
.cv-ref-name[b-b7y29cymhn] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Projects/DeploymentsTab.razor.rz.scp.css */
.dep-shell[b-pd0w94cd0f] {
    padding: 0;
    overflow: hidden;
}

.dep-toolbar[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: .5px solid var(--bm-line);
    flex-wrap: wrap;
}

.dep-search[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
    height: 30px;
    padding: 0 10px;
    border: .5px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
}

.dep-search input[b-pd0w94cd0f] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bm-ink);
    font: inherit;
    font-size: 13px;
}

.dep-check[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bm-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

/* Two-pane master/detail. Each pane owns an independent vertical scroll via its
   own max-height (NOT grid stretch — a single auto-sized grid row sizes to its
   tallest content and lets the inner scroll region grow unbounded, which is why
   the list showed only its first rows with no scrollbar). align-items:start so a
   short list and a tall detail don't force-match heights. */
.dep-body[b-pd0w94cd0f] {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
}

.dep-list[b-pd0w94cd0f] {
    border-right: .5px solid var(--bm-line);
}

.dep-list-head[b-pd0w94cd0f] {
    padding: 8px 14px;
    font-size: 11.5px;
    color: var(--bm-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: .5px solid var(--bm-line);
}

.dep-list-scroll[b-pd0w94cd0f] {
    overflow-y: auto;
    max-height: calc(100dvh - 300px);
    min-height: 200px;
}

.dep-list-item[b-pd0w94cd0f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    border: 0;
    border-bottom: .5px solid var(--bm-line);
    background: transparent;
    cursor: pointer;
    color: var(--bm-ink);
}

.dep-list-item:hover[b-pd0w94cd0f] { background: var(--bm-surface-2); }

.dep-list-item.active[b-pd0w94cd0f] {
    background: var(--bm-surface-2);
    box-shadow: inset 3px 0 0 var(--bm-accent, #3b3df0);
}

.dep-list-name[b-pd0w94cd0f] {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-list-meta[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.dep-detail[b-pd0w94cd0f] {
    overflow-y: auto;
    max-height: calc(100dvh - 300px);
    padding: 18px 20px;
}

.dep-empty[b-pd0w94cd0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 300px;
    color: var(--bm-ink-3);
    font-size: 13px;
    text-align: center;
}

.dep-detail-head[b-pd0w94cd0f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.dep-detail-title[b-pd0w94cd0f] {
    margin: 0 0 4px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dep-detail-sub[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12.5px;
}

.dep-section-head[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: .5px solid var(--bm-line);
}

.dep-section-head strong[b-pd0w94cd0f] { font-size: 13.5px; }

.dep-env-tbl td[b-pd0w94cd0f] { vertical-align: middle; }

/* Environments pager */
.dep-pager[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px 2px;
}

.dep-deps-empty[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

/* Long values (names, ids) must wrap rather than force a horizontal scrollbar. */
.dep-detail .bm-tbl td[b-pd0w94cd0f] { overflow-wrap: anywhere; word-break: break-word; }

.dep-cmp-bar[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}

.dep-cmp-lbl[b-pd0w94cd0f] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bm-ink-2);
}

.dep-cmp-tbl td[b-pd0w94cd0f] { vertical-align: middle; }

/* AI change-summary panel */
.dep-ai[b-pd0w94cd0f] {
    margin: 10px 0 4px;
    padding: 12px 14px;
    border: .5px solid var(--bm-line-2);
    border-radius: var(--radius-lg);
    background: var(--bm-surface-2);
}

.dep-ai-head[b-pd0w94cd0f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--bm-ink-2);
}

.dep-ai-head strong[b-pd0w94cd0f] { font-size: 13px; }

.dep-ai-md[b-pd0w94cd0f] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bm-ink);
}

.dep-ai-md h2[b-pd0w94cd0f] { font-size: 13.5px; font-weight: 600; margin: 12px 0 4px; }
.dep-ai-md h2:first-child[b-pd0w94cd0f] { margin-top: 0; }
.dep-ai-md ul[b-pd0w94cd0f] { margin: 4px 0; padding-left: 20px; }
.dep-ai-md li[b-pd0w94cd0f] { margin: 2px 0; }
.dep-ai-md code[b-pd0w94cd0f] { font-family: var(--bm-font-mono); font-size: 12px; }
.dep-ai-md p[b-pd0w94cd0f] { margin: 4px 0; }

/* Component diff drill-down: a near-full-screen dialog that hosts ComponentDiff.
   Neutralize cd-page's own viewport sizing so it fills the dialog cleanly. */
.dep-diff-overlay[b-pd0w94cd0f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dep-diff-modal[b-pd0w94cd0f] {
    position: relative;
    background: var(--bm-surface);
    border-radius: var(--radius-lg);
    width: min(1500px, 96vw);
    height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.dep-diff-close[b-pd0w94cd0f] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.dep-diff-body[b-pd0w94cd0f] { flex: 1; overflow: auto; min-height: 0; }

.dep-diff-body[b-pd0w94cd0f]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.dep-diff-body[b-pd0w94cd0f]  .cd-page-head { padding-right: 40px; }

@media (max-width: 860px) {
    .dep-body[b-pd0w94cd0f] {
        grid-template-columns: 1fr;
    }
    .dep-list[b-pd0w94cd0f] { border-right: 0; border-bottom: .5px solid var(--bm-line); }
    .dep-list-scroll[b-pd0w94cd0f] { max-height: 280px; }
    .dep-detail[b-pd0w94cd0f] { max-height: none; }
}
/* /Components/Pages/Projects/ExtensionsTab.razor.rz.scp.css */
/* Long extension values (URLs, connection strings, ids) and the raw XML must
   wrap instead of forcing a horizontal scrollbar that only appears far below
   the fold. Scoped to this component, so it doesn't affect other tables. */
.bm-tbl td[b-xoqtqahqai] {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.ext-raw[b-xoqtqahqai] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Fixed layout so a single long value can't starve the other columns of width;
   declared column widths hold and long values wrap inside their own cell. */
.ext-fixed[b-xoqtqahqai] {
    table-layout: fixed;
    width: 100%;
}

.ext-search[b-xoqtqahqai] {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 9px;
    border: .5px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
    min-width: 220px;
}

.ext-search input[b-xoqtqahqai] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--bm-ink);
    font: inherit;
    font-size: 12.5px;
}
/* /Components/Pages/Projects/ProjectMerge.razor.rz.scp.css */
/* =============================================================================
   ProjectMerge — two-pane merge workspace.
   Left: searchable folder/type/component tree. Right: counts + selected-component
   detail card with side-by-side Source vs Destination.
   ============================================================================= */

.pm-page[b-3i0npyr2gt] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: var(--bm-bg);
    color: var(--bm-ink);
}

/* ── Secondary button (only pm-btn-* class still used by ProjectMerge.razor) ── */
.pm-btn-secondary[b-3i0npyr2gt] {
    height: 30px;
    padding: 0 12px;
    background: var(--bm-surface);
    color: var(--bm-ink);
    border: 1px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pm-btn-secondary:hover:not(:disabled)[b-3i0npyr2gt] { background: var(--bm-bg-2); border-color: var(--bm-ink-3); }
.pm-btn-secondary:disabled[b-3i0npyr2gt] { color: var(--bm-ink-4); cursor: not-allowed; }

/* ── Two-pane workspace ── */
.pm-workspace[b-3i0npyr2gt] {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 0;
}

/* ── Left: tree pane ── */
.pm-tree-pane[b-3i0npyr2gt] {
    border-right: 1px solid var(--bm-line);
    overflow-y: auto;
    background: var(--bm-bg-2);
}
.pm-tree-toolbar[b-3i0npyr2gt] {
    position: sticky;
    top: 0;
    background: var(--bm-bg-2);
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--bm-line);
    z-index: 1;
}
.pm-search-wrap[b-3i0npyr2gt] {
    flex: 1;
    position: relative;
}
.pm-search-icon[b-3i0npyr2gt] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-subtle, #888);
    pointer-events: none;
}
.pm-search-input[b-3i0npyr2gt] {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 28px;
    border: 1px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
    color: var(--bm-ink);
    font-size: 13px;
}
.pm-icon-btn[b-3i0npyr2gt] {
    height: 32px;
    width: 32px;
    border: 1px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bm-ink-2);
}
.pm-icon-btn:hover[b-3i0npyr2gt] { background: var(--bm-bg-2); }
.pm-filter-menu[b-3i0npyr2gt] {
    padding: 8px 12px;
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pm-filter-opt[b-3i0npyr2gt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    cursor: pointer;
}

.pm-tree[b-3i0npyr2gt] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.pm-tree-children[b-3i0npyr2gt] {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}
.pm-tree-row[b-3i0npyr2gt] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.pm-tree-row:hover[b-3i0npyr2gt] { background: var(--bm-bg-2); }
.pm-tree-row.active[b-3i0npyr2gt] {
    background: var(--bm-accent-soft);
    border-left: 3px solid var(--bm-accent);
    padding-left: 9px;
    font-weight: 600;
}
.pm-tree-caret[b-3i0npyr2gt] {
    display: inline-block;
    width: 12px;
    color: var(--ink-subtle, #888);
    font-size: 10px;
    transition: transform 0.15s ease;
}
.pm-tree-caret.open[b-3i0npyr2gt] { transform: rotate(90deg); }
.pm-tree-icon[b-3i0npyr2gt] { font-size: 13px; }
.pm-tree-label[b-3i0npyr2gt] {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pm-tree-row-folder[b-3i0npyr2gt] { font-weight: 600; }
.pm-tree-row-type[b-3i0npyr2gt]   { color: var(--ink-secondary, #555); }
.pm-tree-empty[b-3i0npyr2gt] {
    padding: 24px 12px;
    color: var(--ink-subtle, #888);
    font-size: 12px;
    text-align: center;
}

/* ── Right: detail pane ── */
.pm-detail-pane[b-3i0npyr2gt] {
    overflow-y: auto;
    padding: 16px 24px;
    background: var(--bm-surface);
    display: flex;
    flex-direction: column;
}

/* Counts row uses the shared bd-stat-chip palette so it matches the rest of the diff/merge
   surface. Compact pill chips, no big card boxes. */
.pm-counts-row[b-3i0npyr2gt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bm-line);
}

/* ── Conflict banner ── */
.pm-conflict-banner[b-3i0npyr2gt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 16px 0;
    background: var(--modified-bg);
    border: 1px solid var(--modified-border);
    border-radius: var(--radius-md);
    color: var(--modified-fg);
    font-size: 13px;
}
.pm-conflict-icon[b-3i0npyr2gt] { font-size: 18px; }

/* ── Detail header ── */
.pm-detail-header[b-3i0npyr2gt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.pm-detail-header-actions[b-3i0npyr2gt] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}
.pm-detail-title[b-3i0npyr2gt] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pm-detail-icon[b-3i0npyr2gt] { font-size: 16px; }
.pm-detail-sub[b-3i0npyr2gt] {
    font-size: 12px;
    color: var(--ink-subtle, #888);
    margin-bottom: 16px;
}

.pm-detail-empty[b-3i0npyr2gt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--ink-subtle, #888);
}
.pm-detail-empty-text[b-3i0npyr2gt] { font-size: 13px; }

/* ── Source / Destination cards ── */
.pm-card-grid[b-3i0npyr2gt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 8px;
}
.pm-card[b-3i0npyr2gt] { display: flex; flex-direction: column; gap: 8px; }
.pm-card-header[b-3i0npyr2gt] { font-size: 13px; font-weight: 600; color: var(--ink-secondary, #555); }
.pm-card-body[b-3i0npyr2gt] {
    border: 1px solid var(--bm-line-2);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    background: var(--bm-surface);
}
.pm-card-selectable[b-3i0npyr2gt] { border-color: var(--bm-accent-border, var(--accent-border)); }
.pm-card-branch-row[b-3i0npyr2gt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--bm-line);
}
.pm-card-branch-name[b-3i0npyr2gt] { font-size: 16px; font-weight: 700; }

.pm-meta[b-3i0npyr2gt] {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    margin: 0;
    font-size: 13px;
}
.pm-meta dt[b-3i0npyr2gt] { color: var(--ink-secondary, #555); font-weight: 500; }
.pm-meta dd[b-3i0npyr2gt] { margin: 0; color: var(--ink-primary, #111); }

.pm-prevnext-row[b-3i0npyr2gt] {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

/* ── Inline component-diff modal ── */
.pm-modal-overlay[b-3i0npyr2gt] {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay, rgba(15, 23, 42, 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tiny gutter so the modal still reads as a floating dialog, not a full-bleed page. */
    padding: 16px;
    z-index: 100;
}
.pm-modal[b-3i0npyr2gt] {
    position: relative;
    background: var(--bm-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--bm-shadow-md);
    /* Use most of the viewport but stay inside the gutter. */
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    /* Clip any stray negative margins from inner pages so we never get a dialog scrollbar. */
    overflow: hidden;
}
.pm-modal-close[b-3i0npyr2gt] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface);
    color: var(--bm-ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.pm-modal-close:hover[b-3i0npyr2gt] { background: var(--bm-bg-2); color: var(--bm-ink); }
.pm-modal-body[b-3i0npyr2gt] {
    flex: 1;
    /* No padding — ComponentDiff's `.cd-page` uses negative side-margins assuming a regular
       page container; padding here would reveal those margins as horizontal overflow. The
       inner ComponentDiff layout handles its own scrolling regions, so we only need to clip
       the dialog itself. */
    padding: 0;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
/* Neutralize `.cd-page`'s page-level sizing (viewport-relative height, centered
   max-width, container padding) when it's hosted inside this dialog — those rules
   assume the standard page chrome (sticky top bar + tab strip) that the modal
   doesn't have. The dialog owns the box; cd-page just fills it. */
.pm-modal-body[b-3i0npyr2gt]  .cd-page {
    margin: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    padding: 10px 14px 14px;
}

/* Reserve space at the top-right of ComponentDiff's head row so its trailing controls
   (gear icon, status pill) don't slide under our close button. The close button is
   32px wide anchored at right:10, so 52px of right padding clears it. */
.pm-modal-body[b-3i0npyr2gt]  .cd-page-head {
    padding-right: 52px;
}
/* /Components/Pages/Projects/ProjectPullRequests.razor.rz.scp.css */
/* Pull-request list — chips mirror ProjectSourceControl's sc-chip family (scoped CSS
   doesn't cross pages, so the classes are replicated by name for future consolidation). */

.sc-chip[b-zi93i47i2n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
    margin-left: 4px;
}

.sc-chip-ok[b-zi93i47i2n]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-zi93i47i2n] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-zi93i47i2n]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-zi93i47i2n]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-zi93i47i2n]     { background: rgba(130, 80, 223, .12); color: #8250df; border-color: rgba(130, 80, 223, .25); }
/* /Components/Pages/Projects/ProjectSourceControl.razor.rz.scp.css */
/* Source Control page — layout, history list, chips, and modals.
   bm-* primitives come from the global stylesheet; everything sc-* is page-scoped. */

.sc-layout[b-ilhxrm6qqu] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .sc-layout[b-ilhxrm6qqu] { grid-template-columns: 1fr; }
}

.sc-status[b-ilhxrm6qqu] { padding: 12px 16px; }

.sc-status-row[b-ilhxrm6qqu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-row-active td[b-ilhxrm6qqu] { background: color-mix(in srgb, var(--bm-accent, #4f7cff) 8%, transparent); }

/* selected-branch indicator in the workspace bar + branch list */
.sc-active-branch[b-ilhxrm6qqu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--bm-accent, #4f7cff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bm-accent, #4f7cff) 55%, transparent);
    color: var(--bm-ink, #1f1e1d);
}
.sc-active-branch svg[b-ilhxrm6qqu] { color: var(--bm-accent, #4f7cff); flex: none; }

.sc-sel-dot[b-ilhxrm6qqu] {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--bm-accent, #4f7cff);
    margin-right: 6px;
    vertical-align: middle;
}

/* ── chips ── */
.sc-chip[b-ilhxrm6qqu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sc-chip-ok[b-ilhxrm6qqu]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-ilhxrm6qqu] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-ilhxrm6qqu]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-ilhxrm6qqu]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-ilhxrm6qqu]     { background: rgba(9, 105, 218, .1);   color: #0969da; border-color: rgba(9, 105, 218, .25); }

/* ── commit kind badges ── */
.sc-kind[b-ilhxrm6qqu] {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sc-kind-import[b-ilhxrm6qqu] { background: rgba(9, 105, 218, .12);   color: #0969da; }
.sc-kind-manual[b-ilhxrm6qqu] { background: rgba(46, 160, 67, .12);   color: #2ea043; }
.sc-kind-auto[b-ilhxrm6qqu]   { background: rgba(110, 118, 129, .12); color: #6e7681; }
.sc-kind-safety[b-ilhxrm6qqu] { background: rgba(255, 140, 0, .14);   color: #d2691e; }
.sc-kind-merge[b-ilhxrm6qqu]  { background: rgba(130, 80, 223, .12);  color: #8250df; }
.sc-kind-cherry[b-ilhxrm6qqu] { background: rgba(191, 57, 137, .12);  color: #bf3989; }

/* ── history list ── */
.sc-history[b-ilhxrm6qqu] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 70vh;
    overflow: auto;
}

.sc-commit[b-ilhxrm6qqu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: .5px solid var(--bm-line, #e6e8eb);
    font-size: 12.5px;
}

.sc-commit:hover[b-ilhxrm6qqu] { background: rgba(127, 127, 127, .05); }

.sc-fold[b-ilhxrm6qqu] { cursor: pointer; color: var(--bm-ink-3, #777); }

.sc-indent[b-ilhxrm6qqu] { padding-left: 34px; }

.sc-id[b-ilhxrm6qqu] { font-size: 11.5px; color: var(--bm-ink-3, #777); }

.sc-msg[b-ilhxrm6qqu] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 80px;
}

.sc-actions[b-ilhxrm6qqu] { display: inline-flex; gap: 6px; }

/* ── modals ── */
.sc-overlay[b-ilhxrm6qqu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-modal[b-ilhxrm6qqu] {
    background: var(--bm-surface, #fff);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    padding: 20px;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}

.sc-modal-wide[b-ilhxrm6qqu] { width: min(860px, 100%); }

.sc-modal-full[b-ilhxrm6qqu] {
    width: min(1500px, 96vw);
    height: 92vh;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sc-modal-body[b-ilhxrm6qqu] { flex: 1; overflow: auto; min-height: 0; }

/* ComponentDiff hosted in the full-size modal: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog owns
   the box, and the diff's internal panes do their own scrolling. */
.sc-modal-body[b-ilhxrm6qqu]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Keep the head row's trailing controls clear of the absolute close button. */
.sc-modal-body[b-ilhxrm6qqu]  .cd-page-head {
    padding-right: 40px;
}

.sc-modal-close[b-ilhxrm6qqu] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.sc-scroll[b-ilhxrm6qqu] { overflow: auto; border: .5px solid var(--bm-line, #e6e8eb); border-radius: var(--radius-md); }
/* /Components/Pages/Projects/PullRequestDetail.razor.rz.scp.css */
/* PR detail — chip + modal classes mirror ProjectSourceControl's sc-* family (scoped CSS
   doesn't cross pages); pr-* classes are page-specific. */

.sc-chip[b-275sre2jay] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.sc-chip-ok[b-275sre2jay]       { background: rgba(46, 160, 67, .12);  color: #2ea043; border-color: rgba(46, 160, 67, .3); }
.sc-chip-modified[b-275sre2jay] { background: rgba(210, 153, 34, .12); color: #b8860b; border-color: rgba(210, 153, 34, .35); }
.sc-chip-warn[b-275sre2jay]     { background: rgba(255, 140, 0, .12);  color: #d2691e; border-color: rgba(255, 140, 0, .3); }
.sc-chip-danger[b-275sre2jay]   { background: rgba(248, 81, 73, .12);  color: #d1242f; border-color: rgba(248, 81, 73, .3); }
.sc-chip-info[b-275sre2jay]     { background: rgba(130, 80, 223, .12); color: #8250df; border-color: rgba(130, 80, 223, .25); }

.sc-overlay[b-275sre2jay] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-modal[b-275sre2jay] {
    background: var(--bm-surface, #fff);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    padding: 20px;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}

.sc-modal-full[b-275sre2jay] {
    width: min(1500px, 96vw);
    height: 92vh;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sc-modal-body[b-275sre2jay] { flex: 1; overflow: auto; min-height: 0; }

/* ComponentDiff hosted in the full-size modal: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog owns
   the box, and the diff's internal panes do their own scrolling. */
.sc-modal-body[b-275sre2jay]  .cd-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Keep the head row's trailing controls clear of the absolute close button. */
.sc-modal-body[b-275sre2jay]  .cd-page-head {
    padding-right: 40px;
}

.sc-modal-close[b-275sre2jay] {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: var(--bm-ink-3, #777);
}

.sc-scroll[b-275sre2jay] { overflow: auto; border: .5px solid var(--bm-line, #e6e8eb); border-radius: var(--radius-md); }

/* conflict pick radios under a conflicted row */
.pr-pick-row[b-275sre2jay] {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 2px 0 8px;
}

.pr-pick[b-275sre2jay] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

/* AI summary markdown body */
.pr-markdown[b-275sre2jay] { font-size: 13px; }
.pr-markdown[b-275sre2jay]  h1, .pr-markdown[b-275sre2jay]  h2, .pr-markdown[b-275sre2jay]  h3 { font-size: 14px; margin: 10px 0 4px; }
.pr-markdown[b-275sre2jay]  p { margin: 4px 0; }
.pr-markdown[b-275sre2jay]  ul { margin: 4px 0; padding-left: 20px; }
.pr-markdown[b-275sre2jay]  code { background: rgba(127, 127, 127, .12); padding: 0 4px; border-radius: 3px; font-size: 12px; }

.pr-comment[b-275sre2jay] {
    border-top: .5px solid var(--bm-line, #e6e8eb);
    padding: 8px 0;
}
/* /Components/Pages/Review/ProcessReview.razor.rz.scp.css */
/* ── Finding-viewer dialog ────────────────────────────────────────────────
   Full-bleed modal that hosts the Component Viewer when a reviewer clicks a
   finding, and the Starter rules library dialog. Sized to fill almost the
   entire viewport so the diagram has room, but kept inside a framed panel so
   it still reads as a dialog. (The custom-rule editor has its own scoped copy
   in RuleEditorDialog.razor.css.) */
.review-viewer-backdrop[b-qnd5tm1j3o] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.review-viewer-dialog[b-qnd5tm1j3o] {
    position: fixed;
    top: 2vh;
    left: 2vw;
    width: 96vw;
    height: 96vh;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    overflow: hidden;
}

.review-viewer-dialog-header[b-qnd5tm1j3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-elevated, var(--surface-card));
}

.review-viewer-dialog-title[b-qnd5tm1j3o] {
    font-weight: 600;
    color: var(--ink-primary);
}

.review-viewer-dialog-body[b-qnd5tm1j3o] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
    min-height: 0;
}

/* ComponentViewer hosted in the dialog: neutralize its page-level sizing
   (viewport height / centered max-width / container padding) — the dialog
   owns the box, and the viewer's canvas does its own scrolling. */
.review-viewer-dialog-body[b-qnd5tm1j3o]  .cv-page {
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 14px 14px;
}

/* Starter-rules dialog: a reading-width centered panel, not the full-bleed
   frame the component viewer needs for its diagram. */
.review-viewer-dialog.review-starter-dialog[b-qnd5tm1j3o] {
    left: 50%;
    transform: translateX(-50%);
    width: min(880px, 94vw);
    top: 4vh;
    height: 92vh;
}
/* /Components/Pages/Review/RuleEditorDialog.razor.rz.scp.css */
/* ── Dialog shell ─────────────────────────────────────────────────────────
   The backdrop/dialog base styles are duplicated from the page's scoped sheet
   because scoped CSS does not cascade across components — the editor must be
   self-contained so it renders identically wherever it is hosted. */
.review-viewer-backdrop[b-em4c1ucug7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
}

.review-viewer-dialog[b-em4c1ucug7] {
    position: fixed;
    background: var(--surface-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    overflow: hidden;
}

.review-viewer-dialog-header[b-em4c1ucug7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-elevated, var(--surface-card));
}

.review-viewer-dialog-title[b-em4c1ucug7] {
    font-weight: 600;
    color: var(--ink-primary);
}

.review-viewer-dialog-body[b-em4c1ucug7] {
    flex: 1 1 auto;
    overflow: auto;
}

/* Custom-rule editor variant — centered, fixed-width. */
.review-viewer-dialog.bm-script-dialog[b-em4c1ucug7] {
    width: min(960px, 96vw);
    height: auto;
    max-height: 92vh;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}

.review-viewer-dialog.bm-script-dialog .review-viewer-dialog-header[b-em4c1ucug7] {
    padding: 14px 24px;
}

.review-viewer-dialog.bm-script-dialog .review-viewer-dialog-body[b-em4c1ucug7] {
    padding: 20px 28px;
}

.review-viewer-dialog.bm-script-dialog .bm-script-dialog-footer[b-em4c1ucug7] {
    padding: 14px 28px;
}
/* /Components/Pages/Search.razor.rz.scp.css */
.sx-head[b-ijk8b13hpy] {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.sx-searchcard[b-ijk8b13hpy] { padding: 12px 14px; }

.sx-field[b-ijk8b13hpy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sx-field svg[b-ijk8b13hpy] {
    color: var(--bm-ink-3);
    flex-shrink: 0;
}

.sx-field input[b-ijk8b13hpy] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.sx-clear[b-ijk8b13hpy] {
    border: 0;
    background: transparent;
    color: var(--bm-ink-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.sx-empty[b-ijk8b13hpy] {
    margin-top: 14px;
    padding: 28px;
    text-align: center;
    color: var(--bm-ink-3);
}

.sx-sec[b-ijk8b13hpy] { margin-top: 18px; }

.sx-sec-h[b-ijk8b13hpy] {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bm-ink-2);
}

.sx-list[b-ijk8b13hpy] { padding: 6px; }

.sx-row[b-ijk8b13hpy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.sx-ic[b-ijk8b13hpy] {
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 6px;
}

.sx-rmain[b-ijk8b13hpy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sx-rname[b-ijk8b13hpy] { font-size: 13.5px; }

.sx-rsub[b-ijk8b13hpy] {
    font-size: 11.5px;
    color: var(--bm-ink-3);
}

.sx-tablewrap[b-ijk8b13hpy] {
    padding: 0;
    overflow: hidden;
}

.sx-crow[b-ijk8b13hpy] { cursor: pointer; }
/* /Components/Shared/CodeTree.razor.rz.scp.css */
.ct-tree[b-kr479kjazv] {
    overflow-y: auto;
    user-select: none;
    font-size: 13px;
    padding: 4px;
}

.ct-row[b-kr479kjazv] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding-right: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--bm-ink-2);
    white-space: nowrap;
}

.ct-row:hover[b-kr479kjazv] {
    background: var(--bm-surface-2);
}

.ct-row.active[b-kr479kjazv] {
    background: var(--bm-surface-2);
    color: var(--bm-ink);
    font-weight: 600;
}

/* Straight full-height accent bar (a plain inset box-shadow follows the row's border-radius and
   bows into a bracket shape — a square ::before keeps it straight). */
.ct-row.active[b-kr479kjazv]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bm-accent);
}

.ct-caret[b-kr479kjazv] {
    width: 12px;
    flex-shrink: 0;
    text-align: center;
    font-size: 10px;
    color: var(--bm-ink-3);
}

.ct-caret-empty[b-kr479kjazv] {
    visibility: hidden;
}

.ct-icon[b-kr479kjazv] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ct-label[b-kr479kjazv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-count[b-kr479kjazv] {
    flex-shrink: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--bm-ink-4);
    background: var(--bm-surface-2);
    border: .5px solid var(--bm-line);
    border-radius: var(--radius-pill);
    padding: 0 7px;
    min-width: 22px;
    text-align: center;
}

.ct-row.active .ct-count[b-kr479kjazv] {
    color: var(--bm-ink-2);
}

/* Trailing version badge on a component leaf (instead of a child count). */
.ct-ver[b-kr479kjazv] {
    flex-shrink: 0;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--bm-ink-4);
    font-family: var(--bm-font-mono, monospace);
}
/* /Components/Shared/ComponentDetailView.razor.rz.scp.css */
/* ===== Generic component-detail sections (key/value grids, tables, code) ===== */

.cdv-kv .cdv-kv-label[b-7s2m6sr1a7] {
    width: 240px;
    font-weight: 600;
    color: var(--bm-ink-2, #444);
    white-space: nowrap;
}

.cdv-val[b-7s2m6sr1a7] {
    background: transparent;
    color: var(--bm-ink, #1a1a1e);
    font-size: 0.82rem;
    word-break: break-all;
}

.cdv-code[b-7s2m6sr1a7] {
    margin: 0;
    padding: 12px 14px;
    max-height: 55vh;
    overflow: auto;
    background: var(--bm-bg-2, #f6f6f8);
    color: var(--bm-ink, #1a1a1e);
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Referenced-component link chip (mirrors the viewer's References panel style) */
.cdv-ref[b-7s2m6sr1a7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 3px 9px;
    background: var(--bm-surface, #fff);
    border: 1px solid var(--bm-line, #e2e2e8);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
}

.cdv-ref:hover[b-7s2m6sr1a7] {
    border-color: var(--accent, #3b3df0);
    background: var(--accent-soft, #eef0ff);
}

.cdv-ref .cdv-ref-name[b-7s2m6sr1a7] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search-hit row highlight (same tone as the viewer's structured match rows) */
tr.cv-search-hit > td[b-7s2m6sr1a7] {
    background: #fff6da;
}
/* /Components/Shared/ShapeConfigView.razor.rz.scp.css */
.scv-section[b-ul46wdofxi] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted, #888);
    margin: 14px 0 6px;
}

.scv-tbl[b-ul46wdofxi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.scv-tbl td[b-ul46wdofxi] {
    padding: 4px 8px;
    border-bottom: .5px solid var(--surface-muted, #f0f0f0);
    vertical-align: top;
    word-break: break-word;
}

.scv-key[b-ul46wdofxi] {
    font-weight: 700;
    color: var(--ink-primary, #222);
    white-space: nowrap;
    width: 1%;
    padding-right: 14px !important;
}

.scv-val[b-ul46wdofxi] {
    color: var(--ink-secondary, #555);
}

/* A value recovered from the run logs — emphasized. */
.scv-derived[b-ul46wdofxi] {
    font-weight: 700;
    color: var(--ink-primary, #1a1a1a);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    white-space: pre-wrap;
    word-break: break-word;
}

/* No runtime value was logged — showing the configured source instead. */
.scv-fallback[b-ul46wdofxi] {
    color: var(--ink-muted, #999);
    font-style: italic;
}

.scv-script[b-ul46wdofxi] {
    margin: 6px 0;
    border: 1px solid var(--border-soft, #e5e5e5);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.scv-script-head[b-ul46wdofxi] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-primary, #222);
    background: var(--surface-muted, #f6f6f6);
    list-style: none;
}

.scv-script-head[b-ul46wdofxi]::-webkit-details-marker { display: none; }
.scv-script-head[b-ul46wdofxi]::before { content: "▸"; color: var(--ink-muted, #999); font-size: 10px; }
.scv-script[open] .scv-script-head[b-ul46wdofxi]::before { content: "▾"; }

.scv-lang[b-ul46wdofxi] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted, #888);
    background: var(--bm-surface, #fff);
    border: 1px solid var(--border-soft, #e0e0e0);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.scv-pre[b-ul46wdofxi] {
    margin: 0;
    max-height: 38vh;
    overflow: auto;
    background: var(--bm-surface, #fff);
    padding: 10px;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

.scv-empty[b-ul46wdofxi] {
    font-size: .82rem;
    color: var(--ink-muted, #888);
    padding: 6px 0;
}
/* /Components/Shared/StarterRulesLibrary.razor.rz.scp.css */
/* Starter-rules browse dialog body. Uses the global bm-* design tokens so the
   dialog reads as part of the app, not a bootstrap leftover. */

.slib[b-og01s4b0pe] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Toolbar: search + pack pills + count ───────────────────────────────── */
.slib-toolbar[b-og01s4b0pe] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: .5px solid var(--bm-line-2);
}

.slib-search[b-og01s4b0pe] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

.slib-search svg[b-og01s4b0pe] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bm-ink-3);
    pointer-events: none;
}

.slib-search input[b-og01s4b0pe] {
    width: 100%;
    height: 30px;
    padding-left: 30px;
    font-size: 12.5px;
}

.slib-packs[b-og01s4b0pe] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.slib-pack[b-og01s4b0pe] {
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    border: .5px solid var(--bm-line-2);
    background: transparent;
    color: var(--bm-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.slib-pack:hover[b-og01s4b0pe] { background: var(--bm-surface-2); }

.slib-pack.active[b-og01s4b0pe] {
    background: var(--bm-ink);
    color: var(--bm-bg);
    border-color: transparent;
}

.slib-count[b-og01s4b0pe] {
    margin-left: auto;
    font-size: 12px;
    color: var(--bm-ink-3);
    white-space: nowrap;
}

/* ── Rule rows ──────────────────────────────────────────────────────────── */
.slib-list[b-og01s4b0pe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slib-rule[b-og01s4b0pe] {
    border: .5px solid var(--bm-line-2);
    border-radius: var(--bm-radius);
    background: var(--bm-surface);
    padding: 12px 14px;
}

.slib-rule.installed[b-og01s4b0pe] {
    border-color: color-mix(in oklab, var(--bm-ok) 35%, var(--bm-line-2));
}

.slib-rule-head[b-og01s4b0pe] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.slib-rule-meta[b-og01s4b0pe] { min-width: 0; }

.slib-rule-title-row[b-og01s4b0pe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.slib-rule-title[b-og01s4b0pe] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--bm-ink);
}

.slib-rule-id[b-og01s4b0pe] {
    display: inline-block;
    margin-top: 3px;
    font-family: var(--bm-font-mono);
    font-size: 11.5px;
    color: var(--bm-ink-3);
}

.slib-rule-actions[b-og01s4b0pe] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.slib-remove-confirm[b-og01s4b0pe] {
    color: var(--bm-critical);
    border-color: color-mix(in oklab, var(--bm-critical) 40%, var(--bm-line-2));
    background: color-mix(in oklab, var(--bm-critical) 8%, var(--bm-surface));
}

.slib-rule-what[b-og01s4b0pe] {
    margin: 8px 0 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bm-ink-2);
}

.slib-empty[b-og01s4b0pe] {
    padding: 28px;
    text-align: center;
    color: var(--bm-ink-3);
    font-size: 13px;
}

/* ── Collapsed-by-default code preview ──────────────────────────────────── */
.slib-code-toggle[b-og01s4b0pe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bm-ink-3);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.slib-code-toggle:hover[b-og01s4b0pe] { color: var(--bm-ink); }

.slib-code-box[b-og01s4b0pe] {
    position: relative;
    margin-top: 8px;
    border: .5px solid var(--bm-line-2);
    border-radius: var(--radius-md);
    background: var(--bm-surface-2);
    overflow: hidden;
}

.slib-code-box pre[b-og01s4b0pe] {
    margin: 0;
    padding: 10px 40px 10px 12px;
    max-height: 320px;
    overflow: auto;
    font-family: var(--bm-font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--bm-ink);
    white-space: pre;
}

/* Copy icon floats inside the code block (top-right) instead of a header button. */
.slib-copy[b-og01s4b0pe] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    border: .5px solid var(--bm-line-2);
    background: var(--bm-surface);
    color: var(--bm-ink-3);
    cursor: pointer;
}

.slib-copy:hover[b-og01s4b0pe] { color: var(--bm-ink); background: var(--bm-surface-2); }

/* ── Syntax highlighting (spans injected via MarkupString need ::deep) ──── */
.slib-code-box[b-og01s4b0pe]  .tok-com { color: var(--bm-ink-3); font-style: italic; }
.slib-code-box[b-og01s4b0pe]  .tok-str { color: var(--bm-ok); }
.slib-code-box[b-og01s4b0pe]  .tok-kw  { color: var(--bm-accent); }
.slib-code-box[b-og01s4b0pe]  .tok-num { color: var(--bm-warn); }
.slib-code-box[b-og01s4b0pe]  .tok-re  { color: var(--bm-warn); }
.slib-code-box[b-og01s4b0pe]  .tok-bi  { color: var(--bm-info); }
/* /Components/Shared/XmlLineDiff.razor.rz.scp.css */
.xd-empty[b-2vpxmgmjs7] {
    padding: 1.5rem;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.82rem;
}

.xd-toolbar[b-2vpxmgmjs7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-page);
}

.xd-stats[b-2vpxmgmjs7] {
    display: inline-flex;
    gap: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.xd-stat-add[b-2vpxmgmjs7] { color: var(--added-fg); }
.xd-stat-del[b-2vpxmgmjs7] { color: var(--deleted-fg); }
.xd-stat-mod[b-2vpxmgmjs7] { color: var(--modified-fg); }

.xd-truncated[b-2vpxmgmjs7] {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--ink-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1px 6px;
}

.xd-toggle[b-2vpxmgmjs7] {
    display: inline-flex;
    background: var(--surface-muted);
    padding: 3px;
    border-radius: var(--radius-md);
    gap: 2px;
}

.xd-toggle-btn[b-2vpxmgmjs7] {
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.xd-toggle-btn.active[b-2vpxmgmjs7] {
    background: var(--bm-surface);
    color: var(--ink-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.xd-toggle-btn:disabled[b-2vpxmgmjs7] {
    opacity: 0.45;
    cursor: not-allowed;
}

.xd-scroll[b-2vpxmgmjs7] {
    max-height: 70vh;
    overflow: auto;
}

.xd-table[b-2vpxmgmjs7] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.xd-col-ln[b-2vpxmgmjs7] { width: 46px; }

.xd-head th[b-2vpxmgmjs7] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-secondary);
    padding: 6px 10px;
    text-align: center;
}

.xd-ln[b-2vpxmgmjs7] {
    text-align: right;
    padding: 0 8px;
    color: var(--ink-muted);
    user-select: none;
    background: var(--surface-page);
    border-right: 1px solid var(--border-soft);
    vertical-align: top;
}

.xd-code[b-2vpxmgmjs7] {
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    vertical-align: top;
    color: var(--ink-primary);
}

.xd-code.xd-del[b-2vpxmgmjs7] { background: var(--deleted-bg); }
.xd-code.xd-add[b-2vpxmgmjs7] { background: var(--added-bg); }

.xd-gap td[b-2vpxmgmjs7] {
    text-align: center;
    padding: 3px;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--ink-muted);
    background: var(--surface-muted);
    border-top: 1px dashed var(--border-soft);
    border-bottom: 1px dashed var(--border-soft);
    user-select: none;
}

.xd-gap:hover td[b-2vpxmgmjs7] { color: var(--accent); }

/* Syntax highlighting — spans injected via MarkupString need ::deep */
.xd-code[b-2vpxmgmjs7]  .tok-com { color: var(--ink-muted); font-style: italic; }
.xd-code[b-2vpxmgmjs7]  .tok-str { color: var(--added-fg); }
.xd-code[b-2vpxmgmjs7]  .tok-kw  { color: var(--accent); font-weight: 700; }
.xd-code[b-2vpxmgmjs7]  .tok-num { color: var(--modified-fg); }
.xd-code[b-2vpxmgmjs7]  .tok-re  { color: var(--modified-fg); }
.xd-code[b-2vpxmgmjs7]  .tok-bi  { color: var(--deleted-fg); }