/* Load last. Dialog focus and restoration stay native; only the ring changes.
   Text fields, selects and editable content retain their existing focus styles. */
body.smish-site {
  --smish-focus-color: var(--site-ink, #25261f);
}

/* Safari may focus the native dialog itself when Tab skips its buttons.
   The dialog is a structural container; its controls keep their own rings. */
html body.smish-site dialog:focus {
  outline: none;
}

/* Preserve a contrasting neutral ring on the site's existing dark surfaces. */
body.smish-site :is(.site-rolce-banner, .site-island-invitation, .site-island-evening, .site-video-dialog, .site-video-toggle, .sm-story-poster) {
  --smish-focus-color: #fff;
}

/* Native :focus-visible remains the fallback if the modality script is absent. */
html:not([data-smish-focus="pointer"]) body.smish-site
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="option"], video[controls]):focus-visible,
html[data-smish-focus="keyboard"] body.smish-site
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="option"], video[controls]):focus {
  outline: 2px solid var(--smish-focus-color, #25261f);
  outline-offset: 4px;
}

/* Safari can retain :focus-visible after showModal()/focus(). Pointer modality
   must also cover that state, without blurring the control or changing its box. */
html[data-smish-focus="pointer"] body.smish-site
  :is(button, a[href], summary, [role="button"], [role="tab"], [role="option"], video[controls]):focus {
  outline: none;
}

@media (forced-colors: active) {
  body.smish-site,
  body.smish-site :is(.site-rolce-banner, .site-island-invitation, .site-island-evening, .site-video-dialog, .site-video-toggle, .sm-story-poster) {
    --smish-focus-color: Highlight;
  }
}