/* /Components/Layout/FabricConsoleLayout.razor.rz.scp.css */
/* Fabric Console shell — topbar Create pill + create menu.

   Built to exemplar/code-exemplar.html (the master exemplar): gradient pill with
   a chevron that rotates when open, a 14px-radius menu that springs in from the
   top-right corner, a contextual "In <section>" block first, then the catalogue
   grouped by verb in two columns, and a ⌘K hint footer.

   Scoped to this component on purpose — the pre-refresh `.btn-create` /
   `.create-menu` rules were deleted from app.css in the same commit, so nothing
   here has to out-specify a global. Colour flows through the semantic aliases in
   tokens.css only; the two brand strand references (`--ember-pink-*`,
   `--ember-plum-*`) are the deliberate gradient moments the rubric allows.

   `::deep` is required wherever the target svg comes from <Icon> — a child
   component's root element does not carry this component's scope attribute. */

.btn-create[b-oer9uoyvb2] {
    position: relative;
    flex: none;
}

/* ---- the gradient pill ---------------------------------------------------- */

.create-pill[b-oer9uoyvb2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 560 13.5px/1 var(--font);
    color: var(--text-on-brand);
    background: linear-gradient(120deg, var(--ember-pink-800), var(--ember-plum-500));
    border: none;
    border-radius: 99px;
    padding: 9px 17px;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-spring),
        box-shadow var(--dur-base) var(--ease-out);
}

.create-pill:hover[b-oer9uoyvb2] {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px var(--ember-pink-800);
}

.create-pill:focus-visible[b-oer9uoyvb2] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.create-pill[b-oer9uoyvb2]  svg {
    transition: transform var(--dur-base) var(--ease-spring);
}

.btn-create.open .create-pill[b-oer9uoyvb2] {
    box-shadow: 0 10px 24px -12px var(--ember-pink-800);
}

.btn-create.open .create-pill[b-oer9uoyvb2]  svg {
    transform: rotate(180deg);
}

/* ---- the menu ------------------------------------------------------------- */

.create-menu[b-oer9uoyvb2] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 580px;
    max-width: calc(100vw - 32px);
    z-index: 200;
    background: var(--surface-raised);
    color: var(--text-body);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    pointer-events: none;
    /* visibility, not just opacity: a transparent menu still holds its links in
       the tab order and the accessibility tree. It is transitioned (not toggled
       instantly) so the spring entrance survives — on open the delay is 0s so
       the menu is visible for the whole animation; on close it waits out the
       transform before flipping to hidden. */
    visibility: hidden;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-panel) var(--ease-spring),
        visibility 0s var(--dur-panel);
}

.create-menu.open[b-oer9uoyvb2] {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.create-group-label[b-oer9uoyvb2] {
    font: 590 11.5px/1.4 var(--font);
    color: var(--text-secondary);
    padding: 0 8px 6px;
}

/* contextual head — always first, two items per row */
.create-context[b-oer9uoyvb2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 14px 10px 10px;
    /* --border, not --border-soft: in dark theme --border-soft (#272427) is
       indistinguishable from --surface-raised (#262326) and the separator
       between the contextual head and the catalogue vanishes. */
    border-bottom: 1px solid var(--border);
}

.create-context .create-group-label[b-oer9uoyvb2] {
    grid-column: 1 / -1;
}

/* the catalogue — two columns of verb groups */
.create-cols[b-oer9uoyvb2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
    padding: 12px 10px 10px;
    align-items: start;
}

.create-group + .create-group[b-oer9uoyvb2] {
    margin-top: 12px;
}

.create-item[b-oer9uoyvb2] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-body);
    transition: background var(--dur-fast) var(--ease-out);
}

.create-item:hover[b-oer9uoyvb2],
.create-item:focus-visible[b-oer9uoyvb2] {
    background: var(--surface-hover);
    text-decoration: none;
}

.create-item:focus-visible[b-oer9uoyvb2] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.create-tile[b-oer9uoyvb2] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
}

.create-copy[b-oer9uoyvb2] {
    flex: 1;
    min-width: 0;
}

.create-copy b[b-oer9uoyvb2] {
    display: block;
    font: 590 13px/1.35 var(--font);
    letter-spacing: -.005em;
    color: var(--text-primary);
}

.create-copy small[b-oer9uoyvb2] {
    display: block;
    font-size: 11.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* contextual items get the brand tile and the hover arrow */
.create-item.contextual .create-tile[b-oer9uoyvb2] {
    background: linear-gradient(135deg, var(--ember-pink-500), var(--ember-plum-500));
    color: var(--text-on-brand);
}

.create-go[b-oer9uoyvb2] {
    display: flex;
    flex: none;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.create-item:hover .create-go[b-oer9uoyvb2],
.create-item:focus-visible .create-go[b-oer9uoyvb2] {
    opacity: 1;
    color: var(--accent);
    transform: translateX(2px);
}

.create-foot[b-oer9uoyvb2] {
    padding: 9px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
    font-size: 12px;
    color: var(--text-secondary);
}

.create-foot kbd[b-oer9uoyvb2] {
    font: 10.5px/1 var(--font);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 5px;
    background: var(--surface-raised);
    color: var(--text-body);
}
/* /Components/Pages/Code.razor.rz.scp.css */
/* ============================================================
   Code — section home + subsections.

   Built to docs/control-plane-operator/console-refresh/exemplar/code-exemplar.html
   (the master exemplar). Zero literal hex: every colour is a semantic alias from
   wwwroot/css/tokens.css. Sentence case throughout; mono ONLY on genuinely
   copyable values (clone URLs, commit shas, token prefixes, commands).

   Layout note: the shell's `.content` carries the page gutter (28px 36px). The
   hero and subsection heads are full-width bands, so they cancel that gutter with
   negative margins and re-apply it inside. The right edge lands exactly on the
   content border box, so nothing overflows `.content`'s `overflow-x: hidden`.
   `redesign: shell` should give pages a proper full-bleed slot and this can go.
   ============================================================ */

.code-section[b-oejd8ej1o9] {
    margin: -28px -36px 0;
}

/* ---------- shared status language ---------- */

.code-pill[b-oejd8ej1o9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 12.5px;
    font-weight: 545;
    border-radius: 99px;
    padding: 4px 11px;
    color: var(--status-off-ink);
    background: var(--status-off-soft);
}

.code-pill.ok[b-oejd8ej1o9] { color: var(--status-ok-ink); background: var(--status-ok-soft); }
.code-pill.warn[b-oejd8ej1o9] { color: var(--status-warn-ink); background: var(--status-warn-soft); }
.code-pill.err[b-oejd8ej1o9] { color: var(--status-error-ink); background: var(--status-error-soft); }

.code-dot[b-oejd8ej1o9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.code-dot.ok[b-oejd8ej1o9] { animation: code-breathe-b-oejd8ej1o9 2.6s infinite; }

.code-dot3[b-oejd8ej1o9] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: var(--status-ok-ink);
}

/* The ink variants, not the vivid fills: a 7px status dot is a meaning carrier and
   has to clear 3:1 on the card it sits on. Raw --status-warn (#EAB308) measures
   1.9:1 on a light card, so all four dots use the AA inks. */
.code-dot3.warn[b-oejd8ej1o9] { background: var(--status-warn-ink); }
.code-dot3.err[b-oejd8ej1o9] { background: var(--status-error-ink); }
.code-dot3.off[b-oejd8ej1o9] { background: var(--status-off-ink); }

@keyframes code-breathe-b-oejd8ej1o9 {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 34%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes code-rise-b-oejd8ej1o9 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.code-sep[b-oejd8ej1o9] {
    color: var(--status-off-ink);
    margin: 0 5px;
}

.code-mono[b-oejd8ej1o9] {
    font-family: var(--mono);
    font-size: 11.5px;
}

/* ---------- section home: full-page hero ---------- */

.code-hero[b-oejd8ej1o9] {
    position: relative;
    overflow: hidden;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.code-hero[b-oejd8ej1o9]::before {
    content: "";
    position: absolute;
    top: -55%;
    right: -12%;
    width: 56%;
    height: 150%;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ember-pink-500) 9%, transparent), transparent 70%);
}

.code-hero-inner[b-oejd8ej1o9] {
    position: relative;
    padding: 60px 36px 0;
}

.code-eyebrow[b-oejd8ej1o9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 540;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 99px;
    padding: 5px 14px;
}

.code-hero h1[b-oejd8ej1o9] {
    font-size: 46px;
    font-weight: 560;
    letter-spacing: -.032em;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 18px 0 0;
}

.code-lede[b-oejd8ej1o9] {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 10px 0 0;
    max-width: 560px;
}

.code-lede b[b-oejd8ej1o9] {
    color: var(--text-body);
    font-weight: 530;
}

.code-hero-status[b-oejd8ej1o9] {
    position: absolute;
    right: 36px;
    top: 62px;
    text-align: right;
}

.code-hero-since[b-oejd8ej1o9] {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ---------- tabs ---------- */

.code-tabs[b-oejd8ej1o9] {
    display: flex;
    gap: 2px;
}

.code-tabs button[b-oejd8ej1o9] {
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 545;
    color: var(--text-secondary);
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
}

.code-tabs button:hover[b-oejd8ej1o9] { color: var(--text-body); }
.code-tabs button.on[b-oejd8ej1o9] { color: var(--text-primary); }

.code-tabs button.on[b-oejd8ej1o9]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--ember-pink-500), var(--ember-plum-500));
}

