/* Shared V3 form-control contracts. Feature classes may position these controls,
   but this file owns their semantic states and interaction treatment. */

.v3-field-control {
    --v3-field-height: var(--v3-control-standard, 40px);
    min-width: 0;
    display: grid;
    gap: 6px;
}

.v3-field-control--compact {
    --v3-field-height: var(--v3-control-compact, 36px);
}

.v3-field-control--phone {
    --v3-field-height: var(--v3-control-phone, 44px);
}

.v3-field-control__label-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.v3-field-control__label {
    min-width: 0;
    color: var(--v3-athlete-muted, var(--v3-app-muted, currentColor));
    font-size: var(--v3-type-caption, 12px);
    line-height: 1.3;
    font-weight: var(--v3-weight-heavy, 800);
    letter-spacing: 0.02em;
}

.v3-field-control__required,
.v3-field-control__optional {
    color: var(--v3-athlete-muted, var(--v3-app-muted, currentColor));
    font-size: var(--v3-type-caption, 12px);
    font-weight: var(--v3-weight-medium, 600);
    letter-spacing: 0;
}

.v3-field-control > .v3-field-control__input,
.v3-field-control > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.v3-field-control > select,
.v3-field-control > textarea {
    width: 100%;
    min-height: var(--v3-field-height);
    border: 1px solid var(--v3-athlete-border, var(--v3-app-border, currentColor));
    border-radius: var(--v3-radius-control);
    color: var(--v3-athlete-text, var(--v3-app-text, currentColor));
    background: var(--v3-athlete-panel-soft, var(--v3-app-panel-soft, transparent));
    font: inherit;
    font-size: var(--v3-type-body, 15px);
    line-height: 1.35;
}

.v3-field-control > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.v3-field-control > select {
    padding-inline: 12px;
}

.v3-field-control > textarea {
    min-height: 84px;
    padding: 11px 12px;
    resize: vertical;
}

.v3-field-control > .v3-field-control__input:focus-visible,
.v3-field-control > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus-visible,
.v3-field-control > select:focus-visible,
.v3-field-control > textarea:focus-visible {
    border-color: var(--v3-neutral-grey);
    outline: none;
    box-shadow: var(--v3-focus-ring);
}

.v3-field-control > [aria-invalid="true"] {
    border-color: var(--v3-danger-foreground, var(--v3-danger-red));
}

.v3-field-control > [aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 2px var(--v3-danger-foreground, var(--v3-danger-red));
}

.v3-field-control__hint,
.v3-field-control__error {
    margin: 0;
    font-size: var(--v3-type-caption, 12px);
    line-height: 1.4;
    letter-spacing: 0;
}

.v3-field-control__hint {
    color: var(--v3-athlete-muted, var(--v3-app-muted, currentColor));
    font-weight: var(--v3-weight-medium, 600);
}

.v3-field-control__error {
    color: var(--v3-danger-foreground, var(--v3-danger-red));
    font-weight: var(--v3-weight-strong, 700);
}

.v3-field-control__error > :is(ul, .errorlist) {
    margin: 0;
    padding-left: 18px;
}

.v3-field-control.is-disabled,
.v3-field-control:has(:disabled) {
    opacity: 0.62;
}

.v3-field-control :disabled {
    cursor: not-allowed;
}

/* Staged form choices stay native checkboxes. They intentionally do not use
   role=switch because their effect is applied by a later Save action. */
.v3-check-control {
    cursor: pointer;
}

.v3-check-control input[type="checkbox"],
.v3-check-control__input {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    position: relative;
    inset: auto;
    display: grid;
    flex: 0 0 auto;
    place-content: center;
    margin: 0;
    border: 1px solid var(--v3-athlete-border, var(--v3-app-border-strong, currentColor));
    border-radius: var(--v3-radius-control);
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    background: var(--v3-athlete-panel, var(--v3-app-panel, transparent));
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.v3-check-control input[type="checkbox"]::before,
.v3-check-control__input::before {
    content: "";
    width: 6px;
    height: 11px;
    border: solid var(--v3-ink-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 140ms ease;
}

.v3-check-control input[type="checkbox"]:checked,
.v3-check-control__input:checked {
    border-color: var(--v3-athletic-green);
    background: var(--v3-athletic-green);
}

.v3-check-control input[type="checkbox"]:checked::before,
.v3-check-control__input:checked::before {
    transform: rotate(45deg) scale(1);
}

.v3-check-control input[type="checkbox"]:focus-visible,
.v3-check-control__input:focus-visible {
    outline: none;
    box-shadow: var(--v3-focus-ring);
}

.v3-check-control input[type="checkbox"]:disabled,
.v3-check-control__input:disabled {
    border-color: var(--v3-athlete-border, var(--v3-app-border, currentColor));
    background: var(--v3-athlete-panel-soft, var(--v3-app-panel-soft, transparent));
    cursor: not-allowed;
}

.v3-check-control:has(input:disabled) {
    opacity: 0.62;
    cursor: not-allowed;
}

/* A switch is reserved for a two-state action that takes effect immediately.
   The JS contract only adds switch semantics when data-v3-immediate is present. */
.v3-switch[data-v3-immediate] {
    cursor: pointer;
}

.v3-switch[data-v3-immediate] input[type="checkbox"] {
    width: 44px;
    min-width: 44px;
    height: 24px;
    position: relative;
    margin: 0;
    border: 1px solid var(--v3-athlete-border, var(--v3-app-border-strong, currentColor));
    border-radius: var(--v3-radius-pill);
    appearance: none;
    -webkit-appearance: none;
    background: var(--v3-athlete-panel-soft, var(--v3-app-panel-soft, transparent));
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.v3-switch[data-v3-immediate] input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--v3-athlete-muted, var(--v3-app-muted, currentColor));
    transition: transform 160ms ease, background-color 160ms ease;
}

.v3-switch[data-v3-immediate] input[type="checkbox"]:checked {
    border-color: var(--v3-athletic-green);
    background: var(--v3-athletic-green);
}

.v3-switch[data-v3-immediate] input[type="checkbox"]:checked::before {
    background: var(--v3-ink-dark);
    transform: translateX(20px);
}

.v3-switch[data-v3-immediate] input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--v3-focus-ring);
}

@media (max-width: 700px) {
    .v3-field-control {
        --v3-field-height: var(--v3-control-phone, 44px);
    }

    .v3-field-control > .v3-field-control__input,
    .v3-field-control > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    .v3-field-control > select,
    .v3-field-control > textarea {
        font-size: 16px;
    }

    .v3-check-control input[type="checkbox"],
    .v3-check-control__input {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v3-check-control input[type="checkbox"],
    .v3-check-control__input,
    .v3-switch[data-v3-immediate] input[type="checkbox"],
    .v3-switch[data-v3-immediate] input[type="checkbox"]::before {
        transition: none;
    }
}