/* Ekalix - the deadlock diagram.   web\deadlockview.css   (with deadlockview.js)
 *
 * Every colour comes from the product's custom properties, so the five themes need nothing
 * here: a node or a chip carries a .t-<tone> class, which sets --tone / --tone-bg / --tone-bd
 * (styles.css), and the rules below read those. Holding is solid, waiting is dashed, the loop
 * glows, the victim has a cross and the word "victim" - colour is never the only signal.
 *
 * Motion: every animation lives under .dlv-svg.is-animating, which deadlockview.js sets only
 * when the tab is visible and motion is allowed, and the last block switches all of it off
 * for data-motion="off", or for prefers-reduced-motion unless data-motion="on". The resting
 * style of everything is its final state, so with motion off the picture still says it all.
 */

.dlv {
  container: dlv / inline-size;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--text); font-family: var(--font);
  min-width: 0;
}
.dlv-grow { flex: 1 1 auto; }

/* ---- header ------------------------------------------------------------------------- */
.dlv-head { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dlv-headrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dlv-title {
  font-size: 13.5px; font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.dlv-at, .dlv-count {
  font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.dlv-at { font-family: var(--mono); }
.dlv-summary {
  font-size: 12.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dlv-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dlv-chip {
  display: inline-block; max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: var(--fs-small); line-height: 18px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 9px;
}
.dlv-chip.t-critical {
  font-family: var(--font); font-weight: 600;
  color: var(--tone); background: var(--tone-bg); border-color: var(--tone-bd);
}

/* ---- buttons ------------------------------------------------------------------------ */
.dlv-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-family: var(--font); font-size: var(--fs-small); font-weight: 600; line-height: 1;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: var(--r-xs);
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.dlv-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent-bd); }
.dlv-btn:focus { outline: none; }
.dlv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dlv-btn:disabled { opacity: .42; cursor: default; }
.dlv-btn.is-primary { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bd); }
.dlv-btn.is-primary:hover { background: var(--accent-bg); border-color: var(--accent); }
.dlv-btn.is-small { padding: 4px 8px; font-size: var(--fs-micro); }
.dlv-btn.is-icon { padding: 4px 7px; }
.dlv-btn-ico { fill: currentColor; }

/* ---- layout ------------------------------------------------------------------------- */
.dlv-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 12px; align-items: start; min-width: 0;
}
.dlv-compact .dlv-body { grid-template-columns: minmax(0, 1fr); }
.dlv-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@container dlv (max-width: 860px) {
  .dlv-body { grid-template-columns: minmax(0, 1fr); }
  .dlv-panel { max-height: none; }
}

/* ---- the stage ---------------------------------------------------------------------- */
.dlv-stage {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--hairline); border-radius: var(--r-s);
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, var(--accent-bg), transparent 74%),
    var(--surface-1);
  overflow: hidden;
}
.dlv-canvas {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px;
}
.dlv-svg { display: block; width: 100%; height: 100%; margin: 0 auto; overflow: visible; }
.dlv-svg text { font-family: var(--font); }

/* ---- edges -------------------------------------------------------------------------- */
.dlv-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dlv-edge.k-holds .dlv-line { stroke: var(--accent); stroke-width: 2.4; opacity: .92; }
.dlv-edge.k-holds .dlv-arrow { fill: var(--accent); }
.dlv-edge.k-waits .dlv-line { stroke: var(--warning); stroke-width: 2.4; stroke-dasharray: 7 6; }
.dlv-edge.k-waits .dlv-arrow { fill: var(--warning); }
/* the loop: both kinds turn the loop colour and glow; solid and dashed still tell them apart */
.dlv-edge.is-cycle .dlv-line { stroke: var(--serious); stroke-width: 3.2; opacity: 1; filter: drop-shadow(0 0 4px var(--serious)); }
.dlv-edge.is-cycle .dlv-arrow { fill: var(--serious); filter: drop-shadow(0 0 3px var(--serious)); }
/* the victim's locks, released */
.dlv-edge.st-gone .dlv-line { stroke: var(--critical); stroke-width: 1.6; stroke-dasharray: 2 6; opacity: .3; filter: none; }
.dlv-edge.st-gone .dlv-arrow { fill: var(--critical); opacity: .3; filter: none; }
/* a survivor's wait that became a hold */
.dlv-edge.st-conv .dlv-line-was { opacity: 0; }
.dlv-edge.st-conv .dlv-line-now { stroke: var(--ok); stroke-width: 2.8; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 3px var(--ok)); }
.dlv-edge.st-conv .dlv-arrow-now { fill: var(--ok); }

