/* Initial focus announces the modal heading without highlighting an action.
   Interactive controls retain their own :focus-visible indicator on keyboard navigation. */
.modal-initial-focus:focus{outline:none}
/* During modal swaps, keep the desk and leaves inside the dimmed page snapshot.
   Their separate theme-transition layers would otherwise paint above the overlay. */
html.modal-replacing :is(#leaves,.workspace-image){view-transition-name:none}
/* User-selected tuning, September 30, 2026. Inline review overrides remain local. */
:root{
 --modal-replacement-duration:420ms;
 --modal-replacement-easing:cubic-bezier(.16,1,.3,1);
 --modal-incoming-x:200px;
 --modal-incoming-scale:.75;
 --modal-incoming-delay:180ms;
 --modal-incoming-fade-duration:calc(var(--modal-replacement-duration) * .1);
 --modal-outgoing-x:-200px;
 --modal-outgoing-scale:.75;
 --modal-outgoing-brightness:.34;
 --modal-outgoing-delay:210ms;
 --modal-outgoing-fade-duration:calc(var(--modal-replacement-duration) * .2);
}
html.modal-replacing::view-transition-old(root){display:none}
html.modal-replacing::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.modal-replacing::view-transition-group(modal-outgoing),
html.modal-replacing::view-transition-group(modal-incoming){animation:none}
html.modal-replacing::view-transition-group(modal-outgoing){z-index:100}
html.modal-replacing::view-transition-group(modal-incoming){z-index:101}
html.modal-replacing::view-transition-image-pair(modal-outgoing),
html.modal-replacing::view-transition-image-pair(modal-incoming){isolation:auto}
html.modal-replacing::view-transition-old(modal-outgoing){
 animation:modal-replace-out var(--modal-replacement-duration) var(--modal-replacement-easing) var(--modal-outgoing-delay) both,
           modal-replace-fade-out var(--modal-outgoing-fade-duration) linear var(--modal-outgoing-delay) both;
 mix-blend-mode:normal;transform-origin:center;
}
html.modal-replacing::view-transition-new(modal-incoming){
 animation:modal-replace-in var(--modal-replacement-duration) var(--modal-replacement-easing) var(--modal-incoming-delay) both,
           modal-replace-fade-in var(--modal-incoming-fade-duration) linear var(--modal-incoming-delay) both;
 mix-blend-mode:normal;transform-origin:center;
}
@keyframes modal-replace-out{
 from{transform:translateX(0) scale(1);filter:brightness(1)}
 to{transform:translateX(var(--modal-outgoing-x)) scale(var(--modal-outgoing-scale));filter:brightness(var(--modal-outgoing-brightness))}
}
@keyframes modal-replace-in{
 from{transform:translateX(var(--modal-incoming-x)) scale(var(--modal-incoming-scale))}
 to{transform:translateX(0) scale(1)}
}
/* The new surface becomes opaque before the old one disappears. This overlap
   reads as advancing/receding panels, rather than two equally translucent cards. */
@keyframes modal-replace-fade-out{
 0%,15%{opacity:1}
 55%{opacity:.65}
 100%{opacity:0}
}
@keyframes modal-replace-fade-in{
 0%{opacity:0}
 100%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 html.modal-replacing::view-transition-old(modal-outgoing),html.modal-replacing::view-transition-new(modal-incoming){animation:none}
}