.code-tabs button:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}

.code-hero-tabs[b-oejd8ej1o9] { margin-top: 30px; }
.code-hero-tabs button[b-oejd8ej1o9] { padding: 10px 16px 14px; }

/* ---------- doorway summary cards ---------- */

.code-doorways[b-oejd8ej1o9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 18px;
    padding: 34px 36px 64px;
}

.code-doorway[b-oejd8ej1o9] {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-family: var(--font);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 24px 18px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast), box-shadow var(--dur-base);
    animation: code-rise-b-oejd8ej1o9 var(--dur-panel) var(--ease-spring) both;
}

.code-doorway:nth-child(2)[b-oejd8ej1o9] { animation-delay: 60ms; }
.code-doorway:nth-child(3)[b-oejd8ej1o9] { animation-delay: 120ms; }

.code-doorway:hover[b-oejd8ej1o9] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: var(--shadow-pop);
}

.code-doorway:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.code-doorway-head[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.code-doorway-icon[b-oejd8ej1o9] {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
}

.code-doorway-head b[b-oejd8ej1o9] {
    font-size: 15px;
    font-weight: 610;
    color: var(--text-primary);
}

.code-doorway-figure[b-oejd8ej1o9] {
    font-size: 34px;
    font-weight: 545;
    letter-spacing: -.025em;
    color: var(--text-primary);
    margin: 16px 0 2px;
    font-variant-numeric: tabular-nums;
}

.code-doorway-figure small[b-oejd8ej1o9] {
    font-size: 15px;
    font-weight: 460;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-left: 6px;
}

.code-doorway-note[b-oejd8ej1o9] {
    font-size: 13.5px;
    color: var(--text-secondary);
}

.code-doorway-mid[b-oejd8ej1o9] {
    display: block;
    flex: 1;
    margin: 14px 0 12px;
}

.code-doorway-go[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--accent);
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
}

.code-doorway-go[b-oejd8ej1o9]  .fabric-icon {
    transition: transform var(--dur-fast);
}

.code-doorway:hover .code-doorway-go[b-oejd8ej1o9]  .fabric-icon {
    transform: translateX(3px);
}

.code-miniline[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    padding: 7px 0;
}

.code-miniline + .code-miniline[b-oejd8ej1o9] { border-top: 1px solid var(--border-soft); }

.code-miniline-name[b-oejd8ej1o9] {
    color: var(--text-primary);
    font-weight: 545;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-miniline-mut[b-oejd8ej1o9] {
    color: var(--text-secondary);
    font-size: 12.5px;
    flex: none;
}

/* ---------- pulse strip (one bar per real pipeline run) ---------- */

.code-pulse[b-oejd8ej1o9] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
}

.code-pulse i[b-oejd8ej1o9] {
    flex: 1;
    border-radius: 2px;
    min-height: 4px;
    /* Resting bar uses the shared quiet-data-mark role, which is tuned per theme to
       clear 3:1 against a card (a soft hairline tint measured 1.4:1 in dark). */
    background: var(--data-mark-quiet);
}

.code-pulse i.hot[b-oejd8ej1o9] { background: linear-gradient(180deg, var(--ember-pink-500), var(--ember-plum-500)); }
.code-pulse i.bad[b-oejd8ej1o9] { background: var(--status-error-ink); }

/* ---------- subsection head ---------- */

.code-subhead[b-oejd8ej1o9] {
    padding: 26px 36px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}

.code-subhead-row[b-oejd8ej1o9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.code-headline[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.code-back[b-oejd8ej1o9] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    flex: none;
    display: grid;
    place-items: center;
    color: var(--text-body);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-spring);
}

.code-back:hover[b-oejd8ej1o9] {
    color: var(--accent-contrast);
    background: var(--accent);
    border-color: var(--accent);
    transform: translateX(-2px);
}

.code-back:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.code-path[b-oejd8ej1o9] {
    font-size: 26px;
    font-weight: 590;
    letter-spacing: -.022em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.code-path-up[b-oejd8ej1o9] {
    border: none;
    background: none;
    padding: 0;
    font-family: var(--font);
    font-size: inherit;
    font-weight: 480;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--dur-fast);
}

.code-path-up:hover[b-oejd8ej1o9] { color: var(--accent); }

.code-path-up:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

.code-path-sep[b-oejd8ej1o9] {
    color: var(--text-secondary);
    font-weight: 300;
    opacity: .8;
}

.code-sub-tabs button[b-oejd8ej1o9] { padding: 10px 14px 12px; font-size: 13.5px; }

.code-subhead-foot[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 14px;
    min-height: 30px;
}

.code-subhead-note[b-oejd8ej1o9] {
    font-size: 14px;
    color: var(--text-secondary);
}

.code-subhead-actions[b-oejd8ej1o9] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- buttons ---------- */

.code-actions[b-oejd8ej1o9] { display: flex; align-items: center; gap: 8px; }

.code-primary[b-oejd8ej1o9] {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 560;
    color: var(--accent-contrast);
    background: var(--accent);
    border: none;
    border-radius: 99px;
    padding: 8px 18px;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), background var(--dur-fast);
}

.code-primary:hover:not(:disabled)[b-oejd8ej1o9] {
    transform: translateY(-1px);
    background: var(--accent-strong);
    box-shadow: 0 10px 24px -12px var(--accent);
}

.code-primary:disabled[b-oejd8ej1o9] { opacity: .55; cursor: default; }

.code-quiet[b-oejd8ej1o9] {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 530;
    color: var(--text-body);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    padding: 7px 15px;
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.code-quiet:hover:not(:disabled)[b-oejd8ej1o9] { color: var(--accent); border-color: var(--accent); }
.code-quiet:disabled[b-oejd8ej1o9] { opacity: .55; cursor: default; }

.code-primary:focus-visible[b-oejd8ej1o9],
.code-quiet:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- subsection body ---------- */

.code-wrap[b-oejd8ej1o9] { display: block; padding: 22px 36px 72px; }

/* ---------- group / status / sort controls ---------- */

.code-controls[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.code-controls-gap[b-oejd8ej1o9] { flex: 1; }

.code-ctl[b-oejd8ej1o9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 530;
    color: var(--text-body);
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    padding: 6px 13px;
    background: var(--surface-raised);
    cursor: pointer;
    transition: border-color var(--dur-fast);
}

.code-ctl:hover[b-oejd8ej1o9] { border-color: var(--accent); }

.code-ctl .k[b-oejd8ej1o9] {
    color: var(--text-secondary);
    font-weight: 470;
}

.code-ctl select[b-oejd8ej1o9] {
    appearance: none;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 545;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.code-ctl select:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

.code-ctl[b-oejd8ej1o9]  .fabric-icon { color: var(--text-secondary); }

.code-ctl.active[b-oejd8ej1o9] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.code-ctl.active .k[b-oejd8ej1o9] { color: var(--accent); }
.code-ctl.active[b-oejd8ej1o9]  .fabric-icon { color: var(--accent); }

.code-views[b-oejd8ej1o9] {
    display: flex;
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    padding: 3px;
    background: var(--surface-raised);
}

.code-views button[b-oejd8ej1o9] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 530;
    border-radius: 99px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.code-views button:hover[b-oejd8ej1o9] { color: var(--text-body); }

.code-views button.on[b-oejd8ej1o9] {
    background: var(--text-primary);
    color: var(--surface-page);
}

.code-views button:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.code-filtered-out[b-oejd8ej1o9] {
    font-size: 13.5px;
    color: var(--text-secondary);
    padding: 26px 2px;
}

/* ---------- operator shelf header ---------- */

.code-shelf[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 14px;
}

.code-shelf:first-child[b-oejd8ej1o9] { margin-top: 0; }

/* The ring is a full brand ring, not a capacity gauge: no per-operator storage
   metric exists yet (see `api: volume used-bytes telemetry`). When it lands this
   becomes a real conic arc. */
.code-shelf-ring[b-oejd8ej1o9] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--accent);
    background:
        radial-gradient(closest-side, var(--surface-page) calc(100% - 2.5px), transparent calc(100% - 2.5px)) border-box,
        conic-gradient(var(--ember-pink-500), var(--ember-plum-500)) border-box;
}

.code-shelf-ring.dim[b-oejd8ej1o9] {
    color: var(--text-secondary);
    background:
        radial-gradient(closest-side, var(--surface-page) calc(100% - 2.5px), transparent calc(100% - 2.5px)) border-box,
        conic-gradient(var(--border-strong), var(--border-strong)) border-box;
}

.code-shelf b[b-oejd8ej1o9] {
    font-size: 14px;
    font-weight: 610;
    color: var(--text-primary);
}

.code-shelf a[b-oejd8ej1o9] {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.code-shelf a:hover[b-oejd8ej1o9] { text-decoration: underline; }

.code-shelf-count[b-oejd8ej1o9] {
    font-size: 13px;
    color: var(--text-secondary);
}

.code-shelf-rule[b-oejd8ej1o9] {
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---------- repository cards ---------- */

.code-cards[b-oejd8ej1o9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.code-card[b-oejd8ej1o9] {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 22px 14px;
    box-shadow: var(--shadow);
    transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast), box-shadow var(--dur-base);
    animation: code-rise-b-oejd8ej1o9 var(--dur-panel) var(--ease-spring) both;
}

.code-card:hover[b-oejd8ej1o9] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: var(--shadow-pop);
}

.code-card-hit[b-oejd8ej1o9] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.code-card-hit:hover[b-oejd8ej1o9] { text-decoration: none; }

.code-card-hit:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 12px;
}

.code-card-top[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.code-card-icon[b-oejd8ej1o9] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
}

.code-card-id[b-oejd8ej1o9] {
    flex: 1;
    min-width: 0;
}

.code-card-id b[b-oejd8ej1o9] {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-card-id span[b-oejd8ej1o9] {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.code-card-pulse[b-oejd8ej1o9] {
    display: block;
    margin: 16px 2px 10px;
}

.code-card-pulse .code-pulse[b-oejd8ej1o9] { height: 30px; }

.code-card-foot[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
    margin-top: 12px;
    white-space: nowrap;
}

.code-card-foot b[b-oejd8ej1o9] {
    color: var(--text-body);
    font-weight: 540;
}

.code-card-foot > span:not(.code-clone)[b-oejd8ej1o9] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-clone[b-oejd8ej1o9] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.code-clone-value[b-oejd8ej1o9] {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    direction: rtl;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 168px;
}

.code-clone button[b-oejd8ej1o9],
.code-command-copy[b-oejd8ej1o9] {
    border: none;
    background: none;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--dur-fast), opacity var(--dur-fast);
}

.code-clone button[b-oejd8ej1o9] { opacity: 0; }
.code-card:hover .code-clone button[b-oejd8ej1o9],
.code-clone button:focus-visible[b-oejd8ej1o9] { opacity: 1; }

.code-clone button:hover[b-oejd8ej1o9],
.code-command-copy:hover[b-oejd8ej1o9] { color: var(--accent); }

.code-clone button:focus-visible[b-oejd8ej1o9],
.code-command-copy:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 6px;
}

/* ---------- repository pods ---------- */

.code-pods[b-oejd8ej1o9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.code-pod[b-oejd8ej1o9] {
    position: relative;
    display: block;
    text-decoration: none;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--shadow);
    transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast), box-shadow var(--dur-base);
    animation: code-rise-b-oejd8ej1o9 var(--dur-panel) var(--ease-spring) both;
}

