/* =========================================================================
   Ghost Installations · quote form dialog   (/assets/gi-form.css)

   Styles the markup gi-form.js enhances (the <dialog id="gi-dialog"> at the
   page's @gi-form-dialog placeholder). Linked from the page head, after
   /brand/ghost-installations.css and /assets/gi-autowatch.css.

   Where every value comes from, because the form must look like the page:
   - Colours, faces, radii and spacing: the compiled brand tokens
     (brand/ghost-installations.css, from DESIGN-ghost-installations.md).
     No colour is typed here except the fallbacks below, the backdrop's
     60% black and the select chevron's black.
   - Layout-local tokens (brief §3.4): --gi-action-pressed, --gi-input-border,
     --gi-focus, --gi-progress-off and --gi-plate-border live in
     assets/gi-autowatch.css :root. Each is read with the brief's value as a
     fallback, so the form still renders right on a page (or a test harness)
     that does not load that file. The page's value always wins.
   - Type sizes: the explicit scale in brief §3.3, by role, NOT the compiled
     --text-* steps (DESIGN-ghost-installations.md explains why: the
     compiled scale is not monotonic on phones). The role each size takes is
     named beside it.
   - Controls (brief §3.5): labels Nunito Sans 18px/700; inputs 18px (16px
     or more stops iOS zooming on focus), 52px tall, 1px input border,
     radius 5px, no inset shadow; the plate 28px text, 60px tall; option
     buttons at least 64px tall; primary actions are red pills with a 19px
     bold label (white on #ED392C is 4.02:1, AA only as large text, which
     19px bold is) [CONFIRM K-a11y].
   - Motion: none. The live page changes colour instantly (transition: all
     0s), and so does this.

   Classes are gi-form__<element>--<modifier>, one block, so nothing here
   can collide with the page's own sections.
   ========================================================================= */

/* ---- tokens -------------------------------------------------------------- */
.gi-form {
  --gif-red:          var(--color-action);
  --gif-red-hover:    var(--color-action-hover);
  --gif-red-pressed:  var(--gi-action-pressed, #d5251c);
  --gif-on-red:       var(--color-on-action);
  --gif-ink:          var(--color-ink);
  --gif-muted:        var(--color-muted);
  --gif-surface:      var(--color-surface);
  --gif-tint:         var(--color-surface-2);
  --gif-err:          var(--color-err);
  --gif-border:       var(--gi-input-border, #767676);
  --gif-progress-off: var(--gi-progress-off, #767676);
  --gif-plate:        var(--gi-plate-border, #000000);
  --gif-focus:        var(--gi-focus, #000000);   /* a colour: the ring is 3px solid of it */
  --gif-pad:          var(--space-6);           /* 32px desktop */
}

/* ---- the dialog ----------------------------------------------------------
   Never set `display` on the closed dialog: the UA's display:none is what
   keeps it invisible without JavaScript. Desktop: a centred card, at most
   560px wide. Below 600px (the page's single-column switch): a full-screen
   sheet, so nothing on the page shows round it and no field sits behind
   the sticky bar (WCAG 2.4.11). */
.gi-form {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--gif-surface);
  color: var(--gif-ink);
  font-family: var(--font-body);
  font-size: 16px;                              /* §3.3 Body */
  line-height: 1.625;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: none;
}
.gi-form::backdrop { background: rgba(0, 0, 0, 0.6); }
.gi-form *,
.gi-form *::before,
.gi-form *::after { box-sizing: border-box; }
.gi-form [hidden] { display: none !important; }

/* Read by screen readers, not shown ("Error:" before a field's message). */
.gi-form__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 599.98px) {
  .gi-form {
    --gif-pad: var(--space-4);                  /* the page's mobile gutter */
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}

/* From 600px the card sits at a fixed distance from the top rather than
   centred: centred, it changed height and jumped by up to 150px between
   steps, so Close, Back and the progress moved under the pointer. The
   height cap follows the new top margin, so the bottom is never cut off. */
@media (min-width: 600px) {
  .gi-form {
    margin: max(16px, 6vh) auto auto;
    max-height: calc(100vh - max(16px, 6vh) - 16px);
    max-height: calc(100dvh - max(16px, 6dvh) - 16px);
  }
}

/* The page behind does not scroll while the dialog is open. */
html.gi-dialog-open { overflow: hidden; }

/* Element reset at ONE class of specificity (the elements sit in :where()).
   That beats the page's own element rules (a layout's "h2 { margin… }"
   must not reach into the form), and ties with every gi-form__ class
   below, which win because they come later. A plain ".gi-form p" (one
   class plus one element) outranked ".gi-form__hint" and silently ate its
   margin. */
.gi-form :where(p, h2, h3, ul, ol, fieldset, legend) { margin: 0; padding: 0; }
.gi-form :where(fieldset) { border: 0; min-width: 0; }
.gi-form :where(legend) { display: block; width: 100%; }
.gi-form :where(a) { color: var(--gif-ink); text-underline-offset: 0.15em; }
/* A phone number never breaks across lines (the relay error wrapped it as
   "0800 / 246 1482" at 1280px). */
.gi-form :where(a[href^="tel:"]) { white-space: nowrap; }
.gi-form :where(img, svg) { display: inline-block; vertical-align: middle; }

/* ---- focus: 3px black ring with a 2px gap (§3.4 --gi-focus), >= 3:1 -------- */
.gi-form :focus-visible { outline: 3px solid var(--gif-focus); outline-offset: 2px; }
.gi-form .gi-form__question:focus,
.gi-form .gi-form__summary:focus,
.gi-form .gi-form__fail:focus { outline: none; }   /* moved to for reading, not for typing */

/* ---- top bar: Back and Close, both 44px targets -------------------------- */
.gi-form__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--space-1) var(--space-2) 0;
}
.gi-form__back,
.gi-form__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--gif-ink);
  cursor: pointer;
}
.gi-form__back {
  padding: 0 var(--space-2);
  font: 700 16px/1.2 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.gi-form__close {
  margin-left: auto;
  font: 400 32px/1 var(--font-body);
}
.gi-form__back:hover,
.gi-form__close:hover { color: var(--gif-red-hover); }

/* ---- header (every step; persisted from the lightbox) --------------------- */
.gi-form__head {
  padding: 0 var(--gif-pad) var(--space-4);
  text-align: center;
}
.gi-form__eyebrow {
  font: 700 14px/1.571 var(--font-body);        /* §3.3 Utility / strip */
}
.gi-form__title {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 22px);          /* §3.3 Card title */
  line-height: 1.318;
}
.gi-form__sub {
  margin-top: var(--space-1);
  font: 600 14px/1.571 var(--font-body);        /* §3.3 Utility / strip */
}

