/* Participant feedback only (pages/feedback.html, route /f/:token; 23 Sep 2026, M5b reference, HANDOFF 89).
   Kept out of components.css like complaints.css. Everything scopes to main.feedback or .feedback-foot.
   The five-point scale is engagement.css's .rate (the closed-stage rating form), linked before this file;
   this file only sizes it for a phone in the training room.

   States (reference only, app.js block 34 writes them on <main>): data-state = form | sent | closed.
   engagement.css already hides every [data-state-view]; the three rules below show the live one. */

.feedback[data-state="form"]   [data-state-view="form"],
.feedback[data-state="sent"]   [data-state-view="sent"],
.feedback[data-state="closed"] [data-state-view="closed"] { display: block; }

/* One narrow column: most people answer on a phone, straight from the QR code. */
.feedback__wrap  { max-width: 36rem; margin-inline: auto; padding: 3rem 1rem 0; }
.feedback__wrap h1 { margin: 0; text-wrap: balance; }
.feedback__meta  { margin-top: 0.5rem; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.feedback__card  { margin-top: 1.5rem; padding: 1.5rem; }

/* The anonymity line: a quiet tinted row, no edge bar. */
.feedback__anon  { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; padding: 0.75rem 0.875rem;
                   border-radius: var(--radius-md); background: var(--grey-50); font-size: var(--text-body-sm); color: var(--grey-700); line-height: 1.5; }
.feedback__anon svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.1875rem; color: var(--primary); }

/* The questions: body-size legend, stars a thumb can hit (2rem star + padding = 40px target). */
.feedback .rate  { margin-top: 1.5rem; }
.feedback .rate legend { font-size: var(--text-body); color: var(--foreground); line-height: 1.4; }
.feedback .rate__stars { gap: 0.25rem; margin-top: 0.5rem; }
.feedback .rate__stars label { padding: 0.25rem; }
.feedback .rate__stars label svg { width: 2rem; height: 2rem; }
.feedback .rate .field__error { display: block; margin-top: 0.25rem; }
.feedback .rate .field__error[hidden] { display: none; }
.feedback__comment { margin-top: 1.5rem; }
.feedback .form-actions { margin-top: 1.5rem; }
@media (max-width: 479px) { .feedback .form-actions .btn { width: 100%; } }

.feedback__done h2 { margin: 0; }
.feedback ::selection { background: var(--navy-100); color: var(--navy-900); }
.feedback textarea { caret-color: var(--primary); }

/* The footer line: logo, entity, privacy. No site footer on this page. */
.feedback-foot   { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; max-width: 36rem; margin: 0 auto;
                   padding: 2rem 1rem 3rem; font-size: var(--text-caption); color: var(--muted-foreground); }
.feedback-foot__logo { height: 1.125rem; width: auto; }
.feedback-foot a { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .feedback-foot a:hover { color: var(--primary); } }