/* =====================================================================
   feedback.html · page-scoped layout only (tokens + components live in site.css)
   ===================================================================== */

/* hero sits on plain paper, so the form can come up close beneath it */
.fb { padding-bottom: var(--section); }

/* form column + side note. Phones: note above the form (DOM order).
   Wide: the note moves to a narrow right rail, level with the hero medallion. */
.fb__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 980px) {
  .fb__grid { grid-template-columns: minmax(0, 1fr) 292px; gap: 48px; align-items: start; }
  .fb__note { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .fb__main { grid-column: 1; grid-row: 1; max-width: 760px; }
}

/* calmer rhythm between the three questions */
#feedbackForm > .rating { margin-bottom: 32px; }
#feedbackForm > .field { margin-bottom: 30px; }

/* "Your name & email" group: a bare fieldset with the site's label + hint */
.fb__who { min-width: 0; margin: 0; padding: 0; border: 0; }
.fb__who > legend { margin-bottom: 7px; padding: 0; }
.fb__who > .field__hint { margin: -3px 0 10px; }
.fb__who .field { margin-bottom: 14px; }
@media (max-width: 720px) { .fb__who .field-grid { gap: 0; } }

#feedbackForm .submit-row { margin-top: 18px; }
#feedbackForm .status:empty { margin-top: 0; }

/* success panel: one extra line only when the wall accepted the post */
#done p + p { margin-top: 4px; }

/* the success heading takes focus only to move screen readers there; it is not a control */
#done-title:focus { outline: none; }

/* small visible "Name" / "Email" labels so each box stays identified once typed in */
.fb__sublabel { display: block; margin-bottom: 5px; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }