button,
.metric-card,
.nav-item,
.mini-select {
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease,
    box-shadow .18s ease, color .18s ease;
}

button:not(:disabled):active,
.metric-card:active {
  transform: translateY(1px) scale(.985);
}

button:disabled {
  cursor: wait;
  opacity: .62;
}

:is(button, .metric-card, .nav-item, .mini-select):focus-visible {
  outline: 3px solid #6685ee42;
  outline-offset: 3px;
}

.primary:hover {
  background: #142b47;
  box-shadow: 0 14px 34px #0a172733;
  transform: translateY(-1px);
}

.quiet:hover {
  border-color: #aebfd3;
  background: #f8fbff;
  transform: translateY(-1px);
}

.text-action:hover { color: #2449bd; }

.metric-card {
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.metric-card:hover,
.metric-card:focus-visible {
  z-index: 1;
  background: linear-gradient(145deg, #fff 55%, #f0f6ff);
  box-shadow: inset 0 0 0 1px #6685ee38, inset 0 -12px 30px #6685ee0a;
}

.metric-card:hover::after,
.metric-card:focus-visible::after { transform: scaleX(1); }

.rail-panel,
.signal-panel,
.feedback-card,
.data-table {
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.rail-panel:hover,
.signal-panel:hover {
  border-color: #c9d7e8;
  box-shadow: 0 18px 45px #2c527510;
}

.rail-item,
.signal,
.table-row:not(.header) {
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.rail-item:hover {
  background: linear-gradient(90deg, #f4f8ff, transparent);
  transform: translateX(4px);
}

.signal:hover {
  background: #f7faff;
  box-shadow: -12px 0 #f7faff, 12px 0 #f7faff;
}

.table-row:not(.header):hover {
  position: relative;
  z-index: 1;
  background: #f8fbff;
  box-shadow: inset 3px 0 var(--blue);
}

.feedback-card:hover,
.feedback-card:focus-within {
  border-color: #becfea;
  box-shadow: 0 18px 42px #2f579414;
  transform: translateY(-3px);
}

.mini-select:hover { border-color: #afc2d9; }

dialog[open] { animation: dialog-enter .2s cubic-bezier(.2, .7, .2, 1); }
dialog[open]::backdrop { animation: backdrop-enter .18s ease-out; }

.dialog-form header button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  line-height: 1;
}

.dialog-form header button:hover {
  background: #eef3f9;
  color: var(--ink);
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open],
  dialog[open]::backdrop { animation: none; }
  .metric-card:hover,
  .feedback-card:hover { transform: none; }
}