/* The docs paint with Trailblazor's own tokens, so every palette and theme the switcher offers restyles the site too;
   only the brand accent is the site's own, since the default palette is all grays. */
:root {
    --docs-display: "Sora", var(--tb-font-family);
    --docs-header-height: 4rem;
    --docs-wrap: 76rem;
    --docs-brand: light-dark(#3a46f1, #8fa2ff);
    --docs-brand-text: light-dark(#3a3dc4, #b4c0ff);
    --docs-on-brand: light-dark(#ffffff, #0d1230);
    --docs-brand-subtle: color-mix(in srgb, var(--docs-brand) 14%, transparent);
    --docs-tint: color-mix(in srgb, var(--docs-brand) 6%, var(--tb-color-background));
    --docs-glow: color-mix(in srgb, var(--docs-brand) 24%, transparent);
    --docs-brand-fade: linear-gradient(100deg, light-dark(#7b2ff7, #b494ff), var(--docs-brand) 55%,
        light-dark(#1f6fe5, #6cc8ff));
}

/* Sora, self-hosted under the SIL Open Font License (fonts/Sora-OFL.txt); one variable file covers both weights. */
@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/sora-latin.woff2") format("woff2");
}

html {
    scroll-padding-top: calc(var(--docs-header-height) + var(--tb-space-4));
}

body {
    margin: 0;
    background: var(--tb-color-background);
    color: var(--tb-color-text);
    font-family: var(--tb-font-family);
    -webkit-font-smoothing: antialiased;
}

/* Unlayered rules beat every Trailblazor layer, so links drawn as buttons or styled links keep their own colors. */
a:where(:not(.tb-button, .tb-link)) {
    color: inherit;
}

/* The router focuses the page's heading for screen readers; a ring there would only distract. */
h1:focus {
    outline: none;
}

a:focus-visible {
    outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
    outline-offset: var(--tb-focus-ring-offset);
}

/* ---- Frame ---- */

.docs {
    display: grid;
    grid-template: "header header" auto "nav main" 1fr "footer footer" auto / 16rem minmax(0, 1fr);
    min-height: 100vh;
}

.docs--home {
    grid-template: "header" auto "main" 1fr "footer" auto / minmax(0, 1fr);
}

.docs-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 10;
    border-block-end: 1px solid var(--tb-border-subtle);
    background: color-mix(in srgb, var(--tb-color-background) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
}

.docs-header__inner {
    display: flex;
    align-items: center;
    gap: var(--tb-space-3) var(--tb-space-5);
    min-height: var(--docs-header-height);
    padding: var(--tb-space-2) var(--tb-space-5);
    box-sizing: border-box;
}

/* The home page's header lines up with its centered sections; other pages' with the sidebar. */
.docs--home .docs-header__inner {
    max-width: var(--docs-wrap);
    margin-inline: auto;
    padding-inline: max(var(--tb-space-4), 4vw);
}

.docs-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-space-2);
    font-family: var(--docs-display);
    font-size: var(--tb-font-size-xl);
    font-weight: var(--tb-font-weight-bold);
    letter-spacing: -0.015em;
    text-decoration: none;
}

.docs-site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-1);
    margin-inline-end: auto;
}

.docs-site-nav__link {
    padding: var(--tb-space-1) var(--tb-space-2);
    border-radius: var(--tb-radius-md);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
    font-weight: var(--tb-font-weight-semibold);
    text-decoration: none;
}

.docs-site-nav__link:hover,
.docs-site-nav__link.active {
    color: var(--tb-color-text);
}

.docs-header__toggle {
    display: none;
}

/* Only the search box shrinks to keep the header on one row, since how wide the header's text runs depends on the
   system's fonts. */
.docs-brand,
.docs-site-nav,
.docs-look {
    flex-shrink: 0;
}

.docs-search {
    flex: 0 1 15rem;
    min-width: 7rem;
}

/* A suggestion shows where it matched, with the words around the match below. */
.docs-suggestion__title {
    display: block;
    font-weight: var(--tb-font-weight-medium);
}

.docs-suggestion__snippet {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
}

.docs-results {
    display: grid;
    gap: var(--tb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-results__matches {
    display: grid;
    gap: var(--tb-space-2);
    margin: var(--tb-space-2) 0 0;
    padding-inline-start: var(--tb-space-4);
    list-style: none;
}

.docs-results__section {
    font-weight: var(--tb-font-weight-medium);
}

.docs-results__more {
    margin-block-start: var(--tb-space-2);
    padding-inline-start: var(--tb-space-4);
}

/* ---- Sidebar ---- */

/* A sticky element stops at the end of its parent; this column ends above the footer, so the sidebar does too. */
.docs-sidebar {
    grid-area: nav;
}

.docs-nav {
    position: sticky;
    top: var(--docs-header-height);
    max-height: calc(100vh - var(--docs-header-height));
    overflow-y: auto;
    padding: var(--tb-space-4) var(--tb-space-3) var(--tb-space-8) var(--tb-space-5);
    border-inline-end: 1px solid var(--tb-border-subtle);
    box-sizing: border-box;
}

.docs-nav__heading {
    margin: var(--tb-space-5) 0 var(--tb-space-1);
    padding-inline: var(--tb-space-2);
    color: var(--tb-color-text);
    font-family: var(--docs-display);
    font-size: var(--tb-font-size-xs);
    font-weight: var(--tb-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.docs-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-nav__link {
    display: block;
    padding: 0.3rem var(--tb-space-2);
    border-radius: var(--tb-radius-md);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
    text-decoration: none;
}

.docs-nav__link:hover {
    background: var(--tb-color-neutral-subtle);
    color: var(--tb-color-text);
}

.docs-nav__link.active {
    background: var(--docs-brand-subtle);
    color: var(--docs-brand-text);
    font-weight: var(--tb-font-weight-semibold);
}

.docs-nav__upcoming {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tb-space-2);
    padding: 0.3rem var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
}

.docs-nav__stage {
    flex: none;
    padding: 0 var(--tb-space-2);
    border-radius: var(--tb-radius-full);
    background: var(--tb-color-neutral-subtle);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-xs);
    white-space: nowrap;
}

.docs-nav__upcoming[data-stage="ComingSoon"] .docs-nav__stage {
    background: var(--docs-brand-subtle);
    color: var(--docs-brand-text);
}

/* ---- Articles ---- */

.docs-main {
    grid-area: main;
    width: 100%;
    max-width: 84rem;
    padding: var(--tb-space-8) var(--tb-space-10) var(--tb-space-16);
    box-sizing: border-box;
}

.docs--home .docs-main {
    max-width: none;
    padding: 0;
}

:is(.docs-main, .docs-article__body) > h1 {
    margin-block-end: var(--tb-space-2);
    font-family: var(--docs-display);
    font-size: clamp(2rem, 4vw, 2.6rem);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.docs-lead {
    margin-block: var(--tb-space-2) var(--tb-space-8);
    color: var(--tb-color-text-muted);
    text-wrap: pretty;
}

/* Sections open with a rule, so a long page reads as parts. */
.docs-section {
    margin-block: var(--tb-space-12) var(--tb-space-3);
    padding-block-start: var(--tb-space-6);
    border-block-start: 1px solid var(--tb-border-subtle);
    font-family: var(--docs-display);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* The heading holds the section's id, so a link to it scrolls the rule above it into view too. */
.docs-section > [id] {
    scroll-margin-block-start: calc(var(--tb-space-6) + 1px);
}

/* A heading's link sits beside it and shows while the pointer is over the heading or the link has focus. */
.docs-heading {
    display: flex;
    align-items: baseline;
    gap: var(--tb-space-2);
}

/* The heading takes the font its section sets, as a bare heading would. */
.docs-heading > .tb-text {
    font-family: inherit;
}

.docs-heading__link {
    color: var(--tb-color-text-muted);
    text-decoration: none;
    opacity: 0;
}

.docs-heading:hover .docs-heading__link,
.docs-heading__link:focus {
    opacity: 1;
}

.docs-heading__link:hover {
    color: var(--docs-brand-text);
}

/* Without a pointer that hovers, as on a phone, the link always shows. */
@media (hover: none) {
    .docs-heading__link {
        opacity: 1;
    }
}

.docs-example {
    padding: var(--tb-space-8) var(--tb-space-6);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-shadow-sm);
}

/* A component page's frame holds the demo, a toolbar and the code, each with padding of its own. */
.docs-example--frame {
    margin-block-start: var(--tb-space-4);
    padding: 0;
}

/* A small demo sits centered in its frame, so a wide screen doesn't leave it stranded at one edge. */
.docs-example__stage {
    display: grid;
    justify-items: center;
    padding: var(--tb-space-8) var(--tb-space-6);
}

.docs-example__demo {
    max-width: 100%;
}

.docs-example[data-full-width] .docs-example__stage {
    justify-items: stretch;
}

.docs-example__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tb-space-1) var(--tb-space-3);
    padding: var(--tb-space-1) var(--tb-space-3);
    border-block-start: 1px solid var(--tb-border-subtle);
}

.docs-example__alone {
    font-size: var(--tb-font-size-sm);
}

.docs-example__code {
    padding: var(--tb-space-3);
    border-block-start: 1px solid var(--tb-border-subtle);
}

/* ---- Page frame: the article, its contents and the overview and API links ---- */

.docs-main:has(.docs-article) {
    max-width: none;
}

.docs-article__rail {
    display: none;
}

.docs-article__folded {
    margin-block-end: var(--tb-space-6);
    padding: var(--tb-space-2) var(--tb-space-3);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
}

.docs-article__folded > summary {
    cursor: pointer;
    font-weight: var(--tb-font-weight-semibold);
}

.docs-article__folded[open] > summary {
    margin-block-end: var(--tb-space-2);
}

@media (min-width: 80rem) {
    /* Centered with its contents beside it, so a wide screen's spare width is split rather than left on one side. */
    .docs-article {
        display: grid;
        grid-template-columns: minmax(0, 60rem) 13rem;
        justify-content: center;
        gap: var(--tb-space-12);
    }

    .docs-article__folded {
        display: none;
    }

    .docs-article__rail {
        display: block;
        position: sticky;
        top: calc(var(--docs-header-height) + var(--tb-space-8));
        align-self: start;
        max-height: calc(100vh - var(--docs-header-height) - var(--tb-space-12));
        overflow-y: auto;
    }
}

/* The overview and API links already rule off the header, so the first section needs no rule of its own. */
.docs-article__folded + .docs-section {
    margin-block-start: var(--tb-space-8);
    padding-block-start: 0;
    border-block-start: none;
}

.docs-views {
    display: flex;
    gap: var(--tb-space-1);
    margin-block-end: var(--tb-space-4);
    border-block-end: 1px solid var(--tb-border-subtle);
}

.docs-views__link {
    margin-block-end: -1px;
    padding: var(--tb-space-2) var(--tb-space-3);
    border-block-end: 2px solid transparent;
    color: var(--tb-color-text-muted);
    font-weight: var(--tb-font-weight-semibold);
    text-decoration: none;
}

.docs-views__link:hover {
    color: var(--tb-color-text);
}

.docs-views__link[aria-current="page"] {
    border-block-end-color: var(--docs-brand);
    color: var(--docs-brand-text);
}

/* The skip link waits above the page until a keyboard user tabs to it. */
.docs-skip {
    position: absolute;
    inset-block-start: -10rem;
    inset-inline-start: var(--tb-space-4);
    z-index: 20;
    padding: var(--tb-space-2) var(--tb-space-4);
    border-radius: var(--tb-radius-md);
    background: var(--tb-color-surface-raised);
    box-shadow: var(--tb-shadow-md);
}

.docs-skip:focus {
    inset-block-start: var(--tb-space-2);
}

/* Focus lands on the content only to start the reader there, so it draws no ring. */
.docs-main:focus {
    outline: none;
}

.docs-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-1) var(--tb-space-4);
    margin: var(--tb-space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--tb-font-size-sm);
}

