/* The feedback page (feedback.html; docs/web-infrastructure.md "The feedback page"). Its own file, so site.css
   and the other pages' ?v= stay as they are. Referenced with ?v=: raise it in feedback.html with every change. */
.fb-form { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.fb-form[hidden], .fb-done[hidden] { display: none; }
.fb-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-field label { color: var(--parchment); font-weight: 600; }
.fb-optional { color: var(--lichen); font-weight: 400; font-size: 0.9375rem; margin-left: 6px; }
.fb-field select, .fb-field input, .fb-field textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px;
  font: 400 1rem/1.5 var(--sans);   /* 16px: iOS doesn't zoom into the field */
  color: var(--parchment); background: var(--moss);
  border: 1px solid var(--moss-line); border-radius: 3px;
  transition: border-color 180ms var(--ease);
}
.fb-field textarea { resize: vertical; min-height: 9.5em; }
.fb-field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass-light) 50%), linear-gradient(135deg, var(--brass-light) 50%, transparent 50%);
  background-position: calc(100% - 21px) 21px, calc(100% - 15px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.fb-field select:hover, .fb-field input:hover, .fb-field textarea:hover { border-color: rgba(216, 185, 122, 0.55); }
.fb-field select:focus-visible, .fb-field input:focus-visible, .fb-field textarea:focus-visible { outline-offset: 1px; border-color: var(--brass-light); }
.fb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
@media (max-width: 560px) { .fb-pair { grid-template-columns: 1fr; } }
.legal-page .fb-hint { color: var(--lichen); font-size: 0.9375rem; }
.legal-page .fb-hint.is-near { color: var(--brass-light); }
/* The trap for bots: off the page, out of the tab order, hidden from screen readers (aria-hidden in the HTML). */
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-check { min-height: 65px; max-width: 100%; overflow: hidden; }
.legal-page .fb-status { color: var(--parchment); }
.fb-status:empty { display: none; }
.legal-page .fb-status.is-error { color: #E9B49A; }
.fb-actions { display: flex; }
.fb-actions .btn { min-width: 9rem; }
.fb-actions .btn[disabled] { opacity: 0.55; cursor: default; }
@media (max-width: 560px) { .fb-actions .btn { width: 100%; } }
.fb-done { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 5vw, 36px); background: var(--moss);
  border: 1px solid rgba(216, 185, 122, 0.45); border-radius: 6px; }
.legal-page .fb-done h2 { margin-top: 0; }
.fb-done:focus { outline: none; }