* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  font-size: 16px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--color-highlight);
  color: var(--color-brand-deep);
}

.shared-skip {
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-brand);
  transform: translateY(-200%);
}

.shared-skip:focus {
  transform: translateY(0);
}

/* Header controls sit on the brand surface, not the light content surface. */
.fh-app .site-header .portal-header__button {
  color: var(--color-surface);
  border-color: var(--color-brand-accent);
}

.fh-app .site-header .portal-header__button:hover {
  background: var(--color-brand-deep);
  color: var(--color-surface);
}