/* Navigation focus never draws a frame, including keyboard and native dialog
   restoration. Editing fields and the existing selected/decorative borders keep
   their own styling. The rules below indicate keyboard focus in text/icons. */
:root :is(button, a, summary, [tabindex]):not(input):not(select):not(textarea):not([contenteditable]):focus,
:root select:focus,
:root input:is([type="range"], [type="radio"], [type="checkbox"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="color"], [type="file"]):focus,
:root label:has(input:is([type="radio"], [type="checkbox"]):focus),
:root input:is([type="radio"], [type="checkbox"]):focus + span {
  outline: none !important;
}

/* Keep the keyboard cue small: text, the active caption or the active number,
   never the bounds of an image, card, wheel or carousel. */
:root:not([data-focus-input="pointer"]) :is(button, a, summary, [role="button"], [role="tab"], [role="link"]):not([contenteditable]):focus-visible,
:root:not([data-focus-input="pointer"]) select:focus-visible,
:root:not([data-focus-input="pointer"]) label:has(input:is([type="radio"], [type="checkbox"]):focus-visible),
:root:not([data-focus-input="pointer"]) input:is([type="radio"], [type="checkbox"]):focus-visible + span,
:root:not([data-focus-input="pointer"]) .podcast-carousel:focus-visible > .podcast-monitor.is-active .monitor-footer > span:first-child,
:root:not([data-focus-input="pointer"]) .film-track:focus-visible .film-card-label strong,
:root:not([data-focus-input="pointer"]) .pricing-grid:focus-visible .price-card.is-active .price-card-top > span:first-child,
:root:not([data-focus-input="pointer"]) .look-wheel:focus-visible .look-option.is-centered,
:root:not([data-focus-input="pointer"]) .look-focus-ring:focus-visible .look-focus-number.is-active,
:root:not([data-focus-input="pointer"]) .history-focus-ring:focus-visible .history-focus-number.is-active {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* An icon-only control has no text to underline. No geometry or shadow changes. */
:root:not([data-focus-input="pointer"]) :is(button, a, [role="button"]):focus-visible > :is(svg, img),
:root:not([data-focus-input="pointer"]) input:is([type="button"], [type="submit"], [type="reset"], [type="image"], [type="color"], [type="file"]):focus-visible {
  filter: brightness(1.3);
}

:root:not([data-focus-input="pointer"]) input[type="range"]:focus-visible::-webkit-slider-thumb {
  filter: brightness(1.3);
}
:root:not([data-focus-input="pointer"]) input[type="range"]:focus-visible::-moz-range-thumb {
  filter: brightness(1.3);
}