/* MOMENT / 当下 — restrained motion. Loaded after styles.css.
   Business values and dense table rows never move. Entry effects are managed
   by motion.js so refreshes do not replay an entire page. */
:root {
  --motion-quick: 140ms;
  --motion-panel: 200ms;
  --motion-scene: 300ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

.page,
.toast,
dialog[open] {
  animation: none;
}

/* States retain their dimensions and focus outline. */
.btn {
  transition:
    color var(--motion-quick) var(--motion-ease),
    background-color var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) var(--motion-ease),
    transform var(--motion-quick) var(--motion-ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.search-input,
.select,
.field input,
.field select,
.field textarea {
  transition:
    border-color var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) var(--motion-ease);
}

/* The persistent marker travels behind the selected navigation label.
   motion.js measures each target; this also supports the narrow horizontal nav. */
#navigation.has-motion-marker {
  position: relative;
  isolation: isolate;
}

.nav-motion-marker {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 1px solid #444;
  border-radius: 4px;
  background: #373737;
}

.nav-motion-marker::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #bfbfbf;
}

#navigation.has-motion-marker .nav-item {
  z-index: 1;
  transition:
    color var(--motion-quick) var(--motion-ease),
    background-color var(--motion-quick) var(--motion-ease),
    border-color var(--motion-quick) var(--motion-ease);
}

#navigation.has-motion-marker .nav-item.active,
#navigation.has-motion-marker .nav-item[aria-current="page"] {
  background: transparent;
  border-color: transparent;
}

#navigation.has-motion-marker .nav-item.active::before,
#navigation.has-motion-marker .nav-item[aria-current="page"]::before {
  display: none;
}

.nav-item svg {
  transition: opacity var(--motion-quick) var(--motion-ease);
}

/* No nonessential movement when the in-app preference is enabled.
   The loading indicator remains visible, but stops rotating. WAAPI effects
   are cancelled by motion.js when the effective preference changes. */
:root[data-motion-reduced="true"] *,
:root[data-motion-reduced="true"] *::before,
:root[data-motion-reduced="true"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

:root[data-motion-reduced="true"] .btn:active:not(:disabled) {
  transform: none;
}

/* Apply even before JavaScript initializes, and in environments without it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .btn:active:not(:disabled) { transform: none; }
}

@media (max-width: 760px) {
  .nav-motion-marker::before { display: none; }
}

@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .nav-motion-marker { display: none !important; }
}