web_demo/static/feedback/feedback.css

/* Page-specific styles for /feedback. The bulk of the look comes from
   mobile.css (imported first): .step / .panel / .controls / .primary /
   .form-error / hero-* are all reused so this form matches the /m flow.
   This file only adds what the step CSS doesn't already cover: the two
   control types unique to this form (textarea + file), the link-styled
   primary button on the success screen, and the success screen itself. */

/* Slightly more breathing room between questions than the shared
   .controls default (14px) — this form reads as a vertical
   questionnaire, so the questions want clearer separation. */
.step-feedback .controls {
  gap: 22px;
}

/* Textarea + file input inside .controls — mobile.css styles
   input[type="text"|"email"] and select, but not these two. */
.controls textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  /* ≥16px keeps iOS Safari from auto-zooming on focus. */
  font-size: 1rem;
  line-height: 1.4;
  font-family: inherit;
  background: white;
  color: var(--ink);
  resize: vertical;
  min-height: 72px;
}

.controls input[type="file"] {
  width: 100%;
  font-size: 1rem;
  /* Hide the native status text ("No file chosen" / the picked filename) —
     it's redundant next to the labelled button. The button keeps its own
     color (set on ::file-selector-button below), so it stays visible. */
  color: transparent;
}

/* Enlarge the native "Choose File" button — iOS Safari renders it small
   by default. Both selectors cover Safari (-webkit-) and the standard. */
.controls input[type="file"]::-webkit-file-upload-button,
.controls input[type="file"]::file-selector-button {
  font-size: 1rem;
  padding: 10px 16px;
  margin-right: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--accent);
  cursor: pointer;
}

/* Inline per-field validation error — sits directly under the offending
   control (injected by feedback.js). Bottom-of-form errors are invisible
   on mobile once the field is focused and the keyboard covers them, so
   the message lives next to the field instead. */
.field-error {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

/* Red ring on the control flagged invalid, so the field itself reads as
   the error target, not just the text below it. */
.controls input[aria-invalid="true"],
.controls select[aria-invalid="true"] {
  border-color: var(--accent);
}

/* --- Success screen --------------------------------------------- */

.fb-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fb-success-inner {
  text-align: center;
  max-width: 36ch;
  margin: 0 auto;
}

.fb-success .hero-sub {
  margin: 0 auto 20px;
}

.fb-success-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #d8f1de;
  color: #1f6b34;
  font-size: 34px;
  line-height: 64px;
  font-weight: 700;
}