/* ---------------------------------------------------------------------------
   Form components — floating-label variant
   Scoped entirely to .field / .btn-submit / .form__* — no element selectors,
   so this can't collide with the rest of the site's CSS.

   DOM order matters: the control must come BEFORE the label so the sibling
   selectors below can reach it. See macros/forms.html.

   --------------------------------------------------------------------------- */

:root {
  --pt-navy:          #2c4c93;  /* button fill, floated labels */
  --pt-navy-deep:     #1d3a6b;  /* headings, input text */
  --pt-navy-press:    #223c76;  /* button active */
  --pt-gold:          #dfa63c;  /* accent rule, checkbox border */
  --pt-field-bg:      #edf1f9;  /* filled input wells */
  --pt-field-bg-hover:#e5eaf6;
  --pt-placeholder:   #98a2b7;
  --pt-body:          #4a5568;
  --pt-danger:        #d6392e;
  --pt-danger-bg:     #fdf0ef;

  --pt-radius:        6px;
  --pt-field-gap:     0.75rem;
  --pt-field-pad-x:   0.875rem;
  --pt-field-pad-top: 1.375rem;   /* the room the floated label occupies */
  --pt-field-pad-bot: 0.4375rem;

  --pt-label-float:   0.8125;      /* scale factor of the floated label */
  --pt-label-rise:   -1.2rem;   /* single-line: travel up from center og=-0.9375 */
  --pt-label-rise-multiline: -1rem;/* textarea: travel up from the first line */

  /* Swap these for the brand faces once they're loaded. */
  --pt-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pt-font-display: var(--pt-font-sans);
}

/* --- Field shell -------------------------------------------------------- */

.field {
  position: relative;
  margin-bottom: var(--pt-field-gap);
  background: var(--pt-field-bg);
  border: 1px solid transparent;
  border-radius: var(--pt-radius);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.field:hover {
  background: var(--pt-field-bg-hover);
}

/* The control has no border of its own, so focus is shown on the well.
   :focus-within handles the visual; the control keeps its own outline under
   forced-colors, where background tints are discarded. */
.field:focus-within {
  background: #fff;
  border-color: var(--pt-navy);
  box-shadow: 0 0 0 3px rgba(44, 76, 147, 0.18);
}

/* --- Control ------------------------------------------------------------ */

.field__control {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  margin: 0;
  padding: var(--pt-field-pad-top) var(--pt-field-pad-x) var(--pt-field-pad-bot);
  font-family: var(--pt-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pt-navy-deep);
  outline: none;
}

.field__control--textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Placeholders are hidden at rest because the label is sitting in that slot.
   They fade in once the label has floated out of the way. */
.field__control::placeholder {
  color: transparent;
  opacity: 1; /* Firefox dims placeholders by default */
  transition: color 130ms ease;
}

.field__control:focus::placeholder {
  color: var(--pt-placeholder);
}

/* --- Floating label ----------------------------------------------------- */

.field__label {
  /* --_rest / --_float keep the two states in one place; the float rules
     below just swap which one is applied. */
  --_rest:  translateY(-50%);
  --_float: translateY(-50%) translateY(var(--pt-label-rise)) scale(var(--pt-label-float));

  position: absolute;
  top: 50%;
  left: var(--pt-field-pad-x);
  max-width: calc(100% - (var(--pt-field-pad-x) * 2));
  font-family: var(--pt-font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pt-placeholder);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: var(--_rest);
  transform-origin: 0 50%;
  transition: transform 130ms ease, color 130ms ease;
  pointer-events: none; /* clicks fall through to the control beneath */
}

/* A textarea's label rests on the first text line instead of the box centre. */
.field__control--textarea ~ .field__label {
  --_rest:  none;
  --_float: translateY(var(--pt-label-rise-multiline)) scale(var(--pt-label-float));

  top: var(--pt-field-pad-top);
  transform-origin: 0 0;
}

.field__control:focus ~ .field__label,
.field__control:not(:placeholder-shown) ~ .field__label {
  transform: var(--_float);
  color: var(--pt-navy);
  font-weight: 700;
  background-color: #fff;
  padding: 0 5px;
}

/* Kept in its own rule on purpose: an unrecognised selector invalidates an
   entire selector list, so folding :-webkit-autofill into the block above
   would break the float in Firefox. */
.field__control:-webkit-autofill ~ .field__label {
  transform: var(--_float);
  color: var(--pt-navy);
  font-weight: 700;
}

.field__required {
  color: var(--pt-danger);
  margin-left: 0.125rem;
}

/* Chrome's autofill repaints the input's own background, which would show a
   yellow rectangle inside the well. Push the fill out to a no-op transition. */
.field__control:-webkit-autofill,
.field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pt-navy-deep);
  transition: background-color 100000s;
}

