/* ─── LINE-DRAW (stroke-dashoffset reveal for diagram connectors) ─── */
.draw-line {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1s var(--ease-mech);
}
.diagram.in-view .draw-line { stroke-dashoffset: 0; }

.draw-node {
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
  transition: opacity 0.5s var(--ease-mech), transform 0.5s var(--ease-mech);
}
.diagram.in-view .draw-node { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .draw-line { transition: none; stroke-dashoffset: 0; }
  .draw-node { transition: none; opacity: 1; transform: none; }
}

/* ─── PANEL EXPAND / COLLAPSE (case files, stack layers, log entries) ─── */
.expand-panel {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows var(--dur-med) var(--ease-mech);
}
.expand-panel > div { overflow: hidden; min-height: 0; }
.expand-panel.open { grid-template-rows: minmax(0, 1fr); }

/* A padded child can't shrink below its own padding, so a collapsed grid
   row of 0px still leaves that padding (and any border) visible as a
   sliver. Zero them out while collapsed; the open state's own component
   rules (stack-layer-body-inner, log-body-inner, case-file-body-inner...)
   restore the real padding. */
.expand-panel:not(.open) > div {
  padding: 0;
  border: none;
}

/* ─── CHEVRON ROTATE ─── */
.chevron { transition: transform var(--dur-fast) var(--ease-mech); }
.open .chevron, [aria-expanded="true"] .chevron { transform: rotate(90deg); }