.dlv-elab {
  font-size: 10.5px; font-weight: 600; fill: var(--text-2);
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none;
}
.dlv-elab.k-waits { fill: var(--warning); }
.dlv-elab.is-cycle { fill: var(--serious); font-weight: 700; }
.dlv-elab.st-conv { fill: var(--ok); font-weight: 700; }
.dlv-elab.st-gone { fill: var(--text-3); font-weight: 500; }

/* the pulse running round the loop: four dashes of different lengths on one road, all
   ending at the same moving point, so together they read as a comet */
.dlv-pulse { fill: none; stroke-linecap: round; pointer-events: none; }
.dlv-pulse-glow { stroke: var(--warning); stroke-width: 18; opacity: .2; stroke-dasharray: 6 94; stroke-dashoffset: 6; filter: blur(3px); }
.dlv-pulse-tail { stroke: var(--warning); stroke-width: 5; opacity: .75; stroke-dasharray: 11 89; stroke-dashoffset: 11; filter: drop-shadow(0 0 4px var(--warning)); }
.dlv-pulse-neck { stroke: var(--text); stroke-width: 3.4; opacity: .85; stroke-dasharray: 4 96; stroke-dashoffset: 4; }
.dlv-pulse-head {
  stroke: var(--text); stroke-width: 8.5; stroke-dasharray: .3 99.7; stroke-dashoffset: .3;
  filter: drop-shadow(0 0 5px var(--warning)) drop-shadow(0 0 12px var(--serious));
}
/* on a light page the hot core is the page's own white, ringed by the loop colour */
:root[data-theme="daylight"] .dlv-pulse-head,
:root[data-theme="daylight"] .dlv-pulse-neck { stroke: var(--raised); }
:root[data-theme="daylight"] .dlv-pulse-head { filter: drop-shadow(0 0 1.5px var(--serious)) drop-shadow(0 0 6px var(--serious)); }
:root[data-theme="daylight"] .dlv-pulse-tail { stroke: var(--serious); opacity: .55; }

/* ---- sessions ----------------------------------------------------------------------- */
.dlv-node { cursor: pointer; transition: opacity .35s ease; }
.dlv-node:focus { outline: none; }
/* only the text inside the orb is centred by CSS: the lines under it carry their own
   text-anchor, set by the layout, and a CSS rule would override that attribute */