.code-pod:hover[b-oejd8ej1o9] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: var(--shadow-pop);
    text-decoration: none;
}

.code-pod:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.code-pod-status[b-oejd8ej1o9] {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 540;
    color: var(--status-off-ink);
}

.code-pod-status.ok[b-oejd8ej1o9] { color: var(--status-ok-ink); }
.code-pod-status.warn[b-oejd8ej1o9] { color: var(--status-warn-ink); }
.code-pod-status.err[b-oejd8ej1o9] { color: var(--status-error-ink); }

.code-pod-icon[b-oejd8ej1o9] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    background: var(--accent-soft);
    color: var(--accent);
}

.code-pod b[b-oejd8ej1o9] {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.code-pod-sub[b-oejd8ej1o9] {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.code-pod-foot[b-oejd8ej1o9] {
    display: block;
    font-size: 13px;
    color: var(--text-body);
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---------- fact rows (operators, activity, tokens) ---------- */

.code-rows[b-oejd8ej1o9] {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 22px;
}

.code-row[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    font-size: 13.5px;
    color: var(--text-body);
    text-decoration: none;
}

.code-row + .code-row[b-oejd8ej1o9] { border-top: 1px solid var(--border-soft); }

.code-row.link[b-oejd8ej1o9] { cursor: pointer; transition: background var(--dur-fast); }
.code-row.link:hover[b-oejd8ej1o9] { background: var(--surface-hover); text-decoration: none; }

.code-row.link:focus-visible[b-oejd8ej1o9] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.code-row-icon[b-oejd8ej1o9] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
}

.code-row-icon.dim[b-oejd8ej1o9] {
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

.code-row-id[b-oejd8ej1o9] {
    flex: 1;
    min-width: 0;
}

.code-row-id b[b-oejd8ej1o9] {
    display: block;
    font-size: 14px;
    font-weight: 570;
    color: var(--text-primary);
}

.code-row-id small[b-oejd8ej1o9] {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-row-id small a[b-oejd8ej1o9] { color: var(--accent); text-decoration: none; }
.code-row-id small a:hover[b-oejd8ej1o9] { text-decoration: underline; }

.code-sha[b-oejd8ej1o9] {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--text-body);
    background: var(--surface-sunken);
    border-radius: 6px;
    padding: 3px 8px;
    flex: none;
}

.code-row-state[b-oejd8ej1o9] {
    font-size: 12.5px;
    font-weight: 545;
    width: 82px;
    text-align: right;
    flex: none;
    color: var(--status-off-ink);
}

.code-row-state.ok[b-oejd8ej1o9] { color: var(--status-ok-ink); }
.code-row-state.warn[b-oejd8ej1o9] { color: var(--status-warn-ink); }
.code-row-state.err[b-oejd8ej1o9] { color: var(--status-error-ink); }

.code-row-when[b-oejd8ej1o9] {
    font-size: 12.5px;
    color: var(--text-secondary);
    width: 74px;
    text-align: right;
    flex: none;
    white-space: nowrap;
}

/* ---------- created-token reveal ---------- */

.code-secret[b-oejd8ej1o9] {
    background: var(--surface-raised);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.code-secret-note[b-oejd8ej1o9] {
    display: block;
    font-size: 13px;
    font-weight: 540;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* ---------- empty states ---------- */

.code-empty[b-oejd8ej1o9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 24px 48px;
}

.code-empty-art[b-oejd8ej1o9] {
    width: 168px;
    height: 112px;
    border-radius: 18px;
    background:
        radial-gradient(closest-side at 32% 30%, color-mix(in srgb, var(--ember-pink-500) 42%, transparent), transparent),
        radial-gradient(closest-side at 72% 68%, color-mix(in srgb, var(--ember-plum-300) 38%, transparent), transparent),
        var(--surface-card);
    border: 1px solid var(--border-soft);
    margin-bottom: 22px;
}

.code-empty b[b-oejd8ej1o9] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--text-primary);
}

.code-empty p[b-oejd8ej1o9] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 470px;
    margin: 8px 0 0;
}

.code-empty-blocked[b-oejd8ej1o9] {
    color: var(--status-warn-ink) !important;
    font-weight: 530;
}

.code-empty .code-primary[b-oejd8ej1o9] { margin-top: 20px; }

.code-command[b-oejd8ej1o9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    max-width: 100%;
    background: var(--code-bg);
    border-radius: 12px;
    padding: 11px 16px;
}

.code-command code[b-oejd8ej1o9] {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--code-text);
    overflow-x: auto;
    white-space: nowrap;
}

.code-command-copy[b-oejd8ej1o9] { color: var(--code-text); }
.code-command-copy:hover[b-oejd8ej1o9] { color: var(--ember-pink-300); }

/* ---------- create forms inside the slide-over ---------- */

.code-form[b-oejd8ej1o9] {
    display: grid;
    gap: 6px;
}

.code-form label[b-oejd8ej1o9] {
    font-size: 12.5px;
    font-weight: 540;
    color: var(--text-secondary);
    margin-top: 8px;
}

.code-form label:first-child[b-oejd8ej1o9] { margin-top: 0; }

.code-form input[b-oejd8ej1o9],
.code-form select[b-oejd8ej1o9] {
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-body);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: 8px 11px;
    width: 100%;
}

.code-form input:focus-visible[b-oejd8ej1o9],
.code-form select:focus-visible[b-oejd8ej1o9] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.code-form-note[b-oejd8ej1o9] {
    font-size: 13px;
    color: var(--status-error-ink);
    margin: 0;
}

/* ---------- loading skeleton (real layout shape) ---------- */

.code-skeleton[b-oejd8ej1o9] {
    display: block;
    border-radius: 10px;
    background: linear-gradient(
        100deg,
        var(--surface-sunken) 30%,
        var(--surface-hover) 50%,
        var(--surface-sunken) 70%);
    background-size: 300% 100%;
    animation: code-shimmer-b-oejd8ej1o9 1.5s linear infinite;
}

.code-skeleton.pill[b-oejd8ej1o9] { width: 116px; height: 27px; border-radius: 99px; }
.code-skeleton.title[b-oejd8ej1o9] { width: min(520px, 80%); height: 50px; margin-top: 18px; }
.code-skeleton.lede[b-oejd8ej1o9] { width: min(560px, 92%); height: 44px; margin-top: 12px; }
.code-skeleton.tabs[b-oejd8ej1o9] { width: min(430px, 96%); height: 20px; margin: 34px 0 18px; }
.code-skeleton.doorway[b-oejd8ej1o9] { height: 250px; border-radius: 18px; }