/* The page's GitHub links and Markdown links share a row when there's room. */
.docs-page-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tb-space-1) var(--tb-space-6);
    margin-block-start: var(--tb-space-3);
}

.docs-page-tools .docs-page-links {
    align-items: center;
    margin: 0;
}

.docs-edit {
    margin-block-start: var(--tb-space-10);
}

.docs-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-3);
    margin-block-start: var(--tb-space-16);
}

.docs-pager__link {
    display: grid;
    flex: 1 1 14rem;
    gap: var(--tb-space-1);
    padding: var(--tb-space-3) var(--tb-space-4);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    font-weight: var(--tb-font-weight-semibold);
    text-decoration: none;
}

.docs-pager__link:hover {
    border-color: var(--docs-brand);
}

.docs-pager__link--next {
    margin-inline-start: auto;
    text-align: end;
}

.docs-pager__label {
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
    font-weight: var(--tb-font-weight-regular);
}

/* The spacing demo's box sets no padding or margin of its own, since this unlayered CSS would beat the class it shows.
   Flow-root keeps the box's margin inside the frame. */
.docs-spacing-frame {
    display: flow-root;
    border: 1px dashed var(--tb-border-strong);
    border-radius: var(--tb-radius-md);
}

.docs-spacing-box {
    border-radius: var(--tb-radius-sm);
    background: var(--tb-color-primary-subtle);
    color: var(--tb-color-text);
}

