/* Short, purposeful motion; the task text remains still while reading. */
button{transition:background-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 180ms cubic-bezier(.2,.8,.2,1)}
button:active{transform:scale(.96)}
@media(hover:hover){button:hover{transform:translateY(-2px)}nav button:hover{transform:translateX(4px)}}
input,textarea{transition:border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease}
input:focus,textarea:focus{border-color:#9475b3;box-shadow:0 0 0 4px #e5d5f755}
input[type=checkbox]{transition:transform 180ms ease,accent-color 180ms ease}
input[type=checkbox]:active{transform:scale(.86)}
.title{transition:color 240ms ease}
.tagchoices label{border-radius:9px;padding:7px 9px;margin:6px 0;transition:background-color 180ms ease,transform 180ms ease}
.tagchoices label:has(input:checked){background:#e5d5f7;transform:translateY(-2px)}
.row{border-radius:10px;transition:background-color 180ms ease}
@media(hover:hover){.row:hover{background:#f0f2ee88}}
dialog[open]::backdrop{animation:backdrop-in 200ms ease both}
dialog.is-closing::backdrop{animation:backdrop-out 160ms ease both}
@keyframes backdrop-in{from{background:#25302c00}to{background:#25302c66}}
@keyframes backdrop-out{to{background:#25302c00}}
#notice{bottom:100px}
@media(min-width:701px){#notice{bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:hover,button:active,.tagchoices label:has(input:checked){transform:none!important}}
@media(max-width:700px){.mobiletags{flex-direction:row}}