/* Highlights use the chosen color directly at full opacity. */
:root { --reference-highlight: #2196fe; }
.podcast-queue { background: white; }
.podcast-queue::before {
 background: var(--reference-highlight);
 mix-blend-mode: normal;
 border-radius: 0;
}
#app-list-variant .app-list-row {
 position: relative;
 isolation: isolate;
 background: white;
 border-radius: 0;
}
#app-list-variant .app-list-row::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 background: var(--reference-highlight);
 mix-blend-mode: normal;
 opacity: 0;
 pointer-events: none;
}
#app-list-variant .app-list-row:is(:hover, :focus-visible)::before { opacity: 1; }
#content-list .podcast-card,
#content-list .podcast-card:is(:hover, :focus-within) { background: transparent; transform: none; }
#content-list .podcast-card::before,
#content-list .podcast-card:is(:hover, :focus-within)::before { background: transparent; }
#content-list .podcast-card:is(:hover, :focus-within) .appstar-visual { box-shadow: none; }
#content-list .appstar-visual::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 30;
 border: 1.5px solid var(--reference-highlight);
 border-radius: 0;
 mix-blend-mode: normal;
 opacity: 0;
 pointer-events: none;
}
#content-list .appstar-caption .title {
 position: relative;
 isolation: isolate;
 display: table;
 width: fit-content;
 max-width: 100%;
 padding: 0;
 background: white;
}
#content-list .appstar-caption .title::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 background: var(--reference-highlight);
 mix-blend-mode: normal;
 opacity: 0;
 pointer-events: none;
}
#content-list .podcast-card:is(:hover, :focus-within) .appstar-visual::before,
#content-list .podcast-card:is(:hover, :focus-within) .title::before { opacity: 1; }
/* Opaque outlines leave the artwork uncovered. */
#article-list .card .magazine[style]::before,
#content-list .appstar-visual::before {
 inset: -1.5px;
 border: 1.5px solid var(--reference-highlight);
 background: none;
 background-blend-mode: normal;
 mix-blend-mode: normal;
 mask: none;
}
#app-list-variant .app-list-row { padding-inline: 12px; }

/* Section colors inherit live Leva values; shared mode inherits the global highlight. */
:root[data-different-header-colors="true"] #podcasts { --reference-highlight: var(--section-techSupportColor, #ff008e); }
:root[data-different-header-colors="true"] :is(#apps, #apps-list) { --reference-highlight: var(--section-appsColor, #ff9d60); }
:root[data-different-header-colors="true"] #articles { --reference-highlight: var(--section-articlesColor, #57ff69); }
:root[data-different-header-colors="true"] #content { --reference-highlight: var(--section-contentColor, #ff6060); }
#podcast-list .podcast-card:is(:hover, :focus-within) .appstar-visual {
 box-shadow: 0 0 0 3.5px var(--reference-highlight);
}

/* Square app artwork and fitted captions use the article highlight treatment. */
#app-list .media::before {
 content: '';
 position: absolute;
 inset: -1.5px;
 z-index: 3;
 border: 1.5px solid var(--reference-highlight);
 background: none;
 background-blend-mode: normal;
 mix-blend-mode: normal;
 mask: none;
 opacity: 0;
 pointer-events: none;
}
#app-list .caption .title {
 position: relative;
 isolation: isolate;
 display: table;
 width: fit-content;
 max-width: 100%;
 padding: 2px 4px;
 background: var(--paper);
}
#app-list .caption .title::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 background: var(--reference-highlight);
 mix-blend-mode: normal;
 opacity: 0;
 pointer-events: none;
}
#app-list .card:is(:hover, :focus-within) .media::before,
#app-list .card:is(:hover, :focus-within) .title::before { opacity: 1; }

#article-list .caption .title::before { mix-blend-mode: normal; }
body #app-list .media { clip-path: none; }
#app-list .card:is(:hover, :focus-within) .media { outline: 1.5px solid var(--reference-highlight); }
#app-list .caption { margin-top: var(--article-captionGap, 12px); }
/* Keep the current episode strong; preview other rows with an opaque tint. */
.podcast-choice:not([aria-current="true"]):not(.is-playing):is(:hover, :focus-visible) {
 background: color-mix(in srgb, var(--reference-highlight) 35%, white);
}
.podcast-choice:is([aria-current="true"], .is-playing):is(:hover, :focus-visible) {
 background: var(--reference-highlight);
}

#app-list .card:is(:hover, :focus-within) .caption .title { color: #fff; }
.podcast-choice:is([aria-current="true"], .is-playing) .title { color: #fff; }

/* Draw outside the clipping video container, keeping the media crop intact. */
#content-list .podcast-card:is(:hover, :focus-within) .appstar-visual { outline: 1.5px solid var(--reference-highlight); outline-offset: 0; }

#content-list .podcast-card:is(:hover, :focus-within) .title { color: #fff; }
.podcast-choice.is-playing .podcast-equalizer { color: #fff; }

.podcast-choice:is(:hover, :focus-visible, [aria-current="true"], .is-playing) .podcast-details time { color: #d9d9d9; }