/* The feedback page. Builds on /css/site.css (tokens, header, footer); this adds the form. */
.feedback { max-width: 640px; padding: 32px 0 0; }
.feedback h1 { font: 600 clamp(28px, 4.5vw, 40px)/1.15 var(--f-body); letter-spacing: -.01em; margin: 0 0 10px; }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 28px; }

.field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.field > label, legend { display: block; font-weight: 600; margin: 0 0 8px; padding: 0; }
.optional { color: var(--muted); font-weight: 400; }
select, textarea, input[type=email] {
  display: block; width: 100%; font: 16px/1.45 var(--f-body); color: var(--text);
  background: var(--bench-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
textarea { resize: vertical; min-height: 160px; }
select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--cap); outline-offset: 2px; }
[aria-invalid=true] { border-color: #e0806a; }
.hint, .note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.error { color: #f0a08c; font-size: 14px; margin: 6px 0 0; }

/* The kinds of feedback, as a row of chips; each is a real radio button. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bench); cursor: pointer; }
.chips label:hover { border-color: #444a52; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips label:has(input:checked) { border-color: var(--cap); color: var(--cap); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--cap); outline-offset: 2px; }

.send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; }
.status { margin: 0; color: var(--muted); }
.status.bad { color: #f0a08c; }
button, .button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 6px;
  font: 600 15px var(--f-body); color: var(--text); background: var(--bench-2); border: 1px solid var(--line);
  text-decoration: none; cursor: pointer;
}
.primary { background: var(--cap); color: var(--cap-ink); border-color: var(--cap); }
button:hover, .button:hover { border-color: #444a52; }
.primary:hover { background: #f0cf55; }
button:focus-visible, .button:focus-visible { outline: 2px solid var(--cap); outline-offset: 2px; }
button[aria-disabled=true] { opacity: .6; cursor: progress; }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sent { background: var(--bench); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.sent:focus { outline: none; }
.sent h2 { font: 600 24px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 8px; }
.sent p { color: var(--muted); margin: 0 0 18px; }
.sent .actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }