/* =========================================================================
   L'Atelier de MIA — Form primitives (Phase 3)

   Hairline-underline inputs — no box, no background, no outline. Used by
   the consultation flow and the account sign-in / request pages.

   Master Playbook §8. Tokens only — no raw hex.
   ========================================================================= */

.field {
    display: block;
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--hairline);
    transition: border-bottom-color var(--dur-fast) var(--ease);
}

.field:focus-within {
    border-bottom-color: var(--fg);
}

.field[hidden] {
    display: none;
}

.field__label {
    display: block;
    margin-bottom: var(--space-2);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

/* Secondary phrase inside a field label — "(optional)", "(in cm)" etc. */
.field__label-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    color: var(--muted);
    margin-left: var(--space-1);
}

.field__input,
.field__textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    appearance: none;

    font-family: var(--type-body-editorial-font);
    font-size: var(--type-body-editorial-size);
    font-weight: var(--type-body-editorial-weight);
    line-height: 1.4;
    color: var(--fg);
}

/* The legacy `.field input / textarea` rule in style.css adds its OWN bottom
   border, which doubles up with the .field wrapper's hairline above — a visible
   double line. In this (newer) field system the single hairline lives on the
   .field wrapper, so the control itself stays borderless. Two classes
   (0,2,0) outrank style.css's `.field input` (0,1,1), so this wins cleanly. */
.field .field__input,
.field .field__textarea {
    border-bottom: 0;
}

/* Keyboard focus ring (a11y 9.5) — only on :focus-visible, so mouse/touch
   focus is unchanged and the default rendered state is untouched. */
.field__input:focus-visible,
.field__textarea:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
}

/* <fieldset>/<legend> reset (a11y 9.9) — lets us group controls semantically
   without the default browser border/inset, so layout stays identical. */
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
legend {
    padding: 0;
}

.field__input::placeholder,
.field__textarea::placeholder {
    color: var(--hairline);
    font-style: italic;
}

.field__textarea {
    resize: vertical;
    min-height: calc(var(--space-6) + var(--space-4));
}

/* Error state — the whole field's hairline turns warm-rust. */
.field:has(.field__input--error),
.field:has(.field__textarea--error) {
    border-bottom-color: var(--error);
}

/* Inline help / hint text under a field. */
.field__hint {
    display: block;
    margin-top: var(--space-2);

    font-family: var(--type-caption-font);
    font-size: var(--type-caption-size);
    color: var(--muted);
    line-height: 1.4;
}

/* Error variant — used by consultation flow status surfaces. */
.field__hint[data-variant="error"] {
    color: var(--error);
}

/* A caption element that reads beneath a composite field (e.g. the
   upload affordance, the status surface). */
.field__caption {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--type-caption-font);
    font-size: var(--type-caption-size);
    line-height: 1.4;
    color: var(--muted);
}

.field__caption[data-variant="error"] {
    color: var(--error);
}

/* =========================================================================
   OPTION GROUP — hairline-underline radios (reusable across flows)

   Used by the Haute Couture brief (event type, price range) and by the
   Demi-Couture Reserve-a-Viewing flow (primary size, second size). The
   native radio is visually hidden; the sibling label text carries the
   hairline underline on :checked. No filled buttons, no chips, no boxes.
   ========================================================================= */

.option-group {
    display: block;
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--hairline);
    border-width: 0 0 1px; /* fieldset reset for some UAs */
}

.option-group__label {
    display: block;
    margin-bottom: var(--space-3);
    padding: 0;

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

.option-group__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
}

/* A secondary italic caption beneath the row — used to describe ladder
   minimums, optional-field phrasing, etc. */
.option-group__caption {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--type-caption-font);
    font-size: var(--type-caption-size);
    color: var(--muted);
    line-height: 1.4;
    font-style: italic;
}

.option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

/* Visually-hidden radio — semantic + keyboard only. */
.option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.option__text {
    font-family: var(--type-body-editorial-font);
    font-size: var(--type-body-editorial-size);
    font-weight: var(--type-body-editorial-weight);
    line-height: 1.3;
    color: var(--muted);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease),
                border-bottom-color var(--dur-fast) var(--ease);
}

.option:hover .option__text {
    color: var(--fg);
}

.option__input:checked + .option__text {
    color: var(--fg);
    border-bottom-color: var(--fg);
}

.option__input:focus-visible + .option__text {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
}

/* Inline text-field that reveals when a radio asks for elaboration. */
.option-other {
    display: none;
    margin-top: var(--space-3);
}
.option-other[data-visible="true"] {
    display: block;
}