/* Progress: "Step n of 5" plus five segments. The bar starts with one
   segment filled (fast-to-slow progress, brief §4.1). Inactive segments
   are #767676 (3:1+ on white); the live #D9D9D9 was 1.41:1. */
.gi-form__progress { margin-top: var(--space-4); }

/* Phones: steps 2 to 5 keep only the title and the progress. The eyebrow
   and the two persisted sub-lines took five lines of a 375px screen before
   the question, and pushed step 4's options below the fold on the step
   that decides the conversion. They show on step 1, on the exits and the
   leave check, and on every screen from 600px, and they stay in the DOM
   (gi-form.js sets data-gi-step on the dialog). The spacing below is the
   phone's tighter rhythm for the same reason; no copy or order changes. */
@media (max-width: 599.98px) {
  .gi-form[data-gi-step="2"] .gi-form__eyebrow,
  .gi-form[data-gi-step="3"] .gi-form__eyebrow,
  .gi-form[data-gi-step="4"] .gi-form__eyebrow,
  .gi-form[data-gi-step="5"] .gi-form__eyebrow,
  .gi-form[data-gi-step="2"] .gi-form__sub,
  .gi-form[data-gi-step="3"] .gi-form__sub,
  .gi-form[data-gi-step="4"] .gi-form__sub,
  .gi-form[data-gi-step="5"] .gi-form__sub { display: none; }
  .gi-form[data-gi-step="2"] .gi-form__title,
  .gi-form[data-gi-step="3"] .gi-form__title,
  .gi-form[data-gi-step="4"] .gi-form__title,
  .gi-form[data-gi-step="5"] .gi-form__title { margin-top: 0; }
}
.gi-form__progress-text {
  font: 600 14px/1.571 var(--font-body);
  color: var(--gif-ink);
}
.gi-form__segs {
  display: flex;
  gap: 6px;
  margin-top: var(--space-2);
  list-style: none;
}
.gi-form__seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--gif-progress-off);
}
.gi-form__seg--on { background: var(--gif-red); }

/* ---- body --------------------------------------------------------------- */
.gi-form__form,
.gi-form__leave { padding: 0 var(--gif-pad) var(--gif-pad); }
.gi-form__step,
.gi-form__exit,
.gi-form__leave { display: block; }

.gi-form__question {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 24px);          /* §3.3 FAQ question */
  line-height: 1.292;
  color: var(--gif-ink);
}
.gi-form__question label { cursor: default; }

