/* Feature 035 — the phone shape of a grid.
   One compact card per record below 600px, rendered by RecordCardList in place of the
   MudDataGrid. Feature furniture, so `record-card-*`, not `an-` (constitution 11b). Tokens only.
   The structure borrows .ss-board-row's card chrome (border, radius, shadow, red keyline) without
   its rank/score slots: a grid row is a name, some chips, two facts and its actions. */

.record-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-2);
}

.record-card-list-head {
    display: flex;
    align-items: center;
    padding: 0 var(--an-space-2);
    color: var(--an-gray-3);
    font-size: var(--an-text-small);
}

.record-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    background: var(--an-white);
    border: 1px solid var(--an-border);
    border-left: 3px solid var(--an-red);
    border-radius: var(--an-radius-md);
    box-shadow: var(--an-shadow-card);
    padding: var(--an-space-3) var(--an-space-3) var(--an-space-2);
}

.record-card-selected {
    border-color: var(--an-red-tint);
    background: var(--an-red-tint-2);
}

/* No checkbox: the body takes the whole width. */
.record-card > .record-card-body:first-child {
    grid-column: 1 / -1;
}

.record-card-select {
    margin: -6px 0 0 -8px;
}

.record-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-2);
    min-width: 0;
}

/* The name is the way in. It wraps — two names truncated to the same prefix are one name. */
.record-card-name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--an-red);
    overflow-wrap: anywhere;
}

.record-card-name-plain {
    color: var(--an-gray-1);
}

.record-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-1);
}

.record-card-chips:empty {
    display: none;
}

.record-card-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--an-space-3);
    font-size: var(--an-text-small);
}

.record-card-fact-label {
    font-family: var(--an-font-mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--an-gray-4);
    flex: 0 0 auto;
}

.record-card-fact-value {
    color: var(--an-gray-1);
    text-align: right;
    overflow-wrap: anywhere;
}

/* Thumb targets: every action button in a card is at least 44px, whatever its icon size. */
.record-card-actions {
    margin-top: var(--an-space-1);
}

.record-card-actions .mud-icon-button,
.record-card-actions .mud-button-root {
    min-width: 44px;
    min-height: 44px;
}

.load-more-footer {
    display: flex;
    justify-content: center;
    padding: var(--an-space-3) 0 var(--an-space-2);
}