@import '_content/Nodwise.UI.ColorSelector/Nodwise.UI.ColorSelector.01z8ely44f.bundle.scp.css';
@import '_content/Nodwise.UI.Components/Nodwise.UI.Components.aesa23dxkv.bundle.scp.css';
@import '_content/Nodwise.UI.Graph/Nodwise.UI.Graph.ffmhx8594o.bundle.scp.css';

/* /App.razor.rz.scp.css */
/* /Components/AI/ChatPanel.razor.rz.scp.css */
/* ============================================================================================
   CHAT PANEL — AI agent chat.

   Ported from the Claude Design handoff at
   reference/claude-design-outcome/chat-panel/design_handoff_chat_panel/ (chat-panel.css is the
   VISUAL truth; this file is its translation into the Nodwise design system, per
   docs/architecture/18-ui-component-reuse.md).

   What the translation changed, and why:

     · The panel does NOT paint its own glass. It is a window inside the context column
       (MainLayout `.ctx.glass surface-*`), which already owns the material, the width (--ctx-w)
       and — since this change — the surface FILL every reading surface needs. The handoff drew the
       panel standalone and therefore gave it its own blur/border/420px; reproducing that here
       would nest a second glass inside the first, which is the drift doc 18 exists to stop.
       (`.ctx` carries no border-radius — the column is edge-to-edge in the shell. The handoff's
       `--radius-5` was for a floating panel and has no counterpart here.)

     · Status pill, send button and stop button are CANONICAL COMPONENTS (Badge, Button), not
       classes in this file. They carry their own styling; nothing here targets them.

     · TYPOGRAPHY IS NOT DECLARED HERE. The handoff's type stack was mapped onto the
       design-system roles, which are applied as classes in ChatPanel.razor:
           message bubble / composer  -> .role-meta   (13px sans)
           system (error) bubble      -> .mono-sm     (13px mono)
           role label, sources label  -> .role-overline (~10.5px mono, uppercase)
           timestamp, source badge    -> .mono-2xs    (~9.5px mono)
           tool indicator             -> .mono-xs     (11px mono)
       The handoff's 14 / 13.5 / 12.5 / 10 px land inside ~1px of an existing rung, and
       typography.css section 6 forbids reintroducing a size that close to another one, so each
       collapses onto the rung above. What remains below is only what those roles explicitly
       leave to the consumer — their own note reads "Cor padrão text2; troque p/ text1 (forte) ou
       text3 (terciário) conforme o uso" — plus geometry, which is never a role's business.
       A role class lives in `@layer components`, so any property restated here wins; a property
       NOT restated here is the role's. That is the whole contract of this file.

     · Every raw rgba() tint in the handoff became a color-mix() over a surface token, so the
       panel follows the host's SURFACE TONE rather than only the document theme — one rule where
       the handoff wrote two arms by hand. The `light-dark()` calls that remain are correct
       alongside it, not a leftover: `.surface-light`/`.surface-dark` set `color-scheme`
       (surfaces.css), so `light-dark()` resolves against the host's tone too, not the document's.

     · META INK IS MIXED UP TO AA, NOT TAKEN FLAT. `--surface-text3` is gray-500 in BOTH tones and
       measures ~3.7:1 at the ~10px rungs this panel uses — below WCAG AA, and below what the old
       panel happened to give (12px at 0.7 opacity on opaque white, ~5.9:1). Every meta line here
       therefore mixes its tier toward `--text1`, the same technique Button.razor.css uses to make
       the flat state tokens legible on both tones. The root fix belongs to `--surface-text3`
       itself and is not this component's to make.
   ============================================================================================ */

.chat-panel[b-15u96jp7d6] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: transparent;
    border: none;
}

.chat-header[b-15u96jp7d6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    padding: var(--space-3) var(--space-4) 0;
}

/* ── Message list ────────────────────────────────────────────────────────────────────────── */
.chat-messages[b-15u96jp7d6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}
.chat-messages-content[b-15u96jp7d6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}
.chat-messages[b-15u96jp7d6]::-webkit-scrollbar {
    width: var(--space-1);
}

.chat-messages[b-15u96jp7d6]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-15u96jp7d6]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text1, var(--surface-text1)) 14%, transparent);
    border-radius: var(--radius-1);
}

.chat-message[b-15u96jp7d6] {
    max-width: 86%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-4);
    color: var(--text1, var(--surface-text1));
}

/* USER — the blue (secondary) tint. Both arms are the same hue at different alpha in the
   handoff; the dark arm shifts the hairline one stop lighter so it survives on a dark ground. */
.chat-message.user[b-15u96jp7d6] {
    align-self: flex-end;
    background: light-dark(color-mix(in srgb, var(--secondary-600) 8%, transparent),
                           color-mix(in srgb, var(--secondary-600) 16%, transparent));
    border: var(--size-hairline) solid light-dark(color-mix(in srgb, var(--secondary-600) 22%, transparent),
                                                  color-mix(in srgb, var(--secondary-400) 22%, transparent));
    border-bottom-right-radius: var(--radius-1);
}

.chat-message.assistant[b-15u96jp7d6] {
    align-self: flex-start;
    background: color-mix(in srgb, var(--text1, var(--surface-text1)) 5%, transparent);
    border: var(--size-hairline) solid color-mix(in srgb, var(--text1, var(--surface-text1)) 9%, transparent);
    border-bottom-left-radius: var(--radius-1);
}

.chat-message.assistant.streaming[b-15u96jp7d6] {
    border-color: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 28%, transparent);
}

.chat-message.system[b-15u96jp7d6] {
    align-self: center;
    max-width: 92%;
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    border: var(--size-hairline) solid color-mix(in srgb, var(--color-danger) 25%, transparent);
    border-radius: var(--radius-2);
    color: color-mix(in srgb, var(--color-danger) 65%, var(--text1, var(--surface-text1)));
}

.message-header[b-15u96jp7d6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.message-role[b-15u96jp7d6] {
    color: color-mix(in srgb, var(--text3, var(--surface-text3)) 60%, var(--text1, var(--surface-text1)));
}

.chat-message.user .message-role[b-15u96jp7d6] {
    color: color-mix(in srgb, light-dark(var(--secondary-600), var(--secondary-200)) 70%,
                              var(--text1, var(--surface-text1)));
}

.chat-message.assistant .message-role[b-15u96jp7d6] {
    color: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 70%,
                              var(--text1, var(--surface-text1)));
}

.message-time[b-15u96jp7d6] {
    color: color-mix(in srgb, var(--text3, var(--surface-text3)) 60%, var(--text1, var(--surface-text1)));
    flex: none;
}

.message-content[b-15u96jp7d6] {
    word-wrap: break-word;
}

/* ── Cited sources ───────────────────────────────────────────────────────────────────────── */
.message-sources[b-15u96jp7d6] {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--size-hairline) solid color-mix(in srgb, var(--text1, var(--surface-text1)) 10%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

/* Type is `.role-overline`; ink only, mixed to AA like the rest of the meta tier. */
.sources-label[b-15u96jp7d6] {
    color: color-mix(in srgb, var(--text3, var(--surface-text3)) 60%, var(--text1, var(--surface-text1)));
}

.source-badge[b-15u96jp7d6] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 10%, transparent);
    border: var(--size-hairline) solid color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 26%, transparent);
    color: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 70%,
                              var(--text1, var(--surface-text1)));
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.source-badge:hover[b-15u96jp7d6] {
    background: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 18%, transparent);
    border-color: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 42%, transparent);
}

/* Type is `.mono-xs` (11px mono) — the role matches the handoff exactly. Its default --text3 ink
   is overridden for the same AA reason as the rest of the meta tier. */
.tool-indicator[b-15u96jp7d6] {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: color-mix(in srgb, var(--text3, var(--surface-text3)) 60%, var(--text1, var(--surface-text1)));
}

.tool-spinner[b-15u96jp7d6] {
    width: var(--size-3);
    height: var(--size-3);
    /* 2px is a genuine sub-token stroke — --size-hairline (1px) disappears at this diameter. */
    border: 2px solid color-mix(in srgb, var(--text1, var(--surface-text1)) 14%, transparent);
    border-top-color: var(--text-accent, var(--surface-text-accent));
    border-radius: var(--radius-pill);
    animation: chat-spin-b-15u96jp7d6 0.8s linear infinite;
    flex: none;
}

@keyframes chat-spin-b-15u96jp7d6 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tool-spinner[b-15u96jp7d6] {
        display: none;
    }
}

/* ── Composer ────────────────────────────────────────────────────────────────────────────── */
.chat-input-area[b-15u96jp7d6] {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: var(--size-hairline) solid color-mix(in srgb, var(--text1, var(--surface-text1)) 8%, transparent);
}

/* Type is `.role-meta` from the markup. A <textarea> does not inherit the page font, which is
   why the role is applied to the element itself rather than to a wrapper. */
.chat-input-area textarea[b-15u96jp7d6] {
    flex: 1;
    /* Without min-width:0 a flex item refuses to shrink below its intrinsic width, and the
       textarea would push the send button out of the 360px-wide dock. */
    min-width: 0;
    box-sizing: border-box;

    resize: vertical;
    min-height: var(--content-size-3);   /* 64px · ~2 lines + the well's padding */
    max-height: var(--content-size-5);   /* 168px */
    background: color-mix(in srgb, var(--text1, var(--surface-text1)) 4%, transparent);
    border: var(--size-hairline) solid color-mix(in srgb, var(--text1, var(--surface-text1)) 12%, transparent);
    border-radius: var(--radius-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text1, var(--surface-text1));
    outline: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.chat-input-area textarea[b-15u96jp7d6]::placeholder {
    color: var(--text-muted, var(--surface-text-muted));
}

/* Focus brightens the well and turns the edge accent — no glow ring, per the handoff. */
.chat-input-area textarea:focus[b-15u96jp7d6] {
    background: color-mix(in srgb, var(--text1, var(--surface-text1)) 6%, transparent);
    border-color: color-mix(in srgb, var(--text-accent, var(--surface-text-accent)) 45%, transparent);
}

.chat-input-area textarea:focus-visible[b-15u96jp7d6] {
    outline: 2px solid var(--text-accent, var(--surface-text-accent));
    outline-offset: 2px;
}

.chat-input-area textarea:disabled[b-15u96jp7d6] {
    opacity: 0.5;
}

.chat-actions[b-15u96jp7d6] {
    display: flex;
    align-items: center;
}

/* Empty state */
.chat-empty[b-15u96jp7d6] {
    margin: auto 0;
    text-align: center;
    text-wrap: balance;
    color: color-mix(in srgb, var(--text3, var(--surface-text3)) 60%, var(--text1, var(--surface-text1)));
}

.chat-navigation-offer[b-15u96jp7d6] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.chat-navigation-reason[b-15u96jp7d6] {
    color: var(--text3, var(--surface-text3));
}
/* /Components/User/SignedInUser/SignedInUser.razor.rz.scp.css */
.signed-in-user[b-2iklf0k65w] {
    anchor-scope: --signed-in-user-menu-anchor;
    display: inline-block;
}

.user-photo-button[b-2iklf0k65w] {
    anchor-name: --signed-in-user-menu-anchor;

    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-photo-button:hover[b-2iklf0k65w] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* :focus-visible, not :focus — the trigger is a real <button> now, so a plain :focus would draw the
   ring on every mouse click as well as on keyboard arrival. */
.user-photo-button:focus-visible[b-2iklf0k65w] {
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
}

.user-photo[b-2iklf0k65w] {
    width: var(--content-size-3);
    height: var(--content-size-3);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.xtra-small[b-2iklf0k65w] {
    width: 16px;
    height: 16px;
}
.small[b-2iklf0k65w] {
    width: 24px;
    height: 24px;
}
.medium[b-2iklf0k65w] {
    width: 32px;
    height: 32px;
}
.large[b-2iklf0k65w] {
    width: 48px;
    height: 48px;
}
.xtra-large[b-2iklf0k65w] {
    width: 64px;
    height: 64px;
}
.xx-large[b-2iklf0k65w] {
    width: 128px;
    height: 128px;
}


.user-dropdown[b-2iklf0k65w] {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    overflow: visible;

    top: calc(anchor(--signed-in-user-menu-anchor bottom) + var(--space-2));
    right: anchor(--signed-in-user-menu-anchor right);

    min-width: 240px;
    background: var(--surface-paper);
    border: var(--size-hairline) solid color-mix(in srgb, var(--text3) 45%, transparent);
    border-radius: var(--radius-2);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.45);
    color: var(--text1);
    animation: dropdownFadeIn-b-2iklf0k65w 0.2s ease;
}

@supports not (anchor-name: --probe) {
    .user-dropdown[b-2iklf0k65w] {
        top: calc(var(--main-menu-cell-h, 64px) + var(--space-2));
        right: var(--space-3);
    }
}

@keyframes dropdownFadeIn-b-2iklf0k65w {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-info[b-2iklf0k65w] {
    padding: var(--space-2);
}

.user-name[b-2iklf0k65w] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    white-space: nowrap;
}

.user-email[b-2iklf0k65w] {
    padding: var(--space-1) var(--space-3) var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-divider[b-2iklf0k65w] {
    height: var(--size-hairline);
    background: color-mix(in srgb, var(--text3) 45%, transparent);
    margin: 0 var(--space-2);
}

.dropdown-actions[b-2iklf0k65w] {
    padding: var(--space-2);
}

.dropdown-action[b-2iklf0k65w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-1);
    cursor: pointer;
    /* Colour transitions too, now that the ink moves on hover (see below) - a background that eases
       while the text snaps reads as a glitch. */
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: left;
}

.dropdown-action:hover[b-2iklf0k65w] {
    background: color-mix(in srgb, var(--text1) 10%, transparent);
}

.dropdown-action:focus-visible[b-2iklf0k65w] {
    outline: 2px solid var(--nav-accent);
    outline-offset: -2px;
}

.dropdown-action .action-icon[b-2iklf0k65w] {
    display: inline-flex;
    color: var(--text2);
}

.dropdown-action:hover .action-icon[b-2iklf0k65w] {
    color: var(--nav-accent);
}

.dropdown-action.destructive[b-2iklf0k65w],
.dropdown-action.destructive .action-icon[b-2iklf0k65w],
.dropdown-action.destructive:hover .action-icon[b-2iklf0k65w] {
    color: light-dark(#C2362F, #FCA5A5);
}

.dropdown-action.destructive:hover[b-2iklf0k65w] {
    background: rgba(220, 38, 38, .14);
}

.dropdown-action.destructive:focus-visible[b-2iklf0k65w] {
    outline-color: light-dark(#C2362F, #FCA5A5);
}

.dropdown-action:disabled[b-2iklf0k65w] {
    opacity: .55;
    cursor: not-allowed;
}
/* /Layouts/ApiReferenceLayout.razor.rz.scp.css */
.api-reference-layout[b-r4rj3otfol] {
    height: 100dvh;
    overflow-y: auto;
    width: 100%;
    background: var(--surface-paper);
}
/* /Layouts/MainLayout.razor.rz.scp.css */
/* Backdrops — two layers, two jobs. */
.bg[b-kfwjzqb80k] {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.bg-main[b-kfwjzqb80k] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.main-scroll[b-kfwjzqb80k] {
    position: relative;
    z-index: 1;
}


.bg picture[b-kfwjzqb80k],
.bg-main picture[b-kfwjzqb80k] {
    display: block;
    width: 100%;
    height: 100%;
}

.bg-img[b-kfwjzqb80k] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* MainLayout — app-shell CHROME (scoped). */

.shell-nav[b-kfwjzqb80k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.shell-nav[b-kfwjzqb80k]  .main-menu:first-child {
    --main-menu-dock-radius: 0;
}
    .shell-nav:hover[b-kfwjzqb80k] {
        border-color: var(--c-border);
    }
.shell-nav[b-kfwjzqb80k]  .main-menu:last-child {
    --main-menu-dock-radius: 0;
}
.shell-nav[b-kfwjzqb80k] {
    border-left-width: 0 !important;
    border-top-width: 0 !important;
    border-right-width: 0 !important;
}

@media (max-width: 640px), (max-height: 480px) {
    .shell-nav[b-kfwjzqb80k] {
        display: none;
    }
}

/* ── shared local fallbacks (resolve to design tokens when present) ───────── */
    .shell[b-kfwjzqb80k] {
        --shell-hair: rgba(255, 255, 255, 0.08);
        --shell-rail: rgba(255, 255, 255, 0.22);
        --shell-glass-2: rgba(255, 255, 255, 0.045);
        --shell-t1: var(--surface-text1, rgba(255, 255, 255, 0.92));
        --shell-t2: var(--surface-text2, rgba(255, 255, 255, 0.62));
        --shell-t3: var(--surface-text-muted, rgba(255, 255, 255, 0.40));
        --shell-accent: var(--primary-700, #d4ff00);
    }

/* ── Rail ─────────────────────────────────────────────────────────────────── */
.rail[b-kfwjzqb80k] {
    border-right: 1px solid var(--shell-hair);
}

@media (max-width: 640px), (max-height: 480px) {
    .rail[b-kfwjzqb80k] {
        background: var(--surface-bg);
    }
}

.rail-top[b-kfwjzqb80k] {
    height: 54px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 var(--space-2);
}

.rail-toggle[b-kfwjzqb80k] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--shell-hair);
    background: var(--shell-glass-2);
    color: var(--shell-t2);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: var(--icon-size-md); /* a glyph, sized by the icon token — never by a type step */
    transition: color 0.15s ease, border-color 0.15s ease;
}

.rail-toggle:hover[b-kfwjzqb80k] {
    color: var(--shell-t1);
    border-color: var(--primary-500, #d4ff00);
}

@media (max-width: 640px), (max-height: 480px) {
    .rail-toggle[b-kfwjzqb80k] {
        background: var(--surface-bg);
        border-color: var(--shell-rail);
        color: var(--shell-t1);
    }

}

.rail-nav[b-kfwjzqb80k] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rail-item[b-kfwjzqb80k] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--shell-t2);
    text-decoration: none;
    /* Type comes from .role-menu in the markup; only the shell ink is local. */
    white-space: nowrap;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}

.rail-item span[b-kfwjzqb80k] {
    transition: opacity 0.2s ease;
}

.rail-item:hover[b-kfwjzqb80k] {
    background: var(--shell-glass-2);
    color: var(--shell-t1);
}

.rail-item.active[b-kfwjzqb80k] {
    background: color-mix(in srgb, var(--shell-accent) 14%, transparent);
    color: var(--shell-accent);
}

.rail-item.active[b-kfwjzqb80k]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--shell-accent);
    box-shadow: 0 0 12px var(--shell-accent);
}

/* (count badges now render via NavList's .count — the .rail-item .badge rule was removed, doc 18) */

/* document navigator (TOC) chrome — layout/accent bar come from shell-system.css */
.rail-doc[b-kfwjzqb80k] {
    display: flex;
    flex-direction: column;
}

.rail-doc-toggle[b-kfwjzqb80k] {
    width: 100%;
    border: 1px solid transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: transparent;
}

.rail-doc-toggle .chev[b-kfwjzqb80k] {
    margin-left: auto;
    color: var(--shell-t3);
    transition: transform 0.2s ease;
}

.rail-toc[b-kfwjzqb80k] {
    margin: 2px 0 6px;
}
/* .rail-toc <a> link chrome lives in global shell-system.css — the links are
   built by shell-toc.js, which scoped CSS cannot reach. */

.shell[data-rail="collapsed"] .rail[b-kfwjzqb80k]  .nav-list-section-header,
.shell[data-rail="collapsed"] .rail[b-kfwjzqb80k]  .nav-list a > :not(.icon) {
    opacity: 0;
}

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

/* ── Context column windows ───────────────────────────────────────────────── */
.ctx[b-kfwjzqb80k] {
    border-left: 1px solid var(--shell-hair);

    --glass-color: color-mix(in srgb, var(--surface-bg) 96%, transparent);
    background: var(--glass-color);
}

.ctx-grip[b-kfwjzqb80k]::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: var(--ctx-grip-line);
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--shell-accent);
    opacity: 0;
    transition: opacity 0.15s var(--shell-ease);
}

