/* ============================================================================
   FEEDBACK — /feedback/
   ----------------------------------------------------------------------------
   Loaded after /styles.css and /lets-talk/lets-talk.css, which carry the
   shared form layout, fields, errors (Brick) and submit states. These are the
   only additions.
============================================================================ */

/* 1-5 rating: square 48px boxes. Selected = Pine ground, Linen text. */
.rating { clear: both; display: flex; gap: 6px; }
.rating-box { position: relative; display: block; width: 48px; height: 48px; cursor: pointer; }
.rating-box input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rating-box span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--white); border: 1px solid var(--field-line);
  font-weight: 600; font-size: 16px; color: var(--pine);
}
.rating-box input:checked + span { background: var(--pine); border-color: var(--pine); color: var(--linen); }
.rating-box input:focus-visible + span { outline: 2px solid var(--lake); outline-offset: 2px; }
.rating-ends { display: flex; justify-content: space-between; width: 264px; max-width: 100%; margin-top: 6px; font-size: 13px; color: var(--moss); }

.choices-stack { flex-direction: column; gap: 2px; }
/* .choices sets display, which outranks the browser's own [hidden] rule —
   without this the credit choices show before the box is ticked. */
.credit[hidden] { display: none; }
.credit { padding-left: 27px; }
.credit .choice { font-size: 15px; }

.field-foot { display: flex; justify-content: space-between; gap: 12px; }
.field-foot .field-count { margin-left: auto; }
.field.is-invalid > textarea { border: 2px solid var(--brick); }

.feedback-success-copy { position: relative; display: flex; flex-direction: column; gap: 12px; }
.feedback-quote { font-size: 16px; line-height: 1.6; color: var(--linen); }
.feedback-cite { color: var(--mint); }