/* ─── SHAC form layer ────────────────────────────────────────────────────────
   Loads after formbase.css and shared.css. Two jobs:

   1. Retheme formbase's defaults (it ships #fff/#bbb/#17f) onto SHAC tokens.
   2. Everything formbase does not cover: field and label layout, hint text,
      error states, the error summary, and the submitting button state.

   Only join.html loads this, so the other four pages carry none of its weight.
   Error-summary and hint markup follow the GOV.UK Design System patterns
   (MIT): https://design-system.service.gov.uk/patterns/
   ────────────────────────────────────────────────────────────────────────── */

/* Field borders are UI component boundaries, so WCAG 2.1 AA 1.4.11 wants 3:1
   against their background. Measured against --paper and --cream: alpha 0.28
   gives 1.70:1 and 0.35 gives 1.95:1, both failing. 0.54 is the break-even and
   0.58 leaves headroom at 3.4:1 on paper, 3.3:1 on cream. */
/* The focus ring is a UI component boundary too, so 1.4.11's 3:1 applies to it
   as well. --orange measures 2.96:1 on --paper and 2.79:1 on --cream, which
   fails. --orange-dark is 6.40:1 and 6.04:1. DESIGN.md already restricts
   --orange to decoration for the same reason. */
:root{
  --field-line:rgba(var(--maroon-rgb),0.58);
  --field-line-hover:rgba(var(--maroon-rgb),0.78);
  --field-ring:var(--orange-dark);
}

/* ─── retheme formbase ─── */
.input,
.select{
  /* background-color, NOT the background shorthand. The shorthand resets every
     background-* longhand, and formbase draws the select's dropdown chevron with
     background-image/-position/-repeat/-size. It cost nothing while no page used
     a select; the moment the residency question became two of them, they rendered
     as plain text boxes with no affordance for opening. */
  background-color:var(--paper);
  border:1px solid var(--field-line);
  border-radius:8px;                 /* formbase ships square; DESIGN.md caps at 16px */
  box-shadow:none;                   /* no border + box-shadow together (DESIGN.md) */
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-base);          /* 16px, so iOS does not zoom on focus */
  line-height:1.5;
  margin:0;                          /* spacing is owned by .field below */
  padding:11px 13px;
}
.input::placeholder,
.select::placeholder{color:var(--muted);opacity:1;}

/* formbase's chevron is black. Recolour it to the maroon so the control reads as
   part of the palette rather than as a browser default that escaped theming.
   Same path data, %23751D29 is --maroon url-encoded. */
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%23751D29' d='m256 298.3 174.2-167.2c4.3-4.2 11.4-4.1 15.8.2l30.6 29.9c4.4 4.3 4.5 11.3.2 15.5L264.1 380.9c-2.2 2.2-5.2 3.2-8.1 3-3 .1-5.9-.9-8.1-3L35.2 176.7c-4.3-4.2-4.2-11.2.2-15.5L66 131.3c4.4-4.3 11.5-4.4 15.8-.2z'/%3E%3C/svg%3E");
  background-position:calc(100% - 13px) 50%;
  background-repeat:no-repeat;
  background-size:11px;
  /* Room for the chevron, so a long "Still living there" cannot run under it. */
  padding-right:34px;
  cursor:pointer;
}

.input:hover,
.select:hover{border-color:var(--field-line-hover);}

.input:focus-visible,
.select:focus-visible,
.control__input:focus-visible + .control__label:before{
  border-color:var(--maroon);
  outline:2px solid var(--field-ring);
  outline-offset:2px;
}
/* formbase's own focus colour, neutralised */
.input:focus,
.select:focus{border-color:var(--maroon);}
.control__input:focus + .control__label:before{border-color:var(--maroon);}

.input[disabled],
.select[disabled]{
  background:var(--cream);
  border-color:var(--line);
  color:var(--muted);
}

textarea.input{min-height:104px;resize:vertical;}

