/* Theme switch button (sun / moon), shared by both pages.
   Each page sets --toggle-bg, --toggle-fg and --toggle-line to fit its own header. */
.theme-toggle {
    position: relative; flex: none;
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    display: grid; place-items: center; overflow: hidden;
    color: var(--toggle-fg, currentColor);
    background: var(--toggle-bg, rgba(255, 255, 255, .06));
    border: 1px solid var(--toggle-line, rgba(255, 255, 255, .15));
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s;
}
@media (hover: hover) { .theme-toggle:hover { transform: translateY(-3px); } }
.theme-toggle svg {
    position: absolute; width: 20px; height: 20px;
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s;
}
/* Dark theme shows the sun (tap for light); light theme shows the moon */
.theme-toggle .i-moon { transform: translateY(140%) rotate(-90deg); opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-sun { transform: translateY(-140%) rotate(90deg); opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-moon { transform: none; opacity: 1; }

/* Smooth colour change while switching */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
    transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s !important;
}
@media (prefers-reduced-motion: reduce) {
    .theme-toggle svg { transition: none; }
}