/* Shared interaction motion. Loaded after the theme and module layout layers. */
:root {
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --motion-overlay: 280ms;
  --motion-feedback: 320ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-settle: cubic-bezier(.22, 1, .36, 1);
}

html { scrollbar-gutter: stable; }
body.modal-open { overflow: hidden; overscroll-behavior: none; }

/* Theme artwork is static; changing its crop should not repaint every frame. */
.bg-vignette { transition: none; }
.app, .quick-add { animation: neo-enter var(--motion-normal) var(--motion-ease) both; }
.view.active { animation: neo-view-enter var(--motion-overlay) var(--motion-ease) both; }
@keyframes neo-view-enter { from { opacity: 0; } to { opacity: 1; } }

/* Keep feedback local to the control, including keyboard focus and touch. */
button, [role="button"], .theme-select, .drawer-select,
.habit .box, .task .box, .goal .box, .ck .box {
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
.btn, .micro-btn, .theme-picker-trigger, .nav button, .action-nav button,
.focus-pick button, .action-volume-tab, .action-volume-controls button,
.counter button, .phase-add, .item-actions button, .modal-close, .quick-add {
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
:is(button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.theme-option:focus-visible { outline-color: var(--theme-color); outline-offset: -2px; }
.command-search input:focus-visible { outline-offset: 4px; }
.quick-add:hover { filter: none; }
.btn:active, .micro-btn:active, .quick-add:active,
.counter button:active, .phase-add:active, .item-actions button:active,
.modal-close:active, .habit .box:active, .task .box:active,
.goal .box:active, .ck .box:active { transform: scale(.96); }
button:disabled, [aria-disabled="true"] { cursor: default; }
button:disabled:active, [aria-disabled="true"]:active { transform: none; }
.field input, .field select, .field textarea, .drawer-input, .drawer-select,
.habit-manager-row input, .habit-manager-row select, .addrow input,
.rsec textarea {
  transition: border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
  scroll-margin-block: 90px;
}
.habit, .task, .goal, .ck, .habit-manager-row, .drop-zone, .command-item {
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.habit .lab, .task .t, .goal > span, .ck > span {
  transition: color var(--motion-normal) var(--motion-ease);
}
.task:focus-within .del, .task:focus-within .move,
.block:focus-within .edit-action, .lead:focus-within .edit-action,
.ck:focus-within .del { opacity: 1; }
.item-drag-active { user-select: none; -webkit-user-select: none; }
.item-drag-active, .item-drag-active * { cursor: grabbing !important; }
.drag-handle, .habit-manager-grip {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* A single menu motion avoids dozens of staggered transitions on theme changes. */
.theme-menu {
  max-height: calc(var(--neo-viewport-height, 100dvh) - 100px - env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  transform: translateY(-6px);
  transition: opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-overlay) var(--motion-settle),
    visibility 0s linear var(--motion-overlay);
}
.theme-picker.open .theme-menu { transform: translateY(0); transition-delay: 0s; }
.theme-option, .theme-picker.open .theme-option {
  opacity: 1;
  transform: none;
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
  transition-delay: 0s !important;
}
.theme-chevron {
  transition: transform var(--motion-overlay) var(--motion-settle),
    color var(--motion-fast) var(--motion-ease);
}
.theme-check {
  transition: opacity var(--motion-fast) var(--motion-ease),
    transform var(--motion-normal) var(--motion-settle);
}
.drawer .drawer-theme-picker { width: 100%; min-width: 0; }
.drawer-theme-picker .theme-menu,
.drawer-theme-picker.open .theme-menu {
  max-height: none;
  margin-top: 7px;
  padding: 8px;
  overflow: visible;
  scrollbar-gutter: auto;
}
.drawer-theme-picker .theme-menu {
  display: none;
  transition: opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-overlay) var(--motion-settle),
    visibility 0s linear var(--motion-overlay),
    display var(--motion-overlay) allow-discrete;
}
.drawer-theme-picker.open .theme-menu { display: grid; transition-delay: 0s; }
@starting-style {
  .drawer-theme-picker.open .theme-menu { opacity: 0; transform: translateY(-6px); }
}

/* Backdrops stay mounted while fading out; hidden surfaces never accept input. */
.drawer-bg, .modal-bg, .command-bg {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-normal) var(--motion-ease),
    visibility 0s linear var(--motion-overlay);
}
.drawer-bg.open, .modal-bg.open, .command-bg.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.drawer, .editor-modal, .habit-manager, .command-palette {
  visibility: hidden;
  pointer-events: none;
  overscroll-behavior: contain;
  scroll-padding-block: 82px;
  transition: opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-overlay) var(--motion-settle),
    visibility 0s linear var(--motion-overlay);
}
.drawer.open, .editor-modal.open, .habit-manager.open, .command-palette.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.drawer {
  top: var(--neo-viewport-top, 0px);
  height: var(--neo-viewport-height, 100dvh);
  max-height: var(--neo-viewport-height, 100dvh);
  overflow-x: hidden;
  transform: translate3d(100%, 0, 0);
}
.drawer.open { transform: translate3d(0, 0, 0); }
.drawer > .modal-head { align-items: center; gap: 12px; }
.drawer > .modal-head h3 { margin-bottom: 0; }
.modal-close { flex: 0 0 36px; min-width: 36px; min-height: 36px; }
.editor-modal, .habit-manager {
  top: calc(var(--neo-viewport-top, 0px) + var(--neo-viewport-height, 100dvh) / 2);
  max-height: calc(var(--neo-viewport-height, 100dvh) - 32px);
  transform: translate(-50%, calc(-50% + 12px));
}
.editor-modal.open, .habit-manager.open { transform: translate(-50%, -50%); }
.command-palette {
  top: calc(var(--neo-viewport-top, 0px) + min(12dvh, 80px));
  display: flex;
  flex-direction: column;
  max-height: calc(var(--neo-viewport-height, 100dvh) - min(12dvh, 80px) - 16px);
  transform: translate(-50%, -8px);
  overflow: hidden;
}
.command-palette.open { transform: translate(-50%, 0); }
.command-search, .command-foot { flex-shrink: 0; }
.command-results { min-height: 0; overscroll-behavior: contain; }
.field, .editor-fields, .settings-section, .settings-pair { min-width: 0; }
.editor-fields, .settings-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-section .btn { overflow-wrap: anywhere; }

.toast {
  z-index: 100;
  max-width: min(560px, calc(100vw - 28px));
  text-align: center;
  overflow-wrap: anywhere;
  transform: translate(-50%, 10px);
  transition: opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-overlay) var(--motion-settle);
}
.toast.show { transform: translate(-50%, 0); }
.ring .fill {
  transition: stroke-dasharray var(--motion-feedback) var(--motion-ease),
    stroke var(--motion-normal) var(--motion-ease);
}
.chain i, .action-volume-cell {
  transition: background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
/* Applied only to a newly inserted row or the changed checkbox, never the list. */
.neo-row-enter { animation: neo-row-enter var(--motion-overlay) var(--motion-ease) both; }
.neo-check-pop { animation: neo-check-pop var(--motion-feedback) var(--motion-settle) both; }
@keyframes neo-row-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes neo-check-pop {
  0% { transform: scale(.86); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (hover: none) {
  .theme-picker.open .theme-option:hover, .theme-picker.open .theme-option:focus-visible,
  .action-volume-cell:hover, .quick-add:hover { transform: none; }
  .quick-add:active { transform: scale(.96); }
}

@media (max-width: 900px) {
  html { scrollbar-gutter: auto; }
  /* The drawer must cover the persistent mobile dock as well as the page. */
  .drawer-bg { z-index: 64; }
  .drawer { z-index: 65; }
  .toast {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .theme-menu {
    max-height: calc(var(--neo-viewport-height, 100dvh) - 146px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .habit-manager-head { display: none; }
  .habit-manager-row { grid-template-columns: 36px repeat(3, minmax(0, 1fr)); }
  .habit-manager-row > input[data-habit-field="label"] { grid-column: 2 / -1; }
  .habit-manager-grip { grid-row: 1 / 4; height: 100%; }
  .habit-manager-actions { grid-column: 4; justify-content: flex-end; }
}

@media (max-width: 720px) {
  .drawer {
    width: min(390px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }
  .editor-modal, .habit-manager {
    top: auto;
    bottom: calc(100dvh - var(--neo-viewport-height, 100dvh) - var(--neo-viewport-top, 0px));
    max-height: calc(var(--neo-viewport-height, 100dvh) - 12px - env(safe-area-inset-top));
    transform: translate3d(0, 36px, 0);
  }
  .editor-modal.open, .habit-manager.open { transform: translate3d(0, 0, 0); }
  .modal-close { flex-basis: 44px; min-width: 44px; min-height: 44px; }
  .command-palette {
    top: calc(var(--neo-viewport-top, 0px) + max(6px, env(safe-area-inset-top)));
    max-height: calc(var(--neo-viewport-height, 100dvh) - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .command-results { max-height: none; }
  .command-search input, .field input, .field select, .field textarea,
  .drawer-input, .drawer-select, .habit-manager-row input,
  .habit-manager-row select { font-size: 16px; }
  .theme-menu {
    top: calc(var(--neo-viewport-top, 0px) + 62px + env(safe-area-inset-top));
  }
  #themeSelect .theme-option { min-height: 40px; padding-block: 6px; }
  .drawer-theme-picker .theme-option { min-height: 40px; }
  .drawer-theme-picker .theme-menu { top: auto; }
  .editor-fields { grid-template-columns: minmax(0, 1fr); }
  .editor-fields .field { grid-column: 1 / -1; }
  .habit-manager-foot { gap: 10px; }
  .habit-manager-foot > span { min-width: 0; line-height: 1.5; }
  body.modal-open .toast {
    bottom: calc(100dvh - var(--neo-viewport-height, 100dvh) - var(--neo-viewport-top, 0px) + 16px + env(safe-area-inset-bottom));
  }
}

@media (max-height: 500px) {
  .editor-modal, .habit-manager { max-height: calc(var(--neo-viewport-height, 100dvh) - 16px); }
  .command-palette {
    top: calc(var(--neo-viewport-top, 0px) + 8px);
    max-height: calc(var(--neo-viewport-height, 100dvh) - 16px);
  }
  .command-results { max-height: none; }
  .modal-head { padding-bottom: 10px; margin-bottom: 10px; }
  .habit-manager .modal-head p { display: none; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .theme-menu {
    position: fixed;
    top: calc(var(--neo-viewport-top, 0px) + 62px + env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(var(--neo-viewport-height, 100dvh) - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #themeSelect .theme-option { min-height: 36px; }
  .drawer-theme-picker .theme-menu { position: relative; top: auto; left: auto; right: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .neo-row-enter { opacity: 1; transform: none; }
}