.ctx-grip:hover[b-kfwjzqb80k]::after,
.shell[data-ctx-resizing] .ctx-grip[b-kfwjzqb80k]::after {
    opacity: 0.55;
}

.ctx-grip:focus-visible[b-kfwjzqb80k] {
    outline: 2px solid var(--shell-accent);
    outline-offset: -2px;
}

.ctx-grip:focus-visible[b-kfwjzqb80k]::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ctx-grip[b-kfwjzqb80k]::after {
        transition: none;
    }
}

.win-head[b-kfwjzqb80k] {
    height: 54px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--shell-hair);
}

/* .wi is a 30×30 icon chip; its glyph now renders via the canonical <Icon> (24×24 in its
   own scope), so the former font-size no longer sizes it and was removed. */
.win-head .wi[b-kfwjzqb80k] {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-2);
    display: grid;
    place-items: center;
    background: var(--shell-glass-2);
    color: var(--shell-t1);
}

.win-head-text[b-kfwjzqb80k] {
    flex: 1;
    min-width: 0;
}

.win-head .wt[b-kfwjzqb80k] {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--shell-t1);
}

.win-head .ws[b-kfwjzqb80k] {
    font-family: var(--font-mono);
    font-size: 0.594rem;   /* 9.5px · .mono-2xs */
    line-height: 1.5;
    color: var(--shell-t3);
}

.win-collapse[b-kfwjzqb80k] {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-t2);
    cursor: pointer;
    display: grid;
    place-items: center;
    /* glyph is the canonical <Icon> (24×24 in its own scope) — former font-size removed. */
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.win-collapse:hover[b-kfwjzqb80k] {
    background: var(--shell-glass-2);
    color: var(--shell-t1);
    border-color: var(--shell-hair);
}

.win-pad[b-kfwjzqb80k] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
}

.win-empty[b-kfwjzqb80k] {
    font-size: 13px;
    color: var(--shell-t3);
    line-height: 1.5;
}

