/* Media-only markers are supplied by media-attention.js. Brand artwork is never marked. */
html body #main :is([data-attention-owner],[data-attention-asset],[data-media-attention],[data-media-hover]),
html body :is([data-attention-owner],[data-attention-asset],[data-media-attention],[data-media-hover]){
 transition:var(--media-attention-existing-transition,opacity 0s linear 0s),filter .6s ease!important;
}

/* Touch selects media; leaving the reading band releases that selection. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
 html body #main [data-media-attention],
 html body [data-media-attention]{filter:grayscale(1)!important}

 html body #main [data-media-attention="true"],
 html body [data-media-attention="true"]{filter:grayscale(0)!important}

 /* Keep one filtered artwork layer: a second filter on the SVG's wrapper can
    hide the embedded image in mobile compositing. Resting artwork also wins
    over browser-synthesized sticky :hover after the touch selection is released. */
 html body [data-partner-brand]:not([data-color-active="true"]){filter:none!important}
 html body [data-partner-brand]:not([data-color-active="true"]) > :is(.brand-mark-art:not(.brand-mark-ink),.brand-mark-original,img){filter:grayscale(1) contrast(1.2)!important}
 html body [data-partner-brand]:not([data-color-active="true"]) > .brand-mark-art.brand-mark-ink{filter:brightness(0)!important}
 html body [data-partner-brand].brand-mark-surface-dark:not([data-color-active="true"]) > .brand-mark-art:not(.brand-mark-ink){filter:grayscale(1)!important}

 /* A parent filter cannot be undone by its child. Keep one filter owner per asset. */
 html body #main [data-attention-layer]:not([data-media-attention]),
 html body [data-attention-layer]:not([data-media-attention]),
 html body #main [data-media-attention] [data-attention-asset]:not([data-media-attention]),
 html body [data-media-attention] [data-attention-asset]:not([data-media-attention]){
  filter:none!important;
 }
}

/* Desktop keeps its existing resting appearance and restores source color on attention. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 html body #main [data-media-hover="true"],
 html body [data-media-hover="true"],
 html body #main [data-media-hover="true"] [data-attention-asset],
 html body [data-media-hover="true"] [data-attention-asset],
 html body #main [data-media-hover="true"] [data-attention-layer],
 html body [data-media-hover="true"] [data-attention-layer],
 html body #main [data-attention-layer]:has([data-media-hover="true"]),
 html body [data-attention-layer]:has([data-media-hover="true"]){
  filter:none!important;
 }
}

/* Only the new color fade is shortened; existing image movement and crossfades remain. */
@media(prefers-reduced-motion:reduce){
 html body #main :is([data-attention-owner],[data-attention-asset],[data-media-attention],[data-media-hover]),
 html body :is([data-attention-owner],[data-attention-asset],[data-media-attention],[data-media-hover]){
  transition:var(--media-attention-existing-transition,opacity 0s linear 0s),filter 0s linear!important;
 }
}