/* Motion layer: transitions, reveals, tooltips, guided tour. Owned by the interactivity pass.
   Rule for everything added here: only transform and opacity carry an actual CSS transition or
   animation (grid-template-rows is the one named exception, used for the disclosure panels).
   Colour/border/fill changes below are instant attribute swaps, not animated properties. */

/* ============================================================ floating tooltip
   Used by the monitoring chart bars and the SLA progress bars: a hover/focus target sets
   data-tip, JS positions this single shared node, CSS only fades it in. */

.mo-tooltip {
  position: fixed; z-index: var(--z-tooltip);
  transform: translate(-50%, calc(-100% - 4px));
  max-width: 260px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  padding: var(--s-3) var(--s-5); font-size: var(--t-xs); line-height: 1.4;
  box-shadow: var(--shadow-2); pointer-events: none;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.mo-tooltip[data-show="true"] { opacity: 1; }

.mo-chart-hit:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ============================================================ KYA procedure map: selection + chain */

.mo-kya-map[data-active="true"] .mo-kya-node,
.mo-kya-map[data-active="true"] .mo-kya-line {
  opacity: 0.3;
  transition: opacity var(--fast) var(--ease);
}
.mo-kya-map[data-active="true"] .mo-kya-node.is-chain,
.mo-kya-map[data-active="true"] .mo-kya-line.is-chain {
  opacity: 1;
}
.mo-kya-node { cursor: pointer; }
.mo-kya-node:focus { outline: none; }
.mo-kya-node:focus-visible rect { stroke: var(--ring); stroke-width: 2.5; }
.mo-kya-node.is-selected rect { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2; }
.mo-kya-line.is-chain { stroke: var(--brand) !important; }

.mo-kya-chain-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mo-kya-chain-list li { font-size: var(--t-xs); color: var(--ink-2); }
.mo-kya-chain-list li .mono { color: var(--ink-3); }

/* ============================================================ queue row disclosure
   grid-template-rows 0fr -> 1fr is the one layout property allowed to transition: it is the only
   way to animate an "auto" height without measuring, and it never causes the intermediate reflow
   jank that animating `height` directly does. */

.mo-preview-toggle .icon { transition: transform var(--fast) var(--ease); }
.mo-preview-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.mo-preview {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--mid) var(--ease);
}
.mo-preview[data-open="true"] { grid-template-rows: 1fr; }
.mo-preview > div { overflow: hidden; min-height: 0; }
.mo-preview-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: var(--s-7); padding: var(--s-6); align-items: start;
}
.mo-preview-events { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mo-preview-events li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-xs); color: var(--ink-2); }
@media (max-width: 900px) { .mo-preview-grid { grid-template-columns: minmax(0, 1fr); } }
.table-stack tbody tr.mo-preview-row td { display: block; padding: 0; }

/* ============================================================ tab crossfade
   Switching a tab swaps `hidden` instantly (there is no shared layout between two different
   panels to animate between); the newly shown panel then gets a short fade + lift so its content
   does not just snap into place. */

@keyframes mo-tab-in { from { opacity: 0; transform: translateY(4px); } }
.mo-tab-fade { animation: mo-tab-in 120ms var(--ease); }

/* ============================================================ guided tour */

.mo-tour-spot {
  position: fixed; z-index: var(--z-modal); border-radius: var(--r-control);
  box-shadow: 0 0 0 4000px oklch(0.2 0.03 262 / 0.6);
  pointer-events: none;
}
.mo-tour-card {
  position: fixed; z-index: var(--z-modal);
  width: min(320px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  box-shadow: var(--shadow-3); padding: var(--s-6);
}
.mo-tour-card.mo-anim-in { animation: mo-tab-in var(--mid) var(--ease); }
.mo-tour-close { position: absolute; top: var(--s-4); right: var(--s-4); }
.mo-tour-count { margin: 0 0 var(--s-2); }