/* forms.css — registration form controls and the result fragments. */

.reg-form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.reg-form__group { border: 0; border-top: 1px solid var(--line); padding: var(--sp-3) 0 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.reg-form__group:first-of-type { border-top: 0; padding-top: 0; }
.reg-form__legend { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .14em; color: var(--petrol); font-weight: 700; padding: 0; }

.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field--row { display: flex; flex-direction: row; gap: var(--sp-3); }
.field--row > .field { flex: 1; }
.field__label { font-weight: 600; font-size: var(--fs-200); }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field__hint { margin: 0; font-size: var(--fs-100); color: var(--ink-soft); }

.field__input {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: .62rem .7rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(31,79,74,.18); }
.field__input--area { resize: vertical; min-height: 4.5rem; }

/* Combobox affordance (MT-D-83). An <input list="..."> backed by a <datalist>
   renders as a PLAIN TEXT BOX on iOS Safari and Chrome Android — no caret, no
   hint that suggestions exist — so a registrant (or a volunteer entering on
   someone's behalf) just types and never learns there is a list. That is how a
   roster fills up with "Chevy" and "chevy".

   The chevron is a background-image on the input itself: no wrapper element, no
   pseudo-element (inputs cannot have them), and no JavaScript. It is a data:
   URI, which the CSP allows under `img-src 'self' data:` — an EXTERNAL file
   would need an img-src change, and an inline style attribute is blocked by
   `style-src 'self'` with no 'unsafe-inline'.

   Purely decorative: the control is fully operable and announced as a combobox
   by the browser without it, so it carries no text alternative (WCAG 1.1.1) and
   is not the only cue — the field hint says the list is there.

   The stroke is --ink-soft's LIGHT value (#4a463d) hardcoded, because a data: URI
   cannot read a CSS variable. That is correct in dark mode too: .field__input
   pins `background: #fff`, so these inputs stay a light surface under the A2/A5
   dark palette and a dark glyph keeps its contrast. If .field__input ever gains a
   dark background, this needs a prefers-color-scheme variant (dark --ink-soft is
   #b9c2bd). */
.field__input--combo {
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a463d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px 8px;
}
/* The list is a convenience, never a constraint, so the chevron must not read as
   "these are your only options" once a value is present — and a typed unlisted
   marque is a perfectly good answer. */
.field__input--combo:focus { background-image: none; padding-right: .7rem; }
@media (prefers-contrast: more) {
  /* The decorative chevron loses its contrast exemption when the user asks for
     more contrast; drop it rather than ship a low-contrast glyph. */
  .field__input--combo { background-image: none; padding-right: .7rem; }
}
/* Native color picker (A2 theme controls). Sized as a tappable swatch; the
   strong border keeps it visible against the page per SC 1.4.11. */
.field__input--color { width: 4rem; height: var(--tap); padding: 2px; cursor: pointer; }

.choice { display: flex; flex-direction: column; gap: var(--sp-2); }
.choice__option { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: .6rem .7rem; cursor: pointer; }
.choice__option:has(input:checked) { border-color: var(--petrol); background: rgba(31,79,74,.06); }

.btn { font: inherit; font-weight: 700; letter-spacing: .04em; border: 0; border-radius: 8px; padding: .8rem 1rem; cursor: pointer; }
.btn--primary { background: var(--petrol); color: var(--paper-2); transition: background .15s ease, transform .05s ease; }
.btn--primary:hover { background: var(--petrol-dark); }
.btn--primary:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }

.reg-result-region { margin-top: var(--sp-4); }
.reg-result-region:empty { margin-top: 0; }

.registration-result { border-radius: var(--radius); border: 1px solid var(--line); padding: var(--sp-4) var(--sp-3); }
.registration-result--success { background: var(--good-bg); border-color: var(--good); }
.registration-result--error { background: var(--bad-bg); border-color: var(--bad); }
.registration-result__title { margin: 0 0 var(--sp-2); font-size: var(--fs-400); }
.registration-result--success .registration-result__title { color: var(--good); }
.registration-result--error .registration-result__title { color: var(--bad); }