.win-pad.prefs[b-kfwjzqb80k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.prefs-group[b-kfwjzqb80k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* .role-overline carries the type; only the colour is stated here, because the role has no opinion
   about which surface it lands on and this one is the shell's dark chrome. */
.prefs-group > h4[b-kfwjzqb80k] {
    color: var(--shell-t3);
}

/* ── Far-right toolbar ────────────────────────────────────────────────────── */
.ctxbar[b-kfwjzqb80k] {
    border-left: 1px solid var(--shell-hair);
}

.shell-nav[b-kfwjzqb80k]  .mm-slot {
    width: auto;
    min-width: var(--main-menu-cell-collapsed);
    padding-inline: var(--space-2);
}

.shell-nav[b-kfwjzqb80k]  .mm-slot:not(:has(*)) {
    display: none;
}

.shell-nav[b-kfwjzqb80k]  .main-menu:last-child {
    grid-auto-columns: auto;
}

.cb[b-kfwjzqb80k] {
    width: var(--content-size-2);
    height: var(--content-size-2);
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-t2);
    cursor: pointer;
    display: grid;
    place-items: center;
    /* glyph is the canonical <Icon> (24×24 in its own scope) — former font-size removed. */
    position: relative;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cb:hover[b-kfwjzqb80k] {
    background: var(--shell-glass-2);
    color: var(--shell-t1);
    border-color: var(--shell-hair);
}

.cb.active[b-kfwjzqb80k] {
    background: color-mix(in srgb, var(--primary-500, #d4ff00) 22%, transparent);
    color: var(--shell-t1);
    border-color: color-mix(in srgb, var(--primary-500, #d4ff00) 45%, transparent);
}

.cb.active[b-kfwjzqb80k]::before {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: -6px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--primary-500, #d4ff00);
    box-shadow: 0 0 10px var(--primary-500, #d4ff00);
}

.ctxbar .cb.active[b-kfwjzqb80k]::before {
    left: -14px;
    right: auto;
    top: 9px;
    bottom: 9px;
    width: 3px;
    height: auto;
    border-radius: 3px 0 0 3px;
}

.ctxbar .sep[b-kfwjzqb80k] {
    width: 24px;
    height: 1px;
    background: var(--shell-hair);
    margin: 4px 0;
}

/* ── Floating AI launcher ─────────────────────────────────────────────────── */
.ai-fab[b-kfwjzqb80k] {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: var(--z-fab);
}

@media (max-width: 640px), (max-height: 480px) {
    .ai-fab[b-kfwjzqb80k] {
        display: none;
    }
}

.shell-bottomnav[b-kfwjzqb80k] {
    --main-menu-bar-h: var(--content-size-4);
}

@media (max-height: 480px) {
    .shell-bottomnav[b-kfwjzqb80k] {
        --main-menu-bar-h: var(--content-size-3);
    }
}

.shell-bottomnav .cb.active[b-kfwjzqb80k] {
    background: transparent;
    border-color: transparent;
    color: var(--primary-500);
}

.shell-bottomnav .cb.active[b-kfwjzqb80k]::before {
    content: none;
}

.shell-bottomnav[b-kfwjzqb80k]  .mm-slot:has(.cb.active) .mm-label {
    color: var(--primary-500);
}

@media (max-width: 640px), (max-height: 480px) {
    .win-pad.prefs[b-kfwjzqb80k] {
        gap: var(--space-4);
    }
}

.prefs .settings-list[b-kfwjzqb80k] {
    /* The rows inherit their ink; this panel is the host that knows which it is. */
    color: var(--shell-t1);
    border: 1px solid var(--shell-hair);
    border-radius: var(--radius-3);
    overflow: hidden;
}

.prefs .settings-list > * + *[b-kfwjzqb80k] {
    border-top: 1px solid var(--shell-hair);
}

/* The language row already says "Language", so the selector's own caption would say it twice on
   one line. Its VALUE stays - that is what the row is reporting. */
.prefs .settings-row-trail[b-kfwjzqb80k]  .lang-tag {
    display: none;
}

/* The account row's avatar, at the rung the identity tile uses elsewhere. */
.prefs[b-kfwjzqb80k]  .settings-avatar {
    width: var(--space-6);
    height: var(--space-6);
    border-radius: 50%;
    object-fit: cover;
}
/* /Pages/ApiReference/ApiReference.razor.rz.scp.css */

.api-ref[b-bzczyr4z37] {
    --api-bg-elevated: light-dark(
        color-mix(in srgb, var(--surface-paper-light) 30%, var(--secondary-50)),
        color-mix(in srgb, var(--surface-paper-dark) 92%, var(--secondary-50)));
    --api-bg-card: light-dark(
        color-mix(in srgb, var(--surface-paper-light) 20%, var(--secondary-50)),
        color-mix(in srgb, var(--surface-paper-dark) 86%, var(--secondary-50)));
    --api-bg-card-hi: light-dark(
        color-mix(in srgb, var(--surface-paper-light) 55%, var(--secondary-50)),
        color-mix(in srgb, var(--surface-paper-dark) 78%, var(--secondary-50)));
    --api-bg-input: light-dark(
        color-mix(in srgb, var(--surface-paper-light) 15%, var(--secondary-50)),
        color-mix(in srgb, var(--surface-paper-dark) 96%, var(--secondary-50)));

    /* Hairline borders. Mixed from --text1, which the surface class already flips, so these need no
       light-dark() pair of their own and cannot disagree with the ink they sit next to. */
    --api-border: color-mix(in srgb, var(--text1) 12%, transparent);
    --api-border-hi: color-mix(in srgb, var(--text1) 24%, transparent);

    --api-code-bg: var(--surface-paper-dark);
    --code-ink: var(--secondary-50);

    --api-accent: var(--primary-200);
    --api-accent-text: var(--surface-text-accent);

    --api-topbar-h: 56px;
    --api-sidebar-w: 304px;
    --api-main-max-w: 1080px;
    /* The key column shared by the parameter rows and the response-header rows. It was the literal
       220px in BOTH files — one number stated twice is a number that drifts. */
    --api-key-col: 220px;

    min-height: 100vh;
    background: var(--surface-paper);
    color: var(--text1);
    font-family: var(--font-sans);
    line-height: 1.5;
}

/* ── Main column ──────────────────────────────────────────────────────────── */
.api-ref__main[b-bzczyr4z37] {
    margin-left: var(--api-sidebar-w);
    padding: calc(var(--api-topbar-h) + var(--content-size-2)) var(--space-6) var(--content-size-4);
}

.api-ref__main-inner[b-bzczyr4z37] {
    max-width: var(--api-main-max-w);
    margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.api-ref__hero[b-bzczyr4z37] {
    padding: 0 0 var(--space-2);
}

/* Size/leading come from .role-lede in the markup; this owns only the measure, which is a
   page-layout decision the role has no business making. */
.api-ref__lede[b-bzczyr4z37] {
    color: var(--text2);
    max-width: 64ch;
    margin: 0;
}

.api-ref__meta[b-bzczyr4z37] {
    color: var(--text3);
    margin: 0;
}

/* ── Tag/Schemas section wrapper — heading is the shared Section/Heading; this owns only the
      anchor target + vertical spacing (cards/operations are their own components). ─────────────── */
.api-ref__tag-section[b-bzczyr4z37] {
    margin-top: var(--space-6);
    scroll-margin-top: calc(var(--api-topbar-h) + var(--space-3));
}

.api-ref__op-list[b-bzczyr4z37],
.api-ref__schemas[b-bzczyr4z37] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ── Responsive: sidebar collapses (handled in SpecSidebar); main goes full ── */
@media (max-width: 1024px) {
    .api-ref__main[b-bzczyr4z37] {
        margin-left: 0;
        padding: calc(var(--api-topbar-h) + var(--space-4)) var(--space-4) var(--space-7);
        max-width: none;
    }
}

/* Phone. The reading column loses its side gutters to the narrow rhythm the rest of the app uses,
   so a 390px viewport spends its width on content rather than on margins. */
@media (max-width: 640px) {
    .api-ref__main[b-bzczyr4z37] {
        padding: calc(var(--api-topbar-h) + var(--space-3)) var(--mobile-gutter) var(--space-6);
    }

    .api-ref__tag-section[b-bzczyr4z37] {
        margin-top: var(--space-5);
    }
}
/* /Pages/ApiReference/Components/BodyEditor.razor.rz.scp.css */
.api-ref__editor[b-d9nqekckjm] {
    display: grid;
    grid-template-columns: var(--content-size-2) 1fr;
    align-items: start;
}

.api-ref__editor-gutter[b-d9nqekckjm] {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    text-align: right;
    color: color-mix(in srgb, var(--code-ink) 28%, transparent);
    line-height: 1.7;
    white-space: pre;
    user-select: none;
    border-right: var(--size-hairline) solid color-mix(in srgb, var(--code-ink) 6%, transparent);
}

.api-ref__editor-area[b-d9nqekckjm] {
    position: relative;
}

.api-ref__editor-hl[b-d9nqekckjm] {
    pointer-events: none;
    min-height: var(--content-size-4);
}

.api-ref__editor-input[b-d9nqekckjm] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: transparent;
    caret-color: var(--code-ink);
    /* Family and size come from .mono-sm; see the gutter above for why the leading is pinned. */
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}

.api-ref__editor-input:focus[b-d9nqekckjm] {
    outline: none;
}

.api-ref__editor-input[b-d9nqekckjm]::selection {
    background: color-mix(in srgb, var(--secondary-300) 25%, transparent);
}
/* /Pages/ApiReference/Components/ExecuteRow.razor.rz.scp.css */
.api-ref__exec-row[b-w61toamjtf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-2);
    /* The panel's lime wash is mixed from the brand token, not from a hand-typed rgba of it. */
    background: color-mix(in srgb, var(--primary-200) 4%, transparent);
    border: var(--size-hairline) solid color-mix(in srgb, var(--primary-200) 18%, transparent);
}

/* Family, size, tracking and casing come from .role-overline in the markup. */
.api-ref__exec-hint[b-w61toamjtf] {
    margin-left: auto;
    color: var(--text3);
}
/* /Pages/ApiReference/Components/OperationCard.razor.rz.scp.css */

.api-ref__op[b-i17t7cb1f6] {
    background: var(--api-bg-card);
    border: var(--size-hairline) solid var(--api-border);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.api-ref__op:hover[b-i17t7cb1f6],
.api-ref__op.is-expanded[b-i17t7cb1f6] {
    border-color: var(--api-border-hi);
}

.api-ref__op.is-expanded .api-ref__op-header[b-i17t7cb1f6] {
    background: var(--api-bg-card-hi);
}

.api-ref__op-header[b-i17t7cb1f6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-3);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--text1);
}

/* The verbs align in a column, so the pill slot has a floor of its own. The Badge inside sizes
   itself; this only reserves the track. */
.api-ref__method[b-i17t7cb1f6] {
    flex: none;
    display: inline-flex;
    justify-content: flex-start;
    min-width: var(--content-size-3);
}

/* Type comes from .mono-sm in the markup — §6.2's role for something copied character by character. */
.api-ref__op-path[b-i17t7cb1f6] {
    color: var(--text1);
}

.api-ref__op-summary[b-i17t7cb1f6] {
    flex: 1;
    min-width: 0;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.api-ref__op-lock[b-i17t7cb1f6] {
    display: inline-flex;
    opacity: .7;
}

.api-ref__op-lock[b-i17t7cb1f6]  .icon,
.api-ref__op-chevron[b-i17t7cb1f6]  .icon {
    --icon-size: var(--content-size-0);
}

.api-ref__op-chevron[b-i17t7cb1f6] {
    color: var(--text3);
    display: inline-flex;
    transition: transform .15s;
}

.api-ref__op.is-expanded .api-ref__op-chevron[b-i17t7cb1f6] {
    transform: rotate(180deg);
}

.api-ref__op-body[b-i17t7cb1f6] {
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: var(--size-hairline) solid var(--api-border);
}

/* Size comes from .role-body in the markup. */
.api-ref__op-desc[b-i17t7cb1f6] {
    color: var(--text2);
    margin: var(--space-3) 0 0;
}

/* ── Shared op-body chrome (rendered by the leaf children) ─────────────────── */
.api-ref__op-body[b-i17t7cb1f6]  .api-ref__op-section-title {
    margin: var(--space-4) 0 var(--space-3);
    color: var(--text3);
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__codeblock {
    margin-top: var(--space-3);
    background: var(--api-code-bg);
    border: var(--size-hairline) solid color-mix(in srgb, var(--code-ink) 8%, transparent);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__codeblock-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: color-mix(in srgb, var(--code-ink) 3%, transparent);
    border-bottom: var(--size-hairline) solid color-mix(in srgb, var(--code-ink) 6%, transparent);
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__cb-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__cb-mime {
    color: color-mix(in srgb, var(--code-ink) 55%, transparent);
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    border: var(--size-hairline) solid var(--api-border);
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    text-decoration: none;
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__icon-btn:hover {
    color: var(--text1);
    border-color: var(--api-border-hi);
}

/* The dark variant sits ON the codeblock, so it takes its ink from --code-ink for the same reason. */
.api-ref__op-body[b-i17t7cb1f6]  .api-ref__icon-btn--dark {
    border-color: color-mix(in srgb, var(--code-ink) 12%, transparent);
    color: color-mix(in srgb, var(--code-ink) 72%, transparent);
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__icon-btn--dark:hover {
    color: var(--code-ink);
    border-color: color-mix(in srgb, var(--code-ink) 22%, transparent);
}

.api-ref__op-body[b-i17t7cb1f6]  .api-ref__icon-btn .icon {
    --icon-size: var(--content-size-0);
}

/* Phone: the summary is the first thing to go. A verb, a path and a control fit 390px; a summary
   does not, and truncating it to three characters states less than omitting it. */
@media (max-width: 640px) {
    .api-ref__op-header[b-i17t7cb1f6] {
        gap: var(--space-2);
        padding: var(--space-3) var(--mobile-gutter);
    }

    .api-ref__op-summary[b-i17t7cb1f6] {
        display: none;
    }

    .api-ref__op-body[b-i17t7cb1f6] {
        padding: var(--space-2) var(--mobile-gutter) var(--space-4);
    }
}
/* /Pages/ApiReference/Components/ParamsTable.razor.rz.scp.css */
/* Parameter rows. Inputs themselves are the shared Field + ContentInputItem; this file only owns
   the row layout and the mono parameter name. Inherits --api-* tokens from the .api-ref root. */
.api-ref__params[b-vfaowy0dem] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.api-ref__param[b-vfaowy0dem] {
    display: grid;
    grid-template-columns: var(--api-key-col) 1fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border: var(--size-hairline) solid var(--api-border);
    border-radius: var(--radius-2);
    background: var(--api-bg-card);
}

.api-ref__param-key[b-vfaowy0dem] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
}

.api-ref__param-name[b-vfaowy0dem] {
    /* Family and size come from .mono-sm in the markup. */
    font-weight: 600;
    color: var(--text1);
}

@media (max-width: 768px) {
    .api-ref__param[b-vfaowy0dem] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/ApiReference/Components/RequestSnippet.razor.rz.scp.css */
/* /Pages/ApiReference/Components/ResponsePanel.razor.rz.scp.css */
.api-ref__response[b-890wstck3w] {
    margin-top: var(--space-3);
    border-radius: var(--radius-2);
    border: var(--size-hairline) solid var(--api-border);
    overflow: hidden;
}

.api-ref__response.is-ok[b-890wstck3w] {
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
    background: color-mix(in srgb, var(--color-success) 3%, transparent);
}

.api-ref__response.is-err[b-890wstck3w] {
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
    background: color-mix(in srgb, var(--color-danger) 3%, transparent);
}

.api-ref__response-head[b-890wstck3w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
}

/* Size comes from .role-normal in the markup. */
.api-ref__resp-desc[b-890wstck3w] {
    color: var(--text2);
}

.api-ref__resp-body[b-890wstck3w] {
    background: var(--api-code-bg);
    border-top: var(--size-hairline) solid var(--api-border);
}

.api-ref__resp-headers[b-890wstck3w] {
    display: flex;
    flex-direction: column;
    border-top: var(--size-hairline) solid var(--api-border);
}

.api-ref__resp-header[b-890wstck3w] {
    display: grid;
    grid-template-columns: var(--api-key-col) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--size-hairline) solid var(--api-border);
}

.api-ref__resp-header:last-child[b-890wstck3w] {
    border-bottom: none;
}

.api-ref__resp-header-name[b-890wstck3w] {
    color: var(--secondary-300);
}

.api-ref__resp-header-value[b-890wstck3w] {
    color: var(--text2);
    overflow-wrap: anywhere;
}

.api-ref__resp-note[b-890wstck3w] {
    padding: var(--space-3);
    margin: 0;
    border-top: var(--size-hairline) solid var(--api-border);
    color: var(--text3);
}

.api-ref__resp-note code[b-890wstck3w] {
    font-family: var(--font-mono);
}
/* /Pages/ApiReference/Components/ResponsesList.razor.rz.scp.css */
/* Documented responses list: one bordered row per status code. Status pill is the shared Badge;
   the section title is styled by OperationCard ::deep. */
.api-ref__responses[b-ff01rr59hq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.api-ref__response-row[b-ff01rr59hq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--size-hairline) solid var(--api-border);
    border-radius: var(--radius-2);
}

/* Size comes from .role-normal in the markup. */
.api-ref__resp-desc[b-ff01rr59hq] {
    color: var(--text2);
}
/* /Pages/ApiReference/Components/SchemaCard.razor.rz.scp.css */
/* Schema model card. The card surface itself is the shared Card; this file styles the property
   rows inside it and the scroll anchor. --api-* tokens are inherited from the .api-ref root. */
.api-ref__schema-anchor[b-nxgyscut9n] {
    scroll-margin-top: calc(var(--api-topbar-h) + var(--space-3));
}

.api-ref__schema-props[b-nxgyscut9n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.api-ref__schema-prop[b-nxgyscut9n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--space-2) var(--space-4);
    align-items: start;
    padding-bottom: var(--space-2);
    border-bottom: var(--size-hairline) solid var(--api-border);
}

.api-ref__schema-prop:last-child[b-nxgyscut9n] {
    border-bottom: none;
    padding-bottom: 0;
}

.api-ref__schema-prop-main[b-nxgyscut9n] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.api-ref__schema-prop-name[b-nxgyscut9n] {
    /* Family and size come from .mono-xs in the markup. */
    color: var(--text1);
}

.api-ref__schema-prop-type[b-nxgyscut9n] {
    /* Family and size come from .mono-xs in the markup. */
    color: var(--text3);
}

.api-ref__schema-link[b-nxgyscut9n] {
    /* The link blue on both tones, from the secondary ramp rather than two hand-typed hexes. */
    color: light-dark(var(--secondary-600), var(--secondary-300));
    text-decoration: none;
}

.api-ref__schema-link:hover[b-nxgyscut9n] {
    text-decoration: underline;
}

/* Size comes from .role-normal in the markup. */
.api-ref__schema-prop-desc[b-nxgyscut9n] {
    color: var(--text2);
}

/* Desktop: description lives in column 2; the info toggle is mobile-only. */
.api-ref__schema-prop-info[b-nxgyscut9n] {
    display: none;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    padding: 0;
}

.api-ref__schema-prop-info[b-nxgyscut9n]  .icon {
    --icon-size: var(--content-size-0);
}

.api-ref__schema-enum[b-nxgyscut9n] {
    /* Family and size come from .mono-xs in the markup. */
    color: var(--text2);
    margin: 0;
}

/* Size comes from .role-normal in the markup. */
.api-ref__muted[b-nxgyscut9n] {
    color: var(--text3);
}

@media (max-width: 768px) {
    .api-ref__schema-prop[b-nxgyscut9n] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .api-ref__schema-prop-info[b-nxgyscut9n] {
        display: inline-flex;
    }

    .api-ref__schema-prop-desc[b-nxgyscut9n] {
        display: none;
        margin-top: var(--space-1);
    }

    .api-ref__schema-prop.is-open .api-ref__schema-prop-desc[b-nxgyscut9n] {
        display: block;
    }
}
/* /Pages/ApiReference/Components/SpecSidebar.razor.rz.scp.css */
.api-ref__sidebar[b-qvzwehofst] {
    position: fixed;
    top: var(--api-topbar-h);
    bottom: 0;
    left: 0;
    width: var(--api-sidebar-w);
    overflow-y: auto;
    background: var(--api-bg-elevated);
    border-right: var(--size-hairline) solid var(--api-border);
    padding: var(--space-2) 0;
    z-index: 40;
}

.api-ref__sb-section[b-qvzwehofst] {
    padding: var(--space-3) var(--space-3) var(--space-2);
    border-top: var(--size-hairline) solid var(--api-border);
}

.api-ref__sb-section:first-child[b-qvzwehofst] {
    border-top: none;
}

/* Family, size, tracking and casing come from .role-overline in the markup. */
.api-ref__sb-heading[b-qvzwehofst] {
    color: var(--text3);
    margin: 0 0 var(--space-2);
}

.api-ref__sb-count[b-qvzwehofst] {
    float: right;
}

.api-ref__specs[b-qvzwehofst] {
    display: flex;
    flex-direction: column;
    gap: var(--size-hairline);
}

.api-ref__spec-item[b-qvzwehofst] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-2);
    border: none;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--text2);
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.api-ref__spec-item:hover[b-qvzwehofst] {
    background: var(--api-bg-card-hi);
    color: var(--text1);
}

.api-ref__spec-item.is-active[b-qvzwehofst] {
    background: color-mix(in srgb, var(--secondary-600) 14%, transparent);
    color: var(--text1);
    position: relative;
}

.api-ref__spec-item.is-active[b-qvzwehofst]::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3));
    top: var(--space-1);
    bottom: var(--space-1);
    width: var(--main-menu-accent);
    border-radius: var(--radius-1);
    background: var(--api-accent);
}

.api-ref__spec-mono[b-qvzwehofst] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    flex: none;
    border-radius: var(--radius-1);
    background: var(--api-bg-card-hi);
    color: var(--text2);
    font-family: var(--font-mono);
    font-weight: 600;
}

.api-ref__spec-item.is-active .api-ref__spec-mono[b-qvzwehofst] {
    background: var(--primary-200);
    color: var(--primary-700);
}

.api-ref__spec-name[b-qvzwehofst] {
    flex: 1;
}

.api-ref__spec-chevron[b-qvzwehofst] {
    margin-left: auto;
    display: inline-flex;
    color: var(--text3);
    transition: transform .15s;
}

.api-ref__spec-chevron[b-qvzwehofst]  .icon {
    --icon-size: var(--content-size-0);
}

.api-ref__spec.is-expanded .api-ref__spec-chevron[b-qvzwehofst] {
    transform: rotate(180deg);
}

/* The indent rail for a spec's tag rows. The rows themselves are NavList's. */
.api-ref__spec-tags[b-qvzwehofst] {
    margin: var(--space-1) 0 var(--space-2) var(--space-4);
    padding-left: var(--space-2);
    border-left: var(--size-hairline) solid var(--api-border);
}

.api-ref__muted[b-qvzwehofst] {
    color: var(--text3);
}

@media (max-width: 1024px) {
    .api-ref__sidebar[b-qvzwehofst] {
        display: none;
    }
}
/* /Pages/ApiReference/Components/Topbar.razor.rz.scp.css */
.api-ref__topbar[b-fbzsj1i1po] {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--api-topbar-h);
    display: grid;
    /* Three tracks for three children; the middle one shrinks. A bare `1fr` floors at min-content
       and overflows, so the shrinking track must be minmax(0, 1fr). */
    grid-template-columns: var(--api-sidebar-w) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    z-index: 50;
}

/* The canonical .glass on a backdrop LAYER, not on the bar: .glass declares `overflow: clip`, which
   on the bar would clip the menus that open out of it. */
.api-ref__topbar-bg[b-fbzsj1i1po] {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
}

/* ── Brand — a LINK home; this page runs outside MainLayout, so it is the only way back. ──────── */
.api-ref__brand[b-fbzsj1i1po] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.api-ref__brand:hover[b-fbzsj1i1po] {
    opacity: .8;
}

.api-ref__brand:focus-visible[b-fbzsj1i1po] {
    outline: var(--size-hairline) solid var(--api-accent);
    outline-offset: var(--space-1);
}

.api-ref__brand-divider[b-fbzsj1i1po] {
    width: var(--size-hairline);
    height: var(--content-size-1);
    background: var(--api-border);
}

/* Family, size, tracking and casing come from .role-overline, composed in the markup. Only the ink
   and the two-line leading are local — the role is a single-line role and this mark stacks. */
.api-ref__brand-sub[b-fbzsj1i1po] {
    line-height: 1.25;
    color: var(--text3);
}

.api-ref__brand[b-fbzsj1i1po]  .logo,
.api-ref__brand[b-fbzsj1i1po]  picture {
    display: block;
}

.api-ref__brand[b-fbzsj1i1po]  .logo-img {
    height: var(--main-menu-logo-h);
    width: auto;
    display: block;
}

/* ── Search ───────────────────────────────────────────────────────────────── */
.api-ref__search[b-fbzsj1i1po] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--space-5);
    max-width: var(--content-size-8);
    /* Shrinkable: the grid track can go below content width, and so must the box inside it. */
    min-width: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-3);
    border-radius: var(--radius-2);
    border: var(--size-hairline) solid var(--api-border);
    background: var(--api-bg-input);
}

