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

   The share of the form's styles that can show at first paint: the form's
   tokens, the fields (label, hint, error, inputs, selects) and the
   registration plate, plus the inline card's states. Split from
   gi-form.css (which keeps the dialog, actions, steps 2-5 and the exits)
   so that a page showing step 1 in the page itself, the v2 hero card
   (section GI-20, [data-gi-inline]), can link these few rules
   render-blocking while the rest of the form stays a css_lazy preload.

   GI-19 declares both files css_lazy, this one first, and gi-form.js
   applies every gi-form preload in document order (page CSS, then this,
   then gi-form.css: the cascade the single file had). GI-20 declares this
   one as plain css, so on its page the build links it blocking and drops
   its preload. Where the values come from: gi-form.css's header.
   ========================================================================= */

/* ---- tokens -------------------------------------------------------------- */
.edge-gi-form,
[data-gi-inline] {
  --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-plate-ground: var(--gi-plate-ground, #f5d02a);
  --gif-plate-band:   var(--gi-plate-band, #1f3d8f);
  --gif-focus:        var(--gi-focus, #000000);   /* a colour: the ring is 3px solid of it */
  --gif-tick:         var(--gi-tick, #4bfe2b);  /* the tick on the good-news line (its SVG is drawn in currentColor) */
  --gif-pad:          var(--space-6);           /* 32px desktop */
}

/* ---- fields --------------------------------------------------------------
   Decluttered (19 Oct 2026): one bold level per step, the question; labels
   are semi-bold and smaller than it, hints one muted size under them, so
   the eye reads question, field, action. */
.edge-gi-form__field { margin-bottom: 20px; }
.edge-gi-form__label {
  display: block;
  margin-bottom: 6px;
  font: 600 16px/1.4 var(--font-body);          /* label: under the question, not level with it */
  color: var(--gif-ink);
}
.edge-gi-form__hint {
  margin-bottom: var(--space-2);
  color: var(--gif-muted);                      /* #6b6b6b, 5.33:1 */
  font-size: 15px;
  line-height: 1.47;
}
.edge-gi-form__hint--lead { margin-bottom: var(--space-4); }
.edge-gi-form__error {
  margin-bottom: var(--space-2);
  font-weight: 700;
  color: var(--gif-err);                        /* #c0392b, 5.44:1 */
}
.edge-gi-form__field--error {
  padding-left: var(--space-3);
  border-left: 3px solid var(--gif-err);
}

.edge-gi-form__input,
.edge-gi-form__select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--gif-border);
  border-radius: 8px;                           /* every control: the plate's corner */
  background-color: var(--gif-surface);
  color: var(--gif-ink);
  font: 400 18px/1.3 var(--font-body);
  box-shadow: none;
}
.edge-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;
}
/* "e.g." examples in the fields (GI's winning lightbox): muted, 4.5:1+ on white. */
.edge-gi-form__input::placeholder { color: var(--gif-muted); opacity: 1; }
.edge-gi-form__input--postcode::placeholder { text-transform: none; }   /* "e.g.", not "E.G." */
.edge-gi-form__input::-webkit-calendar-picker-indicator { display: none !important; }   /* the model's datalist marker; suggestions still show as it is typed */
.edge-gi-form__input:focus,
.edge-gi-form__select:focus { outline: 3px solid var(--gif-focus); outline-offset: 2px; }
/* With F3's room below, a field scrolled into view also keeps its label
   and a two-line hint (both above it) in view on a short screen. */
.edge-gi-form__input,
.edge-gi-form__select { scroll-margin-top: 96px; }
.edge-gi-form__input[aria-invalid="true"],
.edge-gi-form__select[aria-invalid="true"] { border: 2px solid var(--gif-err); }

/* The registration as a UK plate [CONFIRM K-plate]: the kit's plate yellow
   with a 2px black rim (the field's edge, 3:1 and more against white and
   the dialog's tint, WCAG 1.4.11), the display face in capitals at 30px,
   centred, and the blue identifier band at the left: the Union flag over
   "UK", as on a UK plate. The band 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 rim stay
   the input's own, and the text centres in the yellow part. The empty
   state shows the placeholder (ENTER REG) in the ink at 60%. */
.edge-gi-form__plate {
  position: relative;
  max-width: 320px;
}
.edge-gi-form__plate-band {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 40px;
  padding: 9px 0 7px;
  border-radius: 6px 0 0 6px;
  background: var(--gif-plate-band);
  color: var(--gif-surface);
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.04em;
  pointer-events: none;
  user-select: none;
}
.edge-gi-form__plate-band img { display: block; width: 24px; height: 12px; border-radius: 1px; }
.edge-gi-form__input--plate {
  max-width: 320px;
  height: 60px;
  padding: 0 12px 0 52px;
  border: 2px solid var(--gif-plate);
  border-radius: 8px;
  background-color: var(--gif-plate-ground);
  color: var(--gif-ink);
  font: 700 30px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.edge-gi-form__input--plate::placeholder {
  color: color-mix(in srgb, var(--gif-ink) 60%, transparent);
  opacity: 1;
  letter-spacing: 0.06em;
}

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

/* ---- the inline card's states (F8) ---------------------------------------
   The card is a light surface inside the dark hero, where the GI base's
   ring is white: inside it the ring is the ink again, as on any light
   ground. Its error state is step 1's field rules above (the message
   beside the field; a card has no summary). Its plate fills the card: the
   card, not the field, sets the width there. */
[data-gi-inline] { --gi-focus: var(--color-ink); }
[data-gi-inline] [hidden] { display: none !important; }
[data-gi-inline] .edge-gi-form__plate,
[data-gi-inline] .edge-gi-form__input--plate { max-width: none; }
/* A tighter step to the card's action than the dialog's, so the action
   stays inside a phone's first screen (GI-20). */
[data-gi-inline] .edge-gi-form__field { margin-bottom: var(--space-4); }