.dlv-orb-spid, .dlv-orb-cap { text-anchor: middle; }
.dlv-orb-core { fill: var(--surface-2); }
.dlv-orb-ring { fill: var(--tone-bg); stroke: var(--tone); stroke-width: 2.6; }
.dlv-orb-halo { fill: none; stroke: var(--tone); stroke-width: 1.4; opacity: 0; }
.dlv-orb-spid { font-family: var(--mono); font-size: 18px; font-weight: 700; fill: var(--text); }
.dlv-orb-cap { font-size: 8px; font-weight: 700; letter-spacing: .1em; fill: var(--text-3); }
.dlv-orb-app, .dlv-orb-sub, .dlv-orb-st, .dlv-res-kind, .dlv-res-obj, .dlv-res-idx {
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round;
}
.dlv-res-kind, .dlv-res-obj, .dlv-res-idx { stroke: var(--surface-2); }
.dlv-orb-app { font-size: 12px; font-weight: 650; fill: var(--text); }
.dlv-orb-sub { font-size: 10.5px; fill: var(--text-3); }
.dlv-orb-st { font-size: 11px; font-weight: 700; fill: var(--tone); }
.dlv-crack { fill: none; stroke: var(--critical); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.dlv-bdg-dot { fill: var(--surface-2); stroke: var(--tone); stroke-width: 1.6; }
.dlv-bdg-ink { fill: none; stroke: var(--tone); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.dlv-orb.is-cycle .dlv-orb-halo,
.dlv-orb.is-focus .dlv-orb-halo { opacity: .85; filter: drop-shadow(0 0 5px var(--tone)); }
.dlv-orb.is-cycle .dlv-orb-ring { filter: drop-shadow(0 0 6px var(--tone-bd)); }
/* the victim's ring: dashed, critical, with the cross badge */
.dlv-orb.s-victim .dlv-orb-halo,
.dlv-orb.s-cancelled .dlv-orb-halo { opacity: 1; stroke-width: 2; stroke-dasharray: 5 4; filter: none; }
.dlv-orb.s-victim .dlv-orb-core, .dlv-orb.s-victim .dlv-orb-ring,
.dlv-orb.s-cancelled .dlv-orb-core, .dlv-orb.s-cancelled .dlv-orb-ring { opacity: .62; }
.dlv-orb.s-victim .dlv-orb-spid, .dlv-orb.s-cancelled .dlv-orb-spid { fill: var(--critical); }
.dlv-orb.s-carried .dlv-orb-halo { opacity: .6; }
.dlv-orb.s-waiting .dlv-orb-ring, .dlv-orb.s-stuck .dlv-orb-ring { stroke-dasharray: 5 3.5; }
.dlv-orb.s-waiting .dlv-orb-core { opacity: .78; }
.dlv-orb.s-idle, .dlv-res.s-idle { opacity: .32; }
.dlv-orb.is-sel .dlv-orb-halo,
.dlv-node:focus-visible .dlv-orb-halo { opacity: 1; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: none; filter: none; }
.dlv-orb:hover .dlv-orb-ring { stroke-width: 3.4; }

/* ---- locks -------------------------------------------------------------------------- */
.dlv-res-box { fill: var(--surface-2); stroke: var(--tone-bd); stroke-width: 1.5; stroke-linejoin: round; }
.dlv-res-halo { fill: none; stroke: var(--tone); stroke-width: 1.4; stroke-linejoin: round; opacity: 0; }
.dlv-res-disc { fill: var(--tone-bg); stroke: var(--tone-bd); stroke-width: 1; }
.dlv-res.is-cycle .dlv-res-box { stroke: var(--tone); }
.dlv-res.is-cycle .dlv-res-halo,
.dlv-res.is-focus .dlv-res-halo { opacity: .8; filter: drop-shadow(0 0 5px var(--tone)); }
.dlv-res.is-sel .dlv-res-halo,
.dlv-res:focus-visible .dlv-res-halo { opacity: 1; stroke: var(--accent); stroke-width: 2.2; filter: none; }
.dlv-res:hover .dlv-res-box { stroke: var(--tone); }
.dlv-ico-line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dlv-ico-body { fill: var(--tone-bg); stroke: var(--tone); stroke-width: 1.8; }
.dlv-ico-hole { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; }
.dlv-res-kind { font-size: 8.6px; font-weight: 700; letter-spacing: .09em; fill: var(--tone); }
.dlv-res-obj { font-size: 13.5px; font-weight: 650; fill: var(--text); }
.dlv-res-idx { font-family: var(--mono); font-size: 10px; fill: var(--text-3); }

/* ---- the badge in the middle of the loop -------------------------------------------- */
.dlv-badge-box { fill: var(--surface-2); stroke: var(--tone); stroke-width: 1.6; filter: drop-shadow(0 0 7px var(--tone-bd)); }
.dlv-badge-ico { fill: none; stroke: var(--tone); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dlv-badge-t { font-size: 12px; font-weight: 800; letter-spacing: .16em; fill: var(--tone); text-anchor: middle; dominant-baseline: middle; }
.dlv-badge-sub {
  font-size: 10.5px; fill: var(--text-3); text-anchor: middle;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round;
}

/* ---- the story caption -------------------------------------------------------------- */
.dlv-cap {
  flex: 0 0 auto; margin: 0; padding: 9px 12px 10px;
  background: var(--surface-2); border: 1px solid var(--tone-bd); border-left: 3px solid var(--tone);
  border-radius: var(--r-s); min-width: 0;
}
.dlv-cap:focus { outline: none; }
.dlv-cap:focus-visible { box-shadow: 0 0 0 2px var(--accent-bd); }
.dlv-cap-top { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 3px; }
.dlv-cap-n {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tone); white-space: nowrap;
}
.dlv-cap-ph { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dlv-cap-t {
  font-size: 14px; font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-cap-x { font-size: 12px; line-height: 1.5; color: var(--text-2); margin-top: 2px; }
.dlv-cap-sql {
  font-family: var(--mono); font-size: var(--fs-small); color: var(--text-3); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-cap-dots { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.dlv-dot {
  flex: 0 0 auto; width: 9px; height: 9px; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border-2); background: transparent;
  transition: width .25s ease, background .25s ease;
}
.dlv-dot.is-done { background: var(--tone-bd); border-color: var(--tone-bd); }
.dlv-dot.is-on { width: 22px; background: var(--tone); border-color: var(--tone); }
.dlv-dot:focus { outline: none; }
.dlv-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dlv-cap-timer {
  flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--tone-bd);
  transform-origin: 0 50%;
  animation-name: dlv-timer; animation-timing-function: linear; animation-fill-mode: both;
}

/* ---- legend ------------------------------------------------------------------------- */
.dlv-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  font-size: var(--fs-small); color: var(--text-3); padding: 0 2px;
}
.dlv-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dlv-lg b { color: var(--tone); font-weight: 800; }
.dlv-lg-sw { width: 28px; height: 10px; flex: 0 0 auto; overflow: visible; }
.dlv-lg-hold { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.dlv-lg-hold-a { fill: var(--accent); }
.dlv-lg-wait { fill: none; stroke: var(--warning); stroke-width: 2.2; stroke-dasharray: 4 3; }
.dlv-lg-wait-a { fill: var(--warning); }
.dlv-lg-loop { fill: none; stroke: var(--serious); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--serious)); }

/* ---- details panel ------------------------------------------------------------------ */
.dlv-panel {
  min-width: 0; max-height: calc(var(--dlv-h, 520px) + 40px); overflow: auto;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-s);
  padding: 12px 14px;
}
.dlv-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dlv-sec { min-width: 0; }
.dlv-sec-h {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); }
.dlv-lead { font-size: 12.5px; color: var(--text); }
.dlv-hint { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.dlv-advice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; counter-reset: dlv-adv; }
.dlv-advice li {
  position: relative; counter-increment: dlv-adv; min-width: 0;
  padding: 8px 10px 8px 34px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-xs);
}
.dlv-advice li::before {
  content: counter(dlv-adv);
  position: absolute; left: 9px; top: 8px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-bd);
}
.dlv-adv-t {
  font-size: var(--fs-body); font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-adv-x { margin-top: 2px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }

.dlv-dh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dlv-dh-orb, .dlv-dh-lock {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--tone); background: var(--tone-bg); border: 1.5px solid var(--tone);
}
.dlv-dh-lock { border-radius: 7px; }
.dlv-dh-lock svg { overflow: visible; }
.dlv-dh-t {
  font-size: 13px; font-weight: 650; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-tag {
  flex: 0 0 auto; max-width: 48%;
  font-size: var(--fs-micro); font-weight: 700; line-height: 17px; padding: 0 7px;
  color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone-bd); border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-x {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer;
  font-size: 12px; line-height: 1; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
}
.dlv-x:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.dlv-x:focus { outline: none; }
.dlv-x:focus-visible { outline: 2px solid var(--accent); }

.dlv-dl { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dlv-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; }
.dlv-row dt {
  font-size: var(--fs-small); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-row dd { margin: 0; min-width: 0; }
.dlv-v {
  font-size: var(--fs-body); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-v.is-wrap { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.45; }
.dlv-note { margin-top: 1px; font-size: var(--fs-small); line-height: 1.45; color: var(--text-3); }

.dlv-code {
  margin: 0; max-height: 180px; overflow: auto;
  font-family: var(--mono); font-size: var(--fs-small); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--code-fg, var(--text)); background: var(--code-bg, var(--surface-3));
  border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 8px 10px;
}
.dlv-frames { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dlv-frames li { min-width: 0; padding-left: 10px; border-left: 2px solid var(--border-2); }
.dlv-fr-h { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.dlv-fr-p {
  font-family: var(--mono); font-size: var(--fs-small); color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-fr-l { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; flex: 0 0 auto; }
.dlv-fr-x {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlv-mode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; margin-bottom: 7px; }
.dlv-mode-k {
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 17px; padding: 0 6px;
  color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone-bd); border-radius: 4px;
  white-space: nowrap;
}
.dlv-mode-w { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.dlv-mode-x { flex: 1 1 100%; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }

.dlv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dlv-step-b {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  font-family: var(--font); font-size: var(--fs-body); text-align: left; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  padding: 5px 7px; cursor: pointer;
}
.dlv-step-b:hover { background: var(--surface-2); color: var(--text-2); }
.dlv-step-b:focus { outline: none; }
.dlv-step-b:focus-visible { outline: 2px solid var(--accent); }
.dlv-step.is-done .dlv-step-b { color: var(--text-2); }
.dlv-step.is-on .dlv-step-b { color: var(--text); background: var(--tone-bg); border-color: var(--tone-bd); }
.dlv-step-n {
  flex: 0 0 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--tone); border: 1px solid var(--tone-bd);
}
.dlv-step.is-done .dlv-step-n, .dlv-step.is-on .dlv-step-n { background: var(--tone-bg); border-color: var(--tone); }
.dlv-step-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- a graph that cannot be drawn ---------------------------------------------------- */
.dlv-err {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: var(--critical-bg); border: 1px solid var(--critical-bd); border-radius: var(--r-s);
}
.dlv-err-g {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  color: var(--tone); border: 1.5px solid var(--tone);
}
.dlv-err-body { min-width: 0; }
.dlv-err-t { font-size: 13px; font-weight: 650; color: var(--text); }
.dlv-err-x { margin-top: 2px; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }

/* ---- motion ------------------------------------------------------------------------- */
@keyframes dlv-march { from { stroke-dashoffset: 13; } to { stroke-dashoffset: 0; } }
@keyframes dlv-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes dlv-fade-in { from { opacity: 0; } }
@keyframes dlv-fade-away { from { opacity: 1; } to { opacity: 0; } }
@keyframes dlv-fade-to { from { opacity: .95; } to { opacity: .3; } }
@keyframes dlv-dissolve { from { opacity: .95; stroke-width: 3.2; } to { opacity: .3; stroke-width: 1.6; } }
@keyframes dlv-flash { 0%, 100% { stroke-width: 3.2; } 45% { stroke-width: 7.5; } }
@keyframes dlv-pop { 0% { transform: scale(.35); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dlv-shake {
  0%, 100% { transform: translateX(0); } 18% { transform: translateX(-4px); } 36% { transform: translateX(4px); }
  54% { transform: translateX(-3px); } 72% { transform: translateX(2px); }
}
@keyframes dlv-sink { from { opacity: 1; } to { opacity: .62; } }
@keyframes dlv-ping { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes dlv-dim { from { opacity: 1; } to { opacity: .78; } }
@keyframes dlv-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes dlv-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* a dash of length L ends at p when its offset is L - p; p runs 0 -> 100 */
@keyframes dlv-run-6 { from { stroke-dashoffset: 6; } to { stroke-dashoffset: -94; } }
@keyframes dlv-run-11 { from { stroke-dashoffset: 11; } to { stroke-dashoffset: -89; } }
@keyframes dlv-run-4 { from { stroke-dashoffset: 4; } to { stroke-dashoffset: -96; } }
@keyframes dlv-run-03 { from { stroke-dashoffset: .3; } to { stroke-dashoffset: -99.7; } }

/* the pulse: its duration is set inline from the size of the loop, so longhands only */
.dlv-svg.is-animating .dlv-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
.dlv-svg.is-animating .dlv-pulse-glow { animation-name: dlv-run-6; }
.dlv-svg.is-animating .dlv-pulse-tail { animation-name: dlv-run-11; }
.dlv-svg.is-animating .dlv-pulse-neck { animation-name: dlv-run-4; }
.dlv-svg.is-animating .dlv-pulse-head { animation-name: dlv-run-03; }

/* waits march towards what they want */
.dlv-svg.is-animating .dlv-edge.k-waits:not(.st-conv):not(.st-gone) .dlv-line {
  animation-name: dlv-march; animation-duration: .9s; animation-timing-function: linear; animation-iteration-count: infinite;
}
/* the loop breathes in the finished picture */
.dlv-svg.is-animating.is-whole .dlv-node.is-cycle .dlv-orb-halo,
.dlv-svg.is-animating.is-whole .dlv-node.is-cycle .dlv-res-halo { animation: dlv-breathe 2.6s ease-in-out infinite; }

/* story: a new hold draws itself from the lock to its owner */
.dlv-svg.is-animating .dlv-edge.k-holds.st-new .dlv-line { stroke-dasharray: 100 100; animation: dlv-draw .9s ease-out both; }
.dlv-svg.is-animating .dlv-edge.k-holds.st-new .dlv-arrow { animation: dlv-fade-in .3s .7s both; }
/* a new request fades in and starts marching */
.dlv-svg.is-animating .dlv-edge.k-waits.st-new { animation: dlv-fade-in .6s ease-out both; }
/* the moment the loop closes */
.dlv-svg.is-animating .dlv-edge.k-holds.is-flash .dlv-line { animation: dlv-flash .7s .5s ease-in-out 3 both; }
.dlv-svg.is-animating .dlv-edge.k-waits.is-flash .dlv-line {
  animation-name: dlv-march, dlv-flash; animation-duration: .9s, .7s; animation-delay: 0s, .5s;
  animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, 3;
}
.dlv-svg.is-animating .dlv-badge.is-now .dlv-badge-body {
  transform-box: fill-box; transform-origin: center;
  animation: dlv-pop .55s .6s cubic-bezier(.2, .8, .3, 1.2) both;
}
.dlv-svg.is-animating .dlv-badge.is-now .dlv-badge-sub { animation: dlv-fade-in .4s 1s both; }
/* "resolved" arrives once the victim has been dealt with */
.dlv-svg.is-animating .dlv-badge.t-ok.is-now .dlv-badge-body { animation-delay: 1.4s; }
.dlv-svg.is-animating .dlv-badge.t-ok.is-now .dlv-badge-sub { animation-delay: 1.8s; }
/* the victim: shakes, cracks, fades; its locks dissolve */
.dlv-svg.is-animating .dlv-orb.is-now.s-victim .dlv-orb-body,
.dlv-svg.is-animating .dlv-orb.is-now.s-cancelled .dlv-orb-body {
  transform-box: fill-box; transform-origin: center; animation: dlv-shake .5s ease-in-out both;
}
.dlv-svg.is-animating .dlv-orb.is-now.s-victim .dlv-crack,
.dlv-svg.is-animating .dlv-orb.is-now.s-cancelled .dlv-crack { stroke-dasharray: 100 100; animation: dlv-draw .45s .45s ease-out both; }
.dlv-svg.is-animating .dlv-orb.is-now.s-victim .dlv-orb-core,
.dlv-svg.is-animating .dlv-orb.is-now.s-victim .dlv-orb-ring,
.dlv-svg.is-animating .dlv-orb.is-now.s-cancelled .dlv-orb-core,
.dlv-svg.is-animating .dlv-orb.is-now.s-cancelled .dlv-orb-ring { animation: dlv-sink .9s .8s both; }
.dlv-svg.is-animating .dlv-orb.is-now .dlv-orb-st { animation: dlv-fade-in .4s .9s both; }
.dlv-svg.is-animating .dlv-edge.st-gone .dlv-line { animation: dlv-dissolve 1.1s .7s ease-in both; }
.dlv-svg.is-animating .dlv-edge.st-gone .dlv-arrow { animation: dlv-fade-to .6s 1.2s ease-in both; }
.dlv-svg.is-animating .dlv-elab.st-gone { animation: dlv-fade-in .4s 1.4s both; }
/* the survivor's wait turns into a hold, and it carries on */
.dlv-svg.is-animating .dlv-edge.st-conv .dlv-line-was { animation: dlv-fade-away .6s 1.5s both; }
.dlv-svg.is-animating .dlv-edge.st-conv .dlv-line-now { stroke-dasharray: 100 100; animation: dlv-draw .9s 1.8s ease-out both; }
.dlv-svg.is-animating .dlv-edge.st-conv .dlv-arrow-now { animation: dlv-fade-in .3s 2.5s both; }
.dlv-svg.is-animating .dlv-elab.st-conv { animation: dlv-fade-in .4s 2.2s both; }
.dlv-svg.is-animating .dlv-orb.is-now.s-carried .dlv-orb-body {
  transform-box: fill-box; transform-origin: center; animation: dlv-ping .7s 2.5s ease-out both;
}
.dlv-svg.is-animating .dlv-orb.is-now.s-carried .dlv-orb-st { animation: dlv-fade-in .4s 2.5s both; }
/* a session that has to wait dims */
.dlv-svg.is-animating .dlv-orb.is-now.s-waiting .dlv-orb-core { animation: dlv-dim .6s .3s both; }
.dlv-svg.is-animating .dlv-orb.is-now.s-holding .dlv-orb-body {
  transform-box: fill-box; transform-origin: center; animation: dlv-ping .6s .6s ease-out both;
}

/* Off means off: data-motion="off", or the OS asking for less unless the page says "on".
   Every resting style above is the final state, so nothing is lost but the movement. */
:root[data-motion="off"] .dlv *,
:root[data-motion="off"] .dlv *::before,
:root[data-motion="off"] .dlv *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .dlv *,
  :root:not([data-motion="on"]) .dlv *::before,
  :root:not([data-motion="on"]) .dlv *::after { animation: none !important; transition: none !important; }
}