/* Native page transitions preserve the old page until its replacement is ready. */
@view-transition{navigation:auto}
html{background:var(--bg,#f7f7fa)}
::view-transition-group(root){animation-duration:180ms}
::view-transition-old(root){animation:interface-page-out 180ms ease both}
::view-transition-new(root){animation:interface-page-in 180ms ease both}
@keyframes interface-page-out{to{opacity:0}}
@keyframes interface-page-in{from{opacity:0}to{opacity:1}}
/* Indeterminate progress follows a real document navigation, never a fake percentage. */
html[data-route-pending]::after{content:"";position:fixed;z-index:2147483646;top:0;left:0;width:35%;height:2px;background:var(--accent,#7561ae);box-shadow:0 0 9px color-mix(in srgb,var(--accent,#7561ae) 40%,transparent);pointer-events:none;animation:interface-route-progress 1.2s ease-in-out infinite}
@keyframes interface-route-progress{from{transform:translateX(-100%)}to{transform:translateX(385%)}}

.side-links[data-motion-nav]{position:relative;isolation:isolate}
.side-links[data-motion-nav]::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--nav-width,0px);height:var(--nav-height,0px);transform:translate(var(--nav-x,0px),var(--nav-y,0px));border-radius:12px;background:var(--lilac,#efebf9);pointer-events:none;opacity:0}
.side-links[data-motion-active]::before{opacity:1}
.side-links[data-motion-ready]::before{transition:transform 340ms cubic-bezier(.2,.85,.25,1.08),width 260ms ease,height 260ms ease,opacity 160ms ease}
.side-links[data-motion-active] [aria-current="page"],.side-links[data-motion-active] [aria-current="true"],.side-links[data-motion-active] [aria-pressed="true"]{background:transparent!important}
.side-links details::details-content{interpolate-size:allow-keywords;block-size:0;opacity:0;overflow:clip;transition:block-size 220ms ease,opacity 180ms ease,content-visibility 220ms;transition-behavior:allow-discrete}
.side-links details[open]::details-content{block-size:auto;opacity:1}
.side-links .prompter-tools[open] .prompter-links>*{animation:interface-submenu-in 240ms ease both;animation-delay:calc(var(--submenu-index,0)*35ms)}
@keyframes interface-submenu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.motion-image{aspect-ratio:var(--motion-image-ratio);background:var(--image-placeholder,#e8e4ee);transition:filter 420ms ease,transform 520ms cubic-bezier(.2,.7,.3,1),opacity 420ms ease}
.motion-image-loading{filter:blur(12px);transform:scale(1.04);opacity:.65}
.motion-image-ready{filter:blur(0);transform:scale(1);opacity:1}

.records-skeleton{display:grid;gap:10px;pointer-events:none}
.records-skeleton-row{position:relative;overflow:hidden;display:grid;gap:12px;min-height:116px;padding:18px 16px;border:1px solid var(--line,#e5e3eb);border-radius:14px;background:var(--surface,#fff)}
.records-skeleton-line{display:block;height:10px;width:100%;border-radius:5px;background:var(--soft,#eeedf2)}
.records-skeleton-title{height:14px;width:64%}
.records-skeleton-meta{height:9px;width:44%}
.records-skeleton-short{width:78%}
.records-skeleton-row::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,color-mix(in srgb,var(--surface,#fff) 68%,transparent) 48%,transparent 72%);transform:translateX(-110%);animation:interface-skeleton-sweep 1.5s ease-in-out infinite}
@keyframes interface-skeleton-sweep{to{transform:translateX(110%)}}
.records-row.is-arriving{animation:interface-record-in 320ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--record-arrival,0)*60ms)}
@keyframes interface-record-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.records-detail-skeleton{padding:24px;gap:18px}
.records-detail-skeleton .records-skeleton-row{min-height:150px}

@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 html[data-route-pending]::after{animation:none;transform:none;width:100%;opacity:.65}
 .side-links[data-motion-ready]::before,.side-links details::details-content,.motion-image{transition:none}
 .side-links .prompter-tools[open] .prompter-links>*,.records-skeleton-row::after,.records-row.is-arriving{animation:none}
 .motion-image-loading{filter:none;transform:none;opacity:1}
}