@keyframes code-shimmer-b-oejd8ej1o9 {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

/* ---------- responsive: holds from ~768px up (Console.iOS owns phones) ---------- */

@media (max-width: 900px) {
    .code-hero h1[b-oejd8ej1o9] { font-size: 36px; }

    .code-hero-status[b-oejd8ej1o9] {
        position: static;
        text-align: left;
        margin-top: 18px;
    }

    .code-subhead-row[b-oejd8ej1o9] { flex-direction: column; align-items: flex-start; gap: 12px; }
    .code-tabs[b-oejd8ej1o9] { flex-wrap: wrap; }
    .code-clone-value[b-oejd8ej1o9] { max-width: 108px; }
    .code-cards[b-oejd8ej1o9] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Nodes.razor.rz.scp.css */
/* Fabric Console — Nodes.
   Built against docs/control-plane-operator/console-refresh/exemplar/nodes-exemplar.html,
   which is the binding design bar. Editorial: type and whitespace carry the page,
   colour is surgical, resources are tangible objects rather than table rows.

   Scoped to this page. Every colour flows through a semantic alias from
   tokens.css — there is not a literal hex in this file, and there must not be.
   The rest of the node *detail* admin surface still runs on app.css; it has its
   own menu item. */

.nodes-page[b-8j269s374r] {
    max-width: 1020px;
}

/* The detail route still carries the pre-refresh admin panels, whose tables
   want the wider measure app.css gave them. */
.nodes-page.node-admin-grid[b-8j269s374r] {
    max-width: 1180px;
}

/* ============================================================
   hero
   ============================================================ */

.hero[b-8j269s374r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.hero-titles[b-8j269s374r] {
    min-width: 0;
}

/* Sentence case, quiet, body-sized. Not an uppercase tracked kicker. */
.hero-eyebrow[b-8j269s374r] {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.hero h1[b-8j269s374r] {
    margin: 0;
    font-size: 42px;
    font-weight: 560;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--text-primary);
}

/* A hostname is a longer word than "Nodes" and sits under a breadcrumb, so the
   detail hero steps down a size without changing character. */
.hero.is-detail h1[b-8j269s374r] {
    font-size: 34px;
    overflow-wrap: anywhere;
}

.hero-sub[b-8j269s374r] {
    margin: 9px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.hero-sub b[b-8j269s374r] {
    color: var(--text-body);
    font-weight: 520;
}

/* The separator is decoration, not a word: --text-faint is the non-text ink. */
.sep[b-8j269s374r] {
    color: var(--text-faint);
    margin: 0 6px;
}

.hero-aside[b-8j269s374r] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.hero .chips[b-8j269s374r] {
    margin-top: 12px;
}

/* ---------- the live/status line ----------
   One green dot doing the "healthy" work, per the rubric. */

.live[b-8j269s374r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 13px;
    font-weight: 520;
    color: var(--status-ok-ink);
    white-space: nowrap;
}

.live.is-off[b-8j269s374r] {
    color: var(--text-secondary);
}

.dot[b-8j269s374r] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-ok);
    animation: node-pulse-b-8j269s374r 2.6s infinite;
}

.dot.off[b-8j269s374r] {
    background: var(--text-faint);
    animation: none;
}

@keyframes node-pulse-b-8j269s374r {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-ok) 30%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   stat strip — hairline ruled, never floating cards

   The cell class is `.band-cell`, NOT `.stat`: app.css still ships a legacy
   global `.stat` (card background, 4-side border, 10px radius, box-shadow,
   cursor:pointer, accent hover border) and scoped CSS raises specificity
   without displacing properties this block never mentions. A name the global
   sheet cannot match is the only way the strip stays a hairline strip.
   ============================================================ */

.band[b-8j269s374r] {
    display: grid;
    grid-template-columns: repeat(var(--band-cols, 4), 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 30px 0 46px;
}

.band-cell[b-8j269s374r] {
    padding: 24px 26px 22px;
    border-right: 1px solid var(--border);
}

.band-cell:last-child[b-8j269s374r] {
    border-right: none;
}

.band-cell .k[b-8j269s374r] {
    font-size: 13px;
    color: var(--text-secondary);
}

.band-cell .v[b-8j269s374r] {
    margin-top: 9px;
    font-size: 31px;
    font-weight: 530;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.band-cell .v .okdot[b-8j269s374r] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-ok);
    margin-left: 10px;
    vertical-align: 5px;
}

.band-cell .d[b-8j269s374r] {
    margin-top: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================================
   section head + view toggle
   ============================================================ */

.sect[b-8j269s374r] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.sect h2[b-8j269s374r] {
    margin: 0;
    font-size: 17px;
    font-weight: 590;
    letter-spacing: -.012em;
    color: var(--text-primary);
}

.sect .count[b-8j269s374r] {
    font-size: 13px;
    color: var(--text-secondary);
}

.sect .sp[b-8j269s374r] {
    flex: 1;
}

/* Ink-filled segmented pill: the selected half inverts rather than tinting, so
   the control reads at a glance without spending brand colour on it. */
.views[b-8j269s374r] {
    display: flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface-raised);
}

.views button[b-8j269s374r] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--text-secondary);
    font: 530 13px/1.2 var(--font);
    cursor: pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.views button:hover[b-8j269s374r] {
    color: var(--text-primary);
}

.views button.on[b-8j269s374r] {
    background: var(--text-primary);
    color: var(--surface-raised);
}

.views button:focus-visible[b-8j269s374r] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   pods view — tangible device tiles
   ============================================================ */

.pods[b-8j269s374r] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pod[b-8j269s374r] {
    /* the tile's own face colour, so the ring's punched-out centre always
       matches whatever plane the tile is sitting on */
    --pod-face: var(--surface-raised);
    position: relative;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-raised);
    transition:
        transform var(--dur-panel) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-panel) var(--ease-out);
    animation: node-rise-b-8j269s374r var(--dur-panel) var(--ease-spring) both;
}

.pod:nth-child(2)[b-8j269s374r], .sp3:nth-child(2)[b-8j269s374r] { animation-delay: 50ms; }
.pod:nth-child(3)[b-8j269s374r], .sp3:nth-child(3)[b-8j269s374r] { animation-delay: 100ms; }
.pod:nth-child(4)[b-8j269s374r], .sp3:nth-child(4)[b-8j269s374r] { animation-delay: 150ms; }
.pod:nth-child(n+5)[b-8j269s374r], .sp3:nth-child(n+5)[b-8j269s374r] { animation-delay: 200ms; }

@keyframes node-rise-b-8j269s374r {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* The whole tile opens the node. It is a real anchor stretched over the tile —
   middle-click, copy-link and keyboard all keep working — with the reveal
   affordance lifted above it so the two gestures never collide. */
.hit[b-8j269s374r] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

.hit:focus-visible[b-8j269s374r] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.pod:hover[b-8j269s374r],
.sp3:hover[b-8j269s374r] {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: var(--shadow-hover);
}

.pod:hover[b-8j269s374r] {
    transform: translateY(-2px);
}

.pod .st[b-8j269s374r] {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 530;
    color: var(--status-ok-ink);
}

.pod.is-off .st[b-8j269s374r] {
    color: var(--text-secondary);
}

/* Capacity as a conic ring around the hardware badge. --load is set inline from
   the node's own observed storage; a node that reports none gets `is-static`,
   a plain brand ring that claims nothing. */
.pod .ring[b-8j269s374r] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 15px;
    border-radius: 50%;
    color: var(--accent);
    background:
        radial-gradient(closest-side, var(--pod-face) calc(100% - 3.5px), transparent calc(100% - 3.5px)) border-box,
        conic-gradient(var(--load-arc-from), var(--load-arc-to) var(--load, 0%), var(--ring-track) 0) border-box;
}

.pod .ring.is-static[b-8j269s374r] {
    background:
        radial-gradient(closest-side, var(--pod-face) calc(100% - 3.5px), transparent calc(100% - 3.5px)) border-box,
        conic-gradient(var(--load-arc-from), var(--load-arc-to), var(--load-arc-idle), var(--load-arc-from)) border-box;
}

.pod.is-off .ring[b-8j269s374r],
.pod.is-off .ring.is-static[b-8j269s374r] {
    background:
        radial-gradient(closest-side, var(--pod-face) calc(100% - 3.5px), transparent calc(100% - 3.5px)) border-box,
        conic-gradient(var(--ring-track) 0 100%) border-box;
    color: var(--text-secondary);
}

.pod b[b-8j269s374r] {
    display: block;
    font-size: 15.5px;
    font-weight: 590;
    letter-spacing: -.01em;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.pod .hw[b-8j269s374r] {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Facts wrap between themselves, never inside a value: a narrow tile may put
   "72% storage used" on a second line, but "125.5 GiB" never splits. */
.pod .cap[b-8j269s374r] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 13px;
    /* keep the facts clear of the reveal affordance pinned bottom-right */
    padding-right: 44px;
    font-size: 13px;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

.pod .cap span[b-8j269s374r] {
    white-space: nowrap;
}

/* An offline node is quieter, but never faded past the contrast floor: the
   tile loses its ring colour and its status ink steps back, the text does not
   dissolve. */
.pod.is-off[b-8j269s374r],
.sp3.is-off[b-8j269s374r] {
    --pod-face: var(--surface-card);
    background: var(--surface-card);
}

/* ---------- the reveal affordance on a tile/row ---------- */

.pod[b-8j269s374r]  .reveal-button,
.sp3[b-8j269s374r]  .reveal-button {
    position: relative;
    z-index: 2;
    color: var(--text-secondary);
}

.pod[b-8j269s374r]  .reveal-button {
    position: absolute;
    right: 18px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-sunken);
}

.pod:hover[b-8j269s374r]  .reveal-button,
.pod[b-8j269s374r]  .reveal-button:focus-visible,
.sp3:hover[b-8j269s374r]  .reveal-button,
.sp3[b-8j269s374r]  .reveal-button:focus-visible {
    color: var(--accent);
}

/* ============================================================
   strip view — full-width stadium rows
   ============================================================ */

.strip[b-8j269s374r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp3[b-8j269s374r] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    transition:
        transform var(--dur-panel) var(--ease-spring),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-panel) var(--ease-out);
    animation: node-rise-b-8j269s374r var(--dur-panel) var(--ease-spring) both;
}

