/* #####################################################################
   MONARCH DESIGN SYSTEM v0.8.3.4.1
   MODULE: Forms
   PURPOSE: One shared visual and structural standard for every form.
   ##################################################################### */

form {
    font: inherit;
}

.form-grid,
form.form-grid {
    display: grid;
    gap: var(--space-lg);
}

.form-field {
    display: grid;
    gap: var(--space-xs);
    width: 100%;
    text-align: start;
}

.form-label,
form label:not(.form-choice) {
    display: grid;
    gap: var(--space-xs);
    color: var(--site-color-accent);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    text-align: start;
}

.form-control,
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
form select,
form textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.25rem;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    color: var(--site-color-text);
    background: var(--surface-medium);
    font: inherit;
    line-height: 1.4;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
}

form textarea,
textarea.form-control {
    min-height: 9rem;
    resize: vertical;
}

.form-control::placeholder,
form input::placeholder,
form textarea::placeholder {
    color: var(--site-color-muted);
    opacity: 1;
}

.form-control:hover,
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
form select:hover,
form textarea:hover {
    border-color: var(--site-color-secondary);
}

.form-control:focus,
form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
form select:focus,
form textarea:focus {
    border-color: var(--site-color-accent);
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--site-color-accent);
}

.form-help { color: var(--site-color-muted); font-size: var(--fs-sm); }
.form-control.is-success { border-color: var(--semantic-success, var(--palette-green)); }
.form-control.is-error { border-color: var(--semantic-danger, var(--palette-red)); }
.form-error { color: var(--semantic-danger, var(--color-error)); font-size: var(--fs-sm); }

.form-choice,
.choice-row label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--site-color-text);
    font-family: var(--font-text);
    font-weight: var(--fw-normal);
}

form input[type="checkbox"],
form input[type="radio"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--site-color-accent);
}

form input[type="range"] { width: 100%; accent-color: var(--site-color-accent); }
form input[type="file"] { cursor: pointer; }
form button, form .button { min-height: 3.25rem; }

.choice-row { display:flex; flex-wrap:wrap; gap:var(--space-lg); }
.form-action { display:flex; align-items:end; justify-content:center; }
.form-action .button { width:100%; }

.form-panel {
    padding: var(--space-xl);
    border: var(--border-width-default) solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--site-color-background);
}

@media (max-width: 40rem) {
    .form-panel { padding: var(--space-lg); }
}