/* ─── retheme checkboxes and radios ─── */
.control{margin:0;}
.control + .control{margin-top:10px;}
.control__label{
  color:var(--ink);
  font-size:var(--fs-md);
  line-height:1.5;
  align-items:flex-start;            /* long labels wrap under the text, not the box */
  cursor:pointer;
  gap:0;
}
.control__label:before{
  background:var(--paper);
  border-color:var(--field-line);
  border-radius:4px;
  box-shadow:none;
  margin-right:11px;
  margin-top:1px;                    /* optical align to the first text line */
}
.control__input[type=radio] + .control__label:before{border-radius:100%;}
.control__input:checked + .control__label:before{
  background:var(--maroon);
  border-color:var(--maroon);
}
/* formbase tints the tick via a data-URI SVG that is black by default. Recolour
   it to the paper white so it reads against the filled maroon box. */
.control__input:checked + .control__label:after{filter:invert(1) brightness(2);}
/* formbase pins the tick with top:calc(50% - 11px), which assumes the box is
   vertically centred in the label. align-items:flex-start above deliberately
   moves the box to the top so long labels wrap under the text, and the tick was
   left behind at the label's midpoint: on the four-line consent clause it
   floated two lines below the box it belongs in. Pin it to the same 1px offset
   :before uses, so the two stay together however many lines the label runs to. */
.control__label:after{top:1px;}
.control__label:hover:before{border-color:var(--maroon);}
.control__input[disabled] + .control__label{color:var(--muted);cursor:not-allowed;}

@media(prefers-reduced-motion:reduce){
  .input,.select,.control__label:before,.control__label:after{transition:none;}
}

/* ─── form frame ─── */
.reg-form{max-width:38rem;}

.field{margin-top:26px;}

.field > label,
.field-group > legend{
  display:block;
  font-family:var(--body);
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
}
.req{color:var(--maroon);font-weight:600;}
.optional{color:var(--muted);font-weight:400;font-size:var(--fs-sm);}

/* hint text, wired to its control with aria-describedby */
.hint{
  display:block;
  font-size:var(--fs-sm);
  color:var(--muted);
  line-height:1.5;
  margin-top:5px;
}
.field > label + .hint,
.field-group > legend + .hint{margin-bottom:9px;}
.field > label + .input,
.field > label + .select{margin-top:9px;}

/* fieldset groups for radios and checkbox lists */
.field-group{border:0;margin-top:30px;padding:0;}
.field-group > legend{padding:0;}
.field-group .controls{margin-top:11px;}

/* ─── one question, two answers side by side ─── */
/* Telegram/WhatsApp, and the two ends of the residency range. Both pairs are a
   single question with a single error, so they live in a fieldset and these are
   sub-labels, styled like .writein-label rather than like a field label. */
.field-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  margin-top:11px;
}
.field-pair__item > label{
  display:block;
  font-family:var(--body);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:6px;
}
/* At 390px each column is about 150px, which truncates a phone number as you
   type it and leaves the AY selects showing "AY2018/1…". Stack instead. */
@media(max-width:600px){.field-pair{grid-template-columns:1fr;}}

/* A year is four characters, so a full-width control reads as a mistake. Slightly
   wider than the 9rem the text input used, because a select has to leave room for
   the chevron. Deliberately narrower than the two academic-year selects above it:
   those are half a row each and share it, this one stands alone. */
.select--year{max-width:11rem;}

/* two-column checkbox list for the long chapter list */
.controls--cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 26px;
}
.controls--cols .control + .control{margin-top:0;}
@media(max-width:600px){
  .controls--cols{grid-template-columns:1fr;}
  /* Single-line labels are 21px tall, which is a small thumb target. The 10px
     gap between rows already satisfies 2.5.8's spacing exception; this just
     makes the tap area itself comfortable. */
  .control__label{min-height:24px;}
}

/* ─── chapter bands ─── */
/* Sub-headings inside the chapter fieldset. Sentence case on purpose: uppercase
   tracked labels read as marketing eyebrows, and these are form furniture. */
