label {
    color: var(--color-ink);
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    appearance: none;
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: 1.6rem;
    line-height: 1.4;
    margin: 0 0 var(--space-5);
    min-height: 4.6rem;
    padding: 1rem 1.2rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.8rem) 2rem, calc(100% - 1.3rem) 2rem;
    background-repeat: no-repeat;
    background-size: 0.5rem 0.5rem;
    padding-right: 4rem;
}

select[multiple] {
    background-image: none;
    min-height: 12rem;
    padding-right: 1.2rem;
}

select[multiple] option {
    padding: 0.8rem 1rem;
}

textarea {
    min-height: 12rem;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-accent-500);
}

input[disabled],
select[disabled],
textarea[disabled] {
    background: var(--color-surface-muted);
    color: var(--color-muted);
    cursor: not-allowed;
}

input[type="checkbox"] {
    accent-color: var(--color-brand-700);
    min-height: 1.8rem;
    min-width: 1.8rem;
}

.input {
    margin-bottom: var(--space-2);
}

.input.checkbox label {
    align-items: center;
    display: flex;
    gap: var(--space-2);
}

.input.error input,
.input.error select,
.input.error textarea {
    border-color: var(--color-danger);
}

.error-message {
    color: var(--color-danger);
    font-size: 1.3rem;
    margin: calc(var(--space-4) * -1) 0 var(--space-4);
}

.form-hint,
.character-count {
    color: var(--color-muted);
    font-size: 1.3rem;
}

.form-hint {
    margin: calc(var(--space-4) * -1) 0 var(--space-4);
}

.character-count {
    margin: calc(var(--space-4) * -1) 0 var(--space-4);
    text-align: right;
}

.form-grid,
.filter-grid {
    display: grid;
    gap: 0 var(--space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-form {
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
}

.filter-field--wide {
    grid-column: 1 / -1;
}

.field--protected {
    background: var(--color-surface-muted);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
}

.field--protected p {
    color: var(--color-muted);
    margin: 0;
}

.selection-summary {
    align-items: center;
    background: var(--color-surface-muted);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.selection-summary__details {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.selection-summary__details strong,
.selection-summary__details span,
.selection-summary__details small {
    overflow-wrap: anywhere;
}

.selection-summary__details span,
.selection-summary__details small {
    color: var(--color-muted);
}

@media (max-width: 64rem) {
    .form-grid,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-field--wide {
        grid-column: auto;
    }

    .selection-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .selection-summary .button {
        text-align: center;
    }
}