@layer components {
    /* Plain narrow page — login, register, and the logged-out home page.
       Identical to what bare `body` used to do before the app shell moved
       width/padding off it (those pages have no sidebar to share space with). */
    .page {
        max-width: 64rem;
        margin-inline: auto;
        padding-block: var(--space-8);
        padding-inline: var(--space-6);
    }

    /* Title + one-line description, with a single action (primary CTA on
       list pages, a "back" link on create/edit pages) pinned to the end. */
    .page-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        margin-block-end: var(--space-8);
    }

    .page-header h1 {
        margin-block-end: var(--space-1);
    }

    .page-header p {
        margin-block-end: 0;
        color: var(--color-text-muted);
    }

    /* Boxed single-form card: a header (its own secondary title, distinct
       from the page's <h1> in .page-header) + a body holding the form.
       Centered horizontally in whatever container it sits in. */
    .card {
        max-width: 32rem;
        margin-inline: auto;
        background: var(--color-bg);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
    }

    .card-header {
        padding: var(--space-5) var(--space-6);
        border-block-end: var(--border-width) solid var(--color-border);
    }

    .card-header h2 {
        font-size: var(--font-size-lg);
        margin-block-end: 0;
    }

    .card-body {
        padding: var(--space-6);
    }

    .card-body form {
        max-width: none;
        margin-block-end: 0;
    }

    /* A reference code — store code, product SKU. Reserved for identifiers,
       never for prose: the mono face is the signal that a value is a
       machine-facing key, not a human-written label. */
    .tag {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--color-accent);
        background: var(--color-accent-subtle);
        border: var(--border-width) solid var(--color-accent-border);
        border-radius: var(--radius-sm);
        padding: var(--space-1) var(--space-2);
    }

    /* Numbers and other machine-facing values (prices, dates) share the
       same mono treatment as .tag, set with tabular figures so columns of
       digits line up like a ledger. */
    .num {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .table-wrap {
        overflow-x: auto;
        margin-block-end: var(--space-8);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
    }

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

    .table th {
        text-align: left;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--color-text-muted);
        padding: var(--space-3) var(--space-4);
        background: var(--color-surface);
        border-bottom: var(--border-width) solid var(--color-border-strong);
        white-space: nowrap;
    }

    .table th.num,
    .table td.num {
        text-align: right;
    }

    .table td {
        padding: var(--space-3) var(--space-4);
        border-bottom: var(--border-width) solid var(--color-border);
        color: var(--color-text);
        vertical-align: middle;
    }

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

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

    .table td.actions {
        text-align: right;
        white-space: nowrap;
    }

    .table td.actions form {
        display: inline-block;
        margin: 0;
    }

    /* A dashed border reads as "nothing here yet" rather than a broken box. */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        text-align: center;
        padding: var(--space-12) var(--space-6);
        border: var(--border-width) dashed var(--color-border-strong);
        border-radius: var(--radius-lg);
        color: var(--color-text-muted);
        margin-block-end: var(--space-8);
    }
}