@layer components {
    .data-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        margin: var(--space-4) 0;
    }
    .data-table th,
    .data-table td {
        padding: var(--space-3) var(--space-4);
        text-align: left;
        border-bottom: 1px solid var(--border-muted);
        vertical-align: middle;
    }
    .data-table th {
        color: var(--fg-muted);
        font-weight: var(--weight-medium);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .data-table tr.is-revoked td { color: var(--fg-muted); }

    /* Definition-list "meta" — used by the read-only metadata block
     * (provider/created) on Settings. */
    .meta {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: var(--space-5);
        row-gap: var(--space-3);
        margin: var(--space-6) 0;
        padding: var(--space-4) 0;
        border-top: 1px solid var(--border-muted);
        font-size: var(--text-sm);
    }
    .meta dt { color: var(--fg-muted); font-weight: var(--weight-medium); }
    .meta dd { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
    .meta dd .icon { width: 1.1em; height: 1.1em; }

    /* Flex-row list — <ul> rendered as a framed stack of horizontal
     * rows separated by thin dividers. Each item is a flex row that
     * can hold avatar / label / meta / actions. Use for member lists,
     * activity rows, and other "tabular but not <table>" displays. */
    .row-list {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid var(--border-muted);
        border-radius: var(--radius-md);
        /* No overflow:hidden — would clip per-row dropdowns and
         * popovers. Row separators don't reach the rounded corners
         * (last child has no border-bottom), so removing the clip
         * is safe visually. */
    }
    .row-list-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-muted);
    }
    .row-list-item:last-child { border-bottom: 0; }
    /* The clickable identity head of a row — avatar + name (and
     * optionally an .row-list-item-body) wrapped in an <a> that
     * opens the subject's profile / detail page. Inherits the row's
     * text colour so it doesn't read as "blue link", and underlines
     * on hover so it's discoverable as a link. */
    .row-list-item-link {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: inherit;
        text-decoration: none;
        min-width: 0;
    }
    .row-list-item-link:hover { text-decoration: underline; }
    .row-list-item-meta {
        margin-left: auto;
        color: var(--fg-muted);
        font-size: var(--text-sm);
    }
    /* The interactive analogue of .row-list-item-meta: a clickable
     * role/status badge that opens a per-row .dropdown. Wrap it in
     * a .menu-host (for positioning) and a <details name="…">
     * group (for mutually exclusive open). Visual cue: muted
     * text + chevron, hover background to flag clickability. */
    .row-list-item > .menu-host {
        margin-left: auto;
    }
    /* Two-line label inside a row — primary text + small muted
     * secondary line beneath it (e.g. display name + email).
     * Wrap the two <span>s in .row-list-item-body. */
    .row-list-item-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .row-list-item-secondary {
        color: var(--fg-muted);
        font-size: var(--text-sm);
    }

    /* Floating modifier — pulls the list out of normal flow and pins
     * it just below its (positioned) parent, so an autocomplete list
     * doesn't push the rest of the form down when results appear.
     * Capped + scrollable so a long list never overlaps the action
     * row beneath it. */
    .row-list-floating {
        position: absolute;
        top: calc(100% + var(--space-1));
        left: 0;
        right: 0;
        z-index: 10;
        background: var(--bg-elevated);
        box-shadow: var(--shadow-md);
        max-height: 22em;
        overflow-y: auto;
    }
}