/* A short page used to float its footer in the middle of the viewport. The
   public shell is a flex column and main absorbs the leftover height. Both
   selectors are code-owned classes -- the layout's own body class and
   SlotWrapperResolver's fixed wb-slot-* class -- never per-site css_classes,
   so a catalog re-sync cannot break them. The direct-child selector
   deliberately skips the Docs shell, where main sits inside
   .wb-dashboard-body: that pattern is height: 100% inside an overflow:
   hidden, 100vh shell and owns its own height model. */
.wb-public-body {
    display: flex;
    flex-direction: column;
    /* The shell states its own viewport height. WebBlocks UI's reset used to
       set min-height: 100vh on body and this rule leaned on it for browsers
       without dvh; 2.18.0 dropped that declaration -- on a display: block body
       it filled no height, while still forcing the box to the *large* mobile
       viewport, which is what made a page with nothing to scroll scroll by the
       height of retracted browser chrome. 100vh is the fallback floor, 100dvh
       the visible-viewport answer that a supporting browser applies over it. */
    min-height: 100vh;
    min-block-size: 100dvh;
}

.wb-public-body > .wb-slot-main {
    flex: 1 0 auto;
}

/* The footer slot had no chrome of its own, so it read as more page. WebBlocks
   UI's footer pattern (wb-footer-grid and friends) is layout only and carries
   no surface either -- and no renderer emits those classes, so block settings
   could not reach one. This is the default every site was hand-writing in its
   site.css. background-color, never the `background` shorthand: the shorthand
   would wipe a background image an operator set on the same element. site.css
   loads after this file at equal specificity, so an existing override wins. */
.wb-slot-footer {
    background-color: var(--wb-public-surface-strong);
    border-top: 1px solid var(--wb-public-border);
}

.wb-slot-header {
    margin-bottom: var(--wb-s6);
}

.wb-slot-header + .wb-slot-main {
    padding-top: var(--wb-s3);
}

:is(body[data-wb-public-theme], [data-wb-public-theme-preview]) {
    background: var(--wb-public-page-bg, var(--wb-bg));
    color: var(--wb-text);
    --wb-bg: var(--wb-public-page-bg);
    --wb-surface: var(--wb-public-surface);
    --wb-surface-2: var(--wb-public-surface-muted);
    --wb-surface-3: var(--wb-public-surface-strong);
    --wb-text: var(--wb-public-text);
    --wb-muted: var(--wb-public-muted);
    --wb-border: var(--wb-public-border);
    --wb-accent: var(--wb-public-accent);
    --wb-accent-hover: var(--wb-public-accent-hover);
    --wb-accent-active: var(--wb-public-accent-active);
    /* --wb-primary aliases resolve at :root, so remap them here too. */
    --wb-primary: var(--wb-public-accent);
    --wb-primary-dark: var(--wb-public-accent-hover);
    --wb-primary-soft: var(--wb-public-accent-soft);
    --wb-accent-soft: var(--wb-public-accent-soft);
    --wb-accent-softer: var(--wb-public-accent-softer);
    --wb-accent-border: var(--wb-public-accent-border);
    --wb-accent-text: var(--wb-public-accent-text);
    --wb-accent-on: var(--wb-public-accent-on);
    --wb-accent-ring: rgb(var(--wb-public-accent-ring-rgb));
    --wb-accent-ring-rgb: var(--wb-public-accent-ring-rgb);
    --wb-accent-selection: var(--wb-public-accent-selection);
    --wb-public-tone-default: var(--wb-public-text);
    --wb-public-tone-soft: var(--wb-public-tone-soft-value);
    --wb-public-tone-brand: var(--wb-public-accent);
    --wb-public-tone-accent: var(--wb-public-tone-accent-value);
    --wb-public-tone-highlight: var(--wb-public-tone-highlight-value);
    --wb-public-tone-bold: var(--wb-public-tone-bold-value);
    --wb-public-tone-quiet: var(--wb-public-muted);
    /* Feed the shipped wb-icon-tone-* axis from the public tone palette. */
    --wb-icon-tone-soft: var(--wb-public-tone-soft);
    --wb-icon-tone-brand: var(--wb-public-tone-brand);
    --wb-icon-tone-accent: var(--wb-public-tone-accent);
    --wb-icon-tone-highlight: var(--wb-public-tone-highlight);
    --wb-icon-tone-bold: var(--wb-public-tone-bold);
    --wb-icon-tone-quiet: var(--wb-public-tone-quiet);
}

