form { width: 100%; margin-top: 8vh; }
form { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; row-gap: 1rem; }
form { padding-bottom: calc(env(safe-area-inset-bottom) + 6rem); }

.home-link { margin-bottom: 8vh; font-size: 2rem; }

.feedback-intro { width: min(30rem, calc(100vw - 3rem)); text-align: center; color: var(--text-light); margin: 0; }

#feedback-error { width: min(30rem, calc(100vw - 3rem)); margin: 0; padding: 0.7em 1em; border-radius: 12px; background: rgba(243, 75, 46, 0.12); color: #c0392b; text-align: center; }

.input-wrapper { position: relative; width: min(30rem, calc(100vw - 3rem)); }
.input-wrapper input,
.input-wrapper textarea { width: 100%; font-size: 1.2rem; padding: 1.6em var(--s) 0.5em; }
.input-wrapper textarea { resize: vertical; min-height: 8rem; line-height: 1.5; font-family: inherit; }

.input-wrapper label { position: absolute; top: 0.5em; left: 2px; padding: 0 var(--s); background-color: transparent; transform: none; font-size: 0.72em; transition: top 0.2s ease-in-out, transform 0.2s ease-in-out, font-size 0.2s ease-in-out; color: var(--text-light); pointer-events: none; }
.input-wrapper input:placeholder-shown + label { top: 50%; transform: translateY(-50%); font-size: 1em; }
.input-wrapper input:focus + label { top: 0.5em; transform: none; font-size: 0.72em; }
/* Textarea gets the same float, but its resting label sits at the top where the
   first line of text begins (a centred label would float in the middle of a
   tall field). :focus is listed after :placeholder-shown so focus wins. */
.input-wrapper textarea:placeholder-shown + label { top: 1.35em; transform: none; font-size: 1em; }
.input-wrapper textarea:focus + label { top: 0.5em; transform: none; font-size: 0.72em; }

/* Screenshot picker / drop zone — hide the native control, drive it from the label. */
.image-field { display: flex; align-items: center; gap: 1rem; width: min(30rem, calc(100vw - 3rem)); padding: 0.9em 1.1em; border: 1.5px dashed var(--border); border-radius: 12px; background-color: var(--bg-light); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; }
.image-field:hover { border-color: var(--secondary); }
.image-field.is-dragover { border-color: var(--secondary); border-style: solid; background-color: rgba(184, 97, 111, 0.08); }
.image-field.has-error { border-color: #c0392b; }
.image-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.image-field-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.image-field-label { font-weight: 600; color: var(--text); }
.image-field-name { color: var(--text-light); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-field.has-error .image-field-name { color: #c0392b; }
.image-field-preview { width: 3.25rem; height: 3.25rem; flex-shrink: 0; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.image-field-remove { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background-color: var(--bg); color: var(--text-light); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.image-field-remove:hover { background-color: var(--secondary); color: #fff; }
/* The display:flex above outranks the [hidden] UA rule, so restore it explicitly. */
.image-field-remove[hidden] { display: none; }

/* Thank-you screen */
#feedback-thanks { display: flex; flex-direction: column; align-items: center; margin-top: 8vh; }
#feedback-thanks .home-link { margin-bottom: 8vh; font-size: 2rem; }
.thanks-card { display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 1rem; width: min(30rem, calc(100vw - 3rem)); }
.thanks-emoji { font-size: 3.5rem; line-height: 1; }
.thanks-card h1 { margin: 0; font-size: 2rem; }
.thanks-card p { margin: 0; color: var(--text-light); }