.docs-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--tb-space-2);
}

.docs-icon-choice {
    flex-direction: column;
    inline-size: 100%;
    block-size: auto;
    padding-block: var(--tb-space-3);
    overflow-wrap: anywhere;
}

.docs-palette__summary {
    margin-block: var(--tb-space-1) var(--tb-space-3);
    color: var(--tb-color-text-muted);
}

.docs-palette__panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--tb-space-4);
}

/* Each panel sets its own palette and theme, so it paints its own background and text. */
.docs-palette__panel {
    display: grid;
    gap: var(--tb-space-4);
    padding: var(--tb-space-5);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-background);
    color: var(--tb-color-text);
}

.docs-palette__theme {
    color: var(--tb-color-text-muted);
}

.docs-ramp {
    margin-block: var(--tb-space-4);
}

.docs-ramp__name {
    margin-block-end: var(--tb-space-2);
}

.docs-ramp__steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: var(--tb-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-ramp__step {
    display: grid;
    gap: var(--tb-space-1);
    justify-items: center;
}

.docs-ramp__swatch {
    inline-size: 100%;
    block-size: 2.5rem;
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-md);
}

.docs-ramp__label {
    font-size: var(--tb-font-size-xs);
    color: var(--tb-color-text-muted);
}

/* ---- Code ---- */