body[data-wb-public-theme="canvas"],
[data-wb-public-theme-preview="canvas"] {
    --wb-public-page-bg: #f7f9fc;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #eef3f8;
    --wb-public-surface-strong: #e3eaf3;
    --wb-public-text: #172033;
    --wb-public-muted: #5e6d83;
    --wb-public-border: #d6e0ec;
    --wb-public-accent: #2563eb;
    --wb-public-accent-hover: #1d4ed8;
    --wb-public-accent-active: #1e40af;
    --wb-public-accent-soft: #dbeafe;
    --wb-public-accent-softer: #eff6ff;
    --wb-public-accent-border: #93c5fd;
    --wb-public-accent-text: #1d4ed8;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 37 99 235;
    --wb-public-accent-selection: #dbeafe;
    --wb-public-tone-soft-value: #8393a8;
    --wb-public-tone-accent-value: #0f7ea8;
    --wb-public-tone-highlight-value: #7c3aed;
    --wb-public-tone-bold-value: #172033;
}

body[data-wb-public-theme="atlas"],
[data-wb-public-theme-preview="atlas"] {
    --wb-public-page-bg: #f5f8f7;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #e8f0ee;
    --wb-public-surface-strong: #dbe7e4;
    --wb-public-text: #132720;
    --wb-public-muted: #52665f;
    --wb-public-border: #cadbd6;
    --wb-public-accent: #1f7668;
    --wb-public-accent-hover: #1a6358;
    --wb-public-accent-active: #164f47;
    --wb-public-accent-soft: #d8eee9;
    --wb-public-accent-softer: #edf8f5;
    --wb-public-accent-border: #9ccdc2;
    --wb-public-accent-text: #16584e;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 31 118 104;
    --wb-public-accent-selection: #cde8e2;
    --wb-public-tone-soft-value: #7c918a;
    --wb-public-tone-accent-value: #2b6ca3;
    --wb-public-tone-highlight-value: #9a6a16;
    --wb-public-tone-bold-value: #132720;
}

body[data-wb-public-theme="pulse"],
[data-wb-public-theme-preview="pulse"] {
    --wb-public-page-bg: #f8f9ff;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #eef2ff;
    --wb-public-surface-strong: #dfe7ff;
    --wb-public-text: #191c35;
    --wb-public-muted: #616986;
    --wb-public-border: #d7def3;
    --wb-public-accent: #3658e8;
    --wb-public-accent-hover: #2d49c5;
    --wb-public-accent-active: #263da6;
    --wb-public-accent-soft: #dde5ff;
    --wb-public-accent-softer: #f0f4ff;
    --wb-public-accent-border: #a9b8ff;
    --wb-public-accent-text: #2b44b8;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 54 88 232;
    --wb-public-accent-selection: #dce4ff;
    --wb-public-tone-soft-value: #8490b3;
    --wb-public-tone-accent-value: #d04484;
    --wb-public-tone-highlight-value: #f59e0b;
    --wb-public-tone-bold-value: #191c35;
}

body[data-wb-public-theme="prism"],
[data-wb-public-theme-preview="prism"] {
    --wb-public-page-bg: #fbf7ff;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #f3ebff;
    --wb-public-surface-strong: #e8d8ff;
    --wb-public-text: #26163d;
    --wb-public-muted: #6e6084;
    --wb-public-border: #decff0;
    --wb-public-accent: #8b3ff2;
    --wb-public-accent-hover: #7631d4;
    --wb-public-accent-active: #6428b6;
    --wb-public-accent-soft: #eadcff;
    --wb-public-accent-softer: #f6efff;
    --wb-public-accent-border: #c7a8fb;
    --wb-public-accent-text: #6428b6;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 139 63 242;
    --wb-public-accent-selection: #eadcff;
    --wb-public-tone-soft-value: #9b8aac;
    --wb-public-tone-accent-value: #e0568f;
    --wb-public-tone-highlight-value: #06a6a6;
    --wb-public-tone-bold-value: #26163d;
}