.api-ref__search-icon[b-fbzsj1i1po] {
    display: inline-flex;
    flex: none;
    color: var(--text3);
}

.api-ref__search-icon[b-fbzsj1i1po]  .icon {
    --icon-size: var(--content-size-0);
}

/* Size comes from .role-normal in the markup; a form control inherits no typography, so the role
   sits directly on the <input> (doc 18 §1.1 — that composition is canonical, not drift). */
.api-ref__search-input[b-fbzsj1i1po] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text1);
}

.api-ref__search-input:focus[b-fbzsj1i1po] {
    outline: none;
}

/* ── Actions ──────────────────────────────────────────────────────────────── */
.api-ref__topbar-actions[b-fbzsj1i1po] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

/* ── Environment switcher — canonical Dropdown; only its TRIGGER content is styled here. ──────── */
.api-ref__env-dot[b-fbzsj1i1po] {
    width: var(--size-2);
    height: var(--size-2);
    border-radius: var(--radius-pill);
    flex: none;
}

/* Per-environment status colour from the semantic palette. PROD reads as danger deliberately. */
.api-ref__env-dot--dev[b-fbzsj1i1po] { background: var(--color-warning); }
.api-ref__env-dot--test[b-fbzsj1i1po] { background: var(--secondary-400); }
.api-ref__env-dot--stg[b-fbzsj1i1po] { background: var(--secondary-300); }
.api-ref__env-dot--prod[b-fbzsj1i1po] { background: var(--color-danger); }

.api-ref__env-label[b-fbzsj1i1po] {
    font-weight: 700;
    color: var(--text1);
}

.api-ref__env-host[b-fbzsj1i1po] {
    color: var(--text3);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Tablet: the sidebar track collapses (SpecSidebar hides itself there), so the brand takes only
      the width it needs and the search keeps the rest. ───────────────────────────────────────── */
@media (max-width: 1024px) {
    /* The search track carries a FLOOR, so no trailing control in the actions track can starve it
       below a typable width, whatever renders there. */
    .api-ref__topbar[b-fbzsj1i1po] {
        grid-template-columns: auto minmax(var(--content-size-5), 1fr) minmax(0, auto);
    }
}

/* ── Phone: drop whatever states something twice; what remains is a control. ─────────────────── */
@media (max-width: 640px) {
    /* Same floor, smaller: a phone still owes the search a typable width. */
    .api-ref__topbar[b-fbzsj1i1po] {
        grid-template-columns: auto minmax(var(--content-size-4), 1fr) minmax(0, auto);
        padding: 0 var(--mobile-gutter);
        gap: var(--space-2);
    }

    .api-ref__brand-divider[b-fbzsj1i1po],
    .api-ref__brand-sub[b-fbzsj1i1po],
    .api-ref__env-host[b-fbzsj1i1po] {
        display: none;
    }

    .api-ref__search[b-fbzsj1i1po] {
        max-width: none;
    }
}
/* /Pages/BrandBook.razor.rz.scp.css */
.brand-book-container[b-djaap7n7nb] {
    padding: 2rem;
    min-height: 100vh;
    width: 100%;
}

.brand-book-title[b-djaap7n7nb] {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .brand-book-container[b-djaap7n7nb] {
        padding: 1rem;
    }
    
    .brand-book-title[b-djaap7n7nb] {
        font-size: 2rem;   /* 32px · h2 */
        margin-bottom: 2rem;
    }
}
/* /Pages/DesignSystem.razor.rz.scp.css */
/* Layout for the design-system gallery page. Token-driven; component visuals come from each
   component's own isolated CSS. */

.ds-shell[b-bav59pa272] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-7);
}

.ds-intro[b-bav59pa272] {
    color: var(--gray-100);
    margin-bottom: var(--space-5);
}

.ds-shell[b-bav59pa272]  .ds-chapter-panel > section + section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-row[b-bav59pa272] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.ds-row-bounded[b-bav59pa272] {
    max-width: var(--content-size-7);
}

.ds-col[b-bav59pa272] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    max-width: 640px;
}

.ds-grid[b-bav59pa272] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.ds-grid-2[b-bav59pa272] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

/* Ch7 — top app-bar pill demo */
.np-wrap[b-bav59pa272] {
    overflow-x: auto;
    margin-top: var(--space-3);
}

.nav-pill[b-bav59pa272] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 36px;
    background: light-dark(rgba(255, 255, 255, 0.6), rgba(12, 18, 26, 0.6));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid light-dark(rgba(23, 31, 38, 0.1), rgba(255, 255, 255, 0.08));
    min-width: max-content;
}

.np-logo[b-bav59pa272] {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--text1, var(--surface-text1));
    padding: 0 6px;
}

.np-spacer[b-bav59pa272] {
    flex: 1;
}

.np-actions[b-bav59pa272] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.np-icon[b-bav59pa272] {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-3);
    background: transparent;
    color: var(--text-muted, var(--surface-text-muted));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.np-icon:hover[b-bav59pa272] {
    background: light-dark(rgba(23, 31, 38, 0.05), rgba(255, 255, 255, 0.06));
    color: var(--text1, var(--surface-text1));
}

/* Ch7 — tabs */
.ds-tabs[b-bav59pa272] {
    display: flex;
    gap: var(--space-1);
    align-items: flex-end;
    border-bottom: 1px solid light-dark(rgba(23, 31, 38, 0.1), rgba(255, 255, 255, 0.08));
    margin-top: var(--space-3);
}

.ds-tab[b-bav59pa272] {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, var(--surface-text-muted));
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color 0.12s ease;
}

.ds-tab:hover[b-bav59pa272] {
    color: var(--text1, var(--surface-text1));
}

.ds-tab.on[b-bav59pa272] {
    color: var(--text1, var(--surface-text1));
    border-bottom-color: var(--primary-200);
}

.ds-tab-count[b-bav59pa272] {
    font-family: var(--font-mono);
    font-size: 0.66rem;   /* 10.5px · .role-legal/.role-overline */
    color: var(--text-muted, var(--surface-text-muted));
    padding: 1px 6px;
    border-radius: 999px;
    background: light-dark(rgba(23, 31, 38, 0.06), rgba(255, 255, 255, 0.08));
}

/* Ch7 — glass nav chips */
.nav-chips[b-bav59pa272] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.nav-chip[b-bav59pa272] {
    appearance: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    background: light-dark(rgba(23, 31, 38, 0.04), rgba(255, 255, 255, 0.04));
    border: 1px solid light-dark(rgba(23, 31, 38, 0.12), rgba(255, 255, 255, 0.10));
    color: var(--text2, var(--surface-text2));
    transition: color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.nav-chip:hover[b-bav59pa272] {
    color: var(--text1, var(--surface-text1));
}

.nav-chip.on[b-bav59pa272] {
    color: var(--text1, var(--surface-text1));
    border-color: var(--primary-200);
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary-200) 25%, transparent);
}

.ds-navlist[b-bav59pa272] {
    max-width: 280px;
    margin-top: var(--space-4);
}
/* /Pages/Folders/FolderBrowse.razor.rz.scp.css */

.folder-browse[b-klu5l1wyni] {
    --ink: var(--surface-text1);
    --ink-faint: light-dark(var(--gray-500), var(--gray-400));
    --icon-ink: light-dark(var(--gray-600), var(--gray-300));
    --hairline: light-dark(rgba(23, 31, 38, .10), rgba(255, 255, 255, .12));
}

/* The reading surface. Only the radius, padding and depth belong here — the material itself is the
   shared .glass class in the markup, so this page cannot drift into a private lookalike of it. */
.folder-browse-panel[b-klu5l1wyni] {
    border-radius: var(--radius-4);
    padding: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -24px color-mix(in srgb, var(--gray-900) 55%, transparent);
}

.folder-browse-header[b-klu5l1wyni],
.folder-browse-tree[b-klu5l1wyni],
.folder-browse-state[b-klu5l1wyni] {
    position: relative;
    z-index: 1;
}

.folder-browse-header[b-klu5l1wyni] {
    margin-bottom: var(--space-4);
}

.folder-browse-back[b-klu5l1wyni] {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--ink-faint);
    text-decoration: none;
}

    .folder-browse-back:hover[b-klu5l1wyni] {
        color: var(--ink);
        text-decoration: underline;
    }

/* Spacing only — size/family/weight belong to the heading role classes on the element. */
/* No .folder-browse-title rule: PageHero owns the title's margin (its column gap is the one source
   of that measurement) and the role classes own its type. */
.folder-browse-sub[b-klu5l1wyni] {
    margin: 0;
    color: var(--ink-faint);
}

/* Loading / error / empty share one restrained treatment — none of them is an error the user caused,
   so none of them shouts. */
.folder-browse-state[b-klu5l1wyni] {
    margin: 0;
    padding: var(--space-4) 0;
    color: var(--ink-faint);
}
/* /Pages/Folders/FolderIndex.razor.rz.scp.css */
/* Folders entry point — page layout only. Typography comes from the design-system roles applied in
   the markup; the dimension/folder rows are the canonical NavFolderTree, which carries its own styles. */

/* No width / centring / padding here: the page content column is the canonical Container (rung 10,
   fluid), applied in the markup. This class carries ONLY the surface-host-local semantic aliases. */
.folder-index[b-zi1tq3f3un] {
    --ink: var(--surface-text1);
    --ink-faint: light-dark(var(--gray-500), var(--gray-400));
    --icon-ink: light-dark(var(--gray-600), var(--gray-300));
    --hairline: light-dark(rgba(23, 31, 38, .10), rgba(255, 255, 255, .12));
}

/* The reading surface. Only the radius, padding and depth belong here — the material itself is the
   shared .glass class in the markup, so this page cannot drift into a private lookalike of it. */
.folder-index-panel[b-zi1tq3f3un] {
    border-radius: var(--radius-4);
    padding: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -24px color-mix(in srgb, var(--gray-900) 55%, transparent);
}

@media (max-width: 640px), (max-height: 480px) {
    .folder-index-panel[b-zi1tq3f3un] {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.folder-index-header[b-zi1tq3f3un],
.folder-index-tree[b-zi1tq3f3un],
.folder-index-state[b-zi1tq3f3un] {
    position: relative;
    z-index: 1;
}

.folder-index-header[b-zi1tq3f3un] {
    margin-bottom: var(--space-4);
}

/* No .folder-index-title rule: PageHero owns the title's margin (its column gap is the one source of
   that measurement) and the role classes own its size/family/weight. */
.folder-index-sub[b-zi1tq3f3un] {
    margin: 0;
    color: var(--ink-faint);
}

/* Loading / error / empty share one restrained treatment — none of them is an error the user caused,
   so none of them shouts. */
.folder-index-state[b-zi1tq3f3un] {
    margin: 0;
    padding: var(--space-4) 0;
    color: var(--ink-faint);
}
/* /Pages/Folders/FolderView.razor.rz.scp.css */

.folder-view[b-mr4gxxny1c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.folder-view-back[b-mr4gxxny1c] {
    color: var(--text2, var(--surface-text2));
    text-decoration: none;
    width: fit-content;
}

.folder-view-back:hover[b-mr4gxxny1c] {
    color: var(--primary-200);
}

.folder-view-sub[b-mr4gxxny1c],
.folder-view-state[b-mr4gxxny1c] {
    margin: 0;
    color: var(--text2, var(--surface-text2));
}

.folder-type-badges[b-mr4gxxny1c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}


.folder-overflow-panel[b-mr4gxxny1c] {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    border: 1px solid var(--hairline);
    background: var(--surface-soft);
}

@media (max-width: 640px), (max-height: 480px) {
    .folder-subgrid[b-mr4gxxny1c]  .dg thead th:nth-child(2),
    .folder-subgrid[b-mr4gxxny1c]  .dg tbody td:nth-child(2) {
        display: none;
    }
}
/* /Pages/Graph/GeoComparisonView.razor.rz.scp.css */

.gcmp[b-3xg5jnvot3] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-bg-dark);
}

.gcmp-scene[b-3xg5jnvot3] {
    position: relative;
    flex: 1;
    /* min-height: 0 is what lets the map's height: 100% resolve — a flex item's implicit min-height:auto
       floors the box at its content height and a child asking for 100% of that has no definite basis. */
    min-height: 0;
    overflow: hidden;
}

/* One column in the corner: name, picker, then legend — the shape both graph overlays already use. */
.gcmp-rail[b-3xg5jnvot3] {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: calc(100% - var(--space-8));
    width: 320px;
    /* The rail is the only interactive chrome over the map, so it takes pointer events while the space
       around it stays pannable. */
    pointer-events: auto;
}

.gcmp-head[b-3xg5jnvot3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.gcmp-sub[b-3xg5jnvot3] {
    margin: 0;
    color: var(--surface-text-muted-dark);
}

.gcmp-picker[b-3xg5jnvot3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-3);
    background: var(--surface-paper);
}

/* Scrolls inside the panel rather than growing it: 50 candidates would otherwise push the legend off
   the viewport, and the legend is what says which of them are drawn. */
.gcmp-candidates[b-3xg5jnvot3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 280px;
    overflow-y: auto;
}

/* Full-width rows: each is a list entry that happens to be a Button, so it should read as a row rather
   than as a control floating in a column. ::deep because Button carries its own scope id. */
.gcmp-candidates[b-3xg5jnvot3]  > * {
    width: 100%;
}

.gcmp-note[b-3xg5jnvot3] {
    margin: 0;
    color: var(--surface-text-muted-dark);
}

.gcmp-legend[b-3xg5jnvot3] {
    min-height: 0;
    overflow-y: auto;
}
/* /Pages/Graph/GraphQueryView.razor.rz.scp.css */
/* The query view: a one-line query bar over a Plexus scene that fills what is left. */

.gq-root[b-qo0vmfs8er] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    min-height: 0;
    padding: var(--space-4);
}

