/* Owner instruction 2026-11-08. Load FIRST, before other style layers.
   Important declarations in the first layer beat legacy focus rings.
   Keep native dimensions, semantics, selection and disabled behaviour. */
@layer ls-owner-single-frame {
  /* Cap custom focus targets too, including skip destinations and custom widgets. */
  :focus-visible {
    outline-width: 1px !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }
  /* Native choices can paint focus on their label, sibling or check decoration. */
  label:has(:is(input[type="checkbox"], input[type="radio"]):focus-visible),
  :is(input[type="checkbox"], input[type="radio"]):focus-visible + span,
  :is(input[type="checkbox"], input[type="radio"]):focus-visible + span::before,
  :is(input[type="checkbox"], input[type="radio"]):focus-visible + span::after {
    outline: none !important;
    box-shadow: none !important;
  }
  label:has(:is(input[type="checkbox"], input[type="radio"]):focus-visible),
  :is(input[type="checkbox"], input[type="radio"]):focus-visible + span {
    background-image: linear-gradient(rgb(0 0 0 / 24%), rgb(0 0 0 / 24%)) !important;
  }
  /* A legacy transition:all must never animate an old thick edge into focus. */
  :is(a, button, input, select, textarea, summary, [role="button"]) {
    transition-property: background-color, color, opacity, transform !important;
  }
  :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
      a.button, a.btn, a.cta, a.HPButton, a[class*="btn"], a[class*="button"], a[class*="Button"], .IFPrimaryLink, .IFOutlineLink, .IFHeaderAccount,
      .IFPrimaryButton, .IFSocialButton, .IFMembershipChoiceButton, summary) {
    outline: none !important;
    box-shadow: none !important;
  }
  :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
      a.button, a.btn, a.cta, a.HPButton, a[class*="btn"], a[class*="button"], a[class*="Button"], .IFPrimaryLink, .IFOutlineLink, .IFHeaderAccount,
      .IFPrimaryButton, .IFSocialButton, .IFMembershipChoiceButton, summary):hover:not(:disabled):not([aria-disabled="true"]) {
    background-image: linear-gradient(rgb(0 0 0 / 7%), rgb(0 0 0 / 7%)) !important;
  }
  :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
      a.button, a.btn, a.cta, a.HPButton, a[class*="btn"], a[class*="button"], a[class*="Button"], .IFPrimaryLink, .IFOutlineLink, .IFHeaderAccount,
      .IFPrimaryButton, .IFSocialButton, .IFMembershipChoiceButton, summary):active:not(:disabled):not([aria-disabled="true"]) {
    background-image: linear-gradient(rgb(0 0 0 / 14%), rgb(0 0 0 / 14%)) !important;
  }
  :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
      a.button, a.btn, a.cta, a.HPButton, a[class*="btn"], a[class*="button"], a[class*="Button"], .IFPrimaryLink, .IFOutlineLink, .IFHeaderAccount,
      .IFPrimaryButton, .IFSocialButton, .IFMembershipChoiceButton, summary):focus-visible:not(:disabled):not([aria-disabled="true"]) {
    background-image: linear-gradient(rgb(0 0 0 / 24%), rgb(0 0 0 / 24%)) !important;
  }

  :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]) {
    outline: none !important;
    box-shadow: none !important;
  }
  :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):is(:focus, :focus-visible) {
    border-color: transparent !important;
    outline: 1px solid #276676 !important;
    outline-offset: -1px !important;
  }
  /* The shell alone owns the edge; preserve the inner input's dimensions. */
  :is(.search-bar, .search-wrap, .sb-search-field) {
    outline: none !important;
    box-shadow: none !important;
  }
  :is(.search-bar, .search-wrap, .sb-search-field) > input,
  :is(.search-bar, .search-wrap, .sb-search-field) > input:is(:focus, :focus-visible) {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  :is(.search-bar, .search-wrap, .sb-search-field):focus-within {
    border-color: #276676 !important;
    outline: none !important;
    box-shadow: none !important;
  }
  a:not(.button):not(.btn):not(.cta):not(.HPButton):not([class*="btn"]):not([class*="button"]):not([class*="Button"]):not([role="button"]):not(.IFPrimaryLink):not(.IFOutlineLink):not(.IFHeaderAccount):not(.artist-identity-card):not(.artist-film-trigger):focus-visible {
    border-color: transparent !important;
    outline: 1px solid currentColor !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  :is(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 1px solid #276676 !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }
  /* Portal cards keep inline-important decorative borders; the focus edge replaces
     the same pixel instead of adding a second perimeter. */
  a:is(.artist-identity-card, .artist-film-trigger):focus-visible {
    border-color: transparent !important;
    outline: 1px solid currentColor !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }
  /* Remove the hard 8px cinema halo while preserving its soft drop shadow. */
  .film-player-frame.film-player-featured {
    box-shadow: 0 36px 100px rgb(0 0 0 / 46%) !important;
  }
  .film-player-frame:has(> a.artist-film-trigger:focus-visible) {
    border-color: transparent !important;
    outline: none !important;
  }
  @media (forced-colors: active) {
    label:has(:is(input[type="checkbox"], input[type="radio"]):focus-visible),
    :is(input[type="checkbox"], input[type="radio"]):focus-visible + span {
      forced-color-adjust: none !important;
      background-image: none !important;
      background-color: Highlight !important;
      color: HighlightText !important;
    }
    :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
        a.button, a.btn, a.cta, a.HPButton, a[class*="btn"], a[class*="button"], a[class*="Button"], .IFPrimaryLink, .IFOutlineLink, .IFHeaderAccount,
        .IFPrimaryButton, .IFSocialButton, .IFMembershipChoiceButton, summary):focus-visible:not(:disabled):not([aria-disabled="true"]) {
      forced-color-adjust: none !important;
      background-image: none !important;
      background-color: Highlight !important;
      color: HighlightText !important;
      border-color: Highlight !important;
    }
    :is(input, select, textarea):is(:focus, :focus-visible) { outline-color: Highlight !important; }
    :is(.search-bar, .search-wrap, .sb-search-field):focus-within { border-color: Highlight !important; }
  }
}