/* Code keeps its own line breaks and scrolls sideways when a line is too long, so it never breaks inside a word. */
.docs-source {
    margin: 0;
    padding: 0 var(--tb-space-5) var(--tb-space-4);
    overflow-x: auto;
    white-space: pre;
    font-family: var(--tb-font-family-mono);
    font-size: var(--tb-font-size-sm);
    line-height: 1.5;
}

/* Code stays left to right on a right-to-left page; otherwise a leading -- or a trailing ) jumps to the other end. */
code,
.docs-source,
.docs-install {
    direction: ltr;
    unicode-bidi: isolate;
}

.docs-code {
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface-raised);
}

.docs-code__bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--tb-space-1) var(--tb-space-2) 0;
}

/* Token colors meet 4.5:1 on the code's background in both themes; forced-colors mode swaps in the system colors. */
.docs-code__keyword {
    color: light-dark(#6d28d9, #c4b5fd);
}

.docs-code__string {
    color: light-dark(#166534, #86efac);
}

.docs-code__comment {
    color: light-dark(#4b5563, #a1a1aa);
    font-style: italic;
}

.docs-code__tag {
    color: light-dark(#1d4ed8, #93c5fd);
}

.docs-code__attribute {
    color: light-dark(#9a3412, #fdba74);
}

.docs-code__number {
    color: light-dark(#0f766e, #5eead4);
}

.docs-source__file {
    margin-block: var(--tb-space-5) var(--tb-space-2);
    color: var(--tb-color-text-muted);
    font-family: var(--tb-font-family-mono);
}

.docs-source:focus-visible,
.docs-api:focus-visible,
.docs-install:focus-visible {
    outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
    outline-offset: var(--tb-focus-ring-offset);
}

.docs-note {
    color: var(--tb-color-text-muted);
}

/* ---- API tables ---- */

.docs-api__name {
    margin-block: var(--tb-space-6) var(--tb-space-2);
}

.docs-api__summary {
    margin-block-end: var(--tb-space-2);
}

.docs-api {
    overflow-x: auto;
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
}

.docs-api table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tb-font-size-sm);
}

.docs-api th,
.docs-api td {
    padding: 0.6rem var(--tb-space-4);
    border-block-end: 1px solid var(--tb-border-subtle);
    text-align: start;
    vertical-align: top;
}

.docs-api thead th {
    background: var(--tb-color-surface-raised);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-xs);
    font-weight: var(--tb-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.docs-api tbody tr:last-child > * {
    border-block-end: none;
}

.docs-api tbody th {
    font-weight: normal;
    white-space: nowrap;
}

/* A key, as the keyboard tables show them. */
kbd {
    display: inline-block;
    min-inline-size: 1.6em;
    padding: 0.05em 0.45em;
    border: 1px solid var(--tb-border-strong);
    border-block-end-width: 2px;
    border-radius: var(--tb-radius-sm);
    background: var(--tb-color-surface-raised);
    color: var(--tb-color-text);
    font-family: var(--tb-font-family-mono);
    font-size: 0.85em;
    text-align: center;
    white-space: nowrap;
}

@media (forced-colors: active) {
    kbd {
        border-color: CanvasText;
    }
}

.docs-api .docs-keys__when {
    background: var(--tb-color-surface-raised);
    font-weight: var(--tb-font-weight-medium);
}

/* A guide's row headers can be prose, so they wrap rather than push the answers off a phone's screen. */
.docs-article--guide .docs-api tbody th {
    white-space: normal;
}

.docs-article--guide .docs-api tbody th code {
    white-space: nowrap;
}

.docs-api__required {
    display: block;
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-xs);
}

.docs-api__group {
    margin-block: var(--tb-space-4) var(--tb-space-2);
}

.docs-api__anchor {
    margin-inline-start: var(--tb-space-1);
    color: var(--tb-color-text-muted);
}

.docs-api__anchor:hover {
    color: var(--docs-brand-text);
}

.docs-api__values {
    margin: var(--tb-space-1) 0 0;
    padding-inline-start: var(--tb-space-4);
    color: var(--tb-color-text-muted);
}

.docs-api__value {
    white-space: nowrap;
}

/* On a phone the header row is visually hidden, so each cell shows its own column name. */
.docs-api__label {
    display: none;
}

/* The docs' own text only; an example must look as it does in an app, and listings set their own size. */
:is(.docs-main, .docs-article__body) > :is(p, h3, .docs-heading--h3, ul, ol, .tb-alert) code,
.docs-notes code,
.docs-tokens code,
.docs-api code {
    padding: 0.1em 0.35em;
    border-radius: var(--tb-radius-md);
    background: var(--docs-brand-subtle);
    color: var(--docs-brand-text);
    font-family: var(--tb-font-family-mono);
    font-size: 0.86em;
}

/* A wide screen gives examples, code and tables room, while running text keeps a readable line length. */
:is(.docs-main, .docs-article__body) > :is(p, ul, ol) {
    box-sizing: border-box;
    max-width: 52rem;
}

:is(.docs-main, .docs-article__body) > p + p {
    margin-block-start: var(--tb-space-3);
}

/* A guide's text, code, tables and callouts are spaced alike; headings keep their own spacing. */
.docs-article--guide .docs-article__body > :not(h1, h2, h3, .docs-heading)
    + :not(h2, h3, .docs-heading, .docs-article__folded) {
    margin-block-start: var(--tb-space-4);
}

/* An API page's anatomy, notes and parts table are spaced as a guide's are. */
.docs-article--api .docs-article__body > :is(p, .docs-code, .docs-api) + :is(p, .docs-code, .docs-api) {
    margin-block-start: var(--tb-space-4);
}

.docs-article__body > :is(h3, .docs-heading--h3) {
    margin-block: var(--tb-space-8) 0;
    font-family: var(--docs-display);
}

.docs-article__body > .tb-alert {
    margin-block: var(--tb-space-3);
}

.docs-article__body > :is(h3, .docs-heading--h3) + * {
    margin-block-start: var(--tb-space-2);
}

.docs-notes {
    margin: 0;
    padding-inline-start: var(--tb-space-5);
    line-height: 1.65;
}

.docs-notes > li + li {
    margin-block-start: var(--tb-space-2);
}

.docs-swatch {
    display: inline-block;
    inline-size: 1.25rem;
    block-size: 0.875rem;
    margin-inline-end: var(--tb-space-2);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-sm);
    vertical-align: middle;
}

.docs-brand-preview {
    display: grid;
    gap: var(--tb-space-3);
    max-inline-size: 28rem;
    margin-block: var(--tb-space-3);
}

.docs-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-2);
    margin: var(--tb-space-3) 0 0;
    padding: 0;
    list-style: none;
}

/* ---- Cards ---- */

.docs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--tb-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole card is the link's target, through the title link stretched over it. */
.docs-card {
    position: relative;
    display: grid;
    gap: var(--tb-space-1);
    align-content: start;
    padding: var(--tb-space-4) var(--tb-space-5);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface);
    transition: border-color var(--tb-motion-duration-fast) ease, box-shadow var(--tb-motion-duration-fast) ease,
        translate var(--tb-motion-duration-fast) ease;
}