.sp3:hover[b-8j269s374r] {
    transform: translateX(4px);
}

.sp3 .med[b-8j269s374r] {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--status-ok-soft);
}

.sp3.is-off .med[b-8j269s374r] {
    background: var(--status-off-soft);
}

.sp3 .med .dot[b-8j269s374r] {
    width: 9px;
    height: 9px;
}

.sp3 .id[b-8j269s374r] {
    flex: 1;
    min-width: 0;
    margin-left: 16px;
}

.sp3 .id b[b-8j269s374r] {
    font-size: 15.5px;
    font-weight: 590;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.sp3 .id > span[b-8j269s374r] {
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.sp3 .caps[b-8j269s374r] {
    flex: none;
    margin-right: 24px;
    font-size: 13px;
    color: var(--text-body);
}

.sp3 .load[b-8j269s374r] {
    flex: none;
    width: 186px;
    margin-right: 18px;
}

/* The percentage rides beside the bar so the strip carries the figure as text,
   exactly as the pods view does — the gradient is never the only carrier. */
.sp3 .load .bar-row[b-8j269s374r] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp3 .load .pct[b-8j269s374r] {
    flex: none;
    min-width: 34px;
    text-align: right;
    font-size: 12.5px;
    font-weight: 520;
    color: var(--text-body);
    font-variant-numeric: tabular-nums;
}

/* Screen-reader-only qualifier: "62%" alone does not say what it measures. */
.vh[b-8j269s374r] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sp3 .load .bar[b-8j269s374r] {
    display: block;
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: 3px;
    background: var(--ring-track);
    overflow: hidden;
}

.sp3 .load .bar i[b-8j269s374r] {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 3px;
    background: linear-gradient(90deg, var(--load-arc-from), var(--load-arc-to));
}

.sp3 .load .load-note[b-8j269s374r] {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Decorative: the row is already a link, this is the affordance that says so. */
.sp3 .go[b-8j269s374r] {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    border-radius: 50%;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.sp3:hover .go[b-8j269s374r] {
    color: var(--accent-contrast);
    background: var(--accent);
}

/* ============================================================
   empty state — teach, then hand over the exact command
   ============================================================ */

.empty-state[b-8j269s374r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 520px;
    margin: 56px auto 0;
}

/* Placeholder until the imagery pass lands: the Ember gradient at low opacity
   behind the node glyph. See the image-gen comment in Nodes.razor. */
.empty-illustration[b-8j269s374r] {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border-radius: 34px;
    color: var(--accent);
    background: var(--surface-card);
    box-shadow: inset 0 0 0 1px var(--border-soft);
    overflow: hidden;
}

.empty-illustration[b-8j269s374r]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ember-gradient);
    opacity: .18;
}

.empty-illustration[b-8j269s374r]  .fabric-icon {
    position: relative;
}

.empty-state h2[b-8j269s374r] {
    margin: 26px 0 0;
    font-size: 22px;
    font-weight: 590;
    letter-spacing: -.018em;
    color: var(--text-primary);
}

.empty-state p[b-8j269s374r] {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.empty-state .command[b-8j269s374r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface-raised);
}

.empty-state .command code[b-8j269s374r] {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-body);
}

.command-copy[b-8j269s374r] {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.command-copy:hover[b-8j269s374r] {
    background: var(--accent);
    color: var(--accent-contrast);
}

.command-copy:focus-visible[b-8j269s374r] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   tier-3 fields inside the slide-over
   Interim: the shared DetailField component (its own menu item) replaces the
   Field template in Nodes.razor and these rules together.
   ============================================================ */

.fields[b-8j269s374r] {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
}

.field[b-8j269s374r] {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    font-size: 13.5px;
}

.field + .field[b-8j269s374r] {
    border-top: 1px solid var(--border-soft);
}

.field .fl[b-8j269s374r] {
    color: var(--text-secondary);
}

.field .fv[b-8j269s374r] {
    color: var(--text-body);
    overflow-wrap: anywhere;
}

/* Mono is for values that get copied into a terminal, and nothing else. */
.field .fv.mono[b-8j269s374r] {
    font-family: var(--mono);
    font-size: 12.5px;
}

.field .fc[b-8j269s374r] {
    display: grid;
    place-items: center;
    padding: 3px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.field:hover .fc[b-8j269s374r],
.field .fc:focus-visible[b-8j269s374r] {
    opacity: 1;
    color: var(--text-secondary);
}

.field .fc:hover[b-8j269s374r] {
    color: var(--accent);
}

.field .fc:focus-visible[b-8j269s374r] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ============================================================
   detail route — hero aside affordance
   ============================================================ */

.hero-aside[b-8j269s374r]  .reveal-button {
    color: var(--text-secondary);
}

.hero-aside[b-8j269s374r]  .reveal-button:hover,
.hero-aside[b-8j269s374r]  .reveal-button:focus-visible {
    color: var(--accent);
}

/* ============================================================
   narrow fallback — desktop + tablet are the target; phones stay usable
   ============================================================ */

@media (max-width: 1040px) {
    .pods[b-8j269s374r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .band[b-8j269s374r] {
        grid-template-columns: repeat(2, 1fr);
    }

    .band-cell:nth-child(2n)[b-8j269s374r] {
        border-right: none;
    }

    .band-cell:nth-child(n+3)[b-8j269s374r] {
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 720px) {
    .hero[b-8j269s374r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hero h1[b-8j269s374r] {
        font-size: 34px;
    }

    .pods[b-8j269s374r] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp3 .caps[b-8j269s374r],
    .sp3 .load[b-8j269s374r] {
        display: none;
    }
}
/* /Components/Pages/Pipelines.razor.rz.scp.css */
/* ============================================================
   Pipeline — section home.

   Built to docs/control-plane-operator/console-refresh/exemplar/pipeline-exemplar.html.
   Zero literal hex: every colour is a semantic alias from wwwroot/css/tokens.css.
   Sentence case throughout; mono ONLY on genuinely copyable values (run ids,
   image refs, log lines).

   Layout note: the shell's `.content` carries the page gutter (28px 36px). The
   hero and subsection heads are full-width bands, so they cancel that gutter with
   negative margins and re-apply it inside. `redesign: shell` should give pages a
   proper full-bleed slot and this can go.

   Data marks: the delivery wall's heat tiles are the first consumers of the
   `--heat-*` roles (see brand-tokens.md Derivations). They are information
   carriers and hold ≥3:1 on the card they sit on; `--heat-idle` is a track and is
   exempt, exactly like `--ring-track`.
   ============================================================ */

.pipe-section[b-p7br2sforb] {
    margin: -28px -36px 0;
}

/* ---------- shared status language ---------- */

.pipe-pill[b-p7br2sforb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 12.5px;
    font-weight: 545;
    border-radius: 99px;
    padding: 4px 11px;
    color: var(--status-off-ink);
    background: var(--status-off-soft);
}

.pipe-pill.ok[b-p7br2sforb] { color: var(--status-ok-ink); background: var(--status-ok-soft); }
.pipe-pill.warn[b-p7br2sforb] { color: var(--status-warn-ink); background: var(--status-warn-soft); }
.pipe-pill.err[b-p7br2sforb] { color: var(--status-error-ink); background: var(--status-error-soft); }

.pipe-dot[b-p7br2sforb] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.pipe-dot.ok[b-p7br2sforb] { animation: pipe-breathe-b-p7br2sforb 2.6s infinite; }

.pipe-sep[b-p7br2sforb] {
    color: var(--status-off-ink);
    margin: 0 5px;
}

@keyframes pipe-breathe-b-p7br2sforb {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 34%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pipe-brand-breathe-b-p7br2sforb {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember-pink-500) 40%, transparent); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pipe-rise-b-p7br2sforb {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes pipe-flow-b-p7br2sforb {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

@keyframes pipe-puck-in-b-p7br2sforb {
    from { opacity: 0; transform: translateX(-50%) scale(.35); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---------- section home: full-page hero ---------- */

.pipe-hero[b-p7br2sforb] {
    position: relative;
    overflow: hidden;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.pipe-hero[b-p7br2sforb]::before {
    content: "";
    position: absolute;
    top: -55%;
    right: -12%;
    width: 56%;
    height: 150%;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--ember-pink-500) 9%, transparent), transparent 70%);
}

.pipe-hero-inner[b-p7br2sforb] {
    position: relative;
    padding: 58px 36px 0;
    max-width: 1010px;
}

.pipe-eyebrow[b-p7br2sforb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 540;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 99px;
    padding: 5px 14px;
}

.pipe-hero h1[b-p7br2sforb] {
    font-size: 46px;
    font-weight: 560;
    letter-spacing: -.032em;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 18px 0 0;
}

.pipe-lede[b-p7br2sforb] {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 10px 0 0;
    max-width: 580px;
}

/* ---------- the machine: the delivery line, live ---------- */

.pipe-machine[b-p7br2sforb] {
    position: relative;
    margin: 40px 0 4px;
    height: 126px;
}

.pipe-rail[b-p7br2sforb] {
    position: absolute;
    left: 3%;
    right: 3%;
    top: 30px;
    height: 3px;
    border-radius: 3px;
    /* the ONE sanctioned brand ramp on a data surface (see brand-tokens) */
    background: linear-gradient(90deg,
        var(--load-arc-from),
        var(--load-arc-to) 55%,
        var(--load-arc-idle) 90%);
}

.pipe-rail-flow[b-p7br2sforb] {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg,
        transparent 0 18px,
        color-mix(in srgb, var(--surface-raised) 55%, transparent) 18px 28px);
    animation: pipe-flow-b-p7br2sforb 1.1s linear infinite;
}

.pipe-station[b-p7br2sforb] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 160px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
}

.pipe-station-node[b-p7br2sforb] {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--accent);
    transition: transform var(--dur-base) var(--ease-spring),
        border-color var(--dur-fast),
        box-shadow var(--dur-base);
}

.pipe-station:hover .pipe-station-node[b-p7br2sforb],
.pipe-station:focus-visible .pipe-station-node[b-p7br2sforb] {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: var(--shadow-hover);
}

.pipe-station:focus-visible[b-p7br2sforb] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.pipe-station-name[b-p7br2sforb] {
    display: block;
    font-size: 13px;
    font-weight: 610;
    color: var(--text-primary);
    margin-top: 10px;
}

.pipe-station-count[b-p7br2sforb] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

/* The station is a doorway: hovering (or focusing) swaps its count for the
   go-link. The station itself is a real anchor, so the affordance is never
   mouse-only — keyboard focus reveals the same label. */
.pipe-station-go[b-p7br2sforb] {
    display: block;
    font-size: 12px;
    font-weight: 560;
    color: var(--accent);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--dur-fast);
}

.pipe-station-go[b-p7br2sforb]  .fabric-icon { margin-left: 4px; vertical-align: -1px; }

.pipe-station:hover .pipe-station-count[b-p7br2sforb],
.pipe-station:focus-visible .pipe-station-count[b-p7br2sforb] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.pipe-station:hover .pipe-station-go[b-p7br2sforb],
.pipe-station:focus-visible .pipe-station-go[b-p7br2sforb] {
    max-height: 22px;
    opacity: 1;
}

/* the station the in-flight run is actually at */
.pipe-station.live .pipe-station-node[b-p7br2sforb] {
    background: linear-gradient(135deg, var(--ember-pink-500), var(--ember-plum-500));
    border-color: transparent;
    color: var(--text-on-brand);
    animation: pipe-brand-breathe-b-p7br2sforb 1.8s infinite;
}

/* The puck sits where the run genuinely is — no travel loop. Its entrance is the
   only motion, so there is nothing to freeze under reduced motion beyond the
   global duration collapse. */
.pipe-puck[b-p7br2sforb] {
    position: absolute;
    top: 23px;
    left: var(--puck-left, 6%);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    z-index: 3;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--load-arc-from), var(--load-arc-to));
    box-shadow: 0 0 16px color-mix(in srgb, var(--ember-pink-500) 60%, transparent);
    animation: pipe-puck-in-b-p7br2sforb var(--dur-panel) var(--ease-spring) both;
}

.pipe-puck-label[b-p7br2sforb] {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 560;
    color: var(--accent);
}

.pipe-puck-label code[b-p7br2sforb] {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 440;
}

/* ---------- proof row: the page's only stat strip ---------- */

.pipe-proof[b-p7br2sforb] {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.pipe-stat .k[b-p7br2sforb] {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.pipe-stat .v[b-p7br2sforb] {
    font-size: 21px;
    font-weight: 580;
    letter-spacing: -.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pipe-stat .v small[b-p7br2sforb] {
    font-size: 13px;
    font-weight: 460;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* ---------- tabs ---------- */

.pipe-tabs[b-p7br2sforb] {
    display: flex;
    gap: 2px;
}

.pipe-tabs button[b-p7br2sforb] {
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 545;
    color: var(--text-secondary);
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
}

.pipe-tabs button:hover[b-p7br2sforb] { color: var(--text-body); }
.pipe-tabs button.on[b-p7br2sforb] { color: var(--text-primary); }

.pipe-tabs button.on[b-p7br2sforb]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--ember-pink-500), var(--ember-plum-500));
}

.pipe-tabs button:focus-visible[b-p7br2sforb] {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}

.pipe-hero-tabs[b-p7br2sforb] { margin-top: 30px; }
.pipe-hero-tabs button[b-p7br2sforb] { padding: 10px 16px 14px; }
.pipe-sub-tabs button[b-p7br2sforb] { padding: 10px 14px 12px; font-size: 13.5px; }

/* ---------- subsection head ---------- */

.pipe-subhead[b-p7br2sforb] {
    /* Full-bleed band like the hero: background and rule run edge-to-edge,
       content constrained by the inner row's own max-width. */
    padding: 30px 36px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}

.pipe-subhead > *[b-p7br2sforb] {
    max-width: 1010px;
}

.pipe-subhead-row[b-p7br2sforb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.pipe-headline[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pipe-back[b-p7br2sforb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    flex: none;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-spring);
}

.pipe-back:hover[b-p7br2sforb] {
    color: var(--accent-contrast);
    background: var(--accent);
    border-color: var(--accent);
    transform: translateX(-2px);
}

.pipe-back:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); }

.pipe-path[b-p7br2sforb] {
    font-size: 26px;
    font-weight: 590;
    letter-spacing: -.022em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.pipe-path-up[b-p7br2sforb] {
    border: none;
    background: none;
    font-family: var(--font);
    font-size: inherit;
    font-weight: 480;
    color: var(--text-secondary);
    padding: 0;
    cursor: pointer;
}

.pipe-path-up:hover[b-p7br2sforb] { color: var(--accent); }
.pipe-path-up:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.pipe-path-sep[b-p7br2sforb] {
    color: var(--text-faint);
    font-weight: 300;
}

.pipe-subhead-foot[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 3px 0 14px;
}

.pipe-subhead-note[b-p7br2sforb] {
    font-size: 14px;
    color: var(--text-secondary);
}

.pipe-subhead-actions[b-p7br2sforb] { margin-left: auto; }

.pipe-actions[b-p7br2sforb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pipe-primary[b-p7br2sforb] {
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 560;
    color: var(--text-on-brand);
    background: linear-gradient(120deg, var(--ember-pink-800), var(--ember-plum-500));
    border: none;
    border-radius: 99px;
    padding: 8px 17px;
    cursor: pointer;
}

.pipe-quiet[b-p7br2sforb] {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 530;
    color: var(--text-body);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 7px 14px;
    cursor: pointer;
}

.pipe-quiet:hover[b-p7br2sforb] { border-color: var(--border-strong); }
.pipe-primary:focus-visible[b-p7br2sforb],
.pipe-quiet:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); }

.pipe-wrap[b-p7br2sforb] {
    padding: 24px 36px 90px;
    max-width: 1010px;
}

.pipe-note[b-p7br2sforb] {
    font-size: 13.5px;
    color: var(--status-warn-ink);
    background: var(--status-warn-soft);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 18px;
}

/* ---------- control-room band: Now + Sealed ---------- */

.pipe-cr[b-p7br2sforb] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.pipe-cr:has(> :only-child)[b-p7br2sforb] { grid-template-columns: minmax(0, 1fr); }

.pipe-crcard[b-p7br2sforb] {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pipe-rise-b-p7br2sforb var(--dur-panel) var(--ease-spring) both;
}

.pipe-crcard-head[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
    font-weight: 610;
    color: var(--text-primary);
}

.pipe-gap[b-p7br2sforb] { flex: 1; }

.pipe-crcard-head a[b-p7br2sforb],
.pipe-crcard-head button[b-p7br2sforb] {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 540;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pipe-crcard-head a:hover[b-p7br2sforb],
.pipe-crcard-head button:hover[b-p7br2sforb] { text-decoration: underline; }

.pipe-crcard-head a:focus-visible[b-p7br2sforb],
.pipe-crcard-head button:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.pipe-now[b-p7br2sforb] { padding: 14px 20px; }

.pipe-now-title[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.pipe-now-title code[b-p7br2sforb] {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 440;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border-radius: 5px;
    padding: 2px 7px;
}

.pipe-now-title small[b-p7br2sforb] {
    font-size: 12.5px;
    font-weight: 440;
    color: var(--text-secondary);
}

.pipe-now-title.quiet[b-p7br2sforb] { color: var(--text-body); }

.pipe-live-dot[b-p7br2sforb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--ember-pink-500);
    animation: pipe-brand-breathe-b-p7br2sforb 1.8s infinite;
}

.pipe-idle-dot[b-p7br2sforb] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--status-off-ink);
}

.pipe-now-note[b-p7br2sforb] {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 10px 0 0;
}

.pipe-ticker[b-p7br2sforb] {
    margin-top: 11px;
    background: var(--code-bg);
    border-radius: 10px;
    padding: 9px 14px;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--code-text);
    overflow-x: auto;
    white-space: pre;
}