.gq-bar[b-qo0vmfs8er] {
    display: flex;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.gq-input[b-qo0vmfs8er] {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text1);
    background: var(--surface-soft, transparent);
    border: 1px solid var(--hairline, currentColor);
    border-radius: var(--radius-2, 6px);
}

.gq-bar[b-qo0vmfs8er]  .btn {
    flex: 0 0 auto;
}

.gq-error[b-qo0vmfs8er],
.gq-summary[b-qo0vmfs8er] {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--text-sm);
    font-family: var(--font-mono, monospace);
}

.gq-error[b-qo0vmfs8er] {
    color: var(--danger-500, crimson);
}

.gq-summary[b-qo0vmfs8er] {
    color: var(--text2);
}

.gq-scene[b-qo0vmfs8er] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;

    --node-scale: 0.6;

    --node-width: 192px;
    --node-height: max-content;
}
/* /Pages/Graph/NodeBrowse.razor.rz.scp.css */
.node-browse-page[b-3uo08vy0yu] {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4);
}

@media (max-width: 640px), (max-height: 480px) {
    .node-browse-page[b-3uo08vy0yu] {
        max-width: 100%;
        padding-inline: 0;
    }
}

.node-browse-header[b-3uo08vy0yu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.search-input[b-3uo08vy0yu] {
    width: 100%;
    max-width: 480px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--gray-100-op-03);
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus[b-3uo08vy0yu] {
    border-color: var(--secondary-300);
    box-shadow: 0 0 0 3px var(--secondary-300-op-02);
}

.search-input[b-3uo08vy0yu]::placeholder {
    color: var(--gray-200);
}
/* /Pages/Graph/NodeDrawerBody.razor.rz.scp.css */

.ndb[b-4f98r3ykqj] {
    display: flex;
    flex-direction: column;

    line-height: 1.45;

}

.ndb[b-4f98r3ykqj]  .np-panel,
.ndb[b-4f98r3ykqj]  .np-relation-section {
    padding: var(--space-3) 0;
    border-top: var(--size-hairline) solid var(--drawer-line);
    box-sizing: border-box;

    width: 100%;

    min-width: 0;
}

.ndb[b-4f98r3ykqj]  .np-panel:first-child,
.ndb[b-4f98r3ykqj]  .np-relation-section:first-child {
    border-top: 0;
    padding-top: 0;
}

/* THE TITLE IS A LABEL, NOT A HEADING. It is an `<h3>` for document structure, and left to the
   browser's default it renders ~24px bold — which is what put the property NAME above the property
   VALUE in visual weight and made the drawer read as a stack of headings with captions.

   THE TYPE IS NO LONGER RESTATED HERE, and the premise that required it is GONE: this file used to
   hand-roll the treatment because `NodePagePropertyPanel` — a SHARED component — carried no role, so
   each host had to dress its `<h3>` itself. Since typography v2 that component composes `.role-label`
   on the element (which is also what typography.css's own register prescribes — NOT `.role-overline`,
   as the previous comment here claimed). Blazor scoped CSS is UNLAYERED and the roles live in
   `@layer components`, so anything declared in this file wins unconditionally: leaving the old
   declarations standing would have silently kept the drawer on the pre-v2 treatment while the page
   moved. Only the drawer's own INK stays local. (This retires the NOD-655 note that stood here.)

   THE RELATION'S TITLE IS NOT TOUCHED HERE either. It already carries `section-h4 role-heading-title`
   on the element, so it arrives at the design system's smallest heading rung with its colour set by
   its own sheet — a real title over a real grid, which is what a relation section is. */
.ndb[b-4f98r3ykqj]  .np-panel-title {
    color: var(--drawer-ink-muted);
    margin: 0 0 var(--space-1);
}

.ndb[b-4f98r3ykqj]  .np-prop-value,
.ndb[b-4f98r3ykqj]  .np-prop-values li {
    color: var(--text1);
}

.ndb[b-4f98r3ykqj]  .np-placeholder-note {
    color: var(--drawer-ink-muted);
}

.ndb-empty[b-4f98r3ykqj] {
    margin: 0;
    color: var(--drawer-ink-muted);
}
/* /Pages/Graph/NodeGeoMapView.razor.rz.scp.css */
.ngeo[b-lgrwc7dqwp] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    /* The canonical opaque page surface, theme-adaptive by construction — a token, never the literal
       colour pair, so a palette change carries here without an edit. */
    background: var(--surface-paper);
}

/* The toolbar rides ON the scene rather than above it: the overlay IS the viewport, so a strip reserved
   above the map would only reintroduce the frame this state exists to escape. */
.ngeo-toolbar[b-lgrwc7dqwp] {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    /* Over the map's own panes. Leaflet stacks its controls at 1000, so this clears them rather than
       competing: an exit button behind the zoom control is a control that cannot be pressed. */
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* The modes read as one group and the exit control as separate, which is what the larger gap on the
       last child below expresses. */
    gap: var(--space-1);
    padding: var(--padding-block-3) var(--padding-inline-4);
    pointer-events: none;
}

.ngeo-toolbar[b-lgrwc7dqwp]  > * {
    pointer-events: auto;
}

.ngeo-toolbar[b-lgrwc7dqwp]  > *:last-child {
    margin-inline-start: var(--space-3);
}

.ngeo-scene[b-lgrwc7dqwp] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ngeo-rail[b-lgrwc7dqwp] {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    max-block-size: calc(100% - var(--space-5));
    /* Over Leaflet's panes AND its controls, which stack at 1000 — the same rung the toolbar takes for
       the same reason. */
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-block-size: 0;
    /* Panning starts under this column as often as anywhere else; only its controls take the pointer. */
    pointer-events: none;
}

/* WHOSE neighbourhood this is, over the picture it describes — the same placement the Plexus overlay
   gives its focus name. Top-left, clear of the exit control on the right. */
.ngeo-head[b-lgrwc7dqwp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    /* `flex: none` so a long node name cannot compress the plate against the legend under it. */
    flex: none;
    max-inline-size: 40ch;
    padding: var(--padding-block-2) var(--padding-inline-3);
    border-radius: var(--radius-2);
    /* A legible plate, not a bare label: the map underneath is arbitrary imagery, so text laid directly
       on it is unreadable over roughly half the tiles. The token pair adapts with the theme. */
    background: var(--surface-paper);
    /* Panning starts under the plate as often as anywhere else; the plate is not a control. */
    pointer-events: none;
}

.ngeo-sub[b-lgrwc7dqwp] {
    margin: 0;
}

.ngeo-legend[b-lgrwc7dqwp] {
    display: flex;
    align-items: flex-start;
    min-block-size: 0;
    /* The column is only as wide as the panel; without this the flex box spans the map and swallows
       every drag that starts anywhere along it. */
    inline-size: max-content;
    pointer-events: none;
}

.ngeo-legend[b-lgrwc7dqwp]  > * {
    pointer-events: auto;
}

/* WHICH territory the pointer is on, and every layer that contains it. Bottom-left, opposite the exit
   control, and out of the legend's column. */
.ngeo-card[b-lgrwc7dqwp] {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    z-index: 1001;
    inline-size: var(--content-size-6);
    padding: var(--padding-block-3) var(--padding-inline-3);
    border-radius: var(--radius-2);
    background: var(--surface-paper);
    border: var(--size-hairline) solid color-mix(in srgb, var(--surface-text1) 10%, transparent);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.ngeo-card.is-shown[b-lgrwc7dqwp] {
    opacity: 1;
    transform: none;
}

.ngeo-card__kicker[b-lgrwc7dqwp],
.ngeo-card__name[b-lgrwc7dqwp] {
    margin: 0;
}

.ngeo-card__chips[b-lgrwc7dqwp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
}

.ngeo-chip[b-lgrwc7dqwp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--padding-block-1) var(--padding-inline-2);
    border-radius: var(--radius-pill);
    border: var(--size-hairline) solid var(--chip-accent);
    color: var(--chip-accent);
    background: color-mix(in srgb, var(--chip-accent) 14%, transparent);
}

.ngeo-chip[b-lgrwc7dqwp]::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--chip-accent);
}
/* /Pages/Graph/NodePlexusView.razor.rz.scp.css */
.nplex[b-yedtzsli30] {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    /* The canonical opaque page surface, theme-adaptive by construction — a token, never the literal
       colour pair, so a palette change carries here without an edit. */
    background: var(--surface-paper);
}

/* The toolbar rides ON the scene rather than above it: the overlay IS the viewport, so a strip
   reserved above the scene would only reintroduce the frame this state exists to escape. */
.nplex-toolbar[b-yedtzsli30] {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--padding-block-3) var(--padding-inline-4);
    pointer-events: none;
}

.nplex-toolbar[b-yedtzsli30]  > * {
    pointer-events: auto;
}

.nplex-scene[b-yedtzsli30] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;

    --node-scale: 0.6;

    --node-width: max-content;
    --node-height: max-content;
}

.nplex-scene[b-yedtzsli30]  .background-layer {
    background-image: var(--plexus-backdrop);
    background-size: cover;
}

/* Loading / empty / error. An empty scene must read as a stated outcome: a bare surface is
   indistinguishable from a failed render, which is the confusion this view exists to remove. */
.nplex-head[b-yedtzsli30] {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    max-height: calc(100% - var(--space-5));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    z-index: 1;
    pointer-events: none;
}

    .nplex-head[b-yedtzsli30]  > * {
        pointer-events: auto;
    }

/* The panel's own slot inside the stack: it takes the height the heading leaves, and scrolls within
   it rather than pushing the stack past the frame. */
.nplex-filter[b-yedtzsli30] {
    display: flex;
    min-height: 0;
    pointer-events: none;
}

    .nplex-filter[b-yedtzsli30]  > * {
        pointer-events: auto;
    }

.nplex-state[b-yedtzsli30] {
    align-items: center;
    justify-content: center;
    padding: var(--padding-block-5) var(--padding-inline-5);
    color: var(--text2, var(--surface-text2));
    text-align: center;
}
/* /Pages/Graph/NodeView.razor.rz.scp.css */
/* Page-level styles for /nodes/{id}. The dense panel layout lives in
   NodePage.razor.css; this file only handles the loading and error skeletons. */

.node-view-loading[b-8u87rf0k3n],
.node-view-error[b-8u87rf0k3n] {
    max-width: var(--content-size-11);
    margin: var(--space-4) auto;
    padding: var(--space-5);
    font-family: var(--font-mono);
    color: var(--secondary-50);
    text-align: center;
}

.node-view-error[b-8u87rf0k3n] {
    color: var(--color-danger);
}
/* /Pages/Home.razor.rz.scp.css */

.home[b-kbp69aw5e9] {
    --ink: var(--surface-text1);
    --ink-faint: light-dark(var(--gray-500), var(--gray-400));
    --hairline: light-dark(rgba(23, 31, 38, .10), rgba(255, 255, 255, .12));
    max-width: 1640px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding-top: 20vh;
}

.home-phone-nav[b-kbp69aw5e9],
.home-phone-header[b-kbp69aw5e9] {
    display: none;
}

@media (max-width: 640px), (max-height: 480px) {
    .home[b-kbp69aw5e9] {
        display: flex;
        flex-direction: column;
        padding-top: 0;
    }

    .home-phone-header[b-kbp69aw5e9] {
        display: block;
        flex: none;
        margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 0;
        background: var(--surface-bg);
    }

    /* min-height: 0 lets the hero shrink instead of pushing the chip row off the bottom. */
    .home-hero[b-kbp69aw5e9] {
        flex: 1 1 auto;
        min-height: 0;
        justify-content: center;
        overflow-y: auto;
    }

    /* Wraps rather than clipping: the widest translations are "Metamodelo" and "Metamodell". */
    .home-phone-nav[b-kbp69aw5e9] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
        flex: 0 0 auto;
        padding: var(--space-3) var(--space-4) var(--space-5);
        /* Set here, not on the button: Button couples radius to size, and --radius-3 arrives with
           .btn-large's 64px. */
        --radius: var(--radius-3);
    }
}

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────── */
.home-hero[b-kbp69aw5e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4) var(--space-5);
}

/* The hero is a centered column, and PageHero's own column has to be told so — its default stretches
   its children, which would left-align the greeting inside a section that centers everything else. */
.home-hero[b-kbp69aw5e9]  .page-hero {
    align-items: center;
}

.home-hero[b-kbp69aw5e9]  .page-hero-title {
    color: var(--ink);
}

.home-hero-sub[b-kbp69aw5e9] {
    margin: 0 0 var(--space-5);
    font-size: 16px;
    color: var(--ink-faint);
}

.home-search-host[b-kbp69aw5e9] {
    width: min(75vw,660px);
    max-width: 100%;
}

/* ── Rows ─────────────────────────────────────────────────────────────────────────────────────── */
.home-rows[b-kbp69aw5e9] {
    padding-top: var(--space-2);
}

