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

/* /Common/Components/ScopePicker.razor.rz.scp.css */
/* Cards flow in a wrapping deck: compact categories sit side by side and wrap; large ones break
   to their own full-width row (see .scope-card--wide). */
.scope-deck[b-shgk9977nv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacingVerticalL, 16px) var(--spacingHorizontalL, 16px);
}

/* The card itself is the flex item. FluentCard renders a web component whose root does NOT carry
   this component's CSS-isolation attribute, so card-level rules must reach it through ::deep —
   a plain `.scope-card` selector (rewritten to `.scope-card[b-xxx]`) would never match it.
   A compact card takes a flexible, readable share so several fit on a row and wrap as space runs
   out; the brand-purple left stripe echoes the page's omen-surface motif (FluentUI tokens, so the
   cards track the active light/dark/high-contrast theme). */
.scope-deck[b-shgk9977nv]  .scope-card {
    /* Basis of "half the row minus half the column gap" caps compact cards at two columns: two fill
       a row exactly, a third always wraps — wide enough that the switch rows don't compress. */
    flex: 1 1 calc(50% - var(--spacingHorizontalL, 16px) / 2);
    min-width: 0;
    border-left: var(--strokeWidthThicker, 3px) solid var(--colorBrandStroke1);
}

/* Channel, Moderation, and User carry many scopes — they always claim a full-width row. */
.scope-deck[b-shgk9977nv]  .scope-card--wide {
    flex-basis: 100%;
}

/* On phones and small tablets the compact cards stack one-per-row for legibility, keyed off
   FluentUI's body[data-media] breakpoints (kept in sync by FluentGrid) rather than viewport units. */
body[data-media~="xs"] .scope-deck[b-shgk9977nv]  .scope-card,
body[data-media~="sm"] .scope-deck[b-shgk9977nv]  .scope-card {
    flex-basis: 100%;
}

/* Title and the "available" count share one baseline-aligned line, divided from the scope grid. */
.scope-card-header[b-shgk9977nv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacingHorizontalS, 8px);
    padding-bottom: var(--spacingVerticalS, 8px);
    margin-bottom: var(--spacingVerticalXS, 4px);
    border-bottom: var(--strokeWidthThin, 1px) solid var(--colorNeutralStroke2);
}

/* Stepped up the type ramp (Base400 -> Base600) so each category reads as a proper section header.
   Size, line height, and weight all come from FluentUI's typography tokens, keeping the title on
   the library's scale rather than a one-off pixel value. */
.scope-card-title[b-shgk9977nv] {
    margin: 0;
    font-size: var(--fontSizeBase600, 1.5rem);
    line-height: var(--lineHeightBase600, 2rem);
    font-weight: var(--fontWeightSemibold, 600);
    color: var(--colorNeutralForeground1);
}

/* Brand-tinted pill so the count reads as an accent rather than more grey text; the token drop
   shadow lifts it off the card header. */
.scope-count[b-shgk9977nv] {
    flex: none;
    font-size: var(--fontSizeBase200, 12px);
    line-height: var(--lineHeightBase200, 16px);
    font-weight: var(--fontWeightSemibold, 600);
    padding: var(--spacingVerticalXXS, 2px) var(--spacingHorizontalS, 8px);
    border-radius: var(--borderRadiusCircular, 9999px);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    box-shadow: var(--shadow4);
    white-space: nowrap;
}

/* A scope is a switch, an optional lock (when the app can't request it), then its info icon. */
.scope-row[b-shgk9977nv] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalSNudge, 6px);
    min-width: 0;
}

/* Read-only (non-allowed) scopes keep legible text; the warning-colored lock is the
   "unavailable" signal (its fill comes from the Color.Warning enum, i.e. the --warning token). */
.scope-lock[b-shgk9977nv] {
    flex: none;
}

/* The tooltip trigger reads as interactive even on a read-only row — a user can still hover to
   learn what a scope their app can't request would grant. Raised and shrunk to read as a
   superscript marker hanging off the scope label rather than a centered inline icon. */
