@layer components {
    /* Document expiry pill — visual for DocumentExpirationState. Derived,
       never stored; shown alongside the verification-status badge since the
       two are orthogonal. Shape mirrors .app-review-status-badge but is kept
       self-contained so the expiry pattern doesn't couple to the review CSS.
       Semantic status tokens only — no raw hex. */
    .app-doc-expiry-pill {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-1) var(--space-2);
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-size: var(--fs-ui-sm);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }
    .app-doc-expiry-icon {
        font-size: 1em; /* tracks the pill text size */
    }

    /* State colours — full chrome on the pill compound, text-only on inline. */
    .app-doc-expiry-pill.app-doc-expiry-valid        { background: var(--color-success-soft); color: var(--color-success-deep); border-color: var(--color-success); }
    .app-doc-expiry-pill.app-doc-expiry-expiringsoon { background: var(--color-warn-soft);    color: var(--color-warn-deep);    border-color: var(--color-warn); }
    .app-doc-expiry-pill.app-doc-expiry-expired      { background: var(--color-error-soft);   color: var(--color-error-deep);   border-color: var(--color-error); }
    .app-doc-expiry-pill.app-doc-expiry-noexpiry     { background: var(--color-surface-alt);  color: var(--color-ink-soft);     border-color: var(--color-line); }

    /* Compact inline variant for dense tables — icon + label, no chrome. */
    .app-doc-expiry-inline {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--fs-ui-sm);
        font-weight: 500;
    }
    .app-doc-expiry-inline.app-doc-expiry-valid        { color: var(--color-success-deep); }
    .app-doc-expiry-inline.app-doc-expiry-expiringsoon { color: var(--color-warn-deep); }
    .app-doc-expiry-inline.app-doc-expiry-expired      { color: var(--color-error-deep); }
    .app-doc-expiry-inline.app-doc-expiry-noexpiry     { color: var(--color-ink-soft); }

    /* Row-level tint for expired rows in lists — a whisper of red so the eye
       catches the row before reading the badge. */
    .app-doc-row-expired {
        background: color-mix(in srgb, var(--color-error) 6%, transparent);
    }

    /* Expired date rendered in red in detail views — reinforces, doesn't shout. */
    .app-doc-expired-date {
        color: var(--color-error-deep);
        font-weight: 500;
    }
}