.home-row[b-kbp69aw5e9] {
    margin: var(--space-5) 0;
    padding: 0 var(--space-5);
    --org-dim-menu-float-margin: 0;
}

/* Fit-grid: all cards share width equally and are visible at once (no scroll). The slot wrapper is
   page-owned so the flex sizing crosses the ExploreCard component boundary. */
.home-dimrow[b-kbp69aw5e9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);

}

.home-dim-slot[b-kbp69aw5e9] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* Hairline reservation: the slot leaves the glass frame ring's 1px free around the card. */
    padding: var(--size-hairline);
    border-radius: var(--radius-3);
}

/* Row 4 — the "★ pinned" marker inside a NodeCard footer (handoff .ntime). Typography via the
   .mono-2xs role class — only the muted ink is page-specific. */
.home-fav-pin[b-kbp69aw5e9] {
    color: var(--ink-faint);
}

.home-onb-slot[b-kbp69aw5e9] {
    height: 142px;
    --medallion-size: 38px;
    --medallion-gap: 10px;
}

    .home-onb-slot[b-kbp69aw5e9]  .feature-card {
        height: 100%;
    }

@media (max-width: 1100px) {
    .home-dimrow[b-kbp69aw5e9] {
        flex-wrap: wrap;
    }

    .home-dim-slot[b-kbp69aw5e9] {
        flex: 1 1 calc(20% - var(--space-3));
       
    }
}

@media (max-width: 760px) {
    .home-row[b-kbp69aw5e9] {
        padding: 0 var(--space-4);
    }
}
/* /Pages/Legal/CookiesPolicy/CookiesPolicy.razor.rz.scp.css */
.legal-page[b-0m3rhkm8et] {
    padding: var(--size-4);
    max-width: 1200px;
    margin: 0 auto;
}

.legal-header[b-0m3rhkm8et] {
    text-align: center;
    margin-bottom: var(--size-4);
}

    .legal-header h1[b-0m3rhkm8et] {
        font-size: 2rem;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: var(--size-2);
        color: var(--h1-color);
    }

.last-updated[b-0m3rhkm8et] {
    font-size: 0.875rem;   /* 14px · cite */
    color: var(--h1-subtitle-color);
    font-style: italic;
}

.accent-line[b-0m3rhkm8et] {
    width: 60px;
    height: 2px;
    background: var(--primary-200);
    margin: var(--size-4) auto;
}

.legal-content[b-0m3rhkm8et] {
    text-align: left;
    line-height: 1.8;
}

    .legal-content section[b-0m3rhkm8et] {
        margin-bottom: var(--size-6);
    }

    .legal-content h2[b-0m3rhkm8et] {
        font-size: 1.5rem;   /* 24px · h3 */
        font-weight: 500;
        color: var(--h2-color);
        margin-bottom: var(--size-3);
        border-bottom: 1px solid var(--gray-300);
        padding-bottom: var(--size-2);
    }

    .legal-content p[b-0m3rhkm8et] {
        font-size: 1rem;
        color: var(--text-color);
        margin-bottom: var(--size-3);
    }

    .legal-content ul[b-0m3rhkm8et] {
        margin-left: var(--size-4);
        margin-bottom: var(--size-3);
    }

    .legal-content li[b-0m3rhkm8et] {
        margin-bottom: var(--size-2);
    }

.legal-footer[b-0m3rhkm8et] {
    margin-top: var(--size-6);
    text-align: center;
    padding-top: var(--size-4);
    border-top: 1px solid var(--gray-300);
}
/* /Pages/Legal/PrivacyPolicy/PrivacyPolicy.razor.rz.scp.css */
.legal-page[b-q20xzy19g4] {
    padding: var(--size-4);
    max-width: 1200px;
    margin: 0 auto;
}

.legal-header[b-q20xzy19g4] {
    text-align: center;
    margin-bottom: var(--size-4);
}

    .legal-header h1[b-q20xzy19g4] {
        font-size: 2rem;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: var(--size-2);
        color: var(--h1-color);
    }

.last-updated[b-q20xzy19g4] {
    font-size: 0.875rem;   /* 14px · cite */
    color: var(--h1-subtitle-color);
    font-style: italic;
}

.accent-line[b-q20xzy19g4] {
    width: 60px;
    height: 2px;
    background: var(--primary-200);
    margin: var(--size-4) auto;
}

.legal-content[b-q20xzy19g4] {
    text-align: left;
    line-height: 1.8;
}

    .legal-content section[b-q20xzy19g4] {
        margin-bottom: var(--size-6);
    }

    .legal-content h2[b-q20xzy19g4] {
        font-size: 1.5rem;   /* 24px · h3 */
        font-weight: 500;
        color: var(--h2-color);
        margin-bottom: var(--size-3);
        border-bottom: 1px solid var(--gray-300);
        padding-bottom: var(--size-2);
    }

    .legal-content p[b-q20xzy19g4] {
        font-size: 1rem;
        color: var(--text-color);
        margin-bottom: var(--size-3);
    }

    .legal-content ul[b-q20xzy19g4] {
        margin-left: var(--size-4);
        margin-bottom: var(--size-3);
    }

    .legal-content li[b-q20xzy19g4] {
        margin-bottom: var(--size-2);
    }

.legal-footer[b-q20xzy19g4] {
    margin-top: var(--size-6);
    text-align: center;
    padding-top: var(--size-4);
    border-top: 1px solid var(--gray-300);
}
/* /Pages/Legal/UserAgreement/UserAgreement.razor.rz.scp.css */
.legal-page[b-2g0nvlnvl8] {
    padding: var(--size-4);
    max-width: 1200px;
    margin: 0 auto;
}

.legal-header[b-2g0nvlnvl8] {
    text-align: center;
    margin-bottom: var(--size-4);
}

    .legal-header h1[b-2g0nvlnvl8] {
        font-size: 2rem;
        font-weight: 300;
        letter-spacing: 1px;
        margin-bottom: var(--size-2);
        color: var(--h1-color);
    }

.last-updated[b-2g0nvlnvl8] {
    font-size: 0.875rem;   /* 14px · cite */
    color: var(--h1-subtitle-color);
    font-style: italic;
}

.accent-line[b-2g0nvlnvl8] {
    width: 60px;
    height: 2px;
    background: var(--primary-200);
    margin: var(--size-4) auto;
}

.legal-content[b-2g0nvlnvl8] {
    text-align: left;
    line-height: 1.8;
}

    .legal-content section[b-2g0nvlnvl8] {
        margin-bottom: var(--size-6);
    }

    .legal-content h2[b-2g0nvlnvl8] {
        font-size: 1.5rem;   /* 24px · h3 */
        font-weight: 500;
        color: var(--h2-color);
        margin-bottom: var(--size-3);
        border-bottom: 1px solid var(--gray-300);
        padding-bottom: var(--size-2);
    }

    .legal-content p[b-2g0nvlnvl8] {
        font-size: 1rem;
        color: var(--text-color);
        margin-bottom: var(--size-3);
    }

    .legal-content ul[b-2g0nvlnvl8] {
        margin-left: var(--size-4);
        margin-bottom: var(--size-3);
    }

    .legal-content li[b-2g0nvlnvl8] {
        margin-bottom: var(--size-2);
    }

.legal-footer[b-2g0nvlnvl8] {
    margin-top: var(--size-6);
    text-align: center;
    padding-top: var(--size-4);
    border-top: 1px solid var(--gray-300);
}
/* /Pages/NotFound.razor.rz.scp.css */
.nf-actions[b-jbj1aunank] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
/* /Pages/OperatingModel/FunctionPlaneView.razor.rz.scp.css */
.plane-state[b-zwtvw9ot0b] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted, var(--surface-text-muted));
}
/* /Pages/OperatingModel/NodeTypesView.razor.rz.scp.css */

.nt-filter[b-ybnmfhe6ui] {
    /* 0px, not 0: the token is substituted into a `margin` shorthand through var(), and a bare 0 does
       not take there — verified in the browser, where it left the computed margin at its 12px default. */
    --org-dim-menu-float-margin: 0px;
    margin-bottom: var(--space-3);
    background: light-dark(#fff, var(--gray-950));
}

.nt-tree[b-ybnmfhe6ui] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background:light-dark(#fff,var(--gray-950));
    container: nt-tree / inline-size;
}

.nt-loading[b-ybnmfhe6ui] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted, var(--surface-text-muted));
}

.nt-empty[b-ybnmfhe6ui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted, var(--surface-text-muted));
}

/* ── shared row chrome ─────────────────────────────────────────────────────── */
.lvl-dim[b-ybnmfhe6ui],
.lvl-cat[b-ybnmfhe6ui],
.lvl-nt[b-ybnmfhe6ui] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
}

.lvl-spacer[b-ybnmfhe6ui] {
    flex: 1;
}

.caret[b-ybnmfhe6ui] {
    display: inline-flex;
    flex: none;
    color: var(--text-muted, var(--surface-text-muted));
    transition: transform 0.18s ease;
}

.caret[data-expanded="true"][b-ybnmfhe6ui] {
    transform: rotate(90deg);
}

.lvl-name[b-ybnmfhe6ui] {
    color: var(--text1, var(--surface-text1));
    min-width: 0;
}

/* The category is the tree's top level now, so it takes the stronger stop of the ramp outright —
   there is no dimension row above it to be a step lighter than. */
.lvl-cat[b-ybnmfhe6ui] {
    --tile-glyph: var(--dim-500, var(--primary-200));
}

.lvl-dim[b-ybnmfhe6ui] {
    --tile-glyph: var(--dim-500, var(--primary-200));
}

.lvl-nt[b-ybnmfhe6ui] {
    --tree-color: var(--dim-500, var(--gray-400));
}

.row-tile[b-ybnmfhe6ui] {
    width: var(--dim-tile-glyph);
    height: var(--dim-tile-glyph);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tile-glyph, var(--primary-200));
}

/* ── category band (level 0 — the card's header) ───────────────────────────── */
.lvl-cat[b-ybnmfhe6ui] {
    padding: var(--space-3) var(--space-4);
    background: light-dark(rgba(23, 31, 38, 0.035), rgba(255, 255, 255, 0.035));
}

.lvl-cat:hover[b-ybnmfhe6ui] {
    background: light-dark(rgba(23, 31, 38, 0.05), rgba(255, 255, 255, 0.05));
}

.cat-name[b-ybnmfhe6ui] {
    color: var(--text1, var(--surface-text1));
}

/* ── NodeType row (level 1) ────────────────────────────────────────────────── */
.lvl-nt[b-ybnmfhe6ui] {
    position: relative;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
    border-top: 1px solid light-dark(rgba(23, 31, 38, 0.04), rgba(255, 255, 255, 0.03));

    flex-wrap: nowrap;

    --nt-marker-row: 22px;
}

.lvl-nt:hover[b-ybnmfhe6ui] {
    background: light-dark(rgba(23, 31, 38, 0.025), rgba(255, 255, 255, 0.025));
}

.lvl-nt[b-ybnmfhe6ui]::before {
    content: "";
    position: absolute;
    left: calc(var(--space-6) - var(--space-4));
    top: 0;
    bottom: 0;
    width: 1.5px;
    background: var(--tree-color, var(--gray-400));
    opacity: 0.5;
}

.lvl-nt[b-ybnmfhe6ui]::after {
    content: "";
    position: absolute;
    left: calc(var(--space-6) - var(--space-4));
    top: var(--nt-marker-row);
    width: var(--space-3);
    height: 1.5px;
    background: var(--tree-color, var(--gray-400));
    opacity: 0.5;
}

.lvl-nt.is-last[b-ybnmfhe6ui]::before {
    bottom: auto;
    height: var(--nt-marker-row);
}

.nt-marker[b-ybnmfhe6ui] {
    width: 30px;
    height: calc((var(--nt-marker-row) - var(--space-3)) * 2);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

/* The mark itself — the dot the category band carried before the swap, in the row's own tree colour
   so it belongs to the connector it terminates rather than reading as a third accent. */
.nt-marker[b-ybnmfhe6ui]::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: var(--radius-pill);
    background: var(--tree-color, var(--primary-200));
    box-shadow: 0 0 8px -1px var(--tree-color, var(--primary-200));
}

.nt-main[b-ybnmfhe6ui] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.nt-text[b-ybnmfhe6ui] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 24ch;
    max-width: 60ch;
}

.nt-line[b-ybnmfhe6ui] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.nt-line[b-ybnmfhe6ui]  .row-info {
    margin-left: var(--space-1);
    align-self: center;
}

.nt-name[b-ybnmfhe6ui] {
    color: var(--text1, var(--surface-text1));
}

.nt-key[b-ybnmfhe6ui] {
    min-width: 0;
}

.nt-desc[b-ybnmfhe6ui] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nt-chips[b-ybnmfhe6ui] {
    display: inline-flex;
    gap: var(--space-1);
    flex: none;
    margin-top: 3px;
}

/* Same reasoning as .nt-key: the function name is meta, so it keeps .mono-xs's --text3 rather than
   being repainted in the disabled tone. */
.nt-fn[b-ybnmfhe6ui] {
    letter-spacing: 0.04em;
    flex: none;
    margin-top: 3px;
}

.nt-detail[b-ybnmfhe6ui] {
    margin: var(--space-2) 0 var(--space-3) var(--space-6);
    border-left: 2px solid var(--dim-500, var(--primary-200));
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    background: light-dark(rgba(23, 31, 38, 0.02), rgba(255, 255, 255, 0.02));
}

.nt-actions[b-ybnmfhe6ui] {
    flex: none;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
}

.nt-open[b-ybnmfhe6ui] {
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-2);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nt-open:hover[b-ybnmfhe6ui] {
    background: light-dark(rgba(23, 31, 38, 0.06), rgba(212, 255, 0, 0.1));
}

/* Keyboard focus ring — the house standard (outline + offset in the accent). */
.nt-open:focus-visible[b-ybnmfhe6ui] {
    outline: 2px solid var(--primary-200);
    outline-offset: 2px;
}

.nt-kebab[b-ybnmfhe6ui] {
    display: none;
}

.nt-dots[b-ybnmfhe6ui] {
    font-size: var(--icon-size-md);
    line-height: 1;
}

@container nt-tree (max-width: 840px) {
    .nt-actions > .nt-open[b-ybnmfhe6ui] {
        display: none;
    }

    .nt-kebab[b-ybnmfhe6ui] {
        display: inline-flex;
    }
}

/* Accessibility (PRODUCT.md §7 AA · WCAG 2.3.3): honour a reduced-motion preference by dropping the
   caret's rotate transition — the caret still points down when expanded (the state is preserved), it
   just snaps rather than animates. */
@media (prefers-reduced-motion: reduce) {
    .caret[b-ybnmfhe6ui] {
        transition: none;
    }
}

