html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: var(--pulsar-typography-font-family, system-ui, sans-serif);
    color: var(--pulsar-palette-text-primary, #1A1D23);
    background: var(--pulsar-palette-background, #FFFFFF);
}

* {
    box-sizing: border-box;
}

a {
    color: var(--pulsar-palette-primary, #4C6FFF);
}

code {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* Layout shell */

/* height (not min-height) + overflow:hidden pins the whole shell to the viewport and disables the
   page-level scrollbar — .docs-sidebar/.docs-main below get their OWN independent overflow-y:auto
   instead, the standard docs-site "sidebar stays put, scrolls on its own" pattern. Reset back to
   plain single-column page scroll on mobile (see the max-width:720px block below) — a nav that's
   stacked full-width above the content shouldn't also be height-capped with its own scrollbar. */
.docs-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Same icon + wordmark treatment as .docs-brand__link in the sidebar, not the old pulsar-ui-logo.png
   image — that baked-in wordmark image didn't adapt to dark mode (illegible/clashing), while this
   text renders via theme color variables and switches automatically like everything else here. */
.docs-topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: var(--pulsar-typography-font-weight-bold, 700);
    color: var(--pulsar-palette-text-primary, #1A1D23);
    text-decoration: none;
}

.docs-topbar__brand-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.docs-topbar__brand span {
    color: var(--pulsar-palette-primary, #4C6FFF);
}

/* PulsarButton always renders a (possibly empty) .pulsar-button__label span alongside StartIcon —
   there's no dedicated icon-only mode, so an icon-with-no-text button keeps the same padding a
   text+icon button would get, reading as oddly wide/rectangular instead of a tight square icon
   button. Square it off and tighten the padding here rather than adding an icon-only mode to
   PulsarButton itself for what's currently a single use site. */
.docs-topbar__theme-toggle {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    justify-content: center;
}

/* Right-aligned, inside End alongside the theme toggle buttons (End's own margin-left:auto pins the
   whole group to the far right) — a fixed width plus its own end margin for a real gap before the
   first button, rather than End's shared 8px flex gap alone. */
.docs-topbar__search {
    flex: none;
    width: 260px;
    margin-inline-end: 12px;
}

.docs-search {
    width: 100%;
}

.docs-search__anchor {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.docs-search__icon {
    position: absolute;
    left: 10px;
    color: var(--pulsar-palette-text-secondary, #5B6270);
    pointer-events: none;
}

.docs-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 34px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--pulsar-palette-text-primary, #1A1D23);
    background: var(--pulsar-palette-background, #FFFFFF);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
}

.docs-search__input:focus-visible {
    outline: 2px solid var(--pulsar-palette-primary, #4C6FFF);
    outline-offset: -1px;
}

.docs-search__input::-webkit-search-cancel-button {
    display: none;
}

/* Discoverability nudge for the global "/" shortcut (docsFocusSearchOnSlash in index.html) — hidden
   the moment there's text, so it never looks like a stray literal slash the user typed. */
.docs-search__kbd-hint {
    position: absolute;
    right: 10px;
    padding: 1px 6px;
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
    background: var(--pulsar-palette-surface, #F7F8FA);
    color: var(--pulsar-palette-text-secondary, #5B6270);
    font-size: 0.75rem;
    font-family: inherit;
    pointer-events: none;
}

.docs-search__results {
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: 80vw;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    gap: 2px;
    background: var(--pulsar-palette-background, #FFFFFF);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12);
}

.docs-search__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
    color: var(--pulsar-palette-text-primary, #1A1D23);
    font-family: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.docs-search__result--highlighted {
    background: var(--pulsar-palette-divider, #E4E7EC);
}

.docs-search__result-title {
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docs-search__result-meta {
    flex: none;
    color: var(--pulsar-palette-text-secondary, #5B6270);
    font-size: 0.75rem;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .docs-topbar__search {
        display: none;
    }
}

.docs-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0; /* lets this flex child shrink below its content's natural height — without it,
                      overflow-y:auto on the children below never actually gets a chance to kick in */
}

.docs-sidebar {
    width: 240px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--pulsar-palette-surface, #F7F8FA);
    border-right: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    padding: 20px 0;
}

.docs-brand {
    padding: 0 20px 16px;
}

.docs-brand__link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: var(--pulsar-typography-font-weight-bold, 700);
    color: var(--pulsar-palette-text-primary, #1A1D23);
    text-decoration: none;
}

.docs-brand__icon {
    width: 28px;
    height: 28px;
}

.docs-brand__link span {
    color: var(--pulsar-palette-primary, #4C6FFF);
}

.docs-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
}

.docs-nav-group {
    margin-top: 8px;
}

/* Font-size/weight/uppercase/letter-spacing are docs-specific typographic flourishes PulsarCollapse
   doesn't take a parameter for (its own scoped CSS already sets font-size/weight, hence !important
   here); LabelColor="PulsarColor.Primary" on the component itself now handles the color half. */
.docs-nav-group .pulsar-collapse__title {
    font-size: 0.75rem !important;
    font-weight: var(--pulsar-typography-font-weight-bold, 700) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.docs-nav-group .pulsar-collapse__body-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Sub-groups inside "Components" (Buttons/Forms/Data Display/...) — deliberately NOT the bold
   uppercase primary-blue treatment above, so the two nesting levels read as distinct at a glance:
   this is the smaller, muted, indented one. */
.docs-nav-subgroup {
    margin-left: 4px;
}

.docs-nav-subgroup .pulsar-collapse__title {
    font-size: 0.8125rem !important;
    font-weight: var(--pulsar-typography-font-weight-medium, 500) !important;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-nav-subgroup .pulsar-collapse__body-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
}

.docs-nav__link {
    padding: 8px;
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
    color: var(--pulsar-palette-text-primary, #1A1D23);
    text-decoration: none;
    font-size: 0.9375rem;
}

.docs-nav__link:hover {
    background: var(--pulsar-palette-divider, #E4E7EC);
}

.docs-nav__link.active {
    background: var(--pulsar-button-color, var(--pulsar-palette-primary, #4C6FFF));
    color: var(--pulsar-palette-primary-contrast-text, #FFFFFF);
}

.docs-nav__filter {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 8px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--pulsar-palette-text-primary, #1A1D23);
    background: var(--pulsar-palette-background, #FFFFFF);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
}

.docs-nav__filter:focus-visible {
    outline: 2px solid var(--pulsar-palette-primary, #4C6FFF);
    outline-offset: -1px;
}

.docs-nav__filter::-webkit-search-cancel-button {
    display: none;
}

.docs-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 32px 40px 80px;
}

@media (max-width: 720px) {
    /* Back to one plain scrolling page — a nav stacked full-width above the content shouldn't also
       be height-capped with its own inner scrollbar. */
    html, body {
        height: auto;
        overflow: visible;
    }

    .docs-app {
        height: auto;
        overflow: visible;
    }

    .docs-shell {
        flex-direction: column;
        min-height: 0;
    }

    .docs-sidebar {
        width: 100%;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    }

    .docs-main {
        overflow-y: visible;
    }
}

/* Docs content helpers */

.docs-page h1 {
    margin-top: 0;
}

.docs-home__title {
    margin-bottom: 8px;
}

.docs-home__logo {
    height: 56px;
    width: auto;
    display: block;
}

/* Blazor's <FocusOnNavigate> focuses the h1 for screen readers on route change;
   it doesn't need the browser's default rectangular focus ring. */
.docs-page h1:focus-visible {
    outline: none;
}

.docs-lede {
    font-size: 1.0625rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
    max-width: 640px;
}

.docs-section {
    margin: 40px 0;
}

.docs-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.docs-home-grid__item h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.docs-home-grid__item p {
    margin: 0;
    color: var(--pulsar-palette-text-secondary, #5B6270);
    font-size: 0.9375rem;
}

/* PulsarCodeBlock itself carries no default margin (like every other shipped component, margin is
   a consumer/layout concern) — the docs site is the consumer here, so its own vertical rhythm
   lives in its own stylesheet, not baked into the library. Covers every code block on the site,
   both DocsExample-wrapped and standalone after a gallery. */
.pulsar-codeblock {
    margin: 16px 0;
}

/* Full license text on the License page — long-form prose, not code, so unlike
   .pulsar-codeblock (overflow-x:auto; white-space:pre, right for short code lines) this wraps
   instead of clipping lines off to the side. Colors/padding/radius match PulsarCodeBlock's own
   dark chrome for visual consistency with the rest of the site's "monospace card" language. */
.docs-legal-text {
    display: block;
    margin: 16px 0;
    padding: 20px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    background: #1A1D23;
    color: #E4E7EC;
    font-family: var(--pulsar-typography-font-family, system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Panel demo */

.docs-panel-demo {
    height: 360px;
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    overflow: hidden;
}

.docs-panel-demo__zone {
    /* !important: PulsarPanel's own scoped .pulsar-panel[b-xxx] rule sets display:grid, and the
       CSS-isolation scope attribute gives it higher specificity than a plain class here — plus its
       bundle is @imported into PulsarComponents.Docs.styles.css, which loads after docs.css, so
       even a specificity tie would still lose on source order. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-size: 0.875rem;
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-panel-demo__zone--toolbar {
    background: var(--pulsar-palette-primary, #4C6FFF);
    color: var(--pulsar-palette-primary-contrast-text, #FFFFFF);
}

.docs-panel-demo__zone--nav,
.docs-panel-demo__zone--aside {
    background: var(--pulsar-palette-surface, #F7F8FA);
}

.docs-panel-demo__zone--content {
    background: var(--pulsar-palette-background, #FFFFFF);
}

.docs-panel-demo__zone--status {
    background: var(--pulsar-palette-surface, #F7F8FA);
    font-size: 0.75rem;
}

/* Border/Elevation/Background swatches (Panel page) */

.docs-panel-swatch {
    width: 100%;
    height: 90px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
}

/* Header/Collapsible/Footer card demos (Panel page) — unlike .docs-panel-demo, these have no
   fixed height: they're meant to size to their own header/body/footer content. overflow:hidden
   clips the header/body tint and dividers to the rounded corners. */
.docs-panel-card {
    max-width: 420px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    overflow: hidden;
}

/* Icon background stat-tile demo: this PulsarPanel has no Header title/icon or Collapsible set, so
   it's a plain leaf container — PulsarPanel is always display:grid internally, and a plain (non-Dock'd) child
   with no grid-area auto-places into a single content-sized cell instead of stacking normally.
   !important for the same reason as .docs-panel-demo__zone above (scoped library CSS loads after
   docs.css). Sized deliberately larger than the default content-driven size so the watermark icon
   underneath actually reads as a recognizable shape instead of a mostly-cropped sliver. */
.docs-panel-card--stat {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    width: 220px;
    min-height: 130px;
    justify-content: center;
}

.docs-color-backdrop {
    padding: 24px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    background: linear-gradient(135deg, #FF7A59 0%, #4C6FFF 50%, #22B07D 100%);
}

.docs-gallery__label--on-backdrop {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Generic labeled-swatch gallery, reused by the Splitter and Panel pages */

.docs-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.docs-gallery__item {
    flex: 1 1 220px;
    min-width: 220px;
}

.docs-gallery__label {
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

/* Wide-content modifier — for galleries whose items (e.g. a PulsarDateSelector's own 7-column
   grid) have a real minimum content width well past .docs-gallery__item's own 220px flex floor.
   Flexbox's default flex-shrink still can't shrink an item below that explicit min-width, so the
   item's own content overflowed its box and visually overlapped its neighbor instead of actually
   wrapping. A CSS Grid with a fixed column count sidesteps the whole shrink-below-minimum problem
   — each column gets an equal share of the row, comfortably wider than the content needs. */
.docs-gallery--wide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1200px) {
    .docs-gallery--wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Theme Settings page — ThemeBase light/dark token chip rows */

.docs-theme-base-swatch {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.docs-theme-base-swatch__chip {
    flex: 1;
    padding: 6px 4px;
    border-radius: 4px;
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    font-size: 0.6875rem;
    text-align: center;
}

/* Splitter demo */

.docs-splitter-demo {
    height: 140px;
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    overflow: hidden;
}

/* Draggable demo */

/* width:100% is load-bearing, not decorative — same fix/reason as .docs-calendar-demo's own comment
   above: .docs-example__preview is display:flex, and a flex item doesn't stretch on the main axis
   by default, so without this the track shrinks to its own min-width floor instead of filling the
   available preview area. */
.docs-draggable-track {
    position: relative;
    width: 100%;
    min-height: 220px;
    min-width: 320px;
    border: 1px dashed var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    overflow: hidden;
    background: var(--pulsar-palette-surface, #F7F8FA);
}

.docs-draggable-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 64px;
    margin: 12px;
    padding: 8px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    background: var(--pulsar-palette-background, #FFFFFF);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    font-size: 0.875rem;
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
    text-align: center;
    box-shadow: var(--pulsar-shadows-elevation-low, 0 1px 3px rgba(16, 24, 40, 0.08));
    transition: box-shadow 150ms ease;
}

.docs-draggable-box--accent {
    border-color: var(--pulsar-palette-primary, #4C6FFF);
    color: var(--pulsar-palette-primary, #4C6FFF);
}

.docs-draggable-box.pulsar-draggable--dragging {
    box-shadow: var(--pulsar-shadows-elevation-high, 0 12px 24px rgba(16, 24, 40, 0.18));
}

.docs-draggable-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
    color: var(--pulsar-palette-text-secondary, #5B6270);
    cursor: grab;
    touch-action: none;
}

.docs-draggable-box.pulsar-draggable--dragging .docs-draggable-handle {
    cursor: grabbing;
}

/* DataGrid remote-data demo — a custom LoadingTemplate showing a spinning icon instead of the
   default plain "Loading…" text, to demonstrate that LoadingTemplate accepts anything (an icon, a
   PulsarProgress bar, whatever) rather than being locked to text. */
.docs-datagrid-remote-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-datagrid-remote-loading__spinner {
    animation: docs-datagrid-spin 900ms linear infinite;
}

@keyframes docs-datagrid-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* DataGrid conditional-formatting demo */

.docs-datagrid-cell--positive {
    color: var(--pulsar-palette-success, #22B07D);
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
}

.docs-datagrid-cell--negative {
    color: var(--pulsar-palette-error, #E5484D);
    font-weight: var(--pulsar-typography-font-weight-medium, 500);
}

/* Grid demo */

.docs-grid-demo__cell {
    padding: 20px;
    text-align: center;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    background: var(--pulsar-palette-surface, #F7F8FA);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    color: var(--pulsar-palette-text-secondary, #5B6270);
    font-size: 0.875rem;
}

.docs-caption {
    font-size: 0.8125rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-tabs-demo {
    width: 100%;
    max-width: 360px;
    margin-bottom: 16px;
}

/* Same fix, same reason as .docs-tabs-demo above: .docs-example__preview is display:flex, and a
   flex item doesn't stretch on the main axis by default. PulsarCalendar demos that also show a
   caption below wrap both in a plain <div> (so the caption stays attached under the calendar
   instead of becoming its own flex item) — that wrapper is what needs the explicit width here,
   not PulsarCalendar itself (its own root already fills 100% of whatever DOES give it a definite
   width, which this rule is what supplies). */
.docs-calendar-demo {
    width: 100%;
}

.docs-tabs-demo--position {
    max-width: 260px;
    height: 140px;
}

.docs-lazy-input {
    width: 100%;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: var(--pulsar-sizing-border-radius-small, 6px);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    font-size: 0.9375rem;
    box-sizing: border-box;
}

/* Stepper page's own caller-built Back/Next footer — the same justify-content:space-between idiom
   PulsarThemeSettingsActions already establishes (no spacer element/component exists in this
   library), since PulsarStepper deliberately ships no built-in footer of its own. */
.docs-stepper-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

/* Application Layout example.
   PulsarPanel is always display:grid internally (its own 5-zone dock template), so a leaf zone
   that holds plain content (not further Dock'd children) needs its `display` overridden here --
   otherwise CSS Grid auto-placement would scatter multiple child elements into separate 1x1 cells
   of that unrelated template instead of stacking/flowing them normally. Every override below needs
   !important for the same reason as .docs-panel-demo__zone above. */

.docs-app-example {
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    overflow: hidden;
    box-shadow: var(--pulsar-shadows-elevation-medium, 0 4px 12px rgba(16, 24, 40, 0.12));
}

.docs-app-example__toolbar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--pulsar-palette-primary, #4C6FFF);
}

.docs-app-example__brand {
    color: var(--pulsar-palette-primary-contrast-text, #FFFFFF);
    font-weight: var(--pulsar-typography-font-weight-bold, 700);
}

.docs-app-example__spacer {
    flex: 1 1 auto;
}

.docs-app-example__nav,
.docs-app-example__inspector {
    display: block !important;
    background: var(--pulsar-palette-surface, #F7F8FA);
    overflow-y: auto;
}

.docs-app-example__nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.docs-app-example__nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.docs-app-example__inspector-title {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    /* Explicit, not inherited: inside a nested/scoped PulsarThemeProvider, plain text without its
       own var(--pulsar-palette-text-primary) here would inherit body's color as computed under
       the OUTER theme (a one-time inherited value, not re-evaluated per element), which stays
       stale even though this element sits in a differently-themed subtree. */
    color: var(--pulsar-palette-text-primary, #1A1D23);
}

.docs-app-example__inspector-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-app-example__status {
    display: flex !important;
    align-items: center;
    padding: 0 16px;
    font-size: 0.75rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
    background: var(--pulsar-palette-surface, #F7F8FA);
}

.docs-app-example__card {
    display: block !important;
    height: 100%;
    box-sizing: border-box;
}

.docs-app-example__card-title {
    color: var(--pulsar-palette-text-primary, #1A1D23);
}

.docs-app-example__card-body {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

/* Window page's dashboard demo (WindowDashboardDemo.razor) — same "leaf dock zone needs its own
   display overridden" story as .docs-app-example above. */

.docs-window-demo__toolbar {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.docs-window-demo__nav {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}

.docs-window-demo__main {
    display: block !important;
}

.docs-window-demo__status {
    display: flex !important;
    align-items: center;
    font-size: 0.8125rem;
}

/* Icon gallery (Icon page) */

.docs-icon-gallery__search {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--pulsar-palette-text-primary, #1A1D23);
    background: var(--pulsar-palette-background, #FFFFFF);
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
}

.docs-icon-gallery__search:focus-visible {
    outline: 2px solid var(--pulsar-palette-primary, #4C6FFF);
    outline-offset: -1px;
}

.docs-icon-gallery__meta {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
    margin-top: 16px;
}

.docs-icon-grid__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

.docs-icon-grid__tile:hover {
    background: var(--pulsar-palette-surface, #F7F8FA);
    color: var(--pulsar-palette-text-primary, #1A1D23);
}

.docs-icon-grid__label {
    font-size: 0.6875rem;
    text-align: center;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* API reference tables */

.docs-api-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--pulsar-palette-divider, #E4E7EC);
    border-radius: var(--pulsar-sizing-border-radius-medium, 8px);
}

.docs-api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.docs-api-table th,
.docs-api-table td {
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--pulsar-palette-divider, #E4E7EC);
}

.docs-api-table th {
    background: var(--pulsar-palette-surface, #F7F8FA);
    font-weight: var(--pulsar-typography-font-weight-bold, 700);
    color: var(--pulsar-palette-text-secondary, #5B6270);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.docs-api-table tbody tr:last-child td {
    border-bottom: none;
}

.docs-api-table td:nth-child(3) code {
    color: var(--pulsar-palette-text-secondary, #5B6270);
}

/* Blazor WebAssembly default loading/error UI */

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--pulsar-palette-divider, #E4E7EC);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--pulsar-palette-primary, #4C6FFF);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    text-align: center;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    background: #F5A623;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}