/*
 * card.css - the card frame, its five states, and the pieces cards are built from.
 *
 * Every card is its own size container, so a card lays itself out by the room IT has, not by
 * the width of the window: the same card is correct in a one-column phone grid, as a two-column
 * "l" card, and at 200% zoom. Logical properties only; class prefix xa-.
 */

.xa-card {
    display: block;
    container-type: inline-size;
    container-name: xa-card;
    min-inline-size: 0;
    border: 1px solid var(--xa-border);
    border-radius: var(--xa-radius-card);
    background-color: var(--xa-surface);
    transition: border-color 0.3s ease;
}

.xa-card:hover,
.xa-card:focus-within {
    border-color: var(--xa-border-strong);
}

.xa-card__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.xa-card__title {
    padding-inline-start: var(--space-md);
    border-inline-start: 4px solid var(--premium-gold);
}

.xa-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.xa-card__empty,
.xa-card__text {
    color: var(--xa-text-muted);
}

/* ---- loading: a skeleton, plus words for people who cannot see it -------------------------- */

.xa-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.xa-skeleton__line {
    display: block;
    block-size: 1em;
    border-radius: var(--xa-radius-control);
    background-color: var(--xa-skeleton);
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    background-repeat: no-repeat;
    background-size: 40% 100%;
    animation: xa-shimmer 1.6s ease-in-out infinite;
}

.xa-skeleton__line:nth-child(2) {
    inline-size: 85%;
}

.xa-skeleton__line:nth-child(3) {
    inline-size: 60%;
}

@keyframes xa-shimmer {
    from {
        background-position: -60% 0;
    }

    to {
        background-position: 160% 0;
    }
}

@media (forced-colors: active) {
    .xa-skeleton__line {
        border: 1px solid CanvasText;
    }
}

/* ---- error: words and a bar, so the state never rests on colour alone ---------------------- */

.xa-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-inline-start: var(--space-md);
    border-inline-start: 4px solid var(--xa-danger);
}

.xa-error__text {
    color: var(--xa-danger);
}

/* A message about something the person just did: saved, could not save, signing out. */
.xa-note {
    min-block-size: 1.6em;
    color: var(--xa-text-muted);
}

/* ---- building blocks ----------------------------------------------------------------------- */

.xa-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--xa-border);
}

.xa-group:first-child {
    padding-block-start: 0;
    border-block-start: none;
}

.xa-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.xa-list {
    list-style: none;
}

.xa-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding-block: var(--space-md);
    border-block-start: 1px solid var(--xa-border);
}

.xa-list__item:first-child {
    padding-block-start: 0;
    border-block-start: none;
}

.xa-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    color: var(--xa-text-muted);
    font-size: 0.9em;
}

/* With room to spare the amount moves to the end of the row, in line with the title. */
@container xa-card (min-inline-size: 26rem) {
    .xa-list__item {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--space-lg);
        align-items: baseline;
    }

    .xa-list__title {
        grid-column: 1;
    }

    .xa-list__meta {
        grid-column: 1;
    }

    .xa-list__item > .xa-num {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}