/* Keep LAST: same specificity as the `display` rules above, so source order is what decides. */
@media (max-width: 640px), (max-height: 480px) {
    .nt-chips[b-ybnmfhe6ui],
    .nt-fn[b-ybnmfhe6ui],
    .nt-key[b-ybnmfhe6ui],
    .nt-desc[b-ybnmfhe6ui],
    .nt-actions[b-ybnmfhe6ui] {
        display: none;
    }

    .nt-main[b-ybnmfhe6ui]  .state-tag {
        display: none;
    }

    .nt-line[b-ybnmfhe6ui]  .row-info {
        margin-left: auto;
    }
}
/* /Pages/OperatingModel/OperatingModelEntityPage.razor.rz.scp.css */
.om-comingsoon[b-1qe8pz54ni] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 240px;
    border-radius: var(--radius-4);
    border: 1px dashed light-dark(rgba(23, 31, 38, .14), rgba(255, 255, 255, .12));
    background: light-dark(rgba(255, 255, 255, .5), rgba(8, 13, 19, .4));
    color: light-dark(var(--gray-600), var(--gray-300));
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .03em;
}

.om-comingsoon[b-1qe8pz54ni]  i {
    color: light-dark(var(--primary-700), var(--primary-200));
}

/* The Plexus scene frame moved to PlexusView.razor.css when the slug's body was extracted into its
   own view: the sizing is that view's requirement, and a scoped rule here could no longer reach it. */
/* /Pages/OperatingModel/OperatingModelHome.razor.rz.scp.css */
.om-overview[b-tp7ouhp7l6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.om-phone-list[b-tp7ouhp7l6] {
    display: none;
}

@media (max-width: 640px), (max-height: 480px) {
    .om-overview[b-tp7ouhp7l6] {
        display: none;
    }

    .om-phone-list[b-tp7ouhp7l6] {
        display: block;
    }
}

.om-ovcard[b-tp7ouhp7l6] {
    /* canonical .glass corner radii — the material reads these for its border/highlight geometry */
    --radius-top-left: var(--radius-4);
    --radius-top-right: var(--radius-4);
    --radius-bottom-right: var(--radius-4);
    --radius-bottom-left: var(--radius-4);
    --radius: var(--radius-4);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-4);
    text-decoration: none;
    border: 1px solid light-dark(rgba(23, 31, 38, .10), rgba(255, 255, 255, .07));
    transition: border-color .14s ease, transform .1s ease;
}

.om-ovcard:hover[b-tp7ouhp7l6] {
    border-color: light-dark(rgba(132, 158, 0, .4), rgba(212, 255, 0, .35));
}

.om-ovcard:active[b-tp7ouhp7l6] {
    transform: translateY(1px);
}

/* Keyboard focus ring — the house standard (outline + offset in the accent), matching the focus
   affordance used across the design-system components. */
.om-ovcard:focus-visible[b-tp7ouhp7l6] {
    outline: 2px solid var(--primary-200);
    outline-offset: 2px;
}

.om-ovcard .ov-ic[b-tp7ouhp7l6] {
    width: var(--content-size-2);
    height: var(--content-size-2);
    border-radius: 11px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-accent);
    background: light-dark(rgba(132, 158, 0, .10), rgba(212, 255, 0, .08));
}

.om-ovcard .ov-ic .ov-ic-svg[b-tp7ouhp7l6] {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--ico-url) center / contain no-repeat;
    mask: var(--ico-url) center / contain no-repeat;
}

.om-ovcard .ov-body[b-tp7ouhp7l6] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.om-ovcard .ov-name[b-tp7ouhp7l6] {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: light-dark(var(--gray-900), var(--text1, var(--surface-text1)));
}

.om-ovcard .ov-sub[b-tp7ouhp7l6] {
    font-size: 12px;
    line-height: 1.4;
    color: light-dark(var(--gray-600), var(--gray-300));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The per-entity count is now the canonical Badge component (BadgeModel, ShowDot=false) rendered in
   the markup — the bespoke .ov-cnt pill was removed (doc-18 reuse map: count pill → Badge). */
/* /Pages/OperatingModel/OperatingModelLayout.razor.rz.scp.css */
.om-content[b-mxl7rc8749] {
    line-height: 1.5;
    min-width: 0;
    padding-bottom: 40px;
}
/* /Pages/OperatingModel/OperatingModelLedger.razor.rz.scp.css */

.fd-ledger[b-bb2ihhorzk] {
    /* canonical .glass corner radii — the material reads these for its border/highlight geometry */
    --radius-top-left: var(--radius-5);
    --radius-top-right: var(--radius-5);
    --radius-bottom-right: var(--radius-5);
    --radius-bottom-left: var(--radius-5);
    /* page-unique ledger dimensions with no design-system token home — declared once, referenced via var() */
    --fdl-padx: 24px; /* ledger horizontal padding */
    --fdl-spine-w: 48px; /* spine (sequence number) grid column */
    --fdl-row-pad: 26px; /* dimension row vertical padding */
    --fdl-row-gap: 22px; /* inter-column gap within a row */
    --fdl-id-gap: 14px; /* gap between the icon tile and the name */
    --fdl-num: 28px; /* sequence-number circle diameter */
    --fdl-tile-radius: 11px; /* lettered-fallback tile corner */
    --fdl-glyph: var(--content-size-2); /* bare dimension glyph — fills the 40px identity slot */
    --fdl-spine-start: 18px; /* first row: connector starts at the number centre */
    --fdl-subrow-pad: 13px; /* category sub-row vertical padding — half the dimension row's */
    --fdl-sub-indent: calc(var(--content-size-2) + var(--fdl-id-gap)); /* aligns a sub-row name under its parent's */
    --fdl-subglyph: var(--content-size-1); /* category glyph — a rung under the dimension's 40px slot */
    /* What is left of the name-alignment indent once the category's own glyph occupies part of it: the
       name column is unchanged from when the sub-row had no icon, so the ledger still reads as columns. */
    --fdl-sub-icon-indent: calc(var(--fdl-sub-indent) - var(--fdl-subglyph) - var(--fdl-id-gap));
    --fdl-dot: 7px; /* category marker on the spine */
    --fdl-dot-top: 8px; /* lands the dot on the sub-row name's optical centre */
    /* bespoke display typography with no role match (specific size/weight), declared once + referenced */
    --fdl-monogram: 17px; /* single-letter fallback monogram in the accent tile (display glyph) */
    display: flex;
    flex-direction: column;
    /*  padding: var(--space-1) var(--fdl-padx);*/
    padding: 0;
    border-radius: var(--radius-3) var(--radius-3) 0 0;
    background-color: light-dark(#ffffff,var(--gray-900));
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.fd-empty[b-bb2ihhorzk] {
    padding: var(--space-6) var(--fdl-padx);
    text-align: center;
    letter-spacing: 0.08em;
    color: var(--text-muted, var(--surface-text-muted));
}

.fd-group[b-bb2ihhorzk] {
    border-top: 1px solid light-dark(rgba(23, 31, 38, .08), rgba(255, 255, 255, .07));
}

    .fd-group:first-child[b-bb2ihhorzk] {
        border-top: 0;
    }

.fd-row-bg[b-bb2ihhorzk] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index:-1;
    left: calc(var(--fdl-row-pad) * -1);
    right: calc(var(--fdl-row-pad) * -1);
  
}

.fd-row[b-bb2ihhorzk] {
    position: relative;
    /* grid track sizes are page-unique ledger column layout (doc-18 §4 grid-placement exemption) */
    display: grid;
    grid-template-columns: var(--fdl-spine-w) minmax(180px, 300px) minmax(260px, 1fr);
    gap: var(--fdl-row-gap);
    align-items: start;
    padding-block: var(--fdl-row-pad) ;
    padding-inline: var(--space-2);
    position: relative;
}
@media (max-width: 640px), (max-height: 480px) {
    .fd-row[b-bb2ihhorzk] {
        padding-inline: var(--space-3);
        border-radius:0;
    }
}
    .fd-row[b-bb2ihhorzk]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--fdl-spine-w) / 2);
        width: 1px;
        background: light-dark(rgba(23, 31, 38, .1), rgba(255, 255, 255, .08));
        transform: translateX(-50%);
    }

.fd-group:first-child .fd-row:first-child[b-bb2ihhorzk]::before {
    top: calc(var(--fdl-row-pad) + var(--fdl-spine-start));
}

/* A row's box starts INSIDE its group's border, so the group divider would leave a 1px break in the
   connector at every dimension boundary. Bridge it: the timeline is one line down the whole ledger. */
.fd-group:not(:first-child) .fd-row:first-child[b-bb2ihhorzk]::before {
    top: -1px;
}

.fd-group:last-child .fd-row:last-child[b-bb2ihhorzk]::before {
    bottom: var(--fdl-subrow-pad);
}

.fd-spine[b-bb2ihhorzk] {
    display: flex;
    justify-content: center;
    padding-top: var(--space-1);
    position: relative;
}

.fd-num[b-bb2ihhorzk] {
    color: var(--text-muted, var(--surface-text-muted));
    width: var(--fdl-num);
    height: var(--fdl-num);
    border-radius: var(--radius-pill);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: light-dark(rgba(250, 248, 243, 1), rgba(12, 18, 26, .9));
    border: 1px solid light-dark(rgba(23, 31, 38, .14), rgba(255, 255, 255, .1));
    position: relative;
    z-index: 1;
}

.fd-id[b-bb2ihhorzk] {
    display: flex;
    align-items: flex-start;
    gap: var(--fdl-id-gap);
    padding-top: var(--space-1);
}

.fd-group[b-bb2ihhorzk] {
    --fd-accent: var(--dim-500, var(--primary-200));
}

.fd-glyph[b-bb2ihhorzk]::before {
    content: "";
    width: var(--fdl-glyph);
    height: var(--fdl-glyph);
    background: currentColor;
    -webkit-mask: var(--icon-url, var(--func-icon-url)) center / contain no-repeat;
    mask: var(--icon-url, var(--func-icon-url)) center / contain no-repeat;
}

.fd-bigicon[b-bb2ihhorzk] {
    width: var(--content-size-2); /* 40px */
    height: var(--content-size-2);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dim-500, var(--text1, var(--surface-text1)));
}

    .fd-bigicon.fd-tile[b-bb2ihhorzk] {
        background: var(--fd-accent, var(--primary-200));
        border-radius: var(--fdl-tile-radius);
        color: var(--gray-900);
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: var(--fdl-monogram);
    }

.fd-name[b-bb2ihhorzk] {
    color: var(--surface-text1);
    margin: 0 0 var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.1;
}

.fd-test[b-bb2ihhorzk] {
    display: block;
    color: var(--text-muted, var(--surface-text-muted));
    letter-spacing: 0.02em;
}

.fd-body[b-bb2ihhorzk] {
    min-width: 0;
}

.fd-def[b-bb2ihhorzk] {
    color: var(--text1, var(--surface-text1));
    margin: 0;
    border-left: 2px solid var(--fd-accent, var(--primary-200));
    padding-left: var(--space-3);
}

/* state tag + mono meta line ("Active" · "N categories · N node types") */
.fd-meta[b-bb2ihhorzk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.meta-mono[b-bb2ihhorzk] {
    color: var(--text-muted, var(--surface-text-muted));
    letter-spacing: 0.02em;
}

.fd-detail[b-bb2ihhorzk] {
    position: relative;
    margin-left: var(--fdl-spine-w);
    border-top: 1px solid light-dark(rgba(23, 31, 38, .045), rgba(255, 255, 255, .04));
}

    .fd-detail[b-bb2ihhorzk]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--fdl-spine-w) / -2);
        width: 1px;
        background: light-dark(rgba(23, 31, 38, .1), rgba(255, 255, 255, .08));
        transform: translateX(-50%);
    }

/* A category's panel starts from the sub-row's already-indented name column, matching the indent the
   sub-row itself carries so the panel stays aligned with the category that owns it. */
.fd-subdetail[b-bb2ihhorzk] {
    margin-left: calc(var(--fdl-spine-w) + var(--fdl-sub-indent));
}

    /* Same absolute position for the connector, expressed from a left edge that moved right by the
       sub-indent — so the line stays on the ledger's single spine axis at every nesting level. */
    .fd-subdetail[b-bb2ihhorzk]::before {
        left: calc(var(--fdl-spine-w) / -2 - var(--fdl-sub-indent));
    }

.fd-subrow[b-bb2ihhorzk] {
    padding-top: var(--fdl-subrow-pad);
    padding-bottom: var(--fdl-subrow-pad);
    border-top: 1px solid light-dark(rgba(23, 31, 38, .045), rgba(255, 255, 255, .04));
}

    .fd-subrow .fd-id[b-bb2ihhorzk] {
        padding-left: var(--fdl-sub-icon-indent);
    }

    .fd-subrow .fd-bigicon[b-bb2ihhorzk] {
        width: var(--fdl-subglyph);
        height: var(--fdl-subglyph);
        --fdl-glyph: var(--fdl-subglyph); /* read by .fd-glyph::before for the mask box */
    }

    /* The empty-state row has no glyph to occupy the slot, so it keeps the full indent and stays aligned
       with the category names it stands in for. */
    .fd-subrow-empty .fd-id[b-bb2ihhorzk] {
        padding-left: var(--fdl-sub-indent);
    }

    .fd-subrow .fd-spine[b-bb2ihhorzk] {
        padding-top: var(--fdl-dot-top);
    }

.fd-dot[b-bb2ihhorzk] {
    width: var(--fdl-dot);
    height: var(--fdl-dot);
    border-radius: var(--radius-pill);
    background: var(--surface-text-accent);
    flex: none;
    position: relative;
    z-index: 1;
}

.fd-subrow .fd-spine[b-bb2ihhorzk]::after {
    content: "";
    position: absolute;
    top: calc(var(--fdl-dot-top) + var(--fdl-dot) / 2);
    left: 50%;
    right: 0;
    height: 1px;
    background: light-dark(rgba(23, 31, 38, .1), rgba(255, 255, 255, .08));
}

/* .fd-subname carried only the size/weight step down from the dimension name; the markup now composes
   .role-row-title-sm for exactly that, so the class has no declarations left and is gone. */

.fd-subrow .fd-def[b-bb2ihhorzk] {
    border-left-width: 1px;
    border-left-color: light-dark(rgba(23, 31, 38, .16), rgba(255, 255, 255, .13));
    padding-left: var(--space-2);
}

.fd-subrow .fd-meta[b-bb2ihhorzk] {
    margin-top: var(--space-1);
}

.fd-subrow-empty .fd-id[b-bb2ihhorzk] {
    letter-spacing: .04em;
    color: var(--text-muted, var(--surface-text-muted));
}