.pipe-crcard-foot[b-p7br2sforb] {
    padding: 0 20px 14px;
    margin-top: auto;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.pipe-crcard-foot code[b-p7br2sforb] {
    font-family: var(--mono);
    font-size: 11px;
}

.pipe-crcard-foot a[b-p7br2sforb] { color: var(--accent); text-decoration: none; }
.pipe-crcard-foot a:hover[b-p7br2sforb] { text-decoration: underline; }

/* ---------- sealed receipts ---------- */

.pipe-seal[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    text-decoration: none;
    color: inherit;
}

.pipe-seal + .pipe-seal[b-p7br2sforb] { border-top: 1px solid var(--border-soft); }
.pipe-seal:hover[b-p7br2sforb] { background: var(--surface-hover); }
.pipe-seal:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); }

.pipe-seal-stamp[b-p7br2sforb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.pipe-seal-tx[b-p7br2sforb] {
    flex: 1;
    min-width: 0;
}

.pipe-seal-tx b[b-p7br2sforb] {
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 590;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipe-seal-tx small[b-p7br2sforb] {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipe-seal-when[b-p7br2sforb] {
    font-size: 12px;
    color: var(--text-secondary);
    flex: none;
}

/* ---------- delivery wall ---------- */

.pipe-wall[b-p7br2sforb] {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px 22px;
    margin-bottom: 22px;
    animation: pipe-rise-b-p7br2sforb var(--dur-panel) var(--ease-spring) both;
    animation-delay: 60ms;
}

.pipe-wall-head[b-p7br2sforb] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pipe-wall-head b[b-p7br2sforb] {
    font-size: 13.5px;
    font-weight: 610;
    color: var(--text-primary);
}

.pipe-wall-head span[b-p7br2sforb] {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.pipe-wrow[b-p7br2sforb] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.pipe-wrow + .pipe-wrow[b-p7br2sforb] { border-top: 1px solid var(--border-soft); }

.pipe-wrow-name[b-p7br2sforb] {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 590;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.pipe-wrow-name:hover[b-p7br2sforb] { color: var(--accent); }
.pipe-wrow-name:focus-visible[b-p7br2sforb] { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.pipe-wrow-name small[b-p7br2sforb] {
    display: block;
    font-size: 11px;
    font-weight: 440;
    color: var(--text-secondary);
}

.pipe-heat[b-p7br2sforb] {
    display: flex;
    gap: 4px;
}

.pipe-heat i[b-p7br2sforb] {
    flex: 1;
    min-width: 8px;
    height: 22px;
    border-radius: 5px;
    background: var(--heat-ok);
    transition: transform var(--dur-fast);
}

.pipe-heat i:hover[b-p7br2sforb] { transform: scaleY(1.18); }
.pipe-heat i.strong[b-p7br2sforb] { background: var(--heat-ok-strong); }
.pipe-heat i.err[b-p7br2sforb] { background: var(--heat-err); }
.pipe-heat i.idle[b-p7br2sforb] { background: var(--heat-idle); }

/* running now is the only tile wearing brand colour — the sanctioned data ramp */
.pipe-heat i.run[b-p7br2sforb] {
    background: linear-gradient(180deg, var(--load-arc-from), var(--load-arc-to));
    animation: pipe-brand-breathe-b-p7br2sforb 1.8s infinite;
}

.pipe-wrow-pct[b-p7br2sforb] {
    font-size: 12.5px;
    font-weight: 560;
    color: var(--status-ok-ink);
    font-variant-numeric: tabular-nums;
    width: 46px;
    text-align: right;
}

.pipe-wrow-pct.warm[b-p7br2sforb] { color: var(--status-error-ink); }
.pipe-wrow-pct.dim[b-p7br2sforb] { color: var(--text-secondary); font-weight: 440; }

/* ---------- operator rows ---------- */

.pipe-shelf[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 12px;
}

.pipe-shelf b[b-p7br2sforb] {
    font-size: 14px;
    font-weight: 610;
    color: var(--text-primary);
}

.pipe-shelf-count[b-p7br2sforb] {
    font-size: 13px;
    color: var(--text-secondary);
}

.pipe-shelf-rule[b-p7br2sforb] {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.pipe-rows[b-p7br2sforb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pipe-row[b-p7br2sforb] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 14px 18px;
}

.pipe-row-icon[b-p7br2sforb] {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
}

.pipe-row-icon.dim[b-p7br2sforb] {
    background: var(--status-off-soft);
    color: var(--status-off-ink);
}

.pipe-row-id[b-p7br2sforb] {
    flex: 1;
    min-width: 0;
}

.pipe-row-id b[b-p7br2sforb] {
    display: block;
    font-size: 14.5px;
    font-weight: 590;
    color: var(--text-primary);
}

.pipe-row-id small[b-p7br2sforb] {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.pipe-row-id small a[b-p7br2sforb] { color: var(--accent); text-decoration: none; }
.pipe-row-id small a:hover[b-p7br2sforb] { text-decoration: underline; }

/* ---------- empty state ---------- */

.pipe-empty[b-p7br2sforb] {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 40px 36px 36px;
    text-align: center;
}

.pipe-empty-art[b-p7br2sforb] {
    width: 172px;
    height: 108px;
    margin: 0 auto 22px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--ember-purple-500),
        var(--ember-plum-500) 55%,
        var(--ember-pink-500));
    opacity: .16;
}

.pipe-empty b[b-p7br2sforb] {
    display: block;
    font-size: 19px;
    font-weight: 590;
    color: var(--text-primary);
}

.pipe-empty p[b-p7br2sforb] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 8px auto 18px;
    max-width: 460px;
    line-height: 1.6;
}

.pipe-command[b-p7br2sforb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-sunken);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 18px;
}

.pipe-command code[b-p7br2sforb] {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-body);
}

.pipe-empty .pipe-primary[b-p7br2sforb] { display: block; margin: 0 auto; }

/* ---------- loading skeleton ---------- */

.pipe-skeleton[b-p7br2sforb] {
    display: block;
    border-radius: 10px;
    background: linear-gradient(100deg,
        var(--surface-sunken) 30%,
        var(--surface-hover) 50%,
        var(--surface-sunken) 70%);
    background-size: 300% 100%;
    animation: pipe-shimmer-b-p7br2sforb 1.5s linear infinite;
}

.pipe-skeleton.pill[b-p7br2sforb] { width: 132px; height: 27px; border-radius: 99px; }
.pipe-skeleton.title[b-p7br2sforb] { width: min(520px, 80%); height: 50px; margin-top: 18px; }
.pipe-skeleton.lede[b-p7br2sforb] { width: min(580px, 92%); height: 44px; margin-top: 12px; }
.pipe-skeleton.machine[b-p7br2sforb] { height: 122px; margin-top: 40px; border-radius: 18px; }
.pipe-skeleton.proof[b-p7br2sforb] { width: min(620px, 96%); height: 44px; margin-top: 20px; }
.pipe-skeleton.tabs[b-p7br2sforb] { width: min(320px, 96%); height: 20px; margin: 30px 0 18px; }
.pipe-skeleton.card[b-p7br2sforb] { height: 178px; border-radius: 18px; }
.pipe-skeleton.wall[b-p7br2sforb] { height: 168px; border-radius: 18px; }

@keyframes pipe-shimmer-b-p7br2sforb {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

/* ---------- reduced motion ----------
   tokens.css already collapses every duration and stops iteration, which kills
   the shimmer, the breathing dots and the puck entrance. The rail's flow overlay
   and the heat pulse are decorative *travel*, so they go away entirely rather
   than freezing mid-stripe. */

@media (prefers-reduced-motion: reduce) {
    .pipe-rail-flow[b-p7br2sforb] { display: none; }

    .pipe-station.live .pipe-station-node[b-p7br2sforb],
    .pipe-live-dot[b-p7br2sforb],
    .pipe-heat i.run[b-p7br2sforb],
    .pipe-dot.ok[b-p7br2sforb] { animation: none; }

    .pipe-heat i.run[b-p7br2sforb] {
        background: linear-gradient(180deg, var(--load-arc-from), var(--load-arc-to));
    }

    .pipe-station.live .pipe-station-node[b-p7br2sforb] {
        background: linear-gradient(135deg, var(--ember-pink-500), var(--ember-plum-500));
    }

    .pipe-skeleton[b-p7br2sforb] { animation: none; background: var(--surface-sunken); }
}

/* ---------- responsive: holds from ~768px up (Console.iOS owns phones) ---------- */

@media (max-width: 900px) {
    .pipe-hero h1[b-p7br2sforb] { font-size: 36px; }
    .pipe-tabs[b-p7br2sforb] { flex-wrap: wrap; }
    .pipe-proof[b-p7br2sforb] { gap: 22px; }
    .pipe-cr[b-p7br2sforb] { grid-template-columns: minmax(0, 1fr); }
    .pipe-subhead-row[b-p7br2sforb] { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pipe-wrow[b-p7br2sforb] { grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; }
    .pipe-station[b-p7br2sforb] { width: 120px; }
}
/* /Components/Shared/Icon.razor.rz.scp.css */
.fabric-icon[b-nbloagm5mj] {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    color: inherit;
}
/* /Components/Shared/RevealButton.razor.rz.scp.css */
/* Fabric Console — RevealButton.
   Quiet at rest, accent on hover, accent-filled while its panel is open. All
   colour through the semantic aliases. */

.reveal-button[b-iyoh7136ii] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-spring);
}

.reveal-button:hover:not(:disabled)[b-iyoh7136ii] {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--accent);
    transform: translateY(-1px);
}

.reveal-button:active:not(:disabled)[b-iyoh7136ii] {
    transform: translateY(0) scale(.94);
}

.reveal-button:focus-visible[b-iyoh7136ii] {
    outline: none;
    box-shadow: var(--focus-ring);
    color: var(--accent);
}

.reveal-button.is-active[b-iyoh7136ii] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    color: var(--accent-strong);
}

.reveal-button:disabled[b-iyoh7136ii] {
    opacity: .45;
    cursor: default;
}
/* /Components/Shared/SlideOver.razor.rz.scp.css */
/* Fabric Console — SlideOver.
   Colour flows entirely through the semantic aliases in tokens.css; the two
   translucent values are color-mix() ramps over already-sanctioned colours
   (the same idiom app.css uses for the recovery overlay), not new colours.

   z-index sits above all page chrome (topbar 100, popovers 220/230) and below
   the boot (1500) / onboarding (1600) / fatal-recovery (2000) overlays: a
   reveal panel is page furniture, never a lifecycle interrupt. */

.slide-over[b-bymt4n7o4j] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    /* The panel floats inset from the viewport rather than welding itself to
       the right edge — it reads as an object lifted off the page, which is what
       the exemplar's reveal does. */
    padding: 14px;
    pointer-events: none;
}

