/* Demo form enhancements. Scoped to this one page so portal.css does not grow a
   page-specific tail and its shared hash stays put. */

/* inline field error — sits under the field it belongs to */
.p-field-err{
  display:block; margin-top:6px;
  font:500 12px/1.45 var(--mono);
  color:var(--bad); letter-spacing:.01em;
}
.p-field.has-err input,
.p-field.has-err select{
  border-color:rgba(255,138,128,.6);
}
.p-picker.has-err{
  outline:1px solid rgba(255,138,128,.5);
  outline-offset:4px; border-radius:3px;
}
.p-consent.has-err{
  outline:1px solid rgba(255,138,128,.5);
  outline-offset:6px; border-radius:3px;
}
.p-picker.has-err .p-field-err,
.p-consent.has-err .p-field-err{ margin-top:10px; }

/* the picker legend counter, once it goes live */
#platform-pick legend i{
  font-style:normal; color:var(--steel);
  font:500 12px var(--mono); letter-spacing:.02em;
}

/* submit loading state */
.p-btn.is-loading{
  position:relative; color:transparent !important;
  pointer-events:none; opacity:.9;
}
.p-btn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(11,17,21,.35); border-top-color:#0b1115;
  animation:p-spin .7s linear infinite;
}
@keyframes p-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .p-btn.is-loading::after{ animation:none; }
  .p-btn.is-loading{ color:inherit !important; }
  .p-btn.is-loading::after{ content:none; }
}