/* Header laptop switch: open laptop = main site, closed laptop = After work. Icon only, no label.
   Three images in a fixed box so the header never shifts: open, half-open (hover/focus), closed. */
.mode-toggle { text-decoration:none; }
.mode-toggle .mt-img { position:relative; display:block; width:28px; height:24px; }
.mode-toggle .mt-img img { position:absolute; left:0; top:50%; width:100%; height:auto; opacity:0; transform:translateY(-50.5%); transition:opacity .16s ease; }
/* The three pictures have different padding, so each is sized by its visible width and centred on its visible middle: the laptop keeps the same width in every state. */
.mode-toggle .mt-half { transform:translateY(-52.6%); }
.mode-toggle .mt-shut { transform:translateY(-56.6%); }
.mode-toggle:not(.is-closed) .mt-open, .mode-toggle.is-closed .mt-shut { opacity:1; }
@media (hover:hover) {
 .mode-toggle:hover .mt-half { opacity:1; }
 .mode-toggle:hover .mt-open, .mode-toggle:hover .mt-shut { opacity:0; }
}
.mode-toggle:focus-visible .mt-half { opacity:1; }
.mode-toggle:focus-visible .mt-open, .mode-toggle:focus-visible .mt-shut { opacity:0; }
.mode-toggle:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .mode-toggle .mt-img img { transition:none; } }
/* Page change: a plain quick cross-fade where the browser supports it. Nothing moves, nothing waits. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration:.16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }