/* Shared by the layout and document-root overlays. Registered pages use the
   fixed backdrop so the header and routed content share one continuous surface. */

/*
 * Razor CSS isolation scopes the final simple selector in each rule. That means
 * a class passed to a child component (for example MudButton) is outside the
 * owning component's scope unless the rule crosses an explicit ::deep boundary.
 * Extracted component styles use this layout-neutral wrapper as that boundary.
 */
.portal-style-scope {
    display: contents;
}

:root,
.portal-shell {
    --portal-header-height: 78px;
    --portal-scroll-offset: calc(var(--portal-header-height) + 8px);
    --portal-content-max-width: 1480px;
    --portal-page-background: linear-gradient(180deg, #f2f9fc, #edf7fa);
    --portal-header-surface: rgba(242, 249, 252, .97);
    --portal-surface-raised: #fff;
    --portal-text: #173b50;
    --portal-text-muted: #4a7084;
    --portal-accent: #006c87;
    --portal-border: rgba(0, 124, 162, .2);
    --portal-accent-bright: #19c7ef;
    --portal-success: #168763;
    --portal-warning: #a45a00;
    --portal-danger: #c23b4a;
    --portal-surface-soft: rgba(229, 245, 250, .8);
    --portal-surface-subtle: rgba(229, 245, 250, .5);
    --portal-border-strong: rgba(0, 145, 185, .3);
    --portal-shadow-soft: 0 16px 42px rgba(26, 94, 123, .09);
    --portal-shadow-overlay: 0 24px 70px rgba(26, 94, 123, .14);
    --portal-header-shadow: 0 8px 24px rgba(26, 94, 123, .12);
    --portal-font-navigation: 'Inria Sans', 'Poppins', Helvetica, Arial, sans-serif;
    --portal-font-brand: 'Exo 2', sans-serif;
    --portal-font-descriptor: 'Montserrat', sans-serif;
}

:root[data-portal-theme="dark"],
.portal-shell[data-portal-theme="dark"] {
    --portal-page-background: linear-gradient(180deg, #06111c, #071522);
    --portal-header-surface: rgba(6, 17, 28, .97);
    --portal-surface-raised: #0b1b2a;
    --portal-text: #e5f6fb;
    --portal-text-muted: #8eb1c2;
    --portal-accent: #19c7ef;
    --portal-border: rgba(112, 204, 233, .2);
    --portal-accent-bright: #27d7ff;
    --portal-success: #36d39a;
    --portal-warning: #ffb55f;
    --portal-danger: #ff7182;
    --portal-surface-soft: rgba(19, 47, 67, .62);
    --portal-surface-subtle: rgba(19, 47, 67, .36);
    --portal-border-strong: rgba(112, 218, 247, .3);
    --portal-shadow-soft: 0 16px 42px rgba(0, 0, 0, .2);
    --portal-shadow-overlay: 0 24px 70px rgba(0, 0, 0, .32);
    --portal-header-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

:root[data-portal-surface="platform"][data-portal-theme="light"],
.portal-shell[data-portal-surface="platform"][data-portal-theme="light"] {
    --portal-page-background:
        radial-gradient(circle at 14% -5%, rgba(0, 160, 205, .11), transparent 24%),
        radial-gradient(circle at 91% 10%, rgba(54, 211, 154, .06), transparent 22%),
        linear-gradient(180deg, #f2f9fc, #edf7fa);
    --portal-header-surface: rgba(242, 249, 252, .97);
    --portal-surface-raised: #fff;
    --portal-text: #173b50;
    --portal-text-muted: #4a7084;
    --portal-accent: #006c87;
    --portal-border: rgba(0, 124, 162, .18);
    --portal-accent-bright: #00a9d8;
    --portal-success: #168763;
    --portal-warning: #a45a00;
    --portal-danger: #c23b4a;
    --portal-surface-soft: rgba(229, 245, 250, .8);
    --portal-surface-subtle: rgba(229, 245, 250, .5);
    --portal-border-strong: rgba(0, 145, 185, .28);
    --portal-shadow-soft: 0 16px 42px rgba(26, 94, 123, .09);
    --portal-shadow-overlay: 0 24px 70px rgba(26, 94, 123, .14);
}

:root[data-portal-surface="platform"][data-portal-theme="dark"],
.portal-shell[data-portal-surface="platform"][data-portal-theme="dark"] {
    --portal-page-background:
        radial-gradient(circle at 14% -5%, rgba(20, 165, 207, .15), transparent 24%),
        radial-gradient(circle at 91% 10%, rgba(54, 211, 154, .07), transparent 22%),
        linear-gradient(180deg, #06111c, #071522);
    --portal-header-surface: rgba(6, 17, 28, .97);
    --portal-surface-raised: #0b1b2a;
    --portal-text: #e5f6fb;
    --portal-text-muted: #8eb1c2;
    --portal-accent: #19c7ef;
    --portal-border: rgba(112, 204, 233, .18);
    --portal-accent-bright: #27d7ff;
    --portal-success: #36d39a;
    --portal-warning: #ffb55f;
    --portal-danger: #ff7182;
    --portal-surface-soft: rgba(19, 47, 67, .62);
    --portal-surface-subtle: rgba(19, 47, 67, .36);
    --portal-border-strong: rgba(112, 218, 247, .28);
    --portal-shadow-soft: 0 16px 42px rgba(0, 0, 0, .2);
    --portal-shadow-overlay: 0 24px 70px rgba(0, 0, 0, .32);
}

:root[data-portal-surface="ocean"][data-portal-theme="light"],
.portal-shell[data-portal-surface="ocean"][data-portal-theme="light"] {
    --portal-page-background:
        radial-gradient(circle at 78% -5%, rgba(31, 205, 244, .23), transparent 28%),
        radial-gradient(circle at 91% 73%, rgba(125, 91, 230, .08), transparent 31%),
        linear-gradient(155deg, #f9fdff, #eaf8fd 45%, #eaf5fc 73%, #f4f7ff);
    --portal-header-surface: rgba(238, 249, 253, .97);
    --portal-surface-raised: #f8fdff;
    --portal-text: #15394d;
    --portal-text-muted: #4a7084;
    --portal-accent: #006c87;
    --portal-border: rgba(0, 124, 162, .2);
    --portal-accent-bright: #00b9e8;
    --portal-success: #138967;
    --portal-warning: #a45a00;
    --portal-danger: #c23b4a;
    --portal-surface-soft: rgba(222, 245, 252, .82);
    --portal-surface-subtle: rgba(222, 245, 252, .52);
    --portal-border-strong: rgba(0, 145, 185, .3);
    --portal-shadow-soft: 0 16px 42px rgba(26, 94, 123, .11);
    --portal-shadow-overlay: 0 24px 70px rgba(26, 94, 123, .16);
}

:root[data-portal-surface="ocean"][data-portal-theme="dark"],
.portal-shell[data-portal-surface="ocean"][data-portal-theme="dark"] {
    --portal-page-background:
        radial-gradient(circle at 78% -5%, rgba(39, 215, 255, .15), transparent 28%),
        radial-gradient(circle at 91% 73%, rgba(125, 91, 230, .08), transparent 31%),
        linear-gradient(155deg, #062b40, #041f32 45%, #031422);
    --portal-header-surface: rgba(4, 31, 50, .97);
    --portal-surface-raised: #08263d;
    --portal-text: #e8f8ff;
    --portal-text-muted: #96bbce;
    --portal-accent: #27d7ff;
    --portal-border: rgba(93, 227, 255, .2);
    --portal-accent-bright: #27d7ff;
    --portal-success: #36d39a;
    --portal-warning: #ffb55f;
    --portal-danger: #ff7182;
    --portal-surface-soft: rgba(12, 55, 79, .72);
    --portal-surface-subtle: rgba(12, 55, 79, .46);
    --portal-border-strong: rgba(93, 227, 255, .32);
    --portal-shadow-soft: 0 16px 42px rgba(0, 8, 18, .24);
    --portal-shadow-overlay: 0 24px 70px rgba(0, 8, 18, .36);
}

.portal-shell {
    min-height: 100vh;
    isolation: isolate;
    color: var(--portal-text);
}

.portal-shell[data-portal-content-width="full"] {
    --portal-content-max-width: none;
}

.portal-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--portal-page-background);
}

/* Routed content covers decorative underlays. The fixed gradient stays aligned
   with the header while the old animation remains beneath the page, visible
   only if the browser exposes an uncovered overscroll area. */
.portal-page-content {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--portal-content-max-width);
    margin-inline: auto;
    min-width: 0;
    min-height: calc(100dvh - var(--portal-header-height));
    background: var(--portal-page-background);
    background-attachment: fixed;
}
.portal-page-content:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: -2px; }

/* Public marketing pages opt in for anonymous, non-embedded visits. Animate
   their shell, never the covering surface or fixed decorative underlay above.
   CSS starts on insertion (including client navigation), with no AOS startup
   delay. No fill mode leaves transforms/opacity clear after the one-time intro. */
.portal-page-intro {
    animation: portal-page-enter 200ms ease;
}

@keyframes portal-page-enter {
    from { opacity: 0; transform: translate3d(0, -100px, 0); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-page-intro { animation: none; }
}

@media (max-width: 639px) {
    :root, .portal-shell { --portal-header-height: 72px; }
}

.portal-shell[data-portal-layout-hidden="true"] {
    --portal-header-height: 0px !important;
}

.portal-shell .portal-main-content {
    padding-top: var(--portal-header-height) !important;
    scroll-padding-top: var(--portal-scroll-offset);
    /* The routed content may be centered, but its opaque page surface must
       still cover the viewport. Decorative PluginWall canvases remain beneath
       it and are revealed only by genuine browser overscroll. */
    background: var(--portal-page-background);
    background-attachment: fixed;
}

html:has(.portal-shell) {
    scroll-padding-top: var(--portal-scroll-offset);
}

/* MudBlazor renders these surfaces outside the originating page's token scope.
   The shell observer mirrors its theme onto html so detached menus and dialogs
   stay readable and coordinated without changing semantic status/action colors. */
html[data-portal-theme] :is(.mud-popover, .mud-dialog) {
    --mud-palette-surface: var(--portal-surface-raised);
    --mud-palette-text-primary: var(--portal-text);
    --mud-palette-text-secondary: var(--portal-text-muted);
    --mud-palette-lines-default: var(--portal-border);
    --mud-palette-lines-inputs: var(--portal-border);
    color: var(--portal-text);
    background-color: var(--portal-surface-raised);
    border-color: var(--portal-border);
}