/* Login and registration field focus --------------------------------------
   The field border itself is the focus indicator. Avoid stacking a Tailwind
   ring, a page shadow and the public-theme outline around the same control. */
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;
}

html body.external-page.tw-login .login-form .input-group > input:is(:focus, :focus-visible) {
  border-color: #5f8dff !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-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) {
    border-color: rgba(126, 164, 255, .74) !important;
  }

}