/* _content/Ember.Fabric.Console.Components/Components/Shared/Icon.razor.rz.scp.css */
.fabric-icon[b-3d03hwyu7v] {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    color: inherit;
}
/* _content/Ember.Fabric.Console.Components/Components/Shared/RevealButton.razor.rz.scp.css */
/* Fabric Console — RevealButton.
   Quiet at rest, accent on hover, accent-filled while its panel is open. All
   colour through the semantic aliases. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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