.button,.icon-button,.choice-button,.record-row,.feedback-card,.media-thumb,.page-buttons button {transition:background-color var(--motion-feedback),border-color var(--motion-feedback),color var(--motion-feedback),box-shadow var(--motion-feedback)}
.search {transition:border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
.search:focus-within {border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}.search input:focus-visible {outline:none}
select {transition:border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
.quiet-link,.footer a {transition:color var(--motion-feedback)}
@media(hover:hover) {
  .feedback-card:hover {border-color:var(--line-hover)}
  .record-row:hover {border-color:var(--line-hover)}.media-thumb:hover {border-color:var(--green)}
}
.feedback-card:active {background:var(--cream)}
details>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;min-height:44px}
details>summary::-webkit-details-marker {display:none}
details>summary::after {content:'';width:14px;height:14px;flex-shrink:0;background:url('./assets/chevron-down.svg') center / contain no-repeat;transition:transform var(--motion-feedback) var(--ease-out)}
details[open]>summary::after {transform:rotate(180deg)}
.is-changing>.feedback-card,.is-changing>.empty {animation:feedback-enter var(--motion-state) var(--ease-out) both}
@keyframes feedback-enter {from {opacity:.3;transform:translateY(3px)}to {opacity:1;transform:translateY(0)}}
dialog {opacity:0;transform:translateY(6px);transition:opacity var(--motion-state) var(--ease-out),transform var(--motion-state) var(--ease-out),display var(--motion-state) allow-discrete,overlay var(--motion-state) allow-discrete}
dialog[open] {opacity:1;transform:translateY(0)}
dialog::backdrop {opacity:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity var(--motion-state),display var(--motion-state) allow-discrete,overlay var(--motion-state) allow-discrete}
dialog[open]::backdrop {opacity:1}
@starting-style {dialog[open] {opacity:0;transform:translateY(6px)}dialog[open]::backdrop {opacity:0}}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*::before,*::after {animation:none!important;transition:none!important}dialog {transform:none!important}}
@media(prefers-contrast:more) {:root {--muted:var(--ink);--line:var(--ink)}dialog::backdrop {backdrop-filter:none;-webkit-backdrop-filter:none}}