@import '_content/Facton.Blazor.SharedUI/Facton.Blazor.SharedUI.zwgdaf14vu.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/AreaSwitcher.razor.rz.scp.css */
/* ******************************************************************************
 * AreaSwitcher.razor.css
 * Facton sample — AreaSwitcher scoped styles.
 *
 * Rules mirrored from the SharedUI RCL's own convention (see
 * FactonMainLayout.razor.css / PaletteSwitcher.razor.css):
 *   - Every visual VALUE must read a FluentUI design token.
 *   - No literal colors in rule property values.
 *   - .bb-modebar/.bb-modeswitch/.bb-modebar__wordmark are plain HTML authored
 *     directly in AreaSwitcher.razor, so they carry this file's scope
 *     attribute and match with plain selectors. .bb-modeswitch__btn lands on
 *     FluentAnchorButton's own rendered <fluent-anchor-button> host element (a
 *     child component's root, one hop outside this scope) and needs ::deep to reach it.
 * ******************************************************************************
 */

.bb-modebar[b-u3w8v98hxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 2.75rem;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    padding: 0 var(--spacingHorizontalXL);
}

/* Track ring + 2px gap + corner radius mirror the origin's measured values
   (border: 1px solid var(--border-strong), border-radius: var(--radius-control),
   gap: 2px) — without the border/gap the pills touched edge-to-edge with no
   visible track outline, unlike the origin's bordered "segmented control" look.
   --borderRadiusMedium (6px, per DesignTokenOverrides.razor's :root override) now
   matches the origin's 6px track radius exactly, and pairs with the pill's own
   --borderRadiusMedium (resolving to --borderRadiusSmall/4px via the
   .fct-anchor-button override below) to reproduce the origin's nested
   "track radius > pill radius" relationship (6px track, 4px pill) exactly. */
.bb-modeswitch[b-u3w8v98hxl] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    padding: var(--spacingVerticalXXS);
}

/* 1.75rem (28px) matches the origin brand-book's actual rendered pill height
   (ModeSwitch.razor / app.css .bb-modeswitch__btn, height: var(--control-h-sm)
   — measured 28px live at https://localhost:56559/), not the sibling header
   controls' medium 2.25rem — the origin pill is intentionally the smaller,
   compact "small" control size, not medium. */
[b-u3w8v98hxl] .bb-modeswitch__btn {
    height: 1.75rem;
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightMedium);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-radius: var(--borderRadiusMedium);
    padding: 0 var(--spacingHorizontalL);
    color: var(--colorNeutralForeground3);
}

[b-u3w8v98hxl] .bb-modeswitch__btn.is-active {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    /* Subtle lift matching the origin's active-pill box-shadow: shadow-sm. */
    box-shadow: var(--shadow2);
}

[b-u3w8v98hxl] .bb-modeswitch__btn.is-active:hover {
    background: var(--colorBrandBackgroundHover);
}

/* Raw HTML authored directly in AreaSwitcher.razor — no ::deep needed.
   Mirrors the origin's own top-bar wordmark (.bb-modebar__wordmark,
   DesignSystem/Showcase/wwwroot/app.css / ModeSwitch.razor): font-size
   var(--text-2xs) = 10px (fontSizeBase100 here, already 10px per
   DesignTokenOverrides.razor), font-weight var(--font-weight-bold) = 700 —
   NOT fontWeightSemibold (600), which under-weights this wordmark relative to
   the origin — and letter-spacing var(--tracking-wider) = 0.1em, which at a
   10px font size resolves to the same 1px used literally below. */
.bb-modebar__wordmark[b-u3w8v98hxl] {
    font-size: var(--fontSizeBase100);
    font-weight: var(--fontWeightBold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--colorNeutralForeground3);
}
/* /Components/Pages/BrandBook/Index.razor.rz.scp.css */
/* ******************************************************************************
 * Index.razor.css
 * Facton Sample — Brand Book "Foundation" page scoped styles.
 *
 * Rules:
 *   - Every visual VALUE must read a FluentUI design token — no literal colors here.
 *   - background-color is the only per-token value that legitimately varies per swatch,
 *     so it stays inline in Index.razor (set per @token in the @foreach loops) rather
 *     than living here; everything that is constant across all swatches (size, border,
 *     radius) lives in this scoped stylesheet instead.
 *   - Section/row spacing between the page's stacked FluentGrid/FluentCard blocks is NOT
 *     here — it's on FluentStack directly in Index.razor, which sets
 *     VerticalGap="var(--spacingVertical*)" inline (FluentStack's VerticalGap/HorizontalGap
 *     accept a literal CSS value, e.g. a var() reference, not just a raw pixel number), staying
 *     bound to the live design token instead of a hard-coded pixel number.
 * ******************************************************************************
 */