body[data-wb-public-theme="graphite"],
[data-wb-public-theme-preview="graphite"] {
    --wb-public-page-bg: #f4f7fa;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #edf2f7;
    --wb-public-surface-strong: #dde5ee;
    --wb-public-text: #17202b;
    --wb-public-muted: #607083;
    --wb-public-border: #cbd6e2;
    --wb-public-accent: #087f91;
    --wb-public-accent-hover: #066b7a;
    --wb-public-accent-active: #055866;
    --wb-public-accent-soft: #d8f3f6;
    --wb-public-accent-softer: #edfafa;
    --wb-public-accent-border: #8dd9e1;
    --wb-public-accent-text: #075f6d;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 8 127 145;
    --wb-public-accent-selection: #c8eff3;
    --wb-public-tone-soft-value: #718297;
    --wb-public-tone-accent-value: #7656c7;
    --wb-public-tone-highlight-value: #9a6700;
    --wb-public-tone-bold-value: #17202b;
}

body[data-wb-public-theme="horizon"],
[data-wb-public-theme-preview="horizon"] {
    --wb-public-page-bg: #f5fbff;
    --wb-public-surface: #ffffff;
    --wb-public-surface-muted: #e9f6fb;
    --wb-public-surface-strong: #d8eef7;
    --wb-public-text: #142735;
    --wb-public-muted: #5c7080;
    --wb-public-border: #cae0ea;
    --wb-public-accent: #0f8eb3;
    --wb-public-accent-hover: #0d7898;
    --wb-public-accent-active: #0b617b;
    --wb-public-accent-soft: #d9f2f8;
    --wb-public-accent-softer: #eefaff;
    --wb-public-accent-border: #9ed4e4;
    --wb-public-accent-text: #0b617b;
    --wb-public-accent-on: #ffffff;
    --wb-public-accent-ring-rgb: 15 142 179;
    --wb-public-accent-selection: #caedf7;
    --wb-public-tone-soft-value: #7d96a5;
    --wb-public-tone-accent-value: #5b7cfa;
    --wb-public-tone-highlight-value: #22a06b;
    --wb-public-tone-bold-value: #142735;
}

