/* AIR23 / VEVL-193 — shared forms and validation contract.
   Low-specificity defaults preserve route-specific form designs while ensuring
   every shared shell has a coherent accessible fallback. */
:where(body[data-global-forms="v193"]){
  --sp-form-bg:#061322;
  --sp-form-border:rgba(151,194,232,.35);
  --sp-form-border-focus:#63c2ff;
  --sp-form-focus:#78c8ff;
  --sp-form-invalid:#ff7f8d;
  --sp-form-invalid-bg:rgba(119,27,43,.13);
  --sp-form-disabled:rgba(148,163,184,.58);
  --sp-form-muted:#9fb0bf;
  color-scheme:dark;
}

/* Fallback geometry for form controls that a route has not explicitly styled.
   input:not([type]) is deliberate: HTML's default text input must not fall back
   to a light browser surface on the dark Spaceron interface. */
:where(body[data-global-forms="v193"] form) :where(
  input:not([type]),
  input[type="text"],input[type="email"],input[type="password"],input[type="search"],
  input[type="tel"],input[type="url"],input[type="number"],input[type="date"],
  input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],
  select,textarea
){
  width:100%;
  min-height:44px;
  border:1px solid var(--sp-form-border);
  border-radius:10px;
  background-color:var(--sp-form-bg);
  color:#f7fbff;
  caret-color:#f7fbff;
  padding:12px 14px;
  font:inherit;
}
:where(body[data-global-forms="v193"] form) :where(textarea){resize:vertical;line-height:1.5}
:where(body[data-global-forms="v193"] form) :where(input,select,textarea)::placeholder{color:#8095aa;opacity:1}
:where(body[data-global-forms="v193"] form) :where(input[type="checkbox"],input[type="radio"]){accent-color:#43a0ff}

/* Keyboard focus remains visible even when a page omitted its own control rule. */
:where(body[data-global-forms="v193"] form) :where(input,select,textarea):focus-visible{
  outline:3px solid var(--sp-form-focus)!important;
  outline-offset:2px!important;
  border-color:var(--sp-form-border-focus);
}

/* Invalid styling appears only after the browser/user or application has marked
   the field invalid; required empty fields are not painted red on initial load. */
body[data-global-forms="v193"] form :where(input,select,textarea)[aria-invalid="true"],
body[data-global-forms="v193"] form :where(input,select,textarea)[data-global-validation="invalid"],
body[data-global-forms="v193"] form :where(input,select,textarea):user-invalid{
  border-color:var(--sp-form-invalid);
  box-shadow:0 0 0 3px rgba(255,107,122,.12);
  background-color:var(--sp-form-invalid-bg);
}
body[data-global-forms="v193"] form :where(input,select,textarea)[aria-invalid="true"]:focus-visible,
body[data-global-forms="v193"] form :where(input,select,textarea)[data-global-validation="invalid"]:focus-visible,
body[data-global-forms="v193"] form :where(input,select,textarea):user-invalid:focus-visible{
  outline-color:#ffb0b9;
}

:where(body[data-global-forms="v193"] form) :where(input,select,textarea):disabled{
  opacity:.58;
  cursor:not-allowed;
  color:var(--sp-form-disabled);
}
:where(body[data-global-forms="v193"] form) :where(input,textarea)[readonly]{
  border-style:dashed;
  color:#c5d1dd;
  cursor:default;
}

/* Progressive required cue. JS adds it only when the page did not already mark
   a required text/select/textarea label with a star or the word Required. */
.spaceron-form-requirement{
  display:inline-flex;
  align-items:center;
  margin-inline-start:7px;
  padding:2px 6px;
  border:1px solid rgba(99,194,255,.34);
  border-radius:999px;
  color:#9edcff;
  background:rgba(56,153,229,.08);
  font-size:10px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:.01em;
  vertical-align:middle;
  white-space:nowrap;
}

/* Suppress iOS/Safari focus zoom and preserve usable touch typography without
   shrinking larger route-specific controls such as 50px authentication fields. */
/* Authentication fields are intentionally roomier than the generic 44px floor.
   accessibility.css uses a 44px !important mobile minimum, so the shared form
   layer explicitly preserves the established 50px authentication field target. */
@media (max-width:900px),(pointer:coarse){
  body[data-global-forms="v193"][class*="auth-page--"] .auth-form :where(
    input:not([type]),input[type="text"],input[type="email"],input[type="password"],
    input[type="search"],input[type="tel"],input[type="url"],input[type="number"],
    input[type="date"],input[type="time"],input[type="datetime-local"],select,textarea
  ){min-height:50px!important}
}

@media (max-width:640px),(pointer:coarse){
  body[data-global-forms="v193"] form :where(
    input:not([type]),input[type="text"],input[type="email"],input[type="password"],
    input[type="search"],input[type="tel"],input[type="url"],input[type="number"],
    input[type="date"],input[type="time"],input[type="datetime-local"],
    input[type="month"],input[type="week"],select,textarea
  ){font-size:16px!important}
}

@media (prefers-reduced-motion:reduce){
  body[data-global-forms="v193"] form :where(input,select,textarea){transition:none!important}
}
@media (forced-colors:active){
  body[data-global-forms="v193"] form :where(input,select,textarea)[aria-invalid="true"],
  body[data-global-forms="v193"] form :where(input,select,textarea)[data-global-validation="invalid"]{
    outline:3px solid Highlight;
    outline-offset:2px;
  }
  .spaceron-form-requirement{border:1px solid CanvasText;color:CanvasText;background:Canvas}
}

/* Persistent validation message added only after a native invalid event. */
.sp-field-error{
  display:block;
  width:100%;
  margin:.45rem 0 0;
  padding:.48rem .64rem;
  border-inline-start:3px solid var(--sp-form-invalid);
  border-radius:4px;
  background:rgba(119,27,43,.18);
  color:#ffd0d5;
  font-size:.78rem;
  font-weight:650;
  line-height:1.4;
  overflow-wrap:anywhere;
}
body[data-global-forms="v193"] form :where(input[type="checkbox"],input[type="radio"])[aria-invalid="true"]{
  outline:2px solid var(--sp-form-invalid)!important;
  outline-offset:3px!important;
}
body[data-global-forms="v193"] form fieldset{min-inline-size:0;max-inline-size:100%}
@media(forced-colors:active){.sp-field-error{border-color:Mark;background:Canvas;color:CanvasText}}
