/* Brief physical feedback; no hover sounds, loops or extra compositing layers. */
#sound-toggle { flex-shrink: 0; }
#sound-toggle .sound-off { display: none; }
#sound-toggle[aria-pressed=false] .sound-on { display: none; }
#sound-toggle[aria-pressed=false] .sound-off { display: block; }
#sound-toggle[aria-pressed=false] { color: var(--muted); }
@keyframes ledger-dialog-enter { from { opacity: 0; transform: translateY(6px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ledger-toast-enter { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: ledger-dialog-enter 180ms cubic-bezier(.2,.7,.3,1); }
  .toast:not([hidden]) { animation: ledger-toast-enter 180ms ease-out; }
  :where(.btn,.icon-btn,.preset-chip,.nav-tabs button,.experience-toggle button,.timeline-toggle button,.pricing-profile-controls button) {
    transition: transform 110ms ease-out, background-color 140ms ease, border-color 140ms ease;
  }
  :where(.btn,.icon-btn,.preset-chip,.nav-tabs button,.experience-toggle button,.timeline-toggle button,.pricing-profile-controls button):active:not(:disabled) {
    transform: translateY(1px) scale(.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.btn,.icon-btn,.preset-chip,.nav-tabs button,.experience-toggle button,.timeline-toggle button,.pricing-profile-controls button) { transition: none; }
}
@media (max-width: 600px) {
  .app-shell .header-tools { flex-wrap: wrap; max-width: 100%; }
}

/* Opening motion; cloth deformation lives in flag-motion.js. */
@keyframes ledger-open {
  from { opacity:0; transform:translateY(12px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ledger-content-open {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:no-preference) {
  #workspace.ledger-enter { animation:ledger-open 640ms cubic-bezier(.16,1,.3,1) both; }
  #workspace.ledger-enter #main-content { animation:ledger-content-open 520ms 90ms cubic-bezier(.16,1,.3,1) both; }
  #workspace.ledger-enter .header-flag { animation:ledger-content-open 520ms 140ms cubic-bezier(.16,1,.3,1) both; }
}