html[data-mode="dark"] body[data-wb-public-theme="canvas"],
html[data-mode="dark"] body[data-wb-public-theme="atlas"],
html[data-mode="dark"] body[data-wb-public-theme="pulse"],
html[data-mode="dark"] body[data-wb-public-theme="prism"],
html[data-mode="dark"] body[data-wb-public-theme="graphite"],
html[data-mode="dark"] body[data-wb-public-theme="horizon"] {
    --wb-public-page-bg: #0d1320;
    --wb-public-surface: #151d2c;
    --wb-public-surface-muted: #1c2739;
    --wb-public-surface-strong: #26354c;
    --wb-public-text: #e8eef8;
    --wb-public-muted: #98a8bd;
    --wb-public-border: #304058;
    --wb-public-accent-soft: color-mix(in srgb, var(--wb-public-accent) 24%, transparent);
    --wb-public-accent-softer: color-mix(in srgb, var(--wb-public-accent) 14%, transparent);
    --wb-public-accent-border: color-mix(in srgb, var(--wb-public-accent) 48%, var(--wb-public-border));
    --wb-public-accent-text: color-mix(in srgb, var(--wb-public-accent) 68%, #ffffff);
    --wb-public-accent-on: #07111c;
    --wb-public-tone-soft-value: #75879c;
    --wb-public-tone-bold-value: #e8eef8;
}

html[data-mode="dark"] body[data-wb-public-theme="graphite"] {
    --wb-public-page-bg: #090d12;
    --wb-public-surface: #111822;
    --wb-public-surface-muted: #182232;
    --wb-public-surface-strong: #223047;
    --wb-public-text: #eef4fb;
    --wb-public-muted: #9badc0;
    --wb-public-border: #314056;
    --wb-public-accent: #6ee7f5;
    --wb-public-accent-hover: #45d3e4;
    --wb-public-accent-active: #20b8ca;
    --wb-public-accent-soft: #133341;
    --wb-public-accent-softer: #0f2530;
    --wb-public-accent-border: #2c6d7e;
    --wb-public-accent-text: #a5f3fc;
    --wb-public-accent-on: #06151a;
    --wb-public-accent-ring-rgb: 110 231 245;
    --wb-public-accent-selection: #164556;
    --wb-public-tone-soft-value: #6f8296;
    --wb-public-tone-accent-value: #a78bfa;
    --wb-public-tone-highlight-value: #fbbf24;
    --wb-public-tone-bold-value: #eef4fb;
}

@media (prefers-color-scheme: dark) {
    html[data-mode="auto"] body[data-wb-public-theme="canvas"],
    html[data-mode="auto"] body[data-wb-public-theme="atlas"],
    html[data-mode="auto"] body[data-wb-public-theme="pulse"],
    html[data-mode="auto"] body[data-wb-public-theme="prism"],
    html[data-mode="auto"] body[data-wb-public-theme="graphite"],
    html[data-mode="auto"] body[data-wb-public-theme="horizon"] {
        --wb-public-page-bg: #0d1320;
        --wb-public-surface: #151d2c;
        --wb-public-surface-muted: #1c2739;
        --wb-public-surface-strong: #26354c;
        --wb-public-text: #e8eef8;
        --wb-public-muted: #98a8bd;
        --wb-public-border: #304058;
        --wb-public-accent-soft: color-mix(in srgb, var(--wb-public-accent) 24%, transparent);
        --wb-public-accent-softer: color-mix(in srgb, var(--wb-public-accent) 14%, transparent);
        --wb-public-accent-border: color-mix(in srgb, var(--wb-public-accent) 48%, var(--wb-public-border));
        --wb-public-accent-text: color-mix(in srgb, var(--wb-public-accent) 68%, #ffffff);
        --wb-public-accent-on: #07111c;
        --wb-public-tone-soft-value: #75879c;
        --wb-public-tone-bold-value: #e8eef8;
    }

    html[data-mode="auto"] body[data-wb-public-theme="graphite"] {
        --wb-public-page-bg: #090d12;
        --wb-public-surface: #111822;
        --wb-public-surface-muted: #182232;
        --wb-public-surface-strong: #223047;
        --wb-public-text: #eef4fb;
        --wb-public-muted: #9badc0;
        --wb-public-border: #314056;
        --wb-public-accent: #6ee7f5;
        --wb-public-accent-hover: #45d3e4;
        --wb-public-accent-active: #20b8ca;
        --wb-public-accent-soft: #133341;
        --wb-public-accent-softer: #0f2530;
        --wb-public-accent-border: #2c6d7e;
        --wb-public-accent-text: #a5f3fc;
        --wb-public-accent-on: #06151a;
        --wb-public-accent-ring-rgb: 110 231 245;
        --wb-public-accent-selection: #164556;
        --wb-public-tone-soft-value: #6f8296;
        --wb-public-tone-accent-value: #a78bfa;
        --wb-public-tone-highlight-value: #fbbf24;
        --wb-public-tone-bold-value: #eef4fb;
    }
}

/* Deliberate host theming choice: body text links use the contrast-safe
   accent-text tone instead of the raw accent that shipped `a` rules use. */
:is(body[data-wb-public-theme], [data-wb-public-theme-preview]) a:not(.wb-btn):not(.wb-navbar-link):not(.wb-dropdown-item):not(.wb-sidebar-link):not(.wb-error-brand-link) {
    color: var(--wb-public-accent-text);
}


/* Branded 404 shell (errors/404.blade.php). The page renders outside the
   normal public layout, so it declares its own viewport-height centering. */
.wb-error-shell {
    min-height: 100vh;
    min-block-size: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.wb-error-code {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.35;
    margin-bottom: 0.5rem;
}

.wb-error-brand {
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}

.wb-error-brand-link {
    color: inherit;
    text-decoration: none;
}

.wb-error-brand-link:hover,
.wb-error-brand-link:focus-visible {
    text-decoration: underline;
}
/* Embedded Applications --------------------------------------------------- */
.wb-application {
  inline-size: 100%;
  min-block-size: var(--wb-application-min-height, 0);
}

.wb-application--content {
  max-inline-size: var(--wb-container-lg, 72rem);
  margin-inline: auto;
}

.wb-application--wide {
  max-inline-size: var(--wb-container-xl, 90rem);
  margin-inline: auto;
}

.wb-application__mount,
.wb-application__frame-wrap,
.wb-application__frame {
  inline-size: 100%;
  min-block-size: inherit;
}

.wb-application__frame-wrap {
  overflow: hidden;
}

.wb-application__frame-wrap--16-9 {
  aspect-ratio: 16 / 9;
}

.wb-application__frame-wrap--4-3 {
  aspect-ratio: 4 / 3;
}

.wb-application__frame-wrap--1-1 {
  aspect-ratio: 1;
}

.wb-application__frame {
  display: block;
  block-size: 100%;
  border: 0;
}