.docs-card:hover {
    border-color: color-mix(in srgb, var(--docs-brand) 55%, var(--tb-border-subtle));
    box-shadow: var(--tb-shadow-md);
    translate: 0 -2px;
}

.docs-card__title {
    font-family: var(--docs-display);
    font-weight: var(--tb-font-weight-bold);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.docs-card > .docs-card__title::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ---- Home ---- */

.docs-wrap {
    max-width: var(--docs-wrap);
    margin-inline: auto;
    padding-inline: max(var(--tb-space-4), 4vw);
}

.docs-hero {
    padding-block: var(--tb-space-16);
    border-block-end: 1px solid var(--tb-border-subtle);
    background:
        radial-gradient(70rem 30rem at 85% -10%, var(--docs-glow), transparent 60%),
        linear-gradient(180deg, var(--docs-tint), var(--tb-color-background));
}

.docs-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--tb-space-12);
    align-items: center;
}

.docs-eyebrow {
    margin: 0 0 var(--tb-space-3);
    color: var(--docs-brand-text);
    font-family: var(--tb-font-family-mono);
    font-size: var(--tb-font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.docs-hero__title {
    margin: 0 0 var(--tb-space-5);
    font-family: var(--docs-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* The logo's violet-to-blue fade, clipped to the text; forced colors drop the background and repaint the text. */
.docs-brand__fade,
.docs-hero__title span {
    background: var(--docs-brand-fade);
    background-clip: text;
    color: transparent;
}

.docs-hero__lede {
    max-width: 36rem;
    margin: 0 0 var(--tb-space-8);
    line-height: 1.6;
}

.docs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-space-3);
}

/* The hero's main button wears the site's brand accent rather than the palette's. */
.docs-hero__actions .tb-button--filled {
    --tb-button-fill: var(--docs-brand);
    --tb-button-fill-hover: color-mix(in srgb, var(--docs-brand) 88%, var(--tb-color-text));
    --tb-button-fill-active: color-mix(in srgb, var(--docs-brand) 76%, var(--tb-color-text));
    --tb-button-on-fill: var(--docs-on-brand);
}

.docs-install {
    display: inline-flex;
    gap: var(--tb-space-2);
    max-width: 100%;
    margin: var(--tb-space-6) 0 0;
    padding: var(--tb-space-2) var(--tb-space-4);
    overflow-x: auto;
    border: 1px dashed var(--tb-border-subtle);
    border-radius: var(--tb-radius-lg);
    background: var(--tb-color-surface);
    color: var(--tb-color-text-muted);
    font-family: var(--tb-font-family-mono);
    font-size: var(--tb-font-size-sm);
    white-space: nowrap;
}

.docs-install b {
    color: var(--docs-brand-text);
    font-weight: normal;
}

.docs-window {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface);
    box-shadow: var(--tb-shadow-md);
}

.docs-window__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem var(--tb-space-4);
    border-block-end: 1px solid var(--tb-border-subtle);
    color: var(--tb-color-text-muted);
    font-family: var(--tb-font-family-mono);
    font-size: var(--tb-font-size-xs);
}