.chapter-band{margin-top:20px;}
.chapter-band:first-of-type{margin-top:11px;}
.group-label{
  display:flex;
  flex-wrap:wrap;
  gap:2px 9px;
  align-items:baseline;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:11px;
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.group-note{font-weight:400;font-size:var(--fs-xs);color:var(--muted);}

/* the two answers that are not chapters, fenced off from the grid */
.chapter-band--else{
  margin-top:22px;
  padding-top:19px;
  border-top:1px solid var(--line);
}
.chapter-band--else .control + .control{margin-top:10px;}

/* the "Other" write-in, revealed by its checkbox */
.writein{margin-top:11px;margin-left:31px;}
.writein[hidden]{display:none;}
.writein .input{max-width:22rem;}
.writein-label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:6px;
}
@media(max-width:600px){.writein{margin-left:0;}}

/* consent sits in its own tinted box so it reads as a deliberate act */
.consent{
  margin-top:30px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
}
.consent .control__label{font-size:var(--fs-sm);line-height:1.55;}

/* ─── error states ─── */
.field.has-error > label,
.field-group.has-error > legend{color:var(--maroon);}
.field.has-error .input,
.field.has-error .select,
/* Reach and residency are fieldsets holding text inputs and selects, not
   checkboxes, so the group needs the same treatment .field gets. */
.field-group.has-error .input,
.field-group.has-error .select,
.field-group.has-error .control__label:before{
  border-color:var(--maroon);
  border-width:2px;
}
.field-error{
  display:none;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--maroon);
  line-height:1.45;
  margin-top:7px;
}
.has-error .field-error{display:block;}

/* error summary: listed at the top, each entry links to its field, takes focus
   on failed submit. Straight from the GOV.UK pattern. */
.error-summary{
  display:none;
  border:2px solid var(--maroon);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:30px;
}
.error-summary.is-shown{display:block;}
.error-summary:focus-visible{outline:2px solid var(--field-ring);outline-offset:2px;}
.error-summary h2{
  font-family:var(--display);
  font-size:var(--fs-xl);
  color:var(--maroon);
  letter-spacing:var(--ls-display);
  line-height:1.2;
}
.error-summary ul{margin:11px 0 0;padding-left:20px;}
.error-summary li{font-size:var(--fs-md);line-height:1.5;}
.error-summary li + li{margin-top:5px;}
.error-summary a{color:var(--maroon);font-weight:600;}

/* ─── submit ─── */
.reg-submit{margin-top:34px;}
.reg-submit button{
  font-family:var(--body);
  border:0;
  cursor:pointer;
}
.reg-submit button[disabled]{
  opacity:0.6;
  cursor:progress;
  transform:none;
}
.reg-submit button[disabled]:hover{
  background:var(--maroon);
  transform:none;
}

/* ─── outcome panels ─── */
.form-outcome{display:none;}
.form-outcome.is-shown{display:block;}
.form-outcome--ok{
  /* Same measure as .reg-form, so it lands in the footprint the form just left
     instead of reading as a stray wide box. */
  max-width:38rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:16px;
  padding:32px 30px;
}
.form-outcome--ok h2{
  font-family:var(--display);
  font-size:var(--fs-2xl);
  color:var(--maroon);
  letter-spacing:var(--ls-display);
  line-height:1.15;
}
.form-outcome--ok p{
  font-size:var(--fs-md);
  color:var(--muted);
  margin-top:12px;
  line-height:1.6;
  max-width:52ch;
}
.form-outcome--ok .link-list{margin-top:22px;}

.form-error{
  display:none;
  border:2px solid var(--maroon);
  border-radius:14px;
  padding:18px 20px;
  margin-top:22px;
  font-size:var(--fs-md);
  line-height:1.55;
}
.form-error.is-shown{display:block;}

/* honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it. Never announced, never focusable. */
.hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}