/* Sets · body-log.css
   De metingenlijst onder de gewichts- en vetgrafiek. Zie js/body-log.js.

   Hij zit binnen een .plan-card, dus geen eigen rand of achtergrond: alleen
   een scheidingslijn boven de lijst om hem los te zetten van de grafiek. */

.body-log {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sets-border);
}

.body-log-title {
    color: var(--sets-text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.body-log-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
}

.body-log-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Elke rij is een tikdoel; 40px hoog houdt hem bereikbaar zonder de lijst
       twee schermen lang te maken. */
    min-height: 40px;
    border-bottom: 1px solid var(--sets-border);
}

.body-log-row:last-child {
    border-bottom: 0;
}

.body-log-date {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sets-text-3);
    font-size: 12px;
}

/* Het getal ís de knop: tikken opent de correctie. Onderstreept-gestippeld
   omdat een kaal getal er niet uitziet als iets waar je op kunt tikken. */
.body-log-value {
    flex-shrink: 0;
    padding: 4px 2px;
    background: none;
    border: 0;
    color: var(--sets-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--sets-border-strong);
    transition: color 120ms var(--sets-ease-out);
}

.body-log-value:active {
    color: var(--sets-accent-text);
}

.body-log-remove,
.body-log-cancel {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: none;
    color: var(--sets-text-3);
    transition: color 120ms var(--sets-ease-out), background-color 120ms var(--sets-ease-out);
}

.body-log-remove:active,
.body-log-cancel:active {
    color: var(--sets-text);
    background: var(--sets-surface-3);
}

/* ── Bewerkstand ─────────────────────────────────────────────── */

.body-log-row.is-editing {
    gap: 8px;
}

.body-log-input {
    /* Breed genoeg voor "220,5" in lbs; smaller en het getal scrolt weg. */
    width: 78px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--sets-border-strong);
    border-radius: 9px;
    background: var(--sets-surface-1);
    color: var(--sets-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
}

.body-log-input:focus {
    border-color: var(--sets-accent);
}

.body-log-save {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--sets-accent);
    background: color-mix(in srgb, var(--sets-accent) 14%, transparent);
    color: var(--sets-accent-text);
    font-size: 12px;
    font-weight: 700;
    transition: transform 120ms var(--sets-ease-out);
}

.body-log-save:active {
    transform: scale(0.96);
}

.body-log-hint {
    margin-top: 8px;
    color: var(--sets-text-3);
    font-size: 11px;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .body-log-value,
    .body-log-remove,
    .body-log-cancel,
    .body-log-save {
        transition: none;
    }
    .body-log-save:active {
        transform: none;
    }
}