.slide-over > *[b-bymt4n7o4j] {
    pointer-events: auto;
}

.slide-over.depth-1[b-bymt4n7o4j] {
    z-index: 1402;
}

.slide-over-scrim[b-bymt4n7o4j] {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ember-void) 52%, transparent);
    backdrop-filter: blur(2px);
    animation: slide-over-scrim-in-b-bymt4n7o4j var(--dur-base) var(--ease-out) both;
}

/* A stacked panel does not double the scrim — the one underneath already
   darkened the page, so the second layer only needs a whisper. */
.slide-over.depth-1 .slide-over-scrim[b-bymt4n7o4j] {
    background: color-mix(in srgb, var(--ember-void) 26%, transparent);
}

.slide-over-panel[b-bymt4n7o4j] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(470px, calc(100vw - 56px));
    max-width: 100%;
    background: var(--surface-raised);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    color: var(--text-body);
    animation: slide-over-in-b-bymt4n7o4j var(--dur-panel) var(--ease-spring) both;
    outline: none;
}

.slide-over-panel:focus-visible[b-bymt4n7o4j] {
    box-shadow: var(--shadow-pop), inset var(--focus-ring);
}

/* Drill-through: the second panel sits a touch narrower and offset so the
   first one's edge stays visible as a breadcrumb of where you came from. */