.docs-window__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tb-border-subtle);
}

.docs-window__bar span {
    margin-inline-start: var(--tb-space-2);
}

.docs-window__tabs {
    padding: var(--tb-space-2) var(--tb-space-4) 0;
}

.docs-window__body {
    padding: var(--tb-space-4) var(--tb-space-1) var(--tb-space-5);
}

.docs-window .docs-code {
    margin-block: var(--tb-space-3) var(--tb-space-4);
}

.docs-band {
    padding-block: var(--tb-space-16);
}

.docs-band--tinted {
    border-block: 1px solid var(--tb-border-subtle);
    background: var(--docs-tint);
}

.docs-band__head {
    max-width: 44rem;
    margin-block-end: var(--tb-space-8);
}

.docs-band__head h2 {
    margin: 0 0 var(--tb-space-2);
    font-family: var(--docs-display);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.docs-band__head p {
    line-height: 1.6;
}

.docs-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--tb-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-feature {
    padding: var(--tb-space-5) var(--tb-space-6);
    border: 1px solid var(--tb-border-subtle);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface);
}

.docs-feature h3 {
    margin-block-end: var(--tb-space-2);
    font-family: var(--docs-display);
    letter-spacing: -0.01em;
}

.docs-feature h3::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 4px;
    margin-block-end: var(--tb-space-3);
    border-radius: var(--tb-radius-full);
    background: var(--docs-brand);
}