/* --- Validation --------------------------------------------------------- */

.field--invalid {
  background: var(--pt-danger-bg);
  border-color: var(--pt-danger);
}

.field--invalid:focus-within {
  border-color: var(--pt-danger);
  box-shadow: 0 0 0 3px rgba(214, 57, 46, 0.18);
}

.field--invalid .field__control:focus ~ .field__label,
.field--invalid .field__control:not(:placeholder-shown) ~ .field__label {
  color: var(--pt-danger);
}

/* Help and error text sit outside the well so the label has the whole
   inside of the box to itself. */
.field__help,
.field__error {
  margin: 0.3125rem 0 0;
  padding: 0 var(--pt-field-pad-x);
  font-family: var(--pt-font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
}

.field__help  { color: var(--pt-body); }
.field__error { color: var(--pt-danger); font-weight: 600; }

/* --- Optional two-column row -------------------------------------------- */

.field-row {
  display: grid;
  /* minmax(0, ...) is load-bearing: a bare 1fr resolves its minimum to the
     item's min-content width, and an <input> carries a chunky intrinsic
     minimum (default size=20), which would push the row past its container. */
  grid-template-columns: var(--pt-row-cols, minmax(0, 1fr) minmax(0, 1fr));
  column-gap: var(--pt-field-gap);
}

.field-row > .field {
  min-width: 0;
}

@media (max-width: 26rem) {
  .field-row { grid-template-columns: 1fr; }
}

/* --- Checkbox ----------------------------------------------------------- */

.field--checkbox {
  position: static;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.625rem;
  background: transparent;
  border-color: transparent;
  padding: 0.25rem 0;
}

.field--checkbox:hover,
.field--checkbox:focus-within {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.checkbox__control {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  flex: none;
  background: #fff;
  border: 2px solid var(--pt-gold);
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.checkbox__control::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  transform: scale(0);
  transition: transform 100ms ease-in-out;
  box-shadow: inset 1rem 1rem #fff;
  clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 84% 0%, 39% 66%);
}

.checkbox__control:checked {
  background: var(--pt-gold);
}

.checkbox__control:checked::before {
  transform: scale(1);
}

.checkbox__control:focus-visible {
  outline: 2px solid var(--pt-navy);
  outline-offset: 2px;
}

/* The checkbox label is a normal static label, never a floating one. */
.checkbox__label {
  position: static;
  top: auto;
  transform: none;
  max-width: none;
  white-space: normal;
  pointer-events: auto;
  font-family: var(--pt-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--pt-body);
  cursor: pointer;
}

.field--checkbox .field__help,
.field--checkbox .field__error {
  grid-column: 2;
  padding: 0;
}

/* --- Submit ------------------------------------------------------------- */

.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--pt-navy);
  color: #fff;
  border: 0;
  border-radius: var(--pt-radius);
  font-family: var(--pt-font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.btn-submit:hover  { background: var(--pt-navy-deep); }
.btn-submit:active { background: var(--pt-navy-press); }

.btn-submit:focus-visible {
  outline: 2px solid var(--pt-navy-deep);
  outline-offset: 3px;
}

.btn-submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-submit__arrow {
  transition: transform 140ms ease;
}

.btn-submit:hover .btn-submit__arrow {
  transform: translateX(3px);
}

/* --- Form chrome -------------------------------------------------------- */

.form__required-note {
  margin: 0 0 0.5rem!important;
  text-align: right!important;
  font-family: var(--pt-font-sans);
  font-size: 0.75rem!important;
  color: var(--pt-body);
}

/* --- Preferences -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .field,
  .field__label,
  .field__control::placeholder,
  .checkbox__control,
  .checkbox__control::before,
  .btn-submit,
  .btn-submit__arrow {
    transition: none;
  }
  .btn-submit:hover .btn-submit__arrow { transform: none; }
}

@media (forced-colors: active) {
  .field {
    border-color: CanvasText;
  }
  .field__control:focus {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
  .field__label {
    color: CanvasText;
  }
  .checkbox__control {
    border-color: CanvasText;
  }
  .checkbox__control:checked::before {
    box-shadow: inset 1rem 1rem CanvasText;
  }
}