.slide-over.depth-1 .slide-over-panel[b-bymt4n7o4j] {
    width: min(442px, calc(100vw - 88px));
}

/* …and the panel underneath recedes rather than competing. */
.slide-over.is-behind .slide-over-panel[b-bymt4n7o4j] {
    transform: translateX(-26px) scale(.985);
    filter: saturate(.8);
    transition: transform var(--dur-panel) var(--ease-out), filter var(--dur-panel) var(--ease-out);
}

/* ---------- header ---------- */

.slide-over-head[b-bymt4n7o4j] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 26px 22px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-raised);
}

/* The brand crown. The only place the Ember gradient appears on a reveal panel
   — a 3px seam that says "this object belongs to Fabric" without tinting any
   data surface below it. */
.slide-over-head[b-bymt4n7o4j]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--ember-gradient);
}

.slide-over-heading[b-bymt4n7o4j] {
    flex: 1;
    min-width: 0;
}

/* Sentence case, body size. An uppercase letter-spaced kicker is the named
   "nerdy" failure mode in the rubric — this is a quiet label, not a shout. */
.slide-over-eyebrow[b-bymt4n7o4j] {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.slide-over-head h2[b-bymt4n7o4j] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.014em;
    line-height: 1.25;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.slide-over-subtitle[b-bymt4n7o4j] {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.slide-over-head-aside[b-bymt4n7o4j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.slide-over-close[b-bymt4n7o4j] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.slide-over-close:hover[b-bymt4n7o4j] {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

.slide-over-close:focus-visible[b-bymt4n7o4j] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------- body ---------- */

.slide-over-body[b-bymt4n7o4j] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 22px 26px;
}

/* Group markup supplied by the host page. Scoped CSS stamps child content with
   the *page's* scope id, so these reach through ::deep deliberately. */
.slide-over-body[b-bymt4n7o4j]  .slide-over-section {
    padding: 22px 0 0;
}

/* Groups are separated by whitespace, not rules: the bordered field group
   inside each one already draws its own edge, and a second line would box the
   panel in. */
.slide-over-body[b-bymt4n7o4j]  .slide-over-section > h3 {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.slide-over-body[b-bymt4n7o4j]  .slide-over-section > p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Staggered entrance: sections arrive just behind the panel, so the reveal
   reads as one gesture rather than a wall of facts appearing at once. */
.slide-over-body[b-bymt4n7o4j]  .slide-over-section:nth-child(1) { animation: slide-over-section-in-b-bymt4n7o4j var(--dur-base) var(--ease-out) 60ms both; }
.slide-over-body[b-bymt4n7o4j]  .slide-over-section:nth-child(2) { animation: slide-over-section-in-b-bymt4n7o4j var(--dur-base) var(--ease-out) 110ms both; }
.slide-over-body[b-bymt4n7o4j]  .slide-over-section:nth-child(3) { animation: slide-over-section-in-b-bymt4n7o4j var(--dur-base) var(--ease-out) 160ms both; }
.slide-over-body[b-bymt4n7o4j]  .slide-over-section:nth-child(n+4) { animation: slide-over-section-in-b-bymt4n7o4j var(--dur-base) var(--ease-out) 210ms both; }

/* ---------- footer ---------- */

.slide-over-foot[b-bymt4n7o4j] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-sunken);
}

/* ---------- exit ----------
   The panel earns a departure as well as an arrival. The component holds the
   close request for the length of these animations before it tells the page, so
   the panel still has its content while it leaves.

   `visibility` is the load-bearing part (same lesson as the create menu in
   FabricConsoleLayout.razor.css): an opacity-0 panel still holds its controls in
   the tab order and the accessibility tree. Keyframed visibility steps
   discretely — visible for the whole animation, hidden the instant it settles —
   and `both` fill keeps it hidden if the component is still mounted for a frame
   afterwards. Under prefers-reduced-motion the durations collapse to ~0ms
   globally (tokens.css) and the component skips its timer, so the panel simply
   goes. */

.slide-over.is-closing[b-bymt4n7o4j] {
    /* Nothing in a leaving panel is clickable — including the scrim, so a second
       click cannot start a second close. */
    pointer-events: none;
}

.slide-over.is-closing .slide-over-panel[b-bymt4n7o4j] {
    animation: slide-over-out-b-bymt4n7o4j var(--dur-base) var(--ease-out) both;
}

.slide-over.is-closing .slide-over-scrim[b-bymt4n7o4j] {
    animation: slide-over-scrim-out-b-bymt4n7o4j var(--dur-base) var(--ease-out) both;
}

/* A leaving panel does not re-run its staggered sections; freezing them keeps
   the exit one movement instead of a wall of facts twitching on the way out. */
.slide-over.is-closing .slide-over-body[b-bymt4n7o4j]  .slide-over-section {
    animation: none;
}

/* ---------- motion ----------
   prefers-reduced-motion is handled globally in tokens.css, which collapses
   the duration tokens and clamps every animation to ~0ms. */

@keyframes slide-over-in-b-bymt4n7o4j {
    from { transform: translateX(38px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-over-scrim-in-b-bymt4n7o4j {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Leaves the way it came, a little faster and without the spring overshoot —
   an exit that bounces reads as indecision. */
@keyframes slide-over-out-b-bymt4n7o4j {
    from { transform: translateX(0);    opacity: 1; visibility: visible; }
    to   { transform: translateX(30px); opacity: 0; visibility: hidden; }
}

@keyframes slide-over-scrim-out-b-bymt4n7o4j {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
}

@keyframes slide-over-section-in-b-bymt4n7o4j {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ---------- narrow fallback ----------
   Desktop + tablet are the target (rubric); phones get a usable panel, not a
   designed one. Console.iOS is the real mobile surface. */
@media (max-width: 640px) {
    .slide-over[b-bymt4n7o4j] {
        padding: 0;
    }

    .slide-over-panel[b-bymt4n7o4j],
    .slide-over.depth-1 .slide-over-panel[b-bymt4n7o4j] {
        width: 100%;
        border: none;
        border-radius: 0;
    }

    .slide-over.is-behind .slide-over-panel[b-bymt4n7o4j] {
        transform: none;
    }
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-qz2rrta93k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--chrome-muted);
    cursor: pointer;
    flex: none;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover[b-qz2rrta93k] {
    color: var(--chrome-text);
    background: var(--chrome-hover);
}

.theme-toggle:focus-visible[b-qz2rrta93k] {
    outline: none;
    color: var(--chrome-text);
    border-color: var(--chrome-hairline);
    box-shadow: var(--focus-ring);
}

/* Sun and moon share one 16px box; the pair rotates so the outgoing glyph
   swings out as the incoming one swings in. */
.theme-toggle-face[b-qz2rrta93k] {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
}

.theme-toggle-glyph[b-qz2rrta93k] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-panel) var(--ease-spring);
}

.theme-toggle-face.is-light .sun[b-qz2rrta93k],
.theme-toggle-face.is-dark .moon[b-qz2rrta93k] {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle-face.is-light .moon[b-qz2rrta93k] {
    opacity: 0;
    transform: rotate(70deg) scale(.5);
}

.theme-toggle-face.is-dark .sun[b-qz2rrta93k] {
    opacity: 0;
    transform: rotate(-70deg) scale(.5);
}