/* Inner-page focus follows the site's underlined controls, without box outlines. */
:is(body.worktable, body[data-page="artist"]) :is(a, button, select):focus-visible {
  outline: none;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

/* Pointer focus should not leave a native rectangular ring behind. */
:is(body.worktable, body[data-page="artist"]) :is(a, button, select):focus:not(:focus-visible) {
  outline: none;
}

/* Native selects and the flex-based language switch need their own underline. */
:is(body.worktable, body[data-page="artist"]) select:focus-visible {
  box-shadow: 0 2px 0 currentColor;
}

:is(body.worktable, body[data-page="artist"]) .language-toggle:focus-visible {
  box-shadow: inset 0 -2px 0 currentColor;
}

/* Image-only controls use a small, contrasting circular marker. */
.worktable :is(.photo-button, .production-film-link, .feature-film, .viewer-thumbnails button) {
  position: relative;
}

.worktable :is(.photo-button, .production-film-link, .feature-film, .viewer-thumbnails button):focus-visible::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #202a32;
  pointer-events: none;
}

.worktable .viewer-thumbnails button:focus-visible::before {
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
}

/* The legacy project menu is an icon without a text label to underline. */
body[data-page="artist"] .hamburger {
  position: relative;
}

body[data-page="artist"] .hamburger:focus-visible::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}