/* Level-1 surfaces: white with a 1px outline, soft hover elevation. `overflow: clip` keeps the square-
   cornered header/footer backgrounds from bleeding past the rounded corners (the "missing corners" bug),
   without creating a scroll container the way `overflow: hidden` would (so sticky table headers still work). */
.card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: clip;
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
}

/* Header whose items sit left-to-right and wrap on narrow screens (title + inline meta/actions) rather
   than being pushed to opposite edges. Replaces the repeated inline flex/flex-wrap on card headers. */
.card__header--wrap {
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* The result facts in a card header — birds and lofts competing, liberation time, wind. They take the space
   between the title and any trailing actions and centre themselves in it, weighted so they read as the
   sheet's own header rather than as incidental meta. On a card whose header has no room to spare (narrow
   screens) they simply wrap and sit left, which is why the centring is not enforced with absolute widths. */
.card__facts {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-lg);
    font-weight: 700;
    color: var(--on-surface, inherit);
}

/* A trailing group of actions in a card header, pushed to the right and wrapping on narrow screens. */
.card__header-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.card__body {
    padding: var(--space-lg);
}

/* A slimmer body band — e.g. a short "showing N of M" note under a table. */
.card__body--tight {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

/* Reusable table-in-card rule: when a body's SOLE content is a table, it must sit flush to the card edges.
   The table's own cell padding is the inset; the body's padding on top of it only double-pads the rows and
   pushes the header out of line with the card title. `:has` makes this automatic everywhere — a table that
   is the only thing in a card body (the common `@if empty / else <table>` shape) never needs a body wrapper,
   and one that shares the body with intro text keeps its padding. Row highlights then reach the card edge. */
.card__body:has(> .data-table-wrap:only-child) {
    padding: 0;
}

/* Vertical rhythm: base.css zeroes <p>/<h4> margins, so an action (form or button) sitting directly under
   its descriptive text ends up jammed against it. Give the action — and a paragraph following a heading —
   room to breathe wherever this pattern appears in a card body. */
.card__body > p + form,
.card__body > p + .btn,
.card__body > p + .inline-form,
.card__body > form + form,
.card__body > h3 + p,
.card__body > h4 + p { margin-top: var(--space-md); }

.card__footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--outline-variant);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Gold-bordered podium / featured cards. */
.card--podium {
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
}

/* A card called out with the primary (navy) border — e.g. the subject bird on the extraction bench. */
.card--highlight {
    border-color: var(--primary);
}

.card--interactive {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card--interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Small screens: tighten the generous desktop padding so content keeps room on narrow viewports. */
@media (max-width: 48rem) {
    .card__header,
    .card__footer { padding: var(--space-sm) var(--space-md); }

    .card__body { padding: var(--space-md); }
}