.template-2 .nn-reading-themes button { display: grid; gap: 6px; justify-items: center; min-width: 0; border-color: var(--nn3-line, var(--nn2-line)); }
.template-2 .nn-reading-themes button > span { font-size: 26px; }
.template-2 .nn-reading-themes button > small { font-size: 12px; }
.template-2 .nn-reading-themes button[aria-pressed="true"] { box-shadow: inset 0 -3px currentColor; font-weight: 700; background: var(--nn3-soft, var(--nn2-paper-soft)); }
.template-2 .nn-reading-themes + p { margin-top: 12px; }
/* Keep selection distinct from hover, without relying on colour alone. */
body.template-2 .media-list li.active {
    background: color-mix(in srgb, var(--main-color) 15%, white);
    box-shadow: inset 4px 0 var(--main-color);
    font-weight: 700;
}
/* Shared dark surfaces for templates 2–4. Photos, logos and embedded media
   keep their original colours; high contrast remains a separate white/black mode. */
@media screen {
    /* The light theme's translucent white section would become a bright grey panel. */
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .nn2-section {
        background: var(--nn2-card);
        border-color: var(--nn2-line);
        box-shadow: none;
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 :is(.dropdown-content, .subdown-content, .dropdown-content a, .subdown-content a, .dropdown-content .subbtn, .navbar.mobile .mobile-section summary, .navbar.mobile .navbar-content a, .mobile-search-bottom button, .nn2-quick-card, .nn2-empty-hero, .nn2-hero-meta span, .nn2-listing-intro, .programma-page, .programma-channel, .programma-day-tab, .subnavitem, .nn2-widget-list-index, .nn2-widget-kicker) {
        background: var(--nn2-card); color: var(--nn2-ink); border-color: var(--nn2-line);
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .widgets :is(.featured, .player-wrapper, .sidebar-content-block, .widget-sidebar-ad, .widget, .block) { background: var(--nn2-card); color: var(--nn2-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2:not(.template-3) .content .lead { background: var(--nn2-card); border-color: var(--nn2-line); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 :is(.nn2-widget-list-copy strong, .nn2-kicker, .nn2-section-heading a) { color: var(--nn3-accent-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .nn2-widget-list-copy small { color: var(--nn2-muted); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .content .articles:not(.nn2-feed) > .article .article-date { color: var(--nn3-accent-ink) !important; }
    html[data-reading-theme="light"] body.template-2,
    html.nn-high-contrast body.template-2 { color-scheme: light; }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 {
        color-scheme: dark;
        --site-background-color: #12181e;
        --nn3-ink: #edf1f5;
        --nn3-muted: #bbc5ce;
        --nn3-line: #45515d;
        --nn3-accent-ink: color-mix(in srgb, var(--nn3-accent, var(--main-color)) 20%, #fff);
        --nn4-soft: color-mix(in srgb, var(--nn3-accent) 8%, #1d2730);
        --nn4-medium: color-mix(in srgb, var(--nn3-accent) 15%, #293640);
        --nn3-soft: var(--nn4-soft);
        --nn2-ink: var(--nn3-ink);
        --nn2-card: #1d2730;
        --nn2-paper: #12181e;
        --nn2-paper-soft: #1d2730;
        --nn2-line: var(--nn3-line);
        --nn2-muted: var(--nn3-muted);
        --nn2-border: var(--nn3-line);
        background: var(--site-background-color);
        color: var(--nn3-ink);
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(.nn3-dialog, .nn3-nav-children, .nn3-icon-button, .nn3-button-secondary, .nn-reading-dialog, .nn-reading-balloon, .nn-reading-balloon::before, .news-block-infobox, .media-list) {
        background: #1d2730; color: var(--nn3-ink); border-color: var(--nn3-line);
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(.nn-reading-dialog, .nn-reading-balloon) {
        --reading-tint: var(--nn4-medium);
        --reading-accent: var(--nn3-accent-ink);
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(input:not([type="submit"]), select, textarea, .nn-reading-dialog button, .nn-reading-balloon button) {
        background: #26333f; color: var(--nn3-ink); border-color: #687b8c;
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(input, textarea)::placeholder { color: var(--nn3-muted); opacity: 1; }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(.nn-reading-eyebrow, .nn-reading-check small, .nn-reading-hint, [data-reading-status]) { color: var(--nn3-muted); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 :is(.nn-reading-dialog, .nn-reading-balloon) :focus-visible { outline-color: var(--nn3-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .media-list li { color: var(--nn3-ink); border-color: var(--nn3-line); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .media-list li:hover { background: #293640; }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .media-list li.active {
        background: #384b5c;
        box-shadow: inset 4px 0 var(--nn3-accent-ink);
        font-weight: 700;
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .media-list li i { color: var(--nn3-accent-ink) !important; }
    /* The configured translucent brand tint needs a light backing, not the dark page. */
    html[data-reading-theme="dark"]:not(.nn-high-contrast) body.template-2 .afteritem {
        background: linear-gradient(var(--afteritem-tint, transparent), var(--afteritem-tint, transparent)), #fff !important;
        color: #191716;
        --nn3-ink: #152128;
        --nn3-muted: #58646b;
        --nn3-accent-ink: color-mix(in srgb, var(--main-color) 65%, #101820);
    }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-card-image { background: #26333f; }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-image-empty { background: linear-gradient(135deg, #26333f, #394a58); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-main > .nn3-section.nn3-video-section { background: var(--nn4-medium); color: var(--nn3-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-video-section :is(.nn3-section-heading h2, .nn3-section-heading > a, .nn3-video-card, .nn3-video-card h3, .nn3-video-card small, .nn3-shorts-hint) { color: var(--nn3-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-video-section .nn3-more-mobile { background: #26333f; color: var(--nn3-ink); }
    html[data-reading-theme="dark"]:not(.nn-high-contrast) .template-2 .nn3-front-stories .nn3-card-hero .nn3-story-link:hover h3 { color: var(--nn3-accent-contrast); }
}