/* ---------------------------------------------------------------------------
   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.

   LABEL GEOMETRY. Single-line fields rest the label at the vertical centre of
   the well (top:50% + translateY(-50%)) and float it upward from there. It is
   deliberately NOT anchored to where the input text sits — the input text is
   pushed low by the top padding that reserves room for the floated state, so
   anchoring to it would leave the resting label near the bottom of the box.
   Textareas are the exception and DO anchor to the first text line, since a
   tall multi-line box has no meaningful vertical centre to rest against.
   --------------------------------------------------------------------------- */

: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;
  }
}