/* Error summary (GOV.UK): red rule, links to each field. */
.gi-form__summary {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 4px solid var(--gif-err);
}
.gi-form__summary-title {
  font: 700 18px/1.4 var(--font-body);
  color: var(--gif-ink);
}
.gi-form__summary-list {
  margin-top: var(--space-2);
  padding-left: 0;
  list-style: none;
}
.gi-form__summary-list a {
  font-weight: 700;
  color: var(--gif-err);
}

/* ---- fields ------------------------------------------------------------- */
.gi-form__field { margin-bottom: var(--space-5); }
.gi-form__label {
  display: block;
  margin-bottom: var(--space-1);
  font: 700 18px/1.4 var(--font-body);          /* §3.5 label */
  color: var(--gif-ink);
}
.gi-form__hint {
  margin-bottom: var(--space-2);
  color: var(--gif-muted);                      /* #6b6b6b, 5.33:1 */
}
.gi-form__hint--lead { margin-bottom: var(--space-4); }
.gi-form__error {
  margin-bottom: var(--space-2);
  font-weight: 700;
  color: var(--gif-err);                        /* #c0392b, 5.44:1 */
}
.gi-form__field--error {
  padding-left: var(--space-3);
  border-left: 4px solid var(--gif-err);
}

.gi-form__input,
.gi-form__select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--gif-border);
  border-radius: var(--radius-sm);
  background-color: var(--gif-surface);
  color: var(--gif-ink);
  font: 400 18px/1.3 var(--font-body);
  box-shadow: none;
}
.gi-form__select {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  /* A plain chevron, inline, so the control needs no extra file. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.gi-form__input:focus,
.gi-form__select:focus { outline: 3px solid var(--gif-focus); outline-offset: 2px; }
.gi-form__input[aria-invalid="true"],
.gi-form__select[aria-invalid="true"] { border: 2px solid var(--gif-err); }

/* The registration as a UK front plate [CONFIRM K-plate]: white, a 2px
   black border, the display face (Nunito 700; the brief names no plate
   typeface) in capitals at 28px, centred, and a narrow band at the left
   with "UK", as on a post-2021 plate. The band is ink on white reversed,
   not the plate's blue: no new brand colour while K-plate is open. It is
   decoration (aria-hidden in the markup) laid over the input's left
   padding with pointer-events off, so a tap on it lands in the field, the
   focus ring and the error border stay the input's own, and the text
   centres in the white part. */
.gi-form__plate {
  position: relative;
  max-width: 320px;
}
.gi-form__plate-band {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  padding-bottom: 7px;
  border-radius: 3px 0 0 3px;
  background: var(--gif-plate);
  color: var(--gif-surface);
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.gi-form__input--plate {
  max-width: 320px;
  height: 60px;
  padding: 0 12px 0 46px;
  border: 2px solid var(--gif-plate);
  font: 700 30px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.gi-form__input--plate::placeholder { text-transform: none; }

/* An example that must not split ("AB12" / "CDE"). */
.gi-form__nowrap { white-space: nowrap; }
.gi-form__input--postcode {
  max-width: 220px;
  text-transform: uppercase;
}

/* ---- actions ------------------------------------------------------------ */
.gi-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* The pill CTA (§3.5): #ED392C, instant hover to #E12C21, pressed #D5251C. */
.gi-form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--gif-red);
  color: var(--gif-on-red);
  font: 700 19px/1.2 var(--font-body);          /* §3.3 Button */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.gi-form__btn:hover { background: var(--gif-red-hover); color: var(--gif-on-red); }
.gi-form__btn:active { background: var(--gif-red-pressed); }
.gi-form__btn[disabled] { cursor: progress; }

/* Secondary: white, black text and border, inverting on hover (the
   utility-bar button style). */
.gi-form__btn--secondary {
  border: 2px solid var(--gif-ink);
  background: var(--gif-surface);
  color: var(--gif-ink);
}
.gi-form__btn--secondary:hover,
.gi-form__btn--secondary:active { background: var(--gif-ink); color: var(--gif-surface); }

/* A button that reads as a link ("I don't know the registration"). */
.gi-form__link {
  min-height: 44px;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--gif-ink);
  font: 700 16px/1.4 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.gi-form__link:hover { color: var(--gif-red-hover); }
.gi-form__link--inline { min-height: 0; padding: 0; font-weight: 700; }

.gi-form__micro {
  margin-top: var(--space-3);
  font: 400 14px/1.571 var(--font-body);        /* §3.3 Legal */
  color: var(--gif-ink);
}
.gi-form__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font: 600 14px/1.571 var(--font-body);
}
.gi-form__trust img { width: 109px; height: auto; }

/* ---- step 2: compatibility note ---------------------------------------- */
.gi-form__note-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gif-tint);
}
.gi-form__tick {
  flex: 0 0 auto;
  width: 20px;
  height: 15px;
  margin-top: 5px;
}
/* The "good news" line. Its tick is the page's own green one, drawn for a
   dark ground (the finance panel); bare on this light tint it was about
   1.4:1 and barely read. On a black disc it reads here as it does on
   /thanks/ (integration review). Content-box padding turns the 14 x 11
   tick into a 28px circle. */
