/* Sentinel v2 - run.css
   The analysis run: loom, stage ladder, ETA range, previous run readable, findings fly-in, run dock, favicon ring.
   Owned by the 'run' area of the v2 redesign; tokens come from v2/tokens.css (every v2 token below falls back to the
   pre-v2 name, so this sheet reads right before and after the tokens area lands).

   Motion: the loops here (the beam's glide, the threads, the last wait's sweep) run only on `.is-live`, which the
   ambient registry adds while the loom is on screen in a visible tab. Motion is always on (the owner, 2026-10-15):
   nothing here turns them off for a level or for the operating system's reduced-motion setting. */

.v2-loom, .v2-rundock, .v2-fly-layer {
  --lm-brand: var(--brand, var(--accent, #1a2fe6));
  --lm-brand-soft: color-mix(in srgb, var(--lm-brand) 12%, transparent);
  --lm-ink: var(--ink-1, var(--text-primary, #14171c));
  --lm-ink-2: var(--ink-2, var(--text-secondary, #3d4450));
  --lm-ink-3: var(--ink-3, var(--text-muted, #5f6874));
  --lm-line: var(--line-2, var(--border-subtle, rgba(0, 0, 0, .1)));
  --lm-surface: var(--surface-1, var(--bg-pane, #fff));
  --lm-sunken: var(--surface-sunken, var(--bg-sunken, rgba(0, 0, 0, .04)));
  --lm-ok: var(--ok, var(--severity-success, #15803d));
  --lm-crit: var(--sev-critical, var(--severity-critical, #9f1239));
  --lm-high: var(--sev-high, var(--severity-high, #c2410c));
  --lm-med: var(--sev-medium, var(--severity-medium, #a16207));
  --lm-low: var(--sev-low, var(--severity-low, #5c6571));
  --lm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   THE LOOM
============================================================ */
/* TALL ENOUGH FOR THE SIDE COLUMN (head, bar, the six-step ladder, the story, the time, the foot with Stop): at 460px the
   foot's Stop was cut by the card's edge (the live check, 2026-10-15). A side column longer still - a two-line story, a
   second reading - scrolls inside the loom instead of being clipped. */
#issuesGridWrap.is-scanning { min-height: 520px; }
#issuesGridWrap.is-scanning .detect-empty { display: none; }

.detect-runtime.v2-loom {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.05fr);
  gap: 28px;
  padding: 22px 24px;
  border: 1px solid var(--lm-line);
  border-radius: 14px;
  background: var(--lm-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lm-ink) 6%, transparent);
  color: var(--lm-ink);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  pointer-events: none;
  backdrop-filter: none;
}
.v2-loom button { pointer-events: auto; }
.v2-loom.is-inline { position: relative; inset: auto; min-height: 360px; }
.v2-loom.is-compact {
  position: relative; inset: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px; padding: 0; border: 0; box-shadow: none; background: transparent;
}

.lm-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detect-runtime.v2-loom:not(.is-inline):not(.is-compact) { grid-template-rows: minmax(0, 1fr); }
.detect-runtime.v2-loom:not(.is-inline):not(.is-compact) .lm-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: 6px; margin-inline: -6px; }
/* ROOM FOR THE STEP'S ORB (SNT-153, the owner 2026-10-16: "the spheres are being cut by left and right edges"): the current
   step's orb (20-22 px) is drawn on its 14 px tick, so it stands 3-4 px out of the ladder's box. A column that scrolls clips
   both ways (overflow-y makes overflow-x clip too) and the compact loom has no inset, so the orb lost its left side. Each
   clipping box is widened by 6 px each way and its content kept where it was. */
.v2-loom.is-compact { padding-inline: 6px; margin-inline: -6px; }

.lm-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lm-mark { width: 28px; height: 28px; flex: none; color: var(--lm-brand); }
.lm-mark path { transform-box: fill-box; transform-origin: 50% 50%; }
.v2-loom.is-live:not(.is-ready):not(.is-error) .lm-mark path:nth-child(1) { animation: lmBlade 3.2s var(--lm-ease) infinite; }
.v2-loom.is-live:not(.is-ready):not(.is-error) .lm-mark path:nth-child(2) { animation: lmBlade 3.2s var(--lm-ease) .4s infinite; }
.v2-loom.is-live:not(.is-ready):not(.is-error) .lm-mark path:nth-child(3) { animation: lmBlade 3.2s var(--lm-ease) .8s infinite; }
@keyframes lmBlade { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }
.lm-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.lm-name {
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--lm-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-stage { font-size: 13px; line-height: 18px; color: var(--lm-ink-3); }
.lm-pct {
  flex: none; font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 13px; color: var(--lm-ink-2); font-variant-numeric: tabular-nums;
}

.lm-bar { height: 4px; border-radius: 999px; background: var(--lm-line); overflow: hidden; }
.lm-fill {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: var(--lm-brand);
  transform-origin: left center; transform: scaleX(.01);
  transition: transform 1s linear, background-color .3s;
}
.v2-loom.is-ready .lm-fill { background: var(--lm-ok); }
.v2-loom.is-error .lm-fill { background: var(--lm-crit); }

.lm-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lm-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 24px; color: var(--lm-ink-3);
  transition: color .16s ease-out;
}
.lm-tick {
  position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--lm-line);
  transition: border-color .16s ease-out, background-color .16s ease-out;
}
.lm-step.is-done { color: var(--lm-ink-2); }
.lm-step.is-done .lm-tick { border-color: var(--lm-ok); background: var(--lm-ok); }
.lm-step.is-done .lm-tick::after {
  content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3.5px; height: 6.5px;
  border: solid var(--lm-surface); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg);
}
.lm-step.is-now { color: var(--lm-ink); font-weight: 600; }
.lm-step.is-now .lm-tick { border-color: var(--lm-brand); background: var(--lm-brand-soft); }
.v2-loom.is-live .lm-step.is-now .lm-tick { border-top-color: transparent; animation: lmSpin .9s linear infinite; }
@keyframes lmSpin { to { transform: rotate(360deg); } }

.v2-loom .dr-story { display: grid; gap: 4px; min-width: 0; max-width: none; justify-content: stretch; }
.v2-loom .dr-msg {
  font-size: 13px; line-height: 19px; font-weight: 400; color: var(--lm-ink-2); min-height: 19px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.v2-loom .dr-msg.is-swap { animation: lmSwap .18s ease-out; }
@keyframes lmSwap { from { opacity: 0; } to { opacity: 1; } }
.v2-loom .dr-sub { font-size: 12px; color: var(--lm-ink-3); font-variant-numeric: tabular-nums; }
.v2-loom .dr-sub:empty { display: none; }
.v2-loom .dr-pass {
  justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lm-brand); background: var(--lm-brand-soft); border-radius: 999px; padding: 2px 9px;
}
.v2-loom[data-phase="error"] .dr-msg { color: var(--lm-crit); }

.lm-eta {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--lm-ink-3); font-variant-numeric: tabular-nums;
}
.lm-left:empty { display: none; }
.lm-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--lm-line);
  font-size: 12px; line-height: 16px; color: var(--lm-ink-3);
}
.lm-notify {
  font: inherit; font-size: 12px; font-weight: 550; color: var(--lm-ink-2);
  padding: 5px 10px; min-height: 28px; border-radius: 6px; border: 1px solid var(--lm-line);
  background: transparent; cursor: pointer;
}
.lm-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-foot.is-compact { justify-content: flex-end; }
.lm-foot.is-compact:not(:has(.lm-stop:not([hidden]))) { display: none; }
/* THE STOP BUTTON: quiet until pointed at - it ends work the reader asked for - and never the brand colour */
.lm-stop {
  font: inherit; font-size: 12px; font-weight: 550; color: var(--lm-ink-2);
  padding: 5px 10px; min-height: 28px; border-radius: 6px; border: 1px solid var(--lm-line);
  background: transparent; cursor: pointer;
}
.lm-stop[hidden] { display: none; }
.lm-stop:hover:not(:disabled) { border-color: var(--severity-high, #c2410c); color: var(--severity-high, #c2410c); }
.lm-stop:disabled { opacity: .6; cursor: default; }
.lm-stop:focus-visible { outline: 2px solid var(--focus, var(--lm-brand)); outline-offset: 2px; }
.lm-notify:hover { border-color: var(--lm-brand); color: var(--lm-brand); }
.lm-notify[aria-pressed="true"] { color: var(--lm-brand); border-color: color-mix(in srgb, var(--lm-brand) 40%, transparent); background: var(--lm-brand-soft); }
.lm-notify:focus-visible, .rd-main:focus-visible, .rd-more:focus-visible, .rd-retry:focus-visible {
  outline: 2px solid var(--focus, var(--lm-brand)); outline-offset: 2px;
}

/* --- the document as section bars ------------------------------------------ */
.v2-loom .dr-map { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.v2-loom .dr-doc {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border: 1px solid var(--lm-line); border-radius: 10px;
  background: var(--bg-doc, var(--lm-surface)); overflow: hidden; box-shadow: none;
}
.v2-loom .dr-sec {
  position: relative; flex: var(--w, 2) 1 0px; min-height: 12px; max-height: 44px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  border-radius: 4px; background: var(--lm-sunken); overflow: hidden; height: auto;
  animation: lmSecIn .28s var(--lm-ease) both; animation-delay: calc(var(--i, 0) * 24ms);
}
@keyframes lmSecIn { from { opacity: 0; } to { opacity: 1; } }
.v2-loom .dr-sec.is-ghost { opacity: .6; animation: lmSecIn .28s var(--lm-ease) both; }
.v2-loom .dr-sec-fill {
  position: absolute; inset: 0; width: 100%; border-radius: inherit;
  background: color-mix(in srgb, var(--lm-ink-3) 16%, var(--lm-sunken));
  transform-origin: left center; transform: scaleX(0);
  transition: transform .7s var(--lm-ease), background-color .4s ease-out;
}
.v2-loom .dr-sec.is-read .dr-sec-fill { width: 100%; transform: scaleX(1); }
.v2-loom .dr-sec.is-checked .dr-sec-fill { background: color-mix(in srgb, var(--lm-brand) 20%, var(--lm-sunken)); }
.v2-loom .dr-sec-name {
  position: relative; z-index: 1; min-width: 0; flex: 1 1 auto;
  font-size: 11.5px; line-height: 14px; color: var(--lm-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-loom .dr-sec-label {
  position: relative; z-index: 1; right: auto; top: auto; transform: none; margin-left: auto; flex: none;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 11px; color: var(--lm-ink-3);
}
.v2-loom .dr-sec.is-read .dr-sec-name, .v2-loom .dr-sec.is-read .dr-sec-label { color: var(--lm-ink-2); }

/* the reading head: a full-height track moved by translateY(% of the document), so the compositor carries it */
.v2-loom .dr-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  pointer-events: none; opacity: 0; background: none; box-shadow: none;
  transform: translateY(0%);
  transition: transform 1s linear, opacity .3s ease-out;
}
.v2-loom .dr-beam::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: -14px; height: 14px;
  background: linear-gradient(180deg, transparent, var(--lm-brand-soft));
}
.v2-loom .dr-beam::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 2px; border-radius: 2px;
  background: var(--lm-brand);
}
.v2-loom .dr-beam.is-check::after { background: color-mix(in srgb, var(--lm-brand) 70%, var(--lm-ok)); }
.v2-loom .dr-beam.is-on { opacity: 1; }

/* the checking phase breathes over the read document; the simulation runs threads over it */
.v2-loom.is-live[data-phase="checking"] .dr-doc { animation: drCheck 1.4s ease-in-out infinite; }
@keyframes drCheck {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px var(--lm-brand-soft); }
}
.v2-loom.is-live[data-phase="simulating"] .dr-sec.is-read .dr-sec-fill,
.v2-loom.is-live[data-phase="weighing"] .dr-sec.is-read .dr-sec-fill {
  background-image: linear-gradient(100deg, transparent 32%,
    color-mix(in srgb, var(--lm-brand) 18%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: drThread 1.8s linear infinite;
}
@keyframes drThread { from { background-position: 130% 0; } to { background-position: -60% 0; } }
/* THE LAST WAIT - the stream said `done` and the report is still on its way. The run has not ended, so the document
   keeps breathing and the read sections keep their thread until the report is in hand. */
.v2-loom.is-live.is-finishing .dr-doc { animation: drCheck 1.4s ease-in-out infinite; }
.v2-loom.is-live.is-finishing .dr-sec-fill {
  background-image: linear-gradient(100deg, transparent 32%,
    color-mix(in srgb, var(--lm-brand) 18%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: drThread 1.8s linear infinite;
}
.v2-loom.is-live.is-finishing .lm-fill {
  background-image: linear-gradient(100deg, transparent 28%,
    color-mix(in srgb, #fff 46%, transparent) 50%, transparent 72%);
  background-size: 240% 100%;
  animation: rpnSweep 1.4s linear infinite;
}
@keyframes rpnSweep { from { background-position: 140% 0; } to { background-position: -60% 0; } }

/* one pip per scenario, filled as each completes */
.v2-loom .dr-pips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
.v2-loom .dr-pips[hidden] { display: none; }
.v2-loom .dr-pip {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--lm-brand) 45%, var(--lm-line)); background: transparent;
  transition: background-color .25s ease-out;
}
.v2-loom .dr-pip.is-done { background: var(--lm-brand); border-color: var(--lm-brand); }

/* findings drop onto the section that carries them */
.v2-loom .dr-markers { position: absolute; inset: 0; pointer-events: none; }
.v2-loom .dr-marker {
  position: absolute; right: 4px; width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%); border: 2px solid var(--bg-doc, var(--lm-surface));
  animation: drMarkerPop .4s var(--lm-ease) both;
}
.v2-loom .dr-marker.d-critical { background: var(--lm-crit); }
.v2-loom .dr-marker.d-high     { background: var(--lm-high); }
.v2-loom .dr-marker.d-medium   { background: var(--lm-med); }
.v2-loom .dr-marker.d-low      { background: var(--lm-low); }
@keyframes drMarkerPop { from { transform: translateY(-50%) scale(0); } to { transform: translateY(-50%) scale(1); } }

.v2-loom.is-compact .dr-doc { flex: none; height: 150px; gap: 3px; padding: 8px; }
.v2-loom.is-compact .dr-sec { min-height: 4px; max-height: 16px; padding: 0 6px; }
.v2-loom.is-compact .dr-sec-name, .v2-loom.is-compact .dr-sec-label { display: none; }
.v2-loom.is-compact .lm-head .lm-mark { display: none; }

.v2-loom.is-compact .lm-ladder { grid-template-columns: minmax(0, 1fr); }

/* narrow: the loom stops overlaying the list and takes its own height in the flow; no section map */
@media (max-width: 860px) {
  .detect-runtime.v2-loom { position: relative; inset: auto; grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .detect-runtime.v2-loom:not(.is-compact) .dr-map { display: none; }
  .v2-loom:not(.is-compact) .lm-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .lm-step { font-size: 12.5px; line-height: 22px; }
  #issuesGridWrap.is-scanning { min-height: 0; }
  /* in the flow the loom is as tall as it needs: nothing to scroll */
  .detect-runtime.v2-loom:not(.is-inline):not(.is-compact) { grid-template-rows: none; }
  .detect-runtime.v2-loom:not(.is-inline):not(.is-compact) .lm-side { overflow-y: visible; }
}

/* ============================================================
   THE RUN DOCK (sidebar footer; floating until the shell provides #v2RunDock)
============================================================ */
.v2-rundock { position: relative; font-family: var(--font-ui, Inter, system-ui, sans-serif); color: var(--lm-ink); }
.v2-rundock[hidden] { display: none !important; }
.v2-rundock-float {
  position: fixed; left: 16px; bottom: 16px; width: 248px; z-index: 40;
}
.v2-rundock-float:not(.has-run) { pointer-events: none; }
@media (max-width: 640px) {
  .v2-rundock-float { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.rd-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px;
  padding: 8px 6px 9px 10px; border: 1px solid var(--lm-line); border-radius: 10px;
  background: var(--lm-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--lm-ink) 8%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--lm-ink) 30%, transparent);
  animation: rdIn .22s var(--lm-ease) both;
}
@keyframes rdIn { from { opacity: 0; } to { opacity: 1; } }
.rd-main {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  border-radius: 6px;
}
.rd-ring { position: relative; width: 28px; height: 28px; flex: none; }
.rd-ring svg:not(.rd-mark) { width: 28px; height: 28px; transform: rotate(-90deg); display: block; }
.rd-ring-bg { fill: none; stroke: var(--lm-line); stroke-width: 2.2; }
.rd-ring-fg { fill: none; stroke: var(--lm-brand); stroke-width: 2.2; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.rd-mark { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; color: var(--lm-brand); }
.rd-text { display: grid; min-width: 0; }
.rd-name { font-size: 13px; line-height: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-stage { font-size: 12px; line-height: 16px; color: var(--lm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-more {
  width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--lm-ink-3); cursor: pointer;
}
.rd-more:hover { background: var(--lm-sunken); color: var(--lm-ink); }
.rd-more svg { width: 16px; height: 16px; transition: transform .16s ease-out; }
.rd-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.rd-more[hidden] { display: none; }
.rd-bar { grid-column: 1 / -1; height: 3px; margin: 7px 4px 0 0; border-radius: 999px; background: var(--lm-line); overflow: hidden; }
.rd-fill {
  display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--lm-brand);
  transform-origin: left center; transform: scaleX(.01); transition: transform 1s linear, background-color .3s;
}
.v2-rundock[data-status="ready"] .rd-fill { background: var(--lm-ok); }
.v2-rundock[data-status="ready"] .rd-ring-fg { stroke: var(--lm-ok); }
.v2-rundock[data-status="error"] .rd-fill { background: var(--lm-crit); }
.v2-rundock[data-status="pending"] .rd-fill { background: var(--lm-med); }
/* the last wait: held just short of complete, so it keeps moving without moving */
.v2-rundock.is-finishing .rd-fill {
  background-image: linear-gradient(100deg, transparent 28%,
    color-mix(in srgb, #fff 46%, transparent) 50%, transparent 72%);
  background-size: 240% 100%;
  animation: rpnSweep 1.4s linear infinite;
}
.rd-retry {
  grid-column: 1 / -1; margin: 8px 4px 0 0; min-height: 30px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--lm-line); background: transparent; color: var(--lm-ink);
  font: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
}
.rd-retry:hover:not(:disabled) { border-color: var(--lm-brand); color: var(--lm-brand); }
.rd-retry:disabled { opacity: .6; cursor: default; }
.rd-retry[hidden] { display: none; }
.rd-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 60;
  width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto;
  padding: 16px; border: 1px solid var(--lm-line); border-radius: 14px; background: var(--lm-surface);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--lm-ink) 40%, transparent);
  animation: rdIn .16s ease-out both;
}
.rd-pop[hidden] { display: none; }

/* ============================================================
   THE LANDING: chips fly from the loom rows to the findings rows
============================================================ */
.v2-fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.v2-fly-chip {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 600 12px/18px var(--font-ui, Inter, system-ui, sans-serif);
  padding: 2px 9px; border-radius: 999px; background: var(--lm-surface); border: 1px solid var(--lm-line);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--lm-ink) 40%, transparent);
  will-change: transform, opacity;
}
.v2-fly-chip.sev-critical { color: var(--lm-crit); }
.v2-fly-chip.sev-high { color: var(--lm-high); }
.v2-fly-chip.sev-medium { color: var(--lm-med); }
.v2-fly-chip.sev-low { color: var(--lm-low); }
.v2-landed { animation: v2Landed .9s ease-out; }
@keyframes v2Landed {
  from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, var(--accent, #1a2fe6)) 35%, transparent); }
  to { box-shadow: 0 0 0 2px transparent; }
}

/* the run dialog's time row (three cells) and its background note */
.cost-est .ce-grid-sm:has(#ceTime) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cost-est .ce-bg { color: var(--ink-3, var(--text-muted)); }