/* =========================================================
   LUMINA3ai — feedback page
   Builds on style.css tokens (panel, btn, pageHead).
   ========================================================= */

#feedbackForm {
    max-width: 42.5rem;
    margin-bottom: 4rem;
}

#feedbackFormBody {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

#feedbackForm label {
    margin: 1.25rem 0 0.5rem;
    color: var(--label-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    letter-spacing: var(--tr-small);
}

#feedbackForm label:first-child {
    margin-top: 0;
}

/* fields are sunken wells in the panel; focus is a soft accent ring (also visible for keyboard) */
#feedbackForm input,
#feedbackForm textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    resize: vertical;
    background: var(--bg-deep);
    color: var(--label);
    border: var(--edge);
    border-radius: var(--radius-m);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#feedbackForm textarea {
    min-height: 9rem;
}

#feedbackForm input:focus,
#feedbackForm textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-fill);
}

/* keep browser autofill on-theme */
#feedbackForm input:-webkit-autofill {
    -webkit-text-fill-color: var(--label);
    box-shadow: 0 0 0 1000px var(--bg-deep) inset;
}

#feedbackFormSubmitBtn {
    align-self: flex-start;
    margin-top: 1.75rem;
}

@media (max-width: 640px) {
    #feedbackFormBody {
        padding: 1.25rem;
    }
}