/* The component reference page (/admin/ui): the swatch, type and icon
 * grids around the real components. */
@layer pages {
    .ui-intro { max-width: var(--measure); color: var(--text-muted); }
    /* The contents' anchors stop below the phone top bar, as plan weeks do. */
    main:has(> .ui-toc) [id] { scroll-margin-top: var(--space-8); }
    .ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
    .ui-swatches, .ui-icons {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }
    :is(.ui-swatches, .ui-icons) > li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
    :is(.ui-swatches, .ui-icons) code { font-size: var(--text-xs); color: var(--text-muted); }
    .ui-swatch {
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        border: var(--border-width) solid var(--border-strong);
        border-radius: var(--radius-md);
    }
    .ui-icons svg.i { width: 1.5rem; height: 1.5rem; }
    .ui-type > p { margin: 0 0 var(--space-1); }
    .ui-type > .eyebrow:not(:first-child) { margin-top: var(--space-4); }
    .ui-h1, .ui-h2, .ui-h3 {
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        color: var(--text-heading);
    }
    /* Like the real headings: only h1 is set in Literata. */
    .ui-h1 { font-family: var(--font-head); font-size: var(--text-h1); }
    .ui-h2 { font-size: var(--text-h2); }
    .ui-h3 { font-size: var(--text-lg); }
    /* Blocks of samples: a narrow one (stat tiles, a boxed list) and the
     * room after one that brings no margin of its own. */
    .ui-narrow { max-width: 24rem; margin-bottom: var(--space-5); }
    .ui-gap { margin-bottom: var(--space-5); }
    /* Sections whose samples are cards themselves, headed like the cards. */
    .ui-section > h2 { font-size: var(--text-lg); }
    /* Subsections of a card; the first one follows its h2 directly. */
    .ui-subhead { margin-top: var(--space-6); }
    h2 + .ui-subhead { margin-top: 0; }
    /* Wide samples (the state matrix, tables) scroll in their own box. */
    .ui-scroll { overflow-x: auto; margin-bottom: var(--space-5); }
    .ui-scroll > table { margin-bottom: 0; }
    /* Equal state columns, each wide enough for a filled date or time beside
     * its picker icon and for the longest state name; a file picker shrinks
     * to its cell. */
    .ui-matrix { min-width: 76rem; table-layout: fixed; }
    /* The row labels stay in view while the state columns scroll. */
    .ui-matrix th:first-child { position: sticky; left: 0; z-index: var(--z-raised); width: 8rem; background: var(--surface); }
    .ui-matrix input[type="file"] { max-width: 100%; }
    /* Toasts in the flow, not fixed to the bottom of the window. */
    .ui-toasts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
    .ui-toasts > .toast { position: static; transform: none; }
    /* Open menus side by side (stacked on a phone), each with room below
     * outside it for its panel (which hangs from the menu box). */
    .ui-menus {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: var(--space-4);
        margin-bottom: var(--space-4);
    }
    .ui-menus > .menu { justify-self: start; margin-bottom: calc(var(--space-8) * 3 + var(--space-4)); }
    /* The upward one as wide as the sidebar, with the room above it. */
    .ui-menus > .menu-up {
        width: min(100%, var(--sidebar-width));
        margin: calc(var(--space-8) * 3 + var(--space-4)) 0 0;
    }
    .ui-menus > .ui-end { justify-self: end; }
    /* The last one ends its row at every column count (at two columns it
     * would wrap to the start of the next row). */
    .ui-menus > .ui-end:last-child { grid-column: -2 / -1; }
    /* Room below a sample whose popover is open from the start. */
    .ui-pop-room { padding-bottom: calc(var(--space-8) * 2); }
}