.scope-info[b-shgk9977nv] {
    flex: none;
    cursor: help;
    align-self: flex-start;
    margin-top: -0.15rem;
    margin-inline-start: -0.125rem;
}
/* /Common/Components/SiteFooter.razor.rz.scp.css */
.omen-footer[b-s1ydyk0mhp] {
    margin-top: auto;
    background-color: var(--colorBrandBackground2, #411141);
    border-top: var(--strokeWidthThin, 1px) solid var(--colorNeutralStroke2, #444);
    box-shadow: 0 -4px 8px var(--colorNeutralShadowAmbient, rgba(0, 0, 0, 0.12));
    color: var(--colorNeutralForegroundOnBrand, #fff);
}

/* Full-width footer track so the three groups spread across the bar (matching the header),
   rather than bunching in a centered column on wide displays. */
.omen-footer-inner[b-s1ydyk0mhp] {
    width: 100%;
    /* Slim vertical padding so the larger logo grows into the bar instead of expanding its height. */
    padding: var(--spacingVerticalMNudge, 10px) clamp(1rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacingHorizontalL, 16px);
}

.omen-footer-brand img[b-s1ydyk0mhp] {
    height: 3.5rem;
    width: auto;
    display: block;
}

.omen-social[b-s1ydyk0mhp] {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
}

.omen-social a[b-s1ydyk0mhp] {
    color: var(--colorNeutralForegroundOnBrand, #fff);
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.85;
    transition: opacity var(--durationNormal, 0.2s) var(--curveEasyEase, ease),
                transform var(--durationNormal, 0.2s) var(--curveEasyEase, ease);
}

.omen-social a:hover[b-s1ydyk0mhp] {
    opacity: 1;
    transform: translateY(-1px);
}

.omen-social svg[b-s1ydyk0mhp] {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.omen-copy[b-s1ydyk0mhp] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-size: var(--fontSizeBase200, 12px);
    text-align: right;
}

.omen-copy a[b-s1ydyk0mhp] {
    color: var(--colorNeutralForegroundOnBrand, #fff);
}

@media (max-width: 720px) {
    .omen-footer-inner[b-s1ydyk0mhp] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .omen-copy[b-s1ydyk0mhp] {
        align-items: center;
        text-align: center;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The library sets `body { height: 100dvh; overflow: hidden }`, so the layout column owns the
   viewport. The content+footer region (.omen-scroll) is the single scroll container. */
.page[b-f6hl661osi] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: var(--colorNeutralBackground3, #1f1f1f);
}

/* Brand-tinted header, matching theomenden.com. It sits outside the scroll region, so it stays
   fixed at the top while content scrolls beneath it. */
.omen-header[b-f6hl661osi] {
    flex: 0 0 auto;
    background-color: var(--colorBrandBackground2, #411141);
    border-bottom: var(--strokeWidthThin, 1px) solid var(--colorNeutralStroke2, #444);
    box-shadow: var(--shadow8, 0 4px 8px rgba(0, 0, 0, 0.14));
    z-index: 100;
}

/* Same 1fr/auto/1fr grid as the footer: brand pinned left, nav truly centered between equal
   side columns, actions pinned right — an even spread that flex `space-between` can't give when
   the flanking groups differ in width. */
.omen-bar[b-f6hl661osi] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacingHorizontalL, 16px);
    height: 3.5rem;
    padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Page content stays on a centered, capped track so prose/forms remain readable on wide screens. */
.omen-main[b-f6hl661osi] {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

/* Let the card claim more of the page as the screen grows, driven by FluentUI's body[data-media]
   breakpoint attribute (kept in sync by the FluentGrid system) rather than viewport units — so the
   track stays fluid and rem-capped, never edge-to-edge. Rules ascend so the widest match wins. */
body[data-media~="lg"] .omen-main[b-f6hl661osi] {
    max-width: 88rem;
}

body[data-media~="xl"] .omen-main[b-f6hl661osi] {
    max-width: 110rem;
}

body[data-media~="xxl"] .omen-main[b-f6hl661osi] {
    max-width: 144rem;
}

/* Logo + title form one brand unit pinned to the left of the bar. */
.omen-brand[b-f6hl661osi] {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

/* Wraps the ThemeSwitcher (which renders a button + menu) into a single right-aligned grid cell. */
.omen-actions[b-f6hl661osi] {
    justify-self: end;
    display: inline-flex;
    align-items: center;
}

.omen-brand img[b-f6hl661osi] {
    /* Fills the fixed 3.5rem bar with a hair of breathing room — the bar height is unchanged. */
    height: 3.25rem;
    width: auto;
    display: block;
}

/* On the brand bar, text uses the on-brand foreground for contrast. */
.omen-title[b-f6hl661osi] {
    font-weight: var(--fontWeightSemibold, 600);
    font-size: var(--fontSizeBase500, 20px);
    white-space: nowrap;
    color: var(--colorNeutralForegroundOnBrand, #fff);
}

.omen-nav[b-f6hl661osi] {
    display: flex;
    gap: var(--spacingHorizontalL, 16px);
}

.omen-nav a[b-f6hl661osi] {
    color: var(--colorNeutralForegroundOnBrand, #fff);
    text-decoration: none;
    opacity: 0.9;
}

.omen-nav a:hover[b-f6hl661osi] {
    opacity: 1;
    text-decoration: underline;
}

.omen-scroll[b-f6hl661osi] {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Grows to fill the scroll region so a short page still pushes the footer to the bottom. */
.omen-content[b-f6hl661osi] {
    flex: 1 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* The error page is a single, centered card — narrower than the home grid so the message stays
   readable. All colors are FluentUI design tokens so the page tracks the active light/dark theme
   and the OS forced-colors mode. */
.error-page[b-q4wnrhnsrz] {
    display: flex;
    justify-content: center;
}

.error-page[b-q4wnrhnsrz]  .omen-error {
    max-width: 44rem;
    padding: var(--spacingVerticalXXL, 24px);
}

/* Category icon and the title/summary sit on one line on wider viewports, stacked on narrow ones. */
.error-hero[b-q4wnrhnsrz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacingVerticalL, 16px);
}

@media (min-width: 600px) {
    .error-hero[b-q4wnrhnsrz] {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
}

/* The icon's color is driven by the FluentIcon Color enum; size it up so it reads as a hero glyph. */
.error-hero[b-q4wnrhnsrz]  .error-hero__icon {
    flex: none;
    width: 3rem;
    height: 3rem;
}

.error-hero__text h1[b-q4wnrhnsrz] {
    margin: 0 0 var(--spacingVerticalXS, 4px);
    color: var(--colorNeutralForeground1);
}

.error-summary[b-q4wnrhnsrz] {
    margin: 0;
    color: var(--colorNeutralForeground2);
    font-size: 1.05rem;
}

.error-guidance[b-q4wnrhnsrz] {
    margin: var(--spacingVerticalXL, 20px) 0 0;
    color: var(--colorNeutralForeground2);
}

.error-correlation[b-q4wnrhnsrz] {
    margin-top: var(--spacingVerticalL, 16px);
}

.error-correlation code[b-q4wnrhnsrz] {
    font-family: var(--fontFamilyMonospace, monospace);
    word-break: break-all;
}

.error-actions[b-q4wnrhnsrz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacingHorizontalM, 12px);
    margin-top: var(--spacingVerticalXXL, 24px);
}

.error-dev[b-q4wnrhnsrz] {
    margin-top: var(--spacingVerticalXXL, 24px);
    border-top: var(--strokeWidthThin, 1px) solid var(--colorNeutralStroke2);
    padding-top: var(--spacingVerticalL, 16px);
}

/* Stack traces can be wide — keep them inside the card with a scrollbar rather than blowing out
   the layout, and tint them as the subtle, monospaced diagnostic text they are. */
.error-stack[b-q4wnrhnsrz] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    padding: var(--spacingVerticalM, 12px);
    border-radius: var(--borderRadiusMedium, 4px);
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground3);
    font-family: var(--fontFamilyMonospace, monospace);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Two-card hero, mirroring theomenden.com: intro+mascot, then a call-to-action. Stacks on narrow
   screens, sits side by side from 960px up. */
.home-row[b-och77v1ao3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacingVerticalXXL, 24px);
    align-items: stretch;
}

@media (min-width: 960px) {
    .home-row[b-och77v1ao3] {
        grid-template-columns: 2fr 1fr;
    }
}

.hero[b-och77v1ao3] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalXL, 20px);
}

@media (min-width: 720px) {
    .hero[b-och77v1ao3] {
        flex-direction: row;
        align-items: center;
    }
}

.hero-text h1[b-och77v1ao3] {
    margin-top: 0;
}

.hero-sub[b-och77v1ao3] {
    color: var(--colorNeutralForeground3);
}

.hero-art[b-och77v1ao3] {
    width: 100%;
    max-width: 14rem;
    height: auto;
    align-self: center;
    border-radius: var(--borderRadiusLarge, 8px);
}

.cta[b-och77v1ao3] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM, 12px);
    height: 100%;
    justify-content: center;
}

.cta h2[b-och77v1ao3] {
    margin-top: 0;
}

.cta-actions[b-och77v1ao3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacingHorizontalM, 12px);
    margin-top: var(--spacingVerticalS, 8px);
}
/* /Features/GenerateToken/Pages/GenerateUserToken.razor.rz.scp.css */
/* The two selects sit side by side on wide screens and stack on narrow ones. */
.field-row[b-otw5phsqxw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacingHorizontalL, 16px);
    margin-block: var(--spacingVerticalS, 8px) var(--spacingVerticalL, 16px);
}

/* Pull the authorize button to the trailing edge and lift it off the last scope card
   above it. Spacing/elevation come from FluentUI design tokens so they track the theme. */
.authorize-actions[b-otw5phsqxw] {
    display: flex;
    justify-content: flex-end;
    margin-block-start: var(--spacingVerticalXXL, 24px);
}

.authorize-button[b-otw5phsqxw] {
    box-shadow: var(--shadow8, 0 4px 8px rgba(0, 0, 0, 0.14));
}