/*
 * Every component is its own PHP page, so moving through the sidebar is a real navigation.
 * This makes the browser cross-fade between the two documents instead of flashing — the load
 * still happens, it just stops looking like one.
 *
 * Two reasons it is only two lines. The duration and the reduced-motion opt-out already exist:
 * `uui-primitives.css` sets all four `(root)` pseudo-elements to 150ms and to `animation: none`
 * under `prefers-reduced-motion`, and those apply to a cross-document transition as readily as
 * to a same-document one. And nothing is given a `view-transition-name` on purpose — a
 * permanent name makes *every* unrelated transition capture that element as its own group,
 * which cost 64 spurious groups on the Toggle page once already.
 *
 * This only became possible on 2026-09-24, when Clean room stopped wrapping the page in Shadow
 * DOM: a view transition never captured anything inside a shadow tree.
 */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/*
 * `!important` is load-bearing here and is not a shortcut. The site declares
 * `body, html { background: var(--rd-font-light) !important }`, and an important declaration
 * beats any specificity a normal rule can reach, so without a matching `!important` the page
 * stays white behind a dark theme — visible as a white strip below the sidebar.
 *
 * This is only a problem for a page that takes over the whole document, which the catalogue
 * does. A rewritten *region* wrapped in `uui-scope` paints its own surfaces and never asks the
 * body for a colour, so the library itself needs no `!important` anywhere.
 */
body.rd-uui-catalogue-page {
    min-width: 0;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: var(--uui-bg-secondary) !important;
}

/*
 * Elevation is a relationship, not a value, and a single alias cannot carry it across themes.
 * The catalogue paints its page with `--uui-bg-secondary` and every card with `--uui-bg-primary`,
 * which in light means a white card lifting off a #fafafa page. Under dark those two tokens keep
 * their names but reverse their order — bg-primary is the *darkest* step — so the same markup
 * pushed every card below its own page.
 *
 * Untitled UI does not swap them: it leaves a card at bg-primary and separates it with a ring,
 * which AppV4 follows too. That reads fine on a phone and flat across a 1900px catalogue, so the
 * catalogue swaps the pair for its own chrome only. The library keeps their convention, and if a
 * rewritten screen wants this behaviour the right move is to promote it to a named elevation
 * pair in uui-primitives.css rather than to copy these two lines.
 *
 * Only the catalogue subtree is affected, and only under `.uui-dark`; components are unaffected
 * either way because generated CSS references ramp steps, never these aliases.
 */
.uui-dark body.rd-uui-catalogue-page,
.uui-monokai body.rd-uui-catalogue-page {
    --uui-bg-primary: var(--uui-color-neutral-50);
    --uui-bg-secondary: var(--uui-color-base-white);
}

.rd-uui-catalogue-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
}

/*
 * The page header, rebuilt from `--uui-*` on 2026-09-24.
 *
 * It used to be `pc-main-header`, the last piece of the site's component layer on this page —
 * which meant it rendered unstyled in Clean room, because Clean room is the absence of the
 * site cascade. A catalogue whose own chrome falls apart in one of its two style contexts is
 * reporting on itself rather than on the library, so the header is ours now.
 *
 * Every value is measured from what `pc-main-header` rendered in Site CSS, so the change is
 * invisible: bar 64px, ground `#1a2e49`, the 1.6px rule beneath it, mark at 44px, headline at
 * 104px in 22px semibold white. The rule's colour turned out to be `#d66181` exactly — the
 * published `--uui-color-brand-500` — so it is tokenised rather than repeated. The navy has no
 * token: it is Pflegecampus chrome, not a Figma foundation, and inventing a token for one use
 * would imply the library owns a colour it does not.
 *
 * The feedback link is deliberately gone. It belonged to the product shell, not here.
 */
.rd-uui-catalogue-header {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    /* 44px is the measured inset of the old mark; the 8px gap then lands the headline on its
       measured 104px. Neither is on the spacing scale, and both are chrome rather than layout. */
    gap: 8px;
    /* `min-block-size` as well as `block-size`, because the site stylesheet has an opinion about
       bare `header` and sets `min-height: 70px` on it. A height alone loses to a larger minimum,
       so the bar came out 70px in Site CSS and 64px in Clean room — the same page reporting two
       different geometries. A region that themes must declare every property the host page
       styles, which is the rule `uui-scope` exists for and does not cover for lengths. */
    block-size: 64px;
    min-block-size: 64px;
    padding-inline: 44px;
    border-block-end: 1.6px solid var(--uui-color-brand-500);
    background: #1a2e49;
}

.rd-uui-catalogue-header__mark {
    flex: 0 0 auto;
    inline-size: 42px;
    block-size: 42px;
}

/*
 * Clean room and theme live here rather than above the view title: they are properties of the
 * whole catalogue, not of the component being looked at, and the view header was announcing
 * that with a "Stil-Kontext" label it no longer needs now that position says it.
 *
 * Both controls sit on the navy bar, so they are given the ground they are drawn for — the
 * imported components read `--uui-text-*`, and on this one surface those aliases would resolve
 * to the page's dark-on-light values.
 */
.rd-uui-catalogue-header__controls {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-6);
    margin-inline-start: auto;
}

/*
 * `!important` for the reason already given at the sidebar and the playground inputs: the
 * generated rules carry four and more reflected attribute selectors, and out-weighting them
 * by specificity would mean copying that chain here and having it break silently the day an
 * axis is renamed. Without it these rules lose and the label stays neutral-700 on navy.
 */
.rd-uui-catalogue-header__controls .uui-toggle__label,
.rd-uui-catalogue-header__controls .uui-select__value,
.rd-uui-catalogue-header__controls .uui-select__icon {
    color: var(--uui-color-base-white) !important;
}

.rd-uui-catalogue-header__controls .uui-select__input {
    background: rgb(255 255 255 / 10%) !important;
    border-color: rgb(255 255 255 / 28%) !important;
    box-shadow: none !important;
}

/*
 * The switch hugs its label here instead of keeping Figma's 344px box.
 *
 * That box is the artboard the toggle was drawn on, and it is invisible until something measures
 * it: the tooltip anchors to the *host*, so a 344px host centred its arrow 114px to the right of
 * the visible switch — pointing at nothing. The frozen-width rule again, in its chrome variant:
 * a component used as page furniture must not carry the width of the frame it was drawn in.
 */
.rd-uui-catalogue-header__controls uui-toggle,
.rd-uui-catalogue-header__controls .uui-toggle__root {
    inline-size: auto !important;
}

.rd-uui-catalogue-header__title {
    margin: 0;
    color: var(--uui-color-base-white);
    font-family: var(--uui-font-family), system-ui, sans-serif;
    font-size: 22px;
    line-height: 29px;
    font-weight: var(--uui-font-weight-semibold);
}

.rd-uui-catalogue-workspace {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.rd-uui-catalogue-nav {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 300px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 300px;
    min-width: 260px;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--uui-border-secondary);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-5) var(--uui-spacing-4) var(--uui-spacing-3);
}

.rd-uui-catalogue-nav__header p,
.rd-uui-catalogue-nav__header h2,
.rd-uui-catalogue-nav__group h3,
.rd-uui-catalogue__section-intro h2,
.rd-uui-catalogue__section-intro p,
.rd-uui-catalogue__metadata,
.rd-uui-catalogue figure {
    margin: 0;
}

/*
 * The sidebar title, the group headings and the eyebrow share one treatment: uppercase, letter
 * spaced, `text-sm` semibold on tertiary. It is the label style the header carried for "DESIGN
 * SYSTEM" when it was still two lines, and the one to keep — the sidebar title names the room,
 * it is not a headline competing with the page's own `h1`.
 */
