/* Ontology "Example runs" timeline (logs/2026-10-11_RT_SUBTABS_VISUAL_PLAN.md, T3).
   One held-out run, call by call. Motion only ever runs while the root carries .rt-onto-motion, so the idle, paused
   and reduced-motion states are the complete static picture. Below 600 px the timeline turns vertical.
   index.html still ships a legacy block for these classes (lines 343-357) in a <style> that loads AFTER this file with
   equal specificity, so every rule that would lose that tie is scoped by .rt-onto-run (or deeper) instead of relying on
   source order. */

/* Root and head */
.rt-onto-run .rt-onto-run-head{align-items:center}
.rt-onto-run .rt-onto-run-replay{margin-left:auto}
.rt-onto-run .rt-onto-ic{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-1px}

/* Timeline: the user task bubble, then one card per call, one connector between each adjacent pair of calls */
.rt-onto-run .rt-onto-timeline{display:flex;flex-wrap:wrap;gap:26px;align-items:stretch;margin:12px 0 2px}
.rt-onto-run .rt-onto-task{position:relative;flex:0 1 230px;min-width:180px;background:var(--lav);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.rt-onto-run .rt-onto-task-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue2)}
.rt-onto-run .rt-onto-task-t{margin:4px 0 0;font-size:12.5px;color:var(--ink)}
.rt-onto-run .rt-onto-calls{display:flex;flex-wrap:nowrap;gap:26px;list-style:none;margin:0;padding:0;flex:1 1 340px;min-width:0}
.rt-onto-run .rt-onto-call{position:relative;flex:1 1 190px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:9px 11px}
.rt-onto-run .rt-onto-call.flagged{border-color:var(--red);background:var(--red-bg)}
.rt-onto-run .rt-onto-call.flagged::after{content:"";position:absolute;inset:-1px;border-radius:12px;pointer-events:none}
/* One connector per adjacent pair, on the later card: in the gap on its left (pointing right at it), no connector
   before the first card and none after the last. */
.rt-onto-run .rt-onto-connector{position:absolute;top:50%;left:-19px;width:8px;height:8px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:translateY(-50%) rotate(45deg);pointer-events:none}

.rt-onto-run .rt-onto-call-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.rt-onto-run .rt-onto-call-head>code{font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere;min-width:0}
.rt-onto-run .rt-onto-head-io{display:inline-flex;gap:8px;align-items:center;flex:none}
.rt-onto-run .rt-onto-io{display:inline-flex;gap:4px;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rt-onto-run .rt-onto-io-ic{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rt-onto-run .rt-onto-call-body .rt-onto-why{font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
.rt-onto-run .rt-onto-src{overflow-wrap:anywhere}
.rt-onto-run .rt-onto-task-t,.rt-onto-run .rt-onto-args{overflow-wrap:anywhere}

/* Motion: cards light up one after another, the alert pulses once, then the chain's labels appear in turn */
@keyframes rt-onto-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rt-onto-fade{from{opacity:0}to{opacity:1}}
@keyframes rt-onto-pulse{from{box-shadow:0 0 0 0 rgba(197,69,69,.5)}to{box-shadow:0 0 0 16px rgba(197,69,69,0)}}
.rt-onto-motion .rt-onto-calls>.rt-onto-call{animation:rt-onto-rise .38s ease-out both}
.rt-onto-motion .rt-onto-calls>.rt-onto-call:nth-child(2){animation-delay:.12s}
.rt-onto-motion .rt-onto-calls>.rt-onto-call:nth-child(3){animation-delay:.24s}
.rt-onto-motion .rt-onto-calls>.rt-onto-call:nth-child(4){animation-delay:.36s}
.rt-onto-motion .rt-onto-calls>.rt-onto-call:nth-child(n+5){animation-delay:.48s}
.rt-onto-motion .rt-onto-call.flagged::after{animation:rt-onto-pulse .8s ease-out .55s 1}
.rt-onto-motion .rt-onto-chain li{animation:rt-onto-rise .3s ease-out both}
.rt-onto-motion .rt-onto-chain li:nth-child(1){animation-delay:.7s}
.rt-onto-motion .rt-onto-chain li:nth-child(2){animation-delay:.9s}
.rt-onto-motion .rt-onto-chain li:nth-child(3){animation-delay:1.1s}
.rt-onto-motion .rt-onto-src{animation:rt-onto-fade .4s ease-out 1.35s both}
/* A rule change replays only the chain */
.rt-onto-motion-chain .rt-onto-chain li{animation:rt-onto-rise .3s ease-out both}
.rt-onto-motion-chain .rt-onto-chain li:nth-child(1){animation-delay:.05s}
.rt-onto-motion-chain .rt-onto-chain li:nth-child(2){animation-delay:.25s}
.rt-onto-motion-chain .rt-onto-chain li:nth-child(3){animation-delay:.45s}
.rt-onto-motion-chain .rt-onto-src{animation:rt-onto-fade .4s ease-out .65s both}
/* Defence in depth: even if a motion class were left on, nothing animates under reduced motion (js/rt-onto-run.js
   also refuses to start one, so the complete end state is what renders). */
@media(prefers-reduced-motion:reduce){
  .rt-onto-run .rt-onto-calls>.rt-onto-call,
  .rt-onto-run .rt-onto-call.flagged::after,
  .rt-onto-run .rt-onto-chain li,
  .rt-onto-run .rt-onto-src{animation:none!important}
}

/* Stacked rows: the task takes the full width, the calls keep their own row */
@media(max-width:900px){
  .rt-onto-run .rt-onto-task{flex:1 1 100%}
}
/* Narrow: the timeline turns vertical and every connector points down into the card it belongs to */
@media(max-width:600px){
  .rt-onto-run .rt-onto-timeline{flex-direction:column;gap:22px}
  .rt-onto-run .rt-onto-task{flex:none}
  .rt-onto-run .rt-onto-calls{flex-direction:column;flex:none;gap:22px}
  .rt-onto-run .rt-onto-call{flex:none}
  .rt-onto-run .rt-onto-connector{top:-19px;left:50%;transform:translateX(-50%) rotate(135deg)}
}