.registration-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-200); }
.registration-summary dt { color: var(--ink-soft); font-weight: 600; }
.registration-summary dd { margin: 0; }

.qr-code { margin: 0; text-align: center; }
.qr-code__image { width: 220px; height: 220px; background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.qr-code__caption { font-size: var(--fs-100); color: var(--ink-soft); margin-top: var(--sp-2); }

.error-list { margin: 0; padding-left: 1.1rem; }
.error-list__item { margin: var(--sp-1) 0; }

@media (min-width: 36rem) {
  .reg-form { padding: var(--sp-5) var(--sp-4); }
}

/* Multi-vehicle registration (D-002): charge lines, totals, add/remove controls */
.charge-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.charge-line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-200);
  color: var(--ink-soft);
}
.charge-total {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  margin-top: var(--sp-1);
  border-top: 2px solid var(--ink);
  font-weight: 800;
}
.btn--add {
  background: var(--paper-2);
  color: var(--petrol);
  border: 1px dashed var(--petrol);
  margin: 0 0 var(--sp-3);
}
.btn--add:hover { background: var(--paper); }
.btn--remove {
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--bad);
  font-size: var(--fs-100);
  align-self: flex-start;
  padding: .3rem .7rem;
  margin-top: var(--sp-1);
}
.btn--remove:hover { background: var(--bad-bg); }

/* Batch success entries: one card section per sibling registration */
.batch-note { margin: 0 0 var(--sp-2); }
.reg-entry { border-top: 1px solid var(--line); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.reg-entry__title { margin: 0 0 var(--sp-1); font-size: var(--fs-300); }

/* Preregistration import — run summary + per-row skip list (additive). */
.import-summary {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
}
.import-skips {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}
.import-skips__item {
  margin: 0.25rem 0;
  line-height: 1.4;
}
.import-skips__row {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* ---------------------------------------------------------------------------
   MT-D-92: the withheld-QR states and the pay call to action.

   PORTED BECAUSE THE MARKUP SHIPPED WITHOUT THEM. The templates referenced
   .pay-now--prominent, .btn--xl, .pay-now__lead, .pay-now__cta,
   .qr-code--pending, .pay-now--cash and .self-service-note, and NOT ONE existed
   in this tree's stylesheet -- so the new call to action, the awaiting-payment
   notes and the link to the code page would all have rendered as unstyled
   paragraphs. Found by checking each class against the sheet rather than
   assuming the design synced with the markup.

   The cache-buster in layout/base.html MUST be bumped with this file: it is
   served immutable for a year behind its ?v= key, so a content change under the
   old key is pinned for a year, not a session.
   --------------------------------------------------------------------------- */

/* A quiet, non-alarming note sitting where the code will appear once paid. */
.qr-code--pending { color: var(--ink-soft); font-size: var(--fs-200); font-style: italic; }
.qr-code--unavailable { color: var(--ink-soft); font-size: var(--fs-200); }

/* With the check-in QR withheld until payment, this is the primary next step
   for a card registrant, so it is deliberately prominent -- a full-width,
   oversized button under a clear "not paid yet" lead. */
.pay-now { margin: 0 0 var(--sp-3); }
.pay-now--prominent {
  background: var(--good-bg);
  border: 2px solid var(--good);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
}
.pay-now__lead { margin: 0 0 var(--sp-2); font-weight: 800; font-size: var(--fs-300); }
.pay-now__cta { display: block; width: 100%; text-align: center; text-decoration: none; }
.btn--xl { font-size: var(--fs-400); padding: 1rem 1.25rem; border-radius: 10px; }
.pay-now__hint { margin: var(--sp-2) 0 0; font-size: var(--fs-100); color: var(--ink-soft); }
.pay-now--unavailable, .pay-now--cash { font-size: var(--fs-200); }

/* The pointer to /my-codes. It is the ONLY discoverable route to a check-in
   code on a tenant host until per-tenant notification settings have a
   configuration surface, so it must not read as fine print. */
.self-service-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2);
  border-left: 3px solid var(--good);
  font-size: var(--fs-200);
}