.rd-uui-catalogue-nav__header p,
.rd-uui-catalogue-nav__header h2,
.rd-uui-catalogue-nav__group h3,
.rd-uui-catalogue__eyebrow {
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-sm-font-size);
    font-weight: var(--uui-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rd-uui-catalogue-nav__header > span,
/* The imported navigation owns its own spacing and states; the catalogue only gives it
   somewhere to scroll. */
.rd-uui-catalogue-nav__list {
    display: block;
    min-height: 0;
    padding: var(--uui-spacing-3) var(--uui-spacing-4);
    overflow-x: hidden;
    overflow-y: auto;
    /* The catalogue's own chrome, not a component: this list scrolls by wheel, trackpad and
       keyboard, and a permanent bar down a 300px column is the loudest thing in the window.
       Same pattern as `BotPageLink.css` and the AppV2 shell. */
    scrollbar-width: none;
}

.rd-uui-catalogue-nav__list::-webkit-scrollbar {
    display: none;
}

/*
 * Figma froze both box dimensions of the sidebar, and a catalogue column is neither of them.
 * `Sidebar navigation`'s root is 280×960 with its own `overflow-y: auto`, and every `nav item`
 * inside it is 272px wide. Dropped into a 300px column that is taller than 960px, that produced
 * **two nested scrollers on the same axis** — the component scrolling its artboard inside the
 * catalogue scrolling the component — plus a horizontal bar, because a 272px item in a 231px
 * content box overhangs by 41px and `align-items: flex-start` lets it.
 *
 * Width and height are layout, and layout is the consumer's decision — the same reasoning as
 * `stretchToParent()` in the translator, applied from outside so the generated stylesheet stays
 * literal and `?view=sidebar-navigation` keeps showing the measured Figma box. Hence the scope:
 * this releases the sidebar only where the catalogue itself uses it as chrome.
 *
 * `!important` rather than a specificity duel, for the reason already written at the playground
 * inputs below: the generated rules carry four reflected attribute selectors, and out-weighting
 * them would mean copying that chain here and having it break silently the day an axis is
 * renamed.
 */
.rd-uui-catalogue-nav__list .uui-sidebar-navigation__root {
    inline-size: 100% !important;
    block-size: auto !important;
}

/* The one scroller that remains is the catalogue's. */
.rd-uui-catalogue-nav__list .uui-sidebar-navigation__nav {
    overflow: visible !important;
}

.rd-uui-catalogue-nav__list :is(
    uui-nav-item,
    .uui-nav-item__root,
    .uui-nav-item__content,
    .uui-nav-item__group
) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

.rd-uui-catalogue-nav__footer {
    padding: var(--uui-spacing-3) var(--uui-spacing-4);
    border-top: 1px solid var(--uui-border-secondary);
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-sm-font-size);
}

/*
 * The content column is the container every catalogue layout responds to. Viewport media
 * queries lie here: the sidebar takes 300px of the window, and the page is often shown in a
 * split window beside Copi, so what matters is how wide *this column* is. Container queries
 * are supported in every browser the catalogue targets.
 */
.rd-uui-catalogue-content {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: auto;
    background: var(--uui-bg-secondary);
    container-type: inline-size;
    container-name: catalogue;
    /*
     * Scroll anchoring off, because the router restores positions itself.
     *
     * The back button puts back the offset the page had when it was fully rendered. Replaying it
     * means scrolling a region whose custom elements upgrade a frame later, and anchoring reads
     * that growth as content shifting under the reader and compensates — measured, the restored
     * position settled 74px past the one that was saved. Only one of the two can be right about
     * where the reader was, and it is the one that wrote the number down.
     */
    overflow-anchor: none;
}

/*
 * A band for the imported `uui-page-header` to sit in, and nothing more: the heading, the
 * breadcrumb and the space between them belong to the component. Rules that used to style
 * `h1` and `p` in here were removed with the hand-written markup — left in place they would
 * have kept reaching into the component's own parts and quietly overriding its typography,
 * which is the opposite of using it.
 */
.rd-uui-catalogue-view-header {
    position: sticky;
    z-index: 100;
    top: 0;
    display: block;
    padding: var(--uui-spacing-5) var(--uui-spacing-10);
    border-bottom: 1px solid var(--uui-border-secondary);
    background: var(--uui-bg-secondary);
}

.rd-uui-catalogue {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: var(--uui-spacing-6);
    padding: var(--uui-spacing-6);
}

.rd-uui-catalogue > section {
    box-sizing: border-box;
    padding: var(--uui-spacing-4);
}

