/* Shared Nudge motion: a sliding scale and paper-like action feedback. */
.ruler .ruler-track{display:flex;height:100%;flex:none;transform:translate3d(var(--ruler-shift,0px),0,0);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ruler .ruler-track>span{height:100%}
:where(.action,.text-action,.nav-action,.big-cta,.menu-toggle){transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1),background-color .25s,color .25s}
.action .action-mark{overflow:hidden;transition:background-color .25s}
.action .action-mark:after,.text-action:after{transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .25s}
.action:focus-visible,.text-action:focus-visible,.nav-action:focus-visible,.big-cta:focus-visible,.menu-toggle:focus-visible{outline:3px solid #087777;outline-offset:5px;box-shadow:4px 4px 0 var(--mustard)}
.action:focus-visible .action-mark:after,.text-action:focus-visible:after{transform:translate(3px,-3px)}
@media(hover:hover) and (pointer:fine){
 .action:not(:disabled):hover,.text-action:not(:disabled):hover,.nav-action:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--mustard)}
 .text-action:not(:disabled):hover{box-shadow:4px 4px 0 var(--ink)}
 .action:not(:disabled):hover .action-mark{background:var(--mint)}
 .action:not(:disabled):hover .action-mark:after,.text-action:not(:disabled):hover:after{transform:translate(4px,-4px)}
 .nav-action:hover .mark{transform:rotate(-12deg) scale(1.08);transition:transform .28s}
 .big-cta:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--teal)}
 .menu-toggle:hover{background:var(--mint);box-shadow:3px 3px 0 var(--ink)}
}
.action:active,.text-action:active,.nav-action:active,.big-cta:active{transform:translate(0,0)!important;box-shadow:1px 1px 0 var(--ink)!important}
html[data-motion=reduce] .ruler .ruler-track{transform:none;transition:none}
html[data-motion=reduce] :is(.action,.text-action,.nav-action,.big-cta,.menu-toggle),html[data-motion=reduce] :is(.action-mark,.action-mark:after,.text-action:after,.nav-action .mark){transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.ruler .ruler-track{transform:none;transition:none}:is(.action,.text-action,.nav-action,.big-cta,.menu-toggle),:is(.action-mark,.action-mark:after,.text-action:after,.nav-action .mark){transition:none!important;transform:none!important}}
@media(hover:none),(pointer:coarse){.ruler .ruler-track{transform:none;transition:none}}
/* Smaller controls use the same paper response without shifting their layout. */
:is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle){transition:transform .25s,box-shadow .25s,background-color .25s;text-underline-offset:5px}
:is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle):focus-visible{outline:3px solid #087777;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 :is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle):hover{transform:translateY(-2px);box-shadow:2px 2px 0 var(--ink)}
 :is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle):not([aria-pressed=true]):hover{background:var(--mint);color:var(--ink)}
}
html[data-motion=reduce] :is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle){transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){:is([data-hero-topic],[data-subject],.plain-button,.ws-reset,#clear-search,#motion-toggle){transform:none!important;transition:none!important}}