/* Login and registration field focus --------------------------------------
   Avoid stacking a Tailwind ring, a page shadow and the public-theme outline
   around the same control. Registration keeps its border focus indicator. */
/* Remember-me is a native binary control, not a text field: the public input
   focus halo and legacy hover scaling must not surround or resize its box.
   Keyboard focus is indicated on the label instead of adding another square. */
html body.external-page.tw-login .login-form .remember-checkbox {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

html body.external-page.tw-login .remember-checkbox:focus-visible + .remember-label {
  text-decoration-line: underline;
  text-underline-offset: .2em;
}

html body.external-page.tw-login .login-form .input-group > input:is(:focus, :focus-visible),
html body.external-page.tw-register .form-card :is(
  input.form-control,
  input.form-input,
  input.picker-input,
  select.form-control,
  select.picker-select,
  textarea.form-control
):is(:focus, :focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Sign-in and profile fields keep the same matte surface while hovering or
   typing. The insertion caret identifies the active field without a halo. */
html body.external-page.tw-login .login-form .input-group > input,
html body.external-page.tw-login .login-form .input-group > input:is(:hover, :focus, :focus-visible) {
  background: var(--public-page-raised, #f7fef9) !important;
  border-color: var(--public-page-border-strong, #dbe5f4) !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body.external-page.tw-register .form-card :is(
  input.form-control,
  input.form-input,
  input.picker-input,
  select.form-control,
  select.picker-select,
  textarea.form-control
):is(:focus, :focus-visible) {
  border-color: #5f8dff !important;
}

@media (prefers-color-scheme: dark) {
  /* The login card is vertically centred. Keep the email CTA's outer box
     invariant while its four tactile border pixels compress (0/4 -> 3/1),
     otherwise the auto-sized button can move the whole card by a subpixel. */
  html:root body.external-page.tw-login .login-form > button.btn-login.btn-login,
  html:root body.external-page.tw-login .login-form > button.btn-login.btn-login:is(:hover, :focus-visible, :active) {
    block-size: calc(1.2em + 1.64rem + 4px) !important;
    min-block-size: calc(1.2em + 1.64rem + 4px) !important;
    max-block-size: calc(1.2em + 1.64rem + 4px) !important;
    padding-block: .82rem !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box !important;
  }

  html body.external-page.tw-register .form-card :is(
    input.form-control,
    input.form-input,
    input.picker-input,
    select.form-control,
    select.picker-select,
    textarea.form-control
  ):is(:focus, :focus-visible) {
    border-color: rgba(126, 164, 255, .74) !important;
  }

}