.gi-form__note-line--good { align-items: center; }
.gi-form__note-line--good .gi-form__tick {
  box-sizing: content-box;
  width: 14px;
  height: 11px;
  margin-top: 0;
  padding: 8.5px 7px;
  border-radius: 50%;
  background: var(--gif-ink);
}

/* ---- step 4: price card and the two routes ----------------------------- */
.gi-form__price {
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gif-tint);
}
.gi-form__price-name { font-weight: 700; }
.gi-form__price-figure {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 32px);          /* §3.3 Sub-heading */
  line-height: 1.188;
}
.gi-form__price-list { padding-left: 1.25em; list-style: disc outside; }   /* the page's CSS zeroes list-style */
.gi-form__price-text + .gi-form__price-text { margin-top: var(--space-2); }
.gi-form__finance { margin-bottom: var(--space-5); }

.gi-form__choices > .gi-form__label { margin-bottom: var(--space-3); }
.gi-form__option {
  display: block;
  width: 100%;
  min-height: 64px;
  margin-bottom: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--gif-border);
  border-radius: var(--radius-md);
  background: var(--gif-surface);
  color: var(--gif-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gi-form__option:hover {
  border-color: var(--gif-ink);
  background: var(--gif-tint);
}
.gi-form__option:active { border-color: var(--gif-red-pressed); }
.gi-form__option-title {
  display: block;
  font: 700 18px/1.4 var(--font-body);
}
.gi-form__option-title::after { content: " →" / ""; }   /* decorative: no alt text */
.gi-form__option-sub {
  display: block;
  margin-top: var(--space-1);
  color: var(--gif-muted);                      /* 5.0:1 on the hover tint too */
}

/* ---- step 5: email suggestion, call times, opt-out ---------------------- */
.gi-form__suggest {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--gif-ink);
  background: var(--gif-tint);
}
.gi-form__suggest .gi-form__link { margin-right: var(--space-4); }

.gi-form__times { margin-bottom: var(--space-5); }
.gi-form__radio,
.gi-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
}
.gi-form__radio input,
.gi-form__check input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--gif-ink);
}
.gi-form__radio label,
.gi-form__check label { cursor: pointer; }
.gi-form__check { margin-bottom: var(--space-2); }

.gi-form__fail {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--gif-err);
  font-weight: 700;
  color: var(--gif-err);
}
.gi-form__fail a { color: inherit; }

/* ---- exits and the leave check ----------------------------------------- */
.gi-form__exit p + p,
.gi-form__leave p { margin-top: var(--space-3); }
.gi-form__leave { padding-top: var(--space-2); }

/* ---- wider screens: the actions sit side by side where they fit --------- */
@media (min-width: 600px) {
  .gi-form__actions { align-items: center; }
  .gi-form__btn { width: auto; min-width: 280px; }
}

/* ---- phones: a tighter rhythm, so step 4's options reach the first screen
   (with the slim header above: "Get a call back" ends inside 667px at 375
   wide). Spacing and line height only: no copy, no order, every target
   still 44px or more. Last in the file, so it wins over the rules above. */
@media (max-width: 599.98px) {
  .gi-form__head { padding-bottom: var(--space-3); }
  .gi-form__progress { margin-top: var(--space-2); }
  .gi-form__bar { min-height: 48px; padding-top: 2px; }
  .gi-form__question { margin-bottom: var(--space-3); }
  .gi-form__price { margin-bottom: var(--space-3); padding: var(--space-4); }
  .gi-form__price-figure { margin: 2px 0 6px; }
  .gi-form__price-list,
  .gi-form__price-text,
  .gi-form__option-sub { line-height: 1.5; }
  .gi-form__finance { margin-bottom: var(--space-4); }
  .gi-form__option { padding: var(--space-3) var(--space-4); }
  .gi-form__option-sub { margin-top: 2px; }
}

/* No motion anywhere, and none sneaks in from a page-wide rule. */
@media (prefers-reduced-motion: reduce) {
  .gi-form *,
  .gi-form *::before,
  .gi-form *::after { transition: none !important; animation: none !important; }
}