/*
 * date.css — the reusable HistoricalDate entry component (_date-input.php). BASELINE-
 * loaded (Assets::VIEW_CSS) so it also styles the control when a form is swapped in as an
 * htmx fragment (a fragment has no <head> to declare its own CSS).
 *
 * Type-driven field VISIBILITY is done with pure CSS :has() — NO hand-written JS. The
 * currently-selected <option> matches :checked, and :has() re-evaluates live as the user
 * changes the type dropdown. Each .date-input instance is scoped independently, so several
 * date components can coexist on one page.
 */

.date-input .date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.date-input .date-row-label {
    min-width: 2rem;
    margin: 0;
}

/* The day/month/year group stays compact rather than stretching full width. */
.date-input .date-row-fields {
    flex: 0 1 auto;
    max-width: 26rem;
}

.date-input .date-day { max-width: 5.5rem; }
.date-input .date-year { max-width: 7rem; }

/* BETWEEN and PERIOD reveal the second ("to") bound; hidden for every other type. */
.date-input .date-row--to { display: none; }
.date-input:has(.date-type option[value="between"]:checked) .date-row--to,
.date-input:has(.date-type option[value="period"]:checked) .date-row--to { display: flex; }

/* UNKNOWN = null span: no date fields at all. */
.date-input:has(.date-type option[value="unknown"]:checked) .date-fields { display: none; }