html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/*
  Visible focus indicator. .dropdown-item is included because the account menu is operated by
  keyboard: its sign-out control is a submit button styled as a dropdown item, and without this rule
  a keyboard user cannot see which entry of the open menu is focused.
  .skip-link is included so the skip link is unmistakable the moment it appears on the first Tab.
  .nav-link:focus-visible and a:focus-visible are included because the plain navigation and body-copy
  anchors otherwise fall back to Bootstrap's translucent default ring, which measures about 1.3:1
  against white - below the 3:1 that WCAG SC 1.4.11 requires of a focus indicator. The colour below
  measures about 3.4:1 and is deliberately left unchanged.
  .form-select:focus was MISSING and is added here. It is a live defect rather than a precaution: the
  onboarding page has been shipping two <select> controls since ADR 0014, and both fell back to the same
  translucent 1.3:1 ring, so a keyboard user could not see which of them had focus. The account form adds
  two more. .form-control:focus was already present, which is exactly why the gap survived - the inputs
  looked right and the selects did not.
*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .dropdown-item:focus, .skip-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*
  The skip link is hidden until focused by Bootstrap's .visually-hidden-focusable. This rule only
  gives it a readable position and appearance once it is focused. It lives in a stylesheet, never in
  a style attribute: the Content-Security-Policy is style-src 'self' and must not need an exception.
*/
.skip-link:focus {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #1861ac;
  border-radius: 0.25rem;
  color: #1b6ec2;
  text-decoration: none;
  z-index: 1080;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}