@media (max-width: 640px), (max-height: 480px) {
    /* The spine goes: its number, dots and rail cost a fixed track of a 384px screen and carry no
       information the row's own content does not. */
    .fd-row[b-bb2ihhorzk] {
        grid-template-columns: 1fr; /* page-unique responsive collapse */
        gap: var(--space-3);
    }

    .fd-spine[b-bb2ihhorzk] {
        display: none;
    }

    .fd-row[b-bb2ihhorzk]::before {
        content: none;
    }

    .fd-id[b-bb2ihhorzk] {
        grid-column: 1;
    }

    .fd-body[b-bb2ihhorzk] {
        grid-column: 1;
    }

    .fd-subrow .fd-id[b-bb2ihhorzk] {
        padding-left: 0;
    }
    .fd-ledger[b-bb2ihhorzk] {
    border-radius:0;
    
    }
}
/* /Pages/OperatingModel/OperatingModelPageHeader.razor.rz.scp.css */
.om-pagehead[b-q12i6reijt] {
    /* canonical .glass corner radii — the material reads these for its border/highlight geometry */
    --radius-top-left: var(--radius-5);
    --radius-top-right: var(--radius-5);
    --radius-bottom-right: var(--radius-5);
    --radius-bottom-left: var(--radius-5);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0 46px 0;
    padding: 0px 28px;
    border-left: solid 4px var(--text-accent);
    border-radius: 0;
    /*    border: 1px solid light-dark(rgba(23, 31, 38, .10), rgba(255, 255, 255, .07));*/
    /*  box-shadow: 0 10px 30px -12px light-dark(rgba(23, 31, 38, .14), transparent);*/
}

.ph-l[b-q12i6reijt] {
    min-width: 0;
}
@media (max-width: 640px), (max-height: 480px) {
    .om-pagehead[b-q12i6reijt] {
        padding: 0 28px;
        margin-inline: var(--gutter);
    }
}
/* The trail sits above the header card, matching the node page. Only placement is local — the trail's
   own type, separators and active-crumb ink belong to the design-system `.crumbs` block, which is the
   point of using the component instead of the hand-written copy that used to live in the eyebrow. */
.om-crumbs[b-q12i6reijt] {
    margin: 24px 0 0 0;
    padding: 0 28px;
}

@media (max-width: 640px), (max-height: 480px) {
    .om-crumbs[b-q12i6reijt] {
        margin-inline: var(--gutter);
        padding: 0 28px;
    }
}

/* The card keeps its own 24px top margin for the index page, which renders no trail. Where a trail
   IS rendered, that margin would stack under the one above and open a gap between two things that
   belong together, so the sibling selector closes it. */
.om-crumbs + .om-pagehead[b-q12i6reijt] {
    margin-top: var(--space-2);
}

.ph-l[b-q12i6reijt]  .page-hero-title {
    color: light-dark(var(--gray-900), var(--text1, var(--surface-text1)));
}

.om-sub[b-q12i6reijt] {
    font-size: 0.875rem;   /* 14px · cite */
    line-height: 1.55;
    color: light-dark(var(--gray-700), var(--gray-100));
    max-width: 70ch;
    margin: 0;
}

.om-sub code[b-q12i6reijt] {
    font-family: var(--font-mono);
    font-size: 12px;
    background: light-dark(rgba(7, 112, 217, .08), rgba(255, 255, 255, .07));
    padding: 1px 6px;
    border-radius: var(--radius-1);
    color: light-dark(var(--secondary-700), var(--primary-200));
}

.ph-r[b-q12i6reijt] {
    flex: none;
}
/* /Pages/OperatingModel/OperatingModelRowDetail.razor.rz.scp.css */
/* Expandable-ROW detail — Description on the left, the four usage-guideline cards on the right.
   Theme-aware via light-dark().

   TYPOGRAPHY IS NOT DECLARED HERE, AND NEITHER IS A DELTA FROM IT (NOD-594). Every text concept
   composes a named role in the MARKUP — .role-label for all five peer labels, .role-meta for all
   five prose blocks. The two deltas this file used to carry are gone with the roles that needed
   them: the card header's `font-weight: 600` existed to lift .role-caption's 400 above the body it
   headed, and .role-label is uppercase with 0.08em tracking, so the lift is in the role. What
   remains below is LAYOUT plus the eyebrow's and the cards' status COLOUR, each written against a
   canonical token.

   Status tints (how/when = success, ex = accent, avoid = danger) come from the semantic
   --color-success / --color-danger / --text-accent tokens (Palettes/States/status.css). The
   hairline follows the same construction as the canonical drawer's --drawer-line: a light-dark()
   pair off the gray ramp, never a literal rgba. The drawer's own variable is not reachable here —
   it is declared on .drawer, and this panel is inline in a row. */
.dg-detail-inner[b-9w2fw1z8tx] {
    --dd-line: light-dark(var(--gray-200), var(--gray-500-op-06));
    --dd-ink-success: light-dark(color-mix(in srgb, var(--color-success) 65%, var(--gray-900)), var(--color-success));
    --dd-ink-danger: light-dark(var(--color-danger), color-mix(in srgb, var(--color-danger) 55%, var(--secondary-50)));
    display: grid;
    grid-template-columns: minmax(var(--content-size-6), 1fr) 1.7fr;
    gap: var(--space-4);
    padding: var(--space-4);
    animation: ddIn-b-9w2fw1z8tx .22s ease;
}

.dg-detail-inner.desc-only[b-9w2fw1z8tx] {
    grid-template-columns: 1fr;
}

.dg-detail-inner.desc-only .dd-desc[b-9w2fw1z8tx] {
    border-right: 0;
    padding-right: 0;
}

@keyframes ddIn-b-9w2fw1z8tx {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: none; }
}

/* Accessibility (PRODUCT.md §7 AA · WCAG 2.3.3): honour a reduced-motion preference by dropping the
   row-reveal animation — the detail still appears, just without the translate/fade. */
@media (prefers-reduced-motion: reduce) {
    .dg-detail-inner[b-9w2fw1z8tx] {
        animation: none;
    }
}

/* Layout + the eyebrow's accent colour. Family / size / tracking / case come from .role-label. */
.dd-eyebrow[b-9w2fw1z8tx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-accent);
    margin-bottom: var(--space-3);
}

.dd-desc[b-9w2fw1z8tx] {
    border-right: var(--size-hairline) solid var(--dd-line);
    padding-right: var(--space-4);
}

/* Type comes from .role-meta — the design system's role for descriptions / secondary text. */
.dd-desc p[b-9w2fw1z8tx] {
    margin: 0;
    text-wrap: pretty;
}

.dd-cards[b-9w2fw1z8tx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.dd-card[b-9w2fw1z8tx] {
    border: var(--size-hairline) solid var(--dd-line);
    border-radius: var(--radius-3);
    padding: var(--space-3);
    background: light-dark(color-mix(in srgb, var(--gray-50) 60%, transparent), color-mix(in srgb, var(--gray-100) 3%, transparent));
}

/* Layout only. No base colour: every .dd-card-h in the markup carries a status class
   (how/when/ex/avoid) whose colour rule below always wins. */
.dd-card-h[b-9w2fw1z8tx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* Type comes from .role-meta. */
.dd-card p[b-9w2fw1z8tx] {
    margin: 0;
    text-wrap: pretty;
}

.dd-card.how[b-9w2fw1z8tx],
.dd-card.when[b-9w2fw1z8tx] {
    border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}

.dd-card.how .dd-card-h[b-9w2fw1z8tx],
.dd-card.when .dd-card-h[b-9w2fw1z8tx] {
    color: var(--dd-ink-success);
}

.dd-card.ex[b-9w2fw1z8tx] {
    border-color: color-mix(in srgb, var(--primary-200) 20%, transparent);
}

.dd-card.ex .dd-card-h[b-9w2fw1z8tx] {
    color: var(--text-accent);
}

.dd-card.avoid[b-9w2fw1z8tx] {
    border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.dd-card.avoid .dd-card-h[b-9w2fw1z8tx] {
    color: var(--dd-ink-danger);
}

@media (max-width: 900px) {
    .dg-detail-inner[b-9w2fw1z8tx] {
        grid-template-columns: 1fr;
    }

    .dd-desc[b-9w2fw1z8tx] {
        border-right: 0;
        border-bottom: var(--size-hairline) solid var(--dd-line);
        padding-right: 0;
        padding-bottom: var(--space-4);
    }

    .dd-cards[b-9w2fw1z8tx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px), (max-height: 480px) {
    /* Without the boxes the gap is the only thing left holding the four apart, so it takes the
       rung the padding used to add. */
    .dd-cards[b-9w2fw1z8tx] {
        gap: var(--space-4);
    }

    .dd-card[b-9w2fw1z8tx] {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: none;
    }
}
/* /Pages/OperatingModel/OperatingModelTable.razor.rz.scp.css */
@media (max-width: 640px), (max-height: 480px) {
    .om-table[b-yfkw2qoj68]  .dg thead:has(th.name) th:not(.name),
    .om-table[b-yfkw2qoj68]  .dg tbody:has(td.name) tr:not(.dg-grouprow) td:not(.name) {
        display: none;
    }

    .om-table[b-yfkw2qoj68]  .dg thead:not(:has(th.name)) th:not(:first-child),
    .om-table[b-yfkw2qoj68]  .dg tbody:not(:has(td.name)) tr:not(.dg-grouprow) td:not(:first-child) {
        display: none;
    }
}
/* /Pages/OperatingModel/OrganizationPlaneView.razor.rz.scp.css */
.plane-state[b-daj6ebel1g] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted, var(--surface-text-muted));
}
/* /Pages/OperatingModel/OrthogonalMatrixView.razor.rz.scp.css */

.mxv-host[b-vi0qt6nkbl] {
    display: flex;
    flex-direction: column;
}

.mxv-loading[b-vi0qt6nkbl],
.mxv-empty[b-vi0qt6nkbl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted, var(--surface-text-muted));
}
/* /Pages/OperatingModel/PlexusView.razor.rz.scp.css */
.plexus[b-9w0q2nm6f0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.plexus.is-fs[b-9w0q2nm6f0] {
    position: fixed;
    inset: 0;
    z-index: 60;
    padding: 0;
    gap: 0;
    background: var(--surface-paper);
}

.plexus.is-fs .plexus-scene[b-9w0q2nm6f0] {
    /* Overrides the 78vh cap AND its min-height floor: inside the overlay the scene takes the whole
       viewport, and a floor taller than that would push it off the bottom edge. */
    height: auto;
    min-height: 0;
    flex: 1;
    border: none;
    border-radius: 0;
}

.plexus.is-fs .plexus-toolbar[b-9w0q2nm6f0] {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: flex-end;
    z-index: 1;
    padding: var(--padding-block-3) var(--padding-inline-4);
    pointer-events: none;
}

.plexus.is-fs .plexus-toolbar[b-9w0q2nm6f0]  > * {
    pointer-events: auto;
}

.plexus-toolbar[b-9w0q2nm6f0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Typography (family, size, colour) comes from the mono-xs role applied in the markup. */
.plexus-tally[b-9w0q2nm6f0] {
    white-space: nowrap;
}

.plexus-scene[b-9w0q2nm6f0] {
    --node-scale: 0.6;

    --node-width: max-content;
    --node-height: max-content;
}

.plexus-scene[b-9w0q2nm6f0]  .background-layer {
    background-image: var(--plexus-backdrop);
    background-size: cover;
}

.plexus-scene[b-9w0q2nm6f0] {
    position: relative;
    height: 78vh;
    /* The floor the frame never drops below on short viewports. The rule this replaced hand-coded
       520px; snapped to the nearest --content-size rung, rounding UP because it is a minimum. */
    min-height: var(--content-size-8);
    border-radius: var(--radius-4);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--surface-text1) 12%, transparent);
}

.plexus-head[b-9w0q2nm6f0] {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    max-height: calc(100% - var(--space-5));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    z-index: 1;
    pointer-events: none;
}

    .plexus-head[b-9w0q2nm6f0]  > * {
        pointer-events: auto;
    }

/* The panel's own slot inside the stack: it takes the height the heading leaves, and scrolls within
   it rather than pushing the stack past the frame. */
.plexus-filter[b-9w0q2nm6f0] {
    display: flex;
    min-height: 0;
    pointer-events: none;
}

    .plexus-filter[b-9w0q2nm6f0]  > * {
        pointer-events: auto;
    }

/* Loading / empty states. An empty scene must read as a stated outcome — a bare frame is
   indistinguishable from a failed render. */
.plexus-state[b-9w0q2nm6f0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-block-5) var(--padding-inline-5);
    color: var(--text2, var(--surface-text2));
    text-align: center;
}
/* /Pages/SearchResults.razor.rz.scp.css */
.srp[b-m1ap5j0di7] {
    --ink: var(--surface-text1);
    --ink-faint: light-dark(var(--gray-500), var(--gray-400));
    /* The results page reads at a roomier density than the dropdown, which is tight on purpose so
       more hits fit without scrolling. The row honours whatever the host sets (SearchResultRow.razor.css). */
    --srr-pad-y: var(--space-3);
    --srr-pad-x: var(--space-4);
    --srr-gap: var(--space-4);
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
}

@media (max-width: 640px), (max-height: 480px) {
    .srp[b-m1ap5j0di7] {
        padding: var(--space-4) 0 var(--space-5);
        --srr-pad-x: var(--space-2);
        --srr-gap: var(--space-3);
    }

    .srp-panel[b-m1ap5j0di7] {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Between rows only — no rule above the first or below the last, which is what a frame would
       have drawn and what makes a list look boxed rather than continuous. */
    .srp-list[b-m1ap5j0di7]  .srr + .srr {
        border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
        border-radius:0;
    }
}

.srp-head[b-m1ap5j0di7] {
    margin-bottom: var(--space-4);
}

/* The box keeps the page's rhythm rather than the nav's: it is content here, not chrome. */
.srp-box[b-m1ap5j0di7] {
    margin-bottom: var(--space-5);
}

/* Ink only — type and spacing belong to PageHero and the heading role. The rule that stood above this
   one styled `.srp-eyebrow`, the hand-drawn overline this page used to put in the hero's eyebrow slot;
   PageHero draws the identity band itself now, from the same Localizer["PageTitle"] this page was
   already passing as Identity.Subtitle, so both the markup and its rule are gone. */
.srp-head[b-m1ap5j0di7]  h1 {
    color: var(--ink);
}

.srp-count[b-m1ap5j0di7] {
    color: var(--ink-faint);
    line-height: 1.4;
}

.srp-panel[b-m1ap5j0di7] {
    border-radius: var(--radius-4);
    padding: var(--space-3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -24px color-mix(in srgb, var(--gray-900) 55%, transparent);
}

.srp-list[b-m1ap5j0di7] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* line-height declared because the global `html { line-height: 0 }` collapses anything that does
   not — the empty-state message would render and paint nothing. */
.srp-empty[b-m1ap5j0di7] {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--ink-faint);
    line-height: 1.5;
}

.srp-spin[b-m1ap5j0di7] {
    display: inline-block;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    border: 2px solid color-mix(in srgb, var(--primary-200) 30%, transparent);
    border-top-color: var(--primary-200);
    border-radius: 50%;
    animation: srp-spin-b-m1ap5j0di7 .7s linear infinite;
}

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