/* Nexus motion: short feedback, no looping decoration. Content works without JS. */
:root {
  --motion-fast: 140ms;
  --motion-panel: 220ms;
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

textarea:focus-visible {
  outline: 2px solid #bb96fa;
  outline-offset: 3px;
}

/* Native details keeps its semantics, keyboard controls and no-script fallback. */
.main details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.main details > summary::-webkit-details-marker { display: none; }
.main details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex: 0 0 7px;
  align-self: center;
  margin-right: 3px;
  opacity: .75;
}
.main details[open] > summary::after { transform: rotate(45deg); }
.main details.is-closing > summary::after { transform: rotate(-45deg); }

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color var(--motion-fast), border-color var(--motion-fast),
      color var(--motion-fast), transform var(--motion-fast) var(--motion-ease),
      box-shadow var(--motion-fast);
  }
  .button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
  .sidebar nav a, .section-tabs a, .plain, .text-link, .player-name {
    transition: color var(--motion-fast), background-color var(--motion-fast),
      border-color var(--motion-fast);
  }
  .field input, .field select, .field textarea, .search-form input {
    transition: border-color var(--motion-fast), background-color var(--motion-fast);
  }
  .card-stack > article.panel, .support-column > .panel, tbody tr {
    transition: border-color var(--motion-fast), background-color var(--motion-fast);
  }
  .main details > summary::after {
    transition: transform 180ms var(--motion-ease);
  }

  /* Only page-level groups enter; long lists do not cascade one item at a time. */
  .main > .page-heading,
  .main > .panel,
  .main > .form,
  .main > .section-tabs,
  .main > .card-stack,
  .main > .table-wrap,
  .main > .section,
  .dashboard-grid > div > .next-step,
  .dashboard-grid > div > .section,
  .dashboard-grid > .support-column,
  .auth-card {
    animation: nexus-arrive var(--motion-panel) var(--motion-ease) both;
  }
  .dashboard-grid > div > .section { animation-delay: 40ms; }
  .dashboard-grid > .support-column { animation-delay: 70ms; }
  .main > .message, .auth-layout > .message {
    animation: nexus-notice 180ms var(--motion-ease) both;
  }

  @keyframes nexus-arrive {
    from { opacity: .45; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes nexus-notice {
    from { opacity: .55; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (hover: hover) and (pointer: fine) {
  .card-stack > article.panel:has(a):hover,
  .support-column > .panel:has(a):hover {
    border-color: #51405f;
    background-color: #18151f;
  }
  tbody tr:hover { background-color: #15121c; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover:not(:disabled) { transform: translateY(-1px); }
  .button.primary:hover:not(:disabled) { box-shadow: 0 4px 14px #7c3aed24; }
  .button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}