/* ─────────────────────────────────────────────────────────────────
  OrbitTrack – Adwaita motion
  The Libadwaita motion layer as it shipped until 2026-10-12, lifted out of
  style.css unchanged (same selectors, same order) so the Adwaita style keeps
  moving the way it always did: easeOutCubic-style decelerations around
  200 ms, and a soft rise on the window, header, cards, rows and chips.
  Only the Vue transition for popovers was renamed (adw-popover → flyout).
  Active when Settings → Style is Adwaita; see js/ui-style.js.
  ───────────────────────────────────────────────────────────────── */

:root {
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --transition: .2s var(--ease-standard);
}

.login-card {
  animation: card-enter .25s var(--ease-emphasized);
}

input, select, textarea, .select {
  transition:
    border-color .24s var(--ease-standard),
    box-shadow .24s var(--ease-out),
    transform .24s var(--ease-out);
}

.toggle-slider {
  transition: var(--transition);
}

.toggle-slider::before {
  transition: var(--transition);
}

.btn {
  transition:
    background-color .22s var(--ease-standard),
    border-color .22s var(--ease-standard),
    color .22s var(--ease-standard),
    transform .22s var(--ease-out),
    box-shadow .24s var(--ease-out);
}

.spinner {
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.tab-btn {
  transition:
    color .24s var(--ease-standard),
    background-color .24s var(--ease-standard),
    transform .24s var(--ease-out);
}

.timer-fullscreen-progress-bar {
  transition: width .42s var(--ease-out);
}

.timer-adjust-btn {
  transition:
    background-color .22s var(--ease-standard),
    transform .22s var(--ease-out),
    border-color .22s var(--ease-standard);
}

.group-toggle-btn {
  transition: all var(--transition);
}

.group-collapse-enter-active,
.group-collapse-leave-active {
  transition:
    max-height .25s cubic-bezier(.22, 1, .36, 1),
    opacity .2s cubic-bezier(.22, 1, .36, 1),
    transform .25s cubic-bezier(.22, 1, .36, 1);
}

.group-collapse-enter-from,
.group-collapse-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
}

.group-collapse-enter-to,
.group-collapse-leave-from {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

.task-item {
  transition:
    background-color .24s var(--ease-standard),
    transform .24s var(--ease-out),
    box-shadow .28s var(--ease-out);
}

.task-status-btn {
  transition: color .24s var(--ease-standard), transform .2s var(--ease-out);
}

.today-item {
  transition:
    background-color .22s var(--ease-standard),
    transform .22s var(--ease-out);
}

.toast-enter-active { transition: all .3s ease; }

.toast-leave-active { transition: all .3s ease; }

.toast-enter-from { opacity: 0; transform: translateX(-50%) translateY(1rem); }

.toast-leave-to { opacity: 0; transform: translateX(-50%) translateY(1rem); }

.app-fade-enter-active,
.app-fade-leave-active {
  transition:
    opacity .2s var(--ease-standard),
    transform .2s var(--ease-emphasized);
}

.app-fade-enter-from,
.app-fade-leave-to {
  opacity: 0;
  transform: translateY(6px);
}

.settings-slide-enter-active,
.settings-slide-leave-active {
  transition:
    opacity .2s var(--ease-standard),
    transform .2s var(--ease-emphasized),
    max-height .2s var(--ease-emphasized);
  overflow: hidden;
}

.settings-slide-enter-from,
.settings-slide-leave-to {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
}

.settings-slide-enter-to,
.settings-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 220px;
}

.timer-overlay-enter-active,
.timer-overlay-leave-active {
  transition:
    opacity .2s var(--ease-standard),
    transform .25s var(--ease-emphasized);
}

.timer-overlay-enter-from,
.timer-overlay-leave-to {
  opacity: 0;
  transform: scale(1.02);
}

.tab-panel-enter-active,
.tab-panel-leave-active {
  transition:
    opacity .2s var(--ease-standard),
    transform .2s var(--ease-emphasized);
}

.tab-panel-enter-from,
.tab-panel-leave-to {
  opacity: 0;
  transform: translateY(6px);
}

