/* ═══════════════════════════════════════════════════════════════════════════
   REVIEW FORM

   Reuses the existing form components from style.css: .form-row, .field,
   .form-status, .hidden-field, .button-frame. Only what the review page adds
   beyond those lives here: the two-column page grid, the rating scale, the
   consent block and the "what happens next" list.

   Mobile first. Layouts defined at 375, 768 and 1280.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page grid ──────────────────────────────────────────────────────────── */
.review-grid { display: grid; gap: 56px; align-items: start; }

/* The contact page uses a 1.4fr/1fr split at every width above mobile. Match
   it so the two forms sit at the same rhythm. */
@media (min-width: 768px) {
  .review-grid { gap: 60px; }
}
@media (min-width: 1280px) {
  .review-grid { grid-template-columns: 1.4fr 1fr; gap: 70px; }
}

/* .form-row is two columns from the start in style.css, which is too tight for
   375. One column until there is room. */
.js-review-form .form-row { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .js-review-form .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Field notes ────────────────────────────────────────────────────────── */
.field-note {
  margin: 8px 0 0;
  color: rgba(246, 245, 243, 0.75);
  line-height: 1.5;
}
/* Bone, not green: green on the deep green ground is 2.84:1, under AA for
   text. The wording carries the urgency instead of the colour. */
.field-note.is-short { color: #F6F5F3; }

/* ── Rating ─────────────────────────────────────────────────────────────────
   A real radio group, so it is keyboard operable and announced as one control.
   The number is the label; no stars, because the site has no icon language. */
.rv-rating { border: 0; padding: 0; margin: 0 0 24px; }
.rv-rating legend { padding: 0; margin-bottom: 12px; }
.rv-rating__scale { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-rating__opt { position: relative; display: inline-flex; }
.rv-rating__opt input {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; cursor: pointer;
}
.rv-rating__opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; min-height: 48px;
  border: 1px solid var(--line-2);
  color: rgba(246, 245, 243, 0.75);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.rv-rating__opt input:checked + span {
  background: var(--green);
  border-color: var(--green);
  color: var(--deep);
}
.rv-rating__opt input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* Hover is a desktop affordance; on touch the checked state carries it. */
@media (hover: hover) {
  .rv-rating__opt:hover input:not(:checked) + span { color: #F6F5F3; border-color: #F6F5F3; }
}

/* ── Consent ────────────────────────────────────────────────────────────────
   Deliberately not a small print line. Publishing someone by name needs a
   decision they actually saw. */
.rv-consent {
  border: 1px solid var(--line-2);
  padding: 20px;
  margin-bottom: 26px;
}
.rv-consent__label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  cursor: pointer;
  line-height: 1.5;
}
/* style.css sets .field label{display:block} and .field input{width:100%};
   both are wrong for a checkbox sitting inside a label. */
/* Drawn rather than native: the platform checkbox renders as a dark square on
   the deep green ground, which is too faint to read as a control. Square to
   match the site, and sized past the 24px minimum target. */
.rv-consent__label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  flex: 0 0 24px;
  height: 24px;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid #F6F5F3;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 200ms ease, border-color 200ms ease;
}
/* The tick is a rotated corner, so no icon font or SVG is needed. */
.rv-consent__label input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--deep);
  border-bottom: 2px solid var(--deep);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.rv-consent__label input[type="checkbox"]:checked {
  background: var(--green);
  border-color: var(--green);
}
.rv-consent__label input[type="checkbox"]:checked::before { opacity: 1; }
@media (hover: hover) {
  .rv-consent__label:hover input[type="checkbox"]:not(:checked) { background: rgba(246, 245, 243, 0.12); }
}
.rv-consent__label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.rv-consent .field-note { margin-top: 12px; }

/* ── What happens next ──────────────────────────────────────────────────── */
.review-aside h2 { margin: 0 0 24px; }
.review-steps { display: grid; gap: 22px; margin: 0; padding: 0; }
.review-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
/* Bone, not green. Green on the deep green ground is 2.84:1, under AA, and
   these numerals are text rather than decoration. */
.review-steps__n { padding-top: 2px; color: #F6F5F3; }
.review-steps p { margin: 0; line-height: 1.5; }
/* Bone clears AA. Weight and the focus ring distinguish this mail link. */
.review-aside__mail {
  color: #F6F5F3;
  font-weight: 600;
  text-decoration: none;
}
.review-aside__mail:hover { color: var(--green); }
.review-aside__mail:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.review-aside__note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .rv-rating__opt span,
  .rv-consent__label input[type="checkbox"] { transition: none; }
}