/* Color the five utility icons themselves, preserving their existing hit targets. */
.social-links a,.social-links button,#settings-open,#sound{position:relative}
.social-links a::after,.social-links button::after,#settings-open::after,#sound::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:var(--icon-accent);
  -webkit-mask:var(--icon-mask) center / var(--icon-size) no-repeat;
  mask:var(--icon-mask) center / var(--icon-size) no-repeat;
  transition:opacity .45s ease;
}
#settings-open::after,#sound::after{transition-duration:.16s}
.social-links a{--icon-mask:url('images/social-x.svg');--icon-size:20px;--icon-accent:#00bce8}
.social-links [data-page="articles"]{--icon-mask:url('images/social-substack.svg');--icon-size:20px;--icon-accent:#e9a66f}
.social-links [data-page="contact"]{--icon-mask:url('images/social-email.svg');--icon-size:20px;--icon-accent:#f51fa6}
#settings-open{--icon-mask:url('images/settings-gear.svg');--icon-size:24px;--icon-accent:#9b55e3}
#sound{--icon-mask:url('images/sound_off.svg');--icon-size:24px;--icon-accent:#b1e83b}
#sound:has(img[src*="sound_on.svg"]){--icon-mask:url('images/sound_on.svg')}
html[data-theme="night"] .social-links a{--icon-accent:#3bd9f5}
html[data-theme="night"] .social-links [data-page="articles"]{--icon-accent:#e9a66f}
html[data-theme="night"] .social-links [data-page="contact"]{--icon-accent:#f51fa6}
html[data-theme="night"] #settings-open{--icon-accent:#c6a0ff}
html[data-theme="night"] #sound{--icon-accent:#b1e83b}
@media(hover:hover) and (pointer:fine){
  .social-links a:hover::after,.social-links button:hover::after,#settings-open:hover::after,#sound:hover::after{opacity:1}
}
.social-links a:focus-visible::after,.social-links button:focus-visible::after,#settings-open:focus-visible::after,#sound:focus-visible::after,
.social-links .is-icon-tapped::after,#settings-open.is-icon-tapped::after,#sound.is-icon-tapped::after{opacity:1}
@media(prefers-reduced-motion:reduce){.social-links a::after,.social-links button::after,#settings-open::after,#sound::after{transition:none}}

/* Utility buttons retain their icon colors and gain the shared border shimmer. */
#settings-open::before,#sound::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;background:linear-gradient(135deg,transparent 35%,#00d7ffe8 43%,#9a70e8f0 48%,#ff48b8f0 52%,#c1ee57e8 57%,transparent 65%);background-size:300% 300%;background-position:100% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media(hover:hover) and (pointer:fine){#settings-open:hover::before,#sound:hover::before{animation:settings-border-shimmer var(--shimmer-duration,1.5s) ease-out 1 both}}
#settings-open:focus-visible::before,#sound:focus-visible::before{animation:settings-border-shimmer var(--shimmer-duration,1.5s) ease-out 1 both}
@media(prefers-reduced-motion:reduce){#settings-open::before,#sound::before{animation:none!important}}

/* The upper-right controls are theme-colored glyphs, not filled buttons. */
html[data-theme] .social-links :is(a,button){color:var(--custom-control-ink,#191b1c);background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme] .social-links :is(a,button) img{opacity:0}
html[data-theme] .social-links :is(a,button)::after{opacity:1;background:currentColor;transition:background-color .18s ease}
html[data-theme] .social-links a{--icon-accent:var(--theme-accent-cyan,#00bce8)}
html[data-theme] .social-links [data-page="articles"]{--icon-accent:var(--theme-accent-orange,#e9a66f)}
html[data-theme] .social-links [data-page="contact"]{--icon-accent:var(--theme-accent-pink,#f51fa6)}
html[data-custom-modal-highlight] .social-links :is(a,button){--icon-accent:hsl(var(--custom-modal-highlight-channels))}
@media(hover:hover) and (pointer:fine){html[data-theme] .social-links :is(a,button):hover::after{background:var(--icon-accent)}}
html[data-theme] .social-links :is(a,button):focus-visible::after,html[data-theme] .social-links .is-icon-tapped::after{background:var(--icon-accent)}
html[data-theme] .social-links :is(a,button):focus-visible{outline:2px solid var(--icon-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html[data-theme] .social-links :is(a,button)::after{transition:none}}

html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]) .social-links :is(a,button){--icon-accent:var(--theme-top-icon-highlight,#00bce8)!important}

@media(hover:hover) and (pointer:fine){html[data-theme] .social-links :is(a,button):hover::after{filter:drop-shadow(0 0 1px #0008)}}
html[data-theme] .social-links :is(a,button):focus-visible::after{filter:drop-shadow(0 0 1px #0008)}

/* Default keeps its original multicolor identity; custom palettes use one adaptive hue. */
html[data-theme]:not([data-custom-background]):not([data-custom-modal]):not([data-custom-modal-highlight]) .social-links a{--icon-accent:#00bce8}
html[data-theme="night"]:not([data-custom-background]):not([data-custom-modal]):not([data-custom-modal-highlight]) .social-links a{--icon-accent:#3bd9f5}
html[data-theme]:not([data-custom-background]):not([data-custom-modal]):not([data-custom-modal-highlight]) .social-links [data-page="articles"]{--icon-accent:#e9a66f}
html[data-theme]:not([data-custom-background]):not([data-custom-modal]):not([data-custom-modal-highlight]) .social-links [data-page="contact"]{--icon-accent:#f51fa6}

/* Shadows follow the glyphs rather than their button containers. */
html[data-theme]{--utility-icon-shadow:drop-shadow(0 1px 2px #00000038)}
html[data-theme="night"]{--utility-icon-shadow:drop-shadow(0 1px 2px #00000085)}
html[data-theme] .social-links :is(a,button)::after,html[data-theme] :is(#settings-open,#sound)::after{filter:var(--utility-icon-shadow)}
html[data-theme="day"] :is(.menu-toggle,#settings-open,#sound) img{filter:var(--utility-icon-shadow)}
html[data-theme="night"] :is(.menu-toggle,#settings-open,#sound) img{filter:brightness(0) invert(.94) var(--utility-icon-shadow)}
html[data-theme] .menu-toggle span{filter:var(--utility-icon-shadow)}
@media(hover:hover) and (pointer:fine){html[data-theme] .social-links :is(a,button):hover::after{filter:var(--utility-icon-shadow)}}
html[data-theme] .social-links :is(a,button):focus-visible::after{filter:var(--utility-icon-shadow)}

/* Masks let menu glyphs take exact theme text colors instead of grayscale filters. */
#site-menu .menu-item-icon{background:currentColor;-webkit-mask:var(--menu-icon) center / contain no-repeat;mask:var(--menu-icon) center / contain no-repeat}
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]) #site-menu button,
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]) #site-menu button:is(:hover,:focus-visible,.is-tapped){color:var(--custom-control-ink);background:transparent}
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]) #site-menu .menu-item-icon,
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]) #site-menu button:is(:hover,:focus-visible,.is-tapped) .menu-item-icon{filter:none!important;background:currentColor}