@layer components {
    /* Label / value lists */
    .facts {
        display: grid;
        gap: 0.35rem;
    }

    .facts__row {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--line);
    }

    .facts__row:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .facts dt {
        color: var(--text-dim);
        font-size: var(--text-sm);
    }

    .facts dd {
        text-align: end;
        overflow-wrap: anywhere;
    }

    /* Notices */
    .notice {
        padding: var(--space-3) var(--space-4);
        border-inline-start: 3px solid var(--tone, var(--line-strong));
        border-radius: var(--radius-md);
        background: var(--tone-soft, var(--surface-1));
        font-size: var(--text-sm);
    }

    .notice__title {
        display: block;
        color: var(--tone-text, var(--text));
        font-weight: 600;
    }

    .notice__body,
    .notice__list {
        margin-top: var(--space-1);
        color: var(--text-muted);
    }

    .empty {
        display: grid;
        justify-items: center;
        gap: var(--space-2);
        padding: var(--space-6) var(--space-4);
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius-lg);
        color: var(--text-dim);
        text-align: center;
        grid-column: 1 / -1;
    }

    .empty svg.lucide {
        width: 1.75rem;
        height: 1.75rem;
    }

    .quote {
        padding: var(--space-3) var(--space-4);
        border-inline-start: 2px solid var(--line-strong);
        background: var(--surface-2);
        border-radius: var(--radius-sm);
        white-space: pre-wrap;
    }

    .meter {
        display: block;
        height: 4px;
        min-width: 80px;
        border-radius: 2px;
        background: linear-gradient(to left, var(--accent) var(--value, 0%), var(--surface-3) var(--value, 0%));
    }

    .id-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        direction: ltr;
    }

    .id-chip code {
        color: var(--text-muted);
    }

    /* Tabs (segmented) */
    .tabs {
        display: flex;
        gap: var(--space-1);
        overflow-x: auto;
        border-bottom: 1px solid var(--line);
    }

    .tabs__item {
        padding: var(--space-2) var(--space-3);
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--text-muted);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .tabs__item:hover {
        color: var(--text);
    }

    .tabs__item[aria-selected='true'] {
        color: var(--text);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

    .tabs--compact .tabs__item {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }

    .tabs__count {
        display: inline-block;
        min-width: 1.6em;
        margin-inline-start: var(--space-2);
        padding: 0 var(--space-1);
        border-radius: var(--radius-sm);
        background: var(--surface-2);
        color: var(--text-dim);
        font-size: var(--text-xs);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        text-align: center;
    }

    .tabs__item[aria-selected='true'] .tabs__count {
        background: var(--surface-3);
        color: var(--text-muted);
    }

    /* The one loud thing on the page: work still waiting for a decision. */
    .tabs__count--attention,
    .tabs__item[aria-selected='true'] .tabs__count--attention {
        background: var(--warn-soft);
        color: var(--warn-text);
        font-weight: 600;
    }

    /* Tables */
    .table-wrap {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
    }

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

    .table th,
    .table td {
        padding: 0.6rem var(--space-4);
        border-bottom: 1px solid var(--line);
        text-align: start;
        vertical-align: middle;
    }

    .table th {
        background: var(--surface-sunken);
        color: var(--text-dim);
        font-size: var(--text-xs);
        font-weight: 500;
        white-space: nowrap;
    }

    .table tbody tr:hover {
        background: var(--surface-1);
    }

    .table tbody tr:last-child td {
        border-bottom: 0;
    }

    .table tfoot td {
        border-top: 1px solid var(--line-strong);
        border-bottom: 0;
        font-weight: 600;
    }

    .table--compact th,
    .table--compact td {
        padding: 0.4rem var(--space-3);
    }

    .table td:has(> .btn) {
        white-space: nowrap;
    }

    /* Dashboard */
    .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
    }

    @media (max-width: 700px) {
        .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    .stat {
        display: grid;
        gap: var(--space-1);
        padding: var(--space-4);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        text-align: start;
        transition: border-color 120ms var(--ease);
    }

    .stat:hover {
        border-color: var(--line-strong);
    }

    .stat__label {
        color: var(--text-dim);
        font-size: var(--text-xs);
    }

    .stat__value {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        font-weight: 700;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .stat__note {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .split {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: var(--space-4);
    }

    .alerts {
        display: grid;
        gap: var(--space-2);
        padding: 0;
        list-style: none;
    }

    .alert {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3);
        border-inline-start: 3px solid var(--tone, var(--line-strong));
        border-radius: var(--radius-md);
        background: var(--surface-2);
        font-size: var(--text-sm);
    }

    .alert--danger { --tone: var(--danger); }
    .alert--info { --tone: var(--accent); }

    .alert[data-action],
    .check[data-action] {
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: background-color 120ms var(--ease);
    }

    .alert[data-action]:hover,
    .check[data-action]:hover {
        background: var(--surface-3);
    }

    .chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}