/* Form and calculator usability; scoped to controls and the corrected portal handoffs. */
.usability-portal [hidden], #newsForm [hidden] { display: none !important; }
.usability-portal h1 { font-size: clamp(30px,3vw,44px); line-height: 1.12; letter-spacing: -.04em; margin: 0 0 22px; }
.usability-handoff { margin: 26px 0; padding: 25px 0; border-block: 1px solid #dfe2e5; }
.usability-handoff p { margin: 0 0 18px; color: #50555b; font-size: 16px; line-height: 1.65; }
.usability-portal-action { width: 100%; min-height: 48px; text-align: center; }
.usability-form-note { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: #50555b; }
.usability-field-label { display: block; margin: 16px 0 7px; font-size: 14px; font-weight: 600; color: inherit; }
.usability-field-label + input, .usability-field-label + select { margin-top: 0 !important; }
html body form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body form select, html body form button, html body .calc-panel input, html body .calc-panel select { min-height: 48px; }
html body .usability-input-error { border-color: #b8242a !important; }
html body .usability-calculation-error { color: #a71e25; font-size: 16px !important; line-height: 1.6; font-weight: 500; letter-spacing: 0; }
html body :is(input,select,textarea,button,a):focus-visible { outline: 2px solid #b8242a; outline-offset: 4px; }
html body form label:has(input[type="checkbox"]), html body form label:has(input[type="radio"]) { cursor: pointer; }
@media (max-width: 640px) {
  .usability-portal h1 { font-size: 30px; }
  .usability-handoff { margin-block: 22px; padding-block: 22px; }
  html body form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), html body form select, html body form textarea { font-size: 16px; }
}
@media (max-width: 800px) {
  html body .auth-layout:has(.usability-portal) > .usability-portal,
  html body .login-grid:has(.usability-portal) > .usability-portal { order: 1; }
  html body .auth-layout:has(.usability-portal) > .auth-art,
  html body .login-grid:has(.usability-portal) > .editorial-art { order: 2; }
}