/* A two-colour ring remains visible on light, dark and image backgrounds. */
html:root :focus-visible,
html:root[data-reading-theme] :focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #111, 0 0 0 9px #fff;
}

/* Keep the main focus indicator inside the viewport. */
html #main:focus {
  outline: 3px solid var(--ink, #172638);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--paper, #faf7f0);
}

.skip:focus {
  top: 12px;
  z-index: 100;
  max-width: calc(100vw - 32px);
  color: var(--ink, #172638);
}

/* The shared gallery uses --paper, which the dark reading theme leaves light. */
html[data-reading-theme="dark"] .image-gallery,
html[data-reading-theme="dark"] .image-gallery button {
  background: #141e2b;
  color: var(--ink, #edf1f5);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}