.docs-feature p {
    line-height: 1.6;
}

.docs-band--pillars {
    padding-block-end: 0;
}

.docs-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--tb-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tb-space-3);
    min-width: 0;
    padding: var(--tb-space-6) var(--tb-space-8);
    border: 1px solid var(--tb-border-subtle);
    border-inline-start: 4px solid var(--docs-brand);
    border-radius: var(--tb-radius-xl);
    background: var(--tb-color-surface);
}

.docs-pillar h3 {
    margin: 0;
    font-family: var(--docs-display);
    letter-spacing: -0.01em;
}

.docs-pillar p {
    margin: 0;
    line-height: 1.6;
}

.docs-pillar .docs-code {
    align-self: stretch;
}

.docs-pillar > :last-child {
    margin-block-start: auto;
    padding-block-start: var(--tb-space-2);
    font-weight: var(--tb-font-weight-medium);
}

.docs-telemetry {
    display: grid;
    gap: var(--tb-space-4);
    margin-block: var(--tb-space-4);
}

.docs-group + .docs-group {
    margin-block-start: var(--tb-space-10);
}

.docs-group__title {
    display: flex;
    align-items: center;
    gap: var(--tb-space-2);
    margin: 0 0 var(--tb-space-4);
    font-family: var(--docs-display);
    font-size: var(--tb-font-size-lg);
}