.rd-uui-catalogue__variants,
.rd-uui-catalogue__playground,
.rd-uui-catalogue__hierarchy {
    display: grid;
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__playground {
    padding: var(--uui-spacing-10);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__playground-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__playground-preview {
    display: grid;
    align-content: start;
    gap: var(--uui-spacing-4);
    min-width: 0;
}

/*
 * Top-aligned, not centred. A centred stage looks tidier for a badge, but anything that can
 * grow — a tree view expanding a branch, a select opening, an accordion — pushes its own top
 * edge upward as it does, so the thing you are looking at moves while you interact with it.
 * Predictable beats pretty in a reference tool. Horizontal centring stays.
 */
.rd-uui-catalogue__playground-canvas {
    display: grid;
    min-height: 240px;
    place-items: start center;
    padding: var(--uui-spacing-6);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__playground-canvas[data-uui-playground-wide] {
    justify-items: start;
    overflow-x: auto;
}

/*
 * The snippet under the canvas. It is the take-away of the whole page, so it gets the same
 * treatment as a showcase code block rather than being squeezed into the status line.
 */
.rd-uui-catalogue__playground-code {
    display: grid;
    gap: var(--uui-spacing-2);
    justify-items: start;
    margin: 0;
    min-width: 0;
}

.rd-uui-catalogue__playground-code pre {
    box-sizing: border-box;
    inline-size: 100%;
    margin: 0;
    padding: var(--uui-spacing-3);
    overflow: auto;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-secondary);
    font-size: var(--uui-text-sm-font-size);
    line-height: 1.55;
}

.rd-uui-catalogue__playground-controls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    align-content: start;
    gap: var(--uui-spacing-4);
}

/*
 * The playground's controls are real `uui-select` / `uui-input-field` components — the catalogue
 * showcases the library by using it, so the only thing needed here is grid behaviour.
 */
.rd-uui-catalogue__playground-input {
    min-width: 0;
}

/*
 * Figma draws Select and Input field at their 320px artboard width and the translation keeps that
 * `inline-size`, so both burst out of a 202px grid column. Width is a layout decision and layout
 * belongs to the consumer — the same reasoning as `stretchToParent()` in the translator, applied
 * from the outside so the generated stylesheets stay literal and the component pages keep showing
 * the measured width.
 *
 * `!important` rather than a specificity duel: the generated rules carry four reflected attribute
 * selectors (`[data-uui-component][size][type][state]`), so out-weighting them would mean copying
 * that chain here and breaking silently the day an axis is renamed.
 */
.rd-uui-catalogue__playground-input :is(
    .uui-select__root,
    .uui-select__field,
    .uui-select__input,
    .uui-select__menu,
    .uui-input-field__root,
    .uui-input-field__field,
    .uui-input-field__input
) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

/*
 * The one thing a consumer must decide for `uui-select`: Figma draws its opened menu in flow
 * beneath the trigger, so the generated CSS says that, and in a two-column control grid an
 * opening menu would shove every field below it. Overlaying is explicitly the consumer's call,
 * so the catalogue makes it here rather than in the generated stylesheet, which stays literal.
 *
 * `top: 100%` is measured from the host, which is label plus field — the hint is empty on these.
 */
.rd-uui-catalogue__playground-input[data-uui-component="select"] {
    position: relative;
}

/*
 * A long option label ("Automatisch", a 26-character icon name) must not run out of the
 * field into the next grid column. Figma's select is 320px wide and never wraps, so the
 * generated CSS has no opinion on what happens in 180px; the consumer truncates.
 */
.rd-uui-catalogue__playground-input[data-uui-component="select"] :is(
    .uui-select__content,
    .uui-select__value-wrap,
    .uui-select__value
) {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-uui-catalogue__playground-input[data-uui-component="select"] .uui-select__menu {
    position: absolute;
    z-index: 30;
    inset-inline: 0;
    top: 100%;
}

.rd-uui-catalogue__section-intro {
    display: grid;
    max-width: 820px;
    gap: var(--uui-spacing-2);
}

.rd-uui-catalogue__section-intro p {
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-lg-font-size);
    line-height: 1.6;
}

.rd-uui-catalogue__eyebrow {
    justify-self: start;
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
    border-radius: var(--uui-radius-full);
    background: var(--uui-bg-brand-primary);
    color: var(--uui-text-brand-secondary);
}

/* --------------------------------------------- Overview, the document page */

/*
 * Overview is the one view with no component on it. It documents the bridge in prose and is
 * therefore the library's typography specimen: every size in its markup is a `uui-*` tier class
 * and both measures are `uui-container` steps, so this file decides nothing about type at all.
 * What is left for it to decide is where the figure sits and how a list hangs — layout, which is
 * always the consumer's job.
 *
 * Deliberately centred, while every other view is left-aligned and full-bleed. A document that
 * is read end to end wants a measure; a variant matrix wants the whole window.
 */
.rd-uui-catalogue__doc {
    display: grid;
    gap: var(--uui-spacing-10);
    padding-block: var(--uui-spacing-4);
}

.rd-uui-catalogue__doc-head {
    display: grid;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__doc-head p {
    margin: 0;
}

.rd-uui-catalogue__figure {
    display: grid;
    gap: var(--uui-spacing-3);
    margin: 0;
}

/*
 * The diagram paints its own page — a light wash, white cards, coloured rules — so it is artwork,
 * not a themed surface: under `.uui-dark` an inverted frame around a light drawing reads as a
 * bug rather than as dark mode. The paper therefore stays light in all three themes, which means
 * it must reach for ramp steps (theme-independent by construction) and never for the `--uui-bg-*`
 * aliases, whose whole job is to change with the theme.
 *
 * 1040px is not the container's own step: it is the width at which the diagram's smallest labels
 * are still readable while the page still stops around two printed sides. Set through the
 * primitive's knob rather than as a `max-width` here, so the container keeps owning width.
 */
.rd-uui-catalogue__figure-paper {
    --uui-container-max: 1040px;

    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-color-neutral-200);
    border-radius: var(--uui-radius-xl);
    background: var(--uui-color-base-white);
    box-shadow: var(--uui-shadow-xs);
}

.rd-uui-catalogue__figure-paper img {
    display: block;
    width: 100%;
    height: auto;
}

.rd-uui-catalogue__doc-body {
    display: grid;
    gap: var(--uui-spacing-10);
}

.rd-uui-catalogue__doc-body section {
    display: grid;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__doc-body h3 {
    margin: 0;
}

.rd-uui-catalogue__doc-body a {
    color: var(--uui-text-brand-secondary);
}

/*
 * Inline code, for the whole catalogue rather than per view — this has now bitten twice.
 *
 * The site styles bare `code` with three properties that survive into a themed page: a fixed red
 * `color`, a light-grey `border`, and `white-space: nowrap`. The first two came out as red-on-dark
 * inside a pale ring under `.uui-dark`; the third was worse, because it is a *layout* property —
 * an icon card's 583px snippet refused to wrap inside its 376px card, overflowed the grid and
 * pushed the copy button out of the card entirely. `overflow-wrap: anywhere` cannot help while
 * `white-space` says no wrapping.
 *
 * Clean room does not cover any of this: it isolates previews, not the page around them. **A
 * region that themes has to declare every property the host has an opinion about** — including
 * the ones that look like typography and behave like layout.
 *
 * One tier down in size, because monospace has a larger apparent size than Inter at the same
 * nominal one.
 */
.rd-uui-catalogue code {
    padding-inline: var(--uui-spacing-1);
    border: 0;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-tertiary);
    color: var(--uui-text-secondary);
    font-size: var(--uui-text-sm-font-size);
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * Inside a `<pre>` none of that applies: a code block preserves its own formatting and scrolls
 * rather than wraps, which is why the block gets `overflow: auto` further down. Without this
 * reset the rule above would make every showcase snippet re-wrap and lose its indentation.
 */
.rd-uui-catalogue pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    white-space: inherit;
    overflow-wrap: normal;
}

/*
 * highlight.js theme, written against `--uui-*` instead of shipping one of its 80 stylesheets.
 *
 * Those are fixed colour files: drop in `github.css` and the code stays light under `.uui-dark`
 * and clashes under `.uui-legacy`, because the catalogue has three themes and a stock stylesheet
 * knows about none of them. Seven token classes is the whole surface the HTML and CSS grammars
 * actually emit, so mapping them by hand costs less than carrying a theme that cannot follow.
 *
 * Ramp steps rather than the semantic aliases, for the reason the planning board uses them too:
 * the primitives publish aliases for text, border and background but none for syntax roles, and
 * a ramp step is theme-independent by construction.
 */
.rd-uui-catalogue .hljs-comment,
.rd-uui-catalogue .hljs-quote {
    color: var(--uui-text-quaternary);
    font-style: italic;
}

/* Tag and selector names — the structure of the snippet. */
.rd-uui-catalogue .hljs-tag,
.rd-uui-catalogue .hljs-name,
.rd-uui-catalogue .hljs-selector-tag,
.rd-uui-catalogue .hljs-keyword {
    color: var(--uui-color-indigo-600);
}

/* Attribute and property names. */
.rd-uui-catalogue .hljs-attr,
.rd-uui-catalogue .hljs-attribute,
.rd-uui-catalogue .hljs-selector-class,
.rd-uui-catalogue .hljs-selector-id {
    color: var(--uui-color-teal-700);
}

/* Values: strings, numbers, literals. */
.rd-uui-catalogue .hljs-string,
.rd-uui-catalogue .hljs-number,
.rd-uui-catalogue .hljs-literal,
.rd-uui-catalogue .hljs-built_in {
    color: var(--uui-color-brand-700);
}

.rd-uui-catalogue .hljs-meta,
.rd-uui-catalogue .hljs-variable {
    color: var(--uui-color-orange-700);
}

/*
 * Dark needs lighter steps, not the same ones: a 600/700 step on a near-black surface fails
 * contrast. The ramps do not mirror themselves — only the `--uui-bg-*`/`--uui-text-*` aliases
 * do — so a syntax theme has to state its dark steps explicitly.
 */
.uui-dark .rd-uui-catalogue .hljs-tag,
.uui-dark .rd-uui-catalogue .hljs-name,
.uui-dark .rd-uui-catalogue .hljs-selector-tag,
.uui-dark .rd-uui-catalogue .hljs-keyword {
    color: var(--uui-color-indigo-300);
}

.uui-dark .rd-uui-catalogue .hljs-attr,
.uui-dark .rd-uui-catalogue .hljs-attribute,
.uui-dark .rd-uui-catalogue .hljs-selector-class,
.uui-dark .rd-uui-catalogue .hljs-selector-id {
    color: var(--uui-color-teal-300);
}

.uui-dark .rd-uui-catalogue .hljs-string,
.uui-dark .rd-uui-catalogue .hljs-number,
.uui-dark .rd-uui-catalogue .hljs-literal,
.uui-dark .rd-uui-catalogue .hljs-built_in {
    color: var(--uui-color-brand-300);
}

.uui-dark .rd-uui-catalogue .hljs-meta,
.uui-dark .rd-uui-catalogue .hljs-variable {
    color: var(--uui-color-orange-300);
}

/* The icon snippet reads as a block, one tier smaller than inline code. */
.rd-uui-catalogue__icon-snippet {
    font-size: var(--uui-text-xs-font-size);
}

.rd-uui-catalogue__doc-steps,
.rd-uui-catalogue__doc-points {
    display: grid;
    gap: var(--uui-spacing-3);
    margin: 0;
}

/*
 * Both lists keep their native markers and are styled through `::marker`. The alternative — a
 * counter in a grid column, which is how the old strategy tiles were built — cannot be used for
 * running text: a grid container turns every text run between two inline elements into its own
 * anonymous grid item, so a sentence with a `<strong>` lead-in and an inline `<code>` is torn
 * into four boxes stacked down the column. It renders, which is what makes it worth writing down;
 * it just renders one item 744px tall.
 *
 * `decimal-leading-zero` gives the 01/02 numbering natively, and the browser aligns a native
 * marker to the first line of a wrapped item without being told the line height.
 */
.rd-uui-catalogue__doc-steps {
    padding-inline-start: var(--uui-spacing-8);
    list-style-type: decimal-leading-zero;
}

.rd-uui-catalogue__doc-points {
    padding-inline-start: var(--uui-spacing-6);
}

.rd-uui-catalogue__doc-steps li::marker {
    color: var(--uui-text-brand-secondary);
    font-weight: var(--uui-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.rd-uui-catalogue__doc-points li::marker {
    color: var(--uui-text-brand-secondary);
}

.rd-uui-catalogue__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__stats article {
    display: grid;
    gap: var(--uui-spacing-1);
    padding: var(--uui-spacing-10);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__stats strong {
    color: var(--uui-text-primary);
    font-size: var(--uui-display-sm-font-size);
}

.rd-uui-catalogue__stats span {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__metadata {
    display: grid;
    max-width: 820px;
    gap: var(--uui-spacing-2);
    padding: var(--uui-spacing-10);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__metadata div {
    display: flex;
    justify-content: space-between;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__metadata dt {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__metadata dd {
    margin: 0;
}

.rd-uui-catalogue__component-grid,
.rd-uui-catalogue__size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__component-list {
    display: grid;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__component-grid--forms {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.rd-uui-catalogue__component-grid--dropdowns {
    grid-template-columns: repeat(auto-fit, minmax(min(620px, 100%), 1fr));
}

.rd-uui-catalogue__component-grid--forms .rd-uui-catalogue__render-box {
    justify-content: flex-start;
    overflow-x: auto;
}

.rd-uui-catalogue__interactive-card {
    display: grid;
    justify-items: start;
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-10);
    overflow-x: auto;
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__event-status {
    margin: 0;
    color: var(--uui-text-tertiary);
}

/*
 * 340px, not 150px. The old grid truncated every name it showed — `alert-…`, `bell-o…` — which
 * defeats the one job an icon index has. A card now carries its full name and the exact line to
 * paste, so the column has to be wide enough for both; fewer columns and a longer page is the
 * right trade on a page that exists to be searched.
 */
.rd-uui-catalogue__icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__icon-card {
    display: grid;
    gap: var(--uui-spacing-2);
    min-width: 0;
    padding: var(--uui-spacing-3);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__icon-card-head {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-3);
    min-width: 0;
}

/* The name never truncates — it is the thing being looked up. It wraps instead. */
.rd-uui-catalogue__icon-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rd-uui-catalogue__icon-copy {
    flex: none;
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-full);
    background: var(--uui-bg-primary);
    color: var(--uui-text-tertiary);
    font: inherit;
    font-size: var(--uui-text-xs-font-size);
    cursor: pointer;
}

.rd-uui-catalogue__icon-copy:hover {
    background: var(--uui-bg-secondary);
    color: var(--uui-text-secondary);
}

.rd-uui-catalogue__icon-snippet {
    display: block;
    padding: var(--uui-spacing-2);
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-secondary);
    color: var(--uui-text-tertiary);
    overflow-wrap: anywhere;
}

.rd-uui-catalogue__icon-usage {
    display: grid;
    gap: var(--uui-spacing-2);
}

.rd-uui-catalogue__icon-usage-list {
    display: grid;
    gap: var(--uui-spacing-2);
    margin: 0;
}

.rd-uui-catalogue__icon-usage-list dt {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__icon-usage-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
 * `flex-end`, not `center`: the field carries its own label above the input, so centring the
 * count against the whole component floats it half a line above the box it describes.
 */
.rd-uui-catalogue__icon-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--uui-spacing-4);
}

/* The filter is a real `uui-input-field`; it only needs a width here. */
.rd-uui-catalogue__icon-filter uui-input-field {
    inline-size: 260px;
}

.rd-uui-catalogue__icon-filter p {
    margin: 0;
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__icon-category {
    display: flex;
    flex-direction: column;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__icon-category h3 {
    display: flex;
    align-items: baseline;
    gap: var(--uui-spacing-3);
    margin: 0;
}

.rd-uui-catalogue__icon-category h3 span {
    color: var(--uui-text-tertiary);
    font-weight: normal;
}

.rd-uui-catalogue__component-card,
.rd-uui-catalogue__size-card {
    display: grid;
    align-content: start;
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__component-card h3,
.rd-uui-catalogue__size-card h4 {
    margin: 0;
}

.rd-uui-catalogue__variant-label {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__render-box {
    display: flex;
    min-height: var(--uui-spacing-16);
    align-items: center;
    justify-content: center;
    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__render-box img {
    max-width: 100%;
    height: auto;
}

.rd-uui-catalogue__render-box--wide {
    justify-content: flex-start;
    overflow-x: auto;
}

.rd-uui-catalogue__render-box--wide img {
    max-width: none;
}

/* The floating progress label rides above or below an 8px bar, so the card
   needs room for artwork that legitimately overflows the component box. */
.rd-uui-catalogue__render-box--overflowing {
    padding-block: var(--uui-spacing-8);
    overflow-y: visible;
}

.rd-uui-catalogue__preview-stage {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.rd-uui-catalogue__preview-stage[data-uui-preview-wide] {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

/*
 * A bar pins one part to the left, centres another and pins a third to the right, so it only
 * lays out against a definite full width. The stage is a flex container, which shrink-wraps a
 * block-level child to its max-content — and the parts that are meant to fill the leftover
 * space then collapse onto the centred one. A panel must keep shrink-wrapping (a floating
 * alert is drawn as wide as its message), so the bars are named one by one.
 */
.rd-uui-catalogue__preview-stage[data-uui-preview-wide] > [data-uui-component="pagination"] {
    flex: 1 1 auto;
}

.rd-uui-catalogue__preview-stage[data-uui-dropdown-open],
.rd-uui-catalogue__preview-stage[data-uui-dropdown-playground] {
    min-height: 620px;
    box-sizing: border-box;
    align-items: flex-start;
    padding-inline-start: 260px;
}

.rd-uui-catalogue__variant-row {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    min-height: var(--uui-spacing-12);
    align-items: center;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__variant-row .rd-uui-catalogue__preview-stage {
    justify-self: start;
}

/*
 * Below ~900px of content column the two-column layouts stack: playground controls under
 * the preview, Figma reference under its live render, foundation columns in one. The
 * column width — not the viewport — decides, so a split window beside Copi behaves like a
 * narrow screen while a wide window with the sidebar open does not.
 */
@container catalogue (max-width: 900px) {
    .rd-uui-catalogue__playground-layout,
    .rd-uui-catalogue__foundation-columns,
    .rd-uui-catalogue__komposition-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the rule would sit above the switch and read as a separator between sections. */
    .rd-uui-catalogue__komposition-bar {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .rd-uui-catalogue-view-header,
    .rd-uui-catalogue {
        padding-inline: var(--uui-spacing-6);
    }

    .rd-uui-catalogue__playground {
        padding: var(--uui-spacing-6);
    }

    .rd-uui-catalogue__stats article,
    .rd-uui-catalogue__metadata {
        padding: var(--uui-spacing-5);
    }
}

@container catalogue (max-width: 640px) {
    .rd-uui-catalogue-view-header,
    .rd-uui-catalogue {
        padding-inline: var(--uui-spacing-4);
    }

    .rd-uui-catalogue__metadata div {
        flex-direction: column;
        gap: var(--uui-spacing-1);
    }
}

/*
 * The sidebar is the one thing that responds to the viewport: on a narrow window it stops
 * being a column and becomes a scrollable band above the content, so the content keeps the
 * full width. Its list keeps the imported navigation component; only the frame changes.
 */
@media (max-width: 900px) {
    .rd-uui-catalogue-workspace {
        flex-direction: column;
    }

    .rd-uui-catalogue-nav {
        flex: 0 0 auto;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        max-height: 40vh;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--uui-border-secondary);
    }

    .rd-uui-catalogue-nav__footer {
        display: none;
    }

    .rd-uui-catalogue-content {
        height: auto;
        min-height: 0;
    }
}

/* Colour foundations: a swatch is the content of its card, so it needs a
   visible body of its own rather than the usual preview stage. */
/* ---------------------------------------------------------------- Foundations */

.rd-uui-catalogue__foundations {
    display: grid;
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__quote {
    margin: 0;
    padding-left: var(--uui-spacing-4);
    border-left: 3px solid var(--uui-border-secondary);
    color: var(--uui-text-tertiary);
    font-style: italic;
}

.rd-uui-catalogue__quote cite {
    display: block;
    margin-top: var(--uui-spacing-1);
    font-size: var(--uui-text-sm-font-size);
    font-style: normal;
}

.rd-uui-catalogue__foundation-block {
    display: grid;
    gap: var(--uui-spacing-3);
    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__foundation-block h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--uui-spacing-2);
    margin: 0;
    font-size: var(--uui-display-xs-font-size);
}

.rd-uui-catalogue__foundation-block h3 span {
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-md-font-size);
    font-weight: normal;
}

.rd-uui-catalogue__foundation-columns {
    display: grid;
    grid-template-columns: minmax(min(100%, 320px), 420px) minmax(0, 1fr);
    align-items: start;
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__foundation-stack {
    display: grid;
    align-content: start;
    gap: var(--uui-spacing-6);
    min-width: 0;
}

/* Colour ramps: one dense row per family, 11 chips wide. */
.rd-uui-catalogue__ramps {
    display: grid;
    gap: var(--uui-spacing-1);
}

.rd-uui-catalogue__ramp {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__ramp-name {
    overflow: hidden;
    color: var(--uui-text-primary);
    font-size: var(--uui-text-md-font-size);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-uui-catalogue__ramp-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.rd-uui-catalogue__chip {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 30px;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 3px;
    cursor: help;
}

.rd-uui-catalogue__chip em {
    color: rgb(0 0 0 / 45%);
    font-size: 9px;
    font-style: normal;
    mix-blend-mode: difference;
    filter: invert(1) grayscale(1) contrast(9);
}

.rd-uui-catalogue__chip--used {
    outline: 2px solid var(--uui-text-brand-secondary);
    outline-offset: -2px;
}

/* Scale tables: compact rows, no chrome. */
/*
 * The semantic role layer. Every swatch below paints itself with the role it
 * names — `background: var(--uui-text-primary)` — so the table is not a picture
 * of the import, it is the import rendering. A role that fails to resolve shows
 * up as a transparent cell rather than as a plausible-looking wrong colour.
 */
.rd-uui-catalogue__role-group {
    margin: var(--uui-spacing-6) 0 var(--uui-spacing-2);
    font-size: var(--uui-text-md-font-size);
    color: var(--uui-text-secondary);
}

.rd-uui-catalogue__role-group span {
    margin-inline-start: var(--uui-spacing-2);
    font-weight: var(--uui-font-weight-regular);
    color: var(--uui-text-quaternary);
}

.rd-uui-catalogue__role-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--uui-text-sm-font-size);
    text-align: left;
}

.rd-uui-catalogue__role-table th {
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
    border-bottom: 1px solid var(--uui-border-primary);
    font-weight: var(--uui-font-weight-medium);
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__role-table td {
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
    border-bottom: 1px solid var(--uui-border-secondary);
    vertical-align: middle;
}

/* The last column is prose and must not squeeze the four identifying ones. */
.rd-uui-catalogue__role-table td:last-child {
    width: 45%;
    color: var(--uui-text-tertiary);
}

/*
 * A checkerboard behind every swatch, because the alpha roles are the point of
 * having them: `alpha-black-40` over a white cell is indistinguishable from
 * `neutral-400` until something shows through it.
 */
.rd-uui-catalogue__role-swatch,
.rd-uui-catalogue__role-chip i {
    display: inline-block;
    inline-size: var(--uui-spacing-5);
    block-size: var(--uui-spacing-5);
    border-radius: var(--uui-radius-xs);
    box-shadow: inset 0 0 0 1px var(--uui-border-secondary);
    background-image:
        linear-gradient(45deg, var(--uui-color-neutral-200) 25%, transparent 25%),
        linear-gradient(-45deg, var(--uui-color-neutral-200) 25%, transparent 25%);
    background-size: 6px 6px;
}

/*
 * The role paints the inner layer, the checkerboard stays on the outer one. The
 * colour arrives as a custom property rather than as `background`, because a
 * `background` shorthand in the markup would wipe the pattern it is meant to
 * show through.
 */
.rd-uui-catalogue__role-swatch::before,
.rd-uui-catalogue__role-chip i::before {
    content: "";
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--rd-uui-catalogue-swatch);
}

/* A declared correction, shown beside the reference Figma actually draws. */
.rd-uui-catalogue__role-fix {
    color: var(--uui-text-warning-primary);
    white-space: nowrap;
}

.rd-uui-catalogue__role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uui-spacing-1) var(--uui-spacing-4);
}

.rd-uui-catalogue__role-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--uui-spacing-2);
    font-size: var(--uui-text-xs-font-size);
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__scale-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--uui-text-md-font-size);
    text-align: left;
}

.rd-uui-catalogue__scale-table td {
    padding: 2px var(--uui-spacing-2);
    border-bottom: 1px solid var(--uui-border-secondary);
    vertical-align: middle;
}

.rd-uui-catalogue__scale-value {
    color: var(--uui-text-tertiary);
    text-align: right;
    white-space: nowrap;
}

.rd-uui-catalogue__scale-uses {
    color: var(--uui-text-tertiary);
    text-align: right;
    white-space: nowrap;
}

.rd-uui-catalogue__scale-row--unused {
    opacity: 0.55;
}

.rd-uui-catalogue__scale-bar {
    display: block;
    height: 8px;
    border-radius: 2px;
    background: var(--uui-text-brand-secondary);
}

.rd-uui-catalogue__scale-note {
    margin: 0;
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-md-font-size);
}

.rd-uui-catalogue__radius-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__radius-card {
    display: grid;
    justify-items: center;
    gap: 2px;
    font-size: var(--uui-text-sm-font-size);
}

.rd-uui-catalogue__radius-card span:last-child {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__radius-sample {
    display: block;
    width: 52px;
    height: 34px;
    border: 2px solid var(--uui-text-brand-secondary);
    border-bottom: 0;
    border-left: 0;
}

.rd-uui-catalogue__shadow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-3) var(--uui-spacing-2) var(--uui-spacing-4);
}

.rd-uui-catalogue__shadow-card {
    display: grid;
    justify-items: center;
    gap: var(--uui-spacing-2);
    min-width: 0;
    font-size: var(--uui-text-sm-font-size);
}

.rd-uui-catalogue__shadow-card code {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Literally white, in every theme, on purpose: these swatches exist to show what a shadow looks
 * like, and a shadow rendered on a dark card is a shadow you cannot see. Do not tokenise. */
.rd-uui-catalogue__shadow-sample {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 6px;
    background: #fff;
}

/* A shadow is invisible on its own colour: give the grid a tinted backdrop. */
.rd-uui-catalogue__foundation-block .rd-uui-catalogue__shadow-grid {
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-secondary);
}

/* The shared stat cards are page-sized; the foundations header needs a strip. */
.rd-uui-catalogue__foundations .rd-uui-catalogue__stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__foundations .rd-uui-catalogue__stats article {
    gap: 0;
    padding: var(--uui-spacing-3) var(--uui-spacing-4);
}

.rd-uui-catalogue__foundations .rd-uui-catalogue__stats strong {
    font-size: var(--uui-text-xl-font-size);
}

.rd-uui-catalogue__foundations .rd-uui-catalogue__stats span {
    font-size: var(--uui-text-sm-font-size);
}

.rd-uui-catalogue__type-table td {
    padding: var(--uui-spacing-1) var(--uui-spacing-2);
}

.rd-uui-catalogue__type-sample {
    overflow: hidden;
    color: var(--uui-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Worked examples, built only from --uui-* values. */
.rd-uui-catalogue__examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__examples pre {
    margin: var(--uui-spacing-2) 0 0;
    padding: var(--uui-spacing-3);
    overflow-x: auto;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-secondary);
    font-size: var(--uui-text-sm-font-size);
}

.rd-uui-catalogue__example-stage {
    display: grid;
    place-items: center;
    padding: var(--uui-spacing-4);
    border: 1px dashed var(--uui-border-secondary);
    border-radius: var(--uui-radius-xs);
}

.rd-uui-catalogue-example-panel {
    display: grid;
    gap: var(--uui-spacing-4);
    width: 100%;
    max-width: 360px;
    padding: var(--uui-spacing-6);
    border: 1px solid var(--uui-color-gray-200);
    border-radius: var(--uui-radius-xl);
    background: var(--uui-bg-primary);
    box-shadow: var(--uui-shadow-sm);
}

.rd-uui-catalogue-example-panel__head {
    display: grid;
    gap: var(--uui-spacing-1);
}

.rd-uui-catalogue-example-panel__head strong {
    font-size: var(--uui-text-lg-font-size);
    line-height: var(--uui-text-lg-line-height);
    font-weight: var(--uui-font-weight-semibold);
}

.rd-uui-catalogue-example-panel__head span {
    color: var(--uui-color-gray-600);
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
}

.rd-uui-catalogue-example-panel__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue-example-tiles {
    display: grid;
    gap: var(--uui-spacing-4);
    width: 100%;
}

.rd-uui-catalogue-example-tile {
    display: flex;
    align-items: center;
}

.rd-uui-catalogue-example-tile span {
    width: 44px;
    height: 24px;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-color-brand-200);
}

.rd-uui-catalogue-example-tile em {
    margin-left: var(--uui-spacing-4);
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-sm-font-size);
    font-style: normal;
}

/* ------------------------------------------------------------ Building blocks */

.rd-uui-catalogue__showcase {
    display: grid;
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__showcase-panel {
    display: grid;
    gap: var(--uui-spacing-6);
    /*
     * The panel starts one step below the strip. This was not needed while the strip was
     * `button-minimal`, which has no bottom edge; the `underline` type draws a rail across the
     * full width, and a sentence set 11px under a rule reads as a caption belonging to it rather
     * than as the panel's own first line.
     */
    margin-block-start: var(--uui-spacing-5);
}

.rd-uui-catalogue__showcase-panel[hidden] {
    display: none;
}

.rd-uui-catalogue__block {
    display: grid;
    gap: var(--uui-spacing-4);
    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uui-spacing-4);
}

.rd-uui-catalogue__block-head h3 {
    margin: 0;
    font-size: var(--uui-display-xs-font-size);
}

.rd-uui-catalogue__block-head p {
    margin: 0;
    max-width: 62ch;
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-md-font-size);
}

.rd-uui-catalogue__block-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--uui-spacing-4);
}

/* A page pattern needs the whole width; a small block reads better beside its code. */
.rd-uui-catalogue__block[data-uui-block-wide] .rd-uui-catalogue__block-body {
    grid-template-columns: minmax(0, 1fr);
}

.rd-uui-catalogue__block[data-uui-block-wide] .rd-uui-catalogue__block-stage {
    padding: var(--uui-spacing-4) var(--uui-spacing-2);
}

/* The stage is the neutral page a block would sit on, never a card of its own. */
.rd-uui-catalogue__block-stage {
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: auto;
    padding: var(--uui-spacing-6) var(--uui-spacing-4);
    border-radius: var(--uui-radius-xs);
    background:
        linear-gradient(var(--uui-bg-secondary), var(--uui-bg-secondary)) padding-box,
        repeating-conic-gradient(rgb(0 0 0 / 3%) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
}

.rd-uui-catalogue__block-code {
    display: grid;
    gap: var(--uui-spacing-2);
    min-width: 0;
}

.rd-uui-catalogue__block-code pre {
    max-height: 340px;
    margin: 0;
    padding: var(--uui-spacing-3);
    overflow: auto;
    border-radius: var(--uui-radius-xs);
    background: var(--uui-bg-secondary);
    font-size: var(--uui-text-sm-font-size);
    line-height: 1.55;
}

@container catalogue (max-width: 1100px) {
    .rd-uui-catalogue__block-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * The theme picker is a real `uui-select` too. Same two consumer decisions as the playground
 * controls — a width the Figma artboard cannot know, and an overlaid menu instead of Figma's
 * in-flow one — plus a z-index above the sticky view header it sits in (that header is 100).
 */
.rd-uui-catalogue-theme {
    position: relative;
    inline-size: 220px;
}

.rd-uui-catalogue-theme :is(
    .uui-select__root,
    .uui-select__field,
    .uui-select__input,
    .uui-select__menu
) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

.rd-uui-catalogue-theme .uui-select__menu {
    position: absolute;
    z-index: 110;
    inset-inline: 0;
    top: 100%;
}

/*
 * Two leaks the themes exposed, both from the host page rather than the library.
 *
 * Text colour: the site paints `body` with its own `--rd-font-dark`, and the UUI type classes
 * set size but deliberately not colour, so headings stayed navy on a dark surface. The base
 * colour is the host's job — so the catalogue states it once, in UUI terms.
 *
 * Background: a bare `header` inherits a white background from the site's global stylesheet,
 * which is invisible in the light theme and a white band in dark.
 */
.rd-uui-catalogue,
.rd-uui-catalogue-nav,
.rd-uui-catalogue-view-header {
    color: var(--uui-text-primary);
}

.rd-uui-catalogue__block-head,
.rd-uui-catalogue-nav__header {
    background: transparent;
}

/* ------------------------------------------------- Metadata-driven catalogue */

/*
 * The compile-failure banner is state, not a notification: it has no close button and
 * stays until a later pipeline run succeeds. It sits above everything else on the page.
 */
.rd-uui-catalogue__banner {
    display: block;
}

/* Axis filters of the variant explorer: real `uui-select` controls, one per axis. */
.rd-uui-catalogue__explorer-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__explorer-toolbar:empty {
    display: none;
}

.rd-uui-catalogue__explorer-toolbar .rd-uui-catalogue__playground-input[data-uui-component="select"] .uui-select__menu {
    z-index: 40;
}

/* The pagination bar is full-width by contract (Figma draws it across the page); the
   explorer gives it the column, and its `page-default` type centres the pages itself. */
.rd-uui-catalogue__explorer-pagination {
    display: block;
}

.rd-uui-catalogue__explorer-pagination uui-pagination {
    inline-size: 100%;
}

.rd-uui-catalogue__explorer-pagination uui-pagination[hidden] {
    display: none;
}

/* A stage whose variant paints outside its box (an open menu, a floating label). */
.rd-uui-catalogue__preview-stage[data-uui-preview-overflowing] {
    min-height: 560px;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Validation page: diagnostics grouped by file, each with its JSON path and rule. */
.rd-uui-catalogue__diagnostic-list {
    display: grid;
    gap: var(--uui-spacing-2);
    margin: 0;
    padding-inline-start: var(--uui-spacing-6);
    font-size: var(--uui-text-md-font-size);
}

.rd-uui-catalogue__diagnostic-group {
    display: grid;
    gap: var(--uui-spacing-3);
    padding: var(--uui-spacing-4);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-primary);
}

.rd-uui-catalogue__diagnostic-group h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.rd-uui-catalogue__diagnostic--error {
    border-left: 3px solid var(--uui-color-error-500);
    padding-left: var(--uui-spacing-3);
}

.rd-uui-catalogue__diagnostic--warning {
    border-left: 3px solid var(--uui-color-warning-500);
    padding-left: var(--uui-spacing-3);
}

/*
 * Grid and flex items default to `min-width: auto`, i.e. their min-content width. One wide
 * child — a 320px Figma-width control, a long code line, a 1216px stage — then widens every
 * ancestor up to the content column, which scrolls sideways instead of the child's own box.
 * Every catalogue layout box therefore opts out; the boxes that are meant to scroll
 * (`__render-box--wide`, `__playground-canvas`, `pre`) already carry `overflow: auto`.
 */
.rd-uui-catalogue > section,
.rd-uui-catalogue [class*="rd-uui-catalogue"] {
    min-width: 0;
}

/*
 * A variant card's title is its combination key — one unbreakable token such as
 * `size=lg|hierarchy=link-color|state=default|iconOnly=false`. Unbroken, it widens the card
 * past its grid column and the whole content column scrolls sideways; it wraps instead.
 */
.rd-uui-catalogue__component-card h3,
.rd-uui-catalogue__component-card > code {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Monokai is a *code* colour scheme, so under `.uui-monokai` the highlighted snippets use its
 * canonical token colours rather than the ramp mapping the other themes share: keywords and
 * tags pink, attributes green, strings yellow, meta purple, comments the comment grey.
 */
.uui-monokai .rd-uui-catalogue .hljs-tag,
.uui-monokai .rd-uui-catalogue .hljs-name,
.uui-monokai .rd-uui-catalogue .hljs-selector-tag,
.uui-monokai .rd-uui-catalogue .hljs-keyword {
    color: #f92672;
}

.uui-monokai .rd-uui-catalogue .hljs-attr,
.uui-monokai .rd-uui-catalogue .hljs-attribute,
.uui-monokai .rd-uui-catalogue .hljs-selector-class,
.uui-monokai .rd-uui-catalogue .hljs-selector-id {
    color: #a6e22e;
}

.uui-monokai .rd-uui-catalogue .hljs-string,
.uui-monokai .rd-uui-catalogue .hljs-number,
.uui-monokai .rd-uui-catalogue .hljs-literal,
.uui-monokai .rd-uui-catalogue .hljs-built_in {
    color: #e6db74;
}

.uui-monokai .rd-uui-catalogue .hljs-meta,
.uui-monokai .rd-uui-catalogue .hljs-variable {
    color: #ae81ff;
}

.uui-monokai .rd-uui-catalogue .hljs-comment,
.uui-monokai .rd-uui-catalogue .hljs-quote {
    color: #75715e;
}

/* ========================================================== Komposition ==
 *
 * The layout page. Two things it needs that no other page does: its examples are
 * *layouts*, so they must have the stage's full width rather than being centred in
 * it, and they can be measured on screen.
 */

/*
 * Intro text and the overlay switch are one row with a rule between them, not a control
 * floating above the tabs. The switch changes what every example on the page draws, so it
 * belongs beside the text that introduces them — and a right-aligned box with nothing to its
 * left reads as something that fell out of the layout.
 *
 * The columns stretch (the grid default), which is what gives the rule its full height; the
 * switch itself is pinned to the top of its column with `align-content`. Aligning the items
 * instead would shrink the column to the switch and the line with it.
 *
 * The column is 344px because that is what `uui-toggle` measures: Figma draws the switch with
 * its label and supporting text at that width and the generated CSS states it, so a narrower
 * column does not narrow the component — it overflows it, and the content column starts
 * scrolling sideways with the supporting text cut off. Giving the column the component's own
 * width is cheaper and more honest than out-weighting four attribute selectors to release it.
 */
/*
 * The section owns the rhythm between intro, tab bar and panels — the page's own first rule,
 * applied to the page itself. As a plain block it had none, which put the intro's rule flush
 * against the tab rail.
 */
.rd-uui-catalogue__komposition {
    display: grid;
    align-content: start;
    gap: var(--uui-spacing-6);
}

.rd-uui-catalogue__komposition > * {
    min-inline-size: 0;
}

.rd-uui-catalogue__komposition-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    gap: var(--uui-spacing-8);
}

.rd-uui-catalogue__komposition-bar {
    display: grid;
    align-content: start;
    padding-inline-start: var(--uui-spacing-8);
    border-inline-start: 1px solid var(--uui-border-secondary);
}

/*
 * A layout example is about how space is distributed across the available width, so
 * centring it would hide the very thing it demonstrates. The shared block stage
 * centres by default (correct for a login card, wrong here), hence the override.
 */
.rd-uui-catalogue__komposition .rd-uui-catalogue__block-stage {
    position: relative;
    place-items: stretch;
    grid-template-columns: minmax(0, 1fr);
}

/* Rules: numbered, with the measurement under each claim. */
.rd-uui-catalogue__rule-list {
    display: grid;
    gap: var(--uui-spacing-5);
    margin: 0;
    padding-inline-start: var(--uui-spacing-6);
    list-style-type: decimal-leading-zero;
}

.rd-uui-catalogue__rule-list > li::marker {
    color: var(--uui-text-quaternary);
    font-variant-numeric: tabular-nums;
}

.rd-uui-catalogue__rule-list h3 {
    margin: 0 0 var(--uui-spacing-1);
    font-size: var(--uui-text-md-font-size);
    line-height: var(--uui-text-md-line-height);
    font-weight: var(--uui-font-weight-semibold);
}

.rd-uui-catalogue__rule-list p {
    max-width: 720px;
    margin: 0;
    color: var(--uui-text-tertiary);
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
}

.rd-uui-catalogue__komposition-heading {
    margin: var(--uui-spacing-6) 0 0;
    font-size: var(--uui-text-md-font-size);
    font-weight: var(--uui-font-weight-semibold);
}

.rd-uui-catalogue__komposition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--uui-text-sm-font-size);
    text-align: left;
}

.rd-uui-catalogue__komposition-table th,
.rd-uui-catalogue__komposition-table td {
    padding: var(--uui-spacing-2) var(--uui-spacing-3) var(--uui-spacing-2) 0;
    border-bottom: 1px solid var(--uui-border-secondary);
    vertical-align: top;
}

.rd-uui-catalogue__komposition-table th {
    color: var(--uui-text-quaternary);
    font-weight: var(--uui-font-weight-medium);
    white-space: nowrap;
}

/*
 * The measurement overlay. Its marks are absolutely positioned pixels written by the
 * runtime, in a layer of their own — the examples keep the exact markup the reader
 * copies, because an overlay that changed the layout would be measuring itself.
 */
.rd-uui-catalogue-space-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rd-uui-catalogue-space-mark {
    position: absolute;
    box-sizing: border-box;
    outline: 1px dashed var(--uui-border-brand);
    outline-offset: -1px;
    border-radius: var(--uui-radius-xs);
    background: color-mix(in srgb, var(--uui-color-brand-500) 5%, transparent);
}

.rd-uui-catalogue-space-mark::after {
    content: attr(data-label);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 1px var(--uui-spacing-1);
    border-end-end-radius: var(--uui-radius-xs);
    background: var(--uui-color-brand-600);
    color: var(--uui-color-base-white);
    font-family: var(--uui-font-family), system-ui, sans-serif;
    font-size: 10px;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* While measuring, the example itself steps back so the marks are the figure. */
.rd-uui-catalogue__block-stage.is-measuring > :not(.rd-uui-catalogue-space-layer) {
    opacity: 0.55;
}

/*
 * `uui-tabs` is a third frozen artboard used as chrome: its root is drawn at 1280px, so the
 * Bausteine and Komposition tab strips overhang a narrower content column and the page scrolls
 * sideways by the difference. Same case and same reasoning as the sidebar above — width is
 * layout, layout is the consumer's decision, and releasing it here keeps the generated
 * stylesheet literal so `?view=tabs` still shows Figma's measured box.
 *
 * `!important` for the documented reason: the generated rule carries four reflected attribute
 * selectors, and copying that chain here would break the day an axis is renamed.
 */
.rd-uui-catalogue [data-uui-showcase-tabs] {
    /*
     * The host is `inline-block` so a tab strip can sit in a line of content, which makes it
     * shrink to fit its tabs. `100%` on the root then resolves against that shrink-to-fit width
     * and the strip stops 15px short of the column — invisible with `button-minimal`, obvious
     * once the `underline` rail runs along the bottom and ends before the text above it does.
     */
    display: block;
}

.rd-uui-catalogue [data-uui-showcase-tabs] .uui-tabs__root {
    inline-size: 100% !important;
}

/* ------------------------------------------------------------------ Showcase */

/*
 * The showcase frame: a whole screen inside the content column.
 *
 * Everything the *screen* is made of comes from the library — this block only builds the window
 * it sits in, plus the three pieces Untitled UI has as components and we do not yet
 * (`Section header`, `Section label`, `Content divider`). Every value below is a `--uui-*`
 * property or a measured number from the artboard, so importing those three later can replace
 * the markup without moving anything.
 *
 * The frame scrolls sideways rather than reflowing: the original is a 1440px desktop artboard,
 * and a screen that quietly rearranges itself to fit a narrow catalogue column would no longer
 * be the thing under review.
 */
.rd-uui-catalogue__screen {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-inline-size: 960px;
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-xl);
    background: var(--uui-bg-primary);
    box-shadow: var(--uui-shadow-xs);
    overflow: hidden;
}

.rd-uui-catalogue__showcase > [role="figure"] {
    overflow-x: auto;
}

/*
 * The column is 280 wide because `Sidebar navigation` is: its root carries Figma's 280 and its
 * items 272. Padding on the column would therefore squeeze the component, not inset it — the
 * first attempt did exactly that and clipped the badge off the longest nav item. So the column
 * pads only vertically, and the two pieces Figma keeps *outside* the component (brand row,
 * account card) carry the inline padding themselves.
 */
.rd-uui-catalogue__screen-nav {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--uui-spacing-5);
    padding-block: var(--uui-spacing-5);
    border-inline-end: 1px solid var(--uui-border-secondary);
    background: var(--uui-bg-primary);
}

/*
 * The nav items inside the screen are released exactly as the catalogue's own sidebar is: the
 * component's inner `nav` insets them by 20px while Figma's item keeps its 272px box, so the
 * longest row (the one with a badge) overhangs the 280px column and the frame clips the badge
 * off. `!important` for the documented reason — the generated rules carry four reflected
 * attribute selectors.
 */
.rd-uui-catalogue__screen-nav :is(
    uui-nav-item,
    .uui-nav-item__root,
    .uui-nav-item__content,
    .uui-nav-item__group
) {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

.rd-uui-catalogue__screen-brand {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-3);
    padding-inline: var(--uui-spacing-5);
}

.rd-uui-catalogue__screen-account {
    display: flex;
    align-items: center;
    gap: var(--uui-spacing-3);
    margin-inline: var(--uui-spacing-4);
    padding: var(--uui-spacing-3);
    border: 1px solid var(--uui-border-secondary);
    border-radius: var(--uui-radius-lg);
}

.rd-uui-catalogue__screen-account > div {
    display: grid;
    min-inline-size: 0;
}

.rd-uui-catalogue__screen-account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * `uui-tabs` carries Figma's 1280px artboard on its root, and inside a screen frame that is the
 * widest thing in the column — so the whole main column inherited a 1280 min-content and the
 * save button left the frame. Released here as it already is for the catalogue's own tab strips;
 * the component page keeps showing the measured box.
 */
.rd-uui-catalogue__screen uui-tabs {
    display: block;
}

.rd-uui-catalogue__screen .uui-tabs__root {
    inline-size: 100% !important;
}

/* The page shell as measured on every desktop artboard: 32 padding, 32 between sections. */
.rd-uui-catalogue__screen-main {
    padding: var(--uui-spacing-8);
    background: var(--uui-bg-primary);
}

/* `Section header`, composed: the rule belongs to the header, not to the first row below it. */
.rd-uui-catalogue__screen-section-head {
    padding-block-end: var(--uui-spacing-5);
    border-block-end: 1px solid var(--uui-border-secondary);
}

/*
 * A row of the matrix. `uui-sidebar` already carries 280 + 32 + fluid; the cap turns the fluid
 * part into Figma's fixed 512 control column.
 */
.rd-uui-catalogue__screen-row {
    --uui-sidebar-content-max: 512px;
    padding-block-end: var(--uui-spacing-5);
    border-block-end: 1px solid var(--uui-border-secondary);
}

/* `Section label`: Figma stacks title and description with gap 0 — the 20px line height is the rhythm. */
.rd-uui-catalogue__screen-label {
    --uui-stack-gap: 0;
}

.rd-uui-catalogue__screen-actions {
    justify-content: flex-end;
}

/*
 * Dialoge — the page about how a popup is called rather than about one component.
 *
 * It reuses `__doc-*` for prose and `__block-*` for the examples, so only three things are
 * new: the row of trigger buttons, the JSON readout beside them, and the aside that carries
 * the host/shell distinction.
 *
 * The readout is `white-space: pre` on purpose. It prints `JSON.stringify(value, null, 2)`,
 * and the whole point of that example is that the dialog hands back a typed structure — a
 * reflowed one-liner would hide exactly the thing being demonstrated.
 */
.rd-uui-catalogue__doc-block {
    display: grid;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__doc-block h3,
.rd-uui-catalogue__doc-block p {
    margin: 0;
}

.rd-uui-catalogue__doc-lead {
    color: var(--uui-text-tertiary);
}

.rd-uui-catalogue__doc-aside {
    padding: var(--uui-spacing-4);
    border-inline-start: 2px solid var(--uui-color-neutral-200);
    background: var(--uui-bg-secondary);
    border-radius: var(--uui-radius-md);
}

.rd-uui-catalogue__dialogs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uui-spacing-3);
}

.rd-uui-catalogue__dialogs-result {
    display: block;
    margin-block-start: var(--uui-spacing-4);
    padding: var(--uui-spacing-3);
    border: 1px solid var(--uui-color-neutral-200);
    border-radius: var(--uui-radius-md);
    background: var(--uui-bg-secondary);
    color: var(--uui-text-secondary);
    font-family: var(--uui-font-mono, ui-monospace, monospace);
    font-size: var(--uui-font-size-sm);
    white-space: pre;
    overflow-x: auto;
}