.fct-token-chip[b-d89pur5c4q] {
    height: 56px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.fct-spacing-bar[b-d89pur5c4q] {
    height: 12px;
    background-color: var(--colorBrandBackground);
    border-radius: var(--borderRadiusSmall);
}

.fct-spacing-bar-vertical[b-d89pur5c4q] {
    width: 12px;
    background-color: var(--colorBrandBackground);
    border-radius: var(--borderRadiusSmall);
}

.fct-radius-swatch[b-d89pur5c4q] {
    width: 72px;
    height: 72px;
    background-color: var(--colorNeutralBackground3);
    border: 1px solid var(--colorBrandBackground);
}
/* /Components/SampleMainLayout.razor.rz.scp.css */
/* ******************************************************************************
 * SampleMainLayout.razor.css
 * Facton sample — SampleMainLayout scoped styles.
 *
 * Every visual value reads a FluentUI design token where one applies; the
 * declarations below are pure layout math (no color/typography), so none are
 * literal-color violations.
 * ******************************************************************************
 */

/* ─── Viewport-height fix for FluentLayout below AreaSwitcher ───────────────
 * <AreaSwitcher> (a fixed 2.75rem/44px bar, see AreaSwitcher.razor.css) renders
 * as a SIBLING above <AppShell> here, not inside it — so AppShell's own
 * FluentLayout has no idea that bar exists. `<FluentLayout>` sets its OWN
 * INLINE `style="height: var(--layout-height); --layout-height: 100dvh; ..."`
 * directly on the element it renders (confirmed live via DOM inspection — not
 * a stylesheet rule at all), always the full dynamic viewport height
 * regardless of anything rendered above it — and its internal header/content/
 * footer grid ROWS are sized from that same `--layout-height` custom property
 * too (`--layout-body-height: calc(var(--layout-height) - var(--layout-header-height)
 * - var(--layout-footer-height))`, also inline on the same element). With
 * AreaSwitcher ALSO taking up space above it in normal flow, `AreaSwitcher
 * (44px) + FluentLayout (100dvh)` together are 44px taller than the viewport
 * itself. `<body>` has FluentUI's own `overflow: hidden`, so that excess 44px
 * isn't a visible page scrollbar — it is a silent CLIP: the bottom 44px of
 * FluentLayout (the tail end of AppShell's own `.fct-app-shell__main` scroll
 * area) sits below the visible window and is unreachable no matter how far
 * that inner container is scrolled (confirmed live via computed rects —
 * reported as "the bottom is skipped when I scroll all the way down").
 *
 * The fix overrides the `--layout-height` CUSTOM PROPERTY itself, not the
 * `height` property directly. Custom properties resolve lazily wherever
 * `var(--layout-height)` is read — including inside `--layout-body-height`'s
 * own `calc()`, on the SAME element — so redirecting just this one property
 * automatically corrects both the outer box height AND its internal grid rows
 * together (confirmed live: overriding `height` instead, even with
 * `!important`, only shrinks the outer box while the internal grid rows keep
 * sizing themselves from the still-inline, un-overridden `--layout-height`,
 * so content is pushed out below the (now too-small) box instead of actually
 * fitting it).
 *
 * `!important` is required — an ordinary (non-`!important`) external
 * stylesheet declaration can never win over an inline `style` attribute's own
 * declaration of the same custom property, regardless of selector specificity
 * (confirmed live: without it, `--layout-height` stayed pinned to the
 * element's own inline `100dvh` and the clip persisted).
 *
 * `2.75rem` mirrors AreaSwitcher.razor.css's own `.bb-modebar { height: 2.75rem }`
 * — the two are NOT expressed via one shared variable because AreaSwitcher.razor.css
 * has no natural place to publish one for a sibling component to consume; if
 * that bar's height ever changes, this figure must change with it.
 *
 * `::deep` is required: `.fluent-layout` is rendered by AppShell's own child
 * <FluentLayout> component, so it never carries this file's scoped-CSS
 * attribute directly — only `::deep`, anchored on this wrapper div, can reach
 * it.
 * --------------------------------------------------------------------------- */
.fct-sample-shell[b-5rx42tvcdx] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.fct-sample-shell[b-5rx42tvcdx]  .fluent-layout {
    --layout-height: calc(100vh - 2.75rem) !important;
}
/* /Mockups/Pages/MockupsHubLayout.razor.rz.scp.css */
/* ******************************************************************************
 * MockupsHubLayout.razor.css
 * Facton sample — MockupsHubLayout scoped styles.
 *
 * Every visual value reads a FluentUI design token where one applies; the
 * declarations below are pure layout math (no color/typography), so none are
 * literal-color violations.
 * ******************************************************************************
 */

/* ─── Viewport-height fix for FluentLayout below AreaSwitcher ───────────────
 * <AreaSwitcher> (a fixed 2.75rem/44px bar, see AreaSwitcher.razor.css) renders
 * as a SIBLING above <AppShell> here, not inside it — so AppShell's own
 * FluentLayout has no idea that bar exists. `<FluentLayout>` sets its OWN
 * INLINE `style="height: var(--layout-height); --layout-height: 100dvh; ..."`
 * directly on the element it renders (confirmed live via DOM inspection — not
 * a stylesheet rule at all), always the full dynamic viewport height
 * regardless of anything rendered above it — and its internal header/content/
 * footer grid ROWS are sized from that same `--layout-height` custom property
 * too (`--layout-body-height: calc(var(--layout-height) - var(--layout-header-height)
 * - var(--layout-footer-height))`, also inline on the same element). With
 * AreaSwitcher ALSO taking up space above it in normal flow, `AreaSwitcher
 * (44px) + FluentLayout (100dvh)` together are 44px taller than the viewport
 * itself. `<body>` has FluentUI's own `overflow: hidden`, so that excess 44px
 * isn't a visible page scrollbar — it is a silent CLIP: the bottom 44px of
 * FluentLayout (the tail end of AppShell's own `.fct-app-shell__main` scroll
 * area) sits below the visible window and is unreachable no matter how far
 * that inner container is scrolled (confirmed live via computed rects —
 * reported as "the bottom is skipped when I scroll all the way down").
 *
 * The fix overrides the `--layout-height` CUSTOM PROPERTY itself, not the
 * `height` property directly. Custom properties resolve lazily wherever
 * `var(--layout-height)` is read — including inside `--layout-body-height`'s
 * own `calc()`, on the SAME element — so redirecting just this one property
 * automatically corrects both the outer box height AND its internal grid rows
 * together (confirmed live: overriding `height` instead, even with
 * `!important`, only shrinks the outer box while the internal grid rows keep
 * sizing themselves from the still-inline, un-overridden `--layout-height`,
 * so content is pushed out below the (now too-small) box instead of actually
 * fitting it).
 *
 * `!important` is required — an ordinary (non-`!important`) external
 * stylesheet declaration can never win over an inline `style` attribute's own
 * declaration of the same custom property, regardless of selector specificity
 * (confirmed live: without it, `--layout-height` stayed pinned to the
 * element's own inline `100dvh` and the clip persisted).
 *
 * `2.75rem` mirrors AreaSwitcher.razor.css's own `.bb-modebar { height: 2.75rem }`
 * — the two are NOT expressed via one shared variable because AreaSwitcher.razor.css
 * has no natural place to publish one for a sibling component to consume; if
 * that bar's height ever changes, this figure must change with it.
 *
 * `::deep` is required: `.fluent-layout` is rendered by AppShell's own child
 * <FluentLayout> component, so it never carries this file's scoped-CSS
 * attribute directly — only `::deep`, anchored on this wrapper div, can reach
 * it.
 * --------------------------------------------------------------------------- */
.fct-sample-shell[b-80insxvjx4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.fct-sample-shell[b-80insxvjx4]  .fluent-layout {
    --layout-height: calc(100dvh - 2.75rem) !important;
}