/* Short, interruption-safe transitions; reduced motion overrides these in settings.css. */
:root { --ui-ease: cubic-bezier(.22, 1, .36, 1); --ui-duration: 280ms; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page.active { animation: page-enter 320ms var(--ui-ease); }
.additional-info.active, .settings-dialog[open] { animation: panel-enter 220ms var(--ui-ease); }
.sidebar { transition: width var(--ui-duration) var(--ui-ease); }
.app-shell { transition: margin-left var(--ui-duration) var(--ui-ease); }
.sidebar-button, .mobile-menu-toggle {
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.sidebar-button:active, .mobile-menu-toggle:active { transform: scale(.95); }
.btn { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.progress-step, .progress-connector { transition: background-color 200ms ease, color 200ms ease; }
@media (min-width: 601px) {
  .sidebar, body.sidebar-expanded .sidebar { align-items: stretch; overflow-x: hidden; }
  .sidebar-button, body.sidebar-expanded .sidebar-button { width: 100%; justify-content: flex-start; gap: 0; }
  .sidebar-label, body.sidebar-expanded .sidebar-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    font: 500 13px 'Montserrat', sans-serif;
    transition: max-width var(--ui-duration) var(--ui-ease), opacity 160ms ease, margin-left var(--ui-duration) var(--ui-ease);
  }
  body.sidebar-expanded .sidebar-label { max-width: 160px; opacity: 1; margin-left: 14px; }
}
@media (max-width: 600px) {
  .sidebar {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-105%);
    pointer-events: none;
    transition: transform var(--ui-duration) var(--ui-ease), opacity 200ms ease, visibility 0s var(--ui-duration);
  }
  body.menu-open .sidebar { visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto; transition-delay: 0s; }
  .menu-backdrop, body.menu-open .menu-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 55;
    border: 0;
    background: rgba(20, 24, 50, .18);
    transition: opacity 200ms ease, visibility 0s var(--ui-duration);
  }
  .menu-backdrop { visibility: hidden; opacity: 0; pointer-events: none; }
  body.menu-open .menu-backdrop { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
}