/* Only remove the unwanted mobile touch rings, not intentional field/choice borders. */
/* A dialog restores focus to its opener. Touch browsers can classify that
   programmatic focus as :focus-visible; preserve focus, but not the touch ring. */
html[data-input-modality="pointer"] .project-mascot[data-coming-soon]:focus {
  outline: none !important;
}
html[data-input-modality="keyboard"] .project-mascot[data-coming-soon]:focus {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 18px;
}

@media (max-width: 1024px) {
  /* The keyboard indicator must not depend on a browser's sticky focus heuristic. */
  html[data-input-modality="keyboard"] #menuToggle:focus,
  html[data-input-modality="keyboard"] #navOverlay a:focus,
  html[data-input-modality="keyboard"] .bw-q:focus,
  html[data-input-modality="keyboard"] #orderTitle:focus {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }

  html[data-input-modality="keyboard"] .bw-q:focus,
  html[data-input-modality="keyboard"] #orderTitle:focus {
    outline-offset: 4px;
  }

  html[data-input-modality="pointer"] #menuToggle:focus,
  html[data-input-modality="pointer"] #navOverlay a:focus,
  html[data-input-modality="pointer"] .bw-q:focus,
  html[data-input-modality="pointer"] #orderTitle:focus {
    outline: none !important;
  }

  /* Opening the menu focuses its first link for accessibility. A browser may
     retain :focus-visible after refresh; that is not the active-page state. */
  html[data-input-modality="pointer"] #navOverlay .nav-list a:focus:not(:hover) {
    color: #fff;
    transform: none;
  }

  /* Touch browsers may also retain a hover state. Keep genuine mouse hover
     unchanged, while a finger-opened menu does not highlight its focused link. */
  @media (hover: none) {
    html[data-input-modality="pointer"] #navOverlay .nav-list a:focus {
      color: #fff;
      transform: none;
    }
  }
}