/* Shared interaction layer, after each surface's layout stylesheet. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--motion-press:140ms;--motion-menu:180ms;--motion-screen:220ms}
body:is([data-page],[data-surface]) :is(button,.button,.primary,.account-link){box-sizing:border-box;line-height:1.4;transition:transform var(--motion-press) var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease,opacity 160ms ease}
body:is([data-page],[data-surface]) button:not(.language-control button){min-height:44px}
body:is([data-page],[data-surface]) :is(.primary,.button){display:inline-flex;align-items:center;justify-content:center;gap:10px;padding-inline:20px}
body:is([data-page],[data-surface]) :is(.icon-button,.password-toggle,.dialog-close){display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:12px;border-radius:50%;flex-shrink:0}
/* Responsive menu controls keep their existing display:none / flex rules. */
body:is([data-page],[data-surface]) :is(.menu-toggle,.mobile-menu-button){align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:12px;border-radius:50%;flex-shrink:0}
body:is([data-page],[data-surface]) .field-control:has(.password-toggle)>input{padding-right:56px}
body:is([data-page],[data-surface]) :is(button,.button,.primary,.account-link):active:not(:disabled){transform:scale(.97)}
body:is([data-page],[data-surface]) :is(button,.button,.primary,.account-link):focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* One track and one selected surface, rather than two touching circles. */
body:is([data-page],[data-surface]) .language-control{position:relative;isolation:isolate;display:flex;align-items:center;gap:2px;width:90px;min-width:90px;height:44px;padding:4px;border:0;border-radius:999px;background:#15171a;flex-shrink:0}
body:is([data-page],[data-surface]) .language-control::before{content:'';position:absolute;z-index:-1;inset:4px auto 4px 4px;width:40px;border-radius:999px;background:#232c39;transform:translateX(0);transition:transform 240ms var(--ease-out);pointer-events:none}
body:is([data-page],[data-surface]) .language-control:has(button:last-child[aria-pressed=true])::before{transform:translateX(42px)}
body:is([data-page],[data-surface]) .language-control button{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;min-width:40px;min-height:36px;height:36px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#b6bbc4;box-shadow:none;font-size:14px;font-weight:600;line-height:1;text-transform:lowercase;transform:none}
body:is([data-page],[data-surface]) .language-control button[aria-pressed=true]{color:#f0f1f4;background:transparent}
body:is([data-page],[data-surface]) .language-control button:hover{background:transparent;color:#f0f1f4;transform:none}
body:is([data-page],[data-surface]) .language-control button:active:not(:disabled){background:transparent;transform:none;opacity:.65}
body:is([data-page],[data-surface]) .language-control button:focus-visible{outline-offset:-2px}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 body:is([data-page],[data-surface]) :is(.primary,.button,.account-link):hover:not(:disabled){transform:translateY(-1px)}
 body:is([data-page],[data-surface]) :is(.primary,.button,.account-link):active:not(:disabled){transform:translateY(0) scale(.97)}
}
@media(prefers-reduced-motion:no-preference){
 /* A control's arrival must not override its press transform. */
 body[data-page=home] .home-buy{animation-name:home-action-fade}
 body:is([data-page],[data-surface]) .language-control[data-language-from]::before{animation:language-arrive 280ms var(--ease-out) backwards}
 body:is([data-page],[data-surface]) .language-control[data-language-from=ru]{--language-from:0px}
 body:is([data-page],[data-surface]) .language-control[data-language-from=en]{--language-from:42px}
 body:is([data-page],[data-surface]) .user-menu[open] .user-menu-body{transform-origin:top right;animation:menu-arrive var(--motion-menu) var(--ease-out)}
 body:is([data-page],[data-surface]) .home-documents[open] .home-documents-panel{transform-origin:bottom right;animation:menu-arrive var(--motion-menu) var(--ease-out)}
 body[data-page=home] .home-documents[open] .home-documents-panel{transform-origin:bottom center}
 body:is([data-page],[data-surface]) dialog[open]{animation:dialog-arrive var(--motion-screen) var(--ease-out)}
 body[data-surface=public] .page-intro h1{animation:reading-arrive 450ms var(--ease-out) backwards}
 body[data-surface=public] .page-intro .lead{animation:reading-arrive 450ms var(--ease-out) 70ms backwards}
 body[data-page=home] .home-word:hover .home-letter{transform:none}
 @media(hover:hover) and (pointer:fine){body[data-page=home] .home-word:hover .home-letter{transform:translateY(-.055em)}}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 body[data-surface=public] .navigation-open .header-nav{transform-origin:top right;animation:menu-arrive var(--motion-menu) var(--ease-out)}
}
@media(max-width:360px){
 body[data-page=home] .site-header{gap:12px}
 body[data-page=home] .header-actions{gap:10px}
 body[data-surface=public] .site-header{gap:6px}
 body[data-surface=public] .header-actions{gap:6px}
}
@media(max-width:1000px){body[data-surface=admin] .filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Keyboard input remains immediate; motion never delays a command. */
html[data-motion-input=keyboard] body :is(button,.button,.primary,.account-link):active{transform:none}
html[data-motion-input=keyboard] body :is(.user-menu-body,.home-documents-panel,.header-nav,dialog){animation:none!important}
html[data-motion-input=keyboard] .home-term-highlight{transition:none}
@keyframes language-arrive{from{transform:translateX(var(--language-from))}}
@keyframes menu-arrive{from{opacity:.2;transform:translateY(4px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialog-arrive{from{opacity:.2;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes reading-arrive{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes home-action-fade{from{opacity:.4}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 body:is([data-page],[data-surface]) :is(button,.button,.primary,.account-link):active:not(:disabled){transform:none}
}