.modal-pop-enter-active,
.modal-pop-leave-active {
  transition: opacity .22s var(--ease-standard);
}

.modal-pop-enter-active .modal-card,
.modal-pop-leave-active .modal-card {
  transition:
    opacity .2s var(--ease-standard),
    transform .25s var(--ease-emphasized);
}

.modal-pop-enter-from,
.modal-pop-leave-to {
  opacity: 0;
}

.modal-pop-enter-from .modal-card,
.modal-pop-leave-to .modal-card {
  opacity: 0;
  transform: translateY(8px) scale(.99);
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

:root {
  --adw-ease: cubic-bezier(.25, .46, .45, .94);
  --adw-decel: cubic-bezier(.05, .7, .1, 1);
  /* easeOutCubic — libadwaita's standard curve. No token here overshoots:
     motion decelerates into place and stops. */
  --adw-ease-out: cubic-bezier(.215, .61, .355, 1);
  --transition: .2s var(--adw-ease-out);
}

.app-shell {
  animation: adw-window-in .25s var(--adw-decel) backwards;
}

.topbar {
  animation: adw-header-drop .2s var(--adw-decel) backwards;
}

.topbar-left svg {
  animation: adw-icon-pop .18s var(--adw-ease-out) backwards;
}

.tab-btn,
.group-toggle-btn {
  transition:
    color .22s var(--adw-decel),
    background-color .22s var(--adw-decel),
    box-shadow .34s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.content {
  animation: adw-view-rise .2s var(--adw-decel) backwards;
}

.login-card {
  animation: adw-sheet-in .25s var(--adw-decel) backwards;
}

.logo {
  animation: adw-icon-pop .18s var(--adw-ease-out) backwards;
}

.today-hero {
  animation: adw-view-rise .2s var(--adw-decel) backwards;
}

.today-stat-pill,
.badge,
.task-count {
  animation: adw-chip-in .15s var(--adw-ease-out) backwards;
}

.today-actions,
.add-task-bar {
  animation: adw-glide-left .18s var(--adw-decel) backwards;
}

.today-section {
  transition:
    background-color .22s var(--adw-decel),
    border-color .22s var(--adw-decel),
    box-shadow .36s var(--adw-decel),
    transform .2s var(--adw-ease-out);
  animation: adw-card-in .2s var(--adw-decel) backwards;
}

.today-item,
.task-item {
  transition:
    background-color .22s var(--adw-decel),
    border-color .22s var(--adw-decel),
    box-shadow .34s var(--adw-decel),
    transform .2s var(--adw-ease-out),
    opacity .24s var(--adw-decel);
  animation: adw-row-in .18s var(--adw-decel) backwards;
}

.btn,
.group-header-main,
.task-status-btn,
.timer-adjust-btn {
  transition:
    background-color .22s var(--adw-decel),
    border-color .22s var(--adw-decel),
    color .22s var(--adw-decel),
    box-shadow .32s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

input,
select,
textarea,
.select {
  transition:
    background-color .22s var(--adw-decel),
    border-color .22s var(--adw-decel),
    box-shadow .3s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

input:focus,
select:focus,
textarea:focus {
  transform: scale(1.01);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px) scale(1.04);
}

.adw-combo-button,
.adw-date-button {
  transition:
    background-color .22s var(--adw-decel),
    border-color .22s var(--adw-decel),
    box-shadow .3s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.adw-combo-button svg,
.adw-date-button svg {
  transition: transform .2s var(--adw-ease-out), color .22s var(--adw-decel);
}

.adw-combo.open .adw-combo-button svg {
  transform: rotate(180deg);
}

.adw-combo-option {
  transition:
    background-color .18s var(--adw-decel),
    color .18s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.adw-date-nav {
  transition: background-color .2s var(--adw-decel), transform .2s var(--adw-ease-out);
}

.adw-date-nav svg {
  transition: transform .2s var(--adw-ease-out);
}

.adw-date-day {
  transition:
    background-color .18s var(--adw-decel),
    border-color .18s var(--adw-decel),
    color .18s var(--adw-decel),
    transform .2s var(--adw-ease-out),
    box-shadow .24s var(--adw-decel);
}

.adw-date-day.selected {
  transform: scale(1.05);
}

.adw-date-link {
  transition: background-color .2s var(--adw-decel), transform .2s var(--adw-ease-out);
}

.flyout-enter-active {
  transition:
    opacity .15s var(--adw-decel),
    transform .15s var(--adw-ease-out);
}

.flyout-leave-active {
  transition:
    opacity .1s var(--adw-decel),
    transform .1s var(--adw-ease-out);
}

.flyout-enter-from,
.flyout-leave-to {
  opacity: 0;
  transform: translateY(-4px) scale(.98);
}

.status-done {
  animation: adw-check-pop .15s var(--adw-ease-out) backwards;
}

.timer-fullscreen-inner {
  animation: adw-sheet-in .25s var(--adw-decel) backwards;
}

.timer-adjust-panel {
  animation: adw-card-in .2s var(--adw-decel) backwards;
}

.loading-state .spinner {
  animation: spin .7s linear infinite;
}

.empty-state,
.task-group-empty {
  animation: adw-soft-fade .2s var(--adw-decel) backwards;
}

.settings-slide-enter-active,
.settings-slide-leave-active,
.tab-panel-enter-active,
.tab-panel-leave-active,
.timer-overlay-enter-active,
.timer-overlay-leave-active,
.modal-pop-enter-active,
.modal-pop-leave-active,
.toast-enter-active,
.toast-leave-active,
.group-collapse-enter-active,
.group-collapse-leave-active {
  transition-timing-function: var(--adw-decel);
}

.tab-panel-leave-to {
  transform: translateY(-4px);
}

.toast-enter-active,
.toast-leave-active {
  transition:
    opacity .2s var(--adw-decel),
    transform .25s var(--adw-decel);
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

@keyframes adw-window-in {
  from { opacity: 0; transform: scale(.99); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-header-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-view-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-chip-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-glide-left {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-icon-pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-check-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

@keyframes adw-soft-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.plan-nav-btn {
  transition:
    background-color .2s var(--adw-decel),
    color .2s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.plan-headerbar-title {
  transition: background-color .2s var(--adw-decel);
}

.plan-entry-row {
  transition:
    border-color .22s var(--adw-decel),
    box-shadow .3s var(--adw-decel);
}

.plan-entry-add {
  transition:
    background-color .2s var(--adw-decel),
    color .2s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.plan-row-group {
  transition: background-color .22s var(--adw-decel);
}

.plan-row-accent {
  transition: background-color .24s var(--adw-decel);
}

.plan-target-progress-bar {
  transition: width .4s var(--ease-standard);
}

.plan-icon-btn {
  transition:
    background-color .18s var(--adw-decel),
    color .18s var(--adw-decel),
    transform .2s var(--adw-ease-out);
}

.adw-menu-item {
  transition:
    background-color .18s var(--adw-decel),
    color .18s var(--adw-decel);
}

.plan-row-detail {
  /* `backwards`, never `both`. With `both` the final keyframe's `transform:
     none` is retained as an animated value, and Chrome resolves that to
     matrix(1,0,0,1,0,0) — a transform that is not `none`, so the element keeps
     a stacking context forever. That traps the attach popover inside it at
     z=0, and any later sibling row paints straight over the open dropdown.
     `backwards` drops the animated values once the run finishes, so the
     computed transform goes back to `none` and z-index 650 reaches the root. */
  animation: plan-detail-in .18s var(--adw-decel) backwards;
}

@keyframes plan-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.plan-skeleton-row {
  animation: plan-shimmer 1.4s var(--adw-ease) infinite;
}

@keyframes plan-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.repeat-day {
  transition: background-color .2s var(--ease-standard), color .2s var(--ease-standard), border-color .2s var(--ease-standard);
}

.timer-minimize-btn {
  transition: color .2s var(--ease-standard), background-color .2s var(--ease-standard);
}

.timer-float-enter-active,
.timer-float-leave-active {
  transition: opacity .2s var(--ease-standard), transform .2s var(--ease-out);
}

.timer-float-enter-from,
.timer-float-leave-to {
  opacity: 0;
  transform: translateY(8px) scale(.98);
}