.docs-group__count {
    padding: 0 var(--tb-space-2);
    border-radius: var(--tb-radius-full);
    background: var(--docs-brand-subtle);
    color: var(--docs-brand-text);
    font-family: var(--tb-font-family-mono);
    font-size: var(--tb-font-size-xs);
    font-weight: normal;
}

/* ---- Footer ---- */

.docs-footer {
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--tb-space-2) var(--tb-space-6);
    padding: var(--tb-space-6) max(var(--tb-space-4), 4vw);
    border-block-start: 1px solid var(--tb-border-subtle);
    background: var(--tb-color-surface);
    color: var(--tb-color-text-muted);
    font-size: var(--tb-font-size-sm);
}

.docs-footer p {
    margin: 0;
}

/* ---- Narrow screens ---- */

@media (max-width: 72rem) {
    /* The header keeps to one row: the brand, then buttons that open the search or the rest of the header below it.
       The padding alone makes that row 4rem tall, so it doesn't shift when a panel opens below. */
    .docs-header__inner {
        flex-wrap: wrap;
        padding-block: var(--tb-space-3);
    }

    .docs-brand {
        margin-inline-end: auto;
    }

    .docs-header__toggle {
        display: inline-flex;
    }

    .docs-site-nav,
    .docs-search,
    .docs-look {
        display: none;
        flex-basis: 100%;
    }

    .docs-header__inner--menu :is(.docs-site-nav, .docs-look) {
        display: flex;
    }

    /* A block, not a flex row, so the field fills the row. */
    .docs-header__inner--search .docs-search {
        display: block;
    }
}

/* The narrowest phones have no room for the name beside the buttons; screen readers still hear it. */
@media (max-width: 22rem) {
    .docs-brand__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (max-width: 64rem) {
    .docs-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48rem) {
    .docs {
        grid-template: "header" auto "nav" auto "main" 1fr "footer" auto / minmax(0, 1fr);
    }

    .docs-header__inner {
        padding-inline: var(--tb-space-4);
    }

    .docs-nav {
        position: static;
        max-height: none;
        border-inline-end: none;
        border-block-end: 1px solid var(--tb-border-subtle);
    }

    .docs-nav:not(.docs-nav--open) {
        display: none;
    }

    .docs-main {
        padding: var(--tb-space-5) var(--tb-space-4) var(--tb-space-10);
    }

    .docs-hero,
    .docs-band {
        padding-block: var(--tb-space-10);
    }

    /* A member's type, default and description stack under its name, so nothing scrolls sideways. The header row
       and an empty cell stay in the table for screen readers, so the cells keep their columns. */
    .docs-api--members thead,
    .docs-api--members .docs-api__none {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .docs-api--members tbody tr {
        display: grid;
        gap: var(--tb-space-1);
        padding: var(--tb-space-3) var(--tb-space-4);
        border-block-end: 1px solid var(--tb-border-subtle);
    }

    .docs-api--members tbody tr:last-child {
        border-block-end: none;
    }

    .docs-api--members tbody :is(th, td) {
        padding: 0;
        border: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Matches the guide rule's specificity and comes after it, so a long member name wraps. */
    .docs-article .docs-api--members tbody th code {
        white-space: normal;
    }

    .docs-api--members .docs-api__label {
        display: inline;
        margin-inline-end: var(--tb-space-1);
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-xs);
    }
}

/* The tabs example marks a tab whose fields need attention. */
.tb-tabs__tab.docs-tab-attention {
    color: var(--tb-color-danger-text);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-start: 0.5rem;
}